/*
Theme Name: Locksmith Alebhar
Theme URI: https://locksmith.qa
Author: Locksmith Alebhar
Description: Bilingual (English and Arabic RTL) locksmith theme with dark and light modes, icon dropdown menu with Customizer links, product enquiry catalog and Polylang support. No jQuery, no page builder.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: locksmith-alebhar
*/
:root{--bg:#0d0e10;--bg2:#14161b;--bg3:#1b1d23;--ink:#fff;--mute:#aeb3bd;--soft:#cfd3db;--gold:#29a0ff;--on:#04121f;--line:#2b2c31;--line2:#3a3d46;--acr:41,160,255;--bgr:13,14,16;--bg2r:20,22,27;--g1:#9fd6ff;--g2:#1273c4;--cend:#0a1c2e;--ringl:rgba(255,255,255,.12);color-scheme:dark}
:root[data-theme=light]{--bg:#f6f8fb;--bg2:#fff;--bg3:#eef2f7;--ink:#10151c;--mute:#455062;--soft:#2a3442;--gold:#0b6cc2;--on:#fff;--line:#d5dde8;--line2:#b7c2d1;--acr:11,108,194;--bgr:246,248,251;--bg2r:255,255,255;--g1:#4aa6ee;--g2:#084b8c;--cend:#dcebfa;--ringl:rgba(0,0,0,.1);color-scheme:light}

*{box-sizing:border-box}html,body{margin:0}html{scroll-behavior:smooth;scroll-padding-top:74px}
body{background:var(--bg);color:var(--ink);font:17px/1.65 Manrope,system-ui,sans-serif}
h1,h2,h3,.num{font-family:'Oswald','Arial Narrow',sans-serif;text-transform:uppercase;line-height:1.02;margin:0}
img{display:block;max-width:100%}a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(var(--bgr),.94);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
header img{height:38px;width:auto}nav a{margin-inline-start:22px;text-decoration:none;font-size:15px;color:var(--mute)}nav a:hover{color:var(--gold)}
.btn{display:inline-block;background:var(--gold);color:var(--on);font-weight:500;text-decoration:none;padding:13px 26px;border:1px solid var(--gold)}
.btn.o{background:none;color:var(--ink);border-color:var(--line2);margin-inline-start:10px}
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;background:#000 center/cover}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--bgr),.55),rgba(var(--bgr),.35) 35%,var(--bg))}
.hero .wrap{position:relative;padding-bottom:64px}
.hero h1{font-size:clamp(56px,11vw,132px);font-weight:700;max-width:820px}.hero h1 em{font-style:normal;color:var(--gold);display:block}
.hero p{max-width:520px;color:var(--soft);margin:20px 0 30px}
.stats{background:var(--bg2);border-block:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stats div{padding:26px 18px;border-inline-start:1px solid var(--line)}.stats div:first-child{border-inline-start:0}
.num{font-size:46px;color:var(--gold);font-weight:700;display:block}.stats span:last-child{color:var(--mute);font-size:15px}
section{padding:84px 0}h2{font-size:clamp(38px,6vw,64px);font-weight:700;margin-bottom:14px}
.lead{color:var(--mute);max-width:600px;margin:0 0 38px}.alt{background:var(--bg2)}
.about{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.about img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;border:1px solid var(--line)}
.trust{list-style:none;padding:0;margin:24px 0 0}.trust li{padding:12px 0;border-top:1px solid var(--line)}.trust b{color:var(--gold);font-weight:500}
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sc{background:var(--bg3);border:1px solid var(--line)}.sc img{width:100%;aspect-ratio:4/3;object-fit:cover}
.sc div{padding:20px}.sc h3{font-size:27px;color:var(--gold);margin-bottom:8px}.sc p{margin:0;color:var(--mute);font-size:15.5px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.tab{background:none;border:1px solid var(--line);padding:10px 20px;font-family:'Oswald',sans-serif;font-size:21px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.tab.on{background:var(--gold);color:var(--on);border-color:var(--gold)}
.panel{display:none}.panel.on{display:block}
.phead{display:grid;grid-template-columns:1fr 1.3fr;gap:30px;align-items:end;margin-bottom:26px}
.phead h3{font-size:44px}.tag{color:var(--gold);margin:6px 0 0}.phead>p{margin:0;color:var(--mute)}
.wgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.wc{margin:0;background:#a8a8ac;background:radial-gradient(circle at 50% 42%,#f4f6f9,#a9b0bb);padding:10px 10px 0}
.wc img{width:100%;aspect-ratio:1;object-fit:contain}
.wc figcaption{color:#111;font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:19px;padding:6px 0 10px;line-height:1.1}
.wc small{display:block;font:400 12px Manrope,sans-serif;color:#444;text-transform:none}
.life,.gal{display:grid;gap:12px;margin-top:14px}.life{grid-template-columns:repeat(3,1fr)}
.zoom{border:0;padding:0;background:#000;overflow:hidden;display:block}
.zoom img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split.r>:first-child{order:2}
.mosaic{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px}.mosaic .zoom img{aspect-ratio:3/4}
.mosaic .zoom:first-child{grid-row:span 1}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:14px}.ba figure{margin:0;position:relative}
.ba figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ba figcaption{position:absolute;inset-inline-start:0;top:0;background:var(--gold);color:var(--on);font:600 15px 'Oswald',sans-serif;text-transform:uppercase;padding:4px 14px;letter-spacing:.05em}
.ba figure.b figcaption{background:var(--bg3);color:var(--ink)}
.warr{display:flex;gap:14px;margin-top:22px}.warr div{flex:1;border:1px solid var(--gold);padding:18px}.warr span{color:var(--mute);font-size:15px;display:block;line-height:1.4}
.brandline{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:20px;color:var(--gold);font:600 24px 'Oswald',sans-serif;text-transform:uppercase}
.gal{grid-template-columns:repeat(4,1fr)}.gal .zoom img{aspect-ratio:3/4}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.why div{background:var(--bg);padding:26px}.why h3{font-size:25px;margin:6px 0 8px}.why p{margin:0;color:var(--mute);font-size:15.5px}
.contact{text-align:center;background:linear-gradient(180deg,var(--bg),var(--cend))}.contact .lead{margin-inline:auto}
.tel{font:700 clamp(50px,11vw,110px)/1 'Oswald',sans-serif;color:var(--gold);display:block;text-decoration:none;margin:6px 0 26px}
footer{padding:28px 0;text-align:center;color:var(--mute);font-size:14px;border-top:1px solid var(--line)}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:50;display:none;align-items:center;justify-content:center;padding:20px}.lb.on{display:flex}
.lb img{max-height:90vh;object-fit:contain}
@media (max-width:860px){
section{padding:56px 0}
.stats .wrap{grid-template-columns:1fr 1fr}.stats div:nth-child(3){border-inline-start:0}
.about,.split,.phead{grid-template-columns:1fr;gap:26px}.split.r>:first-child{order:0}
.svc{grid-template-columns:1fr 1fr}.wgrid{grid-template-columns:repeat(3,1fr)}.life{grid-template-columns:1fr 1fr 1fr}
.gal{grid-template-columns:1fr 1fr}.why{grid-template-columns:1fr}.warr{flex-direction:column}
.hero{min-height:80vh}.btn.o{margin:10px 0 0}}
@media (max-width:520px){.svc{grid-template-columns:1fr}.ba{grid-template-columns:1fr}.mosaic{grid-template-columns:1fr 1fr}.mosaic .zoom:first-child{grid-column:span 2}.mosaic .zoom:first-child img{aspect-ratio:4/3}.tab{font-size:18px;padding:8px 14px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ============================================================
   PERFECTLY BALANCED HERO SECTION & IMAGE SHOWCASE
============================================================ */

.hero {
  position: relative;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Screen height ko ek fold mein balance rakhein */
  min-height: calc(100vh - 70px);
  padding: 40px 0 20px;
}

/* Seamless Background Glow (Ajeeb Horizontal Bands Khatam) */
.hbg {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 75% 50%, rgba(var(--acr), .22) 0%, rgba(13, 59, 102, .15) 35%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--bgr), .4) 0%, rgba(var(--bgr), .85) 100%);
  pointer-events: none;
}

/* Grid Layout (55% Text / 45% Image Stage) */
.hero .hgrid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  width: 100%;
}

/* Left Content */
.hero .htxt {
  max-width: 620px;
}

/* Pill Badge */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(var(--acr), .4);
  color: var(--gold);
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 18px;
  backdrop-filter: blur(8px);
  background: rgba(var(--acr), .08);
}

/* Main Heading (Compact & High Contrast) */
.hero .htxt h1 {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(38px, 4.2vw, 56px); /* Scaled down from 118px */
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.hero .htxt h1 em {
  font-style: normal;
  display: block;
  margin-top: 6px;
  background: linear-gradient(90deg, #8ad0ff 0%, var(--gold) 50%, #0066cc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Subtitle Paragraph */
.hero .htxt p {
  color: var(--mute);
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 520px;
  margin: 16px 0 24px;
}

/* CTA Buttons */
.hbtn {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.hbtn .btn {
  padding: 13px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  transition: all .2s ease;
}
.hbtn .btn:not(.o) {
  box-shadow: 0 6px 20px -4px rgba(var(--acr), .5);
}
.hbtn .btn.o {
  margin: 0;
  background: rgba(var(--bg2r), .5);
  border-color: var(--line2);
}
.hbtn .btn:hover {
  transform: translateY(-2px);
}

/* Trust Chips */
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 22px 0 0;
}
.chips li {
  font-size: 13px;
  font-weight: 500;
  color: var(--soft);
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: rgba(var(--bg2r), .7);
  border-radius: 6px;
  backdrop-filter: blur(6px);
}

/* ============================================================
   RIGHT SIDE - MODERN IMAGE SHOWCASE STAGE
============================================================ */
.stage {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer Rotating Dashed Ring */
.ring {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  border: 1.5px dashed rgba(var(--acr), .45);
  animation: spin 55s linear infinite;
  pointer-events: none;
}

/* Inner Glowing Circle Frame */
.ring.r2 {
  inset: 10%;
  border: 1px solid rgba(255, 255, 255, .1);
  background: radial-gradient(circle, rgba(var(--acr), .14) 0%, rgba(var(--bgr), .6) 75%);
  box-shadow: inset 0 0 35px rgba(var(--acr), .15), 0 20px 50px rgba(0, 0, 0, .5);
  animation: none;
}

/* Slide / Real Image / SVG Element */
.slide {
  position: absolute;
  width: 72%;
  height: 72%;
  object-fit: contain;
  opacity: 0;
  transform: scale(.88) translateY(10px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
  filter: drop-shadow(0 25px 35px rgba(0, 0, 0, .65));
}
.slide.on {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Floating Glassmorphism Caption Card */
.cap {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  background: rgba(var(--bg2r), .88);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 10px 22px;
  min-width: 240px;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, .5);
  backdrop-filter: blur(12px);
  z-index: 5;
}
.cap b {
  display: block;
  font: 700 18px 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gold);
}
.cap span {
  font-size: 13px;
  color: var(--mute);
}

/* Dots indicator */
.dots {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-top: 8px;
}
.dots i {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--line2);
  transition: background .3s ease;
}
.dots i.on {
  background: var(--gold);
  width: 24px;
}

/* Animations */
@keyframes spin {
  100% { transform: rotate(360deg); }
}

/* Responsive (Laptops & Mobiles) */
@media (max-width: 992px) {
  .hero {
    min-height: auto;
    padding: 40px 0 50px;
  }
  .hero .hgrid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .hero .htxt {
    max-width: 100%;
  }
  .hero .htxt p {
    margin-inline: auto;
  }
  .hbtn, .chips {
    justify-content: center;
  }
  .stage {
    max-width: 340px;
    order: 2;
  }
}

/* theme additions */
.skip{position:absolute;inset-inline-start:-999px;top:0;background:var(--gold);color:var(--on);padding:10px 16px;z-index:100}.skip:focus{inset-inline-start:0}
header .wrap{gap:14px}.logo{display:block;background:#fff;border-radius:6px;padding:4px 10px;line-height:0;flex:none}header .logo img{height:34px;width:auto;max-width:none}

/* ============================================================
   LOCKSMITH ALEBHAR - FINAL HEADER, LOGO & NAV STYLING
============================================================ */

/* 1. Header Container */
header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 100;
  background: rgba(var(--bgr), .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  position: relative;
  gap: 16px;
}

/* 2. Logo (Balanced & Clean) */
.logo {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  padding: 5px 12px;
  border-radius: 8px;
  line-height: 0;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: transform .2s ease;
}
.logo:hover {
  transform: scale(1.02);
}
header .logo img {
  height: 28px; /* Logo ka size normal aur professional kar diya */
  width: auto;
  max-width: none;
  display: block;
}

/* 3. Navigation Bar (Centered & Equal Spacing) */
.nav {
  flex: 1;
  display: flex;
  justify-content: center; /* Menu ko bilkul header ke darmian center karta hai */
  margin: 0;
}
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px; /* Tamam menu items ke darmiyan equal gap */
}
.nav-list > li {
  position: relative;
}
.nav-list > li.has-dd.mega {
  position: static;
}

/* Menu Links */
.top, .dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  color: var(--soft);
  font: 600 14px/1.2 Manrope, system-ui, sans-serif;
  padding: 9px 12px; /* Equal padding har button par */
  text-decoration: none;
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
  transition: all .2s ease;
}
.top:hover, .dd-btn:hover, .has-dd.open > .dd-btn {
  color: var(--gold);
  background: rgba(var(--acr), .08);
}
.dd-btn .ic-chev {
  transition: transform .25s ease;
  width: 14px;
  height: 14px;
}
.has-dd.open > .dd-btn .ic-chev {
  transform: rotate(180deg);
}

/* 4. Tools Section (Right Side Buttons) */
.tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-inline-start: 0;
}

/* Dark / Light Mode Button (Modern Circle) */
.theme-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%; /* Gol circle button */
  background: var(--bg2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--soft);
  padding: 0;
  transition: all .2s ease;
}
.theme-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(var(--acr), .1);
}
.theme-btn .ic {
  width: 19px;
  height: 19px;
}
.theme-btn .ic-moon { display: none; }
:root[data-theme=light] .theme-btn .ic-sun { display: none; }
:root[data-theme=light] .theme-btn .ic-moon { display: block; }

/* Call Now Button (Bank-grade Rounded Button) */
.btn.call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #ffffff;
  font: 600 14.5px/1 Manrope, system-ui, sans-serif;
  padding: 11px 20px;
  border-radius: 8px; /* Modern rounded corners */
  text-decoration: none;
  border: 1px solid var(--gold);
  box-shadow: 0 4px 14px rgba(var(--acr), .35);
  transition: all .2s ease;
  white-space: nowrap;
}
.btn.call:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(var(--acr), .5);
  filter: brightness(1.08);
}
.btn.call .ic {
  width: 16px;
  height: 16px;
}

/* Desktop par burger button lazmi hide rahe */
.burger {
  display: none;
}

/* 5. Dropdown & Mega Menu */
.dd {
  display: none;
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 4px);
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.35);
  padding: 10px;
  z-index: 60;
}
.dd-s {
  min-width: 280px;
}
.has-dd.open > .dd {
  display: block;
}
@media (hover: hover) and (min-width: 861px) {
  .has-dd:hover > .dd {
    display: block;
  }
}

.mega > .dd {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  width: min(1140px, calc(100vw - 32px));
  max-height: calc(100vh - 84px);
  overflow-y: auto;
  padding: 20px;
  border-radius: 0 0 12px 12px;
  border-top: 2px solid var(--gold);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, .4);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1080px) and (min-width: 861px) {
  .mega-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mg {
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
}
.mg-t {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 14px/1.2 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gold);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.mg-t .ic {
  width: 17px;
  height: 17px;
  color: var(--gold);
  flex-shrink: 0;
}
.mg ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dd a, .dd .mi {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  border-radius: 5px;
  transition: all .15s ease;
}
.dd a:hover {
  background: rgba(var(--acr), .12);
  color: var(--gold);
}
.dd .mi {
  color: var(--mute);
}
.dd a .ic, .dd .mi .ic {
  width: 16px;
  height: 16px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 1px;
}
.dd span {
  word-break: normal;
  overflow-wrap: break-word;
}
html[lang^=ar] .mg-t {
  font-family: Cairo, Tahoma, sans-serif;
  font-size: 14.5px;
  letter-spacing: 0;
}

/* 6. Mobile Responsiveness */
@media (max-width: 860px) {
  .burger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--line);
    width: 40px;
    height: 40px;
    border-radius: 6px;
    color: var(--soft);
  }
  .btn.call span {
    display: none;
  }
  .btn.call {
    padding: 10px 14px;
  }

  .nav {
    position: absolute;
    inset-inline: 0;
    top: 70px;
    background: var(--bg2);
    border-bottom: 1px solid var(--line);
    display: none;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    margin: 0;
    padding: 12px 16px 30px;
    box-shadow: 0 20px 30px rgba(0,0,0,.5);
  }
  .nav.open {
    display: block;
  }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-list > li {
    border-top: 1px solid var(--line);
  }
  .nav-list > li:first-child {
    border-top: 0;
  }
  .top, .dd-btn {
    width: 100%;
    justify-content: space-between;
    padding: 14px 6px;
    font-size: 16px;
  }
  .dd, .mega > .dd {
    position: static;
    transform: none;
    width: 100%;
    max-height: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 6px 0 16px;
    background: transparent;
    overflow: visible;
  }
  .mega-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .mg {
    background: var(--bg3);
    padding: 12px;
  }
}

/* --- MEGA MENU & NAV FIX --- */
.nav-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px}
.nav-list>li{position:relative}
.nav-list>li.has-dd.mega{position:static}
.top,.dd-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--soft);font:600 14.5px/1 Manrope,system-ui,sans-serif;padding:10px 14px;text-decoration:none;cursor:pointer;border-radius:4px;transition:all .2s ease}
.top:hover,.dd-btn:hover,.has-dd.open>.dd-btn{color:var(--gold);background:rgba(var(--acr),.08)}
.dd-btn .ic-chev{transition:transform .25s ease;width:16px;height:16px}
.has-dd.open>.dd-btn .ic-chev{transform:rotate(180deg)}

.dd{display:none;position:absolute;inset-inline-start:0;top:calc(100% + 2px);background:var(--bg2);border:1px solid var(--line);border-radius:8px;box-shadow:0 20px 40px -10px rgba(0,0,0,.35);padding:10px;z-index:60}
.dd-s{min-width:280px}
.has-dd.open>.dd{display:block}
@media (hover:hover) and (min-width:861px){.has-dd:hover>.dd{display:block}}

.mega>.dd{position:absolute;top:calc(100% + 1px);left:50%;transform:translateX(-50%);width:min(1140px,calc(100vw - 32px));max-height:calc(100vh - 84px);overflow-y:auto;padding:20px;border-radius:0 0 12px 12px;border-top:2px solid var(--gold);box-shadow:0 30px 60px -15px rgba(0,0,0,.4)}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1080px) and (min-width:861px){.mega-grid{grid-template-columns:repeat(2,1fr)}}

.mg{background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:14px 14px 10px;display:flex;flex-direction:column}
.mg-t{display:flex;align-items:center;gap:8px;font:700 14px/1.2 'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--gold);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.mg-t .ic{width:17px;height:17px;color:var(--gold);flex-shrink:0}
.mg ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}

.dd a,.dd .mi{display:flex;align-items:flex-start;gap:8px;padding:6px 8px;font-size:13.5px;line-height:1.35;color:var(--ink);text-decoration:none;border-radius:5px;transition:all .15s ease}
.dd a:hover{background:rgba(var(--acr),.12);color:var(--gold)}
.dd .mi{color:var(--mute)}
.dd a .ic,.dd .mi .ic{width:16px;height:16px;color:var(--gold);fle
.tools{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.lang{display:flex}.lang a{padding:6px 10px;text-decoration:none;font-size:14px;font-weight:600;border:1px solid var(--line)}.lang a[aria-current]{background:var(--gold);color:var(--on);border-color:var(--gold)}
.theme-btn,.burger{background:none;border:1px solid var(--line);width:40px;height:40px;display:grid;place-items:center;border-radius:2px}
.theme-btn .ic-moon{display:none}:root[data-theme=light] .theme-btn .ic-sun{display:none}:root[data-theme=light] .theme-btn .ic-moon{display:block}
.burger{display:none}.btn.call{padding:9px 16px;display:inline-flex;gap:8px;align-items:center}
.ph{background:linear-gradient(135deg,var(--bg3),var(--bg2));border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:14px;text-align:center;padding:10px;width:100%}.ph.a{aspect-ratio:4/3}.ph.b{aspect-ratio:3/4}
.slide{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.wi{aspect-ratio:1;display:grid;place-items:center}.wi .ic{width:46%;height:auto;aspect-ratio:1;color:#1f3550;stroke-width:1.5}
.mq{direction:ltr}.hero .hgrid{padding-inline:22px}
.ticks{list-style:none;padding:0;margin:20px 0 0}.ticks li{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}.ticks .ic{color:var(--gold)}
.chipl{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0 0 20px}.chipl li{font-size:14px;color:var(--soft);padding:7px 14px;border:1px solid var(--line2);background:var(--bg2)}
.more{color:var(--gold);font-weight:600}.sub{font-size:28px;margin:44px 0 14px}
.steps{list-style:none;padding:0;margin:0;counter-reset:s}
details{border-top:1px solid var(--line);padding:2px 0}details:last-of-type{border-bottom:1px solid var(--line)}summary{cursor:pointer;font-weight:600;padding:16px 0}details p{color:var(--mute);margin:0 0 16px}.narrow{max-width:820px}
.content{font-size:17px}.content h1{font-size:clamp(34px,5vw,56px);margin-bottom:18px}.content img{height:auto}
.card{background:var(--bg3);border:1px solid var(--line);padding:20px}.card h3{font-size:27px;color:var(--gold);margin-bottom:8px}.card p{margin:0 0 12px;color:var(--mute);font-size:15.5px}.card img{width:100%;margin-bottom:12px}.card h3 a{text-decoration:none}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.pdp{align-items:start}.pdp img{width:100%}
footer{padding:36px 0 96px}footer .soc a,footer .fl a{margin:0 8px;text-decoration:none}footer a:hover{color:var(--gold)}footer p{margin:0 0 8px}
.wa-fab{position:fixed;inset-inline-end:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;z-index:25;box-shadow:0 8px 24px rgba(0,0,0,.4)}.wa-fab .ic{width:28px;height:28px}
:root[data-theme=light] .hbg{filter:none;opacity:.5}:root[data-theme=light] .hero:after{background:radial-gradient(60% 70% at 78% 45%,rgba(var(--acr),.16),transparent 70%),linear-gradient(180deg,rgba(var(--bgr),.5),rgba(var(--bgr),.1) 40%,var(--bg))}
:root[data-theme=light] .pill{background:rgba(255,255,255,.7)}:root[data-theme=light] .chips li{background:rgba(255,255,255,.8);color:var(--soft)}
html[lang^=ar] body{font-family:Cairo,Tahoma,system-ui,sans-serif}
html[lang^=ar] h1,html[lang^=ar] h2,html[lang^=ar] h3,html[lang^=ar] .num,html[lang^=ar] .tab,html[lang^=ar] .cap b,html[lang^=ar] .mg-t,html[lang^=ar] .wc figcaption,html[lang^=ar] .brandline,html[lang^=ar] .mq span,html[lang^=ar] .tel,html[lang^=ar] .ba figcaption{font-family:Cairo,Tahoma,sans-serif;text-transform:none;letter-spacing:0}
html[lang^=ar] .hero .htxt h1,html[lang^=ar] h2{line-height:1.3}html[lang^=ar] .hero .htxt h1{font-size:clamp(40px,6.4vw,84px)}
.hero .htxt h1{font-size:clamp(44px,6.4vw,92px)}
@media (max-width:860px){
  .burger{display:grid}
  .btn.call span{display:none}
  .btn.call{padding:9px 12px}
  .nav{position:absolute;inset-inline:0;top:64px;background:var(--bg2);border-bottom:1px solid var(--line);display:none;max-height:calc(100vh - 64px);overflow-y:auto;margin:0;padding:12px 16px 30px}
  .nav.open{display:block}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list>li{border-top:1px solid var(--line)}
  .nav-list>li:first-child{border-top:0}
  .top,.dd-btn{width:100%;justify-content:space-between;padding:14px 6px;font-size:16px;border-radius:0}
  .dd,.mega>.dd{position:static;transform:none;width:100%;max-height:none;box-shadow:none;border:0;border-radius:0;padding:6px 0 16px;background:transparent;overflow:visible}
  .mega-grid{grid-template-columns:1fr;gap:12px}
  .mg{background:var(--bg3);padding:12px}
  .mg-t{font-size:15px}
  .dd a,.dd .mi{padding:8px;font-size:14.5px}
  .cards{grid-template-columns:1fr 1fr}
  .hero .htxt h1{font-size:clamp(44px,13vw,80px)}
}
@media (max-width:520px){.cards{grid-template-columns:1fr}.tools{gap:5px}.lang a{padding:6px 7px}header .logo img{height:26px}}
.screen-reader-text{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}