*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial;
}

body{
  background:#f5f5fb;
  color:#555;
}

.main-container{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:40px 20px;
}

.hero-section{
  text-align:center;
}

.profile-img{
  width:220px;
  height:220px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 60px rgba(180,100,255,0.4);
}

.name{
  font-size:85px;
  margin-top:20px;
  font-weight:bold;
  background:linear-gradient(
    to right,
    #9b4dff,
    #39c6ff
  );
   background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.role{
  font-size:38px;
  margin-top:10px;
}

.social-links{
  margin-top:35px;
  display:flex;
  justify-content:center;
  gap:25px;
  flex-wrap:wrap;
}

.social-links a{
  text-decoration:none;
  color:black;
  background:white;
  padding:18px 35px;
  border-radius:50px;
  border:1px solid #ddd;
  font-size:25px;
  transition:0.3s;
}

.social-links a:hover{
  transform:scale(1.08);
}

.nav-wrapper{
  margin-top:50px;
  background:white;
  padding:10px;
  border-radius:60px;
  display:flex;
  gap:10px;
  border:1px solid #ddd;
  flex-wrap:wrap;
  justify-content:center;
}

.tab{
  border:none;
  background:none;
  padding:18px 40px;
  border-radius:50px;
  font-size:24px;
  cursor:pointer;
  color:#666;
  transition:0.3s;
}

.active{
  background:linear-gradient(
    to right,
    #9b4dff,
    #39c6ff
  );
  color:white;
}

.content{
  width:100%;
  max-width:1200px;
  display:none;
  margin-top:60px;
}

.active-content{
  display:block;
}

.content-box{
  background:white;
  padding:70px;
  border-radius:40px;
  text-align:center;
  border:1px solid #ddd;
}

.content-box h2,
.content h2{
  font-size:70px;
  text-align:center;
  margin-bottom:10px;
  color:black;
}

.content-box span,
.content span{
  background:linear-gradient(
    to right,
    #9b4dff,
    #39c6ff
  );
   background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.line{
  width:120px;
  height:7px;
  border-radius:20px;
  background:linear-gradient(
    to right,
    #9b4dff,
    #39c6ff
  );
  margin:20px auto 50px;
}

.content-box p{
  font-size:34px;
  line-height:2;
  margin-bottom:25px;
}

.skills-container{
  margin-top:50px;
  display:flex;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
}

.skill-card{
  width:240px;
  height:180px;
  background:white;
  border-radius:25px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-size:55px;
  border:1px solid #ddd;
  transition:0.3s;
}

.skill-card h3{
  font-size:30px;
  margin-top:15px;
  color:black;
}

.skill-card:hover{
  transform:translateY(-8px);
}

.skill-text{
  text-align:center;
  font-size:32px;
  margin-top:20px;
}

.projects-container{
  margin-top:50px;
  display:flex;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
}

.project-card{
  width:320px;
  background:white;
  padding:35px;
  border-radius:25px;
  text-align:center;
  border:1px solid #ddd;
}

.project-card h3{
  font-size:35px;
  margin-bottom:15px;
  color:black;
}

.project-card p{
  font-size:24px;
  line-height:1.6;
}

.project-card a{
  display:inline-block;
  margin-top:25px;
  text-decoration:none;
  background:linear-gradient(
    to right,
    #9b4dff,
    #39c6ff
  );
  color:white;
  padding:14px 28px;
  border-radius:40px;
  font-size:22px;
}

.contact-box{
  background:white;
  padding:50px;
  border-radius:30px;
  border:1px solid #ddd;
}

form{
  display:flex;
  flex-direction:column;
  gap:25px;
}

input,
textarea{
  padding:22px;
  border-radius:15px;
  border:1px solid #ccc;
  font-size:24px;
}

textarea{
  height:180px;
}

button{
  border:none;
  padding:20px;
  border-radius:50px;
  background:linear-gradient(
    to right,
    #9b4dff,
    #39c6ff
  );
  color:white;
  font-size:26px;
  cursor:pointer;
}

#successMsg{
  text-align:center;
  color:green;
  font-size:28px;
  margin-top:20px;
}

#history{
  margin-top:40px;
}

.message{
  background:#f7f7ff;
  padding:25px;
  border-radius:20px;
  margin-bottom:20px;
}

.message h3{
  font-size:28px;
}

.message p{
  font-size:22px;
  margin-top:10px;
}

.delete-btn{
  margin-top:20px;
  background:red;
  font-size:18px;
  padding:10px 18px;
}

@media(max-width:768px){

  .name{
    font-size:55px;
  }

  .role{
    font-size:24px;
  }

  .content-box h2,
  .content h2{
    font-size:45px;
  }

  .content-box p{
    font-size:22px;
  }

}