/* Nurturing section styles */
:root {
    --nurturing-color: #005b68;
    --nurturing-font: 'IBM Plex Sans', sans-serif;
    --nurturing-strong-size: 16px;
    --nurturing-gap: 16px; /* vertical space between list items */
}

.services-nurturing-section {
    background: #fbf4f2;
    padding: 0 120px;
    margin: 0 auto;
    box-sizing: border-box;
}

.services-nurturing-section .gd-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.nurturing-title {
    text-align: center;
    color: #0c5b5b;
    font-size: 32px;
    margin: 0 0 24px;
    font-weight: 700;
}

.nurturing-subtitle {
    font-family: 'IvyOra Display', serif;
    text-align: center;
    font-style: italic;
    color: #0c5b5b;
    margin: 0 0 28px;
    font-size: 24px;
}

.nurturing-top {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 48px;
}

.nurturing-illustration {
    flex: 0 0 220px;
}

.nurturing-illustration img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.nurturing-intro {
    flex: 1 1 auto;
    color: #403936;
    line-height: normal;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.nurturing-bottom {
    background: #fff;
    border-radius: 20px;
    padding: 40px 48px;
    display: flex;
    gap: 72px;
    align-items: flex-start;
}

.nurturing-left {
    flex: 0 0 40%;
}

.nurturing-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nurturing-tabs li {
    color: var(--nurturing-color);
    font-family: var(--nurturing-font);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    cursor: pointer;
    margin-bottom: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition:
        background-color 0.28s ease,
        color 0.28s ease,
        transform 0.18s ease,
        padding 0.18s ease,
        margin 0.18s ease,
        border-radius 0.28s ease,
        box-shadow 0.28s ease;
}

.nurturing-tabs li.active {
    color: #fff;
    background: var(--nurturing-color);
    padding: 24px;
    /* keep padding consistent to avoid layout jumps */
    border-radius: 24px;
    align-items: center;
    box-shadow: 0 8px 20px rgba(12, 91, 91, 0.08);
}

.nurturing-tabs li .dropdown-icon {
    display: none;
    width: 20px;
    height: 20px;
    margin-left: 12px;
}

.nurturing-right {
    flex: 1 1 60%;
}

.nurturing-panels {
    min-height: 180px;
}

.nurturing-panel {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
}

.nurturing-panel.active {
    max-height: 1000px;
}

.nurturing-panel ul {
    margin: 0;
    padding-left: 18px;
    color: #403936;
    font-family: var(--nurturing-font);
}

/* Ensure list items use the lighter weight by default and have consistent spacing */
.nurturing-panel li {
    margin-bottom: var(--nurturing-gap);
    line-height: normal;
    font-weight: 400; /* simple text weight */
}

/* Strong (heading part in each list item) */
.nurturing-strong {
    color: #403936;
    font-family: var(--nurturing-font);
    font-size: var(--nurturing-strong-size);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    cursor: pointer;
    /* Use inline-block so it participates on same line as description */
    display: inline-block;
    margin-right: 8px; /* spacing between title and the dash/description */
    transition:
        background-color 0.28s ease,
        color 0.28s ease,
        transform 0.18s ease,
        padding 0.18s ease,
        margin 0.18s ease,
        border-radius 0.28s ease,
        box-shadow 0.28s ease;
}

/* Description text (the rest of the sentence) - inherit color so it adapts to panel background */
.nurturing-desc {
    font-weight: 400; /* lighter than the strong */
    font-family: inherit;
    font-size: 15px;
    color: inherit;
}

/* Optional: hover effect to highlight the full line */
.nurturing-panel li:hover .nurturing-strong,
.nurturing-panel li:focus-within .nurturing-strong {
    color: #003f43; /* slightly darker on hover */
    transform: translateY(-1px);
}

@media (max-width: 1200px) {
    .services-nurturing-section {
        padding: 0 60px;
    }

    .nurturing-strong {
        color: #fff;
    }

    /* Disable hover effect on mobile */
    .nurturing-panel li:hover .nurturing-strong,
    .nurturing-panel li:focus-within .nurturing-strong {
        color: #fff;
        transform: none;
    }

    /* Keep nurturing-bottom layout similar to desktop below 1200px
       while making minor spacing adjustments for narrower viewports */
    .nurturing-top {
        flex-direction: column;
    }

    .nurturing-illustration {
        width: 100%;
        max-width: 420px;
        margin: 0 auto 12px;
    }

    .nurturing-bottom {
        /* retain two-column desktop layout */
        flex-direction: row;
        padding: 24px 24px;
        gap: 32px;
        align-items: flex-start;
    }

    .nurturing-left {
        flex: 0 0 100%;
        width: auto;
    }

    .nurturing-right {
        display: none;
    }

    .nurturing-tabs li {
        border-radius: 12px;
        padding: 12px 12px;
        /* base padding for mobile too */
    }

    /* show mobile dropdown icons */
    .nurturing-tabs li .dropdown-icon {
        display: inline-block;
    }

    .nurturing-tabs li.active {
        margin-bottom: 0;
        padding: 24px;
        /* keep same padding to avoid extra height */
        box-shadow: 0 8px 20px rgba(12, 91, 91, 0.08);
    }

    /* Mobile accordion wrapper: when a tab and its panel are grouped */
    .nurturing-accordion-item {
        margin-bottom: 16px;
        border-radius: 16px;
        overflow: visible;
        transition:
            background-color 0.28s ease,
            box-shadow 0.28s ease,
            padding 0.18s ease,
            margin 0.18s ease;
    }

    .nurturing-accordion-item.active {
        background: var(--nurturing-color);
        box-shadow: 0 8px 20px rgba(12, 91, 91, 0.08);
        padding-bottom: 0;
        /* avoid sudden extra padding */
    }

    .nurturing-accordion-item > li[role='tab'] {
        list-style: none;
        padding: 12px 16px;
        font-size: 16px;
        font-weight: 700;
        font-family: var(--nurturing-font);
        background: transparent;
        color: #fff;
        display: flex;
        align-items: center;
        border-radius: 0;
        cursor: pointer;
        transition:
            padding 0.18s ease,
            color 0.18s ease;
    }

    .nurturing-accordion-item > li[role='tab'] .dropdown-icon {
        margin-left: auto;
        width: 20px;
        height: 20px;
        filter: none;
    }

    .nurturing-accordion-item .nurturing-panel {
        background: #fff;
        border-radius: 12px;
        margin: 8px 12px 0 12px;
        padding: 16px 16px 16px 20px;
        color: #403936;
        /* dark text on white panel for readability */
        box-shadow: 0 2px 8px rgba(12, 91, 91, 0.04);
        transition:
            padding 0.18s ease,
            margin 0.18s ease,
            box-shadow 0.18s ease;
    }

    /* Panel content: readable bullets and text # */
    .nurturing-accordion-item .nurturing-panel ul {
        margin: 0;
        padding-left: 22px;
        list-style-type: disc;
        list-style-position: outside;
    }

    .nurturing-accordion-item .nurturing-panel li {
        margin-bottom: 12px;
        color: #ffffff;
        display: list-item;
        padding: 0 0 12px 0;
    }

    /* Marker for panels placed on teal backgrounds (active accordion or left-column panels) */
    .nurturing-accordion-item.active .nurturing-panel ul li::marker,
    .nurturing-left .nurturing-panel ul li::marker {
        color: #ffffff;
    }

    /* Default marker color for panels on white backgrounds */
    .nurturing-accordion-item .nurturing-panel ul li::marker {
        color: #403936;
    }
}

/* When a panel is moved under the left column (mobile accordion) style it */
.nurturing-left .nurturing-panel {
    max-height: 1000px;
    padding: 16px 10px;
    background: var(--nurturing-color);
    border-radius: 12px;
    margin-bottom: 16px;
}

@media (max-width: 599px) {
    .services-nurturing-section {
        padding: 0 24px;
    }

    .nurturing-title {
        font-size: 22px;
    }

    .nurturing-subtitle {
        font-size: 14px;
    }

    .nurturing-tabs li {
        padding-bottom: 12px;
    }
}