/* Reset default margins/paddings */
* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { width: 100%; font-family: Arial, sans-serif; }
.section { width: 100%; }

/* Section 1: Top Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #2c3e50;
  color: #ecf0f1;
}
.nav-list { list-style: none; display: flex; gap: 1rem; }
.nav-list a { text-decoration: none; color: inherit; }

/* Section 2: Hero Image */
.hero {
  background: #34495e;
}
.hero img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Section 3: Three Boxes */
.boxes-3 { display: flex; }
.box {
  flex: 1;
  padding: 1rem;
  text-align: center;
  background: #ecf0f1;
  color: #2c3e50;
}
.box img { width: 100%; height: auto; }

/* Section 4: Three text columns */
.text-3 { display: flex; }
.col {
  flex: 1;
  padding: 1rem;
  background: #15A0BD;
  color: #2c3e50;
}

/* Section 5: Title + Description + 2x2 boxes */
.title-desc-boxes {
  padding: 1rem;
  text-align: center;
  background: #4576A8;
  color: #2c3e50;
}
.title-desc-boxes p {
    margin: 1rem 0;
    font-size: 23px;
}
.boxes-2x2 {
  display: flex;
  flex-wrap: wrap;
}
.boxes-2x2 .box {
  flex: 1 1 50%;
  padding: 1rem;
  background: #ecf0f1;
  color: #2c3e50;
}

/* Drop to single column on smaller screens */
@media (max-width: 600px) {
  .boxes-2x2 .box {
    flex: 1 1 100%;
  }
}

/* Section 6: Contact Form */
.contact {
  padding: 1rem;
  background: #e0f7fa;
  color: #006064;
}
.contact form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 400px; margin: 0 auto; }
.contact input, .contact textarea { padding: 0.5rem; width: 100%; }
.contact button {
  padding: 0.75rem;
  cursor: pointer;
  background: #006064;
  color: #ffffff;
  border: none;
}

/* Section 7: Comments */
.comments {
  padding: 1rem;
  text-align: center;
  background: #f1c40f;
  color: #2c3e50;
}
.comments .boxes-3 { display: flex; }
.comments .box {
  flex: 1;
  padding: 1rem;
  background: #fef9e7;
  color: #2c3e50;
}

/* Section 8: Footer */
.footer {
  padding: 1rem;
  text-align: center;
  background: #2c3e50;
  color: #ecf0f1;
}
```css
/* Reset default margins/paddings */
* { margin: 0; padding: 0; box-sizing: border-box; }
body, html {
    width: 100%;
    font-family: Arial, sans-serif;
}
.section { width: 100%; }

/* Section 1: Top Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #2c3e50;    /* Example: dark blue-gray */
  color: #ecf0f1;         /* Light text */
}
.nav-list { list-style: none; display: flex; gap: 1rem; }
.nav-list a { text-decoration: none; color: inherit; }

/* Section 2: Hero Image */
.hero img { width: 100%; height: auto; display: block; }
.hero { background: #34495e; /* Example section background */ }

/* Section 3: Three Boxes */
.boxes-3 { display: flex; }
.box {
  flex: 1;
  padding: 1rem;
  text-align: center;
  background: #93DFF3; /* Light gray */
  color: #2c3e50;      /* Dark text */
}
.box img { width: 100%; height: auto; }

/* Section 4: Three text columns */
.text-3 { display: flex; }
.col {
  flex: 1;
  padding: 1rem;
  background: #bdc3c7; /* Medium gray */
  color: #2c3e50;
}

/* Section 5: Title + Description + 2x2 boxes */

.title-desc-boxes .boxes-2x2 {
  display: flex;
  flex-wrap: wrap;      /* allow items to wrap to next "row" */
  margin: 0 -0.5rem;    /* optional: negative gutters if you add horizontal padding */
}

.title-desc-boxes .boxes-2x2 .box {
  flex: 1 1 50%;         /* base: two per row */
  padding: 1rem;
  /* your background/color as before */
}

/* ON SMALL SCREENS: force each .box full width */
@media (max-width: 600px) {
  .title-desc-boxes .boxes-2x2 .box {
    flex: 1 1 100%;      /* one per row */
  }
}


/* .title-desc-boxes {
  padding: 1rem;
  text-align: center;
  background: #ffffff;  
  color: #2c3e50;
}
.title-desc-boxes p { margin: 1rem 0; }
.boxes-2x2 { display: flex; flex-wrap: wrap; }
.boxes-2x2 .box {
  flex: 1 1 50%;
  padding: 1rem;
  background: #ecf0f1;
  color: #2c3e50;
} */

/* Section 6: Contact Form */
.contact {
  padding: 1rem;
  background: #e0f7fa;  /* Light cyan */
  color: #006064;       /* Dark cyan text */
}
.contact form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 400px; margin: 0 auto; }
.contact input, .contact textarea { padding: 0.5rem; width: 100%; }
.contact button {
  padding: 0.75rem;
  cursor: pointer;
  background: #006064;
  color: #ffffff;
  border: none;
}

/* Section 7: Comments */
.comments {
  padding: 1rem;
  text-align: center;
  background: #f1c40f; /* Yellow */
  color: #2c3e50;
}
.comments .boxes-3 { display: flex; }
.comments .box {
  flex: 1;
  padding: 1rem;
  background: #fef9e7;
  color: #2c3e50;
}

/* Section 8: Footer */
.footer {
  padding: 1rem;
  text-align: center;
  background: #2c3e50;
  color: #ecf0f1;
}