.page-heading-services {
    background-image: url(../images/scrap-banner.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 110px 0px;
    text-align: center;
}

.service-intro{
    padding: 50px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.col-lg-8, .col-md-8, .col-sm-12 {
    flex: 2 1 66%;
}

.col-lg-4, .col-md-4, .col-sm-12 {
    flex: 1 1 33%;
}

.img-responsive {
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .col-lg-8, .col-md-8, .col-sm-12, .col-lg-4, .col-md-4, .col-sm-12 {
        flex: 1 1 100%;
    }
}

/* ...existing code... */

.service-block {
    margin-bottom: 30px;
}

.service-block img {
    max-width: 100%;
    height: auto;
}

.service-block h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.service-block p {
    margin-bottom: 15px;
}

.service-block .btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #8B3A0E; /* Rusty color */
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.service-block .btn .btn:hover {
    background-color: #8B3A0E; /* Darker rusty color */
}

@media (max-width: 768px) {
    .service-block .col-lg-8,
    .service-block .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    /* Reverse columns for even-numbered service blocks */
    .service-block:nth-child(even) .col-lg-8 {
        order: 2;
    }
    .service-block:nth-child(even) .col-lg-4 {
        order: 1;
    }
}