.welcome_wrapper-text-h1,.welcome_wrapper-text-h1-line{
	font-size:5.5rem;
	font-weight:700
}
.form-group input:focus,.form-group textarea:focus{
	border-bottom:1px solid #ff54e8
}
@font-face{
	font-family:"Space Grotesk",sans-serif;
	src:url("./assets/fonts/static/SpaceGrotesk-Medium.ttf") format("truetype");
	font-weight:400;
	font-style:normal
}
@font-face{
	font-family:"Space Grotesk",sans-serif;
	src:url("./assets/fonts/static/SpaceGrotesk-Bold.ttf") format("truetype");
	font-weight:700;
	font-style:normal
}
html{
	scroll-behavior:smooth
}
body{
	font-family:"Space Grotesk",sans-serif;
	background-color:#151515;
	color:#fff;
	font-size:18px
}
.container{
	max-width:1140px;
	margin:0 auto;
	padding:0 15px;
	overflow:hidden
}
.header{
       animation-name: flyTop;
    animation-delay: 0.2s;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}
.header_wrapper{
	display:flex;
	gap:20px;
	align-items:center;
	justify-content:space-between;
	padding-top:39px
}
.header_nav-list{
	display:flex;
	gap:32px
}
.header_nav-list-item:hover{
	transform:scale(1.1)
}
.header_nav-list-item{
	transition:transform .2s
}
.wellcome{
	margin-bottom:72px
}
.wellcome_wrapper{
	position:relative;
	display:flex;
	justify-content:space-between;
	align-items:center
}
.wellcome_wrapper-rings{
	position:absolute;
	top:110px
}
.wellcome_wrapper-circle{
	position:absolute;
	right:388px;
	top:460px
}
.line,.underlined{
	position:relative
}
.welcome_wrapper-text-h1{
	margin-top:127px
}
.welcome_wrapper-text-h1-line span{
	margin-bottom:37px
}
.form-group input,.form-group textarea{
	width:445px;
	background-color:transparent;
	border-bottom:1px solid #979797;
	margin-bottom:32px
}
.underlined{
	display:inline-block
}
.underlined.underlined-contact::after{
	bottom:-10px;
	height:2px
}
.underlined::after{
	content:"";
	position:absolute;
	left:0;
	bottom:8px;
	width:100%;
	height:6px;
	background-color:#ff54e8
}
.line-footer::after,.line::after{
	content:"";
	right:0;
	left:0;
	width:100%;
	height:2px;
	background-color:#979797
}
.wellcome_wrapper-text-desc{
	color:#d9d9d9;
	font-size:18px;
	font-weight:300;
	max-width:445px;
	margin-bottom:66px;
	line-height:1.5;
	text-align:left
}
.wellcome_wrapper-text{
      animation-name: flyLeft;
    animation-delay: 0.5s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}
.wellcome_wrapper-img img{
	position:absolute;
	top:20px;
	z-index:-1;
	right:0;
	width:445px
}
.wellcome_wrapper-img img{
     animation-name: flyRight;
    animation-delay: 0.6s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
  
}
.wellcome_wrapper-link{
	font-weight:700;
	transition:.3s ease-in
}
.overlay .link:hover,.tg:hover,.wellcome_wrapper-link:hover{
	color:#ff54e8
}
.line{
	margin-top:104px
}
.line::after{
	position:absolute;
	top:104px
}
.skill{
	margin:250px 0 140px
}
.skill_wrapper-cards{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	 gap: 32px
}
.scroll-animate {
  opacity: 0;
 transform: translateY(50px);
  transition: all 0.6s ease-out;
}
.scroll-animate.left{
    transform: translateX(-100%);
}
.scroll-animate.right{
    transform: translateX(100%);
}
.scroll-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

.skill-rings-img{
	overflow:hidden;
	position:absolute;
	right:0;
	bottom:-470px
}
.overlay,.tg.underlined.underlined-contact::after{
	bottom:0
}
.skill_wrapper-name{
	font-size:3rem;
	font-weight:700
}
.skill_wrapper-exp{
	color:#d9d9d9
}
.project_wraper-title{
	font-size:5.5rem;
	font-weight:700;
	margin-bottom:80px
}
.project_wrapper-cards{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:69px 27px;
	margin-bottom:139px
}
.project_wrapper-card{
	position:relative
}
.project_wrapper-card:hover .overlay{
	opacity:1
}
.overlay{
	height:390px;
	position:absolute;
	top:0;
	left:0;
	right:0;
	background-color:rgba(0,0,0,.6);
	display:flex;
	gap:75px;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	opacity:0;
	transition:.3s ease-in
}
.overlay .link{
	transition:.2s ease-in
}
.project_wrapper-card-img{
	height:390px;
	width:526px;
	object-position:top;
	margin-bottom:20px
}
.project_wrapper-card-desc-title{
	margin-bottom:7px;
	font-size:24px;
	font-weight:700
}
.project_wrapper-card-desc-development-tool{
	margin-right:18px;
	text-transform:uppercase;
	color:#d9d9d9
}
.footer{
	position:relative;
	padding:84px 65px;
	background-color:#242424
}
.footer-rings-img{
	position:absolute;
	overflow:hidden;
	top:300px;
	left:-135px
}
.footer_wrapper{
	display:flex;
	justify-content:space-between;
	margin-bottom:36px
}
.fooret_wrapper-text-title{
	margin-bottom:20px;
	font-size:5.5rem;
	font-weight:700
}
.fooret_wrapper-text-desc{
	color:#d9d9d9;
	max-width:445px;
	line-height:1.6
}
#contactForm{
	width:445px;
	text-align:right
}
.form-group input{
	color:#fff;
	padding-bottom:16px
}
.form-group input::placeholder{
	text-transform:uppercase
}
.form-group input:focus{
	background-color:transparent;
	outline:0
}
.form-group textarea{
	height:107px;
	resize:none;
	color:#fff;
	outline:0
}
.form-group textarea::placeholder{
	text-transform:uppercase
}
.error{
	border-bottom:2px solid red!important
}
.send_message{
	font-weight:700;
	color:#fff
}
.line-footer{
	position:relative;
	margin-bottom:110px
}
.line-footer::after{
	position:absolute;
	top:70px
}
@media (max-width:1075px){
	.welcome_wrapper-text-h1{
		font-size:4.5rem;
		width:445px
	}
	.welcome_wrapper-text-h1-line{
		font-size:4.5rem
	}
	.wellcome_wrapper-rings{
		left:-180px
	}
	.wellcome_wrapper-img img{
		width:320px
	}
	.wellcome_wrapper-circle{
		overflow:hidden;
		right:-75px;
		top:323px
	}
	.overlay{
		position:relative;
		opacity:1;
		order:2;
		background-color:transparent;
		display:flex;
		flex-direction:row;
		justify-content:flex-start;
		gap:30px;
		height:max-content
	}
	.project_wrapper-card,.project_wrapper-card_img{
		display:flex;
		flex-direction:column
	}
	.project_wrapper-card-desc{
		order:1;
		margin-bottom:20px
	}
	.skill-rings-img{
		bottom:-565px
	}
	.footer_wrapper{
		flex-direction:column;
		align-items:center;
		gap:48px;
		text-align:center
	}
	.footer-rings-img{
		top:550px;
		left:-219px
	}
	.line{
		margin-top:-60px
	}
}
@media (max-width:956px){
	.project_wrapper-cards{
		grid-template-columns:repeat(1,1fr);
		justify-items:center
	}
}
@media (max-width:720px){
	.wellcome_wrapper-circle,.wellcome_wrapper-rings{
		display:none
	}
	.wellcome_wrapper{
		flex-direction:column-reverse;
		gap:20px
	}
	.wellcome_wrapper-img img{
		position:relative
	}
	.welcome_wrapper-text-h1{
		font-size:3.8rem;
		margin-top:50px
	}
	.fooret_wrapper-text-title,.welcome_wrapper-text-h1-line{
		font-size:3.8rem
	}
	.wellcome_wrapper-text-desc{
		margin-bottom:40px
	}
	.skill{
		margin:265px 0 100px
	}
	.skill-rings-img{
		display:none;
		bottom:-1010px
	}
	.skill_wrapper-cards{
		margin:0 auto;
		grid-template-columns:repeat(1,1fr);
		gap:45px;
		text-align:center
	}
	.project_wraper-title{
		font-size:3rem
	}
	.project{
		display:flex
	}
}
@media (max-width:587px){
	.header_wrapper{
		flex-direction:column
	}
	.welcome_wrapper-text-h1,.welcome_wrapper-text-h1-line{
		font-size:2.5rem
	}
	.underlined::after{
		bottom:0;
		width:100%;
		height:2px
	}
	.wellcome_wrapper-text-desc{
		margin:0 auto 50px;
		font-size:16px;
		max-width:343px;
		text-align:center
	}
	#contactForm,.wellcome_wrapper{
		text-align:center
	}
	.wellcome_wrapper-link{
		font-size:16px
	}
	.form-group input,.form-group textarea{
		width:343px
	}
	.footer-rings-img{
		display:none
	}
	.project_wrapper-cards{
		margin-bottom:65px
	}
}
@media (max-width:477px){
	.form-group input,.form-group textarea{
		width:235px
	}
}
@media (max-width:375px){
	.form-group input,.form-group textarea{
		width:225px
	}
}
 @keyframes flyLeft {
      from {
        transform: translateX(-200%) scale(0.5);
        opacity: 0;
      }
      to {
        transform: translateX(0) scale(1);
        opacity: 1;
      }
    }
     @keyframes flyRight {
      from {
        transform: translateX(200%) scale(0.5);
        opacity: 0;
      }
      to {
        transform: translateX(0) scale(1);
        opacity: 1;
      }
    }
       @keyframes flyTop {
      from {
        transform: translateY(200%) scale(0.5);
        opacity: 0;
      }
      to {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }