* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
      }

      body {
        background: linear-gradient(135deg, #002b5b, #ffcc00);
        color: #fff;
        min-height: 100vh;
        overflow-x: hidden;
      }

      header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 25px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10px);
      }

      header h1 {
        font-size: 1.5rem;
        color: #ffcc00;
      }

      /* Hamburger Menu */
      .menu-toggle {
        width: 35px;
        height: 25px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .menu-toggle div {
        width: 100%;
        height: 4px;
        background: #fff;
        border-radius: 2px;
        transition: all 0.3s ease;
      }

      .menu.open .bar1 {
        transform: rotate(45deg) translateY(10px);
      }

      .menu.open .bar2 {
        opacity: 0;
      }

      .menu.open .bar3 {
        transform: rotate(-45deg) translateY(-10px);
      }

      nav {
        position: fixed;
        top: 60px;
        right: -250px;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(10px);
        width: 220px;
        height: 100vh;
        padding-top: 40px;
        transition: right 0.3s ease;
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
      }

      nav.active {
        right: 0;
      }

      nav a {
        color: #ffcc00;
        text-decoration: none;
        font-size: 1.1rem;
        font-weight: 500;
        padding: 10px 20px;
        border-radius: 30px;
        transition: 0.3s;
      }

      nav a:hover {
        background: #ffcc00;
        color: #000;
      }

      .hero {
        text-align: center;
        margin-top: 120px;
        padding: 0 25px;
      }

      .hero h2 {
        font-size: 2.3rem;
        color: #ffcc00;
        margin-bottom: 10px;
      }

      .hero p {
        font-size: 1.05rem;
        color: #f5f5f5;
        margin-bottom: 20px;
      }

      .btn {
        background: #ffcc00;
        color: #000;
        border: none;
        padding: 15px 35px;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 30px;
        cursor: pointer;
        transition: 0.3s;
        text-decoration: none;
        display: inline-block;
      }

      .btn:hover {
        background: #fff;
        color: #000;
        transform: scale(1.05);
      }

      .advert-section {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        border: 2px dashed #ffcc00;
        text-align: center;
        padding: 25px 20px;
        margin: 20px;
        color: #fff;
      }

      .advert-section h3 {
        color: #ffcc00;
        margin-bottom: 10px;
      }

      .advert-section a {
  background: #ffcc00;
  color: #000;
  text-decoration: none;
  padding: 10px 25px;
  border-radius: 25px;
  font-weight: 600;
  display: inline-block; 
  margin-top: 20px; 
}


      footer {
        text-align: center;
        padding: 25px 0;
        font-size: 0.9rem;
        color: #eee;
      }

      footer span {
        color: #ffcc00;
        font-weight: 600;
      }

      /* Download App Buttons */
      .app-download {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 10px;
      }

      .app-btn {
        background: #ffcc00;
        color: #000;
        padding: 12px 25px;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: 0.3s;
      }

      .app-btn:hover {
        background: #fff;
        transform: scale(1.05);
      }

      .app-btn img {
        width: 20px;
        height: 20px;
      }

      /* Complaint Modal */
      .modal {
        display: none;
        position: fixed;
        z-index: 100;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        justify-content: center;
        align-items: center;
      }

      .modal-content {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(12px);
        padding: 30px;
        border-radius: 20px;
        width: 90%;
        max-width: 400px;
        text-align: left;
        color: #fff;
      }

      .modal-content h3 {
        color: #ffcc00;
        margin-bottom: 15px;
        text-align: center;
      }

      .modal-content input,
      .modal-content textarea {
        width: 100%;
        margin-bottom: 15px;
        padding: 10px;
        border-radius: 10px;
        border: none;
        outline: none;
        font-size: 0.95rem;
      }

      .modal-content button {
        background: #ffcc00;
        border: none;
        padding: 12px;
        width: 100%;
        border-radius: 25px;
        font-weight: 600;
        cursor: pointer;
      }

      .close-btn {
        float: right;
        font-size: 1.5rem;
        cursor: pointer;
        color: #ffcc00;
      }

      @media (max-width: 600px) {
        .hero h2 {
          font-size: 1.9rem;
        }

        .app-download {
          flex-direction: column;
        }
      }
  





body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

/* Navbar / Header */
.navbar {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #001f3f, #7a6a00); /* blue to gold */
  padding: 0 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Logo design */
.logo {
  height: 45px;                /* adjust as needed */
  width: auto;
  border-radius: 10px;         /* slightly rounded corners */
  object-fit: cover;           /* keep aspect ratio */
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Hover effect */
.logo:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}