.elementor-22172 .elementor-element.elementor-element-695db8e{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-22172 .elementor-element.elementor-element-695db8e.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-22172 .elementor-element.elementor-element-3977643 > .elementor-widget-container{margin:21px 21px 21px 21px;padding:-5px -5px -5px -5px;}.elementor-22172 .elementor-element.elementor-element-3977643.elementor-element{--flex-grow:0;--flex-shrink:1;}/* Start custom CSS for image-carousel, class: .elementor-element-3977643 *//* =========================================
   ELEMENTOR IMAGE CAROUSEL
   Square / Full Quality / Soft Pink Shadow
========================================= */

.carousel-square-pink {
    width: 100%;
    background: transparent !important;

    --radius: 18px;
    --pink-shadow:
        0 12px 35px rgba(231, 132, 177, 0.20);
}


/* =========================================
   WRAPPER
========================================= */

.carousel-square-pink
.elementor-image-carousel-wrapper {
    position: relative;

    width: 100%;

    padding: 20px 45px 45px;

    background: transparent !important;
}


/* =========================================
   SWIPER
========================================= */

.carousel-square-pink .swiper {
    width: 100%;

    overflow: hidden;

    background: transparent !important;
}


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

.carousel-square-pink .swiper-slide {
    position: relative;

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

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: var(--radius);

    background: #fff;

    /* هیچ کاهش کیفیت ظاهری */
    opacity: 1 !important;
    filter: none !important;

    transform: scale(.88);

    box-shadow: var(--pink-shadow);

    transition:
        transform .4s ease,
        box-shadow .4s ease;

    will-change: transform;
}


/* =========================================
   ACTIVE CENTER
========================================= */

.carousel-square-pink
.swiper-slide-active {

    opacity: 1 !important;

    filter: none !important;

    transform: scale(1);

    z-index: 5;

    box-shadow:
        0 16px 42px rgba(231, 132, 177, 0.25);
}


/* =========================================
   IMAGE
========================================= */

.carousel-square-pink
.swiper-slide-image {

    display: block;

    width: 100% !important;
    height: 100% !important;

    /*
       عکس کل کادر را پر می‌کند
       اگر تصاویرت مربعی باشند هیچ برشی ندارند
    */

    object-fit: cover;

    object-position: center center;

    border-radius: var(--radius);

    /* جلوگیری از افکت کاهش کیفیت */
    opacity: 1 !important;

    filter: none !important;

    /*
       هیچ transform دائمی روی عکس نداریم
       تا کیفیت حالت عادی مثل hover بماند
    */

    transform: none !important;

    image-rendering: auto;
}


/* =========================================
   جلوگیری از افکت تار / Overlay
========================================= */

.carousel-square-pink
.swiper-slide::before,
.carousel-square-pink
.swiper-slide::after {

    content: none !important;

}


/* =========================================
   HOVER
   فقط سایه کمی بیشتر می‌شود
   نه اینکه کیفیت تصویر تغییر کند
========================================= */

.carousel-square-pink
.swiper-slide:hover {

    box-shadow:
        0 18px 45px rgba(231, 132, 177, 0.30);

}


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

.carousel-square-pink
.elementor-swiper-button {

    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    background: #fff;

    color: #333;

    box-shadow:
        0 7px 22px rgba(231, 132, 177, 0.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.carousel-square-pink
.elementor-swiper-button:hover {

    transform: scale(1.08);

    box-shadow:
        0 10px 28px rgba(231, 132, 177, 0.28);

}


/* =========================================
   DOTS
========================================= */

.carousel-square-pink
.swiper-pagination {

    bottom: 5px !important;

}


.carousel-square-pink
.swiper-pagination-bullet {

    width: 8px;
    height: 8px;

    margin: 0 4px !important;

    opacity: 1 !important;

    background: #d9d9d9;

    transition:
        width .25s ease,
        background .25s ease;

}


.carousel-square-pink
.swiper-pagination-bullet-active {

    width: 22px;

    border-radius: 10px;

    background: #e59ab9;

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1024px) {

    .carousel-square-pink
    .elementor-image-carousel-wrapper {

        padding-left: 35px;
        padding-right: 35px;

    }

    .carousel-square-pink
    .swiper-slide {

        transform: scale(.92);

    }

    .carousel-square-pink
    .swiper-slide-active {

        transform: scale(1);

    }

}


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

@media (max-width: 767px) {

    .carousel-square-pink
    .elementor-image-carousel-wrapper {

        padding: 10px 30px 38px;

    }

    .carousel-square-pink
    .swiper-slide {

        aspect-ratio: 1 / 1;

        transform: scale(.95);

    }

    .carousel-square-pink
    .swiper-slide-active {

        transform: scale(1);

    }

    .carousel-square-pink
    .elementor-swiper-button {

        width: 35px;
        height: 35px;

    }

}


/* =========================================
   REDUCE MOTION
========================================= */

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

    .carousel-square-pink
    * {

        transition: none !important;

    }

}/* End custom CSS */