/* ---------- GENERAL ---------- */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family: 'Montserrat', sans-serif;

  background-color: #e5ebd7;

  color: #2d2d2d;

  line-height: 1.7;
}

/* ---------- NAVIGATION ---------- */

nav {
  position: fixed;

  top: 0;

  width: 100%;

  display: flex;

  justify-content: center;

  gap: 2rem;

  padding: 1.2rem;

  background: rgba(229, 235, 215, 0.92);

  backdrop-filter: blur(10px);

  z-index: 1000;
}

nav a {
  text-decoration: none;

  color: #35524a;

  font-weight: 600;

  transition: 0.2s;
}

nav a:hover {
  opacity: 0.7;
}

/* ---------- HERO SECTION ---------- */

.hero {
  height: 100vh;

  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.28),
      rgba(0, 0, 0, 0.28)
    ),
    url("images/hero.png");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 2rem;

  color: white;
}

.hero-overlay {
  max-width: 900px;
}

.hero h1 {
  font-size: 5rem;

  margin-bottom: 1rem;

  font-weight: 700;
}

.hero p {
  font-size: 1.4rem;

  font-weight: 400;
}

/* ---------- MAIN CONTENT ---------- */

main {
  max-width: 1000px;

  margin: auto;

  padding: 4rem 2rem;
}

section {
  padding: 5rem 0;
}

h2 {
  color: #35524a;

  font-size: 2rem;

  margin-bottom: 1rem;
}

/* ---------- ABOUT SECTION ---------- */

.about-section {
  display: flex;

  gap: 3rem;

  align-items: center;

  flex-wrap: wrap;
}

.about-image img {
  width: 240px;

  height: 240px;

  object-fit: cover;

  border-radius: 50%;

  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.about-text {
  flex: 1;

  min-width: 300px;
}

/* ---------- FOOTER ---------- */

footer {
  text-align: center;

  padding: 3rem;

  color: #5d5d5d;
}