/* ================================================================
   header.css — Fully isolated header for about.html
   ALL rules use !important to override Bootstrap 3 / main.css.
   Top bar:  dcx-topbar-* (zero Bootstrap utility dependencies)
   Navbar:   scoped under header.main-header (all visuals forced)
   ================================================================ */

/* ── FONTS ── */
@font-face {
  font-family: Poppins-Regular;
  src: url("../team/fonts/Poppins/Poppins-Regular.ttf");
  font-display: swap;
}
@font-face {
  font-family: Poppins-Light;
  src: url("../team/fonts/Poppins/Poppins-Light.ttf");
  font-display: swap;
}
@font-face {
  font-family: Poppins-Bold;
  src: url("../team/fonts/Poppins/Poppins-Bold.ttf");
  font-display: swap;
}
@font-face {
  font-family: Poppins-SemiBold;
  src: url("../team/fonts/Poppins/Poppins-SemiBold.ttf");
  font-display: swap;
}

/* ================================================================
   DCX TOP BAR — dcx-topbar-* (no Bootstrap utility dependencies)
   ================================================================ */

.dcx-topbar {
  background: #ECBEB4 !important;
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  font-family: Poppins-Regular, sans-serif !important;
}

.dcx-topbar-inner {
  max-width: 1440px !important;
  margin: 0 auto !important;
  /* padding: 0 12px !important; */
  box-sizing: border-box !important;
}

.dcx-topbar-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  padding: 8px !important;
}

/* Qualification text — hidden on mobile */
.dcx-topbar-qual {
  display: none !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
@media (min-width: 768px) {
  .dcx-topbar-qual {
    display: block !important;
  }
}

/* Phone divs — hidden on mobile */
.dcx-topbar-phone {
  display: none !important;
  flex-shrink: 0 !important;
}
@media (min-width: 768px) {
  .dcx-topbar-phone {
    display: block !important;
  }
}

.dcx-topbar-text {
  font-size: 14px !important;
  color: #000 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Poppins-Regular, sans-serif !important;
  line-height: 1.5 !important;
}

.dcx-topbar-text a {
  color: #000 !important;
  text-decoration: none !important;
}

.dcx-tel-icon {
  width: 21px !important;
  height: 21px !important;
  background: url("../team/img/icons/tel-icon.svg") no-repeat center center !important;
  background-size: 100% !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.dcx-topbar-btn-wrap {
  text-align: center !important;
  flex-shrink: 0 !important;
}

.dcx-topbar-btn {
  background: #E39482 !important;
  border-radius: 80px !important;
  border: none !important;
  font-family: Poppins-SemiBold, sans-serif !important;
  font-size: 0.875rem !important;
  padding: 15px 15px 15px 65px !important;
  position: relative !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  display: inline-block !important;
  color: #fff !important;
  text-decoration: none !important;
  line-height: normal !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  vertical-align: top !important;
}

.dcx-topbar-btn:hover {
  background: #FFEDE8 !important;
  color: #000 !important;
  text-decoration: none !important;
}

.dcx-topbar-btn-icon {
  background: #FFEDE8 url("../team/img/icons/app-icon.png") no-repeat center center !important;
  width: 50px !important;
  height: 100% !important;
  display: inline-block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
}

/* ================================================================
   MAIN HEADER / NAVBAR — scoped under header.main-header
   All !important to override Bootstrap 3 and any main.css rules.
   Bootstrap structural classes kept for JS toggle functionality.
   ================================================================ */

/* Fixed wrapper — holds topbar + navbar together.
   position:fixed is used because remote main.css sets overflow:hidden on ancestors
   which breaks position:sticky in all browsers. */
.dcx-site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background: #fff !important;
}

header.main-header {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  background: #fff !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Poppins-Regular, sans-serif !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-height: 0 !important;
}

/* Centered inner container */
header.main-header .dcx-hdr-inner {
  max-width: 1440px !important;
  margin: 0 auto !important;
}

/* Wrapper-container inside dropdowns also needs centering */
header.main-header .wrapper-container {
  max-width: 1440px !important;
  margin: 0 auto !important;
}

header.main-header .navbar {
  border-bottom: 1px solid #F2F2F2 !important;
  padding: 15px !important;
  margin: 0 !important;
  min-height: 0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
@media (min-width: 768px) {
  header.main-header .navbar {
    padding: 0 !important;
  }
}

/* Logo */
header.main-header .navbar-brand {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
header.main-header .navbar-brand img {
  max-width: 167px !important;
  height: auto !important;
  display: block !important;
}
@media (min-width: 768px) {
  header.main-header .navbar-brand img {
    max-width: 200px !important;
  }
}

/* Hamburger toggle */
header.main-header .navbar-toggler {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* Hamburger icon — Bootstrap 5 CSS variable not available with vendor Bootstrap 3 */
header.main-header .navbar-toggler-icon {
  display: inline-block !important;
  width: 1.5em !important;
  height: 1.5em !important;
  vertical-align: middle !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833%2C 37%2C 41%2C 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Nav list */
header.main-header .navbar-nav {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ── NAV ITEMS ── */
header.main-header .nav-item {
  padding: 0 10px !important;
  list-style: none !important;
  position: relative !important;
}
@media (min-width: 768px) {
  header.main-header .nav-item {
    padding: 0 15px !important;
  }
}
@media (min-width: 992px) {
  header.main-header .nav-item {
    padding: 20px 0 !important;
  }
}
@media (min-width: 1200px) {
  header.main-header .nav-item {
    padding: 25px 8px !important;
  }
}

header.main-header .nav-item.dropdown {
  position: inherit !important;
}

/* Keep About dropdown anchored below About item */
header.main-header .nav-item.dropdown.position-relative {
  position: relative !important;
}

header.main-header .nav-item a {
  text-decoration: none !important;
}

/* ── NAV LINKS ── */
header.main-header .nav-item .nav-link {
  color: #000 !important;
  background: transparent !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
@media (min-width: 768px) {
  header.main-header .nav-item .nav-link {
    font-size: 1rem !important;
  }
}

header.main-header .nav-item a:hover,
header.main-header .nav-item:hover > a {
  color: #E39482 !important;
}

/* ── DROPDOWN: show on hover (desktop) ── */
@media (min-width: 768px) {
  header.main-header .nav-item:hover .dropdown-menu {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
  }
  header.main-header .nav-item:hover .custom-dd-2 {
    left: auto !important;
    right: 0 !important;
  }
}

header.main-header .nav-item .dropdown-menu {
  border: 0 !important;
  border-top: 1px solid #F2F2F2 !important;
  margin-top: 0 !important;
  overflow-y: auto !important;
  background: #fff !important;
  border-radius: 0 !important;
}
@media (min-width: 768px) {
  header.main-header .nav-item .dropdown-menu {
    overflow-y: inherit !important;
  }
}
@media (min-width: 992px) {
  header.main-header .nav-item .dropdown-menu {
    height:70vh;
    border-radius: 15px !important;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
  }
}

/* ── ACCORDION / DROPDOWN SECTION HEADERS ── */
header.main-header .accordion-header {
  color: #E39482 !important;
  font-size: 0.875rem !important;
  padding-left: 50px !important;
  font-family: Poppins-Bold, sans-serif !important;
  padding-top: 10px !important;
  position: relative !important;
  margin: 20px 0 7px 0 !important;
}

header.main-header .accordion-header .d-icon {
  width: 36px !important;
  height: 36px !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  background: #E39482 !important;
  border-radius: 5px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

header.main-header .accordion-header .d-icon img {
  max-width: 22px !important;
  max-height: 22px !important;
}

header.main-header .accordion-header strong {
  float: right !important;
  display: inline !important;
  font-size: 1.375rem !important;
  font-family: Poppins-Regular, sans-serif !important;
}
@media (min-width: 768px) {
  header.main-header .accordion-header strong {
    display: none !important;
  }
}

/* ── DROPDOWN LIST ITEMS ── */
header.main-header .dropdown-menu ul {
  padding-left: 50px !important;
  list-style: none !important;
  margin: 0 !important;
}

header.main-header .dropdown-menu ul li {
  padding-bottom: 5px !important;
  font-size: 0.875rem !important;
}

header.main-header .dropdown-menu ul li a {
  font-size: 0.875rem !important;
  color: #000 !important;
  text-decoration: none !important;
}

header.main-header .dropdown-menu ul li a:hover {
  color: #E39482 !important;
}

/* ── DROPDOWN SIZE OVERRIDES ── */
@media (min-width: 992px) {
  .custom-dd {
    min-width: 200px !important;
    height: auto !important;
  }
  .custom-dd-2 {
    width: 40vw !important;
    left: inherit !important;
    right: 0 !important;
    height: auto !important;
  }
}

/* ── MOBILE ACCORDION (< 992px) ── */
@media (max-width: 991px) {
  header.main-header .navbar-collapse {
    background: #fff !important;
    padding: 20px 0 !important;
    max-height: 80vh !important; /* Allow scrolling within the menu */
    overflow-y: auto !important;
    border-top: 1px solid #eee !important;
  }

  header.main-header .nav-item {
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 10px 20px !important;
  }

  header.main-header .nav-item .nav-link {
    font-family: 'Poppins-SemiBold', sans-serif !important;
    font-size: 1.125rem !important;
    padding: 10px 0 !important;
  }

  header.main-header .acc-content {
    display: none; /* Controlled by JS */
    background: #fdfdfd !important;
    padding: 10px 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  header.main-header .accordion-header {
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    padding: 15px 15px 15px 60px !important;
    margin: 10px 0 !important;
    cursor: pointer !important;
    color: #E39482 !important;
    font-size: 1rem !important;
  }

  header.main-header .accordion-header .d-icon {
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #E39482 !important;
  }

  header.main-header .accordion-content {
    display: none; /* Controlled by JS */
    padding-left: 20px !important;
    border-left: 2px solid #E39482 !important;
    margin-left: 30px !important;
  }

  header.main-header .accordion-content li a {
    padding: 8px 0 !important;
    display: block !important;
    font-size: 0.95rem !important;
  }

  header.main-header .accordion-header strong {
    color: #E39482 !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    margin-top: -4px !important;
  }
}

/* ── SCOPED UTILITY OVERRIDES ── */
header.main-header .rounded-xl {
  border-radius: 1rem !important;
}
header.main-header .overflow-y-auto {
  overflow-y: auto !important;
}
header.main-header .shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}
@media (min-width: 992px) {
  header.main-header .mt-lg-2 {
    margin-top: .5rem !important;
  }
}
header.main-header .poppinsSemiBold {
  font-family: Poppins-SemiBold, sans-serif !important;
}
header.main-header .secondaryColor {
  color: #E39482 !important;
}
header.main-header .heading-6 {
  padding-left: 50px !important;
  font-size: 1rem !important;
}
header.main-header .heading-7 {
  font-size: 0.875rem !important;
}
header.main-header .text-black {
  color: #000 !important;
}
header.main-header .border-0 {
  border: 0 !important;
}