* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body { background: #f9fdf9; }

.nav-links a {/* border-right: 1px solid black; padding-right: 10px; */ text-decoration: none; color: #000; }
.nav-links .active { background: #2be300; color: white; /*padding: 6px 14px; */ border-radius: 14px; }

/* HERO */
.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 80px 60px;
}
.hero-text h1 { font-size: 48px; }
.hero-text p  { margin: 18px 0 26px; color: #444; }

.hero-image { position: relative; width: 680px; height: 400px; }
.image-bg {
  position: absolute; width: 680px; height: 400px;
  border-radius: 24px; top: 18px; left: -18px;
}
.hero-image img {
  width: 680px; height: 400px;
  object-fit: cover; border-radius: 24px; position: relative;
}

/* TESTIMONIAL */
.testimonial { background: #d9f5d9; padding: 40px; text-align: center; }

/* =========================
       MOBILE HERO
========================= */
@media (max-width: 768px) {

  .hero {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .hero-text {
    display: contents;
  }

 .hero h1 {
  order: 2;
  font-size: 30px;
  max-width: 320px;
  margin: 25px auto 10px;
  line-height: 1.25;
}

    .hero-image {
    order: 1;
	position: relative;
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .image-bg {
    width: 100%;
    height: 100%;
    top: 12px;
    left: -12px;
  }

  .hero-image img {
    width: 100%;
    height: auto;
  }

.hero p {
  order: 3;
  margin: 20px auto 28px;
  max-width: 330px;
  line-height: 1.5;
}

.hero-actions {
  order: 4;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 10px;
}

}