/* ================= ABOUT HERO (BRANDED) ================= */

.abt-about-hero{
  position:relative;
  height:500px;
  background-image:url('../images/students.jpg');
  background-size:cover;
  background-position:center top;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 20px;
  overflow:hidden;
}

/* NAVY OVERLAY */
.abt-about-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    135deg,
    rgba(12,35,54,0.9),
    rgba(12,35,54,0.7)
  );
}

/* CONTENT */
.abt-about-hero-content{
  position:relative;
  z-index:2;
  max-width:800px;
  color:#fff;
}

.abt-about-hero-content h1{
  font-size:44px;
  font-weight:700;
  margin-bottom:15px;
}

.abt-about-hero-content h1 span{
  color:#66B23F; /* BRAND GREEN */
}

.abt-about-hero-content p{
  font-size:18px;
  color:#e0e0e0;
  line-height:1.6;
}

/* RESPONSIVE */
@media(max-width:768px){

  .abt-about-hero{
    height:400px;
  }

  .abt-about-hero-content h1{
    font-size:30px;
  }

  .abt-about-hero-content p{
    font-size:16px;
  }
}

/* ================= ABOUT CONTENT ================= */

.abt-about-content{
  padding:100px 20px;
  background:#ffffff;
  font-family:'Poppins', sans-serif;
}

.abt-about-container{
  max-width:1160px;
  margin:auto;
  display:flex;
  gap:60px;
  align-items:center;
  flex-wrap:wrap;
}

/* IMAGE */
.abt-about-logo{
  flex:1 1 320px;
  text-align:center;
}

.abt-about-logo img{
  max-width:300px;
  height:auto;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

/* TEXT */
.abt-about-text{
  flex:1 1 500px;
}

.abt-about-block{
  margin-bottom:40px;
}

/* HEADINGS */
.abt-about-block h3{
  font-size:1.2rem;
  font-weight:700;
  color:#113655;
  margin-bottom:12px;
  position:relative;
}

/* GREEN ACCENT LINE */
.abt-about-block h3::after{
  content:"";
  width:50px;
  height:3px;
  background:#66B23F;
  display:block;
  margin-top:8px;
}

/* PARAGRAPH */
.abt-about-block p{
  font-size:15.5px;
  line-height:1.8;
  color:#555;
}

/* RESPONSIVE */
@media(max-width:768px){

  .abt-about-container{
    flex-direction:column;
    text-align:center;
  }

  .abt-about-text{
    text-align:left;
  }

}

/* ================= MISSION & APPROACH ================= */

.abt-values-section{
  padding:90px 20px;
  background:#f6faf8;
  font-family:'Poppins', sans-serif;
}

.abt-values-container{
  max-width:1000px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
}

/* CARD */
.abt-value-card{
  background:#fff;
  padding:40px 30px;
  border-radius:16px;
  text-align:center;
  box-shadow:0 10px 30px rgba(17,54,85,0.08);
  transition:0.3s;
}

.abt-value-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(17,54,85,0.12);
}

/* ICON */
.abt-value-icon{
  width:70px;
  height:70px;
  margin:0 auto 20px;
  border-radius:50%;
  background:rgba(102,178,63,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
}

.abt-value-icon i{
  font-size:28px;
  color:#66B23F;
}

/* TITLE */
.abt-value-card h3{
  font-size:1.4rem;
  color:#113655;
  margin-bottom:15px;
  font-weight:700;
}

/* TEXT */
.abt-value-card p{
  font-size:15px;
  line-height:1.7;
  color:#555;
}

/* MOBILE */
@media(max-width:768px){
  .abt-values-container{
    grid-template-columns:1fr;
  }

  .abt-value-card{
    padding:30px 20px;
  }
}

/* ===== Director's Message Section ===== */
.director-msg {
  background: #fff;
  color: #333;
  font-family: 'Poppins', sans-serif;
  padding: 70px 20px;
}
.director-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1fr 1.4fr;
  gap: 28px;
  align-items: start;
}

/* ===== Left Column ===== */
.badge {
  display: inline-flex; gap: 8px; align-items: center;
  background: #004a99; color: #fff; padding: 6px 14px;
  border-radius: 999px; font-size: 13px; font-weight: 700;
}
.msg-left h2 {
  margin: 14px 0 10px; font-size: 36px; line-height: 1.2; font-weight: 900;
}
.msg-left h2 span { color: #9b003f; }

/* ===== Middle Image Panel ===== */
.msg-media {
  position: relative;
  border-radius: 14px; overflow: hidden;
  min-height: 320px;
  box-shadow: 0 16px 40px rgba(0,0,0,.2);
}
.msg-media__bg {
  position: absolute; inset: 0;
  background: #eee;
}
.msg-media__bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(20%) contrast(1.05) brightness(0.95);
  transition: filter 0.4s ease;
}
.msg-media:hover .msg-media__bg img {
  filter: grayscale(0%) contrast(1.1) brightness(1);
}
.badge-float {
  position: absolute; background: #fff; color: #000;
  font-size: 12px; font-weight: 700;
  padding: 10px 12px; border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  z-index: 2;
}
.badge-float.top-left { left: 14px; top: 14px; }
.badge-float.bottom-right { right: 14px; bottom: 14px; }

/* ===== Right Column (Message Text) ===== */
.msg-right p {
  color: #444; line-height: 1.7; margin-bottom: 14px;
  font-size: 16px;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .director-grid { grid-template-columns: 1fr; gap: 22px; }
  .msg-left h2 { font-size: 28px; }
  .msg-right p { font-size: 15px; }
}