/*
Theme Name: Al-Kuthban
Theme URI: https://alkuthban.com
Author: Al-Kuthban
Description: Custom bilingual (English + Arabic/RTL) corporate theme for Al-Kuthban General Trading & Contracting (Kuwait). Self-contained, responsive, and Elementor-compatible. Auto-creates all English and Arabic pages plus navigation menus and a language switcher on activation.
Version: 2.15.0
License: GNU General Public License v2 or later
Text Domain: alkuthban
Tags: business, corporate, construction, elementor, rtl-language-support, full-width-template
*/

:root{
  --blue:#0e5396;
  --blue-dark:#0a3d6e;
  --blue-deep:#0c4a85;
  --gold:#d6a44c;
  --gold-dark:#c4912f;
  --gold-light:#e7c585;
  --ink:#23303d;
  --text:#3a4753;
  --muted:#7b8794;
  --light:#f4f7fa;
  --line:#e7ecf1;
  --white:#ffffff;
  --radius:14px;
  --shadow:0 10px 30px rgba(16,45,80,.08);
  --shadow-sm:0 4px 14px rgba(16,45,80,.06);
  --container:1170px;
  --font-head:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Inter','Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--text);line-height:1.65;font-size:16px;background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4,h5{font-family:var(--font-head);color:var(--blue);line-height:1.2;font-weight:700}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:84px 0}
.section--light{background:var(--light)}
.text-center{text-align:center}
.eyebrow{font-family:var(--font-head);color:var(--gold);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:13px;margin-bottom:10px;display:block}
.section-title{font-size:34px;color:var(--blue);margin-bottom:8px}
.lead{color:var(--text)}
.muted{color:var(--muted)}
.underline-center{width:64px;height:4px;background:var(--gold);border-radius:4px;margin:14px auto 0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:15px 28px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:.2s}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-dark)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-dark)}
.btn-block{width:100%;justify-content:center}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo-mark{width:34px;height:34px}
.brand .logo-text{font-family:var(--font-head);font-weight:700;letter-spacing:.18em;color:var(--gold);font-size:15px}
.menu{display:flex;align-items:center;gap:30px;list-style:none}
.menu a{font-family:var(--font-head);font-size:14px;font-weight:500;color:var(--ink);padding:6px 0;position:relative;transition:.2s}
.menu a:hover{color:var(--blue)}
.menu a.active{color:var(--gold)}
.menu a.active:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.2s}

/* Home hero */
.hero{background:var(--blue);color:#fff;text-align:center;padding:120px 0 130px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.06),transparent 45%)}
.hero .container{position:relative}
.hero h1{color:#fff;font-size:50px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1.12;max-width:760px;margin:0 auto}
.hero h1 .g{color:var(--gold)}
.hero p{max-width:560px;margin:22px auto 34px;color:rgba(255,255,255,.85);font-size:17px}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* Page hero (inner) */
.page-hero{background:var(--blue);color:#fff;padding:64px 0;position:relative;overflow:hidden}
.page-hero:before{content:"";position:absolute;right:-60px;top:-60px;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.04)}
.page-hero .container{position:relative}
.page-hero h1{color:#fff;font-size:44px;font-weight:800;margin-bottom:6px}
.page-hero .sub{color:rgba(255,255,255,.7);letter-spacing:.16em;text-transform:uppercase;font-size:14px;font-family:var(--font-head)}
.page-hero--center{text-align:center}

/* Generic grid helpers */
.grid{display:grid;gap:24px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}

/* Company snapshot */
.snapshot{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
.snapshot h2{font-size:30px;margin-bottom:16px}
.snapshot p{color:var(--text);margin-bottom:18px}
.callout-gold{border-left:4px solid var(--gold);background:#fff;border-radius:8px;padding:18px 22px;box-shadow:var(--shadow-sm)}
.callout-gold strong{color:var(--blue);font-family:var(--font-head);display:block;margin-bottom:6px;font-size:16px}
.callout-gold span{color:var(--muted);font-size:14px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 22px;text-align:center;box-shadow:var(--shadow-sm)}
.stat .ico{width:46px;height:46px;border-radius:50%;background:#fbf3e3;color:var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.stat .num{font-family:var(--font-head);font-weight:800;color:var(--blue);font-size:30px}
.stat .lbl{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:11px;margin-top:6px}

/* Service cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 24px;box-shadow:var(--shadow-sm);transition:.25s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .ico{color:var(--gold);margin-bottom:18px}
.card h3{font-size:18px;margin-bottom:12px;color:var(--blue)}
.card p{color:var(--muted);font-size:14.5px;flex:1}
.show-more{color:var(--gold);font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-top:18px;display:inline-flex;gap:6px;align-items:center}

/* Why choose */
.why{background:var(--blue);color:#fff}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:stretch}
.why h2{color:#fff;font-size:32px;margin-bottom:28px}
.why h2 .g{color:var(--gold)}
.why-item{display:flex;gap:16px;margin-bottom:22px}
.why-item .chk{flex:none;width:24px;height:24px;color:var(--gold)}
.why-item h4{color:#fff;font-size:17px;margin-bottom:4px}
.why-item p{color:rgba(255,255,255,.72);font-size:14.5px}
.why-media{position:relative;display:flex;flex-direction:column}
.why-media img,.media-ph{border-radius:14px;width:100%}
.quality-tag{position:absolute;left:-14px;bottom:-14px;background:var(--gold);color:#13324f;border-radius:10px;padding:14px 20px;box-shadow:var(--shadow)}
.quality-tag b{font-family:var(--font-head);font-size:20px;display:block}
.quality-tag span{font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* Media placeholder */
.media-ph{background:linear-gradient(135deg,#c3ccd6,#aab6c2);min-height:320px;display:flex;align-items:center;justify-content:center;color:#fff;border-radius:14px}
.media-ph svg{width:54px;height:54px;opacity:.85}
.media-ph.tall{min-height:340px;flex:1 1 auto;height:100%}

/* Sectors */
.sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.sector{position:relative;border-radius:12px;overflow:hidden;min-height:190px;display:flex;align-items:flex-end;color:#fff;background:linear-gradient(135deg,#27486a,#16324c)}
.sector:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,40,70,.1),rgba(8,30,55,.78))}
.sector .inner{position:relative;padding:20px;z-index:2}
.sector h4{color:#fff;font-size:18px;margin-bottom:2px}
.sector span{font-size:12.5px;color:rgba(255,255,255,.82)}

/* CTA band */
.cta-band{background:var(--gold);text-align:center;padding:72px 0}
.cta-band h2{color:var(--blue-dark);font-size:32px;max-width:640px;margin:0 auto 12px}
.cta-band p{color:#7a5a1e;margin-bottom:26px}

/* Footer */
.site-footer{background:var(--blue);color:rgba(255,255,255,.78);padding:64px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:36px}
.site-footer .brand .logo-text{color:#fff}
.footer-about{margin-top:18px;font-size:14px;color:rgba(255,255,255,.65);max-width:260px}
.footer-social{display:flex;gap:12px;margin-top:18px}
.footer-social a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;color:#fff;transition:.2s}
.footer-social a:hover{background:var(--gold);border-color:var(--gold)}
.site-footer h5{color:#fff;font-size:16px;margin-bottom:18px}
.footer-links{list-style:none}
.footer-links li{margin-bottom:11px}
.footer-links a{font-size:14px;color:rgba(255,255,255,.72);transition:.2s}
.footer-links a:hover{color:var(--gold)}
.footer-contact{list-style:none;font-size:14px}
.footer-contact li{display:flex;gap:12px;margin-bottom:14px;color:rgba(255,255,255,.72)}
.footer-contact .ico{flex:none;color:var(--gold);margin-top:2px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:46px;padding-top:22px;text-align:center;font-size:13px;color:rgba(255,255,255,.55)}

/* About */
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:start}
.two-col h2{font-size:30px;margin-bottom:18px}
.two-col p{margin-bottom:16px;color:var(--text)}
.sub-head{font-family:var(--font-head);color:var(--blue);font-size:20px;font-weight:700;margin:10px 0 12px}
.vmv-card{background:var(--light);border-radius:16px;padding:34px}
.vmv{display:flex;gap:16px;margin-bottom:26px}
.vmv .n{flex:none;width:30px;height:30px;border-radius:50%;background:#fbf3e3;color:var(--gold);font-family:var(--font-head);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}
.vmv h4{font-size:19px;margin-bottom:6px}
.vmv .quote{border-left:3px solid var(--gold);padding-left:14px;color:var(--muted);font-style:italic;font-size:14.5px}
.value-pills{display:flex;gap:12px;flex-wrap:wrap}
.value-pills span{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 20px;font-family:var(--font-head);font-weight:600;color:var(--blue);font-size:14px}

/* Services rows */
.srow{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.srow.rev .stext{order:2}
.srow h3{font-size:26px;margin-bottom:12px}
.srow .desc{color:var(--text);margin-bottom:20px}
.scope{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.scope .lbl{color:var(--gold);font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.scope ul{list-style:none}
.scope li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;margin-bottom:8px;color:var(--text)}
.scope li svg{flex:none;color:var(--gold);width:16px;height:16px;margin-top:3px}
.srow .divider{height:1px;background:var(--line);margin:8px 0 16px}
.industries{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-family:var(--font-head)}
.industries b{color:var(--blue)}
.inquire{display:inline-flex;gap:6px;align-items:center;color:var(--blue);font-family:var(--font-head);font-weight:600;font-size:14px;margin-top:14px}
.inquire:hover{color:var(--gold)}

/* Projects */
.proj-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);transition:.25s}
.proj-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.proj-thumb{position:relative;min-height:170px;background:linear-gradient(135deg,#cdd5de,#b4c0cc)}
.badge{position:absolute;top:14px;right:14px;background:var(--gold);color:#fff;font-family:var(--font-head);font-weight:600;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:20px}
.badge.con{background:var(--gold-light);color:#7a5a1e}
.proj-body{padding:22px}
.proj-body h3{font-size:19px;margin-bottom:16px}
.proj-row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-top:1px solid var(--line)}
.proj-row .k{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:11px}
.proj-row .v{color:var(--ink);font-weight:500;text-align:right}
.proj-row--scope,.proj-row--client{display:block}
.proj-row--scope .k,.proj-row--client .k{display:block;margin-bottom:5px}
.proj-row--scope .v,.proj-row--client .v{display:block;text-align:left;line-height:1.6}
.rtl .proj-row--scope .v,.rtl .proj-row--client .v{text-align:right}
.note-box{background:var(--light);border-radius:12px;padding:26px;text-align:center;color:var(--muted);font-style:italic;margin-top:40px}

/* HSQ */
.hsq-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.hsq-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px;box-shadow:var(--shadow-sm);border-left:5px solid var(--gold)}
.hsq-card.blue{border-left-color:var(--blue)}
.hsq-card .ico{margin-bottom:16px;color:var(--blue)}
.hsq-card.gold .ico{color:var(--gold)}
.hsq-card h3{font-size:20px;margin-bottom:10px}
.hsq-card p{color:var(--muted);font-size:14.5px}

/* Clients */
.logo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.logo-box{background:#fff;border:1px solid var(--line);border-radius:10px;min-height:92px;display:flex;align-items:center;justify-content:center;padding:14px;box-shadow:var(--shadow-sm)}
.logo-box span{color:#9aa6b2;font-family:var(--font-head);font-weight:600;font-size:13px;text-align:center;letter-spacing:.02em}
.partner{background:var(--blue);border-radius:18px;padding:42px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;color:#fff;margin-top:44px}
.partner h3{color:#fff;font-size:24px;margin-bottom:14px}
.partner p{color:rgba(255,255,255,.75);margin-bottom:22px;font-size:15px}
.featured{background:rgba(255,255,255,.07);border-radius:10px;padding:20px}
.featured .lbl{color:var(--gold);font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.featured b{display:block;color:#fff;font-family:var(--font-head);font-size:18px;margin:4px 0}
.featured span{color:rgba(255,255,255,.65);font-size:14px}
.confidential{background:var(--light);border-radius:12px;padding:22px 26px;display:flex;gap:16px;align-items:flex-start;margin-top:36px}
.confidential .ico{color:var(--gold);flex:none}
.confidential b{color:var(--blue);font-family:var(--font-head);display:block;margin-bottom:4px}
.confidential span{color:var(--muted);font-size:14.5px}

/* Profile / certifications */
.cert-list{display:flex;flex-direction:column;gap:14px}
.cert{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 20px;box-shadow:var(--shadow-sm);transition:.2s}
.cert:hover{border-color:var(--gold-light)}
.cert .ico{width:34px;height:34px;border-radius:8px;background:#fbf3e3;color:var(--gold);display:flex;align-items:center;justify-content:center;flex:none}
.cert b{color:var(--blue);font-family:var(--font-head);font-size:15px;font-weight:600}
.download-card{background:var(--light);border-radius:16px;padding:40px 34px;text-align:center}
.download-card .circle{width:60px;height:60px;border-radius:50%;background:#e7eef6;color:var(--blue);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.download-card h3{font-size:22px;margin-bottom:10px}
.download-card p{color:var(--muted);font-size:14.5px;margin-bottom:22px}
.download-card .ver{color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-top:16px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start}
.contact-info h2{font-size:30px;margin-bottom:26px}
.cinfo{display:flex;gap:16px;margin-bottom:22px}
.cinfo .ico{width:42px;height:42px;border-radius:50%;background:#fbf3e3;color:var(--gold);display:flex;align-items:center;justify-content:center;flex:none}
.cinfo b{color:var(--blue);font-family:var(--font-head);display:block;margin-bottom:3px}
.cinfo span{color:var(--text);font-size:14.5px;display:block;line-height:1.5}
.map-ph{margin-top:10px;border-radius:12px;min-height:230px;background:linear-gradient(135deg,#d8e3d6,#cdd9e0);display:flex;align-items:center;justify-content:center;color:#8a9aa0}
.form-card{background:#fff;border-radius:16px;padding:36px;box-shadow:var(--shadow);border-left:4px solid var(--gold)}
.form-card h3{font-size:22px;margin-bottom:6px}
.form-card .fsub{color:var(--muted);font-size:14px;margin-bottom:22px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--font-head);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:13px 14px;font-family:var(--font-body);font-size:14.5px;color:var(--ink);background:#fbfcfd}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field textarea{min-height:120px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}


/* Arabic contact phone numbers: keep the phone number LTR and place the Arabic label on the right visually. */
.phone-line{display:inline-block;direction:ltr;unicode-bidi:isolate;white-space:nowrap;text-align:left}
.rtl .cinfo .phone-line{font-family:var(--font-body);font-size:14.5px}
@media(max-width:560px){
  .rtl .cinfo{align-items:flex-start}
  .rtl .cinfo>div{min-width:0}
  .rtl .cinfo .phone-line{max-width:100%;font-size:16px;line-height:1.85}
}

/* Responsive */
@media(max-width:980px){
  .menu{position:fixed;inset:78px 0 auto 0;background:#fff;flex-direction:column;gap:0;padding:10px 0;border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none}
  .menu.open{display:flex}
  .menu li{width:100%}
  .menu a{display:block;padding:14px 24px}
  .nav-toggle{display:block}
  /* Mobile top bar — identical PHYSICAL layout for English (LTR) and Arabic (RTL):
     logo pinned to the left, hamburger + language switch grouped on the right.
     direction:ltr neutralises RTL flipping on the bar, and physical margins
     (margin-left/right) don't flip with dir, so Arabic mirrors English exactly. */
  .nav{flex-direction:row;flex-wrap:nowrap;align-items:center;direction:ltr}
  .nav .brand{order:0;margin:0 auto 0 0}
  .nav .nav-toggle{order:1;margin:0}
  .nav .lang-switch{order:2;margin:0 0 0 14px;white-space:nowrap}
  .nav .menu{order:3}
  /* keep the Arabic dropdown menu itself right-to-left */
  .rtl .menu{direction:rtl}
  .rtl .menu a{text-align:right}
  .snapshot,.why-grid,.two-col,.srow,.contact-grid,.partner{grid-template-columns:1fr;gap:32px}
  .srow.rev .stext{order:0}
  .cards,.sectors{grid-template-columns:repeat(2,1fr)}
  .cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}
  .logo-grid{grid-template-columns:repeat(3,1fr)}
  .hsq-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .hero h1{font-size:38px}
  .page-hero h1{font-size:34px}
}
@media(max-width:560px){
  .section{padding:56px 0}
  .stats,.scope,.field-row,.cards,.sectors,.cols-3,.cols-4,.logo-grid,.proj-grid{grid-template-columns:1fr!important}
  .hero{padding:80px 0}
  .hero h1{font-size:30px}
  .footer-grid{grid-template-columns:1fr}
  .hero-actions{flex-direction:column}
  .btn{justify-content:center}
}

/* ===== Logo image ===== */
.brand{gap:0}
.brand img.logo-img{height:52px;width:auto;display:block}
.site-footer .brand img.logo-img{height:58px}

/* ===== Language switch ===== */
.lang-switch{display:inline-flex;align-items:center;font-family:var(--font-head);font-weight:600;font-size:13px;color:var(--blue)!important;border:1px solid var(--line);padding:7px 14px;border-radius:6px;transition:.2s}
.lang-switch:hover{background:var(--blue);color:#fff!important;border-color:var(--blue)}
.lang-switch.active:after{display:none}

/* ===== Arabic / RTL ===== */
.rtl{direction:rtl;text-align:right}
.rtl body,.rtl{font-family:'Cairo','Tajawal',var(--font-body)}
.rtl h1,.rtl h2,.rtl h3,.rtl h4,.rtl h5,.rtl .eyebrow,.rtl .btn,.rtl .menu a,.rtl .logo-text,.rtl .sub-head,.rtl .show-more,.rtl .inquire,.rtl .industries,.rtl .scope .lbl,.rtl .stat .lbl,.rtl .featured .lbl,.rtl .field label{font-family:'Cairo','Tajawal',var(--font-head)}
.rtl .nav,.rtl .menu,.rtl .footer-social{flex-direction:row-reverse}
.rtl .hero-actions{justify-content:center}
.rtl .menu{flex-direction:row-reverse}
/* Desktop Arabic header in TRUE RTL: the page is already direction:rtl, which
   lays the header's flex rows out right-to-left on its own. The shared
   row-reverse rules above double-reverse them back to a left-to-right (English)
   look, so we cancel row-reverse here — scoped to the header only — giving a
   real RTL header on desktop (logo on the right, menu + language switch left). */
.rtl .site-header .nav{flex-direction:row!important}
.rtl .site-header .menu{flex-direction:row!important}
.rtl .menu a.active:after{left:0;right:0}
.rtl .callout-gold{border-left:0;border-right:4px solid var(--gold)}
.rtl .vmv .quote{border-left:0;border-right:3px solid var(--gold);padding-left:0;padding-right:14px}
.rtl .hsq-card{border-left:0;border-right:5px solid var(--gold)}
.rtl .hsq-card.blue{border-left-color:var(--blue);border-right-color:var(--blue)}
.rtl .form-card{border-left:0;border-right:4px solid var(--gold)}
.rtl .badge{right:auto;left:14px}
.rtl .quality-tag{left:auto;right:-14px}
.rtl .proj-row .v{text-align:left}
.rtl .scope li,.rtl .why-item,.rtl .footer-contact li,.rtl .cinfo,.rtl .cert,.rtl .confidential,.rtl .vmv{text-align:right}
.rtl .page-hero:before{right:auto;left:-60px}
.rtl .field input,.rtl .field select,.rtl .field textarea{text-align:right}
@media(max-width:980px){
  /* Arabic mobile header in TRUE RTL — a mirror of the English bar:
     logo pinned to the RIGHT, hamburger + language switch grouped on the LEFT.
     direction:rtl runs the bar right-to-left; margin-left:auto on the logo
     absorbs the free space so the logo sits at the right edge and the controls
     move to the left. !important wins over the desktop row-reverse rules. */
  .rtl .site-header .nav{flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;direction:rtl!important;justify-content:flex-start!important}
  .rtl .site-header .menu{flex-direction:column!important;direction:rtl!important}
  .rtl .site-header .nav .brand{order:0!important;margin:0 0 0 auto!important}
  .rtl .site-header .nav .nav-toggle{order:1!important;margin:0!important}
  .rtl .site-header .nav .lang-switch{order:2!important;margin:0 14px 0 0!important;white-space:nowrap}
}

/* WordPress nav active state */
.menu li{list-style:none}
.menu .current-menu-item>a,.menu .current_page_item>a,.menu .current-menu-parent>a{color:var(--gold)}
.menu .current-menu-item>a:after,.menu .current_page_item>a:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold)}
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}

/* =========================================================================
 * RTL refinements v2.1.0 — Arabic alignment, ticks, buttons & arrows.
 * In an already-rtl flex row the first child sits on the right by default,
 * so dropping row-reverse (above) puts ticks/icons back on the right side.
 * ===================================================================== */
/* Home hero: flip the arrow inside the yellow (gold) button for Arabic. */
.rtl .btn svg,.rtl .inquire svg{transform:scaleX(-1)}
/* Bigger, tidier Arabic eyebrow heading (e.g. خبراتنا). */
.rtl .eyebrow{font-size:15.5px;letter-spacing:.08em}
/* Right-align the stat numbers in the Arabic snapshot section. */
.rtl .stat,.rtl .stat .num,.rtl .stat .lbl{text-align:right}
/* Profile: company-profile download card content aligned to the right. */
.rtl .download-card{text-align:right}
.rtl .download-card .circle{margin-right:0;margin-left:auto}

/* Final mobile RTL header fix: Arabic mobile mirrors English correctly. */
@media(max-width:980px){
  .rtl .site-header .nav{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;direction:rtl!important;justify-content:flex-start!important}
  .rtl .site-header .nav .brand{order:0!important;margin-left:auto!important;margin-right:0!important}
  .rtl .site-header .nav .nav-toggle{order:1!important;margin:0!important}
  .rtl .site-header .nav .lang-switch{order:2!important;margin-right:14px!important;margin-left:0!important;white-space:nowrap!important}
  .rtl .site-header .menu{inset:78px 0 auto 0!important;flex-direction:column!important;direction:rtl!important}
  .rtl .site-header .menu a{text-align:right!important}
}

/* =======================================================================
 * v2.7.7 Arabic contact page — authoritative final layout
 * - FORM on the LEFT, contact DETAILS on the RIGHT (restores original)
 * - Two equal columns that fill the full container width (no left gap)
 * - Contact icons perfectly centred inside their yellow circles
 * Loaded last so it overrides every earlier experimental .contact-grid rule.
 * ======================================================================= */
html[dir="rtl"] body .section .container>.contact-grid,
body.rtl .section .container>.contact-grid,
.rtl .section .container>.contact-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-areas:none!important;
  gap:48px!important;
  width:100%!important;
  max-width:1120px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:0!important;
  direction:rtl!important;
  align-items:start!important;
  box-sizing:border-box!important;
  direction:ltr!important; /* track flow LTR: column 1 = physical LEFT */
}
/* form-card = 2nd element in markup -> LEFT column */
html[dir="rtl"] body .section .container>.contact-grid>.form-card,
body.rtl .section .container>.contact-grid>.form-card,
.rtl .section .container>.contact-grid>.form-card{
  grid-area:auto!important;
  grid-column:1 / 2!important;
  grid-row:1 / 2!important;
  width:100%!important;max-width:none!important;min-width:0!important;
  justify-self:stretch!important;
  direction:rtl!important;text-align:right!important;
  box-sizing:border-box!important;
}
/* contact-info = 1st element in markup -> RIGHT column */
html[dir="rtl"] body .section .container>.contact-grid>.contact-info,
body.rtl .section .container>.contact-grid>.contact-info,
.rtl .section .container>.contact-grid>.contact-info{
  grid-area:auto!important;
  grid-column:2 / 3!important;
  grid-row:1 / 2!important;
  width:100%!important;max-width:none!important;min-width:0!important;
  justify-self:stretch!important;
  direction:rtl!important;text-align:right!important;
  box-sizing:border-box!important;
}
/* Contact rows: fixed icon column on the right, text fills the rest. */
html[dir="rtl"] body .contact-info .cinfo,
body.rtl .contact-info .cinfo,
.rtl .contact-info .cinfo{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  column-gap:16px!important;
  align-items:center!important;
  width:100%!important;
  margin:0 0 24px!important;
  direction:rtl!important;text-align:right!important;
}
html[dir="rtl"] body .contact-info .cinfo .ico,
body.rtl .contact-info .cinfo .ico,
.rtl .contact-info .cinfo .ico{
  width:42px!important;height:42px!important;
  min-width:42px!important;min-height:42px!important;max-width:42px!important;max-height:42px!important;
  padding:0!important;margin:0!important;
  border-radius:50%!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  line-height:0!important;flex:none!important;
  align-self:center!important;transform:none!important;
  box-sizing:border-box!important;
}
html[dir="rtl"] body .contact-info .cinfo .ico svg,
body.rtl .contact-info .cinfo .ico svg,
.rtl .contact-info .cinfo .ico svg{
  display:block!important;width:20px!important;height:20px!important;
  margin:0!important;transform:none!important;position:static!important;
}
html[dir="rtl"] body .contact-info .cinfo>div,
body.rtl .contact-info .cinfo>div,
.rtl .contact-info .cinfo>div{
  min-width:0!important;width:100%!important;display:block!important;
  align-self:center!important;text-align:right!important;direction:rtl!important;
}
html[dir="rtl"] body .contact-info .cinfo b,
body.rtl .contact-info .cinfo b,
.rtl .contact-info .cinfo b{display:block!important;text-align:right!important;margin:0 0 4px!important}
html[dir="rtl"] body .contact-info .cinfo span,
body.rtl .contact-info .cinfo span,
.rtl .contact-info .cinfo span{display:block!important;text-align:right!important}
html[dir="rtl"] body .contact-info .english-phone-numbers,
body.rtl .contact-info .english-phone-numbers,
.rtl .contact-info .english-phone-numbers{
  display:block!important;direction:ltr!important;text-align:right!important;
  width:100%!important;max-width:100%!important;line-height:1.75!important;margin-top:2px!important;unicode-bidi:isolate!important;
}
html[dir="rtl"] body .contact-info .english-phone-numbers div,
body.rtl .contact-info .english-phone-numbers div,
.rtl .contact-info .english-phone-numbers div{display:block!important;direction:ltr!important;text-align:right!important;white-space:nowrap!important;unicode-bidi:isolate!important}
html[dir="rtl"] body .contact-info .map-ph,
body.rtl .contact-info .map-ph,
.rtl .contact-info .map-ph{width:100%!important;box-sizing:border-box!important;min-height:230px!important}
@media(max-width:980px){
  html[dir="rtl"] body .section .container>.contact-grid,
  body.rtl .section .container>.contact-grid,
  .rtl .section .container>.contact-grid{
    grid-template-columns:1fr!important;gap:34px!important;max-width:720px!important;
  }
  html[dir="rtl"] body .section .container>.contact-grid>.form-card,
  body.rtl .section .container>.contact-grid>.form-card,
  .rtl .section .container>.contact-grid>.form-card{grid-column:1 / 2!important;grid-row:2 / 3!important}
  html[dir="rtl"] body .section .container>.contact-grid>.contact-info,
  body.rtl .section .container>.contact-grid>.contact-info,
  .rtl .section .container>.contact-grid>.contact-info{grid-column:1 / 2!important;grid-row:1 / 2!important}
}
@media(max-width:560px){
  html[dir="rtl"] body .contact-info .cinfo,body.rtl .contact-info .cinfo,.rtl .contact-info .cinfo{grid-template-columns:40px minmax(0,1fr)!important;column-gap:12px!important}
  html[dir="rtl"] body .contact-info .cinfo .ico,body.rtl .contact-info .cinfo .ico,.rtl .contact-info .cinfo .ico{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important}
  html[dir="rtl"] body .form-card,body.rtl .form-card,.rtl .form-card{padding:28px 22px!important}
}


/* =========================================================================
 * v2.9.0 - Navigation dropdown
 * "About" opens a panel holding Who We Are, HSEQ, Clients & Partners and
 * Certifications. Desktop: hover / keyboard focus. Mobile: the sub-menu is
 * shown inline and indented, so no extra tap is needed and the parent link
 * still works. Logical properties keep Arabic (RTL) mirrored automatically.
 * ===================================================================== */
.menu>li{position:relative}
.menu .menu-item-has-children>a{padding-inline-end:15px}
/* Down chevron. Physical borders on purpose: a down caret is identical in RTL. */
.menu .menu-item-has-children>a:before{content:"";position:absolute;inset-inline-end:0;top:50%;width:6px;height:6px;margin-top:-5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);opacity:.7;transition:opacity .2s}
.menu .menu-item-has-children:hover>a:before{opacity:1}
.menu .sub-menu{list-style:none;margin:0;padding:8px 0;position:absolute;top:100%;inset-inline-start:0;min-width:240px;background:#fff;border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:0 0 12px 12px;box-shadow:0 18px 40px rgba(16,42,67,.14);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60}
.menu .menu-item-has-children:hover>.sub-menu,.menu .menu-item-has-children:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.menu .sub-menu li{width:100%}
.menu .sub-menu a{display:block;padding:10px 20px;font-size:13.5px;line-height:1.45;color:var(--text);white-space:normal}
.menu .sub-menu a:hover{background:var(--light);color:var(--blue)}
.menu .sub-menu a:after{content:none!important}
.menu .sub-menu .current-menu-item>a,.menu .sub-menu a.active{color:var(--gold)}
.rtl .menu .sub-menu a{text-align:right}

/* Desktop: stretch the top-level items to the full header height so the panel
   drops from the bottom edge of the bar. The links themselves keep their own
   size, so the gold "active" underline stays exactly where it was. */
@media(min-width:981px){
  .site-header .nav .menu{align-self:stretch}
  .site-header .nav .menu>li{display:flex;align-items:center;align-self:stretch}
}

@media(max-width:980px){
  .menu>li{position:static}
  .menu .sub-menu{position:static;min-width:0;opacity:1;visibility:visible;transform:none;background:var(--light);border:0;border-radius:0;box-shadow:none;padding:0}
  .menu .sub-menu a{padding-inline-start:44px;padding-top:12px;padding-bottom:12px}
  .menu .menu-item-has-children>a:before{content:none}
  .menu .menu-item-has-children>a{padding-inline-end:24px}
  .rtl .site-header .menu .sub-menu a{text-align:right!important;padding-inline-start:44px!important}
}


/* =========================================================================
 * v2.10.0 - Contact form inquiry type (B2B / General Inquiry)
 * Two tick boxes, nothing ticked to begin with, exactly one allowed. The
 * Subject field follows the choice: a free-text box for B2B, the existing
 * dropdown for a general inquiry. The plugin's script adds .alk-qtype-ready
 * once it takes over; without it the page still shows the normal dropdown.
 *
 * Everything is scoped under .qtype-field so it outranks the form's own
 * ".field label" rule, which would otherwise make these choices look like
 * the small grey uppercase captions above each input.
 * ===================================================================== */
.qtype-field .qtype-row{position:relative;display:flex;flex-wrap:wrap;gap:12px}
.qtype-field .qtype-input{position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none}
.qtype-field .qtype{display:inline-flex;align-items:center;gap:10px;flex:1 1 0;min-width:150px;margin:0;padding:12px 15px;border:1px solid var(--line);border-radius:10px;background:#fbfcfd;cursor:pointer;transition:.18s;
  font-family:var(--font-body);font-size:14.5px;font-weight:500;line-height:1.3;letter-spacing:normal;text-transform:none;color:var(--ink);-webkit-user-select:none;user-select:none}
.qtype-field .qtype:before{content:"";display:block;flex:0 0 20px;width:20px;height:20px;border:1.5px solid #c8d2dc;border-radius:6px;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:13px 13px;transition:.18s}
.qtype-field .qtype:hover{border-color:var(--gold-light)}
.qtype-field .qtype-input:checked+.qtype{border-color:var(--gold);background:#fffaf1;font-weight:600}
.qtype-field .qtype-input:checked+.qtype:before{border-color:var(--gold);background-color:var(--gold);background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}
.qtype-field .qtype-input:focus-visible+.qtype{outline:2px solid var(--gold);outline-offset:2px}
.qtype-field .qtype-row.err .qtype{border-color:#e0a2a2;background:#fdf6f6}
.rtl .qtype-field .qtype{font-family:'Cairo','Tajawal',var(--font-body)}

/* Subject follows the chosen type. Without the plugin script the dropdown
   stays visible, so the form never ends up with no Subject field at all. */
.field.subj-b2b{display:none}
form.alk-qtype-ready .field.subj-general,
form.alk-qtype-ready .field.subj-b2b{display:none}
form.alk-qtype-ready.is-general .field.subj-general{display:block}
form.alk-qtype-ready.is-b2b .field.subj-b2b{display:block}

@media(max-width:560px){
  .qtype-field .qtype{flex:1 1 100%;min-width:0}
}

/* =========================================================================
 * v2.12.0 - Arabic snapshot figures
 * The Company Snapshot values are Latin-script figures ("100+", "KD 100m+").
 * In an RTL paragraph the trailing "+" is a neutral character, so bidi moves
 * it to the front and they read "+100" / "+KD 100m". Reading them left to
 * right fixes that; they stay centred, and nothing else is affected.
 * ===================================================================== */
.rtl .stat .num{direction:ltr}

/* =========================================================================
 * v2.13.0 - Company Snapshot: three cards per row
 * Six cards now sit as 3 across and 3 across. The stats column is widened a
 * little (and the cards tightened) so "KD 100m+" and the longer labels still
 * fit on one line. Scoped to .snapshot so no other section is touched.
 * ===================================================================== */
@media(min-width:981px){
  .snapshot{grid-template-columns:.85fr 1.15fr;gap:40px}
  .snapshot .stats{grid-template-columns:repeat(3,1fr);gap:16px}
  .snapshot .stat{padding:24px 14px}
  .snapshot .stat .num{font-size:26px}
}
/* Tablets: two per row rather than a six-card stack. */
@media(min-width:601px) and (max-width:980px){
  .snapshot .stats{grid-template-columns:repeat(2,1fr)!important}
}

/* =========================================================================
 * v2.14.0 - Project portfolio category headings
 * The headings live inside the same .proj-grid as the cards (spanning every
 * column) rather than splitting it into several grids, so the Media Manager
 * can still rebuild the card list in one pass.
 * ===================================================================== */
.proj-grid .proj-cat{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin:30px 0 0;
  font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.proj-grid .proj-cat:first-child{margin-top:0}
.proj-grid .proj-cat:after{content:"";flex:1 1 auto;height:2px;border-radius:2px;background:linear-gradient(to right,var(--gold),rgba(214,164,76,0))}
.rtl .proj-grid .proj-cat:after{background:linear-gradient(to left,var(--gold),rgba(214,164,76,0))}
@media(max-width:700px){
  .proj-grid .proj-cat{font-size:12px;letter-spacing:.1em;margin-top:22px}
}