/* GLOBAL */
body {
  font-family: Arial, sans-serif, Helvetica;
  margin: 0;
  padding: 0;
}




/* ===== TOP HEADER (email – logo – phone) ===== */
.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 40px;
}
.top-header .email,
.top-header .phone {
  font-size: 14px;
  color: #264c2c;
}
.top-header .logo {
  text-align: center;
  color: #264c2c;
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
}





/* ===== NAVBAR ===== */
.navbar {
  background-color: #dfead9;
  display: flex;
  justify-content: center;
  padding: 10px 0;
}
.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.navbar li {
  background-color: #264c2c;
  color: #fff;
  padding: 8px 30px;
}
.navbar li a {
  color: #fff;
  text-decoration: none;
 
}




/* HERO SECTION */
.hero {
  display: flex;

  width: 100vw;
}

.hero-text {
  width: 50vw;
  background-color: #264c2c;      /* solid green background */
  color: white;
  padding: 60px 40px;
}

.hero-text h2 {
  font-size: 18px;
  font-weight: normal;
  margin: 0 0 10px 0;
}

.hero-text h1 {
  font-size: 36px;
  margin: 0 0 20px 0;
}

.hero-text p {
  line-height: 1.5;
  margin-bottom: 12px;
}

.hero-img {
  width: 50vw;
}

.hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}








/* ===== FEATURES (ICON + TEXT INLINE) ===== */
.features {
  display: flex;
  justify-content: space-around;
  background-color: #dde7d9;
  padding: 30px 0;
}
.features .feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.features .feature-item i {
  font-size: 20px;
  color: #264c2c;
}
.features h3 {
  margin: 0;
  color: #264c2c;
  font-size: 18px;
}

/* ===== ABOUT SECTION (2 COL) ===== */
.about-title {
  text-align: center;
  font-size: 26px;
  color: #264c2c;
  margin-top: 40px;
}
.about-desc {
  text-align: center;
  width: 70vw;
  margin: 10px auto;
  color: #555;
  line-height: 1.6;
}
.about-two-col {
  display: flex;
  background-color: #e7efe5;
  padding: 40px;
  margin-top: 20px;
}
.about-two-col .left,
.about-two-col .right {
  width: 50vw;
}
.about-two-col .left h1 {
  color: #264c2c;
  margin-bottom: 15px;
  font-size: 24px;
}
.about-two-col .left p {
  line-height: 1.6;
  color: #555;
}
.about-two-col .right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== FEATURES TOP (3 BOXES WITH ICON) ===== */
.features-top {
  display: flex;
  justify-content: space-around;
  margin: 40px 0;
}
.features-top .feature-item-top {
  text-align: center;
  width: 30vw;
}
.features-top .feature-item-top i {
  font-size: 38px;
  color: #264c2c;
  margin-bottom: 10px;
}
.features-top span {
  display: block;
  font-weight: bold;
  color: #264c2c;
  margin-bottom: 8px;
  font-size: 18px;
}
.features-top h2 {
  font-size: 15px;
  font-weight: normal;
  color: #555;
}

/* ===== CTA SECTION ===== */
.cta-section {
  display: flex;
  margin-top: 30px;
}
.cta-section .left {
  width: 50%;
  background-color: #264c2c;
  color: #fff;
  padding: 50px;
}
.cta-section .left h1 {
  font-size: 32px;
  margin-bottom: 15px;
}
.cta-section .left p {
  font-size: 16px;
  margin-bottom: 25px;
}
.cta-section .left button {
  background-color: #fff;
  color: #264c2c;
  border: none;
  padding: 12px 30px;
  cursor: pointer;
}
.cta-section .right {
  width: 50%;
}
.cta-section .right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.cta-section .left button i {
  margin-right: 8px;
}




/* ===== FOOTER ===== */
.footer {
  display: flex;
  justify-content: space-between;
  padding: 30px 60px;
  background-color: #f5f5f5;
}
.footer-col {
  width: 33vw;
}
.footer-title {
  font-weight: bold;
  color: #264c2c;
  margin-bottom: 8px;
}
.footer-col p {
  margin: 0;
  color: #555;
}

/* ===== MOBILE RESPONSIVE (UNDER 768) ===== */
@media screen and (max-width: 768px) {
  /* stack two-column layouts */
  .hero,
  .about-two-col,
  .cta-section,
  .features-top {
    flex-direction: column;
  }

  /* force full width on mobile */
  .hero-text,
  .hero-img,
  .about-two-col .left,
  .about-two-col .right,
  .cta-section .left,
  .cta-section .right,
  .features-top .feature-item-top,
  .footer-col {
    width: 100%;
  }

  /* center and stack features + footer */
  .features,
  .footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }

  /* reduce mobile padding */
  .hero-text,
  .cta-section .left {
    padding: 20px;
  }
  .footer {
    padding: 20px;
  }

  /* top header stacked on mobile */
  .top-header {
    flex-direction: column;
    gap: 8px;
    padding: 10px 20px;
  }
}