@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
:root{
    --main-bg-color: #000039;
    --main-text-color: #f9ca2e;
    --main-title-font: 'Playfair Display', serif;
    
}
a.navbar-brand{
    font-family: var(--main-title-font);
    font-weight: bold;
    padding:0;
}
a.navbar-brand .dot{
    color: var(--main-text-color);
}
#mainNav{
    background-color: var(--main-bg-color);
}
header{
    background-image: url(../img/mainbanner.png);
    height: calc(100vh - 57px);
    background-size: cover;
    margin-top: 57px;
    color:var(--main-text-color);
    position:relative;
}
header button.lead{
    color:var(--main-text-color);
    background-color: var(--main-bg-color);
    border:none;
    font-size: 75%;
    padding:10px 15px;
    letter-spacing: 1px;
    outline:none;
}
h1{
    font-family: var(--main-title-font);
    text-transform: uppercase;
    font-size: 5em;
}
header p.lead{
    font-family: var(--main-title-font);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 7px;
}
header>div{
    position: relative;
    top: calc(50% - 107px);
}
#about{
    background-image: url(../img/aboutbanner.png);
    background-size: cover;
}
section {
    padding: 150px 0;
}
#about .row>div {
    background-color: var(--main-bg-color);
    color:var(--main-text-color);
}
section h2 {
font-family: var(--main-title-font);
text-transform: uppercase;
}
section#services,
section#work {
    padding: 70px 0 0;
}
.container-fluid {
    overflow:hidden;
}
.hadalzone {
    margin-right: -30px;
    margin-left: -30px;
}
#services p:nth-of-type(1),
#work p:nth-of-type(1) {
    margin-bottom: 4rem;
}
#work{
    background-color: var(--main-bg-color);
    color:#fff;
}
.p-relative{
    position: relative;
}
.p-relative .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/overlay-blue.png);
}
.p-relative .overlay>span {
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    margin: auto;
    text-align: center;
    height: 3em;
    color: #FFF;
    font-family: var(--main-title-font);
    font-size: 2rem;
}
section#memebrship{
    padding: 70px 0;
}
section#contact{
    padding: 40px 0;
}
#contact{
    background-image: url(../img/contact.png);
    color:#fff;
    background-size: cover;
}
input, button[type='submit']{
    width: 70%;
    border:none;
    padding: 6px;
    background: #111;
    color:#fff;
}
#contact button[type='submit']{
    outline:none;
    cursor: pointer;
}
input{
    background:#fff6;
    padding: 8px;
}
input::placeholder{
    color:#fff;
}

section#map,
section#footer{
    padding: 0;
}
#footer{
    background-color: var(--main-text-color);
}
#footer p{
    color: #000;
    line-height: 64px;
    margin: 0;

}
i.fa-facebook{
    display: inline-block;
    border-radius: 60px;
    box-shadow: 0px 0px 2px #888;
    padding: 0.4em 0.60em;
    background: #000;
    color: #fff;
}
i.fa-whatsapp,i.fa-google-plus{
    display: inline-block;
    border-radius: 60px;
    box-shadow: 0px 0px 2px #888;
    background: #000;
    color: #fff;
    padding: 0.4em 0.45em;
}
i.fa-instagram{
    display: inline-block;
    border-radius: 60px;
    box-shadow: 0px 0px 2px #888;
    background: #000;
    color: #fff;
    padding: 0.4em 0.50em;
}

.nav-link.js-scroll-trigger.active{
    color: rgba(255,255,255,.5) !important;
}