*{
    margin: 0;
    
}
.nav-link{
    border: none;
   border-radius: 10px;
}
.nav-link:hover{
   background-color: #8a2be2;
   box-shadow:0 10px 30px #892be2a2;

}
.social {
  padding:1% ;
  font-size: 20px;
 
}

.hero{
height: 89vh;
}


.profile_pic{
    width: 400px;
    height: 400px;
    border-radius: 50%;
    overflow: hidden;
}
.hero-title{
    font-weight: 800;
    
}
.hero-text{
    max-width:460px ;
    
}
.hero-btn{
 text-decoration: none;
 background-color: #8a2be2;
 border: none;
 color: white;
 font-weight: 700;
 border-radius: 10px;
transition: transform 0.3s ease;
display: inline-block;
}
.hero-btn:hover{
    background-color: #8a2be2;
    box-shadow:0 10px 30px #8a2be2;
    transform: translateY(-4px);
}
.tech-stack{
  margin-top:20px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.tech-stack span{
  background:rgba(123,97,255,0.15);
  color:#b9a9ff;
  padding:6px 14px;
  border-radius:20px;
  font-size:14px;
  font-weight:500;
  border:1px solid rgba(123,97,255,0.4);
  transition:0.3s;
}

.tech-stack span:hover{
  background:#7b61ff;
  color:white;
  transform:translateY(-2px);
}
.about{
  height: 60vh;
  justify-content: center;
  

}
span{
  color: #8a2be2;
}

.about-text{
  max-width:650px ;
  margin-top: 50px;
}
.about-title{
   font-weight: 800;
   
}


.projects{
    width:500px;
    border-radius: 10px;
}
.pro-1{
    text-decoration: none;
    background-color: #344998;
    border-radius: 10px;
    color:white;
    box-shadow:0 10px 30px #344998;
    display: inline-block;
    transition: transform 0.3s ease ;
}
.pro-1:hover{
 transform: translateY(-5px);  
}
.pro-2{
    background-color: rgb(115, 26, 26);
    border-radius: 10px;
    text-decoration: none;
    color:white;
    box-shadow:0 10px 30px rgb(115, 26, 26);
    display: inline-block;
    transition: transform 0.3s ease ;
    
}
.pro-2:hover{
 transform: translateY(-5px);  
}
.pro-3{
    background-color:#892be2da;
    color:white;
    border-radius: 10px;
    text-decoration: none;
    box-shadow:0 10px 30px #892be270 ;
    display: inline-block;
    transition: transform 0.3s ease  ;
}
.pro-3:hover{
 transform: translateY(-5px);  
}
.test{
    background-color: rgba(135, 78, 195, 0.279);
    border-radius: 10px;
    transition: transform 0.3s ease  ;
}
.test:hover{
 transform: translateY(-5px); 
}
.pic{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.recent_work{
 background-color: rgba(23, 23, 63, 0.353);
 border-radius: 10px;
}
.contact-section {
  background: #000;
  color: #fff;
}

.title {
  font-weight: bold;
}


.contact-card {
  background: #0b0b0b;
  padding: 25px;
  border-radius: 15px;
  border: 1px solid rgba(138, 43, 226, 0.3);
}


.custom-input {
  background: transparent;
  border: 2px solid #8a2be2;
  border-radius: 10px;
  color: #fff;
  padding: 10px;
}

.custom-input:focus {
  background: transparent;
  color: #fff;
  border-color: #a855f7;
  box-shadow: 0 0 10px #8a2be2;
}


.send-btn {
  background: linear-gradient(90deg, #8a2be2, #a855f7);
  border: none;
  border-radius: 20px;
  padding: 10px;
  color: white;
  font-weight: 500;
  transition: 0.3s;
}

.send-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 0 15px #8a2be2;
}

.socials a{
  text-decoration: none;
  color: white;
}

.socials i {
  font-size: 22px;
  margin-right: 15px;
  cursor: pointer;
  transition: 0.3s;
}

.socials i:hover {
  color: #a855f7;
  transform: translateY(-3px);
}
footer{
    height: 10vh; 
}

.skills-section{
  padding: 80px 16px;
  background: #0f141b;
}

.skills-container{
  max-width: 1100px;
  margin: auto;
  text-align: center;
}

.skills-title{
  font-size: 42px;
  color: #fff;
  margin-bottom: 10px;
}

.skills-subtitle{
  max-width: 700px;
  margin: 0 auto 40px;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
}


.skills-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}


.skill-card{
  background: #1b222c;
  border: 1px solid rgba(138, 43, 226, 0.3);
  border-radius: 14px;
  padding: 22px;
  text-align: left;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

.skill-card h3{
  color: #fff;
  font-size: 20px;
  margin: 0 0 16px;
}


.skill{
  margin-bottom: 14px;
}

.skill-head{
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: rgba(255,255,255,.85);
  font-size: 14px;
}

.bar{
  width: 100%;
  height: 10px;
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  overflow: hidden;
}

.bar span{
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8a2be2, #a855f7);
}


.chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.8);
  font-size: 13px;
}
.chip:hover{
 box-shadow:0 10px 10px  #892be2c2 ;
}




@media (max-width:991px) {
    
     
      .profile_pic{
    width: 250px;
    height: 250px;
    border-radius: 50%;
    overflow: hidden;
     }
     .skills-grid{
         grid-template-columns: 1fr 1fr;
         }
}
@media (max-width:768px) {
    .profile_pic{
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
   
     }
.hero-text{
    font-size: 14px;
     }
     

     .pro-1{
      width:100%;
      text-align: center;
     }
     .pro-2{
      width:100%;
      text-align: center;
      margin-bottom: 30px;
     }
     .pro-3{
      width:100%;
      text-align: center;
     }
     .head{
      text-align: center;
     }
      .p-content{
        max-width: 600px;
        text-align: center;
     } 
     .skills-title{ 
        font-size: 32px;
     }
    .skills-grid{ 
        grid-template-columns: 1fr; 
    }
     
     
}