/* MY LOGO FONT */
 @font-face {
		font-family: 'Custom-Logo';
		src: url('../assets/fonts/logo.ttf') format('truetype');
}

 /* MY FONTS */
@font-face {
		font-family: 'Poppins-Thin';
		src: url('../assets/fonts/Poppins-Thin.ttf') format('truetype');
}
@font-face {
		font-family: 'Poppins-ExtraLight';
		src: url('../assets/fonts/Poppins-ExtraLight.ttf') format('truetype');
}
@font-face {
		font-family: 'Poppins-Medium';
		src: url('../assets/fonts/Poppins-Medium.ttf') format('truetype');
}
@font-face {
		font-family: 'Poppins-Bold';
		src: url('../assets/fonts/Poppins-Bold.ttf') format('truetype');
}

* {
		margin: 0;
		padding: 0;
		border: 0;
}

/* PORTFOLIO THEME  */

:root {
		--theme-primary-color: #ffa600;
		--theme-secondary-color: #ffffff;
		--theme-tertiary-color: #e3a765;
		--theme-fourth-color: #ffffff33;
		--theme-bg-color: #1e272c;
		--theme-bg-gradient-color: #1e272cc4;
}

/* custom cursor style */
.cursor {
	position: fixed;
	width: 40px;
	height: 40px;
	opacity: 0;
	margin-left: -20px;
	margin-top: -20px;
	border-radius: 50%;
	border: 2px solid var(--theme-primary-color);
	transition: transform 0.3s ease-in , opacity 0.3s ease;
	transform-origin: center center;
	pointer-events: none;
	z-index: 50000;
  }
  
  .grow,
  .grow-small {
	transform: scale(4);
	background: white;
	mix-blend-mode: soft-light;
	border: none;
  }
  
  .grow-small {
	transform: scale(2);
  }
  


/* LOADER ANIMATION */
.loader {
		display: flex;
		background: var(--theme-fourth-color);
		position: fixed;
		justify-content: center;
		height: 100%;
		align-self: center;
		width: 100%;
		z-index: 30000;
		opacity: 1;
		visibility: visible;
		transition: .3s ease;
}
.loaders {
	--path: var(--theme-primary-color);
    --dot: var(--theme-secondary-color);
    --duration: 3s;
    width: 44px;
    height: 44px;
    position: relative;
    margin: 0 16px;
    display: flex;
    justify-content: center;
    align-self: center;
  }
  .loaders:before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	position: absolute;
	display: block;
	background: var(--dot);
	top: 37px;
	left: 19px;
	transform: translate(-18px, -18px);
	-webkit-animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
			animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  .loaders svg {
	display: block;
	width: 100%;
	height: 100%;
  }
  .loaders svg rect,
  .loaders svg polygon,
  .loaders svg circle {
	fill: none;
	stroke: var(--path);
	stroke-width: 10px;
	stroke-linejoin: round;
	stroke-linecap: round;
  }
  .loaders svg polygon {
	stroke-dasharray: 145 76 145 76;
	stroke-dashoffset: 0;
	-webkit-animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
			animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  .loaders svg rect {
	stroke-dasharray: 192 64 192 64;
	stroke-dashoffset: 0;
	-webkit-animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
			animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  .loaders svg circle {
	stroke-dasharray: 150 50 150 50;
	stroke-dashoffset: 75;
	-webkit-animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
			animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  .loaders.triangle {
	width: 48px;
  }
  .loaders.triangle:before {
	left: 21px;
	transform: translate(-10px, -18px);
	-webkit-animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
			animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  
  @-webkit-keyframes pathTriangle {
	33% {
	  stroke-dashoffset: 74;
	}
	66% {
	  stroke-dashoffset: 147;
	}
	100% {
	  stroke-dashoffset: 221;
	}
  }
  
  @keyframes pathTriangle {
	33% {
	  stroke-dashoffset: 74;
	}
	66% {
	  stroke-dashoffset: 147;
	}
	100% {
	  stroke-dashoffset: 221;
	}
  }
  @-webkit-keyframes dotTriangle {
	33% {
	  transform: translate(0, 0);
	}
	66% {
	  transform: translate(10px, -18px);
	}
	100% {
	  transform: translate(-10px, -18px);
	}
  }
  @keyframes dotTriangle {
	33% {
	  transform: translate(0, 0);
	}
	66% {
	  transform: translate(10px, -18px);
	}
	100% {
	  transform: translate(-10px, -18px);
	}
  }
  @-webkit-keyframes pathRect {
	25% {
	  stroke-dashoffset: 64;
	}
	50% {
	  stroke-dashoffset: 128;
	}
	75% {
	  stroke-dashoffset: 192;
	}
	100% {
	  stroke-dashoffset: 256;
	}
  }
  @keyframes pathRect {
	25% {
	  stroke-dashoffset: 64;
	}
	50% {
	  stroke-dashoffset: 128;
	}
	75% {
	  stroke-dashoffset: 192;
	}
	100% {
	  stroke-dashoffset: 256;
	}
  }
  @-webkit-keyframes dotRect {
	25% {
	  transform: translate(0, 0);
	}
	50% {
	  transform: translate(18px, -18px);
	}
	75% {
	  transform: translate(0, -36px);
	}
	100% {
	  transform: translate(-18px, -18px);
	}
  }
  @keyframes dotRect {
	25% {
	  transform: translate(0, 0);
	}
	50% {
	  transform: translate(18px, -18px);
	}
	75% {
	  transform: translate(0, -36px);
	}
	100% {
	  transform: translate(-18px, -18px);
	}
  }
  @-webkit-keyframes pathCircle {
	25% {
	  stroke-dashoffset: 125;
	}
	50% {
	  stroke-dashoffset: 175;
	}
	75% {
	  stroke-dashoffset: 225;
	}
	100% {
	  stroke-dashoffset: 275;
	}
  }
  @keyframes pathCircle {
	25% {
	  stroke-dashoffset: 125;
	}
	50% {
	  stroke-dashoffset: 175;
	}
	75% {
	  stroke-dashoffset: 225;
	}
	100% {
	  stroke-dashoffset: 275;
	}
  }


html, body {
	overflow-x: hidden !important;
}
html * {
		scroll-behavior: smooth;
		font-family: 'Poppins-ExtraLight','Arial';	
		font-size: 12px;
}
body {  
		-webkit-user-select: none;  /* Chrome all / Safari all */
		-moz-user-select: none;     /* Firefox all */
		-ms-user-select: none;      /* IE 10+ */
		user-select: none;          /* Likely future */    
		overflow-x: hidden !important;
		background-color: var(--theme-bg-color) !important;

}
body .main-background {
		position: absolute;
		width: 100%;
		height: 100%;
		content: '';
		background: linear-gradient(to bottom, var(--theme-bg-gradient-color) 0%, var(--theme-bg-color) 100%), url(../assets/img/logo-overlay.png);
		background-repeat: no-repeat;
		opacity: 0.3;
		background-position: center 0;
		margin-top: 690px;
		transform-origin: center;
		background-size: 45%;
		transition: .3s ease;
}
#scroll-progress {
		position: fixed;
		left: 0;
		top: 0;
		width: 0%;
		height: 2px;
		z-index: 1000;
		background-color: var(--theme-primary-color);
}
/* tooltip */

.tooltip {
		font-size: 12px;
		font-weight: 100;
  }

/* Likes */

.likes {
    background: var(--theme-bg-color);
    padding: 0px 8px;
    border-radius: 100px;
    box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
    position: absolute;
    display: flex;
    top: 0;
    right: 0;
    margin: 2px;
}
.likes > i:hover {
    transform: scale(1.2);
    transition: .2s ease;
}
.likes > i {
    color: var(--theme-primary-color);
    font-size: 15px;
    line-height: 27px;
    cursor: pointer;
}
.likes .likes-count {
    font-size: 11px;
    display: flex;
    color: var(--theme-secondary-color);
    line-height: 11px;
    padding: 2px 3px;
    align-self: center;
}

/* Header/Secions Designs */

#main-header {
		position: fixed;
		width: 100%;
		z-index: 10000;
		height: 78px;
		top: 0;
		background-color: var(--theme-bg-color);
}
section, #main-header {
		opacity: 0;
		visibility: hidden;
		transition: ease-in .3s;
}
.sections-banner-container {
		width: 100%;
		height: 725px;
}
.main-banner-container {
		top: 0;
		right: 0;
		width: 1025px;
		height: 1025px;
		position: absolute;
		background: url(../assets/img/vector-bg.webp), url(../assets/img/face-vector.webp),var(--theme-fourth-color);
		background-repeat: no-repeat;
		transform-origin: center;
		background-size: 120%, 70%;
		background-position: right 0%, right 250%;
		clip-path: polygon(0 0, 100% 100%, 100% 0);
		opacity: 0;
}
.main-projects-container1,
	.main-drawings-container1 {
		top: 0px;
		left: 0;
		z-index: 1;
		width: 1025px;
		height: 2050px;
		position: absolute;
		background: var(--theme-fourth-color);
		background-repeat: no-repeat;
		transform-origin: center;
		background-size: 120%, 70%;
		background-position: right 0%, right -80%;
		clip-path: polygon(0 0, 100% 50%, 0 100%, 0 50%);
}
.main-projects-container2,
	.main-drawings-container2 {
		top: 510px;
		right: 0;
		z-index: 1;
		width: 1025px;
		height: 2050px;
		position: absolute;
		background: var(--theme-fourth-color);
		background-repeat: no-repeat;
		transform-origin: center;
		background-size: 120%, 70%;
		background-position: right 0%, right -80%;
		clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 50%);
}
.main-drawings-container1::after,
	.main-drawings-container2::after {
		content: '';
		display: block;
		width: 465px;
		height: 1050px;
		background: var(--theme-primary-color);
		transform-origin: center;
		transform: rotate(45deg);
		position: absolute;
}
.main-drawings-container1::after {
		top: 0;
		left: -50%;
}
.main-drawings-container2::after {
		bottom: 0;
		right: -50%;
}
.section-abouts,
.section-projects, 
.section-drawings, 
.section-footer, 
.sections-banner-container {
		position: relative;
}

.section-projects {
		padding-top: 85px;
		height: 2300px;
		padding-bottom: 100px;
}
.section-projects .main-projects-container1:hover .bg-container,
.section-projects .main-projects-container2:hover .bg-container {
		opacity: 0.3;
}
.section-projects .main-projects-container1 .bg-container {
		position: absolute;
		top: -904px;
		right: -217px;
		opacity: 0.2;
		z-index: -1;
		transition: .3s ease;
}
.section-projects .main-projects-container1 .bg-container img {
		transform: scale(0.6);
		transform-origin: center right;
    	box-shadow: rgb(9 30 66 / 25%) 0px 4px 8px -2px, rgb(9 30 66 / 8%) 0px 0px 0px 1px;
}
.section-projects .main-projects-container2 .bg-container {
		position: absolute;
		top: 296px;
		left: 260px;
		opacity: 0.2;
		z-index: -1;
		transition: .3s ease;
}
.section-projects .main-projects-container2 .bg-container img {
		position: absolute;
		transform: scale(0.6);
		transform-origin: center left;
		box-shadow: rgb(9 30 66 / 25%) 0px 4px 8px -2px, rgb(9 30 66 / 8%) 0px 0px 0px 1px;
}
.section-projects .main-projects-container2 .bg-container img:nth-child(2){
		z-index: -1;
		transform: scale(0.6);
		top: -1783px;
		left: -225px;
		transform-origin: center left;
		box-shadow: rgb(9 30 66 / 25%) 0px 4px 8px -2px, rgb(9 30 66 / 8%) 0px 0px 0px 1px;
}
.section-drawings {
		padding-top: 150px;
		height: 2570px;
		overflow: hidden;
		margin-top: -192px;
		z-index: 3;
}
.section-drawings .main-drawings-container1:hover .bg-container,
.section-drawings .main-drawings-container2:hover .bg-container {
		opacity: 0.3;
}
.section-drawings .main-drawings-container1 .bg-container {
		position: absolute;
		top: -400px;
		right: 23px;
		opacity: 0.2;
		z-index: -1;
		transition: .3s ease;
}
.section-drawings .main-drawings-container1 .bg-container img {
		transform: scale(0.6);
		transform-origin: center right;
		margin-top: 10px;
    	box-shadow: rgb(9 30 66 / 25%) 0px 4px 8px -2px, rgb(9 30 66 / 8%) 0px 0px 0px 1px;
}
.section-drawings .main-drawings-container2 .bg-container {
		position: absolute;
		top: -1239px;
		left: 28px;
		opacity: 0.2;
		z-index: -1;
		transition: .3s ease;
}
.section-drawings .main-drawings-container2 .bg-container img {
		transform: scale(0.6);
		transform-origin: center left;
		margin-top: -25px;
		box-shadow: rgb(9 30 66 / 25%) 0px 4px 8px -2px, rgb(9 30 66 / 8%) 0px 0px 0px 1px;
}
.section-footer {
		position: relative;
		background: linear-gradient(to bottom, var(--theme-bg-gradient-color) 0%, var(--theme-bg-color) 100%), url(../assets/img/logo-overlay.png);
		background-repeat: no-repeat;
		background-position: center 0%;
		background-size: 45%;
		height: 815px;
}
#footer-block .copyright {
		padding-left: 3px;
		padding-right: 3px;
}

#navigation-header {
		list-style: none;
		z-index: 999;
		cursor: default;
		position: absolute;
		right: 2%;
		top: 0;
}
.logo {
		margin: 22px 4%;
		top: 0;
		left: 0;
		width: 67px;
		display: flex;
		height: 35px;
}
.logo-container {
		display: flex;
		position: absolute;
		width: 67px;
		align-items: center;
		background-color: var(--theme-fourth-color);
		border-radius: 45px;
		height: 35px;
}
.header-main-logo {
		font-family: 'Custom-Logo';
		position: relative;
		font-size: 30px;
		line-height: 30px;
		color: var(--theme-secondary-color);
		top: 0;
		border-radius: 100%;
		background-color: var(--theme-bg-color);
		border: 2px solid var(--theme-bg-color);
		left: 1px;
		cursor: pointer;
		z-index: 1;
		transform-origin: center center;
		-webkit-animation-name: popin-b;
		animation-name: popin-b;
		-webkit-animation-duration: .5s;
		animation-duration: .5s;
		-webkit-animation-iteration-count: 1;
		animation-iteration-count: 1;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-direction: backwards;
		animation-direction: backwards;
}
.header-main-logo-light {
		transform-origin: center center;
		-webkit-animation-name: popin-f;
		animation-name: popin-f;
		-webkit-animation-duration: .5s;
		animation-duration: .5s;
		-webkit-animation-iteration-count: 1;
		animation-iteration-count: 1;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
		-webkit-animation-direction: forwards;
		animation-direction: forwards;
}
	@keyframes popin-f {
		0% {
			left: 0px;
			transform: scale(1);
		}
		50% {
			transform: scale(0.9);
		}
		100% {
			left: 31px;
			transform: scale(1);
		}
	}

  @-webkit-keyframes popin-f {
		0% {
			left: 0px;
			transform: scale(1);
		}
		50% {
			transform: scale(0.9);
		}
		100% {
			left: 31px;
			transform: scale(1);
		}
  }
  @keyframes popin-b {
		0% {
			left: 31px;

			transform: scale(1);
		}
		50% {
			transform: scale(0.9);
		}
		100% {
			left: 0px;
			transform: scale(1);
		}
	}

	@-webkit-keyframes popin-b {
		0% {
			left: 31px;
			transform: scale(1);
		}
		50% {
			transform: scale(0.9);
		}
		100% {
			left: 0px;
			transform: scale(1);
		}
	}


.header-main-logo:hover {
		color: var(--theme-primary-color);
}
.header-main-logo:before {
		content: "\e900";
}
.logo-text {
		position: relative;
		color: var(--theme-secondary-color);
		letter-spacing: 2px;
		display: flex;
		align-self: center;
		left: 79px;
		transition: color .3s ease;
}
.logo-text  .logo-name {
		color: var(--theme-primary-color) ;
		font-family: 'Poppins-Medium';
}
#navigation-header  li {
		display: inline-block;
		padding: 0 20px;
		-webkit-transition: .3s ease;
		transition: .3s ease;
}

#navigation-header li .line-dark {
		position: relative;
		top: 0;
		left: 0;
		display: block;
		width: 0%;
		height: 2px;
		background-color: var(--theme-primary-color);
		-webkit-transition: .3s .2s ease;
		transition: .3s .2s ease;
}
#navigation-header li .line-light {
    display: block;
    width: 0%;
    height: 2px;
    margin-bottom: 5px;
    margin-top: 8px;
    background-color: var(--theme-fourth-color);
    overflow: hidden;
    -webkit-transition: .3s ease;
    transition: .3s ease;
}
#navigation-header  li:nth-child(2):before,
#navigation-header  li:nth-child(3):before,
#navigation-header  li:nth-child(4):before {
		display: block;
		content: '';
		width: 2px;
		height: 15px;
		transform: translate(-24px, 31px);
		background-color: var(--theme-fourth-color);
}
#navigation-header li a {
		text-decoration: none;
		color: var(--theme-secondary-color);	
		letter-spacing: 2px;
		-webkit-transition: .3s ease;
		transition: .3s ease;
}
#navigation-header li:last-child a {
		background: var(--theme-primary-color);
		color: var(--theme-bg-color);
		padding: 5px 20px;
		font-family: 'Poppins-Medium';
}
#navigation-header li:last-child .line-light{
		opacity: 0;
		visibility: hidden;
}
#navigation-header li:last-child:hover a {
		color: var(--theme-secondary-color);
}
#navigation-header li i {
		padding-right: 2px;
}
#navigation-header  li  a:hover .line-light,
#navigation-header  li:hover .line-light,
#navigation-header  .active  .line-light,
#navigation-header  .active  .line-light {
		width: 100%;
}
#navigation-header  li  a:hover .line-dark,
#navigation-header  li:hover .line-dark,
#navigation-header  .active .line-dark {
		width: 25%;
}	
#navigation-header  li:hover a,
#navigation-header .active a{
		color: var(--theme-primary-color);
}
.fa-moon, .fa-sun {
	color: #fff;
    position: absolute;
    font-size: 20px;
}
.fa-moon {
	right: 5px;
}
.fa-sun {
	left: 5px;
}


#banner-video {
		position: absolute;
		top: 0;
		right: 0;
		min-width: 100%;
		min-height: auto;
		height: 110%;
		z-index: 0;
}

.line-decor {
		position: absolute;
		height: 2px;
		display: block;
		content: '';
		background-color: var(--theme-fourth-color);
}
.line-decor .line-decor-inside {
		position: absolute;
		right: 0;
		width: 50px;
		height: 2px;
		background-color: var(--theme-primary-color);
}
.line-decor .line-decor-shapes {
		position: absolute;
		top: -249px;
		right: 40vw;
		width: 500px;
		height: 500px;
		z-index: 2;
		transform-origin: center;
		transform: rotate(45deg);
		background-color: var(--theme-primary-color);
}
.line-decor .line-decor-shapes .numbers {
		position: absolute;
		font-size: 200px;
		line-height: 0px;
		font-family: 'Poppins-Thin';
		transform-origin: center;
		transform: rotate(-45deg) translate(364px, 298px);
		letter-spacing: -5px;
		color: var(--theme-primary-color);
		text-align: right;
}
.line-decor-banner {
		width: 120%;
		top: 37px;
		left: -105%;
		opacity: 0;
}
.line-decor-about {
		width: 141%;
		top: 100px;
		right: -101%;
}
.line-decor-about .line-decor-inside {
		left: 0;
}
.line-decor-projects,
	.line-decor-contacts {
		width: 136%;
		top: 100px;
		left: -102%;
}
.line-decor-drawings .line-decor-inside {
		left: 0;
}
.line-decor-drawings {
		width: 136%;
		top: 100px;
		right: -102%;
}
.line-decor-drawings .line-decor-shapes {
		position: absolute;
		top: -249px;
		left: 40vw;
		width: 500px;
		height: 500px;
		transform-origin: center;
		transform: rotate(45deg);
		background-color: var(--theme-primary-color);
}
.line-decor-drawings .line-decor-shapes .numbers {
		position: absolute;
		font-size: 200px;
		line-height: 0px;
		font-family: 'Poppins-Thin';
		transform-origin: center;
		transform: rotate(-45deg) translate(-532px, 275px);
		letter-spacing: -5px;
		color: var(--theme-primary-color);
		text-align: left;
}
.line-decor-contacts .line-decor-shapes .numbers {
		position: absolute;
		font-size: 200px;
		line-height: 0px;
		font-family: 'Poppins-Thin';
		transform-origin: center;
		transform: rotate(-45deg) translate(375px, 278px);
		letter-spacing: -5px;
		color: var(--theme-primary-color);
		text-align: right;
}
.all-headings {
		font-size: 17px;
		text-transform: uppercase;
		font-family: 'Poppins-Medium';
		width: 100%;
		letter-spacing: 1px;
		margin-bottom: 40px;
}
.all-headings i {
		padding: 2px;
		font-size: 17px;
}
.second-heading {
		font-size: 15px;
		text-transform: uppercase;
		font-family: 'Poppins-Medium';
		width: 100%;
		letter-spacing: 1px;
}
.second-heading i {
		color: var(--theme-primary-color);
}
.awards-list-header {
		text-align: left;
		margin-left: -20px;
}
.awards-header {
		font-family: 'Poppins-Medium';
		width: 100%;
		text-align: left;
		letter-spacing: 1px;
		color: var(--theme-primary-color);
}
.awards-list,
	.website-list,
		.social-list,
			.skills-list {
		color: var(--theme-secondary-color);
		font-size: 14px !important;
		list-style: none;
		font-family: 'Poppins-Medium';
		width: 100%;
		text-align: left;
		letter-spacing: 1px;
		margin-left: 40px;
		margin-right: 20px;
}
.website-list {
    	margin: 90px 0;
}
.channel-list {
		margin-top: 45px;
		margin-bottom: 50px;
		margin-left: 0;
}
.channel-list li a,
	.social-list li a {
		color: var(--theme-secondary-color);
		text-decoration: none;
}
.skills-list:nth-of-type(1) {
    	margin-top: 100px;
    	margin-bottom: 0;
}
.skills-list:nth-of-type(2) {
		margin-top: 50px;
		margin-bottom: 0;
}
.skills-list .progress-container {
		height: 2px;
		width: 350px;
		position: absolute;
		background-color: var(--theme-fourth-color);
		margin-left: 10px;
		margin-top: 2px;
}
.skills-list .skill-progress {
		height: 2px;
		position: absolute;
		left: 0;
		width: 0%;
		transform-origin: center center;
		background: linear-gradient(to right, transparent 0%, var(--theme-primary-color) 100%);
}
.skills-list .progress-container .percent-text {
		position: absolute;
		left: 102%;
		top: -15px;
		font-size: 14px;
		transform-origin: center center;
		color: var(--theme-primary-color);
		font-family: 'Poppins-ExtraLight';
		margin: 0;
		font-style: italic;
}

.skills-list .skill-progress::after {
		display: block;
		position: absolute;
		content: '\f04b';
		font-family: 'fontAwesome';
		top: 0;
		right: -2px;
		font-size: 10px;
		line-height: 3px;
		color: var(--theme-primary-color);
}
.awards-list li,
	.website-list li,
		.social-list li,
			.skills-list li {
		margin-top: 35px;
		line-height: 25px;
}
.awards-list li p span,
	.website-list li span,
		.social-list li span,
			.skills-list li span {
		font-family: 'Poppins-Thin';
}
.awards-list li:before {    
		content: '\f091';
		color: var(--theme-primary-color);
		font-family: 'fontAwesome';
		margin: 0 0px 0 -20px;
}
.website-list li:before,    
	.social-list li:before, 
		.skills-list li:before {    
		content: '\f04b';
		font-size: 14px;
		color: var(--theme-primary-color);
		font-family: 'fontAwesome';
		padding: 5px;
}
.skills-list li:before {  
		content: '';
}
.channel-list li:nth-of-type(1):before {    
		content: '\f167';
		font-size: 14px;
}
.website-list li:nth-of-type(1),
	.social-list li:nth-of-type(1),
		.skills-list li:nth-of-type(1) {
		margin-top: 10px;
		margin-left: 30px;
}
.website-list li:nth-of-type(2),
	.social-list li:nth-of-type(2),
		.skills-list li:nth-of-type(2) {
		margin-top: 10px;
		margin-left: 65px;
}
.website-list li:nth-of-type(3),
	.social-list li:nth-of-type(3),
		.skills-list li:nth-of-type(3) {
		margin-top: 10px;
		margin-left: 100px;
}
.website-list li:nth-of-type(4),
	.social-list li:nth-of-type(4),
		.skills-list li:nth-of-type(4) {
		margin-top: 10px;
		margin-left: 130px;
}
.website-list li:nth-of-type(5),
	.social-list li:nth-of-type(5),
		.skills-list li:nth-of-type(5) {
		margin-top: 10px;
		margin-left: 165px;
}
.website-list li:nth-of-type(6),
	.social-list li:nth-of-type(6),
		.skills-list li:nth-of-type(6) {
		margin-top: 10px;
		margin-left: 200px;
}
.website-list li:nth-of-type(7),
	.social-list li:nth-of-type(7),
		.skills-list li:nth-of-type(7) {
		margin-top: 10px;
		margin-left: 235px;
}
.social-list {    
		margin-left: 30px;
}
.social-list li:nth-of-type(1):before {    
		content: '\f09b';
		font-size: 14px;
}
.social-list li:nth-of-type(2):before {    
		content: '\f296';
		font-size: 14px;
}
.social-list li:nth-of-type(3):before {    
		content: '\f08c';
		font-size: 14px;
}
.social-list li:nth-of-type(4):before {    
		content: '\f39e';
		font-size: 14px;
}
#text-banner  {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
}
#text-banner .header-paragraph {
		text-align: left;
		margin-bottom: 0;
		margin-left: 20px;
		margin-right: 20px;
		letter-spacing: 2px;
		color: var(--theme-secondary-color);
}
#text-banner .header-paragraph:nth-child(1) {
		font-size: 22px;
		margin-bottom: -10px;
		font-family: 'Poppins-Thin';
		margin-left: 112px;
		width: max-content;
}	
#text-banner #my-name  {
		font-size: 42px;
		font-family: 'Poppins-Medium';
}
#text-banner #artistic {
		color: var(--theme-primary-color);
		font-size: 85px;
		line-height: 100px;
		font-family: 'Poppins-Bold';
		/* text-shadow: rgb(30 39 44 / 23%) 0px 10px 20px, rgb(30 39 44 / 23%) 0px 6px 6px; */
}
#text-banner #developer {
		font-size: 20px;
		font-family: 'Poppins-Medium';
		line-height: 1;
		letter-spacing: 35.6px;
		overflow: hidden;
		height: 20px;
		margin: 20px;
		border-right: 2px solid var(--theme-fourth-color);
}
.sections-banner-container .container .banner-light {
		position: absolute;
		height: 10px;
		width: 393px;
		float: right;
		background-color: var(--theme-fourth-color);
		overflow: hidden;
		margin: 0 20px;
		transform: translate(0, -4px);
		opacity: 0;
}

.sections-banner-container .container .banner-dark {
		position: absolute;
		height: 10px;
		width: 25%;
		left: 0;
		background-color: var(--theme-primary-color);
}

.sections-banner-container .container .row .banner-qouets {
		letter-spacing: 3px;
		width: 125%;
		margin-left: 15px;
		margin-right: 15px;
		font-size: 12px;
		font-family: 'Poppins-Thin';
		line-height: 15px;
		color: var(--theme-secondary-color);
		text-align: left;
		text-transform: uppercase;
}

.section-abouts {	
		background: transparent;
}

.about-text {
		height: auto;
		font-size: 14px;
		font-family: 'Poppins-Thin';
		margin-left: 20px;
		margin-right: 20px;
		color: var(--theme-secondary-color);
		text-align: left ;
		letter-spacing: 1px;
}
.description2  {
		padding-top: 100px;
}
.project-dividers {
		height: 1114px;
}
.drawing-dividers {
		height: 1100px;
}

.header-text {
		color: var(--theme-secondary-color);
		font-size: 35px;
		letter-spacing: 1px;
		font-family: 'Poppins-Medium';
		margin-top: 70px;
		margin-bottom: 50px;
		text-align: center;
		width: 100%;
		z-index: 5;
		opacity: 1;
}
.header-text .header-text-small {
		color: var(--theme-secondary-color);
		font-size: 26px;
		letter-spacing: 1px;
		font-family: 'Poppins-ExtraLight';
		margin-top: 30px;
		margin-bottom: 50px;
		text-align: center;
		z-index: 5;
		opacity: 1;
}
.website-block-category,
	.arts-block-category {
		display: flex;
		height: 100%;
		padding-left: 40%;
		justify-content: center;
		flex-direction: column;
}
.website-block-category .block-category-title,
	.arts-block-category .block-category-title {
		color: var(--theme-primary-color);
		font-size: 50px;
		line-height: 30px;
		letter-spacing: 2px;
		font-family: 'Poppins-Medium';
		text-align: left;
		margin: 0;
}
.website-block-category .block-category-title-small,
	.arts-block-category .block-category-title-small {
		color: var(--theme-secondary-color);
		font-size: 30px;
		letter-spacing: 2px;
		font-family: 'Poppins-ExtraLight';
		text-align: left;
}
.website-block-category::after,
	.arts-block-category::after {
		content: '\f57e';
		display: block;
		font-family: 'FontAwesome';
		font-size: 45px;
		position: absolute;
		color: var(--theme-primary-color);
		top: 48%;
		left: 34.5%;
}
.mockups-block-category,
	.skills-block-category {
		display: flex;
		height: 100%;
		padding-right: 40%;
		justify-content: center;
		flex-direction: column;
}
.mockups-block-category .block-category-title,
	.skills-block-category .block-category-title {
		color: var(--theme-primary-color);
		font-size: 50px;
		line-height: 30px;
		letter-spacing: 2px;
		font-family: 'Poppins-Medium';
		text-align: right;
		margin: 0;
}
.mockups-block-category .block-category-title-small,
	.skills-block-category .block-category-title-small {
		color: var(--theme-secondary-color);
		font-size: 30px;
		letter-spacing: 2px;
		font-family: 'Poppins-ExtraLight';
		text-align: right;

}
.mockups-block-category::after,
	.skills-block-category::after {
		content: '\f568';
		display: block;
		font-family: 'FontAwesome';
		font-size: 45px;
		position: absolute;
		top: 48%;
		color: var(--theme-primary-color);
		right: 34.5%;
}
.arts-block-category::after {
		content: '\f53f';

}
.skills-block-category::after {
		content: '\f121';
		right: 33.2%;
}
.btn-shine {
		position: relative;
		height: 40px;
		left: 0;
		width: fit-content;
		padding: 0 40px;
		outline: none !important;
		text-decoration: none;
		text-transform: uppercase;
		margin: 50px 0 50px 0;
		background-color: var(--theme-primary-color);
		color: var(--theme-bg-color);
		z-index: 99;
}
.banner-button::after {
		content: '';
		display: block;
		background-color: var(--theme-primary-color);
		width: 500px;
		height: 40px;
		top: 0;
		right: 161px;
		position: absolute;
		transition: all 0.3s ease;
}
.resume-button::after {
		content: '';
		display: block;
		background-color: var(--theme-primary-color);
		width: 500px;
		height: 40px;
		top: 0;
		left: 100%;
		position: absolute;
}
.submit-button {
		letter-spacing: 2px;
		font-family: 'Poppins-Medium';
		margin-top: 88px;
}
.banner-svg-object {
		position: absolute;
		overflow: visible;
		top: -20px;
		left: 0;
}
.about-svg-object {
		position: absolute;
		overflow: visible;
		top: -20px;
		right: 58px;
}
.submit-svg-object {
		position: absolute;
		overflow: visible;
		top: 23px;
		right: 148px;
		transform: scale(0.7);
}
path {
	fill: var(--theme-fourth-color);
}
.submit-btn-container{
		position: relative;
}
.btn-shine span {
		font-family: 'Poppins-Medium';
		font-size: 12px;
		letter-spacing: 2px;
}


.sections-banner-container #section-img {
		width: 100%;
}
.web-design-projects {
		position: relative;
		height: 250px;
		width: 100%;
		margin-top: 30px;
		border-radius: 10px;
		-webkit-transition: .3s ease;
		transition: .3s ease;
		margin-top: 15px;
		margin-bottom: 15px;
		overflow: hidden;
		box-shadow: 0px 14px 20px 0px rgb(0 0 0 / 15%), 0px 20px 46px 0px rgb(0 0 0 / 15%);
		background-color: #ffffff;
		z-index: 3;
} 
.web-design-projects img:nth-child(1) {
		position: absolute;
		transform-origin: center top;
		width: 70%;
		z-index: 1;
		transform: 
		rotate(-10deg);
		box-shadow: 0px 14px 20px 0px rgba(0, 0, 0, 0.15),0px 20px 46px 0px rgba(0, 0, 0, 0.15);	
}
.web-design-projects img:nth-child(2) {
		position: absolute;
		transform-origin: center top;
		width: 30%;
		top: 5%;
		left: 75%;
		z-index: 0;
		transform: rotate(-10deg);
		box-shadow: 0px 14px 20px 0px rgba(0, 0, 0, 0.15),0px 20px 46px 0px rgba(0, 0, 0, 0.15);	
}
.gp-design-projects img,
.web-design-projects img:nth-child(1),
.web-design-projects img:nth-child(2) {
		-webkit-filter: grayscale(1);
		filter: grayscale(1);
}	
.web-design-projects .mask,
.gp-design-projects .mask	{
		z-index: 1;
		position: absolute;
		left: 0;
		bottom: 0;
		background-color: rgba(255, 255, 255, 0.30);
		-webkit-transition: All .3s .1s ease;
		transition: All .3s .1s ease;
		width: 100%;
		height: 100%;
		visibility: visible;
		transform:
		translateZ(70px);
		overflow: hidden;
}

.gp-design-projects .mask {
		border-radius: 50% ;
}
.web-design-projects:hover .mask {
		opacity: 0;
		visibility: hidden;
}
.gp-design-projects {
		position: relative;
		height: 200px;
		width: 200px;
		border-radius: 50%;
		margin-top: 15px;
		margin-bottom: 15px;
		-webkit-transition: transform 1s ease ;
		transition: transform 1s ease ;
		box-shadow: 0px 14px 20px 0px rgb(0 0 0 / 15%), 0px 20px 46px 0px rgb(0 0 0 / 15%);
		z-index: 3;
		background-color: #ffffff;
		transform:
			rotateY(-25deg)
			rotateX(25deg);
		transform-origin: 100% 50%;
		-webkit-transition-delay: .2s;
		transition-delay: .2s;
		transform-style: preserve-3d;
}
.gp-design-projects img {
		transform-origin: center;
		-webkit-transition: .3s ease;
		transition: .3s ease;
		border-radius: 50%;
		width: 200px;
		height: 200px;
		z-index: 0;
		box-shadow: 0px 12px 10px 0px rgb(0 0 0 / 15%), 0px 8px 10px 0px rgb(0 0 0 / 15%);
		transform:
		translateZ(35px);
}
.gp-design-projects:hover,
.gp-design-projects:hover img,
.gp-design-projects:hover .mask {
		transform:
		rotateY(0deg)
		rotateX(0deg)
		translateZ(0px)
		scale(1.01);
}
.web-design-projects:hover img:nth-child(1),
.web-design-projects:hover img:nth-child(2),
.gp-design-projects:hover img {
		-webkit-filter: grayscale(0);
		filter: grayscale(0);
}

.gp-design-projects:hover .play-button-designs{
		transform: translateY(-50%) scale(1.03);
		border-color: #ffffff;
		box-shadow: 0px 0px 0px 0px #ffffff;

}
.gp-design-projects:hover .play-button-designs #play {
		border-left-color: #ffffff;
}
.gp-design-projects:hover img,
.gp-design-projects:hover {
		box-shadow: 0 4px 0px 0px rgb(0 0 0 / 5%), 0px 2px 10px 0px rgb(0 0 0 / 10%);
}
.gp-design-projects:hover .mask {
		opacity: 0;
		visibility: hidden;
}
.gp-design-projects:hover .play-button-designs {
		opacity: 0.8;
		visibility: visible;
		-webkit-transition-delay: .1s;
		transition-delay: .1s;
}

/* EYE ANIMATION IN FOOTER */
  
  .hit-area {
	position: absolute;
	width: 500px;
	height: 500px;
	margin: 0 auto;
  }
  
  .eye {
	position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    top: 18px;
    background-color: white;
    pointer-events: none;
    overflow: hidden;
	transform: rotateX(50deg);
  }
  
  .eye:nth-child(1){
	left: 35%;
  }
  .eye:nth-child(2){
	right: 35%;
  }

  .pupil {
	position: relative;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var(--theme-bg-gradient-color);
	left: 35%;
    top: 35%;
	transition: .3s ease;
  }
  .pupil::after {
    display: block;
    content: '';
    width: 5px;
    height: 5px;
    background-color: white;
    top: 15%;
    right: 15%;
    position: absolute;
    border-radius: 50%;
}
  .eyelid {
	width: 100px;
	height: 60px; 
	background-color: var(--theme-primary-color);
	position: absolute;
	top: -65%;
	left: -20px;
	pointer-events: none; 
	-webkit-animation-name: blink;
	animation-name: blink;
	-webkit-animation-duration: 4.5s;
	animation-duration: 4.5s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
	-webkit-animation-delay: .8s;
	animation-delay: .8s;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	z-index: 1;
  }
  
  @keyframes blink {
	0% {
	  top: -65%;
	}
	95% {
	  top: -65%;
	}
	100% {
	  top: 0%;
	}
  }

  @-webkit-keyframes blink {
	0% {
	  top: -65%;
	}
	95% {
	  top: -65%;
	}
	100% {
	  top: 0%;
	}
  }

  

 /* FORM CSS */
form {
		height: auto;
		width: auto;
		min-width: 350px;
		text-align: center;
		margin: 115px 20px 0 20px;
		z-index: 1;
}
input[type="text"],
input[type="email"] {
		outline-style: none;
		width: 100%;
		height: 35px;
		color: var(--theme-secondary-color);
		font-family: 'Poppins-ExtraLight';
		letter-spacing: 2px;
		text-indent: 110px;
		-webkit-transition: .3s ease;
		transition: all .3s ease;
		background-color: var(--theme-fourth-color);
}
input[type="text"]::placeholder,
input[type="email"]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
		color: var(--theme-secondary-color) !important;
}

input[type="text"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder { /* Internet Explorer 10-11 */
		color: var(--theme-secondary-color) !important;
}

input[type="text"]::-ms-input-placeholder,
input[type="email"]::-ms-input-placeholder { /* Microsoft Edge */
		color: var(--theme-secondary-color) !important;
}
textarea {
		outline-style: none;
		width: 100%;
		color: var(--theme-secondary-color) !important;
		resize: none !important;
		padding-top: 5px;
		height: 100px;
		font-family: 'Poppins-ExtraLight';
		letter-spacing: 2px;
		text-indent: 110px;
		letter-spacing: 2px;
		-webkit-transition: .3s ease;
		transition: all .3s ease;
		background-color: var(--theme-fourth-color);

}
/* Browser suport */
textarea::-webkit-input-placeholder {
		font-family:'Poppins-ExtraLight';
		color: var(--theme-secondary-color) !important;
}
textarea:-moz-placeholder { /* Firefox 18- */
		font-family: 'Poppins-ExtraLight';
		color: var(--theme-secondary-color) !important;

}
textarea::-moz-placeholder {  /* Firefox 19+ */
		font-family: 'Poppins-ExtraLight';
		color: var(--theme-secondary-color) !important;
}
	
textarea:-ms-input-placeholder {
		font-family:'Poppins-ExtraLight';
		color: var(--theme-secondary-color) !important;
}
	
textarea::placeholder {
		font-family: 'Poppins-ExtraLight'; 
		color: var(--theme-secondary-color) !important;

}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
		text-indent: 10px;
}
#contact:hover #eye-head { 
		transform: translateY(0) scale(1);
		opacity: 1;
}	
form .form-group .form-label {
		text-align: left;
		width: 105px;
		height: 35px;
		display: flex;
		align-items: center;
		padding: 5px;
		color: var(--theme-secondary-color);
		font-family: 'Poppins-Extralight';
		letter-spacing: 1px;
		border: 1px solid var(--theme-fourth-color);
		background-color: var(--theme-bg-color);
		transform: translateY(-2.9em);
		transform-origin: center;
		-webkit-transition: all .3s ease;
		transition: all .3s ease;
}
form .form-group .form-labelfield {
		text-align: left;
		width: 105px;
		height: 101px;
		display: flex;
		align-items: start;
		padding: 5px;
		letter-spacing: 1px;
		color: var(--theme-secondary-color);
		border: 1px solid var(--theme-fourth-color);
		font-family: 'Poppins-Extralight';
		background-color: var(--theme-bg-color);
		transform: translateY(-8.8em);
		transform-origin: center;
		-webkit-transition: all .3s ease;
		transition:all .3s ease;
}
form .form-group .form-label i,
form .form-group .form-labelfield i {
		color: var(--theme-primary-color);
		padding: 4px 5px;
}
form .form-group {
		height: 70px;
		margin-bottom: 0;
}
form .form-group:nth-child(6) {
		height: 100px !important;
}
.form-controls:focus {
		outline: none;
		border-left: 2px solid;
		border-color: var(--theme-primary-color);
}
.form-controls:focus + .form-label {
		transform: translateY(-5.3em) scale(0.95);
		color: var(--theme-primary-color);
		background-color: transparent;
		border: 1px solid transparent;

}
.form-controls:focus + .form-labelfield {
		transform: translateY(-11.2em) scale(0.95);
		color: var(--theme-primary-color);
		background-color: transparent;
		border: 1px solid transparent;

}
.notification {
		background-color: var(--theme-primary-color);
		height: 30px;
		width: 352px;
		top: -90px;
		display: flex;
		position: absolute;
		border-radius: 20px;
		width: fit-content;
		padding: 0 20px;
		opacity: 0;
		transition: 1s ease;
}
.notification .message {
		color: var(--theme-bg-color);
		font-family: 'Poppins-Medium';
		display: flex;
		line-height: 30px;
		letter-spacing:.5;
		width: 100%;
		top: 0;
		padding: 0 20px;
		text-align: center;
		height: 100%;

}
.notification .message i {
		display: flex;
		align-self: center;
		padding: 0 6px 0 0;

}
.active-notif {
		opacity: 1;
		top: -30px;
}
#footer-block  {
		position: sticky;
		bottom: 0;
		width: 100%;
		height: 115px;
		background: url(../assets/img/footer-bg-light.png);
		background-repeat: no-repeat;
		background-position: top;
		background-size: cover;
		display: flex;
		align-self: center;
		justify-content: center;
		align-items: end;
}
#footer-block .copyright,
#footer-block .copyright span {
		font: 12px 'Poppins-ExtraLight';
		text-align: center;
		color: var(--theme-secondary-color);
		margin-bottom: 10px;
}
#footer-block .copyright span {
		font: 11px 'Poppins-Medium';
}
.web-modal-design {
		position: fixed;
		width: 100%;
		height: 100%;
		bottom: 0;
		left: 0;
		visibility: hidden;
		background-color: var(--theme-bg-color);
		overflow-y: auto;
		z-index: 20000;
		transition: .5s ease;
		clip-path: polygon(100% 100%, 100% 100%, 0 100%, 0 100%, 50% 100%);

}
.web-modal-design .close-button {
		z-index: 1;
		position: absolute;
		left: 5%;
		top: 25px;
		float: right;
		border-radius: 50%;
}
.web-modal-design .close-button i {
		color: var(--theme-secondary-color);
		font-size: 30px;
		transition: .3s ease;
}
.web-modal-design .close-button:hover i,
#lightbox .lightbox-close:hover i{
		color: var(--theme-primary-color);
}
.image-view > .box {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 2em;
		border-radius: 3px;
		filter: grayscale(1);
		transition: .5s ease;
		overflow: hidden;
		box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

}
.image-view > .box a {
		position: absolute;
		z-index: 1;
		color: var(--theme-secondary-color);
		transition: .3s ease;

		text-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
}
.image-view > .box a:hover {
		color: #FF0000;
		opacity: 1 !important;
}
.image-view > .box a i {
		font-size: 30px;
}
.image-view > .box:hover {
		filter: grayscale(0);
}
.image-view > .box:hover img {
		transform: scale(1.08);
}
.image-view > .box:hover a {
		opacity: 0.4;
}
.image-view > .box > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: .3s ease;
		transform-origin: center;

}
.skills-image-view > .box > img {
    	object-fit: contain;
}
.web-modal-design .image-view {
		width: 100%;
		margin: 80px 10px;
		grid-gap: 10px;
		grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
		grid-auto-rows: 120px;
		grid-auto-flow: dense;
		display: none;
}

.horizontal {
		grid-column: span 2;
}
.vertical {
		grid-row: span 2;
}
.big {
		grid-column: span 2;
		grid-row: span 2;
}

#lightbox {
		background: var(--theme-bg-color);
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: flex;
		visibility: hidden;
		opacity: 0;
		transition: all .3s ease;
		justify-content: center;
		align-items: start;
		overflow: auto;
		z-index: 30000;
}
#lightbox .img-output {
		height: auto;
		max-width: 720px;
		min-height: 320px;
		min-width: 320px;
		display: flex;
		align-self: start;
		margin: 80px 20px;
		justify-content: center;
		object-fit: contain;
		box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
		border: 10px solid var(--theme-secondary-color);
}
#lightbox .lightbox-close {
		position: absolute;
		top: 25px;
		right: 5%;
}
#lightbox .lightbox-close i {
		font-size: 30px;
		transition: .3s ease;
		color: var(--theme-secondary-color);
}
	/* custom scrollbar */

::-webkit-scrollbar {
	    width: 2px;
	}
	::-webkit-scrollbar-track {
	    background: var(--theme-bg-color); 
	}    
	::-webkit-scrollbar-thumb {
	    background: var(--theme-secondary-color);
	}
	::-webkit-scrollbar-thumb:hover {
	    background: var(--theme-primary-color);
	}

	::-moz-scrollbar {
	    width: 2px;
	}
	::-moz-scrollbar-track {
	    background: var(--theme-bg-color);
	}    
	::-moz-scrollbar-thumb {
	    background: var(--theme-secondary-color);
	}
	::-moz-scrollbar-thumb:hover {
	    background: var(--theme-primary-color);
	}

	::-o-scrollbar {
	    width: 2px;
	}
	::-o-scrollbar-track {
	    background: var(--theme-bg-color);
	}    
	::-o-scrollbar-thumb {
	    background:var(--theme-secondary-color);
	}
	::-o-scrollbar-thumb:hover {
	    background: var(--theme-primary-color);
	}

	::-ms-scrollbar {
	    width: 2px;
	}
	::-ms-scrollbar-track {
	    background: var(--theme-bg-color);
	}    
	::-ms-scrollbar-thumb {
	    background: var(--theme-secondary-color);
	}
	::-ms-scrollbar-thumb:hover {
	    background: var(--theme-primary-color);
	}

/*
 	For Mobile navigation
*/

input[type="checkbox"]{
		right: 0;
		position: absolute;
		display: none;
}
#mobile-navigation {
		position: absolute;
		cursor: pointer;
		right: 4%;
		top: 0;
		margin-top: 30px;
		width: 35px;
		height: 35px;
		z-index: 10000;
		display: none;
		-webkit-transition: .3s ease;
		transition: .3s ease;
}
#nav:hover .line {
		background-color: var(--theme-primary-color);
}
#icon-nav {
		position: absolute;
		top: -8px;
		right: 35px;
		width: 155px;
		list-style: none;
		z-index: 0;
		cursor: default; 
		display: block;
		overflow-x: hidden;
}
#icon-nav  li {
		position: relative;
		height: 35px;
		width: 35px;
		display: table-cell;
		transform: translateX(155px);
		-webkit-transition: .6s ease;
		transition: .6s ease;
		opacity: 0;
}
#icon-nav li .h-icons {
		font-size: 20px;
		padding: 6px 10px 6px 6px;
		color: var(--theme-fourth-color);	
		-webkit-transition: .3s ease;
		transition: .3s ease;
}
#icon-nav li .h-icons:hover,
#icon-nav .active .h-icons {
		color: var(--theme-primary-color);
}
#nav {
		-webkit-transition: .3s ease;
		transition: .3s ease;
}
#nav > .line{
		display: block;
		top: 0;
		left: 0;
		content: '';
		width: 100%;
		height: 2px;
		background-color: var(--theme-secondary-color);
		-webkit-transition: all .3s ease;
		transition: all .3s ease;
}
#nav .line:nth-child(1) {
		width: 80%;
}
#nav .line:nth-child(2) {
		transform: translate(0,7px);
}
#nav .line:nth-child(3) {
		width: 50%;
		transform: translate(0,14px);
}
@media only screen and (max-width: 1440px) {
		.main-projects-container1, 
		.main-drawings-container1 {
				top: -390px;
				transform: scale(0.8);
				transform-origin: bottom left;
		}
		.main-projects-container2, 
		.main-drawings-container2 {
				top: 600px;
				transform: scale(0.8);
				transform-origin: top right;
		}
		.section-footer {
			background-position: center 100%;
		}
}
@media only screen and (max-width: 1024px) {
		.main-banner-container {
				background-position: right 0%, right 350%;
		}
		#mobile-navigation {
				display: block;
		}
		#navigation-header {
				display: none;
		} 
		#hamburger:checked + #nav {
				transform-origin: bottom center;
				transform: rotate(180deg) translateY(-3px);
		}
		#hamburger:checked + #nav .line:nth-child(1) {
				width: 100%;
				transform: translate(0,7px) rotate(-45deg) ;
		}
		#hamburger:checked + #nav .line:nth-child(2) {
				opacity: 0;
		}
		#hamburger:checked + #nav .line:nth-child(3) {
				width: 100%;
				transform: translate(0,2px) rotate(45deg) ;
		}
		#hamburger:checked ~ #icon-nav li {
				transform: translateX(0);
				opacity: 1;
				visibility: visible;
		}
		#hamburger:checked ~ #icon-nav li:nth-child(4) {
				-webkit-transition-delay: .6s;
				transition-delay: .6s;
		}
		#hamburger:checked ~ #icon-nav li:nth-child(3) {
				-webkit-transition-delay: .4s;
				transition-delay: .4s;
		}
		#hamburger:checked ~ #icon-nav li:nth-child(2) {
				-webkit-transition-delay: .2s;
				transition-delay: .2s;
		}
		#text-banner {
				-webkit-transform: scale(1.1);
				transform: scale(0.9);
		}
		body .main-background {
				background-size: 60%;
		}
		.main-projects-container1, 
		.main-drawings-container1 {
				top: -552px;
				transform: scale(0.7);
				transform-origin: bottom left;
		}
		.main-projects-container2, 
		.main-drawings-container2 {
				top: 762px;
				transform: scale(0.7);
				transform-origin: top right;
		}

		.line-decor-about {
				right: -101%;
		}
		.line-decor-drawings {
				right: -102%;
		}
		.line-decor-projects, .line-decor-contacts {
				left: -102%;
		}
		.section-footer {
			 	background-size: 55%;
		}
		.line-decor-projects .line-decor-shapes .numbers {
				transform: rotate(-45deg) translate(351px, 298px) scale(0.8);
		}
		.line-decor-drawings .line-decor-shapes .numbers {
				transform: rotate(-45deg) translate(-512px, 275px) scale(0.8);
		}
		.line-decor-contacts .line-decor-shapes .numbers {
				transform: rotate(-45deg) translate(354px, 278px) scale(0.8);
		}
}
@media only screen and (max-width: 768px)  {
		.cursor{
			opacity: 0;
			visibility: hidden;
			transition: ease-out .3s;
		}
		.line-decor-about {
			right: -104%;
		}
		.line-decor-drawings {
			right: -107%;
		}
		.line-decor-projects, .line-decor-contacts {
			left: -106%;
		}
		.main-projects-container1, .main-drawings-container1 {
			top: -617px;
			transform: scale(0.55);
		}
		.main-projects-container2, .main-drawings-container2 {
			top: 823px;
			transform: scale(0.55);
		}
		.line-decor-projects .line-decor-shapes .numbers {
			transform: rotate(-45deg) translate(337px, 298px) scale(0.6);
		}
		.line-decor-drawings .line-decor-shapes .numbers {
			transform: rotate(-45deg) translate(-489px, 275px)scale(0.6);
		}
		.line-decor-contacts .line-decor-shapes .numbers {
			transform: rotate(-45deg) translate(333px, 277px) scale(0.6);
		}
		.website-block-category, .arts-block-category {
			transform: scale(1.3);
		}
		.mockups-block-category, .skills-block-category {
			transform: scale(1.3);
		}
		body .main-background {
			margin-top: 845px;
		}
		.description2 {
			padding-top: 30px;
			padding-bottom: 30px;
		}
		.website-list {
			margin-left: 0px;
			margin-top: 20px;
			margin-right: 0;
		}
		.laravel-list {
			margin-left: 75px;
			margin-top: 70px;
		}
		.social-list {
			margin-left: 50px;
		}
		.channel-list {
			margin-left: 0px;
		}
		.section-footer {
			background-size: 80%;
		}
	}
@media only screen and (max-width: 568px)  {
		.line-decor-about {
			right: -109%;
		}
		.main-projects-container1, .main-drawings-container1 {
			top: -667px;
		}
		.main-projects-container2, .main-drawings-container2 {
			top: 930px;
		}
		.line-decor-about {
			right: -80%;
		}
		.section-abouts .header-text {
			text-align: left;
    		margin-left: 20px;
		}
		.line-decor-drawings {
			right: -95%;
		}
		.section-drawings .header-text {
			text-align: left;
    		margin-left: 20px;
		}
		.line-decor-projects, .line-decor-contacts {
			left: -95%;
		}
		.section-projects .header-text {
			text-align: right;
    		margin-right: 20px;
		}
		.section-footer .header-text {
			text-align: right;
    		margin-right: 20px;
		}
		.drawing-dividers {
			height: 1229px;
		}
		.project-dividers {
			height: 1165px;
		}
		.website-list {
			margin-left: 70px;
		}
		.skills-list, 
		.laravel-list, 
		.channel-list {
			margin-left: 0;
		}
		.skills-list .progress-container {
			width: 290px;
		}
		.social-list {
			margin-left: 115px;
			margin-right: 0;
		}
		.skills-list .progress-container {
			width: 263px;
		}
		.section-projects {
			height: 2340px;
		}

}
@media only screen and (max-width: 480px) {
		.logo-text {
				display: none;
		}
		.main-banner-container {
				transform: scale(0.7);
				transform-origin: top right;
		}
		body .main-background {
				background-size: 80%;
				margin-top: 1033px;
		}
		.section-drawings {
				height: 2350px;
		}
		#text-banner {
				-webkit-transform: scale(1.1);
				transform: scale(0.9) translateX(-20px);
		}
		.drawing-dividers {
				height: 1302px;
		}
		.line-decor-about {
				right: -86%;
		}
		.line-decor-projects, .line-decor-contacts {
				left: -105%;
		}
		.line-decor-drawings {
				right: -106%;
		}
		.line-decor-projects .line-decor-shapes .numbers {
				transform: rotate(-45deg) translate(273px, 298px) scale(0.4);
				color: var(--theme-secondary-color);
		}
		.line-decor-drawings .line-decor-shapes .numbers {
				transform: rotate(-45deg) translate(-425px, 275px)scale(0.4);
				color: var(--theme-secondary-color);

		}
		.line-decor-contacts .line-decor-shapes .numbers {
				transform: rotate(-45deg) translate(261px, 277px) scale(0.4);
				color: var(--theme-secondary-color);

		}
		.section-footer {
				background-size: 80%;
		}
}	
@media only screen and (max-width: 425px) {
		.header-text {
			font-size: 25px;
			margin-top: 82px;
		}
		.header-text .header-text-small {
			font-size: 22px;
		}
		.line-decor-projects .line-decor-shapes .numbers {
			transform: rotate(-45deg) translate(257px, 298px) scale(0.3);
		}
		.line-decor-drawings .line-decor-shapes .numbers {
			transform: rotate(-45deg) translate(-406px, 275px)scale(0.3);

		}
		.line-decor-contacts .line-decor-shapes .numbers {
			transform: rotate(-45deg) translate(243px, 276px) scale(0.3);

		}
		.main-projects-container1, .main-drawings-container1 {
			top: -841px;
			transform: scale(0.45);
		}
		.main-projects-container2, .main-drawings-container2 {
			transform: scale(0.45);
		}
		.project-dividers {
			height: 1016px;
		}
		.section-projects {
			height: 2157px;
		}
		.drawing-dividers {
			height: 1036px;
		}
		.skills-list .progress-container {
			width: 200px;
		}
		.section-drawings {
			height: 2197px;
			padding-top: 0px;
		}
		#text-banner {
			-webkit-transform: scale(0.7) translateX(-47px);
			transform: scale(0.75) translateX(-51px);
		}
		.section-projects {
			padding-top: 60px;
		}
		.section-footer {
			background-size: 100%;
			height: auto;
			background-position: center 70%;
			
		}
		.website-list {
			margin-left: 30px;
		}
		.laravel-list {
			margin-left: 0px;
		}
		.hit-area {
			transform: scale(0.8) translateY(-83px);
		}
		form {
			margin: 100px 20px;
		}
		.awards-list li p span, .website-list li span, .social-list li span, .skills-list li span {
			font-size: 10px;
		}
		.all-headings {
			margin-bottom: 10px;
		}
		#footer-block {
			height: 125px;
		}
}
@media only screen and (max-width: 360px) {
		.about-text {
			font-size: 12px;
		}
		.all-headings {
			font-size: 15px;
		}
		.website-list {
			margin-left: 0px;
		}
		.line-decor-about {
			right: -90%;
		}
		.line-decor-projects, .line-decor-contacts {
			left: -114%;
		}
		.line-decor-drawings {
			right: -118%;
		}
		.line-decor-projects .line-decor-shapes .numbers {
			transform: rotate(-45deg) translate(288px, 298px) scale(0.3);
		}
		.line-decor-drawings .line-decor-shapes .numbers {
			transform: rotate(-45deg) translate(-446px, 275px)scale(0.3);
		}
		.line-decor-contacts .line-decor-shapes .numbers {
			transform: rotate(-45deg) translate(274px, 276px) scale(0.3);
		}
		form .form-group {
			margin: 0 20px;
		}
		.skills-list li {
			transform: translateX(-39px);
		}
}