/* A flex container is needed to place the list and descriptions side-by-side */
        body {
            display: flex;
            min-height: 1000px; /* Ensure enough content to scroll */
            padding-top: 50px; /* Add some space at the top */
        }
        
        .scroll-wrapper {
            /* Left side (List) */
            width: 100%;
        }

        .desc-wrapper {
            /* Right side (Descriptions) */
            width: 100%;
        }

        /* Container for the left-side list */
        .scrollspy-list {
            list-style: none;
            padding: 0;
            margin: 0;
            /* Make the list stick while scrolling descriptions */
            position: sticky; 
            top: 100px; /* Adjust this value to account for your header height/Elementor section padding */
        }

        /* Default state for list items */
        .scrollspy-list li {
            padding: 10px 15px;
            margin-bottom: 5px;
            cursor: pointer;
            font-size: 20px;
            color: #888; /* Inactive color */
            border-left: 4px solid transparent; /* Default inactive border */
            transition: all 0.3s ease-in-out;
            pointer-events: auto; /* Ensure click events work */
        }

        /* Active state: This class is added by the JavaScript */
        .scrollspy-list li.active {
            color: #1a56ff; /* Active text color - adjust to match your brand */
            font-weight: 700;
            border-left: 4px solid #1a56ff; /* Active border/line color */
        }

        /* Ensure description sections have adequate height for scrolling */
        /* IMPORTANT: This targets the description elements using their IDs */
        #service-desc-1, #service-desc-2, #service-desc-3, #service-desc-4 {
            min-height: 400px; /* Increased height to make scrolling more visible */
            margin-bottom: 50px;
            padding: 20px;
            border: 1px solid #eee; /* Visual aid for sections */
        }

        .icon-wrapper img{
            max-width: 50px !important;
        }


.desc-wrapper a:hover{
	color : #222 !important;
}

.desc-wrapper a:hover p{
	color : #222 !important;
}

.desc-wrapper-inner{
	border-radius : 20px !important;
	padding : 20px 40px !important ;
}

.desc-wrapper a:hover .desc-wrapper-inner{
	background-color : #eee !important;
}