/* Deliberate visual upgrades on top of the faithfully-cloned original design.
   Everything here is purely additive -- new shadows, radii, transitions,
   colors on top of the existing Elementor markup -- never a layout/structure
   change, so it can't reintroduce the direct-child-selector or missing-CSS
   bugs the rest of this stylesheet chain had to work around. Brand colors
   (#fb2056 / #da1c4b) are pulled from the site's own Astra Customizer
   palette (astra-inline.css --ast-global-color-0/1), so this stays on-brand
   rather than inventing a new palette. */

/* ---- Hero slider (homepage) ---------------------------------------- */

/* A soft bottom-to-top gradient behind the slide content improves text
   legibility over photos without the flat, uncomposited look of the
   original -- the same technique big travel/hospitality sites use. */
.n2-ss-slide-backgrounds::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.35) 100%);
}

/* The original arrow buttons are small, flat, unstyled SVGs sitting
   directly on the photo. Giving them a translucent circular background
   (blurred glass) + hover state makes them read as an actual control, and
   matches the affordance users expect on a modern slider. */
.nextend-arrow {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: background 0.25s ease, transform 0.25s ease;
  cursor: pointer;
}
.nextend-arrow:hover {
  background: #fb2056;
  border-color: #fb2056;
  transform: scale(1.08);
}
.nextend-arrow img {
  filter: brightness(0) invert(1);
}

/* ---- Stat / counter blocks (homepage govt-programs + placements bar,
   achievements page) ---------------------------------------------------- */

.elementor-widget-counter {
  transition: transform 0.25s ease;
}
.elementor-widget-counter:hover {
  transform: translateY(-4px);
}
.elementor-widget-counter .elementor-counter-number,
.elementor-widget-counter .elementor-counter-number-prefix,
.elementor-widget-counter .elementor-counter-number-suffix {
  color: #fb2056;
}

/* The icon sitting directly above each counter (e.g. graduation cap, globe,
   ship, laptop) is plain black-on-transparent in the original. A colored
   circular chip behind it turns a bare glyph into a proper icon badge. */
.elementor-widget-icon .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fb2056 0%, #da1c4b 100%);
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(251, 32, 86, 0.28);
  transition: transform 0.25s ease;
}
.elementor-widget-icon .elementor-icon i {
  color: #fff !important;
  font-size: 22px;
}
.elementor-widget-counter:hover + .elementor-widget-icon .elementor-icon,
.elementor-widget-icon:hover .elementor-icon {
  transform: scale(1.08);
}

/* ---- CTA buttons (course pages: "Enquire Now" / "Download Brochure") - */

.eael-creative-button {
  border-radius: 999px !important;
  box-shadow: 0 6px 18px rgba(251, 32, 86, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.eael-creative-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(251, 32, 86, 0.35);
}
.eael-creative-button-icon-left i,
.eael-creative-button-icon-right i {
  transition: transform 0.2s ease;
}
.eael-creative-button:hover .eael-creative-button-icon-left i {
  transform: translateX(-3px);
}
.eael-creative-button:hover .eael-creative-button-icon-right i {
  transform: translateX(3px);
}

/* ---- Section headings -- a thin brand-colored accent rule under every
   h2 section title gives pages a clearer visual rhythm than plain black
   text sitting straight on white, without changing type size/placement. -- */

h2.elementor-heading-title {
  position: relative;
  padding-bottom: 14px;
}
h2.elementor-heading-title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  width: 64px;
  height: 3px;
  background: #fb2056;
  border-radius: 2px;
}
/* Left-aligned headings (course/testimonial pages tend to be left-aligned
   text blocks) should get a left-aligned accent instead of a centered one. */
.elementor-align-left h2.elementor-heading-title::after,
[style*='text-align: left'] h2.elementor-heading-title::after {
  left: 0;
  margin: 0;
}

/* ---- Image carousels (achievements awards rows) --------------------- */

.elementor-image-carousel-wrapper.swiper {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}
.elementor-swiper-button {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.elementor-swiper-button:hover {
  background: #fb2056;
}

/* Respect users who've asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .elementor-widget-counter,
  .elementor-widget-icon .elementor-icon,
  .eael-creative-button,
  .eael-creative-button-icon-left i,
  .eael-creative-button-icon-right i,
  .nextend-arrow {
    transition: none !important;
  }
}