#hero{
    padding: 50px 0;
}

#hero .row{
    align-items: center;
}

#hero .sub{
    text-align: left;
    margin-bottom: 20px;
}

#hero img{
    width: 80%;
    margin: 0 auto;
    display: block;
}

#hero .click{
    margin-top: 50px
}

@media(max-width:991px){
    #hero img{
        width: 100%;
    }
}

@media(max-width:576px){
    #hero .btn-yellow{
        margin-bottom: 20px;
    }
}

/*----------------
Content 1 / Content 2
----------------*/

#content1,
#content2{
    padding: 100px 0;
}

#content1 .sub,
#content2 .sub{
    margin-bottom: 20px;
}

#content1 .click,
#content2 .click{
    margin-top: 50px;
}

#content1 .btn,
#content2 .btn{
    width: fit-content;
}
#content3{
    background: #FAFAFA;
    color: #080E20;
    padding: 70px 0;
}
#content3 .content a{
    color: #080E20;
}
#content3 h2, #content3 h3, #content3 h4, #content3 h5{
    color: #252E48;
}
/*----------------
Tick
----------------*/

#tick{
    padding: 50px 0 30px;
}

#tick .wrap{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#tick .inner{
    width: 230px;
    margin: 0 10px 20px;
    border: 1px solid #F1F4FFB3;
    text-align: center;
    padding: 40px 20px 20px;
}

#tick img{
    width: 50px;
    margin: 0 auto;
    display: block;
    margin-bottom: 20px
}

#tick h3{
    min-height: 60px;
    font-size: 20px;
}

/*----------------
What / Why
----------------*/

#what,
#why{
    padding: 100px 0;
}

#what .row,
#why .row{
    align-items: center;
}

#what img,
#why img{
    width: 80%;
    margin: 0 auto;
    display: block;
}

#what .sub,
#why .sub{
    text-align: left;
    margin-bottom: 20px;
}

#what .click,
#why .click{
    margin-top: 50px;
}

#what .btn,
#why .btn{
    width: fit-content;
}