#hero{
    padding: 100px 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#hero h1{
    color: #003F40;
    margin: 0;
}

#hero p{
    color: #343434;
    font-size: 17px;
    margin: 28px 0 40px;
}

#hero .inner{
    background: #fff;
    padding: 50px;
    border-radius: 20px;
}

@media(max-width:991px){
    #hero{
        background-image: none!important;
        padding: 0;
    }
    #bgImage {
        height: 300px;
        background-size: cover;
        background-position: right;
        margin: 0 auto;
        border-radius: 50px;
        width: 93%;
        background-position-x: 85%;
        background-repeat: no-repeat;
    }
}

@media(max-width:576px){
    #hero .inner{
        padding: 50px 15px;
    }
}


#mainContent{
    padding: 50px 0;
}

#mainContent .row{
    justify-content: space-between;
}

#mainContent h2,
#mainContent h3,
#mainContent h4,
#mainContent h5{
    color: #006787
}

#mainContent .inner{
    border: 2px solid #006787;
    border-radius: 20px;
    padding: 20px;
}

#mainContent .btn{
    width: 100%;
}

@media(max-width:1200px){
    #mainContent .inner{
        width: 330px;
        margin: 0 auto;
        display: block;
    }
}

@media(max-width:576px){
    #mainContent .inner{
        width: 100%;
    }
}