/* Basic brochure styles inspired by the reference site */
:root{
  --bg:#f3f6f7; /* light background from logo */
  --accent:#2b2b2b; /* dark circle color from logo */
  --muted:#73777b; /* muted gray */
  --accent-2:#006aa8; /* selected color per user */
  --icon:#006aa8; /* icons color */
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:var(--accent); background:var(--bg); line-height:1.5}
.container{max-width:1100px; margin:0 auto; padding:0 20px}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--accent);flex:0 0 auto;padding-left:12px}
.brand img{height:56px;display:block}
.sr-only{position:absolute!important;height:1px;width:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.main-nav{display:flex;align-items:center;gap:8px;margin:0 auto}
.main-nav a{margin:0 6px;color:var(--accent-2);text-decoration:none;font-size:15px;padding:6px 8px;border-radius:6px;background:transparent}
.menu-toggle{display:none}
.cta{background:var(--accent-2);color:white;padding:8px 14px;border-radius:6px;text-decoration:none;flex:0 0 auto}
.site-header{background:white;box-shadow:0 1px 6px rgba(11,43,58,0.06);position:sticky;top:0;z-index:30}

.hero{position:relative;color:white;padding:60px 0 80px;min-height:56vh;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:url('../images/hero-bg.jpg');background-size:cover;background-position:center right;filter:blur(2px);transform:scale(1.03);z-index:0}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0.8));z-index:1}
.hero-inner{position:relative;z-index:2;text-align:center;max-width:1100px;margin-left:auto;margin-right:auto;padding:0 20px;display:flex;flex-direction:column;justify-content:center;min-height:56vh}
.hero h1{font-size:48px;margin:0 0 14px;color:#fff;font-weight:700;line-height:1.05;text-shadow:0 2px 8px rgba(0,0,0,0.35)}
.lead{max-width:720px;color:rgba(255,255,255,0.95);margin:8px auto 22px;text-align:center;font-size:18px}
.btn{display:inline-block;background:transparent;border:2px solid rgba(255,255,255,0.95);color:white;padding:10px 16px;border-radius:8px;text-decoration:none}

.section{padding:120px 0;min-height:40vh}
.services h2,.about h2,.contact h2{margin-bottom:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{background:white;border-radius:10px;padding:18px;box-shadow:0 6px 18px rgba(12,20,30,0.06);display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.card h3{margin-top:0}
.service-icon{color:var(--icon);width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:4px}
.service-icon i{font-size:20px;line-height:1}

/* Force Font Awesome icons to use the icon color variable */
.fa, .fa-solid, .fa-regular, .fa-brands, i[class^="fa-"], i[class*=" fa-"]{ color: var(--icon); }
.services{ text-align:center }
.section h2{margin-bottom:18px;text-align:center}

/* Contact section overrides: keep headings and content left-aligned */
.contact{ text-align:left }
.contact h2{ text-align:center }
.contact .contact-section h3, .contact .contact-section p { text-align:left }
.about, .contact { text-align:left }

/* Center section paragraph text per user request */
.about p, .contact p { max-width:820px; margin:0 auto; text-align:center }
.contact-info { text-align:left }
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;justify-items:center}

.about{position:relative;overflow:hidden;padding:120px 0;min-height:40vh}
.about::before{content:"";position:absolute;inset:0;background-image:url('../images/about-bg.png');background-size:cover;background-position:center;filter:blur(6px) brightness(0.55);transform:scale(1.03);z-index:0}
.about > .container{position:relative;z-index:2}
/* Make about text lighter for readability over the background */
.about, .about h2, .about p, .about .contact-section h3, .about .contact-section p { color: rgba(255,255,255,0.95) }
.about h2 { text-shadow: 0 2px 6px rgba(0,0,0,0.6) }
.about p { text-shadow: 0 1px 3px rgba(0,0,0,0.5) }


.contact-grid{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:center}
.contact-logo img{width:100%;max-width:260px;height:auto;display:block}
.contact-form{background:white;padding:20px;border-radius:10px;box-shadow:0 8px 20px rgba(11,43,58,0.06)}
.contact-form label{display:block;font-weight:600;margin:12px 0 6px}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border:1px solid #e6e9ef;border-radius:6px}
.btn.primary{background:var(--accent-2);border-color:var(--accent-2);color:white;padding:10px 14px;margin-top:12px}
.contact-info{background:transparent;padding:8px}
.contact-section{margin-bottom:18px}
.contact-section h3{display:flex;align-items:center;gap:10px;color:var(--accent);font-size:1.05rem;margin:0}
.contact-section h3 i{color:var(--icon);font-size:20px}
.contact-section p{margin:8px 0 0;color:var(--muted);max-width:720px}
@media (max-width:900px){
  .contact-logo{margin-bottom:12px}
  .section{padding:64px 0;min-height:auto}
  /* cap spacing between consecutive sections on mobile */
  .section + .section{margin-top:64px}
}
.contact-info h3{margin-bottom:6px}

.site-footer{background:var(--accent);color:white;padding:0;text-align:center;display:flex;align-items:center;justify-content:center;min-height:100px}
.site-footer p{margin:0;font-size:16px}

/* Responsive */
@media (max-width:900px){
  .header-inner{position:relative}
  
  /* Desktop-centered nav override (keeps mobile menu behavior intact) */
}

@media (min-width:901px){
  .header-inner{position:relative}
  .main-nav{position:absolute;right:8px;top:58%;transform:translateY(-50%);display:flex;gap:8px}
}

@media (max-width:900px){ 
  .header-inner{position:relative;padding-right:12px}
  .menu-toggle{display:inline-block;background:transparent;border:none;color:var(--accent-2);font-size:22px;padding:6px 10px;border-radius:6px}
  .main-nav{display:none;position:absolute;right:8px;top:72px;background:white;padding:12px;border-radius:8px;box-shadow:0 8px 24px rgba(12,20,30,0.12);min-width:200px}
  .main-nav.open{display:block}
  .main-nav a{display:block;padding:8px 6px;color:var(--accent-2);margin:0}
  .contact-grid{grid-template-columns:1fr;gap:20px}
  .contact-logo{justify-self:center}
  .contact-logo img{max-width:180px}
  .hero{padding:56px 0 80px}
  .hero h1{font-size:28px;text-align:center}
  .lead{text-align:center;margin-left:auto;margin-right:auto}
  .site-header{padding:8px 0}
  .cta{display:none}
  .card{padding:14px}
}

@media (max-width:480px){
  .hero h1{font-size:24px}
  .lead{font-size:15px}
  .container{padding:0 16px}
}