@import url('https://fonts.googleapis.com/css2?family=Changa:wght@400;500;600;700;800&display=swap');
:root{--navy:#071d31;--navy2:#0b2d4d;--gold:#f3b72f;--gold2:#ffcc58;--ink:#102030;--muted:#64748b;--bg:#f4f7fb;--white:#fff;--line:#dde5ee;--success:#0f9d58;--danger:#c0392b;--radius:22px;--shadow:0 18px 55px rgba(3,26,47,.14)}
*{box-sizing:border-box}button,input,select,textarea{font-family:inherit}html{scroll-behavior:smooth}body{margin:0;font-family:"Changa",Tahoma,Arial,sans-serif;background:#fff;color:var(--ink);line-height:1.75}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(1180px,92%);margin:auto}.topbar{background:var(--navy);color:#fff;font-size:13px}.topbar-inner{display:flex;justify-content:space-between;gap:20px;padding:7px 0}.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);box-shadow:0 2px 12px rgba(0,0,0,.06)}.nav-wrap{height:82px;display:flex;align-items:center;gap:24px}.brand img{width:260px;height:67px;object-fit:contain;border-radius:12px}.nav{display:flex;gap:22px;margin-right:auto;font-size:15px;font-weight:700}.nav a{padding:9px 0;position:relative}.nav a:after{content:"";position:absolute;bottom:0;right:0;width:0;height:3px;background:var(--gold);transition:.25s}.nav a:hover:after{width:100%}.menu-btn{display:none;border:0;background:var(--navy);color:#fff;border-radius:10px;padding:8px 12px;font-size:20px}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:13px 24px;font-weight:800;border:1px solid transparent;transition:.2s;cursor:pointer}.btn:hover{transform:translateY(-2px)}.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#161616;box-shadow:0 8px 20px rgba(243,183,47,.28)}.btn-outline{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.08)}.hero{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden}.hero-bg{position:absolute;inset:0;background:url('../images/hero.jpg') center/cover no-repeat;transform:scale(1.03)}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,29,49,.98) 0%,rgba(7,29,49,.85) 36%,rgba(7,29,49,.2) 73%,rgba(7,29,49,.05) 100%)}.hero-content{position:relative;z-index:2}.hero-copy{max-width:650px;color:#fff;padding:65px 0}.eyebrow,.section-kicker{display:inline-block;color:var(--gold);font-weight:800;letter-spacing:.2px;margin-bottom:8px}.hero h1{font-size:58px;line-height:1.25;margin:8px 0 16px}.hero p{font-size:21px;max-width:620px;color:#eef5fb}.hero-badges{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}.hero-badges span{border:1px solid rgba(255,255,255,.22);background:rgba(2,17,29,.45);padding:8px 12px;border-radius:999px;font-size:13px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.stats{margin-top:-36px;position:relative;z-index:4}.stat-grid{background:#fff;border-radius:24px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;border:1px solid #eef2f6}.stat-grid>div{padding:24px;text-align:center;border-left:1px solid #edf1f5}.stat-grid>div:last-child{border-left:0}.stat-grid strong{font-size:34px;color:var(--navy);display:block}.stat-grid span{color:var(--muted);font-weight:700}.section{padding:86px 0}.section.alt{background:var(--bg)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}.section-head h2,.about-grid h2,.calc-panel h2{font-size:36px;line-height:1.3;margin:4px 0 10px}.section-head p{max-width:430px;color:var(--muted)}.about-grid{display:grid;grid-template-columns:1.4fr .7fr;gap:40px;align-items:center}.about-grid p{color:var(--muted);font-size:17px}.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}.checks span{background:#f6f9fc;border:1px solid var(--line);padding:12px;border-radius:12px;font-weight:700}.about-card{background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;padding:34px;border-radius:var(--radius);box-shadow:var(--shadow)}.about-card .big-number{font-size:68px;color:var(--gold);font-weight:900;line-height:1}.about-card b{font-size:22px}.about-card p{color:#d5e2ed}.cards.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.service-card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(12,40,65,.08);border:1px solid #e8eef4}.service-card>img{width:100%;height:205px;object-fit:cover}.card-body{padding:20px;position:relative}.icon-bubble{position:absolute;top:-28px;left:20px;background:var(--gold);width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:25px;border:5px solid #fff}.card-body h3{margin:8px 0 7px;font-size:20px}.card-body p{margin:0 0 13px;color:var(--muted);min-height:58px}.card-body a{color:#a96c00;font-weight:800}.calculator-section{background:linear-gradient(135deg,#061b2e,#0a3557);padding:75px 0;color:#fff;position:relative;overflow:hidden}.calculator-section:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(243,183,47,.09);left:-130px;top:-90px}.calculator-grid{position:relative;display:grid;grid-template-columns:.8fr 1.45fr .75fr;gap:24px;align-items:stretch}.calc-visual{border-radius:22px;overflow:hidden;position:relative;min-height:520px;background:#102c45}.calc-visual img{width:100%;height:100%;object-fit:cover}.calc-visual-caption{position:absolute;bottom:0;inset-inline:0;background:linear-gradient(transparent,rgba(1,17,29,.96));padding:90px 22px 22px;display:flex;flex-direction:column}.calc-panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:22px;padding:28px;backdrop-filter:blur(8px)}.section-kicker.light{color:var(--gold2)}.muted-light{color:#c9d7e3}.calc-form{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.calc-form label{font-size:13px;font-weight:700}.calc-form input,.calc-form select,.calc-form textarea{width:100%;margin-top:6px;border:1px solid rgba(255,255,255,.16);background:#09263f;color:#fff;border-radius:10px;padding:12px;outline:none}.calc-form input::placeholder,.calc-form textarea::placeholder{color:#8ba0b2}.calc-form select option{color:#111;background:#fff}.calc-form .full{grid-column:1/-1}.live-estimate{background:#09253c;border:1px dashed rgba(243,183,47,.6);padding:12px 14px;border-radius:10px;color:#ffd76f;font-weight:800}.calc-note{font-size:12px;color:#aebdca}.alert{padding:13px 15px;border-radius:11px;margin:12px 0}.alert.error{background:#5f1e20;border:1px solid #a94f53}.alert.success{background:#0a4a33;border:1px solid #2a8c69}.why-box{border:1px solid rgba(243,183,47,.55);border-radius:22px;padding:24px;background:rgba(0,0,0,.08)}.why-box h3{font-size:28px;color:var(--gold);margin-top:0}.why-box ul{list-style:none;padding:0;margin:0}.why-box li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.09)}.why-box li:before{content:"✓";color:var(--gold);font-weight:bold;margin-left:8px}.projects-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.project-card{border:1px solid #e4eaf0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.06)}.project-card img{width:100%;height:165px;object-fit:cover}.project-card div{padding:15px}.project-card span{font-size:12px;background:#fff2cf;color:#956500;padding:4px 8px;border-radius:999px}.project-card h3{font-size:17px;margin:9px 0 4px}.project-card p{font-size:13px;color:var(--muted);margin:0}.cta-strip{background:var(--navy);color:#fff;padding:34px 0}.cta-strip .container{display:flex;justify-content:space-between;align-items:center}.cta-strip span{color:var(--gold)}.cta-strip h2{margin:3px 0}.footer{position:relative;background:#051625;color:#d7e1ea;padding-top:52px;overflow:hidden}.footer-bg{position:absolute;inset:0;background:url('../images/footer-road.jpg') center bottom/cover no-repeat;opacity:.15}.footer-grid{position:relative;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px;padding-bottom:40px}.footer-brand img{width:270px;border-radius:12px;margin-bottom:15px}.footer h3{color:#fff}.footer a{color:var(--gold)}.copyright{position:relative;text-align:center;border-top:1px solid rgba(255,255,255,.12);padding:14px;font-size:12px}.whatsapp-float{position:fixed;bottom:22px;left:22px;background:#19a75b;color:#fff;padding:12px 18px;border-radius:999px;font-weight:800;box-shadow:0 10px 28px rgba(0,0,0,.25);z-index:70}
@media(max-width:980px){.nav{display:none;position:absolute;top:82px;right:4%;left:4%;background:#fff;padding:16px;border-radius:14px;box-shadow:var(--shadow);flex-direction:column}.nav.open{display:flex}.menu-btn{display:block;margin-right:auto}.nav-cta{display:none}.brand img{width:220px}.hero h1{font-size:44px}.calculator-grid{grid-template-columns:1fr}.calc-visual{min-height:330px}.cards.services-grid{grid-template-columns:repeat(2,1fr)}.projects-grid{grid-template-columns:repeat(2,1fr)}.about-grid{grid-template-columns:1fr}.why-box{order:3}}
@media(max-width:680px){.topbar-inner{flex-direction:column;gap:2px;text-align:center}.nav-wrap{height:72px}.brand img{width:185px;height:55px}.hero{min-height:620px}.hero-bg{background-position:62% center}.hero-overlay{background:linear-gradient(90deg,rgba(7,29,49,.98),rgba(7,29,49,.75))}.hero-copy{padding:55px 0}.hero h1{font-size:36px}.hero p{font-size:17px}.stats{margin-top:-24px}.stat-grid{grid-template-columns:repeat(2,1fr)}.stat-grid>div{border-bottom:1px solid #edf1f5}.section{padding:60px 0}.section-head{align-items:start;flex-direction:column}.section-head h2,.about-grid h2,.calc-panel h2{font-size:29px}.cards.services-grid{grid-template-columns:1fr}.checks{grid-template-columns:1fr}.calc-form{grid-template-columns:1fr}.calc-form .full{grid-column:auto}.projects-grid{grid-template-columns:1fr}.cta-strip .container{flex-direction:column;align-items:flex-start;gap:18px}.footer-grid{grid-template-columns:1fr}.whatsapp-float{font-size:13px;bottom:14px;left:14px}}
.quote-success{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,#075139,#0b6c4c)!important;border:1px solid #35a67f!important;box-shadow:0 14px 32px rgba(0,0,0,.18)}
.quote-success>div{flex:1}.quote-success b{font-size:18px}.quote-success span{display:inline-block;margin-top:3px;color:#e1f7ee}.quote-download-btn{white-space:nowrap;border:0;font-family:inherit}.quote-download-btn:disabled{opacity:.75;cursor:wait;transform:none}
@media(max-width:680px){.quote-success{align-items:stretch;flex-direction:column}.quote-download-btn{width:100%;padding:15px 12px}}

/* V5 - clearer company logo without changing the logo design */
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{width:320px;height:78px;object-fit:contain;object-position:center;background:#fff;border-radius:10px;padding:3px 6px;box-shadow:0 2px 8px rgba(7,29,49,.06);image-rendering:auto;transform:translateZ(0)}
.footer-brand img{width:320px;height:auto;object-fit:contain;background:#fff;padding:4px 7px;border-radius:10px;image-rendering:auto}
@media(max-width:980px){.brand img{width:275px;height:68px}}
@media(max-width:680px){.nav-wrap{height:80px}.brand img{width:225px;height:60px;padding:2px 4px}.footer-brand img{width:min(290px,100%)}}
@media(max-width:390px){.brand img{width:205px;height:56px}.nav-wrap{gap:10px}}

/* Typography V6 — inspired by the company logo */
.hero h1,.section-head h2,.about-grid h2,.calc-panel h2,.why-box h3,.cta-strip h2,.footer h3,.card-body h3,.project-card h3{font-family:"Changa",Tahoma,Arial,sans-serif;font-weight:900;letter-spacing:-.35px}
.nav,.btn,.eyebrow,.section-kicker,.stat-grid strong,.stat-grid span,.checks span{font-family:"Changa",Tahoma,Arial,sans-serif}
body{font-weight:500}


/* V7 - logo-like Arabic typography: force Changa across the public site */
html,body,button,input,select,textarea,a,p,span,div,label,li,td,th,strong,b,h1,h2,h3,h4,h5,h6{font-family:"Changa",Tahoma,Arial,sans-serif !important}
body{font-weight:500}
h1,h2,h3,h4,.hero h1,.section-head h2,.about-grid h2,.calc-panel h2,.why-box h3,.cta-strip h2,.footer h3,.card-body h3,.project-card h3{font-weight:800 !important;letter-spacing:0 !important}
.nav,.btn,.eyebrow,.section-kicker,.checks span,.stat-grid span{font-weight:700 !important}

/* V9 - work items checkboxes and youtube sections */
.hero-content.with-video{display:grid;grid-template-columns:.95fr 1.1fr;gap:26px;align-items:center}
.hero-media{position:relative;z-index:2}
.hero-video-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:16px;border-radius:24px;backdrop-filter:blur(8px);box-shadow:var(--shadow)}
.hero-video-card iframe,.video-frame iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:18px;background:#000}
.work-items-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}
.work-item-option{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid rgba(255,255,255,.18);background:#09263f;border-radius:14px;cursor:pointer;transition:.2s}
.work-item-option input{display:none}
.work-item-option .box{width:24px;height:24px;border:2px solid #9bb4c7;border-radius:7px;position:relative;flex:0 0 24px;margin-top:2px}
.work-item-option .box:after{content:"";position:absolute;inset:3px;background:var(--gold);border-radius:4px;opacity:0;transform:scale(.7);transition:.18s}
.work-item-option.checked{border-color:rgba(243,183,47,.95);background:rgba(243,183,47,.11);box-shadow:0 8px 22px rgba(243,183,47,.12)}
.work-item-option.checked .box{border-color:var(--gold)}
.work-item-option.checked .box:after{opacity:1;transform:scale(1)}
.work-item-option .content{display:flex;flex-direction:column;gap:2px}
.work-item-option strong{color:#fff;font-size:15px}
.work-item-option small,.work-items-help,.selected-items-preview{color:#cbd8e2}
.selected-items-preview{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:12px 14px;border-radius:10px;font-size:13px}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.video-card{background:#fff;border:1px solid #e5ebf1;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(12,40,65,.08)}
.video-card-body{padding:18px}
.video-card-body h3{margin:0 0 8px;font-size:20px}
.video-card-body p{margin:0;color:var(--muted)}
@media(max-width:980px){.hero-content.with-video{grid-template-columns:1fr}.hero-media{order:2}.work-items-grid,.video-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.work-items-grid,.video-grid{grid-template-columns:1fr}}