/* =========================================================

   Premium Top Banner Stage

   File: assets/css/top-banner-premium.css

   Final Clean Responsive Version

========================================================= */



.cx-premium-hero {

    --cx-banner-width: min(1120px, 72vw);

    --cx-banner-radius: 34px;



    --cx-arrow-size: 58px;

    --cx-arrow-gap: 18px;

    --cx-arrow-top: 50%;

    --cx-arrow-x: max(

        18px,

        calc((100% - var(--cx-banner-width)) / 2 - var(--cx-arrow-size) - var(--cx-arrow-gap))

    );



    position: relative;

    width: 100%;

    min-height: auto;

    padding: 34px 0px 24px 0px;

    overflow: hidden;

    isolation: isolate;



    background-color: #0052b8;

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

}



/* =========================

   Background Overlay

========================= */

/*

.cx-premium-hero__overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:

        radial-gradient(circle at 50% 42%, rgba(0, 224, 255, 0.12), transparent 38%),

        linear-gradient(

            180deg,

            rgba(0, 45, 130, 0.01) 0%,

            rgba(0, 18, 78, 0.04) 55%,

            rgba(0, 12, 60, 0.16) 100%

        );

}
*/



.cx-premium-hero__inner {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1540px;

    margin: 0 auto;

}



/* =========================

   Stage

========================= */



.cx-premium-hero__stage {

    position: relative;

    width: 100%;

    max-width: 1380px;

    margin: 0 auto;

}



/* Soft glow behind banner */
/*

.cx-premium-hero__stage::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 38px;

    z-index: 3;

    width: min(980px, 68vw);

    height: 220px;

    border-radius: 999px;

    pointer-events: none;

    transform: translateX(-50%);

    filter: blur(16px);

    background:

        radial-gradient(

            circle,

            rgba(0, 224, 255, 0.22) 0%,

            rgba(0, 224, 255, 0.08) 42%,

            transparent 72%

        );

}

*/

/* =========================

   Banner Slider

========================= */



.cx-premium-hero__slider {

    position: relative;

    z-index: 9;

    width: var(--cx-banner-width);

    aspect-ratio: 16 / 5.45;

    margin: 0 auto;

    border-radius: var(--cx-banner-radius);

    overflow: visible;

}



/* Remove old outer glowing box and shine */

.cx-premium-hero__slider::before,

.cx-premium-hero__slider::after {

    content: none;

    display: none;

}



.cx-premium-hero__slide {

    position: absolute;

    inset: 0;

    z-index: 1;

    opacity: 0;

    visibility: hidden;

    transform: translateX(35px) scale(0.985);

    transition:

        opacity 0.6s ease,

        transform 0.7s ease,

        visibility 0.6s ease;

}



.cx-premium-hero__slide.is-active {

    z-index: 2;

    opacity: 1;

    visibility: visible;

    transform: translateX(0) scale(1);

}



.cx-premium-hero__link,

.cx-premium-hero__slide picture {

    display: block;

    width: 100%;

    height: 100%;

}



.cx-premium-hero__link {

    text-decoration: none;

}



.cx-premium-hero__banner {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    border-radius: var(--cx-banner-radius);

   /* filter:

        drop-shadow(0 0 12px rgba(0, 224, 255, 0.42))

        drop-shadow(0 16px 24px rgba(0, 8, 45, 0.34));
    */
}



/* =========================

   Base / Podium

========================= */



.cx-premium-hero__base-wrap {

    position: absolute;

    left: 50%;

    top: 70%;

    z-index: 5;

    width: min(1260px, 94%);

    pointer-events: none;

    transform: translateX(-50%);

    transform-origin: center center;

}



.cx-premium-hero__base {

    display: block;

    width: 100%;
    height: auto;

    transform-origin: center center;

    filter:

        drop-shadow(0 0 18px rgba(0, 224, 255, 0.64))

        drop-shadow(0 0 22px rgba(57, 255, 20, 0.2));

    transition:

        transform 0.7s ease,

        filter 0.7s ease;

}



.cx-premium-hero.is-changing .cx-premium-hero__base {

    transform: rotate(1.2deg) scale(1.01);

    filter:

        drop-shadow(0 0 24px rgba(0, 224, 255, 0.78))

        drop-shadow(0 0 28px rgba(57, 255, 20, 0.3));

}



/* =========================

   Arrows

========================= */



.cx-premium-hero__arrow {

    position: absolute;

    top: var(--cx-arrow-top);

    z-index: 20;

    width: var(--cx-arrow-size);

    height: var(--cx-arrow-size);

    padding: 0;

    border: 1px solid rgba(57, 255, 20, 0.88);

    border-radius: 50%;

    color: #ffffff;

    cursor: pointer;

    appearance: none;

    transform: translateY(-50%);

    background:

        radial-gradient(circle, rgba(0, 180, 255, 0.34) 0%, rgba(0, 35, 105, 0.9) 72%);

    box-shadow:

        0 0 18px rgba(0, 224, 255, 0.74),

        0 0 22px rgba(57, 255, 20, 0.24),

        inset 0 0 16px rgba(0, 224, 255, 0.22);

    transition:

        transform 0.25s ease,

        border-color 0.25s ease,

        box-shadow 0.25s ease;

}



.cx-premium-hero__arrow--prev {

    left: var(--cx-arrow-x);

}



.cx-premium-hero__arrow--next {

    right: var(--cx-arrow-x);

}



.cx-premium-hero__arrow span {

    display: block;

    margin-top: -4px;

    font-size: 45px;

    font-weight: 300;

    line-height: 1;

    text-shadow: 0 0 14px rgba(0, 224, 255, 0.9);

}



.cx-premium-hero__arrow:hover {

    border-color: rgba(57, 255, 20, 1);

    transform: translateY(-50%) scale(1.06);

    box-shadow:

        0 0 24px rgba(0, 224, 255, 0.9),

        0 0 26px rgba(57, 255, 20, 0.34),

        inset 0 0 20px rgba(0, 224, 255, 0.3);

}



/* =========================

   Progress / Dots

========================= */



.cx-premium-hero__controls {

    position: relative;

    z-index: 30;

    width: min(420px, 34%);

    margin: 8px auto 0;

    text-align: center;

}



.cx-premium-hero__progress {

    position: relative;

    width: 100%;

    height: 3px;

    margin: 0 auto 10px;

    overflow: hidden;

    border-radius: 999px;

    opacity: 0.9;

    background: rgba(160, 210, 255, 0.38);

    box-shadow: 0 0 12px rgba(0, 224, 255, 0.32);

}



.cx-premium-hero__progress-line {

    display: block;

    width: 50%;

    height: 100%;

    border-radius: inherit;

    transform-origin: left center;

    background: linear-gradient(90deg, #39ff14 0%, #00e0ff 100%);

    box-shadow:

        0 0 12px rgba(57, 255, 20, 0.75),

        0 0 18px rgba(0, 224, 255, 0.58);

    transition: width 0.45s ease;

}



.cx-premium-hero__dots {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

}



.cx-premium-hero__dot {

    width: 11px;

    height: 11px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    cursor: pointer;

    background: rgba(125, 185, 255, 0.5);

    box-shadow: inset 0 0 8px rgba(0, 20, 65, 0.45);

    transition:

        transform 0.25s ease,

        background 0.25s ease,

        box-shadow 0.25s ease;

}



.cx-premium-hero__dot.is-active {

    background: #39ff14;

    transform: scale(1.16);

    box-shadow:

        0 0 12px rgba(57, 255, 20, 0.9),

        0 0 18px rgba(0, 224, 255, 0.58);

}



/* =========================

   Laptop / Medium Desktop

========================= */



@media (max-width: 1500px) {

    .cx-premium-hero {

        --cx-banner-width: min(1060px, 74vw);

        --cx-arrow-size: 56px;

        --cx-arrow-gap: 16px;



        padding: 30px 18px 22px;

    }



    .cx-premium-hero__controls {

        width: min(390px, 36%);

        margin-top: 7px;

    }



    .cx-premium-hero__base-wrap {

        width: min(1180px, 94%);

    }

}



@media (max-width: 1199px) {

    .cx-premium-hero {

        --cx-banner-width: 78vw;

        --cx-banner-radius: 28px;

        --cx-arrow-size: 50px;

        --cx-arrow-gap: 12px;



        padding: 28px 14px 20px;

    }



    .cx-premium-hero__arrow span {

        font-size: 39px;

    }



    .cx-premium-hero__controls {

        width: min(340px, 42%);

        margin-top: 7px;

    }

}



/* =========================

   Tablet

========================= */



@media (max-width: 991px) {

    .cx-premium-hero {

        --cx-banner-width: min(640px, 82vw);

        --cx-banner-radius: 22px;

        --cx-arrow-size: 34px;

        --cx-arrow-gap: 8px;

        --cx-arrow-top: clamp(72px, 11.5vw, 118px);

        --cx-arrow-x: max(

            8px,

            calc((100% - var(--cx-banner-width)) / 2 - var(--cx-arrow-size) - var(--cx-arrow-gap))

        );



        padding: 22px 0 16px;

    }



    .cx-premium-hero__inner,

    .cx-premium-hero__stage {

        width: 100%;

        max-width: 100%;

    }



    .cx-premium-hero__stage::before {

        top: 28px;

        width: 82vw;

        height: 150px;

        opacity: 0.75;

    }



    .cx-premium-hero__base-wrap {

        display: none;

    }



    .cx-premium-hero__arrow {

        width: var(--cx-arrow-size);

        height: var(--cx-arrow-size);

    }



    .cx-premium-hero__arrow span {

        font-size: 27px;

        margin-top: -3px;

    }



    .cx-premium-hero__controls {

        width: min(260px, 42%);

        margin-top: 7px;

    }



    .cx-premium-hero__progress {

        height: 2px;

        margin-bottom: 8px;

    }



    .cx-premium-hero__dot {

        width: 8px;

        height: 8px;

    }



    .cx-premium-hero__dots {

        gap: 7px;

    }

}



/* =========================

   Mobile

========================= */



@media (max-width: 767px) {

    .cx-premium-hero {

        --cx-banner-width: 78vw;

        --cx-banner-radius: 17px;

        --cx-arrow-size: 28px;

        --cx-arrow-gap: 6px;

        --cx-arrow-top: clamp(46px, 13vw, 58px);

        --cx-arrow-x: max(

            6px,

            calc((100% - var(--cx-banner-width)) / 2 - var(--cx-arrow-size) - var(--cx-arrow-gap))

        );



        padding: 14px 0 10px;

        background-position: center top;

    }



    .cx-premium-hero__stage::before {

        top: 18px;

        width: 82vw;

        height: 110px;

        opacity: 0.65;

    }



    .cx-premium-hero__slider {

        width: var(--cx-banner-width);

        border-radius: var(--cx-banner-radius);

    }



    .cx-premium-hero__banner {

        border-radius: var(--cx-banner-radius);

    }



    .cx-premium-hero__arrow {

        width: var(--cx-arrow-size);

        height: var(--cx-arrow-size);

    }



    .cx-premium-hero__arrow span {

        font-size: 21px;

        margin-top: -2px;

    }



    .cx-premium-hero__controls {

        width: 40%;

        margin-top: 5px;

    }



    .cx-premium-hero__progress {

        height: 2px;

        margin-bottom: 7px;

    }



    .cx-premium-hero__dot {

        width: 8px;

        height: 8px;

    }

}



/* =========================

   Small Mobile

========================= */



@media (max-width: 480px) {

    .cx-premium-hero {

        --cx-banner-width: 76vw;

        --cx-banner-radius: 15px;

        --cx-arrow-size: 27px;

        --cx-arrow-gap: 5px;

        --cx-arrow-top: clamp(43px, 13vw, 54px);



        padding: 12px 0 9px;

    }



    .cx-premium-hero__stage::before {

        top: 16px;

        height: 96px;

    }



    .cx-premium-hero__arrow span {

        font-size: 20px;

    }



    .cx-premium-hero__controls {

        width: 38%;

        margin-top: 5px;

    }

}



/* =========================

   Very Small Mobile

========================= */



@media (max-width: 380px) {

    .cx-premium-hero {

        --cx-banner-width: 74vw;

        --cx-arrow-size: 25px;

        --cx-arrow-gap: 4px;

        --cx-arrow-top: 46px;



        padding: 10px 0 8px;

    }



    .cx-premium-hero__arrow span {

        font-size: 18px;

    }



    .cx-premium-hero__controls {

        width: 38%;

        margin-top: 4px;

    }



    .cx-premium-hero__progress {

        margin-bottom: 6px;

    }

}



/* =========================

   Motion Safety

========================= */



@media (prefers-reduced-motion: reduce) {

    .cx-premium-hero__slide,

    .cx-premium-hero__base,

    .cx-premium-hero__arrow,

    .cx-premium-hero__dot,

    .cx-premium-hero__progress-line {

        transition: none;

    }

}



/* 12 july csss update */





/* =========================================================

   TOP BANNER HEIGHT FIX — PHONES & TABLETS ONLY

   Desktop/web version remains unchanged

========================================================= */



/* ---------------------------------------------------------

   General phone fallback

   Covers most Android and iPhone devices

--------------------------------------------------------- */

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

    .cx-premium-hero__slider {

        aspect-ratio: 16 / 7.4 !important;

    }



    .cx-premium-hero__banner {

        width: 100% !important;

        height: 100% !important;

        object-fit: fill !important;

    }

}





/* ---------------------------------------------------------

   Compact phones

   iPhone 12 Mini / 13 Mini

   Smaller Samsung and Android screens

--------------------------------------------------------- */

@media only screen and (min-width: 350px) and (max-width: 379px) {

    .cx-premium-hero__slider {

        aspect-ratio: 16 / 7.8 !important;

    }

}





/* ---------------------------------------------------------

   iPhone 12 / 13 / 14

   Samsung S23 / S24 / S25

   Standard-width mobile screens

--------------------------------------------------------- */

@media only screen and (min-width: 380px) and (max-width: 399px) {

    .cx-premium-hero__slider {

        aspect-ratio: 16 / 7.7 !important;

    }

}





/* ---------------------------------------------------------

   Pixel 7 / 8 / 9 / 10

   Samsung S23 / S24 / S25 Ultra

   iPhone Plus and Pro Max sizes

--------------------------------------------------------- */

@media only screen and (min-width: 400px) and (max-width: 430px) {

    .cx-premium-hero__slider {

        aspect-ratio: 16 / 7.5 !important;

    }

}





/* ---------------------------------------------------------

   Wider Android phones

   Foldable outer displays and large mobile screens

--------------------------------------------------------- */

@media only screen and (min-width: 431px) and (max-width: 767px) {

    .cx-premium-hero__slider {

        aspect-ratio: 16 / 7.2 !important;

    }

}





/* ---------------------------------------------------------

   iPad Mini and smaller tablets — portrait

--------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 899px) and (pointer: coarse) {

    .cx-premium-hero__slider {

        aspect-ratio: 16 / 6.7 !important;

    }



    .cx-premium-hero__banner {

        width: 100% !important;

        height: 100% !important;

        object-fit: fill !important;

    }

}





/* ---------------------------------------------------------

   iPad / iPad Air / Android tablets

--------------------------------------------------------- */

@media only screen and (min-width: 900px) and (max-width: 1024px) and (pointer: coarse) {

    .cx-premium-hero__slider {

        aspect-ratio: 16 / 6.5 !important;

    }



    .cx-premium-hero__banner {

        width: 100% !important;

        height: 100% !important;

        object-fit: fill !important;

    }

}





/* ---------------------------------------------------------

   iPad Pro and larger tablets

   Touch devices only, so laptop desktop remains unchanged

--------------------------------------------------------- */

@media only screen and (min-width: 1025px) and (max-width: 1180px) and (pointer: coarse) {

    .cx-premium-hero__slider {

        aspect-ratio: 16 / 6.3 !important;

    }



    .cx-premium-hero__banner {

        width: 100% !important;

        height: 100% !important;

        object-fit: fill !important;

    }

}