@import url('https://fonts.googleapis.com/css?family=Montserrat:200,400,500,600,700');
html { font-size: 16px; }
body { font-family: 'Montserrat', sans-serif; color: #000; }
a, button, input { transition: all linear 0.2s; outline: none; }
a:hover { text-decoration: none; }
a:focus, button:focus, input:focus { outline: none; }
a { color: #000;}
ul { padding: 0; margin: 0;}
ul li { list-style: none;}
h1 { color: #406161; font-weight: 700; font-size: 48px;}
p { font-weight: 400;}

.banner { height: 100vh; background: url("../images/banner.jpg") no-repeat top center; background-size: cover; position: relative;}
.banner-content h2 { font-size: 48px; color: #fff; margin: 0; font-weight: 200; position: absolute; top: 50%;  transform: translateY(-30%); left: 0; right: 0; text-align: center; }
.banner-content h2 span { font-weight: 700; display: block; }
.top-header p { margin: 0; display: inline-block; color: #fff; font-size: 10px; text-transform: uppercase; margin-left: 25px; }
.top-header a { color: #fff; }
header { background: rgba(31,50,49,0.5); padding: 4px 0; border: solid 1px rgba(255,255,255,0.08); border-right: none; border-left: none; position: relative; z-index: 3; }
header.sticky { background: rgba(31,50,49,0.9); }
header.sticky .logo img { filter: brightness(100); }
.banner nav { margin-top: 10px; }
.banner nav ul li { float: left; margin-left: 25px; }
.banner nav ul li a { font-size: 14px; font-weight: 400; text-transform: uppercase; color: #fff; }

.aboutus .about-img { position: absolute; top: 0; }
.aboutus h1 { margin-top: 75px; position: relative; margin-bottom: 15px; }
.aboutus h1:before { content: '';  width: 12px; height: 12px; background: #ab791e; border-radius: 100%; display: inline-block; margin-right: 8px; }
.aboutus p { font-size: 14px; }
.aboutus .card-header { background: transparent; border-radius: none;}
.aboutus .card-header button { font-size: 14px; font-weight: 600; color: #406161; text-decoration: none; text-transform: uppercase; }

.services { background: #f5f7f9; }
.service-card h3 { color: #406161; font-size: 16px; text-transform: uppercase; font-weight: 600;}
.service-card p { font-size: 12px; line-height: 20px; }
.service-card figcaption { padding: 15px 10px 0 10px; }
.service-card figcaption p { margin: 0; }
.services .owl-next, .services .owl-prev { position: absolute; top: 50%; transform: translateY(-50%); }
.services .owl-next { right: -45px; }
.services .owl-prev { left: -45px; }
.services .owl-theme .owl-nav [class*='owl-']:hover { background: transparent; }

.work figure { margin: 0; position: relative; }
.work figcaption { position: absolute; background: rgba(0,0,0,0.5); color: #fff; font-size: 12px; bottom: 0; width: 100%; text-align: center;
    padding: 6px 0;  }

.cta-contact { background: #ab791e; }
.cta-contact h3 { margin: 0; color: #fff; font-size: 24px; font-weight: 500;}
.cta-contact a { display: block; border: solid 1px #fff; text-transform: uppercase; text-align: center; color: #fff; font-size: 16px; font-weight: 500; padding: 5px 0; }
.cta-contact a:hover { background: #fff; color: #ab791e; }

.client-carousel.owl-carousel .owl-item img { display: inline-block; width: auto; }

.contact-us { background: #384254; }
.contact-us h1 { color: #fff; font-weight: 500; font-size: 35px; position: relative; margin: 0; padding: 5px 0; }
.contact-us h1:after { content: ''; width: 1px; height: 100%; position: absolute; background: rgba(255,255,255,0.1); right: 12px; top: 0; }
.contact-form [class^="col-"], .contact-form  [class*=" col-"] { padding: 0 5px; }
.contact-form input[type="submit"] { margin: 0 10px; width: 85%; cursor: pointer; border: none; background: #c18820; color: #fff; text-align: center; font-weight: 600; text-transform: uppercase; font-size: 14px; padding: 0; height: 92px; }
.contact-form input[type="submit"]:hover { background: #fff; color: #c18820; }
.contact-form input[type="text"], .contact-form input[type="tel"] { background: rgba(255,255,255,0.1); }
.contact-form input { font-size: 14px; border: none; border-radius: 0; outline: none; color: #fff; }
.contact-form .form-control:focus { color: #fff; box-shadow: none; }
.contact-form input::-webkit-input-placeholder { color: #999; }
.contact-form input::-moz-placeholder { color: #999; }
.contact-form input:-ms-input-placeholder { color: #999; }
.contact-form input:-moz-placeholder { color: #999; }

.copyright { border-top: solid 1px rgba(255,255,255,0.1); }
.copyright p { margin: 0; font-size: 12px; color: #fff; opacity: 0.5; padding: 20px 0;}

@media screen and (max-width: 375px) {
    header {
        background: rgba(31,50,49,0.9);
    }
    .logo { 
        display: block;
        text-align: center;
    }
    .banner nav {
        justify-content: center;
    }
    .banner nav ul {
        margin-top: 25px;
    }
    .banner nav ul li {
        margin-left: 0;
        line-height: 42px;
        text-align: center;
    }
    .aboutus .about-img {
        width: 92%;
    }
    .aboutus h1 {
        margin-top: 0;
    }
    .contact-form [class^="col-"], .contact-form [class*=" col-"] {
        padding: 0 15px;
    }
    .contact-us h1 {
        text-align: center;
        margin-bottom: 25px;
    }
    .contact-us h1:after, .contact-us h1 br {
        display: none;
    }
    .contact-form input[type="submit"] {
        margin: 0;
        width: 100%;
        height: 42px;
    }
    .client-carousel.owl-carousel.owl-drag .owl-item { text-align: center; }
    .cta-contact h3 { text-align: center; font-size: 20px;  }
    .cta-contact a { margin-top: 20px; }
}

/*------- common classes --------*/
.section-padding { padding: 80px 0;}
.owl-theme .owl-dots .owl-dot span { border-radius: 0; }
.sticky { position: fixed; top: 0;  width: 100%; z-index: 2; }