/* =====================================================================
   apt-pages.css - the look and the movement for every page except the
   home page, which carries its own styles.

   It is linked from top2.php, after that file's own <style>, so these
   rules win. It deliberately targets the classes the pages already use
   - .curved-background, .hh1, .education-item, .testimonial-card and
   the Bootstrap grid - so no page markup had to be rewritten.

   The home page uses .apt-* classes only and is untouched by any of it.
   ===================================================================== */

:root{
  --apt-blue:#3b5998;
  --apt-blue-dark:#1d2d57;
  --apt-blue-light:#eef2fb;
  --apt-gold:#f0c002;
  --apt-ink:#1f2430;
  --apt-muted:#5b6475;
  --apt-ring:rgba(59,89,152,.18);
}

body{
  font-family:'Poppins',"Segoe UI",Arial,sans-serif;
  color:var(--apt-ink);
  background:#fff;
}

/* ---------- section headings ----------------------------------------
   These were a heavy grey gradient slab with 40px of margin. Same
   element, quieter treatment, so the page starts with the words. */
.curved-background{
  background:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  margin:46px auto 26px !important;
  padding:0 !important;
  height:auto !important;
  text-align:center;
  display:block !important;
}
.hh1,.abc,.hh2{
  display:inline-block;
  color:var(--apt-blue-dark) !important;
  font-weight:800 !important;
  letter-spacing:-.4px !important;
  line-height:1.2 !important;
  text-shadow:none !important;
  text-transform:none !important;
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
  position:relative;
  padding-bottom:16px;
  margin:0;
}
/* the little gold-to-blue rule underneath */
.hh1::after,.abc::after{
  content:"";
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:74px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--apt-gold),var(--apt-blue));
}

/* ---------- panels and cards ---------------------------------------- */
.education-section{gap:22px !important;}

.education-item,
.animated-border .content,
.testimonial-card,
.fh5co-contact-info{
  background:#fff;
  border:1px solid #e9edf7;
  border-radius:18px;
  box-shadow:0 10px 28px rgba(26,40,80,.07);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.education-item:hover,
.animated-border:hover .content,
.testimonial-card:hover,
.fh5co-contact-info:hover{
  transform:translateY(-7px);
  box-shadow:0 24px 46px rgba(26,40,80,.15);
  border-color:#d7e0f5;
}

/* the rainbow border was doing a lot; a quiet gradient edge instead */
.animated-border{
  background:linear-gradient(135deg,#dfe6f6,#f3e9c6) !important;
  animation:none !important;
  border-radius:20px !important;
  padding:2px !important;
  transition:transform .3s ease, box-shadow .3s ease;
}
.animated-border:hover{box-shadow:0 22px 44px rgba(26,40,80,.16);}
.animated-border .content{border-radius:18px !important;}

.testimonial-card::before{color:rgba(59,89,152,.10) !important;}
.testimonial-text{color:var(--apt-muted);line-height:1.75;}
.testimonial-author{color:var(--apt-blue-dark) !important;opacity:1 !important;animation:none !important;}

/* ---------- pictures -------------------------------------------------
   Rounded, lifted, and they grow a little when pointed at. The frame
   hides the overflow so the zoom stays inside the corners. */
.img-thumbnail,
.testimonial-img,
.education-item img,
.animated-border img{
  border-radius:16px !important;
  border:0 !important;
  padding:0 !important;
  box-shadow:0 10px 26px rgba(26,40,80,.14);
  transition:transform .45s ease, box-shadow .45s ease;
  opacity:1 !important;
  animation:none !important;
  max-width:100%;
  height:auto;
}
.img-thumbnail:hover,
.testimonial-img:hover,
.education-item img:hover{
  transform:scale(1.04);
  box-shadow:0 20px 40px rgba(26,40,80,.22);
}
.testimonial-img{
  border-radius:50% !important;
  width:120px;height:120px;object-fit:cover;object-position:center top;
  box-shadow:0 0 0 4px #fff,0 0 0 8px var(--apt-ring),0 12px 26px rgba(26,40,80,.18);
}

/* gallery grid */
.row [class*="col"] > .img-fluid.img-thumbnail{
  width:100%;height:230px;object-fit:cover;display:block;
}

/* ---------- tables (the placed students list) ------------------------ */
table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 10px 28px rgba(26,40,80,.08);
}
table thead th,table th{
  background:linear-gradient(120deg,var(--apt-blue-dark),var(--apt-blue));
  color:#fff;font-weight:600;font-size:14.5px;
  padding:14px 16px;border:0;text-align:left;
}
table td{
  padding:13px 16px;border:0;border-top:1px solid #eef1f8;
  font-size:14.5px;color:var(--apt-ink);
}
table tbody tr{transition:background .2s ease;}
table tbody tr:hover{background:var(--apt-blue-light);}

/* ---------- links and buttons ---------------------------------------- */
.btn{border-radius:999px !important;font-weight:600;transition:transform .22s ease, box-shadow .22s ease;}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(29,45,87,.22);}
a{transition:color .2s ease;}

/* ---------- spacing -------------------------------------------------- */
.container,.container-fluid{padding-bottom:6px;}
iframe{border-radius:16px;box-shadow:0 12px 30px rgba(26,40,80,.14);}

/* ---------- the movement --------------------------------------------
   Only applied once the script has run, so with JavaScript off every
   page still shows all of its content. */
html.apt-reveal .apt-rv{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .65s ease, transform .65s cubic-bezier(.22,.85,.3,1);
  will-change:opacity,transform;
}
html.apt-reveal .apt-rv.is-in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html.apt-reveal .apt-rv{opacity:1 !important;transform:none !important;transition:none;}
  .education-item,.animated-border,.testimonial-card,.img-thumbnail,
  .testimonial-img,.btn,.fh5co-contact-info{transition:none !important;}
  .education-item:hover,.testimonial-card:hover,.img-thumbnail:hover,
  .testimonial-img:hover,.btn:hover,.fh5co-contact-info:hover{transform:none !important;}
}

@media (max-width:575.98px){
  .curved-background{margin:32px auto 20px !important;}
  .row [class*="col"] > .img-fluid.img-thumbnail{height:190px;}
  .testimonial-img{width:104px;height:104px;}
}