/* Scroll animations are defined in assets/css/main.css */

    /* Services Page Inline Styles */
    .services-intro {
        max-width: 1200px;
        margin: 60px auto 40px auto;
        padding: 0 20px;
        text-align: center;
    }

    .services-intro h2 {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 30px;
        font-weight: 700;
        color: #1A365D;
        margin-bottom: 20px;
    }

    .services-intro p {
        font-size: 17px;
        color: #666;
        line-height: 1.8;
        max-width: 900px;
        margin: 0 auto 16px auto;
        text-align: justify;
    }

    .services-intro p:last-child {
        margin-bottom: 0;
    }

    .clinic-facilities {
        max-width: 1200px;
        margin: 20px auto 50px auto;
        padding: 0 20px;
        text-align: center;
    }

    .clinic-facilities-container {
        background-color: #EDF2F7;
        border-radius: 20px;
        padding: 40px 30px;
    }

    .clinic-facilities h2 {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 28px;
        font-weight: 700;
        color: #1A365D;
        margin-bottom: 12px;
    }

    .clinic-facilities p {
        font-size: 16px;
        color: #555;
        max-width: 700px;
        margin: 0 auto 24px auto;
        line-height: 1.6;
    }

    .clinic-facilities .pharmacy-note {
        max-width: 820px;
        margin: 28px auto 0 auto;
        padding: 18px 22px;
        background-color: #FFFFFF;
        border-radius: 12px;
        border: 1px solid rgba(44, 82, 130, 0.15);
        color: #2D3748;
        font-size: 15px;
        line-height: 1.7;
    }

    .clinic-facilities .pharmacy-note a {
        color: #2C5282;
        font-weight: 600;
        text-decoration: none;
    }

    .clinic-facilities .pharmacy-note a:hover {
        color: #3182CE;
        text-decoration: underline;
    }

    .clinic-facilities-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .clinic-facilities-list li {
        background-color: #FFFFFF;
        color: #1A365D;
        font-weight: 600;
        font-size: 15px;
        padding: 14px 22px;
        border-radius: 50px;
        border: 2px solid rgba(49, 130, 206, 0.25);
        box-shadow: 0 4px 12px rgba(26, 54, 93, 0.08);
    }

    .service-areas {
        max-width: 1200px;
        margin: 20px auto 60px auto;
        padding: 0 20px;
        text-align: center;
    }

    .service-areas-container {
        background-color: #FFFFFF;
        border: 2px solid rgba(49, 130, 206, 0.15);
        border-radius: 20px;
        padding: 40px 30px;
    }

    .service-areas h2 {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 28px;
        font-weight: 700;
        color: #1A365D;
        margin-bottom: 12px;
    }

    .service-areas p {
        font-size: 16px;
        color: #555;
        max-width: 800px;
        margin: 0 auto 24px auto;
        line-height: 1.6;
    }

    .service-areas-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .service-areas-list li {
        background-color: #EDF2F7;
        color: #1A365D;
        font-weight: 600;
        font-size: 14px;
        padding: 12px 18px;
        border-radius: 50px;
    }

    .service-detail-section {
        padding: 56px 20px;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    /* Soft blue wash toward the image side (image left in markup) */
    .service-detail-section:has(.service-detail > .service-icon-large:first-child) {
        background: linear-gradient(
            90deg,
            rgba(224, 236, 255, 0.55) 0%,
            rgba(240, 247, 255, 0.35) 38%,
            #ffffff 72%
        );
    }

    /* Soft blue wash toward the image side (image right in markup) */
    .service-detail-section:has(.service-detail > .service-content:first-child) {
        background: linear-gradient(
            270deg,
            rgba(224, 236, 255, 0.55) 0%,
            rgba(240, 247, 255, 0.35) 38%,
            #ffffff 72%
        );
    }

    .service-detail {
        display: grid;
        grid-template-columns: 45% 55%;
        gap: 50px;
        align-items: start;
        padding: 30px 0;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .service-detail > * {
        min-width: 0;
        width: 100%;
    }

    .service-detail-section:nth-child(odd) .service-detail {
        grid-template-columns: 55% 45%;
    }

    .service-icon-large {
        width: 100%;
        max-width: 420px;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        transition: transform 0.3s ease;
        box-sizing: border-box;
        overflow: hidden;
    }

    .service-icon-large:hover {
        border: none;
        transform: translateY(-5px);
        box-shadow: none;
    }

    .service-icon-large img,
    .service-icon-large lottie-player {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .service-content {
        width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
        min-width: 0;
        box-sizing: border-box;
        padding: 0 15px;
    }

    .service-content h2 {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 28px;
        font-weight: 700;
        color: #1A365D;
        margin-bottom: 15px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .service-content p {
        font-size: 16px;
        color: #333;
        line-height: 1.8;
        margin-bottom: 20px;
        text-align: justify;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .service-features {
        margin-top: 20px;
        max-width: 100%;
    }

    .service-features h3 {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: #2C5282;
        margin-bottom: 12px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .service-features ul {
        list-style: none;
        padding: 0;
        max-width: 100%;
    }

    .service-features li {
        padding: 8px 0;
        color: #333;
        font-size: 15px;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        line-height: 1.6;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
        max-width: 100%;
    }

    .service-features li::before {
        content: '✓';
        color: #3182CE;
        font-weight: bold;
        font-size: 18px;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .why-choose-services {
        padding: 50px 20px;
        background-color: #FFFFFF;
    }

    .why-choose-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .why-choose-banner {
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 28px rgba(26, 54, 93, 0.12);
        line-height: 0;
    }

    .why-choose-banner picture,
    .why-choose-banner img {
        display: block;
        width: 100%;
        height: auto;
    }

    .cta-section {
        background: linear-gradient(135deg, #0F2744 0%, #2B6CB0 100%);
        color: #FFFFFF;
        padding: 80px 20px;
        text-align: center;
        margin-top: 0;
    }

    .cta-section h2 {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 15px;
    }

    .cta-section p {
        font-size: 15px;
        color: #E0E0E0;
        margin-bottom: 30px;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .cta-buttons {
        display: flex;
        gap: 15px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn {
        padding: 10px 24px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        border-radius: 50px;
        transition: all 0.3s ease;
        display: inline-block;
        border: 2px solid transparent;
    }

    .btn-primary {
        background-color: #3182CE;
        color: #FFFFFF;
    }

    .btn-primary:hover {
        background-color: #388E3C;
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }

    .btn-secondary {
        background-color: transparent;
        color: #FFFFFF;
        border: 2px solid #FFFFFF;
    }

    .btn-secondary:hover {
        background-color: #FFFFFF;
        color: #1A365D;
    }

    /* Responsive Design */
    @media (max-width: 1024px) {
        /* Tablet Styles */
        .service-detail {
            gap: 40px;
        }

        .service-icon-large {
            max-width: 280px;
            height: auto;
        }

        .service-content h2 {
            font-size: 24px;
        }

        .why-choose-services {
            padding: 40px 20px;
        }

        .why-choose-banner {
            border-radius: 12px;
        }
    }

    @media (max-width: 768px) {
        /* Mobile Styles */
        .services-intro {
            margin: 40px auto 30px auto;
        }

        .services-intro h2 {
            font-size: 24px;
        }

        .services-intro p {
            font-size: 15px;
        }

        .clinic-facilities {
            margin: 10px auto 30px auto;
        }

        .clinic-facilities-container {
            padding: 30px 20px;
        }

        .clinic-facilities h2 {
            font-size: 22px;
        }

        .clinic-facilities-list {
            flex-direction: column;
            align-items: stretch;
        }

        .clinic-facilities-list li {
            text-align: center;
        }

        .service-areas {
            margin: 10px auto 40px auto;
        }

        .service-areas-container {
            padding: 30px 20px;
        }

        .service-areas h2 {
            font-size: 22px;
        }

        .service-detail-section {
            padding: 40px 16px;
        }

        .service-detail-section:has(.service-detail > .service-icon-large:first-child),
        .service-detail-section:has(.service-detail > .service-content:first-child) {
            background: linear-gradient(
                180deg,
                rgba(237, 245, 255, 0.65) 0%,
                rgba(255, 255, 255, 1) 42%
            );
        }

        .service-detail {
            grid-template-columns: 1fr !important;
            gap: 30px;
            padding: 25px 0;
        }

        .service-icon-large {
            max-width: 260px;
            height: auto;
            order: -1;
        }

        .service-content h2 {
            font-size: 22px;
            text-align: center;
        }

        .service-content p {
            font-size: 15px;
        }

        .service-features h3 {
            font-size: 17px;
        }

        .service-features li {
            font-size: 14px;
        }

        .why-choose-services {
            padding: 30px 15px;
        }

        .why-choose-banner {
            border-radius: 10px;
            box-shadow: 0 6px 20px rgba(26, 54, 93, 0.1);
        }

        .cta-section {
            padding: 60px 20px;
        }

        .cta-section h2 {
            font-size: 20px;
        }

        .cta-section p {
            font-size: 14px;
        }

        .cta-buttons {
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .btn {
            width: 100%;
            max-width: 280px;
            text-align: center;
            padding: 10px 20px;
            font-size: 13px;
        }
    }