@font-face {
    font-family: 'FontAwesome';
    src: url(../fonts/fontawesome-webfont.eot?v=4.7.0);
    src: url(../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0) format('embedded-opentype'), url(../fonts/fontawesome-webfont.woff2?v=4.7.0) format('woff2'), url(../fonts/fontawesome-webfont.woff?v=4.7.0) format('woff'), url(../fonts/fontawesome-webfont.ttf?v=4.7.0) format('truetype'), url(../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular) format('svg');
    font-weight: normal;
    font-style: normal
}

.fa {
    display: inline-block;
    font: 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

.fa-search:before {
    content: "\f002"
}

.fa-star:before {
    content: "\f005"
}

.fa-lock::before {
  content: "\f023";
}

.fa-plane:before {
    content: "\f072"
}

.fa-twitter-square:before {
    content: "\f081"
}

.fa-facebook-square:before {
    content: "\f082"
}

.fa-heart-o:before {
    content: "\f08a"
}

.fa-linkedin-square:before {
    content: "\f08c"
}

.fa-thumb-tack:before {
    content: "\f08d"
}

.fa-github-square:before {
    content: "\f092"
}

.fa-twitter:before {
    content: "\f099"
}

.fa-facebook:before {
    content: "\f09a"
}

.fa-github:before {
    content: "\f09b"
}

.fa-rss:before {
    content: "\f09e"
}

.fa-globe:before {
    content: "\f0ac"
}

.fa-pinterest:before {
    content: "\f0d2"
}

.fa-pinterest-square:before {
    content: "\f0d3"
}

.fa-google-plus-square:before {
    content: "\f0d4"
}

.fa-google-plus:before {
    content: "\f0d5"
}

.fa-caret-right:before {
    content: "\f0da"
}

.fa-envelope:before {
    content: "\f0e0"
}

.fa-linkedin:before {
    content: "\f0e1"
}

.fa-github-alt:before {
    content: "\f113"
}

.fa-rss-square:before {
    content: "\f143"
}

.fa-youtube-square:before {
    content: "\f166"
}

.fa-youtube:before {
    content: "\f167"
}

.fa-xing:before {
    content: "\f168"
}

.fa-xing-square:before {
    content: "\f169"
}

.fa-youtube-play:before {
    content: "\f16a"
}

.fa-dropbox:before {
    content: "\f16b"
}

.fa-flickr:before {
    content: "\f16e"
}

.fa-tumblr:before {
    content: "\f173"
}

.fa-tumblr-square:before {
    content: "\f174"
}

.fa-apple:before {
    content: "\f179"
}

.fa-android:before {
    content: "\f17b"
}

.fa-dribbble:before {
    content: "\f17d"
}

.fa-skype:before {
    content: "\f17e"
}

.fa-vimeo-square:before {
    content: "\f194"
}

.fa-behance:before {
    content: "\f1b4"
}

.fa-tencent-weibo:before {
    content: "\f1d5"
}

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

*,
::after,
::before {
    box-sizing: border-box
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent
}

@-ms-viewport {
    width: device-width
}

article,
figcaption,
figure,
footer,
header,
main,
nav,
section {
    display: block
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff
}

[tabindex="-1"]:focus {
    outline: 0 !important
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: .5rem
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit
}

ol,
ul {
    margin-top: 0;
    margin-bottom: 1rem
}

ol ol,
ol ul,
ul ol,
ul ul {
    margin-bottom: 0
}

blockquote {
    margin: 0 0 1rem
}

b {
    font-weight: bolder
}

small {
    font-size: 80%
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

a:hover {
    color: #0056b3;
    text-decoration: underline
}

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none
}

a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
    color: inherit;
    text-decoration: none
}

a:not([href]):not([tabindex]):focus {
    outline: 0
}

figure {
    margin: 0 0 1rem
}

img {
    vertical-align: middle;
    border-style: none
}

label {
    display: inline-block;
    margin-bottom: .5rem
}

button {
    border-radius: 0
}

button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color
}

button,
input,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type="reset"],
[type="submit"],
button,
html [type="button"] {
    -webkit-appearance: button
}

[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
    padding: 0;
    border-style: none
}

output {
    display: inline-block
}

template {
    display: none
}

[hidden] {
    display: none !important
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: .5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit
}

.h1,
h1 {
    font-size: 2.5rem
}

.h2,
h2 {
    font-size: 2rem
}

.h3,
h3 {
    font-size: 1.75rem
}

.h4,
h4 {
    font-size: 1.5rem
}

.h5,
h5 {
    font-size: 1.25rem
}

.h6,
h6 {
    font-size: 1rem
}

.small,
small {
    font-size: 80%;
    font-weight: 400
}

.blockquote {
    margin-bottom: 1rem;
    font-size: 1.25rem
}

.img-fluid {
    max-width: 100%;
    height: auto
}

.figure {
    display: inline-block
}

.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: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.col,
.col-12,
.col-6,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-8,
.col-lg-9,
.col-md-12,
.col-md-3,
.col-md-4,
.col-md-6,
.col-md-8,
.col-md-9 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px
}

.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%
}

.col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%
}

.col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
}

@media (min-width:768px) {
    .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-md-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media (min-width:992px) {
    .col-lg-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-lg-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-lg-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-lg-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-lg-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-lg-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .offset-lg-1 {
        margin-left: 8.333333%
    }
}

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

@media screen and (prefers-reduced-motion:reduce) {
    .btn {
        transition: none
    }
}

.btn:focus,
.btn:hover {
    text-decoration: none
}

.btn.focus,
.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25)
}

.btn.disabled,
.btn:disabled {
    opacity: .65
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer
}

a.btn.disabled {
    pointer-events: none
}

.fade {
    transition: opacity .15s linear
}

@media screen and (prefers-reduced-motion:reduce) {
    .fade {
        transition: none
    }
}

.fade:not(.show) {
    opacity: 0
}

.d-block {
    display: block !important
}

.d-flex {
    display: -ms-flexbox !important;
    display: flex !important
}

.flex-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important
}

.flex-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important
}

.justify-content-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important
}

.justify-content-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important
}

.justify-content-center {
    -ms-flex-pack: center !important;
    justify-content: center !important
}

.justify-content-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important
}

.align-items-center {
    -ms-flex-align: center !important;
    align-items: center !important
}

.m-0 {
    margin: 0 !important
}

.mx-auto {
    margin-right: auto !important
}

.mx-auto {
    margin-left: auto !important
}

.text-right {
    text-align: right !important
}

.text-center {
    text-align: center !important
}

.text-uppercase {
    text-transform: uppercase !important
}

.text-white {
    color: #fff !important
}

.visible {
    visibility: visible !important
}

@media print {

    *,
    ::after,
    ::before {
        text-shadow: none !important;
        box-shadow: none !important
    }

    a:not(.btn) {
        text-decoration: underline
    }

    blockquote {
        border: 1px solid #adb5bd;
        page-break-inside: avoid
    }

    img {
        page-break-inside: avoid
    }

    h2,
    h3,
    p {
        orphans: 3;
        widows: 3
    }

    h2,
    h3 {
        page-break-after: avoid
    }

    @page {
        size: a3
    }

    body {
        min-width: 992px !important
    }

    .container {
        min-width: 992px !important
    }
}


::selection {
    background-color: #46dbf9;
    color: #fff
}

body {
    color: #777;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.625em;
    position: relative
}

ol,
ul {
    margin: 0;
    padding: 0;
    list-style: none
}

select {
    display: block
}

figure {
    margin: 0
}

a {
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s
}

iframe {
    border: 0
}

a,
a:focus,
a:hover {
    text-decoration: none;
    outline: 0
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
    text-decoration: none;
    outline: 0
}

.btn i {
    font-size: 1em;
    line-height: inherit
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
    color: #222;
    line-height: 1.2em !important;
    margin-bottom: 0;
    margin-top: 0;
    font-weight: 600
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-bottom: 0;
    margin-top: 0;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    color: #222
}

h1,
.h1 {
    font-size: 36px
}

h2,
.h2 {
    font-size: 30px
}

h3,
.h3 {
    font-size: 24px
}

h4,
.h4 {
    font-size: 18px
}

h5,
.h5 {
    font-size: 16px
}

h6,
.h6 {
    font-size: 14px;
    color: #222
}

.clear::before,
.clear::after {
    content: " ";
    display: table
}

.clear::after {
    clear: both
}

.mt-10 {
    margin-top: 10px
}

.mt-20 {
    margin-top: 20px
}

.mt-30 {
    margin-top: 30px
}

.mt-40 {
    margin-top: 40px
}

.mb-10 {
    margin-bottom: 10px
}

.mb-20 {
    margin-bottom: 20px
}

.mb-30 {
    margin-bottom: 30px
}

.pt-90 {
    padding-top: 90px
}

.pb-90 {
    padding-bottom: 90px
}

.text-white {
    color: #fff
}

.transition {
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s
}

.text-center {
    text-align: center
}

.flex-column {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.dark {
    color: #000
}

.relative {
    position: relative
}

.overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.section-gap {
    padding: 150px 0
}

@media (max-width:991px) {
    .section-gap {
        padding: 70px 0
    }
}

.section-gap-top {
    padding-top: 150px
}

@media (max-width:991px) {
    .section-gap-top {
        padding-top: 70px
    }
}

.section-gap-bottom {
    padding-bottom: 150px
}

@media (max-width:991px) {
    .section-gap-bottom {
        padding-bottom: 70px
    }
}

.section-title {
    margin-bottom: 80px
}

@media (max-width:991px) {
    .section-title {
        margin-bottom: 40px
    }
}

.section-title h2 {
    margin-bottom: 20px;
    font-size: 36px
}

@media (max-width:413px) {
    .section-title h2 {
        font-size: 30px
    }
}

.section-title p {
    font-size: 16px;
    margin-bottom: 0
}

@media (max-width:991.98px) {
    .section-title p br {
        display: none
    }
}

.alert-msg {
    color: green
}

.buttons.gray:hover,
.primary-btn,
.feature-area .single-feature .title .lnr,
.testimonials-area .owl-thumb-item.active .overlay-grad,
.testimonials-area .owl-thumb-item .overlay-grad:hover,
.single-price:hover .price-btn,
.top-category-widget-area .single-cat-widget:hover .overlay-bg,
.post-content-area .single-post .primary-btn:hover,
.blog-pagination .page-item.active .page-link,
.blog-pagination .page-link:hover,
.widget-wrap .newsletter-widget .bbtns,
.footer-area .single-footer-widget .click-btn {
    background-image: -moz-linear-gradient(0deg, #46dbf9 0%, #204be3 100%);
    background-image: -webkit-linear-gradient(0deg, #46dbf9 0%, #204be3 100%);
    background-image: -ms-linear-gradient(0deg, #46dbf9 0%, #204be3 100%);
    background-image: -o-linear-gradient(0deg, #46dbf9 0%, #204be3 100%)
}

@media (max-width:991px) {
    .download-button {
        -webkit-box-direction: normal !important;
        -webkit-box-orient: vertical !important;
        -webkit-flex-direction: column !important;
        -moz-flex-direction: column !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important
    }
}

.buttons {
    padding: 20px 24px 8px;
    max-width: 225px;
    margin-right: 10px;
    border: 1px solid #ddd;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    background-color: #fff;
    color: #000 !important
}

@media (max-width:991px) {
    .buttons:first-child {
        margin-bottom: 16px
    }
}

.buttons i {
    font-size: 44px;
    padding-right: 20px;
    color: #eee;
    margin-top: -8px
}

.buttons:hover {
    cursor: pointer;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1);
    background-color: #46dbf9;
    color: #fff !important;
    border: 1px solid transparent
}

.buttons:hover a {
    color: #fff
}

.buttons a {
    color: #000
}

.buttons p {
    margin-bottom: 8px !important;
    font-size: 14px;
    line-height: 18px;
    text-align: left
}

.buttons p span {
    font-size: 24px;
    font-weight: 600;
    font-family: "Poppins", sans-serif
}

.buttons.dark {
    background-color: #000;
    color: #fff !important;
    border: 1px solid #000
}

.buttons.dark i {
    color: #fff
}

.buttons.dark a {
    color: #fff
}

.buttons.dark:hover {
    background-color: #46dbf9;
    border: 1px solid transparent
}

.buttons.gray {
    background-color: #393939;
    color: #fff !important;
    border: 1px solid #393939
}

.buttons.gray i {
    color: #fff
}

.buttons.gray a {
    color: #fff
}

.buttons.gray:hover {
    border: 1px solid transparent
}

.primary-btn {
    height: 50px;
    line-height: 50px;
    padding-left: 45px;
    padding-right: 45px;
    border-radius: 0;
    border: 1px solid transparent;
    background-origin: border-box;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    cursor: pointer;
    position: relative
}

.primary-btn:focus {
    outline: none
}

.primary-btn:hover {
    background: transparent;
    color: #46dbf9;
    border-color: #46dbf9
}

.white_bg_btn {
    display: inline-block;
    background: #f9f9ff;
    padding: 0 35px;
    color: #222;
    font-size: 13px;
    font-weight: 400;
    line-height: 34px;
    border-radius: 0;
    outline: none !important;
    box-shadow: none !important;
    text-align: center;
    border: 1px solid #eee;
    cursor: pointer;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s
}

.white_bg_btn:hover {
    background: #46dbf9;
    color: #fff;
    border: 1px solid #46dbf9
}

.overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.sample-text-area {
    background: #fff;
    padding: 100px 0 70px 0
}

.text-heading {
    margin-bottom: 30px;
    font-size: 24px
}

b,
sup,
sub,
u,
del {
    color: #46dbf9
}

h1 {
    font-size: 36px
}

h2 {
    font-size: 30px
}

h3 {
    font-size: 24px
}

h4 {
    font-size: 18px
}

h5 {
    font-size: 16px
}

h6 {
    font-size: 14px
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.5em
}

.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6 {
    color: #777
}

.button-area {
    background: #fff
}

.button-area .border-top-generic {
    padding: 70px 15px;
    border-top: 1px dotted #eee
}

.button-group-area .genric-btn {
    margin-right: 10px;
    margin-top: 10px
}

.button-group-area .genric-btn:last-child {
    margin-right: 0
}


.main-menu {
    padding-top: 20px
}

.main-menu>.row {
    padding: 0 15px
}

#header {
    padding: 0 0 20px 0;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    transition: all .5s;
    z-index: 997
}

.header-scrolled {
    background: rgba(70, 219, 249, .9);
    transition: all .5s
}

@media (max-width:673px) {
    #logo {
        margin-left: 20px
    }
}

#header #logo h1 {
    font-size: 34px;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 3px
}

#header #logo h1 a,
#header #logo h1 a:hover {
    color: #fff;
    padding-left: 10px;
    border-left: 4px solid #46dbf9
}

#header #logo img {
    width: 200px
}

.home-banner-area {
    background: url(https://preview.colorlib.com/theme/appru/img/xhome-banner-bg.jpg.pagespeed.ic._C0nSTOqNy.webp) center;
    background-size: cover
}

@media (max-width:768px) {
    #header #logo h1 {
        font-size: 28px
    }

    .nav-menu,
    .nav-menu * {
        margin: 0;
        padding: 0;
        list-style: none
    }

    .nav-menu ul {
        position: absolute;
        display: none;
        top: 100%;
        left: 0;
        z-index: 99;
        background: rgba(255, 255, 255, .9)
    }

    .nav-menu li {
        position: relative;
        white-space: nowrap
    }

    .nav-menu>li {
        float: left
    }

    .nav-menu li:hover>ul,
    .nav-menu li.sfHover>ul {
        display: block
    }

    .nav-menu ul ul {
        top: 0;
        left: 100%
    }

    .nav-menu ul li {
        min-width: 180px;
        text-align: left
    }

    .sf-arrows .sf-with-ul {
        padding-right: 30px
    }

    .sf-arrows .sf-with-ul:after {
        content: "\f107";
        position: absolute;
        right: 15px;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal
    }

    .sf-arrows ul .sf-with-ul:after {
        content: "\f105"
    }

    #nav-menu-container {
        margin: 0
    }

    .nav-menu a {
        padding: 0 18px;
        margin: 0 -2px;
        text-decoration: none;
        display: inline-block;
        color: #fff;
        font-weight: 500;
        font-size: 15px;
        font-family: "Poppins", sans-serif;
        text-transform: capitalize;
        outline: none
    }

    .nav-menu a:last-child a {
        margin-right: 0;
        padding-right: 0
    }

    .nav-menu ul {
        margin: 24px 0 0 26px;
        padding: 10px;
        box-shadow: 0 0 30px rgba(127, 137, 161, .25);
        background: #fff
    }

    .nav-menu ul li {
        transition: .3s
    }

    .nav-menu ul li>a {
        padding: 10px;
        color: #333;
        transition: .3s;
        display: block;
        font-size: 12px;
        text-transform: none
    }

    .nav-menu ul li:hover a {
        color: #46dbf9
    }

    .nav-menu ul ul {
        margin: 0
    }

    #mobile-nav-toggle {
        position: fixed;
        right: 15px;
        z-index: 999;
        top: 22px;
        border: 0;
        background: none;
        font-size: 24px;
        display: none;
        transition: all .4s;
        outline: none;
        cursor: pointer
    }

    @media (max-width:767px) {
        #mobile-nav-toggle {
            top: 22px
        }
    }

    #mobile-nav-toggle i {
        color: #fff;
        font-weight: 900
    }

    @media (max-width:960px) {
        #mobile-nav-toggle {
            display: inline
        }

        #nav-menu-container {
            display: none
        }
    }

    #mobile-nav {
        position: fixed;
        top: 0;
        padding-top: 18px;
        bottom: 0;
        z-index: 998;
        background: rgba(0, 0, 0, .8);
        left: -260px;
        width: 260px;
        overflow-y: auto;
        transition: .4s
    }

    #mobile-nav ul {
        padding: 0;
        margin: 0;
        list-style: none
    }

    #mobile-nav ul li {
        position: relative
    }

    #mobile-nav ul li a {
        color: #fff;
        font-size: 13px;
        text-transform: uppercase;
        overflow: hidden;
        padding: 10px 22px 10px 15px;
        position: relative;
        text-decoration: none;
        width: 100%;
        display: block;
        outline: none;
        font-weight: 700
    }

    #mobile-nav ul li a:hover {
        color: #fff
    }

    #mobile-nav ul li li {
        padding-left: 30px
    }

    #mobile-nav ul .menu-has-children i {
        position: absolute;
        right: 0;
        z-index: 99;
        padding: 15px;
        cursor: pointer;
        color: #fff
    }

    #mobile-nav ul .menu-has-children li a {
        text-transform: none
    }

    #mobile-nav ul .menu-item-active {
        color: #46dbf9
    }

    #mobile-body-overly {
        width: 100%;
        height: 100%;
        z-index: 997;
        top: 0;
        left: 0;
        position: fixed;
        background: rgba(0, 0, 0, .7);
        display: none
    }

    body.mobile-nav-active {
        overflow: hidden
    }

    body.mobile-nav-active #mobile-nav {
        left: 0
    }

    body.mobile-nav-active #mobile-nav-toggle {
        color: #fff
    }

    .home-banner-area .banner-img {
        text-align: right
    }

    @media (max-width:1440px) {
        .home-banner-area .banner-img {
            text-align: left
        }

        .home-banner-area .banner-img img {
            width: 60%
        }
    }

    @media (max-width:991px) {
        .home-banner-area .banner-img {
            text-align: center
        }
    }

    @media (max-width:767px) {
        .home-banner-area .banner-img {
            display: none
        }
    }

    @media (max-width:991px) {
        .home-banner-area .fullscreen {
            height: 700px !important
        }
    }

    .banner-area {
        background: url(https://preview.colorlib.com/theme/appru/img/xbanner.jpg.pagespeed.ic.UnUU6x2k0I.webp) center;
        background-size: cover
    }

    .banner-area .banner-content {
        padding: 162px 0
    }

    @media (max-width:767px) {
        .banner-area .banner-content {
            padding: 150px 0 50px
        }

        .banner-area .banner-content>.col-lg-12.d-flex {
            display: block !important
        }
    }

    .banner-area .banner-content .left-part h1 {
        margin-bottom: 15px
    }

    .banner-area .banner-content .left-part p {
        max-width: 510px
    }

    @media (max-width:767px) {
        .banner-area .banner-content .right-part {
            margin-top: 100px
        }
    }

    .banner-area .banner-content .right-part a {
        color: #fff;
        text-transform: uppercase;
        font-size: 14px
    }

    @media (max-width:767px) {
        .banner-area .banner-content .right-part a {
            color: #222
        }
    }

    .banner-area .banner-content .right-part span {
        margin: 0 10px;
        color: #fff;
        font-size: 14px
    }

    @media (max-width:767px) {
        .banner-area .banner-content .right-part span {
            color: #222
        }
    }

    .home-banner-content h1 {
        font-size: 60px;
        margin-bottom: 25px
    }

    @media (max-width:991.98px) {
        .home-banner-content h1 {
            font-size: 36px
        }
    }

    @media (max-width:1199.98px) {
        .home-banner-content h1 {
            font-size: 35px
        }
    }

    @media (max-width:767px) {
        .home-banner-content h1 {
            margin-top: 50px
        }
    }

    .home-banner-content p {
        margin-bottom: 45px
    }