*{ margin:0;
  padding: 0;
  box-sizing: border-box; 
  font-family: 'Times New Roman', Times, serif,arial;
}

body{
   font-family: 'Inter', 'Segoe UI', Tahoma, Verdana, sans-serif;
  background: linear-gradient(135deg, #000000 0%, #1a1a2e 50%, #16213e 100%);
  background-attachment: fixed;
  color: rgba(255,255,255,0.95);
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #ffaa0033, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,165,0,0.2), transparent),
    radial-gradient(1px 1px at 90px 40px, #dcbf0333, transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255,140,0,0.15), transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: float 20s ease-in-out infinite;
  z-index: -2;
  pointer-events: none;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

.header{
display: flex;
justify-content: space-between;
position:fixed;


}
.nav-links{
  display:flex;
  right:25px;
  align-items:center;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  margin:10px;
  border:orange inset;
  position:fixed;
  background-color:black;
  
}
.nav-links{
 display: flex;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid rgba(255,165,0,0.3);
  background: rgba(0,0,0,0.7);
  border-radius: 50px;
  box-shadow: 0 8px 32px rgba(255,165,0,0.1);
  gap:25px;
}

.nav-link{
  text-decoration: none;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
}
.nav-link:hover{
	background-color:orange;
	font-size:15px;
}

.main button{
font-size: medium;
padding:10px;
margin-top:10px;
border-radius: 15px;
background-color: rgb(199, 148, 55);

}
.background{
  text-align:center;
   margin: 0 auto;
    padding: 120px 50px 80px;
}
.background h1 {
  background: linear-gradient(to right, #dcbf03, orange);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:orange; 
}
.main{
  display: flex;
  align-items: center;
  text-align:center;
  justify-content: space-between;
  padding: 120px 50px 80px;
  margin: 0 auto;
  gap: 150px;
  font-size:20px;


}
.intro h1{
background: linear-gradient(to right, #cacc3d, orange);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:orange;

}
.living h2{
background: linear-gradient(to right, #ff7e5f, rgb(216, 169, 16));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:orange;
}
.living .list{
 font-size: 15px;
  padding:25px;
  text-align: left;
}
.living .list li{
 margin:10px;
}

.education h2{
background: linear-gradient(to right, #ff7e5f, #feb47b);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:orange;
}
.education .list{
  font-size: 15px;
  padding:25px;
  text-align: left;
}
.education .list li{
  margin:10px;
}
.photo img{
width: 400px;
border-radius: 25px;
box-shadow: 
    0 30px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.1);
}

.photos{
display: flex;
justify-content: space-evenly;
gap: 25px;
}
.photos img{
width: 300px;
border-radius: 25px;
box-shadow: 
    0 30px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.1);

}

.photo img:hover{
	transform: scale(1.05) rotate(3deg);
  box-shadow: 
    0 40px 80px rgba(255,140,0,0.3),
    0 0 0 1px rgba(255,165,0,0.5);
}
.photo-glow {
  position: absolute;
  top: -20px;
  left: -20px;
  bottom: -20px;
  background: linear-gradient(45deg, rgba(255,140,0,0.3), rgba(255,165,0,0.2));
  border-radius: 40px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.demo{
text-align: center;

}
.demo video{
 border-radius: 25px;


}
.demo h2{
background: linear-gradient(to right, #ff7e5f, #feb47b);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:orange;
font-size: 65px;

}

.hobby{
text-align:center;
   margin: 0 auto;
    padding: 120px 50px 80px;

}
.hobby h1{
background: linear-gradient(to right, #2218b2, rgb(78, 168, 206));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:orange;


}

.badminton{
  display: flex;
  align-items: center;
  text-align:center;
  justify-content: space-between;
  padding: 120px 50px 80px;
  margin: 0 auto;
  gap: 200px;
  font-size:20px;
}
.badminton h2{
background: linear-gradient(to right, #3cc8e1, rgba(23, 53, 225, 0.704));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:orange;
}
.ml{
 display: flex;
  align-items: center;
  text-align:center;
  justify-content: space-between;
  padding: 120px 50px 80px;
  margin: 0 auto;
  gap: 200px;
  font-size:20px;

}
.ml h2{
background: linear-gradient(to right, #6fe1e7, rgba(23, 53, 225, 0.704));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:orange;
}
.health{
 display: flex;
  align-items: center;
  text-align:center;
  justify-content: space-between;
  padding: 120px 50px 80px;
  margin: 0 auto;
  gap: 200px;
  font-size:20px;
}
.health h2{
background: linear-gradient(to right, #4ed3eb, rgba(72, 96, 232, 0.704));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:orange;

}
.personal{
  text-align:center;
   margin: 0 auto;
    padding: 120px 50px 80px;
} 
.personal h1{
background: linear-gradient(to right, #09bc80, rgb(16, 216, 183));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:orange;
}
.experience{
 display: flex;
  align-items: center;
  text-align:center;
  justify-content: space-between;
  padding: 120px 50px 80px;
  margin: 0 auto;
  gap: 200px;
  font-size:20px;

}
.experience h2{
background: linear-gradient(to right, #32c2e2, rgba(67, 233, 33, 0.704));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:orange;
}


.contact{

  align-items: center;
  text-align:center;
  padding: 120px 50px 80px;
  margin: 0 auto;
  gap: 150px;
  font-size:50px;
  
 

}
.contact h3 {
  background: linear-gradient(to right, #e6c808, orange);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:orange; 
}

.social_media{
display: flex;
justify-content: space-evenly;
text-align: center;
font-size:40px;
 padding: 120px 50px 80px;
 margin-bottom: 3.3em;

}
.icon{




}
.visual h2{
  background: linear-gradient(to right, #32c2e2, rgba(67, 233, 33, 0.704));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:orange;
}
.technical h2{
  background: linear-gradient(to right, #4ed3eb, rgba(72, 96, 232, 0.704));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:orange;
}
.network h2{
  background: linear-gradient(to right, #6fe1e7, rgba(23, 53, 225, 0.704));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:orange;
}
.lead h2{
  background: linear-gradient(to right, #3cc8e1, rgba(23, 53, 225, 0.704));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:orange;
}
.create h2{
  background: linear-gradient(to right, #2218b2, rgb(78, 168, 206));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:orange;
}

footer{
position:relative;
bottom:-60px;
margin:10px;

}

.main button:hover{
 background: linear-gradient(to right, #d8a328, #fae5ac);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
  color:orange;
  border: rgb(206, 121, 31) outset;
  
}
@media (max-width: 1000px) {
  body {
    padding-bottom: 100px;
  }
   .social_media{
flex-wrap: wrap;
  }

  
  .nav-links {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 20px;
    position: fixed;
    top: 10px;
    right: 20px;
    z-index: 1000;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(20px);
  }
  
  .nav-link {
    font-size: 13px;
    padding: 10px 16px;
    white-space: nowrap;
  }
  
  .background, .hobby, .personal {
    padding: 80px 20px 40px;
  }
  
  .background h1, .hobby h1, .personal h1 {
    font-size: 2rem;
    margin-bottom: 30px;
  }
  
  .main, .badminton, .ml, .health, .experience {
    flex-direction: column;
    gap: 40px;
    padding: 60px 20px;
    text-align: center;
  }
  
  .photo {
    order: -1;
    margin-bottom: 20px;
  }
  
  .photo img {
    width: 100%;
    max-width: 350px;
    height: 250px;
    margin: 0 auto;
  }
  .photos{
flex-direction: column;
  }
  .photos img{
 width: 100%;
    max-width: 350px;
    height: 250px;
    margin: 0 auto;


  }
  .living, .education {
    order: 2;
  }
  
  .living .list, .education .list {
    text-align: left;
    padding: 20px;
    font-size: 15px;
  }
  
  .living .list li, .education .list li {
    margin: 8px 0;
  }
  
  button {
    width: 100%;
    max-width: 250px;
    padding: 14px;
    margin: 20px auto 0;
    display: block;
  }
  
  .nav-link:hover {
    font-size: 14px;
  }
}


@media (max-width: 767px) {
  body {
    padding-bottom: 100px;
  }
  .photos{
flex-direction: column;

  }
  .contact {
    


  }

  .social_media{
flex-wrap: wrap;



  }
  .nav-links {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 20px;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(20px);
  }
  
  .nav-link {
    font-size: 13px;
    padding: 10px 16px;
    white-space: nowrap;
  }
  
  .background, .hobby, .personal {
    padding: 80px 20px 40px;
  }
  
  .background h1, .hobby h1, .personal h1 {
    font-size: 2rem;
    margin-bottom: 30px;
  }
  
  .main, .badminton, .ml, .health, .experience {
    flex-direction: column;
    gap: 40px;
    padding: 60px 20px;
    text-align: center;
  }
  
  .photo {
    order: -1;
    margin-bottom: 20px;
  }
  
  .photo img {
    width: 100%;
    max-width: 350px;
    height: 250px;
    margin: 0 auto;
  }
  
  .living, .education {
    order: 2;
  }
  
  .living .list, .education .list {
    text-align: left;
    padding: 20px;
    font-size: 15px;
  }
  
  .living .list li, .education .list li {
    margin: 8px 0;
  }
  
  button {
    width: 100%;
    max-width: 250px;
    padding: 14px;
    margin: 20px auto 0;
    display: block;
  }
  
  .nav-link:hover {
    font-size: 14px;
  }
}


@media (max-width: 480px) {
  .nav-links {
    right: 15px;
    padding: 10px 15px;
    gap: 8px;
  }
  
  .nav-link {
    font-size: 12px;
    padding: 8px 12px;
  }
  
  .background, .hobby, .personal {
    padding: 60px 15px 30px;
  }
  
  .main, .badminton, .ml, .health, .experience {
    padding: 40px 15px;
    gap: 30px;
  }
  
  .photo img {
    height: 200px;
  }
  
  .living h2, .education h2 {
    font-size: 1.5rem;
  }
  
  button {
    font-size: 15px;
    padding: 12px;
  }
}