.skills-section {
    background: linear-gradient(135deg, 
                rgba(6, 6, 34, 0.95), 
                rgba(21, 5, 26, 0.9), 
                rgba(15, 23, 58, 0.85), 
                rgba(14, 2, 7, 0.712), 
                rgba(1, 10, 31, 0.85)),
                radial-gradient(circle at 50% 50%, 
                rgba(0, 21, 34, 0.8), 
                rgba(29, 0, 48, 0.85), 
                rgba(1, 18, 49, 0.9), 
                rgba(15, 1, 37, 0.85), 
                rgba(0, 23, 31, 0.9)),
                radial-gradient(circle at top left, 
                rgb(0, 26, 63) 10%, 
                rgb(19, 0, 39) 25%, 
                #001135 50%, 
                rgb(0, 31, 51) 75%, 
                rgba(0, 19, 46, 0.884) 90%, 
                rgba(0, 9, 48, 0.884) 100%);
    color: #fff;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 110%;
    animation: moveBackground 10s infinite alternate;
  }
  

  @keyframes moveBackground {
    0% {
      background-position: 0% 0%;
    }
    50% {
      background-position: 100% 100%;
    }
    100% {
      background-position: 0% 0%;
    }
  }


  .skills-container {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vertical-line {
    position: absolute;
    width: 3px;
    height: 80%;
    background: linear-gradient(180deg, #00f0ff, #7f00ff);
    box-shadow: 0px 0px 10px #00f0ff;
}

.vertical-line-primary {
    left: 30%;
}

.vertical-line-secondary {
    left: 70%;
}

.skill-icon {
    width: 50px;
    height: 50px;
    position: absolute;
    padding: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-in-out;
}

.skill-icon:hover {
    transform: scale(1.2);
}

/* Frontend Skill Positions */
.html { top: 5%; left: 20%; }
.css { top: 20%; left: 22%; }
.js { top: 35%; left: 18%; }
.tailwind { top: 50%; left: 25%; }
.bootstrap { top: 65%; left: 20%; }
.gsap { top: 80%; left: 22%; }

/* Backend Skill Positions */
.nodejs { top: 5%; right: 20%; }
.django { top: 20%; right: 22%; }
.python { top: 35%; right: 18%; }
.php { top: 50%; right: 25%; }
.sqlite { top: 65%; right: 20%; }
.mysql { top: 80%; right: 22%; }





.skill-des{
  width: 30%;
}


spanor{
  color: orangered;
}

spanbl{
  color: rgb(0, 110, 255);
}

spanyl{
  color: yellow;
}

spansbl{
  color: #00f0ff;
}

spansbl2{
  color: #00a2ff;
}
spanpu{
  color: #9928ce;
}

spangr{
  color: rgb(95, 255, 47);
}

spanlgr{
  color: lightgreen;
}
spanrea{
  color: #179ae6;
}

h3{
  color: rgba(219, 216, 216, 0.85);
  font-size: large;
}

.head h1{
  font-size: xx-large;
}

.head{
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 5%;
  background: -webkit-linear-gradient(rgb(69, 219, 169), rgb(0, 170, 255));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}





@media screen and (max-width: 768px){
  h3{
    font-size: 12px;
  }
  .skills-section{
    height: 110%;
  }
  .head{
    margin-top: -5%;
  }
  .why{
    height: 110%;
  }
  
    .skill-des {
      display: none;
    }
}

.why{
  background: linear-gradient(125deg, rgb(6, 16, 36),rgba(7, 20, 26, 0.918), rgb(24, 4, 14),rgb(2, 13, 36),rgb(1, 19, 13));
}