/* Services Section */
.services-container {
    display: flex; /* Use Flexbox for two columns */
    align-items: center; /* Vertically align the content */
    gap: 20px; /* Add spacing between the columns */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.services-image {
    flex: 0 0 auto; /* Prevent the image column from stretching */
    max-width: 450px; /* Set the maximum width for the image */
    text-align: center; /* Center the image horizontally */
}

.services-image img {
    max-width: 100%; /* Ensure the image is responsive */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: Add rounded corners */
}

.services-text {
    flex: 1 1 calc(50% - 20%); /* Adjust the width to account for the padding */
    text-align: left; /* Ensure the text is always aligned to the left */
    padding-left: 20%; /* Add 20% padding on the left side */
}

.services-text ul {
    list-style: none; /* Remove default bullets */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

.services-text ul li {
    margin-bottom: 10px; /* Add spacing between list items */
    font-size: 1.1rem; /* Adjust font size */
    color: #333; /* Text color */
    position: relative; /* For custom bullet styling */
}

.services-text ul li::before {
    content: '\2713'; /* Unicode for a checkmark */
    color: green; /* Set the checkmark color to green */
    font-weight: bold; /* Make the checkmark bold */
    margin-right: 10px; /* Add spacing between the checkmark and text */
    font-size: 1.2rem; /* Adjust the size of the checkmark */
    position: absolute; /* Position the checkmark */
    left: 0; /* Align the checkmark to the left */
    top: 0; /* Align the checkmark vertically */
    transform: translateY(2px); /* Adjust vertical alignment */
}

.services-text ul li {
    padding-left: 25px; /* Add padding to align text with the checkmark */
}

/* Responsive Design */
@media (max-width: 768px) {
    .services-container {
        flex-direction: column; /* Stack columns vertically on smaller screens */
    }

    .services-image, .services-text {
        flex: 1 1 100%; /* Each column takes full width */
    }

    .services-image {
        max-width: 100%; /* Allow the image to scale on small screens */
    }

    .services-text {
        padding-left: 10%; /* Reduce the left padding for the text */
    }
}

@media (max-width: 992px) {
    .services-image {
        max-width: 300px; /* Reduce the maximum width of the image */
    }

    .services-text {
        padding-left: 10%; /* Reduce the left padding for the text */
    }
}