/*p {
  text-align: justify !important;
}*/




/*هذا بداية التنسيق الخاص بالنبذة والمحاور
      /* ✅ تنسيق العنوان مع الخط والنقطة */
        


/* اللغة الإنجليزية: الهامش يكون على اليمين لأن العناصر قبل النص */
html[lang^="en"] .title-dot {
  margin-right: 10px;
  margin-left: 0;
}

        
        .specialty-title-line {
            display: flex;
            align-items: center;

              
        }
        .specialty-title-text {
            font-size: 18px;
          font-family: "Tajawal";
            color: #08326E;
            
            margin-left:5px;
            font-weight: 600;
        }
        .title-line {
            flex-grow: .1;
            height: 1px;
            background-color: #08326E;
            margin-left: 0px;
        }
        .title-dot {
            width: 4px;
            height: 4px;
            background-color: #08326E;
            border-radius: 50%;
             margin-left:10px;
          
        }

        /* ✅ تنسيق نبذة عن التخصص */
        .specialty-overview {
            padding: 20px 0;
           
        }
        .degree-description, .specialty-text {
            font-size: 16px;
            line-height: 1.8;
            color: #333;
        }
        
        
        h2.specialty-title{
            font-size: 16px;
          font-family: "Tajawal";
            color: #08326E;
            white-space: nowrap;
             font-weight: 600;
            
            
        }
/* ✅ الحاوية الرئيسية */
.toggle-container {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px; /* مسافة بين الأعمدة */
  row-gap:5px;
    
}

/* ✅ العنصر الواحد */
.toggle-item {
    width: calc(50% - 10px); /* ✅ عمودين مع مسافة بسيطة */
    border-radius: 8px;
    overflow: hidden;
   
   
}


@media only screen and (max-width: 768px) {
.toggle-item {
    width: 100%;
 

}
}

/* ✅ رأس المحور (العنوان + أيقونة) */
.toggle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 15px; /* حواف داخلية متساوية */
    cursor: pointer;
    border-bottom: 1px solid #ddd;
    transition: background 0.3s;
    background: #fff;
    flex-direction: row-reverse;
}

/* ✅ أيقونة الفتح/الإغلاق */
.toggle-icon {
    color: #c3973c;
    font-size: 20px;
    font-weight: bold;
    margin-left: 10px;
}

/* ✅ عنوان المحور */
.toggle-title {
    font-size: 16px;
    font-weight: bold;
    color: #08326E;
    margin: 0;
    font-family: 'Tajawal';
}

/* ✅ محتوى المحور */
.toggle-content {
    font-size: 14px;
    display: none;
    padding: 15px;
    border-top: 1px solid #ddd;
    background: #fff;
    font-family: 'Tajawal';
    line-height: 2;
}
.toggle-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}
.toggle-item.active .toggle-content {
    /* سيتم التحكم عبر JS */
}


/* ✅ إظهار المحتوى عند الضغط */
.toggle-item.active .toggle-content {
    display: block;
}


/*تنسيق الرؤية و الرسالة*/

 .specialty-vision-mission {
          position: relative;
          background-size: cover;
          background-position: center;
          padding: 80px 0;
          color: white;
          text-align: center;
      }
  .overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(8, 50, 110, 0.7);
      }
  .vision-mission-container {
          position: relative;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          max-width: 1200px;
          margin: 0 auto;
          z-index: 2;
      }
  .vision-content {
          flex: 1;
          
          max-width: 400px;
          padding: 20px;
      }
  .vision-content h2 {
          font-size: 32px;
          margin-bottom: 10px;
          color:#ffff;
      }
  .vision-mission-boxes {
          flex: 2;
          display: flex;
          gap: 20px;
          justify-content: center;
      }
  .vision-box, .mission-box {
          background: rgba(255, 255, 255, 0.1);
          padding: 25px;
          border-radius: 15px;
          width: 45%;
          min-width: 250px;
          text-align: center;
          border: 2px solid rgba(255, 255, 255, 0.3);
          transition: transform 0.3s ease-in-out;
      }
  .vision-box:hover, .mission-box:hover {
          transform: translateY(-5px);
          background: rgba(255, 255, 255, 0.2);
      }
  .icon {
          font-size: 50px;
          margin-bottom: 15px;
      }
  h3 {
          font-size: 22px;
          font-weight: bold;
          margin-bottom: 10px;
      }
      
      .vision-box h3, .mission-box  h3{
          color:#ffff!important;
      }
  p {
          font-size: 16px;
          line-height: 1.8;
      }
  @media (max-width: 768px) {
          .vision-mission-container {
              flex-direction: column;
              text-align: center;
          }
      .vision-content {
              text-align: center;
          }
      .vision-mission-boxes {
              flex-direction: column;
              width: 100%;
          }
      .vision-box, .mission-box {
              width: 95%;
              margin-bottom: 15px;
              margin: 10px;
          }
      }
      
        .icon svg {
    width: 60px; /* ✅ تصغير حجم الأيقونة */
    height: 60px;
    fill: white; /* ✅ تغيير اللون إلى الأبيض */
    transition: transform 0.3s ease-in-out;
}

.vision-box:hover .icon svg,
.mission-box:hover .icon svg {
    transform: scale(1.1); /* ✅ تكبير الأيقونة عند التمرير */
}



/*style for goals*/
.specialty-goals-section {
           /* padding: 20px 0;*/
            background: white;
        }

        .goals-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1200px;
            margin: 0 auto;
            gap: 30px;
        }

        .goals-image {
            flex: 1;
            max-width: 400px;
        }

        .goals-image img {
            width: 100%;
            height: auto;
            border-radius: 10px;
        }

        .goals-content {
            /*flex: 2;*/
            text-align: right;
        }


        /* ✅ تنسيق قائمة الأهداف */
        .goals-list {
            list-style: none; /* إزالة النقاط الافتراضية */
            padding: 0;
            margin-top: 15px;
            counter-reset: goals-counter;
        }
        
        /* ✅ تنسيق كل عنصر */
        .goals-list li {
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 15px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
      
            font-family: 'Tajawal';
        }
        
        /* ✅ استبدال النقطة بعلامة صح داخل دائرة */
        .goals-list li::before {
            content: "✔";
            display: inline-flex
        ;
            justify-content: center;
            align-items: center;
            background-color: #08326e14;
            color: #c3973c;
            font-size: 14px;
            font-weight: bold;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top:5px;
        }


        @media (max-width: 768px) {
            .goals-container {
                flex-direction: column;
                text-align: center;
            }

            .goals-content {
                text-align: center;
            }

            .goals-header {
                justify-content: center;
                flex-direction: column;
            }

            .goals-line {
                width: 100%;
                margin-top: 5px;
            }

            .goals-list {
                text-align: right;
            }
            
            ul.goals-list {
    margin: 0;
}
        }
        
        
        
/*style for career*/
        .career-section {
            
            margin: 20px 0;
            padding: 0;
    
        }
        .career-intro  {
            font-size: 16px;
            color: #444;
            margin-bottom: 5px;
            margin-top: 20px;
        }
        .career-description {
            font-size: 16px;
            color: #444;
            margin-bottom: 20px;
        }
        .career-container {
            display: flex;
            justify-content: space-between;
            gap: 40px;
            align-items: flex-start;
        }
        .career-column {
            width: 48%;
        }
        
        @media only screen and (max-width: 768px) {
.career-column{
    width: 100%
}
 .career-container {
     flex-wrap: wrap;
}
}
        
        .career-subtitle {
            font-size: 16px!important;
            font-weight: bold;
            color: #08326E;
            margin-bottom: 10px;
        }
        .career-list {
            list-style: disc;
            padding-right: 20px;
            margin: 0;
            font-family: 'Tajawal';
           
        }
        .career-list li {
           font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    
    font-family: 'Tajawal';
        }

/* ✅ استبدال النقطة بعلامة صح داخل دائرة */
.career-list li::before {
    content: "✔";
    display: inline-flex
;
    justify-content: center;
    align-items: center;
    background-color: #08326e14;
    color: #c3973c;
    font-size: 14px;
    font-weight: bold;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top:5px;
}


/*teaching method*/
/* ✅ القسم العام */
.vertex-teaching-section {
    text-align: right;
    /*margin: 40px 0;*/
   
}
.vertex-teaching-container {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-top: 30px;
    align-items: flex-start; /* ✅ مهم لتجنب تمدد العناصر */
}


@media only screen and (max-width: 768px) {
.vertex-teaching-container {
    flex-wrap: wrap;
}

.vertex-teaching-item {
    width: 100%!important;
}
}


.vertex-teaching-item {
    width: 30%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.image-wrapper {
    position: relative;
}

.vertex-teaching-item img {
    width: 100%;
    height: 250px !important;
    object-fit: cover;
    display: block;
}

.vertex-overlay-header {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(8, 50, 110, 0.8);
    color: white;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
}

.vertex-teaching-title {
    font-size: 14px !important;
    font-weight: bold;
    margin: 0;
    font-family: 'Tajawal';
    color: #fff !important;
}

.vertex-toggle-content {
    all: unset;
    cursor: pointer;
    font-size: 18px;
    color: white;
    transition: transform 0.4s ease;
}

.vertex-method-description {
    overflow: hidden;
   
    transition: height 0.4s ease;
    padding: 0 10px;
    font-family: 'Tajawal';
    line-height: 1.8;
    background: #fff!important;
}

.vertex-method-description.open {
    /* فقط لإضافة padding مع الجافا سكربت */
    padding: 10px;
}

.vertex-teaching-item .vertex-toggle-content i {
    transition: transform 0.4s ease;
}

.vertex-teaching-item.active .vertex-toggle-content i {
    transform: rotate(180deg);

    transition: transform 0.4s ease;
}

button.vertex-toggle-content:hover,
button.vertex-toggle-content:focus {
    all: unset;
}



/*targting audiance*/


        /* ✅ تصميم عام */
        .target-audience-section {
            display: flex;
            gap: 30px;
            align-items: flex-start;
            margin: 20px 0;
            flex-wrap: wrap; /* ✅ مهم للريسبونسيف */
            position: relative;
            
        }
        
.target-audience-image {
    width:49%;
  display: flex;
  justify-content: center; /* توسيط أفقي */
  align-items: center;     /* توسيط عمودي */
  height: 100%;            /* ضروري عشان التوسيط العمودي يشتغل */
  text-align: center;
      margin-top: 40px;
}



@media only screen and (max-width: 768px) {
    .target-audience-image {
         width:100%;
    }
}

.target-audience-image img {
 
  height: auto;
  display: block;
}


        /* ✅ المحتوى */
        .target-audience-content {
            flex: 1;
            min-width: 280px;

        }

        .target-audience-content h2 {
            font-size: 24px;
            color: #08326E;
            margin-bottom: 10px;
        }

        .target-audience-content .subtitle {
            font-size: 16px;
            color: #555;
            margin-bottom: 15px;
            font-family: "Tajawal";
        }

        /* ✅ القائمة */
        .target-audience-list {
            list-style: none;
            padding: 0;
            margin: 0 0 20px 0;
        }

        .target-audience-list li {
            margin-bottom: 10px;
            font-size: 16px;
            color: #444;
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: "Tajawal";
        }

        .target-audience-list li i {
            color: #08326E;
            font-size: 16px;
        }

        /* ✅ الأزرار */
        .target-audience-buttons {
            margin-top: 20px;
            text-align: left;
            bottom:20px;
            display: flex;
            justify-content: flex-end;
        }

        .target-audience-buttons a {
            display: inline-block;
            padding: 12px 20px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: bold;
            margin: 0 10px 10px 0;
            font-family: "Tajawal";
            font-size: 16px;
        }

        .btn.primary {
            padding: 12px 30px;
    background-color: #c3973c;
    color: white;
    text-decoration: none;
    border-radius: 15px;
    font-family: "Tajawal";
        }

        .btn.secondary {
            padding: 12px 30px;
    background-color: #08326E;
    color: #ffff;
    text-decoration: none;
    border-radius: 15px;
    font-family: "Tajawal";
        }

        /* ✅ Responsive adjustments */
        @media (max-width: 768px) {
            .target-audience-section {
                flex-direction: column;
                text-align: center;
            }

            .target-audience-content {
                order: 2;
            }

            .target-audience-image {
                order: 1;
                margin-bottom: 20px;
            }

            .target-audience-buttons a {
                margin: 5px auto;
                display: block;
                width: fit-content;
            }
        }
        
        
        .target-audience-list {
            list-style: disc;
            padding-right: 20px;
            margin: 0;
            font-family: 'Tajawal';
        }
        .target-audience-list li {
           font-size: 18px;
    line-height: 1.8;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Tajawal';
        }

/* ✅ استبدال النقطة بعلامة صح داخل دائرة */
.target-audience-list li::before {
    content: "✔";
    display: inline-flex
;
    justify-content: center;
    align-items: center;
    background-color: #08326e14;
    color: #c3973c;
    font-size: 14px;
    font-weight: bold;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    margin: 5px;
}


/*style for addmission requirments */

        .admission-container {
            position: relative;
            background: #F5F7F9;
            padding: 40px;
            border-radius: 10px;
           
            overflow: hidden;
            transition: all 5s ease-in-out; /* ✅ تأثير ناعم عند التبديل */
            min-height: 150px; /* لمنع تغير الحجم فجأة */
            padding-right:100px;
        }
        
        /* للحالة الإنجليزية */
.admission-container:dir(ltr) {
    padding-left: 70px;
    padding-right: 0;
}
        .admission-title {
            font-size: 18px;
            font-weight: bold;
            color: #08326E;
            margin-bottom: 10px;
            transition: color 5s ease-in-out;
        }

        .admission-text {
            font-size: 16px;
            color: #444;
            line-height: 1.6;
            opacity: 1;
            transition: opacity 5s ease-in-out;
        }
        
        .admission-list {
    list-style-type: disc; /* ✅ نقاط أمام كل عنصر */
    padding-right: 20px; /* ✅ مسافة قبل النص */
    font-size: 16px;
    color: #444;
    margin-top: 10px;
    font-family: 'Tajawal';
}

.admission-list li {
    margin-bottom: 5px; /* ✅ مسافة بين العناصر */
    line-height: 1.6;
}


        /* ✅ تصميم الزر الجانبي مع حركة سلسة */
        .admission-toggle-button {
            position: absolute;
            top: 50%;
            right: 0px; /* يبدأ خارج السكشن */
            transform: translateY(-50%);
            background: #08326E;
            color: white;
            border: none;
            padding: 15px 10px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            writing-mode: vertical-rl;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.6s ease-in-out, background 0.3s ease-in-out, right 0.6s ease-in-out;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            width: 60px;
            height: 100%;
            text-align: center;
            z-index: 10;
            font-family: 'Tajawal';
        }
        
        
        .admission-toggle-button:dir(ltr) {
    left: 0;
    right: auto;
    writing-mode: vertical-lr;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
        
        .admission-toggle-button:hover,.admission-toggle-button:focus {
            background: #08326E;
        }

        /* ✅ عند التبديل، يتحرك الزر للأخير */
        .admission-container.active .admission-toggle-button {
            right: calc(100% - 60px);
            background: #C3973C; /* ✅ اللون الجديد عند الفتح */
            color: white;
        }

        /* ✅ إخفاء الأوراق المطلوبة افتراضيًا */
        .documents-content {
            display: none;
            opacity: 0;
            transform: translateX(50px);
            transition: opacity 0.4s ease-in-out, transform 0.6s ease-in-out;
        }

        /* ✅ عند التبديل، يظهر النص */
        .admission-container.active .admission-content {
            opacity: 0;
            transform: translateX(-50px);
            transition: opacity 0.4s ease-in-out, transform 0.6s ease-in-out;
        }

        .admission-container.active .documents-content {
            display: block;
            opacity: 1;
            transform: translateX(0);
        }

        /* ✅ حركة سلسة عند تغير الحجم */
        .admission-container.transitioning {
            transition: all 0.6s ease-in-out;
        }
        
        
        
        @media (max-width: 768px) {
    .admission-toggle-button {
        writing-mode: initial;         /* إلغاء الوضع الرأسي */
        width: auto;
        height: auto;
        padding: 10px 20px;
        position: absolute;            /* داخل الحاوية فقط */
        top: 20px;                     /* من الأعلى */
        right: 20px;                   /* من اليمين */
        transform: none;              /* إلغاء التوسيط العمودي */
        border-radius: 50px;
        font-size: 15px;
        z-index: 10;
    }

    .admission-container.active .admission-toggle-button {
        right: 20px;
        background: #C3973C;
    }
   
  
  
  .documents-content {
  padding: 5px;
}

.admission-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #08326E;
  margin-top:20px;
}

.admission-list li {
  margin-bottom: 10px;
  line-height: 1.8;
  font-size: 16px;
}
ul.admission-list{
    margin:0;
}

.admission-container {
 
    padding: 10px;
   padding-top:40px;
    padding-right: 5px;
}
}



/*style for program requirments*/
 .program-requirements-container {
            background: #F5F7F9;
            padding: 20px;
            border-radius: 10px;
            
           
        }

        .program-title {
            font-size: 20px;
            font-weight: bold;
            color: #08326E;
            
            margin-bottom: 10px;
        }

.program-requirements-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-family: 'Tajawal';
    border: none; /* إزالة الحدود العامة */
}

.program-requirements-table th,
.program-requirements-table td {
    padding: 12px 0;
    text-align: right;
    font-size: 14px;
    font-family: 'Tajawal';
    background: transparent !important; /* إزالة الخلفية */
    box-shadow: none !important; /* إزالة الظل */
    outline: none; /* إزالة أي تحديد */
    border-left: none; /* إزالة الحد الأيسر */
    border-right: none; /* إزالة الحد الأيمن */
    border-top: none; /* إزالة الحد العلوي */
    /* لا تكتب border: none هنا حتى لا تلغي الخط السفلي */
}

.program-requirements-table th:dir(ltr),
.program-requirements-table td:dir(ltr) {
    text-align: left;
}

/* ✅ الإبقاء على الخط السفلي فقط ما عدا آخر عنصر */
.program-requirements-table tr:not(:last-child) th,
.program-requirements-table tr:not(:last-child) td {
    border-bottom: 1px solid #ddd;
}


        .program-requirements-table th {
            color: #333; /* إزالة اللون الأزرق */
            font-weight: bold;
            width: 50%;
        }

        .benefits-title {
            font-size: 18px;
            font-weight: bold;
            margin-top: 20px;
            color: #08326E;
            font-family: 'Tajawal';
        }

        .benefits-list {
            list-style-type: disc;
            padding-right: 20px;
            font-family: 'Tajawal';
        }

        .benefits-list li {
            font-size: 14px;
            color: #444;
            margin-bottom: 5px;
        }

 .program-description {
    margin-top: 20px;
    padding: 15px;
    background: #FFF3E0;
    border-radius: 8px;
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    text-align: start;            /* ينعكس تلقائياً يمين/يسار حسب اللغة */
    border-inline-start: 5px solid #C3973C; /* شريط جانبي يبدأ حسب الاتجاه */
}

        
         .program-pdf-download {
            text-align: left;
            margin: 15px 0;
        }
        .btn-pdf {
            display: inline-block;
            background: #C3973C;
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: bold;
            transition: 0.3s;
            font-family: 'Tajawal';
        }
        
        a.btn-pdf:visited{
            color:#ffff;
        }
        
        .btn-pdf i {
            margin-left: 8px;
            font-size: 18px;
        }
        .btn-pdf:hover {
            background: #08326E;
        }
        
        
        /* في الوضع الإنجليزي */
.program-pdf-download:dir(ltr) {
    text-align: right;
}
        
/* style for FAQ*/
.vertex-faq-section {
  text-align: right;
}

.vertex-faq-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.vertex-faq-item {
  background: white;
  border-radius: 5px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.vertex-faq-question {
  background: none;
  border: none;
  font-size: 16px;
  font-weight: bold;
  color: #08326E;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px;
  cursor: pointer;
  font-family: 'Tajawal';
  transition: background-color 0.3s ease;
  background-color: transparent;
}

.vertex-faq-question:hover,
.vertex-faq-item.active .vertex-faq-question {
  background-color: #08326E;
  color: #fff;
}

.vertex-faq-toggle {
  font-size: 24px;
  color: #C3973C;
  transition: transform 0.3s ease;
}

.vertex-faq-toggle.rotated {
  transform: rotate(45deg);
}

.vertex-faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 15px;
  transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
  font-size: 14px;
  color: #444;
  font-family: 'Tajawal';
  border-top: 1px solid #ddd;
}

.vertex-faq-answer.open {
  opacity: 1;
  padding: 15px;
}




        .faq-item.active .faq-toggle {
            transform: rotate(45deg);
        }

/*style for title icon*/
.specialty-title-icon {
    width: 40px; /* يمكنك التحكم في الحجم */
    height: 40px;
    fill: #08326E; /* اللون */
    margin-left: 10px; /* مسافة بسيطة بين الأيقونة والخط */
    vertical-align: middle; /* محاذاة وسطية مع العنوان */
}