@layer inherited {
    .mkdf-dual-image-carousel {
        font-family: Nunito, Helvetica, sans-serif;

    }
}

@layer component {
    .mkdf-dual-image-carousel * {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
        margin: 0;
        padding: 0;
    }

    .mkdf-dual-image-carousel a {
        color: inherit;
        text-decoration: none !important;
    }

    .mkdf-dual-image-carousel h2 {
        margin-top: 0;
        margin-bottom: 0.5rem;
        font-weight: 500;
        line-height: 1.2;
        font-size: calc(1.325rem + 0.9vw);
    }

    @media (width>=1200px) {
        .mkdf-dual-image-carousel h2 {
            font-size: 2rem;
        }
    }

    .mkdf-dual-image-carousel .swiper-slide .swiper_desc {
        opacity: 0;
        visibility: hidden;
        transition:
            opacity 0.3s,
            visibility 0.3s;
    }

    .mkdf-dual-image-carousel .swiper-slide-active .swiper_desc {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .mkdf-dual-image-carousel .swiper-slide-prev .swiper_desc,
    .mkdf-dual-image-carousel .swiper-slide-next .swiper_desc {
        opacity: 0;
        visibility: hidden !important;
    }

    .mkdf-dual-image-carousel .swiper-pagination-horizontal {
        counter-reset: counter;
        text-align: center;
        z-index: 10;
        justify-content: center;
        align-items: center;
        transition: opacity 0.3s;
        display: flex;
        position: relative;
        transform: translateZ(0);
    }

    .mkdf-dual-image-carousel.swiper-container .swiper-pagination-bullets {
        background-color: #0000 !important;
        top: 0 !important;
        bottom: auto !important;
        width: 100%;
        left: 0 !important;
    }

    .mkdf-dual-image-carousel.swiper-container .swiper-pagination-bullets:before {
        content: "";
        background-color: #e5e5e5;
        width: 100%;
        height: 1px;
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
    }

    .mkdf-dual-image-carousel.swiper-container .swiper-pagination-bullets:after {
        content: "/";
        letter-spacing: 0.1em;
        color: #000;
        font-family: Nunito, sans-serif;
        font-size: 14px;
        font-weight: 700;
        display: block;
        position: absolute;
        top: -20px;
        left: 20px;
    }

    .mkdf-dual-image-carousel.swiper-container .swiper-pagination-bullets .swiper-pagination-bullet {
        z-index: 1;
        opacity: 1 !important;
        cursor: pointer;
        background-color: #0000 !important;
        border-radius: 0 !important;
        width: 100% !important;
        height: 3px !important;
        margin: 0 !important;
        padding: 3px 0 !important;
        overflow: hidden;
    }

    .mkdf-dual-image-carousel.swiper-container .swiper-pagination-bullets .swiper-pagination-bullet:after,
    .mkdf-dual-image-carousel.swiper-container .swiper-pagination-bullets .swiper-pagination-bullet:before {
        letter-spacing: 0.1em;
        content: counter(counter, decimal-leading-zero);
        color: #000;
        pointer-events: none;
        font-family: Nunito, sans-serif;
        font-size: 14px;
        font-weight: 700;
        position: absolute;
        top: -20px;
    }

    .mkdf-dual-image-carousel.swiper-container .swiper-pagination-bullets .swiper-pagination-bullet:before {
        color: #bebbbf;
        counter-increment: counter;
        visibility: hidden;
        left: 30px;
    }

    .mkdf-dual-image-carousel.swiper-container .swiper-pagination-bullets .swiper-pagination-bullet:last-child:before {
        visibility: visible;
    }

    .mkdf-dual-image-carousel.swiper-container .swiper-pagination-bullets .swiper-pagination-bullet-active {
        background-color: #fe0000 !important;
    }

    .mkdf-dual-image-carousel.swiper-container .swiper-pagination-bullets .swiper-pagination-bullet:after {
        display: none;
        left: 0;
    }

    .mkdf-dual-image-carousel.swiper-container .swiper-pagination-bullets .swiper-pagination-bullet-active:after {
        display: block;
    }

    @media (width>=800px) {
        .mkdf-dual-image-carousel-home {
            /* margin-top: 125px; */
        }
    }

    .mkdf-dual-image-carousel .swiper-wrapper {
        z-index: 1;
        box-sizing: content-box;
        width: 100%;
        height: 100%;
        transition-property: transform;
        display: flex;
        position: relative;
        transform: translateZ(0);
    }

    .Home_swiper_carousel__hvKsy,
    .Home_overlay_image__aGZhg {
        padding-bottom: 50%;
        position: relative;
    }

    .Home_overlay_image__aGZhg {
        z-index: 999;
        margin-top: -40%;
    }

    .Home_parallax_carousel_description__vALp2 {
        text-align: center;
        margin-top: 1.5rem;
    }

    .mkdf-dual-image-carousel .Home_parallax_carousel_description__vALp2 h2 {
        color: #000;
        font-family: Anton;
        font-size: 36px;
    }

    .mkdf-dual-image-carousel .Home_parallax_carousel_description__vALp2 p {
        letter-spacing: 2px;
    }

    .Home_parallax_carousel__pagination__A2zTy {
        width: 45.2% !important;
        margin: 40px auto 0 !important;
        position: relative;
    }

    @media (width<=639px) {
        .Home_parallax_carousel__pagination__A2zTy {
            width: 80%;
        }

        .Home_swiper_carousel__hvKsy {
            padding-bottom: 56.25%;
        }
    }

    .mkdf-dual-image-carousel .swiper {
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        list-style: none;
        overflow: hidden;
    }

    .mkdf-dual-image-carousel .swiper,
    .mkdf-dual-image-carousel .swiper-wrapper {
        z-index: 1;
        position: relative;
    }

    .mkdf-dual-image-carousel .swiper-wrapper {
        box-sizing: content-box;
        width: 100%;
        height: 100%;
        transition-property: transform;
        display: flex;
        transform: translateZ(0);
    }

    .mkdf-dual-image-carousel .swiper-pointer-events {
        touch-action: pan-y;
    }

    .mkdf-dual-image-carousel .swiper-slide {
        flex-shrink: 0;
        width: 653px !important;
        height: 100%;
        transition-property: transform;
        position: relative;
        background-color: transparent !important;
        /* Ensure no background */
    }

    @media (max-width: 768px) {
        .mkdf-dual-image-carousel .swiper-slide {
            width: 100% !important;
        }
    }

    .mkdf-dual-image-carousel .swiper-backface-hidden .swiper-slide {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
    }
}