#services{
    padding: 10rem 0;
    background-color: #151717;
    color: white;
}

.services-heading{
    padding: 0 5rem 5rem 5rem;
}

.services-container{
    display: flex;
    flex-direction: column;
}

.service{
    display: flex;
    justify-content: space-between;
    padding: 4rem 5rem;
    background-color: #151717;

    border-top: solid .5px #b3b3b3;
    background-position: center top;

    transition: background-position 2s;
}

.service p{
    max-width: 20%;
}

.service1:hover{
    background-image: url("../assets/buy.png");
    background-position: center bottom;
    background-blend-mode: exclusion;
}

.service2:hover{
    background-image: url("../assets/sell.png");
    background-position: center bottom;
}

#map-section{
    padding: 10rem 5rem;
    width: 100vw;
}

.map-heading{
    text-align: center;
    margin: 3rem 0;
}

.map{
    height: 30rem;
    width: 100%;
}

@media (max-width: 1024px){
    .service p{
        max-width: 30%;
    }
}

@media (max-width: 600px){
    .service{
        padding: 3rem 2rem;
        align-items: center;
    }
    .service p{
        max-width: 40%;
    }
    #map-section{
        padding: 3rem 2rem;
    }
    .map{
        height: 10rem;
    }
}

@media (max-width: 450px){
    .service{
        flex-direction: column;
        gap: 1rem;
    }
    .service p{
        max-width: 85%;
        text-align: center;
    }
}