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

body { color: #222; background: #fff; }

/* header */
header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 20px 7%;
  align-items: center;
}

.logo { font-weight: 700; font-size: 24px; }

.nav {
  display: flex;
  gap: 30px;
  align-items: center;
}

.nav a { text-decoration: none; color: #222; font-weight: 500; }

.book-btn {
  padding: 10px 20px;
  background: #111;
  color: #fff !important;
  border-radius: 6px;
}

.burger {
  display: none;
  font-size: 30px;
  cursor: pointer;
}

/* hero */
.hero {
  padding: 120px 7% 90px;
  text-align: center;
}

.hero h1 {
  font-size: 52px;
  font-weight: 800;
  margin-bottom: 18px;
}

.hero p {
  font-size: 20px;
  max-width: 760px;
  margin: 0 auto 40px;
  color: #444;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 55px;
}

.btn {
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}

.btn.primary { background: #111; color: #fff; }
.btn.secondary { background: transparent; border: 2px solid #111; color: #111; }

.stats {
  display: flex;
  justify-content: center;
  gap: 60px;
}

.stats div span { font-size: 36px; font-weight: 800; display: block; }

/* banner image */
.img-banner {
  width: 100%;
  position: relative;
}

.img-banner img { width: 100%; display: block; }

.overlay-stat {
  position: absolute;
  bottom: 18px;
  right: 18px;
  background: #fff;
  padding: 10px 16px;
  font-size: 32px;
  font-weight: 800;
  border-radius: 6px;
}

/* services */
.services { padding: 110px 7%; text-align: center; }
.services p { max-width: 760px; margin: 0 auto 40px; }

.cards {
  display: flex;
  gap: 28px;
  margin-top: 50px;
}

.card {
  padding: 32px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: left;
  flex: 1;
}

.card ul { margin-top: 12px; }
.card ul li { margin: 6px 0; font-size: 15px; }

.popular { border: 2px solid #111; position: relative; }
.badge {
  position: absolute;
  top: -12px;
  left: 20px;
  background: #111;
  color: #fff;
  padding: 4px 14px;
  border-radius: 6px;
}

/* about */
.about {
  padding: 110px 7%;
  display: flex;
  gap: 50px;
}

.about img { width: 50%; border-radius: 8px; object-fit: cover; }

.stats-2 {
  display: flex;
  gap: 60px;
  margin-top: 20px;
}

.stats-2 div span { font-size: 34px; font-weight: 800; display: block; }

/* testimonials */
.testimonials {
  padding: 110px 7%;
  text-align: center;
}

.reviews {
  display: flex;
  gap: 26px;
  margin-top: 50px;
}

.review {
  flex: 1;
  border: 1px solid #ddd;
  padding: 30px;
  border-radius: 8px;
  text-align: left;
}

/* contact */
.contact {
  padding: 120px 7%;
  text-align: center;
}

.btn.big {
  padding: 16px 36px;
  font-size: 18px;
  margin-top: 20px;
}

.email { margin-top: 18px; }

/* footer */
footer {
  padding: 80px 7% 30px;
  background: #111;
  color: #eee;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 50px;
}

footer a { color: #fff; text-decoration: none; }

.copy {
  text-align: center;
  font-size: 14px;
  opacity: 0.7;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .cards, .reviews, .stats, .stats-2 { flex-direction: column; }
  .about { flex-direction: column; }
  .about img { width: 100%; }
  .stats { gap: 22px; }
}

@media (max-width: 760px) {
  .nav { display: none; }
  .burger { display: block; }
  .nav.open {
    display: flex;
    position: absolute;
    top: 70px;
    right: 0;
    background: #fff;
    flex-direction: column;
    padding: 20px;
    gap: 18px;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  .hero h1 { font-size: 36px; }
}