/* General Styles */
.service-container {
    margin-top: 7%;
}

/* Flex container for each service section */
.services_it {
    display: flex;
  justify-content: space-between;
    align-items: center;
    /* Align items vertically centered */
    margin-bottom: 40px;
    /* Add space between service sections */
    gap: 30px;
}

/* Styling for headings and paragraphs */
.services_it_Para h2 {
    font-size: 2em;
    margin-bottom: 25px;
}

.services_it_Para span {
    color: #0eb9e9;
}

.services_it_Para p {
    font-size: large;
    line-height: 1.6;
    /* Improve readability with line-height */
}

/* Style for service circles */
.service-circle {
    padding: 20px;
    border-radius: 100px;
    width: 300px;
    border: 2px solid gray;
    text-align: center;
    margin: 10px;
}

/* Grid layout for service boxes */
.service-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.bottom-style{
    display: flex;
    margin: 100px 0;
}

.bottomline {
    display: flex;
    width: 50%;
    margin: auto;
}

.bottom-line-box1 {
    padding: 5px;
    color: #0eb9e9;
    border: #0eb9e9;
    background-color: #0eb9e9;
    width: 5px;
    margin-left: 2px;
}
.bottom-line-box2 {
    padding: 5px;
    color: #0eb9e9;
    border: #0eb9e9;
    background-color: #0eb9e9;
    width: 10px;
    margin-left: 3px;
}
.bottom-line-box3 {
    padding: 5px;
    color: #0eb9e9;
    border: #0eb9e9;
    background-color: #0eb9e9;
    width: 5px;
    margin-left: 2px;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .services_it {
        flex-direction: column;
        /* Stack items vertically on small screens */
        text-align: center;
        /* Center-align text for better readability */
    }
    .services1{
        flex-direction: column-reverse;
    }

    .service-box {
        grid-template-columns: 1fr;
        /* Single column grid on small screens */
    }

    .services_it_Para p {
        font-size: medium;
        /* Adjust font size for better readability */
    }

    .service-circle {
        padding: 15px;
        margin: 5px;
        font-size: medium;
        /* Adjust font size to fit better */
    }
    .bottom-style {
        margin: 20px 0;
    }
}

@media (max-width: 480px) {
    .services_it_Para h2 {
        font-size: 1.5em;
        /* Smaller font size for headings on very small screens */
    }

    .services_it_Para p {
        font-size: small;
        /* Adjust font size for paragraphs on very small screens */
    }

    .service-circle {
        padding: 10px;
        font-size: small;
        /* Adjust font size for circles on very small screens */
    }
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}