/* ===== Global Styles ===== */
:root{
  --green:#17B58A; /* adjust to your logo green if needed */
  --black:#111111;
  --white:#ffffff;
  --gray:#f5f6f7;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "BankGothic", "Orbitron", "Segoe UI", Arial, sans-serif;
  color:var(--black);
  background:var(--white);
  line-height:1.6;
}

/* ===== Header & Nav ===== */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 22px;
  border-bottom:1px solid #e7e7e7;
  position:sticky; top:0; background:var(--white); z-index:50;
}
.logo{height:176px; width:auto}
nav ul{list-style:none; display:flex; gap:18px; margin:0; padding:0}
nav a{
  text-decoration:none; color:var(--black);
  padding:8px 10px; border-radius:6px;
}
nav a:hover, nav a.highlight{
  color:var(--white); background:var(--green);
}

/* ===== Hero ===== */
.hero{
  padding:64px 20px 32px;
  text-align:center;
  background:var(--white);
}
.hero h1{
  margin:0 0 18px;
  font-weight:700; color:var(--black);
  letter-spacing:0.5px;
}
.cta-button{
  display:inline-block;
  background:var(--green); color:var(--white);
  padding:12px 22px; border-radius:10px;
  text-decoration:none; font-weight:600;
  box-shadow:0 8px 18px rgba(36,164,90,0.25);
}
.cta-button:hover{filter:brightness(0.95)}

/* ===== Gallery Reel (placeholder grid) ===== */
.gallery-reel{padding:26px 20px; max-width:1100px; margin:0 auto}
.gallery-reel h2{text-align:center; margin-bottom:12px}
.slider{
  display:flex; justify-content:center; align-items:center; margin:0 auto;
  max-width:800px;
}
.slider img{
  width:100%; height:300px; object-fit:contain; border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

/* ===== Services Buttons (scroll reveal) ===== */
.services-buttons{
  display:flex; gap:16px; justify-content:center;
  padding:40px 20px;
}
.service-button{
  text-decoration:none; color:var(--white);
  background:var(--green); padding:12px 18px; border-radius:10px;
  box-shadow:0 8px 18px rgba(36,164,90,0.25); font-weight:600;
  opacity:0; transform:translateY(18px);
}
.service-button.revealed{opacity:1; transform:none; transition:all .6s ease}

/* ===== Testimonials ===== */
.testimonials{padding:40px 20px; background:var(--gray)}
.testimonials h2{text-align:center; margin-bottom:18px}
.testimonial{
  max-width:760px; margin:12px auto; background:var(--white);
  border-radius:12px; padding:16px 18px; box-shadow:0 6px 16px rgba(0,0,0,0.08);
}
.testimonial p{margin:0 0 8px}
.testimonial span{color:#666}

/* ===== Footer ===== */
footer{
  background:#222; color:#ddd; text-align:center;
  padding:20px 16px; margin-top:30px;
}
footer a{color:#ddd}

/* ===== Responsive ===== */
@media (max-width:900px){
  .slider{max-width:100%}
}
@media (max-width:600px){
  nav ul{flex-wrap:wrap; gap:8px}
  .slider{max-width:100%}
}