.services {
    padding: 20px;
    display: flex;
    justify-content: center; /* Center the flex container horizontally */
    margin-right: 100px;
}

.flex-container {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    gap: 20px; /* Add some space between the two sections */
    max-width: 1200px; /* Set a maximum width for the container */
    width: 100%; /* Ensure the container is responsive */
}

.image-section {
    flex: 1; /* Takes up equal space */
    max-width: 60%; /* Limits the image to 50% width */
   
    margin-left: -20px; 
}

.image-section img {
    width: 120%; /* Make the truck larger while staying within the container */
    height: auto; /* Maintain aspect ratio */
}


.bullet-points-section {
    flex: 1; /* Takes up equal space */
    max-width: 35%; /* Limits the text section to 50% width */
    margin-top: 50px;
    border: 2px solid black;
    margin-left:100px;
    flex-direction: column;
}

.title-section {
    background-color: #00523d; /* You can change this to any color you like */
    padding: 1rem;
    color: white; /* Ensures the text is visible against the background */
    margin-bottom: 1rem; /* Adds space between the title and the list */
    text-align: center;
    margin: 0;
}

.title-section h2 {
    margin: 0; /* Removes default margin */
    /* font-size: 1.5rem;  */
    opacity: 1 !important;
    font-family: 'Work Sans Extra Bold', sans-serif;
}

.service-section {
    position: relative;
    background: rgba(0, 108, 81, 0.3);
    color: white;
    margin: 0;
    padding-top: 10px;
    height: auto;
    overflow: hidden; 
}

.service-section ul {
    position: relative;
    z-index: 1;
}

.service-section ul li{
    white-space: normal;
    font-family: 'Source Sans Pro Semi Bold', sans-serif;
}

.bullet-points-section ul {
    list-style-type: disc;
    padding-left: 50px; /* Indent for bullet points */
}

/* Media query for screens smaller than 700px */
@media (max-width: 1400px) and (min-width: 1151px) {
    .bullet-points-section{
        max-width: 40%;
    }
}

@media (max-width: 1150px) and (min-width: 700px) {
    .bullet-points-section{
        max-width: 100%;
    }

}
@media (max-width: 699px) and (min-width: 600px) {
    .bullet-points-section {
        max-width: 100%;
        margin-left: calc(80px - ((699px - 100vw) / 10) * 2);
    }
    .title-section h2{
        font-size: 1.5rem;
    }
}

@media (max-width: 599px) and (min-width: 550px){
    .bullet-points-section{
        max-width: 100%;
    }
    .title-section h2{
        font-size: 1.28rem;
    }
    .services{
        margin-right: 80px;
        
    }
}

@media (max-width: 549px) and (min-width: 500px){
    .bullet-points-section{
        max-width: 100%;
        /* position: absolute; */
        white-space: nowrap;
    }
}

@media (max-width: 499px) and (min-width: 474px) {
    .bullet-points-section{
        max-width: 100%;
        /* position: absolute; */
        white-space: nowrap;
        margin-left:30px
    }
    .title-section h2{
        font-size: 1.3rem;
    }

    .services{
        width: 450px;
    }
}

@media (max-width: 473px)  {
    .bullet-points-section{
        max-width: 100%;
        /* position: absolute; */
        white-space: nowrap;
        margin-left: 20px;
    }
    .title-section h2{
        /* font-size: 0.9rem; */
    }
   .services {
        max-width: 100%; /* Ensure it doesn't exceed the viewport */
        width: 450px; /* Remove fixed width */
    }
}

@media (max-width: 330px)  {
    .title-section h2{
        font-size: 1.2rem;
    }
}