#hero{
    padding: 100px 0;
    color: #fff;
}

#hero .inner{
    padding: 0 200px;
    margin-bottom: 50px;
}
#hero h1{
    margin: 0 0 20px;
}

#hero p{
    font-size: 20px;
    margin: 0;
}

#hero a{
    color: #fff;
}

#hero a:hover{
    color: #000;
}

@media(max-width:991px){
    #hero .inner{
        padding: 0;
    }
}



#book{
    padding: 50px 0 100px;
    
}

#book .inner{
    height: 100%;
    border: 2px solid #006787;
    border-radius: 20px;
    text-align: center;
    padding: 50px
}

#book h2{
    color: #006787
}

#book .subtitle{
    color: #26555A
}

#book .image{
    position: relative;
    z-index: 100;
    
}

#book .main{
    width: 100%;
    border-radius: 20px;
    z-index: 1;
}

#book .circle{
    position: absolute;
    bottom: -60px;
    right: -60px;
    z-index: -1;
}

@media(max-width:1200px){
    #book .circle{
        width: 456px;
        bottom: -40px;
        right: -40px;
    }
}

@media(max-width:991px){
    #book .circle{
        width: 696px;
        bottom: -70px;
        right: -70px;
    }
}

@media(max-width:767px){
    #book .circle{
        display: none;
    }
}

@media(max-width:576px){
    #book .inner{
        padding: 50px 20px
    }    
}


#map{
    overflow-x: hidden;
}

#map .container-fluid{
    padding: 0;
}

#map .inner{
    padding: 100px 100px 100px 200px
}

#map h2,
#map h3{
    color: #006787
}

#map h3{
    margin: 40px 0 20px
}

#map p{
    color: #26555A;
    font-size: 20px;
}

#map a{
    color: #00B3BF;
    font-size: 17px;
}

#map a:hover{
    color: #000;
}

@media(max-width:1500px){
    #map .inner{
        padding: 100px
    }
}

@media(max-width:1200px){
    #map .inner{
        padding: 50px
    }
    #map iframe{
        height: 300px
    }
}

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