.bg-block{
    background-color: #fbfdfc;
    width: 100%;
    height: 580px;
    background-size: 80% auto;
    border-radius: 20px;
    border-style:solid;
    border-color:rgb(158, 180, 169);
    margin:0;
}
.pages-block{
    margin:0 5% 0 5%;
    width: 100%;
}
.page-block{
    width: 90%;
    margin:0 5% 0 5%;
}
.page-title{
    margin-top: 5%;
}
.tab-btn{
    font-size: 1.4rem;
}
.tab-btn:link{
    color: #B6C8C4;
}
.tab-btn:hover{
    color: #6B8F86!important;
}
.tab-btn:active{
    color: #6B8F86;
}
.border-left{
    border-left:2px solid #6B8F86!important;
}
.border-right{
    border-right:2px solid #6B8F86!important;
}
.padding-left0{
    padding-left:0;
}
.padding-right0{
    padding-right:0;
}
.icon-block{
    border:2px solid #6B8F86;
    border-radius: 15px;
}

.icon1-img{
    width: 100%;
    position: relative;
    top: 4px;
}
.icon2-img{
    width: 86%;
    position: relative;
    top: 3px;
}
.icon3-img{
    width: 105%;
    position: relative;
    top: 4px;
}
.icon4-img{
    width: 95%;
    position: relative;
    top: 1px;
}
.icon5-img{
    width: 90%;
    position: relative;
    top: 1px;
}
.arrow-img{
    width: 86%;
    position: relative;
    top: 3px;
}

.bottom-text-block{
    margin-top: 5%;
}
.page2-img{
    width: 285px;
    margin-top: 5%;
    margin-bottom: 5%;
}
.page3-img{
    margin-top: 30px;
    width: 100%;
    max-width: 1100px;
    
}
.page4-img{
    margin-top: 10%;
    width: 100%;
}
.page5-img{
    width: 110%;
}
.page6-img{
    width: 105%;
}
.page6-text-block p{
    margin:0;
}
.page7-img{
    margin-top: 2.5%;
    width: 700px;
    margin-bottom: 2.5%;
}
.arrow-class1{
    position: absolute;
    width: 10%;
    left:18%;
    top:55%;
}
.arrow-class2{
    position: absolute;
    width: 10%;
    left:36%;
    top:55%;
}
.arrow-class3{
    position: absolute;
    width: 10%;
    left:58%;
    top:55%;
}
.arrow-class4{
    position: absolute;
    width: 10%;
    left:78%;
    top:55%;
}
.arrow-class5{
    position: absolute;
    width: 10%;
    left:18%;
    top:55%;
}
.arrow-class6{
    position: absolute;
    width: 10%;
    left:38%;
    top:55%;
}
.arrow-class7{
    position: absolute;
    width: 10%;
    left:57%;
    top:55%;
}
.arrow-class8{
    position: absolute;
    width: 10%;
    left:77%;
    top:55%;
}
.line1-img{
    width:30%;
    
}
.line2-img{
    width:30%;
    
}
.arrow-icon{
    width:60%;
    
}
.nav-link{
    color: #B6C8C4!important;
}
.college-text1{
    margin-left:30px;
}
.college-text2{
    margin-left:30px;
}

/* pad size */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .border-left{
        border-left:0px !important;
    }
    .border-right{
        border-right:0px !important;
    }
    .topic-1{
        margin-left: 25%;
        text-align:center;
        border-left:2px solid #6B8F86!important;
    }
    .topic-2{
        width: 14%;
        text-align:center;
        border-left:2px solid #6B8F86!important;
        border-right:2px solid #6B8F86!important;
    }
    .topic-3{
        margin-right: 20%;
        text-align:center;
        border-right:2px solid #6B8F86!important;

    }
    .topic-4{
        width: 200px;
        margin-left: 15.7%;
        border-left:2px solid #6B8F86!important;
    }
    .topic-5{
        border-right:2px solid #3c4241!important;
    }
    .topic-6{
        width: 166px;
    }
    .topic-7{
        border-right:2px solid #6B8F86!important;
    }
    .topic-xs{
        -ms-flex-pack: center !important;
        justify-content: center !important;
    }
    .wrapper {
        max-width: 1024px;
        min-width: 768px;
        margin: auto;
        margin-top: 60px;
        width: 100%;
        padding: 30px;
      }
      .logo {
        position: absolute;
        top: 100px;
        left: 30px;
        width: 13.3%;
    }
    .page2-img{
        width: 285px;
        margin-top: 5%;
        margin-bottom: 5%;
    }
    .page3-img{
        margin-top: 5%;
        width: 100%;
        margin-bottom: 5%;
    }
    .page4-img{
        margin-top: 5%;
        width: 100%;
        margin-bottom: 5%;
    }
    .line1-img{
        width:25%;
    }
    .line2-img{
        width:25%;
    }
}

/* iphone and big screen phones */
@media screen and (min-width: 415px) and (max-width: 767px) {
    .bg-block{
        background-color: #fbfdfc;
        width: 100%;
        height: auto;
        background-size: 80% auto;
        border-radius: 20px;
        border-style:solid;
        border-color:rgb(158, 180, 169);
        margin:0;
    }
    .topic-1{
        width: 100%;
        margin-left: 5%;
        border-left:2px solid #6B8F86!important;

    }
    .topic-2{
        width: 100%;
        margin-left: 5%;
        border-left:2px solid #6B8F86!important;
    }
    .topic-3{
        width: 100%;
        margin-left: 5%;
        border-left:2px solid #6B8F86!important;
    }
    .topic-4{
        width: 196px;
        margin-left: 5%;
        border-left:2px solid #6B8F86!important;
    }
    .topic-5{
        width: 30%;
    }
    .topic-6{
        width: 196px;
        margin-left: 5%;
        border-left:2px solid #6B8F86!important;
    }
    .topic-7{
        width: 30%;
    }
    .border-left{
        border-left:0px !important;
    }
    .border-right{
        border-right:0px !important;
    }
    .college-text2{
        margin-left:58px;
    }
    .wrapper {
        max-width: 670px;
        min-width: 415px;
        margin: auto;
        margin-top: 60px;
        width: 100%;
        padding: 30px;
      }
      .logo {
        position: absolute;
        top: 100px;
        left: 30px;
        width: 13.3%;
    }
    .page2-img{
        width: 100%;
        margin-top: 5%;
        margin-bottom: 5%;
    }
    .page3-img{
        margin-top: 5%;
        width: 100%;
        margin-bottom: 5%;
    }
    .page4-img{
        margin-top: 5%;
        width: 100%;
        margin-bottom: 5%;
    }
    .line1-img{
        width:20%;
    }
    .line2-img{
        width:20%;
    }
    .page7-img{
        margin-top: 2.5%;
        width: 100%;
        margin-bottom: 2.5%;
    }
}

/* other phones */
@media screen and (min-width: 320px) and (max-width: 414px) {
    .bg-block{
        background-color: #fbfdfc;
        width: 100%;
        height: auto;
        background-size: 80% auto;
        border-radius: 20px;
        border-style:solid;
        border-color:rgb(158, 180, 169);
        margin:0;
    }
    .topic-1{
        width: 100%;
        margin-left: 5%;
        border-left:2px solid #6B8F86!important;
    }
    .topic-2{
        width: 100%;
        margin-left: 5%;
        border-left:2px solid #6B8F86!important;
    }
    .topic-3{
        width: 100%;
        margin-left: 5%;
        border-left:2px solid #6B8F86!important;
    }
    .topic-4{
        width: 196px;
        margin-left: 5%;
        border-left:2px solid #6B8F86!important;
    }
    .topic-5{
        width: 20%;
    }
    .topic-6{
        width: 196px;
        margin-left: 5%;
        border-left:2px solid #6B8F86!important;
    }
    .topic-7{
        width: 20%;
    }
    .border-left{
        border-left:0px !important;
    }
    .border-right{
        border-right:0px !important;
    }
    .college-text2{
        margin-left:58px;
    }
    .wrapper {
        max-width: 414px;
        min-width: 320px;
        margin: auto;
        margin-top: 60px;
        width: 100%;
        padding: 30px;
      }
      .logo {
        position: absolute;
        top: 100px;
        left: 30px;
        width: 13.3%;
    }
    .page2-img{
        width: 100%;
        margin-top: 5%;
        margin-bottom: 5%;
    }
    .page3-img{
        margin-top: 5%;
        width: 100%;
        margin-bottom: 5%;
    }
    .page4-img{
        margin-top: 5%;
        width: 100%;
        margin-bottom: 5%;
    }
    .line1-img{
        width:20%;
    }
    .line2-img{
        width:20%;
    }
    .page7-img{
        margin-top: 2.5%;
        width: 100%;
        margin-bottom: 2.5%;
    }
}

/* small size phones */
@media screen and (max-width: 319px) {
    .bg-block{
        background-color: #fbfdfc;
        width: 100%;
        height: auto;
        background-size: 80% auto;
        border-radius: 20px;
        border-style:solid;
        border-color:rgb(158, 180, 169);
        margin:0;
    }
    .topic-1{
        width: 100%;
        margin-left: 5%;
        border-left:2px solid #6B8F86!important;
    }
    .topic-2{
        width: 100%;
        margin-left: 5%;
        border-left:2px solid #6B8F86!important;
    }
    .topic-3{
        width: 100%;
        margin-left: 5%;
        border-left:2px solid #6B8F86!important;
    }
    .topic-4{
        width: 196px;
        margin-left: 5%;
        border-left:2px solid #6B8F86!important;
    }
    .topic-5{
        width: 20%;
    }
    .topic-6{
        width: 196px;
        margin-left: 5%;
        border-left:2px solid #6B8F86!important;
    }
    .topic-7{
        width: 20%;
    }
    .border-left{
        border-left:0px !important;
    }
    .border-right{
        border-right:0px !important;
    }
    .college-text2{
        margin-left:58px;
    }
    .wrapper {
        max-width: 320px;
        min-width: 320px;
        margin: auto;
        margin-top: 60px;
        width: 100%;
        padding: 30px;
      }
      .logo {
        position: absolute;
        top: 100px;
        left: 30px;
        width: 13.3%;
    }
    .page2-img{
        width: 100%;
        margin-top: 5%;
        margin-bottom: 5%;
    }
    .page3-img{
        margin-top: 5%;
        width: 100%;
        margin-bottom: 5%;
        margin-left: 5%;
    }
    .page4-img{
        margin-top: 5%;
        width: 100%;
        margin-bottom: 5%;
        margin-left: 5%;
    }
    .line1-img{
        width:20%;
    }
    .line2-img{
        width:20%;
    }
    .page7-img{
        margin-top: 2.5%;
        width: 100%;
        margin-bottom: 2.5%;
    }
}