.treatment_cards_section {

    & .section_inner {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        & .section_header {
            width: 100%;
            text-align: center;
            margin: 0 auto 5rem;

            & h2 {
                color: var(--black);
                margin: 0;
            }

            & h3, & h4 {
                color: var(--dark-green);
                margin: 0;
            }

            & .content_area {
                margin-top: 2rem;

                & p {
                    margin: 0;
                }
            }
        }

        & .cards {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3rem;

            @media (max-width: 991px) {
                grid-template-columns: repeat(2, 1fr);
                gap: 2rem;
            }

            @media (max-width: 600px) {
                grid-template-columns: 1fr;
            }

            & .card {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                padding: 4rem 3rem;
                background: var(--white);
                border: 1px solid var(--light-green);
                border-radius: 2rem;
                box-shadow: 0 1rem 3rem rgba(25, 76, 71, 0.06);
                transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

                /* anchor reset when the card is a link */
                color: inherit;
                text-decoration: none;

                &:is(a):hover {
                    transform: translateY(-0.6rem);
                    box-shadow: 0 1.6rem 4rem rgba(25, 76, 71, 0.12);
                    border-color: var(--teal);
                }

                & .card_icon {
                    width: 14rem;
                    height: 14rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 0 0 2.5rem;
                    background: var(--light-green);
                    border-radius: 50%;

                    & img {
                        width: 80%;
                        height: auto;
                        object-fit: contain;
                    }
                }

                & .card_title {
                    font-size: 2rem;
                    font-weight: 700;
                    color: var(--dark-green);
                    margin: 0 0 1.5rem;
                    transition: color 0.3s ease;
                }

                &:is(a):hover .card_title {
                    color: var(--teal);
                }

                & .card_text {
                    font-size: 1.6rem;
                    line-height: 1.6;
                    color: var(--text);
                    margin: 0;
                }
            }
        }

        & .call_to_action_buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1.5rem;
            margin-top: 5rem;
        }
    }

}