body { font-family: 'Open Sans', sans-serif; margin:0; background:#fff; color:#333; line-height:1.6; }
header { background:#C62828; color:#fff; padding:20px; display:flex; align-items:center; justify-content:space-between; position: sticky;  top: 0;  z-index: 999;}
header img { height:60px; }
nav a { color:#fff; margin:0 15px; text-decoration:none; font-weight:bold; }
.nav-menu {
  position: relative; /* Essential for the indicator positioning */
  display: flex;
  list-style: none;
}
.nav-indicator {
  position: absolute;
  bottom: 0;
  height: 4px;
  background-color: #007bff;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Makes it look "snappy" */
  border-radius: 2px;
}
.nav-link {
  padding: 15px 20px;
  display: block;
  text-decoration: none;
  color: #ffff;
}
.hero { text-align:center; padding:80px 20px; background:#F9A825; color:#333; }
.section { padding:60px 20px; max-width:1000px; margin:auto; }
h1,h2,h3 { font-family:'Montserrat', sans-serif; font-weight:900;
    display: inline; /* Keeps the highlight tight to the text */
}
.pillars { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.pillar-edu { flex:1; background:#f4f4f4; padding:20px; border-radius:8px; min-width:250px; color:#87CEEB; text-align: justify; text-justify: inter-word; }
.pillar-motivation { flex:1; background:#f4f4f4; padding:20px; border-radius:8px; min-width:250px; color:#CC5500;  text-align: justify; text-justify: inter-word;}
.pillar-employability { flex:1; background:#f4f4f4; padding:20px; border-radius:8px; min-width:250px; color:#008080;  text-align: justify; text-justify: inter-word;}
.pillar { flex:1; background:#f4f4f4; padding:20px; border-radius:8px; min-width:250px;  text-align: justify; text-justify: inter-word;}
footer { background:#333; color:#fff; text-align:center; padding:20px; }
footer a { color:#F9A825; }
.cta { background:#C62828; color:#fff; padding:10px 20px; border:none; border-radius:5px; cursor:pointer; }
form input, form textarea { width:100%; padding:10px; margin:5px 0; border:1px solid #ccc; border-radius:5px; }
table {
  width: 100%;
  table-layout: fixed;
}
.col1 { width: 25%; }
.col2 { width: 75%; }
.img-small {
    width: 40%;
    height: auto;
    display: block;
    margin-bottom: 20px; /* Adds nice space between image and text */
  }
img {
  max-width: 100%;
  display: block;
  margin-bottom: 20px; /* Adds nice space between image and text */
}
.object-fit-img {
  width: 500px;
  height: 400px;
  object-fit: fill; /* Centers and crops the image to fill the box */
  display: block;
  margin-bottom: 20px; /* Adds nice space between image and text */
  }
.fixed-heigh-img {
  height: 300px;
  width: auto; /* Automatically calculates width based on height */
  display: block;
  margin-bottom: 20px; /* Adds nice space between image and text */
}
.aspect-ratio-img {
  width: 100%;
  aspect-ratio: 1 / 1; /* Makes the image a perfect square */
  object-fit: fill;
  display: block;
  margin-bottom: 20px; /* Adds nice space between image and text */
}
.extra-bold {
    font-weight: 800; /* Values range from 100 to 900 */
    color: #333;      /* You can also change the color here */
}
.contact-form {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    gap: 15px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
}
.contact-form input, .contact-form textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
}