html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

body {
    font-family: 'Georgia', serif;
    margin: 0;
    background: #f4f3ef;
    color: #333;
}

header {
    position: relative;
    background-color: #1a3b2d;
    color: white;
    padding: 4rem 2rem 4rem 6rem;
    text-align: center;
}

header h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.cta {
    display: inline-block;
    background: #b88c28;
    color: white;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: background 0.3s ease;
}

.cta:hover {
    background: #a57c1f;
}

.inline-button {
    display: inline-block;
    background: #b88c28;
    color: white;
    padding: 0.2em 0.8em;
    font-size: 0.9em;
    text-decoration: none;
    border-radius: 0.4rem;
    transition: background 0.3s ease;
    vertical-align: middle;
}

.inline-button:hover {
    background: #a57c1f; /* Same hover effect as .cta */
}

main {
    padding: 2rem;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
    justify-items: center;
}

.card {
    background: #eef2eb;
    border-radius: 1rem;
    padding: 2rem;
    width: 270px;
    text-align: center;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s;
}

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

.card img {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
}

.card h2 {
    margin-top: 0;
    font-size: 1.25rem;
    color: #1a3b2d;
}

.card p {
    font-size: 0.95rem;
    color: #444;
}

.card a {
    display: inline-block;
    margin-top: 1.2rem;
    color: white;
    background: #1a3b2d;
    padding: 0.5rem 1.25rem;
    border-radius: 0.4rem;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}

.card a:hover {
    background: #153024;
}

footer {
    background: #1a3b2d;
    color: white;
    text-align: center;
    padding: 1.5rem;
    font-size: 0.9rem;
    margin-top: auto;
}

footer .attribution {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: #ccc;
}

.disclaimer {
    font-size: 0.8rem;
    font-weight: normal;
    color: #555;
}

header img.logo {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 120px;
    height: 80px;
    background-color: #f4f3ef;
    padding: 0.5rem;
    border-radius: 8px;
}

.learn-more-button {
    margin-top: auto;
    align-self: center;
    background-color: #153d2e;
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
  }
  
.learn-more-button:hover {
    background-color: #0f2b21;
  }


.affiliations {
  text-align: center;
  margin: 3rem auto 2rem;
}

.affiliations h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #153d2e;
}

.affiliation-logos {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.affiliation-logos img {
  height: 100px;
  width: auto;
  opacity: 0.95;
  transition: transform 0.2s ease;
}

.affiliation-logos img:hover {
  transform: scale(1.05);
}

.college-app-image {
  max-width: 400px;
  width: 100%;
  height: auto;
  display: block;
  margin-left: 0 auto;
}

.packages-image {
  display: flex;
  max-width: 35%;
  width: 100%;
  height: auto;
  margin-left: 0 auto;
  flex-wrap: wrap;
}

.packages-container {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
    gap: 2rem; /* Space between the sections */
    justify-content: center; /* Center the sections horizontally */
    align-items: flex-start; /* Align items to the top */
}

.college-applications-section,
.summer-packages-section {
    flex: 1; /* Allows sections to grow and shrink */
    min-width: 300px; /* Minimum width before wrapping */
    /* You might want to add some padding or background to these sections if they look too bare */
}

/* Adjust image widths within these sections if necessary to fit the new layout */
.college-applications-section .college-app-image,
.summer-packages-section .summer-package-image {
    max-width: 75%; /* Ensure images are responsive within their new containers */
    height: auto;
    margin-left: 0; /* Reset margin for better centering within flex item */
    margin-right: 0;
}


.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
  justify-items: center;
}

.card {
  background: #eef2eb;
  border-radius: 1rem;
  padding: 2rem;
  width: 270px;
  text-align: center;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* pushes button down */
  transition: transform 0.2s;
}

.card p {
  flex-grow: 1; /* allows equal spacing above button */
}

/* Consistent image sizing */
.card img {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
}

.mission-logo {
  display: block !important;
  margin: 0 auto 1.25rem !important;
  width: 125px !important;     /* force larger size */
  height: auto !important;     /* maintain aspect ratio */
  object-fit: contain !important;
  max-width: 90% !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* Featured Partner Badge */
.featured-card {
  position: relative;
  border: 2px solid #b88c28;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
}

.featured-badge {
  position: absolute;
  top: -12px;
  right: -12px;
  background: #b88c28;
  color: white;
  font-size: 0.7rem;
  font-weight: bold;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}




@media (max-width: 768px) {
  /* Header adjustments */
  header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2rem 1rem;
  }

  header h1 {
    display: none;
  }

  header img.logo,
  img.logo {
    position: static !important;
    display: block;
    margin: 0 auto 1rem auto;
    height: 80px;
  }

  /* CTA buttons */
  .cta {
    display: inline-block;
    width: auto;
    margin: 0.25rem 0.3rem;
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
    border-radius: 0.5rem;
    text-align: center;
    }

  /* Package layout stack */
  .packages-container {
    flex-direction: column;
    align-items: center;
  }

  /* Mission BLUF logo scaling */
  .mission-logo {
    width: 120px;
    margin-bottom: 1rem;
  }
}





@media (max-width: 400px) {
  .cta {
    display: block;
    width: 85%;
    margin: 0.4rem auto;
  }
}