*{
    padding:0;
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
}
body{
 
    background-image:url("../images/bg-pattern-top-desktop.svg");
    background-position: left top;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

.main-container{
    width:100%;
    background-image:url("../images/bg-pattern-bottom-desktop.svg");
    background-position:bottom right;
    background-repeat:no-repeat;
    background-attachment: scroll;

}
.container{
    margin:100px auto;
    width:75%;
    height:600px;
    display:block;
}

.box-1{
    height:30%;
    width:100%; 
    color: hsl(300, 43%, 22%);
}

.box-1 .service{
    float:left;
    width:40%;
}
.box-1 .star{
    float:right;
    width:50%;
}
.box-1 .star ul{
    
    list-style:none;
}
.box-1 .service h1{
    font-size:40px;
    word-spacing:0.3px;
    line-height:40px;
    margin-bottom:30px;
   
}
.box-1 .star ul li{
    margin:8px 0;
    background-color: hsl(300, 24%, 96%);
    padding:15px 30px;
    border-radius:10px;
    font-weight:bold;
    float:right;
}
.box-1 .star ul li span{
    padding:0;
    margin:0;
    margin-right:15px;
    width:50px;

}
.box-1 .star ul li span img{
    margin:0 2px;
}
.box-1 .star ul .rate-1{
    padding-right:50px;
    margin-right:100px;
}
.box-1 .star ul .rate-2{
    margin-right:50px;
}
.box-1 .star ul .rate-3{
    padding-right:50px;
}
.box-1 p{
    color:hsl(303, 10%, 53%);
    line-height:20px;
}

/*box-2*/


.box-2{
    width:100%;
    height:30%;
    padding-top:100px;
}

.box-2 img{
    display:inline;
    float:left;
    width:40px;
    padding:0;
    margin:0;
    border-radius:30px;
}

.box-2  .buyer{
    float:left;
    padding:0 5px;
    margin-top:5px;
    color:hsl(300, 24%, 96%);
}
.box-2 .buyer span{
    color: hsl(333, 80%, 67%);
}
.box-2 p{
    float:none;
    display:block;
    line-height:18px;
    padding-top:50px;
    color: hsl(0, 0%, 100%);
}

.box-2 .buyer-1{
    width:280px;
    padding:20px 10px;
    background-color:hsl(300, 43%, 22%);
    padding:30px 20px;
    border-radius:10px;
    height: 130px;
    position:absolute;
    left:169px;
    top:380px;
}

.box-2 .buyer-2{
    width:280px;
    padding:20px 10px;
    background-color:hsl(300, 43%, 22%);
    padding:30px 20px;
    border-radius:10px;
    height: 130px;
    margin-bottom:-20px;
    position:absolute;
    right:515px;
    top:400px;
}

.box-2 .buyer-3{
    width:280px;
    padding:25px 15px;
    background-color:hsl(300, 43%, 22%);
    padding:30px 20px;
    height: 130px;
    border-radius:10px;
    position:absolute;
    right:169px;
    top:420px;
}

@media(max-width:400px){
    body{
        background-image:url("../images/bg-pattern-top-mobile.svg");
        background-repeat:no-repeat;
        background-position:top left;
    }
    .main-container{
        width:100%;
        background-image:url("../images/bg-pattern-bottom-mobile.svg");
        background-position:bottom right;
        background-repeat:no-repeat;
        background-attachment: scroll;
    
    }
    .container{
        width:85%;
        height:100%;
        display:block;
        margin:80px 30px;
    }
    .box-1 .service{
        float:none;
        width:100%;
        text-align:center;
        height:100%;
    }
    
    .box-1 .star ul{
        float:none;
        width:100%;
        list-style:none;
    }
    .box-1 .service h1{
        font-size:35px;
        word-spacing:0.2px;
        line-height:35px;
        margin-bottom:30px;
       
    }
    .box-1 .service p{
        width:100%;
        height:50%;
    }
    .box-1 .star{
        width:100%;
        font-size:13px;
    }
    .box-1 li{
        width:100%;
        margin:0;
    }
    .box-1 .star ul .rate-1{
        padding:15px 0;
        margin:30px 0 15px 0;
        text-align:center;
    }
    .box-1 .star ul .rate-2{
        margin:0 0 15px 0;
        padding:15px 0;
        text-align:center;
    }
    .box-1 .star ul .rate-3{
        padding:15px 0;
        margin:0;
        text-align:center;
    }
    .box-1 .star ul li span{
        display:block;
        width:100%;
        margin:0 0 5px 0 ;
    }
    .box-1 .star ul li span img{
        display:inline;
        
    }
    .box-2{
        display:grid;
        grid-template-rows:1fr;
        width:100%;
        height:100%;
        padding-top:50px;
    }
    .box-2 .buyer-1{
        width:90%;
        padding:20px 10px;
        background-color:hsl(300, 43%, 22%);
        padding:30px 20px;
        border-radius:10px;
        position:static;
        margin-bottom:10px;
    }
    
    .box-2 .buyer-2{
        width:90%;
        padding:20px 10px;
        background-color:hsl(300, 43%, 22%);
        padding:30px 20px;
        border-radius:10px;
        position:static;
        margin-bottom:10px;
    }
    
    .box-2 .buyer-3{
        width:90%;
        padding:25px 15px;
        background-color:hsl(300, 43%, 22%);
        padding:30px 20px;
        border-radius:10px;
        position:static;
    }
    
}