@import url('https://fonts.googleapis.com/css2?family=Katibeh&family=Kodchasan:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins';
	text-decoration: none;
	scroll-behavior: smooth;
	list-style: none;


	header{
		position: fixed;
		top: 1rem;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5rem;
		background-color: rgba(0, 0, 0, 0.8);
		backdrop-filter: blur(8px);
		color: white;
		padding: 0.5rem 1.5rem;
		border-radius: 3rem;
		z-index: 1000;
	}
	.logo{
		color: white;
		font-size: 1.3rem;
		font-weight: 600;
		text-wrap: nowrap;
		transition: 0.3s ease-in-out;
	}
	.logo:hover{
		transform: scale(1.1);
	}
	.nav-links{
		display: flex;
		gap: 2rem;
	}
	li a{
		position: relative;
		color: white;
		font-weight: 300;
	}
	li a::before{
		position: absolute;
		content: '';
		width: 0;
		left: 0;
		height: 5px;
		top: 25px;
		border-radius: 1rem;
		transition: 0.3s ease-in-out;
		background: linear-gradient(to right, #ffe9ec, 
			#ffbdc7);
	}
	li a:hover::before{
		width: 100%;
	}
	.visit-btn{
		padding: 0.8rem 1.5rem;
		border-radius: 3rem;
		border: none;
		font-weight: 500;
		font-size: 1rem;
		color: white;
		cursor: pointer;
		text-wrap: nowrap;
		transition: 0.3s ease-in-out;
		background: linear-gradient(to right,
			#ffbdc7, #fb607f);
	}
	.visit-btn:hover{
		background: linear-gradient(to right, #fb607f, 
			#ffbdc7);
		transform: scale(1.03);
	}

	#menu-icon{
		font-size: 2rem;
		display: none;
	}

	section{
		min-height: 100vh;
		padding: 8rem 12%;
		width: 100%;
		position: relative;
	}
	.about{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.about .about-container{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rem;
	}
	.about img{
		width: 25vw;
		border-radius: 50%;
	}
	.info-box{
		display: flex;
		flex-direction: column;
		text-align: center;
		align-items: center;
		justify-content: center;
		gap: 1.5rem;
	}
	.info-box h3{
		font-size: 1.8rem;
		font-weight: 500;
		opacity: 0.8;
	}
	.info-box h1{
		font-size: 4rem;
		font-weight: 600;
	}
	.info-box span{
		background: linear-gradient(to right, #fb607f, 
		#ffbdc7);
		background-clip: text;
		color: transparent;
		font-size: 2rem;
	}
	.btn-group{
		display: flex;
		gap: 1rem;
	}
	.btn {
		gap: 1rem;
		all: unset; /* resets browser default button styles */
		display: inline-block;
		text-align: center;
		border-radius: 3rem;
		padding: 0.5rem 1.5rem;
		border: 2px solid black;
		cursor: pointer;
		font-weight: 500;
		white-space: nowrap;
		transition: 0.2s ease-in-out;
	  }
	  
	.btn:hover{
		background-color: black ;
		color: white;
	}
	.socials{
		display: flex;
		gap: 2rem;
	}
	.socials i{
		font-size: 2.5rem;
		cursor: pointer;
		transition: 0.2s ease-in-out;
	}
	.socials i:hover{
		transform: scale(1.1);
	}

	.section-title{
		text-align: center;
		font-size: 4rem;
		font-weight: 600;
		margin-bottom: 3rem;
	}
	.experience-info{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5rem;
	}
	.experience img{
		width: 24vw;
		border-radius: 3rem;
	}
	.grid{
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: 2rem;
	}
	.grid-card{
		border: 2px solid black;
		border-radius: 3rem;
		padding: 2rem;
		display: flex;
		flex-direction: column;
		align-items: baseline;
		justify-content: left;
		cursor: pointer;
		transition: 0.2s ease-in-out;
	}
	.grid-card:hover{
		transform: scale(1.02);
		background-color: black;
		color: white;
	}
	.grid-card i{
		font-size: 1.5rem;
		margin-bottom: 1rem;
	}
	.grid-card p{
		font-size: .8rem;
		font-weight: 150;
	}
	.grid-card span{
		font-size: 1.5rem;
		font-weight: 500;
		background: linear-gradient(to right, #fb607f, 
		#ffbdc7);
		background-clip: text;
		color: transparent;
	}
	::-webkit-scrollbar{
		width: 20px;
	}
	::-webkit-scrollbar-track{
		background-color: rgb(219, 219, 219);
	}
	::-webkit-scrollbar-thumb{
		background: linear-gradient(to bottom, #fb607f, 
		#ffbdc7);
	}
	.project-grid{
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
		gap: 2rem;
	}
	.project-card{
		padding: 2rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align:center;
		gap: 1.5rem;
		border: 2px solid black;
		border-radius: 3rem;
		cursor: pointer;
		transition: 0.3s ease-in-out;
	}
	.project-card:hover{
		background-color: black;
		color: white;
		transform: translateY(-10px)scale(1.02);
	}
	.project-card img{
		width: 20vw;
		border-radius: 1rem;
	}
	.project-card:hover .btn{
		border: 2px solid white;
		color: white;
	}
	.project-card:hover .btn:hover{
		border: 2px solid white;
		background-color: white;
		color: black;
	}

	.project-card h3{
		font-size: 2rem;
		font-weight: 500;
	}
	.input-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 2rem;
		margin-top: 5rem;
	}
	.input-box input{
		border-radius: 3rem;
		border: 2px solid black;
		padding: 2rem 8rem;
		font-size: 3rem;
	}
	.input-box input::placeholder{
		font-size: 3rem;
		
	}
	.input{
		position: relative;
	}
	.input i{
		position: absolute;
		font-size: 4rem;
		top: 50%;
		left: 10px;
		transform: translate(50%,-50%);
	}

	footer{
		bottom: 0;
		left: 0;
		height: 10rem;
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		align-items: center;
		justify-content: center;
	}
	footer ul{
		display: flex;
		align-items: center;
		gap: 3rem;
	}
	footer ul li a{
		color: black;
		font-weight: 600;
	}
	.copyright{
		font-size: 300;
		margin-top: 2rem;
	}

	@media(max-width:1280px){
		header{
			padding: 1rem 2rem;
			gap: 2rem;
		}
		.about .about-container{
			gap: 3rem;
		}
		.experience-info{
			flex-direction: column;
		}
		.input-box input{
			padding: 2rem 5rem;
			font-size: 2.5rem;
		}
		.input input::placeholder{
			font-size: 2.5rem;
		}
		.input-box{
			font-size: 2.5rem;
		}

	}

	@media(max-width:768px){
		header{
			padding: 1rem 1rem;
			gap: 1rem;
		}
		header .logo{
			font-size: 1rem;
		}
		header .visit-btn{
			display: none;
		}
		.input-box input{
			padding: 1rem 2rem;
			font-size: 1.8rem;
		}
		.input-box input::placeholder{
			font-size: 1.5rem;
		}
		.input-box i{
			display: none;
		}
		.grid{
			grid-template-columns: repeat(1,1fr);
		}
		.experience-info img{
			width: 70vw;
		}
	}
	@media(max-width:600px){
		header #menu-icon{
			display: block;
		}
		.nav-links{
			position: absolute;
			top: 100%;
			margin-top: 1rem;
			width: 100%;
			padding: 1rem;
			color: white;
			display: flex;
			flex-direction: column;
			text-align: center;
			background: rgba(0, 0, 0, 0.9);
			border-radius: 3rem;
			display: none;
		}
		.nav-links li{
			margin-top: 1.5rem;
			padding: 1rem;
		}
		.nav-links.active{
			display: block;
		}
		header{
			padding:1rem 5rem;
			gap: 8rem;
		}
		header .logo{
			font-size: 1.5rem;
		}
		.about-container img{
			width: 80vw;

		}
		.input-box input{
			padding: 0.5rem 3rem;
			width: 80%;
			font-size: 1.5rem;
		}
		.input-box input::placeholder{
			font-size: 1.5rem;
		}
		footer ul{
			gap: 1rem;
		}
	}