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

li {
     list-style: none;
}

a {
     text-decoration: none;
     color: #f5f5ff;
     font-size: 0.9rem;
}

/* Navbar */
nav {
     position: relative;
     padding: 0.13rem 1.875rem 0;
     z-index: 1000;
}

.navbar {
     width: 100%;
     height: 4.375rem;
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     position: relative;
     z-index: 1000;
}

.navbar .logo {
     display: flex;
     align-items: center;
}

.navbar .logo img {
     margin-right: 0.5rem;
     height: 2.4rem;
     width: 2.4rem;
}

.navbar .logo a {
     font-size: 1.5rem;
     font-weight: bold;
     display: flex;
     align-items: center;
}

.navbar .links {
     display: flex;
     gap: 2rem;
     font-weight: 500;
     mix-blend-mode: difference;
}

.links a:hover {
     color: #007bff;
}

.links a:hover.btn-wa {
     color: #007bff;
     background-color: #f5f5ff;
}

.navbar .toggle {
     color: #f5f5ff;
     mix-blend-mode: difference;
     font-size: 1.5rem;
     cursor: pointer;
     display: none;
}

.btn-wa {
     background-color: #007bff;
     color: #f5f5ff;
     padding: 0.5rem 1rem;
     outline: none;
     border-radius: 20px;
     font-size: 0.8rem;
     font-weight: bold;
     cursor: pointer;
}

/* Dropdown Responsive */
.dropdown-menu {
     display: none;
     position: absolute;
     right: 2rem;
     top: 3.75rem;
     height: 0;
     width: 300px;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(8px);
     border-radius: 0.75rem;
     overflow: hidden;
}

.dropdown-menu.open {
     height: fit-content;
}

.dropdown-menu li {
     padding: 0.7rem;
     display: flex;
     font-weight: 500;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}

.dropdown-menu .btn-wa {
     width: 100%;
     display: flex;
     justify-content: center;
}

/* Responsive Navbar */
@media (max-width: 992px) {
     .navbar .links,
     .navbar .btn-wa {
          display: none;
     }

     .navbar .toggle {
          display: block;
     }

     .dropdown-menu {
          display: block;
     }
}

@media (max-width: 576px) {
     .dropdown-menu {
          left: 2rem;
          width: unset;
     }
}