* {
 margin: 0;
padding: 0;
box-sizing: border-box;
}


html{
	background:#080808;
	background-image:
		url(img/back1.webp),
		url(img/back2.webp);
		

	background-attachment:
		scroll,
		fixed;

	background-position:
		top,
		center;

	background-repeat:
		no-repeat,
		no-repeat;

		scroll-behavior: smooth;
}


html, body {
font-size:19px;
font-family: "Inter", sans-serif;
color: #9E9E9E;
font-weight: 400;
line-height: 30px;
}

::selection {
  background: #c4ff00;
  color: #080808;
}
::-moz-selection {
  background: #c4ff00;
  color: #080808;
}


div{margin:0 auto 0 auto;padding:0;}
img{border:0px;margin:0px}
a{text-decoration:none;color:#f2f2f2;transition: all 0.25s ease;}
.cl{clear:both;}
.logo{font-size:30px;font-weight:400;font-size:30px;}
header{
color:f2f2f2;
padding:40px 50px 40px 40px;
position:fixed;
top:0px;
background: url(img/shadow.png) repeat-x top;
display:flex;
justify-content:space-between;
width:100%;
}

b{font-family: "Space Grotesk", sans-serif;text-transform: uppercase;font-weight:700;}
nav{
	color:#f2f2f2;
	font-weight: 400;
	font-size: 17px;
}
li{
	display: inline;
	margin-left: 60px;
}

.menuc{
	display: inline;
	padding: 12px 28px;
	border-radius: 40px;
	background-image: linear-gradient(to right, rgba(80,80,80,0.08), rgba(248,248,246,0.08));
	-webkit-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 1);
transition: all 0.3s ease;
}

.menuc:hover{

	-webkit-box-shadow: 0px 0px 10px 0px rgba(196, 255, 0, 1);
-moz-box-shadow: 0px 0px 10px 0px rgba(196, 255, 0, 1);
box-shadow: 0px 0px 10px 0px rgba(196, 255, 0, 1);
}


#langl{
	font-size: 15px;
	color: #9E9E9E;
}
a:hover, #langl:hover{
	color: #c4ff00;
}

:focus-visible{
	outline: 2px solid #c4ff00;
	outline-offset: 4px;
	border-radius: 6px;
}


#hero1{
max-width: 600px;
float: left;
}
h1, h2, h3{
	font-family: "Space Grotesk", sans-serif;
	text-transform: uppercase;
	font-weight:700;
	color:#f2f2f2;
}
h1{
	line-height: 103px;
	font-size: 110px;
	letter-spacing: -5px;
	margin-top: 280px;
}
#hero1 b, #contact b{color:#c4ff00;}
#hero2{clear:both;float:right; max-width:600px;margin-top:50px;}
#line{width:81px;height:2px;margin:5px 25px 5px 0px;}
#hero3{margin-top: 50px;}
.smallgreen{
font-family: "Space Grotesk", sans-serif;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 500;
font-size: 14px;
color: #c4ff00;
}

section{
	max-width: 1200px;
	margin: 0 auto;
	clear: both;
scroll-margin-top: 60px;
}

h2{
	line-height: 58px;
	font-size: 54px;
	margin-bottom: 60px;
	max-width: 300px;
}

#projects{
margin-top: 200px;
margin-bottom: 100px;
}

#works{
display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 50px;
}

#works img{display:block;margin-bottom:15px;max-width:360px;}
.wimg{border-bottom:1px solid rgba(0, 0, 0, 0.1); transition: all 0.2s ease-in;}
.wimg:hover{border-bottom:1px solid #c4ff00;}
.homework{
border-top: 1px solid #202020;
font-size: 16px;
display: flex;
justify-content: space-between;
padding:18px 0px 10px 0px;
}

#works a{font-size:20px;}
#arrow{width:11px;margin-left:18px;}
#worksmore{float:right;margin-top:50px;}
.works1:hover a{color:#c4ff00;}

#about{
padding-top: 120px;
}

#back2{
background: url(img/back2.webp) fixed center center;
width:100%;
}

#about p{max-width: 600px;}

hr {
  border: none;
  height: 1px;
  background-color: #202020;
  width: 100%;
}

#services{
margin-top: 160px;
margin-bottom: 120px;
}

h3{font-size:40px; line-height: normal; max-width: 250px; float:left;}

#servright{
width: 715px;
float: right;
}

.service{
border-bottom: 1px solid #202020;
font-size: 16px;
line-height: 28px;
padding: 45px 0px;
transition: all 0.3s ease-in;
}

.service:hover{
border-bottom: 1px solid #c4ff00;
background: rgba(21, 21, 21, 0.5);

}

.service:hover h4{
color: #c4ff00;
}

.service1, .service2 {float:left}
.service1 {padding-left:36px;text-align:right;}
.service2 {padding-left:30px;}

h4{font-size:28px;color:#f2f2f2;font-weight:500;margin-bottom:20px;}

#servright p{max-width:600px;}

#tools p, #proces p{margin: 25px 0px;}
#tools {margin-bottom: 120px;}

.tools1{
border-bottom: 1px solid #202020;
float:left;
padding: 25px 0px;
font-size: 16px;
margin: 0px;
margin-right: 35px;
min-width: 250px;
transition: all 0.2s ease-in;
}

.tools1 span{padding-right:30px;}

.tools1:hover{
border-bottom: 1px solid #c4ff00;
color: #f2f2f2;
}

#proces{
margin-top:100px;
padding-bottom: 100px;
background: url(img/back4.png) no-repeat bottom center;
}

#proces p{margin-bottom:60px;}

#proces h4{font-size: 24px;}

.proc1 span, .proc1 div{float:left;margin-right:30px;}
.proc1 div{font-size:16px;margin-top:5px;max-width:220px;line-height:28px;margin-right:55px;}
.proc1{float:left;}
.line2{width:2px;margin-top:15px;}

#contact{text-align:center;padding-top:150px;border-bottom: 1px solid #202020;}
#back3{background:#080808;}

#contact h2{
	line-height: 113px;
	font-size: 110px;
	margin-bottom: 50px;
	max-width: 750px;
	letter-spacing: -5px;
display:inline-block;
}

#contact p{max-width:650px;display:block;display:inline-block;}
#conbut{
margin-top: 60px;
margin-bottom: 140px;
background: #c4ff00;
border-radius: 40px;
padding: 20px 100px;
color:  #080808;
font-weight:600;
font-size: 19px;
display:inline-block;
max-width:350px;
border: solid 2px #080808;
}

#conbut:hover{
	-webkit-box-shadow: 0px 0px 18px 0px rgba(196, 255, 0, 0.8);
-moz-box-shadow: 0px 0px 18px 0px rgba(196, 255, 0, 0.8);
box-shadow: 0px 0px 18px 0px rgba(196, 255, 0, 0.8);
background: #080808;
color:  #c4ff00;
border: solid 2px #c4ff00;
}


#cont1{
text-align: center;
width: 100%;
}

#green{
color: #c4ff00;
font-family: "Inter", sans-serif;
text-transform: lowercase;
font-weight: 400;
}



footer{
	max-width: 1200px;
	margin: 0 auto;
	clear: both;
	padding: 20px 0px 60px 0px;
	color: #4b4b4b;
	font-size: 14px;

}

footer a{color:#9E9E9E;float:right;}

footer div{text-align:left;float:left;}






article{
	max-width: 1200px;
	margin: 0 auto;
	clear: both;
scroll-margin-top: 60px;
padding-top: 250px;
}

#articleft{
	float: left;
	max-width: 40%;
}
#articleft h1{font-size:60px;	line-height: normal;
	letter-spacing: normal;
	margin-top: 10px;
	margin-bottom: 35px;}

#articleft h2{font-size:18px;
font-family: "Inter", sans-serif;
color: #9E9E9E;
font-weight: 400;
line-height: 30px;
text-transform: none;
margin-bottom: 10px;
}

#articleft p{margin-top:70px;font-size:19px;margin-bottom:80px;
}
.workbeh{font-size:16px;color: #9E9E9E;
	display: inline;
	padding: 12px 28px;
	border-radius: 40px;
	border: 1px solid #202020;
	-webkit-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 1);
transition: all 0.3s ease;
}

.workbeh:hover{
	background-image: linear-gradient(to right, rgba(80,80,80,0.08), rgba(248,248,246,0.08));
	color: #c4ff00;
}

#articright{
	float: right;
	max-width: 600px;
	text-align: right;
margin-top:-90px;
}

#wf{
margin-top:70px;
}

.worknav img{
	max-width: 41px;
}

.arrow{fill: #878787;max-width: 41px;transition: all 0.3s ease-in;}
.svgh:hover svg{fill: #c4ff00;}
.wn{margin-left:30px;}

.wnav2{text-align:center;margin:0px 0px 120px 0px;}


#workimg img{
	max-width: 95%;
	margin: 25px 0px;
transition: all 0.6s ease-in;
}

#workimg:hover img{
box-shadow: 0px 0px 130px 0px rgba(255, 255, 255, 1);
}

#workimg div{
	width: 50%;
}

#workcol1{text-align:left;}
#workcol2{text-align:right;}

#workimg{
	padding: 100px 0px 40px 0px;
	margin: auto;
	display: flex;
	justify-content: space-between;
}




@media all and (max-width:1280px){
section, footer, article{
	width: 92%;
}
header{
padding: 20px 4%;
background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1));
backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(3px);

}
#works{
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}
#works img{max-width:500px;}
.brvis{display:none;}
.proc1{width: 40%;margin-bottom:35px;padding-bottom:35px;border-bottom: 1px solid #202020;margin-right:5%;transition: all 0.2s ease-in;}
.proc1:hover{border-bottom: 1px solid #c4ff00;}
.proc1:hover h4{color:#c4ff00;}
.proc1 div{max-width:100%;margin-right:0px;}
.line2{display:none;}
#proces h4{margin-bottom:10px;}
.menuc{background: rgba(0,0,0,0.1);border:1px solid rgba(255,255,255,0.1);}
li {margin-left:30px;}

}



@media all and (max-width:1180px){
#works{
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
}
#works img{max-width:450px;}
.proc1 span{float:none;}
#articleft{
	max-width: 35%;
}
}


@media all and (max-width:1090px){
#works{grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));}
#works img{max-width:600px;}
#worksmore{float:none;width:100%;text-align:center;}
#works{margin-bottom:30px;}
#projects{margin-bottom:50px;}
}

@media all and (max-width:1050px){
h3{max-width:100%;width:100%;}
#services h3{margin-bottom:40px;}
#servright{width: 100%;float: none;clear:both;}
#articright, #articleft{
	float:none;
}
#articleft{
	width:100%;
	max-width: 80%;
	text-align:center;
}
#articright{text-align: center;
margin-top:30px;}
article{padding-top:160px;}

.wnav1{display:none;}
#articleft h2{
max-width: 100%;
}
#wf{max-width:100%; width:565px; margin-bottom: 40px;}

#workimg img{
	max-width: 100%;
}

#workimg div{
	width: 100%;
}

#workcol1, #workcol2{text-align:center;}

#workimg{
	display: inline;
}
.wnav2{margin-top:50px;}
}

@media all and (max-width:1005px){
.proc1{width: 100%;margin-right:0px;text-align:left;}
.proc1 div{max-width:100%;}
.proc1 span{float:left;}
.line2{display:block;}
.service1 {padding-left:0px;text-align:left;}
#servright p{max-width:600px;}
.service:hover{background: none;}
#proces{padding-bottom:0px;background: none;}

}

@media all and (max-width:930px){
.tools1{min-width:auto; width:40%;}
#projects{margin-bottom:50px;}
#worksmore{float:none;width:100%;text-align:center;}
#works{margin-bottom:30px;}
}

@media all and (max-width:730px){
#servright p{max-width:400px;}
}

@media all and (max-width:650px){
#works{
  grid-template-columns: repeat(auto-fit, minmax(90%, 1fr));
}
h1, #contact h2{
	line-height: 1.0;
	font-size: 17vw;
	letter-spacing: -2px;
}
#hero2{float:left;}
#works img{max-width:100%;}
.works1{width:90%;}
h2, h3{max-width: 100%; width: 100%;text-align: center;}
}

@media all and (max-width:550px){
.tools1{width:100%;margin-right:0px;}
#servright p{max-width:100%; width:100%;}
.service{text-align:center;}
.service1, .service2 {float:none; text-align:center; padding-left:0px;width:100%;}
.service1{margin-bottom:20px;}
#tools{margin-bottom:0px;}
.logo{font-size:22px;color: #c4ff00;letter-spacing:-0.5px;}
nav{font-size:15px;letter-spacing:-0.5px;}
li {margin-left:20px;}
.tools1:hover{
border-bottom: 1px solid #c4ff00;
color: #c4ff00;
}
footer a{float:none;}
footer div{float:none; text-align: center;}
footer{text-align: center;}
.menuc{padding: 12px 16px;}
}