/* ///--- BACKGROUND WEBSITE ---/// */
body {
    background-image: url("../img/bg.webp");
    background-size: 50%;
    background-repeat: repeat;
    background-attachment: fixed;
    background-color: #550909; /* Optional: Background color with transparency */
    font-family: ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  }

  .translate-box {
    display: block;
    text-align: center; /* Center align the widget */
}

@media (max-width: 768px) {
    .translate-box {
        display: block;
        text-align: center; /* Adjust for smaller screens */
        width: 100%; /* Make it full width */
        margin: 0 auto; /* Center align horizontally */
    }
}

  /* Navbar */
.navbar {
    background-color: #550909; /* Background color */
  }

  /* Logo styling */
.navbar-brand img {
    height: 10vh; /* Adjust the height of the logo as needed */
    width: auto;  /* Maintain aspect ratio */
    vertical-align: middle;
  }
  /* Navbar toggle button styling */
.navbar-toggler {
    color: transparent; /* Toggle button color */
    border-color: transparent;
    
}

/* Navbar toggle button icon styling */
.navbar-toggler-icon {
    color: #fff; /* Toggle button icon color */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M1.5 12.5h13v1h-13v-1zM1.5 7.5h13v1h-13v-1zM1.5 2.5h13v1h-13v-1z'/%3E%3C/svg%3E");

}

/* Navbar links styling */
.navbar-nav {
    margin-left: auto; /* Move the navbar links to the right */
    flex-direction: column; /* Align navbar links vertically on small screens */
    margin-left: 0; /* Reset margin for mobile layout */
}

.navbar-nav .nav-item {
    margin-right: 10px; /* Adjust margin between navbar items */
    margin-bottom: 15px; /* Add margin between navbar items on mobile */

}

.navbar-nav .nav-link {
    color: #daad0c; /* Navbar link color */
    font-size: 20px; /* Navbar link font size */
    text-align: center;
    line-height: 10px;
    border: 0px solid;
    border-radius: 10px;
    cursor: pointer;
    margin-right: 10px;

}


    .nav-link.active {
        color: #fff !important; /* Active link color (white) */
    }
    
/* Base styles for nav-link */
.nav-link {
    color: #fff; /* Default text color */
    padding: 10px 15px; /* Padding for links */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s; /* Smooth transition for color change */
}


/* Styles for the headline */
.headline {
    font-size: 3vh; /* Adjust the font size */
    color: #ffffff; /* Adjust the font color */
    text-align: center; /* Center the headline */
    margin-top: 50px; /* Add space above the headline */
    margin-bottom: 0px; /* Add space below the headline */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Styles for the headline icons */
.headline-icon {
    width: 40px; /* Adjust the size of the icons */
    height: auto; /* Maintain aspect ratio */
    margin: 0 10px; /* Space between the icon and the text */
}



/* Scroll Back To Top Button */
.scroll-top-btn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed position */
    bottom: 40px; /* Position from the bottom */
    right: 10px; /* Position from the right */
    z-index: 1000; /* Ensure it's above other elements */
    background-color: #5509097f; /* Button color */
    color: rgba(244, 203, 0, 0.601); /* Text color */
    border: 1px solid; /* Border */
    border-color: #daad0c81;
    border-radius: 50%; /* Rounded button */
    width: 40px; /* Set a fixed width */
    height: 40px; /* Set a fixed height */
    display: flex; /* Use Flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s; /* Smooth background color transition */
    font-size: 18px; /* Font size */
    line-height: 1; /* Ensure the text stays centered */
    padding: 0; /* Remove any padding */
}
.scroll-top-btn:hover {
    background-color: #550909; /* Darker on hover */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .scroll-top-btn {
        bottom: 40px; /* Adjust position from the bottom */
        right: 10px; /* Adjust position from the right */
        width: 50px; /* Increase width */
        height: 50px; /* Increase height */
        font-size: 22px; /* Increase font size */
    }
}



/* Custom styles for carousel images */
.carousel-item img {
    width: 100%; /* Ensure images take the full width of their container */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensure images cover the entire space without distortion */
  }
  

/* Carousel Item */
.carousel-item {
    position: relative; /* Positioning context for the caption */
  }
  
  /* Carousel Caption */
.carousel-caption {
    position: absolute; /* Position relative to the carousel item */
    top: 80%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust position to be fully centered */
    text-align: center; /* Center align text horizontally */
    width: 80%; /* Set a wider width for the caption */
    max-width: 80%; /* Optional: constrain width for larger screens */
  }
  
  /* Carousel Caption Text */
.carousel-caption p {
    background: rgba(198, 197, 197, 0.184); /* Semi-transparent black background for better readability */
    color: white; /* White text color */
    padding: 10px; /* Padding around the text */
    font-size: 2vw; /* Responsive font size based on viewport width */
    margin: 0; /* Remove default margins */
    display: inline-block; /* Ensure the background fits the text width */
  }

/* Media Queries for Mobile Devices */
@media (max-width: 768px) {
    /* Adjustments for tablets and smaller screens */
    .carousel-caption {
        top: 60%; /* Adjust vertical position */
        width: 90%; /* Increase width for better readability */
        max-width: 90%; /* Ensure it doesn't exceed container width */
        transform: translate(-50%, -50%); /* Keep centered */
    }

    .carousel-caption p {
        font-size: 2vw; /* Increase font size for better readability */
        padding: 8px; /* Adjust padding */
    }
}

@media (max-width: 480px) {
    /* Adjustments for phones and smaller screens */
    .carousel-caption {
        top: 60%; /* Adjust vertical position */
        width: 95%; /* Increase width for better readability */
        max-width: 95%; /* Ensure it doesn't exceed container width */
        transform: translate(-50%, -50%); /* Keep centered */
    }

    .carousel-caption p {
        font-size: 3vw; /* Increase font size for better readability */
        padding: 6px; /* Adjust padding */
    }
}


  #aboutSection {
    position: relative;
    padding: 10px 0; /* Add top padding to create space between the images and the carousel */
    text-align: center; /* Center-align the text */
  }
  
  #aboutSection img {
    max-width: 30px; /* Adjust the size of the icon images */
    margin: 0 0px; /* Adjust the margin between the icon images and the text */
  }
  
  #aboutSection h2 {
    font-size: 1.3em;
    color: #ffffff;
    position: relative;
    z-index: 1; /* Ensure text is above background images */
    display: inline-block; /* Display the text as an inline-block element */
    background-color: 0;
    padding: 10px; /* Optional: Add padding to the text */
  }
  
  #aboutSection p {
    font-size: 2vh;
    color: #ffffff;
  }
  
  /* Gallery Section */
  #gallerySection {
    padding-top: 15px; /* Space above the section */
    padding-bottom: 10px; /* Space below the section */
  }
  
  /* Gallery Section Headline */
  #gallerySection h2 {
    font-size: 20px; /* Font size for the headline */
    margin-bottom: 10px; /* Add some space below the headline */
    color: #333; /* Headline text color */
  }
  
 /* Gallery Images */
#gallerySection img {
    width: 100%; /* Ensure all images span the full width of their container */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 20px; /* Default margin bottom for images */
  }
  
  /* Big Gallery Image */
  #gallerySection .big-image img {
    width: 100%; /* Ensure the big image spans the full width of its container */
    height: 100vh; /* Set the height of the image to fill the viewport height */
    object-fit: cover; /* Scale the image as large as possible while maintaining aspect ratio */
  }
  
  /* Small Gallery Images */
  #gallerySection .small-image {
    width: 100%; /* Ensure each small image spans the full width of its container */
    max-height: 50vh; /* Maximum height of the image */
    object-fit: cover; /* Ensure images cover the allocated space without distortion */
    border-radius: 8px; /* Optional: Add rounded corners to the images */
  }


/* Therapists Section */
#therapistSection {
    padding-top: 15px; /* Top padding */
    padding-bottom: 10px; /* Bottom padding */
  }

  #therapistSection .image {
      width: 100%; /* Ensure each image spans the full width of its container */
      height: auto; /* Set the height of the image to fill the viewport height */
      object-fit: cover; /* Ensure images cover the allocated space without distortion */
      margin-bottom: 1px; /* Default margin bottom for images */
      margin-top: 25px; /* Default margin bottom for images */


    }

    /* Custom Button Styles */
    #therapistSection .custom-button {
    background-color: #890606; /* Background color */
    color: #ffffff; /* Text color */
    border: 2px solid; /* Remove default border */

    border-color: #890606; /* Border color */
    margin-bottom: 20px; /* Adjust the margin-bottom as needed */
    display: block; /* Ensure the button is a block-level element */
    text-align: center; /* Center the button text */
    padding: 5px 10px; /* Padding for the button */

    text-decoration: none; /* Remove underline from links */
    font-size: 20px; /* Font size */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
    margin: 5px; /* Margin between buttons */

  }
  
  #therapistSection .custom-button:hover {
    background-color: #310505; /* Background color on hover */
    color: white; /* Text color on hover */
    border-color: #000000;

  }
  
  #therapistSection .custom-button:focus,
  #therapistSection .custom-button:active {
    outline: none; /* Remove outline on focus and active states */
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5); /* Add shadow on focus */
  }
  
  #therapistSection .btn-group .custom-button {
    flex: 1; /* Ensure buttons in the group have equal width */
  }


/* Button Group Container */
#therapistSection .btn-group-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 300px; /* Set a maximum width for the button group */
    margin: 0 auto; /* Center the button group within its container */
  }
  
  #therapistSection .btn-group .custom-button {
    flex: 1; /* Ensure buttons in the group have equal width */
    text-align: center; /* Center the button text */
    border-radius: 10px !important; /* Ensure border-radius is applied */
  }





  /* Custom Button Styles */
    #therapistSection .custom-button2 {
    background-color: #ffbb00; /* Background color */
    color: #000000; /* Text color */
    border: 2px solid; /* Remove default border */
    border-color: #890606; /* Border color */
    display: block; /* Ensure the button is a block-level element */
    text-align: center; /* Center the button text */
    padding: 5px 10px; /* Padding for the button */
    text-decoration: none; /* Remove underline from links */
    font-size: 20px; /* Font size */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
    margin: 50px; /* Margin between buttons */
    width: 200px; /* Set a fixed width for all buttons */
    height: 50px; /* Set a fixed height for all buttons */
    line-height: 20px; /* Align text vertically within the button */

  }
  
  #therapistSection .custom-button2:hover {
    background-color: #310505; /* Background color on hover */
    color: white; /* Text color on hover */
    border-color: #000000;

  }
  
  #therapistSection .focus,
  #therapistSection .custom-button2:active {
    outline: none; /* Remove outline on focus and active states */
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5); /* Add shadow on focus */
  }
  
  #therapistSection .btn-group .custom-button2 {
    flex: 1; /* Ensure buttons in the group have equal width */
  }


/* Button Group Container */
#therapistSection .btn-group-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 300px; /* Set a maximum width for the button group */
    margin: 0 auto; /* Center the button group within its container */
  }
  
  #therapistSection .btn-group .custom-button2 {
    flex: 1; /* Ensure buttons in the group have equal width */
    text-align: center; /* Center the button text */
    border-radius: 10px !important; /* Ensure border-radius is applied */
  }




/* Adjustments for mobile devices */
@media (max-width: 576px) {
    #therapistSection .btn-group-container {
      display: flex;
      justify-content: center; /* Center horizontally */
      align-items: center; /* Center vertically if necessary */
      flex-direction: column; /* Stack buttons vertically on mobile devices */
      height: 100vh; /* Optional: makes the container take full viewport height to center vertically */
    }
    
    #therapistSection .btn-group {
      display: flex;
      flex-direction: column; /* Stack buttons vertically within the button group */
      align-items: center; /* Center buttons horizontally within the button group */
    }
  
    #therapistSection .btn-group .custom-button2 {
      margin: 10px 0; /* Increase margin between buttons on mobile devices */
    }
  }




/* Treatments Cards */
#treatmentsSection .card {
    background-color: #f8f9fa; /* Card background color */
    border: none; /* Remove border */
    height: 100%; /* Ensure all cards have the same height */
    display: flex; /* Use Flexbox layout */
    flex-direction: column; /* Arrange child elements vertically */
    justify-content: space-between; /* Space out content vertically */
    align-items: center; /* Center content horizontally */
    padding: 20px; /* Add some padding for better spacing */
    text-align: center; /* Center text inside the card */
    margin-top: 15px;
    overflow: hidden; /* Ensure no overflow */

  }
  
  /* Treatments Card Title */
  #treatmentsSection .card-title {
    font-size: 24px; /* Font size for the title */
    color: #333; /* Title text color */
    margin-bottom: 10px; /* Add some space below the title */
  }
  
  /* Treatments Card Text */
  #treatmentsSection .card-text {
    color: #666; /* Text color */
    margin-bottom: 10px; /* Add some space below the text */
  }
  
  /* Treatments Card Price Text */
  #treatmentsSection .card-text-pt {
    color: #010101; /* Text color */
    margin-top: 5px; /* Reduced space above the text */
    margin-bottom: 5px; /* Reduced space below the text */
    font-weight: bold; /* Make the text bold */
  }
  
  /* Old Price */
  #treatmentsSection .old-price {
    font-size: 14px; /* Smaller font size for the old price */
    color: #999; /* Grey color for the old price */
  }
  
  /* Special Price */
  #treatmentsSection .special-price {
    color: red; /* Red color for the special price */
    font-size: 20px; /* Slightly larger font size for the special price */
    animation: blinker 1.5s linear infinite; /* Blinking effect */
  }
  
 /* Blinking Animation */
@keyframes blinker {
  15% {
    opacity: 0;
  }
}
  
  /* Treatments Card Image */
  #treatmentsSection .card-img-top {
    width: 100%; /* Make image take full width of its container */
    height: 320px; /* Set a fixed height for the images */
    object-fit: cover; /* Ensure the image covers the container */
    border-radius: 5px; /* Optional: Add rounded corners to images */
    display: block; /* Ensure the image behaves as a block element */

  }
  
  /* Treatments Card Button (Optional) */
  #treatmentsSection .card .btn {
    margin-top: auto; /* Push the button to the bottom if needed */
  }
  
  /* Treatments Card Body */
  #treatmentsSection .card-body {
    padding: 20px; /* Padding for the card body */
    flex-grow: 1; /* Let the body grow to fill remaining space */
  }
  

/* Media Query for Mobile Devices */
@media (max-width: 576px) {
    #treatmentsSection .card {
      margin-bottom: 15px; /* Increase bottom margin for cards on mobile */
      height: auto; /* Allow cards to expand based on content on mobile */
    }
    #treatmentsSection .card-img-top {
      height: 230px; /* Adjust image height for better display on mobile */
    }
  }




/* Therapists Section */
#therapistsSection {
    padding-top: 50px; /* Top padding */
    padding-bottom: 160px; /* Bottom padding */
}

/* Therapist Card styles */
#therapistsSection .card {
    border: none; /* Remove border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
    margin: 5px auto; /* Add margin and center the card */
    height: 500px;
}

/* Adjust margin between therapist cards */
#therapistsSection .col-md-4 {
    margin-bottom: 2px; /* Adjust the bottom margin between cards */
}

/* Center the content within each slide */
#therapistsSection .swiper-slide img,
#therapistsSection .swiper-slide video {
    max-width: 60%; /* Ensure images and videos don't exceed the card width */
    max-height: auto; /* Ensure images and videos don't exceed the card height */
    height: 250px; /* Allow images and videos to maintain their aspect ratio */
    margin-bottom: 0px;
    object-fit: cover; /* Ensure content fits the container nicely */
}

/* Add margin between pagination bullets */
#therapistsSection .swiper-pagination-bullet {
    margin: 0 5px; /* Add margin between bullets */
}

/* Swiper Navigation Arrows */
#therapistsSection .swiper-button-prev,
#therapistsSection .swiper-button-next {
    color: #910c0c; /* Arrow color */
    background-color: #00000000; /* Background color */
    border-radius: 50%; /* Make it circular */
    padding: 5px; /* Padding */
}

/* Styling for modal */
.modal-content {
    background-color: #ffffff83; /* Set background color */
    border-radius: 10px; /* Add border radius */
    padding: 0px; /* Add padding */
    max-width: 80%; /* Adjust the maximum width of the modal content */
    margin: auto; /* Center the modal content horizontally */
}

.modal-title {
    color: #000; /* Set title color */
    font-size: 24px; /* Set title font size */
    margin-bottom: 20px; /* Add margin below title */
}

.modal-dialog {
    max-width: 50%; /* Adjust the maximum width of the modal dialog */
    margin: 1.75rem auto; /* Center the modal vertically and horizontally */
}

/* Ensuring images and videos are centered and responsive */
.modal-body img,
.modal-body video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center content */
}

/* Ensure images stay inside the card */
.card-body {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding-top: 25px; /* Adjust top padding to make space for the badge */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute space between elements */
    height: 100%; /* Ensure the card body takes full height */
}


.card-body img {
    width: 200px;
    height: auto;
    object-fit: cover;
     object-position: top; /* Align the image at the top */
}


.swiper-container {
    overflow: hidden; /* Ensure only one image is visible at a time */
  margin-top: 0px; /* Top margin */
  margin-bottom: 10px; /* Bottom margin */
}

/* Change the color of the text */
.card-title,
.card-text {
    color: #000; /* Replace "yourDesiredColor" with your preferred color value */
}


/* Change the color of the button */
.btn-primary {
    background-color: #890606; /* Background color */
    color: #ffffff; /* Text color */
    border-color: #890606; /* Border color */
    margin-bottom: 20px; /* Adjust the margin-bottom as needed */
    display: block; /* Ensure the button is a block-level element */
    text-align: center; /* Center the button text */
}

/* Button Hover Styles */
.card-body .btn:hover {
    background-color: #cc0000; /* Background color on hover */
    color: #ffffff; /* Text color on hover */
    border-color: #cc0000; /* Border color on hover */
}


/* Change color and position of pagination bullets */
.swiper-pagination-bullet {
    background-color: #910707 !important; /* Change the background color of pagination bullets */
    width: 10px; /* Adjust the width of the bullets */
    height: 10px; /* Adjust the height of the bullets */
    margin: 0 5px; /* Add margin between bullets */
    border-radius: 50%; /* Make the bullets circular */
}

/* Adjust position of pagination bullets */
.swiper-pagination {
    bottom: 20px; /* Adjust the distance from the bottom */
}

/* Hide modal elements initially */
#modalImage,
#modalVideo {
    display: none;
}

/* Set image styles */
#modalImage {
    max-width: 90%;
    height: auto;
}

/* Set video styles */
#modalVideo {
    max-width: 90%;
    height: auto;
}

.badge {
    background-color: #890606;
    color: white;
    border: none; /* Remove the default border */
    padding: 0.5em 1em; /* Add padding to the button */
    border-radius: 2em; /* Round the corners of the button */
    font-size: 16px; /* Adjust the font size */
    cursor: pointer; /* Change the cursor to a pointer when hovering */
    position: absolute;
    top: 5px; /* Adjust the top position as needed */
    right: 5px; /* Adjust the right position as needed */
    z-index: 1; /* Ensure the button is above other elements */
}

/* Animation for the status button with class animated-status */
.animated-status {
    animation: colorChange 1s infinite;
    background-color: #890606; /* Initial background color */
    color: #ffffff; /* Adjust the text color */
}










@keyframes colorChange {
    0% {
        background-color: #c50a0a;
    }

    100% {
        background-color: #890606;
    }
}





* More Services Section */
#moreServicesSection {
  padding-top: 60px; /* Top padding */
  padding-bottom: 60px; /* Bottom padding */
  color: #ffffff; /* Title color */

}

/* Card Styles */
#moreServicesSection .card {
  border: none; /* Remove card border */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Add subtle shadow */
  overflow: hidden; /* Ensure rounded corners */
  background-color: #ffffff15; /* Card background color */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  flex-direction: column; /* Arrange child elements vertically */
  justify-content: space-between; /* Space out content vertically */
  align-items: center; /* Center content horizontally */
  padding: 20px; /* Add some padding for better spacing */
  text-align: center; /* Center text inside the card */
  
}

#moreServicesSection .card-img-top {
  width: 100%; /* Full width */
  height: auto; /* Maintain aspect ratio */
  max-height: 300px; /* Max height */
  object-fit: contain; /* Ensure image covers card */
}

#moreServicesSection .card-title {
  margin-top: 10px; /* Margin above title */
  font-size: 18px; /* Font size */
  color: #ffffff; /* Title color */
}


.form-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  header {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .logo {
    max-width: 100px;
    height: auto;
  }
  
  h1 {
    margin-top: 10px;
    font-size: 24px;
    color: #333;
  }
  
  .container {
    width: 100%;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  input[type="text"],
  select {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  
  input[type="submit"] {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
  }
  
  .link-button {
    display: block;
    width: auto;
    text-align: center;
    text-decoration: none;
    background-color: #06C755;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
  }
  
  .whatsapp-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    text-align: center;
    text-decoration: none;
    background-color: #25d366; /* WhatsApp green color */
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
  }
  
  .whatsapp-button img {
    width: 24px; /* Adjust the image size as needed */
    height: 24px;
    margin-right: 8px;
  }
  
  .note {
    font-size: 14px;
    color: #c60606;
    margin-top: 5px; /* Adjust margin-top as needed */
    margin-bottom: 10px; /* Adjust margin-bottom as needed */
}

/* styles.css */
.required {
    color: red;
    font-weight: bold;
}


a[href="therapists.html"] {
    /* Your styles here */
    color: #007bff; /* Example link color */
    font-size: 14px;
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Example font weight */
    margin-left: 5px; /* Example margin for spacing */
}

a[href="therapists.html"]:hover {
    /* Your hover styles here */
    text-decoration: underline; /* Underline on hover */
    color: #0056b3; /* Example color on hover */
}
  
 /* Style for FAQ Container */
.faq-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: transparent;
    border: 0px;
    border-radius: 8px;
}

/* Style for FAQ heading */
.faq-container h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
    text-align: center;

}

/* Style for accordion items */
.accordion-item {
    margin-bottom: 15px;
}

/* Style for accordion button */
.accordion-button {
    background-color: #ec0000;
    color: #ffffff;
    padding: 10px 15px;
    border: none;
    text-align: left;
    width: 100%;
    cursor: pointer;
    font-size: 18px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.accordion-button:hover {
    background-color: #ccc;
}

/* Style for accordion content */
.accordion-content {
    display: none;
    padding: 10px;
    background-color: #eff6ff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.accordion-content p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
}

/* Show accordion content when button is active */
.accordion-item.active .accordion-content {
    display: block;
}



/* Footer styles */
#footer {
    display: none; /* Initially hide the footer */
    position: fixed;
    bottom: 0;
    background-color: #550909;
    left: 0;
    width: 100%;
    z-index: 1000; /* Ensure the footer is above other content */
}
  
  footer .social-icons a {
    color: #fff; /* Set icon color */
    font-size: 24px; /* Set icon size */
    margin-right: 15px; /* Add margin between icons */
    text-decoration: none; /* Remove underline */
  }
  
  footer .social-icons a:hover {
    color: #ffc107; /* Change icon color on hover */
  }
  
  /* Specific styles for contact links */
  .contact-link {
    color: #ffffff; /* Ensure the links are white */
    text-decoration: none; /* Remove underline */
  
  }

/* Responsive adjustments */
@media (max-width: 768px) {
    #therapistsSection .card {
        max-width: 100%;
    }
    .swiper-container {
        margin-top: 5px;
    }
}