/* =========================================================
   FAUNA OF INDIA — MODERN GOVERNMENT HEADER
   Primary Color: #2a4173
========================================================= */

:root {
     --fauna-primary: #2a4173;
     --fauna-primary-dark: #283d6b;
     --fauna-primary-light: #eef2fa;
     --fauna-accent: #d9a441;
     --fauna-white: #ffffff;
     --fauna-text: #1f2937;
     --fauna-muted: #64748b;
     --fauna-border: #e5e7eb;

     --fauna-shadow:
          0 10px 35px rgba(40, 61, 107, 0.12);

     --fauna-transition:
          all 0.3s cubic-bezier(.4, 0, .2, 1);
}


/* =========================================================
   HEADER
========================================================= */

.header {
     position: relative;
     width: 100%;
     margin: 0;
     padding: 0;

     background: #ffffff;

     box-shadow:
          0 5px 25px rgba(15, 23, 42, 0.08);

     z-index: 1000;

     animation: headerIn .7s ease both;
}

.header *,
.header *::before,
.header *::after {
     box-sizing: border-box;
}

.header a {
     text-decoration: none;
}


/* =========================================================
   TOP DECORATIVE LINE
========================================================= */

.header::before {
     content: "";

     display: block;

     width: 100%;
     height: 5px;

     background:
          linear-gradient(90deg,
               var(--fauna-primary),
               #526da5,
               var(--fauna-accent),
               #526da5,
               var(--fauna-primary));

     background-size: 250% 100%;

     animation: gradientMove 6s ease infinite;
}


/* =========================================================
   BRANDING / TITLE AREA
========================================================= */

.header .title {
     position: relative;

     width: 100%;
     /* min-height: 275px;
     padding: 30px 190px 25px; */

     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;

     text-align: center;

     color: var(--fauna-primary);

     overflow: hidden;

     background:
          radial-gradient(circle at center,
               rgba(54, 80, 138, 0.045),
               transparent 65%);
}


/* =========================================================
   CENTER DECORATION
========================================================= */

.header .title::before {
     content: "";

     position: absolute;

     width: 420px;
     height: 420px;

     top: -260px;
     left: 50%;

     transform: translateX(-50%);

     background:
          radial-gradient(circle,
               rgba(54, 80, 138, 0.06),
               transparent 68%);

     pointer-events: none;
}

/* =========================================================
   GOVERNMENT / ZSI LOGOS
========================================================= */

.header .zsi_logo,
.header .gov_logo {
     position: absolute;

     top: 28px;

     width: 145px;
     height: 145px;

     display: flex;
     align-items: center;
     justify-content: center;

     padding: 0;

     background: #fff;

     border-radius: 50%;

     overflow: hidden;

     border: 1px solid rgba(54, 80, 138, 0.08);

     box-shadow:
          0 10px 30px rgba(54, 80, 138, 0.12);

     z-index: 5;

     transition:
          transform .4s ease,
          box-shadow .4s ease;
}


.header .zsi_logo {
     left: 35px;
}


.header .gov_logo {
     right: 35px;
}


/* IMAGE */

.header .zsi_logo img,
.header .gov_logo img {
     display: block;

     width: 100%;
     height: 100%;

     object-fit: contain;

     border-radius: 50%;

     background: transparent;
}


/* HOVER */

.header .zsi_logo:hover,
.header .gov_logo:hover {
     transform: translateY(-5px) scale(1.04);

     box-shadow:
          0 15px 35px rgba(54, 80, 138, 0.20);
}

/* =========================================================
   GOVERNMENT TEXT
========================================================= */

.header .title .eng {
     position: relative;

     z-index: 2;

     margin: 0;

     color: var(--fauna-muted);

     font-size: 15px;

     line-height: 1.5;

     animation:
          textReveal .8s ease .1s both;
}


.header .title .eng .big {
     color: var(--fauna-primary);

     font-size: 17px;

     font-weight: 700;

     letter-spacing: .2px;
}


/* =========================================================
   MAIN ZSI TITLE
========================================================= */

.header .title .full {
     position: relative;

     z-index: 2;

     margin-top: 12px;

     animation:
          textReveal .8s ease .25s both;
}


/* Hindi title */

.header .title .small {
     margin: 0;

     color: var(--fauna-primary-dark);

     font-size: 18px;

     font-weight: 600;

     line-height: 1.3;
}


/* Main title */

.header .title .vbig {
     margin: 4px 0 0;

     color: var(--fauna-primary);
     font-size: clamp(24px, 3vw, 35px);
     font-weight: 400;
     line-height: 1.05;
     letter-spacing: -1.5px;
     text-shadow:
          0 4px 18px rgba(54, 80, 138, 0.12);
}


/* =========================================================
   GOLD TITLE LINE
========================================================= */

.header .title .full::after {
     content: "";

     display: block;

     width: 90px;
     height: 3px;

     margin: 13px auto 0;

     border-radius: 20px;

     background:
          linear-gradient(90deg,
               transparent,
               var(--fauna-accent),
               transparent);

     animation:
          goldLine 1s ease .8s both;
}


/* =========================================================
   NAVIGATION
========================================================= */

.header .nav {
     position: relative;

     width: 100%;

     background:
          linear-gradient(135deg,
               var(--fauna-primary-dark),
               var(--fauna-primary));

     border-top:
          1px solid rgba(255, 255, 255, .15);

     box-shadow:
          0 8px 25px rgba(40, 61, 107, .18);
}


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

.header .menu {
     display: flex;

     align-items: stretch;
     justify-content: center;

     width: 100%;

     min-height: 58px;

     margin: 0;
     padding: 0 20px;

     list-style: none;
}


.header .menu>li {
     position: relative;

     display: flex;
     align-items: stretch;
}


/* =========================================================
   NAV LINKS
========================================================= */

.header .menu>li>a {
     position: relative;

     display: flex;

     align-items: center;
     justify-content: center;

     min-height: 58px;

     padding: 0 25px;

     color: #ffffff;

     font-size: 15px;

     font-weight: 600;

     letter-spacing: .1px;

     transition:
          background .3s ease,
          color .3s ease,
          transform .3s ease;
}


/* =========================================================
   NAV HOVER
========================================================= */

.header .menu>li>a::before {
     content: "";

     position: absolute;

     inset: 7px 8px;

     border-radius: 10px;

     background:
          rgba(255, 255, 255, .08);

     opacity: 0;

     transform: scale(.92);

     transition:
          opacity .3s ease,
          transform .3s ease;
}


.header .menu>li:hover>a::before,
.header .menu>li>a.active::before {
     opacity: 1;

     transform: scale(1);
}


.header .menu>li>a {
     z-index: 1;
}


/* =========================================================
   ACTIVE GOLD LINE
========================================================= */

.header .menu>li>a::after {
     content: "";

     position: absolute;

     bottom: 0;
     left: 50%;

     width: 0;
     height: 4px;

     border-radius:
          5px 5px 0 0;

     background:
          linear-gradient(90deg,
               #f1c45b,
               var(--fauna-accent));

     transform:
          translateX(-50%);

     transition:
          width .3s ease;
}


.header .menu>li:hover>a::after,
.header .menu>li>a.active::after {
     width: 65%;
}


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

.header .menu>li>ul {
     position: absolute;

     /* FIX: Remove the 8px hover gap */
     top: 100%;
     left: 50%;

     width: 280px;

     max-height: 430px;

     overflow-y: auto;

     margin: 0;
     padding: 8px;

     list-style: none;

     background: #ffffff;

     border:
          1px solid var(--fauna-border);

     border-radius: 12px;

     box-shadow:
          0 20px 50px rgba(15, 23, 42, .18);

     opacity: 0;
     visibility: hidden;
     pointer-events: none;

     transform:
          translate(-50%, 0) scale(.96);

     transform-origin:
          top center;

     transition:
          opacity .25s ease,
          visibility .25s ease,
          transform .25s ease;

     z-index: 9999;
}

/* =========================================================
   DROPDOWN — HOVER + JS CLICK CONTROL
========================================================= */

/* Default hidden */
.header .menu>li>ul {
     opacity: 0;
     visibility: hidden;
     pointer-events: none;

     transform:
          translate(-50%, 0) scale(.96);

     transition:
          opacity .25s ease,
          visibility .25s ease,
          transform .25s ease;
}


/* Opened by JavaScript */
.header .menu>li.dropdown-open>ul {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;

     transform: translate(-50%, 0) scale(1);
}


/* Parent menu stays highlighted while dropdown is open */
.header .menu>li.dropdown-open>a::before {
     opacity: 1;
     transform: scale(1);
}

.header .menu>li.dropdown-open>a::after {
     width: 65%;
}


/* Mobile */
@media (max-width: 768px) {

     .header .menu>li>ul {
          left: 0;

          transform:
               translate(0, 0) scale(.96);
     }

     /* Open dropdown on hover */
     .header .menu>li:hover>ul {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;

          transform:
               translate(0, 0) scale(1);
     }

     /* Open dropdown through JavaScript */
     .header .menu>li.dropdown-open>ul {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;

          transform:
               translate(0, 0) scale(1);
     }

     /* Parent menu highlight */
     .header .menu>li:hover>a::before,
     .header .menu>li.dropdown-open>a::before {
          opacity: 1;
          transform: scale(1);
     }

     .header .menu>li:hover>a::after,
     .header .menu>li.dropdown-open>a::after {
          width: 65%;
     }
}

/* Dropdown arrow */

.header .menu>li>ul::before {
     content: "";

     position: absolute;

     top: -7px;
     left: 50%;

     width: 14px;
     height: 14px;

     background: #ffffff;

     border-left:
          1px solid var(--fauna-border);

     border-top:
          1px solid var(--fauna-border);

     transform:
          translateX(-50%) rotate(45deg);
}


/* Show dropdown */

.header .menu>li:hover>ul {
     opacity: 1;

     visibility: visible;

     pointer-events: auto;

     transform:
          translate(-50%, 0) scale(1);
}


/* =========================================================
   DROPDOWN LINKS
========================================================= */

.header .menu>li>ul>li>a {
     display: flex;

     align-items: center;

     min-height: 40px;

     padding: 8px 12px;

     border-radius: 8px;

     color: var(--fauna-text);

     font-size: 13px;

     font-weight: 500;

     line-height: 1.35;

     transition:
          background .25s ease,
          color .25s ease,
          padding-left .25s ease;
}


.header .menu>li>ul>li>a:hover {
     color: var(--fauna-primary);

     background:
          var(--fauna-primary-light);

     padding-left: 18px;
}


/* =========================================================
   DROPDOWN SCROLLBAR
========================================================= */

.header .menu>li>ul::-webkit-scrollbar {
     width: 5px;
}

.header .menu>li>ul::-webkit-scrollbar-track {
     background: #f1f5f9;
}

.header .menu>li>ul::-webkit-scrollbar-thumb {
     background: var(--fauna-primary);

     border-radius: 10px;
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1200px) {

     .header .title {
          min-height: 255px;

          padding-left: 170px;
          padding-right: 170px;
     }

     .header .zsi_logo,
     .header .gov_logo {
          width: 125px;
          height: 125px;
     }

     .header .zsi_logo {
          left: 30px;
     }

     .header .gov_logo {
          right: 30px;
     }

     .header .title .vbig {
          font-size: 42px;
     }

     .header .menu>li>a {
          padding: 0 18px;
     }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

     .header .title {
          min-height: 235px;

          padding-left: 145px;
          padding-right: 145px;
     }

     .header .zsi_logo,
     .header .gov_logo {
          width: 105px;
          height: 105px;

          top: 30px;
     }

     .header .zsi_logo {
          left: 20px;
     }

     .header .gov_logo {
          right: 20px;
     }

     .header .title .eng {
          font-size: 13px;
     }

     .header .title .small {
          font-size: 16px;
     }

     .header .title .vbig {
          font-size: 35px;
     }

     .header .menu>li>a {
          padding: 0 14px;

          font-size: 14px;
     }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

     .header .title {
          min-height: 190px;

          padding:
               25px 15px 20px;
     }


     /* Keep logos visible but smaller */

     .header .zsi_logo,
     .header .gov_logo {

          display: flex;

          width: 70px;
          height: 70px;

          top: 20px;

          padding: 4px;
     }


     .header .zsi_logo {
          left: 15px;
     }


     .header .gov_logo {
          right: 15px;
     }


     .header .title .eng {
          font-size: 10px;

          max-width: 65%;
     }


     .header .title .eng .big {
          font-size: 12px;
     }


     .header .title .small {
          font-size: 12px;
     }


     .header .title .vbig {
          font-size: 25px;

          letter-spacing: -.5px;
     }


     .header .title .full {
          margin-top: 8px;
     }


     .header .title .full::after {
          width: 65px;

          margin-top: 8px;
     }


     /* Navigation scroll */

     .header .nav {
          overflow-x: auto;

          scrollbar-width: none;
     }


     .header .nav::-webkit-scrollbar {
          display: none;
     }


     .header .menu {
          width: max-content;

          min-width: 100%;

          justify-content: flex-start;

          padding: 0;
     }


     .header .menu>li>a {
          min-height: 52px;

          padding: 0 17px;

          font-size: 13px;
     }


     .header .menu>li>ul {
          left: 0;

          transform:
               translate(0, 0) scale(.96);
     }

     .header .menu>li:hover>ul {
          transform:
               translate(0, 0) scale(1);
     }


     .header .menu>li>ul::before {
          left: 30px;
     }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

     .header .title {
          min-height: 170px;
     }


     .header .zsi_logo,
     .header .gov_logo {
          width: 55px;
          height: 55px;

          top: 18px;
     }


     .header .zsi_logo {
          left: 10px;
     }


     .header .gov_logo {
          right: 10px;
     }


     .header .title .eng {
          font-size: 9px;
     }


     .header .title .eng .big {
          font-size: 11px;
     }


     .header .title .small {
          font-size: 11px;
     }


     .header .title .vbig {
          font-size: 20px;
     }


     .header .menu>li>a {
          padding: 0 13px;

          font-size: 12px;
     }
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes headerIn {

     from {
          opacity: 0;
          transform: translateY(-15px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}


@keyframes textReveal {

     from {
          opacity: 0;
          transform: translateY(-10px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}


@keyframes goldLine {

     from {
          width: 0;
          opacity: 0;
     }

     to {
          width: 90px;
          opacity: 1;
     }
}


@keyframes gradientMove {

     0% {
          background-position: 0% 50%;
     }

     50% {
          background-position: 100% 50%;
     }

     100% {
          background-position: 0% 50%;
     }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.header a:focus-visible {
     outline:
          3px solid rgba(217, 164, 65, .8);

     outline-offset:
          -3px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

     .header,
     .header *,
     .header *::before,
     .header *::after {

          animation: none;

          transition: none;
     }
}