.choose-us span {
            font-size: 20px;
            font-weight: 500;
        }

        @media (max-width: 480px) {
            .justify-content-center {
                justify-content: center !important;
                line-height: 2;
                margin-top: 0px !important;
            }
            
            .choose-us span {
                font-size: 16px !important;
            }
        }

        .choose-us .fas {
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 25px;
            padding-right: 10px;
            color: #C29D68;
        }

        .new-breadcumb-area {
            position: relative;
            height: 500px; /* Adjust as needed */
            width: 100%;
            overflow: hidden;
        }

        .background-image {
            background-image: url('../assets/images/cards/SPA-Holiday-min.jpg'); /* Adjust the path as needed */
            background-size: cover; /* Cover the entire area */
            background-position: center; /* Center the image */
            background-repeat: no-repeat; /* Prevent the image from repeating */
            height: 100%;
            width: 100%;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Black overlay with 50% opacity */
            z-index: 1; /* Ensure overlay is above the background */
        }

        .breadcum-content {
            position: absolute; /* Change to absolute for centering */
            top: 50%; /* Center vertically */
            left: 50%; /* Center horizontally */
            transform: translate(-50%, -50%); /* Adjust for the element's own size */
            z-index: 2;
        }

        .facilities-area {
            padding: 0px 0 87px;
        }

        /* Cards CSS */
        .tabs {
            display: flex;
        }

        .tabs li {
            float: left;
            width: 15%;
        }

        .tabs a {
            display: block;
            text-align: center;
            text-decoration: none;
            text-transform: uppercase;
            color: #888;
            padding: 20px 0;
            border-bottom: 2px solid #888;
            background: #f7f7f7;
        }

        .tabs a:hover,
        .tabs a.active {
            background: #D5B24E;
            color: #fff;
            font-weight: 900;
        }

        .tabgroup div {
            padding: 30px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }

        .divider {
            border-bottom: 1px solid #000;
            width: 40%;
            display: inline-block;
            margin-top: 10px;
        }

        .h3-heading {
            margin-left: 20px;
            margin-top: 20px;
        }

        /* FAQ's CSS */
        .faq-container {
            background-color: #F2F2F2;
            color: black;
            border-radius: 20px;
            box-shadow: 0 5px 10px 0 rgb(0, 0, 0, 0.25);
            margin: 20px 0;
        }

        .faq-question {
            font-size: 1.2rem;
            font-weight: 600;
            padding: 20px 80px 20px 20px;
            position: relative;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .faq-question::after {
            content: "\002B";
            font-size: 2.2rem;
            position: absolute;
            right: 20px;
            transition: 0.2s;
        }

        .faq-question.active::after {
            transform: rotate(45deg);
        }

        .faq-answer-container {
            max-height: 0;
            overflow: hidden;
            transition: 0.3s;
        }

        .faq-answer {
            padding: 0 20px 20px;
            line-height: 1.5rem;
        }

        .faq-question.active + .faq-answer-container {
            /* Nothing here for now, keeping it for future use */
        }

        @media screen and (max-width: 790px) {
            html {
                font-size: 14px;
            }

            .faq-wrapper {
                width: 100%;
            }
        }
        
        /* Section Styles */
.spa-section {
    position: relative;
    padding: 50px 0;
    background-image: url('assets/images/plan1.jpg'); /* Add your background image path here */
    background-size: cover;  /* Ensure the image covers the full section */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    height: 30vh; /* Make the section take the full viewport height */
}

/* Background Overlay */
.spa-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e3e3e3c7; /* Dark semi-transparent overlay */
    border-radius: 20px;
}

/* Container Styles */
.spa-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* Column Styles */
.spa-column {
    width: 100%;
    padding: 0;
}

@media only screen and (max-width: 768px){
    .spa-section {height: 45vh;}
}



/*FAQ'S DOWN*/

.faq {
  padding: 40px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
}

.faq__title {
  text-transform: uppercase;
  color: #000;
}

details {
  background-color: #D5B24E;
  border-radius: 10px;
  cursor: pointer;
  padding: 20px 30px;
  margin-block: 30px;
}

summary,
p {
  text-align: left;
  color: #000;
}

summary {
  margin-inline-start: 1rem;
  list-style-position: outside;
  color: #000;
}

summary::marker {
  color: #000;
  font-size: 18px;
}















/* Base CSS for general responsiveness */

/* --- Mobile View (up to 480px) --- */
@media (max-width: 480px) {

    /* Breadcrumb Area */
    .new-breadcumb-area {
        height: 250px; /* Adjust height for smaller screens */
    }

    .breadcum-content {
        top: 40%; /* Center the text vertically in mobile */
    }

    .breadcum-title h4 {
        font-size: 22px; /* Reduce font size for mobile */
    }

    /* Tabs - Stack vertically */
    .tabs {
        display: block;
        width: 100%; /* Make the tabs full width */
    }

    .tabs li {
        width: 100%; /* Full width for each tab */
        text-align: center;
    }

    .tabs a {
        display: block;
        padding: 15px 0;
        font-size: 14px; /* Reduce font size */
        text-align: center;
    }

    /* Spa Section */
    .spa-section {
        padding: 40px 0; /* Reduce padding for mobile view */
        height: 25vh; /* Adjust the height */
    }

    .spa-heading h2 {
        font-size: 18px; /* Smaller font size for headings */
    }

    .spa-container {
        margin: 0 15px; /* Add small margins on mobile */
    }

    .faq-container {
        padding: 10px;
        margin: 10px 0;
    }

    /* FAQ Question */
    .faq-question {
        font-size: 1rem;
        padding: 12px 40px;
    }

    .faq-answer {
        font-size: 0.9rem;
    }

    /* Adjust FAQ Arrow */
    .faq-question::after {
        content: "\002B"; /* Keep '+' symbol for mobile */
        font-size: 1.8rem; /* Smaller arrow size */
    }
}

/* --- Tablet View (up to 768px) --- */
@media (max-width: 768px) {

    /* Breadcrumb Area */
    .new-breadcumb-area {
        height: 350px; /* Adjust for tablet height */
    }

    .breadcum-content {
        top: 50%; /* Center the breadcrumb content vertically */
    }

    .breadcum-title h4 {
        font-size: 24px; /* Medium size font for tablet */
    }

    /* Tabs - Stack vertically */
    .tabs {
        display: block;
        width: 100%; /* Make tabs full width on tablet */
    }

    .tabs li {
        width: 100%; /* Each tab takes up the full width */
        text-align: center;
    }

    .tabs a {
        display: block;
        padding: 18px 0;
        font-size: 16px; /* Adjust font size for tablets */
        text-align: center;
    }

    /* Spa Section */
    .spa-section {
        padding: 50px 0;
        height: 35vh; /* Slightly taller height for tablets */
    }

    .spa-heading h2 {
        font-size: 22px; /* Medium size font for headings */
    }

    .spa-container {
        margin: 0 30px; /* Margin adjustment for tablet */
    }

    .faq-container {
        padding: 15px;
        margin: 15px 0;
    }

    /* FAQ Question */
    .faq-question {
        font-size: 1.1rem;
        padding: 16px 60px;
    }

    .faq-answer {
        font-size: 1rem;
    }

    /* FAQ Arrow */
    .faq-question::after {
        content: "\002B"; /* Keep '+' symbol */
        font-size: 2rem; /* Slightly larger arrow */
    }
}

/* --- Desktop View (Default, Above 768px) --- */
@media (min-width: 769px) {

    /* No changes for default desktop styles */
    /* All elements remain as you originally have them in your base CSS */
    .new-breadcumb-area {
        height: 500px; /* Larger height for desktop */
    }

    .breadcum-title h4 {
        font-size: 30px; /* Larger font size */
    }

    .tabs {
        display: flex;
        justify-content: space-around;
    }

    .tabs a {
        font-size: 18px; /* Larger font size for desktop */
        padding: 20px 0;
    }

    .spa-section {
        padding: 50px 0;
        height: 30vh;
    }

    .spa-heading h2 {
        font-size: 24px;
    }

    .spa-container {
        margin: 0 auto; /* Center content for larger screens */
    }

    .faq-container {
        margin: 20px 0;
    }

    .faq-question {
        font-size: 1.2rem;
        padding: 20px 80px;
    }

    .faq-answer {
        font-size: 1rem;
    }

    /* FAQ Arrow */
    .faq-question::after {
        content: "\002B"; /* Keep '+' symbol */
        font-size: 2.2rem;
    }
}


/* Base styles for all screen sizes */
.spa-section {
    padding: 30px 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Center content horizontally */
}

.spa-container {
    display: block;
    width: 100%;
}

.spa-heading {
    text-align: center;
    margin-bottom: 20px;
}

.spa-heading i {
    font-size: 36px; /* Default icon size */
    margin-bottom: 10px;
}

.spa-heading h2 {
    font-size: 28px; /* Default heading size */
    font-weight: bold; /* Bold heading */
    margin-top: 10px;
    line-height: 1.4;
}

.spa-heading .text-start {
    font-size: 16px; /* Default text size */
    margin-top: 10px;
    text-align: center;
}

.spa-heading .text-start br {
    display: block;
    margin-bottom: 5px;
}

.spa-column {
    padding: 15px 0;
}

/* Mobile-specific styles (max-width: 767px) */
@media (max-width: 767px) {

    .spa-section {
        padding: 20px 10px;
        min-height: 250px; /* Ensure section height looks good on mobile */
        height: auto; /* Allow dynamic height based on content */
        display: flex; /* Ensures content within spa-section is flexible */
        flex-direction: column; /* Stack content vertically */
        justify-content: flex-start; /* Align content at the top */
    }

    .spa-heading i {
        font-size: 30px; /* Increase icon size for mobile */
        margin-bottom: 10px;
    }

    .spa-heading h2 {
        font-size: 20px; /* Medium size for the heading on mobile */
        margin-top: 10px;
        line-height: 1.4; /* Better readability */
        text-align: center; /* Center align the heading on mobile */
    }

    .spa-heading .text-start {
        font-size: 14px; /* Smaller text size for mobile */
        margin-top: 10px;
        text-align: center;
        display: inline-block; /* Box around text */
        background-color: #f8f8f8;
        padding: 10px;
        width: 90%; /* Make the description fit well on mobile */
        max-width: 480px; /* Prevent the box from getting too wide */
        border-radius: 8px;
        border: 1px solid #ddd;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional shadow */
        margin-left: auto; /* Center the box horizontally */
        margin-right: auto;
    }

    .spa-column {
        padding: 10px 0;
        width: 100%; /* Ensure the column spans full width on mobile */
        box-sizing: border-box; /* Ensure padding is included in width */
    }

    /* Optional: Adjust images inside spa-column to be responsive */
    .spa-column img {
        max-width: 100%; /* Prevent images from overflowing */
        height: auto;
    }

    /* Optional: Add a more noticeable separation between sections */
    .spa-section:not(:last-child) {
        margin-bottom: 20px; /* Add space between sections */
    }

    /* Additional height control for specific elements */
    .spa-section.specific-height {
        height: 500px; /* Set a fixed height for specific sections (example) */
    }

    /* Add a dynamic height adjustment to spa-heading elements if needed */
    .spa-heading {
        height: auto; /* Allow heading to expand based on content */
    }
}


/* Tablet-specific styles (min-width: 768px and max-width: 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {

    .spa-section {
        padding: 25px 15px;
        min-height: 300px; /* Adjust height for tablet */
    }

    .spa-heading i {
        font-size: 32px; /* Medium icon size for tablet */
    }

    .spa-heading h2 {
        font-size: 24px; /* Medium size for heading on tablet */
    }

    .spa-heading .text-start {
        font-size: 15px; /* Slightly larger text on tablet */
        text-align: center;
        width: 85%; /* Make description box slightly wider on tablet */
    }

    .spa-column {
        padding: 12px 0;
    }
}

/* Desktop-specific styles (min-width: 1025px) */
@media (min-width: 1025px) {

    .spa-section {
        padding: 30px 20px;
        min-height: 350px; /* Adjust height for larger screens */
        justify-content: center;
    }

    .spa-heading i {
        font-size: 36px; /* Default icon size for desktop */
    }

    .spa-heading h2 {
        font-size: 28px; /* Default heading size for desktop */
    }

    .spa-heading .text-start {
        font-size: 16px; /* Default text size for desktop */
        width: 60%; /* Box width for description on desktop */
    }

    .spa-column {
        padding: 20px 0;
    }
}