@charset "UTF-8";

/* ══════════════════════════════════════════════════════════════
   Company Why New — Swiper Header Styles
   Matches the carousel .slider-header / .inner_slider look
   from style_Slider.css, adapted for the swiper-slide layout.
   ══════════════════════════════════════════════════════════════ */

/* ── Slide: full-viewport hero with relative positioning ── */
.swiper-slide-why {
    position: relative;
    overflow: hidden;
}

/* ── Text container: vertically centered, left-aligned ── */
.swiper-slide-why .why-header-outer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    z-index: 10;
    pointer-events: none;
}

.swiper-slide-why .why-header-inner {
    padding-left: 180px;
    padding-right: 40px;
    max-width: 100%;
    pointer-events: auto;
}

/* ── Header text: matches .slider-header base ── */
.swiper-slide-why .why-header-inner h3 {
    display: block;
    max-width: 1300px;
    white-space: normal;
    text-align: left;
    font-weight: bold;
    color: #ffffff;
    padding: 0;
    margin: 0;
    line-height: 1.15;
    font-size: 39px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.45);
    font-family: "Montserrat", "Roboto Slab", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   Mirrors style_Slider.css breakpoints for .slider-header
   ══════════════════════════════════════════════════════════════ */

/* ── 0–288px: Tiny phones ── */
@media (max-width: 288px) {
    .swiper-slide-why .why-header-inner {
        padding-left: 30px;
        padding-right: 20px;
    }
    .swiper-slide-why .why-header-inner h3 {
        font-size: 10px;
    }
}

/* ── 289–360px: Small phones ── */
@media (min-width: 289px) and (max-width: 360px) {
    .swiper-slide-why .why-header-inner {
        padding-left: 35px;
        padding-right: 20px;
    }
    .swiper-slide-why .why-header-inner h3 {
        font-size: 12px;
    }
}

/* ── 361–402px ── */
@media (min-width: 361px) and (max-width: 402px) {
    .swiper-slide-why .why-header-inner {
        padding-left: 40px;
        padding-right: 20px;
    }
    .swiper-slide-why .why-header-inner h3 {
        font-size: 14px;
    }
}

/* ── 403–479px ── */
@media (min-width: 403px) and (max-width: 479px) {
    .swiper-slide-why .why-header-inner {
        padding-left: 40px;
        padding-right: 20px;
    }
    .swiper-slide-why .why-header-inner h3 {
        font-size: 14px;
    }
}

/* ── 480–575px ── */
@media (min-width: 480px) and (max-width: 575px) {
    .swiper-slide-why .why-header-inner {
        padding-left: 50px;
        padding-right: 30px;
    }
    .swiper-slide-why .why-header-inner h3 {
        font-size: 18px;
    }
}

/* ── 576–639px ── */
@media (min-width: 576px) and (max-width: 639px) {
    .swiper-slide-why .why-header-inner {
        padding-left: 60px;
        padding-right: 30px;
    }
    .swiper-slide-why .why-header-inner h3 {
        font-size: 20px;
    }
}

/* ── 640–767px ── */
@media (min-width: 640px) and (max-width: 767px) {
    .swiper-slide-why .why-header-inner {
        padding-left: 70px;
        padding-right: 30px;
    }
    .swiper-slide-why .why-header-inner h3 {
        font-size: 22px;
    }
}

/* ── 768–991px: Tablets ── */
@media (min-width: 768px) and (max-width: 991px) {
    .swiper-slide-why .why-header-inner {
        padding-left: 100px;
        padding-right: 40px;
    }
    .swiper-slide-why .why-header-inner h3 {
        font-size: 24px;
    }
}

/* ── 992–1199px ── */
@media (min-width: 992px) and (max-width: 1199px) {
    .swiper-slide-why .why-header-inner {
        padding-left: 140px;
        padding-right: 40px;
    }
    .swiper-slide-why .why-header-inner h3 {
        font-size: 25px;
    }
}

/* ── 1200–1399px ── */
@media (min-width: 1200px) and (max-width: 1399px) {
    .swiper-slide-why .why-header-inner h3 {
        font-size: 27px;
        max-width: 1100px;
    }
}

/* ── 1400–1599px ── */
@media (min-width: 1400px) and (max-width: 1599px) {
    .swiper-slide-why .why-header-inner h3 {
        font-size: 36px;
        max-width: 1300px;
    }
}

/* ── 1600–1799px ── */
@media (min-width: 1600px) and (max-width: 1799px) {
    .swiper-slide-why .why-header-inner h3 {
        font-size: 36px;
        max-width: 1300px;
    }
}

/* ── 1800–1999px ── */
@media (min-width: 1800px) and (max-width: 1999px) {
    .swiper-slide-why .why-header-inner h3 {
        font-size: 39px;
        max-width: 1100px;
    }
}

/* ── 2000px+ ── */
@media (min-width: 2000px) {
    .swiper-slide-why .why-header-inner h3 {
        font-size: 39px;
        max-width: 1500px;
    }
}