/* ================= COMMON HEADER ================= */



nav {
  background: #2c3e50;
  display: flex;
  justify-content: space-between; 
  align-items: center;
  padding: 12px 40px;
  color: white;

  position: fixed;  
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

body {
  margin: 0;
  padding-top: 70px; /* header height ke hisaab se */
  font-family: 'Segoe UI', sans-serif;
}

/* Logo Section */
nav .logo {
  font-weight: bold;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.3s ease;
}

nav .logo img {
  height: 42px;
  margin-right: 10px;
  transition: transform 0.4s ease;
}

.logo-text {
  background: linear-gradient(90deg, #1abc9c, #2980b9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: 1px;
  transition: all 0.4s ease;
}

/* 🔥 Hover Animation */
nav .logo:hover {
  transform: scale(1.05); /* pura logo thoda bada hoga */
}

nav .logo:hover img {
  transform: rotate(-8deg) scale(1.15); /* image rotate + zoom */
}

nav .logo:hover .logo-text {
  text-shadow: 0 0 8px rgba(26, 188, 156, 0.8), 
               0 0 12px rgba(41, 128, 185, 0.6);
  transform: scale(1.05);
}

/* Navigation Links */
nav ul {
  display: flex;
  gap: 25px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  padding: 6px 0;
}

nav ul li a:hover {
  color: #1abc9c;
}

nav ul li a.active {
  color: #1abc9c;
}

/* Responsive Navbar */
@media (max-width: 900px) {
  nav {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 20px;
    
  }

  nav ul {
    justify-content: flex-start;
    gap: 15px;
    margin-top: 8px;
  }
}


/* Hide hamburger by default */
.menu-toggle {
  display: none;
}

