/* =========================================================
   EDUCATION PAGE
   Page-specific CSS only
   ========================================================= */

.education-page{
  --edu-navy:#102f45;
  --edu-blue:#1f506c;
  --edu-orange:#d8893b;
  --edu-gold:#e8b76b;
  --edu-cream:#f8f4ed;
  --edu-soft:#f2f6f4;
  --edu-text:#263746;
  --edu-muted:#6d7a83;
  --edu-white:#ffffff;
  --edu-border:rgba(16,47,69,.10);
  --edu-shadow:0 18px 45px rgba(16,47,69,.08);

  color:var(--edu-text);
  background:#fff;
  font-family:"DM Sans",sans-serif;
}


/* =========================================================
   COMMON EDUCATION CONTAINER
   ========================================================= */

.education-page .education-container{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.education-page .education-hero{
  position:relative;
  min-height:500px;
  display:flex;
  align-items:center;
  overflow:hidden;

  background:
    linear-gradient(
      90deg,
      rgba(16,47,69,.96) 0%,
      rgba(16,47,69,.84) 48%,
      rgba(16,47,69,.30) 100%
    ),
    url("images/education-hero.jpg")
    center/cover
    no-repeat;
}


.education-page .education-hero-inner{
  padding:90px 0;
}


.education-page .education-hero-content{
  max-width:720px;
}


.education-page .education-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;

  margin-bottom:20px;

  color:#fff;

  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}


.education-page .education-eyebrow i{
  color:var(--edu-gold);
  font-size:16px;
}


.education-page .education-hero h1{
  margin:0 0 22px;

  color:#fff;

  font-family:"Playfair Display",serif;
  font-size:clamp(42px,5.5vw,70px);
  line-height:1.04;
  font-weight:700;
  letter-spacing:-.025em;
}


.education-page .education-hero h1 span{
  color:var(--edu-gold);
}


.education-page .education-hero p{
  max-width:680px;
  margin:0 0 30px;

  color:rgba(255,255,255,.90);

  font-size:17px;
  line-height:1.75;
}


.education-page .education-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}


/* =========================================================
   EDUCATION BUTTONS
   ========================================================= */

.education-page .education-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  min-height:48px;
  padding:0 21px;

  border:0;
  border-radius:8px;

  text-decoration:none;

  font-family:"DM Sans",sans-serif;
  font-size:15px;
  font-weight:700;

  cursor:pointer;

  transition:
    transform .2s ease,
    background-color .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}


.education-page .education-btn:hover{
  transform:translateY(-2px);
}


.education-page .education-btn-primary{
  background:var(--edu-orange);
  color:#fff;
  box-shadow:0 10px 25px rgba(216,137,59,.22);
}


.education-page .education-btn-primary:hover{
  background:#c8782e;
}


.education-page .education-btn-blue{
  background:var(--edu-blue);
  color:#fff;
  box-shadow:0 10px 25px rgba(31,80,108,.18);
}


.education-page .education-btn-blue:hover{
  background:#173e54;
}


.education-page .education-btn-light{
  background:#fff;
  color:var(--edu-navy);
  box-shadow:0 10px 25px rgba(0,0,0,.12);
}


.education-page .education-btn-light:hover{
  background:var(--edu-cream);
}


/* =========================================================
   COMMON SECTION
   ========================================================= */

.education-page .education-section{
  padding:90px 0;
}


.education-page .education-label{
  display:block;

  margin-bottom:12px;

  color:var(--edu-orange);

  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}


.education-page .education-section-heading{
  max-width:760px;
  margin:0 auto 48px;

  text-align:center;
}


.education-page .education-section-heading h2,
.education-page .education-intro-content h2,
.education-page .education-teach-content h2,
.education-page .education-support-box h2{
  margin:0 0 18px;

  color:var(--edu-navy);

  font-family:"Playfair Display",serif;
  font-weight:700;
  line-height:1.15;
}


.education-page .education-section-heading h2{
  font-size:clamp(32px,4vw,46px);
}


.education-page .education-section-heading h2 span,
.education-page .education-intro-content h2 span{
  color:var(--edu-blue);
}


.education-page .education-section-heading p{
  max-width:680px;
  margin:0 auto;

  color:var(--edu-muted);

  font-size:16px;
  line-height:1.75;
}


/* =========================================================
   INTRO
   ========================================================= */

.education-page .education-intro{
  background:#fff;
}


.education-page .education-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);
  gap:60px;
  align-items:center;
}


.education-page .education-intro-content{
  max-width:720px;
}


.education-page .education-intro-content h2{
  font-size:clamp(34px,4vw,48px);
}


.education-page .education-intro-content p{
  margin:0 0 18px;

  color:var(--edu-muted);

  font-size:16px;
  line-height:1.8;
}


.education-page .education-intro-content p:last-child{
  margin-bottom:0;
}


.education-page .education-intro-highlight{
  padding:38px 34px;

  background:var(--edu-cream);

  border:1px solid rgba(216,137,59,.18);
  border-radius:18px;

  box-shadow:var(--edu-shadow);
}


.education-page .education-highlight-icon{
  width:62px;
  height:62px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:22px;

  border-radius:14px;

  background:var(--edu-navy);
  color:var(--edu-gold);

  font-size:26px;
}


.education-page .education-intro-highlight h3{
  margin:0 0 14px;

  color:var(--edu-navy);

  font-family:"Playfair Display",serif;
  font-size:25px;
  line-height:1.3;
}


.education-page .education-intro-highlight p{
  margin:0;

  color:var(--edu-muted);

  font-size:15px;
  line-height:1.75;
}


/* =========================================================
   INITIATIVES
   ========================================================= */

.education-page .education-initiatives{
  background:var(--edu-soft);
}


.education-page .education-initiative-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}


.education-page .education-card{
  position:relative;

  min-height:275px;
  padding:30px 26px;

  background:#fff;

  border:1px solid var(--edu-border);
  border-radius:16px;

  box-shadow:var(--edu-shadow);

  overflow:hidden;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}


.education-page .education-card::before{
  content:"";

  position:absolute;
  top:0;
  left:0;
  right:0;

  height:3px;

  background:var(--edu-orange);

  transform:scaleX(0);
  transform-origin:left;

  transition:transform .25s ease;
}


.education-page .education-card:hover{
  transform:translateY(-5px);

  border-color:rgba(216,137,59,.25);

  box-shadow:0 22px 50px rgba(16,47,69,.12);
}


.education-page .education-card:hover::before{
  transform:scaleX(1);
}


.education-page .education-card-icon{
  width:54px;
  height:54px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:20px;

  border-radius:13px;

  background:var(--edu-cream);
  color:var(--edu-orange);

  font-size:21px;
}


.education-page .education-card-number{
  position:absolute;
  top:24px;
  right:24px;

  color:rgba(16,47,69,.12);

  font-size:13px;
  font-weight:700;
}


.education-page .education-card h3{
  margin:0 0 11px;

  color:var(--edu-navy);

  font-size:19px;
  line-height:1.35;
  font-weight:700;
}


.education-page .education-card p{
  margin:0;

  color:var(--edu-muted);

  font-size:14px;
  line-height:1.7;
}


/* =========================================================
   TEACH CHOTU
   ========================================================= */

.education-page .education-teach{
  background:#fff;
}


.education-page .education-teach-box{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  align-items:stretch;

  overflow:hidden;

  background:var(--edu-navy);

  border-radius:20px;

  box-shadow:0 22px 55px rgba(16,47,69,.16);
}


.education-page .education-teach-content{
  padding:52px;
}


.education-page .education-teach-content .education-label{
  color:var(--edu-gold);
}


.education-page .education-teach-content h2{
  color:#fff;
  font-size:clamp(34px,4vw,48px);
}


.education-page .education-teach-content p{
  margin:0 0 20px;

  color:rgba(255,255,255,.78);

  font-size:15px;
  line-height:1.8;
}


.education-page .education-teach-content .education-teach-lead{
  color:#fff;

  font-size:18px;
  font-weight:600;
  line-height:1.65;
}


.education-page .education-teach-content .education-btn{
  margin-top:10px;
}


.education-page .education-teach-visual{
  min-height:360px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:40px;

  text-align:center;

  background:
    linear-gradient(
      145deg,
      rgba(216,137,59,.95),
      rgba(232,183,107,.88)
    );
}


.education-page .education-teach-icon{
  width:105px;
  height:105px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:25px;

  border-radius:50%;

  background:rgba(255,255,255,.18);

  color:#fff;

  font-size:48px;

  box-shadow:
    0 15px 35px rgba(16,47,69,.12);
}


.education-page .education-teach-visual span{
  max-width:280px;

  color:#fff;

  font-family:"Playfair Display",serif;
  font-size:22px;
  font-weight:600;
  line-height:1.45;
}


/* =========================================================
   APPROACH
   ========================================================= */

.education-page .education-approach{
  background:var(--edu-soft);
}


.education-page .education-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}


.education-page .education-step{
  position:relative;

  padding:34px 26px;

  background:#fff;

  border:1px solid var(--edu-border);
  border-radius:16px;

  text-align:center;

  box-shadow:var(--edu-shadow);
}


.education-page .education-step-number{
  position:absolute;
  top:18px;
  right:20px;

  color:rgba(16,47,69,.10);

  font-size:12px;
  font-weight:700;
}


.education-page .education-step > i{
  width:60px;
  height:60px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin:0 auto 20px;

  border-radius:50%;

  background:var(--edu-cream);
  color:var(--edu-orange);

  font-size:23px;
}


.education-page .education-step h3{
  margin:0 0 10px;

  color:var(--edu-navy);

  font-size:19px;
}


.education-page .education-step p{
  margin:0;

  color:var(--edu-muted);

  font-size:14px;
  line-height:1.7;
}


/* =========================================================
   WHY EDUCATION
   ========================================================= */

.education-page .education-why{
  background:#fff;
}


.education-page .education-why-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}


.education-page .education-why-card{
  display:flex;
  align-items:flex-start;
  gap:18px;

  padding:26px;

  background:#fff;

  border:1px solid var(--edu-border);
  border-radius:15px;

  box-shadow:var(--edu-shadow);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.education-page .education-why-card:hover{
  transform:translateY(-4px);

  box-shadow:0 20px 45px rgba(16,47,69,.11);
}


.education-page .education-why-card > i{
  flex:0 0 48px;

  width:48px;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;

  background:var(--edu-cream);
  color:var(--edu-orange);

  font-size:19px;
}


.education-page .education-why-card h3{
  margin:0 0 7px;

  color:var(--edu-navy);

  font-size:17px;
  line-height:1.35;
}


.education-page .education-why-card p{
  margin:0;

  color:var(--edu-muted);

  font-size:14px;
  line-height:1.65;
}


/* =========================================================
   SUPPORT
   ========================================================= */

.education-page .education-support{
  padding-top:0;

  background:#fff;
}


.education-page .education-support-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;

  padding:42px 46px;

  background:var(--edu-cream);

  border:1px solid rgba(216,137,59,.18);
  border-radius:18px;

  box-shadow:var(--edu-shadow);
}


.education-page .education-support-box > div:first-child{
  max-width:700px;
}


.education-page .education-support-box h2{
  font-size:clamp(28px,3.5vw,40px);
}


.education-page .education-support-box p{
  margin:0;

  color:var(--edu-muted);

  font-size:15px;
  line-height:1.75;
}


.education-page .education-support-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;

  flex-shrink:0;
}


/* =========================================================
   FINAL SHARED CTA
   =========================================================
   The existing .cta styles from styles.css remain untouched.
   ========================================================= */


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1100px){

  .education-page .education-initiative-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }


  .education-page .education-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }


  .education-page .education-why-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }


  .education-page .education-intro-grid{
    gap:40px;
  }

}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width:900px){

  .education-page .education-hero{
    min-height:480px;

    background:
      linear-gradient(
        90deg,
        rgba(16,47,69,.96) 0%,
        rgba(16,47,69,.80) 65%,
        rgba(16,47,69,.52) 100%
      ),
      url("images/education-hero.jpg")
      center/cover
      no-repeat;
  }


  .education-page .education-intro-grid{
    grid-template-columns:1fr;
  }


  .education-page .education-intro-content{
    max-width:none;
  }


  .education-page .education-teach-box{
    grid-template-columns:1fr;
  }


  .education-page .education-teach-visual{
    min-height:280px;
  }


  .education-page .education-support-box{
    align-items:flex-start;
    flex-direction:column;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:700px){

  .education-page .education-container{
    width:min(100% - 30px,1180px);
  }


  .education-page .education-section{
    padding:65px 0;
  }


  /* HERO */

  .education-page .education-hero{
    min-height:540px;

    background:
      linear-gradient(
        90deg,
        rgba(16,47,69,.97) 0%,
        rgba(16,47,69,.88) 100%
      ),
      url("images/education-hero.jpg")
      60% center/cover
      no-repeat;
  }


  .education-page .education-hero-inner{
    padding:70px 0;
  }


  .education-page .education-hero h1{
    font-size:44px;
  }


  .education-page .education-hero p{
    font-size:15px;
    line-height:1.7;
  }


  .education-page .education-hero-actions{
    width:100%;
    flex-direction:column;
  }


  .education-page .education-btn{
    width:100%;
  }


  /* HEADINGS */

  .education-page .education-section-heading{
    margin-bottom:35px;
  }


  .education-page .education-section-heading h2{
    font-size:34px;
  }


  /* INITIATIVES */

  .education-page .education-initiative-grid{
    grid-template-columns:1fr;
    gap:16px;
  }


  .education-page .education-card{
    min-height:auto;
    padding:26px 23px;
  }


  /* APPROACH */

  .education-page .education-steps{
    grid-template-columns:1fr;
    gap:16px;
  }


  /* WHY */

  .education-page .education-why-grid{
    grid-template-columns:1fr;
    gap:16px;
  }


  .education-page .education-why-card{
    padding:22px;
  }


  /* TEACH CHOTU */

  .education-page .education-teach-content{
    padding:35px 25px;
  }


  .education-page .education-teach-content h2{
    font-size:35px;
  }


  .education-page .education-teach-visual{
    min-height:250px;
    padding:30px 20px;
  }


  .education-page .education-teach-icon{
    width:85px;
    height:85px;

    font-size:38px;
  }


  .education-page .education-teach-visual span{
    font-size:19px;
  }


  /* SUPPORT */

  .education-page .education-support-box{
    padding:30px 24px;
  }


  .education-page .education-support-actions{
    width:100%;
    flex-direction:column;
  }


  /* INTRO */

  .education-page .education-intro-highlight{
    padding:30px 25px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width:420px){

  .education-page .education-hero h1{
    font-size:39px;
  }


  .education-page .education-hero-inner{
    padding:60px 0;
  }


  .education-page .education-section-heading h2{
    font-size:31px;
  }


  .education-page .education-intro-content h2{
    font-size:34px;
  }


  .education-page .education-card{
    padding:24px 20px;
  }


  .education-page .education-teach-content{
    padding:30px 22px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  .education-page *,
  .education-page *::before,
  .education-page *::after{
    scroll-behavior:auto !important;
    transition:none !important;
  }

}