﻿﻿/* Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display:block;}
a:hover {text-decoration:none;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
table {border-collapse:collapse; border-spacing:0;}
a:focus {outline:none; text-decoration:none;}
.clear {clear:both; content:"."; display:block; height:0; visibility:hidden;}
strong {font-weight:bold;}
::-ms-clear { display: none; }
.no-padding {padding: 0 !important;}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: 0;
}
/******************* Custom Fonts *********************/
@font-face {
    font-family: 'muli';
    src: url('assets/fonts/Muli-Regular.eot');
    src: url('assets/fonts/Muli-Regular.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/Muli-Regular.woff2') format('woff2'),
        url('assets/fonts/Muli-Regular.woff') format('woff'),
        url('assets/fonts/Muli-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'muli-extrabold';
    src: url('assets/fonts/Muli-ExtraBold.eot');
    src: url('assets/fonts/Muli-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/Muli-ExtraBold.woff2') format('woff2'),
        url('assets/fonts/Muli-ExtraBold.woff') format('woff'),
        url('assets/fonts/Muli-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'muli-bold';
    src: url('assets/fonts/Muli-Bold.eot');
    src: url('assets/fonts/Muli-Bold.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/Muli-Bold.woff2') format('woff2'),
        url('assets/fonts/Muli-Bold.woff') format('woff'),
        url('assets/fonts/Muli-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'muli-semi';
    src: url('assets/fonts/Muli-SemiBold.eot');
    src: url('assets/fonts/Muli-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/Muli-SemiBold.woff2') format('woff2'),
        url('assets/fonts/Muli-SemiBold.woff') format('woff'),
        url('assets/fonts/Muli-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
/******************* End Custom Fonts *********************/

body {font-family: muli, Arial, sans-serif; font-size: 14px;}
a {transition: all 0.2s linear;}
.p-40 {padding: 40px 0;}

.comm-btn {background: #00a0e3; padding: 15px 55px; font-family: muli-bold, Arial, sans-serif; font-size: 16px; letter-spacing: 0.8px; color: #ffffff; border: 3px solid #00a0e3; border-radius: 5px; display: inline-block; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; position: relative;}
.comm-btn:hover {color: #00a0e3;}
.comm-btn:before {content: ''; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #ffffff; border-radius: 5px; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.comm-btn:hover:before {-webkit-transform: scale(1); transform: scale(1);}
.block-title {text-align: center; padding: 0 0 100px;}
.block-title .title {font-family: muli-bold, Arial, sans-serif; color: #136290; font-size: 28px; line-height: 40px;}
.block-title .sub-title {font-size: 16px; color: #00c3ed;}
.main-container {padding: 100px 0 0;}

/******** header start here ********/
.header {}
.header .navbar {padding: 25px 160px; background: #ffffff; transition: all 0.3s linear; box-shadow: 0 3px 6px rgba(0,0,0,0.5);}
.header.fixed-top .navbar {border-color: #e8e9ee; padding: 10px 160px;}
.header .navbar-header .logo {float: left; padding: 0 15px;}
.header .navbar-header .logo .logo-img {}
.header .top-nav {float: right;}
.header .top-nav li.nav-item {float: left;}
.header li a {font-family: muli-bold, Arial, sans-serif; color: #2b2a29; letter-spacing: 0.8px; text-transform: uppercase; padding: 15px;}
.header li a:hover, li.nav-item.active a {color: #00a0e3; background-color: transparent;}
.header .navbar .navbar-collapse .close-icon {display: none;}
/******** header end here ********/

/******** banner slider start here ********/
.banner-slider .bx-wrapper {background: none; border: 0px none; box-shadow: none; margin: 0px;}
.banner-slider .bx-controls-direction .bx-prev{background: url('assets/images/left-arrow.svg') no-repeat center; width: 35px; height: 35px; display: inline-block; top: 90%; left: 13%; z-index: 1; margin-top: 0; background-size: cover;}
.banner-slider .bx-controls-direction .bx-next {background: url('assets/images/right-arrow.svg') no-repeat center; width: 35px; height: 35px; display: inline-block; opacity: 1; top: 90%; left: 17%; z-index: 1; margin-top: 0; background-size: cover;}
.banner-slider .bx-controls-direction a {position: absolute; outline: 0; text-indent: -9999px; z-index: 9999;}
.banner-slider .slider-content .slide-block {max-height: 600px; position: relative;}
.banner-slider .slider-content .slide-block .slide-img {position: relative;}
.banner-slider .slider-content .slide-block .slide-img:before {content: ''; background-color: rgba(0,0,0,0.3); position: absolute; top: 0; left: 0; height: 100%; width: 100%;}
.banner-slider .slider-content .slide-block .slide-img img {width: 100%;}
.banner-slider .slider-content .slide-block .slide-caption {position: absolute; top: 25%; left: 10%;}
.banner-slider .slider-content .slide-block .slide-caption .slide-title {font-family: muli-extrabold, Arial, sans-serif; font-size: 38px; line-height: 52px; color: #ffffff;}
.banner-slider .slider-content .slide-block .slide-caption .slide-desc {font-size: 22px; line-height: 42px; color: #ffffff; padding: 20px 0; max-width: 700px;}
.banner-slider .slider-content .slide-block .slide-caption .show-more-btn .comm-btn {-webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.banner-slider .slider-content .slide-block .slide-caption .show-more-btn .comm-btn:hover {-webkit-transform: translateY(-10px); transform: translateY(-10px); color: #ffffff;}
.banner-slider .slider-content .slide-block .slide-caption .show-more-btn .comm-btn:before {background: transparent;}
/******** banner slider end here ********/

/******** feature start here ********/
.feature-container {padding: 140px 0 100px;}
.feature-container .feature-list-block {text-align: center;}
.feature-container .feature-list-block .feature-icon img {height: 90px; width: 90px;}
.feature-container .feature-list-block .feature-detail .title {font-family: muli-bold, Arial, sans-serif; font-size: 20px; line-height: 32px; color: #2b2a29; padding: 15px 0;}
.feature-container .feature-list-block .feature-detail .desc p {font-size: 16px; line-height: 28px; color: #808080; padding: 0 0 10px; margin: 0;}
.feature-container .feature-list-block .feature-detail .know-more a {color: #00a0e3; font-size: 16px;}
/******** feature end here ********/

/******** why us start here ********/
.why-container {padding: 100px 0;}
.why-container .block-title {text-align: left; padding: 0;}
.why-container .block-content .block-image img {width: 100%;}
.why-container .block-content .block-detail {padding: 0 0 0 50px;}
.why-container .block-content .block-detail .block-desc {font-size: 16px; line-height: 28px; color: #808080; padding: 20px 0;}
.why-container .block-content .block-detail .learn-more {padding: 20px 0 0;}
/******** why us end here ********/

/******** stats start here ********/
.stats-container {background: url(assets/images/stats-bg.jpg) no-repeat center; background-size: cover; background-attachment: fixed; position: relative; z-index: 0; padding: 100px 0;}
.stats-container:before {content: ''; position: absolute; width: 100%; left: 0; top: 0; height: 100%; background: rgba(13, 17, 18, 0.44); z-index: -1;}
.stats-container .stats-counter .block-title {text-align: left;}
.stats-container .stats-counter .block-title .title {color: #ffffff; font-family: muli-extrabold, Arial, sans-serif; font-size: 38px; line-height: 52px;}
.stats-container .stats-counter .block-title .sub-title {color: #ffffff;}
.stats-container .stats-counter .counter-list {padding: 50px 0;}
.stats-container .stats-counter .counter-list .counter-list-block span {font-size: 32px; color: #ffffff;}
.stats-container .stats-counter .counter-list .counter-list-block .count-number {font-family: muli-bold, Arial, sans-serif; font-size: 48px; line-height: 60px; color: #ffffff; padding: 15px 0 10px;}
.stats-container .stats-counter .counter-list .counter-list-block .count-text {font-size: 18px; letter-spacing: 1px; color: #ffffff;}
/******** stats end here ********/

/******** portfolio start here ********/
.portfolio-main {padding: 100px 0;}
.portfolio-main .list-block {padding: 0 0 30px;}
.portfolio-main .gallery a .img-block {float: left; width: 32%; height: auto; padding: 2px; border: 1px solid #ddd;  border-radius: 8px; -webkit-transition: -webkit-transform .15s ease; -moz-transition: -moz-transform .15s ease; -o-transition: -o-transform .15s ease; -ms-transition: -ms-transform .15s ease; transition: transform .15s ease; position: relative; margin: 7px;}
.portfolio-main .gallery a:hover .img-block {-webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); z-index: 5;}
/******** portfolio end here ********/

/******** customer reviews start here ********/
.review-main {padding: 100px 0 200px; background-color: #f5f6fa;}
.review-main .bx-wrapper {background: none; border: 0px none; box-shadow: none; margin: 0px;}
.review-main .bx-controls-direction .bx-prev {background-color: #00a0e3; color: transparent; width: 40px; height: 40px; display: inline-block; top: 50%; left: 16px; z-index: 1; background-image: none; border-radius: 50%; margin-top: -30px; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);}
.review-main .bx-controls-direction .bx-next {background-color: #00a0e3; color: transparent; width: 40px; height: 40px; display: inline-block; top: 50%; right: 16px; z-index: 1; background-image: none; border-radius: 50%; margin-top: -30px; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);}
.review-main .bx-controls-direction .bx-prev::after {content:''; box-sizing: border-box; height: 13px; width: 13px; border-style: solid;  border-color: #fff; border-width: 0 3px 3px 0; transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); position: relative; top: -3px; left: 16px; display: block;}
.review-main .bx-controls-direction .bx-next::after { content:''; box-sizing: border-box; height: 13px; width: 13px; border-style: solid;  border-color: #fff; border-width: 0 3px 3px 0; transform: rotate(320deg); -ms-transform: rotate(320deg); -webkit-transform: rotate(320deg); position: relative; top: -3px; left: 11px; display: block;}
.review-main .bx-controls-direction .bx-prev:before {content: ''; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #136290; border-radius: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.review-main .bx-controls-direction .bx-prev:hover:before {-webkit-transform: scale(1); transform: scale(1);}
.review-main .bx-controls-direction .bx-next:before {content: ''; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #136290; border-radius: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.review-main .bx-controls-direction .bx-next:hover:before {-webkit-transform: scale(1); transform: scale(1);}
.review-main .bx-controls-direction a {position: absolute; outline: 0; text-indent: -9999px; z-index: 9999;}
.review-main .review-list .review-list-block .list-content {max-width: 650px; margin: 0 auto; text-align: center;}
.review-main .review-list .review-list-block .review-text {font-size: 26px; line-height: 38px; color: #2b2a29; position: relative;}
.review-main .review-list .review-list-block .list-content .review-text:before {content: ''; background: url('assets/images/quote-left.png') no-repeat center; background-size: contain; height: 40px; width: 40px; position: absolute; top: -5px; left: -50px;}
.review-main .review-list .review-list-block .list-content .review-text:after {content: ''; background: url('assets/images/quote-right.png') no-repeat center; background-size: contain; height: 40px; width: 40px; position: absolute; bottom: -5px; right: -50px;}
.review-main .review-list .review-list-block .customer-details {padding: 26px 0 0;}
.review-main .review-list .review-list-block .customer-details .name {font-family: muli-bold, Arial, sans-serif; font-size: 20px; line-height: 32px; color: #00a0e3;}
.review-main .review-list .review-list-block .customer-details .designation {font-family: muli-semi, Arial, sans-serif; font-size: 16px; line-height: 22px; color: #2b2a29;}
/******** customer reviews end here ********/

/******** footer start here ********/
.footer {background-color: #e1eafd; position: relative;}
.footer .section-wave {position: absolute; top: 0; transform: translateY(-100%); width: 100%; line-height: 0; z-index: 1; overflow: hidden;}
.footer .section-wave svg {fill: #e1eafd; width: 100%; height: 45px;}
.footer .footer-main {padding: 80px 0 30px;}
.footer .footer-main .footer-detail {padding: 0 0 50px;}
.footer .footer-main .footer-detail .footer-title {font-family: muli-semi, Arial, sans-serif; font-size: 24px; line-height: 30px; letter-spacing: 0.5px; color: #151515; padding: 0 0 25px; position: relative;}
.footer .footer-main .footer-detail .footer-title h4:after {content: ''; display: block; position: absolute; background: #151515; width: 50px; height: 3px; bottom: 20px;}
.footer .footer-main .footer-detail .about-text {font-size: 16px; line-height: 28px; color: #74757f; padding: 0 70px 0 0;}
.footer .footer-main .footer-detail .footer-link-list .link-default {padding: 5px 0; color: #74757f; font-size: 16px; display: block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.footer .footer-main .footer-detail .footer-link-list .link-default:hover {-webkit-transform: translateX(5px); transform: translateX(5px);}
.footer .footer-main .footer-detail .footer-contact-detail li {padding: 0 0 10px; position: relative;}
.footer .footer-main .footer-detail .footer-contact-detail li .icon {font-size: 20px; color: #2b2a29; position: absolute; top: 2px;}
.footer .footer-main .footer-detail .footer-contact-detail li .info {display: inline-block; padding: 0 0 0 30px; font-size: 16px; line-height: 28px; color: #74757f;}
.footer .footer-main .footer-detail .footer-contact-detail a {color: #74757f; font-size: 16px;}
.footer .footer-main .footer-copyright {text-align: center;}
.footer .footer-main .footer-copyright .copy-right {font-size: 16px; color: #74757f;}
/******** footer end here ********/

/******** portfolio popup end here ********/
.pop-overlay {position: fixed; top: 0px; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 0ms; visibility: hidden; opacity: 0;}
.pop-overlay:target {visibility: visible; opacity: 1;}
.popup {background: #fff; border-radius: 5px; width: 35%; position: relative; margin: 8em auto; padding: 3em 1em;}
.popup p {font-size: 15px; color: #666; letter-spacing: .5px; line-height: 30px;}
.popup h2 {margin-top: 0; color: #fff;}
.popup img {width: 100%;}
.popup .close {position: absolute; top: 5px; right: 15px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #000;}
.popup .close:hover {color: #0fcef7;}
/******** portfolio popup end here ********/

/******** about us start here ********/
.page-title {background: #136290; text-align: center;}
.page-title .page-name-block {font-size: 52px; color: #ffffff; padding: 50px; position: relative;}
.page-title .page-name-block h1:before {content: ''; background-color: #fff; width: 150px; height: 5px; position: absolute; top: 50%; left: 22%;}
.page-title .page-name-block h1:after {content: ''; background-color: #fff; width: 150px; height: 5px; position: absolute; top: 50%; right: 22%;}
.about-us {padding: 100px 0;}
.about-us .banner-title {text-align: left; font-family: muli-bold, Arial, sans-serif; font-size: 26px; padding: 0 0 20px; color: #2b2a29;}
.about-us .block-desc {font-size: 16px; line-height: 26px; color: #808080; padding: 0 0 30px;}
/******** about us end here ********/

/******** our services start here ********/
.our-services {padding: 100px 0;}
/******** our services end here ********/

/******** gallery start here ********/
.gallery-main {padding: 100px 0;}
.gallery-main .banner-title, .gallery-main .block-desc {text-align: center;}
.gallery-main .gallery a .img-block {float: left; width: 32%; height: auto; padding: 2px; border: 1px solid #ddd;  border-radius: 8px; -webkit-transition: -webkit-transform .15s ease; -moz-transition: -moz-transform .15s ease; -o-transition: -o-transform .15s ease; -ms-transition: -ms-transform .15s ease; transition: transform .15s ease; position: relative; margin: 7px;}
.gallery-main .gallery a:hover .img-block {-webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); z-index: 5;}
.has-lightbox .sl-overlay {background: #1e1e1e; opacity: 0.9;}
.has-lightbox .sl-wrapper .sl-navigation button.sl-prev, .has-lightbox .sl-wrapper .sl-navigation button.sl-next {font-size: 4rem; width: 50px; height: 60px; line-height: 50px; background-color: rgba(0,0,0,0.8); color: #ffffff;}
.has-lightbox .sl-wrapper .sl-counter {font-size: 1.5rem; color: #ffffff; top: 15px;}
.has-lightbox .sl-wrapper .sl-image .sl-caption {font-size: 16px; line-height: 28px;}
.has-lightbox .sl-wrapper .sl-close {height: 50px; width: 50px; font-size: 4rem; color: #ffffff; background: #000; right: 15px; top: 15px;}
/******** gallery end here ********/

/******** contact us start here ********/
.contact-us {padding: 100px 0;}
.contact-us .contact-info .company-logo {text-align: center;}
.contact-us .contact-info .contact-info-block {text-align: center; font-size: 16px; line-height: 28px; }
.contact-us .contact-info .contact-info-block h4 {font-family: muli-bold, Arial, sans-serif; font-size: 26px; color: #2b2a29; padding: 0 0 20px;}
.contact-us .contact-info .contact-info-block .info-list .info-title {}
.contact-us .contact-info .contact-info-block .info-list .info-detail a {font-family: muli-bold, Arial, sans-serif; color: #2b2a29;}
.contact-us .contact-form {padding: 80px 0;}
.contact-us .contact-form .block-title .title {font-family: muli-bold, Arial, sans-serif; font-size: 22px; line-height: 36px; color: #2b2a29;}
.contact-us .contact-form .block-title .sub-title {font-size: 16px; line-height: 28px; color: #808080;}

.contact-us .contact-form .form-data .input-block {padding: 0 0 30px; width: 100%;}
.contact-us .contact-form .form-data .form-control {border: 1px solid #C4C4C4; box-shadow: none; border-radius: 10px; color: #808080; font-size: 16px; width: 100%; height: 50px; padding: 10px 20px;}
.contact-us .contact-form .form-data .input-block-area {width: 100%;}
.contact-us .contact-form .form-data .input-block-area .form-control {width: 100%; resize: none; height: auto;}
.contact-us .contact-form .form-data .form-control:focus {color: #00a0e3; border: 1px solid #00a0e3;}
.contact-us .contact-form .form-data .form-control:focus::-webkit-input-placeholder {color: #00a0e3;}
.contact-us .contact-form .form-data .form-control:focus::-moz-placeholder {color: #00a0e3;}
.contact-us .contact-form .form-data .form-control:focus:-ms-input-placeholder {color: #00a0e3;}
.contact-us .contact-form .form-data .submit-btn {padding: 40px 0 0;}
.contact-us .contact-form .form-data .submit-btn .comm-btn {border: 0; outline: none;}
/******** contact us end here ********/

/******** Back to top start here ********/
.scroll-button .back-to-top {width: 60px; height: 60px; overflow: hidden; z-index: 999; display: none; cursor: pointer; position: fixed; bottom: 50px; right: 50px; background-color: rgba(255, 255, 255, 0.82); color: #00a0e3; text-align: center; border-radius: 50px; padding: 14px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);}
.scroll-button .back-to-top .fa {font-size: 32px;}
/******** Back to top end here ********/

