* { 
      box-sizing: border-box; 
      margin: 0; 
      padding: 0; 
    }
   

    /* Dummy announcement space for the top 60px gap */
    .top-banner-space {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 60px;
      background-color: #0f243d;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
    }

    /* Navbar Wrapper Container (60px From Top) */
    .navbar-container {
      position: fixed;
      top: 60px;
      left: 0;
      width: 100%;
      z-index: 1000;
    }

    /* Core Navbar Component Styles */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 2rem;
      background-color: #1a3e68;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      position: relative;
    }

    .nav-logo img {
      height: 40px;
      display: block;
    }

    .nav-menu {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 1.5rem;
    }

    .nav-link {
      text-decoration: none;
      color: #ffffff;
      font-weight: 500;
      padding: 0.5rem 0;
      display: flex;
      align-items: center;
      transition: color 0.3s ease;
    }

    .nav-link:hover { 
      color: #007bff; 
    }

    /* Desktop Dropdown System */
    .nav-item.dropdown { 
      position: relative; 
    }

    .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #1a3e68;
      min-width: 160px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      list-style: none;
      padding: 0.5rem 0;
      margin: 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    }

    .dropdown-menu li a {
      display: block;
      padding: 0.6rem 1.2rem;
      color: #ffffff;
      text-decoration: none;
      font-size: 0.95rem;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .dropdown-menu li a:hover {
      background-color: #f8f9fa;
      color: #007bff;
    }

    .nav-item.dropdown:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .arrow {
      font-size: 0.75rem;
      margin-left: 4px;
    }

    /* Search Container */
    .nav-search { 
      display: flex; 
      align-items: center; 
    }

    .nav-search input {
      padding: 0.4rem 0.8rem;
      border: 1px solid #ccc;
      border-radius: 4px 0 0 4px;
      outline: none;
      font-size: 0.9rem;
    }

    .nav-search button {
      padding: 0.4rem 0.8rem;
      border: 1px solid #ccc;
      border-left: none;
      background-color: #f8f9fa;
      border-radius: 0 4px 4px 0;
      cursor: pointer;
    }

    /* Mobile Toggle Mechanism (Pure CSS) */
    .menu-toggle-cb { 
      display: none; 
    }
    
    .menu-icon { 
      display: none; 
      cursor: pointer; 
      padding: 1rem 0; 
    }

    .navicon {
      background: #fff;
      display: block;
      height: 2px;
      position: relative;
      width: 24px;
      transition: background 0.2s ease-out;
    }

    .navicon:before, .navicon:after {
      background: #fff;
      content: '';
      display: block;
      height: 100%;
      position: absolute;
      width: 100%;
      transition: all 0.2s ease-out;
    }
    
    .navicon:before { top: 6px; }
    .navicon:after { bottom: 6px; }

    /* Responsive Navigation Media Queries */
    @media (max-width: 768px) {
      .navbar { 
        flex-wrap: wrap; 
        padding: 0.5rem 1rem; 
      }
      
      .menu-icon { 
        display: block; 
        order: 1; 
      }
      
      .nav-logo { 
        order: 0; 
      }
      
      .nav-search { 
        order: 3; 
        width: 100%; 
        margin-top: 0.75rem; 
      }
      
      .nav-search input { 
        flex: 1; 
      }

      .nav-menu {
        display: none;
        order: 2;
        width: 100%;
        flex-direction: column;
        gap: 0;
        background-color: #7da0c7;
        border-top: 1px solid #eee;
        margin-top: 0.5rem;
      }

      .nav-item { 
        width: 100%; 
        border-bottom: 1px solid #f5f5f5; 
      }
      
      .nav-link { 
        padding: 0.75rem 0.5rem; 
        width: 100%; 
        justify-content: space-between; 
      }
      
      .dropdown-menu {
        position: static;
        box-shadow: none;
        background-color: #99b0c9;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transform: none;
        transition: max-height 0.3s ease-out;
      }

      .menu-toggle-cb:checked ~ .nav-menu { 
        display: flex; 
      }
      
      .nav-item.dropdown:hover .dropdown-menu { 
        max-height: 300px; 
      }
      
      .menu-toggle-cb:checked ~ .menu-icon .navicon { 
        background: transparent; 
      }
      
      .menu-toggle-cb:checked ~ .menu-icon .navicon:before { 
        transform: rotate(-45deg); 
        top: 0; 
      }
      
      .menu-toggle-cb:checked ~ .menu-icon .navicon:after { 
        transform: rotate(45deg); 
        bottom: 0; 
      }
      
      body { 
        overflow-y: auto; 
      }
    }