.top-col{
    background-image: url("../../img/Home/top-banner.png");
    width: 100%;
    height: 540px;
    background-repeat: no-repeat;
    background-position:top center;
    background-size: 100% auto;
}
/* .top-row{
    width: 98%;
    height: 310px;
    margin-bottom: 10%;
    margin-top: 10%;
} */

.green-img1{
    width: 12%;
    position: absolute;
    z-index: 10;
    left: 18%;
    bottom: -10%;
}
.green-img2{
    width: 12%;
    position: absolute;
    z-index: 10;
    right: 36%;
    bottom: -10%;
}
.round-img1{
    width: 55%;
    position: absolute;
    z-index: -10;
    left: 38%;
    bottom: -18%;
}
.round-img2{
    width: 54%;
    position: absolute;
    z-index: 10;
    right: 53.2%;
    bottom: -17.9%;
}
/* .top-left-title1{
    color: white;
    position: absolute;
    bottom: 2%;
    left: 11.5%;
    font-size: 3.5rem;
    z-index: 20;
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
}
.top-left-title2{
    color: white;
    position: absolute;
    bottom: 2%;
    left: 20.5%;
    font-size: 3.5rem;
    z-index: 20;
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
}
.top-right-title1{
    color: white;
    position: absolute;
    bottom: -12%;
    right: 17%;
    font-size: 2.1rem;
    z-index: 20;
    transform: rotate(270deg);
	transform-origin: left top 0;
}
.top-right-title2{
    color: white;
    position: absolute;
    bottom: -17%;
    right: -4%;
    font-size: 3.2rem;
    z-index: 20;
    transform: rotate(270deg);
	transform-origin: left top 0;
}
.topleft-line{
    width: 20%;
    position: absolute;
    z-index: 20;
    bottom: -24.5%;
    left: 16%;
}
.topright-line{
    width: 15%;
    position: absolute;
    z-index: 20;
    bottom: -28%;
    right: 35%;
}
.top-right-img1{
    width: 100%;
    position: absolute;
    left: -50%;
    top: -10%;
}
.top-right-img2{
    width: 170%;
    position: absolute;
    right: -70%;
    bottom: -6.5%;
} */
.small-text{
    padding: 0;
    text-align: center;
}
.card-font{
    color: #698E86;
    display:block;
}
.icon-block{
    width: 100%;
    margin-top:20px;
}
.icon-img{
    height: 50px;
}
.card-text{
    margin-top: 50px;
}
.medium-right{
    width:26%;
    position:absolute;
    right:-38%;
    top:-25%;
}
.medium-right-img{
    width: 100%;
    top: 40px;
    position: relative;
}
.medium-service-img{
    width: 70%;
    position: relative;
    left: 15%;
    bottom: 0;
}
.medium-row{
    width: 79%;
    /* background-image: url("../../img/Home/gray-bg.png");
    background-repeat: no-repeat;
    background-position:top center;
    background-size: 100% 100%; */
    position: relative;
    margin-bottom: 30px;
    background-color: rgb(243, 243, 243);
}
.medium-card{
    width: 100%;
}
.medium-card-img{
    width:100%;
}
.medium-left{
    position: relative;
}
.medium-title{
    position: absolute;
    top: 5%;
    right:-10%;
    width: 20px;
    margin: 0 auto;
    line-height: 40px;
}
.bottom-block{
    width: 79%;
    /* background-image: url("../../img/Home/gray-bg.png");
    background-repeat: no-repeat;
    background-position:top center;
    background-size: 100% auto; */
    position: relative;
    margin-top: 8%;
    margin-bottom: 100px;
    background-color: rgb(243, 243, 243);
}
.bottom-img{
    width: 100%;
}
.bottom-img-block1{
    background-image: url("../../img/Home/bottom1.png");
    width: 90%;
    height: 550px;
    background-repeat: no-repeat;
    background-position:top center;
    background-size: 100% auto;
    height: 300px;
}
.bottom-img-block2{
    background-image: url("../../img/Home/bottom2.png");
    width: 90%;
    height: 550px;
    background-repeat: no-repeat;
    background-position:top center;
    background-size: 100% auto;
    height: 300px;
}
.bottom-img-block3{
    background-image: url("../../img/Home/bottom3.png");
    width: 90%;
    height: 550px;
    background-repeat: no-repeat;
    background-position:top center;
    background-size: 100% auto;
    height: 300px;
}
.bottom-title-block{
    position: absolute;
    top: 0;
    right:-10%;
    width: 20px;
    margin: 0 auto;
    line-height: 40px;
}
.medium-num-img{
    width: 70%;
    margin-bottom: 10%;
}
.medium-num-card{
    background-color: #E5E8E8;
    border-radius:25px;
    width: 100%;
    position: relative;
    margin-left: 1%;
    margin-right: 1%;
    text-align: center;
    height: 96%;
    padding: 15px;
    margin-bottom: 25%;
}

.bottom-text{
    width: 50%;
    position: absolute;
    right: 0;
    top:7%;
}
.bottom-title{
    position: absolute;
    right: 0;
    bottom:15%;
    letter-spacing:9px;

}
.bottom-right-block{
    position: absolute;
    width: 36%;
    bottom: 0;
    right:-40%;
}
.medium-phone{display: none;}
.bottom-phone{display: none;}
.top-paid{display:none;}
/* pad size */
@media screen and (min-width: 762px) and (max-width: 1024px) {
    .medium-right-img{
        width: 100%;
        top: 400px;
        position: relative;
    }
    .card-font{
        font-size: 2rem;
    }
    .icon-img{
        height: 40px;
    }
    .card-text{
        margin-top:20px;
    }

    .top-row{display:none;}
    .top-paid{display:inline;}
    .top-paid{
        width: 100%;
        height: 100px;
    }
    .top-paid-block{
        width: 79%;
        margin-bottom: 20px;
        position: relative;
        left:-1.8%;
    }
    .top-paid-img{
        width: 100%;
    }
    .green-paid-img1{
        position: absolute;
        bottom: -6%;
        left: -8.5%;
        width: 50%;
    }
    .green-paid-img2{
        position: absolute;
        top: 43%;
        left: 42%;
        width: 50%;
        transform: rotate(180deg);
	    transform-origin: left top 0;

    }
    .top-paid-center-block1{
        width: 20%;
        height: 30%;
        bottom: 0;
        left: 38.5%;
        font-size: 2.8rem;
        position: absolute;
        z-index: 20;
    }
    .top-paid-center-block2{
        width: 20%;
        height: 80%;
        top: 0;
        left: 38.5%;
        font-size: 2.8rem;
        position: absolute;
        z-index: 20;
    }
    .top-title-paid{
        color: white;
        position: absolute;
        z-index: 20;
        writing-mode: vertical-lr;
        -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: vertical-lr;
    }
    .top-title-paid1{
        bottom: -2%;
        left: -37%;
        font-size: 2.8rem;
    }
    .top-title-paid2{
        bottom: -2%;
        left: 3.5%;
        font-size: 2.8rem;
    }
    .top-title-paid3{
        top: 1%;
        left: -32.5%;
        font-size: 2.8rem;
    }
    .top-title-paid4{
        top: 1%;
        left: 12.5%;
        font-size: 2.8rem;
    }
    
    

}

/* iphone and big screen phones */
@media screen and (min-width: 415px) and (max-width: 767px) {
    .card-text{
        margin-top:20px;
    }
    .card-font{
        font-size: 2rem;
    }
    .icon-img{
        height: 40px;
    }
    .top-row{display:none;}
    .top-paid{display:inline;}
    .top-paid{
        width: 100%;
        height: 100px;
    }
    .top-paid-block{
        width: 79%;
        margin-bottom: 20px;
        position: relative;
        left:-1.8%;
    }
    .top-paid-img{
        width: 100%;
    }
    .green-paid-img1{
        position: absolute;
        bottom: -6%;
        left: -8.5%;
        width: 50%;
    }
    .green-paid-img2{
        position: absolute;
        top: 43%;
        left: 42%;
        width: 50%;
        transform: rotate(180deg);
	    transform-origin: left top 0;

    }
    .top-paid-center-block1{
        width: 20%;
        height: 30%;
        bottom: 0;
        left: 38.5%;
        font-size: 2.8rem;
        position: absolute;
        z-index: 20;
    }
    .top-paid-center-block2{
        width: 20%;
        height: 80%;
        top: 0;
        left: 38.5%;
        font-size: 2.8rem;
        position: absolute;
        z-index: 20;
    }
    .top-title-paid{
        color: white;
        position: absolute;
        z-index: 20;
        writing-mode: vertical-lr;
        -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: vertical-lr;
    }
    .top-title-paid1{
        bottom: -2%;
        left: -37%;
        font-size: 2.8rem;
    }
    .top-title-paid2{
        bottom: -2%;
        left: 3.5%;
        font-size: 2.8rem;
    }
    .top-title-paid3{
        top: 1%;
        left: -32.5%;
        font-size: 2.8rem;
    }
    .top-title-paid4{
        top: 1%;
        left: 12.5%;
        font-size: 2.8rem;
    }
    
    

}

/* other phones */
@media screen and (min-width: 320px) and (max-width: 414px) {
    .medium-phone{display: inline;}
    .bottom-phone{display: inline;}
    .medium-right{display: none;}
    .medium-row{display: none;}
    .bottom-block{display: none;}

    .medium-title-phone{
        width: 100%;
        background-color: #E5E8E8;
        border-radius: 10px;
        margin-bottom: 20px;
    }
    .medium-card-phone{
        padding-top: 20px;
    }
    .card-up{
        display: flex;
    }
    .card-title-phone{
        width: 30%;
    }
    .card-icon-phone{
        width: 25%;
    }
    .icon-img-phone{
        width: 25px;
    }
    .card-num-img{
        width: 45px;
        position:absolute;
        right: 0;
        bottom: 0;
    }
    .card-text-phone{
        margin-top:10px;
        padding-bottom: 10px;
        border-bottom: 2px  solid #698E86;
    }
    .card-font{
        font-size: 2rem;
    }
    .icon-img{
        height: 40px;
    }
    .card-text{
        margin-top:20px;
    }

    .top-row{display:none;}
    .top-paid{display:inline;}
    .top-paid{
        width: 100%;
        height: 100px;
    }
    .top-paid-block{
        width: 100%;
        margin-bottom: 20px;
        position: relative;
        left:-1.8%;
    }
    .top-paid-img{
        width: 100%;
    }
    .green-paid-img1{
        position: absolute;
        bottom: -6%;
        left: -8.5%;
        width: 50%;
    }
    .green-paid-img2{
        position: absolute;
        top: 43%;
        left: 42%;
        width: 50%;
        transform: rotate(180deg);
	    transform-origin: left top 0;

    }
    .top-paid-center-block1{
        width: 20%;
        height: 30%;
        bottom: 0;
        left: 38.5%;
        position: absolute;
        z-index: 20;
    }
    .top-paid-center-block2{
        width: 20%;
        height: 80%;
        top: 0;
        left: 38.5%;
        position: absolute;
        z-index: 20;
    }
    .top-title-paid{
        color: white;
        position: absolute;
        z-index: 20;
        writing-mode: vertical-lr;
        -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: vertical-lr;
    }
    .top-title-paid1{
        bottom: -2%;
        left: -39%;
        font-size: 1.6rem;
    }
    .top-title-paid2{
        bottom: -2%;
        left: 3.5%;
        font-size: 1.6rem;
    }
    .top-title-paid3{
        top: 1%;
        left: -34.5%;
        font-size: 1.6rem;
    }
    .top-title-paid4{
        top: 1%;
        left: 12.5%;
        font-size: 1.6rem;
    }
    
    

}

/* small size phones */
@media screen and (max-width: 319px) {
    .medium-phone{display: inline;}
    .bottom-phone{display: inline;}
    .medium-right{display: none;}
    .medium-row{display: none;}
    .bottom-block{display: none;}

    .medium-title-phone{
        width: 100%;
        background-color: #E5E8E8;
        border-radius: 10px;
        margin-bottom: 20px;
    }
    .medium-card-phone{
        padding-top: 20px;
    }
    .card-up{
        display: flex;
    }
    .card-title-phone{
        width: 30%;
    }
    .card-icon-phone{
        width: 25%;
    }
    .icon-img-phone{
        width: 25px;
    }
    .card-num-img{
        width: 45px;
        position:absolute;
        right: 0;
        bottom: 0;
    }
    .card-text-phone{
        margin-top:10px;
        padding-bottom: 10px;
        border-bottom: 2px  solid #698E86;
    }
    .card-font{
        font-size: 2rem;
    }
    .icon-img{
        height: 40px;
    }
    .card-text{
        margin-top:20px;
    }

    .top-row{display:none;}
    .top-paid{display:inline;}
    .top-paid{
        width: 100%;
        height: 100px;
    }
    .top-paid-block{
        width: 100%;
        margin-bottom: 20px;
        position: relative;
        left:-1.8%;
    }
    .top-paid-img{
        width: 100%;
    }
    .green-paid-img1{
        position: absolute;
        bottom: -6%;
        left: -8.5%;
        width: 50%;
    }
    .green-paid-img2{
        position: absolute;
        top: 43%;
        left: 42%;
        width: 50%;
        transform: rotate(180deg);
	    transform-origin: left top 0;

    }
    .top-paid-center-block1{
        width: 20%;
        height: 30%;
        bottom: 0;
        left: 38.5%;
        position: absolute;
        z-index: 20;
    }
    .top-paid-center-block2{
        width: 20%;
        height: 80%;
        top: 0;
        left: 38.5%;
        position: absolute;
        z-index: 20;
    }
    .top-title-paid{
        color: white;
        position: absolute;
        z-index: 20;
        writing-mode: vertical-lr;
        -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: vertical-lr;
    }
    .top-title-paid1{
        bottom: -2%;
        left: -37%;
        font-size: 1.5rem;
    }
    .top-title-paid2{
        bottom: -2%;
        left: 3.5%;
        font-size: 1.5rem;
    }
    .top-title-paid3{
        top: 1%;
        left: -32.5%;
        font-size: 1.5rem;
    }
    .top-title-paid4{
        top: 1%;
        left: 12.5%;
        font-size: 1.5rem;
    }
    
    

}