html{
    scroll-behavior: smooth;
}

section{
    scroll-margin-top:120px;
}







*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
    font-family:'poppins',sans-serif;
    scroll-behavior:smooth;
    border:none;
    outline:none;
    text-decoration: none;

    
}
    body{
    color:#ededed;
    background:url("https://img.freepik.com/premium-vector/shining-crooked-illustration-marble-style_6869-1462.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    min-height:100vh;
}


.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:20px 10%;
    background:#051129;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:100;

}
.logo{
   position:relative;
   font-size:25px;
   color: #fff;
   text-decoration: none;
   font-weight:500;
   cursor:default;
   opacity:0;
   animation:slideRight 1s ease forwards;
   
   
}
.navbar a{
    display:inline-block;
    font-size:25px;
    color:#fff;
    text-decoration: none;
    font-weight: 500;
    margin-left: 35px;
    transition:.3s;
    opacity:0;
    animation:slideTop .5s ease forwards;
    scroll-behavior: smooth;

}
    
   
.navbar a:hover{
    color:#0ef;
}
.home{
    position:relative;
    width:100%;
    justify-content: space-between;
    height:100vh;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items: center;
    padding:70px 10% 0;

}
.home-content{
    max-width:600px;
}
.home-content h3{
    font-size:32px;
    font-weight: 700;
    
    
}
.home-content h3:nth-of-type(2){
    margin-bottom:30px;
    animation:sildeTop 1s ease forwards;
   
}
.home-content h3 span{
    color:#0ef;
}
.home-content h1{
    font-size:56px;
    font-weight:700px;
    margin:-3px 0;
   
    
   

}
.home-content p{
    font-size:20px;
    
    
}
.home-sci a {
display:inline-flex;
justify-content: center;
align-items: center;
background: transparent;
width:40px;
height:40px;
color:#0ef;
border:2px  solid #0ef;
border-radius:50%;
text-decoration: none;
opacity:0;
transition:.5s ease ;
animation:slideLeft 1s ease forwards;
margin:30px 15px 30px 0;
animation-delay:calc(.2s * var(--i));
}
.home-sci a:hover{
    background:#0ef;
    color:black;
    box-shadow:0 0 5px cyan,
    0 0 25px cyan, 0 0 50px cyan,
    0 0 100px cyan, 0 0 200px cyan;
}

.btn-box{
    display:inline-block;
    padding:12px 28px;
    background:#0ef;
    border-radius:40px;
    font-size:16px;
    color:#081b29;
    letter-spacing:1px;
    text-decoration:none;
    font-weight: 600;
    animation:slideLeft 1s ease forwards;
}
.btn-box:hover{
    box-shadow:0 0 5px cyan,
    0 0 25px cyan, 0 0 50px cyan,
    0 0 100px cyan, 0 0 200px cyan;
}
.about{
    display:flex;
    justify-content: flex-end;
    align-items: center;
    padding: 80px 10%;
    min-height: 100vh;
}

.about-text{
max-width: 600px;
text-align:left;
font-size:20px;
}
.about-text h2 span{
    color:#0ef;
}
.about-text h2{
font-size:60px;
margin-bottom:20px;
}


.about-text p{
    color:aliceblue;
    font-weight:35px;
    line-height:1.5;
    margin-bottom:20px;
}
#services{
    color:aliceblue;
    font-size:20px;
    line-height:1.4;
    margin-bottom:4rem;
}
.sub-title{
    text-align:center;
    font-size:60px;
    padding-bottom:30px;
}
.sub-title span{
    color:#0ef;
}

.container{
    padding: 40px 90px;

}
.services-list{
    display:flex;
    grid-template-columns: repeat(auto-fit,minmax(259px,1fr));
    grid-gap:50px;
    margin-top:50px;
}
.services-list div{
    background-color:transparent;
    padding:50px;
    font-size:13px;
    font-weight: 13px;
    border-right:20px;
    border-radius: 20px;
    transition: background 0.5s, transform 0.5s;
    box-shadow:1px 1px 40px #012290f7,1px 1px 40px #012290f7;
    background: #382669;
}
.services-list div{
    font-size:15px;
    margin-bottom:10px;

}
.services-list div h2{
    font-size:20px;
    font-weight:500;
    margin-bottom:15px;
}
.services-list div a{
text-decoration:none;
color:#000000;
font-size: 12px;
margin-top:20px;
display:inline-block;
}
.read{
    display:inline-block;
    padding:12px 28px;
    background: #0ef;
    border-radius:40px;
    font-size:16px;
    color:#081b29;
    letter-spacing:1px;
    text-decoration: none;
    font-weight:600;
    opacity:0;
    animation:slideTop 1s ease forwards ;
    animation-delay:2s;
    box-shadow: 0 0 5px #0ef, 0 0 5px #0ef;
}
.read:hover{
box-shadow:0 0 5px cyan,
0 0 50px cyan,0 0 100px cyan,
0 0 200px cyan;
}
.services-list div:hover{
    transform:translateY(-10px);
 }
 .section{
    display:flex;
    flex-wrap:wrap;
    scroll-margin-top:80px;

 }
 .container1{
    width:100%;
    max-width: 600px;
    padding: 10px 20px;
    margin: 0 auto;
 
 }
 .heading1{
     text-align:center;
     text-decoration:underline;
     text-underline-offset:10px;
     text-decoration-thickness:5px;
     margin-bottom:30px;
     font-size:35px;

 }
 .heading2{
     text-align:center;
     text-decoration:underline;
     text-underline-offset:10px;
     text-decoration-thickness:5px;
     margin-top: 80px;
     margin-bottom:50px;
 }
 .bar{
     font-size:23px;
 }
 .Technical-bars .bar{
     margin-top:35px;
 }
 .Technical-bars .bar:first-child{
     margin-top:0;
 
 }
 .Technical-bars .bar:last-child{
    margin-bottom:0;
     
 }
 .Technical-bars .bar .info{
     margin-bottom:10px;
 }
 .Technical-bars .bar .info span{
     font-size:18px;
     font-weight:500;
     color:#fff;
     opacity:0;
     animation:showText 0.5s 1s linear forwards;
     opacity:0;
 
 }
 .Technical-bars .bar .progress-line{
   position:relative;  
   border-radius:10px;
   width:100%;
   height:5px;
   background-color:black;
   animation:animate 1s 1s cubic-bezier(1,0,0.5,1)forwards;
   transform:scaleX(0);
   transform-origin: left;
 }
 @keyframes animate{
    100%{
        transform: scaleX(1);
    }
 }
 .Technical-bars .bar .progress-line span{
    height:100%;
    background-color:#0ef;
    position:absolute;
    border-radius:10px;
    transform:scalex(1);
    transform-origin:left;
    
 }
 .progress-line.html span{
    width:90%;
 }
 .progress-line.css span{
    width:85%;
 }
 .progress-line.javascript span{
    width:60%;
 }
 .progress-line.Java span{
    width:70%;
 }
 .progress-line.mysql span{
    width:90%;
 }

.progress-line span::after{
    position:absolute;
    padding:1px 8px;
    background-color:black;
    color:#fff;
    font-size:12px;
    border-radius: 3px;
    top:-35px;
    right:-15px;
    animation:showText 0.5s 1.5s linear forwards;
    opacity:0;   
}

 .progress-line.html span::after{
    content:"90%";
 }
 .progress-line.css span::after{
    content:"85%";
 }
 .progress-line.javascript span::after{
    content:"60%";
 }
 
 .progress-line.Java span::after{
    content:"70%";
 }
 .progress-line.mysql span::after{
    content:"90%";
 }
 .progress-line span ::before{
    content:"";
    position:absolute;
    width:0;
    height:0;
    border:7px solid transparent;
    border-bottom-width:0px;
    border-right-width:0px;
    border-top-color:black;
    top:-15px;
    right:0;
    animation:showText 0.5s 1.5s linear forwards;
    opacity:0;
    
 }
@keyframes showText{
   100%{
       opacity:1;
   }
}
  @keyframes animate{
100%{transform:scaleX(1);
}
   }

.radial-bars{
   width:100%;
   display:flex;
   flex-wrap:wrap;
   justify-content:center;
   gap:40px;
  align-items:center;
  margin-top:40px;
}
.radial-bars .radial-bar{
    width:180px;
    height:200px;
    margin-bottom: 20px;
    position:relative;
}
.radial-bars .radial-bar svg{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)rotate(-90deg);
    width:140px;
    height:140px;
    overflow:visible;
  }
  .radial-bars .radial-bar .progress-bar{
    stroke-width:10;
    stop-color:black;
    fill:transparent;
    stroke-dasharray:502;
    stroke-dashoffset:502;
    stroke-linecap:round;
    animation:animate-bar 1s linear forwards;
  
  }
  @keyframes animate-bar{
    100%{
        stroke-dashoffset:-1;
    }
  }
  .path{
    stroke-width:10;
    stroke:#0ef;
    fill:black;
    stroke-dasharray:502;
    stroke-dashoffset:502;
    stroke-linecap:round;
  }
  .path-1{animation:animate-path1 1s 1s linear forwards;}
  .path-2{animation:animate-path2 1s 1s linear forwards;}
  .path-3{animation:animate-path3 1s 1s linear forwards;}
  .path-4{animation:animate-path4 1s 1s linear forwards;}
  @keyframes animate-path1{
    100%{
        stroke-dashoffset:50;;
    }
  }
  @keyframes animate-path2{
    100%{
        stroke-dashoffset:80;;
    }
  }
  @keyframes animate-path3{
    100%{
        stroke-dashoffset:125;;
    }
  }
  @keyframes animate-path4{
    100%{
        stroke-dashoffset:75;;
    }
  }
  .radial-bar .percentage{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:17px;
    font-weight:500;
    animation:showText 0.5s 1s linear forwards;
     opacity:0;
     color:#fff;
  
  }
  .radial-bar .text{
    width:100%;
    position:absolute;
    text-align:center;
    left:0;
    bottom:-10px;
    opacity:0;
    font-size: 17px;
    font-weight: 500;
    animation:showText 0.5s 1s linear forwards;
    color:#fff;
  }
  .contact{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    align-items:center;
    gap:3rem;
    padding-left:10%;
    margin-top:50px;
    min-height: auto;

  }
  .contact-text  h2{
    font-size:50px;
    line-height:1;
    text-align:center;
  }
  .contact-text h2 span{
    color:#0ef;
    text-align: center;
  }
  .contact-text h4{
    margin:25px 0;
    color:white;
    font-size:600;
  }
  .contact-text p{
    color:white;
    font-size:20px;
    font-weight: 20px;
    line-height: 30px;
    margin-bottom: 2rem;

  }
.contact-list{
    margin-bottom:3rem;

}
.contact-list li{
    margin-bottom:10px;
    display:block;
}
.contact-list i{
    display:inline-block;
    color:#0ef;
    font-size:20px;
    font-weight: 600;
    transition:all .40s ease;
}
.contact-list li a:hover{
    transform:scale(1.01) translateY(-5px);
    color:#0ef;
}
.contact-icons i{
    display:inline-flex;
    justify-content:center;
    align-items: center;
    width:40px;
    height:40px;
    background:transparent;
    border: 2px solid #0ef;
    border-radius: 50%;
    font-size: 20px;
    color:#0ef;
    text-decoration: none;
    margin: 3px 15px 30px 0;
    transition:.5s ease;
    opacity:1;
    animation:slideleft 1s ease forwards;
    animation-delay:calc(.2s * var(--i))
  }
  .contact-icons i:hover{
    background:#0ef;
    color:#000000;
    box-shadow: 0 0 20px #0ef;
  }
  .contact-form form{
    position:relative;
  
  }
  .contact-form form input{
    border:none;
    outline:none;
    width:50%;
    padding:18px;
    background:#fff;
    color:#000000;
    font-size: 1rem;
    font-weight:600;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
  }
  .contact form #hello{
    border:none;
    outline:none;
    width:50%;
    padding:18px;
    background:white;
    color:#000000;
    font-size: 1rem;
    font-weight:600;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
  }
 

    




   
@keyframes slideRight{
    0%{
        transform:translateX(-100px);
        opacity:0;
    }
    100%{
        transform:translateX(0px);
        opacity:1;
    }
}
@keyframes slideLeft{
    0%{
        transform:translateX(-100px);
        opacity:0;
    }
    100%{
        transform:translateX(0px);
        opacity:1;
    }
}
@keyframes slideTop{
    0%{
        transform:translateX(100px);
        opacity:0;
    }
    100%{
        transform:translateX(0px);
        opacity:1;
    }
}
@keyframes slideBottom{

   0%{
       transform:translateY(-100px);
       opacity:0;
   }
   100%{
       transform:translateY(0px);
       opacity:1;
   }

}
/* ================= SKILLS SECTION IMPROVED ================= */

#skills{
    min-height:100vh;
    padding:100px 10%;
}

.skills-wrapper{
    row-gap:120px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:60px;
    align-items:flex-start;
}

/* Technical & Professional box */
.skills-box{
    padding:40px;
}

/* Headings same style */
.skills-box h3{
    text-align:center;
    text-decoration:underline;
    text-underline-offset:10px;
    text-decoration-thickness:5px;
    margin-bottom:50px;
}

/* Technical skills fix */
.Technical-bars{
    width:100%;
}

/* Professional skills fix */
.radial-bars{
    justify-content:space-between;
}

/* ================= CONTACT FULL SECTION ================= */

.contact{
    min-height:100vh;
    padding:120px 10%;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:3rem;
    margin-top:0;
}

/* ================= RESPONSIVE ================= */

@media(max-width:768px){
    .skills-wrapper{
        grid-template-columns:1fr;
    }

    .contact{
        grid-template-columns:1fr;
        text-align:center;
    }

    .contact-form form input,
    .contact form #hello{
        width:100%;
    }
}