:root{
  --bg:#0f1114;
  --accent:#07C1FF;
  --muted:#EDEDED;
  --card:#0b0b0c;
  --maxw:1000px;
}
*{box-sizing:border-box}
body{
  font-family:Inter, Roboto, Arial, sans-serif;
  margin:0;
  color:var(--muted);
  background:linear-gradient(180deg,#0f1114,#0b0b0c);
  -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--maxw);margin:0 auto;padding:16px;}
.site-header{border-bottom:1px solid rgba(255,255,255,0.04);padding:18px 0;background:transparent;}
.brand h1{margin:0;font-size:20px}
.tagline{margin:4px 0;color:rgba(255,255,255,0.7)}
.contact{float:right;text-align:right}
.phone{display:inline-block;background:var(--accent);color:#001;padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:700}
.hours{font-size:12px;margin:6px 0 0;color:rgba(255,255,255,0.6)}
.hero{padding:30px 0}
.hero-inner{display:flex;gap:20px;align-items:center}
.hero-text h2{margin:0 0 8px;font-size:28px}
.hero-text p{margin:0 0 16px;color:rgba(255,255,255,0.8)}
.cta{display:inline-block;background:var(--accent);color:#001;padding:10px 18px;border-radius:8px;text-decoration:none;font-weight:700}
.hero-graphic img{max-width:420px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.6)}

.categories{margin-top:20px}
.cards{display:flex;gap:12px;flex-wrap:wrap}
.card{background:rgba(255,255,255,0.02);padding:14px;border-radius:8px;flex:1 1 300px}
.card h4{margin:0 0 8px}
.services{margin-top:24px}
.service-list{display:grid;grid-template-columns:1fr;gap:14px}
.service{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,0.02);padding:12px;border-radius:8px}
.service img{width:72px;height:72px;object-fit:contain;filter:grayscale(0)}
.service h4{margin:0 0 6px}
.footer-cta{margin:36px 0;text-align:center}
.site-footer{border-top:1px solid rgba(255,255,255,0.04);padding:18px 0;text-align:center;color:rgba(255,255,255,0.6);font-size:14px}
@media (max-width:800px){
  .hero-inner{flex-direction:column;text-align:center}
  .contact{float:none}
  .service-list{grid-template-columns:1fr}

}

/* Map container for centering */
.map-wrapper {
  display: flex;           /* enables flexbox */
  justify-content: center; /* centers horizontally */
  margin: 20px 0;          /* spacing above/below */
}

.map-wrapper iframe {
  width: 100%;        /* responsive width */
  max-width: 800px;   /* optional max width */
  height: 400px;      /* adjust height as needed */
  border: 0;
}

/* Responsive adjustments (already in your file) */
@media (max-width:800px){
  .hero-inner {
    flex-direction: column;
    text-align: center;
  }
  .contact {
    float: none;
  }
  .service-list {
    grid-template-columns: 1fr;
  }
}

.reviews-section {
  text-align: center;
  background: rgba(255,255,255,0.02);
  padding: 30px 20px;
  border-radius: 8px;
  margin: 40px 0;
}

.reviews-section h2 {
  font-size: 24px;
  margin-bottom: 12px;
}

.reviews-section p {
  color: rgba(255,255,255,0.7);
  margin-bottom: 20px;
}

.review-btn {
  display: inline-block;
  background: var(--accent);
  color: #001;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.2s;
}

.review-btn:hover {
  background: #05a5e0;
}