/* ============================================================
   shared.css — Common styles for all service & location pages
   (index.html has these inline; other pages import this file)
   ============================================================ */

/* Hero Section */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity 1s ease-in-out}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0.4),rgba(0,0,0,0.65))}
.hero-bg.fade{opacity:0}
.hero-badge{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.3);padding:0.5rem 1rem;border-radius:100px;font-size:0.85rem;font-weight:500;margin-bottom:1.25rem}
.hero-badge svg{width:14px;height:14px}
.hero-content{position:relative;z-index:1;text-align:center;color:#fff;padding:2rem;max-width:700px}
.hero-content h1{font-size:clamp(1.85rem,4.5vw,3.2rem);font-weight:700;line-height:1.2;margin-bottom:0.75rem}
.hero-content p{font-size:1.1rem;opacity:0.9;margin-bottom:2rem;max-width:540px;margin-left:auto;margin-right:auto}
.hero-buttons{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

/* Sections */
.section{padding:4.5rem 0}
.section-alt{background:var(--gray-50,#f9fafb)}
.section-title{text-align:center;margin-bottom:3rem}
.section-title h2{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:700;color:var(--gray-900,#111827);margin-bottom:0.5rem}
.section-title p{color:var(--gray-600,#4b5563);font-size:1.05rem;max-width:600px;margin:0 auto}

/* Benefits / Features Grid */
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.benefit-card{background:#fff;border-radius:12px;padding:2rem;border:1px solid var(--gray-200,#e5e7eb);text-align:center;transition:all 0.3s}
.benefit-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,0.08);border-color:var(--primary,#0891b2)}
.benefit-icon{width:56px;height:56px;background:linear-gradient(135deg,var(--primary-light,#22d3ee),var(--primary,#0891b2));border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem}
.benefit-icon svg{width:26px;height:26px;color:#fff}
.benefit-card h3{font-size:1.1rem;font-weight:600;margin-bottom:0.6rem;color:var(--gray-900,#111827)}
.benefit-card p{color:var(--gray-600,#4b5563);font-size:0.9rem;line-height:1.6}

/* Services Grid (location pages list of service links) */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.service-card{background:#fff;border-radius:12px;padding:2rem;border:1px solid var(--gray-200,#e5e7eb);transition:all 0.3s;text-align:center}
.service-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,0.1);border-color:var(--primary,#0891b2)}
.service-icon{width:60px;height:60px;background:linear-gradient(135deg,var(--primary-light,#22d3ee),var(--primary,#0891b2));border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem}
.service-icon svg{width:28px;height:28px;color:#fff}
.service-card h3{font-size:1.2rem;font-weight:600;margin-bottom:0.6rem;color:var(--gray-900,#111827)}
.service-card p{color:var(--gray-600,#4b5563);font-size:0.9rem;line-height:1.6}

/* Process / Steps Grid */
.process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}
.process-step{text-align:center;padding:1.5rem}
.step-number{width:52px;height:52px;background:linear-gradient(135deg,var(--primary-light,#22d3ee),var(--primary,#0891b2));color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;margin:0 auto 1rem}
.process-step h3{font-size:1.05rem;font-weight:600;margin-bottom:0.5rem}
.process-step p{color:var(--gray-600,#4b5563);font-size:0.9rem}

/* Content Two-Column Layout */
.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.content-image{border-radius:12px;overflow:hidden}
.content-image img{width:100%;height:100%;object-fit:cover}

/* Checklist / Feature List */
.feature-list{list-style:none;display:flex;flex-direction:column;gap:0.75rem;margin-top:1.5rem}
.feature-list li{display:flex;align-items:flex-start;gap:0.75rem;color:var(--gray-700,#374151);font-size:0.95rem}
.feature-list li svg{width:18px;height:18px;color:var(--primary,#0891b2);flex-shrink:0;margin-top:2px}

/* CTA Section */
.cta-section{background:linear-gradient(135deg,var(--sidebar-bg,#0c4a6e),var(--primary-dark,#0e7490));color:#fff;padding:4.5rem 0;text-align:center}
.cta-content{max-width:600px;margin:0 auto;padding:0 1.5rem}
.cta-section h2{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:700;margin-bottom:1rem}
.cta-section p{opacity:0.9;margin-bottom:2rem;font-size:1.05rem}
.cta-section .btn-primary{background:#fff;color:var(--primary-dark,#0e7490)}
.cta-section .btn-primary svg{stroke:var(--primary-dark,#0e7490)}
.cta-section .btn-primary:hover{background:var(--gray-100,#f3f4f6)}
.cta-buttons{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

/* Footer */
.footer{background:var(--gray-900,#111827);color:#fff;padding-top:4rem}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,0.1)}
.footer-brand a{display:flex;align-items:center;gap:0.5rem;font-weight:600;font-size:0.95rem;color:#fff;margin-bottom:0.5rem}
.footer-brand img{width:24px;height:24px;object-fit:contain}
.footer-brand svg{width:24px;height:24px;color:var(--primary-light,#22d3ee)}
.footer-tagline{color:rgba(255,255,255,0.55);font-size:0.88rem;line-height:1.6;margin-top:0.5rem}
.footer-heading{font-weight:600;margin-bottom:1rem;color:#fff;font-size:0.95rem}
.footer-column ul{list-style:none}
.footer-column ul li{margin-bottom:0.5rem}
.footer-column ul li a{color:rgba(255,255,255,0.6);transition:color 0.2s;font-size:0.88rem}
.footer-column ul li a:hover{color:#fff}
.contact-list{list-style:none}
.contact-list li{display:flex;align-items:center;gap:0.5rem;color:rgba(255,255,255,0.6);font-size:0.88rem;margin-bottom:0.5rem}
.contact-list svg{width:16px;height:16px;flex-shrink:0}
.social-links{display:flex;gap:0.75rem;margin-bottom:1rem}
.social-icon{width:36px;height:36px;background:rgba(255,255,255,0.1);border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background 0.2s}
.social-icon:hover{background:var(--primary,#0891b2)}
.social-icon svg{width:18px;height:18px}
.footer-hours{color:rgba(255,255,255,0.6);font-size:0.84rem}
.footer-hours p{margin:0.2rem 0}
.footer-bottom{padding:1.5rem 0}
.footer-bottom .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-bottom p{color:rgba(255,255,255,0.45);font-size:0.84rem;margin:0}
.footer-bottom a{color:rgba(255,255,255,0.45);font-size:0.84rem;transition:color 0.2s}
.footer-bottom a:hover{color:#fff}

/* WhatsApp Floating Button */
.whatsapp-float{position:fixed;bottom:28px;right:28px;width:58px;height:58px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,0.45);z-index:998;transition:all 0.3s}
.whatsapp-float:hover{transform:scale(1.1);box-shadow:0 6px 22px rgba(37,211,102,0.65)}
.whatsapp-float svg{width:30px;height:30px;color:#fff}

/* ── Responsive: Mobile Sidebar + Header ── */
@media(max-width:1024px){
  .main-content{margin-top:60px;margin-left:0 !important}
  .content-grid{grid-template-columns:1fr;gap:2rem}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── Responsive: Tablet (768px) ── */
@media(max-width:768px){
  .hero{min-height:100dvh}
  .hero-content{padding:1.5rem}
  .hero-content h1{font-size:clamp(1.65rem,6vw,2.4rem)}
  .hero-content p{font-size:1rem;margin-bottom:1.5rem}
  .hero-buttons{flex-direction:column;align-items:center;gap:0.75rem}
  .hero-buttons .btn-primary,.hero-buttons .btn-secondary{width:100%;max-width:320px;justify-content:center}
  .section{padding:3rem 0}
  .section-title{margin-bottom:2rem}
  .section-title h2{font-size:1.6rem}
  .section-title p{font-size:0.97rem}
  .benefits-grid{grid-template-columns:1fr 1fr;gap:1rem}
  .benefit-card{padding:1.5rem 1rem}
  .services-grid{grid-template-columns:1fr 1fr;gap:1rem}
  .service-card{padding:1.5rem 1rem}
  .process-grid{grid-template-columns:1fr 1fr;gap:1.25rem}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-bottom .container{flex-direction:column;text-align:center}
  .whatsapp-float{bottom:20px;right:16px;width:52px;height:52px}
}

/* ── Responsive: Small Mobile (480px) ── */
@media(max-width:480px){
  .hero-content h1{font-size:1.65rem}
  .benefits-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .cta-section{padding:3rem 0}
  .cta-content{padding:0 1rem}
  .container{padding:0 1rem}
}