@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:ital,wght@0,100..900;1,100..900&display=swap');
/* font-family: "Bagel Fat One", system-ui; */

@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=MuseoModerno:ital,wght@0,100..900;1,100..900&display=swap');
/* font-family: "MuseoModerno", sans-serif; */

:root {
    --yellow: #FFC700;
    --red: #F92B3A;
    --green: #AEDF35;
	/* --blue: #2B388F; */
	--blue: #485eea;
	--grey: rgb(50, 50, 50);
	--white: #fff;
    --head-font: 'MuseoModerno', sans-serif;
    --body-font: 'Ubuntu', sans-serif;
}


body {
  font-family: var(--body-font);
  color: var(--grey);
}


h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--head-font);
}





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

html, body {
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: "MuseoModerno", sans-serif;
  /* background: #f4f4f4; */
  color: #333;
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}

section {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-out;
  padding-bottom: 2rem;
}

section.show {
  opacity: 1;
  transform: translateY(0);
}

/* Hello Section */
.hello {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  padding: 10rem 5rem;
  max-width: 1200px;
  margin: auto;
}

.hello-text h1 {
  font-size: 3rem;

  line-height: 1.3;
  font-family: "Bagel Fat One", system-ui;
}

.hello-text h2 {
  font-size: 1.5rem;
  line-height: 1.3;
    /* margin-bottom: 10px; */
}

.hello-text h3 {
  font-size: 1.5rem;
  line-height: 1.3;
    margin-bottom: 40px;
}


.hello-text p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 10px;
}

.hello-p {
  max-width: 30rem;  
}





  .hello-image {
  max-width: 30vw;
  margin: auto;
}


@media (max-width: 900px){
  .hello-image {
  max-width: 80%;
  margin: 0%;
}
}

.hello-image img {
  width: 30vw;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  object-fit: cover;
}

/* Work Images */
.work-image {
 width: 100%;
  max-width: 100%;
  height: auto;
  overflow: hidden;
  cursor: pointer;
}

.work-image img {
  width: 80vw;
  height: auto;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

@media (max-width: 900px) {
 .work-image img {
  width: 95vw;
  max-width: 100%;
}
}


/* Developer Section */
.developer {
  /* background: #111; */
  /* color: #fff; */
  text-align: center;
  padding: 10vh 20px;
  margin: 0 auto;
    position: relative;
    height: 80vh; 
	max-height: 100vh;
width: 100%;
  max-width: 100%;
	/* background-color: var(--yellow); */
}

.developer h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.developer p {
  font-size: 1.1rem;
}

.cta {
  margin-top: 20px;
}

.cta button {
  padding: 12px 24px;
  background: #007BFF;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s;
}

.cta button:hover {
  background: #0056b3;
}

/* Zoom Modal */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1000;
}

.modal.show {
  visibility: visible;
  opacity: 1;
}

.modal img {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 0 20px #000;
}

.modal:after {
  content: "✕";
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 900px) {
  .hello {
    grid-template-columns: 1fr;
    /* text-align: center; */
    padding: 60px 20px;
  }

  .hello-image img {
width: 100%;
    /* border-radius: 0; */
    max-height: 400px;
  }

  .hello-text h1 {
    font-size: 2rem;
  }

  .hello-text p {
    font-size: 1.2rem;
  }
}





/* amimate */


.animfoot {
	position:absolute;
	bottom: 0;
	left: -2rem;
	width: 110%;
	display: block;
	z-index: -100;
  }

  @media (min-width: 834px){
	.animfoot {
		width: 115%;
		left: -8rem;
	}
}


@media (min-width: 2000px){
	.animfoot {
		left: -13rem;
		width: 120%;

	  }
}




/* linkwork */

.work_link{
	margin-top: 1rem;
	 text-align: center;
   z-index: 100;

}

.work_link ul li {
	
	background-color: var(--yellow);
	padding: 1rem;
	padding-left: 3rem;
	padding-right: 2rem;
	border-radius: 40px;
	border: solid 2px var(--grey);
	position: relative;
	box-shadow: 0px 1px 3px var(--grey);
	text-align: center;
	}

@media (max-width: 834px){

	.work_link{
		margin-top: 1rem;

	}

	.work_link ul li{
		width: 13rem;
		padding: 1rem;

	}

}


	.work_link ul li:hover {
		text-decoration: none;
		background-color: var(--red);
		transition: box-shadow 0.5s, transform 0.5s;
		box-shadow: 3px 3px 5px var(--grey);
		transform: translateY(-3px);
		
	}
	
	.work_link a {
		text-decoration: none;
		color: var(--grey) ;	
	}

	.work_link ul li::before {
		content: ''; 
		position: absolute;
		display: inline-flex;
		text-align: left;
		width: 1.5rem; 
		height: 1.5rem; 
		left: 25px;
		top: 30%;
		background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
	
		background-size: contain; 
		background-repeat: no-repeat;
		filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(100%);
		opacity: 1;
	}
	
	.work_link ul li:hover::before {
		content: ''; 
		position: absolute;
		display: inline-flex;
		text-align: left;
		width: 1.5rem; 
		height: 1.5rem; 
		left: 25px;
		top: 30%;
		background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
	
		background-size: contain; 
		background-repeat: no-repeat;
		filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(100%);
		opacity: 1;
		animation: blink 1s infinite;
	}
	
	@keyframes blink {
		0% { opacity: 1; }
		50% { opacity: 0; }
		100% { opacity: 1; }
	  }

	  @media (max-width: 834px){
		.work_link ul li::before {
			content: ''; 
			position: absolute;
			display: inline-flex;
			text-align: left;
			width: 1.2rem; 
			height: 1.2rem; 
			left: 10px;
			top: 30%;
			background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
		
			background-size: contain; 
			background-repeat: no-repeat;
			filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(100%);
			opacity: 1;
		}
		
		.work_link ul li:hover::before {
			content: ''; 
			position: absolute;
			display: inline-flex;
			text-align: left;
			width: 1.2rem; 
			height: 1.2rem; 
			left: 10px;
			top: 30%;
			background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
		
			background-size: contain; 
			background-repeat: no-repeat;
			filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(25%) contrast(100%);
			opacity: 1;
			animation: blink 1s infinite;
		}
	}








  body::-webkit-scrollbar {
  display: none;
}
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}