/* Global styles */
html, body {
  margin: 0;
  padding: 0;
  /*
    Use Nunito and Quicksand for a friendly, modern look.  Nunito’s
    rounded terminals and balanced proportions give it a soft,
    approachable appearance with excellent readability【260844009432927†L34-L36】.
    Quicksand complements Nunito with a similarly friendly and modern
    feel【260844009432927†L119-L123】.  Provide a sans‑serif fallback.
  */
  font-family: 'Nunito', 'Quicksand', sans-serif;
  line-height: 1.5;
  color: #333;
  scroll-behavior: smooth;
}

/* Utility classes */
.section {
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Hero section styles */
.hero {
  min-height: 90vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
}
.hero .overlay {
  background: rgba(0, 0, 0, 0.55);
  padding: 40px;
  /* Use a larger border radius for a softer look */
  border-radius: 20px;
  max-width: 90%;
  /* Centre the overlay horizontally on smaller screens */
  margin-left: auto;
  margin-right: auto;
}
.hero h1 {
  font-size: 3rem;
  margin: 0 0 20px;
  font-family: 'Playfair Display', serif;
}
.hero p {
  font-size: 1.25rem;
  margin: 0;
}

/* Tagline under the logo on the hero section.  Increase the font size
   slightly and adjust spacing to occupy the space previously taken
   by the main heading. */
.hero-tagline {
  font-size: 1.6rem;
  margin-top: 10px;
  margin-bottom: 0;
  line-height: 1.4;
}

/* About section */
.about {
  background-color: #f7effa;
}
.about h2 {
  color: #4b0f75;
  margin-bottom: 20px;
  font-family: 'Playfair Display', serif;
}
.about p {
  max-width: 800px;
  margin: 0 auto 10px;
  font-size: 1.1rem;
}

/* Services section */
.services {
  background-color: #ffffff;
}
.services h2 {
  color: #4b0f75;
  margin-bottom: 20px;
  font-family: 'Playfair Display', serif;
}
.services ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 700px;
}
.services li {
  margin-bottom: 12px;
  padding-left: 25px;
  position: relative;
  font-size: 1.05rem;
  text-align: left;
}
.services li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
  color: #a353c5;
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 1;
}

/* Map section */
.map-section {
  background-color: #f7effa;
}
.map-section h2 {
  color: #4b0f75;
  margin-bottom: 20px;
  font-family: 'Playfair Display', serif;
}
.map-container {
  width: 100%;
  max-width: 800px;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Testimonials section */
.testimonials {
  background-color: #ffffff;
}
.testimonials h2 {
  color: #4b0f75;
  margin-bottom: 30px;
  font-family: 'Playfair Display', serif;
}
.testimonial-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 1000px;
}
.testimonial-card {
  background-color: #f7effa;
  border-radius: 20px;
  padding: 20px;
  width: 280px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.testimonial-card img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}
.testimonial-card p {
  font-size: 1rem;
  margin: 0 0 10px;
}
.testimonial-card span {
  font-weight: bold;
  color: #4b0f75;
}

/* Contact section */
.contact {
  background-color: #f7effa;
}
.contact h2 {
  color: #4b0f75;
  margin-bottom: 20px;
  font-family: 'Playfair Display', serif;
}

/* Apply Playfair Display to primary headings on hero section */
.hero p {
  font-family: 'Merriweather', serif;
}

/* Logo inside hero */
.hero-logo {
  /* Increase the logo size for better visibility.  The height will scale
     proportionally to preserve the aspect ratio. */
  /* Make the logo larger for better prominence */
  width: 240px;
  height: auto;
  margin-bottom: 20px;
}

/* Scroll‑spy navigation dots */
.scroll-dots {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1000;
}
.scroll-dots a {
  text-decoration: none;
}
.scroll-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #bbb;
  transition: background-color 0.3s;
  display: block;
}
.scroll-dots a.active .dot,
.scroll-dots a:hover .dot {
  background-color: #4b0f75;
}
.contact .contact-info {
  font-size: 1.1rem;
  margin-bottom: 20px;
}
.contact .contact-info a {
  color: #4b0f75;
  text-decoration: none;
}
.contact form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  max-width: 500px;
}
.contact input,
.contact textarea {
  padding: 10px 15px;
  border: 1px solid #ccc;
  /* Slightly rounder corners on form controls */
  border-radius: 10px;
  font-size: 1rem;
}
.contact button {
  background-color: #4b0f75;
  color: white;
  padding: 12px;
  border: none;
  /* Slightly rounder corners on the submit button */
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}
.contact button:hover {
  background-color: #7a3ea0;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .testimonial-grid {
    flex-direction: column;
    align-items: center;
  }
}

/*
  Parallax background support
  ---------------------------
  Each section of the site can have a fixed background that moves
  more slowly than the foreground content to create an illusion of
  depth.  This effect is achieved by fixing the background relative
  to the viewport and rotating through a set of pre‑selected images.
  Parallax scrolling gives the page a dynamic and immersive feel
  without impeding normal scrolling【815458559099720†L115-L157】.
*/
.parallax-section {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  /* Rotate through several images over time.  Adjust the duration
     for slower or faster transitions. */
  animation: rotateBackground 40s infinite ease-in-out;
}

@keyframes rotateBackground {
  0% {
    background-image: url('hero_flower.jpg');
  }
  33% {
    background-image: url('bg1.png');
  }
  66% {
    background-image: url('bg2.png');
  }
  100% {
    background-image: url('hero_flower.jpg');
  }
}

/*
  Overlay style for improved readability on parallax backgrounds.
  Use this class on inner containers within a section to provide a
  semi‑transparent panel behind text.  The overlay ensures content
  remains legible over the rotating backgrounds.
*/
.parallax-overlay {
  background: rgba(255, 255, 255, 0.85);
  padding: 40px;
  /* Round the corners more generously to soften the box */
  border-radius: 20px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* Ensure that overlay containers centre themselves on mobile and use
   narrower padding to avoid appearing off‑centre.  On small screens the
   sliding menu should expand to the full width for easier tapping. */
@media (max-width: 768px) {
  .overlay,
  .parallax-overlay {
    max-width: 95%;
    padding: 20px;
  }
  .hero-logo {
    /* Slightly larger logo on mobile to improve legibility */
    width: 200px;
  }
  .side-menu.open {
    width: 100%;
  }
}

/*
  Hamburger menu styles
  ----------------------
  A hamburger icon that toggles into an X when the menu is open
  provides a clear visual indicator of the menu state.  When the
  menu is open, the side panel slides out from the left.  The
  transformation of the three lines into a cross indicates whether
  the navigation is expanded or collapsed【995805708329959†L93-L96】.
*/
.hamburger {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 2000;
  width: 30px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #4b0f75;
  border-radius: 3px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger.active .line1 {
  transform: translateY(9px) rotate(45deg);
}
.hamburger.active .line2 {
  opacity: 0;
}
.hamburger.active .line3 {
  transform: translateY(-9px) rotate(-45deg);
}

/* Side navigation menu */
.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 0;
  background-color: rgba(255, 255, 255, 0.95);
  overflow: hidden;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: width 0.4s ease;
}
.side-menu.open {
  width: 70%;
}
.side-menu a {
  font-size: 1.5rem;
  margin: 15px 0;
  color: #4b0f75;
  text-decoration: none;
  transition: color 0.3s ease;
}
.side-menu a:hover {
  color: #7a3ea0;
}