:root{
  --accent: #f0c85b;
  --white: #ffffff;
  --dark: rgba(0,0,0,0.75);
  --muted: #bdbdbd;
}

* { box-sizing: border-box; }
html,body { height:100%; margin:0; font-family: 'Poppins', sans-serif; color:#222; -webkit-font-smoothing:antialiased; }
.container { width: min(1150px,94%); margin:0 auto; }

/* HEADER NAV */
.site-header {
  position: fixed;
  top:0; left:0; right:0;
  z-index:40;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.15));
  backdrop-filter: blur(4px);
  padding: 12px 0;
}
.nav { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo { width: 100px; height:100px; object-fit:contain; border-radius:50%; background:#fff; padding:6px; }

/* NAV LINKS */
.nav-links { list-style:none; display:flex; gap:28px; align-items:center; margin:0; padding:0; }
.nav-links a { text-decoration:none; color:#fff; letter-spacing:1px; font-weight:500; font-size:14px; display:inline-block; padding:12px; }
.nav-links a:hover { color:var(--accent); transform: translateY(-1px); transition: all .18s ease; }

/* HERO (full-screen) */
/* NOTE: hero image uses the user's uploaded file path */
.hero{
  height:100vh;
  min-height:640px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--white);
  background: url("/mnt/data/aee709d0-24e0-4b21-82d7-b1c6bd023003.png") center center / cover no-repeat fixed;
}
.hero-overlay{
  position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.35));
}
.hero-content{ position:relative; z-index:5; text-align:center; margin-top:60px; max-width:900px; padding:0 10px; }
.hero-title { font-size:44px; font-weight:600; margin-bottom:10px; color:#fff; letter-spacing:0.4px; }
.hero-sub { font-size:22px; font-weight:300; margin-bottom:28px; color:rgba(255,255,255,0.95); }

/* scroll arrow */
.scroll-down{
  display:inline-block; font-size:28px; text-decoration:none; color:#fff; margin-top:12px;
  animation: bounce 1.6s infinite;
  border-radius:24px;
  padding:8px 12px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(2px);
}
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* SECTIONS */
.section { padding:80px 0; background:#fff; color:#111; }
.section .section-inner{ text-align:center; max-width:900px; margin:0 auto; }
.section h2 { font-size:28px; margin-bottom:14px; font-weight:600; }
.section p { color:#444; font-size:16px; line-height:1.7; }

/* dark alternate */
.section.services { background:#0f0f0f; color:#fff; }
.section.services .section-inner p, .section.services h2 { color:#fff; }

/* service cards */
.cards{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-top:28px; }
.card{ background: rgba(255,255,255,0.05); padding:22px; border-radius:12px; min-height:140px; display:flex; flex-direction:column; gap:8px; box-shadow: 0 6px 22px rgba(0,0,0,0.35); }
.card h3{ margin:0; font-size:18px; }
.card p{ margin:0; color:rgba(255,255,255,0.85); font-size:14px; }

/* pricing */
.pricing-grid{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.price-card{ background:#fff; padding:20px; border-radius:8px; min-width:220px; box-shadow:0 8px 24px rgba(10,10,10,0.08); text-align:center; }
.price-card .price{ font-size:20px; color:var(--accent); font-weight:700; margin:6px 0; }

/* contact section */
.contact { background:#111; color:#fff; }
.contact a{ color:var(--accent); text-decoration:none; }

/* floating buttons */
.floating-btn {
  position:fixed; bottom:20px; width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px;
  z-index:60; text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
.floating-btn.call { left:20px; background: linear-gradient(180deg,#3aa0ff,#0070e6); }
.floating-btn.wa { right:20px; background: linear-gradient(180deg,#26d366,#1aa34a); }

/* responsive */
@media (max-width:900px){
  .nav-links { gap:12px; }
  .hero-title { font-size:32px; }
  .hero-sub { font-size:16px; }
  .logo { width:56px; height:56px; }
}
@media (max-width:600px){
  .nav-links { display:none; } /* for simple mobile: hide menu (could add hamburger) */
  .hero { min-height:560px; background-attachment:scroll; }
  .floating-btn { width:52px; height:52px; font-size:20px; }
}

/* HERO background + overlay */
.hero {
  background-image: url('images/background2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  color: #fff;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35); /* slightly darken image for text contrast */
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding: 3rem 1rem;
}

/* NAV + hamburger */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
}

/* default nav links */
.nav-links {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* toggle button (hidden on desktop) */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.25rem;
  color: inherit;
}

/* simple hamburger graphic */
.hamburger {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.hamburger::before,
.hamburger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}
.hamburger::before { top: -7px; }
.hamburger::after  { top: 7px; }

/* Mobile / small screens */
@media (max-width: 768px) {
  .nav-toggle { display: block; z-index: 4; }

  /* collapse nav off-canvas by default */
  .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    right: 1rem;
    background: #fff;
    color: #111;
    flex-direction: column;
    width: 85%;
    max-width: 320px;
    transform: translateX(100%);
    transition: transform .28s ease, opacity .28s ease;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    padding: 1rem 1rem;
    border-radius: 6px;
  }

  /* shown state */
  .nav-links.show {
    transform: translateX(0);
  }

  .nav-links li { margin: 0.25rem 0; }

  /* make hamburger visible on dark backgrounds (hero) */
  .site-header .nav-toggle { color: #fff; } /* when header sits over hero image */
  .site-header .nav-links { color: #111; }  /* links inside dropdown remain dark */
}

/* ...existing code... */
/* ...existing code... */

/* HERO: make carousel act as a blended background */
.hero {
  position: relative;
  overflow: hidden; /* keep images clipped */
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* carousel sits behind content and fills the hero */
.hero-carousel {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  z-index: 0;
  pointer-events: none;
}

/* each image covers the area and crossfades */
.hero-carousel .carousel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .9s ease, transform .9s ease;
  will-change: opacity, transform;
  mix-blend-mode: multiply; /* helps images blend with overlay/background */
  filter: brightness(.86) contrast(1.03);
}

/* visible slide */
.hero-carousel .carousel-img.active {
  opacity: 1;
  transform: scale(1);
  z-index: 0;
}

/* overlay sits above images to improve text contrast */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.46));
  pointer-events: none;
}

/* keep hero content above everything */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 3rem 1rem;
}

/* adjust for smaller screens */
@media (max-width: 768px) {
  .hero { min-height: 56vh; }
  .hero-content { padding: 2rem 1rem; }
  /* ensure hamburger visible on top of hero */
  .site-header .nav-toggle { z-index: 3; }
}

/* ...existing code... */