/*
====================================================

* 	[Master Stylesheet]

	Theme Name :  NGEN
	Version    :  1.1
	Author     :  Roman Ahmed
	Author URI :  https://themeforest.net/user/desroman

====================================================


	TOC:
	=======

	1. PRIMARY STYLES
		PAGE LOADER
		ANIMATION BEFORE GO TO THE OTHER PAGE
	2. COMMON SYLES
	3. MENU STYLING
		LOGO
		MAIN MENU
		DROPDOWN
		TOGGLE CAKE ICON
		MENU ANIMATIONS
		MENU ELEMENTS ANIMATIONS ON VISIBLE
		SLIDE PAGE ON MENU VISIBLE
	4. SLIDER AREA
	5. PROJECT INFO AREA
	6. PROJECT IMAGE AREA
	7. NAVIGATION PROJECT AREA
		NAVIGATION ICONS
		HOVER EFFECTS
	8. FOOTER AREA
		NEWSLETTER AREA
		ICONS AREA
		LANGUAGE AREA
		COPYRIGHT AREA


===================================================== */


/* ---------------------------------
1. PRIMARY STYLES
--------------------------------- */

html { font-size: 100%; overflow: visible; overflow-x: hidden; }

body{ margin: 0; font-size: 16px; word-wrap: break-word; font-family: 'Saira', sans-serif; color: #fff; background: #232323; }

h1, h2, h3, h4, h5, h6, p, a, ul, span, li, img{ margin: 0; padding: 0; }

h1,h2,h3,h4,h5,h6,ul,a{  font-family: 'Khand', sans-serif; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; }

h1,h2,h3,h4,h5,h6{ line-height: 1.3; }

p{ line-height: 1.6; font-weight: 400; color: #eee; }

h1{ font-size: 5.5em; line-height: 1; letter-spacing: 8px; }
h2{ font-size: 3em; line-height: 1.1; letter-spacing: 5px; }
h3{ font-size: 2em; }
h4{ font-size: 1.5em; }
h5{ font-size: 1.1em; }
h6{ font-size: .9em; }

a{ display: inline-block; text-decoration: none; color: inherit; }

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

b{ font-weight: 700; }

img{ width: 100%; }

li{ list-style: none; }


/* PAGE LOADER */

.css-loader{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: #232323; color: #fff; z-index: 99999;
	text-align: center; overflow: hidden; }

.bg{ will-change: transform; position: absolute; top: 0; left: 0; height: 100%; right: 0; opacity: 0; background: #000; z-index: 1;
	animation: loader-bg-anim 2s 1s forwards cubic-bezier(.77, .2, .175, 1); }

@keyframes loader-bg-anim{
	0%	{ opacity: 1; transform: skew(4deg) translateX(-100%); }
	100%{ opacity: 1; transform: skew(0deg) translateX(100%); }
}

.loader-writings{ will-change: transform; opacity: 0; animation: load-writings-anim 2s 2s forwards; }

@keyframes load-writings-anim{
	0%	{ opacity: 0; }
	100%{ opacity: 1; }
}

.css-loader span{ will-change: transform; font-size: 1.2em; animation: font-blur 5s infinite; margin: 0 4px; line-height: 100vh; }

.css-loader span:nth-child(1){ animation-delay: 0s; }
.css-loader span:nth-child(2){ animation-delay: .4s; }
.css-loader span:nth-child(3){ animation-delay: .8s; }
.css-loader span:nth-child(4){ animation-delay: 1.2s; }
.css-loader span:nth-child(5){ animation-delay: 1.6s; }
.css-loader span:nth-child(6){ animation-delay: 2s; }
.css-loader span:nth-child(7){ animation-delay: 2.4s; }

@keyframes font-blur{
	0%{ filter: blur(0px); }
	50%{ filter: blur(3px); }
	100%{ filter: blur(0px); }
}


.after-load,
.inverse-after-load{ will-change: transform; animation: 2s forwards cubic-bezier(.77, .2, .175, 1); }

.after-load{ will-change: transform; animation-name: after-load-anim; }

@keyframes after-load-anim{
	0%	{ transform: translateX(0%); }
	100%{ transform: translateX(100%); }
}

.inverse-after-load{ will-change: transform; opacity: 1; animation-name: inverse-after-load-anim; }

@keyframes inverse-after-load-anim{
	0%	{ transform: translateX(0%); }
	100%{ transform: translateX(-100%); }
}


/* ANIMATION BEFORE GO TO THE OTHER PAGE */

.fixed-circle{ position: fixed; background: #232323; height: 2000px; width: 2000px; z-index: 100000;
	border-radius: 1000px; margin-top: -1000px; margin-left: -1000px; transform: scale(0); will-change: transform;
	left: 50%; top: 50%; animation: fixed-circle-anim 1.5s forwards ease-out; }

@keyframes fixed-circle-anim{
	0%	{ opacity: .6; transform: scale(0); }
	100%{ opacity: 1; transform: scale(1); }
}



/* ---------------------------------
2. COMMON SYLES
--------------------------------- */

.section{ margin-top: 150px; }

.section .heading{ padding: 0px 10px 30px; position: relative; margin-bottom: 50px; text-align: center; }

.heading .heading-bg{ position: absolute; top: -80%; width: 100%; right: 10px; font-size: 12em; z-index:-1; font-weight: 800;
	color: #F3F3F4; }

[data-page-animation]{ transition: all .9s cubic-bezier(0.000, 0.000, 0.443, 1); }

.scroll-smooth { position: fixed; top: 0; left: 0; width: 100%; transition: all .55s cubic-bezier(0.145, 0.513, 0.343, 1);
	transform-origin: 0 0; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden; perspective: 2000px;
	box-sizing: border-box; }

.display-table{ display: table; height: 100%; width: 100%; text-align: center; }

.display-table-cell{ display: table-cell; vertical-align: middle; }

.pre-title{ letter-spacing: 15px; }



/* ---------------------------------
3. MENU STYLING
--------------------------------- */

header{ position: fixed; top: 10px; left: 0; right: 0; z-index: 1000; padding: 0 40px; }


/* LOGO */

.logo{ height: 110px; float: left; margin: 10px 0; position: relative; z-index: 1000; }

.logo a{ display: block; height: 100%; }

.logo img{ width: auto; height: 100%;  }


/* MAIN MENU */

.main-menu{ position: fixed; top: 0; left: -100%; height: 100%; width: 100%; overflow: hidden; background: #000; }

.main-menu ul.nav-menu { padding: 150px 0; width: 600px; margin: 0 auto; }

.main-menu ul.nav-menu> li{ font-size: 1.8em; margin: 10px 0; width: 50%; color: #fff; }

.main-menu ul.nav-menu> li> .icons>li{ font-size: .5em; display: inline-block; margin: 15px 0px; position: relative; }

.main-menu ul.nav-menu> li > .icons> li > a{ padding: 0 3px; position: relative; }

.main-menu ul.nav-menu> li> a:after{ content: ''; position: absolute; top: 50%; margin-top: -1px; height: 2px;
	left: 20px; right: 100%; transition: all .3s; background: #aaa; }

.main-menu ul.nav-menu> li:hover> a:after{ right: 20px; }


/* DROPDOWN */

.main-menu ul.nav-menu li.drop-down .nv-icn{ margin-left: 10px; transition: all .3s .1s ease-in-out; }

.nv-icn.rotate{ transform: rotate(90deg); }

.drop-down-menu{ position: absolute; top: 0; left: 300px; width: 300px; transform-origin: left top; z-index: 1; opacity: 0;
	overflow: hidden; max-height: 0; font-size: .9em;
	will-change: transform; transition: all .6s .1s cubic-bezier(.57, .1, .175, 1),opacity .3s .4s; }

.drop-down-menu li{ padding: 5px 0; }

.main-menu ul.nav-menu> li > .drop-down-menu.d-open{ max-height: 250px; opacity: 1; }

.main-menu ul.nav-menu> li > .drop-down-menu.d-open:after{ transform: translateY(100%); }

.drop-down-menu:after{ content:''; position: absolute; top: 0; left: 0;  width: 100%; height: 100%; z-index: 1;
	transition: all 1s .3s ease-in-out; background: #fff; }


/* TOGGLE CAKE ICON */

.nav-icon{ border-radius:0; border: 0; margin: 21.5px 0; height: 18px; width: 30px; position: relative; float: right;
	background: none; cursor: pointer; z-index: 10000; transition: all .2s ease-in-out; margin-right: 0px; }

.nav-icon:after{ content:''; position: absolute; top: -16px; bottom: -18px; right: -12px; left: -12px; z-index: -1;
	border-radius: 100px; transition: all .1s cubic-bezier(.77, .2, .325, 1); border: 0px solid #ccc; }

.nav-icon:hover:after{ transform: scale(1.1); }

.nav-icon span{ display: block; position: absolute; height: 2px; width: 100%; left: 0;
	transition: all .3s cubic-bezier(.77, .2, .325, 1);
	box-shadow: 0px 0px 10px -1px rgba(0,0,0,1); background: #fff; }

.nav-icon span:nth-child(1){ top: 0; width: 80%; }

.nav-icon span:nth-child(2){ top: 8px; }

.nav-icon span:nth-child(3){ top: 16px; margin-left: 30%; width: 70%; }

.nav-icon:hover span{ width: 100%; margin-left: 0; }

.nav-icon.close-btn{ transform: rotate(-90deg); }

.nav-icon.close-btn span{ width: 100%; margin-left: 0; }

.nav-icon.close-btn span:nth-child(2){ opacity: 0; }

.nav-icon.close-btn span:nth-child(1){ transform: translateY(8px) rotate(45deg); }

.nav-icon.close-btn span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }


/* MENU ANIMATIONS */

.inverse-menu-to-right,
.menu-to-right{ animation-duration: 1.5s; animation-timing-function: cubic-bezier(.87, .3, .175, 1);
	animation-fill-mode: forwards; opacity: 1; transform-origin: left top; will-change: transform; }

.menu-to-right{ will-change: transform; animation-name: menu-to-right-anim; }

@keyframes menu-to-right-anim{
	0%	{ opacity: 1; transform: skew(6deg) translate3d(0, 0, 0); }
	100%{ opacity: 1; transform: skew(0deg) translate3d(100%, 0, 0); }
}

.inverse-menu-to-right{ will-change: transform;  animation-name: inverse-menu-to-right-anim; }

@keyframes inverse-menu-to-right-anim{
	0%	{ opacity: 1; transform: skew(-6deg) translate3d(100%, 0, 0);  }
	100%{ opacity: 1; transform: skew(0deg) translate3d(0, 0, 0); }
}


/* MENU ELEMENTS ANIMATIONS ON VISIBLE*/

.menuelem-to-top,
.menuelem-to-right{ will-change: transform; animation-duration: .8s; animation-timing-function: ease-out;
	animation-fill-mode: forwards; opacity: 0; }

.menuelem-to-right{ will-change: transform; animation-name: menuelem-to-right-anim; }

@keyframes menuelem-to-right-anim{
	0%	{ opacity: 0; transform: translate3d(-100px, 0, 0); }
	100%{ opacity: 1; transform: translate3d(0, 0, 0); }
}

.menuelem-to-top{ will-change: transform; animation-name: menuelem-to-top-anim; }

@keyframes menuelem-to-top-anim{
	0%	{ opacity: 0; transform-origin: top left;  transform: rotateY(20deg) scale3d(1.02, 1.1, 1) translate3d(0, -20px, 0); }
	100%{ opacity: 1; transform-origin: top left;  transform: rotateY(0deg) scale3d(1, 1, 1) translate3d(0, 0, 0); }
}


/* SLIDE PAGE ON MENU VISIBLE */

.main-menu,
[data-slide-page-for-menu]{ will-change: transform; transition: all 1.5s cubic-bezier(.87, .3, .175, 1); }

.page-slide-to-right{ transform: translateX(15%); }



/* ---------------------------------
4. SLIDER AREA
--------------------------------- */

.slider-area{ height: 500px; width: 100%; box-shadow: 2px 3px 20px 8px rgba(0,0,0,.2);
	background-size: cover; background-image: url(../../images/slider-5-1600x900.jpg); }

.slider-area:after{ content:''; position: absolute; top: 0; bottom: 0; left: 0; right:0;
	background: #232323; opacity: .1; }



/* ---------------------------------
5. PROJECT INFO AREA
--------------------------------- */

.project-info-area .title{ padding-bottom: 30px; text-align: center; }

.project-info{ text-align: right; margin-right: 0px; }

.project-info li{ margin-bottom: 10px; color: #AFA256; }

.project-info li > span{ display: block; color: #aaa; }

.project-info-area .visit-web-btn{ margin-top: 20px; padding-bottom: 5px; overflow: hidden; position: relative;
	color: #fff; }

.project-info-area .visit-web-btn:after,
.project-info-area .visit-web-btn:before{ content:''; position: absolute; bottom: 0; width: 100%; height: 1px;
	transition: all 1.5s cubic-bezier(.77, .2, .175, 1); background: #fff; }

.project-info-area .visit-web-btn:after{ left: 0; }

.project-info-area .visit-web-btn:before{ left: -400%; }

.project-info-area .visit-web-btn:hover:before{  transform: translate3d(400%, 0, 0); }

.project-info-area .visit-web-btn:hover:after{ transform: translate3d(400%, 0, 0); }



/* ---------------------------------
6. PROJECT IMAGE AREA
--------------------------------- */

.project-image{ margin-bottom: 30px; }

.project-image img{ width: 100%; height: auto; border-radius: 3px; box-shadow: 2px 3px 20px 8px rgba(0,0,0,.2); }



/* ---------------------------------
7. NAVIGATION PROJECT AREA
--------------------------------- */

.navigate-pjkt-area{ padding-top: 70px; }

.navigate-project{ border-radius: 3px; box-shadow: 2px 3px 20px 8px rgba(0,0,0,.2); overflow: hidden; }

.navigate-project .nav-p-btn{ margin-bottom: 5px; transition: all .4s cubic-bezier(.77, .2, .175, 1); color: #AFA256; }

.navigate-project .left-area,
.navigate-project .right-area{ float: left; width: 50%; padding: 50px; position: relative; z-index: 1;
	background-size: cover; background-repeat: no-repeat; display: block; }

.navigate-project .left-area{ text-align: right; padding-left: 120px; }

.navigate-project .right-area{ padding-right: 120px; }

.navigate-project .title{ transition: all .4s cubic-bezier(.77, .2, .175, 1); color: #fff; }

.navigate-project .left-area:after,
.navigate-project .right-area:after{ content:''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
	z-index: -1; transition: all .4s cubic-bezier(.77, .2, .175, 1); background: #232323; }


/* NAVIGATION ICONS */

.next,
.prev{ position: absolute; height: 50px; width: 100px; top: 50%; margin-top: -25px; }

.next{ right: 50px; }
.prev{ left: 50px; }

.prev .left-arrow,
.next .right-arrow{ position: absolute; top: 50%; height: 1px; margin-top: -.5px; background: #fff;
	transition: all .3s ease-in-out; }

.prev .left-arrow{ left: 15px; right: 10px;  }

.next .right-arrow{ left: 10px; right: 15px;  }

.prev:before,
.prev:after,
.next:before,
.next:after{ content:''; position: absolute; top: 50%; width: 30%; height: 1px; margin-top: -.5px;
	transition: all .2s .3s ease-in-out; background: #fff; }

.next:before,
.next:after{ right: 0px; transform-origin: center right; }

.prev:before,
.prev:after{ left: 0px; transform-origin: center left; }

.prev:before,
.next:after{ transform: rotate(45deg); }

.prev:after,
.next:before{ transform: rotate(-45deg); }


/* HOVER EFFECTS */

.left-area:hover:after,
.right-area:hover:after{ background: rgba(0,0,0,.5); }

.left-area:hover .nav-p-btn,
.right-area:hover .nav-p-btn{ transform: translate3d(0, 10px, 0); }

.right-area:hover .title{ transform: translate3d(15px, 0, 0); }

.left-area:hover .title{ transform: translate3d(-15px, 0, 0); }

.right-area:hover .right-arrow,
.left-area:hover .left-arrow{ left: 0px; right: 0; }

.left-area:hover .prev:before,
.left-area:hover .prev:after,
.right-area:hover .next:before,
.right-area:hover .next:after{ width: 50%; }



/* ---------------------------------
8. FOOTER AREA
--------------------------------- */

footer{ padding: 150px 0 50px; }

.footer-section { margin-bottom: 50px; }

.footer-section .title{ margin-bottom: 20px; }


/* NEWSLETTER AREA */

.newsletter .email-input{ border: 0; outline: 0; background: none; box-shadow: none; border-radius: 0; padding: 0;
	width: 100%; display: block; height: 30px; line-height: 30px; padding-left: 5px; padding-right: 60px;
	border-bottom: 1px solid #888; color: #fff; }

.newsletter .input-group{ position: relative; width: 100%; margin: auto; }

.newsletter .input-group .enter-btn{ border: 0; outline: 0; background: none; box-shadow: none; border-radius: 0;
	position: absolute; top: 0; right: 0; z-index: 10; width: 50px; height: 30px; line-height: 30px; padding: 0;
	letter-spacing: inherit; transition: all .2s; }

.newsletter .enter-btn:hover{ transform: translateY(-3px); }

.newsletter .contact span{ margin-top: 20px; display: block; }

.newsletter .contact-btn{ padding: 10px 25px; margin-top: 20px; transition: all .2s; }

.form-control::-webkit-input-placeholder { color: #888; letter-spacing: 2px; }
.form-control::-moz-placeholder { color: #888; letter-spacing: 2px; }
.form-control:-ms-input-placeholder { color: #888; letter-spacing: 2px; }
.form-control:-moz-placeholder { color: #888; letter-spacing: 2px; }


/* ICONS AREA */

.icons-area{ margin-left: 30px; }

.icons-area .icons> li{ display: inline-block; }

.icons-area .icons> li > a{ padding: 5px 0; margin-right: 10px; font-size: .85em; color: #aaa; }


/* LANGUAGE AREA*/

.language{ text-align: right; }

.language a{ position: relative; padding-right: 10px; margin-right: 10px; }

.language a:after{ content:''; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; transform: rotate(15deg);
	background-color: #aaa; }

.language a:last-child:after{ width: 0; }


/* COPYRIGHT AREA */

.copyright{ text-align: center; }