@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Dancing+Script:wght@400..700&family=Halant:wght@300;400;500;600;700&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Jost:ital,wght@0,100..900;1,100..900&family=Manrope:wght@200..800&family=Marcellus&family=Monsieur+La+Doulaise&family=Montez&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Nothing+You+Could+Do&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Princess+Sofia&family=Road+Rage&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rock+Salt&family=Tangerine:wght@400;700&display=swap');


html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "Anton", serif;
  color: rgb(255, 255, 255);
  background-color: black !important;
}
h1{
  font-family: "Anton", serif;

}
a{
  text-decoration: none !important;
}
p{
  font-family: "Josefin Sans", serif;}
#header-video{
  padding: 0px !important;
    position: relative;
  background: #ffffff;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 960px;
    margin-top: -50px;
  }
  
  
  #video-background1 {
       top: 0;
       right: 0;
       bottom: 0;
       left:100px;
       overflow: hidden;
       justify-content: center;
       align-items: center;
       background-blend-mode: multiply;
       z-index: 1;
       width: 100%;
       height: 100.7vh;
       
   
     }
   
     #video-background1 video {
       width: 100%;
       height: 970px;
       object-fit: cover;
     }
     .dark-overlay1 {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgb(0,0,0);
       background: linear-gradient(0deg, rgba(0,0,0,0.9724264705882353) 0%, rgba(29,53,63,0) 100%);
       
       z-index: 2; /* Place it above the video */
     }
   
     .video-content1 {
       z-index: 2 !important;
       position: absolute;
       top: 55%;
       left:38%;
       transform: translate(-33%, -50%);
width: 75%;
       color: #ffffff;
       padding: 10px;
       display: grid !important;

       font-weight: bold;
  
     }
     .video-content1 h1{
      font-family: "Rock Salt", serif;
        color: #FFFFFF;
        font-size: 6vw !important;


     }
     
     .video-content1 .title2{
      font-family: "Rock Salt", serif;
        color: #B5252A;
        font-size: 6vw !important;
text-align: center;
position: relative;
margin-top: -55px;

     }

     .btn-close {
      --bs-btn-close-color: #ffffff !important;
      --bs-btn-close-bg: url('../photos/icons/close-button.png');
      --bs-btn-close-opacity: 0.5;
      --bs-btn-close-hover-opacity: 0.75;
      --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
      --bs-btn-close-focus-opacity: 1;
      --bs-btn-close-disabled-opacity: 0.25;
      --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
      box-sizing: content-box;
      width: 1em;
      height: 1em;
      padding: .25em .25em;
      color: white;
      background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
      border: 0;
      border-radius: .375rem;
      opacity: var(--bs-btn-close-opacity);
  }
.nav-link{
  color: white !important;
  font-family: "Anton", serif;
font-weight: 100!important;
letter-spacing: 1px;
}
    .offcanvas{
      background: black !important;
    }
    /* From Uiverse.io by ercnersoy */ 
.button {
  padding: 1rem 2rem;
  border: 0;
  box-shadow: 0px 0px 40px 0px #B5252A;
  font-weight: light;
  color: white;
  background-color: #B5252A;
  letter-spacing: .2rem;
 }
 
 .button:hover {
  animation: changeBg 1s infinite;
  -webkit-animation-duration: 10s;
 }
 
 @keyframes changeBg {
  0%,
   100% {
   box-shadow: 0px 0px 40px 0px #B5252A;
  }
 
  25% {
   box-shadow: 0px 0px 40px 0px turquoise;
   background-color: turquoise;
  }
 
  50% {
   box-shadow: 0px 0px 40px 0px purple;
   background-color: purple;
  }
 
  75% {
   box-shadow: 0px 0px 40px 0px rgb(191, 204, 11);
   background-color: rgb(191, 204, 11);
  }
 }
 .navbar-toggler {
  padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
  font-size: var(--bs-navbar-toggler-font-size);
  line-height: 1;
  color: white !important;
  background-color: transparent;
  border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
  border-radius: var(--bs-navbar-toggler-border-radius);
  transition: var(--bs-navbar-toggler-transition);
}
.artists{
  background: url('../photos/bg_body.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  background-attachment: fixed;
  padding-top: 100px;
  padding-bottom: 100px;
}
.title1{
  font-size: 4vw;
}
.card1 {
  width: 300px;
  height: 400px;
  background-size: cover;
  background-position: center;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Background image inside a pseudo-element for zoom effect */
.card1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit; /* Inherits the inline background image */
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease-in-out;
  z-index: 0;
}

/* Dark overlay effect */
.card1::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0); /* Initially transparent */
  transition: background 0.5s ease-in-out;
  z-index: 1;
}

/* Zoom effect & dark overlay on hover */
.card1:hover::before {
  transform: scale(1.1);
}

.card1:hover::after {
  background: rgba(0, 0, 0, 0.5); /* Dark overlay appears */
}

/* Title appears in the center on hover */
.title {
  background: url('../photos/fire.png');
  background-position: center;
  background-size: cover !important;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  font-family: "Rock Salt", serif;
  color: white;
  font-size: 17px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  padding: 37px;
  height: 120px;
  border-radius: 10px;
  position: absolute;
  opacity: 0; /* Hidden initially */
  transition: opacity 0.3s ease-in-out;
  text-align: center;
  z-index: 2; /* Ensure it stays above the overlay */
}

/* Show title on hover */
.card1:hover .title {
  opacity: 1;
}

.title3{
  display: none;
}

.cover-bg{
  background: url('../photos/8.jpg'), rgba(0, 0, 0, 0.723);
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  padding-top: 150px;
  padding-bottom: 150px;
}

.card3 {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
border: none;
  cursor: pointer;
  border-radius: 0px;
}

.card-image3 {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.card3:hover .card-image3 {
  transform: scale(1);
  border-radius: 0px;
}

.card-overlay3 {
  position: absolute;
  
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background: rgba(255, 255, 255, 0.426);

  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.card3:hover .card-overlay3 {
  opacity: 1;
}

.tab.active{
  color: #B5252A !important;
}

.contact-box{

}

/*about.html*/

.section-bg{
  background: url('../photos/about-bg.jpg'), rgba(0, 0, 0, 0.375);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  padding-top: 200px;
  padding-bottom: 150px;
}

.about-section{
  background: url('../photos/icons/guitar.png');
  background-position: top right;
  background-size: 10%;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
}


/*artists.html*/

.section-bg1{
  background: url('../photos/Gjirokastra\ Rocks-6670.jpg'), rgba(0, 0, 0, 0.375);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  padding-top: 200px;
  padding-bottom: 150px;
}


.card2 {
  width: auto;
  height: 400px;
  background-size: cover;
  background-position: center;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Background image inside a pseudo-element for zoom effect */
.card2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit; /* Inherits the inline background image */
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease-in-out;
  z-index: 0;
}

/* Dark overlay effect */
.card2::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0); /* Initially transparent */
  transition: background 0.5s ease-in-out;
  z-index: 1;
}

/* Zoom effect & dark overlay on hover */
.card2:hover::before {
  transform: scale(1.1);
}

.card2:hover::after {
  background: rgba(0, 0, 0, 0.5); /* Dark overlay appears */
}

/* Title appears in the center on hover */
.title {
  background: url('../photos/fire.png');
  background-position: center;
  background-size: cover !important;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  font-family: "Rock Salt", serif;
  color: white;
  font-size: 17px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  padding: 37px;
  height: 120px;
  border-radius: 10px;
  position: absolute;
  opacity: 0; /* Hidden initially */
  transition: opacity 0.3s ease-in-out;
  text-align: center;
  z-index: 2; /* Ensure it stays above the overlay */
}

/* Show title on hover */
.card1:hover .title {
  opacity: 1;
}

/*gallery.html*/

.section-bg2{
  background: url('../photos/2021/img6.jpg'), rgba(0, 0, 0, 0.375);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  padding-top: 200px;
  padding-bottom: 150px;
}

.circle1 {
  position: relative;
  margin-bottom: -50px;
  width: 40px;  /* Example width */
  height: 40px; /* Example height */
  background-color: #B5252A; /* Example background color */
  border-radius: 50%; /* Makes the div a circle */
  display: flex !important;
  justify-content: center;
  align-items: center;
   /* Optional, if you use absolute positioning for the icon */
  transition: 0.3s ease-in-out;
}
.circle1:hover{
  transform: translateY(-10px);
  background: white;
  color: #B5252A;
}
.col-center1{
  justify-content: end;
  text-align: end; 
} 
@media(max-width:1000px){
    .artists{
  background: #20201E;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  background-attachment: scroll;
  padding-top: 100px;
  padding-bottom: 100px;
}
  .col-center, .col-center1{
    justify-content: center !important;
    text-align: center !important;
  }
  .socials-row{
    justify-content: center !important;
  }
  .artist-row{
    border: 1px solid rgba(255, 255, 255, 0.202);
    margin: 10px !important;
  }
  .about-section{
    background: url('../photos/icons/guitar.png');
    background-position: top right;
    background-size: 35%;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
  }
  .tab{
    padding: 20px 0px 20px 0px;
    margin: 0px;
    font-size:12px !important;
    }
    .nav-pills a {
    font-family: 'Urbanist';
    font-weight: 600;
    font-size: 16px;
}
#video-background1 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 100px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    background-blend-mode: multiply;
    z-index: 1;
    width: 100%;
    height: 112.7vh;
}
  .video-content1 {
    top: 50%;
    width: 90%;

}
.video-content1 h1{
  font-family: "Rock Salt", serif;
    color: #FFFFFF;
    font-size: 7vw !important;


 }
.video-content1 .title2{
  font-family: "Rock Salt", serif;
    color: #B5252A;
    font-size: 6vw !important;
text-align: center;
position: relative;
margin-top: -15px;

 }
 .title1{
  font-size: 7vw;
}

.card1 {
  width: auto;
  height: 400px;

}

/* Background image inside a pseudo-element for zoom effect */
.card1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit; /* Inherits the inline background image */
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease-in-out;
  z-index: 0;
}

/* Dark overlay effect */
.card1::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0); /* Initially transparent */
  transition: background 0.5s ease-in-out;
  z-index: 1;
}

/* Zoom effect & dark overlay on hover */
.card1:hover::before {
  transform: scale(1.1);
}

.card1:hover::after {
  background: rgba(0, 0, 0, 0); /* Dark overlay appears */
}

/* Title appears in the center on hover */
.title {display: none;
}

.title3{
  display: block;
  background: url('../photos/fire.png');
  background-position: center;
  background-size:45% !important;
  text-align: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  font-family: "Rock Salt", serif;
  color: white;
  font-size: 17px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  padding: 37px;
  height: 120px;
  margin-bottom: -80px;
margin-right: -200px;
  position: relative;
  z-index: 100;
}
}

/*Animations*/
.fadeinleft {
  opacity:0;
  transform: translateX(200px);
  transition: all 1.3s ease-out;
}
.fadeinright{
  opacity: 0;
  transform: translateX(-200px);
  transition: all 0.8s ease-out;
}
.fadeindown{
  opacity: 0;
  transform: translateY(-100px);
  transition: all 1.2s ease-out;
}
.fadeinup{
  opacity: 0;
  transform: translateY(100px);
  transition: all 1.2s ease-out;
}
.fade-in{
  opacity:0;
  transition: all 1.3s ease-in;
}
.active-left,.active,.active-right,.active-down,.active-up{
  opacity:1;
  transform: translateX(0);
  transform: translateY(0);
}

.fadein{
opacity: 0;
}