/*
	Author: Krunoslav Stefanovski
	Author URI: https://krunodesign.com/
	Description: Krunoslav Portfolio
	Version: 1.0.0
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

.preloader
{
	width: 100%;
	height: 100%;
	background-color: #000;
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
}

	.preloader h1
	{
		font-size: 140px;
	}

.gl
{
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
}

#gradient-canvas {
	--gradient-color-1:#111;
	--gradient-color-2:#222;
	--gradient-color-3:#000;
	--gradient-color-4:#000;
}

.gl .grain
{
	position: absolute;
	opacity: 0.05;
	width: 100%;
	height: 100%;
	z-index: 1;
	object-fit: cover;
}

.gl canvas
{
	width: 100%;
	height: 100%;
}

/* Animated Element */
.animated-element
{
	position: absolute;
	top: 20px;
}

.animated-element
{
	height: 20px;
    top: 66px;
    left: 185px;
}

	.animated-element svg
	{
		width: auto;
		height: 23px;
		opacity: 0;
	}


/* NavBar */
nav
{
	width: 100%;
	padding: 50px 5%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}

	nav .logo
	{
		transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);
		opacity: 0;
	}

		nav .logo svg
		{
			width: auto;
			height: 50px;
		}


	nav .menu 
	{
		display: flex;
		opacity: 0;
	}p

		nav .menu li
		{
			margin: 0 5px;
			padding: 0 10px;
		}

			nav .menu li a
			{
				color: #fff;
				text-decoration: none;
				padding: 35px 20px;
				display: inline-flex;
			}

			.kd-link-item
			{
				display: block;
				overflow: hidden;
				position: relative;
			}
			
			.kd-link-item.underline:before
			{
				content: "";
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				height: 1px;
				background-color: #fff;
			}

				.kd-link-item span
				{
					position: relative;
					display: block;
					-webkit-transition: -webkit-transform 1s cubic-bezier(.19,1,.22,1);
					transition: -webkit-transform 1s cubic-bezier(.19,1,.22,1);
					-o-transition: -o-transform 1s cubic-bezier(.19,1,.22,1);
					-moz-transition: transform 1s cubic-bezier(.19,1,.22,1),-moz-transform 1s cubic-bezier(.19,1,.22,1);
					transition: transform 1s cubic-bezier(.19,1,.22,1);
					transition: transform 1s cubic-bezier(.19,1,.22,1),-webkit-transform 1s cubic-bezier(.19,1,.22,1),-moz-transform 1s cubic-bezier(.19,1,.22,1),-o-transform 1s cubic-bezier(.19,1,.22,1);
					-webkit-transform-origin: left center;
					-moz-transform-origin: left center;
					-ms-transform-origin: left center;
					-o-transform-origin: left center;
					transform-origin: left center;
				}

				a:hover .kd-link-item span {
					-webkit-transform: translateY(-140%) skewY(7deg);
					-moz-transform: translateY(-140%) skewY(7deg);
					-ms-transform: translateY(-140%) skewY(7deg);
					-o-transform: translateY(-140%) skewY(7deg);
					transform: translateY(-140%) skewY(7deg);
				}

			.kd-link-item span::after
			{
				content: attr(data-text);
				display: block;
				position: absolute;
				top: 140%;
				-webkit-transform: skewY(30deg);
				-moz-transform: skewY(30deg);
				-ms-transform: skewY(30deg);
				-o-transform: skewY(30deg);
				transform: skewY(30deg);
				-webkit-transform-origin: left center;
				-moz-transform-origin: left center;
				-ms-transform-origin: left center;
				-o-transform-origin: left center;
				transform-origin: left center;
				/* color: #000; */
				-webkit-transition: -webkit-transform 1s cubic-bezier(.19,1,.22,1);
				transition: -webkit-transform 1s cubic-bezier(.19,1,.22,1);
				-o-transition: -o-transform 1s cubic-bezier(.19,1,.22,1);
				-moz-transition: transform 1s cubic-bezier(.19,1,.22,1),-moz-transform 1s cubic-bezier(.19,1,.22,1);
				transition: transform 1s cubic-bezier(.19,1,.22,1);
				transition: transform 1s cubic-bezier(.19,1,.22,1),-webkit-transform 1s cubic-bezier(.19,1,.22,1),-moz-transform 1s cubic-bezier(.19,1,.22,1),-o-transform 1s cubic-bezier(.19,1,.22,1);
			}

			a:hover .kd-link-item span::after
			{
				-webkit-transform: skewY(-7deg);
				-moz-transform: skewY(-7deg);
				-ms-transform: skewY(-7deg);
				-o-transform: skewY(-7deg);
				transform: skewY(-7deg);
			}

			nav:hover 
			{
				z-index: 251;
			}

	nav.active .logo,
	nav.active .menu
	{
		opacity: 1;
		transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);
		transition-delay: 2s;
	}
	
.header
{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 140px 0 50px;
	min-height: 100vh;
}

	.header .scroll-for-more
	{
		position: absolute;
		width: 90px;
		height: 90px;
		border-radius: 100%;
		border: 1px solid #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		top: 70%;
		opacity: 0;
	}

	.header .header-paragraph
	{
		opacity: 0;
	}

	.header p
	{
		max-width: 460px;
		font-weight: 500;
		font-size: 16px;
		line-height: 30px;
		color: #aaa;
		margin: 30px 0 0 auto;
	}

	.header.active .header-paragraph,
	.header.active .scroll-for-more
	{
		opacity: 1;
		transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);
		transition-delay: 2.2s;
	}

	.header p span
	{
		color: #fff;
		opacity: .6;
	}

	.header .line
	{
		width: 100%;
		height: 120px;
		position: relative;
		overflow: hidden;
	}

	.header .line span 
	{
		position: absolute;
	}

	.title-reveal
	{
		width: 100%;
		height: 120px;
		position: relative;
		overflow: hidden;
	}

	.title-reveal span 
	{
		position: absolute;
	}

.section-break
{
	width: 100%;
	display: flex;
	align-items: center;
	margin: 0 0 0;
	position: relative;
	margin-bottom: 30px;
	z-index: 1;
}

.section-break svg {
  	width: 100%;
  	position: absolute;
	z-index: 1;
}

.section-break.trigger
{
	width: 100%;
	transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.about
{
	padding: 100px 0 50dvh;
}

	.about .name-running
	{
		display: flex;
		white-space: nowrap;
		overflow: hidden;
		width: 100%;
	}

	.about .name-running .full-name 
	{
		display: flex;
		align-items: top;
		-webkit-animation: loop 25s infinite linear;
		animation: loop 25s infinite linear;
	}

	@keyframes loop {
		100% {
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
		}
  	}

	.about .name-running .name-txt
	{
		font-size: 160px;
		line-height: 160px;
		letter-spacing: 10px;
		text-transform: uppercase;
		color: #fff;
	}

	.about .name-running .name-d
	{
		display: inline;
	}

	.about .name-running .name-dot
	{
		max-width: 50px;
		max-height: 50px;
		margin: 0 50px;
		padding: 15px;
		border-radius: 100%;
		display: inline-block;
		transform: translateY(-45px);
		background-color: #fff;
		opacity: .2;
	}

	.about .about-content
	{
		display: flex;
		justify-content: space-between;
		margin-top: 250px;
	}

	.about .about-content .greetings
	{
		max-width: 40%;
		margin: 60px 0 50px 0;
		opacity: 0;
	}

	.about .about-content .portrait
	{
		width: 45%;
		height: 600px;
		filter: grayscale(100);
		overflow: hidden;
	}
	
	.about .about-content .portrait .portrait-wrapper
	{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 0;
		overflow: hidden;
		background-image: url('/assets/images/portrait.jpg');
		background-position: top center;
		background-size: 100%;
	}

		.about .portrait img
		{
			width: 100%;
			height: 100%;
			object-fit: cover;
			transform-origin: left;
		}

/* Service Section */
.service
{
	padding: 0dvh 0 20dvh;
}

	.service .service-list
	{
		margin-bottom: 5dvh;
	}

		.service .service-list li
		{
			font-size: 120px;
			font-weight: 500;
			margin: 30px 0;
			line-height: 120px;
			will-change: transform;
			opacity: 0.3;
			transform: translateX(-100px);
		}

	p.text-xl
	{
		max-width: 500px;
		font-size: 26px;
		line-height: 36px;
		margin: 0 0 0 auto;
	}
	

/* Work Section */
.work
{
	margin: 100px 0;
	padding: 20px 0;
	/* height: 100vh; */
}

	.work .portfolio
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin-top: 50px;
		grid-gap: 40px;
	}

		.work .portfolio .item
		{
			position: relative;
			padding: 0 0;
			font-size: 36px;
			font-weight: 500;
			opacity: 0;
			/* padding-left: 80px;
			padding-right: 80px; */
		}

		
			.work .portfolio .item .item-img
			{
				height: auto;
				background-color: transparent;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				overflow: hidden;
				transition: all 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
				border-radius: 20px;
			}

				.work .portfolio .item .item-img:hover
				{
					transform: scale(0.97);
				}

				.work .portfolio .item .item-img:hover svg
				{
					transform: scale(1.05);
				}
			

				.work .portfolio .item .item-img svg
				{
					width: 100%;
					height: auto;
					object-fit: cover;
					border-radius: 20px;
					transition: all 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
				}

			.work .portfolio .item .item-title
			{
				width: 100%;
				position: relative;
				margin: 20px 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				mix-blend-mode: difference;
				z-index: 1;
			}

				.work .portfolio .item .item-title a
				{
					display: inline-flex;
					position: relative;
					font-size: 12px;
					color: #fff;
					text-decoration: none;
					z-index: 1;
					opacity: 0.7;
					padding: 7px 10px;
				}


.contact
{
	padding: 250px 0 30dvh;
}

	.contact .flex
	{
		display: flex;
		justify-content: space-between;
	}

		.contact .flex > div
		{
			flex: 1;
		}

	.contact .mail
	{
		margin-top: 200px;
		font-size: 80px;
		color: #fff;
		width: 100%;
		text-align: center;
	}

		.contact .mail a
		{
			text-decoration: none;
			color: #fff;
			position: relative;
			display: inline-flex;
		}

		.contact .mail a::after
		{
			content: "";
			position: absolute;
			bottom: -10px;
			right: 0;
			width: 0%;
			height: 3px;
			background-color: #fff;
			transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1);
		}

		.contact .mail a:hover::after
		{
			width: 100%;
			right: unset;
			left: 0;
		}