/* Featured Image Hover Zoom Effect - Works with Default setting */

/* Target the background layer */
.e-loop-item .elementor-element.elementor-element-34d7c915:not(.elementor-motion-effects-element-type-background),
.e-loop-item .elementor-element.elementor-element-34d7c915 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    overflow: hidden !important;
    position: relative !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transition: background-size 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Base state - start at 140% to ensure it covers */
.e-loop-item .elementor-element.elementor-element-34d7c915:not(.elementor-motion-effects-element-type-background),
.e-loop-item .elementor-element.elementor-element-34d7c915 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-size: 140% !important;
}

/* Hover zoom effect - zoom in further */
.e-loop-item:hover .elementor-element.elementor-element-34d7c915:not(.elementor-motion-effects-element-type-background),
.e-loop-item:hover .elementor-element.elementor-element-34d7c915 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-size: 160% !important;
}





/* ------------------------------------------ *//* ------------------------------------------ */
.card-title {
    position: relative;
    display: inline-block;
}

.card-title:after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0%;
    height: 1px;
    background: #ffffff;
    transition: width 0.35s ease;
}

.card:hover .card-title:after {
    width: 100%;
}
.card:hover .ico {
    display: block;
}
.ico{display:none;}

/* ------------------------------------------ */
/* Load Noto Kufi Arabic from Google Fonts    */
/* ------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300;400;500;600;700&display=swap');


/* ------------------------------------------ */
/* Apply Noto Kufi only to text elements      */
/* on Arabic pages to avoid layout issues     */
/* ------------------------------------------ */
/* Add your actual English font name instead of YourEnglishFont if you use one 
   (e.g. 'Poppins', 'Roboto', 'Open Sans', etc.) */
html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[lang^="ar"] h3,
html[lang^="ar"] h4,
html[lang^="ar"] h5,
html[lang^="ar"] h6,
html[lang^="ar"] p,
html[lang^="ar"] span,
html[lang^="ar"] a,
html[lang^="ar"] li,
html[lang^="ar"] .elementor-heading-title,
html[lang^="ar"] .elementor-widget-text-editor,
html[lang^="ar"] .elementor-button,
html[lang^="ar"] .elementor-divider__text.elementor-divider__element {
    font-family: 'Noto Kufi Arabic', 'YourEnglishFont', sans-serif !important;
}

/* If you don't know your English font, you can leave only this:
   font-family: 'Noto Kufi Arabic', sans-serif !important; */


/* ------------------------------------------ */
/* Your existing CSS (leave as is)            */
/* ------------------------------------------ */
.card-title {
    position: relative;
    display: inline-block;
}

.card-title:after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0%;
    height: 1px;
    background: #ffffff;
    transition: width 0.35s ease;
}

.card:hover .card-title:after {
    width: 100%;
}

.card-title-2:after {
    background: black !important;
}

@media (max-width: 2500px) {
    .elementskit-image-comparison img {
        height:386px !important; 
        object-fit: cover;
    }
}

@media (max-width: 480px) {
    .elementskit-image-comparison {
        height:220px !important; 
    }

    .elementskit-image-comparison img {
        height:220px !important; 
        object-fit: cover;
    }
}

.card-title-3 {
    position: relative;
    display: inline-block;
}

.card-title-3::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0%;
    height: 1px;
    background: #ffffff;
    transition: width 0.35s ease;
}

.card-title-3:hover::after {
    width: 100%;
}

/* Only target the fade slider */
.real-fade .swiper-wrapper { 
    transform: none !important; 
}

.real-fade .swiper-slide {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;

    pointer-events: none;
    opacity: 1 !important;
}

.real-fade .swiper-slide-active {
    position: relative !important;
    pointer-events: auto;
}

/* Fade ONLY the background image */
.real-fade .hero-slide-bg {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.real-fade .swiper-slide-active .hero-slide-bg {
    opacity: 1;
    animation: heroFadeZoom 6s ease-out forwards;
}

@keyframes heroFadeZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

/* Arrows fade */
.real-fade .elementor-swiper-button-prev,
.real-fade .elementor-swiper-button-next {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}