.nav .nav-list .nav-item .submenu{
    top: 90% !important;
}
.banner-bigtext h2{
    font-size: 12rem;
    color: #ffffff;
}

.accordion-item{
    background: none !important;
    background-color: #333 !important;
    border-radius: 0px;
    border-right: none;
    border-left: none;
}


.team .team-names .accordion-body .accordion-body__content{
    margin-left: 0;
    max-width: 90%;
}
.header-icons{
    margin-top: 0px;
}


.faq-accordion .accordion-item .accordion-header h2{
    padding: 0 2rem;
}

.faq-accordion .accordion-item .accordion-body{
    padding: 0 2rem;
}

/* ==========================================================================
   Contact us
   ========================================================================== */
.contact-page .contact-form{
    background: #222 !important;
    border: none;
}

.contact-page form.contact-form .form-group input, 
.contact-page form.contact-form .form-group select, 
.contact-page form.contact-form .form-group textarea{
    background: #fff !important;
    color: #222 !important;
}

/* ==========================================================================
   Full Section With Media Background (FSWMB)
   ========================================================================== */

/* --- Main container --- */
.fswbm {
    position: relative;
    display: flex;
    overflow: hidden;
    background-color: #ffffff;
}

/* --- Media Element --- */
.fswbm .flex-section__media-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
.fswbm .flex-section__media-wrapper video,
.fswbm .flex-section__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Content Element --- */
.fswbm .flex-section__content-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 4rem 2rem;
}
.fswbm .flex-section__content {
    color: white;
    width: 100%;
}
.fswbm .flex-section__content h2 {
    font-size: 5.8rem;
    color: #3b5ebf;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.banner-cta .btn-primary{
    background: #ffffff;
    color: #3b5ebf;
    border: none;
    font-weight: 500;
    padding: 20px 30px;
}

/* ==========================================================================
   LAYOUT MODIFIERS
   ========================================================================== */

/* --- 1. Half-Screen Layouts --- */
.fswbm.media-size-half .flex-section__media-wrapper { width: 50%; }
.fswbm.media-size-half .flex-section__content-wrapper { width: 50%; }
.fswbm.media-size-half.media-pos-right .flex-section__media-wrapper { left: 50%; }
.fswbm.media-size-half.media-pos-right .flex-section__content-wrapper { justify-content: flex-start; margin-left: 0; margin-right: auto; }
.fswbm.media-size-half.media-pos-left .flex-section__media-wrapper { left: 0; }
.fswbm.media-size-half.media-pos-left .flex-section__content-wrapper { justify-content: flex-end; margin-left: auto; margin-right: 0; }

/* --- 2. Quarter-Screen (Corner-Pinned) Layouts --- */
.fswbm.media-size-quarter .flex-section__media-wrapper {
    width: 40%; /* This is the default size for quarter-layouts */
    max-width: 600px;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 2rem 0;
}
.fswbm.media-pos-top-left .flex-section__media-wrapper    { top: 0; left: 0; right: auto; bottom: auto; }
.fswbm.media-pos-top-right .flex-section__media-wrapper   { top: 0; right: 0; left: auto; bottom: auto; }
.fswbm.media-pos-bottom-left .flex-section__media-wrapper { bottom: 0; left: 0; right: auto; top: auto; }
.fswbm.media-pos-bottom-right .flex-section__media-wrapper{ bottom: 0; right: 0; left: auto; top: auto; }

/* --- 3. Media Size Overrides (for Quarter Layouts) --- */
.fswbm.media-size-small.media-size-quarter .flex-section__media-wrapper {
    width: 30%;
}
.fswbm.media-size-medium.media-size-quarter .flex-section__media-wrapper {
    width: 40%;
}
.fswbm.media-size-large.media-size-quarter .flex-section__media-wrapper {
    width: 50%;
}

/* --- 4. Fluid Content Widths & Alignment --- */
.fswbm .flex-section__content.text-left   { text-align: left; }
.fswbm .flex-section__content.text-center { text-align: center; }
.fswbm .flex-section__content.text-right  { text-align: right; }

.fswbm .flex-section__content.content-col-12 { width: clamp(320px, 90vw, 1140px); }
.fswbm .flex-section__content.content-col-8  { width: clamp(320px, 70vw, 960px); }
.fswbm .flex-section__content.content-col-6  { width: clamp(320px, 50vw, 720px); }


/* ==========================================================================
   Sub-Content Grid (Flexbox Method)
   ========================================================================== */
.fswbm .sub-content-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
    align-items: start;
}
.fswbm .sub-content-grid__col-1,
.fswbm .sub-content-grid__col-2 {
    width: 100%;
    min-height: 1px; 
}
.fswbm .sub-content-grid.grid-cols-3-9 .sub-content-grid__col-1 { width: calc(25% - 1rem); }
.fswbm .sub-content-grid.grid-cols-3-9 .sub-content-grid__col-2 { width: calc(75% - 1rem); }
.fswbm .sub-content-grid.grid-cols-4-8 .sub-content-grid__col-1 { width: calc(33.33% - 1rem); }
.fswbm .sub-content-grid.grid-cols-4-8 .sub-content-grid__col-2 { width: calc(66.66% - 1rem); }
.fswbm .sub-content-grid.grid-cols-6-6 .sub-content-grid__col-1 { width: calc(50% - 1rem); }
.fswbm .sub-content-grid.grid-cols-6-6 .sub-content-grid__col-2 { width: calc(50% - 1rem); }
.fswbm .sub-content-grid.grid-cols-8-4 .sub-content-grid__col-1 { width: calc(66.66% - 1rem); }
.fswbm .sub-content-grid.grid-cols-8-4 .sub-content-grid__col-2 { width: calc(33.33% - 1rem); }
.fswbm .sub-content-grid.grid-cols-9-3 .sub-content-grid__col-1 { width: calc(75% - 1rem); }
.fswbm .sub-content-grid.grid-cols-9-3 .sub-content-grid__col-2 { width: calc(25% - 1rem); }

.fswbm .sub-text-left   { text-align: left; }
.fswbm .sub-text-center { text-align: center; }
.fswbm .sub-text-right  { text-align: right; }

.fswbm .sub-content-grid h3 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #3b5ebf;
    line-height: 1.3;
}
.fswbm .sub-content-grid__col-2 {
    color: #333;
}

.fswbm .sub-content-grid__col-1 h2{
    font-size: 4.5rem;
    margin: 1 rem 
}



.aquatis-diamant{
    background: #333333;
}

.aquatis-diamant h2{
    font-size: 3.5rem !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media (max-width: 768px) {
    .fswbm .flex-section__content h2 { font-size: 3rem; }
    .fswbm.media-size-half .flex-section__media-wrapper,
    .fswbm.media-size-half.media-pos-right .flex-section__media-wrapper { width: 100%; left: 0; padding: 2rem 2rem}
    .fswbm.media-size-half .flex-section__content-wrapper { width: 100%; margin: 0; justify-content: center; }
    /*.fswbm.media-size-quarter .flex-section__media-wrapper { display: none; }*/
    .fswbm .sub-content-grid__col-1,
    .fswbm .sub-content-grid__col-2 { width: 100% !important; }
    .fswbm .sub-content-grid.grid-cols-3-9 .sub-content-grid__col-2 p{
        font-size: 16px;
    }
}


/* ==========================================================================
   FSWBM - MOBILE STACKING
   ========================================================================== */

@media (max-width: 767.98px) {

    /* 1. Change the main container to a block layout */
    .fswbm {
        display: block; /* Override 'display: flex' to allow stacking */
    }

    /* 2. Reset the media wrapper to be a static block */
    .fswbm .flex-section__media-wrapper {
        position: relative; /* Change from 'absolute' to 'relative' */
        width: 100% !important; /* Ensure it's full width */
        height: 50vh; /* Give it a specific height, e.g., 50% of the viewport height */
        left: 0;
    }

    /* Ensure the video/image inside fills this new container */
    .fswbm .flex-section__media-wrapper video,
    .fswbm .flex-section__image {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    /* 3. Reset the content wrapper to be a static block */
    .fswbm .flex-section__content-wrapper {
        width: 100% !important; /* Ensure it's full width */
        padding: 2rem 1rem; /* Adjust padding for mobile */
    }

    /* 4. Make the sub-grid columns stack vertically */
    .fswbm .sub-content-grid {
        flex-direction: column; /* Stack grid columns */
        gap: 1.5rem;
    }

    .fswbm .sub-content-grid__col-1,
    .fswbm .sub-content-grid__col-2 {
        width: 100% !important; /* Ensure columns are full-width */
        text-align: left !important; /* Optional: force left-align on mobile */
    }

    /* 5. Adjust font sizes for better readability */
    .fswbm .flex-section__content h2 {
        font-size: 4rem; /* Smaller main title */
    }

    .fswbm .sub-content-grid__col-1 h2 {
        font-size: 4rem; /* Smaller subtitle */
    }
    
        .fswbm  .flex-section__media-wrapper{
            height: 0vh;
        }
}



/* ==========================================================================
   Vision Section (VS) Component
   ========================================================================== */

.vs {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    color: #ffffff;
    padding: 4rem 2rem;
}

/* --- Background --- */
.vs__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.vs__background video,
.vs__background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vs__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); 
}

/* --- Content --- */
.vs__content-wrapper {
    position: relative;
    z-index: 2;
    width: 50%;
}
.vs__content.text-left   { text-align: left; }
.vs__content.text-center { text-align: center; }
.vs__content.text-right  { text-align: right; }

/* --- Pre-heading --- */
.vs__preheading {
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 1rem 0;
    font-family: "Anton", sans-serif;
}

.vs__heading {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.vs__heading-line {
    display: block; 
}


.vs__heading-line > span {
    
    padding: 0 0.1em; 
    
   
    background-image: linear-gradient(
        to bottom,
        transparent 30%, 
        rgba(0, 51, 160, 0.75) 30%, 
        rgba(0, 51, 160, 0.75) 70%, 
        transparent 70%
    );
    
    
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ==========================================================================
   Full Width Section With Background Image (FWS)
   ========================================================================== */

.fws {
    position: relative;
    min-height: 80vh;
    padding: 4rem 2rem;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center; /* This vertically centers the content */
}

/* A dark overlay to ensure text is readable */
.fws__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* The content wrapper that holds the text */
.fws__content-wrapper {
    position: relative;
    z-index: 2;
    width: 50%; /* Take up 50% of the section's width */
    color: #ffffff;
    padding-right: 2rem;
}

.fws__heading {
    font-size: 3.5rem;
    font-weight: 700;
    color: #3b5ebf; /* Your theme's blue color */
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0 0 1.5rem 0;
}

.fws__content {
    font-size: 1rem;
    line-height: 1.6;
    color: #cccccc;
    max-width: 500px;
}

/* --- Responsive Adjustments --- */
@media (max-width: 900px) {
    .fws {
        justify-content: center;
        text-align: center;
    }
    .fws__content-wrapper {
        width: 90%;
        padding-right: 0;
    }
    .fws__heading {
        font-size: 2.5rem;
    }
    .fws__content {
        margin: 0 auto;
    }
}

.aq-hero-section:not(:first-of-type) {
  margin: 0px;
}

.coming-soon-big-text-center h1{
    font-size: 15rem !important;
    color: rgba(222, 156, 33, 0.4);
    text-align: center;
}

/* ==========================================================================
    /* AQHERO COMPONENT STYLES */
/*   ========================================================================== */


    .aq-hero-section {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        color: white;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        margin-top: 115px;
    }
    .aq-hero-section::before {
        content: '';
        position: absolute;
        top:0; left:0; right:0; bottom:0;
        background-color: rgba(0,0,0,0.3);
        z-index:0;
    }
    .aq-hero-background-video {
        position: absolute;
        top:50%; left:50%;
        width:100%; height:100%;
        object-fit: cover;
        transform: translate(-50%, -50%);
        z-index:-1;
    }
    .aq-hero-content { position: relative; z-index:1; width:100%; text-align:left; padding: 0 5rem;}
    .aq-hero-separator { 
        height:1px; 
        margin:1.5rem 0;
        width: 100%;
        position: relative;
        margin-left: 0px;
        margin-right: -50px;
        background-color: #fff;
    }
    .aq-hero-content h1, h2, h3, h4, h5 { margin-bottom:0;     font-family: "Anton", sans-serif;}
    
    .aq-hero-content h1 {
        font-size: 7rem;
    }
    
    @media (max-width: 768px) {
        .aq-hero-section{
            margin-top: 50px;
        }
        
    }
    
/* ==========================================================================
    /* Styles for the Image Compare Block */
/*   ========================================================================== */    


.aq-image-compare-wrapper {
    position: relative; /* Establishes a positioning context for the overlay */
    width: 100%;
}

.aq-image-compare-content {
    position: absolute;
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
    z-index: 9;
    color: white;
    text-align: left;
    padding: 2rem;
    width: auto;
}

.aq-image-compare-content h1{
    font-family: "Anton", sans-serif;
    font-size: 5rem;
    color: #3a6ed8;
}

/* Ensure slider images fill the container */
.beer-slider img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensures images cover the area without distortion */
    border: 2px solid #ffffff; /* 2px white border */
}

.aq-image-compare-wrapper .beer-handle{
    background: #333 !important;
    border: 3px solid #fff;
}

.beer-handle {
    /* Main handle styles */
    background: #000;
    border: 2px solid #fff; /* A subtle white border for a cleaner look */
    border-radius: 50%;
    width: 60px; /* Adjust size as needed */
    height: 60px; /* Adjust size as needed */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Optional: adds a shadow */
    display: flex; /* Enables flexbox for centering arrows */
    align-items: center; /* Centers arrows vertically */
    justify-content: center; /* Centers arrows horizontally */
}

.beer-handle::before,
.beer-handle::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    top: 50%;
    transform: translateY(-50%);
}

.beer-handle::before {
    /* Left arrow */
    border-width: 10px 15px 10px 0;
    border-color: transparent #3498db transparent transparent; /* Blue color for the arrow */
    left: 10px; /* Adjust position as needed */
}

.beer-handle::after {
    /* Right arrow */
    border-width: 10px 0 10px 15px;
    border-color: transparent transparent transparent #3498db; /* Blue color for the arrow */
    right: 10px; /* Adjust position as needed */
}

/* Optional: Add hover/active styles for a more interactive feel */
.beer-handle:hover,
.beer-range:focus ~ .beer-handle {
    background: #222; /* Slightly lighter on hover */
    cursor: grab;
}
    
    
.fswbm .product-sec .product-heading {
    /* text-align: center; */
    /* max-width: 900px; */
    margin: 0 auto;
    margin-bottom: 80px;
}

.fswbm .product-sec .product-heading{
    text-align: left !important;
}


.scrolling-image-section .scrolling-image {
    transition: transform 0.2s ease-out;
    transform: translateX(0px);
}

.scrolling-image-section[data-direction="right"] .scrolling-image {
    width: 150%;
    max-width: none;
}

@media (max-width: 768px) {
    .scrolling-image-section[data-direction="right"] .scrolling-image {
        width: 100%;
        margin-bottom: 20px;
    }
}

    
/* ==========================================================================
    /* TWO COLUMNS FAQ IMAGE */
/* ========================================================================== */    


.two-column-faq h1{
    font-family: "Anton", sans-serif;
    font-size: 5rem;
}


.two-column-faq .faq-accordion .accordion-item .accordion-header h2, 
.two-column-faq .faq-accordion .accordion-item .accordion-body{
    padding: 0;
}

.two-column-faq .btn{
    padding: 5px 20px;
    text-transform: capitalize;
}
.two-column-faq .btn-primary{
    background: #111111;
    border: none;
}
.two-column-faq .btn-primary:hover{
    background: #222222;
    color: #ffffff;
}

.two-column-faq .faq-accordion{
    background: none !important;
    padding: 0px;
}

.two-column-faq .faq-accordion .container{
    max-width: 100%;
    padding-left: 0;
}

.two-column-faq .accordion-item:first-of-type{
    border-radius: 0;
}

.two-column-faq .accordion-item:last-of-type{
    border-radius: 0;
}

.two-column-faq .accordion-header{
    padding: 10px 0;
}

.two-column-faq .accordion-header .icon{
    width: 10px;
    height: 10px;
    right: -40px;
    top: 20px;
}


.two-column-faq .rte-content{
    padding-top: 20px;
}


/* 1. The Frame: This is the static "window". */
.image-frame {
    position: relative;   /* CRITICAL: Establishes a positioning context for the image. */
    overflow: hidden;     /* Hides the parts of the image that are outside the frame. */
    width: 100%;
    height: 100%;
    min-height: 400px
}

/* 2. The Image: Make it oversized so it has room to move. */
.scrolling-image {
    position: absolute;   /* CRITICAL: Takes the image out of the normal layout flow. */
    top: 0;
    left: 0;              /* Start at the top-left corner of the frame. */
    
    /* Make the image 30% wider than its container */
    width: 130%; 
    height: 100%;         /* Make it the full height of the frame. */
    max-width: none;      /* Override any potential max-width: 100% from other styles. */

    object-fit: cover;    /* Ensures the image covers the frame without distortion. */
    
    /* This will be controlled by JavaScript */
    transform: translateX(0); /* Set a default starting position */

    /* Smooths out the movement */
    transition: transform 0.2s ease-out;
}





/* ===========================================================
   EQUAL HEIGHT FIX — TEXT + IMAGE COLUMNS
   =========================================================== */

/* 1. Override Bootstrap's center alignment */
.equal-height-row {
    align-items: stretch !important; /* both columns match height */
}

/* 2. Text column — let content define height */
.text-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* start from top */
    padding-left: 6vw;
}

/* 3. Image column — always fill height and stick image to top */
.image-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* image sticks to top */
}

.image-frame {
    flex: 1 1 auto; /* fill available height */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start; /* no vertical centering */
    overflow: hidden;
}

.image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* fill entire column while keeping proportions */
    object-position: top; /* anchor image to top */
    max-width: none;
    transition: transform 0.2s ease-out;
}

/* Responsive fix for small devices (stack columns) */
@media (max-width: 767.98px) {
    image-frame {
        /* On mobile, you might want a fixed aspect ratio or a different min-height */
        min-height: 300px; 
        height: auto; /* Let the image's aspect ratio define the height */
        aspect-ratio: 16 / 9; /* Example: Force a 16:9 aspect ratio */
    }

    .equal-height-row {
        flex-direction: column;
    }
    .image-frame img {
        height: auto;
        object-fit: contain;
    }
}



/* ==========================================================================
    /* AQ Carousel with glidejs */
/*   ========================================================================== */    


.aq-carousel-wrapper {
    width: 100%;
    background: #333333;
}

/* --- NEW: Add padding to the main glide container --- */
#@carouselId.glide { /* Targeting the specific carousel ID for safety */
    padding: 0 40px; /* Adjust this value to control how much "peek" you see */
}

/* On smaller screens, you might want less padding */
@media (max-width: 768px) {
    #@carouselId.glide {
        padding: 0 20px;
    }
}


.slide-image-wrapper {
    aspect-ratio: 1 / 1;
    position: relative;
    width: 100%;
}

.slide-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slide-title {
    background-color: transparent;
    color: #FFF;
    padding: 10px 5px;
    text-align: center;
    font-family: "Anton", sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    width: 100%;
}

/* Arrow Styling */
.glide__arrow {
    border: none;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    /* Position arrows within the new padding area */
    position: absolute;
    top: 40%; /* Adjust vertical position */
    transform: translateY(-50%);
    z-index: 2;
}

.glide__arrow--left {
    left: 0;
}

.glide__arrow--right {
    right: 0;
}

.glide__arrow:hover {
    background-color: white;
}

.glide__arrow::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-style: solid;
    border-width: 3px 3px 0 0;
    border-color: #333;
}

.glide__arrow--left::before {
    transform: translateX(2px) rotate(-135deg);
}

.glide__arrow--right::before {
    transform: translateX(-2px) rotate(45deg);
}

.glide--peek {
    padding: 0 40px;
}

@media (max-width: 768px) {
    .glide--peek {
        padding: 0 20px;
    }
    .aq-carousel-wrapper .slide-title{
        font-size: 3rem !important;
    }
}

.aq-carousel-wrapper .bi-arrow-right::before,
.aq-carousel-wrapper .bi-arrow-left::before{
    content: "";
}


.aq-carousel-wrapper .slide-title{
    font-size: 1.5rem;
}

    
/* ==========================================================================
    /* AQ TWO COLUMN PROMO */
/*   ========================================================================== */ 


.aq-two-column-promo{
    background-color: #333;
}


.aq-two-column-promo .left-column{
    padding: 10rem 4rem 10rem 6vw;
}

.aq-two-column-promo h3{
    color: #fff;
    font-size: 3rem;
}

.aq-two-column-promo .lead{
    padding: 20px 0;
    color: #fff;
}

.aq-two-column-promo .lead p{
    font-size: 18px;
}

.aq-two-column-promo .btn{
    padding: 3px 70px;
    text-transform: capitalize;
}

.aq-two-column-promo .btn-primary{
    background: #111111;
    border: none;
}
.aq-two-column-promo .btn-primary:hover{
    background: #222222;
    color: #ffffff;
}

.aq-two-column-promo .container{
    width: 100%;
    padding-left: 3vw;
}

.aquantis-products .col-md-6{
    padding: 0;
}



@media (max-width: 768px) {
    .aquantis-products .faq-accordion .container{
        max-width: 100% !important;
    }
    .aq-two-column-promo .lead p{
        font-size: 16px;
    }
}



/* ==========================================================================
    /* AQ TWO COLUMN FAQ INFO WRAPPER */
/*   ========================================================================== */ 


.aq-sticky-column-top {
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 2rem; /* Adjust this value to control the distance from the top */
  align-self: flex-start; /* Important: ensures the column aligns to the top of the flex container */
}

.two-column-faq-wrapper .display-4{
    font-family: "Anton", sans-serif;
    font-size: 5rem;
    padding: 4rem 0;
    color: #fff;
}
.two-column-faq-wrapper{
    background-color: #333;
}

.two-column-faq-wrapper .faq-accordion{
    background: none !important;
    padding: 0px;
    margin-top: -4rem;
}

.two-column-faq-wrapper .accordion-item:first-of-type{
    border-radius: 0;
}

.two-column-faq-wrapper .accordion-item:last-of-type{
    border-radius: 0;
}

.two-column-faq-wrapper .faq-accordion .accordion-item .accordion-header h2{
    /*font-size: 2rem;*/
    padding: 0;
}

.two-column-faq-wrapper .faq-accordion .accordion-item .accordion-body{
    /*font-size: 2rem;*/
    padding: 0;
}

.two-column-faq-wrapper .accordion-header .icon {
    position: relative;
    width: 16px;
    height: 16px;
    right: -2rem;
    display: inline-block;
}

.two-column-faq-wrapper .accordion-header .icon::after{
    height: 0px;
}

/* Creates the arrow using borders */
.two-column-faq-wrapper .accordion-header .icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    background: transparent;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Default state - Down arrow (visible) */
.two-column-faq-wrapper .accordion-header:not(.active) .icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 1;
}

/* Active state - Up arrow (visible) */
.two-column-faq-wrapper .accordion-header.active .icon::before {
    transform: translate(-50%, -50%) rotate(225deg);
    opacity: 1;
}

/* Hide the pseudo-element when not in the correct state to prevent overlap */
.two-column-faq-wrapper .accordion-header .icon::before {
    opacity: 0;
}

.two-column-faq-wrapper .accordion-item{
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.two-column-faq-wrapper .aq-sticky-column-top h5{
    color: #fff;
    font-size: 4rem;
}

@media (max-width: 768px) {
    
    .two-column-faq .accordion-header .icon{
        right: -4rem;
        top: 10px;
    }
    .two-column-faq .faq-accordion .accordion-item .accordion-header h2{
        font-size: 3rem;
    }
    
    .two-column-faq-wrapper .accordion-header .icon{
        right: -4rem;
        top: 0;
    }
    
    .two-column-faq-wrapper .faq-accordion .accordion-item .accordion-header h2{
        font-size: 3rem;
    }
    .hero-aq--interactive-section .background-media-wrapper{
        height: 100vh !important;
    }

}


/* Styles for the background media container */

.hero-aq--interactive-section .faq-accordion{
    margin: 0 0 2rem;
}

.hero-aq--interactive-section .aq-sticky-column-top .display-4{
    padding: 0 !important;
}

.hero-aq--interactive-section .aq-sticky-column-top h5{
    color: #ffffff !important;
    font-size: 5rem;
    padding-right: 4rem;
}

.hero-aq--interactive-section .accordion-item{
    background-color: transparent !important;
}

.hero-aq--interactive-section .background-media-wrapper {
    position: absolute;
    top: 1.5rem;
    left: 0;
    width: 100%;
    height: 130vh;
    z-index: 1; /* Sits behind the content */
    overflow: hidden;
}

/* Style for the background image div */
.background-media-wrapper .background-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Style for the background video element */
.background-media-wrapper .background-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the area without distortion */
    object-position: center;
}

/* Optional: Add an overlay for text readability */
.background-media-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); 
    z-index: 2;
}




/* ==========================================================================
   AQ Interactive Storytelling Section
   ========================================================================== */

.aq-interactive-section {
    display: grid; /* 1 */
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    background: #333;
    
}

.aq-interactive-section > * {
    grid-area: 1 / 1 / 2 / 2; /* 2 */
}

.aq-interactive-section :is(h1, h2, h3, h4, h5, h6) {
    font-family: "Anton", sans-serif;
}

.aq-interactive-section .container {
    width: 100%;
    border-bottom: 1px solid #fff;
}

.aq-interactive-section .container:last-child {
    border-bottom: none; 
}

.hero-aq--interactive-section .faq-accordion .accordion-item .accordion-header h2,
.hero-aq--interactive-section .faq-accordion .accordion-item p{
    padding: 0 ;
}

.aq-interactive-section .sticky-pane {
    position: sticky; /* 2 */
    top: 5rem; /* 2 */
    height: 100vh; /* 3 */
    z-index: 1; /* 4 */
    display: grid; /* Use grid to position children */
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 2rem;
}

.aq-interactive-section .content-pane {
    z-index: 2; 
    min-height: 150vh; 
    padding-top: 20vh; 
}

.aq-interactive-section .sticky-titles {
    grid-column: 1 / 2;
    align-self: start; 
    color: #fff;
    font-family: "Anton", sans-serif;
}

.aq-interactive-section .sticky-title {
    color: #ffffffcc;
    font-size: 2rem;
}

.aq-interactive-section .sticky-subtitle {
    color: #2F62C1;
    font-size: 4.5rem;
}

/* Container for the background media, positioned middle-right */
.aq-interactive-section .background-media-container {
    grid-column: 2 / 3;
    align-self: center; 
    justify-self: end; 
    width: 60%; 
    max-width: 500px; 
    position: relative; 
}

.aq-interactive-section .background-media-container img,
.aq-interactive-section .background-media-container video {
    width: 100%; 
    height: auto; 
    display: block; 
    border-radius: 0.5rem; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
    border-radius: 0;
}


.aq-interactive-section .content-box {
    padding: 2rem;
    border-radius: 0.5rem;
}

.aq-interactive-section .section-heading {
    margin-top: 1rem;
    font-family: "Anton", sans-serif;
    color: #ffffffcc;
    font-size: 5rem;
    padding-right: 5rem;
}


.aq-interactive-section .aq-interactive-section-block {
    margin-bottom: 3rem; 
}

.aq-interactive-section .block-title {
    color: #2F62C1;
    font-size: 2rem;
    margin: 1rem 0;
}

.aq-interactive-section .block-subtitle {
    color: #ffffffcc;
    font-size: 3.5rem;
    font-weight: bold;
    line-height: 4rem;
}

.aq-interactive-section .block-media-wrapper {
    margin-top: 1.5rem;
    width: 100%;
}

.aq-interactive-section .block-media-wrapper .img-fluid {
    border-radius: 0.25rem;
    object-fit: contain; 
    height: 100%; 
}


/* ==========================================================================
   AQ Interactive Staggered Blocks
   ========================================================================== */

.staggered-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    max-width: 1200px;
    opacity: 0;
    transition: height 0.3s ease-in-out;
}

.aq-interactive-section-block {
    position: absolute;
    width: 48%; 
    max-width: 550px; 
    background: var(--block-background);
    padding: var(--block-padding);
    border-radius: var(--block-border-radius);
    transition: top 0.6s ease-out, left 0.6s ease-out;
}

.staggered-container.ready {
    opacity: 1;
}


.aq-interactive-section-block.stagger-left {
    left: 0;
  }

.aq-interactive-section-block .block-description {
    color: #ffffffcc;
    padding: 1rem 0;
}

.aq-interactive-section-block img,
.aq-interactive-section-block video {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-top: 15px;
}

.aq-interactive-section-block.stagger-right {
    left: 100%;
    transform: translateX(-100%); 
}


@media (max-width: 768px) {
    .staggered-container {
        height: auto !important; 
        opacity: 1;
    }

    .aq-interactive-section-block,
    .aq-interactive-section-block.stagger-left,
    .aq-interactive-section-block.stagger-right {
        position: static; 
        width: 100%;      
        max-width: 100%;
        transform: none;  
        left: auto;       
        top: auto !important; 
        margin-bottom: 30px; 
    }
    
    .aq-interactive-section .sticky-pane{
        top: 8rem;
    }
}



/* ==========================================================================
   AQ Info Section Component
   ========================================================================== */
.aq-info-section {
    min-height: 100vh;
    overflow: hidden;
}

.aq-info-section .background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0; 
    transform: translate(-50%, -50%);
    background-size: cover;
}

.aq-info-section .content-box{
    padding: 6rem !important;
}

.aq-info-section .title {
    color: #222;
    line-height: 1.2;
    font-family: "Anton", sans-serif;
}

.aq-info-section .lead{
    font-size: 18px;
}

.aq-info-section .description {
    color: #333;
}

.aq-info-section .cta-container a {
    padding: 5px 30px !important;
    text-transform: capitalize;
    font-weight: 300 !important;
    color: #fff;
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .aq-info-section .description {
        font-size: 16px;
    }
    
    .four-column-section .card-title a{
        font-size: 5rem;
    }
    .aq-info-section .cta-container a{
        font-size: 2rem;
    }
}



/* ==========================================================================
   AQ Content Section
   ========================================================================== */
.aq-content-section h1,
.aq-content-section h2,
.aq-content-section h3,
.aq-content-section h4,
.aq-content-section h5,
.aq-content-section h6{
    font-family: "Anton", sans-serif;
    color: #FFFFFF;
}

.aq-content-section h1{
    font-size: 3rem;
}

.aq-content-section .section-body{
    color: #fff;
}


/* ==========================================================================
   AQ Download Row
   ========================================================================== */
.download-parent-wrapper {
  margin: 0 auto;
  padding: 0 5%;
  background: #343434;
}

.download-parent-wrapper .download-wrapper {
    width: 70%; /* left-aligned inside parent */
    /* left-aligned by default */
}

.download-parent-wrapper .download-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
}



.download-parent-wrapper .row-content { max-width: 95%; color: #E8E8E8  }
.download-parent-wrapper .download-heading { margin: 0 0 5px 0; font-family: "Anton", sans-serif;}
.download-parent-wrapper .row-content p { margin: 0; color: #F7F7F7; font-family: "Raleway", sans-serif; }


.download-parent-wrapper .row-download { display: flex; align-items: flex-start; }
.download-parent-wrapper .btn-download {
    background: #F7F7F7;
    border-radius: 6px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s;
}
.download-parent-wrapper .btn-download:hover { background: #0056b3; }

.download-parent-wrapper .btn-download svg {
    display: block;
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .download-parent-wrapper .download-row { flex-direction: column; }
    .download-parent-wrapper .row-content { max-width: 100%; margin-bottom: 10px; }
    .download-parent-wrapper .row-download { align-items: flex-start; }
}




.faq-main-container .four-column-section .card{
    border: none;
    border-radius: 0;
}

.faq-main-container .four-column-section .card img{
    border-radius: 0;
}
.four-column-section .button{
    padding: 10px 20px;
}



@media (max-width: 768px) {

    .faq-main-container .card .card-title{
        font-size: 3rem;
    }
}


.research-results-heading .container{
    padding: 0 !important;
}

.research-results-content .container{
    padding: 0 !important;
}

.research-results-2 {
    background-color: #343434;
}

.faq-main-container .card {
    border: none;
    border-radius: 0;
}

.faq-main-container .card img{
    border-radius: 0;
}



.faq-main-container .card .btn{
    padding: 10px 20px;
    text-transform: capitalize;
}

.blog-details__content h4{
    padding: 1rem 0;
}





.scroll-btn {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #222, #555);
  color: #fff;
  padding: 14px 28px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 600;
  z-index: 9999;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  opacity: 0.95;
  transition: all 0.3s ease, opacity 0.6s ease;
  animation: pulse 2.2s infinite;
}

.scroll-btn:hover {
  transform: translateX(-50%) scale(1.05);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  background: linear-gradient(135deg, #111, #333);
}

.scroll-btn .arrow {
  font-size: 1.3rem;
  display: inline-block;
  animation: bounceArrow 1.5s infinite;
}

/* Pulse animation */
@keyframes pulse {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.05); }
  100% { transform: translateX(-50%) scale(1); }
}

/* Arrow bounce animation */
@keyframes bounceArrow {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(6px); }
  60% { transform: translateY(3px); }
}

/* Hidden state (used by JS) */
.scroll-btn.hidden {
  opacity: 0;
  pointer-events: none;
}