/*!=========================================================*
* Theme Name: Theme Name
* Author:    Nazmul Hussain
* Author URL: http://www.nazmul.info
* Fiverr URL: fiverr.com/nazmul18
* Upwork URL: fiverr.com/nazmul18
* Email: mailatnazmul@gmail.com;
* Description: Interactive website using Bootstrap ,jQuery
* Tags: Accessibility-ready, Sticky-header, Custom-menu
=============================================================*/


/*===========================================================
 Fonts
============================================================*/
@font-face {
    font-family: 'aktivgrotesk';
    src: url('../fonts/aktivgrotesk.eot');
    src: url('../fonts/aktivgrotesk.eot') format('embedded-opentype'),
        url('../fonts/aktivgrotesk.woff2') format('woff2'),
        url('../fonts/aktivgrotesk.woff') format('woff'),
        url('../fonts/aktivgrotesk.ttf') format('truetype'),
        url('../fonts/aktivgrotesk.svg#aktivgrotesk') format('svg');
}


/*===========================================================
 Common CSS
============================================================*/

body {
    font-size: 13px;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    color: #000;
    background: #fff;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
}

ul {
    padding: 0;
}

label {
    font-size: 11;
}

li,
li:hover,
a:hover,
.btn,
.btn:hover {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

a:hover {
    text-decoration: none !important;
}

*:focus {
    outline: none;
}

img {
    max-width: 100%;
}

strong {
    font-weight: 700;
}

u {
    border-bottom: 1px solid #fff;
    line-height: 1;
    text-decoration: unset;
}

.cboth {
    overflow: hidden;
    clear: both;
}

.left {
    float: left;
}

.right {
    float: right;
}

.tcenter {
    text-align: center;
}

.h100 {
    height: 100%;
}

.h50 {
    height: 50%;
}

.container-fluid {
    padding-left: 80px;
    padding-right: 80px;
}


/*===========================================================
 Placeholder Style
============================================================*/

::-webkit-input-placeholder {
    color: rgba(51, 51, 51, 0.7);
}

:-moz-placeholder {
    color: rgba(51, 51, 51, 0.7);
}

::-moz-placeholder {
    color: rgba(51, 51, 51, 0.7);
    opacity: 1;
    /* Since FF19 lowers the opacity of the placeholder by default */
}

:-ms-input-placeholder {
    color: rgba(51, 51, 51, 0.7);
}



/*===========================================================
Preloader CSS
============================================================*/
.spinner-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background: #fff;
}

.spinner {
    background-color: #065e52;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 100%;
    -webkit-animation: scaleout 1.0s infinite ease-in-out;
    animation: scaleout 1.0s infinite ease-in-out;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    z-index: 9999999;
}

@-webkit-keyframes scaleout {
    0% {
        -webkit-transform: scale(0.0)
    }

    100% {
        -webkit-transform: scale(1.0);
        opacity: 0;
    }
}

@keyframes scaleout {
    0% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }

    100% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
        opacity: 0;
    }
}

/*===========================================================
Hero
============================================================*/
html,
body {
    height: 100%;
}

.header-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 50px;
    z-index: 100;
}

.logo img {
    max-width: 215px;
}

.banner-area {
    background-image: url("../img/banner.jpg");
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    background-position: center center;
}

.menu a {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    padding: 10px 0;
    font-family: 'aktivgrotesk';
}

.menu a:hover {
    color: #ddd;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .6;
    background-image: radial-gradient(960px 960px at 50% 50%, #43607e 0%, #272d33 100%);
    z-index: 2;
}

.banner-area h1 {
    position: absolute;
    z-index: 10;
    /*left: 80px;*/
    bottom: 80px;
    color: #e0e0e0;
    font-size: 53px;
    font-weight: 700;
    letter-spacing: 1.33px;
    line-height: 53.33px;
    text-transform: uppercase;
    font-family: 'aktivgrotesk';
    border-bottom: 4px solid #e0e0e0;
    /*margin-left: 15px;*/
}

.hidden-desktop {
    display: none;
}

/*===========================================================
Vision
============================================================*/
.vision-area {
    background-color: #272833;
    padding-top: 30px;
    padding-bottom: 115px;
}

.vision-left img {
    width: 110px;
}

.vision-left p {
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    margin-top: 40px;
}

.vision-right p {
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    margin-top: 60px;
}

/*===========================================================
Flow
============================================================*/
.flow-area {
    padding-top: 115px;
    padding-bottom: 175px;
    background-color: #272833;
    color: #fff;
}

.single-flow h3 {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    margin-bottom: 15px;
}

.single-flow p {
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

/*===========================================================
About Us
============================================================*/
.about-us-area {
    background-color: #272833;
    padding-bottom: 65px;

}

.about-us {
    background-image: url("../img/dubai-skyline.jpg");
    -webkit-background-size: cover;
    background-size: cover;
    height: 584px;
    padding: 20px;
    position: relative;
}

.about-us h3 {
    position: relative;
    z-index: 2;
}

.contact-overlay,
.values-overlay,
.about-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #272833;
    opacity: 0;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

.contact-us,
.values,
.about-us {
    position: relative;
}

.contact-us:hover .contact-overlay,
.values:hover .values-overlay,
.about-us:hover .about-overlay {
    opacity: .8;
}

.values {
    padding-bottom: 7px;
}

.values-bg {
    background-image: url("../img/values.jpg");
    -webkit-background-size: cover;
    background-size: cover;
    padding: 20px;
    height: 100%;
}

.contact-us {
    padding-top: 7px;
}

.contact-us-bg {
    background-image: url("../img/contact.jpg");
    -webkit-background-size: cover;
    background-size: cover;
    padding: 25px;
}

.values h3,
.contact-us h3,
.about-us h3 {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'aktivgrotesk';
    margin: 0;
    position: relative;
    z-index: 10;

}

.contact-form {
    position: relative;
    z-index: 10;
    opacity: 0;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

.about-us-text {
    opacity: 0;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    position: absolute;
    bottom: 20px;
    left: 10px;
    right: 10px;
    z-index: 10;
    color: #fff;
}

.about-us-text h3 {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

.about-us-text p {
    margin: 0;
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
}

.values-text {
    opacity: 0;
    margin-top: 40px;
    z-index: 10;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
}

.contact-us:hover .contact-form,
.values:hover .values-text,
.about-us:hover .about-us-text {
    opacity: .8;
}


.values-text ul {
    margin: 0;
    padding: 0;
}

.values-text li {
    list-style: none;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

.values-text p {
    margin-top: 20px;
    margin-bottom: 0;
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
}

button {
    padding: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
}

.about-right,
.about-left {
    width: 50%;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
}

.contact-form p {
    margin-bottom: 7px;
    padding-right: 12px;
}

.contact-form p:last-child {
    padding-right: 0;
}

.contact-form p input {
    height: 32px;
    border: 1px solid #ffffff;
    background-color: rgba(240, 240, 240, 0.8);
    width: 100%;
    padding-left: 10px;
}

.contact-form p textarea {
    padding-left: 10px;
    width: 100%;
    height: 69px;
    border: 1px solid #ffffff;
    background-color: rgba(240, 240, 240, 0.8);
}

.contact-form {
    position: absolute;
    bottom: 15px;
    left: 20px;
    right: 20px;
}

/*===========================================================
 Footer
============================================================*/
.footer-area {
    background-color: #272833;
    padding-bottom: 40px;
}

.footer-logo img {
    width: 110px;
}

.contact-info,
.address {
    margin-top: 10px;
}

.address,
address,
.contact-info p,
.contact-info a {
    color: #a8b5c1;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.33px;
    line-height: 20px;
    margin-bottom: 0;
}

/*===========================================================
 Scroll Animate
============================================================*/

.js .animate-box {
    opacity: 0;
}

/*===========================================================
 Scroll To Top
============================================================*/

.go-top {
    bottom: 15px;
    display: none;
    position: fixed;
    right: 30px;
    z-index: 999;
}

.go-top img {
    width: 35px;
}

.go-top span {
    /*background-color: #4285F4;*/
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
    float: right;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    padding: 5px 10px;
}

.go-top span:hover {
    color: #fff;
}

/*
Responsive
==========================*/
@media (min-width: 1400px) {
    .banner-area{
        background-attachment: fixed;
    }
}
@media (max-width: 991px) {
    .about-us {
        height: auto;
        overflow: hidden;
    }

    .about-right,
    .about-left {
        padding: 0;
        width: 100%;
    }

    .about-left {
        margin-top: 30px;
    }

    .about-right {
        margin-top: 20px;
    }

    .about-left h3 {
        line-height: 24px;
        font-size: 14px;
    }

    .about-right p {
        font-size: 14px;
    }

    .about-us {
        height: auto;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .about-us-text,
    .values-text,
    .contact-form {
        opacity: 1;
        position: relative;
        left: 0;
        right: 0;
        bottom: unset;
    }

    .contact-overlay,
    .values-overlay,
    .about-overlay {
        opacity: .8;
    }

    .contact-form,
    .values-text,
    .about-us-text {
        opacity: 1;
    }

    .contact-us {
        margin-top: 6px;
    }

    .contact-form {
        margin-top: 40px;
    }

    .contact-form p {
        margin-bottom: 10px;
    }

    .contact-form p input {
        height: 48px;
        font-size: 14px;
    }

    .contact-form p textarea {
        height: 200px;
    }

    .h50 {
        height: auto;
    }

    .vision-right p {
        margin-top: 40px;
        line-height: 24px;
        font-size: 14px;
    }

    .vision-left p {
        margin-bottom: 0;
        font: 16px;
        line-height: 24px;
    }

    .vision-area {
        padding-bottom: 40px;
    }

    .flow-area {
        padding-top: 40px;
        padding-bottom: 80px;
    }

    .address,
    address,
    .contact-info p,
    .contact-info a {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.4px;
        line-height: 26px;
    }

    .footer-logo img {
        width: 160px;
    }

    .banner-area {
        min-height: 450px;
    }

    .banner-area h1 {
        color: #e0e0e0;
        font-size: 40px;
        letter-spacing: 1px;
        line-height: 40px;
    }

    .logo img {
        max-width: 165px;
    }
}

@media (max-width: 767px) {
    .hidden-mobile {
        display: none;
    }

    .hidden-desktop {
        display: block;
    }

/*    .banner-area a.hidden-desktop {
        position: absolute;
        bottom: 40px;
        z-index: 20;
        margin-top: 40px;
        padding-right: 15px;
    }

    .banner-area h1 {
        bottom: 130px;
    }*/

    .single-flow {
        margin-bottom: 40px;
    }

    .single-flow p {
        margin-bottom: 0;
    }

    .flow-area {
        padding-bottom: 40px;
    }

    .contact-us-bg {
        padding: 20px;
    }

    address {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}