.elementor-27998 .elementor-element.elementor-element-3a4c9e0e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0rem 4rem;--row-gap:0rem;--column-gap:4rem;}.elementor-27998 .elementor-element.elementor-element-13b33f73{--display:flex;}.elementor-27998 .elementor-element.elementor-element-33fbb27d{--display:flex;}.elementor-27998 .elementor-element.elementor-element-63843bde{--display:flex;}.elementor-27998 .elementor-element.elementor-element-6e1c3cd3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-27998 .elementor-element.elementor-element-1a78559e{color:var( --e-global-color-35755c3 );}.elementor-27998 .elementor-element.elementor-element-5a8055de{--display:flex;}.elementor-27998 .elementor-element.elementor-element-5336f616{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-27998 .elementor-element.elementor-element-13074f01{--display:flex;}.elementor-27998 .elementor-element.elementor-element-177a8543{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-27998 .elementor-element.elementor-element-3e573e36{--display:flex;}.elementor-27998 .elementor-element.elementor-element-4ee1d251{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-27998 .elementor-element.elementor-element-7ed018bd{--display:flex;}.elementor-27998 .elementor-element.elementor-element-3d9f55ed{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-27998 .elementor-element.elementor-element-2ede9952{--display:flex;}.elementor-27998 .elementor-element.elementor-element-2713a205{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-27998 .elementor-element.elementor-element-7ca7f30c{--display:flex;}.elementor-27998 .elementor-element.elementor-element-7598acba{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-27998 .elementor-element.elementor-element-17bb5f16{--n-accordion-title-font-size:1.125rem;--n-accordion-title-justify-content:space-between;--n-accordion-title-flex-grow:1;--n-accordion-title-icon-order:initial;--n-accordion-icon-size:50px;}:where( .elementor-27998 .elementor-element.elementor-element-17bb5f16 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{font-family:"Public Sans", Sans-serif;font-weight:300;line-height:26px;}@media(min-width:768px){.elementor-27998 .elementor-element.elementor-element-13b33f73{--width:35%;}.elementor-27998 .elementor-element.elementor-element-33fbb27d{--width:65%;}}@media(max-width:767px){.elementor-27998 .elementor-element.elementor-element-3a4c9e0e{--gap:2rem 0rem;--row-gap:2rem;--column-gap:0rem;}}/* Start custom CSS */html, body, 
.elementor, 
.elementor-inner, 
.elementor-section-wrap,
.elementor-widget-wrap,
.e-con,
.e-con-inner {
    overflow-y: visible !important;
    overflow-x: clip !important; 
}

/* Container adjustments */
.slides-wrapper {
    display: block !important; 
    position: relative;
    align-self: flex-start!important;
    overflow: visible !important; 
}

.sticky-viewport {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    align-self: flex-start!important;
    width: 100%;
    overflow: hidden; 
    transition: background-color 0.4s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Slide Base State */
.sticky-viewport .slide {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    padding: 1rem;
}

/* ACTIVE STATE */
.sticky-viewport .slide.active {
    opacity: 1;
    pointer-events: auto;
}
.sticky-viewport .slide.active .slide-title {
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}
.sticky-viewport .slide.active .card {
    transform: translateY(0) scale(1);
    opacity: 1;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, opacity 0.6s ease 0.1s; /* Slight delay for cards */
}

/* ENTER STATE (Coming from bottom) */
.sticky-viewport .slide.enter-down .slide-title {
    transform: translateY(50px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.sticky-viewport .slide.enter-down .card {
    transform: translateY(100px) scale(1);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* EXIT STATE (Going up / Zooming out) */
.sticky-viewport .slide.exit-up .slide-title {
    transform: translateY(-50px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.sticky-viewport .slide.exit-up .card {
    transform: scale(0.85);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Navigation Dots */
.sticky-nav-dots {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 50;
}
.sticky-nav-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.3);
    transition: background-color 0.3s ease;
}
.sticky-nav-dot.active {
    background-color: #ffffff;
}

.cards {
    gap: clamp(1.125rem, -1.161rem + 3.571vw, 3.125rem);
}

.card {
    border-radius: 15px;
    background: white;
    min-height: clamp(13.75rem, 11.607rem + 3.348vw, 15.625rem);
    gap: 0;
    --icon-width: 37%;
}

.card-content {
    --padding-tb: clamp(1.25rem, -1.25rem + 3.906vw, 3.438rem);
    --padding-sides: clamp(1.25rem, -0.179rem + 2.232vw, 2.5rem);
    padding: var(--padding-tb) var(--padding-sides);
    width: calc(100% - var(--icon-width));
}

.card p {
    margin-bottom: 0;
}

.card h3 {
    margin: 0;
    margin-bottom: 20px;
    font-size:clamp(1.688rem, 1.616rem + 0.112vw, 1.75rem);
    line-height: clamp(2.063rem, 1.277rem + 1.228vw, 2.75rem);
}

.card-icon {
    height: 100%;
    border-radius: 15px 0 0 15px;
    width: var(--icon-width);
}

.cards .card:only-child {
    max-width: 685px;
    margin: 0 auto; 
}

.slide {
    min-height: 100vh;
    justify-content: center;
    row-gap: 6rem;
}

.slide-container {
        max-width: 1420px;
        margin: auto;
        gap: 6rem;
}

.slide-1 { 
background-color: var( --e-global-color-secondary );
}

.slide-2 { 
background-color:var( --e-global-color-primary );
}

.slide-3 { 
background-color:var( --e-global-color-0bdc512 );
}

.slide-title h2{
    color: white;
    font-weight: 200;
}


.logo-carousel-wrapper {
    padding-bottom: 4.2rem;
}

#continuous-carousel .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}

.elementor-widget-image-carousel .swiper-slide {
    align-content: center;
}

@media (max-width: 1600px) {
    .sticky-nav-dots {
        flex-direction: row;
        top: auto;
        right: auto;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width:880px) {
    
    .cards.elementor-element {
    flex-direction: column;
    }
}

@media (max-width: 767px) {
    
    .logo-carousel img {
    max-width: 100%!important;
    }
    
    
    /* 1. Turn off sticky behavior entirely */
    .slides-wrapper, 
    .sticky-viewport {
        height: auto !important;
        position: relative !important;
        display: block !important;
        overflow: hidden !important;
    }

    /* 2. Reset slides to stack normally */
    .slide,
    .sticky-viewport .slide {
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        min-height: auto !important;
        padding: 4rem 1rem !important; 
    }

    /* Override JS animation states */
    .slide .slide-title, 
    .slide .card,
    .sticky-viewport .slide .slide-title, 
    .sticky-viewport .slide .card {
        transform: none !important;
        opacity: 1 !important;
    }

    /* 3. The Horizontal Swipe Magic */
    .cards {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory; /* Native swipe snapping */
        gap: 15px;
        padding-bottom: 20px; /* Breathing room for shadow/scroll */
        
        /* Hide ugly scrollbars */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .cards::-webkit-scrollbar {
        display: none;
    }

    /* 4. Shrink cards so the next one "peeks" */
    .card {
        flex: 0 0 85% !important; /* Adjust this % to show more/less of next card */
        scroll-snap-align: center;
        margin: 0;
    }
    
    /* Ensure the single card still behaves */
    .cards .card:only-child {
        flex: 0 0 100% !important;
    }

    /* Hide JS navigation dots on mobile */
    .sticky-nav-dots {
        display: none !important;
    }
    
    /* 1. Remove the hard boundary from the parent containers */
    .slide,
    .sticky-viewport .slide,
    .slide-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 2. Add padding back to the title so it stays aligned */
    .slide-title {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* 3. Add the padding inside the scroll track so cards bleed to the edge */
    .cards {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* 4. Safari/iOS fix: ensures the right-side gap exists at the end of the scroll */
    .cards::after {
        content: "";
        flex: 0 0 1px;
    }
    
    .slide .card, .cards .card:only-child {
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: 360px;
    }

  .cards:has(.card:only-child) {
    justify-content: center !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
  }

  .cards:has(.card:only-child)::after {
    display: none !important;
    content: none !important;
  }

  .cards .card:only-child {
    flex: 0 1 min(85%, 360px) !important;
    width: min(85%, 360px) !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    scroll-snap-align: none !important;
  }
    
    .card-icon, .card-content {
    width: 100%;    
    }
    
    .card-icon {
        border-radius: 15px 15px 0 0;
        padding: 20px;
    }
    
  .card-icon {
    height: clamp(190px, 42vw, 230px) !important;
    min-height: clamp(190px, 42vw, 230px) !important;
    max-height: clamp(190px, 42vw, 230px) !important;
    border-radius: 15px 15px 0 0;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .card-icon img,
  .card-icon svg,
  .card-icon .elementor-icon,
  .card-icon .elementor-icon svg {
    max-width: clamp(110px, 24vw, 130px);
    max-height: clamp(120px, 24vw, 140px);
    width: auto;
    height: auto;
  }
    
    .card-content {
        padding: 30px;
    }
    
    .champions-faq.elementor-widget-n-accordion .e-n-accordion-item-title {
        min-height: 118px;
    }
}/* End custom CSS */