/*
*
* @name Enes KARACA
* @package eneskaraca
* @author  Site24
* @version 1.0.0
*/

/*----------------------------

- CSS Map

0. General Settings
1. Header
2. Slider
----------------------------*/

/**- 0. General Settings --*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;900&display=swap');

body{
	font-family: 'Montserrat', sans-serif;
	margin:0;
	padding:0;
}
:root{
	--primary:#000;
	--secondary:#344dff;
	--light:#efefef;
	--head-1:70px;
	--head-2:60px;
	--text-1:16px;
	--text-2:18px;
	--transition:all .3s linear;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	margin:0;
}
h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.17em;
}

h4 {
	font-size: 1.00em;
}

h5 {
	font-size: 0.83em;
}

h6 {
	font-size: 0.67em;
}
h1{}
*{
	box-sizing:border-box;
}
.slice{
	margin:2em 0;
}
.lead{
	font-size:var(--text-1);
	line-height:1.6;
}
.lead-bold{
	font-weight:500;
	font-size:var(--text-2);
}
figure{
	padding:0;
	margin:0;
}
.text{
	text-transform: lowercase;
}
.overflow-hidden{
	overflow: hidden;
}
.text-white{
	color:#efefef;
}
.text-dark{
	color:#000;
}
.p-0{
	padding:0;
}
.m-0{
	margin:0;
}
.ns-row{
	display:flex;
}
.container{
	width:100%;
	max-width:100%;
	padding-left:5rem;
	padding-right:5rem;
}
.btn{
	transition:var(--transition);
}
.btn-toggle{
	cursor: pointer;
}
.btn-toggle svg {
	filter: brightness(0) invert(1);
	max-width: 40px;
	vertical-align: middle;
}
.btn-toggle.active{
	opacity:.6;
}
@keyframes scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-230%);
	}

}
/**- 1. Header --*/
header {
	position: relative;
	border-bottom: 1px solid rgba(255,255,255,.15);
	z-index:99;
}
body:not(.home) header{
	background:var(--primary);
}
header .header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
header .logo svg {
	height: 25px;
	width: 100%;
	max-width: 100%;
}
header .logo:before {
	content: '';
	width: 2em;
	height: 1px;
	background: rgba(255,255,255,.25);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: var(--transition);
}

header .logo:hover:before {
	width: 4em;
}
header .header-inner .right {
	display: flex;
	align-items: center;
	column-gap: 20px;
}
header .menus{
	transition:var(--transition);
}
header .menus a{
	transition:var(--transition);
}
header .menus:hover a,
.ns-slider .right .btn:hover {
	color: #888;
}
header .menus a:hover{
	color:var(--light);
}

header .menus a {
	color: var(--light);
	text-decoration: none;
	padding: 0 10px;
	font-size: var(--text-1);
	transform: var(--transition);
}
header .menus a:hover{
	color:#ccc;
}

/**- </1. Header --*/
/**- 2. Slider --*/
body.home .ns-slider{
	margin-bottom:0;
}
.ns-slider {
	margin-top: -65px;
	padding-top:65px;
	height: 100vh;
	display: flex;
	align-items: center;
}
.home .ns-slider figcaption h2{
	max-width:80%;
}
.home .ns-slider{
	padding-top:0;
}
.ns-slider>div{
	height:inherit;
}
.ns-slider .ns-slide-item {
	display: flex;
	align-items: center;
	padding-left:5em;
	padding-right:5em;
}
.ns-slider .ns-slide-item:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #000, #344dff 150%);
	opacity: .4;
}
.ns-slider figcaption {
	display: flex;
	justify-content: space-between;
}

.ns-slider figcaption h2 {
	font-size: var(--head-1);
	white-space: collapse balance;
}

.ns-slider .right {
	flex: 0 0 40%;
}

.ns-slider .left {
	flex: 0 0 40%;
}

.ns-slider .right p {
	font-size: var(--text-2);
}
video {
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	object-fit: cover;
	object-position: top;
	z-index: -1;
	opacity: 1;
}
.ns-slider {
	position: relative;
}
.ns-slider figcaption {
	position: relative;
	z-index: 1;
}

.ns-slider figcaption h2:before {
	content: ': ';
}
.ns-slider figcaption h2 small {
	font-weight: 300;
}
.ns-slider .swiper-pagination-bullet {
	background: var(--light);
	width: 10px;
	height: 20px;
	border-radius: 50px;
}

.ns-slider .swiper-pagination-bullet-active{
	height:50px;
	border-radius:20px;
}

.ns-slider .swiper-pagination {
	margin-right: 10px;
}
/* Mega Menu */

.ns-mega {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 1;
	background: #000;
	padding-left: 12em;
	padding-right: 12em;
	padding-top: 8em;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.ns-mega:before {
	content: '';
	position: absolute;
	width: 20vw;
	height: 30vw;
	background: var(--secondary);
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 20em 0 0 20em;
	z-index: -1;
}

.ns-mega-menu {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
}

.ns-mega-menu a {
	position: relative;
	color: var(--light);
	text-decoration: none;
	font-size: var(--head-2);
	font-weight: 500;
	transition: var(--transition);
}

.ns-menu-contact {
	color: #fff;
	flex: 0 0 35%;
}

.ns-menu-contact h3 {
	margin-bottom:15px;
}

.ns-mega-menu:hover a {
	color: #888;
}

.ns-mega-menu a:hover {
	color: #fff;
}

.ns-mega-menu a:before {
	content: '';
	width: 0;
	height: 1px;
	background: rgba(255,255,255,.25);
	position: absolute;
	right: calc(100% + 0.5em);
	top: 50%;
	transform: translateY(-50%);
	transition: var(--transition);
}

.ns-mega-menu a:hover:before {
	width: 100%;
}
/* ABout */
.ns-slider-2 .slider-inner {
	display: flex;
}

.ns-slider-2 .slider-inner figcaption {
	flex-direction: column;
}

.ns-slider-2 .ns-slide-item:before {
	background: var(--primary);
	opacity: 1;
}


.ns-slider-2 .ns-slide-item:after {
	content: '';
	position: absolute;
	width: 20%;
	height: 50%;
	background: var(--secondary);
	right: 0;
	top: calc(50% + 1em);
	transform: translateY(-50%);
	border-radius: 20em 0 0 20em;
	z-index: 0;
}

.ns-slider-2 .right {
	max-width: 60%;
}

.ns-slider-2 {
	height: 49vh;
}
/* Text Block */
.ns-textblock {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.ns-textblock .left {
	flex: 0 0 25%;
}

.ns-textblock .right {
	flex: 0 0 70%;
}

.ns-list {
	font-size: var(--text-1);
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	row-gap: 1em;
	border-top: 1px solid var(--primary);
	padding-top: 20px;
	margin-top: 20px;
}

.ns-list>li:before {
	content: '';
	width: 8px;
	height: 8px;
	background: var(--secondary);
	display: inline-block;
	border-radius: 25px;
	margin-right: 10px;
}
/* Projects */
.text-content-primary .lead small {
	color: var(--secondary);
	font-weight: 500;
}

.text-content.text-content-secondary small {
	color: #dcdc02;
	font-weight: 500;
}
.text-content-img {
	position: absolute;
	width: 80px;
	height: 80px;
	z-index: 1;
	top: 0;
	right: calc(100% + 1em);
	border-radius: 10px;
	overflow: hidden;
	transition: var(--transition);
}

.text-content {
	position: relative;
}

.slice-corp {
	background: var(--light);
}
.slice-corp .ns-textblock {
	flex-direction: column;
	align-items: center;
}
.slice-corp .ns-textblock h2{
	text-align: center;
}
.slice-corp .corp-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	column-gap: 1em;
	row-gap: 1em;
	list-style: none;
	padding: 0;
	margin-top:2em;
	max-width: 100%;
	flex-wrap:wrap;
}

.slice-corp .corp-list li {
	transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.slice-corp .corp-list img {
	filter: grayscale(1);
	height: 100px;
	width: 100%;
	object-fit: contain;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 10px;
	padding: 20px;
	background: #fff;
	margin: 0;
}

.slice-corp {
	padding: 2em 0;
	overflow: hidden;
}
.slice-corp .ns-textblock>div {
	flex: 0 0 100%;
	max-width: 100%;
	overflow: hidden;
}

.slice-corp .corp-list li:hover img {
	filter: none;
}
.slice-corp .ns-textblock>div .lead {
	text-align: center;
}
/* Profiles */
.ns-list-grid li {
	box-shadow: 0 0px 10px 0px rgba(0,0,0,0.07);
	border-radius: 10px;
	background: var(--light);
	display: flex;
	align-items: center;
}
.ns-list-grid li:before{
	display:none;
}
.ns-list-grid li p {
	margin: 0;
}

.ns-list-grid li a {
	display: flex;
	color: var(--primary);
	text-decoration: none;
	padding: 20px;
	width: 100%;
	align-items:center;
}

.ns-list-grid li small {
	color: var(--primary);
	padding: 0 10px;
	font-weight:500;
}
.ns-list-grid li .img svg{
	height:35px;
}
.ns-list-grid li .img {
	border-right: 1px solid rgba(0,0,0,0.1);
	padding-right: 10px;
}
.ns-list-grid li:hover {
	transform: translateY(-3px);
}

.ns-list-grid li:hover small{
	color:var(--secondary);
}

.ns-list-grid li{
	transition:var(--transition);
}
.ns-lets-work .ns-slide-item p svg {
	max-width: 30px;
	height: 30px;
}

.ns-lets-work .ns-slide-item p {
	display: flex;
	align-items: center;
	column-gap: 1em;
	white-space: nowrap;
	font-weight:300;
}

.ns-lets-work .ns-slide-item a {
	color: #fff;
	font-weight:400;
	text-decoration: none;
}
footer {
	background: var(--secondary);
}

footer .footer-inner {
	display: flex;
	padding: 20px;
	justify-content: space-between;
}

footer .footer-inner svg {
	height: 20px;
}

footer .footer-inner .menus a {
	color: var(--light);
	text-decoration: none;
	padding: 0 8px;
	font-size: var(--text-1);
	transform: var(--transition);;
}

footer .footer-inner .menus a:hover{
	color:rgba(255,255,25,.8);
}

footer .footer-inner svg path {
	fill: #fff;
}
.ns-lets-work {
	height: 100vh;
	margin-bottom:0;
}
.slice-corp{
	margin-bottom:0;
}
@media(max-width:991px){
	:root{
		--head-1:3em;
	}
	.ns-slider-2{
		height:40vh;
		padding-top:0;
	}
	.ns-slider{
		margin-top:0;
	}
	.ns-header .menus {
		display: none;
	}

	header .menus {
		display: none;
	}

	.container {
		padding-left: 2em;
		padding-right: 2em;
	}

	.ns-slider .ns-slide-item {
		padding-left: 2em;
		padding-right: 2em;
	}

	.ns-slider figcaption {
		flex-direction: column;
	}

	.ns-mega {
		padding-left: 2em;
		padding-right: 2em;
		flex-direction: column;
		justify-content: flex-start;
		row-gap: 2em;
		padding-top:6em;
	}
	.ns-mega-menu a {
		font-size: 1.3em;
	}
	.ns-textblock {
		flex-direction: column;
	}

	footer .footer-inner {
		flex-direction: column;
		align-items: center;
		padding: 20px 0;
		row-gap: 18px;
	}

	footer .footer-inner .menus a {
		padding: 0 2px;
	}
	.ns-slider-2 .slider-inner figcaption>div{
		max-width:100%;
	}
	.ns-list-grid li a {
		justify-content: space-between;
	}

	.ns-list-grid li .img svg {height: 32px;}

	.ns-list-grid li a {
		padding: 20px 10px;
	}

	.ns-list-grid li .img {
		border-right: none;
	}

	.ns-textblock .right {
		flex: 0 0 100%;
		width: 100%;
	}
	.ns-lets-work{
		height:100vh;
	}
	.home .ns-slider{
		margin-top:-65px;
	}
	.home .ns-slider figcaption h2 {
		font-size: 3.5em;
	}
	@keyframes scroll {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-600%);
		}

	}

	.slice-corp .corp-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.slice-corp .corp-list img {
		width: 100%;
		height: 80px;
		padding:10px;
	}
	.text-content-img{
		display:none;
	}
}