@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap");

:root {
  --fx-bg: #eef3f8;
  --fx-bg-2: #f7fbff;
  --fx-ink: #102033;
  --fx-muted: #4d6478;
  --fx-card: rgba(255, 255, 255, .78);
  --fx-line: rgba(16, 32, 51, .1);
  --fx-nav: rgba(255, 255, 255, .82);
  --fx-glow: rgba(61, 140, 255, .18);
}
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  font-family: Outfit, Lato, sans-serif !important;
  color: var(--fx-ink) !important;
  background:
    radial-gradient(900px 420px at 8% -10%, var(--fx-glow), transparent 60%),
    radial-gradient(700px 380px at 100% 0%, rgba(86, 204, 153, .16), transparent 55%),
    linear-gradient(180deg, var(--fx-bg-2), var(--fx-bg) 280px);
}
body a { color: var(--fx-ink) !important; }

.navbar {
  background: var(--fx-nav) !important;
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--fx-line);
  box-shadow: 0 10px 40px rgba(8, 20, 40, .06);
}
.navbar ul li a, .navbar .hamburg i { color: var(--fx-ink) !important; }
.heroSection {
  position: relative;
  isolation: isolate;
}
body.modal-open .heroSection {
  isolation: auto;
}
.modal.formModal {
  z-index: 2000;
}
.modal-backdrop {
  z-index: 1990;
}
.heroSection .linesBg,
.heroSection .colorBg {
  opacity: 1;
}
.heroSection .colorBg {
  background-color: transparent;
}
.heroSection .container,
.heroSection .flex_column_start,
.heroSection .heroImg,
.heroSection .heroImg img,
.heroSection .hero-actions {
  position: relative;
  z-index: 3;
  opacity: 1;
}
.heroSection .topRated,
.heroSection .textWrapper {
  z-index: 4;
  opacity: 1;
}
.heroSection .commonTitle,
.heroSection .commonDesc {
  color: #102033 !important;
  opacity: 1;
}
.heroSection .commonText {
  color: #3a4d60 !important;
  opacity: 1;
}
.heroSection .heroImg img {
  filter: none;
}
.heroSection .hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 520px;
}
.heroSection .hero-actions .commonBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin: 0 !important;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.heroSection .hero-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 767px) {
  .heroSection .hero-actions {
    align-self: center;
    width: min(100%, 420px);
  }
}
.school-logo-owl-carousel,
.school-marquee {
  display: block !important;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 100%;
}
.school-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: school-slide 28s linear infinite;
}
.school-track .item {
  width: 220px;
  flex: 0 0 220px;
}
.school-marquee:hover .school-track {
  animation-play-state: paused;
}
@keyframes school-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.heroSection h1, .heroSection .title, .sectionTitle span, .sectionTitle h2 {
  letter-spacing: -.04em;
  color: var(--fx-ink) !important;
}
.heroSection p, .sectionTitle p { color: var(--fx-muted) !important; }
.heroSection .textWrapper span { color: #102033 !important; opacity: 1; }
.heroSection .topRated, .features .card, .aboutUs .card, .faq .accordion-item, .getInTouch, .customPack, .footer, .pricingBox {
  background: var(--fx-card) !important;
  border: 1px solid var(--fx-line) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 50px rgba(8, 20, 40, .06);
  backdrop-filter: blur(12px);
  color: var(--fx-ink);
}

.plan-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  margin-top: 8px;
}
.plan-card {
  position: relative;
  overflow: hidden;
  padding: 28px 24px 24px;
  border-radius: 28px;
  background: var(--fx-card);
  border: 1px solid var(--fx-line);
  box-shadow: 0 20px 50px rgba(8, 20, 40, .08);
  color: var(--fx-ink);
}
.plan-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #3de0ff, #3b6bff 60%, #56cc99);
}
.plan-card.is-executive {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(61, 224, 255, .16), transparent 42%),
    var(--fx-card);
}
.plan-kicker, .plan-unit, .plan-who, .plan-copy { color: var(--fx-muted); margin: 0; }
.plan-kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.plan-card h3 { margin: 10px 0 6px; font-size: 32px; letter-spacing: -.04em; }
.plan-price { margin: 8px 0 0; font-size: 40px; font-weight: 700; letter-spacing: -.04em; }
.plan-who { margin-top: 12px; font-weight: 600; color: var(--fx-ink); }
.plan-copy { margin-top: 8px; min-height: 48px; }
.plan-card .commonBtn { margin-top: 18px; }

footer, .footer { color: var(--fx-muted); }
@media (max-width: 1199px) {
  .navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
  }
  .main { padding-top: 96px; }
  .navbar .hamburg {
    display: block;
    cursor: pointer;
  }
  .navbar .hamburg span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }
  .navbar .navLogo img,
  .logo {
    height: 52px !important;
    max-width: 58vw;
  }
  .offcanvas .navLogo img {
    height: 52px !important;
    width: auto !important;
    max-width: 180px;
  }
  .offcanvas-header { align-items: center; }
  .offcanvas .listItems { display: block !important; margin: 0; padding: 8px 0 0; }
  .offcanvas .listItems li { list-style: none; margin: 16px 0; }
  .offcanvas .listItems a { font-weight: 700; font-size: 18px; }
  .offcanvas .commonBtn { display: inline-flex; }
}
@media (max-width: 980px) {
  .plan-board { grid-template-columns: 1fr; }
}