/* Beranda — slider banner responsif, utuh di mobile */
.slider-area {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

@media (max-width: 991.98px) {
    .slider-area .single-slider.slider-height-1 {
        height: auto !important;
        min-height: 0 !important;
    }

    .slider-area .slider-active.owl-carousel .owl-stage-outer,
    .slider-area .slider-active.owl-carousel .owl-stage,
    .slider-area .slider-active.owl-carousel .owl-item {
        height: auto !important;
        min-height: 0 !important;
    }

    .slider-area .slider-bg-media {
        background: linear-gradient(180deg, #003d22 0%, #006838 100%);
    }

    .slider-area .slider-bg-img {
        object-fit: contain !important;
        object-position: center center;
        width: 100%;
        height: 100%;
    }

    .slider-area .slider-content-wrap {
        align-items: flex-end;
        padding-bottom: 12px;
    }

    .slider-area .slider-content {
        padding-top: 0 !important;
    }

    .slider-area .single-slider.default-overlay::before {
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.35) 42%,
            rgba(0, 0, 0, 0.08) 100%
        );
        opacity: 1;
    }

    .slider-area .slider-overlay2-1.default-overlay::before,
    .slider-area .slider-overlay2-2.default-overlay::before,
    .slider-area .slider-overlay2-3.default-overlay::before {
        opacity: 1;
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.3) 45%,
            rgba(0, 0, 0, 0.05) 100%
        );
    }
}

@media (max-width: 767.98px) {
    .slider-area .slider-content h1 {
        font-size: clamp(20px, 5.5vw, 28px);
        line-height: 1.2;
    }

    .slider-area .slider-content p {
        font-size: clamp(12px, 3.4vw, 15px);
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .slider-area .slider-btn .default-btn {
        padding: 10px 18px;
        font-size: 12px;
        margin-bottom: 6px;
    }

    .slider-area .slider-content .col-xl-9 {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .slider-area .slider-content h1 {
        font-size: clamp(26px, 4vw, 36px);
    }
}