/* Fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Chelsea+Market&family=Manrope:wght@200..800&display=swap');
html {
  scroll-behavior: smooth;
}
/* Base styles using Manrope for body, Chelsea Market for headings */
body {
  font-family: "Manrope", sans-serif;
  color: #1a202c; /* Dark text for readability */
}
.title-font {
  font-family: "Chelsea Market", cursive, sans-serif;
  line-height: 1.2;
}
/* Custom shadows for a playful, lifted look */
.soft-shadow {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 0 10px rgba(0, 0, 0, 0.05);
}
.hero-bg {
  /* Abstract background shapes using colors */
  background-image: radial-gradient(
      circle at 35% 50%,
      #85e3ff40 5%,
      transparent 15%
    ),
    radial-gradient(circle at 95% 20%, #ffe10040 10%, transparent 20%),
    radial-gradient(circle at 5% 15%, #78c84140 5%, transparent 15%);
  background-position: top left, bottom right, top left;
}
/* CTA Button Hover Effect */
.cta-button {
  transition: transform 0.2s, box-shadow 0.2s;
}
.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(251, 65, 65, 0.5);
}

/* Hover Bounce & Rotate Effect */
.hover-bounce-card {
  /* Using cubic-bezier for a spring/bounce effect on transform (lift & rotate) */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.4s ease-out;
  cursor: pointer;
}
.hover-bounce-card:hover {
  /* Lift higher (to emphasize the bounce) and rotate slightly */
  transform: translateY(-10px) rotate(3deg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* Modal specific transition styles */
.modal {
  transition: opacity 0.3s ease-out;
  pointer-events: none;
  opacity: 0;
}
.modal.open {
  opacity: 1;
  pointer-events: auto;
}
.modal-content {
  transition: transform 0.3s ease-out;
  transform: scale(0.9);
}
.modal.open .modal-content {
  transform: scale(1);
}
/* Social link style */

.social-link {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-decoration: none;
  font-size: 1.5rem;
  transition: all 0.3s;
}

.social-link:hover {
  background-color: #78c841;
  transform: translateY(-3px);
}

/* Custom styles for smooth slide-in transition from the right */
.mobile-menu {
  transition: transform 0.3s ease-in-out;
  /* Start off-screen to the right */
  transform: translateX(100%);
}
.mobile-menu.active {
  /* Slide into view */
  transform: translateX(0);
}
/* Style for the very rounded feature cards */
.feature-card {
  border-radius: 2rem; /* highly rounded */
}