:root{
  --bg: #ffffff;
  --card: #ffffff;
  --muted: #6b7280;
  --text: #0f172a;
  --accent: #00796b;
  --accent-2: #003366;
  --shadow: 0 6px 20px rgba(2,6,23,0.08);
  --radius: 12px;
  --glass: rgba(255,255,255,0.6);
  --max-width: 1100px;
  --gap: 1.25rem;
}

/* dark theme variables */
[data-theme="dark"]{
  --bg: #0b1020;
  --card: #0f1724;
  --muted: #9aa4b2;
  --text: #e6eef8;
  --accent: #1fb89a;
  --accent-2: #10151a;
  --glass: rgba(255,255,255,0.03);
  --shadow: 0 8px 30px rgba(2,6,23,0.6);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Inter",system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:1.25rem;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.site-header{
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2));
  border-bottom:1px solid rgba(0,0,0,0.04);
}

[data-theme="dark"] .site-header{
  background: linear-gradient(180deg, rgba(10,12,18,0.7), rgba(10,12,18,0.4));
  border-bottom:1px solid rgba(255,255,255,0.04);
}

.brand{display:flex;align-items:center;gap:0.75rem}
.brand .logo{width:56px;height:56px;object-fit:contain;border-radius:8px}
.brand h1{font-family:"Poppins";margin:0;font-size:1.15rem}
.brand .tag{margin:0;color:var(--muted);font-size:0.85rem}

.header-actions{display:flex;align-items:center;gap:0.5rem}
.btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.6rem 0.9rem;border-radius:10px;text-decoration:none;font-weight:600}
.btn-primary{background:var(--accent);color:white;border:none;box-shadow:var(--shadow)}
.btn-outline{background:transparent;border:2px solid rgba(0,0,0,0.06);color:var(--text)}
[data-theme="dark"] .btn-outline{border:2px solid rgba(255,255,255,0.06)}

.theme-btn{background:transparent;border:none;padding:0.4rem;border-radius:8px;cursor:pointer;font-size:1.05rem}

.nav-toggle{display:none;background:transparent;border:none;font-size:1.2rem;padding:0.4rem;border-radius:8px}

/* Hero */
.hero{padding:2rem 0}
.hero-inner{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center}
.hero-copy h2{font-size:2rem;margin:0 0 0.5rem;font-family:"Poppins"}
.lead{color:var(--muted);margin:0 0 1rem}
.cta-row{display:flex;gap:0.75rem;margin-bottom:0.75rem}
.quick-numbers{color:var(--muted);font-weight:600;margin-top:0.5rem}

.media-card{background:var(--glass);padding:0.5rem;border-radius:14px;box-shadow:var(--shadow)}

/* Sections */
.section{padding:2.25rem 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}
.bullets{padding-left:1rem;color:var(--muted)}
.values{display:flex;gap:0.75rem;margin-top:0.75rem}
.card.small{background:var(--card);padding:0.75rem;border-radius:10px;box-shadow:var(--shadow);flex:1}

.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem}
.service-card{background:var(--card);padding:1rem;border-radius:14px;box-shadow:var(--shadow);text-align:center}
.service-card .icon{font-size:1.6rem}

/* Social feed */
.social .muted{color:var(--muted)}
.feed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.feed-card{background:var(--card);border-radius:10px;padding:0.6rem;box-shadow:var(--shadow)}
.feed-card img{width:100%;height:200px;object-fit:cover;border-radius:8px}

/* Contact & map */
.contact .contact-numbers{display:flex;gap:1rem;margin:0.5rem 0 1rem}
.contact-form label{display:block;margin-bottom:0.6rem;font-weight:600}
.contact-form input,.contact-form textarea{width:100%;padding:0.6rem;border-radius:8px;border:1px solid rgba(0,0,0,0.06);margin-top:0.25rem;background:transparent;color:var(--text)}
.form-row{display:flex;gap:0.5rem;margin-top:0.75rem}

/* Responsive map: full-width & aspect-ratio */
.map-embed{
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.map-embed iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Elfsight section styling */
.elfsight-after-map .elfsight-app-1634d7b5-0bff-4680-a1b5-c2aed6312c09{
  margin-top:1rem;
}

/* Footer */
.site-footer{padding:1rem 0;border-top:1px solid rgba(0,0,0,0.04);color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.footer-contact{display:flex;align-items:center;gap:0.75rem}
.footer-phone-img{height:48px;border-radius:8px;}

/* Sparkle / shimmer effect for hero headline */
.sparkle-text {
  position:relative;
  display:inline-block;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12));
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--text);
  font-family:"Poppins";
  font-weight:700;
  overflow:visible;
  pointer-events: none; /* <-- FIX */
}


/* shimmer overlay using pseudo-element and background gradient */
.sparkle-text::after{
  content:'';
  position:absolute;
  left:-50%;
  top:0;
  width:200%;
  height:100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.9) 45%, rgba(255,255,255,0.0) 55%);
  transform:translateX(-100%) skewX(-15deg);
  filter:blur(6px);
  opacity:0.9;
  pointer-events:none;
  animation: shimmer 3.2s linear infinite;
  mix-blend-mode: screen;
}

/* small twinkling spark dots */
.sparkle-text::before{
  content:'';
  position:absolute;
  right:5%;
  top:-6%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:linear-gradient(180deg,#fffef7,#ffd700);
  box-shadow:
    -18px -6px 0 0 rgba(255,255,255,0.9),
    -36px 10px 0 0 rgba(255,255,255,0.7);
  opacity:0;
  transform:scale(0.6);
  animation: twinkle 3.5s infinite ease-in-out;
  pointer-events:none;
}

/* animations */
@keyframes shimmer{
  0%{ transform: translateX(-100%) skewX(-15deg); opacity:0.0; }
  40%{ transform: translateX(0%) skewX(-15deg); opacity:1; }
  70%{ transform: translateX(50%) skewX(-15deg); opacity:0.8; }
  100%{ transform: translateX(120%) skewX(-15deg); opacity:0; }
}
@keyframes twinkle{
  0%{ opacity:0; transform:scale(0.6) translateY(0); }
  10%{ opacity:1; transform:scale(1.1) translateY(-4px); }
  50%{ opacity:0.5; transform:scale(0.9) translateY(0); }
  100%{ opacity:0; transform:scale(0.6) translateY(0); }
}

/* Responsive */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr; }
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .feed-grid{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}
  .header-actions .btn{display:none}
  .nav-toggle{display:block}
}

@media (max-width:560px){
  .services-grid{grid-template-columns:1fr;}
  .feed-grid{grid-template-columns:1fr;}
  .brand .logo{width:48px;height:48px}
  .brand h1{font-size:1rem}
  .sparkle-text{font-size:1.45rem}
}
/* Follow Us section */
.follow-us {
  text-align: center;
}
.follow-us .social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.follow-us .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.5rem;
  background: var(--card);
  color: var(--accent);
  box-shadow: var(--shadow);
  transition: transform 0.2s, background 0.2s;
}
.follow-us .social-links a:hover {
  transform: scale(1.1);
  background: var(--accent);
  color: #fff;
}
[data-theme="dark"] .follow-us .social-links a {
  background: var(--card);
  color: var(--accent-2);
}
/* --- FIX CONTACT FORM BUTTON NOT CLICKING --- */

/* Ensure grid columns don't overlap each other */
.grid-2 {
  align-items: start !important;
}

/* Prevent map container from overlapping the form */
.map-wrap {
  position: relative !important;
  z-index: 1 !important;
}

/* Give form higher priority */
.contact-form {
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

/* Make sure map never blocks clicks */
.map-embed iframe {
  position: relative !important;
  z-index: 0 !important;
  pointer-events: auto !important;
}

/* Fix any accidental height force that breaks the grid */
.section.contact .container,
.section.contact .grid-2 {
  height: auto !important;
  min-height: auto !important;
}