@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: 0.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  color: white;
  padding: 0.2rem 2.75rem;           /* wider pill */
  border-radius: 3rem;
  z-index: 1000;
  width: min(1600px, 100% - 2.5rem); /* makes the bar visually wider */
}

	.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%;
	}
	.socials i {
    color: #fb607f;
}

	.visit-btn{
		padding: 0.6rem 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;
	}

	:root {
  --bg-color: white;
  --text-color: black;
  --card-bg: white;
}

body.dark-mode {
  --bg-color: #121212;
  --text-color: white;
  --card-bg: #1e1e1e;
  background-color: var(--bg-color);
  color: var(--text-color);
}

.theme-toggle {
  background: none;
  padding: 0.8rem 1.5rem;
  border-radius: 1.4rem;
  cursor: pointer;
  font-size: 1.5rem;
  background-color: black;
  position: absolute;
  top: 1rem;
  right: 9rem;
  z-index: 1001;
}

.theme-toggle i {
  transition: transform 0.3s ease;
  color: #fb607f;
}

.theme-toggle:hover i {
  transform: scale(1.1);
  color: #ffbdc7; 
}

section{
  min-height: auto;
  padding: 6rem 12% 4rem;
  width: 100%;
  position: relative;
}

.about{
  display: flex;
  align-items: center;
  justify-content: flex-start;     /* move everything to the left */
}

.about .about-container{
  display: flex;
  align-items: center;
  justify-content: flex-start;     /* keep items left-aligned */
  gap: 4rem;
}

.about img{
  width: 12vw;
  border-radius: 50%;
}


.info-box{
  display: flex;
  flex-direction: row;     /* <- put items next to each other */
  align-items: center;
  justify-content: center;
  gap: 3rem;               /* space between groups */
  text-align: left;        /* optional — helps text look cleaner */
}


.info-box h3{
  font-size: 1.4rem; /* smaller */
  font-weight: 500;
  opacity: 0.8;
}
.info-box h1{
  font-size: 3rem;   /* smaller */
  font-weight: 600;
}
.info-box span{
  background: linear-gradient(to right, #fb607f, #ffbdc7);
  background-clip: text;
  color: transparent;
  font-size: 1.5rem; /* smaller */
}

	.btn-group{
		display: flex;
		gap: 1rem;
	}
	.btn {
		gap: 1rem;
		all: unset; 
		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{
     margin-top: -6.5rem;
  text-align: center;
  font-size: 2rem;   /* was 4rem */
  font-weight: 600;
  margin-bottom: 1.5rem;
}

	.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: 3rem;
		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;
	}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.project-card,
.grid-card {
  background-color: var(--card-bg);
  color: var(--text-color);
  border-color: var(--text-color);
}

.project-card:hover,
.grid-card:hover {
  background-color: var(--text-color);
  color: var(--bg-color);
}

	.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;
  text-align: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.input-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.input {
  position: relative;
}

.input input {
  border-radius: 2rem;
  border: 2px solid black;
  padding: 0.8rem 2.5rem; /* Smaller */
  font-size: 1.4rem;       /* Smaller */
}

.input input::placeholder {
  font-size: 1.4rem;       /* Smaller */
}

.input i {
  position: absolute;
  font-size: 1.8rem;       /* Smaller icon */
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

/* Button */
.input-box .btn {
  margin-top: 1rem;
  font-size: 1rem;
  padding: 0.6rem 1.5rem;  /* Smaller button */
  border-radius: 2rem;
  background-color: black;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.input-box .btn:hover {
  background-color: #333;
}

#contact-form .input {
  position: relative;
  width: 250px; /* control size here */
  margin: 0 auto;
}

#contact-form input {
  width: 100%;
  padding: 0.6rem 2.2rem; /* smaller input */
  border-radius: 1.5rem;
  border: 2px solid black;
  font-size: 1rem; /* smaller text */
}

#contact-form input::placeholder {
  font-size: 1rem;
}

#contact-form .input i {
  position: absolute;
  top: 50%;
  left: 12px;
  font-size: 1.2rem; /* smaller icon */
  transform: translateY(-50%);
}

/* Small button */
#contact-form .btn {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  padding: 0.5rem 1.5rem;
  border-radius: 1.5rem;
  background-color: black;
  color: white;
  border: none;
}


	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: 50%;
			font-size: 1.5rem;
		}
		.input-box input::placeholder{
			font-size: 1.5rem;
		}
		footer ul{
			gap: 1rem;
		}
	
}