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

/* ---------- Header Variables ---------- */

:root {
    --header-green: #0E8A4B;
    --header-green-deep: #0B6E3C;
    --header-ink: #101827;
    --header-ink-soft: #5B6472;
    --header-line: #E7E9ED;
    --header-shadow: 0 10px 30px rgba(16, 24, 39, 0.07);

    --header-display: "Sora", sans-serif;
    --header-body: "Inter", sans-serif;
    --cream: #fbfaf6;
    --green-900: #0b3d2e;
    --green-800:#0e4f37;
    --green-700:#11603f;
    --green-600:#158a52;
    --green-500:#1aa35f;
    --green-accent:#17b26a;
    --cream:#fbfaf6;
    --ink:#12261f;
    --muted:#6b7a74;
    --border:#e6eae7;
    --card:#ffffff;
    --gold:#c99a3c;
      --green: #0E8A4B;
    --green-deep: #0B6E3C;
    --display: "Sora", sans-serif;
    --body: "Inter", sans-serif;
     --primary-green: #00a65a;
    --primary-dark: #008748;
    --light-green-bg: #eaf7f0;
    --border-color: #e2e8f0;
    --input-border: #d1d5db;
    --text-dark: #1e293b;
    --text-muted: #64748b;
    --bg-light: #f8fafc;
}
body {
    margin: 0;
    font-family: var(--header-body);
    
}

/* ---------- Base Header Wrapper ---------- */

.wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 22px;
    padding-right: 22px;
}


/* =========================================================
   TOP UTILITY BAR
   ========================================================= */

.utility {
    background: var(--header-ink);
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--header-body);
    font-size: 12.5px;
}

.utility .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-top: 9px;
    padding-bottom: 9px;

    gap: 8px;
    flex-wrap: wrap;
}


/* Contact Links */

.utility .contacts {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.utility a {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
}

.utility a:hover {
    color: #7FD9A4;
}


/* Header Actions */

.utility .actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


/* Utility Buttons */

.utility .headerButton-ghost,
.utility .headerButton-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 13px;

    border-radius: 6px;

    white-space: nowrap;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}


.utility .headerButton-ghost {
    border: 1px solid rgba(255, 255, 255, 0.28);
}


.utility .headerButton-ghost:hover {
    border-color: rgba(255, 255, 255, 0.55);
}


.utility .headerButton-solid {
    background: var(--header-green);
    color: #ffffff;
    font-weight: 600;

    border: 1px solid var(--header-green);
}


.utility .headerButton-solid:hover {
    background: var(--header-green-deep);
    border-color: var(--header-green-deep);
}


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

header.nav {
    position: sticky;
    top: 0;
    z-index: 50;

    background: rgba(255, 255, 255, 0.97);

    border-bottom: 1px solid var(--header-line);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 68px;
    padding-top: 6px;
    padding-bottom: 6px;
}


/* =========================================================
   BRAND
   ========================================================= */

.brand {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: var(--header-ink);
    text-decoration: none;

    flex-shrink: 0;
}


/* Brand Mark */

.brand-mark {
    width: 32px;
    height: 32px;

    border-radius: 8px;

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

    background:
        linear-gradient(
            135deg,
            var(--header-green),
            var(--header-green-deep)
        );

    color: #ffffff;

    font-family: var(--header-display);
    font-size: 15px;
    font-weight: 700;
}


/* Brand Name */

.brand-name {
    font-family: var(--header-display);
    font-size: 20px;
    font-weight: 700;

    color: var(--header-ink);
}

.brand-name span {
    color: var(--header-green);
}


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

nav.links {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* Individual Navigation Item */

nav.links > .navitem {
    position: relative;

    padding: 10px 14px;
}


nav.links > .navitem > a {
    display: inline-flex;
    align-items: center;

    font-family: var(--header-body);
    font-size: 14.5px;
    font-weight: 500;

    color: var(--header-ink);

    text-decoration: none;

    white-space: nowrap;

    transition: color 0.18s ease;
}


nav.links > .navitem:hover > a {
    color: var(--header-green);
}


/* =========================================================
   DROPDOWNS
   ========================================================= */

.dropdown {
    position: absolute;

    top: calc(100% + 5px);
    left: 0;

    display: none;

    min-width: 230px;

    padding: 8px;

    background: #ffffff;

    border: 1px solid var(--header-line);
    border-radius: 10px;

    box-shadow: var(--header-shadow);

    z-index: 100;
}


/* Dropdown Bridge */

.navitem:hover .dropdown,
.navitem:focus-within .dropdown {
    display: block;
}


/* Dropdown Links */

.dropdown a {
    display: block;

    padding: 9px 12px;

    border-radius: 6px;

    color: var(--header-ink);

    font-family: var(--header-body);
    font-size: 13.5px;

    text-decoration: none;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}


.dropdown a:hover,
.dropdown a:focus {
    background: #E7F5EC;
    color: var(--header-green-deep);
}



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

.utility a:focus-visible,
.nav a:focus-visible,
.nav-toggle:focus-visible {
    outline: 2px solid var(--header-green);
    outline-offset: 2px;
}



/* From Uiverse.io by Gaurang7717 */ 
.headerButton {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 35px;
  height: 35px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
  background-color: #00d757;
}

.sign {
  width: 100%;
  transition-duration: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sign svg {
  width: 22px;
}

.sign svg path {
  fill: white;
}
.text {
  position: absolute;
  right: 0%;
  width: 0%;
  opacity: 0;
  color: white;
  font-size: 1.2em;
  font-weight: 600;
  transition-duration: 0.3s;
}

.headerButton:hover {
  width: 125px;
  border-radius: 40px;
  transition-duration: 0.3s;
}

.headerButton:hover .sign {
  width: 30%;
  transition-duration: 0.3s;
  /* padding-left: 10px; */
}

.headerButton:hover .text {
  opacity: 1;
  width: 70%;
  transition-duration: 0.3s;
  /* padding-right: 10px; */
}
.headerButton:active {
  transform: translate(2px, 2px);
}


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

/* ≤ 991px */
@media (max-width: 991px) {

    .utility .wrap {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
    }

    .utility .contacts,
    .utility .actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 14px;
    }

    header.nav .nav-inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 20px;
        padding-left: 10px;
    }

    header.nav .links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px 6px;
        width: 100%;
    }
}


/* ≤ 576px */
@media (max-width: 576px) {

    .utility .contacts a[href^="mailto"] {
        display: none;
    }

    .utility .actions a {
        font-size: 12px;
        padding: 6px 10px;
    }

    header.nav .brand .logo-img {
        max-width: 150px !important;
    }

    header.nav .links a {
        font-size: 14px;
    }
}