/* Reset */
*{margin:0;padding:0;box-sizing:border-box}

html,body{overflow-x:hidden} /* remove horizontal scroll */
body{font-family:Arial,Helvetica,sans-serif;line-height:1.6;color:#333;background:#fdfdfd}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.container{width:90%;max-width:1200px;margin:auto}

/* Header */
.header{background:#3a0ca3;color:#fff;position:sticky;top:0;z-index:1000;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}
.brand{display:flex;align-items:center;font-size:1.2rem;font-weight:600;color:#fff}
.brand img{width:40px;margin-right:.5rem}
.nav-links ul{display:flex;gap:1.5rem}
.nav-links a{color:#fff;font-weight:500;transition:.3s}
.nav-links a:hover,.nav-links a.active{color:#ffb703}
.menu-toggle{display:none;background:none;border:none;cursor:pointer}
.hamburger,.hamburger::before,.hamburger::after{content:"";display:block;width:25px;height:3px;background:#fff;margin:5px 0;border-radius:2px}

/* Hero */
.hero{background:url("/assets/quick-home-appliance-repair-dubai-abu-dhabi.webp") no-repeat center/cover;min-height:90vh;display:flex;align-items:center;color:#fff;position:relative}
.hero-overlay{background:linear-gradient(to right,rgba(58,12,163,0.9),rgba(142,45,226,0.8));width:100%;height:100%;display:flex;align-items:center}
.hero-text{text-align:left;max-width:700px}
.hero-text h1{font-size:2.5rem;margin-bottom:1rem}
.hero-text p{margin-bottom:1.5rem;font-size:1.2rem}
.cta-group{display:flex;gap:1rem;margin-bottom:1.5rem}
.btn-primary{background:#ffb703;color:#3a0ca3;padding:.7rem 1.2rem;border-radius:5px;font-weight:bold}
.btn-primary:hover{background:#fb8500}
.btn-secondary{border:2px solid #fff;padding:.7rem 1.2rem;border-radius:5px;color:#fff}
.btn-secondary:hover{background:#fff;color:#3a0ca3}
.hero-stats{display:flex;gap:1.5rem;flex-wrap:wrap}
.hero-stats div{background:rgba(255,255,255,.2);padding:1rem 1.2rem;border-radius:8px;text-align:center;font-weight:600}

/* Why Choose Us */
.why{padding:3rem 0;text-align:center}
.why h2{margin-bottom:2rem;color:#3a0ca3}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;justify-items:center}
.why-card{background:#fff;padding:1.5rem;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.1);transition:.3s;width:100%;max-width:280px}
.why-card:hover{transform:translateY(-5px);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.why-card h3{margin:.8rem 0;color:#3a0ca3}

/* Services */
.services{padding:3rem 0;text-align:center;background:#f5f5f5}
.services h2{margin-bottom:2rem;color:#3a0ca3}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;justify-items:center}
.card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.1);transition:.3s;width:100%;max-width:280px;text-align:center}
.card:hover{transform:translateY(-5px);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.card h3{margin:1rem 0;color:#3a0ca3}
.card p{padding:0 1rem 1.5rem}

/* WhatsApp */
.whatsapp-float{position:fixed;bottom:20px;right:20px;display:flex;align-items:center;background:#25D366;color:#fff;padding:.7rem 1rem;border-radius:50px;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:.3s;z-index:999}
.whatsapp-float:hover{background:#1ebe57}
.whatsapp-icon{width:28px;height:28px;margin-right:.5rem}

/* Footer */
.footer{background:#3a0ca3;color:#fff;padding:2.5rem 1rem 1rem}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:1.5rem}
.footer h4{margin-bottom:1rem;color:#ffb703}
.footer a{color:#fff;transition:.3s}
.footer a:hover{color:#ffb703}
.footer-bottom{text-align:center;padding-top:1rem;border-top:1px solid rgba(255,255,255,.3)}

/* Responsive */
@media(max-width:992px){
  .hero-text h1{font-size:2rem;text-align:center}
  .hero-text p{text-align:center}
  .hero-stats{justify-content:center}
  .cta-group{justify-content:center}
}
@media(max-width:768px){
  .nav-links{position:absolute;top:60px;right:0;background:#3a0ca3;width:220px;transform:translateX(100%);transition:.3s}
  .nav.open .nav-links{transform:translateX(0)}
  .nav-links ul{flex-direction:column;padding:1rem}
  .menu-toggle{display:block}
  .hero{min-height:70vh;text-align:center}
  .hero-text{text-align:center}
  .whatsapp-float span{display:none} /* hide text keep icon */
}


    .about-container {
      max-width: 1000px;
      background: rgba(255, 255, 255, 0.1);
      padding: 40px 25px;
      border-radius: 18px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.25);
      animation: fadeIn 1.5s ease-in-out;
    }

    .about-title {
      font-size: 2.5rem;
      font-weight: bold;
      margin-bottom: 20px;
      background: linear-gradient(to right, #ffdd00, #fbb034, #ff4e00);
      
      -webkit-text-fill-color: transparent;
      animation: slideIn 1.2s ease forwards;
    }

    .about-section {
      margin: 25px 0;
    }

    .about-subtitle {
      font-size: 1.6rem;
      margin-bottom: 10px;
      font-weight: 600;
      color: #ffd369;
      animation: fadeUp 1s ease forwards;
    }

    .about-text {
      font-size: 1.05rem;
      line-height: 1.7;
      margin-top: 8px;
      animation: fadeUp 1.2s ease forwards;
    }

    ul {
      list-style: none;
      margin-top: 15px;
      padding: 0;
    }

    ul li {
      background: rgba(255, 255, 255, 0.15);
      margin: 8px auto;
      padding: 10px 12px;
      border-radius: 10px;
      font-size: 1rem;
      max-width: 600px;
      animation: fadeIn 1.2s ease forwards;
    }

    /* Animations */
    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.97); }
      to { opacity: 1; transform: scale(1); }
    }

    @keyframes slideIn {
      from { transform: translateY(-40px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    @keyframes fadeUp {
      from { transform: translateY(25px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    /* Responsive */
    @media (max-width: 768px) {
      .about-title { font-size: 2rem; }
      .about-subtitle { font-size: 1.3rem; }
      .about-text { font-size: 0.95rem; }
    }

    @media (max-width: 480px) {
      .about-container { padding: 20px 15px; }
      .about-title { font-size: 1.6rem; }
      .about-subtitle { font-size: 1.1rem; }
      .about-text { font-size: 0.9rem; }
    }


.footer-map {
  background: #f8f9fa; /* light background */
  padding: 20px 10px;
  text-align: center;
  border-top: 3px solid #ddd;
}

.footer-map .map-heading {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}

.footer-map .map-container {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}