/* ================= Header CSS - MyKadak Full ================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

*{box-sizing:border-box}
body{font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;margin:0;color:#111;background:#fff}

/* Header wrapper */
.site-header{
  width:100%;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,0.06);
}

/* Top row: logo left/center, toggle right */
.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  min-height:72px;                 /* ADDED: consistent header height across pages */
  box-sizing:border-box;           /* ADDED: ensure padding included in min-height */
}

/* Logo + language wrapper */
/* Logo + language wrapper */
.logo-lang-wrap {
  display: flex;
  align-items: center; /* UPDATED: use center so logo and switcher line up consistently */
  gap: 16px;
}

/* Logo */
.header-logo {
  display: flex;
  align-items: center;
  height: 56px; /* ADDED: fixed logo container height for consistent rendering */
}
.header-logo img {
  height: 70px; /* ADDED: force a consistent rendered logo height across pages */
  width: auto;
  display: block;
  object-fit: contain;
  vertical-align: baseline; /* aligns properly with switcher */
}

/* Language Switcher */
.header-lang-switcher{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:"Segoe UI",Arial,sans-serif;
  font-weight:600;
  font-size:0.85rem;
  transform: translateY(3px); /* ADDED: deterministic visual nudge (consistent across pages) */
  transition: transform .18s ease;
}

.header-lang-switcher .current-lang {
  padding: 2px 10px 4px 10px;
  border: 2px solid transparent;      /* keep border thickness */
  border-radius: 10px;                 /* rounded corners */
  background: linear-gradient(#fff, #fff) padding-box, 
              linear-gradient(90deg,#ff5722,#ff9800,#2196f3,#9c27b0) border-box;
  transition: transform .3s, box-shadow .3s;
}

.header-lang-switcher .current-lang:hover{
  transform:scale(1.05);
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.header-lang-switcher .other-lang{
  font-size:0.9rem;
  font-weight:600;
  color:#2196f3;
  text-decoration:none;
  transition:color .3s,text-shadow .3s;
}
.header-lang-switcher .other-lang:hover{
  color:#ff4081;
  text-shadow:0 0 4px rgba(255,64,129,0.5);
}

/* Language specific padding */
.header-lang-switcher .current-lang.en {
  padding: 2px 10px 4px 10px; /* English */
}

.header-lang-switcher .current-lang.hi {
  padding: 3px 10px 3px 10px; /* Hindi */
}

/* Toggle (hidden desktop, visible mobile) */
.menu-toggle{
  display:none;
  font-size:26px;
  line-height:1;
  background:none;
  border:none;
  cursor:pointer;
}

/* Navbar (sits below header-inner) */
.navbar{
  display:flex;
  justify-content:center;
  background:transparent;
  padding:10px 12px 8px;
}

/* Top-level list */
.nav-list{
  list-style:none;
  display:flex;
  gap:24px;
  align-items:center;
  margin:0;
  padding:0 12px;
  flex-wrap:wrap;
}

/* Nav items */
.nav-item{
  position:relative;
  font-weight:600;
  font-size:15px;
}
.nav-item > a{
  color:#111;
  text-decoration:none;
  padding:10px 6px;
  display:inline-block;
  transition:color .18s ease;
}

/* Rainbow underline */
.nav-item > a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-8px;
  height:3px;
  width:0%;
  background:linear-gradient(90deg,#ff3b30,#ff9500,#ffdb00,#34c759,#0a84ff,#5856d6,#ff2d55);
  transition:width .25s ease;
  border-radius:3px;
}
.nav-item:hover > a{color:#000;}
.nav-item:hover > a::after{width:100%;}

/* Dropdown (desktop hover) */
.dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  background:#fff;
  min-width:220px;
  border-radius:10px;
  padding:8px 6px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:all .22s cubic-bezier(.2,.9,.2,1);
  z-index:999;
}
.nav-item:hover > .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown li{list-style:none;}
.dropdown li a{
  display:block;
  padding:9px 12px;
  text-decoration:none;
  color:#222;
  font-weight:500;
  border-radius:6px;
  transition:background .12s ease, color .12s ease;
}
.dropdown li a:hover{
  background:linear-gradient(90deg,rgba(255,59,48,.06),rgba(10,132,255,.06));
  color:#000;
}

/* Search */
.nav-search{ position:relative; }
.search-icon{
  width:28px;height:28px;cursor:pointer;vertical-align:middle;
}
.search-form{
  display:none; position:absolute; top:100%; right:0; background:#fff;
  padding:6px; box-shadow:0 2px 5px rgba(0,0,0,.2); border-radius:4px; white-space:nowrap;
}
.search-form input{
  width:180px; max-width:75vw; padding:6px 8px; border:1px solid #ccc; border-radius:3px; font-size:14px;
}
.search-form button{
  padding:6px 10px; background:#0073e6; color:#fff; border:0; border-radius:3px; cursor:pointer;
}
.search-form button:hover{ background:#005bb5; }

/* Animated rainbow HR */
.rainbow-hr{
  height:4px;border:0;margin:0;
  background:linear-gradient(90deg,#ff3b30,#ff9500,#ffdb00,#34c759,#0a84ff,#5856d6,#ff2d55);
  background-size:400% 100%; animation:rainbowShift 6s linear infinite;
}
@keyframes rainbowShift{0%{background-position:0% 50%}100%{background-position:100% 50%}}

/* Tablet & Mobile */
@media (max-width:880px){
  .menu-toggle{ display:block; } 
  .nav-list{
    display:none;               
    flex-direction:column;
    align-items:stretch;        
    gap:0;
    width:100%;
    padding:0;
    border-top:1px solid rgba(0,0,0,.08);
    background:#fff;
  }
  .nav-list.show{ display:flex; }

  .nav-item{
    width:100%;
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  .nav-item > a{
    display:block; width:100%; padding:14px 16px;
  }
  .nav-item > a::after{ display:none; } 

  .dropdown{
    position:static; background:transparent; box-shadow:none;
    padding:0 0 8px 20px; min-width:auto; display:none;
  }
  .nav-item.open > .dropdown{ display:block; }

  .nav-search{ padding:10px 16px; }
  .nav-search .search-form{
    position:static; display:none; margin-top:8px; box-shadow:none; padding:0;
  }
  .nav-search .search-form input{ width:80%; max-width:none; }

  /* remove the visual nudge on smaller screens so it stacks naturally */
  .header-lang-switcher { transform: none; }
}

/* Mobile arrow icon for dropdown */
@media (max-width: 880px) {
    .nav-item.has-dropdown > a::after {
      content: '';
      display: inline-block;
      margin-left: 6px;
      border: solid transparent;
      border-width: 5px 5px 0 5px;
      border-top-color: #111;
      vertical-align: middle;
      transition: transform 0.2s ease;
    }
    .nav-item.open > a::after { transform: rotate(180deg); }
}

/* Desktop logo + switcher center */
@media (min-width: 881px){
  .header-inner{justify-content:center;}
  .logo-lang-wrap{display:flex;align-items:flex-end;gap:16px;}
}

/* Mobile logo left + toggle right */
@media(max-width:880px){
  .header-inner{justify-content:space-between;}
  .logo-lang-wrap{align-items:flex-end;}
}


/* Very small screens: switcher below logo */
@media (max-width: 325px) {
  .logo-lang-wrap{
    flex-direction: column; /* stack vertically */
    align-items: center;    /* center both logo and switcher */
    gap: 6px;               /* small gap between logo and switcher */
  }
  .header-lang-switcher{
    font-size: 0.8rem; /* slightly smaller font */
    transform: none;
  }
}

@media (max-width: 325px) {
  .logo-lang-wrap {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;   /* Force vertical gap for both headers */
  }

  .header-lang-switcher {
    font-size: 0.8rem;
    margin-top: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 880px) {
  .header-inner {
    padding-bottom: 6px; /* reduce vertical gap */
  }

  .rainbow-hr {
    margin-top: 2px; /* tighten space above hr */
  }
}



/* Ultra-small devices: below 320px */
@media (max-width: 320px) {
  .logo-lang-wrap {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;   /* consistent vertical gap */
  }

  .header-logo img {
    height: 60px !important; /* shrink logo from 70px → 60px */
  }

  .header-lang-switcher {
    font-size: 0.74rem !important; /* shrink text slightly */
    margin-top: 0 !important;
  }

  .header-inner {
    padding: 8px 10px; /* tighter padding */
    min-height: auto;  
  }

  .rainbow-hr {
    margin-top: 2px !important; /* keep HR close */
  }

  .menu-toggle {
    font-size: 22px !important; /* smaller toggle */
  }
}