/* ===========================================
   Tuition-like 3 Sections (Custom CSS File)
   Sections:
   1) About (image + content + 2 feature cards)
   2) We Are Proud (heading + 4 counter cards)
   3) Become a Teacher (CTA box + image)
   =========================================== */

:root{
  --tm-primary:#FF5248;
  --tm-secondary:#8338ec;
  --tm-dark:#0f172a;
  --tm-text:#6b7280;
  --tm-soft:#f6f7fb;
  --tm-border:#eef1f6;
  --tm-radius:22px;
  --tm-radius-md:18px;
  --tm-shadow:0 18px 45px rgba(0,0,0,.08);
  --tm-shadow-sm:0 12px 28px rgba(0,0,0,.06);
}

/* -------------------------
   Shared typography helpers
-------------------------- */
.tm-kicker{
  font-weight: 800;
  font-size: 16px;
  color: var(--tm-primary);
  margin: 0 0 12px;
}

.tm-title{
  font-weight: 900;
  letter-spacing: -0.6px;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--tm-dark);
  font-size: clamp(26px, 3vw, 44px);
}

.tm-text{
  font-size: 16px;
  line-height: 1.75;
  color: var(--tm-text);
  margin: 0 0 18px;
}

/* =========================
   SECTION 1: ABOUT
========================= */
.tm-about{
  padding: 95px 0;
  background: var(--tm-soft);
}

.tm-about__img{
  width: 100%;
  max-width: 640px;
  display: block;
  border-radius: var(--tm-radius);
  box-shadow: var(--tm-shadow);
}

/* Feature cards */
.tm-feature{
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 18px;
  margin-top: 14px;
  border-radius: var(--tm-radius-md);
  background: #fff;
  border: 1px solid var(--tm-border);
  box-shadow: var(--tm-shadow-sm);
  transition: .2s ease;
}

.tm-feature:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0,0,0,.10);
}

.tm-feature__icon{
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: rgba(47,107,255,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 62px;
}

.tm-feature__icon img{
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}

.tm-feature__body h3{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: var(--tm-dark);
}

.tm-feature__body p{
  margin: 5px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--tm-text);
}

/* =========================
   SECTION 2: PROUD (Counters)
========================= */
.tm-proud{
  padding: 100px 0;
  min-height: 70vh;   /* try 70vh / 85vh */
  display: flex;
  align-items: center;
}


.tm-proud .tm-title{
  margin-bottom: 10px;
}

.tm-proud .tm-text{
  max-width: 560px;
}

/* Counter card */
.tm-counter{
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 22px 18px;
  border-radius: var(--tm-radius);
  background: #fff;
  border: 1px solid var(--tm-border);
  box-shadow: var(--tm-shadow-sm);
  height: 100%;
  transition: .2s ease;
}

.tm-counter:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0,0,0,.10);
}

.tm-counter__icon{
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex: 0 0 56px;
}

.tm-counter__label{
  font-weight: 800;
  color: var(--tm-dark);
  font-size: 14px;
  margin-bottom: 6px;
}

.tm-counter__value{
  font-weight: 900;
  font-size: 34px;
  letter-spacing: -0.5px;
  color: var(--tm-primary);
  line-height: 1;
}

/* =========================
   SECTION 3: CTA (Teacher)
========================= */
/* =========================
   SECTION 3: CTA (FULL WIDTH)
========================= */
.tm-cta--full{
  width: 100%;
  padding: 95px 0;
  background: linear-gradient(
    135deg,
    rgba(47,107,255,.10) 0%,
    rgba(131,56,236,.08) 100%
  );
}

.tm-cta--full .tm-cta__box{
  position: relative;
  overflow: hidden;
  padding: 52px 44px;
  border-radius: 0;                 /* FULL WIDTH */
  border: none;                     /* remove boxed border */
  box-shadow: none;                 /* no card shadow */
  background: transparent;          /* background moved to section */
}

/* keep inner content centered */
.tm-cta--full .container{
  position: relative;
  z-index: 2;
}

/* decorative shape */
.tm-cta__shape{
  position: absolute;
  left: 40px;
  top: 30px;
  width: 140px;
  opacity: .9;
}

/* image */
.tm-cta__img{
  width: min(560px, 100%);
  height: auto;
  display: inline-block;
}

/* button */
.tm-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 14px;
  background: var(--tm-primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 18px 30px rgba(47,107,255,.22);
  transition: .2s ease;
}

.tm-btn:hover{
  background: #241441;
  transform: translateY(-1px);
   color: #fff;
}


/* -------------------------
   Responsive
-------------------------- */
@media (max-width: 991px){
  .tm-about, .tm-cta{ padding: 80px 0; }
  .tm-proud{ padding: 70px 0 90px; }
  .tm-cta__box{ padding: 40px 22px; }
  .tm-cta__shape{ width: 108px; }
}

@media (max-width: 768px){
  .tm-about, .tm-proud, .tm-cta{ padding: 70px 0; }
  .tm-counter__value{ font-size: 30px; }
}