/* ======================
   Reset/Normalize Styles
====================== */

/* Reset margins and paddings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ======================
   Base Styles
====================== */

body {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  color: #333;
  background-color: #D8BAA0;
  line-height: 1.6;
  
  
}
html, body {
  height: 100%;
  margin: 0;
}

a {
  color: #4a90e2;
  text-decoration: none;
}
main {
  flex: 1;
}
/* ======================
   containers
====================== */
.container {
  min-height: 100%; /* Ensure the container takes full height */
  display: flex;
  flex-direction: column;
}

.column-container {
  min-height: 100%; /* Ensure the container takes full height */
  display: flex;
  flex-direction: column;
}
.hero-container {
  min-height: 100%; /* Ensure the container takes full height */
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  margin-bottom: 3rem;
}
/* ======================
   Heros
====================== */

.title {
  text-align: center; /* Align text to the center */
}
.title-main {
  font-family: 'Playfair Display', serif; /* Change the font */
  color: #fff; /* Change the text color */
  font-size: 2.5rem; /* Adjust font size */
  margin-bottom: 1rem; /* Add spacing below */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

/* Styling for the subheading (h2) */
.title-sub {
  font-family: 'Lato', sans-serif, cursive; /* Change the font */
  color: #fff; /* Change the text color */
  font-size: 1.8rem; /* Adjust font size */
  font-weight: 400; /* Adjust font weight */
  margin-top: 1rem; /* Add spacing above */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */

}


.hero {
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5em;
  margin-bottom: 0.5em;
}

.hero p {
  font-family: 'Lato', sans-serif;
  font-size: 1.1em;
  line-height: 1.6;
  margin-bottom: 1em;
}

.hero .button {
  padding: 0.75em 1.5em;
  font-size: 1em;
}


/* ======================
   Typography
====================== */

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  color: #222;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.75em;
}

h4 {
  font-size: 1.2em;
}

/* Paragraphs */
p {
  margin-bottom: 1em;
}

/* Lists */
ul, ol {
  margin-left: 1.5em;
  margin-bottom: 1em;
}

li {
  margin-bottom: 0.5em;
}


/* ======================
   Footer
====================== */

footer {
  background-color: transparent;
  padding: 1em 0;
  text-align: center;
  font-size: 0.9em;
  color: #777;
}


/* ======================
    buttons
====================== */
/* Buttons outside the card */

.button {
  display: inline-block;
  padding: 0.75em 1.5em;
  background-color: #547E84;
  color: #fff;
  text-align: center;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.card__button,
.card__booking__button {
  display: block; /* Make buttons occupy full width */
  width: 100%; /* Set button width (adjust as needed) */
  margin: 0 auto; /* Center the button horizontally */
  padding: 0.5em 0.1em;
  background-color: #547e84;
  color: white;
  font-size: 1em;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  margin-top: 0.5rem; /* Add top margin to separate from card */
}

.card__button:hover,
.card__booking__button:hover {
  background-color: #3a5d60;
}

button[type="submit"] {
  background-color: #547E84;;
  color: white;
  padding: 1em 1.5em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.1em;
}

button[type="submit"]:hover {
  background-color: #3a5d60;
}

.button:hover {
  background-color: #3a5d60;
}



/* ======================
    Cards (for Services)
====================== */

/* Align services horizontally in a row */
.services-overview {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping to a new row if space is insufficient */
  justify-content: center; /* Center-align all cards in the container */
  gap: 2rem; /* Add spacing between cards */
  margin-bottom: 5rem;
}

/* Card-container handles each card and its button */
.card-container {
  display: flex;
  flex-direction: column; /* Stack card and buttons vertically */
  align-items: center; /* Center-align card and buttons */
  max-width: 345px; /* Limit width for each card-container */
  perspective: 1000px; /* For 3D flip effect */
  gap: 1rem; /* Add spacing between card and buttons */
}

/* Individual card styles */
.card1,
.card2,
.card3 {
  background-color: #b1c0b4; /* Background color for the card */
  border-radius: 8px; /* Rounded corners */
  padding: 1em; /* Padding inside the card */
  text-align: center; /* Center text content */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
  transition: transform 0.8s; /* Add transition for smooth animation */
  transform-style: preserve-3d; /* Important for 3D flip */
  position: relative; /* For absolute positioning of the back side */
  width: 100%; /* Ensure card takes full width of container */
  min-height: 450px;
}

/* Image background setup */
.card1 {
  background-image: url("./images/individual.jpg"); /* Replace with your image path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card2 {
  background-image: url("./images/couples.jpg"); /* Replace with your image path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card3 {
  background-image: url("./images/family.jpg"); /* Replace with your image path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Hover effect - rotate the card */
.card-container:hover .card1,
.card-container:hover .card2,
.card-container:hover .card3 {
  transform: rotateY(-180deg);
}



/* Style for card titles */
.card__title {
  margin-bottom: 0.5em; /* Add spacing below the title */
  color: #ffffff; /* White color for the text */
  font-size: 1.5em; /* Increase font size for title */
  font-weight: bold; /* Make title bold */
  text-shadow: 
    -1px -1px 0 #b1c0b4, /* Top-left shadow */
    1px -1px 0 #b1c0b4,  /* Top-right shadow */
    -1px 1px 0 #b1c0b4,  /* Bottom-left shadow */
    1px 1px 0 #b1c0b4;   /* Bottom-right shadow */
    
  }



/* Back of card styles */
.card__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
  transform: rotateY(180deg); /* Initially rotated to be hidden on the back */
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 1rem;
}


/* ======================
   Testimonials
====================== */

.testimonial {
  background-color: #f9f9f9;
  border-left: 4px solid #4a90e2;
  padding: 1em;
  margin-bottom: 1.5em;
  font-style: italic;
}

.testimonial__author {
  text-align: right;
  font-weight: bold;
  margin-top: 0.5em;
}

/* ======================
   Utility Classes
====================== */

  .text-center {
    text-align: center;
  }

  .mt-1 { margin-top: 1em; }
  .mb-1 { margin-bottom: 1em; }
  .mt-2 { margin-top: 2em; }
  .mb-2 { margin-bottom: 2em; }

  .p-1 { padding: 1em; 
  font-size: 1.125rem; /* Slightly larger than the default 1rem (16px), adjust to taste */
  line-height: 1.6;    /* Increase line spacing for easier readability */
  letter-spacing: 0.5px; /* A subtle letter-spacing can give a polished look */
  margin-top: 2em;       /* Add top margin */
  margin-bottom: 2em; 
 }  /* Add bottom margin */
  .p-2 { padding: 2em; }

/* ======================
   Responsive Design
====================== */

@media (max-width: 768px) {
  .nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav__item {
    margin-bottom: 0.5em;
  }

  .card {
    padding: 1em;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.75em;
  }

  h3 {
    font-size: 1.5em;
  }
}

/* =================================
   Services pages and collapsibles
================================== */

        .collapsible-section {
          /* Your background image */
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;  
      }


      .individual-collapsible-container {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background-image: url('./images/individual.jpg'); 
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 2rem;
        border-radius: 10px;
        flex: 2; 
        max-width: 95%; /* up to 95% on large screens */
      }
      
      @media (max-width: 768px) {
        .individual-collapsible-container {
          width: 100%;        /* fill entire screen width on small devices */
          max-width: none;    /* remove the 95% limit if you want truly full width */
        }
      }
      .collapsible-container2 {
       
        margin: 0 auto; /* Center horizontally */
        display: flex;
        flex-direction: column; /* Stack items vertically */
        gap: 1rem; /* Add space between items */
        background-image: url('./images/couples.jpg'); 
        background-size: cover;
        background-position: center;
        background-repeat:no-repeat;
        padding: 2rem; /* Add padding */
        border-radius: 10px; /* Add rounded corners */
        flex: 2; /* Take up more space */
        max-width: 95%; /* Optional: Limit width */
    }
    @media (max-width: 768px) {
      .collapsible-container2 {
        width: 100%;        /* fill entire screen width on small devices */
        max-width: none;    /* remove the 95% limit if you want truly full width */
      }
    }
    .collapsible-container3 {
     
      margin: 0 auto; /* Center horizontally */
      display: flex;
      flex-direction: column; /* Stack items vertically */
      gap: 1rem; /* Add space between items */
      background-image: url('./images/family.jpg'); 
      background-size: cover;
      background-position: center;
      background-repeat:no-repeat;
      padding: 2rem; /* Add padding */
      border-radius: 10px; /* Add rounded corners */
      flex: 2; /* Take up more space */
      max-width: 95%; /* Optional: Limit width */
  }
  @media (max-width: 768px) {
    .collapsible-container {
      width: 100%;        /* fill entire screen width on small devices */
      max-width: none;    /* remove the 95% limit if you want truly full width */
    }
  }

      .collapsible-item {
          display: flex;
          flex-direction: column; /* Stack button and content vertically */
          width: 100%;
          box-sizing: border-box;
      }

      .collapsible {
          width: 100%; /* Full width buttons */
          padding: 0.8em 1em; /* Adjust padding */
          font-size: 1em;
          cursor: pointer;
          background-color: rgba(150, 182, 169, 1); 
          color: #fff;
          border: none;
          border-radius: 4px;
          text-align: left;
      }

      .collapsible:hover,
      .collapsible:focus {
          background-color: rgba(150, 182, 169, 0.7); 
          outline: none;
      }

      .collapsible.active + .collapsible-content {
          max-height: 500px; /* Allow expansion up to this height */
          visibility: visible; /* Make visible */
          opacity: 1; /* Fade in */
          overflow: hidden;
      }

      .collapsible-content {
          width: 100%; /* Full width content */
          box-sizing: border-box; /* Include padding and border in width */
          background-color: rgba(255, 255, 255, 0.9); /* Transparency set here */
          padding: 1em;
          border: 1px solid #ddd;
          border-radius: 4px;
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease-out;
          visibility: hidden;
          opacity: 0;
      }

      .collapsible.active + .collapsible-content {
          max-height: 500px; /* Adjust as needed */
      }
      .service-button-text-container {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  margin-top: 2rem; /* Add spacing from the previous collapsible items */
}

.service-button-text {
  background-color: rgba(255, 255, 255, 0.8); /* Light card background */
  padding: 1.5rem; /* Add padding inside the card */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  text-align: center; /* Center the text and button */
  max-width: 400px; /* Limit the card's width */
  width: 100%; /* Ensure responsiveness */
}

.service-button-text p {
  display: block; /* Ensure text spans a full line */
  margin-bottom: 1rem; /* Add spacing between the text and button */
  font-size: 1.1rem; /* Adjust text size for readability */
  color: #333; /* Text color */
}

.service-button-text .button {
  display: inline-block; /* Ensure button stays inline */
  background-color: rgba(150, 182, 169, 1); /* Match button color */
  color: #fff;
  padding: 0.8rem 1.2rem; /* Adjust button padding */
  text-decoration: none; /* Remove underline */
  border-radius: 5px; /* Rounded button */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

.service-button-text .button:hover, .service-button-text .button:focus  {
  background-color: rgba(150, 182, 169, 0.9); /* Slightly darker hover color */
  outline: none; /* Remove default focus outline */
  box-shadow: 0 0 5px rgba(150, 182, 169, 0.8); /* Add glow effect */
}




/* ======================
   Booking form styles
====================== */
form {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

label {
  display: block;
  margin-bottom: 0.5em;
  font-weight: bold;
}

input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%;
  padding: 0.75em;
  margin-bottom: 1.25em;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}



.success {
  color: green;
  font-weight: bold;
}

.error {
  color: red;
  font-weight: bold;
}

.privacy-assurance {
  text-align: center;
  margin-top: 2em;
}

.privacy-consent {
  display: flex;
  align-items: center;
}
.privacy-consent a {
  color: #007bff;
  text-decoration: none;
  margin-left: 5px;
}
.privacy-consent a:hover {
  text-decoration: underline;
}

/* ======================
   Bio
====================== */









/* ======================
   Dividers
====================== */
.wave-divider {
  width: 100%;
  height: auto;
  margin-bottom: -1.5rem;
}

/* doted */
.dotted-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
  gap: 0.5rem;
}

.dotted-divider hr {
  width: 100%;
  border: none;
  border-top: 2px solid #96B6A9;
}

.dotted-divider span {
  font-size: 1.5rem;
  color: #96B6A9;
}

/* ornament */
.ornament-divider {
  text-align: center;
  margin: 2rem 0;
}

.ornament-divider .ornament {
  font-size: 2rem;
  color: #96B6A9;
}

.ornament-divider hr {
  margin: 1rem auto;
  width: 50%;
  border: none;
  border-top: 2px solid #96B6A9;
}


/* gradient */
.gradient-divider {
  height: 4px;
  background: linear-gradient(to right, #B1C0B4, #96B6A9, #7961d3);
  margin: 2rem 0;
}

/* leaf */
.leaf-divider {
  width: 100%;
  height: auto;
  margin-top: 2rem;
}

/* Divider Styling */
.styled-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem; /* Space between lines and icon */
  margin: 1rem 0; /* Spacing above and below the divider */
}

.styled-divider .line1 {
  height: 1px;
  width: 30%; /* Adjust line length */
  background: linear-gradient(to right, #96B6A9, transparent);
}
.styled-divider .line2 {
  height: 1px;
  width: 30%; /* Adjust line length */
  background: linear-gradient(to left, #96B6A9, transparent);
}
.styled-divider .icon {
  font-size: 1.5rem;
  color: #96B6A9;
  font-family: 'Playfair Display', serif;
}