/* Reset Styles */
/* Reset margin and padding for all elements and set box-sizing to border-box */
* {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* General Body Styles */
/* Set the default font and background animation for the body */
body {
    font-family: "Comfortaa", sans-serif; /* Set the default font */
    background: white; /* Set the background color */
    background-size: 400% 400%; /* Set the background size for animation */
    animation: gradientAnimation 10s ease infinite; /* Apply gradient animation */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack elements vertically */
}

/* Keyframes for Background Animation */
/* Define the animation for the background gradient */
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%; /* Start the background position */
    }
    50% {
        background-position: 100% 50%; /* Move the background position */
    }
    100% {
        background-position: 0% 50%; /* Return the background position */
    }
}

/* Header Styles */
/* Style for the header section */
header {
    background-color: rgba(163, 199, 163, 0.7); /* Set the header background color */
    color: #fff; /* Set the text color */
    top: 0; /* Position the header at the top */
    z-index: 1000; /* Ensure the header stays on top of other elements */
}

/* Navbar Styles */
/* Default Navbar Styles */
.navbar {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Space out navbar items */
    align-items: center; /* Center items vertically */
    padding: 20px 30px; /* Add padding inside the navbar */
    background-color: rgba(163, 199, 163, 0.7); /* Set the navbar background color */
    color: #fff; /* Set the text color */
    box-shadow: 0 0px 10px black; /* Add shadow for depth */
    border: 3px solid #3C3316; /* Add a border */
    border-radius: 10px; /* Add rounded corners */
}

/* Navbar Links */
/* Style for navigation bar links */
.nav-links {
    display: flex; /* Display links in a row */
    list-style-type: none; /* Remove bullet points */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    gap: 20px; /* Add spacing between links */
}

/* Style for each link */
/* Define the appearance of individual navbar links */
.nav-links a {
    display: inline-block; /* Ensure the underline is only under the text */
    color: #fff; /* Set the text color */
    text-decoration: none; /* Remove underline */
    font-size: 25px; /* Set the font size */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* Add text shadow */
    margin-right: 50px; /* Add spacing to the right */
    padding: 5px 0; /* Add padding for better spacing */
}

/* Active Navbar Link */
/* Style for the active link in the navbar */
.nav-links a.active {
    border-bottom: 2px solid #3C3316; /* Add an underline to the active link */
    padding-bottom: 4px; /* Add spacing between the text and the underline */
}

/* Responsive Navbar */
/* Style for the menu button (hidden by default) */
.menu-toggle {
    display: none; /* Hide the menu button by default */
    background-color: #867975; /* Set the button background color */
    color: #fff; /* Set the text color */
    padding: 10px 15px; /* Add padding inside the button */
    border: none; /* Remove default border */
    border-radius: 5px; /* Add rounded corners */
    cursor: pointer; /* Change cursor to pointer */
    font-size: 1.2rem; /* Set the font size */
}

/* Hover Effect for Menu Button */
/* Define the hover effect for the menu button */
.menu-toggle:hover {
    background-color: #583d36; /* Darken the button on hover */
}

/* Responsive Navbar for Smaller Screens */
/* Define styles for the navbar on smaller screens */
@media (max-width: 1180px) {
    .menu-toggle {
        display: block; /* Show the menu button */
    }

    .nav-links {
        display: flex; /* Ensure the dropdown is hidden initially */
        flex-direction: column; /* Stack links vertically */
        gap: 10px; /* Add spacing between links */
        position: absolute; /* Position the dropdown */
        top: 81px; /* Position below the navbar */
        right: 19px; /* Align to the right */
        background-color: rgba(163, 199, 163, 0.9); /* Set the dropdown background color */
        padding: 10px; /* Add padding inside the dropdown */
        border-radius: 10px; /* Add rounded corners */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
        border: 2px solid #3C3316; /* Add a border */
        opacity: 0; /* Start fully hidden */
        transform: translateY(-20px); /* Start slightly above the button */
        transition: opacity 0.3s ease, transform 0.3s ease; /* Add smooth animation */
        pointer-events: none; /* Prevent interaction when hidden */
    }

    .nav-links.active {
        opacity: 1; /* Make the dropdown visible */
        transform: translateY(0); /* Slide into position */
        pointer-events: auto; /* Allow interaction */
    }

    .nav-links a {
        display: block; /* Display links as blocks */
        padding: 5px 10px; /* Add padding inside links */
        font-size: 18px; /* Adjust font size */
        width: 100%; /* Make links full width */
        text-align: center; /* Center the text */
        margin-right: 0; /* Remove extra margin */
    }
}

/* Logo Styles */
/* Style for the logo image */
.logo img {
    height: 70px; /* Set the height of the logo */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Ensure the image is displayed as a block element */
    border: 2px solid #3C3316; /* Add a border */
    border-radius: 50%; /* Make the border circular */
}

/* Style for the hero section */
.hero {
    background: url('img/updated banner.jpeg') no-repeat center center/cover; /* Set background image with cover */
    height: 60vh; /* Set height */
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    color: #fff; /* White text color */
    text-align: center; /* Center text */
    box-shadow: 0 0px 45px black; /* Add shadow for depth */
}

/* Style for the hero section heading */
.hero h1 {
    font-size: 70px; /* Set font size */
    margin-bottom: 10px; /* Add bottom margin */
    color: white; /* White text color */
    
    
    border-radius: 15px; /* Rounded corners */
    padding: 5px; /* Add padding */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* Add text shadow for depth */
}

/* Style for the text box section */
.text-box {
    padding: 20px;
    text-align: center;
    background-color: #d7e7d2;
    color: black;
    margin: 20px 0;
    box-shadow: 0 0px 10px black;
    border: 3px solid #3C3316;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:1.1rem;
    line-height: 1.6;
    position: relative;
    margin-left: 30px;
    margin-right: 30px;

    
}

/* Style for the three boxes section */
.three-boxes {
    padding: 60px 40px;
    background-color: white;
    margin-top: 10px; /* 10px gap above the Three Boxes section */
    margin-bottom: 10px; /* 10px gap below the Three Boxes section */
    padding-top: 0; /* Ensure no extra padding is added */
}

.three-boxes .container {
    display: flex; /* Use Flexbox for layout */
    justify-content: space-between; /* Space out the boxes evenly */
    align-items: stretch; /* Make all boxes the same height */
    gap: 20px; /* Add space between the boxes */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.three-boxes .box {
    flex: 1; /* Make all boxes take up equal space */
    min-width: 300px; /* Set a minimum width for smaller screens */
    background-color: #d7e7d2; /* Background color */
    box-shadow: 0 0px 10px #3C3316; /* Add shadow */
    border: 3px solid #3C3316; /* Add border */
    border-radius: 15px; /* Rounded corners */
    padding: 20px; /* Add padding inside the boxes */
    text-align: center; /* Center the text */
    box-sizing: border-box; /* Include padding and border in the box size */
}

.three-boxes .box h2 {
    font-size: 2rem;
    color: #3C3316;
    margin-bottom: 10px;
}

.three-boxes .box p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
}

/* Add this rule to remove the default padding and margin from the ul element */
.three-boxes .box ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}
/* Style for the testimonials section */
.testimonials {
    padding: 60px 40px;
    background-color: white;
    margin-top: -38px;

}

.testimonials-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: -10px; /* Add spacing between the button containers and the testimonials */
    position: relative;
}



.testimonial-prev-container{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; /* Set a fixed width for the button containers */
    height: 100%; /* Match the height of the testimonials container */
}


.testimonial-next-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; /* Set a fixed width for the button containers */
    height: 100%; /* Match the height of the testimonials container */
    
    
}

/* Adjust the position of the arrows */
.testimonial-prev {
    position: relative;
    left: 5px; /* Bring the arrow closer to the container */
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    padding: 10px;
    transition: background-color 0.3s ease;
    z-index: 10;
}
 
.testimonial-next {
    position: relative;
    right: 5px; /* Bring the arrow closer to the container */
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    padding: 10px;
    transition: background-color 0.3s ease;
    z-index: 10;
}

.testimonial-prev:hover,
.testimonial-next:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Darken the background on hover */
}

.testimonials-container {
    flex: 1; /* Allow the testimonials container to take up the remaining space */
    overflow: hidden; /* Hide overflowing testimonials */
    position: relative;
    max-width: 1200px;
    background-color: #d7e7d2;
    box-shadow: 0 0px 10px #3C3316;
    border: 3px solid #3C3316;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
    margin-bottom:20px;
}

.testimonial-slider {
    display: flex;
    transition: transform 0.5s ease; /* Smooth scrolling effect */
    gap: 1px; /* Add spacing between testimonials */

}

.testimonial-item {
    flex: 0 0 calc(33.333% - 20px); /* Each testimonial takes up 1/3 of the container width */
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
    border: 3px solid #3C3316; /* Add border */
}


.testimonial-prev:hover,
.testimonial-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
.testimonials-container h2 {
    text-align: center; /* Center the text horizontally */
    font-size: 2rem; /* Adjust the font size if needed */
    color: #3C3316; /* Match the text color */
    margin-bottom: 20px; /* Add spacing below the heading */
    margin-top: 0; /* Optional: Adjust the top margin */
}

.Testimonials-box {
    background-color: #d7e7d2;
    color: black;
    box-shadow: 0 0px 10px #3C3316;
    border: 3px solid #3C3316;
    border-radius: 15px;
    padding: 50px;
    margin: 20px;
    flex: 1 1 calc(33.333% - 40px);
    box-sizing: border-box;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}



.Testimonials-box h2 {
    font-size: 24px;
    margin-bottom: 20px; /* Increase space below the heading */
}

.Testimonials-box .stars {
    margin-bottom: 20px; /* Increase space below the stars */
}

.Testimonials-box p {
    font-size: 16px;
    margin-top: 20px; /* Increase space above the paragraph */
}


/* Style for the stars */
.stars {
    font-size: 1.5rem; /* Adjust the size of the stars */
    color: #FFD700; /* Gold color for the stars */
    margin-bottom: 1rem; /* Space between stars and the testimonial text */
}





/* Treatment List Styling */
.treatment-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 2rem auto;
    padding: 20px;
    gap: 4rem;
}




.subheadingservice {
    font-size: 1.4rem;
    color: black;
    font-weight: normal;
}


/* General About Content Styles */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
    grid-template-rows: auto auto; /* Two rows to accommodate item 2 */
    gap: 20px; /* Add spacing between items */
    padding: 20px;
    align-items: start; /* Align items to the top */

}
 
/* General About Item Styles */
.about-item {
    background-color: #d7e7d2;
    border: 3px solid #3C3316;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 
.about-item h2 {
    margin-top: 20px; /* Space below the heading */
    margin-bottom: 20px; /* Space below the heading */
}
 
.about-item text {
    margin-top: 20px; /* Space below the heading */
    margin-bottom: 20px; /* Space below the heading */
}
 

 
/* Unique Placement for Each Box */
.about-item-0 {
    grid-column: 1; /* Place in the first column */
    grid-row: 1 / span 2; /* Span two rows to match the height of item 2 */
    min-height: 910px; /* Set a minimum height for the first item */
}

.about-item-0 img {
    max-width: 40%;
}
.about-item-2 img {
    max-width: 60%;

}
 

 
.about-item-1 {
    grid-column: 3; /* Place in the second column */
    grid-row: 1 / span 2; /* Place in the first row */
    min-height: 910px; /* Set a minimum height for the first item */
}
 
.about-item-2 {
    grid-column: 2; /* Place in the second column */
    grid-row: 1 / span 2; /* Place in the second row */
    min-height: 910px; /* Set a minimum height for the first item */
}
 
.about-item-1 img {
    max-width: 50%;
}
 
 
.about-item-3 {
    grid-column: 2; /* Place in the same column as item 2 */
    grid-row: 3; /* Place directly under item 2 */
    max-width: 100%;
}
 
 
.about-item video{
    max-width: 90%; /* Set a maximum width for the second item */
    margin-top: 40px;
}
 
 
/* Image Styling */
.about-item img {
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Add rounded corners */
    margin-bottom: 15px; /* Add spacing below the image */
}
 


/* Style for the login section */
.login-section {
    background: url('img/updated banner.jpeg') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
    width: 99.2vw; /* Full viewport width */
    padding: 20px;
}

/* Style for the login form */
.login-container {
    border: 3px solid #3C3316;
    box-shadow: 0 0px 10px #3C3316;
    border-radius: 15px;
    padding: 40px;
    text-align: center;
    width: 400px; /* Adjust width as needed */
    overflow:hidden;   
    background-color: #d7e7d2;
    font-family: 'Comfortaa', sans-serif; /* Apply the same font as the rest of the website */
}

.login-container h2 {
    font-size: 2rem;
    color: #3C3316;
    margin-bottom: 20px;
    
}

.login-container label {
    display: block;
    font-size: 1.2rem;
    color: #3C3316;
    margin-bottom: 10px;
    text-align: left;
}

.login-container input,
.login-container select {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 2px solid #3C3316;
    border-radius: 5px;
    box-sizing: border-box;
}

/* Style for the login form inputs */
.login-container input {
    font-family: 'Comfortaa', sans-serif; /* Match the font used on the website */
    font-size: 1rem; /* Adjust font size */
    color: #333; /* Text color */
    padding: 10px; /* Add padding for better usability */
    border: 2px solid #3C3316; /* Match the border style */
    border-radius: 5px; /* Rounded corners */
    background-color: #f8f9fa; /* Match the redirect menu background color */
    width: 100%; /* Full width */
    box-sizing: border-box; /* Include padding and border in the element's total width */
}

/* Style for the redirect dropdown */
.login-container select {
    font-family: 'Comfortaa', sans-serif; /* Match the font */
    font-size: 1rem; /* Adjust font size */
    padding: 10px; /* Add padding */
    border: 2px solid #3C3316; /* Match the border style */
    border-radius: 5px; /* Rounded corners */
    background-color: #f8f9fa; /* Light background color */
    color: #333; /* Text color */
    width: 100%; /* Full width */
    box-sizing: border-box; /* Include padding and border in width */
}

/* Style for the login button */
.login-container button {
    background-color: #867975;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2rem;
    font-family: 'Comfortaa', sans-serif; /* Match the font */
}

.login-container button:hover {
    background-color: #583d36;
}

/* Style for the footer */
.footer {
    background-color: #3C3316; /* Dark background color */
    color: #fff; /* White text color */
    text-align: center; /* Center the text */
    padding: 20px; /* Padding for the footer */
    width: 100%; /* Full width */
    font-size: 1rem; /* Font size */
    position: relative; /* Fixed positioning */
    bottom: 0; /* Align to the bottom */
    left: 0; /* Align to the left */
    margin-top: 0; /* Remove margin at the top */
    z-index: 1000; /* Ensure it stays on top of other elements */
}

.footer a {
    text-decoration: none; /* Removes the underline */
    color: inherit; /* Ensures the link inherits the text color */
}

/* Deals Section Styles */
.deals {
    background-color: #ffffff;
    padding: 20px 0;
}

.deals .container {
    background-color: #d7e7d2;
    box-shadow: 0 0px 10px #3C3316;
    border: 3px solid #3C3316;
    border-radius: 15px;
    padding: 20px; /* Match padding with other boxes */
    text-align: center; /* Center text */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    height: auto; /* Allow height to adjust dynamically */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack content vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    margin-left: 30px;
    margin-right: 30px;
}

.deals h2 {
    text-align: center;
margin-bottom: 20px;
    margin-bottom: 20px;
}

.deals ul {
    list-style-type: none;
    padding: 0;
}

.deals ul li {
    background-color: #CBD5C0;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}

/* Style for forms */
.admin-form {
    margin: 20px auto;
    padding: 20px;
    width: 80%;
    border: 3px solid #3C3316; /* Match the border color with the rest of the admin pages */
    border-radius: 15px;
    background-color: #f8f9fa;
    font-family: 'Comfortaa', sans-serif;
}



.admin-form h2 {
    text-align: center;
    margin-bottom: 20px;
}

.admin-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.admin-form input[type="text"],
admin-form textarea,
admin-form input[type="file"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Comfortaa', sans-serif;
    background-color: #f8f9fa;
    color: #333;
}

.admin-form button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-family: 'Comfortaa', sans-serif;
}

.admin-form button:hover {
    background-color: #45a049;
}

/* Style for the Existing About Sections container */
.admin-treatment {
    margin: 20px auto;
    padding: 20px;
    width: 80%;
    border: 3px solid #3C3316;
    border-radius: 15px;
    background-color: #f8f9fa;
    font-family: 'Comfortaa', sans-serif;
}

.admin-treatment-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

/* Admin Treatment Item */
.admin-treatment-item {
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: flex-start; /* Align content to the top */
    gap: 10px; /* Add spacing between elements */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: 'Comfortaa', sans-serif;
    height: auto; /* Allow height to adjust dynamically */
}

.admin-treatment-item form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-treatment-item label {
    font-weight: bold;
}

.admin-treatment-item input,
.admin-treatment-item textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.admin-treatment-item button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    display: block;
    margin: 0 auto;
}

.admin-treatment-item button:hover {
    background-color: #45a049;
}

/* Remove unnecessary space below the buttons */
.admin-treatment-item form button {
    margin-bottom: 0; /* Remove extra margin below the buttons */
}

form[name="add-treatment"] {
    margin: 0 auto;
    padding: 20px;
    border: 3px solid #3C3316;
    width: 50%;
    text-align: left;
    border-radius: 15px;
    font-family: 'Comfortaa', sans-serif;
    background-color: #f8f9fa;
}


form[name="add-treatment"] h2 {
    text-align: center;
}

form[name="add-treatment"] label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

form[name="add-treatment"] input, form[name="add-treatment"] textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

form[name="add-treatment"] button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    display: block;
    margin: 0 auto;
}

form[name="add-treatment"] button:hover {
    background-color: #45a049;
}

form[name="add-treatment"] h2 {
    text-align: center;
}

.h1AdTreat {
    text-align: center;
    padding-top: 15px;
    font-size: 2rem;
    font-family: 'Comfortaa', sans-serif;
}

.pAdTreat {
    text-align: center;
    padding-bottom: 15px;
    font-family: 'Comfortaa', sans-serif;
    font-size: 2rem;
}

.adExist{
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 2rem;
    font-family: 'Comfortaa', sans-serif;
}

/* Style for the admin-treatment-container */
.admin-treatment-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

/* Style for each treatment item */
.admin-treatment-item {
    flex: 1 1 calc(50% - 20px);
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: 'Comfortaa', sans-serif;
}

.admin-treatment-item form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-treatment-item label {
    font-weight: bold;
}

.admin-treatment-item input, .admin-treatment-item textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.admin-treatment-item button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    display: block;
    margin: 0 auto;
}

.admin-treatment-item button:hover {
    background-color: #45a049;
}


form[name="add-deal"] h2 {
    text-align: center;
}

form[name="add-deal"] label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

form[name="add-deal"] input, form[name="add-deal"] textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

form[name="add-deal"] button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    display: block;
    margin: 0 auto;
}

form[name="add-deal"] button:hover {
    background-color: #45a049;
}

/* Style for the Admin Testimonials container */
.admin-existing-testimonials {
    margin: 20px auto;
    padding: 20px;
    width: 80%;
    border: 3px solid #3C3316; /* Match the border color with the deals section */
    border-radius: 15px; /* Rounded corners */
    background-color: #ffffff; /* Match the background color with the deals section */
    font-family: 'Comfortaa', sans-serif; /* Consistent font */
    box-shadow: 0 0px 10px #3C3316; /* Add shadow for depth */
}
 
/* Style for each testimonial item */
.admin-existing-testimonials form {
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff; /* White background for each testimonial */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Add spacing between elements */
}
 
/* Style for labels */
.admin-existing-testimonials label {
    font-weight: bold;
    margin-bottom: 5px;
}
 
/* Style for input fields and textareas */
.admin-existing-testimonials input[type="text"],
.admin-existing-testimonials textarea,
.admin-existing-testimonials input[type="number"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Comfortaa', sans-serif;
    background-color: #ffffff;
    color: #333;
}
 
/* Style for buttons */
.admin-existing-testimonials button {
    background-color: #4CAF50; /* Green button */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-family: 'Comfortaa', sans-serif;
    width: 100%; /* Full-width buttons */
    display: block;
    margin: 0 auto; /* Center the button */
}
 
/* Hover effect for buttons */
.admin-existing-testimonials button:hover {
    background-color: #45a049; /* Darker green on hover */
}
 
/* Style for the Add Testimonial form */
.admin-testimonial-form {
    margin: 20px auto;
    padding: 20px;
    width: 50%;
    border: 3px solid #3C3316;
    border-radius: 15px;
    background-color: #ffffff;
    font-family: 'Comfortaa', sans-serif;
}
 
/* Style for the Add Testimonial form heading */
.admin-testimonial-form h2 {
    text-align: center;
    margin-bottom: 20px;
}
 
/* Style for labels in the Add Testimonial form */
.admin-testimonial-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
 
/* Style for input fields and textareas in the Add Testimonial form */
.admin-testimonial-form input[type="text"],
.admin-testimonial-form textarea,
.admin-testimonial-form input[type="number"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Comfortaa', sans-serif;
    background-color: #f8f9fa;
    color: #333;
}
 
/* Style for the Add Testimonial form button */
.admin-testimonial-form button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #4CAF50; /* Green button */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-family: 'Comfortaa', sans-serif;
}
 
/* Hover effect for the Add Testimonial form button */
.admin-testimonial-form button:hover {
    background-color: #45a049; /* Darker green on hover */
}

/* Style for the inline forms */
form[name="delete-opening-time"], form[name="edit-opening-time"],
form[name="delete-contact-info"], form[name="edit-contact-info"],
form[name="delete-deal"], form[name="edit-deal"] {
    display: inline-block;
    margin: 0 5px;
}

form[name="edit-opening-time"] input, form[name="edit-contact-info"] input,
form[name="edit-deal"] input, form[name="edit-deal"] textarea {
    margin-bottom: 5px;
}

form[name="edit-opening-time"] button, form[name="edit-contact-info"] button,
form[name="edit-deal"] button {
    background-color: #4CAF50;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

form[name="edit-opening-time"] button:hover, form[name="edit-contact-info"] button:hover,
form[name="edit-deal"] button:hover {
    background-color: #45a049;
}

/* Style for the admin-form and add-deal form */
form[name="admin-form"], form[name="add-deal"] {
    margin: 0 auto;
    padding: 20px;
    border: 3px solid #3C3316;
    width: 50%;
    text-align: left;
    border-radius: 15px;
    font-family: 'Comfortaa', sans-serif;
    background-color: #f8f9fa;
}

form[name="admin-form"] h2, form[name="add-deal"] h2 {
    text-align: center;
}

form[name="admin-form"] label, form[name="add-deal"] label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

form[name="admin-form"] input, form[name="admin-form"] textarea,
form[name="add-deal"] input, form[name="add-deal"] textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

form[name="admin-form"] button, form[name="add-deal"] button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    display: block;
    margin: 0 auto;
}

form[name="admin-form"] button:hover, form[name="add-deal"] button:hover {
    background-color: #45a049;
}

/* Style for the inline forms */
form[name="delete-opening-time"], form[name="edit-opening-time"],
form[name="delete-contact-info"], form[name="edit-contact-info"],
form[name="delete-deal"], form[name="edit-deal"] {
    display: inline-block;
    margin: 0 5px;
}

form[name="edit-opening-time"] input, form[name="edit-contact-info"] input,
form[name="edit-deal"] input, form[name="edit-deal"] textarea {
    margin-bottom: 5px;
}

form[name="edit-opening-time"] button, form[name="edit-contact-info"] button,
form[name="edit-deal"] button {
    background-color: #4CAF50;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

form[name="edit-opening-time"] button:hover, form[name="edit-contact-info"] button:hover,
form[name="edit-deal"] button:hover {
    background-color: #45a049;
}

.centre{
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}


/* Style for the Add New About Section form */
.admin-form {
    margin: 20px auto;
    padding: 20px;
    width: 80%;
    border: 3px solid #3C3316; /* Match the border color with the rest of the admin pages */
    border-radius: 15px;
    background-color: #f8f9fa;
    font-family: 'Comfortaa', sans-serif;
}

.admin-form h2 {
    text-align: center;
    margin-bottom: 20px;
}

.admin-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.admin-form input[type="text"],
admin-form textarea,
admin-form input[type="file"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    
    border-radius: 5px;
    font-family: 'Comfortaa', sans-serif;
    background-color: #f8f9fa;
    
}

.admin-form button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-family: 'Comfortaa', sans-serif;
}

.admin-form button:hover {
    background-color: #45a049;
}

/* Style for the Existing About Sections container */
.admin-about {
    margin: 20px auto;
    padding: 20px;
    width: 80%;
    border: 3px solid #3C3316;
    border-radius: 15px;
    background-color: #f8f9fa;
    font-family: 'Comfortaa', sans-serif;
}

.admin-about-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}
/* Style for the Add New About Section form */

.admin-form {
    margin: 20px auto;
    padding: 20px;
    width: 80%;
    border: 3px solid #3C3316; /* Match the border color with the rest of the admin pages */
    border-radius: 15px;
    background-color: #f8f9fa;
    font-family: 'Comfortaa', sans-serif;
}

.admin-form h2 {
    text-align: center;
    margin-bottom: 20px;
}

.admin-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.admin-form input[type="text"],
admin-form textarea,
admin-form input[type="file"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Comfortaa', sans-serif;
    background-color: #f8f9fa;
    color: #333;
}

.admin-form button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-family: 'Comfortaa', sans-serif;
}

.admin-form button:hover {
    background-color: #45a049;
}




/* Style for the Existing About Sections container */
.admin-about {
    margin: 20px auto;
    padding: 20px;
    width: 80%;
    border: 3px solid #3C3316;
    border-radius: 15px;
    background-color: #f8f9fa;
    font-family: 'Comfortaa', sans-serif;
}

.admin-about-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}


/* Style for the admin-existing-opening-times container */
.admin-existing-opening-times {
    margin: 20px auto;
    padding: 20px;
    width: 80%;
    border: 3px solid #3C3316; /* Same border color as the form */
    border-radius: 15px; /* Same border radius as the form */
    background-color: #f8f9fa; /* Same background color as the form */
    font-family: 'Comfortaa', sans-serif; /* Ensure this matches the rest of your website */
}

/* Style for the admin-existing-opening-times container */
.admin-existing-opening-times-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

/* Style for each opening time item */
.admin-existing-opening-times-item {
    flex: 1 1 calc(50% - 20px); /* Take up half the width of the container, minus gap */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: 'Comfortaa', sans-serif; /* Ensure this matches the rest of your website */
}

.admin-existing-opening-times-item form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-existing-opening-times-item label {
    font-weight: bold;
}

.admin-existing-opening-times-item input, .admin-existing-opening-times-item textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.admin-existing-opening-times-item button {
    background-color: #4CAF50; /* Adjust the color to match the rest of the website */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%; /* Make the button wider */
    display: block;
    margin: 0 auto; /* Center the button */
}

.admin-existing-opening-times-item button:hover {
    background-color: #45a049;
}

/* Style for the admin-existing-contact-info container */
.admin-existing-contact-info {
    margin: 20px auto;
    padding: 20px;
    width: 80%;
    border: 3px solid #3C3316; /* Same border color as the form */
    border-radius: 15px; /* Same border radius as the form */
    background-color: #f8f9fa; /* Same background color as the form */
    font-family: 'Comfortaa', sans-serif; /* Ensure this matches the rest of your website */
}

/* Style for the admin-existing-contact-info container */
.admin-existing-contact-info-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

/* Style for each contact info item */
.admin-existing-contact-info-item {
    flex: 1 1 calc(50% - 20px); /* Take up half the width of the container, minus gap */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: 'Comfortaa', sans-serif; /* Ensure this matches the rest of your website */
}

.admin-existing-contact-info-item form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-existing-contact-info-item label {
    font-weight: bold;
}

.admin-existing-contact-info-item input, .admin-existing-contact-info-item textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.admin-existing-contact-info-item button {
    background-color: #4CAF50; /* Adjust the color to match the rest of the website */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%; /* Make the button wider */
    display: block;
    margin: 0 auto; /* Center the button */
}

.admin-existing-contact-info-item button:hover {
    background-color: #45a049;
}

/* Style for the admin-existing-deals container */
.admin-existing-deals {
    margin: 20px auto;
    padding: 20px;
    width: 80%;
    border: 3px solid #3C3316; /* Same border color as the form */
    border-radius: 15px; /* Same border radius as the form */
    background-color: #f8f9fa; /* Same background color as the form */
    font-family: 'Comfortaa', sans-serif; /* Ensure this matches the rest of your website */
}

/* Style for the admin-existing-deals container */
.admin-existing-deals-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

/* Style for each deal item */
.admin-existing-deals-item {
    flex: 1 1 calc(50% - 20px); /* Take up half the width of the container, minus gap */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: 'Comfortaa', sans-serif; /* Ensure this matches the rest of your website */
}

.admin-existing-deals-item form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-existing-deals-item label {
    font-weight: bold;
}

.admin-existing-deals-item input, .admin-existing-deals-item textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.admin-existing-deals-item button {
    background-color: #4CAF50; /* Adjust the color to match the rest of the website */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%; /* Make the button wider */
    display: block;
    margin: 0 auto; /* Center the button */
}

.admin-existing-deals-item button:hover {
    background-color: #45a049;
}

/* Center the success and error messages */
.message {
    text-align: center;
    margin: 20px auto;
    padding: 10px;
    width: 50%;
    border-radius: 5px;
    font-family: 'Comfortaa', sans-serif; /* Ensure this matches the rest of your website */
}

.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Treatments Section */
.treatments {
    padding: 50px 0;
    background-color: #fff;
}

.treatments-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.treatment-item {
    width: 30%;
    margin-bottom: 30px;
    background-color: #d7e7d2;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 15px; /* Curve the edges */
    border: 3px solid #3C3316;
    text-align: center; /* Center the text */
}

.treatment-item img {
    display: block;
    margin: 0 auto;
    border-radius: 15px; /* Curve the edges */
    margin-top: 15px;
    aspect-ratio: 2/1.5;
    max-width:400px;
}

.treatment-item h3 {
    font-size: 1.5em;
    margin: 15px;
}

.treatment-item p {
    margin: 15px;
}

.treatment-item .service-button {
    display: block;
    text-align: center;
    padding: 10px;
    margin: 15px;
    background-color: #867975;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    margin: 0 auto;
    width: 80%;
    margin-bottom: 10px;
}

.treatments h2{
    text-align: center;
    font-size: 2rem; /* Adjust the font size */
    color: #3C3316; /* Match the text color */
    margin-bottom: 20px; /* Add spacing below the heading */
}
.service-button {
    font-family: 'Comfortaa', sans-serif; /* Match the font used on the rest of the website */
    font-size: 1rem; /* Adjust the font size to match */
    background-color: #867975; /* Keep the existing background color */
    color: #fff; /* White text color */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Rounded corners */
    text-align: center; /* Center the text */
    padding: 10px; /* Add padding */
    display: block; /* Ensure the button behaves like a block element */
    margin: 0 auto; /* Center the button */
    width: 80%; /* Set the button width */
    transition: background-color 0.3s; /* Smooth hover effect */
}

.service-button:hover {
    background-color: #583d36; /* Darken the button on hover */
}
/* Style for the enquiry box */
.enquiry-box {
    padding: 40px 20px; /* Add padding for spacing */
    border-radius: 15px; /* Rounded corners */
    text-align: center; /* Center the content */
}
 
/* Style for the enquiry box heading */
.enquiry-box h2 {
    font-size: 2rem; /* Match the font size of other headings */
    color: #3C3316; /* Match the text color */
    margin-bottom: 10px; /* Add spacing below the heading */
}
 
/* Style for the enquiry box paragraph */
.enquiry-box p {
    font-size: 1.2rem; /* Match the font size of other text */
    line-height: 1.6; /* Improve readability */
    color: #333; /* Match the text color */
    margin-bottom: 20px; /* Add spacing below the paragraph */
}
 
/* Style for the enquire button */
.enquire-button {
    background-color: #867975; /* Match the button color */
    color: white; /* White text color */
    padding: 10px 20px; /* Add padding for the button */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    font-size: 2rem; /* Match the font size */
    cursor: pointer; /* Add pointer cursor */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
    transition: background-color 0.3s ease; /* Add hover transition */
    margin-bottom: -200px;
}
 
.enquire-button:hover {
    background-color: #583d36; /* Darken the button on hover */
}
 
/* Style for the enquiry form section */
.enquiry-form {
    padding: 40px 20px; /* Add padding for spacing */
    background-color: #d7e7d2; /* Match the background color of other sections */
    box-shadow: 0 0px 10px #3C3316; /* Add consistent shadow */
    border: 3px solid #3C3316; /* Match the border style */
    border-radius: 15px;
    text-align: center; /* Center the content */
    margin: 20px auto; /* Center the form horizontally */
    max-width: 800px; /* Set a maximum width for the form */
    margin-bottom: 100px;
}
 
/* Style for the enquiry form heading */
.enquiry-form h2 {
    font-size: 2rem; /* Match the font size of other headings */
    color: #3C3316; /* Match the text color */
    margin-bottom: 20px; /* Add spacing below the heading */
}
 
/* Style for the enquiry form labels */
.enquiry-form label {
    display: block; /* Ensure labels are on their own line */
    font-size: 1.2rem; /* Match the font size of other text */
    color: #3C3316; /* Match the text color */
    margin-bottom: 10px; /* Add spacing below the label */
    text-align: left; /* Align labels to the left */
}
 
/* Style for the enquiry form inputs and textarea */
.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea {
    width: 100%; /* Full width */
    padding: 10px; /* Add padding for better usability */
    margin-bottom: 20px; /* Add spacing between fields */
    border: 2px solid #3C3316; /* Match the border style */
    border-radius: 5px; /* Rounded corners */
    font-size: 1rem; /* Match the font size */
    box-sizing: border-box; /* Include padding and border in the element's total width */
}
 
/* Style for the enquiry form button */
.enquiry-form button {
    background-color: #867975; /* Match the button color */
    color: white; /* White text color */
    padding: 10px 20px; /* Add padding for the button */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    font-size: 1.2rem; /* Match the font size */
    cursor: pointer; /* Add pointer cursor */
    
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
    transition: background-color 0.3s ease; /* Add hover transition */
}
 
/* Hover effect for the button */
.enquiry-form button:hover {
    background-color: #583d36; /* Darken the button on hover */
}
 
/* Style for success and error messages */
.message {
    text-align: center;
    margin: 20px auto;
    padding: 10px;
    width: 100%; /* Full width */
    max-width: 600px; /* Set a maximum width */
    border-radius: 5px;
    font-family: 'Comfortaa', sans-serif; /* Match the font family */
}
 
.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
 
.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
 

.adminenquire-container {
    text-align: center;
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: center; /* Center the items */
    gap: 30px; /* Increase the gap between items (both rows and columns) */
    padding: 30px; /* Add padding to the container */
    padding-bottom: 50px;
    border: 8px solid #d7e7d2; /* Green border for the container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add shadow effect */
    border-radius: 10px;
}

.adminenquire-item {
    display: inline-block;
    width: 23%; /* Default width for larger screens */
    margin-bottom: 30px; /* Increase space below each event */
    text-align: center;
    height: auto; /* Allow height to adjust dynamically */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add shadow effect */
    border: 4px solid #d7e7d2; /* Green border for each item */
    background-color: white; /* Background color for the container */
    padding: 20px; /* Add padding to the item */
    border-radius: 10px;
    line-height: 1.8; /* Increase line spacing for better readability */
    word-wrap: break-word; /* Break long words to prevent overflow */
    overflow-wrap: break-word; /* Ensure long words wrap properly */
    overflow: hidden; /* Prevent content from overflowing the container */
}

.admin-enquiries h2 {
    text-align: center; /* Center the text */
    margin: 20px 0; /* Add margin above and below */
    font-size: 2rem; /* Optional: Adjust font size */
    color: #3C3316; /* Optional: Match the green color scheme */
}

.adminenquire-item h3 {
    margin: 20px 0;
    color: #3C3316; /* Optional: Match the green color scheme */
}

.adminenquire-item p {
    margin: 10px 0; /* Add more space between paragraphs */
    text-align: center;
    color: #333; /* Optional: Match the text color */
}

.adminenquire-item button {
    background-color: #FF0000; /* Red background color */
    color: white; /* White text color */
    padding: 10px 20px; /* Add padding for the button */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Add pointer cursor */
    font-size: 1rem; /* Adjust font size */
    transition: background-color 0.3s ease; /* Add hover transition */
}

.adminenquire-item button:hover {
    background-color: #CC0000; /* Darker red on hover */
}





/* Add this rule to style the image gallery */
.image-gallery {
    padding: 50px 0;
    background-color: #fff;
}

.image-gallery .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.gallery-item {
    width: 30%;
    margin-bottom: 30px;
    background-color: #d7e7d2;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 15px; /* Curve the edges */
    border: 3px solid #3C3316;
}

.gallery-item img {
    width: 90%;
    height: 350px;
    display: block;
    margin: 0 auto;
    border-radius: 15px; /* Curve the edges */
    margin-top: 15px;
}

.gallery-item h3 {
    font-size: 1.5em;
    margin: 15px;
}

.gallery-item p {
    margin: 15px;
}

.gallery-item .service-button {
    display: block;
    text-align: center;
    padding: 10px;
    margin: 15px;
    background-color: #867975;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.gallery-item .service-button:hover {
    background-color: #583d36;
}

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 3px solid #3C3316; /* Add border with the same color as other borders */
    width: 80%;
    max-width: 600px;
    border-radius: 10px; /* Rounded corners */
    font-size: 1.5rem;
    text-align: center; /* Center all text inside the modal */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
}

.modal h2{
    text-align: center;
    font-size: 2rem;
    margin-bottom: 20px;
}

.close {
    color: #3C3316;
    float: right;
    font-size: 38px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal-content #modal-duration,
.modal-content #modal-price {
    display: block; /* Ensure each line is treated as a block */
    margin: 10px 0; /* Add spacing between the lines */
    font-size: 1.2rem; /* Adjust font size for better readability */
    color: #333; /* Optional: Set a consistent text color */
}

form[name="add-about"] {
    margin: 0 auto;
    padding: 20px;
    border: 3px solid #3C3316;
    width: 50%;
    text-align: left;
    border-radius: 15px;
    font-family: 'Comfortaa', sans-serif;
    background-color: #f8f9fa;
}


form[name="add-about"] h2 {
    text-align: center;
}

form[name="add-about"] label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

form[name="add-about"] input, form[name="add-about"] textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

form[name="add-about"] button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    display: block;
    margin: 0 auto;
}

form[name="add-about"] button:hover {
    background-color: #45a049;
}

form[name="add-about"] h2 {
    text-align: center;
}




/* Large screens (desktops) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .admin-form,
    form[name="add-treatment"],
    form[name="add-deal"],
    form[name="add-about"],
    form[name="admin-form"] {
        width: 60%; /* Further increase form width for desktops */
    }
}

/* Extra-large screens */
@media (min-width: 1440px) {
    .admin-form,
    form[name="add-treatment"],
    form[name="add-deal"],
    form[name="add-about"],
    form[name="admin-form"] {
        width: 50%; /* Maximize form width for large screens */
    }
}

/* Large screens (1024px and above) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .adminenquire-item {
        width: 40%; /* Three to four items per row */
    }
}

/* Medium screens (768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .adminenquire-item {
        width: 45%; /* Two items per row */
        padding: 15px; /* Reduce padding */
    }

    .adminenquire-item h3 {
        font-size: 1.3rem; /* Slightly smaller heading font size */
    }

    .adminenquire-item p {
        font-size: 0.9rem; /* Slightly smaller text font size */
    }
}


/* Medium screens (tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
    .admin-form,
    form[name="add-treatment"],
    form[name="add-deal"],
    form[name="add-about"],
    form[name="admin-form"] {
        width: 70%; /* Increase form width for tablets */
    }
}

/* Small screens (480px to 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .adminenquire-item {
        width: 100%; /* One item per row */
        padding: 15px; /* Adjust padding */
    }

    .adminenquire-item h3 {
        font-size: 1.2rem; /* Smaller heading font size */
    }

    .adminenquire-item p {
        font-size: 0.9rem; /* Smaller text font size */
    }
}



/* Small screens (480px to 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .treatments-container {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center the items */
    }

    .treatment-item {
        width: 80%; /* Match the width of the opening hours box */
        margin-bottom: 20px; /* Add spacing between items */
    }
}

/* Extra-small screens (below 480px) */
@media (max-width: 479px) {
    .adminenquire-item {
        width: 100%; /* One item per row */
        padding: 10px; /* Further reduce padding */
    }

    .adminenquire-item h3 {
        font-size: 1.1rem; /* Smaller heading font size */
    }

    .adminenquire-item p {
        font-size: 0.8rem; /* Smaller text font size */
    }
}




/* Extra-small screens (below 480px) */
@media (max-width: 479px) {
    .treatments-container {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center the items */
    }

    .treatment-item {
        width: 80%; /* Match the width of the opening hours box */
        margin-bottom: 20px; /* Add spacing between items */
    }
}

/* Ensure all buttons use the same font */
button {
    font-family: 'Comfortaa', sans-serif; /* Match the font used on the website */
}

/* Ensure all input fields, textareas, and select dropdowns use the same font */
input, textarea, select {
    font-family: 'Comfortaa', sans-serif; /* Match the font used on the website */
}


@media (min-width: 468px) and (max-width: 765px) {
    .admin-form,
    form[name="add-treatment"],
    form[name="add-deal"],
    form[name="add-about"],
    form[name="admin-form"] {
        width: 80%; /* Increase form width for tablets */
    }
}

    @media (max-width: 765px) {
        .admin-form,
        form[name="add-treatment"],
        form[name="add-deal"],
        form[name="add-about"],
        form[name="admin-form"],
        form[name="add-opening-hours"] ,
        form[name="add-contact-info"] ,
        form[name="add-testimonials"] {
            width: 80%; /* Increase form width for tablets */
        }
    }
     
     
    /* Medium screens (tablets) */
    @media (min-width: 768px) and (max-width: 1023px) {
        .admin-form,
        form[name="add-treatment"],
        form[name="add-deal"],
        form[name="add-about"],
        form[name="admin-form"],
        form[name="add-opening-hours"] ,
        form[name="add-contact-info"] ,
        form[name="add-testimonials"] {
            width: 70%; /* Increase form width for tablets */
        }
    }
     
    /* Large screens (desktops) */
    @media (min-width: 1024px) and (max-width: 1439px) {
        .admin-form,
        form[name="add-treatment"],
        form[name="add-deal"],
        form[name="add-about"],
        form[name="admin-form"],
        form[name="add-opening-hours"] ,
        form[name="add-contact-info"] ,
        form[name="add-testimonials"] {
            width: 60%; /* Further increase form width for desktops */
        }
    }
     
    /* Extra-large screens */
    @media (min-width: 1440px) {
        .admin-form,
        form[name="add-treatment"],
        form[name="add-deal"],
        form[name="add-about"],
        form[name="admin-form"],
        form[name="add-opening-hours"] ,
        form[name="add-contact-info"] ,
        form[name="add-testimonials"]{
            width: 50%; /* Maximize form width for large screens */
        }
    }
     
     
    /* Large screens (1024px and above) */
    @media (min-width: 1024px) and (max-width: 1439px) {
        .adminenquire-item {
            width: 40%; /* Three to four items per row */
        }
     
        .treatments-container {
            flex-direction: column; /* Stack items vertically */
            align-items: center; /* Center the items */
        }
     
        .treatments img{
            aspect-ratio: 2/1.5; /* Maintain the aspect ratio of the image */
            max-width: 500px; /* Set a maximum width for the image */
        }
     
        .treatment-item {
            width: 50%; /* Match the width of the opening hours box */
            margin-bottom: 20px; /* Add spacing between items */
        }
    }
     
    /* Medium screens (768px to 1023px) */
    @media (min-width: 768px) and (max-width: 1023px) {
        .adminenquire-item {
            width: 45%; /* Two items per row */
            padding: 15px; /* Reduce padding */
        }
     
        .adminenquire-item h3 {
            font-size: 1.3rem; /* Slightly smaller heading font size */
        }
     
        .adminenquire-item p {
            font-size: 0.9rem; /* Slightly smaller text font size */
        }
     
        .treatments-container {
            flex-direction: column; /* Stack items vertically */
            align-items: center; /* Center the items */
        }
     
        .treatments img{
            aspect-ratio: 2/1.5; /* Maintain the aspect ratio of the image */
            max-width: 400px; /* Set a maximum width for the image */
        }
     
        .treatment-item {
            width: 80%; /* Match the width of the opening hours box */
            margin-bottom: 20px; /* Add spacing between items */
        }
    }
     
    /* Small screens (480px to 767px) */
    @media (min-width: 480px) and (max-width: 767px) {
        .adminenquire-item {
            width: 100%; /* One item per row */
            padding: 15px; /* Adjust padding */
        }
     
        .adminenquire-item h3 {
            font-size: 1.2rem; /* Smaller heading font size */
        }
     
        .adminenquire-item p {
            font-size: 0.9rem; /* Smaller text font size */
        }
    }
     
    /* Extra-small screens (below 480px) */
    @media (max-width: 479px) {
        .adminenquire-item {
            width: 100%; /* One item per row */
            padding: 10px; /* Further reduce padding */
        }
     
        .adminenquire-item h3 {
            font-size: 1.1rem; /* Smaller heading font size */
        }
     
        .adminenquire-item p {
            font-size: 0.8rem; /* Smaller text font size */
        }
     
        .treatments-container {
            flex-direction: column; /* Stack items vertically */
            align-items: center; /* Center the items */
        }
     
        .treatment-item {
            width: 80%; /* Match the width of the opening hours box */
            margin-bottom: 20px; /* Add spacing between items */
        }
     
        .treatments img{
            aspect-ratio: 2/1.5; /* Maintain the aspect ratio of the image */
            max-width: 300px; /* Set a maximum width for the image */
        }
    }
     
    /* Treatments Section */
     
    /* Small screens (480px to 767px) */
    @media (min-width: 480px) and (max-width: 767px) {
        .treatments-container {
            flex-direction: column; /* Stack items vertically */
            align-items: center; /* Center the items */
        }
     
        .treatments img{
            aspect-ratio: 2/1.5; /* Maintain the aspect ratio of the image */
            max-width: 300px; /* Set a maximum width for the image */
        }
     
        .treatment-item {
            width: 80%; /* Match the width of the opening hours box */
            margin-bottom: 20px; /* Add spacing between items */
        }
    }
     
     
    @media (max-width: 428px) {
     
        .navbar {
            font-size: 0.8rem; /* Adjust font size for smaller screens */
            width: 100%; /* Full width for the navbar */
        }
        .hero h1 {
            font-size: 2.8rem; /* Adjust title font size for smaller screens */
        }
        .three-boxes{
            align-self: center;
        }
        .testimonials {
            flex-direction: column; /* Stack items vertically */
            align-self: center; /* Center the items */
        }
        .testimonial-item {
            width: 80%; /* Match the width of the opening hours box */
            margin-bottom: 20px; /* Add spacing between items */
        }
        .text-box {
            font-size: 0.9rem; /* Adjust font size for smaller screens */
        }
        .treatments img{
            aspect-ratio: 2/1.5; /* Maintain the aspect ratio of the image */
            max-width: 200px; /* Set a maximum width for the image */
        }
        .treatments-container {
            flex-direction: column; /* Stack items vertically */
            align-items: center; /* Center the items */
        }
        .treatment-item {
            width: 80%; /* Match the width of the opening hours box */
            margin-bottom: 20px; /* Add spacing between items */
        }
     
    }
@media(max-width: 1100px) {
    .admin-treatment-container {
        flex-direction: column; /* Stack items vertically */
        gap: 20px; /* Maintain spacing between items */
    }

    .admin-treatment-item {
        flex: 1 1 100%; /* Make each item take up the full width */
    }
}

    @media (max-width: 900px) {
       
        .admin-existing-deals-container {
            flex-direction: column; /* Stack items vertically */
            gap: 20px; /* Maintain spacing between items */
        }
    
        
        .admin-existing-deals-item {
            flex: 1 1 100%; /* Make each item take up the full width */
        }
    }
    @media (max-width: 1330px) {
        .about-item p{
            font-size: 0.9rem; /* Adjust font size for smaller screens */
        }
 
        .about-item-0{
            min-height: 900px; /* Adjust height for smaller screens */
 
        }
        .about-item-1{
            min-height: 900px; /* Adjust height for smaller screens */
        }
        .about-item-2{
            min-height: 900px; /* Adjust height for smaller screens */
        }
 
 
 
 
    }
 
    @media (max-width: 1165px) {
       
        .about-content{
            display: flex; /* Switch to flexbox layout */
            flex-direction: column; /* Stack items vertically */
            gap: 20px; /* Add spacing between items */
            align-items: center; /* Center items horizontally */
            padding: 20px; /* Maintain padding */
        }
        .about-item {
            max-width: 95%; /* Set a maximum width for better readability */
            text-align: center; /* Center-align text */
        }
   
        .about-item img {
            max-width: 30%; /* Adjust image size */
            margin: 0 auto; /* Center images */
        }
        .about-item p {
            font-size: 1rem; /* Adjust heading size */
        }
        .about-item video{
            max-width: 50%; /* Adjust video size */
            height: auto; /* Maintain aspect ratio */
        }
        .about-item-2{
            min-height: 300px; /* Adjust height for smaller screens */
        }
    }
 
    @media (max-width: 930px) {
        .about-item-0{
            min-height: 300px; /* Adjust height for smaller screens */
        }
        .about-item-1{
            min-height: 300px; /* Adjust height for smaller screens */
        }
 
 
 
    }
 
    @media (max-width: 670px) {
        .about-item-2 img{
            max-width: 70%; /* Adjust image size */
        }
        .about-item-1 img{
            max-width: 70%; /* Adjust image size */
        }
        .about-item video{
            max-width: 60%; /* Adjust video size */
            height: auto; /* Maintain aspect ratio */
        }
 
 
 
    }
 
    @media (max-width: 550px) {
        .about-item-0 img{
            max-width: 40%; /* Adjust image size */
        }
 
 
 
 
    }
 
    @media (max-width: 400px) {
        .about-item-0 img{
            max-width: 50%; /* Adjust image size */
        }
        .about-item-1 img{
            max-width: 100%; /* Adjust image size */
        }
        .about-item-2 img{
            max-width: 200%; /* Adjust image size */
        }
        .about-item video{
            max-width: 80%; /* Adjust video size */
            height: auto; /* Maintain aspect ratio */
        }
 
 
 
 
    }
    @media (max-width: 1017px) {
        .testimonial-item {
            flex: 0 0 calc(50% - 20px); /* 2 testimonials per row */
            max-width: 50%;
        }
    
        .testimonial-slider {
            gap: 1px; /* Reduce the gap between testimonials */
        }
    }
    
    @media (max-width: 768px) {
        .testimonial-item {
            flex: 0 0 100%; /* 1 testimonial per row */
            max-width: 100%;
        }

        .testimonial-slider {
            gap: 1px; /* Reduce the gap between testimonials */
        }
    }
    
    @media (max-width: 432px) {
        .testimonial-item {
            flex: 0 0 100%; /* Each testimonial takes up the full width */
            max-width: 100%; /* Ensure the testimonial doesn't exceed the screen width */
            padding: 10px; /* Add padding for better spacing */
            box-sizing: border-box; /* Include padding and border in the width */
            text-align: center; /* Center-align the content */
            margin: 0 auto; /* Center the testimonial box */
        }
        .testimonials-container {
            max-width: 95%; /* Ensure the container fits the screen width */
            padding: 10px; /* Add padding inside the container */
            position: relative; /* Ensure arrows are positioned relative to the container */
        }
    }
    
    @media (min-width: 429px) and (max-width: 429px)  {
        .testimonial-item {
            flex: 0 0 100%; /* Each testimonial takes up the full width */
            max-width: 100%; /* Ensure the testimonial doesn't exceed the screen width */
            padding: 10px; /* Add padding for better spacing */
            box-sizing: border-box; /* Include padding and border in the width */
            text-align: center; /* Center-align the content */
            margin: 0 auto; /* Center the testimonial box */
        }
    
        .testimonial-slider {
            gap: 1px; /* Reduce the gap between testimonials */
        }
    
        .testimonials-container {
            max-width: 95%; /* Ensure the container fits the screen width */
            padding: 10px; /* Add padding inside the container */
            position: relative; /* Ensure arrows are positioned relative to the container */
        }
    
        .testimonials-wrapper {
            flex-direction: column; /* Stack the testimonials vertically */
            align-items: center; /* Center-align the testimonials */
        }
    
        .testimonial-prev,
        .testimonial-next {
            position: absolute;
            top: 50%; /* Center vertically */
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            font-size: 1.5rem; /* Adjust size for smaller screens */
            cursor: pointer;
            padding: 5px; /* Reduce padding for smaller buttons */
            
            z-index: 10;
        }
    
     
    
        .testimonial-prev:hover,
        .testimonial-next:hover {
            background-color: rgba(0, 0, 0, 0.8); /* Darken the background on hover */
        }
    
    
    
    
    }

    @media (max-width: 428px)  {
        .testimonial-item {
            flex: 0 0 100%; /* Each testimonial takes up the full width */
            max-width: 100%; /* Ensure the testimonial doesn't exceed the screen width */
            padding: 10px; /* Add padding for better spacing */
            box-sizing: border-box; /* Include padding and border in the width */
            text-align: center; /* Center-align the content */
            margin: 0 auto; /* Center the testimonial box */
        }
    
        .testimonial-slider {
            gap: 1px; /* Reduce the gap between testimonials */
        }
    
        .testimonials-container {
            max-width: 80%; /* Ensure the container fits the screen width */
            padding: 10px; /* Add padding inside the container */
            position: relative; /* Ensure arrows are positioned relative to the container */
        }
    
        .testimonials-wrapper {
            flex-direction: column; /* Stack the testimonials vertically */
            align-items: center; /* Center-align the testimonials */
        }
    
        .testimonial-prev,
        .testimonial-next {
            position: absolute;
            top: 50%; /* Center vertically */
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            font-size: 1.5rem; /* Adjust size for smaller screens */
            cursor: pointer;
            padding: 5px; /* Reduce padding for smaller buttons */
            
            z-index: 10;
        }

        .testimonial-prev {
            left: 10px; /* Position the left arrow */
        }
        .testimonial-next {
            right: 10px; /* Position the right arrow */
        }
    
       
    
        .testimonial-prev:hover,
        .testimonial-next:hover {
            background-color: rgba(0, 0, 0, 0.8); /* Darken the background on hover */
        }
    
    
    
    
    }