/* Wrapper to hide overflow */
    .services-wrapper {
        overflow: hidden;
        /* Hide the overflowing content */
        max-width: 1120px;
        position: relative;
        margin-top: 0;
        transition: width 0.5s ease;
        /* Transition for expanding */
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    /* Expanding text above the items */
    .expanding-text {
        width: 50%;
        /* Start with 50% width */
        min-height: 80px;
        padding-left: 2rem;
        transition: width 0.5s ease;
        /* Smooth transition with the menu */
        text-align: center;
        /* Center the text */
        transform: translateX(50%);
        /* Right align the container, hiding cols 3 and 4 */
        transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.1, 1), width 0.5s ease;
    }

    .expanding-text.expanded {
        width: 100%;
        /* Full width in expanded state */
        padding-left: 0;
        transform: translateX(0);
        /* Remove the translate when expanded */
    }

    .expanding-text h1 {
        color: #FFF !important;
        font-size: 1.85rem;
        line-height: 2rem;
        margin-top: 0.5rem;
        margin-bottom: 0;
        padding-bottom: 1rem;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, .75);
        font-weight: 600;
        text-align: center;
    }

    .expanding-text p {
        font-size: 1.025rem !important;
        line-height: 1.35rem !important;
        font-weight: 400;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .75);
        margin: 6px 0;
        color: #FFF !important;
    }

    /* Grid container */
    .services-menu {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /* 4 equal columns */
        grid-template-rows: repeat(4, auto);
        /* 4 rows */
        grid-auto-flow: column;
        /* Populate grid by columns first */
        gap: 0.75rem 4rem;
        /* Adjust spacing between items */
        max-width: 1120px;
        width: 100%;
        transform: translateX(calc(50% + 2rem));
        /* Right align the container, hiding cols 3 and 4 */
        transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.1, 1), width 0.5s ease;
    }

    /* Expanded state for both the text and menu */
    .services-menu.expanded,
    .services-wrapper.expanded .expanding-text {
        width: 100%;
        /* Full width in expanded state */
    }

    .services-menu.expanded {
        transform: translateX(0);
        /* Left-align the container */
    }

    /* Service item link styling */
    .service-item-link {
        display: block;
        /* Ensure the link takes up the space */
        width: 100%;
        color: #4F145B;
        /*white-space: nowrap;*/
    }



    /* Service item container styling */
    .service-item {
        display: flex;
        align-items: flex-start;
        background-color: #FFF;
        border-radius: 6px;
        width: 100%;
        height: 58px;
        padding: 0.5rem;
        box-shadow: rgb(0 0 0 / .1) 0 4px 6px -1px, rgb(0 0 0 / .06) 0 2px 4px -1px;
        opacity: 1;
        /* Visible by default */
        transition: none;
        text-align: left;
    }

    .service-item:hover {
        background-color: #F9F4FA
    }



    /* Initially hide items 9-16 */
    .services-menu .service-item-link:nth-child(n+9) .service-item {
        opacity: 0;
        /* Apply default transition for fade-in */
        transition: opacity 0.5s ease;
    }

    /* Fade in service items 9-12 when expanded */
    .services-menu.expanded .service-item-link:nth-child(n+9):not(:nth-child(n+13)) .service-item {
        opacity: 1;
    }

    /* Override transition for slow-fade items (13-16) */
    .services-menu .service-item-link:nth-child(n+13) .service-item.slow-fade {
        transition: opacity 1.25s ease;
        /* Slower opacity transition */
    }

    /* Fade in service items 13-16 when expanded */
    .services-menu.expanded .service-item-link:nth-child(n+13) .service-item.slow-fade {
        opacity: 1;
    }

    /* Quicker fade-out for slow-fade items when collapsing */
    .services-menu:not(.expanded) .service-item-link:nth-child(n+13) .service-item.slow-fade {
        transition: opacity 0.25s ease-out;
        /* Faster fade-out */
    }

    /* Service text container */
    .service-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 1.2;
        height: 40px;
    }

    /* Main text in the service item */
    .service-text .title {
        font-size: 1rem;
        font-weight: 600;
        color: #4F145B;
    }

    /* Subtitle text below the main text */
    .service-text .subtitle {
        font-size: 0.75rem;
        font-weight: 400;
        color: #4F145B;
    }


    /* Service icon styling */
    .service-icon {
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        margin-right: 0.5rem;
        margin-top: 5px;
        /* Ensure some space between the icon and text */
    }


    .show-more-services-span {
        width: 100%;
        cursor: pointer;
        width: 100%;
        text-align: right;
        margin-top: 0.75rem;
    }

    .toggle-services {
        font-size: .85rem;
        background-color: #FFF;
        color: #D80080;
        display: inline-block;
        padding: 4px 6px;
        border-radius: 4px;
        box-shadow: rgb(0 0 0 / .1) 0 4px 6px -1px, rgb(0 0 0 / .06) 0 2px 4px -1px;
    }


    @media (min-width: 1081px) and (max-width: 1280px) {

        .services-menu {
            gap: 0.75rem 3rem;
            transform: translateX(calc(50% + 1.5rem));
        }

    }

    @media (min-width: 769px) and (max-width: 1080px) {

        .services-menu {
            gap: 0.75rem 1rem;
            transform: translateX(calc(50% + 0.5rem));
        }

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

        .service-text .subtitle {
            display: none;
        }

        .expanding-text {
            padding-left: 0.5rem;
        }
    }




    @media (max-width: 480px) {

        .service-text .subtitle {
            display: none;
        }
    }


    @media (max-width: 352px) {

        .service-item {
            display: block;
        }

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

        .service-icon {
            display: none;
        }
    }

    /* Mobile layout for two columns with 8 items initially */
    @media (max-width: 768px) {

        /* Grid container for mobile: 2 columns */
        .services-menu {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            /* 2 equal columns */
            grid-template-rows: repeat(4, auto);
            /* 4 rows initially (8 items) */
            gap: 0 0.5rem;
            width: 100%;
            /* Full width on mobile */
            transform: none;
            /* No sliding needed */
        }

        /* Show only rows 1 to 8 initially */
        .services-menu .service-item-link:nth-child(-n+8) .service-item {
            max-height: 100px;
            /* Adjust the max height based on your design */
            opacity: 1;
            /* Make visible for fade effect */
            margin-bottom: 0.5rem;
            /* Add gap for visible items */
        }

        /* Initially hide rows 9 to 16 */
        .services-menu .service-item-link:nth-child(n+9) .service-item {
            display: none;
            /* Hidden items */
            opacity: 0;
            /* Ensures fade-in effect works */
        }

        /* Expanded state: still 2 columns, now 8 rows (show all 16 items) */
        .services-menu.expanded {
            grid-template-rows: repeat(8, auto);
            /* Expanded state with 8 rows */
        }

        /* Expanded state: show all items */
        .services-menu.expanded .service-item-link:nth-child(n+9) .service-item {
            display: flex;
            /* Ensure items are flex items again */
            opacity: 1;
            /* Fade in effect */
            transition: opacity 0.5s ease;
        }

        /* Expanded state: reveal all rows */
        .services-menu.expanded .service-item-link .service-item {
            opacity: 1;
            /* Fade in rows */
            margin-bottom: 0.5rem;
            /* Keep gap for all items when expanded */
        }

        /* Ensure items flow vertically, maintaining their order */
        .services-menu {
            grid-auto-flow: row;
            /* Flow items row by row to maintain order when expanding */
        }

        .expanding-text {
            width: 100%;
            /* Full width on mobile */
            height: auto;
            padding-left: 0;
            transform: none;
        }

        .show-more-services-span {
            margin-top: 0;
        }

        .service-text .title {
            font-size: 0.95rem;
        }

        .service-item-link {
            white-space: wrap;
        }

    }