/* =========================================================
   Riyadh Appliance Repair — Core Stylesheet
   Custom design system layered on top of Bootstrap 5 utilities.
   Bootstrap handles grid/flex/spacing scaffolding only.
   ========================================================= */

:root{
  --navy-900:#0B1E33;
  --navy-800:#122a45;
  --navy-700:#1b3a5c;
  --white:#ffffff;
  --gray-50:#f5f7f9;
  --gray-100:#eef1f4;
  --gray-200:#e1e7ec;
  --card-border:#bfe0da;
  --gray-500:#66738a;
  --text:#16233a;
  --accent:#12a594;
  --accent-dark:#0c7d70;
  --accent-light:#e4f6f3;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
  --shadow-soft:0 12px 30px -12px rgba(11,30,51,0.18);
  --font-en-head:'Outfit', sans-serif;
  --font-en-body:'Inter', sans-serif;
  --font-ar:'Tajawal', sans-serif;
  --container-max:1180px;
}

html{scroll-behavior:smooth;}
html[dir="rtl"]{scroll-behavior:smooth;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  font-family:var(--font-en-body);
  color:var(--text);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

html[lang="ar"] body,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] .btn,
html[lang="ar"] .navbar{
  font-family:var(--font-ar);
}

h1,h2,h3,h4,.display-font{
  font-family:var(--font-en-head);
  font-weight:700;
  color:var(--navy-900);
  letter-spacing:-0.01em;
}

.section-tag{
  display:inline-block;
  color:var(--accent-dark);
  font-weight:600;
  font-size:0.85rem;
  margin-bottom:0.5rem;
  padding-inline-start:0.9rem;
  border-inline-start:3px solid var(--accent);
}

.section-heading{
  max-width:640px;
}
.section-heading.mx-auto{text-align:center;}

.text-muted-2{color:var(--gray-500);}

.container-xl{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:1.25rem;
}

a{text-decoration:none;color:inherit;}

/* ---------- Buttons ---------- */
.btn{
  border-radius:var(--radius-sm);
  font-weight:600;
  padding:0.72rem 1.5rem;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  border:1px solid transparent;
}
.btn:active{transform:translateY(1px);}

.btn-accent{
  background:var(--accent);
  color:var(--white);
}
.btn-accent:hover{background:var(--accent-dark); color:var(--white); box-shadow:0 10px 20px -8px rgba(18,165,148,0.55);}

.btn-outline-light2{
  background:transparent;
  border-color:rgba(255,255,255,0.5);
  color:var(--white);
}
.btn-outline-light2:hover{background:rgba(255,255,255,0.12); color:var(--white); border-color:var(--white);}

.btn-outline-navy{
  background:transparent;
  border-color:var(--navy-900);
  color:var(--navy-900);
}
.btn-outline-navy:hover{background:var(--navy-900); color:var(--white);}

.btn-whatsapp{
  background:#25D366;
  color:var(--white);
}
.btn-whatsapp:hover{background:#1cb355; color:var(--white);}

.btn-sm-pill{border-radius:50px; padding:0.55rem 1.2rem; font-size:0.92rem; white-space:nowrap;}

/* ---------- Navbar ---------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(115deg, #0B1E33 0%, #0e2740 55%, #123a52 100%);
  backdrop-filter:blur(6px);
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg, rgba(18,165,148,0), rgba(18,165,148,0.65), rgba(18,165,148,0)) 1;
  box-shadow:0 2px 18px rgba(0,0,0,0.18);
}
.navbar-brand-custom{
  display:flex; align-items:center; gap:0.55rem;
  color:var(--white); font-family:var(--font-en-head); font-weight:700; font-size:1.15rem;
  flex-shrink:1; min-width:0;
}
/* English (LTR) brand name: wrap onto two lines on narrow screens instead of
   truncating, so the full name stays readable. Arabic keeps its own natural fit. */
html:not([dir="rtl"]) .navbar-brand-custom span:not(.brand-mark){
  white-space:normal; line-height:1.15;
}
/* Keep brand + toggler/switcher on the same row at every screen width —
   only the brand text itself wraps internally; the collapse menu below
   still drops to its own line normally when opened on mobile. */
.navbar-top-row{flex-wrap:nowrap;}
/* Full-width only on mobile/tablet, where the collapse menu must drop to
   its own line below. On desktop, navbar-top-row shares the row with the
   nav links + switcher + Call button, so it must NOT stretch to 100%. */
@media (max-width:991.98px){
  .navbar-top-row{width:100%;}
}
.site-header .navbar-toggler,
.site-header .navbar-toggler-custom{flex-shrink:0;}
.navbar-top-row > .d-flex{flex-shrink:0;}
@media (max-width:575.98px){
  html:not([dir="rtl"]) .navbar-brand-custom span:not(.brand-mark){
    max-width:190px;
  }
  html:not([dir="rtl"]) .navbar-brand-custom{align-items:center;}
}
.navbar-brand-custom .brand-mark{
  width:40px; height:40px; border-radius:10px;
  background:#fff;
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800;
  padding:3px; overflow:hidden; flex-shrink:0;
}
.navbar-brand-custom .brand-mark img{width:100%; height:100%; object-fit:contain; display:block;}
.site-footer .navbar-brand-custom .brand-mark{width:44px; height:44px;}
.nav-link-custom{
  color:rgba(255,255,255,0.82) !important;
  font-weight:500;
  padding:0.5rem 0.9rem !important;
  position:relative;
  white-space:nowrap;
}
.nav-link-custom.active,
.nav-link-custom:hover{color:var(--white) !important;}
.nav-link-custom.active::after{
  content:"";
  position:absolute; left:0.9rem; right:0.9rem; bottom:0.15rem;
  height:2px; background:var(--accent); border-radius:2px;
}
.lang-switch{
  display:flex; border:1px solid rgba(255,255,255,0.25); border-radius:50px; overflow:hidden;
}
.lang-switch a{
  background:transparent; border:0; color:rgba(255,255,255,0.75);
  padding:0.35rem 0.7rem; font-size:0.82rem; font-weight:600; cursor:pointer;
  display:inline-block; line-height:1.3;
}
.lang-switch a.active{background:var(--accent); color:#fff;}
.lang-switch a:hover:not(.active){color:#fff;}
.navbar-toggler-custom{border:0; background:transparent; color:#fff; font-size:1.4rem;}

/* Always-visible lang switch next to the hamburger icon (mobile/tablet) */
@media (min-width:992px){
  .mobile-lang-switch{display:none;}
}

/* Tighter spacing at "in-between" laptop widths so brand + 6 nav links +
   switcher + Call button never get squeezed against each other. */
@media (min-width:992px) and (max-width:1240px){
  .nav-link-custom{padding:0.5rem 0.6rem !important; font-size:0.94rem;}
  .navbar-brand-custom{font-size:1.05rem;}
  .navbar-utility{gap:0.6rem !important;}
}


/* floating WhatsApp button — always accessible, on every screen size */
.whatsapp-float{
  position:fixed;
  bottom:28px;
  inset-inline-end:22px;
  z-index:1050;
  width:58px; height:58px; border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  box-shadow:0 10px 26px -6px rgba(37,211,102,0.55), 0 2px 8px rgba(0,0,0,0.15);
  transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 14px 32px -6px rgba(37,211,102,0.65), 0 2px 8px rgba(0,0,0,0.18);
  color:#fff;
}
.whatsapp-float-pulse{
  position:absolute; inset:0; border-radius:50%;
  background:#25D366;
  opacity:0.55;
  animation:whatsapp-pulse 2.4s ease-out infinite;
  z-index:-1;
}
@keyframes whatsapp-pulse{
  0%{transform:scale(1); opacity:0.55;}
  70%{transform:scale(1.9); opacity:0;}
  100%{transform:scale(1.9); opacity:0;}
}
@media (max-width:575.98px){
  .whatsapp-float{width:52px; height:52px; font-size:1.4rem; bottom:22px; inset-inline-end:16px;}
}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1000px 560px at 90% -18%, rgba(18,165,148,0.55), transparent 62%),
    radial-gradient(780px 480px at -10% 112%, rgba(18,165,148,0.32), transparent 58%),
    linear-gradient(135deg, rgba(18,165,148,0.10) 0%, transparent 35%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  color:var(--white);
  padding:3rem 0 5rem;
  overflow:hidden;
  position:relative;
  box-shadow:inset 0 -3px 0 rgba(18,165,148,0.35);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.14) 1.6px, transparent 1.6px);
  background-size:26px 26px;
  mask-image:radial-gradient(760px 540px at 78% 8%, #000 45%, transparent 80%);
  -webkit-mask-image:radial-gradient(760px 540px at 78% 8%, #000 45%, transparent 80%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute; width:420px; height:420px; border-radius:50%;
  right:-110px; top:-130px;
  background:radial-gradient(circle, rgba(18,165,148,0.38), transparent 70%);
  filter:blur(4px);
  pointer-events:none;
  z-index:1;
}
.hero::before{z-index:1;}
.hero > .container-xl{position:relative; z-index:2;}
.hero-bg-layer{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.hero-bg-layer svg{width:100%; height:100%; display:block;}

/* real-photo hero background (all inner pages except home) */
.hero-photo-layer{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.hero-photo-layer img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-photo-layer::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(9,23,40,0.92) 0%, rgba(11,30,51,0.84) 50%, rgba(11,30,51,0.7) 100%);
}
.hero h1{color:#fff; font-size:clamp(2rem, 4vw, 3rem); line-height:1.15;}
.hero p.lead{color:rgba(255,255,255,0.78); max-width:520px;}
.hero-badges{display:flex; gap:0.6rem; flex-wrap:wrap; margin-top:1.6rem;}
.hero-badge{
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12);
  padding:0.5rem 0.9rem; border-radius:50px; font-size:0.82rem; color:rgba(255,255,255,0.85);
  display:flex; align-items:center; gap:0.4rem;
}
.hero-visual{
  position:relative;
  aspect-ratio:1/1;
  max-width:420px; margin-inline:auto;
}
.hero-visual .ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px dashed rgba(255,255,255,0.18);
  animation:spin-slow 30s linear infinite;
}
@keyframes spin-slow{to{transform:rotate(360deg);}}
.hero-visual .core{
  position:absolute; inset:14%;
  background:linear-gradient(155deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.14);
  border-radius:34px;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(2px);
}
.hero-visual .core i{font-size:5.5rem; color:var(--accent);}
.hero-illustration-svg{
  position:absolute; inset:6%;
  background:linear-gradient(155deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.14);
  border-radius:34px;
  padding:1.25rem;
  backdrop-filter:blur(2px);
  animation:float-y 6s ease-in-out infinite;
  overflow:hidden;
}
.hero-illustration-svg svg{width:100%; height:100%; display:block;}
.hero-illustration-svg.hero-photo-frame{padding:0;}
.hero-illustration-svg.hero-photo-frame img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:26px;
}
.hero-visual .float-chip{
  position:absolute; background:var(--white); color:var(--navy-900);
  border-radius:var(--radius-md); padding:0.7rem 1rem; box-shadow:var(--shadow-soft);
  font-size:0.85rem; font-weight:600; display:flex; align-items:center; gap:0.5rem;
}
.hero-visual .chip-1{top:6%; inset-inline-start:-4%;}
.hero-visual .chip-2{bottom:10%; inset-inline-end:-6%;}
.hero-visual .chip-1, .hero-visual .chip-2{animation:float-y 4.5s ease-in-out infinite;}
.hero-visual .chip-2{animation-delay:1.2s;}
@keyframes float-y{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

/* ---------- Trust strip ---------- */
.trust-strip{background:var(--navy-800); border-top:1px solid rgba(255,255,255,0.06);}
.trust-item{color:rgba(255,255,255,0.85); display:flex; align-items:center; gap:0.75rem;}
.trust-item i{color:var(--accent); font-size:1.4rem;}

/* ---------- Cards ---------- */
.service-card{
  background:var(--white);
  border:2px solid var(--card-border);
  border-radius:var(--radius-lg);
  padding:0;
  height:100%;
  position:relative;
  overflow:hidden;
  box-shadow:0 3px 14px -8px rgba(11,30,51,0.18);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.service-card::before{
  content:"";
  position:absolute; top:0; inset-inline-start:0; inset-inline-end:0; height:4px;
  background:linear-gradient(90deg, var(--accent), var(--accent-dark));
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
html[dir="rtl"] .service-card::before{transform-origin:right;}
.service-card:hover::before{transform:scaleX(1);}
.service-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-soft); border-color:var(--accent);}
.service-card-image{
  width:100%; height:170px; overflow:hidden; position:relative;
}
.service-card-image img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease;
}
.service-card-image::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(11,30,51,0.55) 100%);
  pointer-events:none;
}
.service-card-badge{
  position:absolute; bottom:0.7rem; inset-inline-start:0.9rem; z-index:1;
  color:#fff; font-size:0.76rem; font-weight:700; letter-spacing:0.02em;
  display:flex; align-items:center; gap:0.35rem;
  text-transform:uppercase;
}
.service-card-badge i{color:var(--accent);}
.service-card:hover .service-card-image img{transform:scale(1.07);}
.service-card-body{padding:1.5rem 1.6rem 1.7rem;}
.service-card .card-links{display:flex; gap:0.6rem; margin-top:1.2rem; flex-wrap:wrap;}
.service-card .card-links .btn{flex:1 1 auto; text-align:center; font-size:0.86rem; padding:0.55rem 0.9rem;}
.link-arrow{font-weight:600; color:var(--navy-900); display:inline-flex; align-items:center; gap:0.35rem;}
.link-arrow i{transition:transform .18s ease;}
html:not([dir="rtl"]) .link-arrow:hover i{transform:translateX(3px);}
html[dir="rtl"] .link-arrow:hover i{transform:translateX(-3px);}

.why-card{
  background:var(--gray-50); border-radius:var(--radius-md); padding:1.7rem;
  height:100%; border:2px solid var(--card-border);
  box-shadow:0 2px 10px -8px rgba(11,30,51,0.14);
  transition:border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.why-card:hover{border-color:var(--accent); background:var(--white); transform:translateY(-4px); box-shadow:var(--shadow-soft);}
.why-card i{
  color:var(--accent-dark); font-size:1.3rem; margin-bottom:0.9rem;
  width:48px; height:48px; border-radius:12px;
  background:linear-gradient(145deg, var(--accent-light), #ffffff);
  box-shadow:0 4px 12px -6px rgba(18,165,148,0.4), inset 0 0 0 1px rgba(18,165,148,0.12);
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .25s ease;
}
.why-card:hover i{transform:scale(1.08) rotate(-3deg);}

/* ---------- How it works ---------- */
.step{
  text-align:center; position:relative; padding:1.75rem 1.25rem;
  background:var(--white); border:2px solid var(--card-border); border-radius:var(--radius-md);
  box-shadow:0 2px 10px -8px rgba(11,30,51,0.14);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.step:hover{border-color:var(--accent); transform:translateY(-4px); box-shadow:var(--shadow-soft);}
.step .step-num{
  width:52px; height:52px; border-radius:50%;
  background:var(--navy-900); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; margin:0 auto 1rem; font-family:var(--font-en-head);
}
.step-photo{
  position:relative; width:76px; height:76px; margin:0 auto 1.1rem;
  border-radius:50%; overflow:visible;
}
.step-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:50%; border:3px solid var(--accent-light);
}
.step-photo .step-num{
  position:absolute; bottom:-6px; inset-inline-end:-6px;
  width:28px; height:28px; margin:0; font-size:0.82rem;
  border:2px solid var(--white);
}
.step-line{display:none;}

/* ---------- Service area ---------- */
.service-area{
  background:var(--navy-900); color:#fff; border-radius:var(--radius-lg);
  padding:3rem; position:relative; overflow:hidden;
}
.service-area::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(600px 300px at 90% 20%, rgba(18,165,148,0.35), transparent 65%);
}
.service-area .content{position:relative; z-index:1;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--gray-200);}
.faq-question{
  width:100%; text-align:start; background:transparent; border:0;
  padding:1.15rem 0; font-weight:600; color:var(--navy-900);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-size:1.02rem;
}
.faq-question i{transition:transform .2s ease; color:var(--accent);}
.faq-item.open .faq-question i{transform:rotate(180deg);}
.faq-answer{
  max-height:0; overflow:hidden; transition:max-height .25s ease;
  color:var(--gray-500);
}
.faq-answer p{padding-bottom:1.15rem; margin:0;}

/* ---------- Final CTA ---------- */
.final-cta{
  background:linear-gradient(120deg, var(--accent-dark), var(--accent));
  color:#fff; border-radius:var(--radius-lg); padding:3rem;
}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900); color:rgba(255,255,255,0.75); padding-top:3.5rem;}
.site-footer h6{color:#fff; font-weight:700; margin-bottom:1.1rem;}
.site-footer a{color:rgba(255,255,255,0.72);}
.site-footer a:hover{color:var(--accent);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08); margin-top:2.5rem; padding:1.25rem 0 6rem; font-size:0.85rem;}
.social-dot{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.08);
  display:inline-flex; align-items:center; justify-content:center; margin-inline-end:0.5rem;
  transition:background .2s ease;
}
.social-dot:hover{background:var(--accent);}

/* ---------- Reveal animation (single orchestrated pattern) ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-stagger.is-visible > *{animation:none;}

/* ---------- Breadcrumb ---------- */
.breadcrumb-bar{background:var(--gray-50); padding:0.9rem 0; border-bottom:1px solid var(--gray-200);}
.breadcrumb-bar .breadcrumb{margin:0; font-size:0.88rem;}
html[dir="rtl"] .breadcrumb-item+.breadcrumb-item::before{transform:scaleX(-1);}

/* ---------- Service detail page ---------- */
.detail-hero{
  background:
    radial-gradient(720px 360px at 92% -22%, rgba(18,165,148,0.5), transparent 62%),
    radial-gradient(560px 300px at 4% 122%, rgba(18,165,148,0.28), transparent 58%),
    linear-gradient(135deg, rgba(18,165,148,0.10) 0%, transparent 35%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
  color:#fff; padding:4.2rem 0; position:relative; overflow:hidden;
  box-shadow:inset 0 -3px 0 rgba(18,165,148,0.35);
}
.detail-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.12) 1.5px, transparent 1.5px);
  background-size:24px 24px;
  mask-image:radial-gradient(650px 420px at 88% 0%, #000 40%, transparent 78%);
  -webkit-mask-image:radial-gradient(650px 420px at 88% 0%, #000 40%, transparent 78%);
  pointer-events:none;
}
.detail-hero::after{
  content:"";
  position:absolute; width:300px; height:300px; border-radius:50%;
  right:-80px; top:-100px;
  background:radial-gradient(circle, rgba(18,165,148,0.32), transparent 70%);
  filter:blur(4px);
  pointer-events:none;
  z-index:1;
}
.detail-hero::before{z-index:1;}
.detail-hero > .container-xl{position:relative; z-index:2;}
.problem-list li, .repair-list li{
  display:flex; gap:0.6rem; align-items:flex-start; padding:0.55rem 0;
  border-bottom:1px dashed var(--gray-200);
}
.problem-list li i{color:var(--accent); margin-top:0.2rem;}
.process-step{display:flex; gap:1rem; margin-bottom:1.4rem;}
.process-step .num{
  flex:0 0 auto; width:40px; height:40px; border-radius:10px; background:var(--accent-light);
  color:var(--accent-dark); display:flex; align-items:center; justify-content:center; font-weight:700;
}
.related-card{
  border:2px solid var(--card-border); border-radius:var(--radius-md); padding:1.4rem;
  position:relative; overflow:hidden;
  box-shadow:0 2px 10px -8px rgba(11,30,51,0.14);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.related-card::before{
  content:"";
  position:absolute; top:0; inset-inline-start:0; inset-inline-end:0; height:4px;
  background:linear-gradient(90deg, var(--accent), var(--accent-dark));
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
html[dir="rtl"] .related-card::before{transform-origin:right;}
.related-card:hover::before{transform:scaleX(1);}
.related-card:hover{box-shadow:var(--shadow-soft); transform:translateY(-4px); border-color:var(--accent);}
.related-card-image{width:100%; height:120px; border-radius:var(--radius-sm); overflow:hidden; margin-bottom:0.9rem;}
.related-card-image img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease;}
.related-card:hover .related-card-image img{transform:scale(1.06);}
.sticky-cta{
  position:sticky; top:90px; background:var(--gray-50); border-radius:var(--radius-lg); padding:1.6rem;
  border:2px solid var(--card-border);
  box-shadow:0 3px 14px -8px rgba(11,30,51,0.14);
}

/* ---------- Gallery ---------- */
.gallery-filter .btn{border-radius:50px;}
.gallery-item{
  border-radius:var(--radius-md); overflow:hidden; position:relative; aspect-ratio:4/3;
  border:2px solid var(--card-border);
  box-shadow:0 3px 12px -8px rgba(11,30,51,0.16);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gallery-item:hover{transform:translateY(-5px) scale(1.015); box-shadow:var(--shadow-soft); border-color:var(--accent);}
.gallery-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease;}
.gallery-item:hover img{transform:scale(1.07);}
.gallery-item::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(11,30,51,0.6) 100%);
  pointer-events:none;
}
.gallery-item .tag{
  position:absolute; bottom:0.7rem; inset-inline-start:0.7rem; z-index:1;
  color:#fff; font-size:0.78rem; font-weight:600; padding:0; background:transparent;
}

/* ---------- Service Areas ---------- */
.area-chip{
  background:var(--gray-50); border:2px solid var(--card-border); border-radius:50px;
  padding:0.6rem 1.3rem; font-weight:600; color:var(--navy-900); font-size:0.92rem;
  display:inline-flex; align-items:center; gap:0.5rem;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.area-chip i{color:var(--accent-dark);}
.area-chip:hover{transform:translateY(-3px); border-color:var(--accent); background:var(--white);}
#areasGrid{display:flex; flex-wrap:wrap; gap:0.8rem; justify-content:center;}

/* ---------- Guarantees / USPs ---------- */
.guarantee-card{
  background:linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%);
  border:2px solid var(--card-border); border-radius:var(--radius-lg);
  padding:2.2rem 1.7rem; text-align:center; height:100%;
  position:relative; overflow:hidden;
  box-shadow:0 4px 18px -10px rgba(11,30,51,0.2);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.guarantee-card::before{
  content:"";
  position:absolute; top:0; inset-inline-start:0; inset-inline-end:0; height:4px;
  background:linear-gradient(90deg, var(--accent), var(--accent-dark));
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
html[dir="rtl"] .guarantee-card::before{transform-origin:right;}
.guarantee-card:hover::before{transform:scaleX(1);}
.guarantee-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-soft); border-color:var(--accent);}
.guarantee-icon{
  width:68px; height:68px; border-radius:50%;
  background:linear-gradient(145deg, var(--accent-light), #ffffff);
  color:var(--accent-dark);
  display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 1.3rem;
  box-shadow:0 6px 16px -6px rgba(18,165,148,0.4), inset 0 0 0 1px rgba(18,165,148,0.15);
  transition:transform .25s ease;
}
.guarantee-card:hover .guarantee-icon{transform:scale(1.08) rotate(-3deg);}

/* ---------- Brands ---------- */
.brand-chip{
  display:flex; align-items:center; gap:1rem;
  background:var(--white); border:2px solid var(--card-border); border-radius:18px;
  padding:0.75rem 1.4rem 0.75rem 0.9rem; font-weight:700; font-family:var(--font-en-head);
  color:var(--navy-900); font-size:1.05rem;
  box-shadow:0 2px 10px -8px rgba(11,30,51,0.14);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
html[dir="rtl"] .brand-chip{padding:0.75rem 0.9rem 0.75rem 1.4rem;}
.brand-chip:hover{
  transform:translateY(-3px); border-color:var(--accent); color:var(--accent-dark);
  box-shadow:var(--shadow-soft);
}
.brand-logo{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:150px; height:56px; padding-inline-end:1rem;
  border-inline-end:1px solid var(--card-border);
}
.brand-logo img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; border-radius:4px;}
.brand-name{white-space:nowrap;}
#brandsGrid{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;}
@media (max-width:575.98px){
  #brandsGrid{display:grid; grid-template-columns:repeat(2,1fr); gap:0.75rem;}
  .brand-chip,
  html[dir="rtl"] .brand-chip{flex-direction:column; gap:0.55rem; padding:0.85rem 0.6rem; text-align:center; font-size:0.95rem;}
  .brand-logo{width:100%; height:52px; padding-inline-end:0; border-inline-end:0;}
  .brand-logo img{max-width:88%;}
}

/* ---------- Testimonials ---------- */
.testimonial-card{
  background:var(--white); border:2px solid var(--card-border); border-radius:var(--radius-lg);
  padding:1.9rem 1.8rem 1.8rem; height:100%; position:relative;
  box-shadow:0 3px 14px -8px rgba(11,30,51,0.16);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.testimonial-card::before{
  content:"\201C";
  position:absolute; top:0.6rem; inset-inline-end:1.2rem;
  font-family:Georgia, serif; font-size:3.5rem; line-height:1; color:var(--accent-light);
  z-index:0;
}
html[dir="rtl"] .testimonial-card::before{content:"\201D";}
.testimonial-card > *{position:relative; z-index:1;}
.testimonial-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft); border-color:var(--accent);}
.testimonial-stars{color:#f5a623; font-size:0.9rem; margin-bottom:0.9rem; letter-spacing:2px;}
.testimonial-text{color:var(--text); font-size:0.96rem; line-height:1.7; margin-bottom:1.4rem;}
.testimonial-author{display:flex; align-items:center; gap:0.8rem;}
.testimonial-avatar{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(145deg, var(--accent), var(--accent-dark)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-en-head);
  flex-shrink:0; box-shadow:0 4px 10px -4px rgba(18,165,148,0.5);
}
.testimonial-name{font-weight:700; color:var(--navy-900); font-size:0.92rem;}
.testimonial-area{font-size:0.8rem; color:var(--gray-500);}

/* ---------- Location / Map ---------- */
.location-map-frame{
  border-radius:var(--radius-lg); overflow:hidden; border:2px solid var(--card-border);
  box-shadow:0 3px 14px -8px rgba(11,30,51,0.16);
}
.location-map-frame iframe{width:100%; height:380px; display:block; border:0;}

/* ---------- Blog ---------- */
.blog-card{
  border:2px solid var(--card-border); border-radius:var(--radius-lg); overflow:hidden; height:100%;
  position:relative;
  box-shadow:0 3px 14px -8px rgba(11,30,51,0.16);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.blog-card::before{
  content:"";
  position:absolute; top:0; inset-inline-start:0; inset-inline-end:0; height:4px; z-index:2;
  background:linear-gradient(90deg, var(--accent), var(--accent-dark));
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
html[dir="rtl"] .blog-card::before{transform-origin:right;}
.blog-card:hover::before{transform:scaleX(1);}
.blog-card:hover{box-shadow:var(--shadow-soft); transform:translateY(-5px); border-color:var(--accent);}
.blog-thumb{
  aspect-ratio:16/9; overflow:hidden;
}
.blog-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease;}
.blog-card:hover .blog-thumb img{transform:scale(1.06);}
.blog-meta{font-size:0.82rem; color:var(--gray-500);}
.blog-body-content p{margin-bottom:1.2rem; color:var(--text);}
.blog-body-content h2{margin-top:2rem;}

/* ---------- Contact form ---------- */
.contact-form .form-label{font-weight:600; font-size:0.92rem;}
.contact-form .form-control, .contact-form .form-select{
  border-radius:var(--radius-sm); border-color:var(--gray-200); padding:0.7rem 0.9rem;
}
.contact-form .form-control:focus, .contact-form .form-select:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(18,165,148,0.15);
}
.contact-info-card{background:var(--navy-900); color:#fff; border-radius:var(--radius-lg); padding:2rem;}
.contact-illustration{width:120px; margin:0 auto 1rem; opacity:0.95;}
.contact-illustration svg{width:100%; height:100%;}
.contact-info-card .row-item{display:flex; gap:0.9rem; margin-bottom:1.3rem; align-items:flex-start;}
.contact-info-card i{color:var(--accent); font-size:1.2rem; margin-top:0.15rem;}
.map-link{color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,0.4); text-underline-offset:3px; transition:color .18s ease, text-decoration-color .18s ease;}
.map-link:hover{color:var(--accent); text-decoration-color:var(--accent);}
.site-footer a.map-link{color:rgba(255,255,255,0.72); text-decoration:underline; text-decoration-color:rgba(255,255,255,0.25); text-underline-offset:3px;}
.site-footer a.map-link:hover{color:var(--accent); text-decoration-color:var(--accent);}

/* keep phone numbers reading left-to-right even inside Arabic/RTL text */
.phone-num{unicode-bidi:isolate; direction:ltr; display:inline-block;}

/* ---------- RTL specific tweaks ---------- */
html[dir="rtl"] .navbar-nav{text-align:right;}
html[dir="rtl"] .section-tag{border-inline-start:3px solid var(--accent); border-inline-end:0;}
html[dir="rtl"] .service-area, html[dir="rtl"] .final-cta{text-align:right;}

/* ---------- Language-scoped static content blocks (used on long-form pages like blog posts) ---------- */
html[lang="en"] [data-lang-content="ar"]{display:none;}
html[lang="ar"] [data-lang-content="en"]{display:none;}

/* focus visibility for accessibility */
a:focus-visible, button:focus-visible, .form-control:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ---------- Responsive polish ---------- */
@media (max-width:767.98px){
  .hero{padding:1.5rem 0 1.75rem;}
  .hero .row.g-5{--bs-gutter-y: 1rem;}
  .hero-badge.mb-3{margin-bottom:0.6rem !important;}
  .hero h1{margin-top:0.6rem !important; margin-bottom:0.6rem !important;}
  .hero p.lead{margin-bottom:0.9rem;}
  .hero .d-flex.flex-wrap.gap-3.mt-4{margin-top:0.9rem !important;}
  .hero-badges{margin-top:0.9rem;}
  .detail-hero{padding:2.75rem 0;}
  .service-area{padding:2.25rem 1.5rem;}
  .final-cta{padding:2.25rem 1.5rem;}
  .final-cta .row, .service-area .row{text-align:center;}
  .final-cta .justify-content-lg-end{justify-content:center !important;}
  .hero .d-flex.flex-wrap.gap-3{justify-content:center;}
  .hero-badges{justify-content:center;}
  .hero .col-lg-6 .section-tag,
  .hero h1, .hero p.lead{text-align:center; margin-inline:auto;}
}
@media (max-width:420px){
  .navbar-brand-custom{font-size:0.92rem; gap:0.4rem;}
  .navbar-brand-custom .brand-mark{width:32px; height:32px; font-size:0.85rem; border-radius:8px;}
  .hero h1{font-size:1.65rem;}
  .service-area, .final-cta{padding:1.75rem 1.1rem;}
}
@media (max-width:991.98px){
  .sticky-cta{position:static;}
}