.hero::after {
    background-image: url('../images/services/classiquecarwash/hero.jpg');
}

.hero {
    gap: 0;
}

nav {
    background: rgba(104, 113, 94, 0.3);
}

/* ///////rims */
.heading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 1.875rem 0;
    /* 30px */
}

.heading h1 {
    font-size: 1.875rem;
    /* 30px */
    font-weight: 400;
    font-style: normal;
}

.hr-heading {
    color: #688E4E;
    width: 13%;
    height: 0.3125rem;
    /* 5px */
    background-color: #688E4E;
    border: none;
    margin: 0.4375rem 0;
    /* 7px */
}

.rims-tire-section {
    margin: 1.875rem;
    /* 30px */
}

.rims-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.rims-heading p {
    padding: 0 1.25rem;
    /* 20px */
    text-align: center;
    font-size: 17px;
}

.rims-heading img {
    width: 90%;
    margin: 1.25rem 0;
    /* 20px */
}

/* ///////////////////services-card */

.container-service {
    width: 94%;
}

.card {
    display: flex;
    background-color: rgb(206, 214, 216);
    margin: 1.25rem 1.875rem;
    /* 20px 30px */
    overflow: hidden;
    padding: 1.25rem;
    /* 20px */
}

.card img {
    width: 53%;
    margin: auto 0;
}

.card-content {
    padding: 1.25rem;
    /* 20px */
    width: 60%;
}

.card-content h3 {
    margin-top: 0;
    color: #688E4E;
    font-size: 1.625rem;
    /* 26px */
    font-size: 30px;

}

.card-content p {
    color: #666;
    margin: 0.9375rem 0;
    /* 15px */
    font-size: 18px;
}

.card-content .icon {
    width: 1.875rem;
    /* 30px */
    height: 1.875rem;
    /* 30px */
    background-color: #007474;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-top: 1.25rem;
    /* 20px */
}

.rims-heading img {
    width: 61%;
    margin: 1.25rem 0;
    height: 54vh;
}



@media (max-width: 1280px) {
    .rims-heading img {
        width: 79%;
        margin: 1.25rem 0;
        /* 20px */
        height: 70vh;
    }
}

@media (max-width: 980px) {
    .card img {
        margin: 3.125rem 0;
        /* 50px */
    }
}

@media (max-width: 768px) {
    .card {
        flex-direction: column;
    }

    .rims-heading p {
        padding: 0;
        text-align: center;
    }

    .card img {
        width: 95%;
        height: 15.625rem;
        /* 250px */
        order: 1;
        margin: auto;
    }

    .card-content {
        width: 100%;
        order: 2;
    }

    .container-service {
        width: 100%;
    }

    .rims-heading img {
        width: 100%;
    }
}

@media (max-width: 596px) {
    .hero h1 {
        color: #fff;
        font-size: 3rem;
    }
}

@media (max-width: 511px) {
    .rims-heading img {
        width: 79%;
        margin: 1.25rem 0;
        /* 20px */
        height: 46vh;
    }
}

@media (max-width: 480px) {
    .card-content h3 {
        font-size: 1.5625rem;
        /* 25px */
    }

    .card-content p {
        font-size: 0.9em;
        padding: 0;
        margin: 0.625rem;
        /* 10px */
        margin-left: 0;
    }

    .card img {
        height: 12.5rem;
        /* 200px */
    }

    .card-content {
        padding: 1.25rem;
        /* 20px */
        padding-left: 0;
        padding-right: 0;
    }

    .hero h1 {
        color: #fff;
        font-size: 3rem;
        margin: 0 1.25rem;
        /* 20px */
    }
}

@media (max-width: 376px) {
    .hero h1 {
        color: #fff;
        font-size: 2.3125rem;
        /* 37px */
        margin: 0 1.25rem;
        /* 20px */
    }
}

li::marker {
    color: #1B2727;
}

.card-content ul {
    margin-left: 1.0625rem;
    /* 17px */
    list-style: square;
}

.card-content ul li {
    color: #666;
    margin: 0.625rem 0;
    /* 10px */
    font-size: 18px;

}


/* .rims-heading p {
    padding: 0px 20px;
    text-align: center;
    padding: 10px;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    overflow: hidden;
    background: #D5DDDF;
    border-radius: 10px;
    margin-top: 10px;
    margin-left: 25px;
    padding-top: 0;
    padding: 20px;
    font-size: 16px;
    text-align: justify;
} */