.elementor-163 .elementor-element.elementor-element-07c2263{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-163 .elementor-element.elementor-element-5ecdb1d{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-163 .elementor-element.elementor-element-66415e3{--e-image-carousel-slides-to-show:1;}.elementor-163 .elementor-element.elementor-element-09b7297{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-163 .elementor-element.elementor-element-366ebea{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for container, class: .elementor-element-5ecdb1d *//* =====================================================
   CAREZONE HERO - ELEMENTOR IMAGE CAROUSEL
===================================================== */

.cz-hero {
    --cz-red: #ed1c24;

    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    position: relative;

    overflow: hidden;

    background: #111;
}


/* =====================================================
   REMOVE ELEMENTOR SPACING
===================================================== */

.cz-hero,
.cz-hero .elementor-widget-container,
.cz-hero .swiper,
.cz-hero .swiper-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}


/* =====================================================
   SLIDES
===================================================== */

.cz-hero .swiper-slide {
    overflow: hidden;
}

.cz-hero .swiper-slide a {
    display: block;
    width: 100%;
}

.cz-hero .swiper-slide-image {
    display: block;

    width: 100% !important;
    max-width: none !important;

    aspect-ratio: 12 / 5;

    object-fit: cover;
    object-position: center;

    margin: 0 !important;

    user-select: none;
    -webkit-user-select: none;

    transition:
        transform .8s cubic-bezier(.2,.8,.2,1);
}


/* subtle zoom */

.cz-hero .swiper-slide-active .swiper-slide-image {
    transform: scale(1.015);
}


/* =====================================================
   ARROWS
===================================================== */

.cz-hero .elementor-swiper-button {
    width: 52px !important;
    height: 52px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border:
        1px solid
        rgba(255,255,255,.28);

    border-radius: 50%;

    background:
        rgba(0,0,0,.38);

    color: #fff !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    font-size: 20px !important;

    opacity: 1 !important;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.cz-hero .elementor-swiper-button:hover {
    background: var(--cz-red);

    border-color: var(--cz-red);
}

.cz-hero .elementor-swiper-button:active {
    transform: translateY(-50%) scale(.92);
}


/* Previous */

.cz-hero .elementor-swiper-button-prev {
    left: 25px !important;
}


/* Next */

.cz-hero .elementor-swiper-button-next {
    right: 25px !important;
}


/* icon size */

.cz-hero .elementor-swiper-button svg {
    width: 20px !important;
    height: 20px !important;

    fill: currentColor;
}


/* =====================================================
   PAGINATION
===================================================== */

.cz-hero .swiper-pagination {
    width: auto !important;

    left: 50% !important;
    right: auto !important;
    bottom: 20px !important;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 7px 10px;

    border-radius: 100px;

    background:
        rgba(0,0,0,.28);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* normal dot */

.cz-hero .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;

    margin: 0 !important;

    border-radius: 100px;

    background:
        rgba(255,255,255,.65) !important;

    opacity: 1 !important;

    transition:
        width .3s ease,
        background .3s ease;
}


/* active */

.cz-hero .swiper-pagination-bullet-active {
    width: 28px !important;

    background:
        var(--cz-red) !important;
}


/* =====================================================
   DESKTOP HOVER
===================================================== */

@media (hover: hover) {

    .cz-hero .elementor-swiper-button {
        opacity: .75 !important;
    }

    .cz-hero:hover .elementor-swiper-button {
        opacity: 1 !important;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .cz-hero .swiper-slide-image {
        aspect-ratio: 12 / 5;

        object-fit: contain;

        background: #111;
    }

    .cz-hero .elementor-swiper-button {
        width: 38px !important;
        height: 38px !important;

        font-size: 16px !important;
    }

    .cz-hero .elementor-swiper-button-prev {
        left: 9px !important;
    }

    .cz-hero .elementor-swiper-button-next {
        right: 9px !important;
    }

    .cz-hero .swiper-pagination {
        bottom: 8px !important;

        padding: 5px 8px;

        gap: 5px;
    }

    .cz-hero .swiper-pagination-bullet {
        width: 6px !important;
        height: 6px !important;
    }

    .cz-hero .swiper-pagination-bullet-active {
        width: 20px !important;
    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .cz-hero .swiper-slide-image {
        transition: none;
        transform: none !important;
    }

}/* End custom CSS */