.banner {
    position: relative;
}

.banner .scroll_down {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-animation: banner_scroll 1.5s 0s infinite;
    animation: banner_scroll 1.5s 0s infinite;
    z-index: 10;
}

@media (max-width: 1440px) {
    .banner .scroll_down {
        top: 50%;
        transform: translateY(-50%);
    }
}

@media (max-width: 1024px) {
    .banner .scroll_down {
        top: 40%;
    }
}

@media (max-width: 767px) {
    .banner .scroll_down {
        display: none;
    }
}

.banner .scroll_down img {
    max-width: 100%;
}

@media (max-width: 1440px) {
    .banner .scroll_down img {
        transform: scale(.8);
    }
}

@media (max-width: 767px) {
    .banner .scroll_down img {
        transform: none;
    }
}

@media (max-width: 480px) {
    .banner .scroll_down img {
        transform: scale(.8);
    }
}

.banner .splide__slide {
    width: 100%;
}

.banner .splide__slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* Guard: no unintended backgrounds/borders to avoid top white stripe */
.banner,
.banner .splide,
.banner .splide__track,
.banner .splide__arrows { background: transparent; border: 0; }

/* Ensure arrows position against the slider root */
.banner .splide {
    position: relative;
}

/* --- Hero banner: Splide arrows restyle to match theme --- */
.banner .splide__arrows { display: none !important; }
.banner .splide__arrows {
    /* Overlay the slider, do not affect layout */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
    pointer-events: none; /* allow clicks only on buttons */
    z-index: 5;
    background: transparent;
}

.banner .splide__arrow {
    pointer-events: all;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: linear-gradient(135deg, #003D96 0%, #2F6EEA 100%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
    opacity: 0.88;
    transition: all .25s ease;
}

.banner .splide__arrow:hover,
.banner .splide__arrow:focus {
    outline: none;
    opacity: 1;
    transform: translateY(-50%) scale(1.04);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32);
}

.banner .splide__arrow--prev { left: 22px; }
.banner .splide__arrow--next { right: 22px; }

.banner .splide__arrow svg {
    width: 22px !important;
    height: 22px !important;
    display: block;
    margin: 0 auto;
    fill: #ffffff;
}

/* Ensure correct arrow directions */
.banner .splide__arrow--prev svg { transform: rotate(180deg); }
.banner .splide__arrow--next svg { transform: none; }

/* Subtle idle state until hover on desktop */
@media (hover: hover) and (pointer: fine) {
    .banner .splide__arrow { opacity: 0.0; }
    .banner:hover .splide__arrow { opacity: 0.88; }
}

/* Tablet tweaks */
@media (max-width: 1199.98px) {
    .banner .splide__arrow { width: 52px; height: 52px; }
    .banner .splide__arrow--prev { left: 16px; }
    .banner .splide__arrow--next { right: 16px; }
}

/* Mobile: keep consistent spacing or hide if Splide disables arrows */
@media (max-width: 767.98px) {
    .banner .splide__arrow { width: 46px; height: 46px; }
    .banner .splide__arrow svg { width: 20px !important; height: 20px !important; }
}

@keyframes banner_scroll {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
    to {
        transform: translateY(0);
    }
}

@-webkit-keyframes banner_scroll {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
    to {
        transform: translateY(0);
    }
}