/* Istorea Style Manager — compiled automatically. Do not edit this file directly. */

/* === Offers Page - Hero (#14) === */
/* =========================================================
   ISTOREA — OFFERS PAGE CINEMATIC HERO
   Created and Designed by Kshitiz Jain
   ========================================================= */


.ixo-hero,
.ixo-hero *,
.ixo-hero *::before,
.ixo-hero *::after {

    box-sizing:
        border-box;
}



/* =========================================================
   ROOT
   ========================================================= */

.ixo-hero {

    --ixo-gold:
        #DDB54B;

    --ixo-ivory:
        #F5F0E8;


    position:
        relative;


    width:
        100%;


    min-height:
        620px;


    overflow:
        hidden;


    isolation:
        isolate;


    background:
        #020202;


    border-bottom:

        1px solid
        rgba(221,181,75,.12);
}



/* =========================================================
   MEDIA
   ========================================================= */

.ixo-hero-media {

    position:
        absolute;


    inset:
        0;


    z-index:
        1;


    overflow:
        hidden;


    background:
        #020202;
}



/* =========================================================
   SLIDES
   ========================================================= */

.ixo-hero-slide {

    position:
        absolute;


    inset:
        0;


    margin:
        0;


    opacity:
        0;


    visibility:
        hidden;


    transform:
        scale(1.015);


    transition:

        opacity 1.15s
        cubic-bezier(.2,.7,.2,1),

        visibility 1.15s linear;


    will-change:
        opacity;
}



.ixo-hero-slide.is-active {

    opacity:
        1;


    visibility:
        visible;


    z-index:
        2;
}



.ixo-hero-slide img {

    display:
        block;


    width:
        100%;


    height:
        100%;


    object-fit:
        cover;


    object-position:
        center;


    transform:

        scale(1.035)
        translate3d(0,0,0);


    filter:

        saturate(.93)
        contrast(1.04);


    transition:

        transform 7.5s
        cubic-bezier(.16,1,.3,1);
}



.ixo-hero-slide.is-active:nth-child(1)
img {

    transform:

        scale(1.10)
        translate3d(-1%,0,0);
}



.ixo-hero-slide.is-active:nth-child(2)
img {

    transform:

        scale(1.11)
        translate3d(1.1%,-.5%,0);
}



.ixo-hero-slide.is-active:nth-child(3)
img {

    transform:

        scale(1.105)
        translate3d(0,1%,0);
}



/* =========================================================
   DESKTOP CINEMATIC OVERLAY
   ========================================================= */

.ixo-hero-overlay {

    position:
        absolute;


    inset:
        0;


    z-index:
        5;


    pointer-events:
        none;


    background:

        linear-gradient(
            90deg,

            rgba(0,0,0,.94)
            0%,

            rgba(0,0,0,.78)
            27%,

            rgba(0,0,0,.51)
            48%,

            rgba(0,0,0,.18)
            76%,

            rgba(0,0,0,.13)
            100%
        ),

        linear-gradient(
            180deg,

            rgba(0,0,0,.15),

            rgba(0,0,0,.08)
            48%,

            rgba(0,0,0,.55)
            100%
        );
}



/* =========================================================
   GOLD AMBIENT GLOW
   ========================================================= */

.ixo-hero-gold-glow {

    position:
        absolute;


    z-index:
        6;


    left:
        -170px;


    bottom:
        -170px;


    width:
        540px;


    height:
        540px;


    pointer-events:
        none;


    background:

        radial-gradient(
            circle,
            rgba(221,181,75,.105),
            rgba(221,181,75,.027) 38%,
            transparent 70%
        );


    filter:
        blur(10px);
}



/* =========================================================
   CONTENT
   ========================================================= */

.ixo-hero-content {

    position:
        relative;


    z-index:
        10;


    width:

        min(
            1220px,
            calc(100% - 72px)
        );


    min-height:
        620px;


    margin:
        0 auto;


    display:
        flex;


    flex-direction:
        column;


    justify-content:
        center;


    align-items:
        flex-start;


    padding:

        20px
        0
        0;
}



/* =========================================================
   KICKER
   ========================================================= */

.ixo-hero-kicker {

    display:
        flex;


    align-items:
        center;


    gap:
        15px;


    margin-bottom:
        24px;
}



.ixo-hero-kicker span {

    display:
        block;


    width:
        48px;


    height:
        1px;


    flex:
        0 0 48px;


    background:

        linear-gradient(
            90deg,
            var(--ixo-gold),
            rgba(221,181,75,.25)
        );
}



.ixo-hero-kicker small {

    color:
        var(--ixo-gold);


    font-family:

        Arial,
        Helvetica,
        sans-serif;


    font-size:
        9px;


    font-weight:
        700;


    line-height:
        1;


    letter-spacing:
        .34em;


    white-space:
        nowrap;


    text-transform:
        uppercase;
}



/* =========================================================
   MAIN HEADING
   ========================================================= */

.ixo-hero h1 {

    width:
        min(760px,100%);


    margin:
        0;


    font-family:

        Georgia,
        "Times New Roman",
        serif;


    font-size:

        clamp(
            62px,
            6.2vw,
            104px
        );


    font-weight:
        700;


    line-height:
        .84;


    letter-spacing:
        -.062em;


    text-transform:
        uppercase;


    text-wrap:
        balance;
}



.ixo-hero h1 span,
.ixo-hero h1 strong,
.ixo-hero h1 em {

    display:
        block;
}



.ixo-hero h1 span {

    color:

        rgba(
            245,
            240,
            232,
            .97
        );


    font-weight:
        700;
}



.ixo-hero h1 strong {

    color:
        var(--ixo-ivory);


    font-weight:
        700;


    text-shadow:

        0 0 28px
        rgba(255,255,255,.055);
}



.ixo-hero h1 em {

    color:
        var(--ixo-gold);


    font-style:
        normal;


    font-weight:
        700;


    text-shadow:

        0 0 24px
        rgba(221,181,75,.075);
}



/* =========================================================
   DESCRIPTION
   ========================================================= */

.ixo-hero-content > p {

    width:
        min(590px,100%);


    margin:
        28px 0 0;


    color:

        rgba(
            245,
            240,
            232,
            .72
        );


    font-family:

        Georgia,
        "Times New Roman",
        serif;


    font-size:
        16px;


    font-weight:
        400;


    line-height:
        1.7;
}



/* =========================================================
   SLIDER PROGRESS
   ========================================================= */

.ixo-hero-progress {

    margin-top:
        32px;


    display:
        flex;


    align-items:
        center;


    gap:
        7px;
}



.ixo-hero-progress span {

    display:
        block;


    width:
        6px;


    height:
        6px;


    border-radius:
        50%;


    background:

        rgba(
            245,
            240,
            232,
            .28
        );


    transition:

        width .35s ease,
        border-radius .35s ease,
        background .35s ease;
}



.ixo-hero-progress span.is-active {

    width:
        28px;


    border-radius:
        99px;


    background:
        var(--ixo-gold);
}



/* =========================================================
   BOTTOM GOLD LINE
   ========================================================= */

.ixo-hero-bottom-line {

    position:
        absolute;


    z-index:
        12;


    left:
        0;


    right:
        0;


    bottom:
        0;


    height:
        1px;


    overflow:
        hidden;


    pointer-events:
        none;
}



.ixo-hero-bottom-line span {

    position:
        absolute;


    top:
        0;


    left:
        -25%;


    width:
        25%;


    height:
        100%;


    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(238,202,106,.82),
            transparent
        );


    animation:

        ixoHeroGoldLine
        7s
        ease-in-out
        infinite;
}



@keyframes ixoHeroGoldLine {

    from {

        left:
            -25%;
    }


    to {

        left:
            125%;
    }

}



/* =========================================================
   TABLET
   ========================================================= */

@media
(max-width:1024px)
and
(min-width:768px) {

    .ixo-hero,
    .ixo-hero-content {

        min-height:
            570px;
    }


    .ixo-hero-content {

        width:

            calc(
                100% - 48px
            );
    }


    .ixo-hero h1 {

        font-size:
            67px;
    }


    .ixo-hero-content > p {

        width:
            520px;


        font-size:
            15px;
    }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media
(max-width:767px) {

    .ixo-hero {

        min-height:
            610px;
    }



    .ixo-hero-content {

        width:

            calc(
                100% - 34px
            );


        min-height:
            610px;


        justify-content:
            flex-end;


        padding:

            0
            0
            46px;
    }



    /*
     * Mobile image gets more visibility.
     * Content is protected by the bottom gradient.
     */

    .ixo-hero-overlay {

        background:

            linear-gradient(
                180deg,

                rgba(0,0,0,.04)
                0%,

                rgba(0,0,0,.10)
                25%,

                rgba(0,0,0,.33)
                50%,

                rgba(0,0,0,.73)
                70%,

                rgba(0,0,0,.97)
                100%
            );
    }



    .ixo-hero-gold-glow {

        left:
            -180px;


        bottom:
            -160px;


        width:
            440px;


        height:
            440px;
    }



    .ixo-hero-kicker {

        margin-bottom:
            18px;


        gap:
            13px;
    }



    .ixo-hero-kicker span {

        width:
            40px;


        flex-basis:
            40px;
    }



    .ixo-hero-kicker small {

        font-size:
            7.5px;


        letter-spacing:
            .27em;
    }



    .ixo-hero h1 {

        width:
            100%;


        font-size:

            clamp(
                45px,
                13vw,
                59px
            );


        line-height:
            .89;


        letter-spacing:
            -.055em;
    }



    .ixo-hero-content > p {

        margin-top:
            20px;


        font-size:
            14px;


        line-height:
            1.62;
    }



    .ixo-hero-progress {

        margin-top:
            23px;
    }



    .ixo-hero-progress span {

        width:
            5px;


        height:
            5px;
    }



    .ixo-hero-progress
    span.is-active {

        width:
            23px;
    }

}



/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media
(max-width:390px) {

    .ixo-hero,
    .ixo-hero-content {

        min-height:
            570px;
    }


    .ixo-hero-content {

        width:

            calc(
                100% - 28px
            );


        padding-bottom:
            39px;
    }


    .ixo-hero h1 {

        font-size:
            43px;
    }


    .ixo-hero-content > p {

        font-size:
            13px;
    }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .ixo-hero-slide,
    .ixo-hero-slide img,
    .ixo-hero-progress span,
    .ixo-hero-bottom-line span {

        transition:
            none !important;


        animation:
            none !important;
    }

}