html {
  scroll-behavior: smooth;
}

body {
  color: #00306a;
  font-size: 1rem; /* Base font size: 16px */
}

/* ------------------- Images & Videos ------------------- */
.img-responsive {
  width: 100%;
  border-radius: 1rem;
}

video {
  background-color: #1e1e1e;
  border-radius: 0.5rem;
  border: 1px solid #333;
}

/* ------------------- Navbar ------------------- */
.navbar {
  background-color: #008038 !important;
  color: #ffffff;
}

.navbar-brand {
  color: #ffffff !important;
  font-weight: bold !important;
  font-size: 1.5rem !important; /* 24px */
}

.nav-link {
  color: #ffffff !important;
  padding: 0.5rem 1rem !important;
  font-weight: 500 !important;
  font-size: 1.125rem !important; /* 18px */
}

.navbar-toggler {
    background: #096933 !important;
}

/* ------------------- Hero Section ------------------- */
#hero {
  background-image: url('/banner.jpg');
  background-size: cover;
  background-position: center;
  height: 50vh;
  position: relative;
}

#hero::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #002c1385;
  z-index: 0;
}

#hero .caption {
  z-index: 1;
  position: relative;
  text-align: center;
  color: #fff;
}

#hero .caption h1 {
  font-weight: bold;
  font-size: 3rem; /* 48px */
  margin-bottom: 1.5rem;
}

#hero .caption p {
  color: #fff;
}

/* ------------------- General Section Styling ------------------- */
section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3.75rem 0; /* 60px */
}

section h3 {
  font-weight: bold;
  font-size: 1.5rem; /* 24px */
  margin-bottom: 1.5rem;
  color: #ba0000;
}

section ul {
  list-style: devanagari;
}

section li,
section p {
  font-size: 1.125rem; /* 18px */
  margin-bottom: 1.125rem;
  font-weight: 500;
  color: #001a4c;
}

/* ------------------- About Agarwood ------------------- */
section#about-agarwood {
  background-color: #f4fff9;
}

.content-wrapper {
  padding-right: 2rem;
}

/* ------------------- Benefits ------------------- */
#benefits {
  background-color: #fff4eb;
}

/* ------------------- Agar Tea ------------------- */
section#agar-tea {
  background-image: url("/images/agar-tea.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

#agar-tea h3 {
  color: #ff8c00;
}

#agar-tea li {
  color: #ffffff;
}

/* ------------------- Features ------------------- */
section#features {
  background-image: url('/benefits.jpeg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}

section#features::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 30, 13, 0.72);
  z-index: 0;
}

#features h3,
#features li {
  color: #ffffff !important;
  position: relative;
  z-index: 1;
}

/* ------------------- Plantation ------------------- */
.plantation {
  background: #f4fff9;
}

.plantation h5 {
  font-weight: bold;
  font-size: 1.25rem; /* 20px */
}

.plantation-card {
  background: #008038;
  padding: 1.5rem;
  min-height: 9.7rem;
  border-radius: 0.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.plantation-card h5 {
  color: #ffffff;
}

.plantation-card small {
  color: #ffffff !important;
}

/* ------------------- Calculation ------------------- */
.calculation {
  background: #f4fff9;
}

/* ------------------- Why Agarwood ------------------- */
.why-agarwood {
  background: #fff4eb;
}

/* ------------------- Video Section ------------------- */
#video-section {
  background-color: #000;
}

#video-section h3 {
  color: #ffffff !important;
}

/* ------------------- Team Section ------------------- */
.team-section {
    background: #008038;
}

.team-section p {
    color: #f9f9f9;
    font-weight: normal;
}

.team-section h3 {
    color: #ffffff;
}

.team-member {
  display: flex;
  gap:16px;
  align-items: flex-start;
}

.team-member__image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.team-member__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ------------------- Footer ------------------- */
footer.footer-copyright {
    color: #d7d7d7;
    text-align: center;
    padding: 12px 0;
    background: #004e22;
    font-weight: normal;
    font-size: 14px;
}

/* ------------------- Responsive Typography ------------------- */

/* Tablet View */
@media (max-width: 991.98px) {
  body {
    font-size: 0.9375rem; /* 15px */
  }

  h1 {
    font-size: 2rem; /* 32px */
  }

  h3 {
    font-size: 1.25rem; /* 20px */
  }

  section li,
  section p {
    font-size: 1rem; /* 16px */
  }

  .navbar-brand,
  .nav-link {
    font-size: 1.125rem !important; /* 18px */
  }
}

/* Mobile View */
@media (max-width: 767.98px) {
  body {
    font-size: 0.875rem; /* 14px */
  }

    section {
    padding: 1.875rem 0; /* 30px */
    }

  h1 {
    font-size: 1.75rem; /* 28px */
  }

  h3 {
    font-size: 1.125rem; /* 18px */
  }

  section li,
  section p {
    font-size: 0.9375rem; /* 15px */
  }

  .navbar-brand,
  .nav-link {
    font-size: 1rem !important; /* 16px */
  }
}