:root {
  --color-primary: #00723F; /* Green */
  --color-accent: #D62828;  /* Red */
  --color-neutral: #F5F5F5; /* Light Gray */
}

.core-services {
  background: var(--color-neutral);
  padding: 100px 20px;
  position: relative;
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}

.section-header h2 {
  color: var(--color-primary);
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.section-header .underline {
  width: 60px;
  height: 3px;
  background: var(--color-accent);
  margin: 0 auto 15px;
  border-radius: 2px;
}

.section-header p {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.6;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.service-card {
  background: #fff;
  border-top: 4px solid var(--color-primary);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.service-card .img-box {
  height: 200px;
  overflow: hidden;
}

.service-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-card:hover img {
  transform: scale(1.05);
}

.service-card .content {
  padding: 20px;
  text-align: center;
}

.service-card h3 {
  color: var(--color-primary);
  font-size: 1.1rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.service-card p {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ----- Core section layout ----- */
.core-services {
  position: relative;
  padding: 120px 20px;
  background: var(--color-neutral);
  overflow: hidden;
}

/* keep foreground content above background and overlays */
.core-services .z-top { position: relative; z-index: 30; }

/* Parallax background container (full bleed) */
.bg-parallax {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  transform-origin: center;
}

/* the image inside */
.bg-parallax img {
  width: 100%;
  height: 120%; /* slightly taller for zoom/pan room */
  object-fit: cover;
  object-position: center;
  transform-origin: center;
  will-change: transform;
  transition: transform 4s linear; /* smooth continuous zoom handled via JS */
}

/* green overlay (semi-transparent) */
.overlay-green {
  position: absolute;
  inset: 0;
  background: rgba(0,114,63,0.55); /* green with opacity (approx var(--color-primary)/55%) */
  mix-blend-mode: multiply;
  z-index: 10;
  pointer-events: none;
}

/* gradient overlay to add depth and darkness at bottom */
.overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.12) 40%, rgba(0,0,0,0.35) 100%);
  z-index: 12;
  pointer-events: none;
}

/* Section header / title */
.section-header h2 {
  color: var(--color-primary);
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.section-header .underline {
  width: 60px;
  height: 4px;
  background: var(--color-accent);
  margin: 0 auto 16px;
  border-radius: 4px;
}
.section-header p.lead { color: #f3f3f3; max-width: 720px; margin: 0 auto; }

/* Grid + cards — ensure they sit above overlays */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 28px;
  margin-top: 36px;
  z-index: 40;
}

/* Card styling */
.service-card {
  background: rgba(255,255,255,0.95);
  border-top: 4px solid var(--color-primary);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(8,15,20,0.08);
  transition: transform .32s cubic-bezier(.22,.9,.3,1), box-shadow .32s;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(8,15,20,0.12);
}

/* image box */
.service-card .img-box { height: 180px; overflow: hidden; position: relative; }
.service-card .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.service-card:hover .img-box img { transform: scale(1.06); }

/* card content */
.service-card .content { padding: 20px; text-align: center; z-index: 50; }
.service-card h3 { color: var(--color-primary); font-size: 1.05rem; margin-bottom: 8px; font-weight: 700; }
.service-card p { color: #444; font-size: .95rem; line-height: 1.5; }

/* responsive tweaks */
@media (max-width: 768px) {
  .core-services { padding: 80px 16px; }
  .bg-parallax img { height: 140%; } /* give more vertical room on mobile */
  .service-card .img-box { height: 160px; }
  .section-header h2 { font-size: 1.6rem; }
  .section-header p.lead { color: #333; } /* on small screens, overlays might appear differently */
}

:root {
  --color-primary: #00723F;
  --color-accent: #D62828;
  --color-neutral: #F5F5F5;
}

/* Parallax background */
.parallax-bg {
  background-image: url("assets/images/services/inspection.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Green overlay */
.overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 114, 63, 0.85);
  z-index: 1;
}

/* Cards */
.service-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: all 0.4s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.service-card img {
  height: 200px;
  object-fit: cover;
  width: 100%;
}

.service-card h5 {
  color: var(--color-primary);
}

.service-card p {
  color: #333;
  font-size: 0.9rem;
  line-height: 1.5;
}

#core-services {
  position: relative;
  z-index: 1;
  color: white;
}