/**
Theme Name:Techpro - App, Saas & Software Landing Template
Author:Themarlab
Version:1.0.1;

*/
/**
* Table of Contents
* 1.0 - Fonts
* 2.0 - Reset css
* 3.0 - Common
* 4.0 - Navbar
* 5.0 - Banner
* 6.0 - testimonial
* 7.0 - Pricing
* 8.0 - Team
* 9.0 - Blog
* 10.0 - Footer
* 11.0 - Responsive

/* ==========================================================================
1.0 Fonts
========================================================================== */
/*sourcesans font*/
@font-face {
    font-family: 'sourcesans';
    src: url("../fonts/source-sans/sourcesanspro-semibold-webfont.eot");
    src: url("../fonts/source-sans/sourcesanspro-semibold-webfont.eot?#iefix") format("embedded-opentype"),
    url("../fonts/source-sans/sourcesanspro-semibold-webfont.woff2") format("woff2"),
    url("../fonts/source-sans/sourcesanspro-semibold-webfont.woff") format("woff"),
    url("../fonts/source-sans/sourcesanspro-semibold-webfont.ttf") format("truetype");
    font-weight: 600;
}

@font-face {
    font-family: 'sourcesans';
    src: url("../fonts/source-sans/sourcesanspro-regular-webfont.eot");
    src: url("../fonts/source-sans/sourcesanspro-regular-webfont.eot?#iefix") format("embedded-opentype"),
    url("../fonts/source-sans/sourcesanspro-regular-webfont.woff2") format("woff2"),
    url("../fonts/source-sans/sourcesanspro-regular-webfont.woff") format("woff"),
    url("../fonts/source-sans/sourcesanspro-regular-webfont.ttf") format("truetype");
    font-weight: 400;
}

/*Roboto font*/
@font-face {
    font-family: 'poppins';
    src: url('../fonts/poppins/poppins-regular-webfont.eot');
    src: url('../fonts/poppins/poppins-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/poppins/poppins-regular-webfont.woff2') format('woff2'),
    url('../fonts/poppins/poppins-regular-webfont.woff') format('woff'),
    url('../fonts/poppins/poppins-regular-webfont.ttf') format('truetype');
    font-weight: 400;

}


/* ==========================================================================
2.0 Reset css
========================================================================== */
html, body {
    overflow-x: hidden;
    font-size: 1em;
    position: relative;
}

body {
    color: #bdbbd5;
    font-family: 'poppins', sans-serif;
    letter-spacing: .2px;
    font-weight: 400;
    line-height: 1.9;
    white-space: normal;
    background-image: -webkit-linear-gradient(-40deg, #4f409a 0%, #27255e 20%, #27255e 80%, #4f409a 100%);
    background-image: linear-gradient(-40deg, #4f409a 0%, #27255e 20%, #27255e 80%, #4f409a 100%);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: #fff;
    font-family: 'sourcesans', sans-serif;
    line-height: 1.2;
    margin: 0 0 30px 0;
}

h1 {
    font-size: 3.75em
}

h2 {
    font-size: 3em
}

h3 {
    font-size: 2.25em
}

h4 {
    font-size: 1.5em
}

h5 {
    font-size: 1.25em
}

h6 {
    font-size: 1em
}

ul {
    padding: 0px;
}

li {
    list-style: none;
    margin-bottom: 10px;
}

a {
    transition: 0.5s;
    -webkit-transition: 0.5s;
    text-decoration: none;
    outline: 0;
    color: inherit;
}

li > a:focus, li > a:hover,
.nav > li > a:focus, .nav > li > a:hover {
    background-color: transparent;
}

.nav > li > a {
    padding: 0;
}

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

a:hover {
    text-decoration: none;
    color: #fff;
}

/* ==========================================================================
3.0 Common css
========================================================================== */
.sec-pad {
    padding-top: 150px;
    padding-bottom: 150px;
}

.sec-pad-md {
    padding-top: 120px;
    padding-bottom: 120px;
}

.sec-pad-sm {
    padding-top: 90px;
    padding-bottom: 90px;
}

.sec-pad-xs {
    padding-top: 60px;
    padding-bottom: 60px;
}

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

.section-text {
    max-width: 600px;
    margin: 0 auto 90px auto;
}

.container-lg {
    width: 90%;
    margin: 0 auto;
}

.box-bg {
    background: #33316f;
    border: 2px solid #504e89;
    position: relative;
}

.box-content, .hover-content, .hover-box {
    position: relative;
}

.hover-box {
    padding: 0;
}

.hover-content {
    padding: 25px;
}

.box-content {
    padding: 50px;
}

.hover-box:after, .hover-box:before, .hover-content:after, .hover-content:before {
    position: absolute;
    content: "";
    background-color: #645cfc;
    z-index: 1;
}

.hover-box:after, .hover-box:before {
    height: 100%;
    width: 3px;
    transform: scaleY(0);
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
}

.hover-content:after, .hover-content:before {
    width: 100%;
    height: 3px;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
}

.hover-box:before, .hover-content:before {
    transform-origin: right top 0;
    -webkit-transform-origin: right top 0;
    -moz-transform-origin: right top 0;
    -ms-transform-origin: right top 0;
    -o-transform-origin: right top 0;
    right: 0;
    top: 0;
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
}

.hover-content:before {
    transform-origin: right top 0;
    -webkit-transform-origin: right top 0;
    -moz-transform-origin: right top 0;
    -ms-transform-origin: right top 0;
    -o-transform-origin: right top 0;
}

.hover-box:after, .hover-content:after {
    transform-origin: left bottom 0;
    -webkit-transform-origin: left bottom 0;
    -moz-transform-origin: left bottom 0;
    -ms-transform-origin: left bottom 0;
    -o-transform-origin: left bottom 0;
    left: 0;
    bottom: 0;
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
}

.box-site {
    min-height: 100%;
    padding: 22px;
    overflow: hidden !important;
}

.box-site .navbar-custom.affix {
    border-width: 0 22px;
}

.swiper-container {
    position: relative;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: auto;
    padding: 40px;
}

.panel-group .panel {
    background: transparent;
    border-radius: 0;
    border: solid #504e89;
    border-width: 0 0 1px 0;
}

.panel-collapse.in, .panel-default > .panel-heading.active {
    background: #33316f;
    border: solid #504e89;
    transition: 0.5s;
}

.panel-collapse, .panel-default > .panel-heading {
    padding: 15px 30px;

}

.panel-group .panel + .panel {
    margin-top: 0;
}

.panel-collapse {
    padding-top: 0;
}

.panel-collapse.in {
    border-width: 0 2px 2px 2px;
}

.panel-heading.active {
    border-width: 2px 2px 0 2px !important;
}

.panel-default > .panel-heading {
    background: transparent;
    border-color: transparent;
    border-radius: 0;

}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top: 0;
}

.panel-title {
    font-size: 24px;
}

.panel-title > a, .panel-title > a:active {
    display: block;
    padding: 15px;
    color: #fff;
    text-decoration: none;
}

.panel-heading a:before {
    font-family: 'themify';
    content: "\e64b";
    float: right;
    font-size: 18px;
    transition: all 0.5s;
    color: #fff;
}

.panel-heading.active a:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

.bg-body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.bg-body img {
    width: 100%;
}

.circle:before,
.circle:after, .circle span {
    background: #fff;
    opacity: .0291;
    position: absolute;
    content: '';
    height: 2000px;
    width: 2000px;
    left: -800px;
    right: 0;
    top: -800px;
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: 0 0 1px white;
    animation: pulsate 9s ease-out infinite;
}

.circle:after {
    -webkit-animation-delay: 2s;
}

.circle span {
    -webkit-animation-delay: 1s;
}

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(0, 0);
        opacity: .0291;
    }
    100% {
        -webkit-transform: scale(1.2, 1.2);
        opacity: 0;
    }
}

.jump-anim {
    animation-name: fetureanimate;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: fetureanimate;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: fetureanimate;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: fetureanimate;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: fetureanimate;
    -o-animation-duration: 3s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

@keyframes fetureanimate {
    0% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
    }
    50% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
    }
}

.img-set {
    position: relative;
}

.img-set.one img:nth-child(2), .img-set.one img:nth-child(3),
.img-set.one img:nth-child(4), .img-set.one img:nth-child(4),
.img-set.two img:nth-child(2), .img-set.two img:nth-child(3),
.img-set.three img:nth-child(2), .img-set.four img:nth-child(2),
.img-set.five img:nth-child(2) {
    position: absolute;
}

.img-set.one img:nth-child(2) {
    left: 75%;
    top: 23%;
}

.img-set.one img:nth-child(3) {
    left: 85%;
    top: 43%;
}

.img-set.one img:nth-child(4) {
    left: 75%;
    top: 63%;
}

.img-set.two img:nth-child(2) {
    left: 80%;
    top: 10%;
}

.img-set.two img:nth-child(3) {
    left: 50%;
    top: 10%;
}

.img-set.two img:nth-child(4) {
    position: absolute;
    left: 67%;
    top: 40%;
}

.img-set .extend {
    width: 755px;
    margin-right: -45%;
}

.img-set .extend.two {
    width: 860px;
    float: right;
    margin-right: -24%;
}

.img-set.three img:nth-child(2) {
    left: -13%;
    top: -7%;
}

.img-set.four img:nth-child(2) {
    left: 0%;
    bottom: 0%;
    height: 90%;
}

.img-set.five img:nth-child(2) {
    left: 0%;
    top: 23%;
}

.para-lg {
    font-size: 1.25em;
}

.meta {
    font-size: 14px;
    margin-bottom: 30px;
    font-weight: 400;
    line-height: 0;
    letter-spacing: 0.2px;
}

.light {
    color: #fff;
}

.icon {
    color: #cacbcc;
    margin-bottom: 40px;
}

.col-content {
    margin-bottom: -40px;
}

.col-content.hover {
    cursor: pointer;
}

.col-content.hover .hover-box:hover:after, .col-content.hover .hover-box:hover:before {
    transform: scaleY(1);
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
}

.col-content.hover .hover-content:hover:after, .col-content.hover .hover-content:hover:before {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
}

.col-content [class*="col-"] {
    padding-bottom: 60px;
}

.col-content.md [class*="col-"] {
    padding-bottom: 40px;
}

.col-content.sm [class*="col-"] {
    padding-bottom: 20px;
}

.col-content.n-pad [class*="col-"] {
    padding-bottom: 0;
}

.sub-input .custom-form {
    position: relative;
}

.sub-input .custom-form .form-control {
    height: 65px;
    width: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    border: solid #fff;
    border-width: 0 0 1px 0;
    border-radius: 0;
    padding: 0 0 0 20px;
    font-size: 18px;
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0);
}

.sub-input .custom-form .form-control::placeholder {
    color: #fff;
}

.custom-form .form-control:focus {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0), 0 0 8px rgba(102, 175, 233, 0);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0), 0 0 8px rgba(102, 175, 233, 0);
}

.sub-input .result-box {
    font-size: 24px;
}

.sub-input .custom-form .btn {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.img-bundle {
    position: absolute;
}

.bg-grey {
    background: #f8f8f8;
}

.grdnt-blue:not(.overly) {
    background-image: -webkit-linear-gradient(90deg, #4b9efe 0%, #804cff 51%, #4b9efe 100%);
    background-image: linear-gradient(90deg, #4b9efe 0%, #804cff 51%, #4b9efe 100%);
}

.grdnt-purple:not(.overly) {
    background-image: -webkit-linear-gradient(45deg, #fd81b5 0%, #c961f7 51%, #8089ff 100%);
    background-image: linear-gradient(45deg, #fd81b5 0%, #c961f7 51%, #8089ff 100%);
}

.grdnt-orange:not(.overly) {
    background-image: -webkit-linear-gradient(45deg, #fe60a1 0%, #ff8765 51%, #fe60a1 100%);
    background-image: linear-gradient(45deg, #fe60a1 0%, #ff8765 51%, #fe60a1 100%);
}

.grdnt-cyan:not(.overly) {
    background-image: -webkit-linear-gradient(45deg, #8089ff 0%, #54ceff 51%, #8089ff 100%);
    background-image: linear-gradient(45deg, #8089ff 0%, #54ceff 51%, #8089ff 100%);
}

.grdnt-green:not(.overly) {
    background-image: -webkit-linear-gradient(45deg, #00c9fd 0%, #81ee8e 51%, #00c9fd 100%);
    background-image: linear-gradient(45deg, #00c9fd 0%, #81ee8e 51%, #00c9fd 100%);
}

.grdnt-blue.overly:before {
    background-image: -webkit-linear-gradient(45deg, #812dbd 0%, #066ce0 51%, #812dbd 100%);
    background-image: linear-gradient(45deg, #812dbd 0%, #066ce0 51%, #812dbd 100%);
}

.grdnt-purple.overly:before {
    background-image: -webkit-linear-gradient(45deg, #fd81b5 0%, #c961f7 51%, #8089ff 100%);
    background-image: linear-gradient(45deg, #fd81b5 0%, #c961f7 51%, #8089ff 100%);
}

.grdnt-orange.overly:before {
    background-image: -webkit-linear-gradient(45deg, #fe60a1 0%, #ff8765 51%, #fe60a1 100%);
    background-image: linear-gradient(45deg, #fe60a1 0%, #ff8765 51%, #fe60a1 100%);
}

.grdnt-cyan.overly:before {
    background-image: -webkit-linear-gradient(45deg, #8089ff 0%, #54ceff 51%, #8089ff 100%);
    background-image: linear-gradient(45deg, #8089ff 0%, #54ceff 51%, #8089ff 100%);
}

.grdnt-green.overly:before {
    background-image: -webkit-linear-gradient(45deg, #00c9fd 0%, #81ee8e 51%, #00c9fd 100%);
    background-image: linear-gradient(45deg, #00c9fd 0%, #81ee8e 51%, #00c9fd 100%);
}

div[class*="grdnt-"], section[class*="grdnt-"],
footer[class*="grdnt-"], header[class*="grdnt-"], nav[class*="grdnt-"],
a[class*="grdnt-"], button[class*="grdnt-"], div[class*="grdnt-"].overly:before,
section[class*="grdnt-"].overly:before, footer[class*="grdnt-"].overly:before, header[class*="grdnt-"].overly:before {
    transition: 0.5s;
    -webkit-transition: 0.5s;
    background-size: 200% auto;
}

a[class*="grdnt-"]:hover, button[class*="grdnt-"]:hover {
    color: #fff;
    background-position: right center;

}

.bg-solid {
    background: #3AC8FC;
}

.overly {
    position: relative;
}

.overly * {
    position: relative;
    z-index: 1;
}

.overly:before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0.8;
    z-index: 2;
}

.pad-0 {
    padding: 0px;
}

.pl-0 {
    padding-left: 0px;
}

.pr-0 {
    padding-right: 0px !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.mg-0 {
    margin: 0;
}

.mg-15 {
    margin-bottom: 15px;
}

.w-100 {
    width: 100%
}

.h-100 {
    height: 100%
}

.scroll-item {
    position: absolute;
}

.spce {
    clear: both;
    height: 20px;
    width: 100%;
}

.spce.md {
    height: 50px;
}

.spce.lg {
    height: 100px;
}

.img-pre {
    width: 100%;
    margin-top: 50px;
}

.img-pre img {
    width: auto;
}

.flx-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.align-flx-end {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
}

.align-flx-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    -webkit-box-pack: center; /* justify-content */
}

.list-style {
    position: relative;
    margin-top: 30px;
}

.list-style li {
    padding-left: 30px;
}

div[class*="grdnt-"] .list-style li:before, [class*="grdnt-"] .list-style li:before {
    color: #fff;
}

.list-style li:before {
    position: absolute;
    content: '\f00c';
    top: 3;
    left: 0;
    color: #0facf3;
    font-family: 'FontAwesome';
}

.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.social-holder a {
    margin-right: 15px;
}

.social-holder a:last-child {
    margin-right: 0px;
}

.btn-holder {
    margin-top: 30px;
}

.btn {
    display: inline-block;
    text-align: center;
    border-radius: 0;
    margin-top: 10px;
    margin-right: 15px;
    color: #fff;
    padding: 18px 45px;
    background: transparent;
    font-weight: 600;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    border: 0;
    letter-spacing: 1.2px;
}

.btn:last-child {
    margin-right: 0;
}

.btn.pad-0 {
    padding: 0;
}

.btn.btn-outline {
    border: 2px solid #fff;
}

.btn-grad {
    background-image: -webkit-linear-gradient(90deg, #4b9efe 0%, #804cff 51%, #4b9efe 100%);
    background-image: linear-gradient(90deg, #4b9efe 0%, #804cff 51%, #4b9efe 100%);
    background-size: 200% auto;
}

.btn-grad:hover {
    background-position: right center;
    color: #fff;
}

.btn.btn-outline:hover {
    background: #fff;
    color: #27255e;
}

.btn.rad-5 {
    border-radius: 5px;
}

.btn.rad-50 {
    border-radius: 50px;
}

.btn p {
    line-height: 20px;
    font-size: 0.9em;
    text-align: left;
    margin: 0;
    float: right;
    text-transform: capitalize;
}

.btn span {
    font-size: 1.4em;
}

.btn i {
    margin-right: 10px;
    margin-top: 5px;
    font-size: 24px;
    float: left;
}

.btn-sm {
    font-size: .775em;
    padding: 12px 40px;
}

.btn-round {
    display: block;
    height: 150px;
    width: 150px;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    transition: 0.5s;
    -webkit-transition: 0.5s;
    border-radius: 50%;
    font-size: 24px;
    margin: 0 auto;
}

.btn-round i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn-round:hover {
    background: rgba(255, 255, 255, 0.4);
}

.btn-round span {
    color: #fff;
    font-size: 18px;
}

.btn-white {
    background-color: #fff;
    color: #66686a;
    border: 1px solid #fff;
}

.btn-border {
    color: #fff;
    background: transparent;
    border-color: #fff;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.btn-border:hover {
    background: #fff;
    color: #37404d;
}

.icon[class*="icon-bg"] {
    color: #fff;
    text-align: center;
}

.icon-bg {
    padding-top: 6px;
    font-size: 1.725em;
    margin-bottom: 25px;
    border-radius: 10px;
    width: 60px;
    height: 60px;
}

.icon-bg-md {
    height: 80px;
    width: 80px;
    padding-top: 15px;
    font-size: 2em;
    border-radius: 50%;
}

div[class*="grdnt"] {
    position: relative;
}

div[class*="grdnt"] .content-over {
    position: static;
    padding-top: 50px;
    padding-bottom: 50px;
}

div.overly[class*="grdnt"] .content-over {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
}

.social-holder a {
    margin-right: 15px;
}

.social-holder a:last-child {
    margin-right: 0px;
}

.hide-block {
    overflow: hidden;
}

.hide-block img {
    position: relative;
    margin-bottom: -200px;
}

.hide-block a img {
    margin-bottom: 0;
}

.social-holder a {
    padding: 0 10px;
    display: inline-block;
    font-size: 1.75em

}

div[class*="grdnt"] .screen .owl-dot, [class*="grdnt"] .screen .owl-dot, [class*="grdnt"] .quote .owl-dot {
    border: 2px solid #fff;
}

div[class*="grdnt"] .screen .owl-dot.active, [class*="grdnt"] .screen .owl-dot.active, [class*="grdnt"] .quote .owl-dot.active {
    background: #fff;
}

.dots li {
    margin-bottom: 30px;
    cursor: pointer;
    opacity: .5;
}

.dots li.active {
    opacity: 1;
}

.dots li .icon {
    margin-bottom: 25px;
}

.slide-side {
    width: 915px;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: -webkit-linear-gradient(-40deg, #4f409a 0%, #27255e 100%);
    background-image: linear-gradient(-40deg, #4f409a 0%, #27255e 100%);
    z-index: 10000;
}

#status {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    background-image: url(../image/loading.svg);
    background-repeat: no-repeat;
    background-position: center;
    margin: -100px 0 0 -100px;
}

.navbar-header {
    max-width: 200px;
}

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: 440px;
}

/* ==========================================================================
4.0 Navbar Styling
========================================================================== */
.navbar-custom {
    background-color: transparent;
    border: none;
    padding: 60px 0 0;
    -webkit-transition: padding .5s;
    -moz-transition: padding .5s;
    transition: padding .5s;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: transparent;
}

.navbar-custom:not(.navbar-fixed-top) {
    z-index: 10;
}

.navbar-custom.affix {
    position: fixed;
}

.navbar-custom .right-nav .nav-btn {
    flex: 0 1 auto;
    margin-left: auto;
}

.navbar-custom .nav-btn .btn {
    margin-top: 0;
    padding: 15px 36px;
}

.navbar-custom .navbar-nav {
    flex: 0 1 auto;
    margin: 0;
    position: absolute; /* new */
    left: 50%;
    transform: translateX(-50%);
}

.navbar-custom .navbar-brand {
    padding: 0px;
    transition: 0.5s;
    -webkit-transition: 0.5s;
}

.navbar-custom .navbar-brand.logo-clr, .navbar-custom.affix .navbar-brand.logo-light {
    opacity: 0;
    width: 0;
}

.navbar-custom.affix .navbar-brand.logo-clr, .navbar-custom .navbar-brand.logo-light {
    opacity: 1;
    width: auto;
}

.navbar-custom.affix .btn-border:hover {
    background: #39c05e;
    color: #fff;
    border-color: #39c05e;
}

.navbar-custom .navbar-toggle {
    border: 0;
    text-transform: uppercase;
    color: #fff;
    background-image: -webkit-linear-gradient(90deg, #4b9efe 0%, #804cff 100%);
    background-image: linear-gradient(90deg, #4b9efe 0%, #804cff 100%);
    padding: 5px 20px;
    font-size: 26px;
}

.navbar-custom ul li {
    margin: 0 15px;
}

.navbar-custom ul li:last-chlid {
    margin-right: 0px;
}

.navbar-custom ul li a {
    color: #fff;
    padding: 15px 0;
}

.navbar-custom.affix ul li.active a {
    color: #0facf3;
}

.navbar-custom ul li.active a {
    position: relative;
    transition: 0.5s;
    -webkit-transition: 0.5s;
}

.navbar-custom ul li.active a:after, .navbar-custom ul li a:hover:after {
    width: 50%;
    background: #fff;
}

.navbar-custom ul li a:hover {
    background: transparent;
}

.navbar-custom ul li a:hover {
    color: #0facf3;
}

.navbar-custom.affix {
    padding: 20px 0px;
    border-bottom: 0px;
    background: #33316f;
}

.navbar-custom.affix .btn-border {
    border-color: inherit;
    color: inherit;
}

/* ==========================================================================
5.0 Banner Styling
========================================================================== */
.hero {
    position: relative;
    padding: 150px 0 150px 0;
}

.hero-content {
    z-index: 3;
    position: relative;
}

.hero.app-banner {
    height: 700px;
}

.hero .hero-content.intro-center {
    position: static;
    padding-top: 150px;

}

.hero-content .intro-text {
    padding-top: 0px;
}

/* ==========================================================================
6.0 testimonial Styling
========================================================================== */
.quote img {
    float: left;
    margin-right: 20px;
    border-radius: 50%;
    width: 70px !important;
    height: 70px;
}

.quote .quote-text {
    overflow: hidden;
}

.rating-list li {
    display: inline-block;
    margin-right: 3px;
}

.rating-list li:last-child {
    margin-left: 8px;
}

.rating-list li i {
    color: #fff88b;
}

/* ==========================================================================
7.0 Pricing Styling
========================================================================== */
.pricing .pricing-table:hover {
    box-shadow: 0 1px 25px rgba(0, 0, 0, 0.1);
}

.pricing .pricing-table {
    transition: 0.5s;
    -webkit-transition: 0.5s;
}

.pricing .main-pricing .heading span:first-child {
    font-size: 18px;
    vertical-align: top;
}

.pricing .main-pricing .heading span:last-child {
    font-size: 14px;
    font-weight: 300;
    margin-left: 3px;
}

.pricing .pricing-header {
    padding: 0 0 10px 0;
}

.pricing .pricing-content .pricing-feature li {
    position: relative;
    margin-top: 10px;
}

.pricing .pricing-content .pricing-feature li:before {
    position: static;
    margin-right: 15px;
    content: "\f00c";
    color: #34ed26;
    top: 0;
    font-family: 'FontAwesome';
}

.pricing .pricing-content .pricing-feature li.cross:before {
    content: "\f00d";
    color: #ff005a;
}

.pricing .pricing-footer {
    padding: 40px 0px;
}

/* ==========================================================================
8.0 team Styling
========================================================================== */
.team img {
    border-radius: 50%;
    height: 120px;
    width: 120px;
    border: 5px solid #fff;
    margin-bottom: 20px;
}

/* ==========================================================================
9.0 Blog
========================================================================== */
.blog a {
    display: block;
    padding: 50px 30px;
}

/* ==========================================================================
10.0 Footer Styling
========================================================================== */
div[class*="style-"].footer-wrapper, [class*="style-"].footer-wrapper {
    padding-top: 270px !important;
}

.footer-wrapper .footer-content {
    z-index: 10;
    position: relative;
}

.footer-wrapper .copyright {
    font-size: 0.9em;
}

/* ==========================================================================
11.0 Responsive CSS
========================================================================== */

/* Large Devices, Wide Screens */
@media only screen and (max-width: 1260px) {
    .container {
        padding: 0 45px;
    }
}

@media only screen and (max-width: 1199px) {
    .sub-input .custom-form .form-control {
        width: 60%;
    }
}

/* Medium Devices, Desktops */
@media only screen and (max-width: 991px) {
    body {
        font-size: .95em;
    }

    h1 {
        font-size: 2.25em
    }

    h2 {
        font-size: 2em
    }

    h3 {
        font-size: 1.75em
    }

    h4 {
        font-size: 1.5em
    }

    h5 {
        font-size: 1.25em
    }

    h6 {
        font-size: 1.15em
    }

    .container {
        padding: 0;
    }

    .box-site {
        border-width: 15px;
    }

    .box-site .navbar-custom.affix {
        border-width: 0 15px;
    }

    .icon-bg-md {
        width: 70px;
        height: 70px;
        padding-top: 9px;
    }

    .social-holder a {
        height: 40px;
        width: 40px;
    }

    .dots li {
        display: inline-block;
        width: 32.333%;
        padding: 0 10px;
    }

    div[class*="style-"].footer-wrapper, [class*="style-"].footer-wrapper {
        padding-top: 180px !important;
    }

    .res-center .icon {
        float: none !important;
        margin-bottom: 10px;
        margin: 0 auto;
    }

    .res-center .left-dir-col .text, .res-center .right-dir-col .text {
        text-align: center;
        margin: 0
    }

    .flx-off-sm {
        display: block;
    }

    .res-center {
        text-align: center;
        display: block;
        float: none;
        padding: 0px 50px;
    }

    .res-margin {
        margin-bottom: 60px;
    }

    .res-margin-sm {
        margin-bottom: 30px;
    }

    .res-margin-xs {
        margin-bottom: 15px;
    }

    .section-text {
        margin: 0 auto 70px auto;
    }

    .pb-0 {
        padding-bottom: 0;
    }

    .navbar-custom ul li {
        margin: 0 10px;
    }

    .navbar-custom .nav-btn .btn {
        padding: 15px 30px;
    }

    .hero-content .mockup {
        top: 30px;
        max-width: 350px;
    }

    .feature .section-text {
        padding: 0 40px 10px 40px;
    }

    .style-wave-alt::after {
        top: -30px;
    }

    .footer-wrapper .nav {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

}

@media only screen and (max-width: 840px) {
    .container {
        padding-left: 45px;
        padding-right: 45px;
    }

    .img-set .extend.two {
        margin: 0;
        width: auto;
        float: none;
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width: 767px) {
    .container {
        max-width: 100%;
    }

    .box-site {
    }

    .box-site .navbar-custom.affix {
        border-width: 0 10px;
    }

    .btn-round {
        height: 80px;
        width: 80px;
    }

    .sub-input .custom-form .form-control {
        border-width: 1px;
    }

    div[class*="grdnt"] .content-over {
        padding: 120px 40px;
    }

    .img-set .extend {
        width: auto;
        margin-right: 0;
    }

    .img-set.three img:nth-child(2) {
        width: 200px;
        top: 0;
    }

    .img-set.five img:nth-child(2) {
        top: 0%;
        width: 180px;
    }

    .navbar-header {
        max-width: 100%;
    }

    .grad-site {
        border: 0;
    }

    .sub-input .custom-form .form-control, .sub-input .custom-form .btn {
        width: 100%;
        position: static;
    }

    .flx-off-xs {
        display: block;
    }

    .hero {
        height: auto;
        padding: 170px 0 130px 0;
    }

    .hero .img-pre {
        width: auto;
    }

    .navbar-custom .navbar-nav {
        flex: none;
        margin: 0;
        position: static;
        left: 0;
        transform: translateX(0%);
    }

    .navbar-custom ul li a {
        padding: 15px 0;
        border-bottom: 1px solid #565490;
    }

    .navbar-custom ul li:first-child a {
        border-top: 1px solid transparent;
    }

    .navbar-custom ul li a::after {
        height: 0;
    }

    .navbar-custom .right-nav .nav-btn {
        margin-top: 20px;
    }

    .navbar-custom.affix {
        border-width: 0;
    }

    .navbar-nav {
        text-align: center;
    }

    .navbar-custom .right-nav {
        float: none;
    }

    .navbar-custom .right-nav .nav-btn {
        text-align: center;
        float: none;
    }

    .navbar-collapse {
        background: #454381;
        padding: 20px 0;
        overflow-x: hidden;
    }

    .hero-content .intro-text {
        padding-top: 50px;
    }

    .sec-pad {
        padding-top: 130px;
        padding-bottom: 130px;
    }

    .spce.lg {
        height: 60px;
    }

    .tab-container {
        margin-left: 0;
    }

    .tab-list li {
        display: block;
    }

    .tab-list li a {
        padding: 3px 6px;
    }

    .navbar-custom .navbar-brand {
        padding: 15px 0 0 0;
    }

    .navbar-custom ul li {
        margin: 0 10px;
    }

    .navbar-custom ul li a {
        font-weight: 700;
    }

    .navbar-custom ul li a:hover {
        color: #0facf3;
    }

    .navbar-custom ul li.active a {
        color: #0facf3;
    }

    .nav-btn .btn {
        margin-top: 8px;
    }

    .navbar-custom:not(.navbar-fixed-top) .container {
        width: 100%;
    }

    div[class*="style-"].footer-wrapper, [class*="style-"].footer-wrapper {
        padding-top: 150px !important;
    }

    .slide-side {
        width: auto;
    }

}

/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
    .btn {
        padding: 13px 20px;
        font-size: 0.7em;
        margin-right: 10px;
    }

    .btn-round {
        height: 40px;
        width: 40px;
    }

    .res-center {
        padding: 0px 15px;
    }

    .icon-bg {
        width: 80px;
        height: 80px;
        font-size: 2em;

    }

    .pricing {
        padding: 0;
    }

    .container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .tab-menu .tab-list a {
        display: block;
        text-align: center;
    }

    .blog .sub-input .custom-form .btn {
        width: auto;
        position: absolute;
        height: 100%;
    }

    .sub-input .custom-form label {
        top: 14%;
    }
}

/* Custom, iPhone Retina */
@media only screen and (max-width: 360px) {
    .navbar-brand img {
        width: 120px;
        margin-top: 8px;
        margin-bottom: 8px;
    }

    .img-set.one img:nth-child(2), .img-set.one img:nth-child(3), .img-set.one img:nth-child(4) {
        left: 60%;
        height: 70px;
    }

    .img-set.two img:nth-child(2), .img-set.two img:nth-child(4) {
        left: 20%;
    }

    .img-set.two img:nth-child(3) {
        left: 40%;
    }

    .quote img {
        float: none;
        margin-bottom: 10px;
        display: block;
    }
}

/*intro*/
.demo div[class*="col-"] {
    position: relative;
    height: 350px;
}

.demo div[class*="col-"] a {
    display: block;
    position: relative;
    height: 100%;
    overflow: hidden;
}

.demo div[class*="col-"] .note {
    position: absolute;
    border-radius: 50%;
    text-align: center;
    top: -30px;
    right: -30px;
    z-index: 1;
    color: #fff;
    font-weight: 600;
    height: 100px;
    width: 100px;
    padding-top: 30px;
    line-height: 1.2;
}

.demo div[class*="col-"] img {
    position: absolute;
    left: 0px;
    top: 0;
    display: block;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.demo div[class*="col-"]:hover img {
    top: -90%;
    bottom: 0;
}

.text-color-white {
    color: white;
}

.text-align-left {
    text-align: left;
}

.address-block {
    justify-content: space-around;
    display: flex;
}