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

header{
   color: white;
   padding: 0.5rem 1.5rem;
   border-radius: 3rem;
   position: fixed;
   top: 1rem;
   left: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5rem;
   backdrop-filter: blur(10px);
   z-index: 1000;
   transform: translateX(-50%);
   background-color: #000000c0;
}
.logo{
   color: white;
   font-size: 1.3rem;
   font-weight: 500;
   text-wrap: nowrap;
   transition: 0.3s ease-in-out;
}
.logo:hover{
   background: linear-gradient(to right,crimson,yellow);
   background-clip: text;
   color: transparent;
   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,rgb(0,157,255),rgb(255,0,255));
}

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,rgb(0,157,255),rgb(255,0,255));
}
.visit-btn:hover{
   transform: scale(1.03);
   background: linear-gradient(to right,rgb(255,0,255),rgb(0,157,255));
}
#menu-item{
   display: none;
   font-size: 2rem;
}

section{
   min-height: 100vh;
   padding: 8rem 12%;
   width: 100%;
   position: relative;
}

.about{
   display: flex;
   align-items: center;
   justify-content: center;
}

.about img{
   width: 30vw;
   border-radius: 50%;
}
.about .about-container{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10rem;
}
.info-box{
   display: flex;
   flex-direction: column;
   text-align: center;
   align-items: 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,yellow,crimson);
   background-clip: text;
   color: transparent;
   font-size: 2rem;
}
.btn-group{
   display: flex;
   gap: 1rem;
}
.btn{
   border-radius: 3rem;
   padding: 0.5rem 1.5rem;
   border: 2px solid black;
   text-wrap: nowrap;
   cursor: pointer;
   font-weight: 500;
   transition: 0.2s ease-in-out;
}

.btn:hover{
   background-color: #151515;
   color: white;
}

.social-group{
   display: flex;
   gap: 2rem;
}

.social-group a{
   text-decoration: none;
}

.social-group i{
   font-size: 2.5rem;
   cursor: pointer;
   transition: 0.2s ease-in-out;
}

.social-group i:hover{
   transform: scale(1.1);
}

.section-title{
   font-size: 4rem;
   text-align: center;
   margin-bottom: 3rem;
   font-weight: 600;
}

.experience-info{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5rem;
}

.experience-info img{
   width: 24vw;
   border-radius: 3rem;
}
.grid{
   display: grid;
   grid-template-columns: repeat(2,1fr);
   gap: 2rem;
}

.grid-card{
   border: 1px solid #151515;
   padding: 2.5rem;
   border-radius:2rem;
   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: #151515;
   color: white;
}

.grid-card i{
   font-size: 1.5rem;
   margin-bottom: 1rem;
}

.grid-card span{
   font-size: 1.5rem;
   font-weight: 500;
}
.grid-card:hover span{
   background: linear-gradient(to right, cyan,orange);
   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 right,rgb(0,157,255),rgb(255,0,255));
}

.project-grid{
   display: grid;
   grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
   gap: 2rem;
}
.project-card{
   padding: 3rem 2rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   gap: 1.5rem;
   border: 2px solid #151515;
   border-radius: 3rem;
   cursor: pointer;
   transition: 0.2s ease-in-out;
}

.project-card:hover{
   background-color: #151515;
   transform: translateY(-10px)scale(1.02);
   color: white;
}

.project-card img{
   border-radius:1rem;
   width: 20vw;
}
.project-card:hover .btn{
   border: 2px solid white;
   color:white;
   background: #151515;
}
.project-card:hover .btn:hover{
   border: 2px solid #151515;
   background:white;
   color: #151515;
}
.project-card h3{
   font-size: 2rem;
   font-weight: 500;
}
.project-card:hover h3{
   background: linear-gradient(to right,yellow,crimson);
   background-clip: text;
   color: transparent;
}

.input-box{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   gap: 2rem;
   margin-top: 5rem;
}

.input-box p{
   position: relative;
   border-radius:3rem;
   border: 2px solid #151515;
   padding: 2rem 8rem;
   font-size: 3rem;

}

.input-box p{
   font-size: 3rem;
}
.input{
   position: relative;
}

.input i{
   position:absolute;
   font-size: 4rem;
   top:50%;
   left:10px;
   transform:translate(50%,-50%);
}

.input a{
   text-decoration-color: #151515;
   color: #151515;

}
#mail{
   text-decoration: none;
   font-size: 1.8rem;
}

footer{
   bottom: 0;
   top: 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: #151515;
   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 p{
      padding: 2rem 5rem;
      font-size: 2.5rem;
   }
   .input p{
      font-size: 2.5rem;
   }
   .input-box i{
      font-size: 2.5rem;
   }
}
@media(max-width:768px){
   header{
      gap: 1rem;
      padding: 1rem 1rem;
   }
   header .logo{
      font-size: 1rem;
   }
   header .visit-btn{
      display: none;
   }
   .about-container{
      flex-direction: column;
   }
   .input-box p{
      padding: 1rem 2rem;
      font-size: 1.8rem;
   }
   .input-box p{
      font-size: 1.5rem;
   }
   .input-box i{
      display: none;
   }
   .grid{
      grid-template-columns: repeat(1,1fr);
   }
   .experience-info img{
      width:70vw;

   }
}
@media(max-width:500px){
   header #menu-item{
      display: block;
      cursor: pointer;
   }
   .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);
      display: none;
      border-radius: 3rem;
   }
   .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 p{
      padding: 0.5rem 3rem;
      width: 80%;
      font-size: 1.5rem;
   }
   .input-box p{
      font-size: 1.5rem;
      width: 400px;
   }
   #mail{
      font-size: 1rem;
   }
   footer ul{
      gap: 1rem;
   }
}