/* =========================================
   Revamp — World‑class Corporate UI Kit
   Scope: Visual overhaul without changing markup
   ========================================= */

/* Design tokens */
:root{
  --brand: #E4B34E;      /* Gold accent */
  --brand-600: #e4b34e;
  --brand-700: #d9a640;
  --ink-900:#0f172a;     /* Deep text */
  --ink-800:#1f2937;
  --ink-700:#334155;
  --muted:#6b7280;       /* Muted text */
  --surface:#ffffff;     /* Card surface */
  --bg-soft:#F7F8FB;     /* Page background */
  --ring: 0 0 0 3px rgba(228,179,78,.35);
  --shadow-sm:0 8px 20px rgba(0,0,0,.06);
  --shadow-md:0 16px 40px rgba(0,0,0,.12);
  --radius:16px;
}

/* Typography & base */
html{scroll-behavior:smooth}
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
[dir="rtl"] body{ font-family: "Noto Sans Arabic","Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:10px }

/* Header — premium glass with subtle motion */
header.header{position:sticky; top:0; z-index:1030; background:linear-gradient(180deg, rgba(35,38,47,.96) 0%, rgba(35,38,47,.90) 60%, rgba(35,38,47,.88) 100%)!important;border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:saturate(140%) blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
header.header.scrolled{box-shadow:0 12px 28px rgba(0,0,0,.12)}
/* Ensure brand at extreme edge: LTR left, RTL right */
.header .header-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.header .navbar-brand{ margin:0 !important }
html[dir="ltr"] .header .navbar-brand{ order: 0 }
html[dir="ltr"] .header .primary-nav{ order: 1; margin-inline:auto }
html[dir="ltr"] .header .header-actions{ order: 2 }
html[dir="rtl"] .header .navbar-brand{ order: 2 }
html[dir="rtl"] .header .primary-nav{ order: 1; margin-inline:auto }
html[dir="rtl"] .header .header-actions{ order: 0 }
/* Top progress indicator */
.progress-track{position:fixed; top:0; left:0; right:0; height:3px; background:rgba(228,179,78,.12); z-index:1040; pointer-events:none}
.progress-bar{height:100%; width:0; background:linear-gradient(90deg,var(--brand-600),var(--brand-700)); box-shadow:0 0 12px rgba(228,179,78,.45); pointer-events:none}
.navbar-nav{position:relative; align-items:center; gap:6px}
.navbar-nav li a{position:relative; border-radius:12px; font-weight:300; letter-spacing:.2px; padding:10px 14px; color:#EDEFF6; transition: color .18s ease, background .18s ease, box-shadow .18s ease}
.navbar-nav li a:hover,.navbar-nav li.current-menu-item>a,.navbar-nav li a.active{color:var(--brand);background:rgba(255,255,255,.06); box-shadow:0 8px 20px rgba(228,179,78,.10) inset}
/* Remove duplicate underline: rely on magic line only */
.navbar-nav li a:after{ display:none !important }
.navbar-nav li a.active:after{ display:none !important }
/* Animated active indicator (magic line) */
.nav-active-indicator{position:absolute; bottom:4px; height:3px; width:0; left:0; background:linear-gradient(90deg,var(--brand-600),var(--brand-700)); border-radius:3px; box-shadow:0 2px 12px rgba(228,179,78,.45); transition: left .20s ease, right .20s ease, width .20s ease, opacity .2s ease; opacity:.9; pointer-events:none; will-change: left, right, width}
html[dir="rtl"] .nav-active-indicator{ left:auto; right:0 }

/* Mobile fullscreen overlay menu (no markup change) */
body.nav-open{ overflow:hidden }
@media (max-width: 991.98px){
  .navbar-collapse{ position:fixed; inset:0; background:linear-gradient(180deg, rgba(35,38,47,.98), rgba(24,27,34,.98)); padding:80px 24px 40px; display:none; flex-direction:column; justify-content:center; align-items:center; opacity:0; transform:translateY(10px); transition:opacity .2s ease, transform .2s ease; z-index: 1000 }
  .navbar-collapse.show{ display:flex; opacity:1; transform:translateY(0) }
  .navbar-collapse .navbar-nav{ gap:10px }
  .navbar-collapse .navbar-nav li a{ font-size:1.25rem; padding:12px 18px }
  .language_btn{ margin-top:14px }
}

/* Admin bar offsets for fixed header/progress */
@media (min-width: 783px){
  body.admin-bar header.header{ top: 32px !important; }
  body.admin-bar .progress-track{ top: 32px !important; }
}
@media (max-width: 782px){
  body.admin-bar header.header{ top: 46px !important; }
  body.admin-bar .progress-track{ top: 46px !important; }
}

/* Minimal utility classes to ease Bootstrap -> Tailwind transition */
.container{ width:100%; margin-left:auto; margin-right:auto; padding-left:12px; padding-right:12px; max-width:1200px }
.row{ display:flex; flex-wrap:wrap; margin-left:-12px; margin-right:-12px }
[class*="col-"]{ padding-left:12px; padding-right:12px }
.d-flex{ display:flex!important }
.d-none{ display:none!important }
.d-lg-flex{ display:none!important }
.d-lg-none{ display:block!important }
@media (min-width:992px){
  .d-lg-flex{ display:flex!important }
  .d-lg-none{ display:none!important }
}
.justify-content-between{ justify-content:space-between!important }
.align-items-center{ align-items:center!important }

/* Desktop Mega Menu */
.mega-nav .navbar-nav > li{ position:relative }
.mega-nav .navbar-nav > li:hover > .mega-panel{ opacity:1; visibility:visible; transform: translateY(0) }
.mega-panel{ position:absolute; left:0; right:0; top: calc(100% + 10px); background:#fff; border-radius:14px; border:1px solid #e6ebf2; box-shadow: 0 20px 60px rgba(0,0,0,.12); padding:22px; display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:18px; opacity:0; visibility:hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 1000 }
.mega-panel h6{ margin:0 0 8px; font-weight:800; color:var(--ink-900) }
.mega-panel a{ color: var(--ink-800) }
.mega-panel a:hover{ color: var(--brand-600) }
@media (max-width: 1199.98px){ .mega-panel{ position:static; display:none } }

/* Buttons */
.btn,.readmore,.slider_btn,button.carousel-control-prev,button.carousel-control-next{
  border-radius:12px; border:0; background:linear-gradient(180deg,var(--brand-600),var(--brand-700)); color:#0e1015; box-shadow:0 10px 24px rgba(228,179,78,.28); font-weight:700
}
.btn:hover,.readmore:hover,.slider_btn:hover,button.carousel-control-prev:hover,button.carousel-control-next:hover{ filter:brightness(1.03); transform:translateY(-1px) }

/* Cards */
.news_box,.product_box,.solution_box{ background:linear-gradient(180deg,#fff,#fbfbfd); border:1px solid #e6ebf2; border-radius:var(--radius); box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease }
.news_box:hover,.product_box:hover,.solution_box:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#dbe2ea }
.product_box a{ color:var(--ink-900) }
.product_box a:hover{ color:var(--brand) }

/* Sections */
section[id]{ scroll-margin-top: 96px }
@media (max-width: 991.98px){ section[id]{ scroll-margin-top: 76px } }
.section_heading{ font-size:2.5rem; font-weight:800; letter-spacing:.2px; color:var(--ink-900) }
.section_heading:after{ content:""; display:block; width:72px; height:4px; background:linear-gradient(90deg,var(--brand-600),rgba(228,179,78,.35)); margin-top:12px; border-radius:2px }

/* Hero (cinematic) */
.hero_cinematic{ position:relative; min-height:84vh; display:grid; align-items:center }
.hero_media{ position:absolute; inset:0; z-index:0 }
.hero_video,.hero_image,.hero_fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hero_fallback{ background: radial-gradient(80% 60% at 70% 20%, rgba(228,179,78,.14), transparent 60%), linear-gradient(180deg, #0f172a, #0b1220) }
.hero_overlay{ position:absolute; inset:0; background: radial-gradient(40% 40% at 65% 25%, rgba(0,0,0,.25), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65)) }
.hero_content{ position:relative; z-index:1; color:#fff; padding: 100px 0 60px }
.hero_title{ font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; letter-spacing:.2px }
.hero_subtitle{ font-size: clamp(1rem, 2vw, 1.25rem); color: rgba(255,255,255,.9) }
.hero_cta{ background:linear-gradient(180deg,var(--brand-600),var(--brand-700)); color:#111827; border-radius:14px; padding:.9rem 1.4rem; box-shadow:0 14px 36px rgba(228,179,78,.28) }
.hero_cta:hover{ transform: translateY(-1px); filter:brightness(1.03) }

/* Solutions carousel (with graceful fallback) */
.solution_carousel{ border:1px solid rgba(31,42,55,.15); border-radius:14px; overflow:hidden }
.solution_box{ border:1px solid rgba(31,42,55,.18); border-radius:18px; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease }
.solution_box .coverimage{ transition: transform .45s ease, opacity .35s ease, filter .35s ease }
.solution_box:hover{ box-shadow:0 18px 46px rgba(0,0,0,.14) }
.solution_box:hover .coverimage{ transform:scale(1.05); opacity:1; filter:saturate(115%) }
.solution_content a{ box-shadow:0 10px 24px rgba(228,179,78,.25) }
.solution_carousel:not(.owl-loaded){ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px }
.solution_carousel:not(.owl-loaded) .item{ min-width: clamp(260px, 45vw, 360px); scroll-snap-align:start }

/* Footer */
.footer{ background: radial-gradient(60% 80% at 20% 0%, rgba(255,255,255,.06), transparent 60%), linear-gradient(180deg, #23262f, #181b22) !important; border-top:1px solid rgba(255,255,255,.06) }
.footer p{ color:rgba(255,255,255,.9)!important }

/* Accessibility & motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important }
}

/* Utilities */
.hover-rise{ transition: transform .2s ease, box-shadow .2s ease }
.hover-rise:hover{ transform:translateY(-4px); box-shadow:0 18px 42px rgba(0,0,0,.12) }



/* ==============================
   Header options: active color gold + size + normal weight
   ============================== */
/* Use Bootstrap CSS variables to force active/hover colors */
header.header .navbar {
  --bs-navbar-color: #EDEFF6;                 /* normal text */
  --bs-navbar-hover-color: var(--brand-600);  /* hover color */
  --bs-navbar-active-color: var(--brand-600); /* active color */
}

/* Make menu items normal weight and adjust size */
header.header .navbar-nav .nav-link {
  font-weight: 300 !important; /* lighter weight */
  font-size: 0.8rem;           /* smaller size for desktop */
}

/* Desktop specific styling - smaller font */
@media (min-width: 768px) {
  header.header .navbar-nav .nav-link {
    font-size: 0.75rem !important; /* much smaller on desktop */
    font-weight: 300 !important;   /* light weight */
  }
}

/* Ensure active/selected stays gold regardless of Bootstrap defaults */
header.header .navbar-nav .nav-link.active,
header.header .navbar-nav .nav-link:active,
header.header .navbar-nav .show > .nav-link,
header.header .navbar-nav .nav-link[aria-current="page"],
header.header .navbar-nav li.current-menu-item > a {
  color: var(--brand-600) !important; /* gold */
  background: rgba(255,255,255,.06);
}

/* === Custom fixes per user feedback === */
/* 1) Make the mobile menu button rounded with visible background */
.header-toggle{ border-radius:12px !important; width:42px; height:42px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.35) }
.header-toggle:hover{ background:rgba(255,255,255,.12) }
.header-toggle .fa{ color:#fff }

/* 2) Push the logo to the extreme start (LTR: left, RTL: right) */
html[dir="ltr"] header.header .container{ padding-left: 0 }
html[dir="rtl"] header.header .container{ padding-right: 0 }
/* Keep inner spacing for the rest of the header */
header.header .header-bar{ padding-inline: 12px }