.hero-content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 2;
    align-items: start;
}
.hero-marketplace{
    background: url(../resources/images/marketplace/back1.png);
    padding: 0 14rem;
    background-position: center;
    background-size: cover;

}
#hero .img{
    max-width: 27rem;
    display: block;
}
.connecting-content{
    background-color: var(--light-grey);
}
.dots{
    display: flex;
    gap: 6rem;
    flex-wrap: wrap;
}
.box1, .box2{
    background-color: white;
    flex: 1 0;

}
.benfits{
    background-color: var(--primary-color);
}
.product-name{
    background: var(--light-grey);
    display: inline-block;
    padding: 1.2rem;
    border-radius: 1.5rem;
}
#benefits h3{
    margin-bottom: 2rem;
}
#benefits .ma-card, .topPub-content{
    background-color: white;
}
.clients-list{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    width: fit-content;
}
.clients-list img{
    max-width: 21.2rem;
}
.box{
display: flex;
gap: 1rem;
align-items: center;
}
.socialbox{
    grid-row-gap: 5rem;
}
#More .ma-card, #secondMore .ma-card{
    padding: 0;
}
#leverage .product-name{
    background: var(--dark-blue);
    color: white;
}
#secondBenefits .ma-card{
    background: var(--light-grey);
    height: 100%;
}
#joinUs{
    background: var(--light-grey);
}
#ChooseUs .ma-card{
    background-color: white;
    height: 100%;
}
#joinNow .content{
    background: white;
}
#joinNow .join{
    border: .2rem solid var(--dark-blue) ;

}
#joinNow .joinHeader{
    display: flex;
    gap:2.5rem;
    align-items: center;

}
#joinNow .content{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap:6rem;
}
#benefits .ma-card{
    height: 100%;
}
@media only screen and (max-width: 1200px) {
    #hero .img {
        width: 100% !important;
        margin: auto !important;
    }
    .hero-marketplace {
        padding: 4rem;
     
    }
    .clients-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        width: fit-content;
    }
   
}
@media screen and (max-width:768px){
    .clients-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }
    #joinNow .content{
        grid-template-columns: repeat(1,1fr);
    }
}
@media screen and (max-width:567px){
    .clients-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }
    .clients-list img{
        width: 15rem;
    }
}