/*
 * Globals
 */
 
 html {
  scroll-behavior: smooth;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    background-color: #000000;
    border-color: #000000;
}


/* Custom default button */
.btn-light,
.btn-light:hover,
.btn-light:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}


/*
 * Base structure
 */

body {
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}

.cover-container {
  max-width: 972px;
}


/*
 * Header
 */

.nav-masthead .nav-link {
  color: rgba(255, 255, 255, .5);
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}


/* --- Header Brand Title Styling --- */

/* Base styles (moved from inline) - Apply to all screen sizes */
.header-brand-title {
  line-height: 1.1; /* Adjusted line-height slightly for better spacing */
  font-size: 36px;  /* Slightly adjusted font-size, use px or rem */
  /* mb-0 class already handles bottom margin removal on desktop */
}

/* Style for the tagline span */
.header-brand-title span {
  font-size: 14px;
  font-weight: 200;
  display: block; /* Ensures it takes its own line */
  margin-top: 2px; /* Small space below main title */
}


/* --- Mobile Spacing (Screens BELOW 768px) --- */
@media (max-width: 767.98px) {
  .header-brand-title {
    margin-top: 1rem;    /* Add 1rem (approx 16px) margin ABOVE on mobile */
    margin-bottom: 1rem !important; /* Add 1rem margin BELOW on mobile, overriding Bootstrap's mb-0 */
                         /* !important might be needed to ensure mb-0 is overridden */

    /* Optional: Adjust font-size further for mobile if needed */
    /* font-size: 24px; */

    /* Ensure it's not floating on mobile */
    float: none !important;
    text-align: center; /* Center text on mobile */
  }

  /* Adjust palm positions for mobile centering if needed */
  /* You might need specific rules for the absolute positioned divs containing palms */
  .header-brand-title > div[style*="absolute"] {
     /* Example: Try adjusting left/top or using transforms */
     /* left: 50% !important; */
     /* transform: translateX(-50%); */
     /* This needs careful adjustment based on your desired mobile look */
  }
}

/* Ensure header container allows for centering on mobile */
@media (max-width: 767.98px) {
    header.mb-auto > div {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center items horizontally */
    }
    header.mb-auto nav.nav-masthead {
        margin-top: 0.5rem; /* Add some space below the title before nav */
        float: none !important; /* Ensure nav doesn't float */
        justify-content: center !important; /* Center nav items */
    }
}



/* Styling for our neon button */
.neon-button {
    border: 3px solid rgba(255, 255, 255, .5); /* Solid border with neon color */
    border-radius: 10px; /* Slight rounding of corners */
    cursor: pointer; /* Changes cursor to a pointer on hover */
    background-color: #000000;
  }

.neon-button-pink:hover {
    color: #f93df9; /* Text color */
    background-color: #000000; /* Same as the background for a seamless look */
    border: 3px solid #f93df9; /* Solid border with neon color */
    border-radius: 10px; /* Slight rounding of corners */
    cursor: pointer; /* Changes cursor to a pointer on hover */
    filter: drop-shadow(0 0 2px #f93df9) drop-shadow(0 0 6px #f93df9)
      contrast(1.8) brightness(1.8); /* Adds a subtle glow effect and enhances the vibrancy */
    transition: 0.5s; /* Smooth color change on hover */
  }
   

.neon-button-blue:hover {
    color: #22aaff; /* Text color */
    background-color: #000000; /* Same as the background for a seamless look */
    border: 3px solid #22aaff; /* Solid border with neon color */
    border-radius: 10px; /* Slight rounding of corners */
    cursor: pointer; /* Changes cursor to a pointer on hover */
    filter: drop-shadow(0 0 2px #22aaff) drop-shadow(0 0 6px #22aaff)
      contrast(1.8) brightness(1.8); /* Adds a subtle glow effect and enhances the vibrancy */
    transition: 0.5s; /* Smooth color change on hover */
  }

  .neon-button-yellow:hover {
    color: #fff12b; /* Text color */
    background-color: #000000; /* Same as the background for a seamless look */
    border: 3px solid #fff12b; /* Solid border with neon color */
    border-radius: 10px; /* Slight rounding of corners */
    cursor: pointer; /* Changes cursor to a pointer on hover */
    filter: drop-shadow(0 0 2px #fff12b) drop-shadow(0 0 6px #fff12b)
      contrast(1.8) brightness(1.8); /* Adds a subtle glow effect and enhances the vibrancy */
    transition: 0.5s; /* Smooth color change on hover */
  }
   
  .neon-button-green:hover {
    color: #44ff2b; /* Text color */
    background-color: #000000; /* Same as the background for a seamless look */
    border: 3px solid #44ff2b; /* Solid border with neon color */
    border-radius: 10px; /* Slight rounding of corners */
    cursor: pointer; /* Changes cursor to a pointer on hover */
    filter: drop-shadow(0 0 2px #44ff2b) drop-shadow(0 0 6px #44ff2b)
      ; /* Adds a subtle glow effect and enhances the vibrancy */
    transition: 0.5s; /* Smooth color change on hover */
  }

  .neon-button-red:hover {
    color: #ff1c1c; /* Text color */
    background-color: #000000; /* Same as the background for a seamless look */
    border: 3px solid #ff1c1c; /* Solid border with neon color */
    border-radius: 10px; /* Slight rounding of corners */
    cursor: pointer; /* Changes cursor to a pointer on hover */
    filter: drop-shadow(0 0 2px #ff1c1c) drop-shadow(0 0 6px #ff1c1c)
      contrast(1.8) brightness(1.8); /* Adds a subtle glow effect and enhances the vibrancy */
    transition: 0.5s; /* Smooth color change on hover */
  }


  .neon-button-purple:hover {
    color: #9808ff; /* Text color */
    background-color: #000000; /* Same as the background for a seamless look */
    border: 3px solid #9808ff; /* Solid border with neon color */
    border-radius: 10px; /* Slight rounding of corners */
    cursor: pointer; /* Changes cursor to a pointer on hover */
    filter: drop-shadow(0 0 2px #9808ff) drop-shadow(0 0 6px #9808ff)
      contrast(1.8) brightness(1.8); /* Adds a subtle glow effect and enhances the vibrancy */
    transition: 0.5s; /* Smooth color change on hover */
  }
   
  .neon-shake:hover {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    perspective: 1000px;
  }

  .neon-shake-text:hover .text {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    perspective: 1000px;
  }
  
  @keyframes shake {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
    
    30%, 50%, 70% {
      transform: translate3d(-2px, 0, 0);
    }
    40%, 60% {
      transform: translate3d(2px, 0, 0);
  }
  }

  /* buttons light from upper */

 .neon-button2 .upper {
    border: 3px solid rgba(255, 255, 255, .5); /* Solid border with neon color */
    border-radius: 10px; /* Slight rounding of corners */
    cursor: pointer; /* Changes cursor to a pointer on hover */
    background-color: #000000;
    height: 1px;
    margin-bottom: 6px;
  }
  .neon-button2 .text {
    margin-right: 10px;
    margin-left: 10px;
  }

.neon-button2-pink:hover .upper {
    color: #f93df9; /* Text color */
    background-color: #000000; /* Same as the background for a seamless look */
    border: 3px solid #f93df9; /* Solid border with neon color */
    border-radius: 10px; /* Slight rounding of corners */
    cursor: pointer; /* Changes cursor to a pointer on hover */
    filter: drop-shadow(0 4px 6px #f93df9) drop-shadow(0 8px 10px #f93df9)
      contrast(1.8) brightness(1.8); /* Adds a subtle glow effect and enhances the vibrancy */
    transition: 0.5s; /* Smooth color change on hover */
  }

  .neon-button2-pink:hover .text {
    color: #f93df9; /* Text color */
    transition: 0.5s; /* Smooth color change on hover */
    
    background-image: linear-gradient(to bottom, #f93df9,#f93df9, #fff);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    
  }


  .neon-button2-blue:hover .upper {
    color: #22aaff; /* Text color */
    background-color: #000000; /* Same as the background for a seamless look */
    border: 3px solid #22aaff; /* Solid border with neon color */
    border-radius: 10px; /* Slight rounding of corners */
    cursor: pointer; /* Changes cursor to a pointer on hover */
    filter: drop-shadow(0 4px 6px #22aaff) drop-shadow(0 8px 10px #22aaff)
      contrast(1.8) brightness(1.8); /* Adds a subtle glow effect and enhances the vibrancy */
    transition: 0.5s; /* Smooth color change on hover */
  }

  .neon-button2-blue:hover .text {
    color: #22aaff; /* Text color */
    transition: 0.5s; /* Smooth color change on hover */
    
    background-image: linear-gradient(to bottom, #22aaff,#22aaff, #fff);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    
  }


  .neon-button2-yellow:hover .upper {
    color: #fff12b; /* Text color */
    background-color: #000000; /* Same as the background for a seamless look */
    border: 3px solid #fff12b; /* Solid border with neon color */
    border-radius: 10px; /* Slight rounding of corners */
    cursor: pointer; /* Changes cursor to a pointer on hover */
    filter: drop-shadow(0 4px 6px #fff12b) drop-shadow(0 8px 10px #fff12b)
      contrast(1.8) brightness(1.8); /* Adds a subtle glow effect and enhances the vibrancy */
    transition: 0.5s; /* Smooth color change on hover */
  }

  .neon-button2-yellow:hover .text {
    color: #fff12b; /* Text color */
    transition: 0.5s; /* Smooth color change on hover */
    
    background-image: linear-gradient(to bottom, #fff12b,#fff12b, #fff);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    
  }

  .neon-button2-green:hover .upper {
    color: #44ff2b; /* Text color */
    background-color: #000000; /* Same as the background for a seamless look */
    border: 3px solid #44ff2b; /* Solid border with neon color */
    border-radius: 10px; /* Slight rounding of corners */
    cursor: pointer; /* Changes cursor to a pointer on hover */
    filter: drop-shadow(0 4px 6px #44ff2b) drop-shadow(0 8px 10px #44ff2b); /* Adds a subtle glow effect and enhances the vibrancy */
    transition: 0.5s; /* Smooth color change on hover */
  }

  .neon-button2-green:hover .text {
    color: #44ff2b; /* Text color */
    transition: 0.5s; /* Smooth color change on hover */
    
    background-image: linear-gradient(to bottom, #44ff2b,#44ff2b, #fff);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    
  }

  .neon-button2-purple:hover .upper {
    color: #9808ff; /* Text color */
    background-color: #000000; /* Same as the background for a seamless look */
    border: 3px solid #9808ff; /* Solid border with neon color */
    border-radius: 10px; /* Slight rounding of corners */
    cursor: pointer; /* Changes cursor to a pointer on hover */
    filter: drop-shadow(0 4px 6px #9808ff) drop-shadow(0 8px 10px #9808ff); /* Adds a subtle glow effect and enhances the vibrancy */
    transition: 0.5s; /* Smooth color change on hover */
  }

  .neon-button2-purple:hover .text {
    color: #9808ff; /* Text color */
    transition: 0.5s; /* Smooth color change on hover */
    
    background-image: linear-gradient(to bottom, #9808ff,#9808ff, #fff);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    
  }

  .neon-button2-red:hover .upper {
    color: #ff1c1c; /* Text color */
    background-color: #000000; /* Same as the background for a seamless look */
    border: 3px solid #ff1c1c; /* Solid border with neon color */
    border-radius: 10px; /* Slight rounding of corners */
    cursor: pointer; /* Changes cursor to a pointer on hover */
    filter: drop-shadow(0 4px 6px #ff1c1c) drop-shadow(0 8px 10px #ff1c1c)
      contrast(1.8) brightness(1.8); /* Adds a subtle glow effect and enhances the vibrancy */
    transition: 0.5s; /* Smooth color change on hover */
  }

  .neon-button2-red:hover .text {
    color: #ff1c1c; /* Text color */
    transition: 0.5s; /* Smooth color change on hover */
    
    background-image: linear-gradient(to bottom, #ff1c1c,#ff1c1c, #fff);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    
  }


  
  /* --- Main Buttons Layout Styling --- */

.main-buttons-container {
    display: flex;         /* Enable Flexbox */
    flex-wrap: wrap;       /* Allow buttons to wrap (Mobile First) */
    justify-content: center; /* Center buttons horizontally */
    align-items: stretch;  /* Stretch items to equal height if needed */
    gap: 15px 20px;        /* Vertical and Horizontal gap */
    padding: 15px 5px;     /* Add some padding */
    margin-bottom: 0px;   /* Space below buttons, above logo */
}

/* Adjustments for your neon-button2 within this specific flex container */
.main-buttons-container .neon-button2 {
    flex-grow: 1;     /* Allow buttons to grow slightly to fill space */
    flex-shrink: 1;   /* Allow buttons to shrink slightly if needed */

    /* Aim for 3 per row on mobile */
    /* Adjust calc value based on your exact button padding/margins and gap */
    flex-basis: calc(33.333% - 22px); /* Adjusted for 20px horizontal gap */
    min-width: 130px; /* Minimum width before wrapping aggressively */

    /* Override potential margins from btn/fw-bold classes if needed */
    margin: 0 !important; /* Use !important carefully if Bootstrap styles conflict */

    /* Ensure vertical alignment works well if heights differ slightly */
    display: inline-flex; /* Use flex for inner content alignment */
    flex-direction: column; /* Stack .upper and .text vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center;
}


/* Adjustments for your neon-button2 within this specific flex container */
.main-buttons-container .upper {
    flex-grow: 1;     /* Allow buttons to grow slightly to fill space */
    flex-shrink: 1;   /* Allow buttons to shrink slightly if needed */

    /* Aim for 3 per row on mobile */
    /* Adjust calc value based on your exact button padding/margins and gap */
    flex-basis: calc(33.333% - 22px); /* Adjusted for 20px horizontal gap */
    min-width: 130px; /* Minimum width before wrapping aggressively */

    /* Override potential margins from btn/fw-bold classes if needed */
    margin: 0 !important; /* Use !important carefully if Bootstrap styles conflict */

    /* Ensure vertical alignment works well if heights differ slightly */
    display: inline-flex; /* Use flex for inner content alignment */
    flex-direction: column; /* Stack .upper and .text vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center;
}

/* Styling for the main logo image */
.main-logo-image {
    display: block;     /* Remove extra space below image */
    margin-left: auto;  /* Center image */
    margin-right: auto;
    max-width: 100%;    /* Make image responsive */
    height: auto;       /* Maintain aspect ratio */
    max-height: 450px;  /* Optional: constrain max height */
}


/* --- Desktop Layout (Using Bootstrap's 'lg' breakpoint) --- */
@media (min-width: 992px) {
    .main-buttons-container {
        flex-wrap: nowrap;            /* Force buttons onto one line */
        justify-content: space-around; /* Distribute buttons evenly */
        gap: 25px;                /* Adjust gap for desktop */
        margin-bottom: 0px;       /* More space below buttons on desktop */
    }

    .main-buttons-container .neon-button2 {
         flex-basis: auto; /* Let buttons take natural width */
         flex-grow: 0;     /* Don't grow on desktop unless using space-between */
         min-width: auto;  /* Reset min-width */
    }
    
    .main-buttons-container .neon-button2 {
         flex-basis: auto; /* Let buttons take natural width */
         flex-grow: 0;     /* Don't grow on desktop unless using space-between */
         min-width: 50px;  /* Reset min-width */
    }
    
}






/************* PHOTO BANNER ***************/

/* --- Partners Marquee Styles --- */

.partners-marquee {
    width: 100%; /* Take full width of the section's content area */
    overflow: hidden; /* IMPORTANT: Hides the logos outside the container */
    position: relative; /* For potential pseudo-element overlays like fades */
    margin-top: 30px; /* Spacing below the title */
    /* Optional: Add fade-out edges for a smoother look */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.marquee-content {
    display: flex; /* Arrange logos in a row */
    align-items: center; /* Vertically center logos if they have different heights */
    width: fit-content; /* Let the content determine the width */
    /* Or use a calculated width if needed, e.g., width: 200%; if logos are less than screen width */

    /* Apply the animation */
    animation: scrollLeftMarquee 30s linear infinite; /* Adjust duration for speed */

    /* Optional: Pause animation on hover */
    /* hover should be on the outer container to avoid tricky hover states during movement */
}

.partners-marquee:hover .marquee-content {
     animation-play-state: paused;
}


/* Individual Logo Styling within Marquee */
.partner-logo-marquee {
    max-height: 120px; /* Adjust max height as needed */
    width: auto; /* Maintain aspect ratio */
    flex-shrink: 0; /* Prevent logos from shrinking */
    margin: 0 30px; /* Spacing between logos (adjust as needed) */
    filter: grayscale(100%) brightness(1.5) contrast(1.2); /* Keep monochrome style */
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.partner-logo-marquee:hover {
     /* Keep hover effect minimal as it might be hard to trigger */
    filter: none;
    opacity: 1;
}


/* --- Keyframes for the Scrolling Animation --- */
@keyframes scrollLeftMarquee {
    0% {
        transform: translateX(0); /* Start at the beginning */
    }
    100% {
        /* Move left by the width of ONE set of logos */
        /* We calculate this based on the number of original logos and their total width + margins */
        /* Since we duplicated, moving left by 50% of the TOTAL .marquee-content width works */
        transform: translateX(-50%);
    }
}