:root {
            --primary: #ffcc00;
            --secondary: #0056b3;
            --dark: #121212;
            --light: #f8f9fa;
        }
/* 1. استيراد الخط من Google Fonts */


html { visibility: hidden; }
/* 2. تطبيق الخط على الموقع */
body {
    font-family:  'Tajawal', sans-serif;
    direction: rtl; /* لضمان اتجاه النص العربي */
}
body {
  -webkit-user-select: none;  /* Safari */
  -ms-user-select: none;      /* IE 10+ and Edge */
  user-select: none;          /* Standard */
}


/* 3. مثال لتطبيق الخط على العناوين فقط */
h1, h2, h3 {
    font-weight: 700;
}

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { background: var(--light); color: #333; overflow-x: hidden; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        /* تنسيق المقالات التفصيلية */
.main-article {
    margin-bottom: 80px;
}

.article-content-wrapper {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

.main-article.reverse .article-content-wrapper {
    flex-direction: row-reverse;
}

.article-text {
    flex: 1;
    min-width: 300px;
}

.article-text h2 {
    color: var(--secondary);
    font-size: 2rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.article-text h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 4px;
    background: var(--primary);
}

.article-text p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.8;
}

.article-text ul {
    list-style: none;
}

.article-text ul li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.article-text ul li i {
    color: var(--primary);
    font-size: 1.2rem;
}

.article-featured-img {
    flex: 1;
    min-width: 300px;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 20px 20px 0px var(--primary); /* حركة جمالية خلف الصورة */
}

.article-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.article-featured-img:hover img {
    transform: scale(1.05);
}

/* للجوال */
@media (max-width: 768px) {
    .article-content-wrapper {
        gap: 20px;
        text-align: center;
    }
    .article-text h2::after {
        right: 50%;
        transform: translateX(50%);
    }
    .article-featured-img {
        height: 250px;
        box-shadow: 10px 10px 0px var(--primary);
    }
}
/*الوان من نحن*/
.gradient-text {
            background: linear-gradient(70deg, #1e40af, #f97316);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .service-hover:hover {
            border-right: 4px solid #f97316;
            background-color: #f8fafc;
        }  

/* Tabs Styling */
.tab-btn {
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.active-tab {
    background-color: #1e3a8a; /* blue-900 */
    color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.inactive-tab {
    background-color: white;
    color: #1e3a8a;
    border: 1px solid #1e3a8a;
}

/* Service Cards */
.service-card {
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s;
    border-right-width: 4px;
}

.service-card:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.icon-wrapper {
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

/* Business Card */
.business-card {
    width: 100%;
    max-width: 28rem;
    aspect-ratio: 1.75 / 1;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}
/* Header */
        .header { height: 70vh; position: relative; }
        .swiper-hero { width: 100%; height: 100%; }
        .swiper-slide { background-size: cover; background-position: center; position: relative; }
        .swiper-slide::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
        .hero-content { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; }
/* Navbar */
/* تحسين شكل القائمة عند الفتح لتبدو منسدلة بشكل أنيق */
#mobileMenu.active {
    display: flex;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* المسافة حول اللوجو والزر لضمان عدم الالتصاق بحافة الشاشة */
.navbar .max-w-6xl {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
/* حاوية الأزرار تحت وصف الصور */
        #contact-actions-container {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
            padding: 10px;
            z-index: 1000;
        }

        /* تنسيق الأزرار المشترك */
        .action-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 15px 30px;
            text-decoration: none;
            color: white;
            font-weight: bold;
            border-radius: 50px;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            border: none;
            cursor: pointer;
        }

        /* زر الاتصال - تدرج أزرق */
        #call-btn {
            background: linear-gradient(135deg, #007bff, #0056b3);
        }

        /* زر الواتساب - تدرج أخضر */
        #whatsapp-btn {
            background: linear-gradient(135deg, #25d366, #128c7e);
        }

        /* تأثيرات عند مرور الماوس */
        .action-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
            filter: brightness(1.1);
        }

        /* تجاوب مع الموبايل */
        @media (max-width: 600px) {
            #contact-actions-container {
                flex-direction: column;
                align-items: center;
            }
            .action-btn { width: 50%; justify-content: center; }
        }
        /* Articles/Services Section */
        .section-title { text-align: center; padding: 60px 0 30px; font-size: 2rem; color: var(--secondary); }
        .articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
        .article-card { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        .article-card img { width: 100%; height: 200px; object-fit: cover; }
        .article-body { padding: 20px; }

        /* Gallery Section */
        .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; padding-bottom: 50px; }
        .gallery-item { height: 200px; border-radius: 8px; overflow: hidden; display: block; }
        .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
        .gallery-item:hover img { transform: scale(1.1); }

        /* Stats Section with Counter Animation */
        .stats-section { background: var(--secondary); color: white; padding: 60px 0; text-align: center; }
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; }
        .stat-number { font-size: 3.5rem; color: var(--primary); font-weight: bold; display: block; }

        /* Floating Buttons with Animation */
        .floating-btns { position: fixed; bottom: 30px; left: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 9999; }
        .f-btn { width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; font-size: 1.8rem; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
        .f-whatsapp { background: #25d366; animation: pulse 2s infinite; }
        .f-phone { background: #007bff; animation: pulse 2s infinite; animation-delay: 1s; }

        @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
            70% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
        }

        /* Footer */
        footer { background: var(--dark); color: #ccc; padding: 40px 0; margin-top: 50px; }
        .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
        .footer-col h3 { color: white; margin-bottom: 15px; border-right: 4px solid var(--primary); padding-right: 10px; }

        @media (max-width: 768px) {
            .nav-links { position: fixed; top: 75px; right: -100%; background: var(--dark); width: 80%; height: 100vh; flex-direction: column; align-items: center; padding-top: 50px; transition: 0.4s; }
            .nav-links.active { right: 0; }
            .menu-btn { display: block; }
        }

/* تنسيق القسم الرئيسي */
        #main-services-section { max-width: 1000px; margin: 0 auto; text-align: center; }

        .container-wrapper { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; }

        /* بطاقة خدمة الكهرباء */
        #electricity-card { 
            background: #fff; border-radius: 20px; overflow: hidden; width: 350px; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.08); position: relative;
        }

        /* بطاقة خدمة السباكة */
        #plumbing-card { 
            background: #fff; border-radius: 20px; overflow: hidden; width: 350px; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.08); position: relative;
        }

        .img-box { width: 100%; height: 220px; object-fit: cover; }

        .content-box { padding: 25px; }

        /* --- الزر الإبداعي للكهرباء --- */
        #btn-electric {
            display: inline-block;
            padding: 12px 35px;
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            position: relative;
            overflow: hidden;
            background: linear-gradient(45deg, #f1c40f, #e67e22); /* ألوان الطاقة */
            transition: all 0.4s ease;
            box-shadow: 0 4px 15px rgba(230, 126, 34, 0.4);
        }

        /* --- الزر الإبداعي للسباكة --- */
        #btn-plumbing {
            display: inline-block;
            padding: 12px 35px;
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            position: relative;
            overflow: hidden;
            background: linear-gradient(45deg, #3498db, #2980b9); /* ألوان المياه */
            transition: all 0.4s ease;
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
        }

        /* تأثير اللمعان المتحرك المشترك للأزرار */
        #btn-electric::before, #btn-plumbing::before {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: all 0.5s;
        }

        #btn-electric:hover::before, #btn-plumbing:hover::before {
            left: 100%;
        }

        #btn-electric:hover, #btn-plumbing:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        }

 /* خدماتنا الجديده */
.service-card {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .service-card:hover {
            transform: translateY(-12px);
        }
        .icon-pulse:hover svg {
            animation: pulse 1.5s infinite;
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }