/* ============================================================
   AHEC CUSTOM CSS — Header Complete Redesign
   File:   webassets/css/ahec-custom.css
   Covers: Top Info Bar + Main Header + Dropdown + Search
           + Mobile Responsive
   Colors: --ahec-blue   #1B2D6B  (primary)
           --ahec-yellow #F5A800  (accent)
           --ahec-red    #C0392B  (danger)
           --ahec-light  #EEF2FF  (hover bg)
   ============================================================ */


/* ============================================================
   0. CSS VARIABLES (root)
   ============================================================ */
:root {
  --ahec-blue:        #1B2D6B;
  --ahec-blue-dark:   #142252;
  --ahec-yellow:      #F5A800;
  --ahec-yellow-dark: #d99200;
  --ahec-red:         #C0392B;
  --ahec-light:       #EEF2FF;
  --ahec-border:      #e0e4f0;
  --ahec-text:        #2c2c2c;
  --ahec-text-muted:  rgba(255, 255, 255, 0.80);
  --header-height:    68px;
  --topbar-height:    36px;
  --transition:       0.18s ease;
}

/* Offer Strip Container */
.offer_strip_nwe.alert {
  background-color: var(--ahec-blue); /* Premium blue background */
  border-bottom: 2px solid var(--ahec-yellow); /* Yellow bottom border highlight */
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Inner Layout Alignment */
.offr_strp {
  display: flex;
  align-items: center;
  position: relative;
  min-height: 40px; /* Ek standard compact height */
}

/* "New" Badge/Ribbon Styling */
.offr_strp .ribbon1 {
  background: linear-gradient(135deg, var(--ahec-red), #e74c3c);
  color: #ffffff;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 4px;
  letter-spacing: 1px;
  z-index: 10;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
  margin-right: 15px;
  animation: pulse 2s infinite; /* Attention grabber animation */
}

/* Marquee Adjustment */
.offr_strp marquee {
  width: 100%;
  display: flex;
  align-items: center;
}

/* Flex layout inside marquee for items gap */
.offr_strp .d-flex {
  align-items: center;
  gap: 50px; /* Har ek offer text ke bich me gap */
}

/* Offer Text Styling */
.offr_strp .d-flex p {
  color: #ffffff; /* White text for high contrast */
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* Offer Text ke andar agar links (<a>) hain toh unki styling */
.offr_strp .d-flex p a {
  color: var(--ahec-yellow);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  margin-left: 5px;
}

.offr_strp .d-flex p a:hover {
  color: var(--ahec-yellow-dark);
  text-decoration: underline;
}

/* Ribbon Pulse Animation (Optional but looks great) */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* ============================================================
   1. TOP INFO BAR
   ============================================================ */

/* Outer wrapper */
.ahec-top-bar {
  background: var(--ahec-blue);
  height: var(--topbar-height);
  display: flex;
  align-items: center;
}

/* Inner flex row */
.ahec-top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Left: contact items */
.ahec-top-bar__left {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Each contact item */
.ahec-top-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ahec-text-muted);
  text-decoration: none;
  font-size: 12.5px;
  padding: 0 8px;
  transition: color var(--transition);
}
.ahec-top-bar__item i {
  color: var(--ahec-yellow);
  font-size: 13px;
}
.ahec-top-bar__item:hover {
  color: var(--ahec-yellow);
  text-decoration: none;
}

/* Vertical separator between items */
.ahec-top-bar__sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.20);
  flex-shrink: 0;
}

/* Right: social icons */
.ahec-top-bar__right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Each social icon circle */
.ahec-top-bar__social {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.80);
  font-size: 12px;
  text-decoration: none;
  transition: all var(--transition);
}
.ahec-top-bar__social:hover {
  background: var(--ahec-yellow);
  border-color: var(--ahec-yellow);
  color: var(--ahec-blue);
  text-decoration: none;
}


/* ============================================================
   2. MAIN HEADER WRAPPER
   ============================================================ */

/* Site header base */
.site-header {
  background: #ffffff;
  position: relative;
  z-index: 100;
  box-shadow: 0 2px 16px rgba(27, 45, 107, 0.09);
}

/* header-wrap: contains the full nav row */
#header-wrap {
  background: #ffffff;
  border-bottom: 3px solid var(--ahec-yellow);
  padding: 0;
}

/* Fixed header — applied via JS on scroll */
#header-wrap.fixed-header {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: #ffffff !important;
  border-bottom: 3px solid var(--ahec-yellow) !important;
  box-shadow: 0 4px 24px rgba(27, 45, 107, 0.13) !important;
  animation: ahec-slide-down 0.35s ease forwards;
}

/* Fixed header dark variant */
.navbar-dark #header-wrap.fixed-header {
  background: var(--ahec-blue) !important;
}

/* Slide-down animation for fixed header */
@keyframes ahec-slide-down {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}


/* ============================================================
   3. LOGO
   ============================================================ */

.ahec-logo {
  display: inline-flex;
  align-items: center;
  padding: 12px 0;
  flex-shrink: 0;
  text-decoration: none;
}
.ahec-logo img {
  height: 44px;
  width: auto;
  object-fit: contain;
}
.ahec-logo:hover {
  opacity: 0.90;
  text-decoration: none;
}


/* ============================================================
   4. NAVBAR BASE
   ============================================================ */

.navbar {
  padding: 0;
}

/* Nav items row */
.ahec-nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Individual nav link */
.ahec-nav__links .nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--ahec-text) !important;
  padding: 8px 12px !important;
  border-radius: 7px !important;
  text-transform: capitalize;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}

/* Nav link: hover + focus + active state */
.ahec-nav__links .nav-link:hover,
.ahec-nav__links .nav-link:focus,
.ahec-nav__links .nav-link.active {
  color: var(--ahec-blue) !important;
  background: var(--ahec-light) !important;
  text-decoration: none;
}

/* Dark navbar override */
.site-header.navbar-dark .ahec-nav__links .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
}
.site-header.navbar-dark .ahec-nav__links .nav-link:hover,
.site-header.navbar-dark .ahec-nav__links .nav-link:focus,
.site-header.navbar-dark .ahec-nav__links .nav-link.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}


/* ============================================================
   5. PLACE ORDER — CTA BUTTON IN NAV
   ============================================================ */

.ahec-nav__order-btn {
  background: var(--ahec-yellow) !important;
  color: var(--ahec-blue) !important;
  font-weight: 700 !important;
  border-radius: 7px !important;
  padding: 8px 16px !important;
  font-size: 13.5px !important;
  letter-spacing: 0.2px;
  transition: background var(--transition), color var(--transition) !important;
}
.ahec-nav__order-btn:hover {
  background: var(--ahec-blue) !important;
  color: #ffffff !important;
}


/* ============================================================
   6. DROPDOWN MENU
   ============================================================ */

/* Dropdown panel */
.ahec-dropdown.dropdown-menu {
  border: none !important;
  border-top: 3px solid var(--ahec-yellow) !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: 0 8px 32px rgba(27, 45, 107, 0.13) !important;
  padding: 6px 0 8px !important;
  margin-top: 0 !important;
  min-width: 200px;
}

/* Each dropdown item */
.ahec-dropdown .dropdown-item {
  font-size: 13.5px;
  font-weight: 500;
  color: #333;
  padding: 9px 18px;
  transition: background var(--transition), color var(--transition);
}
.ahec-dropdown .dropdown-item:hover,
.ahec-dropdown .dropdown-item:focus {
  background: var(--ahec-blue) !important;
  color: #ffffff !important;
}


/* ============================================================
   7. SEARCH
   ============================================================ */

/* Search trigger button */
.ahec-search__btn {
  width: 38px;
  height: 38px;
  background: #ffffff;
  border: 1.5px solid var(--ahec-border);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ahec-blue);
  font-size: 16px;
  cursor: pointer;
  transition: all var(--transition);
  padding: 0;
}
.ahec-search__btn:hover {
  background: var(--ahec-blue);
  border-color: var(--ahec-blue);
  color: #ffffff;
}

/* Search dropdown panel */
.ahec-search__panel.dropdown-menu {
  border: none !important;
  border-top: 3px solid var(--ahec-yellow) !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: 0 8px 32px rgba(27, 45, 107, 0.13) !important;
  padding: 14px !important;
  min-width: 340px;
  right: 0;
  left: auto;
}

/* Search input wrapper */
.ahec-search__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* Text input */
.ahec-search__input {
  width: 100%;
  padding: 9px 42px 9px 14px;
  border: 1.5px solid var(--ahec-border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ahec-text);
  outline: none;
  transition: border-color var(--transition);
}
.ahec-search__input:focus {
  border-color: var(--ahec-blue);
}

/* Submit icon inside input */
.ahec-search__submit {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--ahec-blue);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}
.ahec-search__submit:hover {
  color: var(--ahec-yellow);
}

/* Recent searches label */
.ahec-search__recent-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 12px 0 6px;
}

/* Recent search row */
.ahec-search__recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ahec-text);
  font-size: 13.5px;
  font-weight: 500;
  transition: background var(--transition);
}
.ahec-search__recent-item:hover {
  background: var(--ahec-light);
  color: var(--ahec-blue);
  text-decoration: none;
}

/* Thumbnail in recent search */
.ahec-search__recent-img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}


/* ============================================================
   8. RIGHT ACTIONS — Sign In / Sign Out
   ============================================================ */

/* Actions wrapper */
.ahec-nav__actions {
  gap: 8px;
  flex-shrink: 0;
}

/* Sign In icon button */
.ahec-nav__signin {
  width: 38px;
  height: 38px;
  background: var(--ahec-blue);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 18px;
  text-decoration: none;
  transition: background var(--transition);
}
.ahec-nav__signin:hover {
  background: var(--ahec-yellow);
  color: var(--ahec-blue);
  text-decoration: none;
}

/* Sign Out text button */
.ahec-nav__signout {
  background: var(--ahec-blue) !important;
  border-color: var(--ahec-blue) !important;
  color: #ffffff !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  transition: all var(--transition) !important;
}
.ahec-nav__signout:hover {
  background: var(--ahec-yellow) !important;
  border-color: var(--ahec-yellow) !important;
  color: var(--ahec-blue) !important;
}


/* ============================================================
   9. HAMBURGER TOGGLE (mobile)
   ============================================================ */

.ahec-hamburger {
  width: 40px;
  height: 40px;
  background: var(--ahec-light) !important;
  border: none !important;
  border-radius: 8px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ahec-blue);
  font-size: 22px;
  padding: 0 !important;
  cursor: pointer;
  transition: background var(--transition);
}
.ahec-hamburger:hover {
  background: var(--ahec-blue) !important;
  color: #ffffff;
}


/* ============================================================
   10. GLOBAL OVERRIDES
   ============================================================ */

a { color: var(--ahec-blue); }
a:hover { color: var(--ahec-yellow); text-decoration: none; }
h1, h2, h3, h4, h5, h6 { color: var(--ahec-blue); }

.owl-dot.active span,
.owl-dot:hover span {
  background: var(--ahec-blue) !important;
}

.btn-primary {
  background: var(--ahec-blue) !important;
  border-color: var(--ahec-blue) !important;
  border-radius: 7px !important;
}
.btn-primary:hover {
  background: var(--ahec-yellow) !important;
  border-color: var(--ahec-yellow) !important;
  color: var(--ahec-blue) !important;
}

.shape-1 { position: absolute; top: -1px; width: 100%; left: 0; right: 0; }
.shape-2 { position: absolute; right: 0; top: 0; height: 100%; width: 100%; }
.shape-1.bottom { top: inherit; bottom: -1px; }
.round-shape { clip-path: circle(100% at 50% -50%); }


/* ============================================================
   11. MOBILE RESPONSIVE (max-width: 991px)
   ============================================================ */

@media (max-width: 991.98px) {

  /* Top bar: wrap on small screens */
  .ahec-top-bar {
    height: auto;
    padding: 6px 0;
  }

  .ahec-top-bar__social {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  /* Header wrap padding on mobile */
  #header-wrap {
    padding: 12px 0;
  }
  #header-wrap.fixed-header {
    padding: 10px 0;
    height: auto;
  }

  /* Navbar: push to right, logo absolute left */
  .navbar {
    justify-content: flex-end;
    width: 100%;
    position: relative !important;
  }

  /* Logo: absolute left on mobile */
  .ahec-logo {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    padding: 0;
  }
  .ahec-logo img {
    height: 38px;
  }

  /* Collapsed nav dropdown panel */
  .navbar-collapse {
    position: absolute;
    top: 54px;
    left: 0;
    width: 100%;
    z-index: 200;
    background: #ffffff;
    border-top: 3px solid var(--ahec-yellow);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 32px rgba(27, 45, 107, 0.14);
    max-height: 430px;
    overflow-y: auto;
    padding: 8px 10px 12px;
  }

  /* Nav items stacked on mobile */
  .ahec-nav__links {
    flex-direction: column;
    gap: 2px;
    width: 100%;
  }
  .ahec-nav__links .nav-item {
    width: 100%;
  }
  .ahec-nav__links .nav-link {
    display: block;
    padding: 10px 14px !important;
    font-size: 14.5px;
    border-radius: 7px !important;
    color: var(--ahec-text) !important;
  }
  .ahec-nav__links .nav-link:hover,
  .ahec-nav__links .nav-link.active {
    background: var(--ahec-light) !important;
    color: var(--ahec-blue) !important;
  }

  /* Place Order full width on mobile */
  .ahec-nav__order-btn {
    display: block !important;
    text-align: center;
    margin: 6px 4px 4px !important;
    width: calc(100% - 8px);
  }

  /* Dropdown: static on mobile */
  .ahec-nav__links .dropdown-menu {
    position: static !important;
    float: none !important;
    box-shadow: none !important;
    border: none !important;
    border-left: 3px solid var(--ahec-yellow) !important;
    border-radius: 0 !important;
    padding: 4px 0 4px 8px !important;
    margin: 0 !important;
    background: #f8f9fc;
  }

  /* Search panel position on mobile */
  .ahec-search__panel.dropdown-menu {
    min-width: 280px;
    right: -60px;
  }

  .ahec-nav__actions {
    gap: 6px;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .ahec-top-bar__item:not(:first-child) {
    display: none !important;
  }
  .ahec-top-bar__sep {
    display: none !important;
  }
  .ahec-top-bar__social {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
}