@import url("https://fonts.googleapis.com/css2?family=Caramel&family=Carlito:ital,wght@0,400;0,700;1,400;1,700&family=Chathura:wght@100;300;400;700;800&family=Comforter+Brush&family=Freckle+Face&family=Fredericka+the+Great&family=Lalezar&display=swap");

:root {
  --background-1: #558bff;
  --background-2: #ffffff;
  --background-3: #f9f9f9;
  --font-caramel: "Caramel", cursive;
  --font-carlito: "Carlito", sans-serif;
  --font-chathura: "Chathura", sans-serif;
  --font-comforter-brush: "Comforter Brush", cursive;
  --font-freckle-face: "Freckle Face", cursive;
  --font-fredericka-the-great: "Fredericka the Great", cursive;
  --font-lalezar: "Lalezar", cursive;
}

.text-main {
  color: var(--background-1);
}

.text-caramel {
  font-family: var(--font-caramel);
}

.text-carlito {
  font-family: var(--font-carlito);
}

.text-chathura {
  font-family: var(--font-chathura);
}

.text-comforter-brush {
  font-family: var(--font-comforter-brush);
}

.text-freckle-face {
  font-family: var(--font-freckle-face);
}

.text-fredericka-the-great {
  font-family: var(--font-fredericka-the-great);
}

.text-lalezar {
  font-family: var(--font-lalezar);
}

.header-section {
  background-color: var(--background-2);
  font-family: var(--font-carlito);
}

/* Blue strip below navbar */
.main-strip {
  width: 45%;
  height: 8px;
  background: var(--background-1);
  margin: 0;
}

.secondary-strip {
  width: 100%;
  height: 8px;
  background: var(--background-3);
  margin: 0;
  margin-top: 1rem;
}

.hero-section {
  background-color: var(--background-3);
  font-family: var(--font-carlito);
  padding: 2rem 0;
}

/* Brand button style */
.btn-brand {
  background: var(--background-1) !important;
  color: #fff !important;
  border: none;
  font-weight: 700;
  border-radius: 8px;
  padding: 0.6rem 1.5rem;
  font-size: 1.1rem;
  box-shadow: 0 2px 8px rgba(85, 139, 255, 0.08);
  transition: background 0.2s, box-shadow 0.2s;
}
.btn-brand:hover,
.btn-brand:focus {
  background: #3771ea !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(85, 139, 255, 0.13);
}

.primary-color-text {
  color: var(--background-1);
}

.testimonials {
  background-color: var(--background-3);
  font-family: var(--font-fredericka-the-great);
  padding: 2rem 0;
  text-align: center;
  color: var(--background-1);
}

.quote {
  font-family: var(--font-carlito);
  font-size: 3rem;
  font-weight: bold;
  color: var(--background-1);
}

footer {
  background-color: var(--background-1);
  font-family: var(--font-lalezar);
  color: var(--background-2);
}

.footer-title {
  font-family: var(--font-lalezar);
  font-size: 2rem;
  font-weight: bold;
}

.footer-strip {
  width: 45%;
  height: 8px;
  background: var(--background-2);
  margin: 0;
}

.footer-bottom {
  font-family: var(--font-carlito);
  font-size: 1rem;
  font-weight: normal;
  color: var(--background-2);
}

.childhood-section {
  background-color: var(--background-1);
  color: var(--background-2);
  font-family: var(--font-carlito);
}

.childhood-title {
  font-family: var(--font-freckle-face);
  font-size: 4.5rem;
  font-weight: bold;
  color: var(--background-2);
  letter-spacing: 0.1em;
}

.divider {
  color: var(--background-2);
}

.message {
  font-family: var(--font-chathura);
  font-size: 1.5rem;
  line-height: 1;
}

/* Brand button style */
.btn-brand2 {
  background: var(--background-2) !important;
  color: var(--background-1) !important;
  border: none;
  font-weight: 700;
  border-radius: 8px;
  padding: 0.6rem 1.5rem;
  font-size: 1.1rem;
  box-shadow: 0 2px 8px rgba(85, 139, 255, 0.08);
  transition: background 0.2s, box-shadow 0.2s;
}
.btn-brand2:hover,
.btn-brand2:focus {
  /* background: var(--background-1) !important; */
  color: var(--background-2) !important;
  box-shadow: 0 4px 16px rgba(85, 139, 255, 0.13);
}

.tnc {
  font-size: 0.75rem;
  color: var(--background-2);
}

.classes-title {
  padding: 2rem 0;
  margin: 0;
  font-family: var(--font-fredericka-the-great);
  /* font-weight: bold; */
  color: var(--background-1);
  text-align: center;
  letter-spacing: 0.05em;
  background: url("/Images/SubjectPage/tazanity 1.svg");
}

/* Hero section background image, moved toward center */
.hero-section-bg {
  background-image: url('/Images/RegisterPage/BLACKFLAG (33) 1.svg');
  background-repeat: no-repeat;
  background-position: 22% center;
  background-size: 500px auto;
}

/* Session title script style for booking section */
/* .session-title {
  font-family: 'Comforter Brush', cursive;
  color: #5a7be7;
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.03em;
}
@media (min-width: 768px) {
  .session-title {
    font-size: 3.2rem;
  }
}
@media (min-width: 1200px) {
  .session-title {
    font-size: 4rem;
  }
} */

/* Subheading style with noise overlay to match reference */
.subheading {
  color: #5a7be7; /* solid blue */
  position: relative;
  display: inline-block;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  padding: 0 0.25rem;
  z-index: 1;
}
.subheading::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="5"/></filter><rect width="40" height="40" filter="url(%23n)" fill="black"/></svg>');
  background-size: 40px 40px;
  background-repeat: repeat;
}

/* Responsive sizes to match screenshot proportions */
.subheading {
  font-size: 1.05rem;
}
@media (min-width: 768px) {
  .subheading {
    font-size: 1.35rem;
  }
}
@media (min-width: 1200px) {
  .subheading {
    font-size: 1.9rem;
  }
}

.noise-overlay {
  position: relative;
  overflow: hidden;
}

.gradient-text {
  /* Updated gradient to better match the image's subtle transition */
  background: linear-gradient(90deg, #558bff, #a3bffa);

  /* Clip the background to the text */
  -webkit-background-clip: text;
  background-clip: text;

  /* Make the text color transparent to show the gradient */
  color: transparent;

  /* Make the text bold as it appears in the image */
  font-weight: 700;
}

li{
  margin-bottom: 0.875rem;
}

.register-subheader{
  background-color: var(--background-1);
  color: var(--background-2);
  font-family: var(--font-carlito);
  background-image: url('/Images/RegisterPage/BLACKFLAG (34) 1.svg');
  background-repeat: no-repeat;
  background-position: 75% center;
  background-size: 600px auto;
}

.testimonial-section {
  background-color: var(--background-2);
}

.testimonial-inner{
  background-color: var(--background-3);
}

.pattern {
  background-image: url('/Images/AboutUs/pattern.svg');
  background-size: contain;
  background-position: center;
}