:root {
       --primary-color: #5eb56d !important;
       --teal-color: #216564 !important;
   }

   body {
       background-color: #080e1c;
       font-family: 'Instrument Sans', sans-serif;
   }

   .nav-item {
       color: white !important;
   }

   .nav-item.active {
       color: var(--teal-color) !important;
   }

   .cus-op {
       opacity: 70% !important;
   }

   .hero-text {
       top: 90px !important;
       right: 30px !important;
       line-height: 1.8 !important;
   }

   .nav-item:hover {
       color: var(--primary-color) !important;
   }

   .navbar-container {
       background-color: #080e1c;
   }

   /* Center the navbar items */
   .navbar-menu {
       display: flex;
       justify-content: center;
       width: 100%;
   }

   /* Adjust the logo position */
   .navbar-logo {
       position: absolute;
       right: 1rem;
   }

   /* Hide hamburger on desktop */
   @media (min-width: 768px) {
       .navbar-hamburger {
           display: none;
       }
   }

   /* Mobile menu adjustments */
   @media (max-width: 767px) {
       .navbar-logo {
           position: static;
       }

       .navbar-menu {
           justify-content: flex-start;
       }
   }

   .hero-section {
       background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
           url('../images/hero-bg.avif');
       background-size: cover;
       background-position: center;
       background-attachment: fixed;
       height: 100vh;
       display: flex;
       align-items: center;
       position: relative;
       overflow: hidden;
       width: 100%;
   }

   .text-gray-300 {
       color: #d1d5db;
   }

   .bg-gray-800 {
       background-color: #1f2937;
   }

   .hero-content {
       animation: fadeInUp 1.5s ease-out;
   }

   .hero-title {
       text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
   }

   .cta-button {
       transition: all 0.3s ease;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }

   .cta-button:hover {
       transform: translateY(-3px);
       box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
   }

   .floating-element {
       animation: float 6s ease-in-out infinite;
   }

   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }

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

   @keyframes float {
       0% {
           transform: translateY(0px);
       }

       50% {
           transform: translateY(-20px);
       }

       100% {
           transform: translateY(0px);
       }
   }

   .scroll-indicator {
       position: absolute;
       bottom: 30px;
       left: 50%;
       transform: translateX(-50%);
       animation: bounce 2s infinite;
   }

   @keyframes bounce {

       0%,
       20%,
       50%,
       80%,
       100% {
           transform: translateY(0) translateX(-50%);
       }

       40% {
           transform: translateY(-10px) translateX(-50%);
       }

       60% {
           transform: translateY(-5px) translateX(-50%);
       }
   }

   .feature-card {
       transition: transform 0.3s ease;
   }

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

   .lock-image {
       background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24" fill="none" stroke="%235eb56d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>');
       background-repeat: no-repeat;
       background-position: center;
       background-size: contain;
       min-height: 200px;
   }

   @media (min-width: 640px) {
       .lock-image {
           min-height: 300px;
       }
   }

   .line-clamp-2 {
       display: -webkit-box;
       /* -webkit-line-clamp: 2; */
       -webkit-box-orient: vertical;
       overflow: hidden;
   }

   /* تخصيص أزرار التصفح */
   .pagination {
       display: flex;
       justify-content: center;
       list-style: none;
       padding: 0;
   }

   .pagination li {
       margin: 0 2px;
   }

   .pagination li a,
   .pagination li span {
       display: block;
       padding: 8px 12px;
       border: 1px solid #d1d5db;
       border-radius: 6px;
       color: #374151;
       text-decoration: none;
   }

   .pagination li.active span {
       background-color: #3b82f6;
       color: white;
       border-color: #3b82f6;
   }

   .pagination li a:hover {
       background-color: #f3f4f6;
   }

   .certificates-slider {
       padding: 20px 10px 40px;
   }

   .swiper-slide {
       height: auto;
   }
.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-color: #10b981;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* LTR (Left to Right) - الإنجليزية واللغات الغربية */
html[dir="ltr"] .swiper-button-next,
html:not([dir]) .swiper-button-next { /* القيمة الافتراضية */
    right: -4rem;
}

html[dir="ltr"] .swiper-button-prev,
html:not([dir]) .swiper-button-prev { /* القيمة الافتراضية */
    left: -4rem;
}

/* RTL (Right to Left) - العربية والعبرية */
html[dir="rtl"] .swiper-button-next {
    left: -4rem;
    right: auto;
}

html[dir="rtl"] .swiper-button-prev {
    right: -4rem;
    left: auto;
}

/* أيقونات السهم */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-family: 'swiper-icons';
    font-size: 1.2rem;
    font-weight: bold;
}

/* LTR للأيقونات */
html[dir="ltr"] .swiper-button-next::after,
html:not([dir]) .swiper-button-next::after {
    content: 'next';
}

html[dir="ltr"] .swiper-button-prev::after,
html:not([dir]) .swiper-button-prev::after {
    content: 'prev';
}

/* RTL للأيقونات - نعكس السهمين */
html[dir="rtl"] .swiper-button-next::after {
    content: 'prev';
}

html[dir="rtl"] .swiper-button-prev::after {
    content: 'next';
}

/* تأثير hover */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: #059669;
    transform: translateY(-50%) scale(1.1);
}

/* التكيف مع الشاشات الصغيرة */
@media (max-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    html[dir="ltr"] .swiper-button-next,
    html:not([dir]) .swiper-button-next {
        right: -1rem;
    }
    
    html[dir="ltr"] .swiper-button-prev,
    html:not([dir]) .swiper-button-prev {
        left: -1rem;
    }
    
    html[dir="rtl"] .swiper-button-next {
        left: -1rem;
    }
    
    html[dir="rtl"] .swiper-button-prev {
        right: -1rem;
    }
}
   .swiper-button-next:after,
   .swiper-button-prev:after {
       font-size: 18px;
   }

   .swiper-pagination-bullet {
       background: #5eb56d;
       opacity: 0.5;
   }

   .swiper-pagination-bullet-active {
       opacity: 1;
   }

   .package-card {
       transition: all 0.3s ease;
   }

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

   .featured-badge {
       animation: pulse 2s infinite;
   }

   @keyframes pulse {
       0% {
           transform: translateX(-50%) scale(1);
       }

       50% {
           transform: translateX(-50%) scale(1.05);
       }

       100% {
           transform: translateX(-50%) scale(1);
       }
   }

   .discount-badge {
       animation: bounce 1s infinite alternate;
   }

   @keyframes bounce {
       from {
           transform: translateY(0);
       }

       to {
           transform: translateY(-3px);
       }


   }

   .pagination {
       display: flex;
       justify-content: center;
       list-style: none;
       padding: 0;
   }

   .pagination li {
       margin: 0 4px;
   }

   .pagination li a,
   .pagination li span {
       display: block;
       padding: 8px 16px;
       background: #374151;
       color: white;
       border-radius: 8px;
       text-decoration: none;
       transition: background 0.3s;
       border: 1px solid #4B5563;
   }

   .pagination li a:hover {
       background: #5eb56d;
       border-color: #5eb56d;
   }

   .pagination li.active span {
       background: #5eb56d;
       border-color: #5eb56d;
   }

   .pagination li.disabled span {
       background: #4b5563;
       color: #9ca3af;
       border-color: #6B7280;
   }