.container {
  width: min(92%, 1100px);
  margin: auto;
  padding: clamp(30px, 5vw, 60px) 0;
}


/* =========================
   HERO SECTION (FLEX)
========================= */

.hero {
  position: relative;
  height: clamp(500px, 85vh, 900px);
  overflow: hidden;
}

/* NEW: flex wrapper */

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}

.flex-item {
  flex: 1 1 260px;
}
.hero-flex {
display: flex;
  flex-wrap: wrap;
  gap: 26px;
}
.hero-box 1 {
  flex: 1;      /* Makes both boxes grow equally to fill the space */
  padding: 20px;
  border: 1px solid #ccc;
   background-image: url('/assets/Landing.jpeg');
}

.hero-box 2 {
  flex: 1;      /* Makes both boxes grow equally to fill the space */
  padding: 20px;
  border: 1px solid #ccc;
   background-color: #0a2a4a;
  
}

/* BACKGROUND IMAGE */

/*.hero-image {
  position: absolute;
  inset: 0;

  background-image: url('/assets/Landing.jpeg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;

  background-color: #0a2a4a;
  z-index: 0;
}
*/

/* =========================
   HERO CONTENT
========================= */

.hero-content {
  max-width: 520px;
  margin-right: 8%;
  color: white;
}

/* GREEN ACCENT STRIPE */

.hero-content::before {
  content: "";
  display: block;
  width: 80px;
  height: 6px;
  background: #18a34a;
  margin-bottom: 18px;
  border-radius: 3px;
}


/* TEXT */

.hero h1 {
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  line-height: 1.05;
  margin-bottom: 25px;
  color: white;
  font-weight: 700;
  letter-spacing: -1px;
  text-shadow: 0 4px 20px rgba(0,0,0,0.4);
}


/* =========================
   BUTTONS
========================= */

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn {
  padding: 14px 28px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
  transition: 0.2s ease;
  display: inline-block;
  color: white;
}

/* PRIMARY */

.primary {
  background: #1d4ed8;
}

.primary:hover {
  background: #1e40af;
  transform: translateY(-2px);
}

/* SECONDARY */

.secondary {
  background: #6AC32F;
  border: 2px solid white;
}

.secondary:hover {
  background: white;
  color: #0a198c;
}


/* =========================
   FLEX CARDS (REPLACED GRID)
========================= */

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}

.flex-item {
  flex: 1 1 260px;
}


/* CARD STYLES */

.card {
  background: white;
  padding: 35px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-6px);
}

.card h3 {
  margin-bottom: 10px;
}

.card p {
  margin-bottom: 18px;
}


/* =========================
   POSTS
========================= */

.post-preview {
  margin-bottom: clamp(20px, 3vw, 30px);
}

.post-preview h3 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}


/* =========================
   ABOUT SECTION
========================= */

.about {
  background: #f2f2f2;
  text-align: center;
}

.about h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 10px;
}

.about p {
  max-width: 700px;
  margin: auto;
  line-height: 1.6;
  font-size: 1.05rem;
}


/* =========================
   DESKTOP TWEAKS
========================= */

@media (min-width: 600px) {

  .hero-content {
    margin-right: 8%;
    text-align: right;
  }

  .hero-content::before {
    margin-left: auto;
  }

  .hero-buttons {
    justify-content: flex-end;
  }

}