.clover_box { background: #29363b; overflow: hidden; color: var(--white)!important; }
.clover_hd { background: url(../img/clover/logo_banner_bg.jpg) no-repeat center bottom; background-size: cover; padding: 25px 0; min-height: 300px; }
.clover_box .app_stores a:nth-child(2) { padding-left: 10px; }
.clover_description { background: url(../img/clover/discription_bg.png) no-repeat center bottom; background-size: 100% 100%; padding: 160px 0 120px; min-height: 400px; margin-top: -15%; position: relative; z-index: 1; }
.cover_img { margin-top: -5%; position: relative; z-index: 1; }
.clover_description p { color: var(--white); font-size: 20px; }
.clover_title h3 { display: inline-block; font-size: 2rem; font-weight: 600; position: relative; padding-bottom: 10px; margin-bottom: 30px; color: var(--white); }
.clover_title h3:before { position: absolute; content: ""; left: 0; right: 0; width: 100%; height: 2px; background: var(--white); bottom: 0; }
.clover_feat li { position: relative; padding-left: 45px; padding-bottom: 25px; font-size: 20px; color: var(--white); }
.clover_feat li:before { position: absolute; content: ""; left: 0; background: url(../img/clover/li_before.png) no-repeat center; background-size: contain; padding: 10px; top: 6px; }
.clover_ftl { background: url(../img/clover/key_feat_bg.jpg) no-repeat center; background-size: 100% 100%; min-height: 500px; margin-top: -14%; padding: 150px 0 200px; position: relative; }
.clover_tech .cover_img { margin-top: -7%; }
.clover_tech { background: url(../img/clover/technology_bg.png) no-repeat center bottom; background-size: 100% 100%; padding: 100px 0 50px; min-height: 400px; margin-top: -10%; position: relative; z-index: 1; }
.clover_title h2 { display: inline-block; font-size: 2rem; font-weight: 600; position: relative; margin-bottom: 70px; }
.clover_title h2:before { position: absolute; content: ""; background: var(--white); left: -30%; top: 50%; width: 50px; height: 2px; }
.clover_title h2:after { position: absolute; content: ""; background: var(--white); right: -30%; top: 50%; width: 50px; height: 2px; }
.clover_avtars_sec figure:nth-child(even) { margin-top: 3%; }
.clover_avtars_sec { background: url(../img/clover/img_bg.png) no-repeat center bottom; background-size: 100% 100%; min-height: 400px; position: relative; z-index: 1;  padding: 80px 0;}

@media (max-width: 1200px){
    .clover_description p, .clover_feat li { font-size: 18px; }
    .clover_feat li { padding-bottom: 15px; }
    .clover_title h2, .clover_title h3 { font-size: 1.8rem; }
    .clover_ftl { padding: 150px 0; }
}
@media (max-width: 991.98px){
    .clover_hd { min-height: 200px; }
    .clover_title h2, .clover_title h3 { font-size: 1.5rem; }
    .clover_title h2 { margin-bottom: 40px; }
    .clover_box .app_stores a:nth-child(2) { padding-left: 0; }
}
@media (max-width: 767.98px){
    .clover_description, .clover_tech { background: #5ea94d; margin-top: 0; padding: 30px 0; position: relative; }
    .clover_description:before, .clover_tech:before { background: url(../img/clover/bg_curve.png) no-repeat bottom; position: absolute; content: ""; left: 0; right: 0; background-size: cover; padding: 30%; bottom: 0; }
    .clover_tech .cover_img, .cover_img { margin-top: 0; }
    .clover_feat li { padding-left: 35px; }
    .clover_ftl { padding: 150px 0 0; }
    .clover_avtars_sec figure:nth-child(even) { margin-top: 0; }
    .clover_avtars_sec { background-size: cover; padding: 50px 0; }
}
@media (max-width: 575px){
    .clover_ftl { padding: 100px 0 0; }
    .clover_title h2:before { left: -22%; width: 30px; }
    .clover_title h2:after { right: -22%; width: 30px; }
}