.carousel-item img {
    width: 100%; /* عرض الصورة 100% */
    height: 400px; /* ارتفاع ثابت */
    object-fit: cover; /* تضمن أن الصورة تغطي المساحة دون تشويه */
    }
    .owl-carousel .item {
    width: 180px; /* عرض العنصر */
    }
    
    .owl-carousel img {
    width: 100%; /* يجعل الصورة تملأ العنصر بالكامل */
    height: auto; /* يحافظ على نسبة الطول إلى العرض */
    }
    .icon-box {
    transition: transform 0.3s ease;
    cursor: pointer;
    background-color: rgb(10 10 10 / 65%) !important;
    }
    
    .icon-box:hover {
    transform: translateY(-10px);
    }
    .owl-item {
    width: 300px !important; /* ضع العرض المطلوب هنا */
    }
    
    .info-box {
    transition: transform 0.3s ease;
    background-color: #0075ff !important;
    
    }
    
    .info-box:hover {
    transform: translateY(-5px);
    }
    
    .info-box h6 {
    font-weight: bold;
    }
    
    
    .custom-title {
    font-size: 36px; /* حجم النص */
    font-weight: bold; /* الخط عريض */
    color: #333; /* لون النص (غالبًا رمادي غامق) */
    text-align: center; /* محاذاة في المنتصف */
    position: relative; /* لتحديد المكان الذي سيتم فيه إضافة الخط السفلي */
    padding-bottom: 10px; /* مسافة تحت النص */
    margin-bottom: 20px; /* مسافة خارجية أسفل العنوان */
    }
    
    .custom-title::after {
    content: ''; /* إضافة عنصر افتراضي */
    width: 100px; /* طول الخط السفلي */
    height: 4px; /* سماكة الخط السفلي */
    background-color: white; /* اللون الأزرق للخط السفلي */
    display: block; /* عرض الخط السفلي */
    margin: 0 auto; /* جعله في منتصف العنوان */
    position: absolute; /* تموضع مطلق */
    left: 50%; /* وضعه في منتصف الصفحة */
    bottom: 0; /* في الأسفل مباشرة */
    transform: translateX(-50%); /* لضبط تموضع الخط في المنتصف تمامًا */
    }
    
    #ht-preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .loader {
      text-align: center;
    }
    #ht-preloaderr {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .loaderr {
      text-align: center;
    }
    
    .preloader-image {
      width: 200px;
      height: auto;
      animation: flash 1s ease-in-out infinite;
    }
    .preloaderr-image {
      width: 200px;
      height: auto;
      animation: flash 1s ease-in-out infinite;
    }
    
    @keyframes flash {
      0% { opacity: 1; }
      50% { opacity: 0.5; }
      100% { opacity: 1; }
    }
    
    #cookie-consent {
    display: none; /* الرسالة مخفية بشكل افتراضي */
    z-index: 1050; /* فوق كل المحتوى */
    }
    .dropdown-item {
    border-bottom: 1px solid #efefef !important;
    
    
    }
    .nav-link{
    cursor: pointer;
    }
      #flipbook {
          width: 100%;
          height: 80vh;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
          background: white;
          overflow: hidden;
      }
      .page {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          background: white;
          border: 1px solid #ccc; /* إضافة حد للصفحة */
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* إضافة ظل خفيف */
      }
      @media (max-width: 767px) { /* عندما تكون الشاشة صغيرة */
          #flipbook {
              height: 100vh; /* استخدام الارتفاع الكامل للشاشة */
          }
      }