/* ===============================
   ✅ Reset & Box Sizing
================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: 0.2s ease;
}

/* ===============================
   ✅ Root Variables
================================= */
 :root {
     /* Brand Colors */
     --yello: #26ACB8;
     --black: #063539;
     --white: #ffffff;
     --gris: #B9B5B5;

     /* Text Colors */
     --text-primary: var(--black);
     --text-secondary: #555; /* لون الفقرات */
     --text-light: #aaa;
     --text-on-dark: #ffffff;

     /* Font */
     --main-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

     /* Font Sizes */
     --title-size: 3rem;
     --subtitle-size: 1.8rem;
     --main-size: 0.95rem;
     --small-size: 0.8rem;
     --btn-size: 1rem;

     /* Spacing */
     --section-padding: 4rem 2rem;

     /* Radius */
     --radius-sm: 5px;
     --radius-md: 10px;
     --radius-lg: 15px;

     /* Shadow */
     --shadow-sm: 0 3px 6px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 6px 15px rgba(0, 0, 0, 0.15);
     --shadow-lg: 0 12px 25px rgba(0, 0, 0, 0.2);
 }


/* ===============================
   ✅ Global Typography & Layout
================================= */
html, body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: var(--main-size);
  color: var(--white);
  background-color: var(--black);
  scroll-behavior: smooth;
  line-height: 1.6;
}

/* ===============================
   ✅ Global Links
================================= */
a {
  color: inherit;
  text-decoration: none;
}

/* ===============================
   ✅ Buttons
================================= */
.btn {
  margin-top: 15px;
  padding: 10px 18px;
  display: inline-block;
  background-color: var(--yello);
  color: var(--white);
  font-size: var(--btn-size);
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(38, 172, 184, 0.3);
  transition: all 0.3s ease;
}

.btn:hover {
  background-color: #1c8c97;
  letter-spacing: 1px;
  color: #fff;
}

/* ===============================
   ✅ Headings
================================= */
h1, h3, h4, h5 {
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--white);
}

p {
  margin-bottom: 1rem;
  color: var(--gris);
}

/* ===============================
   ✅ Sections
================================= */
section {
  padding: 4rem 2rem;
}

/* ===============================
   ✅ Utility Containers (Optional)
================================= */
/* .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
} */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background-color: var(--black);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 5%;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* الشعار */
.header .logo img {
  width: 80px;
  height: auto;
}

/* قائمة التنقل */
.header .navbar {
  display: flex;
  gap: 30px;
}

/* روابط القائمة */
.header .navbar a {
  color: var(--white);
  font-size: var(--main-size);
  text-decoration: none;
  padding-bottom: 5px;
  transition: color 0.3s, border-bottom 0.3s;
  position: relative;
}

.header .navbar a:hover {
  color: var(--gris);
  border-bottom: 2px solid var(--gris);
}

/* أيقونة القائمة (menu button) */
#menu-btn {
  display: none; /* مخفي افتراضياً في الديسكتوب */
  font-size: 24px;
  color: var(--white);
  cursor: pointer;
  padding: 5px;
}

/* تفعيل لون أيقونة القائمة عند hover */
#menu-btn:hover {
  color: var(--yello);
}

/* أيقونات أخرى */
.header .icons div {
  cursor: pointer;
  font-size: 20px;
  color: var(--white);
  padding: 5px;
  transition: color 0.3s;
}

.header .icons div:hover {
  color: var(--yello);
}

/* ======== استجابة الهاتف (responsive) ======== */
@media screen and (max-width: 768px) {

  /* إظهار زر القائمة */
  #menu-btn {
    display: block;
  }

  /* إخفاء القائمة بشكل افتراضي */
  .header .navbar {
    position: fixed;
    top: 60px; /* تحت الهيدر */
    left: -100%; /* مخفية خارج الشاشة */
    background-color: var(--black);
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 60px);
    gap: 0;
    padding-top: 20px;
    transition: left 0.3s ease;
    overflow-y: auto;
    z-index: 999;
  }

  /* عند تفعيل القائمة (مثلاً إضافة class active بواسطة JS) */
  .header .navbar.active {
    left: 0;
  }

  /* تنسيق روابط القائمة في الموبايل */
  .header .navbar a {
    padding: 15px 20px;
    border-bottom: 1px solid var(--gris);
    font-size: 1.2rem;
  }

  /* أيقونات إضافية، يمكن تعديلها حسب الحاجة */
  .header .icons {
    display: flex;
    align-items: center;
  }
}



/* section home */
.home {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: url(../img/bglight.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 4rem 2rem;
}

.home .intro {
    margin-left: 5%;
    max-width: 600px;
}

.home .intro h1 {
    font-size: 3rem; /* مثل courses */
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
}

.home .intro span {
    color: var(--yello);
}

.home .intro p {
    font-size: 0.9rem; /* مثل course-desc */
    color: #fff;
    line-height: 1.5;
    margin-bottom: 20px;
}

.home .intro .btn {
    background-color: var(--yello);
    color: var(--white);
    padding: 10px 30px;
    text-decoration: none;
    border-radius: 6px;
    font-size: var(--btn-size);
    display: inline-block;
    transition: 0.2s ease;
}

.home .intro .btn:hover {
    word-spacing: 2px;
}

/* section about */
.about {
    min-height: 100vh;
    padding: 60px 20px;
    background-color: #f9f9f9; /* فاتحة جداً */
    color: var(--black); /* نص أسود */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.about h1 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: var(--black);
}

.about span {
    color: var(--yello); /* لون أصفر من البراند */
}

.about-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: auto;
}

/* الحاويات داخل about — لون رمادي فاتح مع تباعد داخلي */
.about-text, .about-video {
    flex: 1;
    min-width: 300px;
    background-color: #f4f4f4; /* رمادي فاتح جداً */
    padding: 25px 30px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    color: var(--gris); /* نص رمادي */
}

/* عنوان فرعي داخل النص */
.about-text h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--black);
}

/* الفقرة داخل النص */
.about-text p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* قائمة النقاط */
.about-text ul {
    list-style: none;
    padding: 0;
}

.about-text li {
    margin-bottom: 10px;
    font-size: 1rem;
    color: var(--gris);
}

/* الفيديو */
.about-video iframe {
    width: 100%;
    height: 320px; /* مناسب للعرض */
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* استجابة الشاشة الصغيرة */
@media (max-width: 768px) {
    .about-container {
        flex-direction: column;
        align-items: center;
    }

    .about-video {
        width: 100%;
        padding: 0;
        margin-top: 20px;
    }

    .about-video iframe {
        width: 90vw;
        height: 80vh;
        display: block;
        border-radius: 0;
    }
}




/* ==========================
   قسم الدورات (courses)
========================== */

.courses {
  min-height: 100vh;
  padding: 4rem 2rem;
  background-color: #f9f9f9;
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.courses h1 {
  font-size: 3rem;
  color: var(--black, #f9a825);
  margin-bottom: 2rem;
  font-weight: 700;
}

.courses h1 span {
  color: var(--yello, #f9a825);
}

/* الحاوية العامة للبطاقات */
.courses .menu-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch; /* لجعل البطاقات بنفس الطول */
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* الرابط الحاوي للبطاقة - إزالة underline */
.courses .menu-container > a {
  text-decoration: none;
  color: inherit;
  display: inline-block; /* ليتصرف كعنصر كتلة بحجم البطاقة */
}

/* بطاقة الدورة */
.courses .menu-container .menu-card {
  background-color: #fff;
  width: 260px;
  height: 380px;
  border-radius: 15px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  padding: 20px 25px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.courses .menu-container .menu-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.2);
}

/* صورة الدورة */
.courses .menu-container .menu-card img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 20px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

/* عنوان الدورة */
.courses .menu-container .menu-card h3 {
  font-size: 1.8rem;
  color: var(--black, #222);
  margin-bottom: 10px;
  font-weight: 600;
  flex-grow: 1; /* ليأخذ المساحة المتبقية */
}

/* وصف الدورة */
.courses .menu-container .menu-card .course-desc {
  font-size: 0.9rem;
  color: #555;
  margin: 8px 0 12px;
  line-height: 1.3;
  min-height: 50px; /* للحفاظ على تناسق ارتفاع البطاقات */
  text-align: center;
}

/* تقييم النجوم */
.stars {
  margin-top: 12px;
}

.stars span {
  font-size: 14px;
  color: #ffc107; /* لون النجوم */
  margin: 0 2px;
  display: inline-block;
}

/* ================
   استجابة
================= */

@media (max-width: 768px) {
  .courses .menu-container {
    justify-content: center;
  }

  .courses .menu-container .menu-card {
    width: 100%;
    max-width: 350px;
  }
}
/* ==========================
   قسم المراجعات (Reviews)
========================== */

.reviews {
  min-height: 100vh;
  padding: 4rem 2rem;
  background-color: var(--black); /* خلفية داكنة */
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.reviews h1 {
  font-size: 3rem;
  color: var(--white);
  margin-bottom: 2rem;
  font-weight: 700;
}

.reviews h1 span {
  color: var(--yello); /* إبراز كلمة داخل العنوان */
}

.reviews .reviews-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.reviews .review-item {
  background-color: #fff; /* أبيض يبرز داخل الخلفية الداكنة */
  width: 280px;
  border-radius: 15px;
  padding: 25px 20px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.reviews .review-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.3);
}

.quote-icon {
  font-size: 40px;
  color: var(--yello);
  margin-bottom: 15px;
}

.reviews .review-item p {
  font-size: 0.95rem;
  color: var(--gris); /* رمادي ناعم */
  line-height: 1.5;
  margin-bottom: 15px;
  text-align: center;
  min-height: 100px;
}

.reviews .review-item .photo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

.reviews .review-item h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--black); /* اسم المراجع */
  margin-bottom: 10px;
}

.reviews .review-item .stars {
  display: flex;
  justify-content: center;
  gap: 3px;
}

.reviews .review-item .stars span {
  font-size: 16px;
  color: #ffc107;
}

@media (max-width: 768px) {
  .reviews .review-item {
    width: 100%;
    max-width: 350px;
  }
}
/* section contact */
.contact {
    min-height: 100vh;
    text-align: center;
    background-color: var(--black); /* داكن جدًا */
    padding: 60px 20px;
    color: var(--white);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.contact h1 {
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: var(--white);
}

.contact h1 span {
    color: var(--yello);
}

.contact .contact-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center;
}

/* خريطة جوجل */
.contact .contact-container .map {
    flex: 1 1 450px;
    width: 100%;
    height: 450px;
    border-radius: 20px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
    border: none;
    object-fit: cover;
}

/* نموذج الاتصال */
.contact .contact-container form {
    flex: 1 1 450px;
    background-color: var(--white); /* خلفية بيضاء للنموذج */
    padding: 30px 25px;
    border-radius: 15px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    color: var(--black);
    text-align: left;
}

/* الحاويات الداخلية في الفورم (المدخلات مع الأيقونات) */
.contact form div {
    display: flex;
    align-items: center;
    margin: 15px 0;
    background-color: #f4f4f4; /* رمادي فاتح لخلفية الحقول */
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px 12px;
}

/* الأيقونات داخل الحقول */
.contact form div span {
    color: var(--yello);
    font-size: 18px;
    margin-right: 12px;
    min-width: 25px;
    text-align: center;
}

/* حقول الإدخال */
.contact form div input,
.contact form div textarea {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--black);
    outline: none;
    padding: 8px 0;
    resize: vertical; /* textarea */
}

/* textarea للمسج */
.contact form div textarea {
    min-height: 80px;
}

/* زر الإرسال */
.contact form .submit {
    background-color: var(--yello);
    color: var(--black);
    width: 50%;
    padding: 12px 0;
    margin-top: 20px;
    border: none;
    border-radius: 6px;
    font-size: var(--btn-size);
    font-weight: 600;
    cursor: pointer;
    transition: word-spacing 0.3s ease;
    display: inline-block;
    text-align: center;
}

.contact form .submit:hover {
    word-spacing: 4px;
}

/* استجابة الهاتف */
@media (max-width: 768px) {
    .contact .contact-container {
        flex-direction: column;
    }
    .contact .contact-container .map,
    .contact .contact-container form {
        flex: 1 1 100%;
        width: 100%;
        height: auto;
    }
    .contact form .submit {
        width: 100%;
    }
}



.footer {
    background-color: var(--black);
    color: white;
    text-align: center;
    padding: 30px 10px;
}

.footer .social-icons {
    margin-bottom: 15px;
}

.footer .social-icons a {
    color: white;
    margin: 0 10px;
    font-size: 24px;
    transition: 0.3s;
}

.footer .social-icons a:hover {
    color: var(--yello); /* أو أي لون تريده */
}


.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    color: white;
    border-radius: 50%;
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    z-index: 1000;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}


.whatsapp-float:hover {
    background-color: #20b358;
    transform: scale(1.1);
}


/* media queries */
@media(max-width: 770px){
    :root{
        --main-size : 17px;
        --title-size : 60px;
        --btn-size : 17px;
        --sub-size : 15px;
    }
    .header .navbar a{
        margin: 10px 10px;
    }
}


/* ========= 🎓 COURSE LANDING PAGE ONLY ========== */

/* Container */
.course-landing {
  max-width: 950px;
  margin: 100px auto;
  padding: 40px 20px;
  background-color: #fdfdfd;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  font-family: var(--main-font);
}

/* Hero */
.course-landing .course-hero {
  text-align: center;
  margin-bottom: 2rem;
}
.course-landing .course-hero h1 {
  font-size: var(--title-size);
  color: var(--black);
}
.course-landing .course-hero h1 span {
  color: var(--yello);
}
.course-landing .course-hero p {
  font-size: var(--subtitle-size);
  color: var(--text-secondary);
  margin-top: 1rem;
}

/* Video */
.course-landing .course-video {
  text-align: center;
  margin-bottom: 2rem;
}

/* WHY + FOR WHO */
.course-landing .course-value-target {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.course-value-target h2,
.course-modules h2,
.course-modules details summary,
.course-faq h2 {
  text-align: right;
  direction: rtl;
}

/* للتأكد من أن قائمة العناصر تظهر يمين */
.course-value-target ul,
.course-modules details ul,
.course-faq ul {
  direction: rtl;
  text-align: right;
}

/* أيضا نزيد التباعد قليلاً لجمالية أفضل */
.course-value-target h2,
.course-modules h2,
.course-faq h2 {
  margin-bottom: 15px;
  font-weight: bold;
}


.course-landing .course-value,
.course-landing .course-target {
  flex: 1 1 45%;
  padding: 20px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.course-landing .course-value {
  background-color: #f1fbfc;
  border: 2px solid var(--yello);
}

.course-landing .course-target {
  background-color: #ffffff;
  border: none;
}

.course-landing .course-value h2,
.course-landing .course-target h2 {
  color: var(--black);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.course-landing .course-value ul,
.course-landing .course-target ul {
  padding-right: 1.5rem;
  direction: rtl;
  color: var(--text-secondary);
}

/* Image Placeholder */
.course-landing .course-image-placeholder {
  text-align: center;
  margin: 2rem 0;
}
.course-landing .course-image-placeholder img {
  max-width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* MODULES / DETAILS */
.course-landing .course-modules h2 {
  color: var(--black);
  font-size: 1.6rem;
  margin-bottom: 1rem;
  text-align: right;
}
.course-landing .course-modules details {
  background-color: #fff;
  margin-bottom: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--yello);
  padding: 15px 20px;
  transition: 0.3s;
}
.course-landing .course-modules summary {
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--black);
  cursor: pointer;
  list-style: none;
}
.course-landing .course-modules details[open] {
  background-color: #eafcff;
}
.course-landing .course-modules ul {
  margin-top: 10px;
  padding-right: 1.5rem;
  color: var(--text-secondary);
  direction: rtl;
}

/* INFO (مدة - مكان - السعر) */
.course-landing .course-info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 3rem 0;
  gap: 20px;
}

.course-landing .info-box {
  flex: 1 1 30%;
  padding: 20px;
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.course-landing .info-box.duration {
  background-color: #e8fafd;
  color: var(--black);
  border: 2px solid var(--yello);
}

.course-landing .info-box.price {
  background-color: var(--yello);
  color: var(--white);
  border: none;
}

.course-landing .info-box.location {
  background-color: #fff;
  border: 2px dashed var(--yello);
  color: var(--black);
}

.course-landing .info-box h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: inherit;
}
.course-landing .info-box p {
  font-size: 1rem;
  color: inherit;
}

/* FAQ */
.course-landing .course-faq {
  margin-top: 3rem;
  text-align: right;
  direction: rtl;
}
.course-landing .course-faq h2 {
  font-size: 1.4rem;
  color: var(--black);
  margin-bottom: 1rem;
}
.course-landing .course-faq ul {
  padding-right: 1.5rem;
  list-style: none;
}
.course-landing .course-faq li {
  margin-bottom: 12px;
  color: var(--text-secondary);
}
.course-landing .course-faq strong {
  color: var(--black);
}


/* CTA Button Section */
.course-landing .cta {
  text-align: center;
  margin-top: 3rem;
}
.course-landing .btn {
  margin-top: 1rem;
}

/* Form (inside course page only) */
.course-landing .join {
  display: flex;
  flex-direction: column;
  background: #fff;
  gap: 15px;
  padding: 25px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  margin-top: 20px;
  /* direction: rtl; 
  text-align: right; */
}
.course-landing .join div {
  display: flex;
  flex-direction: column;
}
.course-landing .join span {
  font-weight: bold;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.course-landing .join input[type="text"],
.course-landing .join input[type="email"],
.course-landing .join input[type="tel"],
.course-landing .join input[type="number"] {
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: var(--radius-sm);
  transition: border-color 0.3s ease;
}
.course-landing .join input:focus {
  border-color: var(--yello);
  outline: none;
}
.course-landing .join label {
  font-size: var(--small-size);
  color: var(--text-secondary);
}
.course-landing .join .submit {
  background-color: var(--yello);
  color: #000;
  border: none;
  padding: 12px 18px;
  font-size: 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-top: 10px;
  transition: background-color 0.3s;
}
.course-landing .join .submit:hover {
  background-color: #1e98a5;
}

/* RESPONSIVE FIX: Stack Value/Target Boxes */
@media (max-width: 768px) {
  .course-landing h1 {
    font-size: 1.8rem;
    line-height: 1.4;
    padding: 0 10px;
  }

  .course-landing h1 span {
    display: block;
    font-size: 1.7rem;
  }

  .course-landing .course-hero p {
    font-size: 1rem;
    padding: 0 10px;
  }


  .course-landing .course-value,
  .course-landing .course-target {
    flex: 1 1 100%;
  }


}

.multi-level-title {
  text-align: right;
  color: var(--black);
  margin: 60px 0 20px;
  font-size: 1.8rem;
}

.course-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.level-card {
  flex: 1 1 30%;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--yello);
  direction: rtl;
}

.level-card h3 {
  color: var(--black);
  margin-bottom: 10px;
  text-align: right;
}

.level-card p {
  color: var(--text-secondary);
  font-size: var(--main-size);
  text-align: right;
}

.level-note {
  margin-top: 30px;
  font-size: var(--main-size);
  color: var(--text-secondary);
  text-align: right;
  background-color: #f0f8fa;
  padding: 15px;
  border-radius: var(--radius-md);
  border-right: 5px solid var(--yello);
}

@media (max-width: 768px) {
  .course-levels {
    flex-direction: column;
  }

  .level-card {
    flex: 1 1 100%;
  }

  .multi-level-title,
  .level-card h3,
  .level-card p,
  .level-note {
    text-align: right;
  }

  .level-note {
    font-size: 0.9rem;
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .multi-level-title {
    font-size: 1.5rem;
  }

  .level-card h3 {
    font-size: 1.2rem;
  }

  .level-card p {
    font-size: 0.9rem;
  }

  .level-note {
    font-size: 0.85rem;
  }
}


.trainer-section.blue {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  background-color: var(--yello); /* خلفية موحدة زرقاء */
  border-radius: var(--radius-md);
  margin: 80px 0;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* Text section (right) */
.trainer-section.blue .trainer-details {
  flex: 1;
  padding: 40px 30px;
  direction: rtl;
  text-align: right;
  color: var(--white);
}

.trainer-section.blue .trainer-details h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: var(--white);
}

.trainer-section.blue .trainer-name {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 20px;
}

.trainer-section.blue .trainer-details ul {
  list-style: none;
  padding: 0;
}

.trainer-section.blue .trainer-details li {
  margin-bottom: 10px;
  font-size: 1rem;
}

/* Image section (left) */
.trainer-section.blue .trainer-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: end;
  padding: 20px;
}

.trainer-section.blue .trainer-image img {
  width: 100%;
  max-width: 400px;
  object-fit: contain;
  margin-bottom: -20px;
}
@media (max-width: 768px) {
  .trainer-section.blue {
    flex-direction: column-reverse;
    text-align: center;
    position: relative;
  }

  .trainer-section.blue .trainer-details {
    padding: 30px 20px;
  }

  .trainer-section.blue .trainer-image {
    padding: 0;
    margin-top: -40px; /* يدفع الصورة للأسفل */
    z-index: 2;
  }

  .trainer-section.blue .trainer-image img {
    max-width: 90%;
    margin: 0 auto;
    display: block;
    transform: translateY(20px); /* يخرج الصورة قليلاً للأسفل */
  }

  .trainer-section.blue .trainer-details {
    text-align: center;
    align-items: center;
  }

  .trainer-section.blue .trainer-details h2 {
    text-align: center;
  }

  .trainer-section.blue .trainer-details p {
    text-align: center;
  }

}



@media(max-width: 635px){
    #menu-btn{
        display: inline-block;
    }
    .header .navbar{
        position: absolute;
        top: 100%; right: -100%;
        background: var(--white);
        width: 90%;
        height: calc(100vh - 80px);
    }
    .header .navbar.active{
        right: 0;
    }
    .header .navbar a{
        display: block;
        text-align: center;
        color: var(--black);
        padding: 5px;
        font-size: 14px;
    }
    .header .search-form , .header .cart-items-container {
        width: 90%;
    }

    .home{
        justify-content: center;
        text-align: center;
    }

}