<style>
    li.header-nav-item {
    flex-wrap: wrap;
    justify-content: flex-start
}
li.t2-subnav-it>a.t2-subnav-lnk {
    width: calc(100% - 44px)
}
.services-nav li.t2-subnav-it>a.t2-subnav-lnk {
    width: calc(100% - 36px)
}
.services-nav .open-subnav {
    background-color: var(--blue)
}
</style>

   
 

<section class="care-levels">
    <div class="care-container st-container-md">
        <!-- Left Panel -->
        <div class="care-left-panel green-card">
            <div class="care-header">
                <h2 class="st-h1">Care Services</h2>
                <p>Find the Right Home Care Services for You or Your Loved Ones</p>
            </div>
            <a class="st-btn v1" href="/contact-us/get-care-today/">Get Care Today</a>
        </div>

        <!-- Right Panel -->
        <div class="care-right-panel">
            
            <!-- Categories -->
            <div class="care-categories">
                <div class="care-category active" onclick="showServices('essential')">
                    <span>Essential Care</span>
                </div>
                <div class="care-category" onclick="showServices('specialized')">
                    <span>Specialized Care</span>
                </div>
                <div class="care-category" onclick="showServices('recovery')">
                    <span>Recovery-Focused Care</span>
                </div>
            </div>
            
            
           {% if linklists.mainmenu %}
            {% for item in linklists.mainmenu recursive -%}
            {% if item.name == "Services" %}
                    {%- if item.children %}
                    <div class="services-mega subnav" style="display:block">
                        <ul class="t2-subnav sb-{{ item.name|slugify }}-subnav subnav">
                            {% for t2item in item.children %}
                            <li class="header-nav-item t2-subnav-it">
                                <a href="{{ t2item.link }}" class="t2-subnav-lnk">{{ t2item.name }}</a>
                                {% if t2item.children %}
                                <button class="open-subnav trg-plus-minus">
                    <svg class="icon-plus" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C8.76138 0 9.37931 0.617931 9.37931 1.37931L9.37931 6.62069L14.6207 6.62069C14.9865 6.62069 15.3373 6.76601 15.596 7.02468C15.8547 7.28335 16 7.63418 16 8C16 8.36582 15.8547 8.71665 15.596 8.97532C15.3373 9.23399 14.9865 9.37931 14.6207 9.37931H9.37931V14.6207C9.37931 14.9865 9.23399 15.3373 8.97532 15.596C8.71665 15.8547 8.36582 16 8 16C7.63418 16 7.28335 15.8547 7.02468 15.596C6.76601 15.3373 6.62069 14.9865 6.62069 14.6207L6.62069 9.37931L1.37931 9.37931C1.01349 9.37931 0.662662 9.23399 0.403991 8.97532C0.14532 8.71665 0 8.36582 0 8C0 7.63418 0.14532 7.28335 0.403991 7.02468C0.662662 6.76601 1.01349 6.62069 1.37931 6.62069L6.62069 6.62069L6.62069 1.37931C6.62069 0.617931 7.23862 0 8 0Z" fill="white"/></svg>
                    <svg class="icon-minus" width="16" height="3" viewBox="0 0 16 3" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.37931 0L14.6207 0C14.9865 0 15.3373 0.14532 15.596 0.40399C15.8547 0.662661 16 1.0135 16 1.37931C16 1.74513 15.8547 2.09596 15.596 2.35463C15.3373 2.6133 14.9865 2.75862 14.6207 2.75862L9.37931 2.75862C3.66667 2.75862 10.3333 2.75862 6.62069 2.75862L1.37931 2.75862C1.01349 2.75862 0.662662 2.6133 0.403991 2.35463C0.14532 2.09596 0 1.74513 0 1.37931C0 1.0135 0.14532 0.662661 0.403991 0.40399C0.662662 0.14532 1.01349 0 1.37931 0L6.62069 0C10.6667 1.0554e-06 5 2.22524e-06 9.37931 0Z" fill="white"/></svg>
                                </button>
                                <ul class="t3-subnav subnav">
                                    {% for t3item in t2item.children %}
                                    <li class="header-nav-item t3-subnav-it"><a href="{{ t3item.link }}" class="t3-subnav-lnk">{{ t3item.name }}</a></li>
                                    {% endfor %}
                                </ul>
                                {% endif %}
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
            {% endif %}
            {% endfor %}
        {% endif %}
        
            <!-- Services -->
            <div class="care-services">
              <!-- Essential Care Services -->
              <div id="essential-services" class="service-section care-service-list active">
                <a href="/home-care-services/active-care/" class="care-service-item">Active Care</a>
                <a href="/home-care-services/wellness-care/" class="care-service-item">Wellness Care</a>
                <a href="/home-care-services/personal-care/" class="care-service-item">Personal Care</a>
                <a href="/home-care-services/care-on-demand/" class="care-service-item">Care on Demand</a>
                <a href="/home-care-services/respite-care/" class="care-service-item">Respite Care</a>
                <a href="/home-care-services/care-for-children/" class="care-service-item">Childcare</a>
              </div>
            
              <!-- Specialized Care Services -->
              <div id="specialized-services" class="service-section care-service-list">
                <a href="/home-care-services/dementia/" class="care-service-item">Dementia &amp; Alzheimers Care</a>
                <a href="/home-care-services/chronic-conditions/" class="care-service-item">Chronic Condition Management</a>
                <a href="/home-care-services/end-of-life-care/" class="care-service-item">End-of-Life / Hospice Care</a>
                <a href="/home-care-services/developmental-disabilities-care/" class="care-service-item">Developmental Disabilities Care</a>
                <a href="/home-care-services/care-in-facilities/" class="care-service-item">In-facility Care</a>
              </div>

  <!-- Recovery-Focused Care Services -->
  <div id="recovery-services" class="service-section care-service-list">
    <a href="/home-care-services/after-hospital-care/" class="care-service-item">Post-hospitalization Care</a>
    <a href="/home-care-services/transitional-care/" class="care-service-item">Transitional Care</a>
    <a href="/home-care-services/nursing-services/" class="care-service-item">Nursing Services</a>
    <a href="/home-care-services/postpartum-care/" class="care-service-item">Postpartum Care</a>
    <a href="/home-care-services/veteran-care/" class="care-service-item">Veteran Care</a>
  </div>
</div>

        </div>
    </div>
</section>


<script>
    function showServices(category) {
        // Hide all service sections
        const serviceSections = document.querySelectorAll('.service-section');
        serviceSections.forEach(section => {
            section.classList.remove('active');
        });
        
        // Show the selected service section
        const selectedSection = document.getElementById(category + '-services');
        if (selectedSection) {
            selectedSection.classList.add('active');
        }
        
        // Update active category
        const categories = document.querySelectorAll('.care-category');
        categories.forEach(cat => {
            cat.classList.remove('active');
        });
        
        // Add active class to clicked category
        event.target.closest('.care-category').classList.add('active');
    }

</script>