/*
 * Home hero banner (.rs-banner-six) redesign to match the client's own
 * reference graphics (zld-plant-design.png / spin-flash-dryer-design.png):
 * a light, readable gradient panel over the left side of the photo instead
 * of plain white text over a busy image, navy body copy, and a colored
 * accent word per slide (green for the ZLD/sustainability slide, orange for
 * the Spin Flash Dryer slide) taken straight from those source graphics.
 *
 * Only .rs-banner-six is touched — other banner styles/pages are unaffected.
 */
:root {
    --rs-banner-navy: #14335C;
    --rs-banner-accent-green: #2E8B47;
    --rs-banner-accent-orange: #F17B21;
}

.rs-banner-six .rs-banner-bg-thumb {
    background-color: var(--rs-white);
}

/*
 * All three source photos (zld-plant.png, spin-flash-dryer.png,
 * spray-dryer.png) share the same 1671x941 ratio. Rather than fighting
 * "background-size: cover" (crops/zooms) vs "contain" (leaves gaps and
 * disconnects the photo from the text panel), size the section itself to
 * that exact ratio — then "cover" needs zero cropping and the photo fills
 * the section edge to edge, merged seamlessly with the gradient/text.
 * Only applied from the tablet-landscape breakpoint up, where the photo is
 * actually visible beside the text column; below that the text stacks full
 * width over the photo and a fixed, content-driven height works better.
 */
@media only screen and (min-width: 992px) {
    .rs-banner-six .rs-banner-item-wrapper {
        aspect-ratio: 1671 / 941;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        align-items: center;
    }
}

@media only screen and (max-width: 991px) {
    .rs-banner-six .rs-banner-item-wrapper {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .rs-banner-six .rs-banner-bg-thumb {
        background-size: cover;
        background-position: center center;
    }
}

.rs-banner-six .rs-banner-bg-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.95) 34%,
            rgba(255, 255, 255, 0.65) 52%,
            rgba(255, 255, 255, 0.12) 68%,
            rgba(255, 255, 255, 0) 80%);
}

@media only screen and (max-width: 767px) {
    .rs-banner-six .rs-banner-bg-thumb::before {
        background: linear-gradient(90deg,
                rgba(255, 255, 255, 0.98) 0%,
                rgba(255, 255, 255, 0.95) 55%,
                rgba(255, 255, 255, 0.55) 80%,
                rgba(255, 255, 255, 0.25) 100%);
    }
}

.rs-banner-six .rs-banner-subtitle {
    color: var(--rs-banner-navy);
    gap: 10px;
}

.rs-banner-six .rs-banner-subtitle-bar {
    display: inline-block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--rs-banner-navy);
}

.rs-banner-six .rs-banner-title {
    color: var(--rs-banner-navy);
    font-size: 72px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.12;
}

@media only screen and (max-width: 1600px) {
    .rs-banner-six .rs-banner-title {
        font-size: 62px;
    }
}

@media only screen and (max-width: 1199px) {
    .rs-banner-six .rs-banner-title {
        font-size: 52px;
    }
}

@media only screen and (max-width: 767px) {
    .rs-banner-six .rs-banner-title {
        font-size: 40px;
    }
}

@media only screen and (max-width: 480px) {
    .rs-banner-six .rs-banner-title {
        font-size: 32px;
    }
}

.rs-banner-six .rs-banner-stroke-text {
    -webkit-text-fill-color: currentColor;
    -webkit-text-stroke-width: 0;
    color: var(--rs-banner-navy);
    padding-inline-start: 0;
}

.rs-banner-item-wrapper.has-accent-green .rs-banner-stroke-text {
    color: var(--rs-banner-accent-green);
}

.rs-banner-item-wrapper.has-accent-orange .rs-banner-stroke-text {
    color: var(--rs-banner-accent-orange);
}

.rs-banner-item-wrapper.has-accent-blue .rs-banner-stroke-text {
    color: var(--rs-theme-light-blue);
}

.rs-banner-six .rs-banner-descrip p {
    color: #45526A;
}

.rs-banner-six .rs-play-btn.has-transparent-btn {
    background: var(--rs-banner-navy);
    border: 1px solid var(--rs-banner-navy);
    color: var(--rs-white);
}

.rs-banner-item-wrapper.has-accent-green .rs-play-btn.has-transparent-btn:hover {
    background: var(--rs-banner-accent-green);
    border-color: var(--rs-banner-accent-green);
}

.rs-banner-item-wrapper.has-accent-orange .rs-play-btn.has-transparent-btn:hover {
    background: var(--rs-banner-accent-orange);
    border-color: var(--rs-banner-accent-orange);
}

.rs-banner-six .rs-rotate-btn .rs-text-circle span {
    color: var(--rs-banner-navy);
}

.rs-banner-six .rs-banner-navigation .rs-swiper-btn {
    background: var(--rs-banner-navy);
    border-color: var(--rs-banner-navy);
    color: var(--rs-white);
}