:root{
  --gold:#ffab72;
  --gold2:#ffab72;
  --ink:#090909;
  --cream:#fffefa;
  --line:#e5e5e5;
  --max:1024px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:#151515;
  font-family:"Roboto", Sans-serif;;
  background:var(--cream);
}
img{display:block;max-width:100%}
.site-header{
  height:110px;
  background:#fff;
  position:sticky;
  top:0;
  z-index:20;
  border-top:3px solid #efc8cf;
  box-shadow:0 1px 0 rgba(0,0,0,.08);
}
.header-inner{
  max-width:1024px;
  height:100%;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#111;
  text-decoration:none;
}
.brand-mark{
  width:42px;
  height:42px;
  border:2px solid #111;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:23px;
  font-weight:800;
}
.brand-word{
  font-size:28px;
  font-weight:800;
  line-height:.85;
  letter-spacing:-1px;
}
.brand-word span{
  display:block;
  font-family:"Playfair Display",serif;
  font-size:15px;
  letter-spacing:3px;
  text-align:center;
}
.brand-word small{
  display:block;
  background:#111;
  color:#fff;
  padding:3px 13px;
  margin-top:5px;
  font-size:8px;
  letter-spacing:1.2px;
  text-align:center;
}
.phone-btn,.hero-phone{
  background:#101a35;
  color:#fff;
  border:2px solid #ffab72;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 0 15px rgba(229,169,26,.45);
}
.phone-btn{padding:10px 18px}

.hero{
  min-height:700px;
  position:relative;
  background:
    linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,.68)),
    url("https://www.acmtagra.com/images/Primary-Teacher-Training2.jpg")
    center/cover no-repeat;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 50%,rgba(229,169,26,.18),transparent 5%),
    linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.18));
  pointer-events:none;
}
.hero-inner{
  min-height:700px;
  max-width:1024px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 395px;
  gap:40px;
  align-items:center;
  padding:55px 20px;
  position:relative;
  z-index:1;
}
.hero-copy{
  text-align:center;
  color:white;
}
.hero-kicker{
  display:inline-block;
  margin:0 0 16px;
  padding:7px 12px;
  border:1px solid var(--gold);
  color:#f7cf63;
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
}
.hero-copy h1{
  font-size:30px;
  line-height:1.28;
  margin:0 0 18px;
  text-shadow:0 0 12px rgba(255,255,255,.5);
}
.hero-copy h1 em{
  color:#ffab72;
  font-style:italic;
}
.investment{
  color:#fff;
  font-size:21px;
  font-weight:700;
  margin-bottom:24px;
}
.investment span{font-size:22px}
.hero-phones{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.hero-phone{
  display:inline-block;
  background:#fff;
  color:#111;
  padding:9px 18px;
}
.enquiry-card{
  width:100%;
  background:#f8f8f8;
  border-radius:20px;
  padding:14px 55px 24px;
  border:2px solid var(--gold);
  box-shadow:0 0 22px rgba(229,169,26,.55);
}
.enquiry-card h2{
  text-align:center;
  margin:0 0 18px;
  font-size:25px;
}
.enquiry-card input:not([type=radio]),.enquiry-card textarea{
  width:100%;
  border:1px solid #bbb;
  background:#fff;
  padding:10px 11px;
  margin-bottom:15px;
  font:inherit;
  font-size:13px;
}
.enquiry-card textarea{height:93px;resize:vertical}
fieldset{border:0;padding:0;margin:0 0 15px}
legend,.field-label{
  font-size:13px;
  font-weight:600;
  margin-bottom:8px;
}
legend b{color:red}
fieldset label{
  display:block;
  font-size:12px;
  margin:10px 0;
}
fieldset input{margin-right:8px}
.enquiry-card button{
  border:0;
  background:#087dc1;
  color:#fff;
  padding:9px 15px;
  font-weight:700;
  cursor:pointer;
  border-radius:2px;
}
.form-status{font-size:12px;margin:9px 0 0}

.patterned{
  background-color:#fff;
  background-image:
   radial-gradient(circle at 20% 20%,rgba(229,169,26,.08) 0 2px,transparent 2.5px),
   linear-gradient(45deg,transparent 48%,rgba(229,169,26,.045) 49% 51%,transparent 52%);
  background-size:36px 36px,58px 58px;
}
.patterned1{
   background-color:#fff;
    background-image: url("assets/banner1.png");
  
}
.section{padding:0}
.about-grid{
  max-width:1024px;
  margin:auto;
  min-height:470px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:38px;
  align-items:center;
  padding:25px 18px 40px;
}
.about-copy h2{
  font-size:28px;
  text-align:center;
  margin:0 0 10px;
}
.about-copy p{
  font-size:15px;
  line-height:1.62;
  margin:0 0 10px;
  text-align:justify;
}
.about-copy strong{font-weight:800}
.about-image img{
  width:100%;
  height:400px;
  object-fit:cover;
  border-radius:2px;
}

.dark-section{
  background:
    linear-gradient(rgba(0,0,0,.84),rgba(0,0,0,.84)),
    url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=2200&q=85")
    center/cover fixed;
}
.why{
  min-height:280px;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.why-card{
  width:min(940px,100%);
  border:1px solid var(--gold);
  border-radius:15px;
  padding:18px 20px;
  color:white;
  box-shadow:0 0 12px #ffab72;
}
.why-card h2{
  font-size:18px;
  margin:0 0 12px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.why-card ul{
  margin:0;
  padding-left:28px;
  line-height:1.55;
  font-size:15px;
  columns:2;
  column-gap:45px;
}
.why-card li{break-inside:avoid;margin-bottom:4px}

.model{padding:0 18px 25px}
.center-title{
  font-size:28px;
  text-align:center;
  margin:0;
  padding:7px 0 12px;
}
.table-wrap{
  max-width:930px;
  margin:auto;
  overflow-x:auto;
  border:2px solid #eb6f1b;
}
table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  text-align:center;
  font-family:"Roboto", Sans-serif;
}
th,td{
  border:1px solid #d6d6d6;
  padding:9px 10px;
  font-size:14px;
}
thead th{
  background:#eb6f1b;
  font-weight:700;
}
tbody th{
  font-weight:600;
  width:38%;
}
tbody td{line-height:1.4}

.gallery{padding:0 18px 15px}
.gallery-title{
  color:#fff;
  text-align:center;
  font-size:34px;
  margin:0;
  padding:7px 0 30px;
}
.gallery-grid{
  max-width:1024px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.gallery-item{
  margin:0;
  border:1px solid var(--gold);
  border-radius:6px;
  overflow:hidden;
  aspect-ratio:1.12;
}
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.gallery-item:hover img{transform:scale(1.05)}

.footer{
  background:#050505;
  color:white;
  text-align:center;
  padding:22px 15px 28px;
}
.footer h3{
  color:#ffd21a;
  font-size:26px;
  margin:0 0 10px;
}
.footer p{
  font-size:15px;
  margin:5px 0;
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease,transform .7s ease;
}
.reveal.visible{opacity:1;transform:none}

@media(max-width:800px){
  .site-header{height:82px}
  .brand-word{font-size:20px}
  .brand-word span{font-size:9px}
  .brand-word small{font-size:6px}
  .brand-mark{width:34px;height:34px;font-size:18px}
  .phone-btn{font-size:12px;padding:8px 10px}

  .hero-inner{
    grid-template-columns:1fr;
    gap:28px;
    padding:38px 15px;
  }
  .hero{min-height:auto}
  .hero-inner{min-height:auto}
  .hero-copy h1{font-size:25px}
  .enquiry-card{
    max-width:520px;
    margin:auto;
    padding:18px 24px;
  }
  .about-grid{
    grid-template-columns:1fr;
    padding-top:20px;
  }
  .about-image img{height:320px}
  .why-card ul{columns:1}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .header-inner{padding:0 10px}
  .brand-word{font-size:16px}
  .brand-word span{font-size:7px}
  .brand-word small{font-size:5px;padding:2px 6px}
  .phone-btn{font-size:10px}
  .hero-copy h1{font-size:22px}
  .hero-kicker{font-size:9px;letter-spacing:1.4px}
  .investment{font-size:18px}
  .hero-phone{font-size:12px;padding:8px 12px}
  .about-copy p{font-size:14px}
  .gallery-grid{grid-template-columns:1fr 1fr;gap:7px}
  th,td{font-size:12px;padding:7px}
  .why{padding:12px}
}

/* =====================================================
   STUDENTS ARCHIVE
===================================================== */

.students-archive {
  position: relative;
  overflow: hidden;

  padding: 60px 0 65px;

  background: #101a35;
}


/* =====================================================
   BACKGROUND IMAGE
===================================================== */

.students-bg {
  position: absolute;
  inset: 0;

  background-image: url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=2200&q=85");

  background-size: cover;
  background-position: center;

  opacity: 0.20;

  z-index: 0;

  transform: scale(1.04);

  animation: studyZoom 14s ease-in-out infinite alternate;
}

@keyframes studyZoom {

  from {
    transform: scale(1.04);
  }

  to {
    transform: scale(1.09);
  }

}


/* =====================================================
   OVERLAY
===================================================== */

.students-overlay {
  position: absolute;
  inset: 0;

  /* background:
    linear-gradient(
      90deg,
      rgba(16,26,53,.94),
      rgba(16,26,53,.72),
      rgba(16,26,53,.94)
    ); */

  z-index: 1;
}


/* =====================================================
   CONTAINER
===================================================== */

.archive-container {
  position: relative;
  z-index: 3;

  width: min(1400px, 92%);
  margin: auto;
}


/* =====================================================
   HEADING
===================================================== */

.archive-heading {
  text-align: center;
  margin-bottom: 35px;
}

.archive-heading span {
  display: block;

  color: #ffab72;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 4px;

  margin-bottom: 8px;
}

.archive-heading h2 {
  margin: 0;

  color: #fff;

  font-size: clamp(34px, 4vw, 50px);

  font-weight: 800;

  line-height: 1.1;
}

.archive-heading p {
  margin: 12px auto 0;

  max-width: 650px;

  color: rgba(255,255,255,.72);

  font-size: 14px;
}


/* =====================================================
   SLIDER WRAPPER
===================================================== */

.students-slider-wrapper {
  position: relative;

  width: 100%;

  display: flex;
  align-items: center;
}


/* =====================================================
   VIEWPORT
===================================================== */

.students-viewport {

  width: 100%;

  overflow: hidden;

  padding: 5px 0 15px;
}


/* =====================================================
   CONTINUOUS TRACK
===================================================== */

.students-track {

  display: flex;

  gap: 22px;

  width: max-content;

  will-change: transform;

}


/* =====================================================
   4 CARDS VISIBLE
===================================================== */

.student-card {

  /*
    Exactly 4 cards visible
    inside the desktop viewport
  */

  flex: 0 0
    calc(
      (min(1400px, 92vw) - 66px) / 4
    );

  max-width: 320px;

  overflow: hidden;

  border-radius: 16px;

  background: rgba(16,26,53,.94);

  border: 1px solid rgba(255,171,114,.4);

  box-shadow:
    0 15px 35px rgba(0,0,0,.3);

  transition:
    transform .3s ease,
    border-color .3s ease;
}


.student-card:hover {

  transform: translateY(-6px);

  border-color: #ffab72;

}


/* =====================================================
   IMAGE
===================================================== */

.student-image {

  position: relative;

  width: 100%;

  height: 245px;

  overflow: hidden;

  background: #ddd;
}


.student-image img {

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition: transform .5s ease;
}


.student-card:hover
.student-image img {

  transform: scale(1.05);

}


/* =====================================================
   BADGE
===================================================== */

.student-badge {

  position: absolute;

  left: 13px;
  bottom: 13px;

  padding: 7px 14px;

  border-radius: 20px;

  background: #ffab72;

  color: #101a35;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 1px;

}


/* =====================================================
   INFO
===================================================== */

.student-info {

  padding: 16px 12px 18px;

  text-align: center;

}


.student-info h3 {

  margin: 0 0 5px;

  color: #fff;

  font-size: 17px;

}


.student-info p {

  margin: 0 0 8px;

  color: rgba(255,255,255,.62);

  font-size: 12px;

}


.student-info strong {

  color: #ffab72;

  font-size: 11px;

}


/* =====================================================
   ARROWS
===================================================== */

.student-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 20;

  width: 48px;
  height: 48px;

  border-radius: 50%;

  border: 1px solid #ffab72;

  background: rgba(16,26,53,.9);

  color: #ffab72;

  font-size: 22px;

  cursor: pointer;

  display: flex;

  align-items: center;
  justify-content: center;

  transition: all .3s ease;

}


.student-arrow:hover {

  background: #ffab72;

  color: #101a35;

}


.student-prev {

  left: -25px;

}


.student-next {

  right: -25px;

}


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

@media (max-width: 1100px) {

  .student-card {

    flex-basis:
      calc(
        (100vw - 90px) / 3
      );

  }

}


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

@media (max-width: 768px) {

  .students-archive {

    padding: 48px 0 55px;

  }


  .archive-heading {

    margin-bottom: 25px;

  }


  .archive-heading h2 {

    font-size: 32px;

  }


  .student-card {

    flex-basis:
      calc(
        (94vw - 16px) / 2
      );

  }


  .student-image {

    height: 210px;

  }


  .student-arrow {

    width: 38px;
    height: 38px;

    font-size: 17px;

  }


  .student-prev {

    left: 0;

  }


  .student-next {

    right: 0;

  }

}


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

@media (max-width: 480px) {

  .student-card {

    flex-basis: 78vw;

  }


  .student-image {

    height: 240px;

  }

}