.montserrat-daFont {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Montserrat", sans-serif;
 
}

.input-wrapper {
  position: relative;
}

.input-wrapper button {
  position: absolute;
  right: 0;
  right: -10px; /* Adjust this value as needed */
}

.content {
  width: 360px;
  height: 40px;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, .2);
  border-radius: 60px;
  overflow: hidden;
}




.subscription {
  position: relative;
  width: 100%;
  height: 100%;
}

.subscription .add-email{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding: 0 20px;
}

.subscription .submit-email {
  position: absolute;
  top: 0;
  right: 0;
  height: calc(100% - 2px);
  width: 100px;
  border: none;
  border-radius: 60px;
  outline: none;
  margin: 1px;
  padding: 0 20px;
  cursor: pointer;
  background: #CB286F;
  color: #FFFFFF;
  transition: width .35s ease-in-out,
    background .35s ease-in-out;
}

.subscription.done .submit-email {
  width: calc(100% - 2px);
  background: linear-gradient(90deg, blue, #00ffff, #ffee00, #fc4fb4 ); 
  color: #0c0052;
  font-weight: 600;
}

.subscription .submit-email .before-submit,
.subscription .submit-email .after-submit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 38px;
  transition: visibility .35s ease-in-out,
    opacity .35s ease-in-out;
}

.subscription.done .submit-email .before-submit,
.subscription:not(.done) .submit-email .after-submit {
  visibility: hidden;
  opacity: 0;
}

.subscription .submit-email .after-submit {
  transition-delay: .35s;
}

.subscription:not(.done) .submit-email .before-submit,
.subscription.done .submit-email .after-submit {
  visibility: visible;
  opacity: 1;
}


.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}


@keyframes floatAnimation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}


header {
    background-color: #9B1A5B;
    display: grid; /* Use grid layout for the .band section */
    grid-template-columns: repeat(12, 1fr); /* Divide into 12 equal columns */
    background-size: cover;
    background-repeat: no-repeat;
    height: 13vh;
    background-blend-mode: darken;
    
    position: relative;
}


    
    
    #timerSpan {
      grid-row-start: 1;
      color: #FFE2F1;
      text-align: left;
      font-size: 30px;
      font-weight: 800;
      letter-spacing: 1px;
      grid-column-start: 9;
    grid-column-end: 13;
    padding-top: 1rem;

}

#timerSpan h2 {
margin-top: -0.5rem;
font-size: 2em;


}

#timerSpan h4 {
    margin-top: -4rem;
    padding: 0;
    font-size: 0.5em;
    word-spacing: 60px;
    padding-left: 15px;
    display: inline;
    
    }

    #showS{
      
      color: #FFE2F1;
      font-size: 16px;
      display: flex;
    }
    #showStart{
      grid-row-start: 1;
      grid-column-start: 9;
    grid-column-end: 12;
      color: #FFE2F1;
      font-size: 20px;
      display: flex;
      padding-top: 1rem;
      
    }

#emailSpan {
  grid-column-start: 3;
  grid-column-end: 7;
    color: #FFE2F1;
    text-align: center;
    padding-top: 3rem;
    padding-left: 0.5rem;
    font-size: 1em;
    display: inline;
    


}

#bgVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure the video covers the entire background */
  z-index: -1; /* Ensure the video is positioned behind other content */
  margin: 0;
  padding: 0;
  
}

.video {
  width: 100%; /* Initially fill container width */
  height: 100%; /* Initially fill container height */
  
}

.video-wrapper {
  position: absolute; /* Position the video wrapper relative to the grid container */
    top: 0;
    left: 0;
  width: 100%;
  height: 100%; /* Ensure the video wrapper fills its container */
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black; /* Set the desired background color */
  z-index: -2; /* Ensure the overlay is behind the video */
}


.branding {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, auto);
  height: calc(100vh - 12vh);
  width: 100%;
  margin: 0;
  padding: 0;
  color: rgb(196, 185, 195);
  text-align: center;
  
}



.branding2 {
    display: grid; /* Use grid layout for the .band section */
    grid-template-columns: repeat(12, 1fr); /* Divide into 12 equal columns */
    grid-template-rows: repeat(3, auto);
    /* height: calc(100vh - 12vh); */
    /* background-color: black; */
    width: 100%;
    margin: 0;
    padding: 0;
    color: rgb(196, 185, 195);
    text-align: center;
    padding-bottom: 3rem;
    position: relative;
    
}

.bandName {
  display: grid; /* Use grid layout for the .band section */
  grid-template-columns: repeat(12, 1fr); /* Divide into 12 equal columns */
  grid-template-rows: repeat(3, auto);
  height: calc(100vh - 24vh);
  background-color: black;
  width: 100%;
  margin: 0;
  color: rgb(196, 185, 195);
  text-align: center;
  
}

#title  {
    grid-column-start: 3;
    grid-column-end: 12;
    grid-row: 1;
    text-align: center;
    padding-top: 5rem;
}
#bigLogo {
width: 100%;


}

#minAnimLog {

  display: none;
  
  }

#moto{
    grid-column-start: 3; /* Start at column 2 */
    grid-column-end: 12; /* End at column 6 */
    grid-row: 2;
    margin: 0;
    
    font-size: 2em;
    color: #FFE2F1;
    letter-spacing: 3px; 

    }



#date {
    grid-column-start: 3; /* Start at column 2 */
    grid-column-end: 12; /* End at column 6 */
    grid-row: 3;
    font-size: 4em;
    margin: 0;
    color: #FFE2F1;
    

}

#whoWeAre{
  grid-column-start: 3; /* Start at column 2 */
  grid-column-end: 12; /* End at column 6 */
  grid-row: 2;
  margin: 0;
  font-size: 1em;
  color: #9B1A5B;
  background-color: #FFE2F1;
  margin-top: -1rem;
  text-align: left;
  padding: 2rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  border: 2px solid #CB286F;
  font-weight: 500;

  }

  .centered {
    text-align: center; /* This centers the content horizontally */
  }





#ourStory  {
  grid-column-start: 3;
  grid-column-end: 12;
  grid-row: 1;
  text-align: center;
  font-size: 3em;
  animation: floatAnimation 3s ease-in-out infinite; 
  
}

#ourStory strong {
color: white;

}

#bandName  {
  grid-column-start: 8;
  grid-column-end: 12;
  grid-row: 1;
  text-align: left;
  padding-top: 2rem;
  font-size: 3em;
  
}



.branding img {
    max-width: 96rem;
    height: auto;
   }

.socialBand {
  
    
    display: grid; /* Use grid layout for the .band section */
    grid-template-columns: repeat(12, 1fr); /* Divide into 12 equal columns */
    background-color: #9B1A5B;
    height: 12vh;
    position: relative;
}




.story {
    
    display: grid; /* Use grid layout for the .band section */
    grid-template-columns: repeat(12, 1fr); /* Divide into 12 equal columns */
    grid-template-rows: repeat(3, auto);
    height: 70vh;
    position: relative; /* Positioning context for absolute positioning */
    background-color: #1E1E1E;
    /* margin-bottom: -0.5rem; */
    color: #9B1A5B;
    margin-top: -1rem;
}

.story#text p {

  grid-column-start: 3;
  grid-column-end: 11;
font-weight: 500;
color: #d38baa;
font-size: 2em;

}

#band-video{

width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
z-index: 0;
filter: opacity(60%);



}

.bandContainer1{
  grid-column-start: 3;
  grid-column-end: 6;
  background-color: #1E1E1E;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 40px;
  margin-bottom: 60px;
  min-height: 9rem;
  min-width: 6rem;
}
.bandContainer1:hover{
  box-shadow: 5px 5px 5px #9B1A5B ;
  transform: scale(1.1);
}
.bandContainer2{
  grid-column-start: 6;
  grid-column-end: 9;
  background-color: #1E1E1E;;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 40px;
  margin-bottom: 60px;
  min-height: 9rem;
  min-width: 6rem;
}
.bandContainer2:hover{
  box-shadow: 5px 5px 5px #9B1A5B ;
  transform: scale(1.1);
}
.bandContainer3{
  grid-column-start: 9;
  grid-column-end: 12;
  background-color: #1E1E1E;;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 40px;
  margin-bottom: 60px;
  min-height: 9rem;
  min-width: 6rem;
}
.bandContainer3:hover{
  box-shadow: 5px 5px 5px #9B1A5B ;
  transform: scale(1.1);
}

.caption {
  display: flex;
  justify-content: center;
  align-items: center;
}

.caption a{
  position: relative;
  z-index: 0;
  text-decoration: none;
  font-weight: 800;
  color: #F2D6AF;

}


.bandStory {
    
  display: grid; /* Use grid layout for the .band section */
  grid-template-columns: repeat(12, 1fr); /* Divide into 12 equal columns */
  grid-template-rows: repeat(3, auto);
  height: auto;
  position: relative; /* Positioning context for absolute positioning */
  /* background-color: #1E1E1E; */
  margin-bottom: -0.5rem;
  color: #9B1A5B;
}




.bandStory p {
  grid-column-start: 2; /* Start at column 2 */
  grid-column-end: 11; /* End at column 6 */
  color: #9B1A5B;
  margin: 0;
  font-size: 3em;
  font-style: bold;
  padding-top: 2rem;
  padding-left: 4rem;
  
}

.bandMembers {
    
  display: grid; /* Use grid layout for the .band section */
  grid-template-columns: repeat(12, 1fr); /* Divide into 12 equal columns */
  grid-template-rows: repeat(3, auto);
  height: 75vh;
  position: relative; /* Positioning context for absolute positioning */
  background-color: #1E1E1E;
  margin-bottom: -0.5rem;
  color: #9B1A5B;
}

.bandMembers .container1 {
  grid-column-start: 3; /* Start at column 2 */
  grid-column-end: 7; /* End at column 6 */
grid-row: 2;
background-color: #D82F77;
margin: 2rem;
opacity: 13%;
min-height: 12rem;
}

.bandMembers .container2 {
  grid-column-start: 8; /* Start at column 2 */
  grid-column-end: 12; /* End at column 6 */
grid-row: 2;
background-color: #D82F77;
margin: 2rem;
opacity: 13%;
min-height: 12rem;
}

.bandMembers .container3 {
  grid-column-start: 3; /* Start at column 2 */
  grid-column-end: 7; /* End at column 6 */
grid-row: 3;
background-color: #D82F77;
margin: 2rem;
opacity: 13%;
min-height: 12rem;
}

.bandMembers .container4 {
  grid-column-start: 8; /* Start at column 2 */
  grid-column-end: 12; /* End at column 6 */
grid-row: 3;
background-color: #D82F77;
margin: 2rem;
opacity: 13%;
min-height: 12rem;
}



.bandMembers p {
  grid-column-start: 2; /* Start at column 2 */
  grid-column-end: 7; /* End at column 6 */
  grid-row: 1;
  color: #9B1A5B;
  margin: 0;
  font-size: 3em;
  font-style: bold;
  padding-top: 2rem;
  padding-left: 4rem;
  
}

#aFusion{

    grid-column-start: 6;
    grid-column-end: 8;
    grid-row: 1;
    text-align: center;
    padding-top: 2rem;
    font-size: 3em;
    
    

}

.story#text strong {

  
  font-size: 2em;
  
  

}

#summary {
    grid-column-start: 4;
    grid-column-end: 10;
    text-align: center;
    grid-row: 2;
    
    
    

}

#learnMore {
    grid-column-start: 6;
    grid-column-end: 8;
    align-items: center;
    grid-row: 3;


}








.prog {
    
    display: grid; /* Use grid layout for the .band section */
    grid-template-columns: repeat(12, 1fr); /* Divide into 12 equal columns */
    height: 50vh;
    background-color: #9B1A5B;
    color: white;
    height: 50vh;
    position: relative;
}



.prog h1 {
    grid-column-start: 2; /* Start at column 2 */
    grid-column-end: 7; /* End at column 6 */
    margin: 0;
    font-size: 3em;
    padding-top: 2rem;
    padding-left: 4rem;
    
    
}

.para1 {
    grid-column-start: 3; /* Start at column 2 */
    grid-column-end: 6; /* End at column 6 */
    
    margin-right: 1rem;
    font-size: 1.5em;
    padding: 20px;
    

}

.para2 {
    grid-column-start: 6; /* Start at column 2 */
    grid-column-end: 9; /* End at column 6 */
    
    margin: 0;
    font-size: 1.5em;
    padding: 20px;
    

}

.para3 {
    grid-column-start: 9; /* Start at column 2 */
    grid-column-end: 12; /* End at column 6 */
    
    margin: 0;
    font-size: 1.5em;
    padding: 20px;
    

}

.para1 strong,
.para2 strong,
.para3 strong {
    
    font-size: 1.5em;
}

.para1  p {
font-size: 1em;
margin-bottom: 1rem;

}
.para2 p {
    font-size: 1em;
    margin-bottom: 1rem;
    
    }

    .para3  p {
        font-size: 1em;
        margin-bottom: 1rem;
        
        }
        

.band {
    
    display: grid; /* Use grid layout for the .band section */
    grid-template-columns: repeat(12, 1fr); /* Divide into 12 equal columns */
    grid-template-rows: repeat(4, auto);
    background-color: #1E1E1E;
    height: 50vh;
    position: relative;
}

.band p {
    grid-column-start: 2; /* Start at column 2 */
    grid-column-end: 7; /* End at column 6 */
    color: #9B1A5B;
    margin: 0;
    font-size: 3em;
    font-style: bold;
    padding-top: 2rem;
    padding-left: 4rem;
    
}

.band h1 {
  
    grid-column-start: 2; /* Start at column 2 */
    grid-column-end: 7; /* End at column 6 */
    margin: 0;
    font-size: 3em;
    padding-top: 2rem;
    padding-left: 4rem;
    
      color: #9B1A5B;
    
}





.contact {
    
    display: grid; /* Use grid layout for the .band section */
    grid-template-columns: repeat(12, 1fr); /* Divide into 12 equal columns */
    position: relative; /* Positioning context for absolute positioning */
    height: 60vh;
    background-color: #9B1A5B;
    

}

.contact h1 {
  grid-column-start: 5; /* Start at column 2 */
    grid-column-end: 10; /* End at column 6 */
    grid-row-start: 1;
  margin: 0;
    font-size: 3em;
    padding-top: 2rem;
    
    display: flex;
    justify-content: center;
    color: #F2D6AF;


}



.contact p {
    grid-column-start: 5; /* Start at column 2 */
    grid-column-end: 10; /* End at column 6 */
    grid-row-start: 1;
    margin: 0;
    font-size: 3em;
    padding-top: 2rem;
    display: flex;
    justify-content: center;
    color: #F2D6AF;
    
}

.contact form{
  grid-row-start: 2;
  grid-column-start: 5;
  grid-column-end: 10;
}
.submit{
  height: 40px;
  width: 100px;
  background-color: #CB286F;
  color: #F2D6AF;
  padding: 6px 12px;
  border-radius: 10px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid #CB286F;

}

.submit:hover{
  color: #E8ABC5;
  background-color: none;
  border:2px solid #9B1A5B;
}

input::placeholder, textarea::placeholder{
color: #F2D6AF;
}

input[type=text], select, textarea{
  background: rgba(57, 0, 32, 0.499);
  padding: 12px;
  border-radius: 10px;
  border: 2px solid #CB286F;
  color: #E8ABC5; 
  resize: vertical;
  box-sizing: border-box;
  margin-top: 5px;
  margin-bottom: 15px;
  width: 100%;
 


}
input[type=submit]{
  background-color: #9B1A5B;
  color: #F2D6AF;
  cursor: pointer;


}
input[type=submit]:hover{
  background-color: #9B1A5B;
}


.textContainer {
    grid-column: 2 / 8;
}



footer {
    display: grid; /* Use grid layout for the .band section */
    grid-template-columns: repeat(12, 1fr); /* Divide into 12 equal columns */
    grid-template-rows: repeat(3, auto);
    min-height: 24vh;
    background-color: #f52c5e;
    
  }
  
#label {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row: 1;
    


}
#bottomMail {
    grid-column-start: 5;
    grid-column-end: 9;
    grid-row: 1;
    }
#bottomAddress {
    grid-column-start: 10;
    grid-column-end: 12;
    grid-row: 1;


}

footer .lastLine {
    grid-column-start: 5;
    grid-column-end: 9;
    grid-row: 3;
    clear: both;
    
   
  
  bottom: 0;
  }



  .custom-line {
    width: 80%; /* Adjust the width as needed */
    height: 0px; /* Adjust the height as needed */
    background-color: black; /* Adjust the color as needed */
    margin: 0 auto; /* Automatically centers the line horizontally */
    margin-bottom: 1.5rem;
    margin-top: 1rem;
  }
  
  footer .footerContainer {
    width: 31%;
    float: left;
    padding-top: 1rem;
    padding-left: 1rem;
    max-height: 10rem;
  }
  
  

  
/* menu */

/* The side navigation menu */
.sidenav {
    height: 100vh; /* 100% Full-height */
    z-index: 2;
    width: 9rem; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #CB286F; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 30px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    display: grid; /* Use grid layout for the .band section */
    grid-template-rows: repeat(10, 1fr); /* Divide into 12 equal columns */
  }
  
  .sidenav #menuCheckbox {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  
  .sidenav .top {
    max-width: 5.5rem;
    height: auto;
    margin-left: 1.6rem;
    margin-top: 3rem;
    grid-row-start: 2;
    grid-row-end: 5;
  }
  
  .sidenav .bottom {
    margin-top: 9rem;
    margin-left: 3rem;
    grid-row-start: 7;
    grid-row-end: 9;
  }
  
  
  .sidenav .bottom img {
    height: auto;
    width: 2.5rem;
    
    
  }
  
  #mySidenav.sidenav a {
    transform: translateX(-80px);
    opacity: 0;
    animation: slideSide 2.5s;
    animation-fill-mode: forwards;
    z-index: 2;
  }
  
  #mySidenav.sidenav a:nth-child(1) {
    animation-delay: 0.3s;
  }
  
  #mySidenav.sidenav a:nth-child(2) {
    animation-delay: 0.6s;
  }
  
  #mySidenav.sidenav a:nth-child(3) {
    animation-delay: 0.9s;
  }
  
  #mySidenav.sidenav a:nth-child(4) {
    animation-delay: 1.2s;
  }
  
  #mySidenav.sidenav a:nth-child(5) {
    animation-delay: 1.5s;
  }

/* Add styles for the band links */
#bandLinks {
  display: none; /* Hide the band links by default */
  margin-top: 5px; /* Add some space between the Band menu item and band links */
  transform: translateX(140px);
}

#bandLinks a {
  display: block;
  color: white;
  padding: 5px;
  text-decoration: none;
  font-size: 2em;
}

#bandLinks a:hover {
  background-color: rgba(255, 255, 255, 0.2); /* Add hover effect */
}

#bandLinks a:nth-child(3) {
  margin-bottom: 5px; /* Reduce the bottom margin for the "Bands" menu item */
}


  .topnav {
    display:none;
  }

  /* FORM STYLES */

form#contactForm {
    width: 40%;
    padding: 2rem;
    margin: 1rem auto;
    color: white;
  }
  
  .form-group input,
  textarea {
    width: 100%;
  }
  
  textarea {
    resize: vertical;
  }
  
  .form-group {
    margin: 0.5rem;
  }
  
  #contactForm h2 {
    font-size: 2rem;
  }
  
  /* Navigation and forms stuff */
  
  /* The navigation menu links */
  .sidenav a {
    padding: 4px 8px 8px 9.5rem;
    text-decoration: none;
    font-size: 3em;
    color: #ffffff;
    display: block;
    transition: 0.3s;
  }
  
  /* When you mouse over the navigation links, change their color */
  .sidenav a:hover {
    color: #e9a9a9;
  }
  
  /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
  #main {
    transition: margin-left 0.5s;
    padding: 20px;
  }
/* band name */
.bandName {
    display: grid; /* Use grid layout for the .band section */
    grid-template-columns: repeat(25, 1fr); /* Divide into 12 equal columns */
    grid-template-rows: 2fr 0.2fr;
    background-color: black;
    width: 100%;
    margin: 0;
    color: rgb(196, 185, 195);
    text-align: end;
    height: 700px;
    
  }

  .bandName img{
    width: 100%;
    height: 100%;
     grid-column: 4 / 26;
     position: absolute;
     object-fit: cover;
     z-index: 0;
   
   }
   .bandName p{
     position: relative;
     color: white;
     height: 60px;
     grid-column: 4 / 25;
     grid-row: 2;
   }

/* band social */
.socialBand {
  
    
    display: grid; /* Use grid layout for the .band section */
    grid-template-rows: 1fr 1fr;
    grid-template-columns: repeat(12, 1fr); /* Divide into 12 equal columns */
    background-color: #9B1A5B;
    position: relative;
    padding: 5px;
    padding-bottom: 20px;
    min-height: 7rem;
}

.socialBand img{
  height: 60px;
  width: 60px;

}
.socialBand a{
  grid-row-start: 2;
  grid-column-start: 2;
  grid-column-end: 12;
  text-align: center;
  margin: 0 10px;
  
}
.socialBand p{
  grid-row-start: 1;
  grid-column-start: 2;
  grid-column-end: 12;
  text-align: center;
  color: white;
}
.socialContainer{
  grid-row-start: 2;
  grid-column-start: 2;
  grid-column-end: 12;
  text-align: center;
}

/* band story */

.bandStory {
    
    display: grid; /* Use grid layout for the .band section */
    grid-template-columns: repeat(12, 1fr); /* Divide into 12 equal columns */
    grid-template-rows: repeat(2, auto);
    gap: 10px;
    position: relative; /* Positioning context for absolute positioning */
    margin-bottom: -0.5rem;
    color: #9B1A5B;
    padding: 40px 0px;
    width: 100%;
  }
  .bandStory p {
    grid-column-start: 8; /* Start at column 2 */
    grid-column-end: 11; /* End at column 6 */
    color: #9B1A5B;
    margin: '10px';
    font-size: 1.5em;
    font-style: bold;
    text-align: start;
  
    
  }
  #background-video {
    position: absolute;
    z-index: -1; 
    object-fit: cover;
    height: 100%;
    width: 100%;
  }

  .storyContainer{
    grid-column-start: 8;
    grid-column-end: 30;
    grid-row: span 2;
    background-color: #1E1E1E;
    padding:20px  40px;
  }
  
  .storyContainer h1{
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.5em;
  }
  /* other bands */
  .bandOther{
    display: grid; /* Use grid layout for the .band section */
      grid-template-columns: repeat(12, 1fr); /* Divide into 12 equal columns */
      grid-template-rows: 0.5fr 1fr;
      background-color: #000;
      height: 50vh;
      position: relative;
      gap: 30px;
      padding-top: 10px;
      padding-bottom: 50px;
      width: 100%;
  }
  .bandOther .otherBands{
    grid-column-start: 1;
    grid-column-end: 12; 
    color: #9B1A5B;
    margin: 0;
    font-size: 3em;
    font-style: bold;
    padding-top: 2rem;
    display: flex;
    justify-content: center;
  }
  .bandContainer4{
    grid-column-start: 3;
    grid-column-end: 7;
    background-color: #1E1E1E;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .bandContainer4:hover{
    box-shadow: 5px 5px 5px #9B1A5B ;
    transform: scale(1.1);
  }
  .bandContainer5{
    grid-column-start: 8;
    grid-column-end: 12;
    background-color: #1E1E1E;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .bandContainer5:hover{
    box-shadow: 5px 5px 5px #9B1A5B ;
    transform: scale(1.1);
  }

  @media screen and (max-width: 1200px) {

    #emailSpan.pois {
    
    display: none;
    
    }

  }
  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
  @media screen and (max-width: 900px) {
header {
    position: fixed;
    top: 0;
    z-index: 2;
  }

    #learnMore {
      grid-column-start: 4;
      grid-column-end: 8;
      align-items: center;
      grid-row: 3;
  
  
  }

#ourStory strong {
  grid-column-start: 2;
  grid-column-end: 12;
  font-size: 1em;
}

#whoWeAre {

  grid-column-start: 2;
  grid-column-end: 12;

}


  .bandContainer1{
grid-row: 2;
grid-column-start: 4;
grid-column-end: 10;  

  }

  .bandContainer2{
    grid-row: 3;
    grid-column-start: 4;
    grid-column-end: 10;
  }

  .bandContainer3{
    grid-row: 4;
    grid-column-start: 4;
    grid-column-end: 10;
  }

  #bgVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ensure the video covers the entire background */
    z-index: -1; /* Ensure the video is positioned behind other content */
    margin: 0;
    padding: 0;
    
  }

  #ourStory  {
    grid-column-start: 2;
    grid-column-end: 12;
    
  }

  .padBottom {

margin-bottom: 2rem;

  }
  .story {
    
    display: grid; /* Use grid layout for the .band section */
    grid-template-columns: repeat(12, 1fr); /* Divide into 12 equal columns */
    grid-template-rows: repeat(3, auto);
    height: auto;
    position: relative; /* Positioning context for absolute positioning */
    background-color: #1E1E1E;
    margin-bottom: -0.5rem;
    color: #9B1A5B;
    
}

.story#text p {

  grid-column-start: 2;
  grid-column-end: 12;
font-weight: 600;
color: #d38baa;
font-size: 1em;

}

.contact {

height: auto;
padding: 2rem;

}

.contact form {
  grid-row-start: 2;
  grid-column-start: 2;
  grid-column-end: 11;
}

.band {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  background-color: #1E1E1E;
  height: 35vh;
  position: relative;
  
  height: auto;
   

}

header{
height: 4rem;

}

 #timerSpan, #emailSpan, #bigLogo, #showStart {
display:none;


 }   

 #title  {
  
  padding-top: 1rem;
}

#title img {
  width: auto;
  height: 8rem;
}

#minAnimLog {

  display: contents;
  

}

/* second menu Start */

.miniMenu img {
min-height: 3rem;
width: auto;
padding-left: 10px;
padding-top: 10px;


}

.prog {
    
  
  height: auto;
  background-color: #9B1A5B;
  color: white;
  
  
}


 /* Style the navigation menu */
 .topnav {
  overflow: hidden;
  background-color: #CB286F;
  position: relative;
  
  display:contents;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  position: absolute;
  top: 4rem; /* Places the navigation links below the topnav */
  z-index: 1;
  width: 100%;
  background-color: #9B1A5B; /* Match the background color of the topnav */
  display: none;
  text-align: right;
  
}

/* Style navigation menu links */
.topnav  a {
  color: white;
  padding: 20px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
  
}

/* Style the hamburger menu */
.topnav a.icon {
  background: #9B1A5B;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  /* background-color: #ddd; */
  color: black;
}

.topnav img {
max-height: 1.5rem;
width: auto;
margin: 0;

}
/* Style the active link (or home/logo) */
.active {
  background-color: #CB286F;
  color: white;
} 

/* second menu end */


    .sidenav {
    display:none;

    }
  .prog h1 {
    font-size: 1.5em;
    padding-top: 0.5rem;
    padding-left: 1rem;
    grid-column-start: 1;
    grid-column-end: 12;
    grid-row: 1;
    margin-left: 1rem;
    
    }

   .prog strong{
font-size: 1em;


   } 
   .para1 {
    grid-column-start: 2;
    grid-column-end: 12;
    grid-row: 2;
    
    font-size: 1em;
    padding: 20px;
    
} 


.para2 {
  grid-column-start: 2;
  grid-column-end: 12;
  grid-row: 3;
 
  font-size: 1em;
  padding: 20px;
  
  
}

.para3 {
  grid-column-start: 2;
  grid-column-end: 12;
  grid-row: 4;
  
  font-size: 1em;
  padding: 20px;
}

body strong {
  font-size: 24px;
    
  }

  

  #bottomMail {
    grid-column-start: 2;
    grid-column-end: 12;
    grid-row: 1;
    padding-top: 1rem;
    }

footer .custom-line {
display: none;


}
.band h1 {
  font-size: 1.5em;
    padding-top: 0.5rem;
    padding-left: 1rem;
    grid-column-start: 1;
    grid-column-end: 12;
    grid-row: 1;
    margin-left: 1rem;
}



.contact h1 {
  font-size: 1.5em;
    padding-top: 0.5rem;
    padding-left: 1rem;
    grid-column-start: 1;
    grid-column-end: 12;
    grid-row: 1;
    margin-left: 1rem;
    display: grid; /* Reset display property to grid */
    justify-content: initial; /* Reset justify-content property to its initial value */
margin-bottom: 1rem;
    
}


.contact p {
  grid-column-start: 1;
  grid-column-end: 7;
  margin: 0;
  font-size: 3em;
  padding-top: 0.5rem;
  padding-left: 1rem;
}


footer .lastLine {
  grid-column-start: 1;
  grid-column-end: 11;
  grid-row: 3;
  clear: both;
  padding-left: 0.5rem;
  padding-bottom: 0;
  /* padding-top: 1rem; */
  /* padding-bottom: 1rem; */
  /* display: none; */
}

footer h2 {
font-size: 1em;


}
footer {

  min-height: 30vh;
  margin: 0;
}

#bottomAddress {
  grid-column-start: 2;
  grid-column-end: 12;
  grid-row: 1;
  display: none;
}

#label{
display: none;

}


#aFusion {
  grid-column-start: 2;
  grid-column-end: 8;
  grid-row: 1;
  /* text-align: center; */
  padding-top: 1rem;
}


#summary {
  grid-column-start: 2;
  grid-column-end: 10;
  /* text-align: center; */
  grid-row: 2;
  /* transform: translateY(-90px); */
}



}
  
  /* Code for hamburger menu icon */
  
  .menu {
    --s: 50px; /* control the size */
    --c: rgb(255, 255, 255); /* the color */
  
    height: var(--s);
    aspect-ratio: 1;
    border: none;
    padding: 0;
    border-inline: calc(var(--s) / 2) solid #0000;
    box-sizing: content-box;
    --_g1: linear-gradient(
        var(--c) 20%,
        #0000 0 80%,
        var(--c) 0
      )
      no-repeat content-box border-box;
    --_g2: radial-gradient(
        circle closest-side at 50% 12.5%,
        var(--c) 95%,
        #0000
      )
      repeat-y content-box border-box;
    background: var(--_g2) left var(--_p, 0px) top,
      var(--_g1) left calc(var(--s) / 10 + var(--_p, 0px)) top,
      var(--_g2) right var(--_p, 0px) top,
      var(--_g1) right calc(var(--s) / 10 + var(--_p, 0px))
        top;
    background-size: 20% 80%, 40% 100%;
    position: relative;
    clip-path: inset(0 25%);
    -webkit-mask: linear-gradient(
    90deg,
    #0000,
    #000 25% 75%,
    #0000
  );
  mask: linear-gradient(
    90deg,
    #0000,
    #000 25% 75%,
    #0000
  );
    cursor: pointer;
    transition: background-position 0.3s var(--_s, 0.3s),
      clip-path 0s var(--_s, 0.6s);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .menu:before,
  .menu:after {
    content: "";
    position: absolute;
    border-radius: var(--s);
    inset: 40% 0;
    background: var(--c);
    transition: transform 0.3s calc(0.3s - var(--_s, 0.3s));
  }
  
  .menu:checked {
    clip-path: inset(0);
    --_p: calc(-1 * var(--s));
    --_s: 0s;
  }
  .menu:checked:before {
    transform: rotate(45deg);
  }
  .menu:checked:after {
    transform: rotate(-45deg);
  }
  .menu:focus-visible {
    clip-path: none;
    -webkit-mask: none;
    mask: none; 
    border: none;
    outline: 2px solid var(--c);
    outline-offset: 5px;
  }

/* email stuff style */

/* Styling for the email input */
input[type="email"] {
  background: rgba(57, 0, 32, 0.499);
  padding: 12px;
  border-radius: 10px;
  border: 2px solid #CB286F;
  color: #E8ABC5;
  resize: vertical;
  box-sizing: border-box;
  margin-top: 5px;
  margin-bottom: 15px;
  width: 100%;
}
  
button[type="submit"] {
  padding: 0.5vw 1vw; /* Adjust padding using viewport width units */
  font-size: 1vw; /* Adjust font size using viewport width units */
  border: none; /* Remove default button border */
  border-radius: 2vw; /* Add rounded corners using viewport width units */
  background-color: #CF286F; /* Change background color */
  color: #fff; /* Change text color */
  cursor: pointer; /* Add cursor pointer on hover */
  margin-left: -1.5rem; /* Adjust margin as needed */
  letter-spacing: 0.1vw; /* Adjust letter spacing using viewport width units */
}

   /* Styling for the submit button */
   button[type="learn"] {
    padding: 9.5px 86px; /* Adjust padding as needed */
    font-size: 18px; /* Adjust font size as needed */
    border: none; /* Remove default button border */
    border-radius: 12px; /* Add rounded corners */
    background-color: #CF286F; /* Change background color */
    color: #F2D6AF; /* Change text color */
    cursor: pointer; /* Add cursor pointer on hover */
    
    letter-spacing: 1.6px; 
  }
  
  /* Add hover effect */
  button[type="submit"]:hover {
    background-color: #0056b3; /* Change background color on hover */
  }


  /* animation for the menu */

  /* code for the animation of the menu */
@keyframes slideSide {
    from {
      transform: translateX(-40px);
      opacity: 0; /* Add opacity animation for smoother appearance */
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

 /*900px  */

     /*  bandname */
     .bandName p{
        grid-column: 2 / 30;
      }
      .bandName h1{
        margin: 0;
      }
      .bandName img{
        width: 100%;
        height: 500px;
        position: absolute;
        object-fit: cover;
        grid-row-start: 1;
      }
      .bandName strong{
        font-size: 40px;
      }
      .bandName {
        display: grid; /* Use grid layout for the .band section */
        grid-template-columns: repeat(30, 1fr); /* Divide into 12 equal columns */
        grid-template-rows: 2fr 0.5fr;
        background-color: black;
        width: 100%;
        margin: 0;
        color: rgb(196, 185, 195);
        text-align: end;
        height: 550px;
        
      }
    
    /* band story */
        #background-video {
        position: absolute;
        z-index: -1; 
        object-fit: cover;
        height: 100%;
      }
      .storyContainer{
        grid-column-start: 2;
        grid-column-end: 12;
        margin-top: 1rem;
  margin-bottom: 1rem;
      }
       /* other bands */
       .bandOther .otherBands{
        grid-column: 2 / 12;
      }
      .bandContainer4{
        grid-column-start: 3;
        grid-column-end: 7;
        background-color: #1E1E1E;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: relative;
      }
      .bandContainer4:hover{
        box-shadow: 5px 5px 5px #9B1A5B ;
        transform: scale(1.1);
      }
      .bandContainer5{
        grid-column-start: 8;
        grid-column-end: 12;
        background-color: #1E1E1E;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: relative;
      }
      .bandContainer5:hover{
        box-shadow: 5px 5px 5px #9B1A5B ;
        transform: scale(1.1);
      }
      



/* Media query for smaller screens */
@media (max-width: 480px) {

  .bandStory {
    
    padding:0;
  }

  /* Adjust styling for submit button on smaller screens */
  button[type="submit"] {
    padding: 6px 12px;
    font-size: 14px;
  }

  /* Adjust styling for learn button on smaller screens */
  button[type="learn"] {
    padding: 5px 40px;
    font-size: 12px;
  }

  #title img {
width: 90%;
height: auto;

  }

.sidenav img {
max-width: auto;
height: 2.5rem;


}

.sidenav{
width: 100%;
max-height: 3rem;


}

.content {
  width: 330px;
  height: 40px;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, .2);
  border-radius: 60px;
  overflow: hidden;
}


  

  .menu {
    --s: 30px; /* control the size */

  }

  .branding {
  height: calc(80vh - 6vh);
}

#moto{
  grid-column-start: 3; /* Start at column 2 */
  grid-column-end: 12; /* End at column 6 */
  grid-row: 2;
  margin: 0;
  transform: translateY(0px);
  font-size: 2em;
  color: #FFE2F1;
  letter-spacing: 3px; 

  }



#date {
  grid-column-start: 3; /* Start at column 2 */
  grid-column-end: 12; /* End at column 6 */
  grid-row: 3;
  font-size: 3em;
  margin: 0;
  color: #FFE2F1;
  transform: translateY(0px);

}
input[type="email"] {
  width: 90%;
  max-width: 500px;
  height: 3vw;
  font-size: 2vw;
  padding: 1vw;
  border: 0.1vw solid #ccc;
  border-radius: 10vw;
  color: #CB286F;
  font-weight: bold;
}



button[type="submit"] {
  
    padding: 9.5px 86px; /* Adjust padding as needed */
    font-size: 18px; /* Adjust font size as needed */
    border: none; /* Remove default button border */
    border-radius: 12px; /* Add rounded corners */
    background-color: #CF286F; /* Change background color */
    color: #F2D6AF; /* Change text color */
    cursor: pointer; /* Add cursor pointer on hover */
    margin: 1rem;
    margin-left: 2.5rem;
 
}

.atFoot {

grid-column-start: 4;
grid-column-end: 8; 
grid-row: 2;

}
   /* 480 */
      /* band name */
      .bandName strong{
        font-size: 40px;
      }
      .bandName h1{
        margin: 0;
      }
      .bandName img{
        width: 100%;
        height: 400px;
        position: absolute;
        object-fit: cover;
        grid-row-start: 1;
      }
      .bandName {
        display: grid; /* Use grid layout for the .band section */
        grid-template-columns: repeat(12, 1fr); /* Divide into 12 equal columns */
        grid-template-rows: 2fr 0.5fr;
        background-color: black;
        width: 100%;
        margin: 0;
        color: rgb(196, 185, 195);
        text-align: end;
        height: 500px;
    }
    /* band story */
    .bandStory p{
        padding: 0;
    
      }
      #background-video {
        position: absolute;
        z-index: -1; 
        object-fit: cover;
        height: 100%;
      }
      /* other bands */
      .bandOther{
        display: grid; /* Use grid layout for the .band section */
          grid-template-columns: repeat(12, 1fr); /* Divide into 12 equal columns */
          grid-template-rows: 0.5fr 1fr 1fr;
          background-color: #000;
          height: 50vh;
          position: relative;
          gap: 30px;
          padding-top: 10px;
          padding-bottom: 50px;
          width: 100%;
      }
      .bandContainer4{
        grid-column-start: 2;
        grid-column-end: 12;
        grid-row-start: 2;
        background-color: #1E1E1E;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: relative;
      }
      .bandContainer4:hover{
        box-shadow: 5px 5px 5px #9B1A5B ;
        transform: scale(1.1);
      }
      .bandContainer5{
        grid-column-start: 2;
        grid-column-end: 12;
        grid-row-start: 3;
        background-color: #1E1E1E;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        position: relative;
    
      }
      .bandContainer5:hover{
        box-shadow: 5px 5px 5px #9B1A5B ;
        transform: scale(1.1);
      }

  /* Adjust animation on smaller screens */
  @keyframes slideSide {
    from {
      transform: translateX(-20px);
    }
    to {
      transform: translateX(0);
    }
  }



}