.ibm-plex-sans-arabic-thin {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.ibm-plex-sans-arabic-extralight {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.ibm-plex-sans-arabic-light {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.ibm-plex-sans-arabic-regular {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex-sans-arabic-medium {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ibm-plex-sans-arabic-semibold {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.ibm-plex-sans-arabic-bold {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

        /* Base Styles & Reset */
        :root {
            --primary-color: #1b8354; /* Modern Violet */
            --dark-color: #161616;
            --bg-color: #ffffff;
            --text-main: #111827;
            --text-muted: #6b7280;
            --bs-border-color: #d2d6db;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-main);
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            overflow-x: hidden;
        }

        .text-primary-custom { color: var(--primary-color) !important; }
        .small-text { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0;}
        .max-w-700 { max-width: 700px; }
        .custom-progress-height { height: 4px; }
        .w-33 { width: 33%; }

        /* Custom Buttons */
        .btn-custom {
            height: 40px;
            padding: 0 24px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s ease;
        }
        .btn-primary-custom { background-color: var(--primary-color); color: white; }
        .btn-primary-custom:hover { background-color: #166A45 ; color: white; }
   
        .btn-outline-custom { background-color: white; border: 1px solid #d2d6db; color: #374151; }
        .btn-dark-custom { background-color: var(--dark-color); color: white; }
        .btn-dark-custom:hover { background-color: #111827; color: white;}
        .btn-white { background-color: white; color: var(--dark-color); }
        .btn-outline-dark-custom { background-color: transparent; border: 1px solid #d2d6db; color: var(--dark-color); }

        /* Navigation */
        .navbar { padding: 20px 0; }
        .logo { font-size: 1.5rem; font-weight: 800; color: #1b8354; display: flex; align-items: center; gap: 10px; }
        .logo-icon {
            background: var(--primary-color);
            color: white;
            width: 35px; height: 35px;
            display: flex; justify-content: center; align-items: center;
            border-radius: 50%; font-size: 1rem;
        }
        .nav-links-bg { background: #eef2ff; padding: 10px 30px; border-radius: 30px; }
        .nav-link { color: #4b5563; font-weight: 600; padding: 0 15px !important;}
        .lang-toggle { background: white; padding: 8px 15px; border-radius: 20px; font-weight: 700; cursor: pointer;}

        /* Hero Section */
        .hero { padding: 60px 0; }
        .top-badge p { font-size: 0.85rem; letter-spacing: 0.5px; color: var(--text-muted); max-width: 350px; font-weight: 500;}
        
        .avatars img {
            width: 45px; height: 45px; border-radius: 50%;
            border: 3px solid white; margin-right: -15px;
        }
        .avatars img:first-child { margin-right: 0; }

        .hero h1 { font-size: 3.5rem; line-height: 1.2; color: #111827; font-weight: 800; }

        /* Hero Image & Slider */
        .hero-image-container { position: relative; height: 600px; width: 100%; }
        .image-slider {
            width: 100%; height: 100%; position: absolute; top: 0; left: 0; /* Changed right to left for RTL */
            border-radius: 40px; overflow: hidden; z-index: 1;
        }
        .slides { display: flex; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
        .slide { flex: 0 0 100%; height: 100%; object-fit: cover; }

        /* Slider Controls */
        .slider-btn {
            position: absolute; top: 50%; transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(8px);
            border: none; width: 45px; height: 45px; border-radius: 50%;
            cursor: pointer; color: var(--primary-color); z-index: 5; opacity: 0; transition: all 0.3s ease;
        }
        .hero-image-container:hover .slider-btn { opacity: 1; }
        .slider-btn:hover { background: white; transform: translateY(-50%) scale(1.1); }
        .prev-btn { left: 20px; } /* Swapped for RTL */
        .next-btn { right: 20px; }  /* Swapped for RTL */

        .slider-dots { position: absolute; bottom: 25px; right: 30px; display: flex; gap: 8px; z-index: 5; } /* Moved to right */
        .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: all 0.3s ease; }
        .dot.active { background: var(--primary-color); width: 25px; border-radius: 5px; }

        /* Floating Elements */
        .floating-card {
            position: absolute; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
            padding: 15px 20px; border-radius: 20px; display: flex; align-items: center; gap: 15px; z-index: 10;
            transition: transform 0.1s ease-out; will-change: transform;
        }
        .card-top-start { top: 40px; left: -30px; } /* RTL adjustment */
        .card-bottom-end { bottom: 100px; right: -20px; max-width: 280px; flex-direction: column; align-items: flex-start; } /* RTL adjustment */
        .card-bottom-end img { width: 45px; height: 45px; border-radius: 50%; }

        .floating-tags {
            position: absolute; bottom: 30px; left: -20px; display: flex; flex-wrap: wrap; gap: 10px; z-index: 10; /* RTL adjustment */
            transition: transform 0.1s ease-out; will-change: transform;
        }
        .tag {
            background: rgba(255,255,255,0.6); backdrop-filter: blur(5px);
            color: #1b8354; font-weight: 600; padding: 8px 15px;
            border-radius: 20px; border: 1px solid rgba(255,255,255,0.8);
            font-size: 0.85rem; }

        /* Statistics */
        .statistics { background-color: #f8f9fa; border-radius: 30px; padding: 40px 0; margin: 40px 0; }
        .stat-item h2 { font-size: 2.5rem; color: #1b8354; font-weight: 800; margin-bottom: 5px; }
        .stat-item p { color: var(--text-muted); font-weight: 600; margin-bottom: 0;}

        /* About Section */
        .about-card { position: relative; border-radius: 30px; overflow: hidden; height: 400px; }
        .about-card img { width: 100%; height: 100%; object-fit: cover; }
        .about-card-content {
            position: absolute; bottom: 0; left: 0; width: 100%;
            background: linear-gradient(transparent, rgba(0,0,0,0.85)); padding: 30px; color: white;
        }
        .badge-custom { padding: 6px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; border: 1px solid currentColor; display: inline-block; margin-bottom: 10px; }
        .badge-filled { background: var(--primary-color); color: white; border: none; }
        .highlight { background-color: #f1f8f5; border-radius: 16px; }

        .fade-transition { transition: opacity 0.3s ease-in-out; }


/* Wizard Styles */
        .wizard-step {
            transition: opacity 0.4s ease, transform 0.4s ease;
            opacity: 0;
            transform: translateY(20px);
        }
        .wizard-step.active-step {
            opacity: 1;
            transform: translateY(0);
        }
        .bg-primary-custom { background-color: var(--primary-color) !important; }
        .cursor-pointer { cursor: pointer; }
        
        .aspect-card {
            transition: all 0.3s ease;
            background-color: #fff;
        }
        .aspect-card:hover {
            transform: translateY(-5px);
            border-color: var(--primary-color) !important;
            background-color: #f8f8fc;
        }

        .article-card img {
            border-radius: 15px;
            object-fit: cover;
            height: 200px;
            width: 100%;
        }
        
        .video-container {
            border-radius: 15px;
            overflow: hidden;
        }
/* Filter Buttons Styling */
        .filter-btn { transition: all 0.3s ease; }
        .filter-btn.active-filter {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
            box-shadow: none !important;
            outline: none !important;
        }
        .filter-btn:focus, .filter-btn:active {
            box-shadow: none !important;
            outline: none !important;
        }

        /* Filterable Cards Styling (Similar to about-card) */
        .filter-card {
            position: relative;
            border-radius: 25px;
            overflow: hidden;
            height: 320px;
            transition: transform 0.3s ease, ;
            cursor: pointer;
        }
        .filter-card:hover {
            transform: translateY(-8px);
        }
        .filter-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .filter-card:hover img {
            transform: scale(1.05);
        }
        .filter-card-content {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
            padding: 25px;
            color: white;
            z-index: 2;
        }
        
        /* Animation classes for filtering */
        .filter-item {
            transition: all 0.4s ease-in-out;
        }
        .hide-item {
            opacity: 0;
            transform: scale(0.9);
            position: absolute;
            pointer-events: none;
            visibility: hidden;
            z-index: -1;
        }


/* Social Overlapping Avatar Style */
        .social-hover-expand {
            cursor: pointer;
            padding: 5px 0;
            display: inline-flex;
            transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .social-avatars {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
        }

        .social-circle {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            border: 3px solid white;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
            position: relative;
            flex-shrink: 0;
        }

        /* ترتيب الطبقات والتداخل (Overlap) المبدئي */
        .social-circle:nth-child(1) { margin-left: 0; z-index: 6; }
        .social-circle:nth-child(2) { margin-left: -18px; z-index: 5; }
        .social-circle:nth-child(3) { margin-left: -18px; z-index: 4; }

        /* الأيقونات المخفية (الخدعة: نضعها تماماً خلف الأيقونة الثالثة بقيمة -45) */
        .social-hidden {
            margin-left: -45px; 
            opacity: 0;
            visibility: hidden;
            z-index: 3;
            transform: scale(0.6); /* تبدأ صغيرة ثم تكبر وتنبثق */
        }
        .social-circle:nth-child(5) { z-index: 2; }
        .social-circle:nth-child(6) { z-index: 1; }

        /* ألوان الأيقونات */
        .bg-linkedin { background-color: #0a66c2; }
        .bg-twitter { background-color: #14171a; }
        .bg-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
        .bg-youtube { background-color: #FF0000; }
        .bg-facebook { background-color: #1877F2; }
        .bg-whatsapp { background-color: #25D366; }

        /* --- حالة التمدد (Hover Effect) --- */
        
        /* 1. إعطاء مسافة 8 بكسل بين جميع الأيقونات بدلاً من التداخل */
        .social-hover-expand:hover .social-circle {
            margin-left: 8px; 
        }
        
        /* 2. الأيقونة الأولى تبقى مكانها كثابت للارتكاز */
        .social-hover-expand:hover .social-circle:nth-child(1) {
            margin-left: 0; 
        }
        
        /* 3. إظهار الأيقونات المخفية لتخرج من الخلف */
        .social-hover-expand:hover .social-hidden {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
        }

        /* 4. حركة الارتفاع عند وضع الماوس على أيقونة محددة */
        .social-circle:hover {
            transform: translateY(-6px) scale(1.1) !important;
            border-color: var(--primary-color);
            z-index: 10 !important;
            color: white;
        }

        button.btn-custom.btn-map-custom {
    border: 1px solid;
    color: #1b8354;
    background-color: #f8f9fa;
}







        .explore-card {
            background: #ffffff;
            border-radius: 20px;
            border: 1px solid #d2d6db;
            overflow: hidden;
            padding: 15px;
        }

        .card-img-wrapper {
            position: relative;
            border-radius: 15px;
            overflow: hidden;
            height: 220px;
            margin-bottom: 20px;
        }

        .card-img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .category-badge {
            position: absolute;
            top: 15px;
            left: 15px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(5px);
            color: var(--primary-color);
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
            z-index: 2;
        }

        .explore-card-body {
            padding: 0 5px;
        }

        .explore-card-body h4 {
            color: var(--text-main);
            font-size: 1.25rem;
            line-height: 1.4;
        }

        /* لقص النص الطويل وإضافة (...) في نهايته إذا زاد عن 3 أسطر */
        .line-clamp-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .explore-card-footer {
            padding: 0 5px 5px 5px;
            border-top-color: #d2d6db !important;
        }

        .rating-stars {
            color: #f59e0b; /* لون النجوم الذهبي/البرتقالي */
            font-size: 1.1rem;
            letter-spacing: 2px;
        }









        /* Health Tools Carousel Styles */
        .tools-carousel-container {
            width: 100%;
            overflow-x: auto;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            padding-bottom: 25px; /* مساحة للظل السفلي للبطاقات */
            
            /* إخفاء شريط التمرير الافتراضي لشكل أنظف */
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none;  /* IE and Edge */
        }
        .tools-carousel-container::-webkit-scrollbar {
            display: none; /* Chrome, Safari and Opera */
        }

        .tools-track {
            width: max-content; /* يسمح للحاوية بالتمدد أفقياً حسب عدد البطاقات */
        }

        .tool-card-wrapper {
            width: 320px; /* عرض ثابت لكل بطاقة */
            flex-shrink: 0; /* يمنع انكماش البطاقات */
            scroll-snap-align: start; /* محاذاة تلقائية عند السحب (للموبايل) */
        }

        .tool-card {
            transition: all 0.3s ease;
            border: 1px solid #d2d6db;
        }
        .tool-card:hover {
            border-color: #d2d6db;
        }

        /* تنسيق أيقونات FontAwesome Pro Duotone */
        .tool-icon {
            font-size: 3.5rem;
            color: var(--primary-color);
            /* ألوان الطبقتين في أيقونات Duotone */
            --fa-primary-color: var(--primary-color);
            --fa-secondary-color: #a5b4fc;
            --fa-secondary-opacity: 0.4;
        }

        /* أزرار السلايدر (يمين ويسار) */
        .tools-slider-controls button {
            width: 45px;
            height: 45px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 1.2rem;
            color: var(--primary-color);
            border: 1px solid #e5e7eb;
        }
        .tools-slider-controls button:hover {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
            transform: scale(1.05);
        }
 
/* Update all card border radii */
.aspect-card, .explore-card, .tool-card, .filter-card, .about-card, .floating-card {
    border-radius: 16px !important;
}