/* Top Navbar Layout */
 
 .top-header {
     width: 100%;
     background-color: #ffffff;
     border-bottom: 1px solid #eef2f5;
     padding: 12px 5%;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
 }
 
 .nav-container {
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
 
 .brand-logo {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-decoration: none;
     color: #000000;
 }
 
 .brand-logo img {
     height: 48px;
     width: auto;
     object-fit: contain;
 }
 
 .brand-logo .brand-name {
     font-size: 11px;
     font-weight: 800;
     letter-spacing: 0.5px;
     margin-top: 2px;
     text-transform: uppercase;
 }
 /* Navigation Menu */
 
 .nav-menu {
     display: flex;
     align-items: center;
     list-style: none;
     gap: 28px;
 }
 
 .nav-link {
     text-decoration: none;
     color: #2b3649;
     font-size: 15px;
     font-weight: 600;
     transition: color 0.2s ease;
 }
 
 .nav-link:hover,
 .nav-link.active {
     color: #072e70;
 }
 /* Login CTA Button */
 
 .btn-login {
     display: inline-block;
     background-color: #072e70;
     /* Navy Blue */
     color: #ffffff;
     padding: 10px 28px;
     border-radius: 24px;
     text-decoration: none;
     font-size: 14px;
     font-weight: 600;
     transition: background-color 0.2s ease, transform 0.1s ease;
     border: none;
     cursor: pointer;
 }
 
 .btn-login:hover {
     background-color: #0a3d91;
 }
 /* Mobile Menu Toggle Toggle */
 
 .mobile-toggle {
     display: none;
     background: none;
     border: none;
     cursor: pointer;
     padding: 4px;
 }
 
 .mobile-toggle svg {
     width: 28px;
     height: 28px;
     stroke: #072e70;
     stroke-width: 2;
     stroke-linecap: round;
 }
 /* Mobile Responsive Styles */
 
 @media (max-width: 868px) {
     .mobile-toggle {
         display: block;
     }
     .nav-menu {
         display: none;
         /* Can be toggled via JS in a real application */
         position: absolute;
         top: 70px;
         right: 0;
         left: 0;
         background-color: #ffffff;
         flex-direction: column;
         padding: 20px;
         gap: 16px;
         box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
         border-bottom: 1px solid #eef2f5;
         text-align: center;
     }
     /* Active class for JS toggle implementation */
     .nav-menu.open {
         display: flex;
     }
     .btn-container {
         display: flex;
         align-items: center;
         gap: 12px;
     }
     .btn-login {
         padding: 8px 20px;
         font-size: 13px;
     }
     .brand-logo img {
         height: 38px;
     }
 }
 /**/

/* Ensure parent item is the positioning anchor */
.nav-menu li.dropdown {
    position: relative;
}

/* Hide dropdown menu by default */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0; /* Align to right side for Arabic text */
    background-color: #ffffff;
    min-width: 180px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);
    list-style: none;
    padding: 10px 0;
    margin: 0;
    border-radius: 4px;
    z-index: 1000;
}

/* Format internal links */
.dropdown-menu li a {
    color: #333333;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    text-align: right;
    transition: background-color 0.2s ease;
}

/* Hover effects */
.dropdown-menu li a:hover {
    background-color: #f1f1f1;
    color: #000000;
}

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