/*
=========================================================
 BUDANIA IAS — PREMIUM RESPONSIVE SLIDER
 File: assets/css/home-slider.css
 Compatible with: slider.php
 Theme: Astra Child Theme

 Features:
 - Fully responsive banner images
 - Desktop, laptop, tablet and mobile layouts
 - Separate mobile banner image support
 - Professional navy blue and gold design
 - Smooth slide transitions
 - Premium navigation arrows
 - Animated pagination dots
 - Responsive headings and buttons
 - Keyboard accessibility
 - Reduced motion support
 - Astra theme compatibility
=========================================================
*/


/* =======================================================
   1. SLIDER DESIGN SYSTEM
======================================================= */

.budania-slider {
    --bs-primary: #102d50;
    --bs-primary-dark: #081c33;
    --bs-primary-light: #1c426c;

    --bs-accent: #c99a45;
    --bs-accent-light: #e4bf77;

    --bs-white: #ffffff;
    --bs-black: #000000;

    --bs-text: #ffffff;
    --bs-muted: rgba(255, 255, 255, 0.88);

    --bs-radius: 0px;
    --bs-arrow-size: 48px;

    position: relative;

    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    isolation: isolate;

    background: var(--bs-primary-dark);

    color: var(--bs-text);

    font-family: inherit;

    line-height: 1.5;

    border-radius: var(--bs-radius);

    box-sizing: border-box;
}


/* Apply border-box sizing to slider elements */

.budania-slider *,
.budania-slider *::before,
.budania-slider *::after {
    box-sizing: border-box;
}


/* Prevent unwanted image or text overflow */

.budania-slider img,
.budania-slider picture {
    max-width: 100%;
}


/* =======================================================
   2. SLIDER TRACK
======================================================= */

.budania-slider__track {
    position: relative;

    display: block;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: var(--bs-primary-dark);
}


/* =======================================================
   3. INDIVIDUAL SLIDES
======================================================= */

.budania-slider__slide {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    overflow: hidden;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 0;

    transition:
        opacity 650ms ease,
        visibility 650ms ease;
}


/*
 * The active slide stays in the normal document flow.
 * This allows its image to determine the slider height.
 */

.budania-slider__slide.is-active {
    position: relative;

    inset: auto;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    z-index: 1;
}


/* =======================================================
   4. RESPONSIVE PICTURE CONTAINER
======================================================= */

.budania-slider__picture {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: var(--bs-primary-dark);
}


/* =======================================================
   5. RESPONSIVE BANNER IMAGE
======================================================= */

.budania-slider__image {
    display: block;

    width: 100%;

    /*
     * Flexible image height:
     * - Minimum: 300px
     * - Preferred: 38vw
     * - Maximum: 680px
     */

    height: clamp(300px, 38vw, 680px);

    max-width: 100%;

    margin: 0;
    padding: 0;

    /*
     * Cover fills the banner without stretching.
     * Some cropping may occur depending on the image ratio.
     */

    object-fit: cover;

    object-position: center center;

    border: 0;

    border-radius: inherit;

    background: var(--bs-primary-dark);

    transform: scale(1);

    transition:
        transform 7s ease,
        filter 500ms ease;

    will-change: transform;
}


/* Subtle image animation on the active slide */

.budania-slider__slide.is-active .budania-slider__image {
    transform: scale(1.025);
}


/* =======================================================
   6. OPTIONAL PROFESSIONAL IMAGE TREATMENT
======================================================= */

/*
 * Keep the image itself natural.
 * The overlay below provides contrast for the text.
 */

.budania-slider__slide::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(5, 19, 36, 0.84) 0%,
            rgba(8, 28, 51, 0.65) 36%,
            rgba(8, 28, 51, 0.22) 70%,
            rgba(8, 28, 51, 0.06) 100%
        );
}


/* =======================================================
   7. TEXT OVERLAY
======================================================= */

.budania-slider__overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    width: 100%;
    height: 100%;

    margin: 0;
    padding:
        clamp(28px, 6vw, 100px)
        clamp(24px, 7vw, 120px);

    pointer-events: none;
}


/* =======================================================
   8. SLIDE CONTENT CONTAINER
======================================================= */

.budania-slider__content {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    width: 100%;

    max-width: 760px;

    margin: 0;
    padding: 0;

    color: var(--bs-white);

    text-align: left;

    pointer-events: auto;
}


/* =======================================================
   9. SLIDE HEADING
======================================================= */

.budania-slider__title {
    position: relative;

    display: block;

    max-width: 760px;

    margin: 0 0 22px;
    padding: 0;

    color: var(--bs-white);

    font-family: inherit;

    font-size: clamp(30px, 4.1vw, 64px);

    font-weight: 800;

    line-height: 1.12;

    letter-spacing: -0.035em;

    text-transform: none;

    text-decoration: none;

    overflow-wrap: break-word;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.18);

    animation: budaniaSliderTextIn 650ms ease both;
}


/* Gold decorative accent under the heading */

.budania-slider__title::after {
    content: "";

    display: block;

    width: 76px;
    height: 4px;

    margin-top: 20px;

    background: linear-gradient(
        90deg,
        var(--bs-accent),
        var(--bs-accent-light)
    );

    border-radius: 20px;
}


/* =======================================================
   10. SLIDE DESCRIPTION
======================================================= */

.budania-slider__description {
    display: block;

    max-width: 620px;

    margin: 0 0 30px;
    padding: 0;

    color: var(--bs-muted);

    font-family: inherit;

    font-size: clamp(15px, 1.35vw, 20px);

    font-weight: 400;

    line-height: 1.8;

    letter-spacing: 0.01em;

    text-decoration: none;

    overflow-wrap: break-word;

    text-shadow:
        0 1px 6px rgba(0, 0, 0, 0.25);

    animation: budaniaSliderTextIn 800ms ease both;
}


/* =======================================================
   11. CALL-TO-ACTION BUTTON
======================================================= */

.budania-slider__button {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 54px;

    max-width: 100%;

    margin: 0;
    padding: 15px 30px;

    overflow-wrap: anywhere;

    color: var(--bs-primary-dark);

    background: linear-gradient(
        135deg,
        var(--bs-accent-light) 0%,
        var(--bs-accent) 100%
    );

    border: 1px solid var(--bs-accent);

    border-radius: 5px;

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

    font-family: inherit;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.4;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    transition:
        color 250ms ease,
        background 250ms ease,
        border-color 250ms ease,
        box-shadow 250ms ease,
        transform 250ms ease;

    animation: budaniaSliderButtonIn 900ms ease both;
}


/* Arrow icon */

.budania-slider__button::after {
    content: "\2192";

    display: inline-block;

    font-size: 20px;

    line-height: 1;

    transition: transform 250ms ease;
}


/* Button hover */

.budania-slider__button:hover {
    color: var(--bs-white);

    background: var(--bs-primary);

    border-color: var(--bs-white);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.25);

    transform: translateY(-3px);
}


.budania-slider__button:hover::after {
    transform: translateX(4px);
}


/* Keyboard focus */

.budania-slider__button:focus-visible {
    outline: 3px solid var(--bs-white);

    outline-offset: 5px;
}


/* =======================================================
   12. SLIDER NAVIGATION ARROWS
======================================================= */

.budania-slider__arrow {
    position: absolute;

    top: 50%;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    width: var(--bs-arrow-size);
    height: var(--bs-arrow-size);

    margin: 0;
    padding: 0;

    color: var(--bs-white);

    background: rgba(10, 32, 56, 0.62);

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

    border-radius: 50%;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.18);

    font-family: inherit;

    font-size: 17px;

    line-height: 1;

    cursor: pointer;

    opacity: 0.92;

    transform: translateY(-50%);

    transition:
        background 250ms ease,
        color 250ms ease,
        border-color 250ms ease,
        opacity 250ms ease,
        transform 250ms ease;
}


/* Previous arrow */

.budania-slider__arrow--prev {
    left: clamp(12px, 2.5vw, 38px);
}


/* Next arrow */

.budania-slider__arrow--next {
    right: clamp(12px, 2.5vw, 38px);
}


/* Arrow hover */

.budania-slider__arrow:hover {
    color: var(--bs-primary-dark);

    background: var(--bs-accent-light);

    border-color: var(--bs-accent-light);

    opacity: 1;

    transform: translateY(-50%) scale(1.08);
}


/* Arrow keyboard focus */

.budania-slider__arrow:focus-visible {
    outline: 3px solid var(--bs-white);

    outline-offset: 4px;
}


/* =======================================================
   13. PAGINATION CONTAINER
======================================================= */

.budania-slider__dots {
    position: absolute;

    left: 50%;
    bottom: 24px;

    z-index: 6;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    width: max-content;
    max-width: calc(100% - 32px);

    margin: 0;
    padding: 10px 16px;

    background: rgba(7, 25, 45, 0.40);

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

    border-radius: 50px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transform: translateX(-50%);
}


/* =======================================================
   14. PAGINATION DOTS
======================================================= */

.budania-slider__dot {
    display: block;

    flex: 0 0 auto;

    width: 10px;
    height: 10px;

    margin: 0;
    padding: 0;

    background: rgba(255, 255, 255, 0.60);

    border: 0;

    border-radius: 50%;

    cursor: pointer;

    transition:
        width 250ms ease,
        background 250ms ease,
        transform 250ms ease,
        box-shadow 250ms ease;
}


/* Active dot */

.budania-slider__dot.is-active {
    width: 28px;

    background: var(--bs-accent-light);

    border-radius: 20px;

    box-shadow:
        0 0 12px rgba(201, 154, 69, 0.35);
}


/* Dot hover */

.budania-slider__dot:hover {
    background: var(--bs-white);

    transform: scale(1.12);
}


/* Dot keyboard focus */

.budania-slider__dot:focus-visible {
    outline: 2px solid var(--bs-white);

    outline-offset: 4px;
}


/* =======================================================
   15. DESKTOP — LARGE SCREENS
======================================================= */

@media (min-width: 1600px) {

    .budania-slider__image {
        height: clamp(600px, 36vw, 760px);
    }

    .budania-slider__content {
        max-width: 820px;
    }

    .budania-slider__title {
        font-size: clamp(58px, 3.6vw, 76px);
    }

    .budania-slider__description {
        font-size: 21px;

        max-width: 680px;
    }

    .budania-slider__overlay {
        padding-left: clamp(100px, 8vw, 170px);
        padding-right: clamp(100px, 8vw, 170px);
    }
}


/* =======================================================
   16. LAPTOPS AND STANDARD DESKTOPS
======================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .budania-slider__image {
        height: clamp(360px, 42vw, 520px);
    }

    .budania-slider__overlay {
        padding: 45px 70px;
    }

    .budania-slider__content {
        max-width: 650px;
    }

    .budania-slider__title {
        font-size: clamp(38px, 4.2vw, 52px);

        margin-bottom: 18px;
    }

    .budania-slider__description {
        font-size: 17px;

        line-height: 1.7;

        margin-bottom: 24px;
    }

    .budania-slider__arrow {
        --bs-arrow-size: 44px;
    }
}


/* =======================================================
   17. TABLETS AND SMALL LAPTOPS
======================================================= */

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

    .budania-slider__image {
        height: clamp(340px, 50vw, 480px);
    }

    .budania-slider__overlay {
        padding: 38px 60px;
    }

    .budania-slider__content {
        max-width: 580px;
    }

    .budania-slider__title {
        font-size: clamp(34px, 4.7vw, 46px);

        line-height: 1.15;

        margin-bottom: 16px;
    }

    .budania-slider__title::after {
        width: 60px;
        height: 3px;

        margin-top: 15px;
    }

    .budania-slider__description {
        max-width: 500px;

        font-size: 16px;

        line-height: 1.65;

        margin-bottom: 22px;
    }

    .budania-slider__button {
        min-height: 48px;

        padding: 13px 23px;

        font-size: 14px;
    }

    .budania-slider__arrow {
        --bs-arrow-size: 42px;
    }

    .budania-slider__dots {
        bottom: 18px;

        gap: 8px;

        padding: 8px 12px;
    }
}


/* =======================================================
   18. MOBILE DEVICES
======================================================= */

@media (max-width: 767px) {

    .budania-slider {
        width: 100%;

        border-radius: 0;
    }

    .budania-slider__track {
        width: 100%;
    }

    /*
     * The mobile image receives its own flexible height.
     * The desktop image also fits if no mobile image exists.
     */

    .budania-slider__image {
        width: 100%;

        height: clamp(320px, 92vw, 500px);

        object-fit: cover;

        object-position: center center;
    }

    /*
     * Reduce the zoom effect on touch devices.
     */

    .budania-slider__slide.is-active .budania-slider__image {
        transform: scale(1.01);
    }

    /*
     * Slightly stronger gradient improves text readability.
     */

    .budania-slider__slide::before {
        background:
            linear-gradient(
                90deg,
                rgba(5, 19, 36, 0.78) 0%,
                rgba(8, 28, 51, 0.56) 60%,
                rgba(8, 28, 51, 0.30) 100%
            ),
            linear-gradient(
                0deg,
                rgba(5, 19, 36, 0.30),
                transparent 60%
            );
    }

    .budania-slider__overlay {
        align-items: center;

        justify-content: flex-start;

        padding:
            38px
            clamp(24px, 7vw, 42px)
            64px;
    }

    .budania-slider__content {
        width: 100%;

        max-width: 100%;
    }

    .budania-slider__title {
        max-width: 100%;

        margin-bottom: 17px;

        font-size: clamp(29px, 7.2vw, 42px);

        line-height: 1.15;

        letter-spacing: -0.025em;

        overflow-wrap: anywhere;
    }

    .budania-slider__title::after {
        width: 54px;
        height: 3px;

        margin-top: 14px;
    }

    .budania-slider__description {
        max-width: 100%;

        margin-bottom: 23px;

        font-size: clamp(14px, 3.8vw, 17px);

        line-height: 1.7;
    }

    .budania-slider__button {
        min-height: 48px;

        max-width: 100%;

        padding: 12px 21px;

        gap: 8px;

        font-size: 14px;

        border-radius: 5px;
    }

    .budania-slider__arrow {
        --bs-arrow-size: 38px;

        font-size: 14px;

        background: rgba(8, 28, 51, 0.75);
    }

    .budania-slider__arrow--prev {
        left: 9px;
    }

    .budania-slider__arrow--next {
        right: 9px;
    }

    .budania-slider__dots {
        bottom: 12px;

        gap: 8px;

        max-width: calc(100% - 28px);

        padding: 8px 12px;
    }

    .budania-slider__dot {
        width: 8px;
        height: 8px;
    }

    .budania-slider__dot.is-active {
        width: 23px;
    }
}


/* =======================================================
   19. SMALL MOBILE DEVICES
======================================================= */

@media (max-width: 480px) {

    .budania-slider__image {
        height: clamp(300px, 100vw, 420px);
    }

    .budania-slider__overlay {
        padding:
            32px
            22px
            60px;
    }

    .budania-slider__title {
        font-size: clamp(27px, 7.5vw, 34px);

        line-height: 1.17;

        margin-bottom: 15px;
    }

    .budania-slider__title::after {
        width: 46px;

        margin-top: 12px;
    }

    .budania-slider__description {
        font-size: 14px;

        line-height: 1.65;

        margin-bottom: 19px;
    }

    .budania-slider__button {
        min-height: 45px;

        padding: 11px 17px;

        font-size: 13px;
    }

    .budania-slider__arrow {
        --bs-arrow-size: 32px;

        font-size: 12px;
    }

    .budania-slider__arrow--prev {
        left: 6px;
    }

    .budania-slider__arrow--next {
        right: 6px;
    }

    .budania-slider__dots {
        bottom: 10px;

        gap: 7px;

        padding: 7px 10px;
    }
}


/* =======================================================
   20. EXTRA SMALL MOBILE DEVICES
======================================================= */

@media (max-width: 360px) {

    .budania-slider__image {
        height: 310px;
    }

    .budania-slider__overlay {
        padding:
            30px
            19px
            55px;
    }

    .budania-slider__title {
        font-size: 26px;
    }

    .budania-slider__description {
        font-size: 13px;

        line-height: 1.6;
    }

    .budania-slider__button {
        min-height: 43px;

        padding: 10px 14px;

        font-size: 12px;
    }

    .budania-slider__arrow {
        --bs-arrow-size: 29px;
    }
}


/* =======================================================
   21. ULTRAWIDE SCREEN SUPPORT
======================================================= */

@media (min-width: 2000px) {

    .budania-slider__image {
        height: min(38vw, 850px);
    }

    .budania-slider__overlay {
        padding-left: max(120px, calc((100vw - 1600px) / 2));
        padding-right: max(120px, calc((100vw - 1600px) / 2));
    }

    .budania-slider__content {
        max-width: 900px;
    }
}


/* =======================================================
   22. ANIMATIONS
======================================================= */

@keyframes budaniaSliderTextIn {

    from {
        opacity: 0;

        transform: translateY(22px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}


@keyframes budaniaSliderButtonIn {

    from {
        opacity: 0;

        transform: translateY(16px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}


/* =======================================================
   23. ACCESSIBILITY — REDUCED MOTION
======================================================= */

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

    .budania-slider *,
    .budania-slider *::before,
    .budania-slider *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

    .budania-slider__slide.is-active .budania-slider__image {
        transform: none;
    }
}


/* =======================================================
   24. ACCESSIBILITY — HIGH CONTRAST
======================================================= */

@media (prefers-contrast: more) {

    .budania-slider__title,
    .budania-slider__description {
        text-shadow: 0 1px 3px #000000;
    }

    .budania-slider__button {
        border: 2px solid var(--bs-white);
    }

    .budania-slider__arrow {
        border: 2px solid var(--bs-white);
    }
}


/* =======================================================
   25. PREVENT UNWANTED ASTRA THEME INTERFERENCE
======================================================= */

.budania-slider h2.budania-slider__title {
    color: var(--bs-white);

    font-family: inherit;
}


.budania-slider p.budania-slider__description {
    color: var(--bs-muted);

    font-family: inherit;
}


.budania-slider a.budania-slider__button {
    text-decoration: none;
}


.budania-slider button {
    font-family: inherit;

    text-transform: none;
}


/* =======================================================
   26. FINAL LAYOUT SAFEGUARDS
======================================================= */

.budania-slider,
.budania-slider__track,
.budania-slider__slide,
.budania-slider__picture,
.budania-slider__image {
    box-sizing: border-box;
}


.budania-slider__slide:not(.is-active) {
    user-select: none;
}


/* Avoid horizontal overflow from slider content */

.budania-slider__title,
.budania-slider__description,
.budania-slider__button {
    overflow-wrap: anywhere;

    word-wrap: break-word;
}


/* Keep slider controls above the image */

.budania-slider__arrow,
.budania-slider__dots {
    z-index: 5;
}
/* =========================================================
   BUDANIA IAS — HOMEPAGE SLIDER SPACING & LIGHT THEME FIX
========================================================= */

/* Remove extra space above the homepage content */
body.home,
body.front-page {
    margin-top: 0 !important;
}

/* Keep the homepage content directly below the header */
body.home .site-main,
body.front-page .site-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Slider wrapper: remove unwanted gaps */
.budania-home-slider-section {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: #f4f7fb;
    overflow: hidden;
}

/* Slider container */
.budania-slider {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #f4f7fb;
    color: #142b49;
}

/* Keep the banner aligned with the top of the slider */
.budania-slider__track {
    margin-top: 0 !important;
}

/* Make slider controls match the light website theme */
.budania-slider__arrow {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #12345a !important;
    border: 1px solid #dce5ef !important;
    box-shadow: 0 3px 12px rgba(16, 45, 80, 0.12);
}

.budania-slider__arrow:hover {
    background: #12345a !important;
    color: #ffffff !important;
}

/* Light navigation dots */
.budania-slider__dot {
    background: #cbd5e1 !important;
    border: 1px solid #ffffff !important;
}

.budania-slider__dot.is-active {
    background: #d9ad55 !important;
}

/* Reduce dark overlays so the banner looks brighter */
.budania-slider__slide::before,
.budania-slider__slide::after {
    opacity: 0.15;
}

/* Responsive layout */
@media (max-width: 768px) {
    .budania-home-slider-section,
    .budania-slider {
        margin: 0 !important;
        padding: 0 !important;
    }

    .budania-slider {
        border-radius: 0 !important;
    }
}