@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
:root{
  --clr-accent-900: #861b22;
  --clr-accent-800: #c1272c;
  --clr-primary-900: #04131d;
  --clr-primary-800: #143852;
  --clr-primary-500: #3a617e;
  --clr-neutral-800: #4f5264;
  --clr-neutral-700: #676b84;
  --clr-neutral-600: #a4abc5;
  --clr-neutral-500: #F6F8F7;
  --clr-neutral-400: #fcfdfd;
  --clr-neutral-300: gainsboro;
  --clr-neutral-100: #fff;
  --ff-primary: 'Roboto', sans-serif;;
  --fw-700: 700;
  --fw-600: 600;
  --fw-500: 500;
  --fw-400: 400;
  --fw-300: 300;
  --section-padding: 20px 0;
  --bd-raduis: 8px;

  --content-mb: 18px;

  --box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);

}

/*----------------------------- 
    Reset
-------------------------------*/
*, *::before, *::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a{ 
  text-decoration: none;
}

ul, li{
  list-style: none;
  padding: 0;
  margin: 0;
}

html{
  transition: all 0.1s ease;
  scroll-behavior: smooth;
}
body{
  font-family: var(--ff-primary);
  background-color: var(--clr-neutral-100);
}
input,
textarea{
    border: none;
    outline: none;
}

input:focus,
label:focus,
button:focus,
textarea:focus{
outline: none !important;
}

img{
  max-width: 100%;
}
.form-control:focus,
.form-control:active {
  outline: none !important;
  box-shadow: none !important;
}

.form-select:focus,
.form-select:active {
  outline: none !important;
  box-shadow: none !important;
}
/*----------------------------- 
    Utitlity classes
-------------------------------*/
.accent-text{
  color: var(--clr-accent-800);
}
.primary-text{
  color: var(--clr-primary-800);
}
.bg-clr-500{
  background-color: var(--clr-neutral-500);
}
.gray-text{
  color: var(--clr-neutral-600);
}
.bd-raduis{
  border-radius: var(--bd-raduis);
}
.b-shadow{
  box-shadow: var(--box-shadow);
}
section, .section{
  padding: 5%;
}
.text-green{
  color: #59bd60;
}
.card {
  border: none;
 
}

h1, h2, h3, h4, h5, h6, .card-title{
  color: var(--clr-primary-800);
}

.title,
.content{
  margin-bottom: var(--content-mb);
}

.section-title{
  color: var(--clr-primary-800);
  text-align: center;
  position: relative;
  font-size: 38px;
  font-weight: 500;
  margin: 25px 0 55px;
}

.section-title::after{
  content: '';
  position: absolute;
  background-color: var(--clr-accent-800);
  width: 180px;
  height: 3px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -15px;
}

@media(max-width: 576px){
  .section-title{
    font-size: 28px;
  }
}

@media (max-width: 578px){
  .container{
    padding-inline: 25px;
  }
}

/*----------------------------- 
    Header
-------------------------------*/
header{
  z-index: 10;
}
header .navbar-brand{
  width: 220px;
}

header .dropdown-menu{
  background-color: var(--clr-neutral-100);
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

header .dropdown-menu a:focus,
header nav .dropdown-menu a:hover,
header nav .dropdown-menu a:active{
  background-color: var(--clr-accent-800);
  color: var(--clr-neutral-100);
}

header .lang .dropdown-menu a{
  font-weight: 500;
} 

header nav .nav-link{
  margin-left: 5px;
  font-weight: 500;
  color: var(--clr-primary-800);
}

header nav .nav-link.active,
header nav .nav-link:hover,
header nav .nav-link:focus{
  color: var(--clr-accent-800);
}


header nav .dropdown-item{
  color: var(--clr-primary-800);
}

@media (max-width: 1400px){
  .navbar-toggler{
    display: block;
  }
}

@media (max-width: 992px){
  header nav .ms-5{
    margin-left: 0  !important;
  }
  header .login-btn{
    padding-bottom: 10px;
    color: #fffefe;
  }
  header .lang{
    padding-top: 10px;

  }
}
@media (max-width: 350px){
  header .navbar-brand{
    width: 160px;
  }
}
@media (max-width: 276px){
  header .navbar-brand{
    width: 122px;
  }
  .navbar-toggler{
    font-size: 21px;
  }
}

/*----------------------------- 
    Header username
-------------------------------*/
header .username{
  color: var(--clr-accent-800);
}

/*----------------------------- 
    Home Sider Section
-------------------------------*/


.home-slider{
  padding: 130px 0 150px;
  background-color: var(--clr-neutral-400);
}

.home-slider h1 span{
  color: var(--clr-accent-800);
}
.carousel-text{
    width: 40%;
}

 .carousel-img {
    width:60%;
    border-radius:10px;
    
}
.carousel-img img {
    width:100%;
    border-radius:10px;
box-shadow:4px 4px 8px rgba(51,66,199,.884);
        margin:2%;
    border:4px solid #1b27861e
}
  .carousel-img img:hover{
  box-shadow: 1px 2px 10px rgb(204, 17, 95);
  cursor: pointer;
}
@media (max-width: 768px){
  .home-slider{
    text-align: center;
  }
}
@media (max-width: 425px){
  .row{
    display: inline-block;
margin: auto;   
padding: auto;
  }
.carousel-img{
    width: 100%;
    margin: 10px auto;
  /* background-color: #59bd60; */
  padding:10px 0px;
    }
.carousel-img img{
    width: 100%;
    display: inline-block;
    border-radius: 10px;
    border: #861b22 2px solid;
            margin-top: 20%;

   }
  
.carousel-text{
     width: 100%;
    margin: auto;
}
   }

/*----------------------------- 
    Join Button
-------------------------------*/
.fixed-btns{
  position: fixed;
  width: 110px;
  bottom: 10%;
}

.fixed-btns a img{
  width: 50px;
  margin-bottom: 10px;
}

.join-btn{
  background-color: var(--clr-accent-800);
  border-radius: 8px;
  padding: 10px 20px;
  color: var(--clr-neutral-100);
  z-index: 5;
  cursor: pointer;
  font-weight: 600;
}

.join-btn:hover{
  background-color: var(--clr-accent-800);
  box-shadow: var(--box-shadow);
}

.card{
  position: static;
}

 /* Custom CSS for spacing */
    .slider-section {
        margin-top: 3%;
    }
    
    /* ضبط حجم الخط ووزنه لعنوان السلايدر لجميع اللغات */
    .carousel-text .title {
        font-size: 1.5rem; /* تم تصغير القيمة من 2rem إلى 1.5rem */
        font-weight: 500; 
    }
/*----------------------------- 
    Features
-------------------------------*/
.features .features{
  background-color: var(--clr-neutral-100);
  padding-bottom: var(--section-padding);
  color: var(--clr-primary-800);
  margin-top: 10px;
   box-shadow: 0 4px 8px rgba(50, 64, 191, 0.94); /* ظل عند التhover */
    }
.features .features:hover{
    box-shadow: 0 4px 8px rgb(180, 48, 48); /* ظل عند التhover */
    }
.features .features-icon i{
  color: var(--clr-accent-800);
  font-size: 20px;
}
.features video{
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--bd-raduis);
}

@media (max-width: 578px){
  .features .row{
    padding-inline: 5px;
  }
}
/*----------------------------- 
    About us Section
-------------------------------*/
.about .col-md-6 img {
    /* تجعل الصورة تملأ عرض الحاوية بالكامل */
    width: 100%; 
    /* تحافظ على نسبة أبعاد الصورة */
    height: auto; 
    /* هذا مهم لضبط كيفية ملء الصورة للمساحة */
    /* cover: الصورة ستغطي المساحة بالكامل مع قص الزوائد */
    /* contain: الصورة ستظهر بالكامل داخل المساحة مع إمكانية ظهور مساحة فارغة */
    object-fit: cover; 
    /* تحديد أقصى ارتفاع للصورة لمنعها من أن تصبح طويلة جدًا على الشاشات الكبيرة */
    max-height: 400px; /* يمكنك تعديل هذه القيمة حسب الحاجة */
}

/* يمكنك أيضاً إضافة ميديا كويري لتعديل الـ max-height لشاشات معينة */
@media (max-width: 767.98px) { /* شاشات الموبايل الصغيرة */
    .about .col-md-6 img {
        max-height: 300px; /* ارتفاع أقل للموبايل */
    }
}

@media (min-width: 768px) and (max-width: 991.98px) { /* شاشات التابلت */
    .about .col-md-6 img {
        max-height: 350px; /* ارتفاع متوسط للتابلت */
    }
}
/*----------------------------- 
    About page
-------------------------------*/
#about-page .count{
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/about-count.webp") center center;
  background-attachment: fixed;
  background-size: cover;
  margin-bottom: 60px;
  padding: 90px 0;
}

#about-page .count i{
  color: var(--clr-neutral-100);
  font-size: 45px;
  margin: 10px;
}
#about-page .count .num{
  color: var(--clr-neutral-100);
  font-size: 60px;
  font-weight: var(--fw-700);
}
#about-page .count h3{
  font-weight: var(--fw-600);
  color: var(--clr-neutral-100);
}

@media (max-width: 992px){
  #about-page .item{
    margin-bottom: 70px;
  }
}

/*----------------------------- 
    Staffs  ==> about page
-------------------------------*/
.staffs{
  background-color: var(--clr-neutral-400);
}

.staffs .card{
  margin-bottom: 10px;

}

.staffs .card-img{
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.staffs .card-img img{
  transition: all 0.6s ease-out 0s;
}

.staffs .card:hover .card-img img{
  transform: scale(1.2);
}


.staffs .card-img,
.staffs .card-img img{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.staffs .social{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25px;
  text-align: center;
}
.staffs .social li{
  display: inline-block;
}
.staffs .social li a{
  margin-right: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--clr-neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-accent-800);
  font-size: 18px;
  transform: translateY(50px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
}
.staffs .social li a:hover{
  background-color: var(--clr-accent-800);
  color: var(--clr-neutral-100);
}

.staffs .social li:nth-child(1) a{
  transition-delay: 0s;
}

.staffs .social li:nth-child(2) a{
  transition-delay: 0.1s;
}

.staffs .social li:nth-child(3) a{
  transition-delay: 0.2s;
}
.staffs .card:hover .social a{
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.staffs-carousel .owl-nav{
  display: flex;
  justify-content: center;
  margin-top: 40px;
  gap: 30px;
  color: var(--clr-primary-800);
  background-color: #59bd60;
}

.staffs-carousel .owl-nav button.owl-prev, 
.staffs-carousel .owl-nav button.owl-next{
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--clr-primary-900);
  background: var(--clr-primary-900);
  color: var(--clr-neutral-100);

}

.staffs-carousel .owl-nav button.owl-prev:hover, 
.staffs-carousel .owl-nav button.owl-next:hover{
  background: var(--clr-primary-900);
  color: var(--clr-neutral-100);
}

.staffs img{
  width: 100%;
  height: 350px;
  object-fit: cover;
}


/*----------------------------- 
  Count Section
-------------------------------*/
.count .card{
  padding: 25px 15px;
  border-radius: 25px;
 
}
.count i{
  color: var(--clr-accent-800);
  font-size: 50px;
  margin-bottom: 20px;
}
.count .num{
  color: rgb(2, 155, 2);
  font-size: 50px;
  font-weight: 500;
}
.count h3{
  font-weight: 600;
}
/*----------------------------- 
  Gallery
-------------------------------*/
.gallery{
  background-color: var(--clr-neutral-400);
}

.gallery .card{
  margin: 10px auto;
  width: 85%;
  
  /* border: var(--clr-accent-100) 1px solid; */
}

.gallery .card-img{
  overflow: hidden;
  cursor: pointer;
  height: 40%;
  /* border: var(--clr-accent-900) 1px dotted; */

}

.gallery .card-img img{
  transition: all 0.6s ease-out 0s;
}

.gallery .card:hover .card-img img{
  transform: scale(1.2);
}

.gallery .card-img,
.gallery .card-img img{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.gallery-carousel .owl-nav{
  display: flex;
  justify-content: center;
  margin-top: 40px;
  gap: 30px;
  color: var(--clr-primary-800);
}

.gallery-carousel .owl-nav button.owl-prev, 
.gallery-carousel .owl-nav button.owl-next{
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--clr-primary-700);
  color: var(--clr-primary-900);
}

.gallery-carousel .owl-nav button.owl-prev:hover, 
.gallery-carousel .owl-nav button.owl-next:hover{
  background: var(--clr-primary-900);
  color: var(--clr-neutral-100);
}

.gallery img, video{
  width: 80%;
  height: 350px;
  object-fit: fill;
  border-radius: 15px;
  display: block;
  margin: 1px auto;
}

.gallery video {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
    .container-gallery{
        width: 90%;
        margin-top:0px;
    }
.main-slide-container {
    position: relative;
}
.mySlides {
    border-radius:0%;
    display: none;
    animation: fadeEffect 1.5s; /* إضافة تأثير التلاشي */
    box-shadow: 0 4px 8px rgba(64, 50, 191, 0.94); /* ظل عند التhover */
}
.mySlides :hover {
        box-shadow: 0 4px 8px rgba(191, 50, 92, 0.94); /* ظل عند التhover */
    }
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -30px;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
    background-color: rgba(206, 44, 44, 0.8);
}

.gallery .gallery-caption
 {
    text-align: center;
    background-color:#c01818;
    color: white;
    margin: 0%;
}
.gallery .caption-container #caption {
    text-align:center;
    background-color:#000;
    color:#000;
    height: 50px;
    margin: auto;
    width: 100%;
    padding: 1.5%;
    display: inline-block;
 

}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.thumbnails-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-top: 10px;
}

.column1 {
    width: auto;
    padding: 0 5px;
    box-sizing: border-box;
}

.column1 img, .column1 video {
    width: 150px; /* تكبير حجم الصور المصغرة إلى 150px */
    height: auto; /* الحفاظ على نسبة الأبعاد */
    object-fit: cover;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 0px;
    margin-right: 0px;
}

.column1 img.active, .column1 video.active {
    border: 2px solid #717171;
}

.hidden {
    display: none !important;
}

.navigation-arrows {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.navigation-arrows button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    margin: 0 10px;
    color: #555;
}

.navigation-arrows button:hover {
    color: #000;
}
.mySlides img, .mySlides video {
    border-radius: 0 3px 3px 0;


}
/* تعديلات لشاشات التابلت (عادة ما تكون 768 بكسل وأكثر) */
@media (max-width: 768px) {
    .column1 img, .column1 video {
        width: 100px; /* تقليل حجم الصور المصغرة للتابلت */
        height: auto;
    }
    .mySlides img, .mySlides video {
        height: 40vh; /* تقليل ارتفاع الصورة/الفيديو الرئيسية للتابلت */
    }
}

/* تعديلات لشاشات الهواتف المحمولة (عادة ما تكون أقل من 600 بكسل) */
@media (max-width: 600px) {
    .column1 img, .column1 video {
        width: 80px; /* تقليل حجم الصور المصغرة للهاتف */
        height: auto;
    }
    .mySlides img, .mySlides video {
        height: 30vh; /* تقليل ارتفاع الصورة/الفيديو الرئيسية للهاتف */
    }
    .prev, .next {
        font-size: 16px;
        padding: 10px;
    }
   
}
 /* General Gallery Styling and Animations */
        .gallery {
            padding: 50px 0;
            direction: rtl; /* حافظ على اتجاه RTL */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 1s ease-out, transform 1s ease-out;
            background-color: #fff;
        }

        .gallery.animate-in {
            opacity: 1;
            transform: translateY(0);
        }

        .gallery .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .gallery .section-title {
            text-align: center;
            margin-bottom: 40px;
            color: #333;
            font-size: 2.5rem;
            font-weight: 600;
        }

        /* إخفاء شريط الكابشن بالكامل */
        .caption-container {
            display: none !important;
        }

        /* تنسيق الصورة الرئيسية والأسهم */
        .main-slide-container {
            position: relative;
            margin-bottom: 20px;
            border-radius: 8px;
            /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
            background-color: #ffffff;
            height: 60vh; /* ارتفاع ثابت للشاشات الكبيرة */
            overflow: hidden;
                        width: 100%;

        }
        
        .main-slide-container .mySlides {
            display: none;
            width: 100%;
            height: 100%;
        }

        .main-slide-container .mySlides.active {
            display: block;
        }

        .main-slide-container .mySlides img,
        .main-slide-container .mySlides video {
            object-fit: contain;
                        height: 100%;
            width: 200%;
 background-color: #000; 
            /* لضمان ملء الصورة أو الفيديو للمساحة المحددة */
            border-radius: 30px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        /* تعديل ارتفاع الصورة الرئيسية على الموبايل */
        @media (max-width: 768px) {
            .main-slide-container {
                height: 70vh; /* ارتفاع أقل على الموبايل */
            }
        }
        

       .main-slide-container .mySlides img,
.main-slide-container .mySlides video {
    object-fit: contain; 
    height: 100%;
    
    /* 👈 التعديل الأساسي: ضمان أن العرض يملأ الحاوية بشكل صحيح */
    width: 100%; 
    
    background-color: #000;
    border-radius: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

        /* تنسيق شريط الصور المصغرة */
        .thumbnails-container {
            position: relative;
            display: flex;
            flex-direction: row;
            overflow-x: auto;
            scroll-behavior: smooth;
            gap: 15px;
            padding: 30px 10px;
            background-color: #222;
            border: 2px solid #555;
            border-radius: 5px;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .thumbnails-container::-webkit-scrollbar {
            display: none;
        }
        
        .thumbnails-container .column1 {
            position: relative;
            flex: 0 0 auto;
            padding: 5px 10px;
            background-color: #fff;
            border: 2px solid #ddd;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
            transform: perspective(400px) rotateY(90deg);
            opacity: 0;
            transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out, box-shadow 0.3s ease, border 0.3s ease;
            backface-visibility: hidden;
            width: 150px; /* عرض ثابت للصورة المصغرة */
            height: 100px; /* ارتفاع ثابت للصورة المصغرة */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .thumbnails-container .column1.is-visible {
            transform: perspective(400px) rotateY(0deg);
            opacity: 1;
        }
        
        .thumbnails-container .column1:hover {
            transform: rotate(0deg) scale(1.05);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
        }

        .thumbnails-container .column1 img,
        .thumbnails-container .column1 video {
            display: block;
            max-height: 100%;
            max-width: 100%;
            /*width: auto;*/
            height: auto;
            object-fit: contain; /* لضمان أن الصورة أو الفيديو يتناسبان داخل الحاوية */
            cursor: pointer;
        }
        
        .thumbnails-container .column1::before,
        .thumbnails-container .column1::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 8px;
            background-image: radial-gradient(circle at 4px 4px, #222 4px, transparent 4px);
            background-size: 15px 8px;
        }
        
        .thumbnails-container .column1::before {
            top: -12px;
            transform: rotate(1deg);
        }
        
        .thumbnails-container .column1::after {
            bottom: -12px;
            transform: rotate(1deg);
        }
        
        .navigation-arrows {
            display: flex;
            justify-content: center;
            margin: 20px auto 0 auto;
            width: fit-content;
            gap: 10px;
        }
        
        .navigation-arrows button {
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            border: none;
            padding: 10px 15px;
            font-size: 1.2rem;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s, transform 0.2s;
        }
        
        .navigation-arrows button:hover {
            background-color: rgba(0, 0, 0, 0.8);
            transform: scale(1.1);
        }
        
        .navigation-arrows button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .demo.active {
            border: 2px solid #007bff; /* Highlight the active thumbnail */
            box-shadow: 0 0 15px #007bff;
        }
/*----------------------------- 
  Program
-------------------------------*/
.program .card {
  width: 100%;
  margin-top: 15px;
}

.program .card img{
  object-fit: cover;
  width: 100%;
  height: 350px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.program  .card-body{
  height: auto;
  padding: 2px;
  /* text-align: justify; */
}
/* في ملف CSS الخاص بك (مثال: style.css) */
.rtl-text {
    direction: rtl;
    text-align: right; /* لضمان المحاذاة اليمنى للنص */
}
@media(max-width: 446px){
  .program  .card-body{
  }
}
@media(max-width: 299px){
  .program  .card-body{
  }
}
    .probutton {
        margin-top: 0px;
        margin-bottom: 20px; /* الزر ملاصق للصورة */
        text-align: left;
        display: block;
        width: 39%;
    }
    @media (max-width:460px) {
    .probutton {
        width: 70%; /* Use even more width for very small screens */
        font-size:10px;
        display:inline-block;
        margin: Auto;
        text-align:center;

    }
.card-body p{
    font-size:12px;
}
}
.card1{
    
    width:98%;
    margin: 1% ;
}
    .card-body > div {
        text-align: left;
    }
.program-img{
    width: 100%;
    margin: 2% 0% ;
        transition: box-shadow 0.3s ease-in-out;
        object-fit: cover;
        width: 100%;
        height: 350px;
        margin-top: 0%;
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(49, 42, 249, 0.8); /* ظل عند التhover */

    }

    .program-img:hover {
        box-shadow: 0 4px 8px rgba(191, 50, 50, 0.94); /* ظل عند التhover */
    }
    .probutton:hover {
        box-shadow: 0 4px 8px rgba(49, 42, 249, 0.8); /* ظل عند التhover */
    }
 .rtl-text {
        direction: rtl;
        text-align: right;
    }
    .center-text {
        text-align: center;
        display: block;
        margin-bottom: 5px;
    }
    .card-body p.text {
        margin-bottom: 15px;
        height: auto;
        max-height: none;
    }
    .card1 {
        padding: 0px;
        overflow: hidden;
        height: auto;
        display: flex;
        flex-direction: column;
    }
    .program-image-container {
        padding: 0;
        margin: 0;
    }
    .program-img {
        width: 100%;
        height: auto;
        display: block;
    }
    .program > .col-lg-6 {
        margin: 0% auto;
    }
    .card-body {
        flex-grow: 1;
        height: auto;
        max-height: none;
    }

    /* كود CSS الجديد لحركة الظهور عند التمرير */
    .program-card-animation {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }

    .program-card-animation.is-visible {
        opacity: 1;
        transform: translateY(0);
        
    }
     .program-card-animation {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .program-card-animation.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
/*----------------------------- 
  Team
-------------------------------*/



    
   @media(max-width:370px) {
    .about-feat p{
        width: 120%;
font-size:12px
   } 
   .about-feat button{
    width: 100%;

   }
    }

        .iv-phone {
            font-size: 0.8em;
            color: #777;
        }
        #nav {
            margin-top: 20px;
        }
        .btn{
                        color: #fff;
                            box-shadow: 4px 4px 5px rgb(84, 86, 86);

                        

        }
        #nav button {
            padding: 10px 20px;
            margin: 0 10px;
            cursor: pointer;
        }
        .down {
            opacity: 0.8;
        }
          

    h3 {
        font-size: 10px;
    }

    .k {
        font-size: 0.85em;
    }

    .iv-phone {
        font-size: 0.8em;
    }

    #nav {
        display: flex;
        justify-content: center; /* Center navigation buttons */
        margin-top: 15px;
    }

    #nav button {
        padding: 8px 15px;
    }

/* تنسيقات أساسية للـ wrap والـ showcase */
.wrap {
    overflow: hidden;
}

#showcase {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* السماح للكروت بالترتيب في صفوف متعددة لو فيه مساحة */
    justify-content: center; /* توسيط الكروت أفقياً بشكل افتراضي */
    gap: 20px;
    padding: 20px;
    height: 500px;

}

.cloud9-item {
    border-radius: 8px;
    text-align: center;
    padding: 20px;
    width: 300px; /* عرض مبدئي للكارت على الشاشات الكبيرة */
    box-sizing: border-box;
    
}

.cloud9-item img{
    width: 160px;
    height: 160px;
    border-radius: 50%;
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
        box-shadow: 4px 2px 5px rgb(22, 75, 189);

}

.cloud9-item h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.cloud9-item .iv-phone {
    margin-top: 2px;
    font-size: 10px;
    color: #000;
}

.cloud9-item .iv-phone i {

    font-size: 10px;
    color: #000;}
    font-family: Arial, sans-serif;

/* تنسيقات للموبايل (أقل من 768 بكسل) */
@media (max-width: 767px) {
    #showcase {
        flex-direction: column;
        align-items: center;
        justify-content: center; /* توسيط الكروت في وضع التابلت */
        box-shadow: 0 2px 5px rgb(85, 84, 84);
        width:100%;

    }


    .cloud9-item {
        width:100%;
        margin: 0 auto;
        justify-content: center; /* توسيط الكروت في وضع التابلت */
        align-items: center;

    }
}

/* تنسيقات للتابلت (من 576 بكسل إلى 991 بكسل) */
@media (min-width: 376px) and (max-width: 991px) {
    .cloud9-item {
        margin-left:auto%;
    /* margin-right: 2%; */
        width: 40%; /* ممكن تظبط النسبة دي حسب الحاجة */
 box-shadow: 0 2px 5px rgb(85, 84, 84); /* ظل */
        background-color:#fff;
                justify-content: center; /* توسيط الكروت في وضع التابلت */

    }

    #showcase {
                width:100%;

        justify-content: center; /* توسيط الكروت في وضع التابلت */
    }
}

/* تنسيقات للشاشات العادية واللابتوب (أكبر من 991 بكسل) */
@media (min-width: 992px) {
    #showcase {
        justify-content: flex-start; /* ممكن تخلي الكروت تبدأ من الشمال أو اليمين */
    }

    .cloud9-item {
        /* هنا ممكن تظبط عرض الكارت لو عايز عدد معين من الكروت في الصف */
        /* مثال لو عايز 3 كروت تقريباً في الصف: */
        /* width: calc(33.33% - 20px); */

        /* أو ممكن تخليه ياخد عرض ثابت زي ما هو (300px) وتخلي الـ showcase يرتبهم */
    }
}
   /* CSS Enhancements */
        .our-team-section {
            padding: 50px 0;
            direction: rtl;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 1s ease-out, transform 1s ease-out;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f9f9f9;
            width:100%;
        }

        .our-team-section.animate-in {
            opacity: 1;
            transform: translateY(0);
        }

        .our-team-section .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .our-team-section .section-title {
            text-align: center;
            margin-bottom: 15px;
            color: #333;
            font-size: 2.5rem;
            font-weight: 600;
        }

        /* Flexible Carousel Container (All Members in One Scrollable Container) */
        .our-team-section .carousel-container-wrap {
            position: relative;
        }

        .our-team-section .carousel-slides {
            display: flex;
            overflow-x: auto;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
            padding-bottom: 20px;
            gap: 20px; /* Space between members */
            
            /* Hide the scrollbar for a cleaner look */
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
            border-radius: 8px;
        }

        .our-team-section .carousel-slides::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }

        /* Member Card Styling */
        .our-team-section .member-card {
            flex: 0 0 calc(33.333% - 14px); /* Display 3 cards per row by default on large screens */
            scroll-snap-align: start;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            background-color: #fff;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            padding: 25px;
            border: 1px solid transparent;

            /* New properties for the flip animation */
            transform: perspective(400px) rotateY(90deg);
            opacity: 0;
            transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s ease-in-out, box-shadow 0.3s ease, border 0.3s ease;
            backface-visibility: hidden;
        }

        /* Class that will be added to trigger the animation */
        .our-team-section .member-card.is-visible {
            transform: perspective(400px) rotateY(0deg);
            opacity: 1;
        }

        .our-team-section .member-card:hover {
            box-shadow: 0 10px 30px rgba(50, 50, 50, 0.2);
            transform: translateY(-5px); /* Optional: add a subtle lift on hover */
        }

        .our-team-section .member-card img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: border-radius .3s ease, transform 0.3s ease, box-shadow 0.3s ease;
        }

        .our-team-section .member-card:hover img {
            border-radius: 8px; /* Square shape on hover */
            transform: scale(1.05); /* Image zoom on hover */
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        }

        .our-team-section .member-details {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .our-team-section .member-card h3 {
            margin: 0;
            font-size: 1.6rem;
            color: #222;
        }
        .our-team-section .member-card p {
            margin: 5px 0;
            color: #555;
            font-size: 1rem;
        }
        
        /* Navigation Buttons (Arrows) */
        .our-team-section .carousel-nav-arrows {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }
        .our-team-section .carousel-nav-arrows button {
            background-color: #f0f0f0;
            color: #333;
            border: none;
            padding: 12px 20px;
            border-radius: 50px;
            cursor: pointer;
            font-size: 1.2rem;
            transition: background-color 0.3s, transform 0.2s;
            margin: 0 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .our-team-section .carousel-nav-arrows button:hover {
            background-color: #e0e0e0;
            transform: scale(1.05);
        }
        .our-team-section .carousel-nav-arrows button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            .our-team-section .member-card {
                flex: 0 0 calc(50% - 10px); /* Display 2 cards per row on tablets */
            }
        }
        @media (max-width: 768px) {
            .our-team-section .member-card {
                flex: 0 0 100%; /* Display 1 card per row on mobile */
            }
        }
/*----------------------------- 
  Jobs
-------------------------------*/
.jobs .row:hover{
  box-shadow: 1px 2px 10px rgb(138, 136, 150, 0.4);
  cursor: pointer;
}

.jobs-page .job-header h2{
  font-weight: var(--fw-600);
}

.jobs-page .job-header span{
  color: var(--clr-accent-800);
}

.jobs-page .job-opportunity h3{
  color: var(--clr-accent-800);
  font-weight: var(--fw-600);
}

.jobs-page .row{
  box-shadow: 1px 2px 10px rgb(138, 136, 150, 0.4);
  transition: all 0.25s;
}

.jobs-page .row:hover{
  transform: scale(1.02);
}


@media(max-width: 576px){
  .jobs .flex-xl-row{
    flex-direction: column;
  } 
}
/*----------------------------- 
    Contact
-------------------------------*/
.contact{
  background-color: var(--clr-neutral-400);
}
.contact input, textarea{
  margin-bottom: 15px;
}

.contact input[type="submit"]:hover,
.contact input[type="submit"]:focus{
  background-color: var(--clr-accent-800);
}

.contact i{
  color: var(--clr-accent-800);
  font-size: 18px;
}

.contact .text{
  line-height: 1;
}

.contact a{
  color: var(--clr-primary-800);
}

.contact h5{
  font-size: 19px;
}

@media(max-width: 992px){
  .contact .row{
    gap: 15px;
  }
}
 .contact-section {
            padding: 50px 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f7f7f7;
            direction: rtl;
        }
        .contact-section .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        .contact-section .section-title {
            text-align: center;
            margin-bottom: 40px;
            color: #333;
            font-size: 2.5rem;
            font-weight: 600;
        }
        .contact-content {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            border-radius: 15px;
            background-color: #fff;
            padding: 30px;
        }
        .contact-info,
        .map-container {
            flex: 1 1 45%;
            min-width: 300px;
        }
        
        /* Contact Info Styling */
        .contact-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
        }
        .contact-item {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 25px;
            transition: transform 0.3s ease;
        }
        .contact-item:hover {
            transform: translateX(10px);
        }
        .contact-item i {
            color: #007bff;
            font-size: 24px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #e6f2ff;
            border-radius: 50%;
        }
        .contact-item p, .contact-item a {
            margin: 0;
            font-size: 1rem;
            color: #555;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .contact-item a:hover {
            color: #0056b3;
        }

        /* Map Styling - تم التعديل هنا لتوسيط الخريطة في الوضع العادي */
        .map-container {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            /* **تعديل جديد: لتوسيط الـ iframe أفقياً** */
            display: flex; 
            justify-content: center;
            align-items: center;
        }
        .map-container iframe {
            /* **تعديل جديد: التحكم في حجم الخريطة في الوضع العادي** */
            width: 100%; 
            max-width: 600px; /* أقصى عرض للخريطة في الوضع العادي */
            height: 450px;
            border: 0;
        }

        /* Social Media Icons Styling */
        .social-icons {
            margin-top: 30px;
            display: flex;
            gap: 15px;
        }
        .social-icons a {
            color: #fff;
            background-color: #03a84e;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }
        .social-icons a.facebook { background-color: #3b5998; }
        .social-icons a.twitter { background-color: #000; }
        .social-icons a.instagram { background-color: #c13584; }
        .social-icons a.youtube { background-color: #c4302b; }
        .social-icons a.telegram { background-color: #0088cc; }
        .social-icons a:hover {
            transform: translateY(-5px);
        }

        /* Responsive Design - تم تعديل هذه المنطقة بناءً على طلبك */
        @media (max-width: 992px) {
            
            /* قواعد استجابة التصميم الأساسية للتابلت والموبايل */
            .contact-content {
                flex-direction: column;
            }
            .contact-info,
            .map-container {
                flex: 1 1 100%;
            }

            /* **التعديلات الخاصة لحل مشكلة خروج النص في الموبايل والتابلت** */
            
            /* 1. جعل كل مجموعة اتصال (contact-item) تظهر عمودياً */
            .contact-item {
                flex-direction: column; 
                align-items: flex-start; 
                gap: 5px;
            }

            /* 2. معالجة ديف الهاتف (الذي يحتوي على رقمين وأيقونتين) */
            .contact-info .contact-item:first-child { 
                /* يستخدم display: block لتمكين فصل الأرقام بوضوح */
                display: block; 
            }
            
            /* 3. لضمان أن النصوص تأخذ كامل العرض وتلتف بشكل صحيح */
            .contact-item p, .contact-item a {
                /* يضمن كسر الكلمات الطويلة مثل أرقام الهواتف */
                word-break: break-word; 
                text-align: right; 
                max-width: 100%;
                margin-bottom: 10px;
            }
            
            /* إزالة الهامش الزائد من العنصر الأخير في ديف الهاتف المزدوج */
            .contact-info .contact-item:first-child p:last-of-type {
                margin-bottom: 0;
            }
            
            /* **التعديل الخاص بالخريطة في الموبايل والتابلت** */
            .map-container {
                display: flex;
                justify-content: center;
                                background-color:#ddd;
                         width:25%;       

            }
            .map-container iframe {
                width: 75%; /* تأخذ كامل عرض الـ container */
                max-width: none; /* إلغاء الحد الأقصى للعرض للسماح لها بالتمدد */
                                                margin:2%;

                height: 200px; /* تقليل الارتفاع على الموبايل */
            }
        }

/*----------------------------- 
  Footer
-------------------------------*/

footer{
  background-color: var(--clr-primary-900);
  transition: all 0.3s ease;
  z-index: 2;
}

footer .footer-icon i{
  font-size: 26px;
  color: var(--clr-neutral-100);
  margin-top: 5px;
}

footer .footer-icon i:hover{
  transform: scale(1.4);
}

footer .footer-icon a:hover{
  color: var(--clr-accent-800);
}

footer a{
  color: var(--clr-neutral-100);
  margin-right: 10px;
}

footer .copyright a{
  color: var(--clr-accent-800);
  font-weight: 500;
}

/************************** Student page  **************************/
#student{
  margin-top: 50px;
}

@media (max-width: 768px){
  #student{
    margin-top: 28px;
  }
  
  #student #content{
    margin-block: 28px;
  }
}
/* student sidebar  */
#student .sidebar{
  display: flex;
  padding: 80px 0 0;
}

#student .sidebar .sidebar-nav{
    min-width: 25%;
    max-width: 25%;
    margin-bottom: 0;
    transition: all 0.3s;
}

#student #content {
  min-height: 100vh;
}

#student .accordion-button:not(.collapsed) {
  background-color: var(--clr-accent-800);
  color: var(--clr-neutral-100);
}

#student .accordion-button:not(.collapsed)::after  {
  filter: brightness(00%) invert(70%);
}

#student .accordion-button:focus {
  box-shadow: inherit;
}

#student .card-img,
#student .card-img img{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
} 

@media (max-width: 768px){
  #student .sidebar{
    flex-direction: column;
  }

  #student .sidebar .sidebar-nav{
    min-width: 90%;
    max-width: 90%;
    margin-inline: auto;
  }
}

/************************** Courses page  **************************/
/* courses sidebar */
#courses .sidebar{
  display: flex;
  padding: 80px 0 0;
}

#courses .sidebar .sidebar-nav{
    min-width: 25%;
    max-width: 25%;
    margin-bottom: 0;
    transition: all 0.3s;
}

#courses .nav-item a{
  padding-block: 12px;
  color: var(--clr-primary-800);
  font-weight: 500;
}

#courses .nav-link.active{
  background-color: var(--clr-accent-800);
  color: var(--clr-neutral-100);
}

#courses .nav-item{
  height: 52px;
}

#courses .card-img,
#courses .card-img img{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

@media (max-width: 768px){
  #courses .sidebar{
    flex-direction: column;
  }

  #courses .sidebar .sidebar-nav{
    min-width: 90%;
    max-width: 90%;
    margin-inline: auto;
  }

  /* courses content */
  #courses #content{
    margin-block: 20px;
  }
}
<style>
 .footer {
    background-color: #343a40; /* لون خلفية غامق زي اللي في معظم الفوتر */
    color: white; /* لون النص أبيض عشان يكون واضح على الخلفية الغامقة */
    padding-top: 20px; /* مساحة داخلية علوية للفوتر */
    padding-bottom: 10px; /* مساحة داخلية سفلية للفوتر */
    text-align: center; /* عشان الكلام يكون في نص العناصر افتراضيًا */
    width: 100%;
}

.footer-icon {
    display: flex; /* استخدام فليكس بوكس عشان نرتب العناصر بسهولة */
    justify-content: center; /* توسيط العناصر أفقياً */
    /* flex-wrap: wrap; */ /* هنشيل أو نعلق الخاصية دي عشان الروابط متنتقلش لسطر جديد */
    gap: 15px; /* مسافة بين كل لينك والتاني */
    margin-bottom: 20px; /* مساحة تحت روابط التنقل */
}
.footer-icon a {
    color: white; /* لون روابط التنقل أبيض */
    text-decoration: none; /* إزالة الخط اللي تحت الروابط */
    font-size: 1rem; /* حجم الخط مناسب */
    padding: 8px 15px; /* مساحة داخلية للينك عشان يكون سهل الضغط عليه */
    border-radius: 5px; /* حواف مدورة بسيطة */
    transition: background-color 0.3s ease; /* إضافة تأثير بسيط عند مرور الماوس */
}

.footer-icon a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* تغيير بسيط في الخلفية عند مرور الماوس */
}

.copyright {
    font-size: 0.8rem; /* حجم خط صغير لحقوق الملكية */
    margin-bottom: 0; /* إزالة أي مسافة سفلية إضافية */
}

.copyright a {
    color: #f8f9fa; /* لون لينك حقوق الملكية */
    text-decoration: none;
}

.copyright a:hover {
    text-decoration: underline; /* إضافة خط تحت اللينك عند المرور */
}

/* تنسيقات للشاشات الأكبر عشان الروابط تكون جنب بعض بشكل أفضل */
@media (min-width: 768px) {
    .footer-icon {
        justify-content: center; /* توسيط الروابط على الشاشات الكبيرة */
    }
}
/* تنسيقات أساسية للـ wrap والـ showcase (محتمل إنك مش محتاج تعدل هنا) */
.wrap {
    overflow: hidden;
    width: 100%; /* تأكد إن الـ wrap واخد العرض الكامل عشان التوسيط يشتغل صح */
}

#showcase {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center; /* توسيط الكروت أفقياً بشكل افتراضي */
    gap: 20px;
    padding: 20px;
    min-height: 500px; /* استخدم min-height عشان لو المحتوى قليل */
    align-items: center; /* توسيط العناصر عمودياً (لو عايز توسيط رأسي كمان) */
}

.cloud9-item {
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0); /* ممكن تضيف ظل لو عايز */
    text-align: center;
    padding: 20px;
    width: 300px; /* عرض مبدئي للكارت */
    box-sizing: border-box;
    margin: 0 auto; /* إضافة هوامش تلقائية على اليمين والشمال للتوسيط */
}

.cloud9-item img {
    max-width: 100%;
    height: auto;
    border-radius: 50%;
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-top: 0%;
    /*box-shadow:3px 3px 4px #ddd*/

}

.cloud9-item h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.cloud9-item .iv-phone {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #777;
}

.cloud9-item .iv-phone i {
    margin-right: 5px;
}

/* تنسيقات للموبايل (أقل من 768 بكسل) */
@media (max-width: 767px) {
    #team {
        flex-direction: column;
        align-items: center; /* تأكيد التوسيط الأفقي */
        justify-content: flex-start; /* ابدأ العناصر من الأعلى */
        width:100%;
        min-height: auto; /* خلي الارتفاع يتحدد حسب المحتوى */
    }
    #team .container {
   width: 100%;
    }
    .row{
   width: 100%;
    }
    .row  .containera{
   width: 100%;
    }
   .row  .containera .wrap{
   width: 100%;
   margin: 0px;
    } 
    #showcase {
        flex-direction: column;
        align-items: center; /* تأكيد التوسيط الأفقي */
        justify-content: flex-start; /* ابدأ العناصر من الأعلى */
        width:100%;
        min-height: auto; /* خلي الارتفاع يتحدد حسب المحتوى */
    }

    .cloud9-item {
        width: 100%; /* الكارت ياخد 90% من عرض الشاشة */
        justify-content: center; /* توسيط المحتوى داخل الكارت */
        align-items: center; /* توسيط المحتوى داخل الكارت */
        padding: 10px ; /* مساحة وهوامش للتوسيط */
        box-shadow: 0 2px 5px rgb(85, 84, 84); /* ظل */
        background-color:#fff
    }
 
  
}

/* تنسيقات للتابلت (من 376 بكسل إلى 991 بكسل) */
@media (min-width: 376px) and (max-width: 991px) {
    #showcase {
        justify-content: center; /* توسيط الكروت أفقياً */
        box-shadow: 0 2px 5px rgb(85, 84, 84); /* ظل */
        width:100%;
        align-items: center; /* توسيط العناصر عمودياً */
        min-height: auto; /* خلي الارتفاع يتحدد حسب المحتوى */

    }

    .cloud9-item {
         min-height: 400px;
        width: 100%; /* ممكن تظبط النسبة دي حسب الحاجة */
        margin: 10px auto; /* هوامش للتوسيط */

    }
}

/* تنسيقات للشاشات العادية واللابتوب (أكبر من 991 بكسل) */
@media (min-width: 992px) {
    #showcase {
        justify-content: flex-start; /* ممكن تخلي الكروت تبدأ من الشمال أو اليمين */
        background-color:rgba(193, 149, 45, 0); /* أو اللون اللي تختاره */
        min-height: 500px;
        align-items: flex-start; /* ابدأ العناصر من الأعلى */
    }

    .cloud9-item {
        width: 300px; /* أو العرض اللي يناسب تصميمك */
        margin: 0; /* إزالة أي هوامش ممكن تكون بتأثر */
    }
}
/************************** Dashboard page  **************************/
#dashboard {
  background-color: var(--clr-neutral-500);
  min-height: 100vh;
}

.dashboard-sidebar{
  width: 20%;
  transition: width 0.5s ease;
  background-color: var(--clr-primary-900);
}

.dashboard .sidebar-logo{
  height: 70px;
  line-height: 70px;
  font-size: 18px ;
  overflow: hidden;
  text-align: center;
  color: var(--clr-neutral-100);
}


.dashboard .dashboard-sidebar a{
  color: var(--clr-neutral-100);
  overflow: hidden;
  text-align: center;
  font-weight: bolder;
  border-bottom:  1px solid rgba(255, 255, 255, .1);
  border-top:  1px solid rgba(255, 255, 255, .2);
  padding: 20px 0 ;
  width: 100%;
}

.dashboard .list-group-item.active,
.dashboard .list-group-item:hover{
  background-color: var(--clr-neutral-800);
}

.dashboard .sub-menu{
  display: none;
  overflow: hidden;
  text-align: center;
  transition: margin 0.3s ease;
}

.dashboard .sub-menu.active{
  display: block;
}

.dashboard .sub-item a{
  font-weight: 500;
  transition: margin 0.3s ease;
  border-bottom: none;
  border-top: none;
}

.dashboard .sub-item {
  padding: 10px 0;
}

.dashboard .sub-item.active a,
.dashboard .sub-item:hover a{
  color: var(--clr-accent-800);
  margin-left: 18px;
}

.dashboard .rotate{
  transform: rotate(180deg);
}

.h{
  width: 0;
  transition: all 0.5s ease;
}

.dashboard #menu-toggle{
  cursor: pointer;
}

.data{
  width: 80%;
  transition: width 0.5s ease;
}

.w100{
  width: 100%;
}

@media (max-width: 835px){
  .dashboard .dashboard-sidebar a{
     font-size: 15px;
  }
  .sidebar-logo{
      /*visibility: hidden;*/
      
  }

  /* hidden dashboard sidebar in small devices and show in large devices */
  .data{
    width: 100%;
  }
  
  .dashboard-sidebar{
    width: 0;
  }

  .dashboard-sidebar.h {
    width: 20%;
  }
  
  .data.w100{
    width: 85%;
  }
}

@media (max-width: 500px){
  .dashboard .dashboard-sidebar a{
     font-size: 12px;
  }

  .dashboard .navbar-toggler-icon{
    font-size: 20px;
  }

  .dashboard-sidebar.h {
    width: 20%;
  }
  
  .data.w100{
    width: 80%;
  }
}

@media (max-width: 300px){
  .dashboard .dashboard-sidebar a{
     font-size: 9px;
  }
}

/* Dashboard Table */
.dashboard .container .col i.accent-text{
  font-size: 55px;
}

.dashboard table i{
  color: var(--clr-accent-800);
  font-size: 21px;
  cursor: pointer;
}
 
/* dashboard title */
.dashboard .section-title{
  font-size: 35px;
  margin-bottom: 30px;
}

/* dashboard input */
.dash-input{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: center;
  /* width: 98%; */
  margin: 0 auto;
}

.dash-input input{
  width: 75%; 
}

@media (max-width: 992px){
  .dash-input a{
    margin-top: 10px;
  }
  .dash-input input{
    width: 100%;
  }
  .dashboard .section-title{
    font-size: 30px;
  }
}
/************************** Signup & Signin Page **************************/

#form{
  background-color: var(--clr-neutral-500);
  min-height: 100vh;

}

#form .form-container{
  background-color: var(--clr-neutral-100);
  margin-top: 20px;
  box-shadow: var(--box-shadow);
}

#form label{
  color: var(--clr-primary-800);
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

#form .form-control {
  height: 55px;
  background: var(--clr-neutral-100);
  font-size: 15px;
  border-radius: var(--bd-raduis);
  border: 1px solid rgba(0, 0, 0, 0.1); 
}
  
#form .form-control:focus,
#form .form-control:active {
  border: 1px solid var(--clr-accent-800);
}

#form .form-control.submit{
  background-color: var(--clr-accent-800);
  font-size: 17px;
}


/************************** Quiz page  **************************/
#quiz.mcq label{
  margin: -6px 0 15px 45px;
}
#quiz p{
  color: #373e3f;
  font-size: 18px;
  font-weight: var(--fw-500);
}
#quiz input{
  color: #373e3f;
}
.finish-btn{
  padding: 12px 25px;
  font-size: 20px;
  border-radius: var(--bd-raduis);
  letter-spacing: 1.5px;
  margin-top: 8px;
}
#quiz input[type="submit"]{
  color: var(--clr-neutral-100);
}

#quiz.complete p{
  margin-bottom: 30px;
}
@media (max-width: 576px){
  #quiz p{
    font-size: 16px;
  }

  .finish-btn{
    padding: 10px 20px;
    font-size: 18px;
    border-radius: var(--bd-raduis);
    letter-spacing: 1.5px;
  }
}

#quiz .img{
  margin: 5px 15px 20px; 
}

#quiz .img img{
  height: 200px;
  object-fit: contain;
}

/************************** Chat page **************************/

/************************** Schedule page **************************/
.schedule-table{
  overflow: auto;
  /* background-color: red; */
  margin: 0;
  padding: 0;
}
.schedule-table thead {
  background-color: var(--clr-primary-900);
  color: var(--clr-neutral-100);
}

.schedule-table thead th {
  padding: 5px;
  text-align: center;
  font-size: 16px;
  min-width: 100px;
}

.schedule-table tbody td {
  border: 1px solid gainsboro;
  padding: 5px;
  text-align: center;
  min-width: 100px;
}

.schedule-table tbody td.time {
  font-size: 16px;
  background-color: var(--clr-primary-900);
  color: var(--clr-neutral-100);
}

/* .schedule-table tbody td.active {
  min-width: 120px;
} */

.schedule-table tbody td p{
  color: var(--clr-primary-800);
  margin-bottom: 5px;
  font-size: 14px;
}

.schedule-table tbody td h5{
  color: var(--clr-accent-800);
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 15px;
}

.schedule-table tbody td.active:hover{
  background-color: var(--clr-accent-800);
}

.schedule-table tbody td.active:hover p,
.schedule-table tbody td.active:hover h5{
  color: var(--clr-neutral-100);
}

.schedule-table tbody td.active:hover a{
  color: var(--clr-primary-900);
}
.schedule-table tbody td a{
  font-size: 14px;
}
@media (max-width: 1200px) {
.schedule-table {
  overflow-x: auto;
  }
}

@media (max-width: 992px) {
.schedule-table thead th {
  padding: 5px;
  font-size: 16px;
}

.schedule-table tbody td {
  padding: 5px;
}

.schedule-table tbody td.time {
  font-size: 16px;
 
}
}


@media (max-width: 768px) {
.schedule-table thead th {
  padding: 5px;
  font-size: 15px;
}

.schedule-table tbody td {
  padding: 14px;
}

.schedule-table tbody td.time {
  font-size: 14px;
  min-width: 90px;
}


.schedule-table tbody td p{
  font-size: 12px;
}

.schedule-table tbody td h5{
  font-size: 13px;
}
}


/************************** inputs page **************************/
.multi-form form > div{
  margin-bottom: 30px;
}

/************************** Score page **************************/
.score thead {
  background-color: var(--clr-accent-800);
  color: var(--clr-neutral-100);
}
.score thead th {
  padding: 8px 16px;
  font-size: 18px;
}

.score tbody td {
  border: 1px solid gainsboro;
  padding: 15px;
}

.score .container{
  margin-top: 120px;
}

/************************** Material Page **************************/

.material #pills-tab .nav-link{
  width: 200px;
  border-radius: 2px;
  color: var(--clr-neutral-100);
  font-weight: 500;
  background-color: rgb(136, 135, 135);
  margin-top: 5px;
}

.material #pills-tab .nav-link.active{
  background-color: var(--clr-primary-900);
  color: var(--clr-neutral-100);
}

.material .tab-list{
  background-color: #b40a0a;
  width: 100%;
}

/* for material page not for material table */
.material.material-page .tab-list{
  width: 100%;  /* width of list */
  background-color: #b40a0a;
}

.material.material-page .data{
  text-align: center;
  vertical-align: middle;
}

.material.material-page{
  background-color: var(--clr-neutral-500);
  /* background-color: red; */
}

.material.material-page .tab-link{
  border-radius: 2px;
  border-bottom: 1px solid gainsboro;
}
/* end material page */

.material .tab-list .tab-link{
  cursor: pointer;
  background-color: var(--clr-neutral-100);
  width: 100%;
  /* background-color: blue; */
}
.material .tab-list .tab-link .data{
  width: 60%;
  /* background-color: green; */
}
.material .tab-list video{
  height: 20%;
  border-radius: var(--bd-raduis);
}
.material .tab-list h6{
  text-align: center;
}
.material .tab-list p{
  color: var(--clr-neutral-700);
  font-size: 15px;
  padding: 0px 20px;
}

.material .tab-list .tab-link.active,
.material .tab-list .tab-link:hover{
  background-color: rgb(240, 240, 240);
}

.material .data i{
  font-size: 55px;
  color: var(--clr-primary-800);
}

.material table i{
  color: var(--clr-accent-800);
  font-size: 21px;
  cursor: pointer;
}

.material table td{
  color: var(--clr-primary-800);
}

.material-table .pdf i,
.material-table .powerpoint i{
  color: var(--clr-primary-800);
  font-size: 35px;
  }

.tab-pane{
  width: 50%;
}

@media (max-width: 768px){
  .material #pills-tab .nav-link{
    width: 150px;
  }
  .material .tab-list .tab-link .data{
    width: auto;
  }
  .tab-pane{
    width: auto;
  }
  .material .tab-list video{
    width: 160px;
    border-radius: var(--bd-raduis);
  }
  
}

/************************** Tables **************************/
table td, th{
  text-align: center;
  vertical-align: middle;
}

table tbody tr.active,
table tbody tr:hover{
  background-color: rgb(240, 240, 240);
}

table thead{
  background-color: var(--clr-primary-900);
  color: var(--clr-neutral-100);
}
/************************** Drag and Drop Page **************************/

.drop h5{
  margin-bottom: 25px;
  color: var(--clr-accent-800);
}

.drop tr{
  display: flex;
}

.drop td{
  border: 1px solid var(--clr-primary-900);
}

.drop th,
.drop td{
  width: calc(100% / 3);
}

.drop table tbody tr.active,
.drop table tbody tr:hover{
  background-color: var(--clr-neutral-100);
}

.drop td:first-child{
  display: flex;
  justify-content: center;
  word-wrap: break-word;
}

.drop th:last-child,
.drop td:last-child{
  margin-left: 20px;
}

.drop td div{
  padding: 10px;
}

.drop th{
  border-left: 1px solid var(--clr-neutral-500);
  padding: 10px;
  background-color: var(--clr-primary-900);
  color: var(--clr-neutral-100);
}

.drop .ui-draggable:hover,
.drop .ui-draggable:active{
  background: var(--clr-accent-800);
  color: var(--clr-neutral-100);
  cursor: pointer;
}

@media (max-width: 335px){
  .drop td{
    font-size: 14px;
  }
}

.drop .keyword{
  display: flex;
  flex-direction: column;
}
.drop .keyword img{
  width: 100%;
  height: 170px;
  object-fit: contain;
}

/************************** Series page **************************/
.series .title h5{
  color: var(--clr-accent-800);
}

.series ul{
  margin-bottom: 30px;
}

.series li{
  border-bottom: 1px solid var(--clr-neutral-300);
  padding: 15px 0 15px 20px;
}

.series li:last-child{
  border-bottom: 0;
}

.series a{
  transition: margin 0.25 ease-in-out;
}

.series li i{
  font-size: 20px;
  margin-right: 10px;
  color: var(--clr-neutral-600);
}

.series li a:hover i,
.series li a.active i{
  color: var(--clr-accent-800);
  margin-right: 20px;
}

.series li span{
  color: var(--clr-primary-900);
  font-size: 17px;
  }
.series li span .selected{
  color: var(--clr-primary-500);
  font-size: 17px;
  }

@media(max-width: 768px){
  .series .title h5{
    background-color: var(--clr-accent-800);
    color: var(--clr-neutral-100);
    padding: 12px;
  }

  .series li span{
    font-size: 16px;
  }
}

/************************** Multiple Quiz Page **************************/
.multi-quiz .form-check{
  padding-left: 0 ;
  margin-left: 0;
}

.multi-quiz .mcq .question,
.multi-quiz .complete .question p{
  border-bottom: 1px solid var(--clr-neutral-300);
  margin-bottom: 0 !important;
  padding: 25px 0;
}

.multi-quiz .drop{
  padding: 30px 0;
}

/************************** Spinner **************************/
#spinner {
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-out, visibility 0s linear .5s;
  z-index: 99999;
  color: var(--clr-accent-800);
}
#spinner.show {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease-out, visibility 0s linear 0s;
}
.t{
  margin: 5px;
  height: 300px;
  border-radius: 15px;
  width: 100%;
  display: flex;
}
.t .contact_us{
  width:calc(96%/3);
  height:98%;
  margin: 1%;
  border-radius: 5px;
  display: inline-block;
  font-weight: bold;
  text-align: center;
  position: relative;
  display: block;
}
 @media(max-width: 770px){
  .t{
   display: block;
  height:1000px;
  margin: 2px;
  } 
.t .contact_us{
  height:calc(96%/3);
  width:98%;
  margin: 1% auto;
 box-shadow: var(--box-shadow);
}
.t .contact_us img{
  height:60%;
  width:30%;
  margin: 1px auto;
}
.t .contact_us .rrr{
  height:55%;
  width:95%;
  margin: 2% auto;
}
}@media(max-width: 400px){
  .t{
   display: block;
  height:1000px;
  margin: 2px;
  } 
.t .contact_us{
  height:calc(96%/3);
  width:98%;
  margin: 1% auto;
 box-shadow: var(--box-shadow);
}
.t .contact_us img{
  height:65%;
  width:75%;
  margin: 1px auto;
}
.t .contact_us .rrr{
  height:55%;
  width:95%;
  margin: 2% auto;
}
} 
.t .contact_us img:hover{
   box-shadow: 4px 4px 8px #b80514ab;

}


.t .contact_us .rrr{
  height:55%;
  width:95%;
  margin:5% auto;
}
.container .s{
  margin:50px auto ;
  display: flex;
  width: 30%;
  height: 100px;
   /* box-shadow: var(--box-shadow); */

}

.container .s a{
  margin: 5%;
  height: 70px;
}
.container .s a img{
  margin: 5%;
  height: 70px;
  width: 70px;
}
.container .s img:hover{
  opacity:1;
  transform: scale(1.5,1.5);
}
@media(max-width: 768px){
  .container .s{
   margin: auto;
   width:50%
  } 
  .container .s a{
  margin:3%;
  height: 70px;
  
}
.container .s a img{
  height:40px;
  width: 70px;
}
} 
  .container .series .row .hid{
    width: 50%;
    display: none;
  }
  
  .container .series .row .abdf{
    width: 50%;
    display: block;
  }
  .container .series .row .pdfhid{
    margin: 1px auto;
    border-radius: 15px;
    border: #952626 solid 5px;
    margin: 1px auto;
    width: 80%;
    margin-left: 10%;
  }
 
a:visited {
  color: rgb(33, 24, 134);
  font-weight: bolder;
}
.btn:visited {
  color: rgb(250, 248, 249);
  font-weight: bolder;
}
.join-btn:visited {
  color: rgb(240, 65, 16);
  font-weight: bolder;
}
/* ============================================ */
.card {
    box-shadow: 0 4px 8px 0 rgb(239, 238, 238);
    max-width: 300px;
    margin: auto;
    text-align: center;
    font-family: arial;
    border-radius: 0%;
  }
  .price {
    color: grey;
    font-size: 22px;
  }
a{
    width: 100%;
}
  .card button  {
    border: none;
    outline: 0;
    padding: 12px;
    color: white;
    background-color: #fffcfc;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
  }
  .card button:hover {
    opacity: 0.7;
  }
  .cards{
    display: flex;
    border-radius: 15%;
  }
  
  .cards h1{
    color: rgb(40, 39, 47);
  }
  .program{
    margin-top: 0px;
  }
  .img{
    width: 40%;
    /* border-radius: 15%; */
   margin: 1px auto;
  }
 img{
    background-size: cover;
    border-radius: 10%; 
    height: 20%;
  }
 .img img:hover{
    background-color:rgba(220, 20, 60, 0.494);
  }

  /* ===========================private======================= */
  /* تعديلات جدول الدورات التدريبية لشاشات التابلت (عادة ما تكون 768 بكسل وأكثر) */
@media (max-width: 768px) {
    .program .table td img {
        width: 90%; /* يمكنك تعديل هذا الحجم للتابلت */
    }
}

/* تعديلات جدول الدورات التدريبية لشاشات الهواتف المحمولة (عادة ما تكون أقل من 600 بكسل) */
@media (max-width: 600px) {
    .program .table td img {
        width: 100%; /* يمكنك تعديل هذا الحجم للهاتف */
    }
    .program .table th, .program .table td {
        font-size: 12px; /* تقليل حجم الخط في الخلايا */
        padding: 0px; /* تقليل حجم الحشو في الخلايا */
        text-align: left; /* محاذاة النص إلى اليسار إذا كان هناك ضيق في المساحة */
    }
    .program .table th:nth-child(1), /* إخفاء رأس العمود الأول (الصورة) */
    .program .table td:nth-child(1) {
        display: flex;
    }
}

.btn{
  padding: 8px 18px;
  background: var(--clr-accent-800);
  border: var(--clr-accent-800);
 
}
.a{ display: inline-flex;}
.btn:hover,
.btn:focus{
  background-color: var(--clr-accent-800) !important;}

.btn-primary{
  background: var(--clr-accent-800);
  color: rgba(255, 254, 254, 0.94);
  border: var(--clr-accent-800);
  width: Auto;
  margin-bottom: 10%;
   box-shadow: 0 4px 8px rgba(2, 2, 2, 0.94); /* ظل عند التhover */
  text-align: center;
}

.btn-primary:hover,
.btn-primary:focus{
  background-color: var(--clr-accent-800) !important;
}
/* ==================.social==================

=========================================== */
social-icons a {
    display:flex;
    justify-content:center;
    align-items:center
}
.social-icons {
    position:fixed;
    top:32%;
    left:0;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    background-color:#333;
    padding:10px;
    border-radius:0 5px 5px 0;
    z-index:10000;
box-shadow:0 4px 8px rgba(51,66,199,.884);
    width:auto;
    height:auto;
    text-align:center;
}
.social-icons a {
    height:20px;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:box-shadow .3s,transform .3s ease-in-out
    margin:2% auto;
}
.social-icons a:last-child {
    margin-bottom:0
}
.social-icons a:hover {
    background-color:#555;
    box-shadow:5px 2px 5px red;
    transform:scale(1.2)
}
@media (max-width:768px) {
    .social-icons {
        position:fixed;
        top:50%;
        left:0;
        transform:translateY(-50%);
        width:auto;
        flex-direction:column;
        justify-content:flex-start;
        padding:5px;
        border-radius:0 5px 5px 0;
        background-color:rgba(51,51,51,.8);
box-shadow:0 4px 8px rgba(51,66,199,.884);
    .social-icons a {
        margin-bottom:5px;
        font-size:16px;
        width:30px;
        height:30px;
        padding:5px
    }
    .social-icons a:last-child {
        margin-bottom:0
    }
    .social-icons a:hover {
        box-shadow:5px 2px 5px red;
        transform:scale(1.2)
    }
}
.social-icons a {
    margin-bottom:0;
    font-size:18px;
    width:auto;
    height:auto;
    padding:8px
}
/* -----------------------------------
| Global Variables (New Elegant Palette)
--------------------------------------*/
:root {
  --clr-primary-dark: #1D3557;
  --clr-secondary-accent: #E6A800;
  --clr-neutral-white: #ffffff;
  --clr-neutral-offwhite: #F1FAEE;
  --clr-neutral-border: #E6E6E6;
  --clr-text-dark: #343a40;
  --clr-hover-light: #A8DADC;
  --clr-button-hover: #457B9D;
  --clr-label-color: #6c757d;
}

/* -----------------------------------
| Title & Main Table Style
--------------------------------------*/
.section-title {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 40px;
  font-weight: 700;
  color: var(--clr-primary-dark);
}

.program-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 30px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  background-color: var(--clr-neutral-white);
}

.program-table thead {
  background-color: var(--clr-primary-dark);
  color: var(--clr-neutral-white); /* 👈 التأكيد على أن لون نص الهيدر أبيض */
  font-weight: 700;
}

.program-table th, .program-table td {
  padding: 15px 20px;
  text-align: center;
  border-bottom: 1px solid var(--clr-neutral-border);
  color: var(--clr-text-dark);
}

.program-table th {
  font-size: 1.1rem;
  text-transform: uppercase;
}

.program-table td {
  font-size: 1rem;
  font-weight: 700; /* 👈 جعل نص بيانات الجدول سميكاً (700) */
  vertical-align: middle;
}

/* صفوف متناوبة وهوفر أنيق (Desktop) */
.program-table tbody tr:nth-child(even) {
  background-color: var(--clr-neutral-offwhite);
}

.program-table tbody tr:hover {
  background-color: var(--clr-hover-light);
  color: var(--clr-primary-dark);
  transform: scale(1.005);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* -----------------------------------
| Image Style (Desktop)
--------------------------------------*/
.program-table td img {
  width: 80%;
  max-width: 250px;
  height: 150px;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  object-fit: cover;
  border: 3px solid var(--clr-primary-dark);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* -----------------------------------
| Button Style (Desktop)
--------------------------------------*/
.program-table td form button.r {
  width: 150px; 
  padding: 12px 25px;
  border-radius: 5px;
  background-color: var(--clr-accent-800);
  color: var(--clr-primary-dark);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: background-color 0.3s ease, transform 0.1s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--clr-secondary-accent);
  display: block; 
  margin: 0 auto; 
}

.program-table td form button.r:hover {
  background-color: var(--clr-button-hover);
  color: var(--clr-neutral-white);
  transform: translateY(-2px);
  border-color: var(--clr-button-hover);
}

/*=======================private=====================*/
/* **الإضافة هنا: إضافة هامش علوي للقسم لحل مشكلة الشريط الثابت (Navbar) */
.program {
 padding-top: 100px; /* زيادة المساحة أعلى القسم لتعويض الشريط الثابت */
}

/* تنسيقات عامة للجدول */
.program table {
 width: 100%;
 border-collapse: collapse;
}

.program th, .program td {
 padding: 8px;
 text-align: center;
 border-bottom: 1px solid #ddd;
}

.program th {
 background-color:rgb(3, 3, 3);
 color: #fff;
}

/* تنسيق الصور في الجدول */
.program td img {
 width: 200px;
 max-height: 200px;
 box-shadow: 2px 2px 5px rgba(101, 224, 87, 0.78);
 border-radius: 5px; /* إضافة حواف مدورة */
}

/* تنسيقات للشاشات العادية (أكبر من 769 بكسل) */
@media (min-width: 769px) {
 .btn{
  width: 100%;
  color: #fff;
  box-shadow: 2px 2px 5px rgb(105, 87, 224);
 }
 .program td img {
  width: 250px;
  height: auto;
  max-height: 200px; /* لضمان عدم زيادة الارتفاع بشكل كبير */
  box-shadow: 2px 2px 5px rgb(105, 87, 224);
 }
 .program td img:hover {
  box-shadow: 2px 2px 5px rgb(224, 87, 119);
 }
 /* ✅ التعديل الرئيسي لحل مشكلة الصورة: إخفاء العمود الأول (ID) فقط */
 .program th:nth-child(1), .program td:nth-child(1) {
  display: none;
 }
}

/* تنسيقات لشاشات التابلت والموبايل (RWD) */
@media (max-width: 768px) {
 /* التعديل: إخفاء رأس الجدول بالكامل (الشريط الأسود) في الموبايل */
 .program thead {
  display: none;
 }

 .program tr {
  margin-bottom: 20px;
  display: block;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 15px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
 }
 .program td {
  display: block;
  text-align: left; /* LTR */
  padding-left: 0;
  position: relative;
  border-bottom: 1px dashed #eee;
  font-size: 16px;
  padding: 10px 0;
 
  /* التعديل: جعل لون الكلام غامق وبولد */
  font-weight: bold;
  color: #000000; /* لون نص غامق واضح */
 }

 /* 1. إخفاء عمود رقم الدورة (العمود الأول) بالكامل */
 .program tr > td:nth-child(1) {
  display: none;
  order: 0;
 }

 /* 2. ترتيب عمود الصورة (العمود الثاني الآن) ليكون في الأعلى */
 .program tr > td:nth-child(2) {
  order: -1;
  text-align: center;
  border-bottom: none;
  padding-bottom: 5px;
 }

 /* 3. تنسيق التسميات (data-label) */
 .program td::before {
  content: attr(data-label);
  display: inline-block;
  font-weight: bold;
  color: #000000;
  width: 130px;
  box-sizing: border-box;
  text-align: left; /* LTR */
  margin-right: 10px;
  margin-left: 0;
 }

 /* 4. إخفاء تسمية الصورة (data-label) لعمود الصورة (العمود الثاني) */
 .program tr > td:nth-child(2)::before {
  content: "";
  display: none;
 }

 /* 5. إخفاء تسمية زر الاشتراك (data-label) لعمود الزر (Last Child) */
 .program tr > td:last-child::before {
  content: "";
  display: none;
 }

 /* تنسيق الصورة */
 .program td img {
  width: 90%;
  max-width: 100%;
  height: 200px;
  margin: 0 auto 10px auto;
  display: block;
 }

 /* تنسيق زر الاشتراك (العمود الأخير) */
 .program td:last-child {
  order: 99;
  text-align: center;
  border-bottom: none;
  padding-top: 15px;
 }
 .btn{
  width: 100%;
  margin:5px auto;
  color :#fff;
 }
}
/* -----------------------------------
| Responsive Mobile Style - LTR (لم يتم تغيير هذا الجزء)
--------------------------------------*/
@media (max-width: 600px) {
  .program-table {
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    direction: ltr;
  }

  .program-table thead {
    display: none;
  }

  .program-table tbody,
  .program-table tr,
  .program-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .program-table tr {
    margin-bottom: 20px;
    background-color: var(--clr-neutral-white);
    border: 1px solid var(--clr-neutral-border);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.2s;
  }

  .program-table tr:hover {
    transform: translateY(-5px);
  }

  .program-table td {
    text-align: left;
    padding: 12px 15px;
    position: relative;
    border-bottom: 1px dashed var(--clr-neutral-border);
  }
 
  .program-table tr td:first-child {
    border-bottom: none;
    padding: 10px 0; 
    text-align: center; 
  }

  .program-table td:nth-child(6) {
    border-bottom: none;
    text-align: center;
    padding-bottom: 15px;
  }
 
  .program-table td:nth-child(6)::before {
    content: none !important;
  }


  .program-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--bs-gray-900);
    display: block;
    font-size: 0.9rem;
    margin-bottom: 5px;
    text-align: left;
  }

  .program-table tr td:first-child::before {
    content: none !important;
  }
 
  .program-table td:nth-child(2) {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--clr-primary-dark);
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--clr-secondary-accent);
  }

  /* تنسيق الصور داخل البطاقة - التعديل هنا لتوسيط الصورة */
  .program-table td img {
    width: 90%; 
    max-width: 300px; 
    height: auto;
    border-radius: 10px 10px 0 0;
    border: none;
    box-shadow: none;
    margin: 0 auto; 
    display: block;
    object-fit: cover;
  }

  /* تنسيق زر الانضمام */
  .program-table td form button.r {
    width: 90%;
    margin: 15px auto;
    display: block;
    font-size: 18px;
    padding: 15px 0;
    background-color:  var(--clr-accent-800);
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    color:#ffffff;
  }
 
  .program-table td form button.r:hover {
    background-color: var(--clr-button-hover);
    color: var(--clr-neutral-white);
    transform: none;
  }
}


/*======================================*/
 /* General Gallery Styling and Animations */
        .gallery {
            margin: 0 auto;
            padding: 5px 0;
            direction: rtl; /* حافظ على اتجاه RTL */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 1s ease-out, transform 1s ease-out;
            background-color: #fff;
        }

        .gallery.animate-in {
            opacity: 1;
            transform: translateY(0);
        }

        .gallery .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .gallery .section-title {
            text-align: center;
            margin: 30px;
            color: #333;
            font-size: 2.5rem;
            font-weight: 600;
        }

        /* إخفاء شريط الكابشن بالكامل */
        .caption-container {
            display: none !important;
        }

        /* تنسيق الصورة الرئيسية والأسهم */
        .main-slide-container {
            position: relative;
            margin-bottom: 20px;
            border-radius: 8px;
            /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
            background-color: #ffffff;
            height: 60vh; /* ارتفاع ثابت للشاشات الكبيرة */
            overflow: hidden;
                        width: 100%;

        }
        
        .main-slide-container .mySlides {
            display: none;
            width: 100%;
            height: 100%;
        }

        .main-slide-container .mySlides.active {
            display: block;
        }

        .main-slide-container .mySlides img,
        .main-slide-container .mySlides video {
            object-fit: contain;
                        height: 100%;
            width: 200%;
 background-color: #000; 
            /* لضمان ملء الصورة أو الفيديو للمساحة المحددة */
            border-radius: 30px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        /* تعديل ارتفاع الصورة الرئيسية على الموبايل */
        @media (max-width: 768px) {
            .main-slide-container {
                height: 70vh; /* ارتفاع أقل على الموبايل */
            }
        }
        

       

        /* تنسيق شريط الصور المصغرة */
        .thumbnails-container {
            position: relative;
            display: flex;
            flex-direction: row;
            overflow-x: auto;
            scroll-behavior: smooth;
            gap: 15px;
            padding: 10px 10px;
            background-color: #222;
            border: 2px solid #555;
            border-radius: 5px;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .thumbnails-container::-webkit-scrollbar {
            display: none;
        }
        
        .thumbnails-container .column1 {
            position: relative;
            flex: 0 0 auto;
            padding: 5px 10px;
            background-color: #fff;
            border: 2px solid #ddd;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
            transform: perspective(400px) rotateY(90deg);
            opacity: 0;
            transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out, box-shadow 0.3s ease, border 0.3s ease;
            backface-visibility: hidden;
            width: 150px; /* عرض ثابت للصورة المصغرة */
            height: 100px; /* ارتفاع ثابت للصورة المصغرة */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .thumbnails-container .column1.is-visible {
            transform: perspective(400px) rotateY(0deg);
            opacity: 1;
        }
        
        .thumbnails-container .column1:hover {
            transform: rotate(0deg) scale(1.05);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
        }

        .thumbnails-container .column1 img,
        .thumbnails-container .column1 video {
            display: block;
            max-height: 100%;
            max-width: 100%;
            /*width: auto;*/
            height: auto;
            object-fit: contain; /* لضمان أن الصورة أو الفيديو يتناسبان داخل الحاوية */
            cursor: pointer;
        }
        
        .thumbnails-container .column1::before,
        .thumbnails-container .column1::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 8px;
            background-image: radial-gradient(circle at 4px 4px, #222 4px, transparent 4px);
            background-size: 15px 8px;
        }
        
        .thumbnails-container .column1::before {
            top: -12px;
            transform: rotate(1deg);
        }
        
        .thumbnails-container .column1::after {
            bottom: -12px;
            transform: rotate(1deg);
        }
        
        .navigation-arrows {
            display: flex;
            justify-content: center;
            margin: 20px auto 0 auto;
            width: fit-content;
            gap: 10px;
        }
        
        .navigation-arrows button {
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            border: none;
            padding: 10px 15px;
            font-size: 1.2rem;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s, transform 0.2s;
        }
        
        .navigation-arrows button:hover {
            background-color: rgba(0, 0, 0, 0.8);
            transform: scale(1.1);
        }
        
        .navigation-arrows button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .demo.active {
            border: 2px solid #007bff; /* Highlight the active thumbnail */
            box-shadow: 0 0 15px #007bff;
        }
/*=============================*/
/*----------------------------- 
   Program Section - Mobile Enhancements 
-------------------------------*/

/* استعلام وسائط يستهدف شاشات الهواتف الصغيرة (أقل من 460 بكسل) */
@media (max-width: 460px) {
    /* تعديل حجم الزر .probutton */
    .program .probutton {
        /* زيادة العرض لجعله أكثر بروزًا */
        width: 80%; /* زيادة من 70% إلى 80% أو أكثر */
        /* توسيط الزر في العرض */
        display: block; 
        margin: 15px auto 20px auto !important; /* توسيط عمودي وزيادة الهامش السفلي */
        /* زيادة الحجم الداخلي (Padding) للزر */
        padding: 12px 25px; 
        /* التأكد من أن حجم الخط كبير */
        font-size: 14px; /* زيادة حجم الخط */
        font-weight: 600;
        /* إزالة الظل المؤقت عند الهوفر للحصول على أداء أفضل في الموبايل */
        box-shadow: 0 2px 4px rgba(49, 42, 249, 0.8);
    }
    
    /* تعديل مكان محاذاة الزر ليتناسب مع التوسيط */
    .card-body > div {
        text-align: center !important; /* لضمان توسيط الحاوية التي تحتوي الزر */
    }

    /* تعديل حجم الخط للنص العادي داخل البطاقة (للتناسق) */
    .card-body p {
        font-size: 14px; 
    }

    /* تعديل حجم عنوان البرنامج */
    .card-body h4.title {
        font-size: 1.2rem; /* تكبير العنوان قليلاً */
    }

}