body {
    background-color: white;
    color: black;
    font-family: Arial, sans-serif;
    margin: 0;
}



@media (min-width: 1024px) {
    body {
        margin-top: 70px;
    }
}


.bodynonbar {
    background-color: white;
    color: black;
    font-family: Arial, sans-serif;
}

@media (min-width: 1024px) {
    .bodynonbar {
        margin-top: 10px;
    }
}


    .dropdown-containerbox {
      width: 80%;
      margin: 30px auto;
      margin-top: 50px;
    }

    .dropdown-container {
      width: 100%;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .dropdown-header {
      background: #ff4d00;
      color: white;
      padding: 15px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
    }

.dropdown-container.active .dropdown-content {
  max-height: 100%;
padding-bottom: 20px;
}

    .dropdown-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
      background: #f9f9f9;
      padding: 0 15px;
    }

.navbar, .nav-menu, .nav-menu > li {
    overflow: visible !important; 
}

.dropdown-content {
    /* ... keep your other existing settings ... */
    z-index: 2147483647 !important; /* Maximum possible value in CSS */
}

.dropdown:hover .dropdown-content {
    display: block !important;
}

    .dropdown-text {
      font-size: 24px;
      color: #333;
      padding: 20px 0;
    }

    .arrow {
      transition: transform 0.3s ease;
    }

    .dropdown-container.active .arrow {
      transform: rotate(180deg);}



















.band-image-row {
  display: flex;
  width: 80%;
  justify-content: space-between; /* even spacing between items */
  align-items: center;
  gap: 2%; /* optional, extra space between images */
  padding: 10px;
  margin: 0 auto 40px; /* centers horizontally + keeps bottom margin */
}


.band-image-row img {
  width: 22%;
  aspect-ratio: 1 / 1; /* keeps them square */
  object-fit: cover; /* ensures image fills space nicely */
  border-radius: 8px; /* optional styling */
}
 
    /* Default style for the content */
    .content {
  display: block;
    }

    /* Media query to hide content on small screens */
    @media screen and (max-width: 767px) {
        .content {
            display: none; /* Hide the content on small screens */
        }
    }


    /* Default style for the content */
    .mobilecontent {
        display: block; /* Show the content by default */
    }

    /* Media query to hide content on small screens */
    @media screen and (min-width: 767px) {
        .mobilecontent {
            display: none; /* Hide the content on small screens */
        }
    }















.mobile-container {
  max-width: 480px;
  margin: auto;
color: black;
  border-radius: 10px;
}


.topnav {
  overflow: hidden;
  position: relative;
background-color: white;
}

.topnavimage {
width: 65%;
display: block; 
margin-left: 1%;

}

.topnavimage img {
width: 100%;
display: block; 
  margin: 0 auto;
}


.topnav #myLinks {
  display: none;
color: black;
}


.topnav a {
color: black;
  padding: 14px 16px;
  text-decoration: none;
font-family: arial, helvetica, sans-serif; 
  font-size: 17px;
  display: block;
text-align: center;
}


.topnav a.icon {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}


.topnav a.active {
  background-color: white;
 color: black;
}








.headerlogo {
width: 18%;
padding-left: 4%;
padding-top: 30px;
display: inline-block;
}

.headerlogo img {
 display: block;
  width: 100%;
}

.headerlinksbox {
font-size: 16px;
font-weight: bold;
font-family: "Poppins", sans-serif;
margin-top: 22px;
float: right;
    width: 80%;
display: inline-block;
}

.headerlinkscell {
font-size: 14px;
margin-top: 12px;
width: 65%;
display: inline-block;

}


.headerlinksmembers {
font-size: 14px;
margin-top: 3px;
float: right;
width: 25%;
display: inline-block;
}

.headerlinks {
text-align: center;
display: inline-block;
padding-left: 4%; 
font-size: 16px;
}

.headerlinksloggedin {
padding-top: 12px; 
}

.headerlinkssignin { 
text-align: center;
display: inline-block;
padding-left: 4%; 
margin-left: 4%; 
font-size: 16px;
}

.headerlinkssignedin {
text-align: center;
display: inline-block; 
margin-left: 2%; 
border: 2px solid grey;
padding: 10px;
border-radius: 10px;
}

.headerlinkssignedin:hover {
border: 2px solid grey;
background-color: white;
}

.headerlinkssignup {
text-align: center;
display: inline-block;
margin-left: 4%;  
padding: 10px;
   padding-left: 20px;
padding-right: 20px;
 border-radius: 10px;
font-weight: bold;
color: white;
background-color: #1a85f8;
            text-align: center;
 transition: background 0.3s ease;
 border-radius: 999px; /* creates the pill shape */
font-weight: bold;
}

.headerlinkssignup:hover {
background: orange;
color: white;
}



.headerbox {
display: inline-block;
    width: 100%;
padding-bottom: 15px;
}


header {
    background-color: white;
    color: #fff;
    padding: 5px 5px;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000; /* Ensure it stays on top */
    
}

/* Style the navigation menu */
header nav ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
}

header nav ul li {
    margin: 0 5px;
}

header nav ul li a {
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s ease;
}



.footerlinksbox {
    display: flex;
  justify-content: center; 
font-size: 12px;
margin-top: 65px;
margin-bottom: 35px;
    width: 100%;
 
}

.footerlinks {

    width: 10%;
text-align: center;
}

.footerimage {
margin: 0 auto; 
width: 14%;
margin-bottom: 35px;
}

.footerimage img {
    width: 100%;

}

.mobilefooterimage {
    width: 40%;
margin: 0 auto; 
margin-bottom: 35px;
margin-top: 60px;
}

.mobilefooterimage img {
    width: 100%;
}



.mobilefooterlinksbox {
  background-color: #333;
  color: #fff;
  font-size: 12px;
padding-top: 35px;
  margin-bottom: 15px;
  width: 100%;
  padding: 10px 0;
  text-align: center;
}



.mobilefooterlinks {
    width: 100%;
margin-top: 15px;
margin-bottom: 15px;
text-align: center;
}















.index-container-link {
    margin-top: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;  /* Vertically centers the content inside this element */
    justify-content: center; /* Horizontally centers content inside this element */
 border-radius: 10px;
}






.indexjoinlink {
margin-top: 40px;
}







.indexnewsletter {
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: 40px;
  background-color: #f6f6f6;
  display: flex; /* Add this to align children side by side */
  justify-content: space-between; /* Optional: Adjust spacing between children */
}


.indexnewsletterleft {
width: 31%;
margin-left: 14%;
}

.indexnewsletterlefttitle {
width: 100%;
padding-top: 20px;
font-weight: bold;
font-size: 26px;
}

.indexnewsletterlefttext {
width: 90%;
padding-top: 15px;
font-size: 16px;
}

.indexnewsletterright {
width: 40%;
margin-right: 15%;
}




.mobileindexnewsletter {
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: 40px;
  background-color: #f6f6f6;

}


.mobileindexnewsletterleft {
width: 100%;

}

.mobileindexnewsletterlefttitle {
text-align: center;
padding-top: 20px;
font-weight: bold;
font-size: 26px;
}

.mobileindexnewsletterlefttext {
width: 80%;
margin-left: 10%;
padding-top: 15px;
font-size: 16px;
}

.mobileindexnewsletterright {
width: 100%;
}




































.indexjoinlinkheader {
margin-top: 0px;
margin-bottom: 30px;
}



.indexjoinlinkheadersearch {
  width: 80%;
  margin: 0 auto;
  text-align: center;   /* centers inline or inline-block elements */
  margin-top: 25px;
  margin-bottom: 25px;
}




.topindexjoinlinkheadersearch {
  width: 80%;
  margin: 0 auto;
  text-align: center;   /* centers inline or inline-block elements */
  padding-bottom: 40px;
}










.indexbox {
font-size: 16px;
    width: 60%;
margin: 0 auto; 
}

.indexboxbaseimage { 
    width: 20%;
margin: 0 auto; 
margin-top: 20px;

margin-bottom: 10px;
}


.indexboxconfirmemail {
font-size: 16px;
    width: 60%;
margin: 0 auto; 
padding-bottom: 200px;
}

.indexintroconfirmemail {
font-size: 16px;
    width: 60%;
margin: 0 auto; 
padding-bottom: 200px;
}


.index1box {
font-size: 16px;
    width: 90%;
margin: 0 auto; 
 border-radius: 9px;
margin-top: 20px;
}

.index2box {
font-size: 16px;
    width: 90%;
margin: 0 auto; 
margin-top: 20px;
  border-radius: 10px;
}

.index3box {
font-size: 16px;
     width: 90%;
margin: 0 auto; 
margin-top: 20px;
  border-radius: 10px;
}


.indexresponsive {
    width: 100%;
 display: block;
margin-top: 70px;
}

.indexresponsive img {
    width: 100%;

}

.indexboxblueshell {
margin-top: 30px;
    width: 100%;
padding-bottom: 20px;
}


.indexbaselinksbox {
    width: 100%;
 display: block;
  background-color: #F4F8F9;
}

.indexbaselinksboxleft {
width: 30%;
margin-left: 10%;
margin-right: 10%;
border: 1px solid black;
}

.indexbaselinksboxlefttitle {
width: 80%;
margin-left: 20%;
border: 1px solid black;
font-weight: bold;
font-size: 24px;
}







.indexbaselinksboxright{
width: 30%;
margin-left: 3%;
margin-right: 15%;
border: 1px solid black; 
}

.indexbaselinksboxlefttext {
width: 80%;
margin-left: 20%;
padding-top: 20px;
border: 1px solid black;
font-size: 16px;
}


.indexbaselinksboxright {
width: 30%;
border: 1px solid black;
}


.indexbaselinks {
    width: 100%;
 display: block;
font-size: 100px;
color: black;
font-family: Arial, sans-serif; font-weight: bold; 
text-align: center;
padding-top: 40px;
padding-bottom: 40px;
}

.indexbaselinksmiddle {
    width: 100%;
 display: block;
font-size: 100px;
color: black;
    font-family: Arial, sans-serif;
 font-weight: bold; 
text-align: center;
}

@media only screen and (max-width: 768px) {
.indexbaselinks {
font-size: 40px;
  }
}

@media only screen and (max-width: 768px) {
.indexbaselinksmiddle {
font-size: 40px;
  }
}



@media only screen and (max-width: 768px) {
.indexbox {
   width: 80%;
margin: 0 auto; 
padding-bottom: 20px;
  }
}

.indexboxbase {
font-size: 16px;
margin-top: 40px;
margin-bottom: 40px;
    width: 60%;
margin: 0 auto; 
}

@media only screen and (max-width: 768px) {
.indexboxbase {
   width: 80%;
margin: 0 auto; 
  }
}


.indexintroleft {
    width: 100%;
padding-bottom: 10px;
font-size: 16px;
text-align: center;
}

@media only screen and (max-width: 768px) {
.indexintroleft {
text-align: left;
  }
}

.mobileintrocenter {
    width: 100%;
padding-bottom: 10px;
font-size: 16px;
text-align: center;
}


.indexintrolefttitle {
    width: 100%;
padding-bottom: 20px;
padding-top: 15px;
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}

.indexintro {
    width: 100%;
padding-bottom: 10px;
font-size: 16px;
text-align: center;
}


.indexintroheadbackground {
    width: 100%;
background-image: url('mcr1.webp'); /* Replace with your image path */
  background-size: cover;        /* Make the image cover the entire screen */
  background-position: center;   /* Center the image */
  background-repeat: no-repeat;  /* Prevent repeating */
  margin: 0;
}




@media only screen and (max-width: 768px) {
.indexintroheadbackground {
 background-position: left 0px top; 
  }
}



.indexintroheadbasebackground {
    width: 100%;
    background-color: #F8F8F8;
   padding-top: 20px;
    padding-bottom: 30px;
    }


.indexintrobasebackground {
    width: 100%;
padding-left: 10%;
padding-right: 10%;
    background-color: #F8F8F8;
   padding-top: 20px;
    padding-bottom: 30px;
font-family: "Poppins", sans-serif;
    }

.aboutintrobasebackground {
    width: 100%;
    background-color: #F8F8F8;
   padding-top: 20px;
    padding-bottom: 30px;
font-family: "Poppins", sans-serif;
    }

.aboutintrobasebackgroundwhite {
    width: 100%;
   padding-top: 20px;
font-family: "Poppins", sans-serif;
    }

.newsletterintrobasebackground {
    width: 100%;
background-color: #F8F8F8;
padding-bottom: 60px;
margin-bottom: 20px;
}

.indexnewsletterintrobasebackground {
    width: 100%;
padding-bottom: 30px;
}

.indexintrohead {
    width: 80%;
padding-top: 60px;
margin: 0 auto; 
padding-bottom: 15px;
font-size: 30px;
text-align: center;
font-weight: bold;
color: black;
font-family: Verdana, Geneva, sans-serif;
}

.indexintroheadheader {
    width: 80%;
padding-top: 200px;
margin: 0 auto; 
padding-bottom: 5px;
font-size: 100px;
text-align: center;
font-weight: bold;
font-family: "Poppins", sans-serif;
  color: white;
line-height: 1.1;
}



@media only screen and (max-width: 768px) {
.indexintroheadheader {
    width: 80%;
font-size: 40px;
  }
}



.newsletterindexintroheadheader {
    width: 90%;
padding-top: 30px;
margin: 0 auto; 
font-size: 40px;
text-align: center;
font-weight: bold;
color: black;
font-family: tahoma, sans-serif;
}



@media only screen and (max-width: 768px) {
.newsletterindexintroheadheader {
    width: 80%;
font-size: 40px;
  }
}



.indexnewsletterindexintroheadheader {
    width: 80%;
padding-top: 60px;
margin: 0 auto; 
padding-bottom: 10px;
font-size: 65px;
text-align: center;
font-weight: bold;
color: black;
font-family: tahoma, sans-serif;
}



@media only screen and (max-width: 768px) {
.indexnewsletterindexintroheadheader {
    width: 80%;
font-size: 40px;
  }
}





.mobilebandstop {
 background: #1a85f8;
  text-align: center;
font-weight: bold;
font-family: arial, sans-serif;
  padding: 20px;
  width: 100%;
}

/* Bottom row with 3 equal divs */
.mobilebandsbottom-row {
  display: flex;
}

.mobilebandsbox {
  flex: 1;                /* Each box takes equal space */
  background: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
font-weight: bold;
font-family: arial, sans-serif;
  padding: 20px;
margin-bottom: 10px;
}











.ticketsstyleindexbox {
font-size: 16px;
margin-top: 20px;
    width: 80%;
margin: 0 auto; 
background-image: url('ticketsintroground.gif'); /* Specify the path to your image */
background-repeat: no-repeat; /* Ensure the background doesn't repeat */
background-position: right 50px top; /* Adjust the 150px as your desired right padding */
}
.youtubestyleindexbox {
font-size: 16px;
margin-top: 20px;
    width: 80%;
margin: 0 auto; 
background-image: url('indexintroheadbackground.gif'); /* Specify the path to your image */
background-repeat: no-repeat; /* Ensure the background doesn't repeat */
background-position: right 50px top; /* Adjust the 150px as your desired right padding */
}

.merchstyleindexbox {
font-size: 16px;
margin-top: 20px;
    width: 80%;
margin: 0 auto; 
background-image: url('merchintroground.gif'); /* Specify the path to your image */
background-repeat: no-repeat; /* Ensure the background doesn't repeat */
background-position: right 50px top; /* Adjust the 150px as your desired right padding */
}

.styleindexintrotitle {
  width: 100%;
  padding-bottom: 10px;
  padding-top: 30px;
  font-size: 36px;
  text-align: left;
font-family: "Poppins", sans-serif;
  color: black;
}

.trainingpagestyleindexbox {
font-size: 16px;
    width: 88%;
  margin: 0 auto;
 }




.bandintrotitle {
  width: 80%;
  padding-bottom: 10px;
  padding-top: 70px;
  font-size: 36px;
  text-align: left;
  font-family: Verdana, Geneva, sans-serif;
  color: black;
  margin: 0 auto;
}

.bandintrotext {
  width: 80%;
  padding-bottom: 20px;
  padding-top: 10px;
  font-size: 18px;
  text-align: left;
  font-family: Verdana, Geneva, sans-serif;
  color: black;
  margin: 0 auto;
}


.styleindexintrotext {
    width: 70%;
padding-bottom: 60px;
padding-top: 20px;
font-size: 18px;
text-align: left;
font-family: Verdana, Geneva, sans-serif;
color: black;
}

@media only screen and (max-width: 768px) {
.styleindexintrotext {
 width: 100%;
  }
}





.bandstyleindexbox {
font-size: 16px;
margin-top: 20px;
    width: 100%;
margin: 0 auto; 
}

















.newslettercontainer {           
 display: flex;
 width: 80%;
margin: 0 auto;
        }
        .newsletterdivleft, .newsletterdivright {
            flex: 1; /* Each div will take equal space */
            padding: 10px;
font-size: 18px;
        }

.newsletterdivright img {
    width: 100%; 
margin: 0 auto; 
}



.checklistbox {
font-size: 16px;
    width: 90%;
margin: 0 auto; 
margin-top: 40px;
}


.checklistboxinner {
font-size: 18px;
margin-top: 20px;
    width: 100%;
border: 1px solid black;
}

.checklistboxheader {
font-size: 20px;
font-weight: bold;
padding: 10px;
margin-bottom: 10px;
    width: 100%;
padding-bottom: 20px;
background-color: #F8F8F8;
}


.checklistboxtext {
font-size: 15px;
padding-left: 10px;
margin-bottom: 10px;
    width: 95%;
}
















.pricingheader {
    width: 100%;
padding-top: 40px;
padding-bottom: 15px;
font-size: 30px;
text-align: center;
color: black;
font-family: arial, sans-serif;
padding-bottom: 20px;
}

.indexintroheadtext {
    width: 80%;
padding-top: 280px;
margin: 0 auto; 
padding-bottom: 10px;
font-size: 34px;
text-align: center;
color: white;
font-family: "Poppins", sans-serif;
}


.indexintrodiscount {
    width: 100%;
padding-bottom: 10px;
padding-top: 15px;
font-size: 16px;
text-align: center;
}

.yotubeguideimage img {
    display: block;
    margin: 0 auto;  /* Combined margin-left and margin-right */
    width: 70%;
    max-width: 100%;  /* Ensures the image doesn't overflow its container */
    height: auto;  /* Maintains aspect ratio */
    box-sizing: border-box;  /* Consistent sizing with padding/borders */
}

.indexintrotitle {
    width: 100%;
padding-bottom: 10px;
padding-top: 30px;
font-size: 32px;
text-align: center;
font-weight: bold;
}



.contactustitle {
    width: 100%;
padding-bottom: 10px;
padding-top: 55px;
font-size: 36px;
text-align: center;
font-weight: bold;
}

.indexintrosubtitle {
    width: 100%;
padding-bottom: 20px;
font-size: 18px;
color: #FFFFFF;
    font-family: Arial, sans-serif;
 font-weight: bold; 
text-align: center;
}

.index1introsubtitle {
background-color: #000;
    width: 100%;
padding-bottom: 20px;
padding-top: 20px;
font-size: 18px;
color: white;
    font-family: Arial, sans-serif;
 font-weight: bold; 
text-align: center;
border-radius: 5px 5px 0 0;
border: 1px solid grey; 
}

.index2introsubtitle {
background-color:  black;
    width: 100%;
padding-bottom: 20px;
padding-top: 20px;
font-size: 18px;
color: white;
    font-family: Arial, sans-serif;
 font-weight: bold; 
text-align: center;
border-radius: 5px 5px 0 0;
border: 1px solid grey; 
}

.index3introsubtitle {
background-color:   black;
    width: 100%;
color: white;
padding-bottom: 20px;
padding-top: 20px;
font-size: 18px;

    font-family: Arial, sans-serif;
 font-weight: bold; 
text-align: center;
border-radius: 5px 5px 0 0;
border: 1px solid grey; 
}



@media only screen and (max-width: 768px) {
.index1introsubtitle {
font-size: 24px;
  }
}

@media only screen and (max-width: 768px) {
.index2introsubtitle {
font-size: 24px;
  }
}

@media only screen and (max-width: 768px) {
.index3introsubtitle {
font-size: 24px;
  }
}

.emailform {
width: 100%;
 display: flex;
            justify-content: center;
            align-items: center;
 margin-bottom: 40px;
}

.form-container {
    background-color: #fff;
  width: 40%;  
color: black;
    margin-top: 30px;
 margin-bottom: 20px;
    padding: 20px;
font-size: 18px;
    border-radius: 10px;
}


.form-container-contact {
    background-color: white;
color: black;
  width: 60%;  
    margin-top: 30px;
 margin-bottom: 20px;
    padding: 20px;
font-size: 18px;
    border-radius: 15px;
}

@media only screen and (max-width: 768px) {
  .form-container {
   width: 80%;
  }
}


.form-group {
    margin-bottom: 15px;
font-size: 16px;
color: white;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input {
    width: 96%;
    padding: 10px;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: white;
    color: #555;
}


textarea#message {
  width: 96%;            /* Full width of the container */
  height: auto;           /* Auto height to adapt to the content */
  min-height: 150px;      /* Minimum height */
  padding: 10px;          /* Padding inside the textarea */
    border: 1px solid #555;
  border-radius: 5px;     /* Rounded corners */
 font-family: "Poppins", sans-serif;
    background-color: white;
    color:  #555;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Inner shadow */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transition effects */
}



button {

   margin: 0 auto; 
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #1e90ff;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #1c86ee;
}



.white-link {
    text-decoration: none; 
    color: black;
    position: relative; /* Required for the pseudo-element */
}

.white-link:hover { 
color: grey;
}




.footer-white-link {
    text-decoration: none; 
    color: #424242;
    position: relative; /* Required for the pseudo-element */
}

.footer-white-link:hover { 
    text-decoration: underline;
}


.index-training-link {
    text-decoration: none; 
    color: white;
    position: relative; /* Required for the pseudo-element */
}

.index-training-link:hover { 
    text-decoration: underline; 
}


.index-blog-link {
    text-decoration: underline; 
    color: black;
    position: relative; /* Required for the pseudo-element */
}

.index-blog-link:hover { 
    text-decoration: none; 
}

.whiteblack-link {
    text-decoration: none; 
    color: black;
    position: relative; /* Required for the pseudo-element */
}

.whiteblack-link:hover { 
color: black;
}


.footer-link {
    text-decoration: none; 
    color: black;
    position: relative; /* Required for the pseudo-element */
}

.footer-link:hover { 
color: silver;
}


.mobile-footer-link {
    text-decoration: none; 
    color: white;
    position: relative; /* Required for the pseudo-element */
}

.mobile-footer-link:hover { 
color: white;
}


















.btn-primaryregister {
  /* Layout & Sizing */
  display: inline-block;
  padding: 20px 52px;
  border: none;
  border-radius: 12px; /* Rounded corners */
  
 font-family: "Poppins", sans-serif;
font-weight: bold;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: #ffffff;
  
  /* Visuals */
  background-color: #007bff; /* Primary Blue */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth transition for hover effects */
}


.btn-primaryregister {
    display: block;
    margin: 10px auto;   /* centers the button */
}

/* Hover State */
.btn-primaryregister:hover {
  background-color: #0056b3; /* Darker blue */
  transform: translateY(-2px); /* Lifts button up slightly */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Shadow grows */
}

/* Active/Click State */
.btn-primaryregister:active {
  transform: translateY(0); /* Returns to original position */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Shadow shrinks */
}

















.form-link {
    text-decoration: none; 
    color: #333;
    position: relative; /* Required for the pseudo-element */
}

.form-link:hover { 
color: silver;
}





.black-link {
    text-decoration: none; 
    color: black;
    position: relative; /* Required for the pseudo-element */
}

.black-link:hover { 
color: #31363C;
}


.guide-black-link {
    text-decoration: none; 
    color: black;
    position: relative; /* Required for the pseudo-element */
}

.guide-black-link:hover { 
    text-decoration: underline; 
}

.blog-black-link {
    text-decoration: underline; 
    color: black;
    position: relative; /* Required for the pseudo-element */
}

.blog-black-link:hover { 
    text-decoration: underline; 
}










.blackunderline-link {
    text-decoration: underline; 
    color: black;
    position: relative; /* Required for the pseudo-element */
}

.blackunderline-link:hover { 
color: #31363C;
}



.orange-link {
    text-decoration: none; 
    color: #EBEBEB;
    position: relative; /* Required for the pseudo-element */
}

.orange-link:hover { 
color: #FCED97;

}


.blue-link {
    text-decoration: none; 
    color: #EBEBEB;
    position: relative; /* Required for the pseudo-element */
}

.blue-link:hover { 
color: #CEEFE0;
}



.pink-link {
    text-decoration: none; 
    color: #EBEBEB;
    position: relative; /* Required for the pseudo-element */
}

.pink-link:hover { 
color: #9FDEE0;

}


.base-blue-link {
    text-decoration: none; 
    color: #EBEBEB;
    position: relative; /* Required for the pseudo-element */
}

.base-blue-link:hover { 
color: #1a85f8;

}















.supportpagetitle {
    width: 100%;
    padding-top: 80px;
    margin-bottom: 30px;
font-family: arial, helvetica, sans-serif; 
  font-size: 22px;
font-weight: bold;
color: black;
text-align: left;
}




.charitycontainer {
   display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto; 
    padding: 0 10px;
}

.charitycontainertext {
    width: 100%;
font-family: arial, helvetica, sans-serif; 
  font-size: 17px;
text-align: center;
    padding-top: 20px;
    padding-bottom: 10px;
}

.charitybox {
    width: 18%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.charitybox img {
    width: 100%;
    height: auto;
}


.charitystatementboxtitle {
    width: 70%;
    padding-top: 80px;
    padding-bottom: 20px;
margin: 0 auto; 
font-family: arial, helvetica, sans-serif; 
  font-size: 19px;
font-weight: bold;
color: black;
text-align: center;
}

.charitystatementboxtitleimage {
    width: 40%;
    padding-top: 20px;
    padding-bottom: 20px;
margin: 0 auto; 
}


.charitystatementboxtitleimage img {
    width: 100%;
}



.guidesboximage {
    width: 80%;
padding-top: 30px;
padding-bottom: 10px;
margin: 0 auto; 
}

.guidesboxsampletext {
    width: 96%;
padding: 20px;
margin: 0 auto; 
margin-top: 10px;
margin-bottom: 25px;
background-color: #333;
border-radius: 10px;
}

.guidesboximage img {
    width: 100%; 
margin: 0 auto; 
}

.charitystatementbox {
    width: 80%;
    padding-top: 20px;
    padding-bottom: 20px;
margin: 0 auto; 
font-family: arial, helvetica, sans-serif; 
  font-size: 17px;
}


.supportbox {
    width: 70%;
    padding-top: 20px;
    padding-bottom: 10px;
   margin: 0 auto;
font-family: arial, helvetica, sans-serif; 
  font-size: 17px;
}



.aboutbox {
    width: 60%;
    padding-top: 40px;
    padding-bottom: 50px;
   margin: 0 auto;
font-family: arial, helvetica, sans-serif; 
  font-size: 17px;
}


@media only screen and (max-width: 768px) {
.aboutbox {
    width: 90%;    }}

.aboutboxcontact {
    width: 60%;
    padding-top: 40px;
    padding-bottom: 50px;
    padding-left: 20px;
padding-right: 20px;
   margin: 0 auto;
font-family: arial, helvetica, sans-serif; 
  font-size: 17px; 
border: 1px solid #151617;  
background-color: #151617; 
}

.contactusanswer {
    padding-top: 40px;
    padding-bottom: 200px;
font-weight: bold;
  font-size: 17px; 
  }

@media only screen and (max-width: 768px) {
.aboutboxcontact {
    width: 90%;    }}

.aboutboxcontactheader {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 10px;
font-family: arial, helvetica, sans-serif; 
  font-size: 26px;
font-weight: bold;
text-align: center;
color: white;
}













.red-link {
    text-decoration: none; 
    color: black;
    position: relative; 
}

.red-link:hover { 
color: black;
text-decoration: underline; 
}













.indexbanddiv-1 {
    width: 30%;
}



 @media only screen and (max-width: 768px) {
    .indexbanddiv-1{
      width: 100%; 
    }}

.indexbanddiv-1 img {
    width: 100%;
 height: auto; /* Keeps the aspect ratio */
    display: block; /* Prevents extra space at the bottom of the image */
}

.indexbanddiv-2 {
    margin-left: 5%;
    width: 50%;
    
}


 @media only screen and (max-width: 768px) {
    .indexbanddiv-2{
      width: 100%; 
    }}



















.bandprizesjoinlinkbase {
margin-top: 40px;
}


.bandprizesintrotitle {
    width: 100%;
padding-bottom: 20px;
padding-top: 70px;
font-size: 28px;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
 font-weight: bold; 
color: black;
}




.bandtopnav {
  overflow: hidden;
  position: relative;
padding-bottom: 10px;
}

.bandtopnav a.icon {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}


.bandtopnav a.active {
  background-color: white;
 color: black;
}

.bandtopnav #bandmyLinks {
  display: none;
color: white;
}

.bandtopnavimage {
width: 50%;
display: block; 
margin-left: 1%;
}





.member-link {
    text-decoration: underline; 
    color: black;
    position: relative; /* Required for the pseudo-element */
}

.member-link:hover { 
color: black;
text-decoration: none; 
}


.landingpagelinkbox {  
   width: 100%;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 15px;
}


.indexcontentlink1  {     font-size: 18px; margin: 0 auto;  width: 24%;   }

@media only screen and (max-width: 768px) {
    .indexcontentlink1{
      margin: 0 auto;  width: 60%; margin-bottom: 30px;
    }}
.box1landingpagelinkboxunderimage {  
   width: 100%;
   margin: 0 auto;
   height: 400px;
   padding-top: 10px;
   margin-bottom: 15px;
   margin-top: 30px;
   border: 2px solid black;
   background-image: url('mimi.jpg'); /* Specify the path to your image */
   background-repeat: no-repeat; /* Ensure the background doesn't repeat */
   background-position: center; /* Center the background image */
   background-size: cover; /* Cover the entire box */
}

.box1landingpagelinkboxunderimage img{  
width: 100%;
}




@media only screen and (max-width: 768px) {
    .box1landingpagelinkboxunderimage {
      width: 90%; 
    }}





.box2landingpagelinkboxunderimage {  
   width: 100%;
   height: 50vh; /* or 100vh if full screen */
   margin: 30px auto 15px auto;
   border: 2px solid black;
   background-image: url('indexvideoimage.png');
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;  /* better for responsive */
   padding: 0;
}

.box2landingpagelinkboxunderimage img{  
width: 100%;
}

@media only screen and (max-width: 768px) {
    .box2landingpagelinkboxunderimage {
      width: 90%; 
    }}

.box3landingpagelinkboxunderimage {  
   width: 100%;
   margin: 0 auto;
   height: 400px;
   padding-top: 10px;
   margin-bottom: 15px;
   margin-top: 30px;
   border: 2px solid black;
   background-image: url('scarlet1.png'); 
   background-repeat: no-repeat; 
   background-position: center; 
   background-size: cover; 
}

.box3landingpagelinkboxunderimage img{  
width: 100%;
}

@media only screen and (max-width: 768px) {
    .box3landingpagelinkboxunderimage {
      width: 90%; 
    }}


.mobilelandingpagelinkbox { 
width: 100%;
padding-top: 30px;
padding-bottom: 30px;
}





.middlelandingpagelinkbox {  
   width: 100%;
padding-top: 1%;
padding-bottom: 1%;
margin-bottom: 25px;
}

.middleindexcontentlink1  {     font-size: 18px; margin: 0 auto;  width: 20%;   }

@media only screen and (max-width: 768px) {
    .middleindexcontentlink1{
      margin: 0 auto;  width: 60%; margin-bottom: 30px;
    }}


.middleindexboxlinks {   

   font-family: Arial, sans-serif; font-weight: bold;  margin-top: 10px; padding-top: 15px; padding-bottom: 15px;  font-weight: bold; font-size: 22px;  text-align: center; width: 100%; border: 2px solid #FFFFFF; color: black;   background-color: #FFFFFF; 
 }

.middleindexboxlinks:hover {
border: 2px solid #FFFFFF;
color: black; 
 background-color: #FFFFFF; 
}
















.white1indexboxlinks {      font-family: Arial, sans-serif; font-weight: bold;  margin-top: 10px; padding-top: 15px; padding-bottom: 15px;  font-weight: bold; font-size: 24px;  text-align: center; width: 100%; border: 2px solid black; color: black; 
 }


.white2indexboxlinks {      font-family: Arial, sans-serif; font-weight: bold;  margin-top: 10px; padding-top: 15px; padding-bottom: 15px;  font-weight: bold; font-size: 24px;  text-align: center; width: 100%; border: 2px solid black; color: black;
 }


.white3indexboxlinks {      font-family: Arial, sans-serif; font-weight: bold;  margin-top: 10px; padding-top: 15px; padding-bottom: 15px;  font-weight: bold; font-size: 24px;  text-align: center; width: 100%; border: 2px solid  black; color: black;
 }



.whiteindexboxlinks {      font-family: Arial, sans-serif; font-weight: bold;  margin-top: 10px; padding-top: 15px; padding-bottom: 15px;  font-weight: bold; font-size: 22px;  text-align: center; width: 100%; border: 2px solid white;
 }

.whiteindexboxlinks:hover {
border: 2px solid #FFFFFF;
color: #FFFFFF;  
}





.whitelink:link,
.whitelink:visited {
  color: white;
  text-decoration: none;
}

.whitelink:hover {
  color: white;
  text-decoration: underline;
}

.whitelink:active {
  color: white;
  text-decoration: none;
}





.blacklink:link,
.blacklink:visited {
  color: black;
  text-decoration: none;
}

.blacklink:hover {
  color: black;
  text-decoration: underline;
}

.blacklink:active {
  color: black;
  text-decoration: none;
}











.whitelinkcontact:link {
  text-decoration: none;
}

.linkcontact:visited {
  text-decoration: none;
}

.whitecontact:hover {
  text-decoration: none;
color: black;
}

.whitelinkcontact:active {
  text-decoration: none;
}

.whitelinkcontact {
  color: black;
}




* {
    box-sizing: border-box;
}

.outer-container {
    display: flex;
    justify-content: center;
    align-items: center;
margin-top: 50px;
}





.container {
    display: flex;
    margin-left: 5px;
margin-right: 5px;
    width: 92%;
    margin: 0px;
}

.boxheader {
    margin: 0 10px;
    padding-top: 15px;
    padding-bottom: 10px;
    font-family: Arial, sans-serif;
    font-size: 23px;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
}

.boxtext {
    margin: 0 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-top: 5px;
    font-family: arial, helvetica, sans-serif; 
    font-size: 17px;
    color: black;
}

.box1 {
    width: 32%;
    margin: 0 10px;
    border: 2px solid black;
border-radius: 9px;
 margin-left: 0;
padding-bottom: 10px;
}



.box2 {
    width: 32%;
    margin: 0 10px;
    border: 2px solid black;
border-radius: 9px;
padding-bottom: 10px;
}


.box3 {
    width: 32%;
    margin: 0 10px;
    border: 2px solid black;
border-radius: 10px;
 margin-right: 0;
padding-bottom: 10px;
}







.boxheader1 {   
   padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    font-family: Arial, sans-serif;
    font-size: 24px;
background-color: black;
    text-align: center;
    font-weight: bold;
border-radius: 10px 10px 0 0;
color: white;
}


.boxheader2 {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    font-family: Arial, sans-serif;
    font-size: 24px;
background-color: black;
    text-align: center;
    font-weight: bold;
border-radius: 10px 10px 0 0;
color: white;
  }

.boxheader3 {
        padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    font-family: Arial, sans-serif;
    font-size: 24px;
color: white;
background-color: black;
    text-align: center;
    font-weight: bold;
border-radius: 10px 10px 0 0;
   }






.indexlinkblockrow {      margin-top: 10px; margin-bottom: 30px;  margin-bottom: 25px;  width: 100%;   display: inline-block;
 background-image: url('indexlinkboxground.gif'); /* Specify the path to your image */
    background-repeat: no-repeat; /* Ensure the background doesn't repeat */
    background-position: left 150px top; /* Adjust the 50px as your desired left padding */
 }

.indexlinkblockleft {      margin-top: 10px;   width: 37%;    margin-left: 4%;  font-family: Arial, sans-serif; padding-top: 20px;   font-size: 18px; 
 }



.indexlinkblockleftintro {       width: 95%;      font-family: Arial, sans-serif;    font-weight: bold; font-size: 14px; color: black; margin-bottom: 15px;
 }

.indexlinkblockleftblock {   margin-top: 30px;    width: 95%;      font-family: Arial, sans-serif;    font-weight: bold; font-size: 36px; color: black; margin-bottom: 15px;

 }

.indexlinkblockright {      margin-top: 10px;   width: 49%;  float: right;   
 }

.linkbox1 {
    display: inline-block;
border: 2px solid black;
margin-right: 2%;
border-top-left-radius: 35px;
width: 45%;
color: black; 
}

.linkbox1:hover {
border: 2px solid grey;
background: black; 
color: white;
}

.linkbox2 {
    display: inline-block;
border: 2px solid black;  
margin-right: 2%;
width: 45%;
border-top-right-radius: 0px;
color: black;
}

.linkbox2:hover {
border: 2px solid grey;  
background: black; 
color: white;
}

.linkbox3 {
    display: inline-block;
border: 2px solid black;
margin-right: 2%;
margin-top: 20px;
width: 45%;
color: black;
border-bottom-left-radius: 0px;
}

.linkbox3:hover {
border: 2px solid grey;
background: black; 
color: white;
}

.indexlinkblockcell {    width: 100%;  
 }

.linkboxtitle1 {
 font-family: Arial, sans-serif;    font-weight: bold; font-size: 26px; 
        margin-left: 10%; margin-top: 25px; margin-bottom: 10px; width: 90%;
}

.linkboxtitle2 {
 font-family: Arial, sans-serif;    font-weight: bold; font-size: 26px; 
         margin-left: 10%; margin-top: 25px; margin-bottom: 10px; width: 85%;
}

.linkboxtitle3 {
 font-family: Arial, sans-serif;    font-weight: bold; font-size: 26px; 
        margin-left: 10%; margin-top: 25px; margin-bottom: 10px; width: 85%;
}

.linkboxtext {
 font-family: Arial, sans-serif;  font-size: 16px; 
        
margin: 0 auto; 
margin-top: 10px;
margin-bottom: 100px;
width: 80%;
}







.mobileofferbox {
    width: 95%;
margin-left: 2%;
margin-top: 4%;
margin-right: 2%;
    border: 1px solid black;
}

.mobile1offerbox {
    width: 95%;
margin-left: 2%;
margin-top: 4%;
margin-right: 2%;
    border: 1px solid black;
border-radius: 5px 5px 0 0;
margin-bottom: 10px;
}

.mobile2offerbox {
    width: 95%;
margin-left: 2%;
margin-top: 4%;
margin-right: 2%;
    border: 1px solid black;
border-radius: 5px 5px 0 0;
margin-bottom: 10px;
}

.mobile3offerbox {
    width: 95%;
margin-left: 2%;
margin-top: 4%;
margin-right: 2%;
    border: 1px solid black;
border-radius: 5px 5px 0 0;
margin-bottom: 10px;
}

.boxlandingpagelinkbox {  
   width: 70%;
margin: 0 auto;
padding-top: 1%;
margin-bottom: 2%;
}


.boxindexcontentlink1  {     font-size: 18px; margin: 0 auto;  width: 100%; }

@media only screen and (max-width: 768px) {
    .boxindexcontentlink1{
      margin: 0 auto;  width: 90%; margin-bottom: 20px; margin-top: 10px;
    }}


.box1whiteindexboxlinks {      font-family: Arial, sans-serif;  margin-top: 10px; padding-top: 15px; padding-bottom: 15px;  font-weight: bold; font-size: 22px;  text-align: center; width: 100%; border: 2px solid black;  color: black; 
}





.box2whiteindexboxlinks {      font-family: Arial, sans-serif; font-weight: bold; margin-top: 10px; padding-top: 15px; padding-bottom: 15px;  font-weight: bold; font-size: 22px;  text-align: center; width: 100%; border: 2px solid black; color: black;
 }

.box3whiteindexboxlinks {      font-family: Arial, sans-serif; font-weight: bold; margin-top: 10px; padding-top: 15px; padding-bottom: 15px;  font-weight: bold; font-size: 22px;  text-align: center; width: 100%; border: 2px solid black;  color: black;
 }

.box1whiteindexboxlinks:hover {
border: 2px solid grey;
background-color: black;
color: white;
}

.box2whiteindexboxlinks:hover {
border: 2px solid grey;
background-color:black;
color: white;
}

.box3whiteindexboxlinks:hover {
border: 2px solid grey;
background-color: black;
color: white;
}











.reasonscontainer {
    width: 100%;
    text-align: center;
margin-bottom: 45px;
font-size: 18px;
}

.column {
    display: inline-block;
    width: 35%;
padding-top: 15px;
    vertical-align: top;
}



.left-column {

text-align: left;
padding-left: 2%;
padding-right: 2%;
 padding-bottom: 15px;
}

.right-column {
padding-left: 2%;
padding-right: 2%;
  text-align: left;
    padding-bottom: 15px; 
}

.reasonscontainer::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: top;
    width: 2px;
    background-color: white;
}


.hottipsbox {
font-size: 16px;
margin-bottom: 30px;
    width: 70%;
margin: 0 auto; 
}


.guideindexbox {
font-size: 16px;
    width: 96%;
margin: 0 auto;
}

.guidecontainer {
    display: flex;
    justify-content: space-between;
    gap: 10px; /* Creates 10px gap between the divs */
align-items: stretch; /* Ensures equal height divs */
    padding: 20px;
}

@media only screen and (max-width: 768px) {
.guidecontainer {
width: 99%; 
 display: block;
  }
}

@media only screen and (max-width: 768px) {
.guidebox {
margin-bottom: 20px;
  }
}

@media only screen and (max-width: 768px) {
.guideboxtext {
padding-bottom: 10px;
}}



.guidebox {
    flex: 1; /* Makes all divs equal width */
    padding: 20px;
    text-align: left;
    border: 1px solid black;
border-radius: 0px 10px 10px 0;
}

.guidebox a {
    text-decoration: none;
    color: black;
    font-weight: bold;
font-size: 20px;
}

.guidebox:hover {
    background-color: white; 
border: 1px solid grey;
}


.guideboxtext {
    color: black;
    padding-top: 20px;
padding-bottom: 30px;
}






.discounttitle {
    width: 100%;
padding-bottom: 40px;
padding-top: 20px;
font-size: 22px;
text-align: left;
font-family: Verdana, Geneva, sans-serif;
color: black;
}


.newsarticletitle {
    width: 100%;
padding-bottom: 10px;
padding-top: 50px;
font-size: 32px;
text-align: left;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
color: black;
}

.newsarticletext {
    width: 100%;
padding-bottom: 10px;
padding-top: 10px;
font-size: 18px;
text-align: left;
font-family: Verdana, Geneva, sans-serif;
color: black;
}




/* Form inputs styling */
input[type="email"],
input[type="password"],
input[type="text"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}

/* Submit button styling */
input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #0056b3;
}

/* Responsive design for smaller screens */
@media (max-width: 780px) {
    .form-container {
        width: 98%;
    }
}

.form-box {
  display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}

.registerintrobasebackground {
    width: 100%;
    background-color: #F8F8F8;
   padding-top: 10px;
    padding-bottom: 10px;
font-family: "Poppins", sans-serif;
    }

.form-box-register {
  display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
padding-bottom: 80px;
}


.registerlogo {
    width: 20%;        /* Defines the container size */
    margin: 0 auto;    /* This centers the DIV itself on the screen */
    padding-bottom: 30px;
    text-align: center; /* Ensures content inside is aligned center */
}

.registerlogo img {
    width: 100%;       /* Forces image to fit the container width */
    height: auto;      /* Keeps the image aspect ratio correct */
    display: block;    /* Removes extra space below the image */
}

.form-header {
 text-align: center;
font-size: 20px;
padding-bottom:20px;
padding-top:5px;
     font-family: "Poppins", sans-serif;
 font-weight: bold; 
}

.login-form-header {
 text-align: center;
font-size: 26px;
padding-bottom:20px;
padding-top:5px;
     font-family: "Poppins", sans-serif;
 font-weight: bold; 
}


.form-header-register {
 text-align: center;
font-size: 30px;
padding-bottom:20px;
padding-top:5px;
     font-family: "Poppins", sans-serif;
 font-weight: bold; 
}

.small-form-header {
 text-align: center;
font-size: 18px;
padding-bottom:20px;
     font-family: "Poppins", sans-serif;
 font-weight: bold; 
}

.form-headertext {
 text-align: center;
font-size: 14px;
    font-family: "Poppins", sans-serif;
margin-top: 16px;
}


.membersboxouter{
   background-color: #F8F8F8;
  width: 100%;
  margin: 0 auto;       /* centers the entire block horizontally */
  padding: 0 15px;      /* gives space on mobile so content isn't flush to screen edge */
  box-sizing: border-box;
flex-wrap: wrap; 
}

.membersboxouterstatus{
  width: 60%;
  margin: 0 auto;       /* centers the entire block horizontally */
padding-top: 20px;
}


@media (max-width: 768px) {
  .membersboxouter {
    flex-direction: column;
  }}

.membersbox{
 text-align: center;
 font-family: "Poppins", sans-serif;
margin-top: 16px;
font-size: 30px;
font-weight: bold;
    padding-top: 40px;
    padding-bottom: 20px;
    width: 60%;
margin: 0 auto;
 }

.membersboxintro{
 text-align: center;
   font-family: "Poppins", sans-serif;
margin-top: 16px;
font-size: 15px;
font-weight: bold;
    padding-top: 40px;
    padding-bottom: 20px;
    width: 60%;
margin: 0 auto;
 }

.settingsbox {
    text-align: center;
    font-size: 30px;
    width: 60%;
    margin: 0 auto; /* Centering the div */
    margin-top: 20px;
 border-radius: 10px;
margin-bottom: 30px;
    padding-top: 30px;
    padding-bottom: 40px;
}

.membersboxlinks{
border: 1px solid grey;  
    padding-top: 20px;
padding-bottom: 30px;
    width:90%;
border-radius: 10px;
margin: 0 auto; 
margin-top: 20px;
margin-bottom: 20px;
 }

.membersboxlinksheader{
     font-family: "Poppins", sans-serif;
margin-top: 5px;
font-size: 20px;
color: black;
    padding-top: 10px;
    width:90%;
margin: 0 auto; 
 }


.membersboxlinkstext{
    font-family: "Poppins", sans-serif;
margin-top: 10px;
font-size: 16px;
color: black;
padding-top: 20px;
    padding-bottom: 10px;
    width:90%;
margin: 0 auto; 
 }

.membersnewrow {
    padding-top: 20px;
padding-bottom: 20px;
    width: 100%;
font-size: 15px;
font-family: "Poppins", sans-serif;
font-weight: bold;
 text-align: center;
 }


.manageaccountlinkheader {
text-align: left;
    padding-top: 30px;
    padding-bottom: 20px;
    width: 90%;
font-size: 18px;
font-weight: bold;
 margin: 0 auto;

 }


.manageaccountlink {
text-align: left;
    padding-top: 30px;
    padding-bottom: 20px;
    width: 90%;
font-size: 16px;
 margin: 0 auto;
 }


.pricingbox {
    width: 80%;
    padding: 2rem 0.5rem; 
    margin: 0 auto;  
    font-family: Arial, Helvetica, sans-serif;  /* Capitalized font family names */
    font-size: 1rem;  /* Use relative units for font size */
    box-sizing: border-box;  /* Ensures padding is included in width */
}



.pricingboxtext { 
    width: 50%;
    padding-bottom: 30px;
   margin: 0 auto;
font-family: arial, helvetica, sans-serif; 
  font-size: 17px;
}


@media only screen and (max-width: 768px) {
.pricingboxtext {
 width: 90%;
  }
}




  .update-box-shell-text {
width: 100%;
padding-top: 40px;
 font-family: "Poppins", sans-serif;
  font-size: 12px;
text-align: center;
        }



  .update-box-shell {
width: 70%;
padding-top: 50px;
padding-bottom: 200px;
 margin: 0 auto;
border-radius: 15px;
font-family: arial, helvetica, sans-serif; 
  font-size: 22px;
text-align: center;
font-weight: bold;
        }

@media only screen and (max-width: 768px) {
  .update-box-shell {
width: 90%;  
 margin: 0 auto; 
  }
}











.pricecontainer {
      display: flex;
        align-items: center;
color: #1F97F8; 
    }

   .left, .middle, .right {
height: 80px;
    }

    .left {
      width: 47%;
padding-right: 10px;
font-size: 20px;
text-align: right;
padding-top: 10px;
    }

    .middle {
font-size: 80px;
font-weight: bold;
width: 5%;
    }

    .right {
      width: 43%;
font-size: 20px;
padding-left: 10px;
padding-top: 55px;
    }

    .mobilepricebase {
      width: 100%;
font-size: 20px;
text-align: center;
color: #1F97F8;
    }









.pricingboxline {
    width: 100%;
    padding-top: 20px;
}


  .pricing-box-shellouter {
 margin-top: 70px;
background-color: #F1F1F1;
padding-top: 40px;
padding-bottom: 40px;
        }

  .pricing-box-shell {
width: 60%;
 margin: 0 auto;
background-color: white; 
box-shadow: 5px 5px 5px 5px rgba(0, 0.0, 0.1, 0.1);
padding-bottom: 40px;
        }

@media only screen and (max-width: 768px) {
  .pricing-box-shell {
width: 90%;  
 margin: 0 auto; 
  }
}

.pricing-box {
color: #1a85f8;
  text-align: center;
font-size: 30px;
font-weight: bold;
margin-bottom: 25px;
}


  .band-container-box {
         width:90%;
 margin: 0 auto;
        }


.news-container-box {
  width: 100%;
padding-left: 10%;
padding-right: 10%;

  display: flex;
  flex-direction: column;
}








  .reason-container-box {
         width:100%;
        }


@media only screen and (max-width: 768px) {
.reason-container-box {
width:90%;
  }
}

.reason-link-box {
    display: flex;
    align-items: center;  /* Vertically centers the content */
    justify-content: center; /* Horizontally centers the content */
 border-radius: 10px;
}






.reason-container-link {
  margin-top: 10px;
    padding: 10px;
    display: flex;
    align-items: center;  /* Vertically centers the content inside this element */
    justify-content: center; /* Horizontally centers content inside this element */
    padding-bottom: 20px;
 transition: background 0.3s ease;
 border-radius: 999px; /* creates the pill shape */
font-weight: bold;
}


        .reason-container {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            padding: 10px;
            width: 100%;
        }
        .reason-container img {
            width: 50px;
            height: 50px;
            margin-right: 20px;
        }
        .reason-text {
            font-size: 18px;
        }


   .deleteaccount {
       	    width: 100%;
           
            font-size: 26px;
            font-weight: bold;
		color: white;
            text-align: center;
        padding-top: 200px;
 padding-bottom: 200px;
        }


   .pageinfosignup {
            margin: 0 auto;
            display: inline-block; 
            padding-top: 10px;
     padding-bottom: 10px;
   padding-left: 30px;
padding-right: 30px;
            font-size: 22px;
background-color: #1a85f8;
border: 1px solid #1a85f8;
color: #fff;
            text-align: center;
transition: background 0.3s ease;
 border-radius: 999px; /* creates the pill shape */
font-weight: bold;
        }


.pageinfosignup:hover {
background-color: #fff;
color: #1a85f8;
}





.pageinfosignupindex:hover {
background-color: #1a85f8;
color: #fff;
}


.pageinfosignupindex {
    margin: 0 auto;
    display: inline-block;
    padding: 10px 30px;
    font-size: 22px;
    background-color: #fff;
    border: 1px solid #1a85f8;
    color: #1a85f8;
    text-align: center;
    transition: background 0.3s ease;
    border-radius: 999px;
    font-weight: bold;
    position: relative; /* necessary */
}

.pageinfosignupindex::after {
    content: "→";     /* arrow */
    margin-left: 10px;
    font-size: 22px;
    transition: transform 0.2s ease;
}

.pageinfosignupindex:hover::after {
    transform: translateX(4px); /* nice hover movement */
}



















.signup-link {
    text-decoration: none; 
    color: white;
    position: relative; /* Required for the pseudo-element */
}

   .formsinfosignup {
            margin: 0 auto;
            display: inline-block; 
            padding-top: 10px;
     padding-bottom: 10px;
   padding-left: 30px;
padding-right: 30px;
            font-size: 22px;
background-color: #fff;
border: 1px solid #1a85f8;
color: #1a85f8;
            text-align: center;
transition: background 0.3s ease;
 border-radius: 999px; /* creates the pill shape */
font-weight: bold;
        }

.formsinfosignup:hover {
background-color: #1a85f8;
color: #fff;
}

.form-signup-link {
    text-decoration: none; 
    color: #1a85f8;
    position: relative; /* Required for the pseudo-element */
}







   .indexpageinfosignup {
            margin: 0 auto;
            display: inline-block; 
            padding-top: 10px;
     padding-bottom: 10px;
   padding-left: 30px;
padding-right: 30px;
            font-size: 26px;
background-color: orange;
            text-align: center;
        }

.indexpageinfosignup:hover {
background-color: blue;
}



.memberslinkbox1 {
    display: inline-block;
border: 2px solid grey;
margin: 10px;
padding-bottom: 60px;
border-radius: 15px;
width: 30%;
}



.memberslinkbox2 {
    display: inline-block;
border: 2px solid grey;  
margin: 10px;
padding-bottom: 60px;
width: 30%;
border-radius: 15px;
}

.memberslinkbox2:hover {
border: 2px solid #CEEFE0;  
}

.memberslinkbox3 {
    display: inline-block;
border: 2px solid grey;
margin: 10px;
padding-bottom: 60px;
width: 30%;
border-radius: 15px;
}

.memberslinkbox3:hover {
border: 2px solid #9FDEE0; 
}






@media only screen and (max-width: 768px)
{
.memberslinkbox1{
width: 90%;
}
}

@media only screen and (max-width: 768px)
{
.memberslinkbox2{
width: 90%;
}
}


@media only screen and (max-width: 768px)
{
.memberslinkbox3{
width: 90%;
}
}









.membersboxtitle1 {
 font-family: Arial, sans-serif;    font-weight: bold; font-size: 26px; 
        color: black; text-align: center; margin-top: 25px; margin-bottom: 10px; width: 100%;
}

.membersboxtitle2 {
 font-family: Arial, sans-serif;    font-weight: bold; font-size: 26px; 
        color: black;  text-align: center; margin-top: 25px; margin-bottom: 10px; width: 100%;
}

.membersboxtitle3 {
 font-family: Arial, sans-serif;    font-weight: bold; font-size: 26px; 
        color: black;  text-align: center;  margin-top: 25px; margin-bottom: 10px; width: 100%;
}

.membersboxtext { 
        color: white;
text-align: center;
width: 80%;
margin: 0 auto; 
margin-top: 10px;
margin-bottom: 50px;
}


















.catrowbox {
  width: 80%;
  border: 1px solid #1a85f8; 
  margin: 0 auto; /* centers horizontally */
  box-sizing: border-box; /* optional but recommended */
margin-bottom: 20px;
}

.catrow {
  width: 80%;
  padding: 10px;
}

    .catrow1 {
      background-color: #1a85f8;
      font-size: 20px;
color: white;
      font-weight: bold;
  width: 100%;
box-sizing: border-box;
    }

    .catrow2 {
      background-color: #ffffff;
  width: 100%;
    }

    .catrow3 {
      background-color: #F5F5F5;
  width: 100%;
    }










.containerabout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns with equal width */
    grid-template-rows: repeat(4, auto); /* Four rows */
    gap: 3%; /* Optional gap between grid items */
    margin-bottom: 20px;
    margin-top: 30px;
}

.containeraboutleft, .containeraboutright {
    /* Remove the width definitions, since the grid layout handles column sizing */
}

.aboutus {
     font-family: "Poppins", sans-serif; 
    font-size: 18px; 
    font-weight: bold; 
    padding-top: 20px;
}

.objectives {
    padding-top: 20px;
}










.generate-btn {
    border: 2px solid white;
    color: white;
    padding: 15px 30px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 40px;
    transition: border-color 0.3s, color 0.3s;
    background: transparent; /* No background color */
}

.generate-btn:hover {
    border-color: black;
    color: black;
}

.event-name {

width: 100%;
    margin: 30px 0;
}












  ul {
            list-style-type: disc;
            margin-left: 20px;
        }


@media only screen and (max-width: 768px) {
    .membersbandprizesleft {
        width: 100%;
        float: none; /* Disable float on smaller screens */
    }
}

.membersbandprizesleft img {
    max-width: 100%;
}

.membersbandprizesright {
    width: 68%;
    float: right;
    
}

@media only screen and (max-width: 768px) {
    .membersbandprizesright {
        width: 100%;
        float: none; /* Disable float on smaller screens */
padding-top: 15px;
    }
}







.more-bands-link-box {
    display: flex;
    margin-top: 30px;
margin-bottom: 50px;
    align-items: center;  /* Vertically centers the content */
    justify-content: center; /* Horizontally centers the content */

}

.more-bands-container-link {

    padding: 10px;
    display: flex;
    align-items: center;  /* Vertically centers the content inside this element */
    justify-content: center; /* Horizontally centers content inside this element */
}

.more-bands-link {
    text-decoration: none; 
    color: white;
    position: relative; /* Required for the pseudo-element */
}       


   .morebandslink {
            margin: 0 auto;
            display: inline-block; 
            padding-top: 10px;
     padding-bottom: 10px;
   padding-left: 30px;
padding-right: 30px;
            font-size: 26px;
background-color: #000;
            text-align: center;
font-weight: bold;
        }

.morebandslink:hover {
background-color: white;
color: black;
}













.mobilebandcontainer {
  display: flex;
  width: 90%;
  box-sizing: border-box;
  margin: 0 auto;           /* centers the div horizontally */
  justify-content: center;  /* optional: centers child elements horizontally inside */
 background: #f0f0f0;
margin-bottom: 7px;
}

    .mobilebandleft {
      width: 33%;
      padding: 2%;
      box-sizing: border-box;
      display: flex;
      justify-content: center;   /* centers image horizontally */
      align-items: center;       /* centers image vertically */
    }

    .mobilebandleft img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    .mobilebandright {
      width: 67%;
      padding: 2%;
      box-sizing: border-box;
font-size: 18px;
font-weight: bold;
    }

    /* Optional styling for right content */
    .mobilebandright h2 {
      margin-top: 0;
    }

    /* Responsive: stack columns on small screens */
    @media (max-width: 768px) {
      .mobilebandcontainer {
              display: flex;
      }
      .mobilebandleft {
        width: 35%;
      }

      .mobilebandright {
        width: 63%;
      }
    }
 

.mobileindexboxblueshell {
margin-top: 10px;
    width: 100%;
}

















:root {
  /* Desktop Variables */
  --image-width: 400px;
  --image-height: 400px;
  --image-margin: 40px;
  --total-images: 12;
  --animation-duration: 400s;

  /* Mobile Variables */
  --mobile-image-width: 300px;
  --mobile-image-height: 300px;
  --mobile-image-margin: 20px;
  --mobile-animation-duration: 380s;
}

/* Reset Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Carousel Container */
.carousel {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  margin: 30px 0;
}


/* Scrolling Animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * (var(--image-width) + var(--image-margin)) * var(--total-images)));
  }
}













        .question {
            background-color: black; 
            padding: 15px;
            margin: 20px auto;
            margin-bottom: 10px;
            width: 70%;
            border-radius: 8px;
        }
        .questionheader {
            margin-bottom: 10px;
            color: white;
        }
        .option {
            background-color: white;
            padding: 10px;
            margin: 5px auto;
            cursor: pointer;
            transition: background-color 0.3s ease;
            display: block;
            width: 80%;
            border-radius: 5px;
        }
        .option:hover {
            background-color: orange;
        }

.submitbuttondiv {
    width: 18%;

    margin: auto;       /* centers the button */
  }

.submit-button {
    width: 18%;
    display: block;
    margin: 20px auto;       /* centers the button */
    padding: 20px 30px;
    font-size: 22px;
    background-color: lightblue;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-sizing: border-box;  /* ensures padding doesn't break width */
}
.submit-button:hover {
    background-color: darkblue;
}

        .score {
            text-align: center;
            margin-top: 40px;
            font-size: 20px;
            color: red;
        }
        .correct-answer {
            margin-top: 5px;
            color: white;
            font-weight: bold;
        }








.indexresearchbase-container {
  display: flex;
  justify-content: space-between; /* equal distance between columns */
  width: 96%;
gap: 24px; 
  margin: 0 auto;
  padding: 40px;
}


/* Responsive: stack columns on small screens */
@media (max-width: 768px) {
  .indexresearchbase-container {
    flex-direction: column;
    gap: 15px;
  }
}


/* Responsive: stack columns on small screens */
@media (max-width: 768px) {
  .indexresearchbase-column {
    width: 100%;
font-family: "Poppins", sans-serif;
  }
}


.indexresearchbase-column:hover {
  transform: translateY(-10px);
}



.indexresearchbase-column {
  width: 31%;
  padding: 20px;
  box-sizing: border-box;
margin-bottom: 30px;
    background-color: white;
color: black;
font-family: "Poppins", sans-serif;
font-size: 17px;
    border-radius: 20px;
}


  .indexresearchbase-column {
    width: 100%;
font-family: "Poppins", sans-serif;
  }



.indexresearchbase-columnheader {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
font-family: "Poppins", sans-serif;
text-align: center;
color: #222;
}

.indexresearchbase-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.indexresearchbase-mainheader {
font-size: 32px;
text-align: center;
width: 100%;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 20px;
color: #333;
font-family: "Poppins", sans-serif;
}

.baseindexresearchbase-mainheader {
font-size: 32px;
text-align: center;
width: 90%;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
font-family: "Poppins", sans-serif;
color: #333;
}


.baseindexresearchbaseback {
    font-size: 32px;
    text-align: left;
    width: 100%;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 40px;
  padding-left: 5%;
    font-family: "Poppins", sans-serif;
    color: #333;
    font-weight: bold;
}

.baseindexresearchbasebackcontainer {
  display: flex;            /* This makes children sit side-by-side */
  justify-content: space-between; /* Pushes them apart (optional) */
}

.baseindexresearchbasebackleft {
  width: 72%;              /* Corrected typo */
  box-sizing: border-box;  /* Ensures border doesn't add to width */
}

.baseindexresearchbasebackright {
  width: 25%;              /* Corrected typo */
  box-sizing: border-box;  /* Ensures border doesn't add to width */
padding-right: 5%;
 text-align: right;
}


/* --- DESKTOP STYLES (Your existing code) --- */
.baseindexresearchbasebackcontainer {
  display: flex;
  justify-content: space-between;
}

.baseindexresearchbasebackleft {
  width: 45%;
  box-sizing: border-box;
  /* Add border here if needed */
}

.baseindexresearchbasebackright {
  width: 40%;
  box-sizing: border-box;
  padding-right: 5%;
  text-align: right;
  /* Add border here if needed */
}

/* --- MOBILE STYLES (Add this at the end) --- */
@media (max-width: 768px) {
  .baseindexresearchbasebackcontainer {
    flex-direction: column;
    gap: 20px; 
  }

  .baseindexresearchbasebackleft,
  .baseindexresearchbasebackright {
    width: 100%;
    text-align: center;
    padding-right: 0;
  }
}

.pill-button {
  /* Core Colors */
  background-color: transparent;
  border: 2px solid #ff6600;
  color: #ff6600;
  
  /* Sizing and Shape */
  padding: 12px 30px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: bold;
  
  /* Functional Styling */
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  
  /* Smooth Animation */
  transition: all 0.3s ease;
}

/* 1. Create the Arrow */
.pill-button::after {
  content: '\279C';         /* Unicode for right arrow (→) */
  display: inline-block;    /* Allows the arrow to move/transform */
  margin-left: 8px;         /* Space between text and arrow */
width: 20px;
  transition: transform 0.3s ease; /* Smooth movement */
}

/* 2. The Button Hover Effect */
.pill-button:hover {
  background-color: #ff6600;
  color: #ffffff;
}

/* 3. The Arrow Movement Effect */
.pill-button:hover::after {
  transform: translateX(5px); /* Move arrow 5px to the right */
}











.baseindextasks-header {
font-size: 32px;
text-align: center;
width: 90%;
margin: 0 auto;
padding-top: 30px;
font-family: "Poppins", sans-serif;
color: #333;
font-weight: bold;
}





.aboutstyleindexboxbox {
  width: 100%;
  display: flex;   
flex-direction: column;             /* make it a flex container */
  flex-direction: row;          /* rows on desktop */
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin: 0 auto;
}

/* Mobile: stack */
@media (max-width: 768px) {
  .aboutstyleindexboxbox {
    flex-direction: column;     /* switch to column only on mobile */
  }
}











.pricingstyleindexboxleft {
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 150px;
    width: 70%;
font-size: 18px;
text-align: left;
color: black;
margin-left: 10%;
margin-bottom: 40px;
}



.aboutstyleindexboxleft {
    margin-top: 20px;
    width: 80%;
font-size: 18px;
text-align: left;
color: black;
margin: 0 auto;
margin-bottom: 40px;
}

.aboutstyleindexboxright {
    font-size: 16px;
    margin-top: 20px;
    width: 30%;
overflow: hidden;
}

.aboutstyleindexboxright img {
width: 100%;
 height: auto;
    display: block; /* removes extra space under image */
    object-fit: contain; /* optional: keeps aspect ratio */
}

@media (max-width: 768px) {
  .aboutstyleindexboxleft,
  .aboutstyleindexboxright {
    width: 90%;
    margin-left: auto;
 margin-right: auto;
  flex-direction: column;
  }
  .membersblockrow {
    width: 100%;
  }
}





/* Container: 3 across on desktop, stack on narrow screens automatically */
.membersblockrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  padding: 0 15px 50px;
  margin: 30px auto 25px;
  max-width: 1100px;           /* page width for the row, adjust as needed */
  box-sizing: border-box;
}

/* Make links behave like blocks and inherit text color */
.membersblockrow a {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Card */
.membersresearchbox {
  background-color: #242B69; 
  color: white;
font-family: "Poppins", sans-serif;
  padding: 16px;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover/focus effects */
.membersresearchbox:hover,
.membersresearchbox:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  outline: none; /* remove default, rely on shadow; or add a custom outline */
 background-color: #242B69; 
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .membersresearchbox {
    transition: box-shadow 0.2s ease;
  }
  .membersresearchbox:hover,
  .membersresearchbox:focus-visible {
    transform: none;
  }
}

.membersresearchboxtitle {
  font-size: 26px;
  text-align: center;
  margin: 10px 0;
}













.memberquerybox {
  width: 100%;
margin-top: 30px;
}

.memberqueryboxexample {
  width: 100%;
margin-top: 15px;
margin-bottom: 15px;
font-size: 14px;
    font-family: Arial, sans-serif;
}


.memberquerysubmit {
    display: block;              /* allows margin auto to center it */
    width: 50%;
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    margin: 0 auto;
    text-align: center;
}

.memberquerysubmit:hover {
    background-color: #0056b3;    /* optional: hover effect */
}


.questionbox {
  display: flex;
  align-items: center;       /* Vertically centers content */
  justify-content: center;   /* Horizontally centers content */
  width: 80%;
  margin: 30px auto 0 auto;  /* centers horizontally & adds top margin */
}

.result-container-box {
  margin-top: 15px;
}



.resultsbox {
font-size: 18px;
}



.resultintrotext {
    width: 100%;
padding-bottom: 60px;
padding-top: 20px;
font-size: 18px;
text-align: left;
font-family: "Poppins", sans-serif;
color: black;
}

@media only screen and (max-width: 768px) {
.resultintrotext {
 width: 100%;
  }
}









/* Container styling */
#training-section-main {
  padding: 60px 20px;
 font-family: "Poppins", sans-serif;
}


.trainingintrobasebackground {
  max-width: 100%;
  margin: 0 auto;
    background-color: #F8F8F8;
   padding-top: 20px;
    padding-bottom: 30px;
font-family: "Poppins", sans-serif;
    }


.training-container-main {
  max-width: 100%;
  margin-bottom: 20px;
}

/* Header */
.training-header-main h2 {
  font-size: 2rem;
  text-align: center;
  color: black; 
}

.training-header-main p {
  margin-bottom: 20px;
}

.training-header p {
  text-align: center;
  color: #444;
  margin-bottom: 40px;
  font-size: 1rem;
}

/* List layout */
.training-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Row cards */
.training-row-main {
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.training-row-main:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.training-row-main h3 {
  margin: 0 0 10px;
  color: #FF7E0B;
  font-size: 1.3rem;
}


.training-row p {
  margin: 0 0 15px;
  color: #555;
  line-height: 1.4;
}

/* Button styling */
.training-button {
  display: inline-block;
background-color: #1a85f8;
  color: #fff;
  padding: 10px 18px;
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: background 0.3s ease;
margin-top: 15px;
}

.training-button:hover {
  background-color: orange;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .training-header h2 {
    font-size: 1.7rem;
  }

  .training-row {
    padding: 18px;
  }

  .training-row h3 {
    font-size: 1.2rem;
  }

  .training-button {
    width: 100%;
    text-align: center;
    padding: 12px 0;
  }
}












/* Overall section styling */
#training-section {
background-color: #F4F8F9;
  padding: 60px 20px;
font-family: "Poppins", sans-serif;
}

/* Main container */
.training-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Header section */
.training-header h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: black;
}

.training-header p {
  font-size: 1.1rem;
  color: black;
  margin-bottom: 40px;
}

/* Grid layout for guides */
.training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

/* Individual cards */
.training-card {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.training-card h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: Black;
}

.training-card p {
  font-size: 1rem;
  color: black;
  margin-bottom: 20px;
}

.training-card-link {
  font-size: 18px;
  text-align: center;
  margin-top: 30px;
}



/* Button styling */
.training-button {
  display: inline-block;
  padding: 10px 18px;
  background: #0077ff;
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  border-radius: 6px;
  transition: background 0.3s ease;
}






















/* Overall section styling */
#blog-section {
background-color: #F4F8F9;
  padding: 60px 20px;
font-family: "Poppins", sans-serif;
}

/* Main container */
.blog-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Header section */
.blog-header h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: black;
}

.blog-header p {
  font-size: 1.1rem;
  color: black;
  margin-bottom: 40px;
}

.blogimagebox img {
margin-top: 10px;
margin-bottom: 10px;
  width: 100%;
padding-left: 15%;
padding-right: 15%;
}

/* Grid layout for guides */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

/* Individual cards */
.blog-card {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: Black;
}

.blog-card p {
  font-size: 1rem;
  color: black;
  margin-bottom: 20px;
}

.blog-card-link {
  font-size: 18px;
  text-align: center;
  margin-top: 30px;
}


.blog-row-main {
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
margin-bottom: 25px;
}

.blog-row-main:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.blog-row-main h3 {
  margin: 0 0 10px;
  color: #FF7E0B;
  font-size: 1.3rem;
}

/* Button styling */
.blog-button {
  display: inline-block;
  padding: 10px 18px;
  background: #0077ff;
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  border-radius: 6px;
  transition: background 0.3s ease;
  margin-top: 10px;
}

.blog-button:hover {
  background: #005fcc;
}

































/* Overall section styling */
#support-section {

  padding: 40px 20px;
  font-family: "Poppins", sans-serif;
}

/* Main container */
.support-container {
  max-width: 80%;
  margin: 0 auto;
  text-align: center;

}

/* Header section */
.support-header h2 {
  font-size: 3.0rem;
  margin-bottom: 30px;
  color: black;
}

.support-header p {
  font-size: 1.1rem;
  color: black;
  margin-bottom: 40px;
  max-width: 80%;
  margin: 0 auto;
}

.support-header-text  {
  font-size: 1.1rem;
  color: black;
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: 30px;
}

/* Grid layout for guides */
.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

/* Individual cards */
.support-card {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.support-card h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: black;
}

.support-card p {
  font-size: 1rem;
  color: black;
  margin-bottom: 20px;
}

/* Button styling */
.support-button {
  display: inline-block;
  padding: 10px 18px;
  background: #0077ff;
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  border-radius: 6px;
  transition: background 0.3s ease;
}

.support-button:hover {
  background: #005fcc;
}








 #supportform {
      background: #fff;
      padding: 30px;
      border-radius: 12px;
      width: 70%;
margin: 0 auto;
      margin-top: 30px;
      margin-bottom: 30px;
    }

    #supportform h2 {
      margin-bottom: 20px;
      text-align: center;
      color: #333;
    }

    .form-group {
      margin-bottom: 15px;
      display: flex;
      flex-direction: column;
    }

    .form-group label {
      margin-bottom: 6px;
      font-size: 14px;
      color: #444;
    }

    .form-group input,
    .form-group textarea {
      padding: 10px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 6px;
      transition: border-color 0.3s ease;
      resize: none;
    }

    .form-group input:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: #007bff;
    }

    .submit-btn {
      width: 100%;
      padding: 12px;
      background: #007bff;
      color: white;
      font-size: 16px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .submit-btn:hover {
      background: #0056b3;
    }

    @media (max-width: 480px) {
      #supportform {
        padding: 20px;
      }
    }





/* Container to hold the video and content */
.video-background {
  position: relative;
  height: 100vh;         /* Full viewport height */
  overflow: hidden;
}

/* Full-width video container */
.video-section {
  position: relative;
  width: 100%;            /* 👈 full width of the viewport */
  height: 100%;           /* optional: full height of the viewport */
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Background video */
.video-section video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;            /* 👈 stretch to full width */
  height: 100%;
  object-fit: cover;      /* 👈 fill the container */
  z-index: -1;            /* 👈 sit behind content */
}

/* Content overlay */
.video-content {
  position: relative;
  z-index: 1;             /* 👈 above the video */
  color: white;
  text-align: center;
  padding-top: 40vh;      /* vertically center-ish */
  font-size: 2rem;
}

















/* Outer wrapper */
.indexbasevideodisplay-containerouter {
  width: 100%;
  margin: 0 auto;
background-color: #bbb;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 4%;
padding-right: 4%;
}

/* Row of cards */
.indexbasevideodisplay-container {
  display: flex;
  gap: 16px;            /* space between cards */
  align-items: stretch; /* equal heights */
  min-width: 0;         /* prevents overflow with long text */
}

/* Each card whose id starts with "indexbasevideodisplay" */
.indexbasevideodisplay-container > div[id^="indexbasevideodisplay"] {
  flex: 1 1 0;
  border-radius: 12px;
  box-sizing: border-box;
  background: #000;       /* better base behind video */
  height: 300px;          /* or use: aspect-ratio: 16 / 9; */


  position: relative;     /* anchor for absolute children */
  overflow: hidden;       /* keep video/overlay inside rounded corners */
  padding: 0;             /* avoid offsetting the absolute video */
}

/* Stack on small screens */
@media (max-width: 640px) {
  .indexbasevideodisplay-container {
    flex-direction: column;
  }
}

/* Make video fill the card */
.indexbasevideodisplay-container video {
  position: absolute;
  inset: 0;               /* shorthand for top/left/right/bottom: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fills the box, keeps aspect ratio */
  object-position: center;
  border-radius: inherit;
  z-index: 0;
  display: block;         /* removes inline-gap quirks */
  pointer-events: none;   /* allow clicks on overlay/text if needed */
}

/* Centered overlay text inside each card */
.overlay-text {
  position: absolute;
  inset: 0;                     /* fill container */
  display: grid;                /* simple centering */
  place-items: center;          /* center horizontally & vertically */
  padding: 16px;                /* replace card padding for text */
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
font-family: "Poppins", sans-serif;
  font-weight: 700;
  z-index: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  pointer-events: none;         /* text is decorative; toggle if clickable */
}

/* Optional: improve legibility with a subtle gradient */
.overlay-text::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0.15));
  z-index: -1;
}






.blackfooter {
  display: flex;
  width: 100%;
  background-color: #F8F3F0;
  color: #fff;
  padding: 40px 0;
  box-sizing: border-box;
  font-size: 14px;
}


.footer-column-image {
  width: 15%;
margin-left: 5%;
margin-right: 8%;
}

.footer-column-image img {
  width: 100%;
  height: auto;
  display: block;
}

.footer-column-text {
  width: 60%;
float: right;
}

.footer-column-right,
.text-column {
  width: 55%;
float: right;
padding-left: 20%;
margin-left: 10%;
}

/* Make text columns sit to the right */
.text-column {
  margin-left: auto;
}
.footer-text-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-text-left,
.footer-text-right {
  width: 40%;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}



















.basefooter-container {
  display: flex;
  width: 100%;
}

.basefooterleft {
  width: 5%;
  background: #F8F3F0;
}

.basefootermiddle {
  width: 90%;
  background: #F8F3F0;
  border-top: 1px solid #777;
  font-family: "Poppins", sans-serif;
  color: #424242;
  font-size: 14px;
  padding-top: 20px;
  padding-bottom: 40px;
}

.basefooterright {
  width: 5%;
  background: #F8F3F0;
}



























/* Overall section styling */
#guides-section {
background: pink;
  padding: 60px 40px;
  font-family: "Poppins", sans-serif;
}

/* Main container */
.guides-container {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}


.guides-container h2 {
  font-size: 2.5rem;
  color: white;
 
}


.guides-container-content {
 
  font-family: "Poppins", sans-serif;
padding-bottom: 90px;
padding-top: 30px;
}

.guides-container-content-container {
 
width: 100%;
  display: flex;
}


.guides-container-content-title {
width: 100%;
text-align: center;
  font-family: "Poppins", sans-serif;
padding-bottom: 20px;
padding-top: 30px;
 
}

.guides {
  width: 30%;
  margin-left: 15%;
  box-sizing: border-box; /* ensures padding doesn't overflow width */
  font-size: 18px;
}

/* Mobile-friendly (one-column) layout */
@media (max-width: 768px) {
  .guides-container-content {
    display: flex;
    flex-direction: column;
  }

  .guides {
    width: 80%;
    margin: 0 auto; /* centers the column */
    font-size: 18px; /* slightly smaller for readability on small screens */
  }
}













.indexmaincontainer {

    width: 100%;
margin: 0 auto; 
padding-top: 10px; 
}

.indexmaincontainerset2 {
    width: 94%;
margin: 0 auto; 
padding-top: 10px; 
}


.indexmaincontainerbase {
    width: 100%;
margin: 0 auto; 
padding-top: 20px; 
padding-bottom: 20px; 
}

.leftindexblockcontainer,
.rightindexblockcontainer {
  width: 94%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
background-color: white;
margin-top: 15px;
margin-bottom: 5px;
border-radius: 18px;

}

/* LEFT INDEX BLOCKS */
.leftindexblockleft {
  width: 58%;
  padding: 15px;
  box-sizing: border-box;
}

.leftindexblockright {
  width: 41%;
  box-sizing: border-box;
}

/* RIGHT INDEX BLOCKS */
.rightindexblockleft {
  width: 44%;
  box-sizing: border-box;
}

.rightindexblockright {
  width: 55%;
  border-radius: 18px;
  padding: 25px;
  box-sizing: border-box;
}

/* ===== MOBILE RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .leftindexblockcontainer,
  .rightindexblockcontainer {
    flex-direction: column;
    align-items: center;
  margin-bottom: 40px;
  margin-top: 20px;
  }

  .leftindexblockleft,
  .leftindexblockright,
  .rightindexblockleft,
  .rightindexblockright {
    width: 100%;
  }

  /* optional: reduce padding and radius for small screens */
  .leftindexblockleft,
  .rightindexblockright {
    padding: 15px;
    border-radius: 12px;
    margin-top: 30px;
  }
}

/* For very small screens */
@media (max-width: 480px) {
  .leftindexblockleft,
  .rightindexblockright {
    padding: 5px;
  }
}














    /* --- Page shell --- */
    .indexmainbloc-page{
      display:flex;
      flex-direction:column;
    }

    .indexmainbloc-max{
      width: 90%;
      margin-inline:auto;
    }

    .indexmainbloc-hero{
      display:grid;
      grid-template-columns: 1.10fr .90fr;
      gap:56px;
      padding:54px 0 14px;
      align-items:center;
margin-bottom: 20px;
    }



    .indexmainbloc-eyebrow-header{
      font-weight: 600;
     font-size:48px;
      margin-bottom: 20px;
font-family: "Poppins", sans-serif;
color: #000;
line-height: 1.15; /* reduce line spacing */

    }

    .indexmainbloc-heroblock{
width: 90%;
    }



    .indexmainbloc-eyebrow{
      font-weight:400;
     font-size:40px;
      margin:0 0 15px;
font-family: "Poppins", sans-serif;
color: #000;
line-height: 1.25; /* reduce line spacing */
    }
   





    .indexmainbloc-sub{
      color:var(--muted);
font-family: "Poppins", sans-serif;
      font-size: 17px;
      margin:0 0 26px;
     width:95%;
padding-top: 5px;
    }

    .indexmainbloc-maxright{
      width: 90%;
      margin-inline:auto;
border: 1px solid blue;
    }




    .indexmainbloc-features{margin:28px 0 34px; padding:0; list-style:none}
    .indexmainbloc-features li{
      display:flex; align-items:flex-start; gap:14px;
      font-size:18px; margin:16px 0;
    }
    .indexmainbloc-badge{
      width:34px; height:34px; border-radius:50%;
      display:grid; place-items:center;
      border:2px solid #FFD166;
      color:#FDBA21;
      flex:0 0 34px;
    }
    .indexmainbloc-badge svg{width:18px; height:18px}

    .indexmainbloc-cta{
      display:inline-block;
      background:var(--brand);
      color:#fff;
      text-decoration:none;
      padding:14px 22px;
      border-radius:12px;
      font-weight:700;
      box-shadow:var(--shadow);
      transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
    }
    .indexmainbloc-cta:hover{transform:translateY(-1px); background:#0947a3}
    .indexmainbloc-cta:active{transform:translateY(0)}

    /* --- Right column: dashboard mock + arrow --- */
    .indexmainbloc-visual-wrap{
      position:relative;
      width: 100%;
     height: 100%;
    }


.indexmainblocimg {
  width: 90%;
  margin: 0 auto; /* optional, centers it */
}

.indexmainblocimg img {
  width: 90%;
  height: auto; /* keeps aspect ratio */
  display: block; /* removes bottom whitespace */
padding-top: 50px;
}


.video-section1 {
  position: relative;
  width: 100%;            /* 👈 full width of the viewport */
  height: 92%;           /* optional: full height of the viewport */
  overflow: hidden;
  margin: 0;
  padding: 0;
      border-radius:12px;
}


/* Background video */
.video-section1 video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;            /* 👈 stretch to full width */
  height: 100%;
  object-fit: cover;      /* 👈 fill the container */
  z-index: -1;            /* 👈 sit behind content */
}







        /* --- Responsive --- */
    @media (max-width: 960px){
      .indexmainbloc-hero{grid-template-columns:1fr; gap:30px; padding-top:28px}
      .indexmainbloc-visual-wrap{min-height:unset}
      .indexmainbloc-card{margin-inline:auto}
      .indexmainbloc-arrow{display:none}
    }


































.faq {

width: 70%;
  flex-direction: column;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 30px;
}





/* Title */
.faq__title {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 700;
  margin: 0 0 1rem;
  text-align: center;
font-family: "Poppins", sans-serif;
}

/* FAQ list wrapper */
.faq__list {
  border-top: 1px solid #e6e8eb;
}

/* Each item */
.faq__item {
  border-bottom: 1px solid #e6e8eb;
  background: #fff;
}

/* Summary (the clickable row) */
.faq__question {
  list-style: none;            /* hides default marker in some browsers */
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  cursor: pointer;
  padding: 1rem 0;
  font-weight: 600;
  color: #0f172a;              /* slate-900-ish */
  position: relative;
}

/* Remove default marker on Safari/Chrome */
.faq__item > .faq__question::-webkit-details-marker {
  display: none;
}

/* Question text truncation for long lines */
.faq__question-text {
  flex: 1 1 auto;
font-size: 20px;
}

/* Custom chevron */
.faq__chevron {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  position: relative;
  transform: rotate(0deg);
  transition: transform .25s ease;
}
.faq__chevron::before,
.faq__chevron::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  clip-path: polygon(20% 35%, 50% 65%, 80% 35%, 85% 40%, 50% 75%, 15% 40%);
  opacity: .9;
}

/* Open state rotates the chevron */
.faq__item[open] .faq__chevron {
  transform: rotate(180deg);
}

/* Answer panel */
.faq__answer {
  padding: 0 0 1rem;
  color: #334155;              /* slate-600-ish */
  line-height: 1.6;
  font-size: 1rem;
}

/* Subtle hover/focus states */
.faq__question:hover { color: #333; }  /* accent-like */
.faq__item:focus-within .faq__question {
  outline: 2px solid #bfdbfe;             /* focus ring */
  outline-offset: 2px;
}

/* Optional: smooth open/close animation (progressive enhancement)
   Works by animating content visibility; not perfect for variable height,
   but gives a nice feel without JS. */
.faq__item .faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}
.faq__item[open] .faq__answer {
  grid-template-rows: 1fr;
}
.faq__item .faq__answer > * {
  overflow: hidden;
}

/* Dark mode (optional) */
@media (prefers-color-scheme: dark) {
  .faq__item { background: #0b0f17; }
  .faq__title { color: #e5e7eb; }
  .faq__question { color: #e5e7eb; }
  .faq__answer { color: #cbd5e1; }
  .faq__list,
  .faq__item { border-color: #1f2937; }
}






.freetoolintroduction {
  width: 100%;
margin-top: 15px;
margin-bottom: 15px;
font-size: 18px;
font-family: "Poppins", sans-serif;
}

.freetoolsintrotext {
    width: 100%;
padding-bottom: 10px;
padding-top: 10px;
font-size: 15px;
text-align: left;
font-family: "Poppins", sans-serif;
color: black;
}

.freetoolbox {
font-family: "Poppins", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}



.tools-container {
    display: grid;
    /* This creates 3 equal columns, forcing the 6 items into 2 rows */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    margin: 20px auto;
}

.freetoolblock {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    /* This aspect-ratio property forces the div to be a square */
    aspect-ratio: 1 / 1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    transition: transform 0.2s;
}

.freetoolblock h3 {
    margin-top: 0;
    font-size: 1.2rem;
    color: #333;
}

.freetoolblock p {
    font-size: 0.9rem;
    color: #666;
    flex-grow: 1; /* Pushes the button to the bottom nicely if text varies */
    display: flex;
    align-items: center;
}

.freetoolblockcontent {
    width: 100%;
}

.freetoolbutton {
    display: inline-block; /* Add this */
    text-decoration: none;
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    margin-top: 10px;
}

.freetoolbutton:hover {
    background-color: #0056b3;
}

/* Responsive adjustment: On small screens, stack them or do 2 columns */
@media (max-width: 768px) {
    .tools-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns, 3 rows */
    }
}

@media (max-width: 500px) {
    .tools-container {
        grid-template-columns: 1fr; /* 1 column stack */
        width: 95%;
    }
    .freetoolblock {
        aspect-ratio: auto; /* Remove square constraint on mobile for better reading */
        min-height: 250px;
    }
}



.tasksblock {
    width: 100%;
   padding-top: 20px;
    padding-bottom: 30px;
font-family: "Poppins", sans-serif;
margin-top: 40px;
margin-bottom: 40px;
    }


#tasks-section {
background: #ECF6FD;
  padding: 60px 40px;
  font-family: "Poppins", sans-serif;
}

/* Main container */
.tasks-container {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}


.tasks-container h2 {
  font-size: 2.5rem;
  color: white;
 
}













.fade-text {
display: inline;
  background: linear-gradient(to right, #2B77A6, #D136E5);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ff0000; /* fallback color for browsers that don't support clipping */
  font-weight: bold;
}

h1 { display: inline; }









/* Single tall column */
.pricing-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 40%;            /* remove parentheses — they break the CSS */
  padding: 2rem 1.5rem;
margin:0 auto;
}

@media (max-width: 768px) {
  .pricing-column {
    width: 80%;
  }
}

/* Each pricing block */
.pricingmodel {
  padding: 1.5rem;
  /* Background image */
  background-image: url("pricingbackground.webp");
  background-size: cover;          /* scales image to cover the entire area */
  background-repeat: no-repeat;    /* prevents tiling */
  background-position: center;     /* centers the image */
font-family: "Poppins", sans-serif;
  color: #ffffff;
border-radius: 15px;
 background-color: #0A192F;
}

.pricingmodel h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}


.pricebutton {
  background-color: #ffffff;      /* white */
  color: #0b3d91;                 /* dark blue text */
  border-radius: 50px;            /* CHANGED: High value creates the pill shape */
  font-size: 14px;
  width: 100%;
  cursor: pointer;
margin-top: 15px;
margin-bottom: 25px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
padding: 15px;
}
.pricebutton:hover {
  background-color: #f0f0f0;      /* light grey on hover */
  color: #0b3d91;                 /* keep blue text */
  border-color: #0b3d91;
}

.pricingmodel h1 {
  font-size: 26px;
}

.pricingmodel h2{
  margin: 0 0 0.5rem;
  font-size: 12px;
}

.pricingmodel p {
  margin: 0 0 1rem;
  font-weight: 600;
}

.pricingmodel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pricingmodel li::before {
  content: "• ";
}

.pricingmodel li {
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}



.pricingpagetext {
  width: 100%;
text-align: center;
  padding-bottom: 10px;
  font-size: 28px;
font-family: "Poppins", sans-serif;
}


.pricingpageprice {
  width: 100%;
  font-size: 32px;
font-family: "Poppins", sans-serif;
  color: white;
}

.pricingpagepricebilled {
  width: 100%;
  padding-bottom: 10px;
  font-size: 12px;
font-weight: bold;
font-family: "Poppins", sans-serif;
  color: white;
}


.pricingpagebullets {
  width: 100%;
border-top: 2px solid #A4A5A8;
padding-top: 10px;
font-family: "Poppins", sans-serif;
}









.avatarintrotitle {
    width: 80%;
margin: 0 auto;
padding-bottom: 10px;
padding-top: 10px;
font-size: 48px;
text-align: center;
font-weight: bold;
font-family: "Poppins", sans-serif;
}

.avatarintrosubtitle {
    width: 80%;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 20px;
font-size: 22px;
font-weight: bold;
font-family: "Poppins", sans-serif;
}

.avatarintrotext {
    width: 80%;
margin: 0 auto;
padding-bottom: 10px;
font-size: 18px;
font-family: "Poppins", sans-serif;
}




    .avatar-wrapper {
      display: flex;
      justify-content: center;   /* center the two columns */
      gap: 2rem;                 /* space between columns */
      margin: 2rem auto;
      max-width: 100%;         /* optional, to avoid super-wide lines */
      flex-wrap: wrap;           /* allow wrapping on small screens */
    }

.avatarimages {
  flex: 0 0 36%;        /* each column is 40% wide */
  box-sizing: border-box;
  padding: 1rem;
}

.avatarimages img {
  width: 100%;
  display: block;
  margin: 0 auto;
}

/* --- MOBILE: stack columns --- */
@media (max-width: 768px) {
  .avatarimages {
    flex: 0 0 100%;   /* full width on mobile */
  }
}


.avatar-link {
    text-decoration: underline; 
    color: black;
    position: relative; /* Required for the pseudo-element */
}

.avatar-link:hover { 
text-decoration: none; 
}


.avatarbasebackground {
    width: 100%;
    background-color: #fff;
   padding-top: 20px;
    padding-bottom: 50px;
font-family: "Poppins", sans-serif;
text-align: center;
    }

.wave-container {
  width: 100%;
  height: 100%;
  background-color: white;
  overflow: hidden;
}




.venue-container-linkouter {
  margin-top: 10px;
 width: 100%;	
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  border-radius: 999px;
  font-weight: bold;
}

.venue-container-linkinner {
 width: 40%;	
margin: 0 auto;
}

/* Mobile layout: stack vertically */
@media (max-width: 600px) {
  .venue-container-linkouter {
    flex-direction: column;
  }
}
  
  .venue-container-linkouter a {
    width: 100%;         /* optional: make links full width */
    text-align: center;  /* centers text when full width */
margin-bottom: 15px;
  }


.venue-container-link {
  width: 80%;  
justify-content: center;

  align-items: center;    /* Vertically center children */
  margin: 0 auto;         /* Center the whole container itself */
}


/* Mobile layout: stack vertically */
@media (max-width: 600px) {
  .venue-container-link {
  width: 80%;
margin-top: 10px;
  }
}

.wave-container {
            width: 100%;
            height: 100%; /* Important: Container needs height */
            background-color: white;
            overflow: hidden;
        }



.index-base-section {
  padding-bottom: 20px;
  padding-top: 50px;
  font-family: "Poppins", sans-serif;
}


.index-base-container {
  max-width: 90%;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 50px;
  padding-top: 50px;
  font-family: "Poppins", sans-serif;
}


.index-base-header h2 {
  font-size: 3.0rem;
  margin-bottom: 30px;
  color: black;
}







.formsintrotitle {
    width: 80%;
margin: 0 auto;
padding-bottom: 30px;
padding-top: 50px;
font-size: 48px;
text-align: center;
font-weight: bold;
font-family: "Poppins", sans-serif;
}















    .square-wrapper {
      width: 100%;
      aspect-ratio: 1 / 1;
    }

    .info-square {
      width: 100%;
      margin-top: 150px;
      display: flex;
      overflow: hidden;
    }

@media (max-width: 768px) {
  .info-square {
    margin-top: 5px; /* Thicken only the top border */
  }
}

    /* Left menu (30%) */
    .menu {
      flex-basis: 30%;
      max-width: 30%;
      border-right: 1px solid #e5e7eb;
      display: flex;
      flex-direction: column;
    }

    .menu-header {
      padding: 16px 18px;
      font-weight: 600;
      font-size: 1.1rem;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: #6b7280;
      border-bottom: 1px solid #e5e7eb;
    }

    .menu-list {
      list-style: none;
      flex: 1;
      font-size: 14px;
    }

    .menu-item {
      padding: 14px 18px;
      cursor: pointer;
      font-size: 14px;
      color: #374151;
      display: flex;
      align-items: center;
      gap: 8px;
	font-weight: bold;
      transition: background 0.15s ease, color 0.15s ease;
    }



    .menu-item:hover {
      background: #F7F7F7;
      color: #1d4ed8;
    }

    .menu-item.active {
      background: #1a85f8; 
      color: white;
      font-size: 14px;
    }

    /* Right content (70%) */
    .boxcontent {
      flex-basis: 70%;
      max-width: 70%;
      padding: 20px 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;
    }

    .content-title {
      font-size: 16px;
      font-weight: 600;
      color: #111827;
    }

    .content-body {
      font-size: 14px;
      line-height: 1.5;
      color: #000;
    }

    /* ADDED: Style for the dynamic tag */
    .tag-text {
      font-size: 14px;
      color: #1d4ed8;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 5px;
    }

    @media (max-width: 600px) {
      .info-square {
        flex-direction: column;
      }

      .menu {
        flex-basis: auto;
        max-width: 100%;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
      }

      .boxcontent {
        flex-basis: auto;
        max-width: 100%;
      }
    }














/* Overall section styling */
#free-tool-section {
background-color: #F4F8F9;
  padding: 60px 20px;
font-family: "Poppins", sans-serif;
}

/* Main container */
.free-tool-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Header section */
.free-tool-header h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: black;
}

.free-tool-header p {
  font-size: 1.1rem;
  color: black;
  margin-bottom: 40px;
}

.free-toolimagebox img {
margin-top: 10px;
margin-bottom: 10px;
  width: 100%;
padding-left: 15%;
padding-right: 15%;
}

/* Grid layout for guides */
.free-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

/* Individual cards */
.free-tool-card {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.free-tool-card h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: Black;
}

.free-tool-card p {
  font-size: 1rem;
  color: black;
  margin-bottom: 20px;
}

.free-tool-card-link {
  font-size: 18px;
  text-align: center;
  margin-top: 30px;
}

.free-tool-row-main {
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  margin-bottom: 25px;
}

.free-tool-row-main:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.free-tool-row-main h3 {
  margin: 0 0 10px;
  color: #FF7E0B;
  font-size: 1.3rem;
}

/* Button styling */
.free-tool-button {
  display: inline-block;
  padding: 10px 18px;
  background: #0077ff;
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  border-radius: 6px;
  transition: background 0.3s ease;
  margin-top: 10px;
}

.free-tool-button:hover {
  background: #005fcc;
}










    .venueforms-container-outer {                    
      margin-top: 30px;
      padding-top: 10px;
     padding-bottom: 50px;
     width: 100%;
  background: #f7f7f7;
    }

    .venueforms-container-outerinner {                    
      padding-top: 10px;
     padding-bottom: 10px;
     width: 80%;
margin: 0 auto;
    }


    .venueforms-container {
      display: flex;
      justify-content: space-between; /* equal space between the two columns */
      gap: 2%;                      
      margin-top: 30px;
     font-family: "Poppins", sans-serif;
    }

    .venueforms {
      width: 48%;
      border-radius: 10px;
      padding: 10px;
      box-sizing: border-box; /* so padding doesn’t break the 44% width */
  background-color: #fff;
    }

/* Mobile: stack forms in one column */
@media (max-width: 768px) {
  .venueforms-container {
    flex-direction: column;
  }

  .venueforms {
    width: 100%;      /* full width on mobile */
    margin-bottom: 20px; /* optional spacing between forms */
  }
}

    .venueformsheader {
      width: 100%;
      text-align: center;
      padding: 10px;
      font-weight: bold;
      font-size: 22px;
    }

    .venueformstext {
      width: 100%;
      padding: 10px;
    }


























.vendorforms-container-outer {                    
  margin-top: 30px;
  padding-top: 10px;
  padding-bottom: 50px;
  width: 100%;
  background: #f7f7f7;
}

.vendorforms-container-outerinner {                    
  padding-top: 10px;
  padding-bottom: 10px;
  width: 80%;
  margin: 0 auto;
}



  .vendorforms {
    width: 100%;      /* full width on mobile */
  }

.vendorformsheader {
  width: 100%;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  font-size: 22px;
}

.vendorformstext {
  width: 100%;
  padding: 10px;
}



.indexpillintroouter {
  width: 100%;
  text-align: center;
color: white;
background-color: #000066;
padding-top: 50px;
padding-bottom: 50px;
}

.indexpillintro {
  font-size: 2rem;
  font-weight: 600;
  width: 70%;
  margin: 0 auto;        /* CENTER THIS DIV */
  text-align: center;
  font-family: "Poppins", sans-serif;

}














.vendor-container-linkouter {
  margin-top: 10px;
 width: 100%;	
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  border-radius: 999px;
  font-weight: bold;
margin-bottom: 10px;
}

.vendor-container-linkinner {
 width: 40%;	
margin: 0 auto;
}

/* Mobile layout: stack vertically */
@media (max-width: 600px) {
  .vendor-container-linkouter {
    flex-direction: column;
  }
}
  
  .vendor-container-linkouter a {
    width: 100%;         /* optional: make links full width */
    text-align: center;  /* centers text when full width */
margin-bottom: 15px;
  }


.venue-container-link {
  width: 80%;  
justify-content: center;

  align-items: center;    /* Vertically center children */
  margin: 0 auto;         /* Center the whole container itself */
}


/* Mobile layout: stack vertically */
@media (max-width: 600px) {
  .vendor-container-link {
  width: 80%;
margin-top: 10px;
  }
}



  .venue-dashboard-outer {
    width: 100%;         /* optional: make links full width */
margin-bottom: 15px;
font-family: "Poppins", sans-serif;
background-color: #F4F8F9; 
  }


  .venue-dashboard-inner {
    width: 90%;         /* optional: make links full width */
margin-bottom: 15px;
margin: 0 auto;
  }

  .venue-dashboard-header {
    width: 100%;         /* optional: make links full width */
margin-bottom: 25px;
padding-top: 25px;
font-size: 22px;
  }

  .venue-dashboard-entry {
    width: 90%;         /* optional: make links full width */
padding: 25px;
margin: 0 auto;
background-color: #fff;
  }



.action-link {
    text-decoration: underline; 
    color: black;
    position: relative; /* Required for the pseudo-element */
}

.action-link:hover { 
    text-decoration: none; 
}












  /* Container - Large Size */
  .info-widget {
    position: relative;
    width: 900px;
    height: 50px;
    margin: 50px auto;
  }

  /* Orbit Center */
  .orbit-center {
    position: absolute;
    top: 50%;
    left: 250px;
    width: 0;
    height: 0;
  }


  /* Satellites */
  .satellite {
    position: absolute;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #555;
  }

  .satellite:hover {
    background: #222; /* Darker venue vibe */
    color: #fff;   
    border-color: #222;
    transform-origin: center;
    z-index: 20;
  }

  /* Positioning (Radius: 180px) */
  .sat-1 { transform: rotate(270deg) translate(180px) rotate(-270deg); } /* Top */
  .sat-2 { transform: rotate(330deg) translate(180px) rotate(-330deg); }
  .sat-3 { transform: rotate(30deg)  translate(180px) rotate(-30deg); }
  .sat-4 { transform: rotate(90deg)  translate(180px) rotate(-90deg); } /* Bottom */
  .sat-5 { transform: rotate(150deg) translate(180px) rotate(-150deg); }
  .sat-6 { transform: rotate(210deg) translate(180px) rotate(-210deg); }

  /* Text Display Area */
  .text-display {
    position: absolute;
    top: 50%;
    right: 0;
    width: 350px;
    transform: translateY(-50%);
    padding-left: 40px;
    border-left: 1px solid #e0e0e0;
  }

  .info-item h3 { 
    margin: 0 0 10px 0; 
    color: #222; 
    font-size: 24px;
    font-weight: 500; 
    letter-spacing: 1px;
  }
  
  .info-item p { 
    margin: 0; 
    color: #555; 
    font-size: 16px;
    line-height: 1.6; 
  }

 
  .info-item { display: none; animation: slideIn 0.4s ease forwards; }
  .default-msg { display: block; }
  
  /* Logic */
  .info-widget:has(.satellite:hover) .default-msg { display: none; }
  .info-widget:has(.sat-1:hover) .text-1 { display: block; }
  .info-widget:has(.sat-2:hover) .text-2 { display: block; }
  .info-widget:has(.sat-3:hover) .text-3 { display: block; }
  .info-widget:has(.sat-4:hover) .text-4 { display: block; }
  .info-widget:has(.sat-5:hover) .text-5 { display: block; }
  .info-widget:has(.sat-6:hover) .text-6 { display: block; }

  @keyframes slideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }



.indexvidbannerouter {
  width: 100%;
background-color: #1C355C;
}

.indexvidbanner {
  width: 90%;
  font-family: 'Poppins', sans-serif;
  font-size: 30px;
  text-align: center;
color: #fff;
  padding: 10px 0;   /* optional spacing */
padding-top: 60px;
padding-bottom: 60px;
background-color: #1C355C;
margin: 0 auto;
}


.video-row-container-outer {
background-color: #1C355C;
    width: 100%;

}




.video-row-container {
    display: flex;
    justify-content: space-between; /* Distributes the empty space evenly between divs */
    align-items: flex-start; /* Aligns items to the top */
    width: 92%;
margin: 0 auto;
    padding: 20px 0; /* Optional: adds vertical spacing */
}

/* Specific styling for your div names */
.indexvideoblock {
	margin-top: 20px;
	margin-bottom: 150px;
border-radius: 10px;
    width: 31%; /* User requested width */
    background-color: #000; /* Optional: black background for video containers */
}

/* Ensure the video fits inside the div perfectly */
.indexvideoblock video {
    width: 100%;
border-radius: 10px;
    height: auto;
    display: block; /* Removes tiny gap at bottom of video */
}



















  /* Container - Large Size */
  .info-widget {
    position: relative;
    width: 900px;
    height: 500px;
    margin: 50px auto;
    font-family: 'Segoe UI', sans-serif;
  }


  .orbit-center {
    position: absolute;
    top: 50%;
    left: 250px;
    width: 0;
    height: 0;
  }

  /* Satellites */
  .satellite {
    position: absolute;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #555;
  }

  .satellite:hover {
    background: #222; /* Darker venue vibe */
    color: #fff;   /* Gold accent color */
    border-color: #222;
    transform-origin: center;
    z-index: 20;
  }

  /* Positioning (Radius: 180px) */
  .sat-1 { transform: rotate(270deg) translate(180px) rotate(-270deg); } /* Top */
  .sat-2 { transform: rotate(330deg) translate(180px) rotate(-330deg); }
  .sat-3 { transform: rotate(30deg)  translate(180px) rotate(-30deg); }
  .sat-4 { transform: rotate(90deg)  translate(180px) rotate(-90deg); } /* Bottom */
  .sat-5 { transform: rotate(150deg) translate(180px) rotate(-150deg); }
  .sat-6 { transform: rotate(210deg) translate(180px) rotate(-210deg); }

  /* Text Display Area */
  .text-display {
    position: absolute;
    top: 50%;
    right: 0;
    width: 350px;
    transform: translateY(-50%);
    padding-left: 40px;
    border-left: 1px solid #e0e0e0;
  }

  .info-item h3 { 
    margin: 0 0 10px 0; 
    color: #222; 
    font-size: 24px;
    font-weight: 500;  
    letter-spacing: 1px;
  }
  
  .info-item p { 
    margin: 0; 
    color: #555; 
    font-size: 16px;
    line-height: 1.6; 
  }


  .info-item { display: none; animation: slideIn 0.4s ease forwards; }
  .default-msg { display: block; }
  
  /* Logic */
  .info-widget:has(.satellite:hover) .default-msg { display: none; }
  .info-widget:has(.sat-1:hover) .text-1 { display: block; }
  .info-widget:has(.sat-2:hover) .text-2 { display: block; }
  .info-widget:has(.sat-3:hover) .text-3 { display: block; }
  .info-widget:has(.sat-4:hover) .text-4 { display: block; }
  .info-widget:has(.sat-5:hover) .text-5 { display: block; }
  .info-widget:has(.sat-6:hover) .text-6 { display: block; }

  @keyframes slideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }


.indextopbarouter {

    width: 100%;

}


.indextopbar {
    background-color: #EDE5FC;
    border-radius: 10px;
    padding: 5px;
    display: flex;
    width: 90%;
margin: 0 auto;
    box-sizing: border-box;
font-family: "Poppins", sans-serif;
}

.indextopbar .topbar-left-col {
    width: 55%;
color: #333;
}

.indextopbar-left-inner {
    width: 90%;
margin: 0 auto;
padding-top: 60px;

}

.indextopbar-left-inner-header {
    width: 100%;
font-size: 28px;
}

.indextopbar-left-inner-text {
    width: 80%;
padding-top: 15px;
font-size: 15px;
}

.indextopbar-left-inner-text-link {
    width: 80%;
padding-top: 30px;
font-size: 14px;
font-weight: bold;
color: #0A192F;
}



.indextopbar .topbar-right-col {
    width: 45%;
    text-align: right; /* optional */
padding-top: 10px;
padding-bottom: 10px;
}

.topbar-right-col img {
    width: 100%;    /* Makes the image fill the container's width */
    height: auto;   /* Ensures the height adjusts proportionally so it doesn't stretch */
    display: block; /* Removes potential extra spacing underneath the image */
}



/* Base Link Styles */
.simple-price-link {
  text-decoration: none;
  color: #0A192F;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding-bottom: 5px; /* Space for the underline */
}

/* The Arrow */
.simple-price-link .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
  margin-left: 5px;
}

/* Hover: Move Arrow */
.simple-price-link:hover .arrow {
  transform: translateX(5px);
}

/* The Underline (Hidden by default) */
.simple-price-link::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0); /* Initially hidden (0 width) */
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0A192F; /* Sky Blue to match text */
  transform-origin: bottom right; /* Animate out to the right */
  transition: transform 0.25s ease-out;
}

/* Hover: Show Underline */
.simple-price-link:hover::after {
  transform: scaleX(1); /* Full width */
  transform-origin: bottom left; /* Animate in from the left */
}























<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

/* Navbar Container */
/* CHANGED: .navbar -> .header-navbar */
.header-navbar {
    background-color: #ffffff;
    height: 72px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1000px;
    overflow: visible !important;
}

/* CHANGED: .navbarcontainer -> .header-navbar-container */
.header-navbar-container {
    width: 90%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}

/* Logo */
.logo {
    width: 150px;
    margin-right: 60px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo img {
    height: 30px;
    width: auto;
    display: block;
}

/* Main Navigation List */
.nav-menu {
    list-style: none;
    display: flex;
    gap: 25px;
    height: 100%;
    margin: 0;
    align-items: center;
    overflow: visible !important;
}

.nav-menu > li {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    overflow: visible !important;
}

/* Top Level Links */
/* CHANGED: .desktop-nav-link -> .header-nav-link */
.header-nav-link {
    text-decoration: none;
    color: black;
    font-weight: bold;
    font-size: 0.95rem;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    height: 100%; 
}

.header-nav-link.active, 
.headerdropdown.active .header-nav-link {
    color: #1C355C;
}



.headerdropdown.active {
background: #f8f8f8;
}

.arrow {
    font-size: 0.7rem;
    color: #888;
    transition: transform 0.2s;
    margin-top: 1px;
}

.headerdropdown.active .arrow {
    transform: rotate(180deg);
}

/* --- DROPDOWN FIXED STYLES --- */

/* CHANGED: .dropdown-content -> .headerdropdown-content (To match HTML) */
.headerdropdown-content {
    /* Layout Logic */
    display: none; 
    flex-direction: column; 
    
    /* Positioning */
    position: absolute;
    top: 100%; 
    left: 0;
    
    /* Sizing & Appearance */
    width: 220px; 
    height: auto; 
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid #e1e1e1;
    border-radius: 0 0 6px 6px;
    padding: 8px 0; 
    font-weight: bold;
    /* Ensure visibility */
    z-index: 99999; 
    overflow: visible; 
}

/* When the JavaScript adds 'active', turn on Flexbox */
.headerdropdown.active .headerdropdown-content {
    display: flex;
}

/* Link Styles */
.headerdropdown-content a {
    text-decoration: none;
    color: #333;
    padding: 12px 20px;
    font-size: 0.95rem;
    line-height: 1.4;
    display: block; 
    white-space: normal; 
    transition: background-color 0.2s;
}

/* Force background to stay transparent on hover for the dropdown trigger */
.headerdropdown-trigger:hover,
.headerdropdown:hover .headerdropdown-trigger {
    background-color: transparent;
}

.headerdropdown-content a:last-child {
    border-bottom: none;
}

.headerdropdown-content a:hover {
    background-color: #f8f9fa;
    color: #1C355C;
}

/* --- Right Side Buttons --- */
/* CHANGED: .auth-buttons -> .header-auth-buttons */
.header-auth-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
font-weight: bold;
}

.login-btn {
    text-decoration: none;
    color: #111;
    font-weight: bold;
    font-size: 0.95rem;
    padding: 8px 12px;
    transition: color 0.2s;
}

.signup-btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 999px;
    background-color: #1a85f8;
    color: white;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    transition: background 0.3s ease;
    font-size: 0.90rem;
    white-space: nowrap;
}

.signup-btn:hover {
    background: orange;
    color: white;
}












    .middleindexmainbloc-eyebrow{
      font-weight: 400;
     font-size: 22px;
      margin-top: 10px;
      margin-bottom: 20px;
font-family: "Poppins", sans-serif;
color: #000;
line-height: 1.05; /* reduce line spacing */
    }


    .middleindexmainbloc-features{margin:15px 0 14px; padding:0; list-style:none}
    .middleindexmainbloc-features li{
      display:flex; align-items:flex-start; gap:14px;
      font-size:17px; margin:16px 0;
    }

    .middleindexmainbloc-sub{
      color:var(--muted);
      font-size: 18px;
      margin:0 0 10px;
     width:95%;
padding-top: 10px;
    }


.video-row-container-outerwhite {
    width: 100%;
    padding-top: 20px;
}


.video-row-containerwhite {
    display: flex;
    justify-content: space-between; /* Distributes the empty space evenly between divs */
    align-items: flex-start; /* Aligns items to the top */
    width: 92%;
margin: 0 auto;
    padding: 20px 0; /* Optional: adds vertical spacing */
}

/* Specific styling for your div names */
.indexvideoblockwhite {
	margin-top: 20px;
	margin-bottom: 20px;
border-radius: 10px;
    width: 31%; /* User requested width */
    background-color: #000; /* Optional: black background for video containers */
}

/* Ensure the video fits inside the div perfectly */
.indexvideoblockwhite video {
    width: 100%;
border-radius: 10px;
    height: auto;
    display: block; /* Removes tiny gap at bottom of video */
}



    .middlebody {
        background-color: #F4F8F9;
        font-family: "poppins", sans-serif;
        margin: 0;
        padding: 3rem 1rem;

      }

.middlebodyheader {
  width: 70%;
  margin: 0 auto 36px auto; 
  text-align: center;
color: #111;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: bold;
}

.lowerbodyheader {
  width: 70%;
  margin: 0 auto 36px auto; 
  text-align: center;
color: #111;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: bold;
padding-top: 25px;
}

      * {
        box-sizing: border-box;
      }

      /* Layout Container */
      .middlecontainer {
        max-width: 94%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 2rem;
      }

      /* Card Styles (indexmiddledisplay) */
      .indexmiddledisplay {
        width: 49%;
        background-color: white;
        border-radius: 1rem;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      /* Header Styles */
      .indexmiddledisplay h2 {
        margin-top: 0;
        margin-bottom: 1rem;
        font-size: 1.25rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #1e293b; /* slate-800 */
      }

      /* Mobile Responsiveness */
      @media (max-width: 768px) {
        .indexmiddledisplay {
          width: 100%;
        }
      }


.mobile-dropdown-header {
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px; /* Matches standard mobile menu size */
  color: black;    /* Adjust color to match your theme */
  display: block;
  border: none;
  background: white;
  width: 100%;
  text-align: center;
  cursor: pointer;
  outline: none;
}

/* On hover, or when active, change color */
.mobile-dropdown-header:hover {
  color: black;
  background: white;
}

/* Dropdown container - hidden by default */
.dropdown-container-mnav {
  display: none;
  padding-left: 8px;
}

/* Optional: Style for the caret icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}



.terms-container {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
.terms-container h1 {
            border-bottom: 2px solid #333;
            padding-bottom: 10px;
        }
.terms-container h2 {
            margin-top: 30px;
            color: #2c3e50;
        }
        .terms-container h3 {
            margin-top: 20px;
            color: #444;
        }
        .terms-container ul {
            margin-bottom: 15px;
        }
        .terms-container li {
            margin-bottom: 8px;
        }
        .disclaimer-box {
            background-color: #f9f9f9;
            border-left: 5px solid #ffcc00;
            padding: 15px;
            margin-bottom: 30px;
            font-size: 0.9em;
        }