:root {
  --blue: #0b5588;
  --muted: #6b6b6b;
}

* {
  box-sizing: border-box
}

body {
  font-family: 'Cairo', system-ui, Arial sans-serif;
  margin: 0;
  background: #fff;
  color: #111
}

header.site-header {
  position: fixed;
  /* تثبيت */
  top: 0;
  right: 0;
  width: 100%;
  background: #fff;
  /* مهم حتى لا يصبح شفاف */
  z-index: 1000;
  border-bottom: 4px solid #e6eef5;
}

.container {
  max-width: 1150px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo (right) */
.brand {
  display: flex;
  align-items: center;
  gap: 12px
}

.brand .logo-mark {
  width: 44px;
  height: 44px;
  background: var(--blue);
  color: #fff;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 700
}

.site-logo {
  height: 45px;
  display: block;
  margin-inline-start: 8px
}

/* Navigation centered */
nav.main-nav {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}

nav.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 30px;
}

nav.main-nav a {
  color: #222;
  text-decoration: none;
  font-weight: 500
}

nav.main-nav a:hover {
  color: var(--blue)
}

/* زر الموبايل */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: var(--blue);
}


@media (max-width:760px) {

  
  .menu-toggle {
    display: block;
    z-index: 10001;
  }

  nav.main-nav {
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        background: #fff;
        max-height: 0;
        overflow: hidden;
        transition: 0.4s;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

  nav.main-nav.open {
    max-height: 500px;
  }

  nav.main-nav ul {
  flex-direction: column;
    padding: 20px;
    gap: 20px;
    align-items: flex-start;
  }

  
  .logo {
    display: none;
  }
}


/*===================================================*/


.quick-menu {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
}

/* الخلفية الزجاجية */
.quick-menu-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 10px ;
  border-radius: 18px;
  transition: 0.4s ease;
}

/* الروابط */
.quick-menu-items a {
  text-decoration: none;
  padding: 5px 10px;
  width: auto;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(12px);
  color: #222;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  font-weight: 400;
  transition: 0.3s;
  text-align: center;
}

.quick-menu-items a:hover {
  background: #0b5588;
  color: #fff;
}

/* زر السهم */
/* 1. تعريف الحركة مرة واحدة فقط لكل الموقع */
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
    transform: scale(1);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(37, 99, 235, 0);
    transform: scale(1.05);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    transform: scale(1);
  }
}

/* 2. تنسيق الزر */
.menu-toggle-btn {
  margin-top: 12px;
  background: #2563EB;
  /* لون بنيتك المعتمد */
  color: #fff;
  border: none;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  transition: 0.4s;
  animation: pulse-glow 2s infinite;
  /* استدعاء الحركة */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1000;
}

/* 3. تأثير التحويم */
.menu-toggle-btn:hover {
  animation: none;
  /* إيقاف النبض عند التفاعل */
  background: #1d4ed8;
  box-shadow: 0 5px 20px rgba(37, 99, 235, 0.4);
}

/* 4. تنسيق السهم (إذا كنت تحتاج خصائص إضافية له) */
#menuArrow {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.4s;
  cursor: pointer;
  /* ملاحظة: لا داعي لإضافة الأنيميشن هنا إذا كان الزر الأب يمتلكها بالفعل */
}


/* دوران */
.menu-toggle-btn.rotate {
  transform: rotate(180deg);
}

/* عند الطي */
.quick-menu.closed .quick-menu-items {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  
}

.move-right{
  display: flex;
  align-items: center;
  gap: 16px;
}

/* الفاصل */
.bunya-divider {
  position: relative;
  text-align: center;
  margin: 50px 0;
}

/* الخط المتدرج */
.bunya-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to left,
      transparent,
      var(--blue),
      transparent);
  transform: translateY(-50%) scaleX(0);
  transform-origin: center;
  transition: 0.8s ease;
}

/* الدائرة */
.bunya-divider span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(11, 85, 136, 0.15);
  letter-spacing: 1px;

  opacity: 0;
  transform: translateY(20px);
  transition: 0.6s ease;
}

.menu-toggle-text {
  border-bottom: var(--blue) 2px solid;
  background-color: rgb(255, 255, 255);
  padding: 7px;
  border-radius: 15px;
}
.quick-menu-items .aa{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  box-shadow: rgb(15, 223, 11) 0 0px 12px;
}
/* عند الظهور */
.bunya-divider.show::before {
  transform: translateY(-50%) scaleX(1);
}

.bunya-divider.show span {
  opacity: 1;
  transform: translateY(0);
}
/* Hero section matching the provided design */
.hero {
  background: linear-gradient(to bottom, #f0f6fb 0%, #fff0f4 120%);
  padding: 100px 0 28vh;
  direction: rtl;
  /* للتأكد من الاتجاه العربي */
}

.hero-inner {
  display: block;
  text-align: center;
}

.hero-title {
  font-size: 42px;
  color: var(--blue);
  margin: 6px 0 14px;
  font-weight: 700;
  line-height: 1.4;
}

.hero-sub {
  max-width: 820px;
  margin: 0 auto;
  color: #6b6b6b;
  font-size: 18px;
  line-height: 1.8;
}

.cards {
  display: flex;
  gap: 28px;
  margin-top: 40px;
  justify-content: space-between;
}

.card {
  background: #fff;
  border-radius: 12px;
  flex: 1;
  min-height: 160px;
  padding: 28px 28px 22px;
  box-shadow: 0 8px 18px rgba(11, 85, 136, 0.06);
  text-align: right;
  position: relative;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 22px;
  position: absolute;
  top: 18px;
  left: 18px;
}

/* تعديل الألوان لتناسب الأيقونات الجديدة */
.bg-accent-green {
  background: #e8f5e9;
  color: #2e7d32;
}

.bg-pink {
  background: #fce4ec;
  color: #d81b60;
}

.bg-blue {
  background: #e3f2fd;
  color: #1565c0;
}

.card-title {
  color: var(--blue);
  font-size: 20px;
  margin: 48px 0 8px;
  font-weight: 700;
}

.card-desc {
  color: #7b7b7b;
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width:980px) {
  .hero-title {
    font-size: 34px;
  }

  .cards {
    gap: 18px;
  }
}

@media (max-width:760px) {
  .cards {
    flex-direction: column;
    padding: 0 20px;
  }

  .card {
    width: 100%;
    margin-left: 0 !important;
    margin-bottom: 20px;
  }
}

.Deploma-title{
  text-align: center;
}

/* تنسيق موحد لشبكة الدبلوم والبكالوريوس */
.D-pill-grid,
.B-pill-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
  /* هذا يضمن توسيط الحاوية */
  padding: 20px;
  box-sizing: border-box;
  /* يضمن أن الـ padding لا يزيد عرض الحاوية */
}

/* للشاشات المتوسطة (Tablets) */
@media (max-width: 992px) {

  .D-pill-grid,
  .B-pill-grid {
    gap: 15px;
    padding: 15px;
  }
}

/* للشاشات الصغيرة جداً (الجوال) */
@media (max-width: 768px) {

  /* تصغير الشبكة لتناسب الجوال */
  .D-pill-grid,
  .B-pill-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    /* تقليل المسافة بين البطاقات */
    padding: 10px;
  }

  .program-card {
    display: flex;
    flex-direction: column;
    /* الترتيب الذي اقترحته */
    align-items: center;
    padding: 15px;
    /* تقليل الحشو الداخلي لتصغير حجم البطاقة */
    border-radius: 12px;
    text-align: center;
  }

  /* تصغير الأيقونة قليلاً */
  .card-icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
  }

  /* تصغير نصوص العناوين */
  .card-content h3 {
    font-size: 1rem;
    /* تصغير طفيف للعنوان */
    margin-bottom: 4px;
    color: #111827;
  }

  .card-content p {
    font-size: 0.8rem;
    /* تصغير الوصف (بكالوريوس • 4 سنوات) */
    margin-bottom: 12px;
    color: #6b7280;
  }

  /* زر التفاصيل بلمسة أنيقة وصغيرة */
  .details-btn {
    width: 100%;
    /* عرض كامل لسهولة الضغط */
    padding: 8px;
    /* تقليل سمك الزر */
    font-size: 0.85rem;
    /* تصغير نص الزر */
    justify-content: center;
    background-color: #f0f7ff;
    /* خلفية هادئة */
    color: #2563EB;
    /* لون هويتك */
    border: 1px solid #dbeafe;
    border-radius: 8px;
  }

  .details-btn i {
    font-size: 0.75rem;
    /* تصغير أيقونة السهم */
    margin-right: 5px;
  }
}

/* تنسيق البطاقة الموحد */
.program-card {
  width: 100%;
  box-sizing: border-box;
  /* أضف هذا السطر لضمان عدم تمدد البطاقة خارج حدودها */
  overflow: hidden;
}

/* Programs: separate semantic sections so they can be styled independently */
.programs-institutes,
.programs-bachelor{
  width:100%;
  margin-bottom:28px;
}



/* Ensure the programs container stacks its child sections vertically
   (overrides the global .container which is a flex row) */
.programs > .container{
  /* display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:20px; */
}



/* Fees section styles */
.fees-section{padding:48px 0;display:flex;align-items:center;justify-content:center;min-height:60vh}
.fees-title{font-size:34px;color:var(--blue);text-align:center;margin:6px 0;}
.fees-sub{text-align:center;color:#6b6b6b;margin-bottom:18px}
.fees-grid{display:flex;flex-direction:column;gap:18px;align-items:center;max-width:1000px;width:100%}
.fees-card-wrap{align-self:center}
.fees-title-wrap{align-self:center;text-align:center}
.fees-center{display:flex;flex-direction:column;align-items:center}
.fees-tabs{display:flex;gap:18px;justify-content:center;margin-bottom:22px}
.fees-tabs .tab{background:#eaf4ff;border-radius:12px;padding:12px 26px;border:2px solid transparent;font-weight:600;color:var(--blue);cursor:pointer}
.fees-tabs .tab.active{background:#fff;border-color:var(--blue);box-shadow:0 6px 0 rgba(11,85,136,0.06)}

.fees-card{background:#fff;border-radius:10px;box-shadow:0 8px 18px rgba(11,85,136,0.04);overflow:hidden}
.fees-card-header{background:linear-gradient(90deg,#e9f0fb,#f9eef2);padding:28px;text-align:center;color:var(--blue);font-weight:700;font-size:20px}
.fees-table{width:100%;border-collapse:collapse}
.fees-table td{padding:18px 22px;border-bottom:1px solid #f0f0f0}
.fees-table td:last-child{text-align:left;color:var(--blue);font-weight:700}
.fees-table td:first-child{text-align:right;color:#333}

.fees-tables{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:18px;}
.fees-table-card{background:transparent;border-radius:8px;position: relative}
.rr ::after {
  content: "";
  position: absolute;
  top: 0;
  left: -15px;
  width: 2px;
  height: 100%;
  background: var(--blue);
  margin-left: 5px;
}
.fees-table-title{font-weight:700;color:var(--blue);padding:12px 6px 8px;text-align:right; border-right: 3px solid var(--blue); border-bottom: 3px solid var(--blue); width: fit-content;  border-radius: 7px; box-shadow: inset ;
display: flex;
align-items: center;}

.flag{
  margin-right: 8px;
}

.fees-divider {
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--blue), transparent);
  position: relative;
  overflow: hidden;
}

.fees-divider::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 40px;
  background: rgba(11, 85, 136, 0.3);
  animation: dividerFlow 2.5s linear infinite;
}

@media (max-width:900px){
  .fees-tables{grid-template-columns:1fr;}
  
}

@media (max-width:760px){
  .fees-tabs{flex-direction:row;gap:12px}
  .fees-card-header{text-align:center}
  .fees-table td{padding:14px}
}

@media (max-width:1000px){
  /* keep vertical on smaller screens; center-align title and card for narrow view */
  .fees-title{order:0;text-align:center}
  .fees-center{order:1}
  .fees-card-wrap{order:2;align-self:center}
  .fees-title-wrap{align-self:center}
}

/* ============================= */
/* Calculator Layout */
/* ============================= */

.calculator-section {
  padding: 60px 20px;
  background: linear-gradient(180deg, #fbfdff, #ffffff);
  display: flex;
  justify-content: center;
}

.calculator-title {
  text-align: center;
  font-size: 32px;
  color: var(--blue);
}

.calculator-sub {
  text-align: center;
  color: #666;
  margin-bottom: 25px;
}

.calculator-card {
  background: #fff;
  padding: 30px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  max-width: 500px;
  width: 100%;
}

/* ============================= */
/* Rows */
/* ============================= */

.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 15px;
}

.calc-row label {
  font-weight: 600;
}

/* ============================= */
/* Select Style */
/* ============================= */

/* ====== SELECT STYLE UPGRADE ====== */
/* ============================= */
/*        CALCULATOR UI          */
/* ============================= */

.calculator-section {
  padding: 60px 0;
  display: flex;
  justify-content: center;
}

.calculator-section .container {
  max-width: 650px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.calculator-title {
  font-size: 32px;
  color: var(--blue);
  margin-bottom: 6px;
  font-weight: 800;
}

.calculator-sub {
  color: #6b6b6b;
  margin-bottom: 30px;
}

.calculator-card {
  background: #fff;
  padding: 28px;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(11, 85, 136, 0.08);
  text-align: right;
}
.star{
  color: red;
  font-weight: bold;
  font-size: 20px;
}

.new-currency{
  font-size: 15px;
  color: red;
}

/* ============================= */
/*          ROW STYLE            */
/* ============================= */

.calc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.calc-row label {
  font-weight: 600;
  color: #333;
  min-width: 160px;
}
.flag-icon{

}

/* ============================= */
/*         SELECT DESIGN         */
/* ============================= */

.select-control {
  flex: 1;
  padding: 12px 16px;
  border-radius: 14px;
  border: 2px solid #e6edf5;
  background: linear-gradient(145deg, #ffffff, #f3f9ff);
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  transition: all .3s ease;
  appearance: none;
}

.select-control:hover {
  border-color: var(--blue);
  box-shadow: 0 6px 18px rgba(11, 85, 136, 0.08);
}

.select-control:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(11, 85, 136, 0.15);
}

/* ============================= */
/*       COUNTER DESIGN          */
/* ============================= */

.counter-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: linear-gradient(145deg, #f3f9ff, #ffffff);
  padding: 10px 18px;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(11, 85, 136, 0.07);
}

#minus-btn,
#plus-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  font-size: 20px;
  font-weight: bold;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  transition: all .25s ease;
}

#minus-btn:hover,
#plus-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(11, 85, 136, 0.25);
}

#subject-count {
  font-size: 20px;
  font-weight: 800;
  color: var(--blue);
  min-width: 30px;
  text-align: center;
}

/* ============================= */
/*         RESULTS CARD          */
/* ============================= */

.calc-results {
  margin-top: 30px;
  background: linear-gradient(145deg, #ffffff, #f5faff);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 12px 28px rgba(11, 85, 136, 0.08);
  animation: fadeIn .4s ease;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px dashed #e5edf5;
}

.detail-row:last-child {
  border-bottom: none;
}

.total-row {
  margin-top: 18px;
  font-size: 22px;
  font-weight: 800;
  color: var(--blue);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================= */
/*          MOBILE FIX           */
/* ============================= */

@media (max-width:760px) {

  .calc-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .calculator-card {
    text-align: center;
  }

  .detail-row {
    font-size: 14px;
  }

  .total-row {
    font-size: 20px;
  }
}

/*                         */
/*         note desighn     */
.notes {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.note {
  padding: 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.6;
  animation: fadeIn .6s ease;
}

.note-yellow {
  background: linear-gradient(145deg, #fffbe6, #fff3c4);
  border: 1px solid #f2e2a0;
  color: #5a4b00;
}

.note-pink {
  background: linear-gradient(145deg, #fff3fb, #f9e4ff);
  border: 1px solid #e9ccf5;
  color: #5a2a7a;
}


/* Documents required section */
.documents-section{padding:40px 0 120px}
.documents-section .section-title{color: var(--blue);font-size: 34px; margin: 0 0 6px}
.documents-section > .container{display:flex;flex-direction:column;gap:18px;align-items:center}
.docs-wrap{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.docs-tabs{display:flex;flex-direction:row;gap:10px;overflow:auto;margin-bottom:12px}
.docs-tab{padding:12px 14px;border-radius:10px;background:#f6f9fc;border:1px solid rgba(11,85,136,0.06);cursor:pointer;text-align:right;font-weight:600;color:var(--blue)}
.docs-tab.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.docs-content{flex:1;background:#fff;border-radius:10px;padding:18px;box-shadow:0 10px 28px rgba(11,85,136,0.08);min-height:180px}
.docs-note{color:#6b6b6b;margin-bottom:12px;white-space:normal;word-break:break-word;line-height:1.5;max-width:720px;min-height:3em}
.docs-list{display:block;list-style:none;padding:0;margin:0}
.docs-list li{background:#fff;padding:16px;border-radius:12px;border:1px solid #e6eef5;text-align:right;margin-bottom:12px;display:block;width:100% !important;max-width:100% !important;box-sizing:border-box;font-size:16px;box-shadow:0 6px 18px rgba(11,85,136,0.06);transition:transform .18s ease,box-shadow .18s ease;float:none !important}

/* Strong overrides to prevent side-by-side layout from other rules */
.docs-content .docs-list{display:block !important}
.docs-content .docs-list li{display:block !important;width:100% !important;max-width:100% !important;margin-left:0 !important;margin-right:0 !important}
.docs-list li:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(11,85,136,0.10)}

@media (max-width:900px){
  .docs-wrap{flex-direction:column}
  .docs-tabs{flex-direction:row;overflow:auto;min-width:0}
  .docs-tab{white-space:nowrap}
  .docs-list{grid-template-columns:1fr}
}

/* Important notes box below documents */
.docs-important-notes{background:#fff9e6;border:1px solid #f0e3a8;padding:16px;border-radius:10px;margin-top:14px;color:#5a4b00}
.docs-important-notes h4{margin:0 0 8px;font-weight:700;color:#7a4f00}
.docs-important-notes ul{margin:0;padding:0 0 0 18px}
.docs-important-notes li{margin:6px 0}

/* outside notes (separate box) */
.docs-important-notes-outside{background:#fff9e6;border:1px solid #f0e3a8;padding:18px;border-radius:12px;margin-top:18px;color:#5a4b00;display:block}
.docs-important-notes-outside .notes-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:#7a4f00}
.docs-important-notes-outside .pin{font-size:18px}
.docs-important-notes-outside ul{list-style:none;margin:0;padding:0}
.docs-important-notes-outside li{position:relative;padding-right:34px;margin:10px 0;padding-left:12px}
.docs-important-notes-outside li:before{content:'✔';position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;color:#2e7d32;font-weight:700;border-radius:50%;font-size:14px}

/* Resources / links section */
.resources-section{padding:40px 0}
.resource-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.resource-item{background:#fff;border-radius:12px;padding:18px;box-shadow:0 8px 18px rgba(11,85,136,0.04);text-align:right}
.resource-item h3{margin:0 0 8px;color:var(--blue)}
.resource-item a{color:var(--blue);text-decoration:underline}

@media (max-width:900px){
  .resource-list{grid-template-columns:1fr}
}

.price {
  direction: ltr;
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  color: var(--blue);
}

.currency {
  font-size: 14px;
  opacity: 0.8;
}

.amount {
  font-weight: 700;
}






/***************************************************/
/*تنسيق بطاقات التخصصات المنبثقة*/
.program-details {
  padding: 10px;
  direction: rtl;
}

.program-title {
  color: #2d3436;
  border-bottom: 2px solid #00b894;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.info-section {
  margin-bottom: 20px;
}

.info-section h3 {
  font-size: 1.1rem;
  color: #0984e3;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-section ul {
  list-style: none;
  padding: 0;
}

.info-section li {
  margin-bottom: 8px;
  padding-right: 15px;
  position: relative;
}

.info-section li::before {
  content: "•";
  position: absolute;
  right: 0;
  color: #0984e3;
}

.highlight {
  background: #f1f2f6;
  padding: 15px;
  border-radius: 10px;
  border-right: 5px solid #0984e3;
}

.cost-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 10px;
}

.cost-item span {
  display: block;
  font-size: 0.85rem;
  color: #636e72;
}

.cost-item strong {
  color: #d63031;
  font-size: 1rem;
}

.note {
  font-size: 0.8rem;
  color: #b2bec3;
  margin-top: 15px;
  font-style: italic;
}




/* تصميم البطاقة الجديد */
.program-card {

  /* الحاوية التي تحتوي على البطاقات الأربعة */
  background: #ffffff;
  border-radius: 15px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid #eee;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  position: relative;
}

.program-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border-color: #00b894;
  /* لون التميز الخاص بموقعك */
}

/* الأيقونة */
.card-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
  background: #f1f2f6;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* النصوص */
.card-content h3 {
  font-size: 1.1rem;
  color: #2d3436;
  margin-bottom: 8px;
}

.card-content p {
  font-size: 0.9rem;
  color: #636e72;
  margin-bottom: 15px;
}

/* زر التفاصيل الدائم */
.details-btn {
  background: #0984e3;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
  width: 100%;
  margin-top: auto;
  /* يجعله دائماً في أسفل البطاقة */
}

.program-card:hover .details-btn {
  background: #00b894;
}


/* تصميم خلفية النافذة */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.modal-overlay.active {
  display: flex;
}

/* تصميم صندوق المعلومات */
.modal-window {
  background: white;
  width: 90%;
  max-width: 500px;
  padding: 30px;
  border-radius: 20px;
  position: relative;
  direction: rtl;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.close-btn {
  position: absolute;
  top: 0px;
  left: 28x;
  font-size: 35px;
  cursor: pointer;
  color: #666;
}

.details-header h2 {
  color: #0984e3;
  margin-bottom: 20px;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}




.small-note {
  font-size: 0.8rem;
  color: #999;
  font-weight: bold;
  margin-top: 15px;
}

/* الأقسام الرئيسية - تعزيز التباعد والهدوء */
.info-section {
  margin-bottom: 30px;
  text-align: right;
}

/* العناوين الفرعية - جعلها باهتة قليلاً لتركيز الانتباه على المحتوى */
.info-section h4 {
  color: #6b7280;
  /* رمادي هادئ */
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 10px;
}

.info-section h4 i {
  color: #2563EB;
  /* أيقونة زرقاء لهوية بنيتك */
  font-size: 0.9rem;
}

/* بطاقة المعدل المطلوب - جعلها "البطل" في التصميم */
.rate-card {
  background-color: #f0f7ff;
  /* خلفية زرقاء فاتحة جداً مريحة للعين */
  padding: 20px;
  border-radius: 16px;
  border-right: 6px solid #2563EB;
  /* التركيز على لون هوية بنيتك */
  display: flex;
  align-items: center;
  margin-top: 20px;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.05);
  /* ظل ناعم جداً */
  transition: all 0.3s ease;
}

.rate-card:hover {
  transform: scale(1.01);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.1);
}

.rate-card strong {
  display: block;
  font-size: 0.85rem;
  color: #2563EB;
  /* نص أزرق */
  margin-bottom: 4px;
  font-weight: 700;
}

.rate-card span {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1e3a8a;
  /* أزرق داكن للرقم */
}

/* الكبسولات الزرقاء للبيانات الفرعية */
.badge-blue {
  background-color: #f3f4f6;
  /* رمادي فاتح جداً للهسترة */
  color: #4b5563;
  padding: 4px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-block;
  margin-right: 5px;
}

/* نصوص الفقرات - التركيز على التخصصات */
.info-section p {
  color: #4b5563;
  margin-bottom: 12px;
  line-height: 1.8;
  font-size: 0.95rem;
}

.info-section p strong {
  color: #111827;
  font-weight: 700;
}

/* تمييز خاص للتخصصات */
.text-dark {
  color: #1e3a8a !important;
  /* أزرق داكن لتمييز التخصصات */
  font-weight: 600;
  background-color: #f8fafc;
  padding: 2px 6px;
  border-radius: 4px;
}

/* تمييز عدد المواد */
.text-highlight {
  color: #2563EB;
  font-weight: 700;
  font-size: 1.1rem;
}

/* أيقونات الأقسام */
.iconn {
  color: #2563EB !important;
}