/*======================================
CRITICAL CSS - Above the fold content
======================================*/

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box
}

body {
    background-color: #FFF;
    font-family: Muli,sans-serif;
    font-weight: 400;
    color: #404040;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    font-size: 16px;
    line-height: 1.5
}

a {
    color: #111;
    text-decoration: none
}

img {
    border-style: none;
    height: auto;
    max-width: 100%;
    vertical-align: middle
}

/* Typography - Critical */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 15px;
    font-family: Khand,sans-serif;
    font-weight: 400;
    line-height: 1.1;
    color: #1a1a1a
}

h1 {
    font-size: 66px;
    font-weight: 700
}

h2 {
    font-size: 48px;
    font-weight: 700
}

h3 {
    font-size: 24px;
    font-weight: 700
}

p {
    margin-bottom: 20px
}

/* Layout */
.page-wraper {
    background: #fff
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media(min-width:576px) {
    .container {
        max-width: 540px
    }
}

@media(min-width:768px) {
    .container {
        max-width: 720px
    }
}

@media(min-width:992px) {
    .container {
        max-width: 960px
    }
}

@media(min-width:1200px) {
    .container {
        max-width: 1140px
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px
}

@media(min-width:768px) {
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
        padding-right: 15px;
        padding-left: 15px
    }

    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 15px;
        padding-left: 15px
    }
}

@media(min-width:992px) {
    .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        padding-right: 15px;
        padding-left: 15px
    }

    .col-lg-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
        padding-right: 15px;
        padding-left: 15px
    }

    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
        padding-right: 15px;
        padding-left: 15px
    }

    .col-lg-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
        padding-right: 15px;
        padding-left: 15px
    }

    .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 15px;
        padding-left: 15px
    }
}

/* Header */
.site-header {
    position: relative;
    z-index: 999
}

.main-bar {
    position: relative;
    width: 100%;
    padding: 10px 0;
    transition: all .5s ease
}

.logo-header {
    display: table;
    float: left;
    width: 130px;
    height: 70px;
    vertical-align: middle;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 11
}

.logo-header-inner {
    display: table-cell;
    vertical-align: middle;
    height: 100%
}

    .logo-header-inner .logo-svg {
        filter: invert(1)
    }

    .logo-header-inner img {
        max-width: 70%;
        max-height: 70%
    }

/* Navigation */
.header-nav {
    position: relative;
    padding: 0;
    z-index: 10
}

.navbar-toggler {
    border: none;
    margin-top: 24px;
    margin-bottom: 24px;
    margin-left: 15px;
    margin-right: -10px;
    padding: 12px 10px
}

    .navbar-toggler .icon-bar {
        background: #111;
        height: 3px;
        border-radius: 0;
        display: block;
        width: 22px
    }

        .navbar-toggler .icon-bar + .icon-bar {
            margin-top: 4px
        }

/* Header Style 4 */
.header-style-4 .main-bar {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0
}

.header-style-4 .top-bar {
    padding: 0;
    font-size: 14px;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    background-color: rgba(0,0,0,.2);
    position: relative;
    z-index: 0
}

.header-style-4 .header-nav .nav > li > a {
    color: #fff;
    display: block;
    position: relative;
    font-size: 18px;
    padding: 35px 14px;
    cursor: pointer;
    margin: -10px 0;
    font-weight: 600;
    font-family: Rajdhani,sans-serif;
    text-transform: uppercase
}

/* Buttons */
.site-button {
    outline: none;
    color: #fff;
    padding: 15px 40px;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
    background-color: #d72323;
    border: none;
    font-size: 14px;
    font-weight: 500
}

    .site-button:hover {
        background-color: #1a1a1a;
        color: #fff
    }

/* Section */
.section-full {
    position: relative
}

.section-head {
    margin-bottom: 60px;
    position: relative;
    z-index: 1
}

/* Colors */
.site-text-primary {
    color: #d72323
}

.text-white {
    color: #FFF
}

.bg-white {
    background-color: #FFF
}

.bg-green {
    background-color: #004643
}

/* Spacing */
.p-t80 {
    padding-top: 80px
}

.p-b80 {
    padding-bottom: 80px
}

.p-tb80 {
    padding-top: 80px;
    padding-bottom: 80px
}

.m-b30 {
    margin-bottom: 30px
}

/* Utility */
.d-flex {
    display: flex
}

.justify-content-center {
    justify-content: center
}

.text-center {
    text-align: center
}

.position-relative {
    position: relative
}

.overflow-hide {
    overflow: hidden
}

/* Loading */
.loading-area {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    overflow: hidden;
    background: #fff
}

.loading-box {
    width: 100%;
    height: 100%;
    background-color: #FFF;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    z-index: 9999
}

.loading-pic {
    width: 100%;
    position: absolute;
    top: 50%;
    z-index: 99999;
    text-align: center;
    transform: translateY(-50%)
}

/* Mobile Responsive */
@media(max-width:991px) {
    h1 {
        font-size: 40px
    }

    h2 {
        font-size: 32px
    }

    h3 {
        font-size: 20px
    }

    .section-head {
        margin-bottom: 30px
    }

    .p-t80, .p-tb80 {
        padding-top: 30px
    }

    .p-b80, .p-tb80 {
        padding-bottom: 30px
    }

    .header-nav {
        clear: both;
        margin: 0 -15px;
        border-bottom: 1px solid #E9E9E9
    }

    .navbar-toggler {
        display: block;
        margin-top: 14px;
        margin-bottom: 14px;
        float: right
    }
}

@media(max-width:767px) {
    body {
        font-size: 14px
    }
}

/* Fonts - subset for critical */
@font-face {
    font-family: 'Khand Bold';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/Khand-Bold.ttf") format("truetype")
}

@font-face {
    font-family: 'Khand';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url("../fonts/Khand-Regular.ttf") format("truetype")
}