/*
Theme Name: Expert Movers
Theme URI: https://expertmoversandpackers.com/
Author: Evil Genius
Author URI: https://expertmoversandpackers.com/
Description: A complete, SEO-friendly WordPress theme for movers and packers companies in Dubai. Quote form with WhatsApp integration, services, areas served, testimonials, FAQ schema and click-to-call.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: expertmovers
*/

:root{
  --blue:#0b2e5e; --blue2:#1450a0; --blue3:#081f42;
  --orange:#f97316; --orange-d:#d65f0a;
  --bg:#f6f8fc; --card:#ffffff; --ink:#1c2733; --muted:#5d6b7d;
  --line:#e3e9f2; --green:#22a355; --radius:14px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);font-size:16px;line-height:1.7;background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue2);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
section{padding:64px 0}
.sec-head{text-align:center;max-width:720px;margin:0 auto 40px}
.sec-head .kicker{display:inline-block;background:#e8f0fe;color:var(--blue2);font-weight:700;font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;padding:6px 16px;border-radius:999px;margin-bottom:12px}
.sec-head h2{font-size:clamp(26px,4vw,36px);line-height:1.25;margin-bottom:10px;color:var(--blue)}
.sec-head p{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff!important;font-weight:700;font-size:16px;padding:14px 32px;border-radius:10px;border:0;cursor:pointer;transition:.2s}
.btn:hover{background:var(--orange-d);transform:translateY(-2px)}
.btn.blue{background:var(--blue2)} .btn.blue:hover{background:var(--blue)}
.btn.green{background:var(--green)} .btn.big{font-size:18px;padding:16px 44px}

/* ===== Top bar + header ===== */
.topbar{background:var(--blue3);color:#cdd9ec;font-size:13.5px;padding:8px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.topbar a{color:#fff;font-weight:600}
.site-head{background:#fff;position:sticky;top:0;z-index:200;box-shadow:0 2px 14px rgba(11,46,94,.08)}
.head-in{display:flex;align-items:center;gap:24px;height:74px}
.logo{font-size:26px;font-weight:800;color:var(--blue);line-height:1.1}
.logo span{color:var(--orange)}
.logo small{display:block;font-size:10px;letter-spacing:3px;color:var(--muted);font-weight:600}
.main-nav{margin-left:auto}
.main-nav ul{display:flex;gap:4px;list-style:none}
.main-nav a{display:block;padding:10px 15px;font-weight:600;font-size:15px;color:var(--ink);border-radius:8px}
.main-nav a:hover{color:var(--orange);background:#fff4ea}
.head-call{display:flex;align-items:center;gap:10px;background:var(--blue);color:#fff!important;padding:11px 20px;border-radius:10px;font-weight:700}
.head-call:hover{background:var(--blue2)}
.hamburger{display:none;background:none;border:1.5px solid var(--line);border-radius:8px;font-size:19px;padding:7px 13px;cursor:pointer}

/* ===== Hero ===== */
.hero{background:linear-gradient(rgba(8,31,66,.82),rgba(8,31,66,.68)),url('assets/images/hero-movers.jpg') center/cover;color:#fff;padding:84px 0}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.hero h1{font-size:clamp(32px,5vw,52px);line-height:1.18;margin-bottom:16px}
.hero h1 span{color:var(--orange)}
.hero p.lead{font-size:18px;color:#dbe6f5;margin-bottom:26px;max-width:560px}
.hero-points{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:30px;font-size:14.5px;font-weight:600}
.hero-points span::before{content:"✓ ";color:var(--orange)}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.quote-card{background:#fff;color:var(--ink);border-radius:16px;padding:28px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.quote-card h3{font-size:20px;color:var(--blue);margin-bottom:4px}
.quote-card p{font-size:13.5px;color:var(--muted);margin-bottom:16px}
.quote-card label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin:10px 0 4px}
.quote-card input,.quote-card select,.quote-card textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px;font-size:14.5px;font-family:inherit}
.quote-card input:focus,.quote-card select:focus{outline:none;border-color:var(--orange)}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quote-card .btn{width:100%;justify-content:center;margin-top:16px}
.qnote{text-align:center;font-size:12.5px;color:var(--muted);margin-top:10px}

/* ===== Stats strip ===== */
.stats{background:var(--blue);color:#fff;padding:0}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.stat{padding:30px 10px;border-left:1px solid rgba(255,255,255,.12)}
.stat:first-child{border-left:0}
.stat b{display:block;font-size:34px;color:var(--orange)}
.stat span{font-size:14px;color:#cdd9ec}

/* ===== Services ===== */
#services{background:var(--bg)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{background:var(--card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);transition:.2s}
.svc:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(11,46,94,.12)}
.svc img{height:200px;width:100%;object-fit:cover}
.svc-body{padding:24px}
.svc-body h3{font-size:19px;color:var(--blue);margin-bottom:8px}
.svc-body p{font-size:14.5px;color:var(--muted);margin-bottom:14px}
.svc-body a{font-weight:700;color:var(--orange)}

/* ===== Why us ===== */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.why-grid img{border-radius:18px;box-shadow:0 20px 50px rgba(11,46,94,.15)}
.why-list{list-style:none;margin-top:20px}
.why-list li{display:flex;gap:14px;margin-bottom:18px}
.why-list .tick{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#e8f7ee;color:var(--green);display:grid;place-items:center;font-weight:800}
.why-list b{color:var(--blue)} .why-list p{font-size:14.5px;color:var(--muted);margin:2px 0 0}

/* ===== Areas ===== */
#areas{background:var(--blue3);color:#fff}
#areas .sec-head h2{color:#fff} #areas .sec-head p{color:#a9bcd8}
.area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.area{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:15px 18px;font-size:14.5px;font-weight:600;transition:.2s;color:#fff}
.area:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-2px)}

/* ===== Process ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;position:relative}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-20px;left:24px;width:44px;height:44px;border-radius:50%;background:var(--orange);color:#fff;font-weight:800;font-size:20px;display:grid;place-items:center}
.step h3{font-size:17px;color:var(--blue);margin:8px 0}
.step p{font-size:14px;color:var(--muted)}

/* ===== Testimonials ===== */
#reviews{background:var(--bg)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev{background:#fff;border-radius:var(--radius);padding:26px;border:1px solid var(--line)}
.rev .stars{color:#f5a623;font-size:18px;margin-bottom:10px}
.rev p{font-size:14.5px;color:var(--muted);font-style:italic}
.rev b{display:block;margin-top:14px;color:var(--blue)}
.rev small{color:var(--muted)}

/* ===== FAQ ===== */
.faq{max-width:800px;margin:0 auto}
.faq-item{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;overflow:hidden;background:#fff}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:18px 22px;font-size:16px;font-weight:700;color:var(--blue);cursor:pointer;display:flex;justify-content:space-between;gap:12px;font-family:inherit}
.faq-a{display:none;padding:0 22px 20px;color:var(--muted);font-size:15px}
.faq-item.open .faq-a{display:block}
.faq-item.open .faq-q span{transform:rotate(45deg)}
.faq-q span{font-size:22px;color:var(--orange);transition:.2s;flex-shrink:0}

/* ===== CTA banner ===== */
.cta-banner{background:linear-gradient(135deg,var(--orange),#e8590c);color:#fff;text-align:center;border-radius:0}
.cta-banner h2{font-size:clamp(26px,4vw,38px);margin-bottom:12px}
.cta-banner p{font-size:17px;margin-bottom:26px;opacity:.95}
.cta-banner .btn{background:#fff;color:var(--orange-d)!important}
.cta-banner .btn.wa{background:#25d366;color:#fff!important;margin-left:10px}

/* ===== Blog cards ===== */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.2s}
.pcard:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(11,46,94,.1)}
.pcard img{height:190px;width:100%;object-fit:cover}
.pcard .pb{padding:20px 22px}
.pcard h3{font-size:17px;line-height:1.4;margin-bottom:8px}
.pcard h3 a{color:var(--blue)}
.pcard .meta{font-size:12.5px;color:var(--muted)}

/* ===== Page / single ===== */
.page-hero{background:linear-gradient(rgba(8,31,66,.85),rgba(8,31,66,.7)),url('assets/images/truck.jpg') center/cover;color:#fff;padding:64px 0;text-align:center}
.page-hero h1{font-size:clamp(28px,4vw,42px);margin-bottom:8px}
.page-hero p{color:#cdd9ec}
.page-body{padding:56px 0}
.page-body .wrap-narrow{max-width:820px;margin:0 auto}
.content-area h2{color:var(--blue);font-size:24px;margin:30px 0 12px}
.content-area h3{color:var(--blue);font-size:19px;margin:24px 0 10px}
.content-area p{margin-bottom:14px;color:#33404f}
.content-area ul{margin:0 0 16px 22px;color:#33404f}
.content-area li{margin-bottom:8px}
.cta-box{background:#fff4ea;border:2px dashed var(--orange);border-radius:14px;padding:28px;text-align:center;margin:34px 0}
.cta-box h3{color:var(--blue);font-size:21px;margin-bottom:8px}
.cta-box .btn{margin:6px}
.loc-faq h2{color:var(--blue)}

/* ===== Footer ===== */
.site-foot{background:var(--blue3);color:#a9bcd8;padding:56px 0 0}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px;margin-bottom:36px}
.foot-grid h4{color:#fff;font-size:16px;margin-bottom:14px}
.foot-grid ul{list-style:none}.foot-grid li{margin-bottom:9px}
.foot-grid a{color:#a9bcd8;font-size:14.5px}.foot-grid a:hover{color:var(--orange)}
.foot-grid p{font-size:14.5px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px}
.foot-bottom b{color:#fff}

/* ===== Floating buttons ===== */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:300;width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3);font-size:28px}
.call-float{position:fixed;right:20px;bottom:92px;z-index:300;width:58px;height:58px;border-radius:50%;background:var(--blue2);display:none;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3);font-size:24px}

/* ===== Responsive ===== */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .svc-grid,.post-grid,.rev-grid{grid-template-columns:repeat(2,1fr)}
  .area-grid{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:0}
}
@media(max-width:760px){
  .main-nav{display:none;position:absolute;top:74px;left:0;right:0;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:12px 18px;z-index:300}
  .main-nav.open{display:block}.main-nav ul{flex-direction:column}
  .hamburger{display:block;margin-left:auto}
  .head-call span.txt{display:none}
  section{padding:46px 0}
  .svc-grid,.post-grid,.rev-grid{grid-template-columns:1fr}
  .area-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .call-float{display:grid}
  .topbar .wrap{justify-content:center;text-align:center}
}