/* ===============================
   HEADER + NAV (DESKTOP)
   =============================== */

:root {
  --primary-color: #66BB6A;   /* Website ka Main Green Color */
  --secondary-color: #A5D6A7; /* Halka Green */
  --accent-color: #43A047;    /* Dark Green (Hover ke liye) */
  --blue-color: #0056b3;      /* Naya Blue Color (100 Hour text ke liye) */
  --blue-hover: #004494;      /* Button pe mouse le jane par Dark Blue */
  --text-dark: #333;          /* Dark Text Color */
  --text-light: #fff;         /* White Text Color */
  --bg-light: #F9FFF9;        /* Website ka background color */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .08); /* Chhoti Shadow */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .12); /* Medium Shadow */
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .15); /* Badi Shadow */
  --transition: all .3s cubic-bezier(.4, 0, .2, 1); /* Animation speed */
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background: var(--bg-light); color: var(--text-dark); line-height: 1.6; overflow-x: hidden;padding-top: 85px }
a { color: var(--primary-color); text-decoration: none; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }

html{
  overflow-x:hidden; /* Page ko side me scroll hone se rokta hai */
}

/* Default Button Style (Green wala) */
.btn { display: inline-block; padding: 12px 28px; background: var(--primary-color); color: #fff; border-radius: 8px; transition: var(--transition); font-weight: 600; border: none; cursor: pointer; box-shadow: var(--shadow-sm); }
.btn:hover { background: var(--accent-color); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.text-center { text-align: center; }


.header-main{
  background:#fff;
  box-shadow:var(--shadow-sm);
  position:fixed;
  width: 100%;
  top:0;
  z-index:1400;
}

.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 0;
  position:relative;
}

.logo img{
  height:45px;
  transition:var(--transition);
}
.logo img:hover{
  transform:scale(1.05);
}

/* ===== DESKTOP MENU ===== */

.nav-links{
  list-style:none;
  display:flex;
  align-items:center;
}

.nav-links>li{
  position:relative;
  padding:10px 18px;
}

.nav-links>li>a{
  color:var(--text-dark);
  font-weight:600;
  position:relative;
}

.nav-links>li>a::after{
  content:'';
  position:absolute;
  bottom:-5px;
  left:0;
  width:0;
  height:2px;
  background:var(--primary-color);
  transition:width .3s;
}
.nav-links>li>a:hover::after{
  width:100%;
}

/* ===== DESKTOP DROPDOWN ===== */

.dropdown-content{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  min-width:220px;
  box-shadow:var(--shadow-md);
  z-index:100;
  border-top:3px solid var(--primary-color);
  padding:10px 0;
  border-radius:0 0 8px 8px;
}


.dropdown-content ul{
  list-style:none;
  margin:0;
  padding:0;
}
.dropdown-content li{
  list-style:none;
}

.dropdown-content a{
  display:block;
  padding:12px 20px;
  font-size:0.8rem;
  color:var(--text-dark);
  transition:var(--transition);
}

.dropdown-content a:hover{
  background:var(--bg-light);
  color:var(--primary-color);
  padding-left:25px;
}

.nav-links li:hover .dropdown-content{
  display:block;
}

/* ===== DESKTOP MEGAMENU ===== */

.megamenu{
  display:none;
  position:absolute;
  top:100%;
  left:-480px;
  width:700px;
  background:#fff;
  box-shadow:var(--shadow-md);
  z-index:100;
  border-top:3px solid var(--primary-color);
  padding:25px;
  border-radius:0 0 8px 8px;
}

.nav-links li:hover .megamenu{
  display:flex;
  gap:30px;
}

.megamenu-col{
  flex:1;
}

.megamenu-col h4{
  font-size:0.8em;
  font-weight:700;
  margin-bottom:15px;
  padding-bottom:10px;
  border-bottom:2px solid var(--secondary-color);
  color:var(--text-dark);
  text-transform:uppercase;
  
}

.megamenu-col ul {
  list-style: none !important;
  padding: 0 !important;       
  margin: 0 !important;
  text-align: left;            
}

.megamenu-col ul li a {
  padding-left: 0 !important;  
  display: flex;
  align-items: center;
  justify-content: flex-start; 
  gap: 8px;                    
}

.megamenu-col ul li a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 5px;
  font-size:0.8rem;
  color:var(--text-dark);
  border-radius:4px;
  transition:var(--transition);
}

.megamenu-col ul li a:hover{
  background:var(--bg-light);
  padding-left:10px;
}

.megamenu-col ul li a i {
  width: 18px;                 
  text-align: center;
  color:var(--primary-color);
  margin-left: 0;             
  flex-shrink: 0;
}







/* ===============================
   HAMBURGER (MOBILE ONLY)
   =============================== */

.mobile-menu-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  z-index:1600;
}

.mobile-menu-toggle .burger,
.mobile-menu-toggle .burger::before,
.mobile-menu-toggle .burger::after{
  content:'';
  display:block;
  width:26px;
  height:3px;
  background:#333;
  border-radius:2px;
  transition:.3s;
}

.mobile-menu-toggle .burger::before{
  transform:translateY(-8px);
}
.mobile-menu-toggle .burger::after{
  transform:translateY(5px);
}

/* ===== OVERLAY ===== */

.nav-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:1490;
}
.nav-overlay.active{
  display:block;
}

/* ===============================
   MOBILE NAV ONLY
   =============================== */

@media(max-width:768px){

  .mobile-menu-toggle{
    display:block;
    position:relative;
  }

  .nav-links{
    position:fixed;
    top:0;
    left:-100%;
    width:80%;
    max-width:300px;
    height:100vh;
    background:#fff;
    flex-direction:column;
    align-items:flex-start;
    padding:80px 30px 30px;
    box-shadow:var(--shadow-lg);
    transition:left .4s ease;
    overflow-y:auto;
    z-index:1500;
  }

  .nav-links.active{
    left:0;
  }

  .nav-links>li{
    width:100%;
    padding:12px 0;
    border-bottom:1px solid #f0f0f0;
  }

  /* mobile dropdowns */
  .dropdown-content,
  .megamenu{
    position:static;
    display:none;
    width:100%;
    box-shadow:none;
    border:none;
    padding:10px 0 10px 20px;
    background:var(--bg-light);
  }

  .nav-links li.active .dropdown-content,
  .nav-links li.active .megamenu{
    display:block;
  }

  .megamenu{
    flex-direction:column;
    gap:15px;
  }
}