body {
       font-family: "Tajawal", sans-serif;
       background: #f8f9fa;
   }

   .ad-container {
       width: 100%;
       background: #fff;
       border: 1px solid #ddd;
       position: relative;
       z-index: 999;
       text-align: center;
   }

   .ad-top {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
       z-index: 9999;
   }

   .ad-bottom {
       position: fixed;
       bottom: 0;
       left: 0;
       right: 0;
       box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
       z-index: 9999;
   }

   .ad-content img {
       max-height: 120px;
       width: auto;
       margin: 0 auto;
       display: block;
   }

   .ad-toggle-btn {
       position: absolute;
       top: 5px;
       left: 5px;
       background: #0d6efd;
       color: #fff;
       border: none;
       padding: 3px 8px;
       border-radius: 50%;
       cursor: pointer;
       font-size: 12px;
       z-index: 10000;
   }

   /* زر الفوتر */
   .ad-toggle-btn-bottom {
       position: absolute;
       top: -25px;
       /* يظهر فوق الإعلان */
       left: 5px;
       /* مكان مناسب */
   }

   /* الهيدر */
   .top-banner {
       background: #0d6efd;
       color: #fff;
       padding: 5px 0;
       font-size: 14px;
   }

   .navbar {
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   }

   /* السلايدر */
   /* الحاوية الرئيسية */
   .hero-slider {
       position: relative;
       width: 100%;
       overflow: hidden;
   }

   /* كل عنصر في السلايدر — نثبت نسبة 3:2 */
   .hero-slider .item {
       position: relative;
       width: 100%;
       overflow: hidden;
       border-radius: 15px;
       aspect-ratio: 3 / 2;
       /* 675x450 */
   }

   /* الصورة داخل العنصر */
   .hero-slider .item img {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       object-fit: contain;
       /* تُظهر الصورة كاملة بدون قص */
       background: #000;
       /* خلفية أنيقة للفراغات */
       border-radius: 15px;
   }

   /* Caption */
   .hero-slider .caption {
       position: absolute;
       bottom: 15%;
       right: 10%;
       left: 10%;
       color: #fff;
       padding: 20px 25px;
       border-radius: 15px;
       text-align: center;
       font-size: 1.2rem;
   }

   /* زر داخل Caption */
   .hero-slider .btn-slide {
       margin-top: 10px;
       background: #fff;
       color: #007bff;
       border-radius: 25px;
       padding: 8px 20px;
       font-weight: bold;
       transition: all 0.3s;
   }

   .hero-slider .btn-slide:hover {
       background: #007bff;
       color: #fff;
   }

   /* أزرار التنقل */
   .hero-slider .owl-nav button {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       background: linear-gradient(135deg, #007bff, #0052cc);
       color: #fff !important;
       border: none;
       padding: 12px;
       border-radius: 50%;
       z-index: 10;
       transition: all 0.3s;
   }

   .hero-slider .owl-nav button:hover {
       background: linear-gradient(135deg, #0052cc, #003d99);
   }

   .hero-slider .owl-nav .owl-prev {
       left: 15px;
   }

   .hero-slider .owl-nav .owl-next {
       right: 15px;
   }

   /* الدوتس */
   .hero-slider .owl-dots {
       position: absolute;
       bottom: 10px;
       left: 50%;
       transform: translateX(-50%);
   }

   .hero-slider .owl-dot span {
       width: 12px;
       height: 12px;
       background: #007bff;
       opacity: 0.7;
       margin: 0 5px;
       display: inline-block;
       border-radius: 50%;
       transition: all 0.3s;
   }

   .hero-slider .owl-dot.active span {
       width: 16px;
       height: 16px;
       background: #0052cc;
       opacity: 1;
   }

   /* Responsive — ما نغير ارتفاع الصور إطلاقاً */
   /* نعدل فقط النصوص والأزرار */
   @media (max-width: 992px) {
       .hero-slider .caption {
           font-size: 1.1rem;
           padding: 15px 20px;
       }

       .hero-slider .owl-nav button {
           padding: 10px;
       }
   }

   @media (max-width: 768px) {
       .hero-slider .caption {
           font-size: 1rem;
           padding: 12px 15px;
           bottom: 12%;
       }

       .hero-slider .owl-nav button {
           padding: 8px;
       }
   }

   @media (max-width: 480px) {
       .hero-slider .caption {
           font-size: 0.9rem;
           padding: 10px 12px;
           bottom: 10%;
       }

       .hero-slider .btn-slide {
           padding: 6px 15px;
           font-size: 0.85rem;
       }

       .hero-slider .owl-nav button {
           padding: 6px;
       }
   }


   .topbar {
       background: linear-gradient(90deg, #0d6efd, #0dcaf0);
       color: #fff;
       padding: 1.1rem;
       border-radius: 0 0 20px 20px;
       margin-bottom: 1.5rem;
       text-align: center;
       box-shadow: 0 8px 20px rgba(13, 110, 253, .15);
   }

   /* Cards */
   .card-institute {
       border: none;
       border-radius: 18px;
       overflow: hidden;
       box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
       transition: .3s;
       display: flex;
       flex-direction: column;
       min-height: 460px;
   }

   .card-institute:hover {
       transform: translateY(-4px);
       box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
   }

   .logo {
       width: 84px;
       height: 84px;
       object-fit: cover;
       border-radius: 50%;
       border: 3px solid #fff;
       box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
   }

   .card-header {
       background: #fff;
   }

   .inst-title {
       font-weight: 800;
       background: linear-gradient(90deg, #0d6efd, #00c6ff);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }

   .stage-item {
       background: #f8fbff;
       border: 1px dashed #e2eeff;
       border-radius: 12px;
       padding: .5rem .7rem;
       margin-bottom: .5rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: .92rem;
   }

   .stage-item i,
   .card-body p i {
       display: inline-flex;
       justify-content: center;
       align-items: center;
       width: 28px;
       height: 28px;
       border-radius: 50%;
       color: #fff;
       background: linear-gradient(135deg, #0d6efd, #00c6ff);
       box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
       font-size: 0.9rem;
   }

   .stage-item span:first-child {
       display: flex;
       align-items: center;
       gap: 6px;
   }

   .card-body p i {
       width: 24px;
       height: 24px;
       font-size: 0.85rem;
       margin-left: 4px;
   }

   .price-old {
       text-decoration: line-through;
       color: #8a8a8a;
       margin-left: 6px;
       font-size: .86rem;
   }

   .price-new {
       font-weight: 800;
       background: linear-gradient(90deg, #007bff, #00c6ff);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }

   .stages-wrap {
       min-height: 120px;
   }

   .card-footer {
       background: #f7fbff;
   }

   .btn-details {
       background: linear-gradient(90deg, #0d6efd, #0dcaf0);
       border: none;
       color: #fff;
       border-radius: 12px;
       font-weight: 700;
   }

   .btn-details:hover {
       opacity: .9;
   }

   /*الاساتذة */
   .card-teacher {
       border: none;
       border-radius: 18px;
       overflow: hidden;
       box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
       transition: .3s;
       display: flex;
       flex-direction: column;
       min-height: 440px;
   }

   .card-teacher:hover {
       transform: translateY(-4px);
       box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
   }

   .teacher-photo {
       width: 100%;
       height: 200px;
       object-fit: cover;
   }

   .teacher-name {
       font-weight: 800;
       background: linear-gradient(90deg, #0d6efd, #00c6ff);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }

   .info-item {
       background: #f8fbff;
       border: 1px dashed #e2eeff;
       border-radius: 12px;
       padding: .45rem .7rem;
       margin-bottom: .5rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: .9rem;
   }

   .info-item i {
       display: inline-flex;
       justify-content: center;
       align-items: center;
       width: 26px;
       height: 26px;
       border-radius: 50%;
       color: #fff;
       background: linear-gradient(135deg, #0d6efd, #00c6ff);
       box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
       font-size: .8rem;
   }

   .btn-details {
       background: linear-gradient(90deg, #0d6efd, #0dcaf0);
       border: none;
       color: #fff;
       border-radius: 12px;
       font-weight: 700;
   }

   .btn-details:hover {
       opacity: .9;
   }


   .footer-gradient {
       background: linear-gradient(135deg, #007bff, #0052cc);
       color: #fff;
       position: relative;
   }

   .footer-title {
       font-weight: bold;
       font-size: 1.1rem;
       text-transform: uppercase;
       color: #fff;
       margin-bottom: 15px;
       text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
   }

   .footer-link {
       color: #fff;
       text-decoration: none;
       transition: all 0.3s;
   }

   .footer-link:hover {
       color: #ffd700;
       text-shadow: 0 0 5px #fff;
   }

   .footer-bottom {
       background: rgba(0, 0, 0, 0.2);
       color: #fff;
   }

   a {
       text-decoration: none;
   }

   .btn-gradient {
       background: linear-gradient(45deg, #007BFF, #00C6FF);
       color: #fff;
       border: none;
       font-weight: 500;
   }

   .btn-gradient:hover {
       opacity: 0.9;
       color: #fff;
   }

   .card {
       background: #fff;
   }

   .form-label {
       font-weight: 600;
       color: #333;
   }

   .featured-card {
       border: 1px solid transparent;
       background: linear-gradient(45deg, #007bff, #00c6ff);
       color: #fff;
       border-radius: 1rem;
       box-shadow: 0 0 15px rgba(0, 123, 255, 0.4);
       position: relative;
       overflow: hidden;
       margin-top: 10px;
       margin-bottom: 10px;
   }

   .featured-card .card-body {
       background: #fff;
       color: #333;
       border-radius: 0.8rem;
       margin: 8px;
       padding: 8px;
       position: relative;
       z-index: 2;
   }

   .featured-card::before {
       content: "";
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: linear-gradient(120deg,
               rgba(255, 255, 255, 0.2) 0%,
               rgba(255, 255, 255, 0.05) 60%,
               transparent 100%);
       transform: rotate(25deg);
       animation: shine 4s infinite linear;
       z-index: 1;
   }

   @keyframes shine {
       0% {
           transform: translateX(-100%) rotate(25deg);
       }

       100% {
           transform: translateX(100%) rotate(25deg);
       }
   }

   .featured-card::after {
       content: "\f005";
       font-family: "Font Awesome 6 Free";
       font-weight: 900;
       position: absolute;
       top: 10px;
       right: 15px;
       color: gold;
       font-size: 1.2rem;
       z-index: 3;
   }

   #scrollTopBtn {
       position: fixed;
       bottom: 25px;
       right: 25px;
       z-index: 999;
       background: linear-gradient(135deg, #0d6efd, #0dcaf0);
       color: #fff;
       font-size: 20px;
       width: 45px;
       height: 45px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
       transition: opacity 0.3s, transform 0.3s;
       opacity: 0;
       visibility: hidden;
   }

   #scrollTopBtn:hover {
       transform: scale(1.1);
   }

   #scrollTopBtn.show {
       opacity: 1;
       visibility: visible;
   }