/* ============ LOGO TEXT (template ships an image logo; we use text since no client logo file was provided) ============ */
.school-logo-text {
  font-family: 'Lexend', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: #1c2530;
  display: inline-block;
  line-height: 1.2;
}
.school-logo-text span { display: block; font-size: 13px; font-weight: 500; color: #2c7aff; letter-spacing: 0.04em; }
.school-logo-text--footer { color: #fff; font-size: 26px; }
.school-logo-text--footer span { color: #050b4f; }
.school-logo-img {
  height: 100px;
  width: 100px;
  display: block;
}
.school-logo-img--footer {
  height: 100px;
}
.single_footer .school-logo-img--footer {
  width: 100px;
}

/* Nav logo lockup: icon + school name side-by-side instead of stacked, so the
   header doesn't need the image's full height plus two text lines beneath it.
   The extra "a.school-logo-combo" specificity is needed to beat style.css's
   ".site-logo a { display:block }" rule (same class-count, but that one also
   matches the element type, so it would otherwise win on source order). */
.site-logo a.school-logo-combo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-logo {
  width: auto;
  max-width: 100%;
}

/* Responsive nav logo — scoped to .site-logo so the footer logo (below) is untouched.
   width:auto (instead of a fixed width) keeps the image's real aspect ratio at every size.
   Sizes taper down from desktop so the horizontal lockup stays compact at every breakpoint. */
.site-logo .school-logo-img { height: 58px; width: 58px; }
@media only screen and (max-width: 1199px) {
  .site-logo .school-logo-img { height: 54px; width: 54px; }
}
@media only screen and (max-width: 767px) {
  .site-logo .school-logo-img { height: 46px; width: 46px; }
}
@media only screen and (max-width: 480px) {
  .site-logo .school-logo-img { height: 38px; width: 38px; }
  .site-logo .school-logo-text { font-size: 15px; }
  .site-logo .school-logo-text span { font-size: 11px; }
}

/* Responsive footer logo (footer has more vertical room, so it can stay a bit larger) */
@media only screen and (max-width: 767px) {
  .single_footer .school-logo-img--footer { height: 70px; width: 70px; }
}

/* ============ HERO CAROUSEL ============ */
.school-carousel {
  overflow: hidden;
  padding-bottom: 80px;
}
.school-carousel__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.2s ease, transform 6s ease;
  z-index: 0;
}
.school-carousel__slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}
.school-carousel__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10,20,40,0.82) 0%, rgba(10,20,40,0.55) 55%, rgba(10,20,40,0.25) 100%);
  z-index: 2;
}
.school-carousel .container { position: relative; z-index: 3; }
.school-carousel__eyebrow {
  display: inline-block;
  background: rgba(46,202,127,0.18);
  color: #2eca7f;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 50px;
  margin-bottom: 18px;
}
.school-carousel__content h1 { color: #fff; }
.school-carousel__content p { color: #d6dfeb; }
.school-carousel__fade { animation: schoolFadeUp 0.7s ease; }
@keyframes schoolFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.school-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.school-carousel__arrow:hover { background: #2eca7f; border-color: #2eca7f; }
.school-carousel__arrow--prev { left: 24px; }
.school-carousel__arrow--next { right: 24px; }

.school-carousel__dots {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 10px;
}
.school-carousel__dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: none;
  transition: all 0.25s;
}
.school-carousel__dots button.is-active {
  background: #2eca7f;
  width: 28px;
  border-radius: 6px;
}

@media (max-width: 768px) {
  .school-carousel__arrow { display: none; }
}

/* style.css sets .home_bg to a flat 900px with no responsive override at all, so on
   phones/tablets it was either wasting a huge amount of blank vertical space or,
   depending on content length, running out of room. Scale it (and the content's
   top padding) down together at the same breakpoints already used elsewhere on
   this page, and shrink the carousel's own bottom padding to match. */
@media only screen and (max-width: 991px) {
  .home_bg { height: 700px; }
  .home_content { padding-top: 180px; }
}
@media only screen and (max-width: 767px) {
  .home_bg { height: 620px; }
  .home_content { padding-top: 140px; }
  .school-carousel { padding-bottom: 40px; }
}
@media only screen and (max-width: 480px) {
  .home_bg { height: 560px; }
  .home_content { padding-top: 110px; }
}

/* ============ MOBILE MENU TOGGLE (custom, replaces jquery-simple-mobilemenu JS) ============ */
.school-mobile-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  color: #1c2530;
  padding: 8px;
}
@media (max-width: 1199px) {
  .school-mobile-toggle { display: inline-flex; }
  #main-menu { display: none; }
  /* style.css only hides .col-60 (the nav-menu column) below 991px, but the menu
     inside it is already hidden here at 1199px — without this, the now-empty
     55%-wide column leaves a dead gap between the logo and the hamburger button
     on tablets / small laptops (992px–1199px). */
  .col-60 { display: none !important; }

  /* .col-20 still carries its desktop width:15% here (the auto-width override
     further down only applies at ≥1200px), which on a phone-width screen isn't
     enough room for the horizontal logo lockup — the school name wraps onto
     several lines and pushes the hamburger button onto its own row below. Let
     the logo column size to its content instead, and keep it on one row with
     the toggle button pinned to the right. */
  #navigation .row {
    flex-wrap: nowrap;
    align-items: center;
  }
  #navigation .col-20 {
    width: auto;
    max-width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 0;
  }
  /* Bootstrap's grid CSS applies "width:100%" to every direct child of .row
     (it expects only .col-* children, but the toggle button and the mobile
     menu <ul> also live directly in this .row). That definite width becomes
     the flex-basis no matter what flex-grow/shrink say, which is why the
     button was stretching to fill the whole row. Cancel it so the button
     sizes to its own (small) content instead. */
  #navigation .school-mobile-toggle {
    width: auto;
    max-width: none;
    margin-left: auto;
    padding-right: 0;
    padding-left: 8px;
    margin-top: 0;
    flex: 0 0 auto;
  }
}

/* ============ DESKTOP NAV SPACING ============
   style.css lays the navbar out as three fixed-percentage columns
   (.col-20 15% / .col-60 55% / .col-30 30%). On a wide desktop screen the
   menu links and the "Admissions Open" button don't come close to filling
   their 55%/30% columns, so left-aligned content inside them leaves large,
   uneven blank gaps between the logo, the menu, and the button.
   Scoped to #navigation only (not the global .row/.col-* used elsewhere on
   the site) and to desktop widths only (≥1200px, the breakpoint where the
   full menu — rather than the hamburger — is shown), this switches those
   three columns from fixed percentages to their natural content width, so
   the logo and menu sit close together and only the leftover space (not a
   fixed 30%) separates the menu from the button. */
/* style.css sets "overflow-x:hidden" on <body> to stop horizontal scrollbars
   from full-bleed sections. That alone forces the browser to compute body's
   overflow-y as "auto", which quietly turns <body> into its own scroll
   container — and any "position: sticky" element inside it (like the sticky
   nav below) then sticks relative to body's scrollport instead of the page's
   real scrolling element, so it never visually sticks at all. Moving the
   horizontal clip up to <html> keeps the same no-horizontal-scroll behaviour
   without creating that extra scroll container. */
html { overflow-x: hidden; }
body { overflow-x: visible; }
body { background-color: #ecf3fe;}

/* Keep the main menu bar pinned to the top of the viewport while scrolling,
   on both desktop and mobile. #navigation is its own element, separate from
   the blue contact bar above it (.logo-contact), so only the menu bar
   sticks — the contact bar scrolls away with the rest of the page. This also
   doubles as the positioned ancestor .mobile_menu (the phone dropdown,
   below) needs for its "position:absolute; top:100%" to anchor correctly —
   sticky counts as positioned, same as relative would. */
#navigation {
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 6px 18px rgba(23, 23, 36, 0.06);
}

@media only screen and (min-width: 1200px) {
  /* Bootstrap's own container grows to 1320px on very wide screens (≥1400px);
     that's fine for page content, but it's far wider than the logo+menu+button
     ever need, so it was leaving a large dead gap between the menu and the
     "Admissions Open" button (which sits pinned to the container's right edge
     below). Capping the nav's own container keeps that gap in proportion. */
  #navigation .container {
    max-width: 1100px;
  }
  #navigation .row {
    flex-wrap: nowrap;
  }
  #navigation .col-20 {
    width: auto;
    flex: 0 0 auto;
  }
  #navigation .col-60 {
    width: auto;
    flex: 0 1 auto;
    margin-left: 30px;
  }
  #navigation .col-30 {
    width: auto;
    flex: 0 0 auto;
    margin-left: auto;
  }
}

.mobile_menu {
  display: none;
  list-style: none;
  background: #fff;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  padding: 10px 0;
  z-index: 50;
}
.mobile_menu.school-mobile-menu--open { display: block; }
.mobile_menu > li > a {
  display: block;
  padding: 12px 24px;
  font-weight: 600;
  color: #1c2530;
  border-bottom: 1px solid #eee;
}
.mobile_menu .sub-menu { list-style: none; background: #f7f9fc; }
.mobile_menu .sub-menu a { padding: 10px 40px; font-weight: 400; font-size: 14px; }

/* ============ MISC SCHOOL ADDITIONS ============ */
.single_tca-link { text-decoration: none; }
.school-row-reverse .row { flex-direction: row-reverse; }

.school-map { border-radius: 10px; overflow: hidden; min-height: 420px; box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.school-form-submit { border: none; cursor: pointer; margin-top: 10px; }

.school-gallery-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
.school-filter-btn {
  font-weight: 600;
  font-size: 14px;
  padding: 10px 22px;
  border-radius: 50px;
  border: 1.5px solid #e6e2d8;
  background: #fff;
  color: #51606e;
  transition: all 0.25s;
}
.school-filter-btn:hover { border-color: #2eca7f; color: #1c2530; }
.school-filter-btn.is-active { background: #2c7aff; border-color: #2c7aff; color: #fff; }

.school-gallery-item {
  width: 100%;
  aspect-ratio: 4/3;
  border: none;
  border-radius: 10px;
  background-size: cover;           /* ← fill the box */
  background-position: center;      /* ← center the image */
  background-color: #2c7aff;        /* ← fallback if image fails to load */
  margin-bottom: 24px;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  transition: transform 0.3s;
  position: relative;
  overflow: hidden;
}
/* dark overlay so the category label stays readable over any photo */
.school-gallery-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 60%);
  border-radius: 10px;
}
.school-gallery-item:hover { transform: scale(1.03); }
/* keep the label above the overlay */
.school-gallery-item span {
  position: relative;
  z-index: 1;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 50px;
}

.school-lightbox {
  position: fixed; inset: 0;
  background: rgba(10,20,40,0.85);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.school-lightbox__inner {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  max-width: 560px;
  width: 100%;
  position: relative;
  text-align: center;
}
.school-lightbox__image {
  aspect-ratio: 4/3;
  border-radius: 8px;
  background: linear-gradient(135deg, #2c7aff, #2eca7f);
  margin-bottom: 14px;
}
.school-lightbox__close {
  position: absolute;
  top: -14px; right: -14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #1c2530;
  color: #fff;
  border: none;
}

.school-search-input {
  max-width: 420px;
  border-radius: 50px;
  padding: 14px 20px;
}

.school-download-item { padding: 28px; margin-bottom: 24px; }
.school-download-item p { color: #51606e; margin: 8px 0 14px; }

/* ============ IN-CARD IMAGE CAROUSEL (stage photos, academics page) ============ */
.school-img-carousel__frame {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #f7f7f9;
  height:650px;
}
.school-img-carousel__img {
  position: absolute;
  top: 9%;
  left: 12.5%;
  width: 75%;
  height: 59%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.9s ease, transform 5s ease;
  border-radius: 10px;
}
.school-img-carousel__img.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}
.school-img-carousel__arrow {
  position: absolute;
  top: 41%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px; 
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.08);
  color: #1c2530;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.school-img-carousel__arrow:hover { background: #2eca7f; color: #fff; }
.school-img-carousel__arrow--prev { left: 98px; }
.school-img-carousel__arrow--next { right: 104px; }
.school-img-carousel__dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
}
.school-img-carousel__dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.15);
  transition: all 0.25s;
}
.school-img-carousel__dots button.is-active {
  background: #2eca7f;
  border-color: #2eca7f;
  width: 22px;
  border-radius: 6px;
}
@media (max-width: 991px) {
  .school-img-carousel__arrow--prev { left: 61px; }
  .school-img-carousel__arrow--next { right: 24px; }
  .school-img-carousel__img {
  position: absolute;
  top: 9%;
  left: 4%;
  width: 75%;
  height: 59%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.9s ease, transform 5s ease;
  border-radius: 10px;
}
}

/* The frame had a fixed height:650px stacked on top of aspect-ratio:4/5. A fixed
   height ignores the element's actual (shrinking) width, so on narrow phones the
   box stayed a tall, oddly-proportioned 650px regardless of how narrow the column
   got. Dropping back to height:auto lets aspect-ratio size it correctly at every
   width; the __img percentages above already scale proportionally with it. */
@media only screen and (max-width: 767px) {
  .school-img-carousel__frame { height: auto; }
}

/* The "wc_year" year badge (used as the ImageCarousel's corner badge) has a fixed
   left:81px + generous padding from style.css. On phones narrower than ~480px that
   leaves very little margin before it runs into the frame's right edge. Bring it
   in from the edge and trim its padding/font so it stays safely inside the frame. */
@media only screen and (max-width: 480px) {
  .wc_year h3 { left: 70px; padding: 14px 18px; font-size: 16px; }
  .wc_year h3 span { font-size: 22px; }
}

/* ============ CO-CURRICULAR CARDS WITH PHOTO ============ */
.school-cocurr-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  height: 220px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}
.school-cocurr-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,20,40,0.05) 40%, rgba(10,20,40,0.82) 100%);
}
.school-cocurr-card__body {
  position: relative;
  z-index: 1;
  padding: 18px 16px;
  color: #fff;
  width: 100%;
}
.school-cocurr-card__body i { font-size: 24px; margin-bottom: 6px; display: block; color: #2eca7f; }
.school-cocurr-card__body h2 { font-size: 18px; margin: 0; color: #fff; }
.school-cocurr-card__body h2 span { color: #fff; }

/* ============ LAB SECTION ============ */
.school-lab-section { background: #f7f9fb; }
.school-lab-stats {
  display: flex;
  gap: 30px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.school-lab-stats .school-lab-stat h3 { font-size: 26px; color: #2c7aff; margin-bottom: 2px; }
.school-lab-stats .school-lab-stat span { font-size: 13px; color: #51606e; }

/* ============ PAGE TOP BANNER IMAGE ============ */
.section-top.school-pagetop--img {
  background-size: cover;
  background-position: center;
  position: relative;
}
.school-pagetop__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,20,40,0.5) 0%, rgba(10,20,40,0.78) 100%);
  z-index: 0;
}
.section-top.school-pagetop--img .container {
  position: relative;
  z-index: 1;
}
.section-top.school-pagetop--img .section-top-title h1 {
  color: #fff;
}
.section-top.school-pagetop--img .section-top-title ul {
  background: rgba(255,255,255,0.94);
}

/* ============ STAFF / FACULTY CARDS ============ */
.school-staff-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(28,37,48,0.08);
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.school-staff-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(28,37,48,0.14);
}
.school-staff-card__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f0f2f5;
}
.school-staff-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.school-staff-card__body {
  padding: 18px 20px 22px;
  text-align: center;
}
.school-staff-card__body h3 {
  font-size: 17px;
  margin: 0 0 4px;
  color: #1c2530;
}
.school-staff-card__designation {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #2eca7f;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.school-staff-card__meta {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid #ececec;
  text-align: left;
}
.school-staff-card__meta li {
  font-size: 13px;
  color: #51606e;
  margin-bottom: 4px;
}
.school-staff-card__meta li:last-child { margin-bottom: 0; }
.school-staff-card__meta strong { color: #1c2530; }

/* ===== Life at Campus — Redesigned Facility Cards ===== */
.school-life-intro {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 60px;
}
.school-life-intro p {
  font-size: 18px;
  line-height: 30px;
  color: #555;
}

.school-life-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-bottom: 50px;
}

@media only screen and (max-width: 880px) {
  .school-life-grid {
    grid-template-columns: 1fr;
  }
}

.school-life-card {
  position: relative;
  display: flex;
  gap: 22px;
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 18px;
  padding: 34px 30px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  overflow: hidden;
}

.school-life-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--slc-accent, #2c7aff);
  transition: width 0.35s ease;
}

.school-life-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(26, 45, 98, 0.1);
  border-color: transparent;
}

.school-life-card:hover::before {
  width: 100%;
  opacity: 0.06;
}

.school-life-card__icon {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  background: var(--slc-accent, #2c7aff);
  position: relative;
  z-index: 1;
  transition: transform 0.35s ease;
}

.school-life-card:hover .school-life-card__icon {
  transform: scale(1.1) rotate(-6deg);
}

.school-life-card__num {
  position: absolute;
  top: 18px;
  right: 24px;
  font-size: 42px;
  font-weight: 700;
  color: #f1f1f1;
  line-height: 1;
  z-index: 0;
  transition: color 0.35s ease;
}

.school-life-card:hover .school-life-card__num {
  color: #f6f6f6;
}

.school-life-card__content {
  position: relative;
  z-index: 1;
}

.school-life-card__content h2 {
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #1a2d62;
}

.school-life-card__content p {
  font-size: 15px;
  line-height: 26px;
  color: #666;
  margin-bottom: 0;
}

.school-life-closing {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.school-life-closing p {
  font-size: 19px;
  font-weight: 500;
  line-height: 32px;
  color: #1a2d62;
}


/* ===== Co-Curricular Categories — Compact Icon Cards ===== */
.school-cca-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 10px;
}

@media only screen and (max-width: 991px) {
  .school-cca-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 480px) {
  .school-cca-grid {
    grid-template-columns: 1fr;
  }
}

.school-cca-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 36px 24px 28px;
  text-align: center;
  border: 1px solid #ededed;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.school-cca-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(26, 45, 98, 0.1);
}

.school-cca-card__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 31px;
  background: var(--cca-accent, #2c7aff);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.school-cca-card:hover .school-cca-card__bar {
  transform: scaleX(1);
}

.school-cca-card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--cca-accent, #2c7aff);
  background: color-mix(in srgb, var(--cca-accent, #2c7aff) 12%, #fff);
  transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}

.school-cca-card:hover .school-cca-card__icon {
  background: var(--cca-accent, #2c7aff);
  color: #fff;
  transform: scale(1.08) rotate(-4deg);
}

.school-cca-card h4 {
  font-size: 17px;
  font-weight: 600;
  color: #1a2d62;
  margin-bottom: 10px;
  line-height: 24px;
}

.school-cca-card p {
  font-size: 14px;
  line-height: 22px;
  color: #777;
  margin-bottom: 0;
}