/* ============================================================
   Header — White default, Dark sticky on scroll
   ============================================================ */

/* --- CSS Reset (scoped) --- */
.header-area.header-1,
.header-area.header-1 *,
.header-area.header-1 *::before,
.header-area.header-1 *::after {
  box-sizing: border-box;
}

/* ==========================================================
   1. DEFAULT STATE — white (template original)
   ========================================================== */

.header-area.header-1 {
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* Logo swap: dark visible, white hidden */
.header-area.header-1 .site_logo .logo-dark {
  display: block;
}

.header-area.header-1 .site_logo .logo-white {
  display: none;
}

.header-area.header-1 .site_logo img {
  max-height: 55px;
  width: auto;
}

/* Override green icon circles with orange to match design */
.mega-menu-service-single .mega-menu-service-icon {
  background: linear-gradient(-45deg, rgba(230, 76, 41, 0.15) 0%, rgba(230, 76, 41, 0) 50%, rgba(230, 76, 41, 0.15) 100%) !important;
  color: #e64c29 !important;
}

.mega-menu-service-single:hover .mega-menu-service-icon {
  background: #e64c29 !important;
  color: #ffffff !important;
}

/* Default CTA icon — keep template dark circle */
.header-area.header-1 .tj-primary-btn .btn-icon {
  transition: background-color 0.4s ease;
}

/* ==========================================================
   2. STICKY STATE — solid dark #000
   ========================================================== */

@keyframes sv-slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.header-area.header-1.sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  width: calc(100% - 30px) !important;
  z-index: 999 !important;
  background: #000000 !important;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5), 0 1px 0 0 rgba(230, 76, 41, 0.45);
  border-bottom: 1px solid rgba(230, 76, 41, 0.35);
  animation: sv-slideDown 0.4s ease forwards;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.header-area.header-1.sticky .header-wrapper {
  background-color: transparent !important;
}

/* Logo swap: white visible, dark hidden */
.header-area.header-1.sticky .site_logo .logo-dark {
  display: none;
}

.header-area.header-1.sticky .site_logo .logo-white {
  display: block;
}

/* --- Nav links: white on dark --- */
.header-area.header-1.sticky .mainmenu > ul > li > a {
  color: #ffffff !important;
}

/* Hover / active: orange */
.header-area.header-1.sticky .mainmenu > ul > li:hover > a,
.header-area.header-1.sticky .mainmenu > ul > li.current-menu-item > a,
.header-area.header-1.sticky .mainmenu > ul > li.current-menu-ancestor > a {
  color: #e64c29 !important;
}

/* Dropdown arrow: white, orange on hover/active */
.header-area.header-1.sticky .mainmenu > ul > li.has-dropdown > a::after,
.header-area.header-1.sticky .mainmenu > ul > li.menu-item-has-children > a::after {
  color: #ffffff !important;
}

.header-area.header-1.sticky .mainmenu > ul > li.has-dropdown:hover > a::after,
.header-area.header-1.sticky .mainmenu > ul > li.menu-item-has-children:hover > a::after,
.header-area.header-1.sticky .mainmenu > ul > li.current-menu-ancestor > a::after,
.header-area.header-1.sticky .mainmenu > ul > li.current-menu-item > a::after {
  color: #e64c29 !important;
}

/* Active indicator dot: orange */
.header-area.header-1.sticky .mainmenu > ul > li.current-menu-item > a::before,
.header-area.header-1.sticky .mainmenu > ul > li.current-menu-ancestor > a::before,
.header-area.header-1.sticky .mainmenu > ul > li:hover > a::before {
  background-color: #e64c29 !important;
}

/* --- Hamburger bars: white --- */
.header-area.header-1.sticky .menu_bar.menu_offcanvas span {
  background-color: #ffffff !important;
}

.header-area.header-1.sticky .menu_bar.menu_offcanvas:hover span {
  background-color: #e64c29 !important;
}

/* --- CTA button icon: translucent white on dark --- */
.header-area.header-1.sticky .tj-primary-btn .btn-icon {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

.header-area.header-1.sticky .tj-primary-btn .btn-icon i {
  color: #ffffff !important;
}

.header-area.header-1.sticky .tj-primary-btn:hover .btn-icon {
  background-color: rgba(255, 255, 255, 0.25) !important;
}

/* ==========================================================
   3. DROPDOWN MENUS — dark (applied on sticky)
   ========================================================== */

/* Regular sub-menus */
.header-area.header-1.sticky .mainmenu ul > li > .sub-menu {
  background-color: #111111 !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

.header-area.header-1.sticky .mainmenu ul > li > .sub-menu > li > a {
  color: rgba(255, 255, 255, 0.85) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.header-area.header-1.sticky .mainmenu ul > li > .sub-menu > li > a::before {
  background-color: #e64c29 !important;
}

.header-area.header-1.sticky .mainmenu ul > li > .sub-menu > li:hover > a,
.header-area.header-1.sticky .mainmenu ul > li > .sub-menu > li.current-menu-item > a {
  color: #e64c29 !important;
}

/* Mega-menu service dropdown */
.header-area.header-1.sticky .mainmenu ul > li > .mega-menu-service {
  background-color: #111111 !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

.header-area.header-1.sticky .mainmenu ul > li > .mega-menu-service li a {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Service icon circles */
.header-area.header-1.sticky .mega-menu-service-single .mega-menu-service-icon {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #e64c29 !important;
}

.header-area.header-1.sticky .mega-menu-service-single:hover .mega-menu-service-icon {
  background-color: #e64c29 !important;
  color: #ffffff !important;
}

/* Service title text */
.header-area.header-1.sticky .mega-menu-service-single .mega-menu-service-title {
  color: rgba(255, 255, 255, 0.9) !important;
}

.header-area.header-1.sticky .mega-menu-service-single:hover .mega-menu-service-title {
  color: #ffffff !important;
}

/* Service nav arrows */
.header-area.header-1.sticky .mega-menu-service-single .mega-menu-service-nav {
  color: rgba(255, 255, 255, 0.4) !important;
}

.header-area.header-1.sticky .mega-menu-service-single:hover .mega-menu-service-nav {
  color: #e64c29 !important;
}

/* ==========================================================
   4. MOBILE (< lg)
   ========================================================== */

@media only screen and (max-width: 991px) {
  .header-area.header-1.sticky {
    background: #000000 !important;
    width: 100% !important;
  }

  .header-area.header-1.sticky .header-wrapper {
    background-color: transparent !important;
    padding: 12px 0 !important;
  }

  .header-area.header-1 .site_logo img {
    max-height: 44px;
  }

  .header-area.header-1 .menu_bar.mobile_menu_bar {
    background: #e64c29 !important;
  }

  .header-area.header-1 .menu_bar.mobile_menu_bar span {
    background-color: #ffffff !important;
  }
}

/* ==========================================================
   5. RTL SUPPORT
   ========================================================== */

html[dir="rtl"] .header-area.header-1.sticky .mainmenu ul > li > .sub-menu,
html[lang="ar"] .header-area.header-1.sticky .mainmenu ul > li > .sub-menu {
  text-align: start;
}

html[dir="rtl"] .header-area.header-1.sticky .mainmenu ul > li > .mega-menu-service,
html[lang="ar"] .header-area.header-1.sticky .mainmenu ul > li > .mega-menu-service {
  text-align: start;
}