@charset "utf-8";
/* CSS Document */


    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
    .navbar {
      background-color: #333;
      color: white;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.5rem 1rem;
      flex-wrap: wrap;
    }
    .navbar .logo {
      font-size: 1.5rem;
      font-weight: bold;
    }
    .navbar .nav-links {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
    .navbar .nav-links a {
      color: white;
      text-decoration: none;
      padding: 0.5rem 1rem;
      display: block;
    }
    .navbar .nav-links a:hover {
      background-color: #555;
    }
    .navbar .dropdown {
      position: relative;
    }
    .navbar .dropdown-content {
      display: none;
      position: absolute;
      background-color: #444;
      min-width: 200px;
      z-index: 1;
      top: 100%;
    }
    .navbar .dropdown:hover .dropdown-content {
      display: block;
    }
    .navbar .dropdown-content a {
      padding: 0.5rem 1rem;
      display: block;
    }

    .menu-icon {
      font-size: 1.5rem;
      cursor: pointer;
      display: none;
    }

    @media (max-width: 768px) {
      .navbar .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
      }
      .navbar .nav-links.active {
        display: flex;
      }
      .menu-icon {
        display: block;
      }
      .navbar .dropdown:hover .dropdown-content {
        position: static;
      }
    }