.elementor-309 .elementor-element.elementor-element-7189706{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-309 .elementor-element.elementor-element-4e2fe93{--display:flex;--margin-top:15px;--margin-bottom:15px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-309 .elementor-element.elementor-element-fae42f0{--swiper-slides-to-display:3;--swiper-slides-gap:10px;--arrow-prev-left-align:0%;--arrow-prev-translate-x:0px;--arrow-prev-left-position:0px;--arrow-prev-top-align:50%;--arrow-prev-translate-y:-50%;--arrow-prev-top-position:0px;--arrow-next-right-align:0%;--arrow-next-translate-x:0%;--arrow-next-right-position:0px;--arrow-next-top-align:50%;--arrow-next-translate-y:-50%;--arrow-next-top-position:0px;}.elementor-309 .elementor-element.elementor-element-fae42f0 .swiper-slide > .elementor-element{height:100%;}@media(max-width:1366px){.elementor-309 .elementor-element.elementor-element-fae42f0{--swiper-slides-to-display:3;}}@media(max-width:1024px){.elementor-309 .elementor-element.elementor-element-fae42f0{--swiper-slides-to-display:2;}}@media(max-width:767px){.elementor-309 .elementor-element.elementor-element-fae42f0{--swiper-slides-to-display:1;}}/* Start custom CSS for loop-carousel, class: .elementor-element-fae42f0 *//* --- 1. CAROUSEL SPACING & DRAG CURSOR --- */
.elementor-309 .elementor-element.elementor-element-fae42f0 .swiper-container {
    padding-bottom: 40px !important;
    cursor: grab; /* Shows users they can drag it */
}

.elementor-309 .elementor-element.elementor-element-fae42f0 .swiper-container:active {
    cursor: grabbing;
}

/* --- 2. THE IMAGE CONTAINER --- */
/* Targets the dynamic featured image widget inside the loop */
.elementor-309 .elementor-element.elementor-element-fae42f0 .elementor-widget-theme-post-featured-image {
    overflow: hidden !important;
    border-radius: 0px !important;
    margin-bottom: 20px !important;
    background-color: #111111 !important;
}

/* --- 3. THE IMAGE & CINEMATIC HOVER --- */
.elementor-309 .elementor-element.elementor-element-fae42f0 .elementor-widget-theme-post-featured-image img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 4 / 5 !important; /* Forces perfect portrait ratio */
    object-fit: cover !important;
    
    /* Hardware acceleration and Base Grayscale */
    transform: scale(1) translateZ(0) !important;
    filter: grayscale(100%) contrast(1.1) brightness(0.9) !important;
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease !important;
    will-change: transform, filter;
}

/* Hover: Zoom and reveal full color */
.elementor-309 .elementor-element.elementor-element-fae42f0 .swiper-slide:hover .elementor-widget-theme-post-featured-image img {
    transform: scale(1.08) translateZ(0) !important;
    filter: grayscale(0%) contrast(1) brightness(1) !important;
}

/* --- 4. TYPOGRAPHY HOVER EFFECT --- */
.elementor-309 .elementor-element.elementor-element-fae42f0 .elementor-widget-theme-post-title a {
    transition: opacity 0.3s ease !important;
}

.elementor-309 .elementor-element.elementor-element-fae42f0 .swiper-slide:hover .elementor-widget-theme-post-title a {
    opacity: 0.6 !important;
}

/* --- 5. HIDE UGLY PAGINATION DOTS (Optional but recommended for luxury) --- */
.elementor-309 .elementor-element.elementor-element-fae42f0 .swiper-pagination-bullet {
    display: none !important; 
}/* End custom CSS */