/*------------------------------------------------------------------
[Table of contents]

1. Body
2. Global Styles
3. Typography
4. Colors
5. Header, sidebar / .exalt-sidebar-menu
6. Logo / .navbar-brand
7. Navigation / #menu-primary
8. Social media / .footer-social
9. Content / .content-shrink
10. Left Seaction Heading / .split-color
11. Header Banner / .header-banner
12. About #about
13. Our Skills / #specialization
14. Our Projecst / #projects
15. Our Services / #services
16. Contact / #contact
-------------------------------------------------------------------*/
/** ========= GLOBAL STYLES ========= **/
body{font-size:14px; color:#fff; font-family: 'Montserrat', sans-serif;}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; outline: none;}
img{max-width:100%;}
input, textarea{font-family: 'Montserrat', sans-serif;}

.clr{clear:both;}
.clearfix:after {display: block; content: ''; width: 100%; clear: both; }

::-webkit-input-placeholder{color:#fff;}
::-moz-placeholder{color:#fff;}
:-ms-input-placeholder{color:#fff;}
:-moz-placeholder{color:#fff;}

input:disabled, textarea:disabled, select:disabled, button:disabled{background:rgba(255,255,255,0.2) !important;}

/** ========= TYPOGRAPHY ========= **/
a{color:#ffcf51; text-decoration:none;}
a:hover{color:#ff9c00; text-decoration:none;}
p{line-height:24px; margin-bottom:30px; letter-spacing:1.2px;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{font-family: 'Montserrat', sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:2.5px; margin:0 0 20px;}
.h2, h2{font-size:30px;}
.h3, h3{font-size:20px; text-transform:none;}

/* section left heading */
.section-number{font-size:55px; line-height:55px; margin-bottom:35px; font-weight:800;}
.section-heading{font-size:55px; line-height:55px; position: absolute; white-space:nowrap; width:0; top:180px; left:0; right:0;	margin:0 auto; font-weight:800; text-transform: uppercase; letter-spacing:0.1em; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform:rotate(-90deg);}
.section-heading span{display:block; float:right;}

/* section bottom heading */
.section-heading2{font-size:110px; line-height:normal; position:absolute; bottom:0; right:75px; text-align:right; opacity:0.25; margin:0;}

/** ========= COLORS ========= **/
/* section color */
.bg-blue{background-color:#516abc;}
.bg-yellow{background-color:#ff9900;}
.bg-green{background-color:#39ca76;}
.bg-red{background-color:#fd225f;}
.bg-dark-blue{background-color:#100d43;}
.bg-sky-blue{background-color:#17a2d4;}
.bg-light-orange{background-color:#f39e61;}
.bg-jungle{background-color:#29ab87;}
.bg-turkis{background-color:#4f97a3;}
.bg-ecru{background-color:#cdb17f;}
.bg-salmon{background-color:#ff7777;}
.bg-gray{background-color:#828282;}
.bg-teal{background-color:#15a2b3;}
.bg-light-teal{background-color:#00bcbd;}
.bg-midnight-blue{background-color:#304150;}
.bg-gold{background-color:#aa9166;}
.bg-light-blue{background-color:#38496b;}
.bg-dark-grayish{background-color:#47414f;}
/* body, loader, left menu color */
body, .loader, .exalt-sidebar-menu{background:#100d43;}
.spinner{background:#ff9900;}
/* menu and footer text color */
ul#menu-primary li a, .footer-social ul li a, .copyright-txt{color:#a6a3d7;}
ul#menu-primary li:hover a, ul#menu-primary li.active a, .footer-social ul li:hover a{color:#ff9900;}
ul#menu-primary li:hover:before, ul#menu-primary li.active:before{background:#ff9900;}

/* section left heading bg color */
.split-color{background:rgba(0,0,0,0.1);}

/** ========= LEFT MENUBAR ========= **/
.exalt-sidebar-menu{position:fixed; top:0; left:0; width:380px; height:100%; padding:25px 25px 0; z-index:99999; transition:all 0.3s;}
.header-inner{height:100%; position:relative; box-sizing:border-box;}

.exalt-one-page-nav{padding:0;}

/* menu open close buttons */
.mobile-menu-btn{font-size:24px; color: #fff; position: absolute; top: 0px; right: -50px; width: 50px; height: 50px;  background-color: #fd225f; line-height: 50px; text-align: center; cursor: pointer;	transition:all 0.3s; z-index:100000;}
.desktop-menu-btn{font-size:24px; color: #fff; position:absolute; top:0px; right:0px; width:50px; height:50px;  background-color:#fd225f; line-height:50px; text-align:center; cursor:pointer; transition:all 0.3s; z-index:100000;}
.desktop-menu-btn:hover{background-color:#ff9900;}
.dmenu-close .desktop-menu-btn{right:-50px; -webkit-border-radius:0; border-radius:0;}

.desktop-menu-btn:after, .exalt-sidebar-menu.active .mobile-menu-btn:after{content:"\f00d"; font-family: "Font Awesome 5 Free"; font-weight:900;}
.dmenu-close .desktop-menu-btn:after, .mobile-menu-btn:after{content:"\f0c9"; font-family: "Font Awesome 5 Free"; font-weight:900;}
.mobile-menu-btn{display:none;}

.dmenu-close .exalt-sidebar-menu{left:-380px;}
.dmenu-close .content-shrink{padding-left:0;}

/* logo */
.navbar-header{width:100%;}
.navbar-brand{text-align:center; color:#fff !important; display:block; margin:0 0 60px; padding:0; white-space:normal;}
.logo-icon{width:178px; margin-bottom:8px;}
.logo-text{font-family: 'Bungee Inline', cursive; display:block; font-size:36px; line-height:36px; letter-spacing:6px; margin-bottom:5px;}
.logo-tagline{font-family:'Roboto Condensed', sans-serif; display:block; font-size:12px; letter-spacing:1px; line-height:45px; text-transform:uppercase; margin-bottom:0;}

/* menus */
.nav-wrap{}
ul#menu-primary{border-left:#a6a3d7 1px solid; padding-left:24px; padding-top:7px; padding-bottom:7px; margin-left:7px; margin-bottom:50px;}
ul#menu-primary li{display:block; margin-bottom:30px; position:relative;}
ul#menu-primary li:before{position:absolute; content:""; left:-30px; top:6px; width:10px; height:10px; border-radius:50%; -webkit-border-radius:50%; background:#a6a3d7; transition:0.3s;}
ul#menu-primary li:last-child{margin-bottom:0;}
ul#menu-primary li a{font-size:12px; line-height:12px; text-transform:uppercase; letter-spacing:1px; transition:0.3s;}

/* footer */
.exalt-sidebar-menu-footer{ position:absolute; bottom:10px;}
.footer-social ul li{display:inline-block; vertical-align:top; padding:0 5px;}
.footer-social ul li a{font-size:15px;}
.copyright-txt{margin-bottom:20px; line-height:14px; letter-spacing:normal;}

/** ========= MAIN CONTENT ========= **/
.container-fluid{padding-left:80px; padding-right:80px;}
.content-shrink{padding-left:380px; width:100%; transition:all 0.3s; overflow-x:hidden; overflow-y:hidden;}
.content-boxed{padding-top:118px;  padding-bottom:170px; padding-left:188px; position:relative;}

/* section left heading */
.content-boxed .split-color{position:absolute; top:0; left:0; z-index:0; width:188px; height:100%; padding:115px 0 0; text-align:center; overflow:hidden;}

/* heading bottom border line */
.heading-border{padding-bottom:25px; position:relative;}
.heading-border:after{position:absolute; content:""; left:0; bottom:0; width:63px; height:3px; background:#fff;}
.heading-border2{padding-bottom:15px; position:relative;}
.heading-border2:after{position:absolute; content:""; left:0; bottom:0; width:47px; height:1px; background:#fff;}

.heading-border.text-center, .heading-border2.text-center{text-align:center;}
.heading-border.text-center:after, .heading-border2.text-center:after, .text-center .heading-border:after, .text-center .heading-border2:after{right:0; margin:0 auto;}
.heading-border.text-right:after, .heading-border2.text-right:after, .text-right .heading-border:after, .text-right .heading-border2:after{right:0; left:auto;}
/** ========= TOP BANNER AND SLIDER ========= **/
/* Home Top banner */
.header-banner{position:relative;}
.hbanner-img{width:100%; height:100vh; background-position:center center; background-repeat:no-repeat; position:relative; overflow:hidden;}
.hbanner-img:before{position:absolute; content:""; top:0; left:0; width:100%; height:100%; background:rgba(16,13,67,0.65);}

/* Home Top slider */
.slider-img{width:100%; height:100vh; background-position:center center; background-repeat:no-repeat; position:relative; overflow:hidden;}
.slider-img:before{position:absolute; content:""; top:0; left:0; width:100%; height:100%; background:rgba(16,13,67,0.65); z-index:2;}
.zs-enabled .zs-slideshow .zs-bullets{display:none;}

/* Home Top banner slider text and button */
.rotate{-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg);}

.hbanner-txt{position:absolute; top:50%; transform:translate(0,-50%); left:0; right:0; margin:0 auto; z-index:99; text-align:center;}
.hbanner-txt h1{font-size:62px; line-height:62px; margin-bottom:20px;}
.hbanner-txt p{font-size:24px; line-height:24px; font-weight:200; margin-bottom:30px;}
.red-bg-txt, .jungle-bg-txt{font-size:45px; line-height:45px; font-weight:200; margin-bottom:20px; letter-spacing:3px;}

/* banner buttons */
.btn{vertical-align:top;}
.flat-btn{background-color:#ff9900; color:#fff; font-size:18px; line-height:18px; text-transform:uppercase; letter-spacing:2px; padding:13px 15px; border-radius:0; transition:0.3s;}
.flat-btn:hover{background-color:#39ca76; color:#fff;}

.hbanner-logo{position:absolute; top:8px; right:8px; width:45px; z-index:99; display:none;}
.dmenu-close .hbanner-logo{display:block;}

.down-btn{position:absolute; bottom:0; right:0; background:#ff9900; width:62px; height:62px; line-height:62px; text-align:center; font-size:24px; color:#fff; transition:0.3s; z-index:9999;} 
.down-btn:hover{background-color:#39ca76; color:#fff;}

/** ========= ABOUT ME ========= **/
/* about image */
.about-img{margin-top:6px;}
.about-img img{position:relative; border:#fff 10px solid;}
.behind-border-box{position:relative; padding-left:5%; padding-top:5%; display:inline-block;}
.behind-border-box:before{position:absolute; content:""; left:0; width:90%;	height:90%; top:0; background:#ff9900;}
.img-hover{position:relative; overflow:hidden;}
.img-hover::before{position: absolute; top: 0; left: -75%;	z-index: 2;	display: block;	content: ''; width: 50%; height: 100%;	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); -webkit-transform: skewX(-25deg);	transform: skewX(-25deg);}
.about-img:hover .img-hover::before{-webkit-animation: shine .75s;	animation: shine .75s;}
@-webkit-keyframes shine{
	100%{left: 125%;}
}
@keyframes shine {
	100% {left: 125%;}
}
/* personal info */
.personal-info{margin-bottom:26px;}
.personal-info-title{width:80px; float:left; font-weight:800; padding-right:10px; position:relative; display:block;}
.personal-info-title:after{content:":"; position:absolute; right:0; top:0;}
.personal-info-disc{padding-left:100px; display:block}

/* download and hire button */
#about .flat-btn{margin-right:10px; margin-bottom:10px;}
.hire-btn{border:#fff 1px solid; color:#fff; text-transform:uppercase; font-size:18px; line-height:18px; letter-spacing:2px; padding:13px 15px; border-radius:0; transition:0.3s;}
.hire-btn:hover{background:#fff; color:#36739e;}

/** ========= OUR SKILLS ========= **/
/** Progressbar class css*/
.progressbar{width: 100%; margin-top: 5px; margin-bottom: 35px;	position: relative;	background-color: #fff !important;}
.proggress{height:8px; width:10px; background-color:#516abc;}
.percentCount{float:right; margin-top:10px;	clear: both; font-size:14px; letter-spacing:2px;}
.progress-box p{margin-bottom:10px;}

.progress{background:#fff; border-radius:30px; -webkit-border-radius:30px; height:8px;}
.progress-bar{background-color:#516abc;}

.skill-icon{font-size:48px; line-height:48px; margin-bottom:10px;}

/** ========= OUR PROJECTS ========= **/
.projects-sec{text-align:center;}
/* tab menu */
.toolbar{border-radius:30px; -webkit-border-radius:30px; display:inline-block; vertical-align:top; overflow:hidden; padding:0 18px; margin-bottom:65px; border:none; background:#fff;}
.toolbar button{font-size:14px; line-height:14px; color:#39ca76; font-weight:300; letter-spacing:1px; padding:0 15px; text-transform:uppercase; transition:0.3s; background:none; border-radius:0; border-right:#d7d7d7 1px solid; margin:13px 0;}
.toolbar button:last-child{margin-right:0; border-right:none;}
.toolbar button:hover, .toolbar button:focus{box-shadow:none; color:#516abc;}
.tabmenu-mobile{width:50px; height:50px; line-height:50px; background-color:#fff; color:#29ab87; font-size:21px; border-radius:5px; margin:0 auto 35px; cursor:pointer; display:none;}

/* project box */
.work-box{position:relative; text-align:center; margin-bottom:30px; overflow:hidden;}
.work-box img{position:relative;}
.work-box:after{position:absolute; content:""; top:0; left:0; width:100%; height:100%; background:rgba(16,13,67,0.9); transition:0.3s; opacity:0;}

/* project box hover info*/
.work-box .hoverinfo{position:absolute; top:0%; left:0; width:100%; transition:all 0.5s; color:#fff; opacity:0; visibility:hidden;	z-index:1;}
.work-box .hoverinfo a{color:#fff;}
.work-box:hover .hoverinfo{top:50%; transform:translate(0,-50%); opacity:1; visibility:visible;}
.work-box:hover:after{opacity:1;}
.work-box .hoverinfo a.prolink-icon{display:inline-block; vertical-align:top; width:45px; height:45px; line-height:45px; margin:0 2px; font-size:18px; border-radius:50%; -webkit-border-radius:50%; text-align:center; color:#39ca76; background-color:#fff; transition:0.3s;}
.work-box .hoverinfo a.prolink-icon:hover{background-color:#39ca76; color:#fff;}
.link-icons{margin-bottom:10px;}

#portfolio{margin: 1rem 0; -webkit-column-count: 4; -moz-column-count: 4; column-count:4; -webkit-column-gap:1rem; -moz-column-gap:1rem; column-gap:1rem; -webkit-column-width:25%; -moz-column-width:25%; column-width:25%;}
::-moz-focus-inner{border:0;  padding: 0;}
.gallery_product {flex: unset;}

/** ========= OUR SERVICES ========= **/
.service-box{margin-bottom:55px; text-align:center;}
.service-box-border{padding-bottom:22px; border-bottom:#fff 1px solid;}
.service-icon{width:60px; height:70px; font-size:36px; line-height:70px; text-align:center; border:#fff 2px solid; margin:0 auto 17px;}

/** ========= CONTACT SECTION ========= **/
/* contact info */
.contact-box{margin-bottom:35px; text-align:center;}
.contact-icon{width:60px; height:70px; font-size:36px; line-height:70px; margin:0 auto 17px; text-align:center; border:#fff 2px solid;}
.contact-box a{color:#fff;}

/* google map */
.gmap{margin-top:6px; width:100%;}
.gmap iframe{position:relative; width:100%; border:#fff 10px solid;}

/* contact form */
.contact-form{ padding-top:30px;}
.contact-form .f-field{margin-bottom:30px;}
.contact-form .f-field input{display:block; width:100%; height:40px; background:none; border:none; border-bottom:#fff 1px solid; font-size:14px; line-height:14px; letter-spacing:2px; color:#fff; padding:0 15px;}
.contact-form .f-field textarea{display:block; width:100%; height:130px; background:none; border:none; border-bottom:#fff 1px solid; font-size:14px; line-height:14px; letter-spacing:2px; color:#fff; padding:15px;}
.contact-form .sent-btn input{display:block; width:100%; height:55px; background:#fff; border:none; font-size:18px; line-height:18px; letter-spacing:2px; color:#516abc; text-transform:uppercase; font-weight:800; padding:0 15px; cursor:pointer;}

/** ========= LOADER ========= **/
.loader{position:fixed; overflow: hidden; z-index: 999999; left:0; top: 0; width:100%; height:100%; text-align:center;}
.spinner{position:absolute; top:50%; left:0; right:0; transform:translate(0,-50%); width: 40px; height: 40px; margin:0 auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out;}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% {transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)} 
  50% {transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)} 
  100% {transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);}
}

/** ========= RESPONSIVE ========= **/
@media screen and (max-height:720px) {
.exalt-sidebar-menu-footer{position:inherit;}
}

@media only screen and (max-width:1580px) {
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{letter-spacing:2px;}

.navbar-brand{margin:0 0 40px;}
.logo-icon{width:105px;}

.content-shrink{padding-left:300px;}
.exalt-sidebar-menu{width:300px; padding:15px 15px 0;}
.dmenu-close .exalt-sidebar-menu{left:-300px;}

.section-number{font-size:45px; line-height:45px;}
.section-heading{font-size:45px; line-height:45px; top:160px;}

.container-fluid{padding-left:30px; padding-right:30px;}
.content-boxed .split-color{width:140px; padding:110px 0 0;}
.content-boxed{padding-left:140px; padding-top:7rem; padding-bottom:7rem;}
.service-box{padding-right:0;}
.section-heading2{font-size:80px; right:26px;}

#about .flat-btn, .hire-btn{min-width:196px;}

.contact-icon{float:none; margin-bottom:17px;}
.contact-txt{padding-left:0;}
}
@media only screen and (max-width:1280px) {
.navbar-brand{margin:0 0 25px;}

.desktop-menu-btn{display:none;}
.mobile-menu-btn, .hbanner-logo{display:block;}
.exalt-sidebar-menu{left:-300px;}
.content-shrink{padding-left:0;}
.exalt-sidebar-menu.active{left:0px;}

.down-btn{width:50px; height:50px; line-height:50px;}
}
@media only screen and (max-width:1024px) {
.h2, h2{font-size:27px;}
.h3, h3, .service-box h3{font-size:16px;}

.hbanner-txt h1{font-size:55px; line-height:55px;}
.red-bg-txt, .jungle-bg-txt{font-size:38px; line-height:38px;}

.section-number{font-size:40px; line-height:40px;}
.section-heading{font-size:40px; line-height:40px; top:145px;}
.section-heading2{font-size:70px;}
}
@media only screen and (max-width:991px) {
ul#menu-primary li{margin-bottom:15px;}

.hbanner-txt h1{font-size:50px; line-height:50px;}
.hbanner-txt p{font-size:18px; line-height:18px;}
.red-bg-txt, .jungle-bg-txt{font-size:28px; line-height:28px;}

.toolbar button{font-size:13px; line-height:13px; padding:0 5px;}

#portfolio{-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-width:33.3333%; -moz-column-width:33.3333%; column-width:33.3333%;}

.progress-box.pl-5{padding-left:0 !important;}

.section-heading, .section-number{font-size:36px; line-height:36px;}
.section-heading2{font-size:55px;}

.service-box-border{border-bottom:none; padding-bottom:0;}
.contact-form{margin-bottom:30px;}

.content-boxed .pr-5, .content-boxed .pr-3{padding-right:0 !important;}
.content-boxed .pl-5, .content-boxed .pl-3{padding-left:0 !important;}
}
@media only screen and (max-width:767px) {
.h2, h2{font-size:24px;}
.exalt-sidebar-menu{width:270px; left:-270px;}

.logo-icon{width:75px;}
.logo-text{font-size:28px; line-height:28px;}
.logo-tagline{font-size:10px;}

.copyright-txt{font-size:12px; line-height:12px; margin-bottom:15px;}

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

.content-boxed .split-color{position:inherit; width:100%; min-height:auto; height:inherit; overflow:inherit; padding:20px 0; margin-bottom:45px;}
.section-heading{left:inherit; position:inherit; top:inherit; text-align:center; width:auto; -webkit-transform:rotate(0); -moz-transform:rotate(0); -ms-transform:rotate(0); -o-transform:rotate(0);}
.section-heading span{float:none;}
.section-heading, .section-number{font-size:30px; line-height:30px;}
.section-number{margin-bottom:10px;}
.section-heading2{right:18px; font-size:50px;}
.content-boxed{padding-top:0; padding-left:0;}

.hbanner-txt h1{font-size:40px; line-height:40px; margin-bottom:10px;}
.hbanner-txt p{font-size:16px; line-height:16px;}

.tab-custom .nav-tabs li a{font-size:12px; line-height:12px;}
}
@media only screen and (max-width:639px) {
.hbanner-txt h1{font-size:30px; line-height:30px;}
.h2, h2{font-size:22px;}
.content-boxed{padding-bottom:5rem;}
.section-heading2{font-size:35px; line-height:35px; left:0; right:0; bottom:15px; margin:0 auto; text-align:center;}
.section-heading, .section-number{font-size:30px; line-height:30px;}

.tab-custom .nav-tabs li, .toolbar button{float:none; display:block; width:100%; border-right:none;}

.toolbar{margin-bottom:5px; border-radius:8px; -webkit-border-radius: 8px; display:none; transition:all 0.3s;}
.tabmenu-mobile, .toolbar.active{display:block;}
#portfolio{-webkit-column-count:2; -moz-column-count: 2; column-count: 2; -webkit-column-width:50%; -moz-column-width:50%; column-width:50%;}

.gmap iframe{height:300px;}
}
@media only screen and (max-width:480px) {
.service-box{margin-bottom:35px;}
}
@media only screen and (max-width:359px) {
.exalt-sidebar-menu.active .mobile-menu-btn{right:0; width:40px; height:40px; line-height:40px;}
.gmap iframe{height:320px;}
}