body {
    font-family: 'Bubblegum Sans', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #FDFFFF; /* White */
    color: #172121; /* Black */
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center; /* Vertically center the logo */
    padding: 20px;
    background-color: #FDFFFF; /* White background for the logo section */
    border-radius: 10px 10px 0 0; /* Rounded corners on top */
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center; /* Center logo horizontally and vertically */
    width: 100%;
    max-width: 300px; /* Adjust width as needed */
    height: auto;
    margin: 0 auto;
}

.logo img {
    max-width: 100%;
    height: auto;
    display: block;
}

nav {
    width: auto; /* Change from 100% to auto to match the footer width */
    max-width: 80%; /* Set a maximum width to control the nav bar width */
    margin: 0 auto 20px auto; /* Add 20px of space below the navigation */
    background-color: #1ECBE9; /* Retain the background color */
    border-radius: 10px; /* Rounded corners */
    padding: 10px 20px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Center the navigation items */
    font-family: 'Bubblegum Sans', sans-serif;
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #172121; /* Black */
    font-weight: bold;
    transition: color 0.3s ease;
    border-radius: 5px; /* Rounded corners */
    padding: 10px 15px;
    display: flex;
    align-items: center; /* Align icon and text vertically */
    gap: 8px; /* Space between icon and text */
}

nav ul li a:hover {
    color: #93A3BC; /* Grey color on hover */
}

/* Mobile view (600px and below) */
@media (max-width: 600px) {
    nav ul li a span {
        /*display: none; /* Hide the text on mobile */
    }

    nav ul li a i {
        /*font-size: 24px; /* Increase icon size */
		display: none;
    }
}

/* Default view for larger screens */
@media (min-width: 601px) {
    nav ul li a i {
        font-size: 18px; /* Standard icon size */
    }
}

.introduction h2, .cta-buttons .btn {
    font-family: 'Bubblegum Sans', sans-serif; /* Apply Bubblegum Sans to headings and buttons */
    text-align: center;
    margin: 20px 0; /* Add vertical margin to create space between images */
}

.introduction p {
    font-family: 'Bubblegum Sans', sans-serif; /* Apply Bubblegum Sans to paragraph text */
    text-align: center;
    margin: auto; /* Center vertically and horizontally */
    width: 50%; /* Increase the width to allow more space */
    padding: 20px; /* Add padding for better spacing */
}

.carousel {
    width: 100%;
    max-height: 500px;
    overflow: hidden;
    position: relative;
    border-radius: 10px; /* Rounded corners */
}

.iframe-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100%; /* Make sure it takes up the full height available */
    width: 100%; /* Make sure it takes up the full width available */
    overflow: hidden; /* Hide any overflow */
    position: relative; /* Position for centering */
    border-radius: 10px; /* Rounded corners */
}

.carousel-inner {
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
    height: 600px; /* Adjust height to fit the content */
    position: relative; /* Positioning for centering */
    border-radius: 10px; /* Rounded corners */
}

.carousel-item {
    display: none; /* Hide all items by default */
    flex-shrink: 0;
    text-align: center; /* Center content within each item */
    border-radius: 10px; /* Rounded corners */
}

.carousel-item.active {
    display: block; /* Only display the active item */
    width: 100%;
    height: 100%;
    border-radius: 10px; /* Rounded corners */
}

.carousel-item iframe, 
.carousel-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensure the image is not cut off */
    border-radius: 10px; /* Rounded corners */
}

/* Button placement and styling */
.cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px; /* Adjust margin to bring it closer to the content */
    margin-bottom: 10px; /* Reduce bottom margin */
}

.cta-buttons .btn {
    background-color: #172121; /* Black */
    color: #FDFFFF; /* White */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 10px; /* Rounded corners */
    transition: background-color 0.3s ease;
    font-family: 'Bubblegum Sans', sans-serif; /* Consistent font style */
    font-size: 16px; /* Button text size */
}

.cta-buttons .btn:hover {
    background-color: #594236; /* Hover color for button */
}

footer {
    text-align: center;
    padding: 10px; /* Reduce padding to bring it closer to the above content */
    background-color: #172121; /* Black */
    color: #FDFFFF; /* White */
    border-radius: 10px; /* Rounded corners */
}

/* Adjustments for before and after images and button */
.before-after-container {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Ensure both images stretch to the same height */
    margin-bottom: 10px; /* Reduce the bottom margin for the container */
    gap: 20px;
}

.before-image,
.after-image {
    width: 40%;
    max-height: 500px;
    border-radius: 10px;
    object-fit: cover; /* Ensure the image covers the entire area without distortion */
    display: flex;
    align-items: center;
    justify-content: center;
}

.before-image img,
.after-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill the container while maintaining aspect ratio */
    border-radius: 10px;
}

.introduction {
    margin-bottom: 10px; /* Reduce space between the text and the button */
}

.faq-container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    text-align: center;
}

.accordion {
    width: 100%;
}

.accordion-item {
    background-color: #FDFFFF; /* Same background color */
    border: 1px solid #1ECBE9; /* Light blue border */
    border-radius: 10px; /* Rounded corners */
    margin: 10px 0;
    overflow: hidden;
}

.accordion-header {
    cursor: pointer;
    padding: 15px;
    background-color: #1ECBE9; /* Light blue background */
    color: #172121; /* Black text */
    font-family: 'Bubblegum Sans', sans-serif;
    text-align: left;
    transition: background-color 0.3s ease;
}

.accordion-header:hover {
    background-color: #93A3BC; /* Grey on hover */
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 15px;
    font-family: 'Bubblegum Sans', sans-serif;
    text-align: left;
}

.accordion-content p {
    padding: 15px 0;
}

.services-container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    text-align: center;
}

.size-select {
    margin-bottom: 20px;
}

.service-section {
    display: none; /* Hide services initially */
    margin-bottom: 40px;
}

.service-section:first-child {
    display: block; /* Show the first service by default */
}

.tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.tab-button {
    padding: 10px 20px;
    margin: 0 5px;
    background-color: #1ECBE9;
    color: #FDFFFF;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Bubblegum Sans', sans-serif;
}

.tab-button.active {
    background-color: #172121; /* Black for the active tab */
    color: #FDFFFF; /* White text */
}

.tab-button:hover {
    background-color: #93A3BC; /* Grey on hover */
}

.service-section {
    display: none; /* All sections are hidden by default */
}

.service-section.active {
    display: block; /* Only the active service section is displayed */
}

.service-section {
    text-align: center; /* Center align content inside the service sections */
    margin-bottom: 40px;
}

.service-section table {
    margin: 0 auto; /* Center the table horizontally */
    text-align: left; /* Keep text inside the table left-aligned */
}

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

/* Mobile-Friendly Adjustments */

/* For small devices (portrait tablets and large phones, 600px and below) */
@media (max-width: 600px) {
    header {
        padding: 10px;
    }

    nav ul {
        flex-direction: row; /* Maintain horizontal layout */
        flex-wrap: wrap; /* Allow wrapping of items on small screens */
    }

    nav ul li {
        margin-left: 10px; /* Reduce spacing between items */
        margin-bottom: 0; /* Remove bottom margin */
    }

    .introduction p, .before-image, .after-image {
        width: 90%; /* Increase the width for mobile devices */
    }

    .cta-buttons {
    margin-top: auto; /* Push the button down */
    margin-bottom: 20px; /* Add margin below the button */
    }

    .before-after-container {
        flex-direction: column;
    }

    .faq-container, .services-container {
        width: 90%; /* Reduce the width for mobile devices */
    }

    .carousel-inner {
        height: 300px; /* Reduce height for mobile display */
    }

    .tabs {
        flex-direction: column;
    }

    .tab-button {
        margin-bottom: 10px;
    }

    .service-section table {
        width: 100%;
    }
}

/* For medium devices (tablets, 768px and below) */
@media (max-width: 768px) {
    .before-image,
    .after-image {
        width: 100%;
    }

    nav ul {
        flex-wrap: wrap; /* Allow wrapping for medium devices */
    }

    nav ul li {
        margin-bottom: 0; /* Keep horizontal layout */
    }

    .carousel-inner {
        height: 400px; /* Adjust for medium devices */
    }
}

.content-wrapper {
    max-width: 800px; /* Adjust width to match your design */
    margin: 0 auto; /* Center the content */
    padding: 20px;
}

.about-image {
    max-width: 300px; /* Control image size */
    height: auto;
    margin: 20px 0;
}

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

.center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.iframe-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}