/*==================================
    1. تعريف الثوابت (المتغيرات)
    ==================================*/
:root {
        /* الخلفية الأساسية - بناءً على الألوان الداكنة في الملف التعريفي */
        --color-dark-blue: #0A1C3C;

        /* الألوان الأساسية للوجو */
        --color-teal: #00A99D;
        --color-cyan: #00BFFF;
        --color-telegram: #0088CC; /* لون تليجرام الأساسي */

        /* تدرج اللوجو الذي سيتم استخدامه للخطوط والأزرار */
        --logo-gradient: linear-gradient(to right, #00A99D, #00BFFF);

        /* الخطوط */
        --font-primary: 'RH-Zak', sans-serif;
        --font-secondary: 'Montserrat', sans-serif;
}


/*==================================
    2. التنسيقات العامة
    ==================================*/
* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
}

body {
        background-color: var(--color-dark-blue);
        color: #E0E0E0; /* لون أبيض مائل للرمادي لراحة العين */
        font-family: var(--font-secondary);
        direction: rtl;
        line-height: 1.6;
}

/* تنسيق الأقسام بشكل عام */
.section {
        padding: 80px 20px;
        text-align: center;
}

.section-title {
        font-size: 2.5rem;
        margin-bottom: 50px;
        color: white;
        /* تدرج لوني على العنوان */
        background: var(--logo-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: var(--font-primary);
}


/*==================================
    3. تنسيقات الواجهة الرئيسية (Hero Section)
    ==================================*/
.hero-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        text-align: center;
        padding: 40px 20px;
}

/* تنسيق اللوجو */
.logo-container {
        margin-bottom: 30px;
}

.logo-mark {
        width: 150px;
        height: auto;
        filter: drop-shadow(0 0 10px rgba(0, 191, 255, 0.5));
}


/* محتوى النص الرئيسي */
.hero-content h1 {
        background: var(--logo-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 4rem;
        margin-bottom: 15px;
        font-family: var(--font-primary);
}

.hero-content p {
        max-width: 700px;
        font-size: 1.3rem;
        margin-bottom: 40px;
}

/* زر الدعوة للإجراء (CTA Button) */
.cta-button {
        display: inline-block;
        padding: 15px 35px;
        border: 2px solid transparent;
        border-radius: 50px;
        text-decoration: none;
        font-weight: bold;
        font-size: 1.2rem;
        cursor: pointer;
        transition: all 0.3s ease;
        background: var(--logo-gradient);
        color: var(--color-dark-blue);
}

.cta-button:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 191, 255, 0.4);
}

/*==================================
    4. تنسيقات قسم الخدمات (Services Section)
    ==================================*/

.services-grid {
        display: grid;
        /* تخطيط ديناميكي: أعمدة متعددة في الشاشات الكبيرة */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
        max-width: 1200px;
        margin: 0 auto;
        text-align: right;
}

.service-card {
        background-color: rgba(255, 255, 255, 0.05); /* خلفية شبه شفافة */
        padding: 30px;
        border-radius: 10px;
        transition: background-color 0.3s ease, transform 0.3s ease;
        border-bottom: 3px solid transparent;
}

.service-card:hover {
        background-color: rgba(0, 191, 255, 0.1); /* إضاءة عند التحويم */
        transform: translateY(-5px);
        /* تطبيق تدرج لوني على الحدود السفلية عند التحويم */
        border-image: var(--logo-gradient);
        border-image-slice: 1;
        border-bottom: 3px solid;
}

.service-card h3 {
        color: white;
        margin-bottom: 15px;
        font-size: 1.5rem;
}

.service-card p {
        color: #CCC;
        font-size: 1rem;
}

/* تنسيق الأيقونات داخل بطاقات الخدمات */
.service-card .icon {
        font-size: 2.5rem;
        margin-bottom: 20px;
        /* استخدام تدرج لوني على الأيقونة */
        background: var(--logo-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: block;
}


/*==================================
    5. تنسيقات قسم أدواتي التقنية (Tech Stack)
    ==================================*/
.tech-icons-container {
        display: flex;
        flex-wrap: wrap; /* للسماح للأيقونات بالانتقال لسطر جديد */
        justify-content: center;
        gap: 40px;
        margin-top: 40px;
}

.tech-icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100px;
}

.tech-icon-item i {
        font-size: 3.5rem; /* حجم كبير للأيقونات */
        transition: transform 0.3s ease;
        margin-bottom: 10px;
        opacity: 0.8;
}

/* تأثير تحويم خفيف */
.tech-icon-item i:hover {
        transform: scale(1.1);
        opacity: 1;
}

/* تنسيق أسماء التقنيات */
.tech-icon-item span {
        font-size: 0.9rem;
        color: #AAA;
}

/* تطبيق التدرج اللوني لثيمك على الأيقونات البديلة */
.tech-icon-item .icon {
        background: var(--logo-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 3.5rem; /* تطابق الحجم */
}

/*==================================
    6. تنسيقات قسم التواصل (Contact Section)
    ==================================*/
.contact-section {
        background-color: #0d274b; /* خلفية أغمق قليلاً للتمييز */
        padding: 100px 20px;
}

.contact-subtitle {
        font-size: 1.4rem;
        color: #FFF;
        margin-bottom: 40px;
        font-weight: 700;
}

/* زر تليجرام البارز */
.telegram-cta {
        display: inline-flex;
        align-items: center;
        padding: 20px 40px;
        margin-bottom: 30px;
        background-color: var(--color-telegram); /* لون تليجرام */
        color: white;
        text-decoration: none;
        border-radius: 5px;
        font-size: 1.5rem;
        font-weight: bold;
        transition: background-color 0.3s ease, transform 0.3s ease;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

.telegram-cta i {
        font-size: 2rem;
        margin-left: 15px;
}

.telegram-cta:hover {
        background-color: #00A9FF;
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.telegram-handle {
        display: block;
        font-size: 0.9rem;
        opacity: 0.8;
        margin-top: 5px;
}

/* تنسيق صورة QR Code */
.qr-code-img {
        max-width: 250px; /* حجم معقول */
        height: auto;
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(0, 191, 255, 0.3);
        margin-bottom: 20px;
}

.contact-note {
        font-size: 0.9rem;
        color: #999;
}


/*==================================
    7. تنسيقات تذييل الصفحة (Footer)
    ==================================*/
footer {
        padding: 20px 0;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        color: #999;
        font-size: 0.9rem;
}


/*==================================
    8. استعلامات الوسائط (MEDIA QUERIES) للتوافق مع الجوالات
    ==================================*/

/* التنسيقات المطبقة على شاشات بعرض 768 بكسل أو أقل (الأجهزة اللوحية والجوالات) */
@media (max-width: 768px) {

        /* تقليل حجم الخطوط الرئيسية */
        .hero-content h1 {
                font-size: 2.5rem; /* من 4rem إلى 2.5rem */
        }

        .hero-content p {
                font-size: 1.1rem; /* من 1.3rem إلى 1.1rem */
        }

        .section-title {
                font-size: 2rem; /* من 2.5rem إلى 2rem */
                margin-bottom: 30px;
        }

        /* تغيير تخطيط شبكة الخدمات إلى عمود واحد في الجوال */
        .services-grid {
                grid-template-columns: 1fr; /* عمود واحد فقط */
                gap: 20px;
        }

        /* تقليل حجم اللوجو قليلاً */
        .logo-mark {
                width: 120px;
        }

        /* تقليل حجم أيقونات التقنيات في قسم Tech Stack */
        .tech-icon-item {
                width: 80px; /* تقليل عرض البطاقة */
        }

        .tech-icon-item i {
                font-size: 2.5rem; /* تقليل حجم الأيقونة */
        }

        .tech-icons-container {
                gap: 20px 15px; /* تقليل الفراغات بين الأيقونات */
        }

        .section {
                padding: 50px 15px; /* تقليل المسافة البادئة للأقسام */
        }

        /* تنسيق زر تليجرام في الجوال */
        .telegram-cta {
                font-size: 1.2rem;
                padding: 15px 30px;
                flex-direction: column-reverse; /* وضع العنوان فوق الأيقونة */
        }

        .telegram-cta i {
                margin: 0;
                margin-bottom: 5px;
        }

        .contact-subtitle {
                font-size: 1.2rem;
        }

        .qr-code-img {
                max-width: 180px;
        }
}