/* إعدادات أساسية للصفحة */
body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif; /* يمكن تعديل الخط ليناسب الخط المستخدم في التصميم */
    direction: rtl; /* يدعم اللغة العربية بشكل صحيح */
    background-color: #fff; /* لون خلفية أفتح قليلاً لإبراز المحتوى */
    min-height: 100vh;
    overflow-x: hidden; /* يمنع التمرير الأفقي غير المرغوب فيه */
    overflow-y: auto; /* يسمح بالتمرير العمودي عند الحاجة */
}

/* الشريط العلوي (Top Bar) */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    background-color: white;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    height: 90px;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); */ /* ظل أوضح قليلاً */
}

/* شريط التمرير (Progress Bar) */
.progress-bar {
    position: fixed;
    top: 90px;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(to right, #007BFF 0%, #5de0e6 100%); /* أزرق داكن لأزرق فاتح */
    width: 0%;
    z-index: 999;
    transition: width 0.1s ease-out;
}

/* فاصل تحت الشريط العلوي */
.header-spacer {
    height: 90px;
}

/* الشعار (Logo) */
.logo img {
    height: 70px;
    display: block;
}

/* روابط التنقل (Navigation Links) */
.nav-links {
    display: flex;
    gap: 50px; /* مسافة بين الروابط */
}

.nav-links a {
    text-decoration: none;
    color: #999;
    font-weight: bold;
    font-size: 17px;
    transition: color 0.3s ease;
    position: relative; /* لإضافة خط تحت الرابط عند التحويم */
}

.nav-links a:hover {
    color: #004aad; /* أزرق داكن عند التحويم */
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 5px;
    right: 0; /* يبدأ من اليمين بسبب direction: rtl */
    background: #004aad;
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

/* زر تسجيل الدخول (Login Button) */
.login-btn a {
    text-decoration: none;
    color: #004aad; /* أزرق داكن */
    border: 2px solid #004aad; /* حدود زرقاء داكنة */
    padding: 10px 22px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 15px;
    transition: all 0.3s ease;
}

.login-btn a:hover {
    background-color: #004aad;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 74, 173, 0.2);
}

/* زر الهامبرغر (Hamburger button) - يظهر فقط في الموبايل */
.hamburger-menu {
    display: none; /* مخفي افتراضياً على الكمبيوتر */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
    z-index: 1001; /* فوق كل شيء */
}

.hamburger-menu span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #004aad;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}

/* قائمة جانبية للموبايل (Sidebar Navigation) */
.sidebar {
    position: fixed;
    top: 0;
    right: -250px; /* مخفية في البداية */
    width: 200px;
    height: 100%; /* يجب أن تكون 100% لتغطية الارتفاع كاملاً */
    background-color: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
    z-index: 999;
    transition: right 0.3s ease-in-out;
    padding-top: 60px; /* مسافة من الأعلى لعدم التداخل مع الشريط العلوي / للزر */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.sidebar.active {
    right: 0; /* تظهر عند إضافة كلاس active بواسطة JavaScript */
}

.sidebar a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 18px;
    padding: 10px 30px;
    width: 100%;
    box-sizing: border-box; /* لضمان أن البادينج لا يوسع العنصر عن الـ 100% */
    text-align: right;
    transition: background-color 0.3s ease;
}

.sidebar a:hover {
    background-color: #f0f0f0;
}

/* ستايلات زر الإغلاق داخل القائمة الجانبية */
.close-sidebar-btn {
    background-color: #ff4d4d; /* لون أحمر */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    position: absolute; /* عشان نتحكم في مكانه بالظبط */
    top: 10px; /* بعد 10 بكسل من فوق */
    right: 10px; /* بعد 10 بكسل من اليمين (لأن الاتجاه RTL) */
    z-index: 1001; /* يكون فوق كل حاجة في القائمة */
    display: none; /* إخفاء الزر افتراضياً */
    
}

.close-sidebar-btn:hover {
    background-color: #cc0000; /* لون أحمر أغمق عند المرور بالماوس */
}


/* حاوية جديدة لقسم الصورة والنص بجانب بعض */
.hero-section-container {
    display: flex;
    flex-direction: row-reverse; /* عكس ترتيب العناصر (النص أولاً ثم الصورة) */
    justify-content: center; /* توسيط المحتوى */
    align-items: center; /* محاذاة رأسية */
    gap: 120px; /* مسافة بين الصورة والنص */
    padding: 50px 6px; /* تباعد داخلي للقسم */
    margin-top: 0px; /* مسافة من الشريط العلوي */
    flex-wrap: wrap;
    background-color: #fff/* للسماح للعناصر بالنزول لأسطر جديدة في الشاشات الصغيرة */
}

/* صورة الـ Blob غير المنتظمة */
.blob-img {
    width: 480px; /* حجم مقارب للتصميم */
    height: 480px;
    
    /* overflow: hidden; */
    /* clip-path: path('M275,0 C370,20 500,125 500,250 C500,375 375,500 250,500 C125,500 0,375 0,250 C0,125 125,0 275,0 Z'); */
    /* background-color: #e0f2f7; */ /* لون خلفية Blob */
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* flex-shrink: 0; */ /* لمنع الصورة من الانكماش */
}

.blob-img img {
    width: 90%; /* حجم الصورة داخل الـ blob */
    /* height: 90%; */
    object-fit: cover;
    top: 25px;
    margin-top: 30px;
    /* display: block; */
    /* border-radius: 50%; */ /* لجعل الصورة دائرية داخل الـ blob */
    /* transform: scale(0.95); */ /* تصغير بسيط للصورة داخل الـ blob */
}

/* محتوى اسم الموقع (Name Web Section) - أصبح جزءاً من flex container */
.name-web {
    text-align: right;
    width: 45%; /* للتحكم في عرض الكتلة النصية */
    box-sizing: border-box;
    padding-left: 20px;
    flex-grow: 1; /* للسماح للعنصر بالتمدد */
    max-width: 600px; /* أقصى عرض للنص لضمان سهولة القراءة */
}

/* بلوك النصوص (Text Block) */
.text-block {
    margin-bottom: 30px;
}

.text-block .arabic {
    font-size: 4em; /* تم تكبير حجم الخط */
    font-weight: bold;
    margin: 0;
    line-height: 1.2;
    direction: rtl;
    color: #333; /* لون نص الافتراضي */
}

.text-block .arabic .black {
    color: #333;
}

.text-block .arabic .blue {
    color: #004aad; /* أزرق داكن */
}

.text-block .english {
    font-size: 3.2em; /* تم تكبير حجم الخط */
    font-weight: bold;
    margin: 10px 0 0;
    line-height: 1.2;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #555;
}

.text-block .english .blue {
    color: #004aad;
}

.text-block .english .black {
    color: #333;
}

.nice-name p {
    font-size: 2em; /* تم تكبير حجم الخط */
    color: #666;
    margin-bottom: 50px; /* مسافة سفلية قبل الزر */
    margin-right:65px
}

/* زر الدخول (Main Button) */
.ll {
    display: inline-block;
    padding: 14px 35px;
    border-radius: 30px;
    text-decoration: none;
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    background: linear-gradient(90deg, #5de0e6, #004aad); /* تدرج لوني مطابق للتصميم */
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 15px rgba(0, 74, 173, 0.25); /* ظل واضح */
    margin-right:120px
}

.ll:hover {
    background: linear-gradient(90deg, #4ad1dc, #003a8a);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 74, 173, 0.35);
}

/* فاصل بسيط بين الأقسام */
.section-divider {
    height: 50px; /* ارتفاع الفاصل */
    background-color: transparent; /* يمكن تغيير اللون إذا أردت خط فاصل مرئي */
    width: 100%;
    clear: both; /* لضمان أن العناصر الـ floated لا تتداخل */
}


/* قسم "tow" */
.tow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 60px;
    background-color: white;
    border-radius: 15px;
    direction: rtl;
    gap: 80px;
    /* margin: 656px auto; */ /* مسافة من الأعلى والأسفل، وتوسيط أفقي */
    max-width: 100%;
    /* box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); */
    flex-wrap: wrap; /* للسماح للعناصر بالنزول لأسطر جديدة في الشاشات الصغيرة */
}

/* النصوص داخل قسم "tow" */
.tow .text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: right;
}

.tow .line {
    font-size: 2.5em;
    font-weight: bold;
    line-height: 1.4;
}

/* ألوان النصوص في قسم "tow" */
.tow .yellow {
    color: #f9c80e; /* أصفر */
}

.tow .blue2,
.tow .blue3 {
    color: #004aad; /* أزرق داكن */
}

.tow .black1,
.tow .black2,
.tow .black3,
.tow .black4,
.tow .black5 {
    color: #333; /* أسود/رمادي داكن */
}

/* الصورة داخل قسم "tow" */
.tow .image {
    flex-shrink: 0;
    width: 450px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tow .image img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
    /* box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); */
}

/* قسم المدرسين الجديد */
.teachers-section {
    padding: 80px 60px;
    text-align: center;
    background-color: #fefefe;
    margin-top: 0px;
}

.teachers-section .section-title {
    font-size: 2.8em;
    font-weight: bold;
    color: #004aad;
    margin-bottom: 60px;
    position: relative;
    display: inline-block;
}

.teachers-section .section-title::after {
    content: '';
    position: absolute;
    width: 80%;
    height: 4px;
    background-color: #f9c80e;
    bottom: -15px;
    left: 10%;
    right: 10%;
    border-radius: 2px;
}

.teachers-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 50px;
}

.teacher-card {
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    padding: 40px;
    width: 320px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    margin-bottom: 20px; /* 🟢 المسافة بين الكروت */
}


/* إظهار أول 3 كروت بشكل افتراضي على الشاشات الكبيرة */
@media (min-width: 769px) { /* أو 768px حسب نقطة التوقف الخاصة بك */
    .teacher-card:nth-child(-n+3) {
        display: flex; /* إظهار أول 3 كروت فقط */
    }
}


.teacher-card.show {
    display: flex; /* لإظهار الكروت عند النقر على "عرض المزيد" */
}

.teacher-img-container {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 25px;
    border: 4px solid #004aad;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e0f2f7;
}

.teacher-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.teacher-title {
    font-size: 1.1em;
    color: #999;
    margin-bottom: 5px;
}

.teacher-name {
    font-size: 1.6em;
    font-weight: bold;
    color: #004aad;
    margin-bottom: 15px;
}

.teacher-description {
    font-size: 0.95em;
    color: #555;
    line-height: 1.5;
    margin-bottom: 25px;
    min-height: 60px;
}

.details-btn {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 25px;
    text-decoration: none;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    background: linear-gradient(90deg, #5de0e6, #004aad);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 10px rgba(0, 74, 173, 0.2);
}

.details-btn:hover {
    background: linear-gradient(90deg, #4ad1dc, #003a8a);
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 74, 173, 0.3);
}

.view-more-btn {
    display: inline-block;
    margin-top: 40px;
    padding: 12px 35px;
    border-radius: 30px;
    text-decoration: none;
    color: #004aad;
    font-size: 1.1em;
    font-weight: bold;
    border: 2px solid #004aad;
    background-color: transparent;
    transition: all 0.3s ease;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    cursor: pointer; /* لجعل الزر قابلاً للنقر */
}

.view-more-btn:hover {
    background-color: #004aad;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 74, 173, 0.2);
}


/* استجابة التصميم (Media Queries) */
@media (max-width: 992px) {
    .top-bar {
        padding: 0 20px;
        height: 80px;
    }

    .progress-bar {
        top: 80px;
    }

    .header-spacer {
        height: 80px;
    }

    .logo img {
        height: 60px;
    }

    .nav-links {
        gap: 25px;
    }

    .nav-links a {
        font-size: 15px;
    }

    .login-btn a {
        padding: 8px 16px;
        font-size: 14px;
    }

    .hero-section-container {
        flex-direction: column; /* تكديس رأسي */
        padding: 60px 40px;
        gap: 40px;
        text-align: center; /* توسيط النصوص عند التكديس */
    }

    .blob-img {
        width: 380px;
        height: 380px;
        margin: 0; /* إزالة الهوامش الخاصة بالـ float */
    }

    .name-web {
        margin: 0;
        width: 90%; /* زيادة العرض ليناسب الشاشات الأصغر */
        max-width: 500px; /* تقليل أقصى عرض */
        text-align: center; /* توسيط النص */
    }

    .text-block .arabic {
        font-size: 3.2em; /* تم تعديل حجم الخط للتجاوبية */
    }

    .text-block .english {
        font-size: 1.8em; /* تم تعديل حجم الخط للتجاوبية */
    }

    .nice-name p {
        font-size: 1.2em; /* تم تعديل حجم الخط للتجاوبية */
        margin-bottom: 30px;
    }

    .ll {
        padding: 12px 30px;
        font-size: 1.1em;
    }

    .tow {
        flex-direction: column;
        padding: 60px 40px;
        gap: 40px;
        margin-top: 50px;
        align-items: center;
    }

    .tow .text {
        text-align: center;
    }

    .tow .line {
        font-size: 1.6em;
    }

    .tow .image {
        width: 100%;
        max-width: 450px;
    }

    .teachers-section {
        padding: 60px 40px;
    }

    .teachers-section .section-title {
        font-size: 2.2em;
        margin-bottom: 40px;
    }

    .teachers-container {
        gap: 30px;
    }

    .teacher-card {
        width: 280px;
        padding: 25px;
    }

    .teacher-img-container {
        width: 120px;
        height: 120px;
    }

    .teacher-name {
        font-size: 1.4em;
    }

    .teacher-description {
        font-size: 0.9em;
    }

    .details-btn {
        padding: 9px 22px;
        font-size: 0.95em;
    }

    .view-more-btn {
        padding: 10px 30px;
        font-size: 1em;
    }
}

/* لشاشات الجوال */
@media (max-width: 768px) {
    .top-bar {
        padding: 0 15px;
        height: 70px;
        justify-content: space-between; /* للحفاظ على المسافات */
    }

    .progress-bar {
        top: 70px;
    }

    .header-spacer {
        height: 70px;
    }

    .logo img {
        height: 50px;
    }

    .nav-links {
        display: none; /* إخفاء روابط التنقل الأصلية */
    }

    .login-btn {
        display: none; /* إخفاء زر تسجيل الدخول */
    }

    .hamburger-menu {
        display: flex; /* إظهار زر الهامبرغر */
    }

    /* لجعل الزر يظهر فقط على شاشات الموبايل */
    .close-sidebar-btn {
        display: block; /* إظهار الزر على شاشات الموبايل */
    }
    /* ممكن تحتاج تعديل بسيط على محاذاة عناصر القائمة عشان الزر مياخدش مساحتها */
    .sidebar a {
        margin-top: 15px; /* مسافة بسيطة بين الروابط بعد الزر */
    }

    .hero-section-container {
        padding: 40px 20px;
        gap: 30px;
    }

    .blob-img {
        width: 280px;
        height: 280px;
    }

    .name-web {
        width: 95%;
    }

    .text-block .arabic {
        font-size: 2.5em; /* تم تعديل حجم الخط للتجاوبية */
    }

    .text-block .english {
        font-size: 1.4em; /* تم تعديل حجم الخط للتجاوبية */
    }

    .nice-name p {
        font-size: 1.1em; /* تم تعديل حجم الخط للتجاوبية */
        margin-bottom: 30px;
    }

    .ll {
        padding: 10px 25px;
        font-size: 1em;
    }

    .tow {
        flex-direction: column;
        padding: 40px 20px;
        margin-top: 0px;
        gap: 30px;
    }

    .tow .line {
        font-size: 1.3em;
    }

    .tow .image {
        width: 100%;
        max-width: 350px;
    }

    .teachers-section {
        padding: 40px 20px;
    }

    .teachers-section .section-title {
        font-size: 1.8em;
        margin-bottom: 30px;
    }

    .teachers-container {
        flex-direction: column; /* جعل الكروت تحت بعضها */
        gap: 20px;
        align-items: center; /* توسيط الكروت */
    }

    .teacher-card {
        width: 90%; /* عرض أكبر للكروت لتكون بارزة */
        max-width: 350px; /* لتحديد أقصى عرض على الشاشات الصغيرة */
        padding: 20px;
        margin: 0 auto; /* توسيط الكروت */
    }

    /* إظهار جميع الكروت في الموبايل لتجنب مشكلة "عرض المزيد" مع التكديس الرأسي */
    .teacher-card {
        display: flex;
    }

    .teacher-img-container {
        width: 100px;
        height: 100px;
    }

    .teacher-name {
        font-size: 1.2em;
    }

    .teacher-description {
        font-size: 0.85em;
        min-height: unset;
    }

    .details-btn {
        padding: 8px 20px;
        font-size: 0.9em;
    }

    .view-more-btn {
        display: none; /* إخفاء زر "عرض المزيد" إذا كانت جميع الكروت ظاهرة */
    }
}

/* لشاشات الجوال الصغيرة جداً */
@media (max-width: 480px) {
    .top-bar {
        padding: 0 10px;
    }

    .logo img {
        height: 45px;
    }

    /* زر تسجيل الدخول مخفي بالفعل بواسطة استعلام الوسائط 768px */

    .blob-img {
        width: 250px;
        height: 250px;
    }

    .name-web {
        margin-top: 30px;
    }

    .text-block .arabic {
        font-size: 2em; /* تم تعديل حجم الخط للتجاوبية */
    }

    .text-block .english {
        font-size: 1.1em; /* تم تعديل حجم الخط للتجاوبية */
    }

    .nice-name p {
        font-size: 1.2em; /* تم تعديل حجم الخط للتجاوبية */
        margin-left:40px;
        position: relative;
        left: 15px;
    }
    

.ll {
    padding: 10px 20px;
    font-size: 0.8em;
    width: 120px;
    float: right;
    height:40px;
    position: relative;
    left: 23px; /* هيحركه لليمين */
}



    .tow .line {
        font-size: 1.2em;
    }

    .tow .image {
        width: 100%;
        max-width: 350px;
    }

    .teacher-card {
        max-width: 95%; /* زيادة العرض على الشاشات الأصغر */
    }
}

/* Specific styles for the "Why Durosco" section and Footer */

/* The exact blue color from the image */
:root {
    --durosco-blue: #007bff; /* This is a common representation for the blue. You might need to fine-tune it with a color picker if it's slightly off. */
}

.why-durosco-section {
    background-color: white; /* The background of the section itself is white */
    /* padding: 50px 20px; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: black; /* Text color for readability on white background */
    text-align: right; /* Right alignment for Arabic text */
    flex-direction: column;
}

.why-durosco-section .content-wrapper {
    display: flex;
    flex-direction: row-reverse; /* Puts image section on left, text on right for RTL */
    max-width: 1200px;
    width: 100%;
    align-items: center;
    gap: 40px;
}

.why-durosco-section .text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align text to the right */
    padding-left: 20px;
}

.why-durosco-section .section-title-arabic {
    font-size: 3em;
    margin-bottom: 20px;
    position: relative;
    padding-right: 20px;
    color: var(--durosco-blue); /* Title color from the image */
}

.why-durosco-section .section-title-arabic::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -10px;
    width: 80px;
    height: 5px;
    background-color: #ffc107; /* Yellow underline */
    border-radius: 5px;
}

.why-durosco-section .section-description-arabic {
     margin: 0;
     font-size: 1.7em;
     line-height: 1.9;
     padding: 0;
     width:600px;
     margin-left:240px;
     box-sizing: border-box;
     font-family: 'Tajawal', Arial, sans-serif;
}

.why-durosco-section .image-with-overlays {
    flex: 3;
    position: relative;
    display: flex; /* Use flex to help center the main image if it's smaller */
    justify-content: center;
    align-items: center;
    /* Adjust max-width and height based on the *area* where the image and ovals fit */
    max-width: 650px; /* Example width */
    height: 450px; /* Example height */
}

.why-durosco-section .main-why-durosco-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures the whole image is visible within its container */
}

/* Oval Overlay Styles */
.oval-overlay {
    position: absolute;
    /* Width and Height will be set individually for each oval */
    background-color: transparent; /* Or a placeholder color if images aren't ready */
clip-path: inset(0% round 30% / 35%);





    overflow: hidden; /* Crucial to clip the image inside */
 /* Add a shadow like in the original image */
    border: 3px solid #006aa7; /* White border as seen in the image */
    display: flex;
    justify-content: center;
    align-items: center;
}

.oval-overlay .oval-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the oval without distortion */
}

/* Positioning and Sizing for the individual oval images */
.man-overlay {
    width: 180px;  /* Smaller width for the man's oval */
    height: 250px; /* Smaller height for the man's oval */
    top: 55%;      /* Adjusted position */
    left: 45%;     /* Adjusted position to overlap the other */
    transform: translate(-50%, -50%); /* Center the overlay */
    z-index: 2; /* Man's image is in front */
}

.boy-vr-overlay {
    width: 220px;  /* Larger width for the boy's oval */
    height: 300px; /* Larger height for the boy's oval */
    top: 50%;      /* Adjusted position */
    left: 70%;     /* Adjusted position for overlap */
    transform: translate(-50%, -50%); /* Center the overlay */
    z-index: 1; /* Boy's image is behind the man's */
}

/* Footer Styles */
.footer {
    background-color: #006aa7;
    color: white;
    padding: 30px 2px;
    text-align: center;
    direction: rtl;
    width: 100%;
    height:350px;
    margin-top:100px
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* قللنا الفراغ */
}

.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-actual-logo {
    width: 120px; /* قللنا الحجم من 150 إلى 120 */
    height: auto;
    margin-bottom: 5px; /* قللنا الفراغ */
}

.footer-logo-text {
    font-size: 2.3em; /* قللنا الحجم */
    font-weight: bold;
    margin-bottom: 2px; /* قللنا الفراغ */
}

.footer-logo-english {
    font-size: 1.1em;
    color: rgba(255, 255, 255, 0.8);
}

.social-icons {
    display: flex;
    gap: 12px;
    margin-top: 10px; /* قللنا الفراغ */
}

.social-icon img {
    width: auto;
    height: 55px;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.social-icon img:hover {
    transform: scale(1.1);
}
/* Classes Section */
.classes-section {
    text-align: center;
    padding: 60px 20px;
    position: relative; /* Needed for positioning the arc line */
}

.classes-section .section-title {
    font-size: 3em;
    color: #000;
    margin-bottom: 50px;
    position: relative;
}

.classes-section .section-title::after {
    content: '';
    position: absolute;
    width: 20%;
    height: 4px;
    background-color: #004aad;
    bottom: -15px;
    left: 10%;
    right: 40%;
    border-radius: 2px;
}


.classes-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 30px; /* Space for the arc line below */
}

.class-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    background-color: #fff;
    border-radius: 15px;
    padding: 30px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 300px; /* Adjust as needed */
}

.class-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.class-icon-container {
    /* background-color: #e0f2f7; */ /* Light blue background for the icon */
    /* border-radius: 50%; */
    /* padding: 25px; */
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px; /* Adjust size as needed */
    height: 120px; /* Adjust size as needed */
    /* box-shadow: 0 2px 10px rgba(0, 123, 255, 0.2); */
}

.class-icon-container img {
    width: 80px; /* Size of the icon */
    height: 80px; /* Size of the icon */
}

.class-name {
    font-size: 1.8em;
    font-weight: bold;
    color: black; /* Blue color for class names */
    margin-top: 15px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .why-durosco-section .content-wrapper {
        flex-direction: column; /* تكديس رأسي */
    }

    /* تعديل ترتيب العناصر في قسم "Why Durosco" للموبايل */
    .why-durosco-section .content-wrapper {
        flex-direction: column-reverse; /* الصور أولاً ثم النص */
        gap: 20px; /* تقليل المسافة بين الصور والنص */
    }

    .why-durosco-section .image-with-overlays {
        order: -1; /* جعل قسم الصور يظهر أولاً */
        height: auto; /* السماح للعناصر بتحديد الارتفاع */
        width: 100%;
        max-width: 400px; /* للحفاظ على حجم معقول للصور */
        margin-bottom: 20px; /* مسافة بين الصور والنص */
        display: flex;
        flex-direction: row; /* جعل الصور البيضاوية بجانب بعضها البعض */
        justify-content: center;
        align-items: center;
        position: relative;
        /* هذا التحديد مهم لضمان بقاء الصور البيضاوية ضمن نطاق الشاشة */
        min-height: 200px; /* لضمان ظهور الصور حتى لو كانت المحتويات صغيرة */
    }

    /* إعادة ضبط موضع الصور البيضاوية لتكون بجانب بعضها في الموبايل */
    .why-durosco-section .oval-overlay {
        position: relative; /* لإزاحة العناصر عن الوضع المطلق */
        transform: none; /* إلغاء التحويلات السابقة */
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 0 5px; /* مسافة صغيرة بين الصورتين */
    }

    .man-overlay {
        width: 120px; /* حجم مناسب للموبايل */
        height: 160px;
    }

    .boy-vr-overlay {
        width: 140px; /* حجم مناسب للموبايل */
        height: 180px;
    }


    .why-durosco-section .text-content {
        align-items: center;
        text-align: center;
        padding-left: 0;
    }

    .why-durosco-section .section-title-arabic::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .classes-container {
        flex-direction: column; /* جعل الكروت تحت بعضها */
        align-items: center; /* توسيط الكروت */
    }

    .class-card {
        width: 90%; /* عرض أكبر للكروت لتكون بارزة */
        max-width: 350px; /* لتحديد أقصى عرض على الشاشات الصغيرة */
    }
}

@media (max-width: 480px) {
    .why-durosco-section .section-title-arabic {
        font-size: 2.2em;
    }

    .why-durosco-section .section-description-arabic {
        font-size: 1.1em;
    }

    .man-overlay {
        width: 100px; /* أصغر للموبايل الأصغر */
        height: 140px;
    }
    .boy-vr-overlay {
        width: 120px; /* أصغر للموبايل الأصغر */
        height: 160px;
    }

    .footer-actual-logo {
        width: 100px; /* أصغر قليلاً للفوتر في الشاشات الصغيرة جداً */
    }
    .footer-logo-text {
        font-size: 2em; /* أصغر قليلاً للفوتر في الشاشات الصغيرة جداً */
    }
    .footer-logo-english {
        font-size: 1em; /* أصغر قليلاً للفوتر في الشاشات الصغيرة جداً */
    }
    .social-icon img {
        height: 45px; /* أصغر قليلاً لأيقونات السوشيال ميديا */
    }
}
        /* تعريف المتغيرات الأساسية للألوان */
        :root {
            --primary-color: #3498db;
            --secondary-color: #2c3e50;
            --light-color: #f5f5f5;
            --white: #ffffff;
            --hover-color: #2980b9;
            --dark-blue: #004aad;
            --red-discount: #dc3545;
            --red-discount-dark: #c82333;
        }

        /* إعادة تعيين الهوامش والبادينغ الافتراضية وتعيين الخط */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Tajawal', Arial, sans-serif;
        }

        /* نمط الجسم */
        body {
            background-color: var(--light-color);
            min-height: 100vh;
        }

        /* شريط التقدم */
        .progress-bar {
            position: fixed;
            top: 70px; /* أسفل شريط التنقل العلوي */
            right: 0;
            left: 0;
            height: 4px;
            background: linear-gradient(to right, var(--primary-color) 0%, #5de0e6 100%);
            width: 0%;
            z-index: 999;
            transition: width 0.1s ease-out;
        }

        /* الشريط العلوي */
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 40px;
            background-color: white;
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 1000;
            height: 70px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        }

        /* مسافة فاصلة لرأس الصفحة لتجنب تداخل المحتوى مع الشريط العلوي الثابت */
        .header-spacer {
            height: 70px; /* نفس ارتفاع الشريط العلوي */
        }

        /* شعار الموقع */
        .logo img {
            height: 65px;
            display: block;
        }

        /* روابط التنقل الرئيسية */
        .nav-links {
            display: flex;
            gap: 50px;
            margin: 0 auto;
        }

        .nav-links a {
            text-decoration: none;
            color: #999;
            font-weight: bold;
            font-size: 17px;
            transition: color 0.3s ease;
            position: relative;
        }

        .nav-links a:hover {
            color: var(--dark-blue);
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            display: block;
            margin-top: 5px;
            right: 0; /* يبدأ من اليمين بسبب dir="rtl" */
            background: var(--dark-blue);
            transition: width 0.3s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        /* زر تسجيل الدخول/الحساب */
        .login-btn a {
            text-decoration: none;
            color: #004aad;
            background-color: white;
            border: 2px solid #004aad;
            padding: 10px 22px;
            border-radius: 25px;
            font-weight: bold;
            font-size: 15px;
            transition: all 0.3s ease;
            display: flex; /* لتمكين الأيقونة والنص في سطر واحد */
            align-items: center; /* لمحاذاة الأيقونة والنص عمودياً */
            gap: 8px; /* مسافة بين الأيقونة والنص */
        }

        .btn-signup:hover {
            background-color: #004aad;
            color: white;
        }

        .btn-account {
            background-color: #004aad;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(0, 74, 173, 0.2);
        }

        .btn-account:hover {
            background-color: #003d8f;
            border-color: #003d8f;
        }

        /* قائمة الهامبرغر (للموبايل) */
        .hamburger-menu {
            display: none; /* مخفي افتراضياً على الشاشات الكبيرة */
            flex-direction: column;
            justify-content: space-around;
            width: 30px;
            height: 25px;
            cursor: pointer;
            z-index: 1001;
        }

        .hamburger-menu span {
            display: block;
            width: 100%;
            height: 3px;
            background-color: #333;
            border-radius: 2px;
            transition: all 0.3s ease-in-out;
        }

        /* القائمة الجانبية */
        .sidebar {
            position: fixed;
            top: 0;
            right: -780px; /* مخفي افتراضياً */
            width: 280px;
            height: 100%;
            background-color: white;
            padding: 20px;
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
            transition: right 0.3s ease-in-out;
            z-index: 1000;
            display: flex;
            flex-direction: column;
        }

        .sidebar.active {
            right: 0; /* يظهر عند تفعيل الكلاس */
        }

        .sidebar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .sidebar-header .close-sidebar-btn {
            background: none;
            border: none;
            color: #333;
            font-size: 24px;
            cursor: pointer;
            margin-right : 210px ;
            top :20px
        }

        .sidebar ul {
            list-style: none;
            padding: 0;
            flex-grow: 1; /* لجعل القائمة تأخذ المساحة المتاحة وتدفع العناصر السفلية للأسفل */
        }

        .sidebar ul li {
            margin-bottom: 15px;
        }

        .sidebar ul li a {
            color: black;
            text-decoration: none;
            font-size: 18px;
            padding: 10px 15px;
            display: block;
            border-radius: 5px;
            transition: background-color 0.3s ease;
            display: flex; /* لتمكين الأيقونة والنص في سطر واحد */
            align-items: center; /* لمحاذاة الأيقونة والنص عمودياً */
            gap: 10px; /* مسافة بين الأيقونة والنص */
        }

        .sidebar ul li a:hover {
            background-color: #f0f0f0; /* لون رمادي فاتح عند التحويم */
        }

        .sidebar ul li a.active {
            background-color: var(--primary-color);
            color: var(--white);
        }

        /* معلومات المستخدم في القائمة الجانبية */
        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #333;
            padding: 10px 15px;
            background-color: #f5f5f5;
            border-radius: 8px;
            margin-top: auto; /* يدفع العنصر إلى الأسفل في Flex container */
            margin-bottom: 15px; /* مسافة قبل زر تسجيل الخروج */
        }

        .user-info i {
            font-size: 24px;
            color: var(--primary-color);
        }

        .user-info span {
            font-weight: bold;
        }

        /* زر تسجيل الخروج/الدخول في القائمة الجانبية */
        .logout-sidebar-btn {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: var(--red-discount);
            color: white;
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
            display: flex; /* لتمكين الأيقونة والنص في سطر واحد */
            align-items: center; /* لمحاذاة الأيقونة والنص عمودياً */
            justify-content: center; /* لمركزة الأيقونة والنص */
            gap: 10px; /* مسافة بين الأيقونة والنص */
        }

        .logout-sidebar-btn:hover {
            background-color: var(--red-discount-dark);
        }
       .whatsapp-support {
        position: fixed;
        bottom: 20px;
        left: 20px;
        background-color: #25d366;
        color: white;
        padding: 10px 15px;
        border-radius: 30px;
        font-size: 16px;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        z-index: 9999;
        transition: background-color 0.3s ease, transform 0.3s ease;
   }

.whatsapp-support:hover {
    background-color: #1ebe5d;
    transform: scale(1.05);
}

.whatsapp-support i {
    font-size: 20px;
}
@keyframes flashPulseShake {
  0% {
    transform: scale(1) rotate(0deg);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
    filter: brightness(1);
  }
  10% {
    transform: scale(1.05) rotate(-2deg);
    box-shadow: 0 0 10px 3px rgba(37, 211, 102, 0.6);
    filter: brightness(1.2);
  }
  20% {
    transform: scale(1.08) rotate(2deg);
    box-shadow: 0 0 14px 5px rgba(37, 211, 102, 0.5);
    filter: brightness(1.4);
  }
  30% {
    transform: scale(0.98) rotate(-3deg);
  }
  40% {
    transform: scale(1.04) rotate(2deg);
  }
  60% {
    transform: scale(1.02) rotate(-1deg);
    filter: brightness(1.1);
  }
  80% {
    transform: scale(1) rotate(0deg);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.0);
    filter: brightness(1);
  }
  100% {
    transform: scale(1);
  }
}

.super-flashy {
  animation: flashPulseShake 1.2s ease-in-out;
}
        /* Responsive Design (للقائمة الجانبية والشريط العلوي فقط) */
        @media (max-width: 768px) {
            .top-bar {
                padding: 0 20px;
            }
            .nav-links {
                display: none; /* إخفاء روابط التنقل الرئيسية */
            }
            .hamburger-menu {
                display: flex; /* إظهار قائمة الهامبرغر */
            }
            .login-btn {
                display: none; /* إخفاء زر تسجيل الدخول/الحساب على الشاشات الصغيرة */
            }
        }

@media (max-width: 480px) {
    .top-bar {
        padding: 0 15px;
        margin-right: 0%;
        margin-left: 30%;
        width: 100%;
    }
@media (max-width: 480px) {
    .progress-bar {
        display: none;
    }
}

.footer{
    width: 100%;
}

            .logo img {
                height: 40px;
            }
        }
@media (max-width: 480px) {
    .why-durosco-section .text-content p {
        font-size: 1.5em !important;
        transform: translateX(0) !important;
        padding-right: 10px !important;
        text-align: right;
        margin-left: 10px;
        width: 100%;
    }

    .why-durosco-section .text-content span {
        font-size: 1em !important;
    }

    .why-durosco-section .section-description-arabic {
        font-size: 0.85em;
        padding: 10px;
        text-align: justify;
        line-height: 1.6;
    }

    .why-durosco-section .content-wrapper {
        padding: 15px;
        flex-direction: column;
        gap: 20px;
    }
}