.about-section{

padding-top: 2rem;


}
.container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
}


#about .about {
	flex-direction: column-reverse;
	text-align: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 100px 20px;
}
#about .col-left {
	width: 250px;
	height: 360px;
}
#about .col-right {
	width: 100%;
}
#about .col-right h2 {
	font-size: 2.3rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	margin-bottom: 10px;
}
#about .col-right p {
	margin-bottom: 20px;
	font-size: 1.8rem;
}
#about .col-right .cta {
	color: black;
	margin-bottom: 50px;
	padding: 10px 20px;
	font-size: 2rem;
}
#about .col-left .about-img {
	height: 100%;
	width: 100%;
	position: relative;
	border: 10px solid #12f7ff;
}
#about .col-left .about-img::after {
	content: '';
	position: absolute;
	left: -33px;
	top: 19px;
	height: 98%;
	width: 98%;
	border: 7px solid white;
	z-index: -1;
}
img {
  overflow-clip-margin: content-box;
  overflow: clip;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

div {
  display: block;
  unicode-bidi: isolate;
}




  

.skills-section{
	padding-top: 20px;
	}
	
	.skills-header{
	text-align: center;
	color: #fff;
	padding: 1rem;
	position: relative;
	}
	
	.skills-header:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 4px;
	border-radius: 2px;
	}
	
	.skills-container{
	display: grid;
	grid-tempLate-columns: repeat(5, 1fr);
	justify-content:center;
	align-items:center;
	text-align: center;
	grid-gap:1rem;
	padding: 1rem 80px;
	font-size: 1.2rem;
	
	}
	.skills-box{
	padding: 1rem;
	color: #000;
	cursor:pointer;
	
	}
	.skills-box:hover > .skills-title::after, 
.skills-box:hover > .skills-title::before {
    width: 30px;
}

.skills-box:hover .skills-img {
    transform: translateX(-20px);
}
	
	.skills-title{
	display:flex;
	flex-direction: column;
	align-items:center;
	padding: 0.5rem;
	margin-bottom: 0.5rem;
	position: relative;
	
	}
	
	.skills-title:after{
	content: '';
	position:absolute;
	bottom: 0;
	right: 50%;
	width:20px;
	height:4px;
	transition: .5s;
	
	}
	
	.skills-title:before{
	content: '';
	position:absolute;
	bottom: 0;
	left: 50%;
	width:100px;
	height:4px;
	}
	
	.skills-icons{
	width:200px;
	z-index:2;
	
	}
	
	.skills-img{
	width:90px;
	height:90px;
	position: relative;
	
	display:flex;
	justify-content:center;
	align-items:center;
	transition: .5s;
	}
	
	.skills-img:after{
	content: '';
	position:absolute;
	top:0;
	left: 0;
	width:50%;
	height:90px;
	border-radius: 25px 0 0 25px;
	}
	.skills-title h3{
	color: var(--hover-color);
	margin-top: 0.5rem;
	}





	.fa {
		font-family: var(--fa-style-family, "Font Awesome 6 Free");
		font-weight: var(--fa-style, 900);
	}


	.fa-star:before {
		content: "\f005";
	}




.zzii{

	z-index: 400000;
}













	@media screen and (max-width:990px){
	 .skills-container{
	 grid-tempLate-columns: repeat(2, 1fr);
	 padding: 2rem 50px;
	 }
	}
	
	@media screen and (max-width:650px){
	 .skills-container{
	 grid-tempLate-columns:2fr;
	 padding: 2rem 50px;
	 }
	}












@keyframes hamburger_puls {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1.4);
	}
}
@keyframes text_reveal_box {
	50% {
		width: 100%;
		left: 0;
	}
	100% {
		width: 0;
		left: 100%;
	}
}
@keyframes text_reveal {
	100% {
		color: white;
	}
}
@keyframes text_reveal_name {
	100% {
		color: crimson;
		font-weight: 500;
	}
}




@media only screen and (min-width: 768px) {

  .cta {
		font-size: 2.5rem;
		padding: 20px 60px;
	}

	#about .about {
		flex-direction: row;
	}
	#about .col-left {
		width: 600px;
		height: 400px;
		padding-left: 60px;
	}


	#about .about .col-left .about-img::after {
		left: -45px;
		top: 34px;
		height: 68%;
		width: 58%;
		border: 10px solid white;
	}
	#about .col-right {
		text-align: left;
		padding: 30px;
	}
	#about .col-right h1 {
		text-align: left;
	}




}


section323 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	-webkit-box-pack: center;
		-ms-flex-pack: center;
			justify-content: center;
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
  }
  
  section323 .card434 {
	position: relative;
	width: 300px;
	height: 300px;
	margin: 20px;
	-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
	-webkit-perspective: 1000px;
			perspective: 1000px;
  }
  
  @media only screen and (max-width: 375px) {
	section323 .card434 {
	  width: 260px;
	  height: 260px;
	}
  }
  
  section323 .card434:hover .box434 {
	-webkit-transform: rotateY(180deg);
			transform: rotateY(180deg);
  }
  
  section323 .card434 .box434 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
	-webkit-transition: 1s ease;
	transition: 1s ease;
  }
  
  section323 .card434 .box434 .imgBox434 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  }
  
  section323 .card434 .box434 .imgBox434 img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
  }
  
  section323 .card434 .box434 .contentBox434 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #333333;
	-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
	-webkit-transform: rotateY(180deg);
			transform: rotateY(180deg);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	-webkit-box-pack: center;
		-ms-flex-pack: center;
			justify-content: center;
  }
  
  section323 .card434 .box434 .contentBox434 div {
	-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
	padding: 20px;
	background: rgb(28, 35, 53);
	-webkit-transform: translateZ(100px);
			transform: translateZ(100px);
  }
  
  section323 .card434 .box434 .contentBox434 div h2 {
	
	font-size: 20px;
	letter-spacing: 1px;
  }
  
  section323 .card434 .box434 .contentBox434 div p {
	line-height: 1.5;
  }