*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

img{
max-width:100%;
display:block;
}

/* =====================================
   ABOUT / CONTACT HERO SECTION
===================================== */

.contact-hero{
  position: relative;
  min-height: 350px;
  background: url("/assets/bg.jpg") center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}

.contact-overlay{
position:absolute;
inset:0;
background:rgba(210,60,20,0.85);
}

.contact-content{
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 900px;
  width: 100%;
  padding: 0 15px;
}

.contact-content h1{
  font-size: 44px;
  font-weight: 700;
  margin-bottom: 8px;
  font-family: "Georgia", serif;
  line-height: 1.2;
}

.contact-content p{
  font-size: 15px;
  opacity: 0.9;
  line-height: 1.6;
}

/* Tablet */
@media (max-width: 992px){
  .contact-hero{
    min-height: 300px;
    padding: 35px 18px;
  }

  .contact-content h1{
    font-size: 36px;
  }

  .contact-content p{
    font-size: 14px;
  }
}

/* Mobile */
@media (max-width: 768px){
  .contact-hero{
    min-height: 250px;
    padding: 30px 15px;
  }

  .contact-content h1{
    font-size: 30px;
  }

  .contact-content p{
    font-size: 14px;
  }
}

/* Small Mobile */
@media (max-width: 480px){
  .contact-hero{
    min-height: 220px;
    padding: 25px 12px;
  }

  .contact-content h1{
    font-size: 24px;
    margin-bottom: 6px;
  }

  .contact-content p{
    font-size: 13px;
    line-height: 1.5;
  }
}
/* =====================================
ABOUT SECTION
===================================== */

.about-section{
padding:80px 20px;
background:#f5f5f5;
}

.about-container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
}

.about-left{
position:relative;

min-height:450px;
overflow:hidden;
flex-shrink:0;
}

.bg-image{
position:absolute;
inset:0;
background:url("/assets/about.jpg") center/cover no-repeat;
}

.red-overlay{
position:absolute;
inset:0;
background:linear-gradient(rgba(210,60,20,0.85),
      rgba(210,60,20,0.85));
}

.since{
position:absolute;
top:30px;
left:40px;
color:white;
font-size:14px;
letter-spacing:3px;
font-weight:600;
z-index:2;
}

.front-image{
position:absolute;
bottom:40px;
left:60px;
width:320px;
max-width:calc(100% - 80px);
z-index:3;
box-shadow:0 25px 40px rgba(0,0,0,0.3);
}

.front-image img{
width:100%;
border-radius:8px;
}

.about-right{

padding:70px;
min-width:0;
}

.about-right h2{
font-size:32px;
margin-bottom:20px;
color:#333;
line-height:1.2;
}

.about-main{
font-size:18px;
color:#444;
line-height:1.7;
margin-bottom:20px;
}

.about-right p{
font-size:15px;
color:#666;
line-height:1.7;
margin-bottom:15px;
}

.about-link{
display:inline-block;
margin-top:20px;
font-size:13px;
letter-spacing:2px;
color:#b72c2c;
text-decoration:none;
font-weight:600;
}
.about-link{
  color:#d84315;
}

.about-link:hover{
  color:#c63b2e;
}
.about-left,
.about-right{
  flex:1;
  width:100%;
}
/*===========Legacy section=========*/
.legacy-section{
  padding:100px 20px;
  background:#f8f9fc;
}

.legacy-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.legacy-content h2{
  font-size:34px;
  margin-bottom:10px;
}

.legacy-main{
  font-size:18px;
  font-weight:600;
  color:#bc4932;
  margin-bottom:20px;
}

.legacy-content p{
  font-size:15px;
  line-height:1.7;
  margin-bottom:15px;
  color:#333;
}

/* ICON GRID */
.legacy-features{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.feature-box{
  background:white;
  padding:25px;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  text-align:center;
  transition:.3s;
}

.feature-box i{
  font-size:28px;
  color:#bc4932;
  margin-bottom:10px;
}

.feature-box h4{
  font-size:16px;
  margin-bottom:8px;
}

.feature-box p{
  font-size:13px;
  color:#555;
}

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

/* RESPONSIVE */
@media(max-width:1024px){
  .legacy-container{
    grid-template-columns:1fr;
    text-align:center;
  }

  .legacy-features{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:600px){
  .legacy-features{
    grid-template-columns:1fr;
  }
}
@media(max-width:900px){
  .legacy-container{
    grid-template-columns:1fr;
  }
}
/* =====================================
CORE VALUES
===================================== */
/* SECTION */
.vmv-section{
  padding:80px 20px;
  
    background:linear-gradient(rgba(210,60,20,0.85),
      rgba(210,60,20,0.85));
  
}

/* CONTAINER */
.vmv-container{
  max-width:1100px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
}

/* CARD */
.vmv-card{
  flex:1;
  min-width:280px;
  text-align:center;
  padding:30px 20px;
  color:#fff;
  position:relative;
}

/* ICON */
.vmv-icon{
  font-size:40px;
  margin-bottom:15px;
}

/* TITLE */
.vmv-card h3{
  font-size:18px;
  letter-spacing:1px;
  margin-bottom:10px;
}

/* TEXT */
.vmv-card p{
  font-size:14px;
  line-height:1.6;
  opacity:0.9;
}

/* DIVIDER LINE */
.vmv-card:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-15px;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:70px;
  background:rgba(255,255,255,0.3);
}

/* HOVER EFFECT */
.vmv-card:hover{
  transform:translateY(-5px);
  transition:0.3s;
}

/* BUTTON STYLE (OPTIONAL USE) */
.btn-outline{
  border:2px solid #f4511e;
  color:#f4511e;
  padding:8px 18px;
  border-radius:25px;
  text-decoration:none;
  display:inline-block;
  margin-top:15px;
  transition:0.3s;
}

.btn-outline:hover{
  background:#d84315;
  color:#fff;
}

/* RESPONSIVE */
@media(max-width:900px){
  .vmv-container{
    flex-direction:column;
    text-align:center;
  }

  .vmv-card::after{
    display:none;
  }
}
/* =====================================
LEADERSHIP
===================================== */

.leadership-section{
padding:90px 20px;
background:#f6f6f6;
text-align:center;
}
.leadership-section{
  background:#f5f6f8;
}

.leadership-section h2{
  color:#1b2347;
}
.leadership-container{
max-width:1200px;
margin:auto;
}

.leadership-section h2{
font-size:34px;
margin-bottom:10px;
line-height:1.2;
}

.leadership-subtitle{
font-size:16px;
color:#666;
margin-bottom:50px;
}

.leaders-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
}

.leader-card{
background:white;
padding:35px 30px;
border-radius:12px;
box-shadow:0 15px 35px rgba(0,0,0,0.08);
transition:0.3s;
}

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

.leader-image{
width:120px;
height:120px;
margin:auto;
border-radius:50%;
overflow:hidden;
margin-bottom:18px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.leader-image img{
width:100%;
height:100%;
object-fit:cover;
}

.leader-card h3{
font-size:18px;
line-height:1.3;
}

.leader-role{
font-size:13px;
color:#888;
display:block;
margin-bottom:15px;
}

.leader-quote{
font-size:14px;
color:#555;
font-style:italic;
line-height:1.6;
}

/* =====================================
PRINCIPAL MESSAGE
===================================== */

.principal-message{
padding:100px 20px;

background:linear-gradient(135deg,#c63b2e,#f39c12);
color:white;
margin-bottom:40px;
overflow:hidden;
}

.message-container{
max-width:1200px;
margin:auto;
}

.message-grid{
display:grid;
grid-template-columns:minmax(280px,400px) 1fr;
gap:60px;
align-items:center;
}

.principal-image img{
width:100%;
border-radius:12px;
box-shadow:0 25px 50px rgba(0,0,0,0.35);
}

.section-label{
font-size:12px;
letter-spacing:2px;
opacity:.8;
}

.message-content h2{
font-size:40px;
margin:10px 0 30px;
line-height:1.2;
color:#fdfdfd;
}

.quote-icon{
font-size:70px;
opacity:.4;
margin-bottom:20px;
line-height:1;
}

.principal-text{
font-size:16px;
line-height:1.8;
max-width:600px;
margin-bottom:30px;
}

.principal-name{
font-size:20px;
font-weight:600;
}

.principal-name span{
display:block;
font-size:14px;
opacity:.8;
margin-top:4px;
}


/* =====================================
TABLET
===================================== */

@media(max-width:1024px){

.about-section,
.core-values,
.leadership-section,
.principal-message{
padding-top:70px;
padding-bottom:70px;
}

.about-container{
flex-direction:column;
}

.about-left{
width:100%;
min-height:420px;
}

.about-right{
width:100%;
padding:50px 40px;
}

.front-image{
left:50%;
transform:translateX(-50%);
bottom:-30px;
width:280px;
max-width:80%;
}

.leaders-grid{
grid-template-columns:repeat(2,1fr);
}

.message-grid{
grid-template-columns:1fr;
text-align:center;
}

.principal-image{
max-width:350px;
margin:auto;
}

.principal-text{
max-width:100%;
}
}
@media(max-width:768px){
  .front-image{
    left:50%;
    transform:translateX(-50%);
    bottom:-20px;
  }
}
/* =====================================
MOBILE
===================================== */

@media(max-width:768px){

.about-us{
padding:80px 20px;
}

.about-us-content h1{
font-size:2.2rem;
}

.about-us-content p{
font-size:1.1rem;
}

.about-section{
padding:50px 15px;
}

.about-left{
min-height:360px;
}


  .front-image{
    left:50%;
    transform:translateX(-50%);
    bottom:-20px;
  }


.about-right{
padding:50px 25px 40px;
}

.about-right h2{
font-size:26px;
}

.about-main{
font-size:16px;
}

.about-right p{
font-size:14px;
}

.core-values{
padding:70px 15px;
}

.core-heading{
font-size:28px;
}

.core-item{
width:100%;
max-width:280px;
}

.circle{
width:220px;
height:220px;
}

.circle-inner{
width:190px;
height:190px;
padding:15px;
}

.circle-inner h3{
font-size:17px;
}

.circle-inner p{
font-size:12px;
}

.leadership-section{
padding:70px 15px;
}

.leaders-grid{
grid-template-columns:1fr;
}

.message-content h2{
font-size:30px;
}
}

/* =====================================
SMALL MOBILE
===================================== */

@media(max-width:480px){

.about-us{
padding:65px 15px;
}

.about-us-content h1{
font-size:1.8rem;
}

.about-us-content p{
font-size:1rem;
}

.since{
left:20px;
top:20px;
font-size:12px;
}

.front-image{
width:200px;
bottom:-15px;
}

.about-right{
padding:45px 18px 30px;
}

.about-right h2{
font-size:22px;
}

.about-main{
font-size:15px;
}

.about-right p{
font-size:13px;
}

.core-heading{
font-size:24px;
}

.circle{
width:200px;
height:200px;
}

.circle-inner{
width:172px;
height:172px;
}

.circle-inner h3{
font-size:15px;
}

.circle-inner p{
font-size:11px;
}

.leadership-section h2{
font-size:26px;
}

.leadership-subtitle{
font-size:14px;
}

.leader-card{
padding:25px 20px;
}

.leader-image{
width:100px;
height:100px;
}

.message-content h2{
font-size:24px;
}

.principal-text{
font-size:14px;
}

.principal-name{
font-size:18px;
}
}
/* ALTERNATE LAYOUT */
.principal-message.reverse .message-grid{
  grid-template-columns: 1fr minmax(280px,400px);
}

/* Swap order */
.principal-message.reverse .principal-image{
  order: 2;
}

.principal-message.reverse .message-content{
  order: 1;
}
@media(max-width:1024px){
  .principal-message.reverse .principal-image,
  .principal-message.reverse .message-content{
    order: unset;
  }
}
@media(max-width:1024px){

  .message-grid{
    grid-template-columns:1fr;
  }

  /* FIX: force reverse section to also be single column */
  .principal-message.reverse .message-grid{
    grid-template-columns:1fr;
  }

}
html {
  scroll-behavior: smooth;
}
/* SECTION */
.admission-section{
  padding:60px 20px;
  background:#f5f6f8;
}

/* CONTAINER */
.admission-container{
  max-width:1200px;
  margin:auto;
  display:flex;
  gap:40px;
  align-items:flex-start;
}

/* FORM */
.admission-form{
  width:50%;
  background:#fff;
  padding:30px;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.admission-form h3{
  margin-bottom:10px;
}

.admission-form p{
  margin-bottom:20px;
  color:#666;
}

/* FORM INPUTS */
.admission-form input,
.admission-form select{
  width:100%;
  padding:12px;
  margin-bottom:15px;
  border:1px solid #ddd;
  border-radius:8px;
  font-size:14px;
}

/* TWO INPUTS ROW */
.form-row{
  display:flex;
  gap:15px;
}

.form-row input{
  width:100%;
}

/* BUTTON */
.admission-form button{
  width:100%;
  padding:12px;
  border:none;
  border-radius:8px;
  background:#1a73e8;
  color:white;
  font-size:15px;
  cursor:pointer;
  transition:0.3s;
}

.admission-form button:hover{
  background:#0b5ed7;
}

/* YOUR EXISTING CARD */
.admission-card{
  width:50%;
}

/* RESPONSIVE */
@media(max-width:900px){
  .admission-container{
    flex-direction:column;
  }

  .admission-form,
  .admission-card{
    width:100%;
  }
}
.vmv-icon{
  width: 80px;
  height: 80px;
  margin: 0 auto 15px;
}

.vmv-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}