/* New CSS to initially hide the content sections */
.content-section {
    display: none;
}

/* Service Hero Section Styles (servicec1.css) */
.service-hero-section {
    background-color: var(--white); /* White background */
    padding: 60px 0 80px 0; /* Vertical padding */
}

    .service-hero-section .container {
        max-width: 1200px; /* Max width for content */
    }

    .service-hero-section .row {
        align-items: center; /* Vertically align content in the middle */
    }

/* Left Column: Text Content */
.service-hero-content {
    padding-right: 0px; /* Removed padding-right here */
    text-align: left; /* Align text to the left */
    flex: 0 0 45%; /* UPDATED: Changed from 50% to make image column wider */
    max-width: 55%; /* UPDATED: Changed from 50% */
    padding-left: 0px; /* Removed padding-left here */
}

.service-hero-heading {
    width: 85%;
    font-family: "Agrandir-Regular", sans-serif; /* Nunito Sans font */
    font-size: 3.5rem; /* Large heading size */
    font-weight: 400; /* Semi-bold */
    color: var(--teal); /* Teal color */
    line-height: 1; /* Tighter line height */
    margin-bottom: 20px; /* Space below heading */
}

.service-hero-paragraph {
    width: 75%;
    font-family: "Agrandir-Regular", sans-serif; /* Nunito Sans font for paragraph */
    font-size: 1.1rem; /* Paragraph font size */
    color: var(--teal); /* Teal color */
    line-height: 1.6; /* Comfortable line height */
}

/* Right Column: Image with Overlay */
.service-hero-image-col {
    display: flex;
    justify-content: center; /* Center image horizontally */
    align-items: center; /* Center image vertically */
    padding-left: 0px; /* Removed padding-left here */
    flex: 0 0 58%; /* UPDATED: Changed from 50% to make image column wider */
    max-width: 58%; /* UPDATED: Changed from 50% */
    padding-right: 0px; /* Removed padding-right here */
}

.service-hero-image-wrapper {
    position: relative; /* For positioning the overlay box */
    /* UPDATED: Reduced width to 90% to make it overall smaller on desktop */
    width: 80%;
    /* UPDATED: Increased back to 80% to restore the taller "square-like" shape */
    padding-bottom: 70%;
    border-radius: 20px; /* Rounded corners for the image container */
    overflow: hidden; /* Ensure image respects border-radius */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.service-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container, cropping if necessary */
    display: block;
}

.service-hero-overlay-box {
    position: absolute;
    bottom: 20px; /* Position from bottom */
    right: 20px; /* Position from right */
    background-color: #f7f2e9; /* Universal Tan 02 background */
    border-radius: 12px; /* Rounded edges */
    padding: 2px 25px; /* Padding inside the box */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1; /* Ensure it's above the image */
}

.service-hero-overlay-text {
    font-family: "Agrandir-Regular", sans-serif; /* Nunito Sans font */
    /* UPDATED: Slight adjustment to balance with new image size */
    font-size: 3.2rem;
    font-weight: 550; /* Semi-bold */
    color: var(--teal); /* Teal text color */
    white-space: nowrap; /* Prevent text from wrapping */
}

/* Responsive Adjustments */

/* Desktop (min-width: 992px) - New custom spacing */
@media (min-width: 992px) {
    .service-hero-content {
        padding-right: 0; /* Remove Bootstrap's default padding */
        margin-right: -20px; /* Custom negative margin to pull closer */
    }

    .service-hero-image-col {
        padding-left: 0; /* Remove Bootstrap's default padding */
        margin-left: -20px; /* Custom negative margin to pull closer */
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .service-hero-section .row {
        margin-left: 0; /* Reset negative margins for smaller screens */
        margin-right: 0; /* Reset negative margins for smaller screens */
    }

    .service-hero-content {
        padding-right: 15px; /* Reduce padding for smaller screens */
        margin-bottom: 40px; /* Add space when columns stack */
        text-align: center; /* Center text on tablet */
        flex: 0 0 100%; /* Full width on tablet */
        max-width: 100%; /* Full width on tablet */
        padding-left: 15px; /* Restore padding for tablet */
        margin-right: 0; /* Reset custom negative margin */
    }

    .service-hero-heading {
        font-size: 2.8rem; /* Smaller heading for tablets */
        line-height: 1.2;
        width: 100%; /* Ensure full width and allow centering */
        margin-left: auto; /* Center heading on tablet */
        margin-right: auto; /* Center heading on tablet */
    }

    .service-hero-paragraph {
        font-size: 1rem;
        width: 90%; /* Adjusted width for tablet to prevent overflow */
        margin-left: auto; /* Center paragraph on tablet */
        margin-right: auto; /* Center paragraph on tablet */
    }

    .service-hero-image-col {
        padding-left: 15px;
        flex: 0 0 100%; /* Full width on tablet */
        max-width: 100%; /* Full width on tablet */
        padding-right: 15px; /* Restore padding for tablet */
        margin-left: 0; /* Reset custom negative margin */
    }

    /* UPDATED: Added width reset and adjusted padding for tablet */
    .service-hero-image-wrapper {
        width: 100%; /* Restore full width when stacked */
        padding-bottom: 75%; /* Taller aspect ratio for tablet */
    }

    .service-hero-overlay-box {
        bottom: 15px;
        right: 15px;
        padding: 10px 20px;
    }

    .service-hero-overlay-text {
        font-size: 1rem;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .service-hero-section {
        padding: 40px 0;
    }

    .service-hero-content {
        /* Adjusted padding for paragraph text to prevent overflow */
        padding: 0 20px; /* Added horizontal padding */
        margin-bottom: 30px;
        text-align: center; /* Center text on mobile */
    }

    .service-hero-heading {
        font-size: 2.2rem; /* Even smaller heading for mobile */
        line-height: 1.15;
        width: 100%; /* Ensure full width and allow centering */
        margin-left: auto; /* Center heading on mobile */
        margin-right: auto; /* Center heading on mobile */
    }

    .service-hero-paragraph {
        font-size: 0.95rem;
        width: 100%; /* Ensure full width on mobile */
        margin-left: auto; /* Center paragraph on mobile */
        margin-right: auto; /* Center paragraph on mobile */
    }

    .service-hero-image-col {
        /* Added horizontal padding for the image column */
        padding: 0 20px;
    }

    .service-hero-image-wrapper {
        padding-bottom: 60%; /* Adjust aspect ratio for mobile */
        border-radius: 15px;
    }

    .service-hero-overlay-box {
        bottom: 10px;
        right: 10px;
        padding: 8px 18px;
        border-radius: 10px;
    }

    .service-hero-overlay-text {
        font-size: 0.9rem;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .service-hero-section {
        padding: 30px 0;
    }

    .service-hero-heading {
        font-size: 1.8rem;
        margin-bottom: 15px;
        width: 100%; /* Ensure full width and allow centering */
        margin-left: auto; /* Center heading on extra small mobile */
        margin-right: auto; /* Center heading on extra small mobile */
    }

    .service-hero-paragraph {
        font-size: 0.85rem;
        width: 100%; /* Ensure full width on extra small mobile */
        margin-left: auto; /* Center paragraph on extra small mobile */
        margin-right: auto; /* Center paragraph on extra small mobile */
    }

    .service-hero-image-wrapper {
        padding-bottom: 70%; /* Make it a bit taller on very small screens */
        border-radius: 10px;
    }

    .service-hero-overlay-box {
        bottom: 8px;
        right: 8px;
        padding: 6px 15px;
        border-radius: 8px;
    }

    .service-hero-overlay-text {
        font-size: 0.8rem;
    }
}

/* Specific style for the footer on the Services page */
.site-footer {
    background-color: #f0eadb !important; /* Override with universal-tan-02 */
}

/* Existing styles for .our-services-cards-section (unchanged except for .service-card-link transition) */
.our-services-cards-section {
    background-color: #2f5244;
    padding: 60px 0;
    color: #f5ede8;
}

.our-services-heading {
    font-family: "Agrandir-Regular", sans-serif;
    font-size: 3rem;
    font-weight: 400;
    color: #f5ede8;
    text-align: center;
    margin-bottom: 50px;
}

.services-card-col {
    padding: 0 10px;
    margin-bottom: 60px;
}

.service-card-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 35px 30px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    opacity: 0; /* Initial state: hidden */
    transform: scale(1.25); /* Initial state: scaled up */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Faster animation */
    will-change: transform, opacity;
}

    .service-card-link.is-visible {
        opacity: 1; /* Visible state */
        transform: scale(1); /* Normal size */
    }

    .service-card-link:hover {
        filter: brightness(1.3);
    }

.odd-card {
    background: linear-gradient(to right, #000000 0%, #8B5F3B 70%, #F5D1B7 100%);
    color: #ffffff !important;
}

.even-card {
    background: linear-gradient(to right, var(--universal-tan) 0%, var(--universal-tan) 30%, var(--universal-tan-02) 100%);
    color: #2f5244 !important;
}

.service-card-icon {
    font-size: 2.75rem;
    margin-right: 25px;
}

.service-card-text {
    font-family: "Agrandir-Regular", sans-serif;
    font-size: 1.65rem;
    font-weight: 300;
    flex-grow: 1;
}

/* Existing responsive adjustments (unchanged) */
@media (max-width: 991.98px) {
    .our-services-heading {
        font-size: 2.5rem;
    }

    .services-card-col {
        padding: 0 5px;
    }

    .service-card-link {
        max-width: 850px;
        padding: 30px 25px;
    }

    .service-card-icon {
        font-size: 2.25rem;
        margin-right: 20px;
    }

    .service-card-text {
        font-size: 1.35rem;
    }
}

@media (max-width: 767.98px) {
    .our-services-heading {
        font-size: 2rem;
        margin-bottom: 40px;
    }

    .service-card-link {
        padding: 25px 20px;
        flex-direction: column;
        text-align: center;
    }

    .service-card-icon {
        font-size: 2rem;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .service-card-text {
        font-size: 1.15rem;
    }
}

@media (max-width: 575.98px) {
    .our-services-heading {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

    .service-card-link {
        padding: 20px 15px;
    }

    .service-card-icon {
        font-size: 1.75rem;
    }

    .service-card-text {
        font-size: 1rem;
    }
}
/* Service Page Section 2 Styles (servicesc2.css) */
.services-section-2 {
    background-color: var(--teal); /* Teal background */
    padding: 70px 0 140px 0; /* Vertical padding */
    overflow: hidden; /* Hide overflow for absolute positioning */
}

    .services-section-2 .container {
        max-width: 1200px; /* Constrain content width */
    }

.services-section-2__main-heading {
    font-family: "Agrandir-Regular", sans-serif;
    font-size: 3rem; /* Heading size */
    font-weight: 300; /* Font weight 300 */
    color: #e0efd6; /* Specific light green color */
    text-align: center; /* Centered heading */
    margin-bottom: 20px; /* Space below heading */
}

.services-section-2__content-wrapper {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    position: relative; /* For absolute positioning of image */
}

/* Left Side: Image */
.services-section-2__image-container {
    position: absolute; /* Absolute position to overlap */
    left: 0; /* Adjusted to 0 to ensure image is fully visible from the left edge */
    top: 0;
    width: 50%; /* Take 50% of the container width */
    height: 585px; /* Keep fixed height for now as per user's previous input */
    z-index: 1; /* Ensure it's behind the cards */
    border-radius: 20px; /* Rounded edges for the image */
    overflow: hidden; /* Ensure image respects border-radius */
    max-width: 600px; /* Limit max width of the image container */
}

.services-section-2__image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container */
    border-radius: 20px; /* Rounded corners for the image */
}

/* Right Side: Cards and Button */
.services-section-2__cards-wrapper {
    flex-grow: 1; /* Allow cards wrapper to take remaining space */
    display: flex;
    flex-direction: column;
    gap: 30px; /* Space between cards and button */
    margin-left: calc(50% - 100px);
    width: 55%;
    max-width: 750px;
    z-index: 2;
    position: relative;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.service-card {
    border-radius: 20px; /* Rounded edges for cards */
    padding: 20px 45px 20px 60px; /* Adjusted: Decreased vertical padding, increased horizontal padding */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    text-align: right; /* Text aligned right */
}

.service-card--1 {
    background-color: var(--teal); /* Teal background */
    border: 2px solid #f7f2e9; /* Border line */
}

.service-card--2 {
    background-color: #f7f2e9; /* Universal Tan 02 background */
}

.service-card__heading {
    font-family: "Agrandir-Textbold", sans-serif;
    font-size: 1.3rem; /* Heading size */
    font-weight: 100; /* Semi-bold */
    margin-bottom: 5px; /* Space below heading */
}

.service-card--1 .service-card__heading {
    color: #f7f2e9; /* Universal Tan 02 for heading */
}

.service-card--2 .service-card__heading {
    color: var(--teal); /* Teal for heading */
}

.service-card__divider {
    height: 2px; /* Thickness */
    margin: 20px 0; /* Vertical margin */
}

.service-card--1 .service-card__divider {
    width: calc(100% - 120px);
    margin-left: auto;
    height: 2px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #f7f2e9;
}

.service-card--2 .service-card__divider {
    width: 100%; /* Full width for the second card's divider */
    height: 2px; /* Thickness */
    margin: 20px 0; /* Vertical margin */
    background-color: var(--teal); /* Teal for divider */
}

.service-card__paragraph {
    font-family: "Agrandir-Regular", sans-serif;
    font-size: 0.91rem; /* Paragraph font size */
    line-height: 1.3;
    font-weight: 400; /* Comfortable line height */
    margin-bottom: 0; /* Remove default margin */
}

.service-card--1 .service-card__paragraph {
    color: #f7f2e9; /* Universal Tan 02 for paragraph */
}

.service-card--2 .service-card__paragraph {
    color: var(--teal); /* Teal for paragraph */
}

/* Button */
.services-section-2__button {
    background-color: var(--teal); /* Teal background */
    color: var(--universal-tan-02); /* Universal Tan 02 text color */
    padding: 10px 20px; /* Adjusted padding for internal spacing */
    border-radius: 10px; /* Rounded edges */
    border: none;
    font-family: "Agrandir-Regular", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%; /* Ensure button takes full width */
    margin-top: 20px; /* Space above button, now inside the card */
    display: flex; /* Use flexbox for internal alignment */
    justify-content: flex-end; /* Push content to the right */
    align-items: center; /* Vertically center content */
}

    .services-section-2__button:hover {
        background-color: var(--light-teal); /* Lighter teal on hover */
        transform: translateY(-2px);
    }

/* Responsive Adjustments */

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .services-section-2 {
        padding: 60px 0;
    }

    .services-section-2__main-heading {
        font-size: 2.5rem;
        margin-bottom: 40px;
    }

    .services-section-2__content-wrapper {
        flex-direction: column; /* Stack image and cards vertically */
        align-items: center; /* Center items when stacked */
        padding: 0 20px; /* Add horizontal padding */
    }

    .services-section-2__image-container {
        position: relative; /* Reset to relative for stacking */
        left: auto; /* Remove absolute positioning */
        top: auto; /* Remove absolute positioning */
        width: 100%; /* Full width */
        max-width: 500px; /* Max width for image */
        height: auto; /* Auto height */
        padding-bottom: 70%; /* Maintain aspect ratio */
        margin-bottom: 10px; /* Adjusted: Reduced margin below image */
        border-radius: 20px; /* Ensure radius is applied */
        overflow: hidden; /* Ensure image is clipped */
    }

    .services-section-2__cards-wrapper {
        width: 100%; /* Full width for cards */
        max-width: 600px; /* Max width for cards */
        margin-left: auto; /* Center cards */
        margin-right: auto; /* Center cards */
        gap: 20px; /* Smaller gap */
        padding-left: 0; /* Remove padding when stacked */
        margin-top: 0; /* Reset margin-top */
    }

    .service-card {
        padding: 30px; /* Smaller padding */
        text-align: center; /* Center text for stacked cards */
    }

    .service-card__heading {
        font-size: 1.5rem;
    }

    .service-card__paragraph {
        font-size: 0.95rem;
    }

    .service-card__divider {
        width: 80%; /* Shorter width for dividers on stacked cards */
        margin-left: auto; /* Center divider */
        margin-right: auto; /* Center divider */
    }

    .services-section-2__button {
        min-width: 250px; /* Smaller min-width */
        max-width: 350px; /* Smaller max-width */
        padding: 12px 25px;
        font-size: 0.9rem;
        margin-top: 20px; /* Adjust margin for stacked view */
        justify-content: center; /* Center content for stacked button */
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .services-section-2 {
        padding: 40px 0;
    }

    .services-section-2__main-heading {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    .services-section-2__image-container {
        padding-bottom: 60%; /* Adjust aspect ratio for smaller mobile */
        margin-bottom: -200px; /* Adjusted to reduce gap further */
    }

    .service-card {
        padding: 25px;
        text-align: center; /* Ensure text is centered within the card */
    }

    .service-card__heading {
        font-size: 1.3rem;
    }

    .service-card__paragraph {
        font-size: 0.9rem;
    }

    .service-card__divider {
        width: 70%; /* Even shorter on smaller mobile */
    }

    .services-section-2__button {
        min-width: 200px;
        max-width: 300px;
        padding: 10px 20px;
        font-size: 0.85rem;
        width: auto;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .services-section-2 {
        padding: 30px 0;
    }

    .services-section-2__main-heading {
        font-size: 1.8rem;
    }

    .services-section-2__image-container {
        padding-bottom: 70%; /* Make it a bit taller on very small screens */
        margin-bottom: -200px; /* Adjusted to reduce gap further */
    }

    .service-card {
        padding: 20px;
        text-align: center; /* Ensure text is centered within the card */
    }

    .service-card__heading {
        font-size: 1.1rem;
    }

    .service-card__paragraph {
        font-size: 0.8rem;
    }

    .service-card__divider {
        width: 60%; /* Shortest on extra small mobile */
    }

    .services-section-2__button {
        min-width: 180px;
        max-width: 280px;
        padding: 8px 15px;
        font-size: 0.8rem;
        width: auto;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }
}

/* Service Page Section 3 Styles (servicesc3.css) */

.services-section-3 {
    background-color: var(--white); /* White background */
    padding: 70px 0; /* Vertical padding */
}

    .services-section-3 .container {
        max-width: 1200px; /* Constrain content width */
    }

    .services-section-3 .row {
        align-items: center; /* Vertically align content in the middle */
    }

/* Left Side: Heading, Paragraph, and Text Boxes */
.services-section-3__content {
    padding-right: 40px; /* Space between text content and image */
    text-align: left; /* Align text to the left */
}

.services-section-3__heading {
    font-family: "Agrandir-Regular", sans-serif;
    font-size: 3rem; /* Heading size */
    font-weight: 400; /* Font weight 400 */
    color: var(--teal); /* Teal color */
    line-height: 1.1; /* Tighter line height */
    margin-bottom: 20px; /* Space below heading */
}

.services-section-3__paragraph {
    width: 100%;
    font-weight: 400;
    font-family: "Agrandir-Regular", sans-serif; /* Nunito Sans font */
    font-size: 1.1rem; /* Paragraph font size */
    color: var(--teal); /* Teal color */
    line-height: 1.5; /* Comfortable line height */
    margin-bottom: 30px; /* Space below paragraph */
}

.services-section-3__text-boxes {
    display: flex;
    flex-direction: column; /* Stack text boxes vertically */
    gap: 15px; /* Space between text boxes */
}

.text-box {
    background-color: var(--teal); /* Teal background */
    color: var(--universal-tan-02); /* White text color */
    font-family: "Agrandir-Textbold", sans-serif; /* Changed to Nunito Sans */
    font-size: 1.15rem;
    font-weight: 100; /* Font weight 1000 */
    padding: 15px 0px; /* Padding inside text box */
    border-radius: 12px; /* Rounded borders */
    text-align: center; /* Center text within box */
    width: 100%; /* Make them take full width of their container */
    max-width: 550px; /* Limit max width for consistency */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Right Side: Image with Caption Text Below */
.services-section-3__image-col {
    display: flex;
    flex-direction: column; /* Stack image and caption vertically */
    justify-content: center; /* Center image horizontally */
    align-items: flex-end; /* Align items to the right for desktop */
}

.services-section-3__image-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    padding-bottom: 95%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
}

.services-section-3__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container, cropping if necessary */
    border-radius: 20px; /* Rounded corners for the image */
}

.services-section-3__image-caption-text {
    color: var(--teal); /* Teal text color */
    font-family: "Agrandir-Textbold", sans-serif; /* Changed to Nunito Sans */
    font-size: 1.1rem;
    font-weight: 300;
    text-align: right; /* Align text to the right */
    width: 100%; /* Ensure it takes full width of its parent column */
    max-width: 80%; /* Limit width to prevent overflow */
    margin-top: 5px; /* Space above the caption text */
}

/* Responsive Adjustments */

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .services-section-3 {
        padding: 60px 0;
    }

    .services-section-3__content {
        padding-right: 15px;
        margin-bottom: 40px;
        text-align: center; /* Center text content on tablets */
    }

    .services-section-3__heading {
        font-size: 2.5rem;
    }

    .services-section-3__paragraph {
        font-size: 1rem;
        margin-left: auto;
        margin-right: auto;
    }

    .services-section-3__text-boxes {
        align-items: center; /* Center text boxes when stacked */
    }

    .text-box {
        min-width: 250px;
        max-width: 400px;
        padding: 15px 15px;
        font-size: 0.9rem;
    }

    .services-section-3__image-col {
        align-items: center; /* Center items when stacked on tablets */
        padding: 0 20px; /* Add horizontal padding */
    }

    .services-section-3__image-wrapper {
        padding-bottom: 70%; /* Adjust aspect ratio for tablets */
        margin-bottom: 15px; /* Adjusted margin below image for tablets */
        max-width: 90%; /* Reduce size */
        margin-left: auto;
        margin-right: auto;
    }

    .services-section-3__image-caption-text {
        font-size: 0.9rem;
        max-width: 90%; /* Adjusted max-width for tablet */
        text-align: center; /* Center text on tablet when stacked */
        margin-top: 15px; /* Adjusted margin-top for tablets */
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .services-section-3 {
        padding: 40px 0;
    }

    .services-section-3__heading {
        font-size: 2rem;
    }

    .services-section-3__paragraph {
        font-size: 0.95rem;
        margin-left: auto;
        margin-right: auto;
    }

    .text-box {
        min-width: 200px;
        max-width: 350px;
        padding: 15px 12px;
        font-size: 0.85rem;
    }

    .services-section-3__image-wrapper {
        padding-bottom: 60%; /* Adjust aspect ratio for mobile */
        margin-bottom: 10px; /* Adjusted margin below image for mobile */
    }

    .services-section-3__image-caption-text {
        font-size: 0.85rem;
        max-width: 100%; /* Adjusted max-width for mobile */
        text-align: center; /* Center text on mobile when stacked */
        margin-top: 10px; /* Adjusted margin-top for mobile */
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .services-section-3 {
        padding: 30px 0;
    }

    .services-section-3__heading {
        font-size: 1.8rem;
    }

    .services-section-3__paragraph {
        font-size: 0.85rem;
        margin-left: auto;
        margin-right: auto;
    }

    .text-box {
        min-width: 180px;
        max-width: 300px;
        padding: 9px 10px;
        font-size: 0.8rem;
    }

    .services-section-3__image-wrapper {
        padding-bottom: 70%; /* Make it a bit taller on very small screens */
        margin-bottom: 5px; /* Adjusted margin below image for extra small mobile */
    }

    .services-section-3__image-caption-text {
        font-size: 0.8rem;
        text-align: center; /* Center text on extra small mobile when stacked */
        margin-top: 5px; /* Adjusted margin-top for extra small mobile */
    }
}

/* Service Page Section 5 Styles (servicesc5.css) */

.services-section-5 {
    background-color: var(--teal); /* Teal background */
    padding: 80px 0 110px 0; /* Vertical padding */
    overflow: hidden; /* For overlapping elements */
}

    .services-section-5 .container {
        max-width: 1200px; /* Constrain content width */
    }

    .services-section-5 .row {
        align-items: center; /* Vertically align content in the middle */
    }

/* Left Part: Text Content */
.services-section-5__content {
    padding-right: 10px; /* Space between text content and image */
    text-align: left; /* Align text to the left */
    position: relative; /* For the absolute positioning of the text box */
}

.services-section-5__heading {
    font-family: "Agrandir-Regular", sans-serif;
    font-size: 2.8rem; /* Heading size */
    font-weight: 400; /* Font weight 400 */
    color: var(--universal-tan-02); /* Universal Tan 02 color */
    line-height: 1.3; /* Tighter line height */
    margin-bottom: 10px; /* Space below heading */
}

.services-section-5__paragraph {
    width: 80%;
    font-family: "Agrandir-Regular", sans-serif;
    font-size: 1.4rem; /* Paragraph font size */
    color: var(--universal-tan-02); /* Universal Tan 02 color */
    line-height: 1.5; /* Comfortable line height */
    margin-bottom: 80px; /* Space below paragraph before text box */
}

.services-section-5__text-box {
    background-color: rgba(136, 162, 155, 0.6); /* #88A29B with 60% opacity */
    color: var(--universal-tan-02); /* Universal Tan 02 text color */
    font-family: "Agrandir-Regular", sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    padding: 19px 51px; /* Padding inside text box */
    border-radius: 12px; /* Rounded corners */
    text-align: left; /* Text aligned left */
    position: absolute; /* Absolute positioning for overlap */
    bottom: -40px; /* Position below the content, adjust as needed */
    left: 0; /* Start from the left, with padding from container */
    width: calc(100% + 200px); /* Extend width to overlap image */
    margin-left: -38px;
    max-width: 800px; /* Max width for the text box */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    z-index: 2; /* Ensure it's above the image */
}

/* Right Part: Image */
.services-section-5__image-col {
    display: flex;
    justify-content: center; /* Center image horizontally */
    align-items: center; /* Center image vertically */
}

.services-section-5__image-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px; /* Max width for the image container */
    padding: 25% 0 70% 0; /* Aspect ratio */
    border-radius: 20px; /* Rounded corners for the image container */
    overflow: hidden; /* Ensure image respects border-radius */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.services-section-5__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container */
    border-radius: 20px; /* Rounded corners for the image */
}

/* Responsive Adjustments */

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .services-section-5 {
        padding: 60px 0;
    }

    .services-section-5__content {
        padding-right: 15px;
        margin-bottom: 20px; /* Adjusted: Reduced margin to pull text box closer */
        text-align: center; /* Center content on tablets */
    }

    .services-section-5__heading {
        font-size: 2.5rem;
        margin-bottom: 25px; /* Adjusted: Increased margin bottom for heading */
    }

    .services-section-5__paragraph {
        font-size: 1rem;
        width: 90%; /* Adjusted width for tablet to prevent overflow */
        margin-left: auto; /* Center paragraph on tablet */
        margin-right: auto; /* Center paragraph on tablet */
    }

    .services-section-5__text-box {
        position: relative; /* Reset to relative for stacking */
        bottom: auto; /* Remove absolute positioning */
        left: auto; /* Remove absolute positioning */
        width: 100%; /* Full width */
        max-width: 500px; /* Limit width */
        margin: 0 auto; /* Center text box */
        padding: 15px 20px; /* Adjust padding */
        font-size: 1rem;
        text-align: center; /* Center text */
    }

    .services-section-5__image-col {
        margin-top: 20px; /* Adjusted: Reduced space above image when stacked */
    }

    .services-section-5__image-wrapper {
        max-width: 450px;
        padding-bottom: 70%;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .services-section-5 {
        padding: 40px 0;
    }

    .services-section-5__heading {
        font-size: 2rem;
        margin-bottom: 20px; /* Adjusted: Increased margin bottom for heading */
    }

    .services-section-5__paragraph {
        font-size: 0.95rem;
        width: 100%; /* Ensure full width on mobile */
        margin-left: auto; /* Center paragraph on mobile */
        margin-right: auto; /* Center paragraph on mobile */
    }

    .services-section-5__text-box {
        max-width: 400px;
        padding: 12px 15px;
        font-size: 0.9rem;
    }

    .services-section-5__image-wrapper {
        max-width: 350px;
        padding-bottom: 60%;
        margin-top: 10px; /* Adjusted: Reduced space above image for mobile */
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .services-section-5 {
        padding: 30px 0;
    }

    .services-section-5__heading {
        font-size: 1.8rem;
        margin-bottom: 15px; /* Adjusted: Increased margin bottom for heading */
    }

    .services-section-5__paragraph {
        font-size: 0.85rem;
        width: 100%; /* Ensure full width on extra small mobile */
        margin-left: auto; /* Center paragraph on extra small mobile */
        margin-right: auto; /* Center paragraph on extra small mobile */
    }

    .services-section-5__text-box {
        max-width: 300px;
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .services-section-5__image-wrapper {
        max-width: 300px;
        padding-bottom: 70%;
        margin-top: 5px; /* Adjusted: Reduced space above image for extra small mobile */
    }
}

/* Service Page Section 7 Styles (servicesc7.css) */

.services-section-7 {
    background-color: var(--teal); /* Teal background */
    padding: 30px 0 100px 0; /* Vertical padding, adjusted as per your last input */
    position: relative; /* Ensure this is relative for absolute logo positioning */
}

    .services-section-7 .container {
        max-width: 1800px; /* Constrain content width */
    }

.services-section-7__main-row {
    position: relative; /* Establish positioning context for absolute children */
    align-items: flex-start; /* Align items to the top */
    min-height: 400px; /* Ensure enough height for logo to be visible */
}

/* Heading Text Box - Positioned absolutely on the right, at the top */
.services-section-7__heading-box {
    margin-top: 40px;
    background-color: #dedccb; /* Updated: Background color for heading box */
    color: var(--teal); /* Teal text color */
    font-family: "Agrandir-Regular", sans-serif;
    padding: 25px 50px; /* Padding inside box */
    border-radius: 12px; /* Rounded corners */
    text-align: center; /* Center text inside box */
    width: fit-content; /* Fit content width */
    min-width: 730px; /* Adjusted: Increased min-width for the box */
    max-width: 730px; /* Adjusted: Increased max-width for the box */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    position: absolute; /* Absolute positioning */
    top: 0; /* Align to the top of the row */
    left: 550px; /* Align to the right of the row */
    z-index: 10; /* Ensure it's above other content */
}

.services-section-7__heading {
    font-size: 4.6rem; /* Adjusted: Increased heading size */
    font-weight: 400; /* Font weight 400 */
    line-height: 1.1;
    margin: 0; /* Remove default margins */
}

/* Left Side: List Items and Bold Paragraph */
.services-section-7__left-content {
    padding-right: 40px;
    margin-left: 60px; /* Space between content and right side */
    text-align: left; /* Align text left */
    margin-top: 225px; /* Further increased margin-top to move content down */
    z-index: 5; /* Ensure it's above the logo if they overlap */
    width: 50%; /* Increased width to allow li points to be on one line */
}

.services-section-7__list {
    list-style: none; /* Remove bullets/dots */
    padding-left: 0; /* Remove default padding */
    color: #f7f2e9; /* Updated: List item text color */
    font-family: "Agrandir-Regular", sans-serif; /* Nunito Sans font */
    font-size: 1.8rem;
    line-height: 1.3;
    margin-bottom: 30px; /* Space below list */
}

    .services-section-7__list li {
        margin-bottom: 15px; /* Space between list items */
        white-space: nowrap; /* Prevent text from wrapping */
    }

.services-section-7__bold-paragraph {
    min-width: 900px;
    max-width: 900px;
    font-family: "Agrandir-Textbold", sans-serif; /* Nunito Sans font */
    font-size: 2rem; /* Bold paragraph font size */
    font-weight: 100; /* Bold font weight */
    color: #ffffff; /* Updated: Pure white color */
    line-height: 1.2;
    margin-bottom: 0; /* Remove default margin */
}

/* Right Side: Partially Shown Logo - Positioned absolutely within the section */
.services-section-7__right-content {
}

.services-section-7__logo-container {
    position: absolute; /* Absolute positioning relative to .services-section-7 */
    bottom: -330px; /* Adjusted to hide more from the bottom */
    right: -490px; /* Adjusted to hide more from the right */
    width: 1000px; /* Increased width to make it larger */
    height: auto; /* Maintain aspect ratio */
    z-index: 1; /* Ensure it's behind the text content */
}

.services-section-7__logo {
    width: 60%;
    height: auto;
    display: block;
}

/* Responsive Adjustments */

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .services-section-7 {
        padding: 60px 0;
        overflow-x: hidden; /* Ensure no horizontal scroll on tablets */
    }

    .services-section-7__main-row {
        flex-direction: column; /* Stack columns vertically */
        align-items: center; /* Center items when stacked */
        min-height: auto; /* Reset min-height for responsive */
    }

    .services-section-7__heading-box {
        position: relative; /* Reset to relative for stacking */
        top: auto;
        left: auto; /* Reset left positioning */
        right: auto;
        margin-bottom: 40px; /* Space below heading box when stacked */
        min-width: 250px;
        max-width: 350px;
        padding: 15px 20px;
        display: flex; /* Use flexbox to center content */
        flex-direction: column; /* Stack content vertically */
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center horizontally */
    }

    .services-section-7__heading {
        font-size: 2rem;
    }

    .services-section-7__left-content {
        margin-top: 0; /* Reset margin-top for responsive */
        margin-bottom: 40px; /* Space below content when stacked */
        padding-right: 15px;
        margin-left: 0; /* Reset margin-left */
        text-align: center; /* Center content on tablets */
        width: 100%; /* Full width for responsive */
    }

    .services-section-7__list {
        font-size: 1rem;
        white-space: normal; /* Allow text to wrap on smaller screens */
        padding-left: 0; /* Ensure no padding */
        margin-left: auto; /* Center the list */
        margin-right: auto; /* Center the list */
        text-align: center; /* <-- FIX APPLIED HERE */
    }

    .services-section-7__bold-paragraph {
        font-size: 1.2rem;
        text-align: center;
        width: 100%;
        min-width: auto;
    }

    .services-section-7__logo-container {
        display: none; /* Hide logo on tablets and smaller screens */
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .services-section-7 {
        padding: 40px 0;
        overflow-x: hidden; /* Ensure no horizontal scroll on mobile */
    }

    .services-section-7__heading-box {
        min-width: 200px;
        max-width: 300px;
        padding: 12px 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .services-section-7__heading {
        font-size: 1.8rem;
    }

    .services-section-7__left-content {
        margin-top: 0; /* Ensure no extra margin from desktop */
    }

    .services-section-7__list {
        font-size: 0.95rem;
        padding-left: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .services-section-7__bold-paragraph {
        font-size: 1.1rem;
    }

    .services-section-7__logo-container {
        display: none; /* Hide logo on mobile */
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .services-section-7 {
        padding: 30px 0;
    }

    .services-section-7__heading-box {
        min-width: 180px;
        max-width: 280px;
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .services-section-7__heading {
        font-size: 1.5rem;
    }

    .services-section-7__left-content {
        margin-top: 0; /* Ensure no extra margin from desktop */
    }

    .services-section-7__list {
        font-size: 0.9rem;
        padding-left: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .services-section-7__bold-paragraph {
        font-size: 1.1rem;
    }

    .services-section-7__logo-container {
        display: none; /* Hide logo on extra small mobile */
    }
}

/* Service Page Section 8 Styles (servicesc8.css) */

.services-section-8 {
    background-color: #f0eadb; /* Background color #F0EADB */
    padding: 230px 0; /* Adjusted: Increased vertical padding */
    text-align: center; /* Center all content horizontally */
}

    .services-section-8 .container {
        max-width: 1200px; /* Constrain content width */
        margin: 0 auto; /* Center container */
    }

.services-section-8__text--light {
    font-family: "Agrandir-Regular", sans-serif;
    font-size: 2.4rem; /* Lighter text font size */
    font-weight: 300; /* Lighter font weight */
    color: var(--teal); /* Teal color */
    margin-bottom: 0px; /* Space below lighter text */
}

.services-section-8__text--bold {
    font-family: "Agrandir-Textbold", sans-serif;
    font-size: 2.5rem; /* Bold text font size */
    font-weight: 200; /* Bold font weight */
    color: var(--teal); /* Teal color */
    margin-bottom: 15px; /* Space below bold text before button */
}

.services-section-8__button {
    background-color: var(--teal); /* Teal background */
    color: var(--white); /* White text color */
    font-family: "Agrandir-Regular", sans-serif;
    font-size: 1.7rem;
    font-weight: 400;
    padding: 8px 60px; /* Adjusted: Increased horizontal padding */
    border-radius: 10px; /* Rounded corners */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-block; /* Allows vertical alignment and centering with text-align */
}

    .services-section-8__button:hover {
        background-color: var(--light-teal); /* Lighter teal on hover */
        transform: translateY(-2px);
    }

/* Responsive Adjustments */

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .services-section-8 {
        padding: 80px 0; /* Adjusted: Increased vertical padding for tablets */
    }

    .services-section-8__text--light {
        font-size: 1.3rem;
    }

    .services-section-8__text--bold {
        font-size: 1.7rem;
        margin-bottom: 30px;
    }

    .services-section-8__button {
        font-size: 1rem;
        padding: 12px 40px; /* Adjusted: Increased horizontal padding for tablets */
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .services-section-8 {
        padding: 60px 0; /* Adjusted: Increased vertical padding for mobile */
    }

    .services-section-8__text--light {
        font-size: 1.1rem;
    }

    .services-section-8__text--bold {
        font-size: 1.4rem;
        margin-bottom: 25px;
    }

    .services-section-8__button {
        font-size: 0.9rem;
        padding: 10px 30px; /* Adjusted: Increased horizontal padding for mobile */
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .services-section-8 {
        padding: 40px 0; /* Adjusted: Increased vertical padding for extra small mobile */
    }

    .services-section-8__text--light {
        font-size: 1rem;
    }

    .services-section-8__text--bold {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }

    .services-section-8__button {
        font-size: 0.85rem;
        padding: 8px 25px; /* Adjusted: Increased horizontal padding for extra small mobile */
    }
}