/* Global Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    background-color: #FDFDFD;
    color: #333333;
}

/* Navbar */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #E5E5E5;
}
.navbar-brand {
    color: #B76E79;
    font-weight: bold;
}
.nav-link {
    color: #333333;
    font-weight: 500;
}
.nav-link:hover {
    color: #B76E79;
}
/* Make collapsed mobile navbar 50% transparent */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: rgba(255, 255, 255, 0.5); /* 50% transparent */
    backdrop-filter: blur(5px); /* optional: improves readability */
  }
}

/* Hero Section */
.hero {
    background-color: #FFE4E1;
    color: #333333;
    text-align: center;
    padding: 30px 20px;
}
.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #B76E79;
}
.hero p {
    font-size: 1.25rem;
    margin-bottom: 30px;
}
@media (max-width: 768px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
    }
    .hero-image img {
        width: 100%;
        height: auto;
    }
}

.hero .btn {
    background-color: #B76E79;
    color: #FFFFFF;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
}
.hero .btn:hover {
    background-color: #994E59;
}
.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.hero-text {
    flex: 1;
    padding: 20px;
}
.hero-image {
    flex: 1;
    text-align: center;
}
/* About Section */
/* About Section */
.about-content {
    margin: 20px 0;
}
.about-content p {
    line-height: 1.6;
    margin-bottom: 15px;
}
.about-content ul {
    list-style-type: disc;
    padding-left: 20px;
}
.about-content li {
    margin-bottom: 10px;
	font-size: 1.0rem;
}
.about-content h3 {
    margin-bottom: 10px;
	color: #B76E79;
	font-size: 1.5rem;
	text-align: center;
}
.about-content .btn {
	display: block;
	margin: 20px auto;
	text-align: center;
    background-color: #B76E79;
    color: #FFFFFF;
    border: none;
    padding: 10px 15px;
    font-size: 1rem;
	max-width: 200px; /* Set the maximum horizontal size */
    width: 100%; /* Ensure the button adapts to smaller screen sizes */
    box-sizing: border-box; /* Ensures padding is included in the width */
}
.about-content .btn:hover {
    background-color: #994E59;
}
.about-team {
    margin-top: 30px;
}
.about-team h4 {
    margin-bottom: 10px;
    color: #B76E79;
}
.about-team h5 {
    margin-top: 20px;
    color: #333333;
}
.about-team ul {
    list-style-type: circle;
    padding-left: 20px;
}
.about-team li {
    margin-bottom: 8px;
}


/* Container */
.service-card {
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
  margin-bottom: 20px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative; /* optional but often handy */
}
.arrow-icon {
  font-size: 1.5rem;
  margin-left: 0.5em;
  /* Possibly change color or transition on hover */
}
/* Hover effect for the card */
.service-card {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.service-card:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* Title: dynamic font size using clamp */
.service-title {
  cursor: pointer;
  font-size: clamp(0.6rem, 10vw, 1.4rem);
  background-color: #D2B48C;
  color: #FFFFFF;
  font-weight: bold;
  padding: 15px;
  text-align: center;
  margin: 0;
    /* Disable text selection */
  -webkit-user-select: none;  
  -moz-user-select: none;
  -ms-user-select: none;  
  user-select: none;
}
.service-title:hover {
  background-color: #b99c71; /* slightly darker or lighter color */
}

.image-container:hover img {
  transform: scale(1.02); /* subtle zoom on hover */
  transition: transform 0.3s ease;
}
/* Image container & image */
.image-container {
  cursor: pointer;
  /* No special styling needed unless you want spacing, etc. */
}

.service-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.service-details .service-tagline {
  font-style: italic;
  margin-bottom: 10px;
}

.service-details .service-pricing {
  font-weight: bold;
  color: #994E59; /* Distinctive color for pricing */
  margin-bottom: 15px;
}
/* Service details: hidden by default */
.service-details {
  display: none;  
  background-color: #fdf7f7;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 6px;
  margin-top: 10px;
  line-height: 1.1;
    /* Disable text selection */
  -webkit-user-select: none;  
  -moz-user-select: none;
  -ms-user-select: none;  
  user-select: none;
}
.service-details ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.service-details ul li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 10px;
  font-size: 1.1rem;
}
.service-details ul li::before {
  content: "✔️";
  position: absolute;
  left: 0;
}

/* Center the link by making it a block element and auto-margin */
.service-details .apply-button {
  display: block;
  margin: 1rem auto 0 auto; /* top, right, bottom, left */
  max-width: 400px;        /* optional; limit the width if you like */
  text-align: center;      /* ensures text is centered within the button if it's wider */
  font-size: 1.1em;
}
.service-details .btn.btn-primary {
	font-size: 1.2rem;
	font-weight: bold;
}
/* The rest of your existing button styling applies,
   but now we’re using an anchor <a> instead of <button> */
.btn.btn-primary {
  background-color: #c9858f;
  color: #FFFFFF;
  border: none;
  padding: 10px 20px;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none; /* to remove underline on link */
}

.btn.btn-primary:hover {
  background-color: #994E59;
}
/* When the card is "active" */
.service-card.active .image-container {
  /* Hide the image altogether */
  display: none;
}

.service-card.active .service-details {
  /* Show the details */
  display: block;
}

/* Responsive adjustments if needed */
@media (max-width: 768px) {
  .service-title {
    padding: 10px;
  }
  .service-details {
    padding: 10px;
  }
}



/* Section Styling */
.section {
    padding: 40px 20px;
    border-bottom: 1px solid #E5E5E5;
}
.section.bg-light {
    background-color: #FFE4E1;
}
.section h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #B76E79;
}


/* Make sure the slider container has width and (optional) max-width */
.testimonials-slider {
  width: 100%;
  max-width: 1200px; /* or whatever fits your layout */
  margin: 0 auto;    /* center it */
  padding: 2rem 1rem;
}

.swiper-slide.testimonial {
  min-height: 400px; /* or min-height: 350px */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0; /* Avoid conflicting margins; let spaceBetween handle spacing */
  box-sizing: border-box;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  padding: 1.5rem;
  text-align: left;
  
  
}

/* Company Logo */
.testimonial-company-logo {
  display: block;         /* So margin: 0 auto works */
  margin: 0 auto 1rem;    /* Center horizontally and add spacing below */
  height: 70px;           /* Fixed height */
  width: auto;            /* Maintain aspect ratio */
  object-fit: contain;    /* Ensures the entire logo is visible within the 70px height (optional) */
}

/* Testimonial Text */
.testimonial-text {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: #333;
  font-style: italic;
}

/* Profile Row */
.testimonial-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.testimonial-profile-pic {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
}

.testimonial-profile-info {
  text-align: left;
}

.testimonial-profile-name {
  font-size: 1rem;
  margin: 0;
}

.testimonial-profile-position {
  font-size: 0.875rem;
  color: #777;
  margin: 0;
}

/* Swiper Dots */
.swiper-pagination-bullet {
  background: #aaa;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: #333;
}

/* ------------------ General Form Styling ------------------ */
#apply {
  text-align: center;
}

#apply div {
  max-width: 600px;
  margin: 0 auto; /* centers div horizontally */
}

#apply .apply-button,
#appointment-button .calendar-button {
  background-color: #B76E79;
  color: #FFFFFF;
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 4px;
  text-decoration: none;
}

#apply .apply-button:hover,
#appointment-button .calendar-button:hover {
  background-color: #994E59;
}

#apply .apply-button {
  display: inline-block;
  margin-top: 15px;
}

#apply .apply-button:hover,
#appointment-button .calendar-button:hover {
  background-color: #994E59;
}

#apply ul.apply-list {
  list-style: none; /* remove default bullets */
  padding: 0;
  text-align: left; /* aligns text within list to left */
}

#apply ul.apply-list li {
  margin-bottom: 10px;
}


/* Hide the recaptcha badge */
.grecaptcha-badge {
  visibility: hidden;
}
.error-message {
  color: red;
  font-size: 0.85rem;
  margin-top: 4px;
}

.required {
  color: red;
  margin-left: 2px;
}

.success-message {
  margin-top: 1rem;
  color: #4CAF50; /* a nice green */
  font-weight: bold;
}

/* Footer */
footer {
    background-color: #B76E79;
    color: #FFFFFF;
    text-align: center;
    padding: 10px 0;
}
    .hidden-field {
      display: none;
      visibility: hidden;
      position: absolute;
      left: -9999px;
    }