/* ═══════════════════════════════════════════════════
   Dhoaa Al Shams — Main Stylesheet
   Static file (not Blade-compiled) so @media and
   @keyframes are never touched by the template engine.
═══════════════════════════════════════════════════ */

/* ── Reset ── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;background:#FAF6F1;color:#5B5C66;-webkit-font-smoothing:antialiased}
::selection{background:#EC6A2B;color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

/* ── Keyframe Animations ── */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Scroll reveal ── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ── Hover helpers ── */
.nav-link:hover{color:#EC6A2B !important}
.card-hover:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(34,35,42,.1) !important}
.cta-hover:hover{transform:translateY(-2px)}
.footer-link:hover{color:#fff !important}

/* ── Prose (blog body) ── */
.prose{font-size:17px;line-height:1.8;color:#3A3B45}
.prose h2{font-size:26px;font-weight:700;color:#22232A;margin:36px 0 14px;letter-spacing:-.4px}
.prose h3{font-size:20px;font-weight:700;color:#22232A;margin:28px 0 10px}
.prose p{margin-bottom:20px}
.prose ul,.prose ol{margin:0 0 20px 24px}
.prose li{margin-bottom:8px}
.prose strong{color:#22232A;font-weight:700}
.prose a{color:#EC6A2B;text-decoration:underline;text-underline-offset:3px}
.prose blockquote{border-left:4px solid #EC6A2B;padding:12px 20px;background:#FFF5EE;border-radius:0 8px 8px 0;margin:24px 0;color:#5B5C66;font-style:italic}
.prose img{max-width:100%;border-radius:12px;margin:20px 0}
.prose hr{border:none;border-top:1px solid #ECE7E0;margin:36px 0}

/* ═══════════════════════════════════════════════════
   LAYOUT CLASSES
═══════════════════════════════════════════════════ */

.container{max-width:1240px;margin:0 auto;padding-left:32px;padding-right:32px}
.sec-pad{padding-top:96px;padding-bottom:96px}

/* Grids — desktop */
.hero-grid        {display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.about-grid       {display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.about-features   {display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.services-grid    {display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.why-grid         {display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.why-stats        {display:flex;gap:34px;margin-top:34px;padding-top:30px;border-top:1px solid #ECE7E0;flex-wrap:wrap}
.segments-grid    {display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.testimonials-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.blog-grid        {display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cta-grid         {display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;padding:64px 60px}
.footer-grid      {display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.stats-band-inner {display:grid;gap:40px;align-items:center}

/* Consultation page */
.consult-layout   {display:grid;grid-template-columns:1fr 1.5fr;gap:60px;align-items:start;max-width:1100px;margin:0 auto;padding:72px 32px 96px}
.form-grid-2      {display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}

/* Hero floating cards */
.hero-img-col  {position:relative;height:520px}
.hero-float-1  {position:absolute;top:34px;right:-16px;background:#fff;border-radius:18px;padding:16px 18px;box-shadow:0 18px 40px rgba(34,35,42,.16);width:212px;animation:floaty 6s ease-in-out infinite}
.hero-float-2  {position:absolute;bottom:-18px;left:-22px;background:#fff;border-radius:18px;padding:16px 18px;box-shadow:0 18px 40px rgba(34,35,42,.16);width:230px;animation:floaty2 7s ease-in-out infinite}
.about-badge   {position:absolute;bottom:-18px;right:-18px;background:#EC6A2B;color:#fff;border-radius:16px;padding:16px 20px;box-shadow:0 12px 30px rgba(236,106,43,.35);text-align:center}

/* Nav */
.nav-inner     {max-width:1240px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-links     {display:flex;align-items:center;gap:26px;font-size:14.5px;font-weight:600;color:#3A3B45}
.nav-cta       {display:inline-block}
.nav-hamburger {display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;background:none;border:none}
.nav-hamburger span{display:block;width:24px;height:2px;background:#22232A;border-radius:2px;transition:transform .3s,opacity .3s}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer */
.mobile-nav{display:none;flex-direction:column;background:#fff;border-top:1px solid #ECE7E0;padding:8px 0 20px}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:14px 28px;font-size:15px;font-weight:600;color:#22232A;border-bottom:1px solid #F4F5F7;display:block;transition:background .15s,color .15s}
.mobile-nav a:hover{color:#EC6A2B;background:#FAF6F1}
.mobile-nav a:last-child{border:none}
.mob-cta{margin:14px 20px 0 !important;background:#EC6A2B !important;color:#fff !important;border-radius:12px !important;text-align:center;padding:14px 20px !important;border:none !important}
.mob-cta:hover{background:#D55A22 !important;color:#fff !important}

/* ═══════════════════════════════════════════════════
   OVERFLOW PREVENTION
═══════════════════════════════════════════════════ */
html{overflow-x:hidden;max-width:100%}
body{overflow-x:hidden}

/* Grid children: override min-width:auto (grid's #1 overflow culprit) */
.hero-grid>*,.about-grid>*,.about-features>*,.services-grid>*,
.why-grid>*,.segments-grid>*,.testimonials-grid>*,.blog-grid>*,
.cta-grid>*,.footer-grid>*,.consult-layout>*,.form-grid-2>*,
.blog-content-grid>*,.service-content-grid>*,.service-hero-band>*,
.posts-grid>*,.service-items-grid>*{min-width:0}

/* Inputs and text */
input,textarea,select{max-width:100%}
.h1-hero,.h2-sec,.prose{overflow-wrap:break-word}

/* ── Inner-page layout grids (declared here so media queries can override) ── */
.blog-content-grid  {display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:start}
.service-content-grid{display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start}
.service-hero-band  {display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.service-items-grid {display:grid;grid-template-columns:1fr 1fr;gap:14px}
.posts-grid         {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:28px}

/* ═══════════════════════════════════════════════════
   TABLET LANDSCAPE  ≤ 1024px
═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .container{padding-left:24px;padding-right:24px}
  .nav-inner{padding:14px 24px}
  .hero-grid{gap:32px}
  .hero-img-col{height:420px}
  .hero-float-1{right:0;width:185px}
  .hero-float-2{left:-8px;width:200px}
  .about-grid{gap:40px}
  .cta-grid{padding:48px 40px;gap:32px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  .consult-layout{gap:40px;padding:56px 24px 80px}
}

/* ═══════════════════════════════════════════════════
   TABLET PORTRAIT  ≤ 768px
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Nav */
  .nav-links{display:none !important}
  .nav-cta{display:none !important}
  .nav-hamburger{display:flex}
  .nav-inner{padding:12px 20px}

  /* Container & spacing */
  .container{padding-left:20px;padding-right:20px}
  .sec-pad{padding-top:60px;padding-bottom:60px}

  /* All two-column grids → single column */
  .hero-grid{grid-template-columns:1fr !important}
  .about-grid{grid-template-columns:1fr !important;gap:32px}
  .why-grid{grid-template-columns:1fr !important;gap:32px}
  .testimonials-grid{grid-template-columns:1fr !important;gap:28px}
  .cta-grid{grid-template-columns:1fr !important;padding:36px 28px;gap:28px}

  /* Three-column → two-column */
  .about-features{grid-template-columns:1fr 1fr !important}
  .services-grid{grid-template-columns:1fr 1fr !important}
  .segments-grid{grid-template-columns:1fr 1fr !important}
  .blog-grid{grid-template-columns:1fr 1fr !important}

  /* Stats band — !important overrides the Blade-generated inline grid-template-columns */
  .stats-band-inner{grid-template-columns:1fr 1fr !important}

  /* Footer */
  .footer-grid{grid-template-columns:1fr 1fr !important;gap:28px}

  /* Consultation layout */
  .consult-layout{grid-template-columns:1fr !important;padding:40px 20px 60px;gap:32px}
  .form-grid-2{grid-template-columns:1fr !important}

  /* Hero image hidden on mobile — no space */
  .hero-img-col{display:none !important}

  /* About badge repositioned */
  .about-badge{bottom:-12px;right:-8px;padding:12px 14px}

  /* Font scaling */
  .h1-hero{font-size:38px !important;letter-spacing:-1px !important}
  .h2-sec{font-size:30px !important;letter-spacing:-.5px !important}
  .cta-headline{font-size:28px !important;letter-spacing:-.5px !important}

  /* Stats hero mini-band */
  .stats-hero-row{flex-wrap:wrap;gap:16px !important}

  /* Page hero padding */
  .page-hero{padding:44px 20px 40px !important}

  /* Inner-page grids → stack on tablet */
  .blog-content-grid,.service-content-grid{grid-template-columns:1fr !important;gap:36px !important}
  .service-hero-band{grid-template-columns:1fr !important;gap:20px !important}
  .posts-grid{grid-template-columns:1fr 1fr !important;gap:20px !important}
}

/* ═══════════════════════════════════════════════════
   MOBILE  ≤ 480px
═══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .container{padding-left:16px;padding-right:16px}
  .sec-pad{padding-top:48px;padding-bottom:48px}

  /* All grids → single column */
  .about-features{grid-template-columns:1fr !important}
  .services-grid{grid-template-columns:1fr !important}
  .segments-grid{grid-template-columns:1fr !important}
  .blog-grid{grid-template-columns:1fr !important}
  .footer-grid{grid-template-columns:1fr !important;gap:32px}
  .form-grid-2{grid-template-columns:1fr !important}

  /* Stats keep 2 cols on mobile — they're compact */
  .stats-band-inner{grid-template-columns:1fr 1fr !important}

  /* Why-us stats stack */
  .why-stats{flex-direction:column !important;gap:16px}

  /* CTA */
  .cta-grid{padding:28px 18px !important}

  /* Float cards hidden on tiny screens */
  .hero-float-1,.hero-float-2,.about-badge{display:none !important}

  /* Font scaling */
  .h1-hero{font-size:30px !important;letter-spacing:-.6px !important;line-height:1.1 !important}
  .h2-sec{font-size:24px !important;letter-spacing:-.3px !important}
  .cta-headline{font-size:24px !important}

  /* Prose */
  .prose{font-size:15px}
  .prose h2{font-size:20px}
  .prose h3{font-size:17px}

  /* Consultation form padding */
  .consult-form-card{padding:24px 20px !important}

  /* Page hero */
  .page-hero{padding:36px 16px 32px !important}
  .page-hero h1{font-size:28px !important;letter-spacing:-.4px !important}
  .page-hero p{font-size:15px !important}

  /* Inner-page grids → single column on phone */
  .posts-grid{grid-template-columns:1fr !important}
  .service-items-grid{grid-template-columns:1fr !important}
}