body {
      direction: rtl;
      font-family: 'Tajawal', 'Tahoma', 'Arial', sans-serif;
      margin: 0;
      padding: 0;
      padding-top: 70px; /* Adjust this based on actual header height */
    }

    a {
      color: #666;
      text-decoration: none;
    }

    /* Enhanced nav bar sticky */
    header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background-color: white;
      border-bottom: 1px solid #e5e5e5;
      box-shadow: none;
      transition: box-shadow 0.3s ease;
    }

    /* keep the main bar visible*/
    #main-header {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 9999;
      background-color: #fff;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    header.scrolled {
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    /* Enhanced nav container */
    .nav-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 70px;
      gap: 2rem; /* Add space between logo and nav links */
    }

    /* Logo section - always on the left */
    .nav-logo {
      flex-shrink: 0;
      order: 3;
      /*position: absolute;
      left: 1.5rem;*/
    }

    #logo {
      height: 45px;
      width: auto;
      max-width: 260px;
    }

    /* Navigation Links - Desktop */
    .nav-links {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 1rem;
      flex: 1;
      justify-content: center;
      align-items: center;
      order: 2;
      /* margin-left: 280px; /* Space for logo */
    }

    .nav-links li {
      margin: 0;
    }

    .nav-links li a {
      display: block;
      color: #333;
      padding: 1rem 1.5rem;
      text-decoration: none;
      font-weight: 500;
      font-size: 16px;
      transition: all 0.3s ease;
      position: relative;
    }

    .nav-links li a:hover {
      color: #676767;
    }

    .nav-links li a:hover::after {
      width: 100%;
    }

    .nav-links li a::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 50%;
      width: 0;
      height: 2px;
      background-color: #666;
      transition: all 0.3s ease;
      transform: translateX(50%);
    }

    .nav-links li a.active {
      color: #444;
      font-weight: 600;
      min-width: fit-content; /* Prevents layout shift */
    }

    .nav-links li a.active::after {
      width: 100%;
    }

    /* Hamburger button */
    #menu-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.5rem;
      border-radius: 4px;
      transition: background-color 0.3s ease;
      order: 1;
      position: absolute;
      left: 1.5rem;
    }

    #menu-toggle:hover {
      background-color: #f5f5f5;
    }

    .hamburger {
      width: 24px;
      height: 18px;
      position: relative;
      cursor: pointer;
    }

    .hamburger span {
      display: block;
      position: absolute;
      height: 2px;
      width: 100%;
      background: #333;
      border-radius: 1px;
      opacity: 1;
      right: 0;
      transform: rotate(0deg);
      transition: .25s ease-in-out;
    }

    .hamburger span:nth-child(1) {
      top: 0px;
    }

    .hamburger span:nth-child(2) {
      top: 8px;
    }

    .hamburger span:nth-child(3) {
      top: 16px;
    }

    .hamburger.open span:nth-child(1) {
      top: 8px;
      transform: rotate(135deg);
    }

    .hamburger.open span:nth-child(2) {
      opacity: 0;
      right: -60px;
    }

    .hamburger.open span:nth-child(3) {
      top: 8px;
      transform: rotate(-135deg);
    }

    /* Content styling */
    .content {
      max-width: 1000px;
      margin: 0 auto;
      padding: 2rem;
      line-height: 1.8;
    }

    /* Footer */
    footer {
      background-color: white;
      padding: 3rem 2rem;
      border-top: 1px solid #e5e5e5;
      margin-top: 4rem;
    }

    .footer-container {
      max-width: 1000px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 1.5rem;
    }

    .footer-left {
      display: flex;
      align-items: center;
      color: #666;
      font-size: 14px;
    }

    #footer-logo {
      width: 500px;
      height: auto;
      margin-bottom: 1rem;
    }

    .footer-right {
      margin-top: 0.5rem;
    }

    #goTop {
      background-color: #f8f9fa;
      color: #333;
      border: 1px solid #e5e5e5;
      padding: 0.75rem 1.5rem;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      font-family: 'Tajawal', sans-serif;
      transition: all 0.3s ease;
    }

    #goTop:hover {
      background-color: #e9ecef;
      border-color: #adb5bd;
    }

    /* Mobile responsiveness */
    @media (max-width: 768px) {
      .nav-container {
        padding: 0 1rem;
        height: 60px;
      }

      #menu-toggle {
        display: block;
      }

      /*
      .nav-logo {
        left: 1.5rem;
      }*/

      /*
      .nav-links {
        margin-left: 0;
      }*/

      #menu-toggle {
        display: block;
        left: 1rem;
      }

      #logo {
        height: 40px;
        max-width: 200px;
      }

      .nav-links.show {
        display: flex;
      }

      .nav-links li {
        width: 100%;
      }

      .nav-links li a {
        padding: 1rem 1.5rem;
        text-align: right;
        border-bottom: 1px solid #f5f5f5;
      }

      .nav-links li:last-child a {
        border-bottom: none;
      }

      .content {
        padding: 1.5rem;
      }

      #footer-logo {
        width: 200px;
      }

      .footer-container {
        text-align: center;
      }
    }

    /* Even smaller screens */
    @media (max-width: 480px) {
      .nav-container {
        padding: 0 0.75rem;
      }

      #logo {
        height: 40px;
        max-width: 200px;
      }

      .content {
        padding: 1rem;
      }
    }

    /* Core nav styling */
    /*
    .nav-links {
      list-style: none;
      display: flex;
      gap: 1rem;
      padding: 0;
      margin: 0;
    }*/

    .nav-links > li {
      position: relative;
      margin: 0;
    }

    .nav-links a {
      display: block;
      padding: 0.5rem 1rem;
      text-decoration: none;
      color: #333;
    }

    /* Dropdown menu hidden by default */
    .nav-links li ul.dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      background: #fff;
      border: 1px solid #ccc;
      min-width: 150px;
      z-index: 1000;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    /* Show dropdown on hover */
    .nav-links li:hover > ul.dropdown-menu {
      display: block;
    }

    /* Style dropdown items */
    .dropdown-menu li a {
      padding: 0.75rem 1rem;
      white-space: nowrap;
      border-bottom: 1px solid #f0f0f0;
    }

    .dropdown-menu li:last-child a {
      border-bottom: none;
    }

    /* Mobile styles */
  @media (max-width: 768px) {
    .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    flex-direction: column;
    padding: 1rem 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-top: 1px solid #e5e5e5;
    margin-left: 0;
  }
    
    .nav-links.show {
        display: flex; /* Show when 'show' class is added */
    }
    
    .nav-links li {
        width: 100%;
        /*text-align: center;*/
    }
    
    .nav-links a {
        padding: 15px;
        border-bottom: 1px solid #eee;
    }
    
    /* Show hamburger button on mobile */
    #menu-toggle {
        display: block;
    }
     /* Hide dropdown hover effect on mobile */
    .nav-links li ul.dropdown-menu {
      position: static;
      display: block;
      background: #f8f9fa;
      border: none;
      box-shadow: none;
      margin-right: 1rem;
    }
}

/* Desktop styles */
@media (min-width: 769px) {
    .nav-links {
        display: flex !important; /* Always show on desktop */
    }
    
    /* Hide hamburger button on desktop */
    #menu-toggle {
        display: none;
    }
}


/* Add this to your style.css file */

/* Fix for dropdown overflow */
@media (min-width: 769px) {
  /* Position third-level dropdowns (landmarks) to the left in RTL */
  .nav-links li ul.dropdown-menu ul.dropdown-menu {
    top: 0;
    right: 100%;
    left: auto;
    max-height: 400px; /* Set max height */
    overflow-y: auto; /* Enable vertical scrolling */
    min-width: 200px; /* Ensure consistent width */
  }
  
  /* Add scrollbar styling */
  .nav-links li ul.dropdown-menu ul.dropdown-menu::-webkit-scrollbar {
    width: 8px;
  }
  
  .nav-links li ul.dropdown-menu ul.dropdown-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }
  
  .nav-links li ul.dropdown-menu ul.dropdown-menu::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
  }
  
  .nav-links li ul.dropdown-menu ul.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #aaa;
  }
}

/* For mobile devices, ensure dropdowns don't overflow */
@media (max-width: 768px) {
  .nav-links li ul.dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
  }
}

/* Style for selected country in dropdown */
.dropdown-menu li a.selected {
  background-color: #b3aeae; /* Light grey background */
  color: #333; /* Ensure text remains readable */
  font-weight: 500; /* Slightly bolder text */
}

.dropdown-menu li a:hover {
  background-color: #efeff0; /* Slightly darker grey on hover */
}