/* =====================================================================
   SPARKLING TOPAZ ACADEMY — "Sparkling" Theme Layer
   Built to sit on top of the existing template without touching content.
   Palette pulled from the new logo: sky blue, magenta/pink, leaf green,
   gold/amber and a warm sunny yellow.
   Flat, solid colours only — no gradients on text or backgrounds.
   ===================================================================== */

:root {
  --st-blue: #0EA5E9;
  --st-blue-deep: #0B6FAE;
  --st-pink: #EC1E79;
  --st-green: #7AC943;
  --st-gold: #F5A623;
  --st-yellow: #FFD447;
  --st-ink: #1c2b3a;
  --st-cloud: #f4faff;
  --st-shadow: 0 10px 30px rgba(14, 111, 174, 0.18);
}

/* ---------------------------------------------------------------------
   0. Base / smooth motion
   --------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------
   1. Whole-site background — plain, solid colour
   --------------------------------------------------------------------- */
body {
  background: #f7fbff;
}

/* Canvas sparkle-particle layer injected by js/sparkling-theme.js
   (kept subtle — small drifting star dots, no glow blobs) */
#st-sparkle-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   2. Navbar — solid colour with a sparkle underline accent
   --------------------------------------------------------------------- */
#main-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: box-shadow .3s ease, padding .3s ease;
}

#main-nav.st-scrolled .navbar {
  box-shadow: 0 10px 28px rgba(14, 111, 174, 0.2) !important;
}

.navbar {
  background: #ffffff !important;
  border-bottom: 3px solid var(--st-blue);
  box-shadow: 0 6px 24px rgba(14, 111, 174, 0.12) !important;
  transition: all .3s ease;
}

.navbar-nav .nav-link {
  position: relative;
  color: var(--st-ink) !important;
  font-weight: 800 !important;
  transition: color .25s ease, transform .25s ease;
}

.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 3px;
  width: 0;
  border-radius: 3px;
  background: var(--st-gold);
  transition: width .3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active .nav-link,
.navbar .nav-item.active a {
  color: var(--st-blue-deep) !important;
  transform: translateY(-1px);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 100%;
}

.navbar .nav-item.active {
  border-bottom-color: transparent !important;
}

.dropdown-menu {
  border: none;
  border-radius: 14px;
  box-shadow: var(--st-shadow);
  overflow: hidden;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--st-cloud) !important;
  color: var(--st-blue-deep) !important;
  padding-left: 1.4rem !important;
}

/* ---------------------------------------------------------------------
   3. Buttons — solid colours with a light lift on hover
   --------------------------------------------------------------------- */
.btn {
  position: relative;
  border-radius: 50px !important;
  font-weight: 800;
  letter-spacing: .3px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.btn:hover {
  transform: translateY(-3px) scale(1.03);
}

.btn-primary,
.header-btn {
  background: var(--st-blue) !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(14, 165, 233, .35);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--st-blue-deep) !important;
  box-shadow: 0 12px 26px rgba(14, 165, 233, .45);
}

.btn-secondary {
  background: var(--st-pink) !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(236, 30, 121, .32);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: #d31468 !important;
  box-shadow: 0 12px 26px rgba(236, 30, 121, .42);
}

.btn-tertiary {
  background: var(--st-gold) !important;
  border: none !important;
  color: var(--st-ink) !important;
  box-shadow: 0 8px 20px rgba(245, 166, 35, .35);
}

.btn-quaternary {
  background: var(--st-green) !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(122, 201, 67, .35);
}

/* ---------------------------------------------------------------------
   4. Section headings — plain solid colour text
   --------------------------------------------------------------------- */
.section-heading h2 {
  position: relative;
  color: var(--st-blue-deep);
}

.section-heading .subtitle,
.subtitle {
  color: var(--st-blue-deep) !important;
}

/* NOTE: .subtitle:after is a display:block pseudo-element with no set
   width, so it stretches to the full width of its section (this is true
   even in the unmodified template). Giving it a fill turns that
   invisible full-width strip into a visible band that can sit on top
   of, and intercept clicks on, whatever follows it (tab links, filter
   buttons, etc). Colour the icon glyph itself instead of filling its
   box, constrain its box to the glyph's own size, and make sure it can
   never swallow a click. */
.subtitle:after {
  width: fit-content !important;
  color: var(--st-gold);
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   5. Hero text area on the homepage — plain solid colour text
   --------------------------------------------------------------------- */
.header-text.hero h1 {
  color: var(--st-blue-deep);
}

/* ---------------------------------------------------------------------
   6. Intro flip-cards — lift on hover
   --------------------------------------------------------------------- */
#intro-cards .card {
  border-radius: 18px;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}

#intro-cards .card:hover {
  transform: translateY(-6px);
  box-shadow: var(--st-shadow);
}

/* ---------------------------------------------------------------------
   7. Generic card / service box hover polish
   --------------------------------------------------------------------- */
.card,
.serviceBox,
.serviceBox1,
.serviceBox2,
.blog-card,
.team-style1,
.team-style2 {
  transition: transform .3s ease, box-shadow .3s ease;
}

.card:hover,
.serviceBox:hover,
.serviceBox1:hover,
.serviceBox2:hover,
.blog-card:hover,
.team-style1:hover,
.team-style2:hover {
  box-shadow: var(--st-shadow);
}

/* ---------------------------------------------------------------------
   8. Footer — solid colour instead of flat red
   --------------------------------------------------------------------- */
footer,
.footer-1 footer,
#footer footer {
  background: var(--st-blue-deep) !important;
}

footer .btn-tertiary {
  background: var(--st-gold) !important;
}

/* ---------------------------------------------------------------------
   9. Back-to-top — solid colour, gentle pulse
   --------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--st-blue);
  box-shadow: 0 6px 18px rgba(14, 111, 174, .45);
  animation: st-pulse 2.4s ease-in-out infinite;
  z-index: 1040;
}

.back-to-top i {
  color: #fff !important;
}

@keyframes st-pulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(14, 111, 174, .45); }
  50%      { box-shadow: 0 6px 24px rgba(14, 111, 174, .6); }
}

/* ---------------------------------------------------------------------
   10. Scrollbar theming (WebKit) — solid colour
   --------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #eaf6ff;
}
::-webkit-scrollbar-thumb {
  background: var(--st-blue);
  border-radius: 10px;
}

/* ---------------------------------------------------------------------
   11. Preloader — solid colour spinner dots
   --------------------------------------------------------------------- */
#preloader {
  background: #f7fbff;
}

#preloader .dot1,
#preloader .dot2 {
  background: var(--st-blue) !important;
}