:root {
  /* Base Palette */
  --white: #FFFFFF;
  --dark-purple: #551075;
  --purple: #9740A8;
  --soft-purple: #B172B8;
  --light-purple: #E5BBEF;
  --orange-light: #FCBF90;
  --orange: #FF6E20;
  --black: #232323;

  /* RGB versions for rgba() */
  --white-rgb: 255, 255, 255;
  --black-rgb: 35, 35, 35;
  --dark-purple-rgb: 85, 16, 117;
  --purple-rgb: 151, 64, 168;

  /* Semantic Colors */
  --primary-color: var(--purple);
  --secondary-color: var(--orange);
  --accent-color: var(--orange-light);
  --dark-accent-color: var(--dark-purple);

  /* Common Defaults & Preserved Grays */
  --text-color: var(--black);
  --background-color: var(--white);
  --border-color-light: #e5e7eb; /* Existing light gray */
  --border-color-medium: #d1d5db; /* Existing medium gray */
  --border-color-dark: #333333; /* Existing dark gray for text/borders */
  --text-color-medium: #4b5563; /* Existing medium gray text */
  --text-color-light: #6b7280; /* Existing light gray text */
  --ui-gray-light: #f9fafb; /* Existing very light UI gray */
  --ui-gray-hover: #f3f4f6; /* Existing hover gray */
  --dot-inactive-color: #d1d5db; /* Existing dot color */
  --dot-hover-color: #9ca3af; /* Existing dot hover color */

  /* Gradient for text */
  --gradient-text: linear-gradient(to right, var(--purple), var(--dark-purple));
}

.shadow-solid {
  box-shadow: 5px 5px 0px var(--purple);
}
.offset-10 {
  bottom:-100px !important;
}
.bg-indigo-900 {

    background-color: var(--dark-purple)!important;
}
/* Apply Inter font globally and full-bleed background */
body {
  font-family: "Poppins", sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background-color: var(--background-color); /* Light cream background */
  margin: 0;
  padding: 0;
}

/* Base Typography Styles */
h1 {
  font-family: "Fredoka", sans-serif;
  font-size: 3rem; /* Equivalent to text-5xl */
  font-weight: 600 !important; /* font-bold */
  color: var(--border-color-dark); /* Default dark text */
  line-height: 1.2; /* Similar to leading-tight */
  margin-bottom: 1rem; /* Default margin */
}

h2 {
  font-family: "Fredoka", sans-serif;
  font-size: 2.8rem;  /* Equivalent to text-4xl */
  font-weight: 600 !important; /* font-bold */
  color: var(--border-color-dark); /* Default dark text */
  line-height: 1.25; /* Similar to leading-tight */
  margin-bottom: 1.5rem; /* Default margin */
  text-align: center; /* Keep default center alignment from original h2 rule */
}
h3 {
  font-family: "Fredoka", sans-serif;
  font-size: 2.25rem; /* Equivalent to text-4xl */
  font-weight: 600 !important; /* font-bold */
  color: var(--border-color-dark); /* Default dark text */
  line-height: 1.25; /* Similar to leading-tight */
  margin-bottom: 1.5rem; /* Default margin */
}

p {
  /* font-family is inherited from body */
  font-size: 1.25rem; /* Equivalent to text-lg */
  color: var(--text-color-medium); /* text-gray-600 */
  margin-bottom: 1rem; /* Default margin */
}

/* Responsive adjustments (can be overridden by Tailwind in HTML if needed) */
@media (min-width: 1024px) { /* lg breakpoint */
  h1 {
    font-size: 3.75rem; /* text-6xl */
  }
  h2 {
    font-size: 3rem; /* text-5xl */
  }
}

/* --- End Base Typography Styles --- */


img[alt="Decorative giraffe"] {
  transition: transform 0.3s ease;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000; /* Ensure it's on top of other elements */
  background-color: rgba(var(--white-rgb), 0.9); /* Same as body, with slight transparency */
  padding: 10px 0; /* Add some padding */
}

#offer {
  background-image: linear-gradient(
    to bottom,
    var(--primary-color),
    var(--dark-accent-color)
  ); /* Violet-500 to Indigo-500 */
  color: var(--white);
}

/* Navigation link styles */
.nav-link {
  font-weight: 500;
  transition: color 0.3s ease;
}
.nav-link:hover {
  color: var(--dark-accent-color); /* Darker teal on hover - Kept */
}

/* Active Nav Link Styling (Desktop) */
.nav-link.active {
  color: var(--primary-color); /* Change text color for active link */
  border-bottom: 2px solid var(--primary-color); /* Add bottom border */
}


/* Animation for decorative elements */
@keyframes move {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.animate-move {
  animation: move 3s ease-in-out infinite;
}
/* Fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
  opacity: 0;
}
.delay-1 {
  animation-delay: 0.1s;
}
.delay-2 {
  animation-delay: 0.2s;
}
.btn {
  padding: 0.75rem 1.75rem; /* py-3 px-7 */
  font-weight: 600;
  border-radius: 2rem; /* rounded-lg */
  transition: all 0.3s ease;
}
.btn-primary {
  background-image: linear-gradient(
    to bottom,
    var(--primary-color),
    var(--dark-accent-color)
  ); /* Violet-500 to Indigo-500 */
  color: var(--white);
  box-shadow: 0 4px 6px rgba(var(--purple-rgb), 0.2);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(var(--purple-rgb), 0.3);
  filter: brightness(1.1);
}
/* Secondary button style */
.btn-secondary {
  background-color: var(--light-purple); /* Indigo-50 */
  color: var(--dark-accent-color); /* Indigo-600 */

}
.btn-secondary:hover {
  background-color: var(--light-purple); /* Indigo-100 - Mapped to light-purple, adjust if needed */
  transform: translateY(-1px);
}
.btn-outline {
  display: inline-block;
  background-color: transparent;
  color: var(--border-color-dark); /* Dark text color */
  border: 2px solid var(--border-color-dark); /* Dark border */
}
.btn-outline:hover {
  background-color: var(--border-color-dark); /* Dark background on hover */
  color: var(--white);
}
/* Card styling - Clean, modern */
.modern-card {
  background-color: var(--background-color);
  border-radius: 0.75rem; /* rounded-xl */
  padding: 2rem; /* p-8 */
  box-shadow: 0 10px 15px -3px rgba(var(--black-rgb), 0.05),
    0 4px 6px -4px rgba(var(--black-rgb), 0.05);
  transition: all 0.3s ease;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.modern-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(var(--black-rgb), 0.08),
    0 8px 10px -6px rgba(var(--black-rgb), 0.08);
}
/* Icon background - Clean */
.icon-bg-modern {
  background-image: linear-gradient(
    to bottom right,
    var(--light-purple), /* Indigo-300 */
    var(--light-purple)  /* Purple-300 */
  );
  border-radius: 0.5rem; /* rounded-lg */
  padding: 0.75rem; /* p-3 */
  display: inline-flex;
  margin-bottom: 1.25rem; /* mb-5 */
}
/* Form styling - Modern */
.modern-input {
  border: 1px solid var(--border-color-medium); /* Gray 300 */
  border-radius: 2rem; /* rounded-lg */
  padding: 0.75rem 1rem; /* py-3 px-4 */
  width: 100%;
  transition: all 0.3s ease;
  font-weight: 500;
}
.modern-input:focus {
  outline: none;
  border-color: var(--primary-color); /* Violet-500 */
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.2);
}
/* Pricing Table Styles */
.pricing-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.pricing-table th,
.pricing-table td {
  padding: 1rem;
  text-align: center;
  border-bottom: 1px solid var(--border-color-light);
}
.pricing-table th {
  background-color: var(--ui-gray-light);
  font-weight: 600;
  color: var(--text-color);
}
.pricing-table td {
  color: var(--text-color-medium);
}
.pricing-table .feature-col {
  text-align: left;
  font-weight: 500;
}
.pricing-table .check {
  color: #10b981; /* Emerald-500 - Kept */
}
.pricing-table .cross {
  color: #ef4444; /* Red-500 - Kept */
}
.pricing-table tr:last-child td {
  border-bottom: none;
}
.pricing-popular {
  border: 2px solid var(--primary-color);
  border-radius: 0.75rem;
  transform: scale(1.03);
  z-index: 10;
  background-color: var(--background-color);
}
.pricing-popular .popular-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background-image: linear-gradient(to right, var(--primary-color), var(--dark-accent-color));
  color: var(--white);
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Simple CSS Parallax */
.parallax-section {
  background-image: url("/images/44.jpg");
  min-height: 450px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.text-purple-600 {
  background-image: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.parallax-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(var(--dark-purple-rgb), 0.66); /* Indigo-600 with opacity */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (min-width: 768px) {
  .wave-divider svg {
    height: 120px;
  }
}
.wave-divider .shape-fill {
  /* Fill color set by parent bg */
}



/* Mobile Menu Styles */
#mobile-menu {
  position: fixed;
  top: 0;
  right: 0; /* Position it on the right side */
  width: 250px; /* Set a fixed width */
  height: 100vh; /* Full viewport height */
  background-color: var(--background-color); /* Match header background */
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
  transition: transform 0.3s ease-in-out; /* Add transition for sliding effect */
  transform: translateX(100%); /* Initially off-screen to the right */
  z-index: 40; /* Ensure it's below the header but above content */
  padding: 2rem;
}

#mobile-menu.open {
  transform: translateX(0); /* Slide into view */
}

.mobile-menu {
  background-color: var(--background-color);
  height: 100vh; /* Full height */
  padding-top: 4rem; /* Add some space from the top */
}

.mobile-menu.open {
  transform: translateX(0); /* Slide menu into view */
}

.nav-link-mobile {
  display: block;
  padding: 0.75rem 1.5rem;
  color: var(--border-color-dark);
  font-weight: 500;
  transition: background-color 0.2s ease-in-out;
}

.nav-link-mobile:hover {
  background-color: var(--ui-gray-hover); /* Light gray hover */
}

.btn-enroll-mobile {
  display: block;
  background-color: var(--primary-color); /* Purple */
  color: var(--white);
  border-radius: 20px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  text-align: center;
  margin: 1rem 1.5rem;
  transition: background-color 0.3s ease;
}

.btn-enroll-mobile:hover {
  background-color: var(--soft-purple); /* Lighter purple on hover */
}

/* Active Nav Link Styling (Mobile) */
.nav-link-mobile.active {
  color: var(--primary-color); /* Change text color for active link */
  font-weight: 600; /* Make it bold */
}

/* Back to top button styles */
#back-to-top-btn {
  cursor: pointer;
  opacity: 0; /* Initially hidden */
  visibility: hidden; /* Initially hidden */
  transition: opacity 0.3s, visibility 0.3s;
}

#back-to-top-btn.visible {
  opacity: 1; /* Visible when 'visible' class is added */
  visibility: visible; /* Visible when 'visible' class is added */
}

/* Testimonial Blockquote Styling */
#testimonials blockquote::before {
  content: '“';
  position: absolute;
  left: -0.25rem; /* Adjust as needed */
  top: -0.5rem;  /* Adjust as needed */
  font-size: 4rem; /* Large quote mark */
  color: var(--border-color-light); /* Light gray color */
  line-height: 1;
  z-index: -1; /* Place behind the text */
}

/* Testimonial Slider Styles */
.testimonial-slider {
  /* Container has overflow: hidden in HTML */
}

.testimonial-track {
  transition: transform 0.5s ease-in-out;
  /* display: flex is in HTML */
}

.testimonial-card {
  /* Base card styles are in HTML (border, rounded, p-6, flex, flex-col) */
  flex: 0 0 calc(100% / 3 - 1rem); /* Show 3 cards, accounting for gap */
  margin-right: 1.5rem; /* Creates the gap between cards */
  margin-bottom: 1.5rem;
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for hover and transform */
  box-sizing: border-box; /* Ensure padding/border are included in width */
}

.testimonial-card:hover {
  box-shadow: 5px 5px 0px #a8a29e; /* Solid drop shadow (stone-400) - Kept */
  /* Optional: slight scale on hover */
  /* transform: scale(1.02); */
}

/* Responsive adjustments for testimonial cards */

/* Mobile: 1 card */
@media (max-width: 767px) {
  .testimonial-card {
    flex: 0 0 100%; /* Full width */
    margin-right: 0; /* No margin needed when full width */
  }
}

/* Tablet: 2 cards */
@media (min-width: 768px) and (max-width: 1023px) {
  .testimonial-card {
    flex: 0 0 calc(50% - 0.75rem); /* Half width minus half the gap */
    margin-right: 1.5rem; /* Gap between cards */
  }
  /* Remove margin from the second card in each pair */
  .testimonial-card:nth-child(2n) {
    margin-right: 0;
  }
  /* Add margin back to odd cards that aren't the very last one */
   .testimonial-card:nth-child(2n+1):not(:last-child) {
     margin-right: 1.5rem;
   }
}

/* Desktop: 3 cards (already defined, but ensure last one has no margin) */
@media (min-width: 1024px) {
  .testimonial-card {
    flex: 0 0 calc(100% / 3 - 1rem); /* Third width minus two-thirds of the gap */
    margin-right: 1.5rem; /* Gap between cards */
  }
  /* Remove margin from the third card in each triplet */
  .testimonial-card:nth-child(3n) {
    margin-right: 0;
  }
   /* Add margin back to cards 1 and 2 in triplets that aren't the very last one */
   .testimonial-card:nth-child(3n+1):not(:last-child),
   .testimonial-card:nth-child(3n+2):not(:last-child) {
     margin-right: 1.5rem;
   }
}


/* Remove margin from the very last card in the track regardless of screen size */
.testimonial-track .testimonial-card:last-child {
    margin-right: 0 !important; /* Use important to override media query specifics if needed */
}

.testimonial-dots {
  /* flex, justify-center, mt-6, space-x-2 are in HTML */
}

.testimonial-dots .dot {
  width: 0.75rem; /* w-3 */
  height: 0.75rem; /* h-3 */
  background-color: var(--dot-inactive-color); /* bg-gray-300 */
  border-radius: 9999px; /* rounded-full */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.testimonial-dots .dot:hover {
  background-color: var(--dot-hover-color); /* bg-gray-400 */
}

.testimonial-dots .dot.active {
  background-color: var(--primary-color); /* bg-purple-600 */
}

/* Testimonial Card Content Styling */
.testimonial-card .testimonial-quote {
  font-size: 1.125rem; /* text-lg */
  line-height: 1.75rem; /* Tailwind's default for text-lg */
  color: var(--text-color); /* text-gray-700 */
  /* mb-5, flex-grow, relative, pl-8 are kept in HTML */
}

.testimonial-card .testimonial-author-name {
  font-weight: 600; /* font-semibold */
  color: var(--dark-accent-color); /* text-indigo-800 */
  margin-bottom: 0; /* Override default p margin */
}

/* --- New Footer Styles --- */
.new-footer {
  background-color: var(--light-purple); /* Plum / Light Purple - Adjust hex code as needed */
  color: var(--black); /* Default text color */
}

.footer-shape-divider svg {
  /* Height is set inline for easier adjustment */
}

.footer-shape-fill {
  fill: var(--light-purple); /* Match footer background */
}

.footer-column {
  /* Using grid layout from Tailwind */
}

.footer-heading {
  font-family: "Fredoka", sans-serif; /* Match other headings */
  font-size: 1.25rem; /* text-xl */
  font-weight: 600; /* font-semibold */

  margin-bottom: 1rem; /* mb-4 */
}

.footer-text {
  font-size: 0.875rem; /* text-sm */
  line-height: 1.5;
}

.footer-link {
  transition: color 0.2s ease-in-out;
  text-decoration: none; /* Remove underline */
}

.footer-link:hover {
  text-decoration: underline; /* Add underline on hover */
}

.footer-icon {
  width: 1.1rem; /* Adjust size */
  height: 1.1rem; /* Adjust size */
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.social-icon:hover {
  background-color: rgba(var(--white-rgb), 0.2);
}

.social-icon i {
  width: 16px; /* Adjust icon size within circle */
  height: 16px;
}

.footer-copyright {
  border-color: rgba(var(--white-rgb), 0.3); /* Lighter border */
}

/* Adjust Back to Top Button Position if needed */
#back-to-top-btn {
  /* Example: Adjust bottom/right positioning if it overlaps weirdly */
   bottom: 2rem; /* Increase space from bottom */
   right: 2rem;
   background-color: var(--accent-color); /* Orange color from image */
   color: var(--dark-accent-color); /* Dark purple for icon */
}
#back-to-top-btn:hover {
    background-color: var(--secondary-color); /* Darker orange */
}
#back-to-top-btn svg {
    /* Icon color is set via text color */
}


/* --- End New Footer Styles --- */

.testimonial-card .testimonial-author-title {
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem; /* Tailwind's default for text-sm */
  color: var(--text-color-light); /* text-gray-500 */
  margin-bottom: 0; /* Override default p margin */
}

/* Tab Content Styling */
.tab-content {
  display: none; /* Hide tab content by default */
}

.tab-content.active {
  display: block; /* Show active tab content */
}

/* Active Tab Button Styling */
.tab-button.active {
  border-color: var(--primary-color); /* Add a bottom border to active tab button */
  color: var(--primary-color); /* Change text color for active tab button */
}


/* mailchip style */
div.mce_inline_error {
    position: absolute;
    top: -24px;
    left: 0;
    font-size: small;
}
input.mce_inline_error {
    border-color: red;
    background-color: #ff000038;
}

 .module-slider {
      --gap: 2rem; /* Corresponds to Tailwind's gap-8 */
    }
    .module-slider .module-track {
      gap: var(--gap);
    }
    .module-slider .module-card {
      width: calc(
        100% / var(--cards-per-view) - var(--gap) * (var(--cards-per-view) - 1) /
          var(--cards-per-view)
      );
    }

    /* Basic styling for arrows */
    .module-slider .prev-arrow,
    .module-slider .next-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      cursor: pointer;
    }

    .module-slider .prev-arrow {
      left: 1rem; /* Adjust as needed */
    }

    .module-slider .next-arrow {
      right: 1rem; /* Adjust as needed */
    }

    /* Basic styling for dots */
    .module-dots {
      margin-top: 1rem; /* Adjust as needed */
    }

    .module-dots .dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: #ccc;
      border-radius: 50%;
      margin: 0 4px;
      cursor: pointer;
      border: none;
      padding: 0;
    }

    .module-dots .dot.active {
      background-color: #333; /* Active dot color */
    }