/* ============================================================
   MDS CMS
   HERO SLIDER
============================================================ */


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

.website-hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #21170f;
}

.website-hero-slider .heroSwiper {
    position: relative;
    width: 100%;
}

.website-hero-slider .swiper-wrapper {
    align-items: stretch;
}


/* ============================================================
   SLIDE
============================================================ */

.website-hero-slider .hero-slide {
    position: relative;
    width: 100%;

    /*
     * Desktop banners ideally:
     * 1920 x 900
     */
    aspect-ratio: 1920 / 900;

    min-height: 520px;
    max-height: 720px;

    overflow: hidden;

    background: #21170f;
}


/* ============================================================
   BACKGROUND PICTURE
============================================================ */

.website-hero-slider .hero-slide-picture {
    position: absolute;
    inset: 0;
    z-index: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #eee7dc;
}


/*
|--------------------------------------------------------------------------
| Main Hero Image
|--------------------------------------------------------------------------
|
| Desktop:
| complete image display karne ke liye contain.
|
| Mobile/tablet:
| separate mobile image ke saath cover use hoga.
|
*/

.website-hero-slider .hero-slide-image {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center center;

    background: #eee7dc;
}


/* ============================================================
   OVERLAY
============================================================ */

.website-hero-slider .hero-slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;
}


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

.website-hero-slider .hero-slide-container {
    position: relative;
    z-index: 2;

    height: 100%;
    min-height: inherit;
}


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

.website-hero-slider .hero-slide-content-wrapper {
    display: flex;

    width: 100%;
    min-height: inherit;

    padding-top: 65px;
    padding-bottom: 75px;
}


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

.website-hero-slider .hero-slide-content {
    position: relative;
    z-index: 3;

    color: #ffffff;

    text-shadow:
        0 2px 18px
        rgba(0, 0, 0, 0.32);
}


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

.website-hero-slider .hero-content-small {
    width: min(100%, 520px);
}

.website-hero-slider .hero-content-medium {
    width: min(100%, 760px);
}

.website-hero-slider .hero-content-large {
    width: min(100%, 900px);
}

.website-hero-slider .hero-content-full {
    width: 100%;
}


/* ============================================================
   EYEBROW
============================================================ */

.website-hero-slider .hero-slide-eyebrow {
    margin: 0 0 0.9rem;

    color: #f4c568;

    font-size: 0.92rem;
    font-weight: 700;

    letter-spacing: 0.06em;
}


/* ============================================================
   TITLE
============================================================ */

.website-hero-slider .hero-slide-title {
    max-width: 760px;

    margin: 0 0 1rem;

    color: #ffffff;

    font-size:
        clamp(
            2.3rem,
            4vw,
            4.2rem
        );

    font-weight: 700;

    line-height: 1.12;

    text-wrap: balance;
}


/* ============================================================
   SUBTITLE
============================================================ */

.website-hero-slider .hero-slide-subtitle {
    max-width: 820px;

    margin: 0 0 1rem;

    color: #ffffff;

    font-size:
        clamp(
            1.2rem,
            2vw,
            1.9rem
        );

    font-weight: 500;

    line-height: 1.45;
}


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

.website-hero-slider .hero-slide-description {
    max-width: 700px;

    margin: 0 0 1.8rem;

    color:
        rgba(
            255,
            255,
            255,
            0.94
        );

    font-size:
        clamp(
            0.96rem,
            1.25vw,
            1.12rem
        );

    line-height: 1.75;
}


/* ============================================================
   BUTTON AREA
============================================================ */

.website-hero-slider .hero-slide-actions {
    position: relative;
    z-index: 5;

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 0.9rem;

    margin-top: 1.4rem;
}


/* ============================================================
   COMMON BUTTON
============================================================ */

.website-hero-slider .hero-primary-button,
.website-hero-slider .hero-secondary-button {
    position: relative;
    z-index: 6;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 160px;
    min-height: 48px;

    padding:
        0.85rem
        1.5rem;

    border-radius: 999px;

    font-size: 0.95rem;
    font-weight: 600;

    line-height: 1.2;

    text-decoration: none;

    white-space: nowrap;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}


/* ============================================================
   PRIMARY BUTTON
============================================================ */

.website-hero-slider .hero-primary-button {
    border:
        1px solid
        #d9a441;

    background: #d9a441;

    color: #251707;

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, 0.13);
}

.website-hero-slider .hero-primary-button:hover {
    border-color: #efc267;

    background: #efc267;

    color: #251707;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 26px
        rgba(0, 0, 0, 0.17);
}


/* ============================================================
   SECONDARY BUTTON
============================================================ */

.website-hero-slider .hero-secondary-button {
    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.85
        );

    background:
        rgba(
            0,
            0,
            0,
            0.18
        );

    color: #ffffff;

    backdrop-filter:
        blur(7px);
}

.website-hero-slider .hero-secondary-button:hover {
    border-color: #ffffff;

    background: #ffffff;

    color: #251707;

    transform:
        translateY(-2px);
}


/* ============================================================
   NAVIGATION BUTTONS
============================================================ */

.website-hero-slider .swiper-button-prev,
.website-hero-slider .swiper-button-next {
    width: 50px;
    height: 50px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.32
        );

    border-radius: 50%;

    background:
        rgba(
            28,
            20,
            14,
            0.48
        );

    color: #ffffff;

    backdrop-filter:
        blur(8px);

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease;
}

.website-hero-slider .swiper-button-prev:hover,
.website-hero-slider .swiper-button-next:hover {
    border-color:
        rgba(
            255,
            255,
            255,
            0.75
        );

    background:
        rgba(
            134,
            83,
            42,
            0.88
        );

    transform:
        scale(1.04);
}

.website-hero-slider .swiper-button-prev {
    left: 24px;
}

.website-hero-slider .swiper-button-next {
    right: 24px;
}

.website-hero-slider .swiper-button-prev::after,
.website-hero-slider .swiper-button-next::after {
    font-size: 1rem;
    font-weight: 700;
}


/* ============================================================
   PAGINATION
============================================================ */

.website-hero-slider .swiper-pagination {
    bottom: 25px !important;
}

.website-hero-slider .swiper-pagination-bullet {
    width: 9px;
    height: 9px;

    background: #ffffff;

    opacity: 0.55;

    transition:
        width 0.2s ease,
        opacity 0.2s ease,
        background 0.2s ease;
}

.website-hero-slider .swiper-pagination-bullet-active {
    width: 28px;

    border-radius: 999px;

    background: #f4c568;

    opacity: 1;
}


/* ============================================================
   TEXT ALIGNMENT SUPPORT
============================================================ */

.website-hero-slider
.text-center
.hero-slide-title,
.website-hero-slider
.text-center
.hero-slide-description,
.website-hero-slider
.text-center
.hero-slide-subtitle {
    margin-right: auto;
    margin-left: auto;
}


.website-hero-slider
.text-end
.hero-slide-title,
.website-hero-slider
.text-end
.hero-slide-description,
.website-hero-slider
.text-end
.hero-slide-subtitle {
    margin-left: auto;
}


/* ============================================================
   TABLET / SMALL LAPTOP
============================================================ */

@media (
    max-width: 1199.98px
) {

    .website-hero-slider .hero-slide {
        min-height: 540px;
    }

    .website-hero-slider
    .hero-slide-content-wrapper {
        padding-top: 60px;
        padding-bottom: 70px;
    }

    .website-hero-slider
    .hero-slide-title {
        font-size:
            clamp(
                2.2rem,
                4.5vw,
                3.8rem
            );
    }

}


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

@media (
    max-width: 991.98px
) {

    /*
     * Desktop aspect ratio hata rahe hain.
     * Mobile image ko screen fill karne denge.
     */

    .website-hero-slider .hero-slide {
        aspect-ratio: auto;

        min-height: 620px;
        max-height: none;
    }


    .website-hero-slider
    .hero-slide-image {

        object-fit: cover;
        object-position: center center;
    }


    .website-hero-slider
    .hero-slide-content-wrapper {

        padding-top: 80px;
        padding-bottom: 80px;
    }


    .website-hero-slider
    .hero-slide-content {

        max-width: 700px;
    }


    .website-hero-slider
    .swiper-button-prev,
    .website-hero-slider
    .swiper-button-next {

        display: none;
    }

}


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

@media (
    max-width: 767.98px
) {

    .website-hero-slider .hero-slide {
        min-height: 620px;
    }


    /*
     * hero_slider.php automatically
     * mobile_image_url use karega if available.
     */

    .website-hero-slider
    .hero-slide-image {

        object-fit: cover;

        object-position:
            center center;
    }


    .website-hero-slider
    .hero-slide-overlay {

        /*
         * Mobile par text readability
         * thodi stronger rakhenge.
         */

        opacity: 0.5;
    }


    .website-hero-slider
    .hero-slide-content-wrapper {

        padding-top: 70px;
        padding-bottom: 80px;
    }


    .website-hero-slider
    .hero-slide-eyebrow {

        margin-bottom: 0.7rem;

        font-size: 0.76rem;
    }


    .website-hero-slider
    .hero-slide-title {

        max-width: 100%;

        font-size:
            clamp(
                2rem,
                9vw,
                3rem
            );

        line-height: 1.15;
    }


    .website-hero-slider
    .hero-slide-subtitle {

        font-size: 1.12rem;

        line-height: 1.5;
    }


    .website-hero-slider
    .hero-slide-description {

        max-width: 100%;

        font-size: 0.94rem;

        line-height: 1.65;
    }


    .website-hero-slider
    .hero-slide-actions {

        margin-top: 1.2rem;
    }

}


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

@media (
    max-width: 575.98px
) {

    .website-hero-slider .hero-slide {
        min-height: 600px;
    }


    .website-hero-slider
    .hero-slide-content-wrapper {

        padding-top: 60px;
        padding-bottom: 70px;
    }


    .website-hero-slider
    .hero-slide-actions {

        flex-direction: column;

        align-items: stretch;

        width: 100%;
    }


    .website-hero-slider
    .hero-primary-button,
    .website-hero-slider
    .hero-secondary-button {

        width: 100%;

        min-width: 0;
    }


    .website-hero-slider
    .swiper-pagination {

        bottom: 18px !important;
    }

}


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

@media (
    max-width: 380px
) {

    .website-hero-slider .hero-slide {
        min-height: 580px;
    }


    .website-hero-slider
    .hero-slide-title {

        font-size: 1.9rem;
    }


    .website-hero-slider
    .hero-slide-subtitle {

        font-size: 1rem;
    }

}


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

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

    .website-hero-slider *,
    .website-hero-slider *::before,
    .website-hero-slider *::after {

        scroll-behavior: auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}