/* ------------------------------------------ */
/* 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;
}