/* Navbar */
.navbar {
  width: 100%;
  font-family: Helvetica , sans-serif;
  background: #1a1a1a;
    height: 80px;          /* Fixed navbar height */
  padding: 0 30px; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 999;
  transition: transform 0.2s ease-in-out;
}
.social-icons{
    display: flex;
    gap: 15px;
}
.social-icons a {
  color: #27ae60;
  font-size: 1.2rem;
  transition: color 0.3s;
  
}

.social-icons a:hover {
  color: #e0e0e0;
  transform: scale(1.10);
}


.navbar .logo {
  font-size: 1.8rem;
  font-weight: bold;
  color: #00ff88;
}
.navbar-logo {
  height: 140px;          /* Keeps logo proportional */
  width: auto;           /* Maintains aspect ratio */
  object-fit: contain;   /* Prevents stretching */
  display: block;
}


.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav-links a {
  color: #e0e0e0;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
  font-size: 100%;
}

.nav-links a:hover {
  color: #00ff88;
  
}
.nav-links a.btn:hover {
  color: #000000;
  
}

/* Buttons */
.btn {
  background: #27ae60;
  color: #ffffff;
  padding: 8px 15px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
 
  
}

.btn:hover {
  background: #00ff88;
}

/* Desktop initially visible */
.desktop-only {
  display: flex;
}

/* Mobile hidden */
.mobile-only {
  display: none;
}

/* ---------- MOBILE NAV ---------- */
@media (max-width: 768px) {
  .desktop-only {
    display: none;  /* hide desktop nav + social icons */
  }

  .mobile-only {
    display: block;
  }

  /* Resize logo for mobile */
  .navbar-logo {
    height: 55px;
  }

  /* Hamburger icon */
  .hamburger {
    width: 32px;
    cursor: pointer;
  }

  .hamburger span {
    display: block;
    height: 3px;
    background: #00ff88;
    margin: 6px 0;
    transition: 0.3s;
  }

  /* Slide menu */
  .mobile-menu {
    position: fixed;
    top: 0;
    right: -260px;
    width: 260px;
    height: 100vh;
    background: #111;
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    transition: right 0.3s ease-in-out;
    z-index: 2000;
  }

  .mobile-menu a {
    color: #e0e0e0;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
  }
  .mobile-menu a:hover {
  color: #00ff88;
  
}

  .mobile-menu .btn {
    margin-top: 20px;
    text-align: center;
  }
  .mobile-menu a.btn:hover {
  color: #000000;
  
}

  .mobile-menu.open {
    right: 0;
  }
}