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

}
html{
    font-size: 62.5%;
     /* //10px=1rem */
}
body{
    color: white;
    background-color:#081b29;
}
.header{
       text-decoration: none;
    position:fixed;
    top:10;
    left:0;
    width:100%;
    padding: 1.5rem 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    background-color:#051129 ;
}
.logo{
   
    position: relative;
    left: -4.0rem;
    top: -.5rem;
    font-size: 2.5rem;
    color:#0ef;
    text-decoration: none;
    font-weight: 1000;
    cursor:default;
    opacity: 0;
    animation:slideRight 1s ease forwards;


}
.navbar a{
    display:inline-block;
    font-size: 2.5rem;
    color:#fff;
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 1.5rem;
    margin-right: 1.5rem;
    transition: 0.3s;
    opacity:0;
    animation:slideTop .5s ease forwards;
    animation-delay: calc(.2s * var(--i));

}
.navbar a:hover{
    color: aqua;
}
.home{
    position: relative;
    width:100%;
    justify-content: space-between;
    height:100vh;
    background: url("https://wallpaperaccess.com/full/5652030.jpg");
     background-size: cover;
     background-position: center;
     display: flex;
     align-items: center;
     padding: 7.0rem 10% 0;

}
.home-content{
    max-width: 60.0rem;
}
.home-content h3{
    font-size: 3.2rem;
    font-weight: 700;
    opacity:0;/*how much it will above*/
    animation: slideBottom 1s ease forwards;
    animation-delay: .7s;
}
.home-content h3 span{
    color:aqua;
}
.home-content h3:nth-of-type(2){
    margin-bottom: 3.0rem;
}

.home-content h1{
    font-size: 5.6rem;
    font-weight:700;
    margin: -.3rem 0;
    opacity:0;/*how much it will above*/
    animation: slideRight 1s ease forwards;
    animation-delay:1s;
}
.home-content p{
    font-size: 2.0rem;
    opacity:0;/*how much it will above*/
    animation: slideLeft 1s ease forwards;
    animation-delay:1s;
}
.home-sci a{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:4.0rem;
    height:4.0rem;
    background: transparent;
    border:.2rem solid #0ef;
    border-radius: 50%;
    font-size: 2.0rem;
    color:#0ef;
    opacity:0;
    animation: slideLeft 1s ease forwards;
    animation-delay:calc(.2s * var(--i));
    
    text-decoration: none;
    margin:3.0rem 1.5rem 3.0rem 0;

}
.home-sci a:hover{
   background-color:#0ef;
    filter:brightness(80%);
    color:#081b29;
    box-shadow: 0 0 2.0rem #0ef;
}

.about{
    display:grid;
 grid-template-columns: repeat(2, 1fr);
 /* align-items: center; */
 gap: 1.5em;
 background-color:#081b29 ;

}
.about-img img{
    padding-top: 40%;
    padding-bottom:20%;
    max-width:270.0rem;
    height: 105.0rem;
    width:70%;
    border-radius:.8rem;
    margin-left: 6.0rem;
}
.about-text h2{
    display: flex;
    text-align: center;
    margin-left: -10.0rem;
    font-size: 6.0rem;
    margin-top: 10%;

}
.about-text h2 span{
    color:#0ef;
    margin-left: 1.0rem;
}
.about-text h4{
    padding-top: 20%;
    padding-bottom: 1.0rem;
    align-items: center;
    font-size: 2.0rem;
    font-weight:600;
    color:#fff;
    line-height: 1.7;
    margin-right:20%;
    margin-left:-15%;
}
.about-text p{
    color: aliceblue;
    font-size:2.0rem;
    line-height:1.4;
    margin-bottom:4rem;
    margin-right: 2.0rem;
    margin-left:-15%;
    /* margin-left:25px; */
}
.about-text h3{
    color: #0ef;
    margin-left: 0rem;
    margin-left:-15%;
    font-size:2.0rem;
}
.about-text ul {
    padding-left: 1.0rem;
    margin-left: 0rem;
    margin-left:-12%;
    font-size:2.0rem;
    margin-bottom: 10%;
    
}

    

/* RESUME SECTION */
.resume .section-title{
    font-size: 4.0rem;
    color:rgb(197, 226, 238);
    padding-top: 5%;
    display:flex;
    justify-content: center;
    



}
.resume .resume-title {
    font-size: 2.6rem;
    font-weight: 600;
    margin-top: 3.0rem;
    margin-bottom: 2.0rem;
    margin-left: 5.0rem;
    color: white;
}

.resume .resume-item {
    padding: 0 0 2.0rem 2.0rem;
    margin: -.2rem 0rem 0rem 1.5rem;
    position: relative;
    border-left:.2remsolid #a2bbdf;
    
    
}

.resume .resume-item h4 {
    line-height: 1.8rem;
    font-size: 1.8rem;
    font-weight: 600;
    text-transform: uppercase;
    font-family: "Poppins", sans-serif;
    color: #0ef;
    margin-bottom: 1.0rem;
    margin-left: 1.5rem;
    margin-top: .5rem;
}

.resume .resume-item h5 {
    font-size: 1.6rem;
    background: black;
    padding: .5rem 1.5rem;
    display: inline-block;
    font-weight: 600;
    margin-bottom: 1.0rem;
}

.resume .resume-item p {
    font-size: 1.8rem;
}


.resume .resume-item ul {
    padding-left: 3.0rem;
}

.resume .resume-item ul li {
    padding-bottom: 1.0rem;
    padding-top: 1.0rem;
    font-size: 1.8rem;
}

.resume .resume-item:last-child {
    padding-bottom: 0;
}

.resume .resume-item::before {
    content: "";
    position: absolute;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 5.0rem;
    left: -.9rem;
    top: 0;
    background: #fff;
    border: .2rem solid #1f5297;
}
.resume .phone{
    display: none;
    color:white;
}
.resume .phn {
    display: none;
    color:antiquewhite;
    
}

@media (max-width: 119.9rem) {
    .resume .phn {
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-weight: bold;
        font-size: 1.6rem;
        
    }
    .resume .phone {
        display: block;
        width: 20.0rem;
        text-align: center;
       
    }
    .resume .container .phn a {
        font-size: 1.8rem;
        text-align: center;
        color:#0ef;
        margin-top:1.0rem;
    }
    .resume .container .phn a:hover{
       color: #051129;
       background-color:white;
       width: 10.0rem;
    }
    .btn:hover {
        color:black;
        background-color: rgb(245, 237, 237);
    }
    
    
}

/* //skills*/
.sub-title{
    font-size: 6.0rem;
    margin-top: -5%;
    /* padding-top: 0%; */
    display: flex;
    justify-content: center;
    padding-top: 15.0rem;
    padding-bottom: .0rem;
    
    

}
.sub-title span{
    color:#0ef;
    margin-left: 1.0rem;
    
}
section{
    /* display: flex;
    flex-wrap: wrap;
    justify-content: center; */
    margin-bottom: 5%;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-evenly; */
    width: 100%;
}

.sub-title span{
    color:#0ef;

    
}
.container1{
      width:60.0rem;
      height:50.0rem;
      padding:6.5rem 9.0rem;
      margin-left: 12.0rem;

}
.heading1{
    font-size: 1.8rem;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 1.0rem;
    text-decoration-thickness :.5rem;
    margin-bottom:4rem;
}
.container2{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    /* padding-bottom: 15.0rem;
    margin-bottom: 100%; */
}
.hr{
    margin-bottom: 10px;
    margin-top: 10px;
}

.bar{
    font-size: 2.5rem;
    flex-basis: 48%;
    text-align: left;
    word-wrap: break-word;
    padding-left: 50px;

}
.Techanical-bars{
    justify-content: left;
    margin:10px;
}
.Techanical-bars .bar{
    margin-top: 4.0rem;
}
.Techanical-bars .bar:first-child{
    margin-top: 0;
}
.Techanical-bars .bar:last-child{
    margin-bottom: 0;
}
.Techanical-bars .bar:info{
    margin-bottom:.5rem;
}
.Techanical-bars .bar .info span{
    font: size 1.7rem;
    font-weight:500;
    animation:showText 0.5s 1s linear forwards;
    opacity:0;

}
.Techanical-bars .bar .progress-line{
    position: relative;
    border-radius:1.0rem;
    width:100%;
    height:.5rem;
    background-color:#0ef;
    animation:animate 1s cubic-bezier(1, 0, 0, 5) forwards;
    transform:scaleX(0);
    transform-origin:left;
}
@keyframes animate{
   100%{
        transform: scaleX(1);
    
    }
    }
    .Techanical-bars.bar.progress-line span{
        height: 100%;
        background-color:#0ef;
        position:absolute;
        border-radius:1.0rem;
        animation: animate 1s 1s cubic-bezier(1,0,0,5,1) forwards;
      
        transform: scaleX(0);
        transform-origin: left;

    }
    .progress-line.HTML span{
        width: 80%;
      
    }
    .progress-line.CSS span{
        width: 80%;
    }
    .progress-line.JavaScript span{
        width: 80%;
    }
    .progress-line.Java span{
        width: 40%;
    }
    .progress-line.Dsa span{
        width: 100%;
    }
    .progress-line.Bootstrap span{
        width: 80%;
    }
    .progress-line.Reactjs span{
        width: 70%;
    }
    .progress-line.Nodejs span{
        width: 60%;
    }
    .progress-line span::after{
        position:absolute;
        padding: .1rem .8rem;
        background-color: black;
        color:white;
        font-size:1.2rem;
        border-radius:.3rem;
        top:-2.8rem;
        right: -2.0rem;
        animation: showText 0.5s 1.5s linear forwards;
        opacity: 0;
    }
    .progress-line.HTML span::after{
        content: "80%";
    }
    .progress-line.CSS span::after{
        content: "80%";
    }
    .progress-line.JavaScript span::after{
        content: "80%";
    }
    .progress-line.Java span::after{
        content: "70%";
    }
    .progress-line.Dsa span::after{
        content: "20%";
    }
    .progress-line.Bootstrap span::after{
        content: "80%";
    }
    .progress-line.Reactjs span::after{
        content: "70%";
    }
    .progress-line.Nodejs span::after{
        content: "60%";
    }
    .progress-line span::before{
        content:"";
        position:absolute;
        width:0;
        height:0;
        border:7px solid transparent;
        border-bottom-width: .0rem;
        border-right-width: 0rem;
        border-top-color:orange;
        top:-1.0rem;
        right:0;
        animation: showText 0.5s 1.5s linear forwards;
        opacity :0;
        }
        @keyframes showText{
            100%{
                opacity:1;
            }
        }
        .radial-bars{
            width:100%;
            display:flex;
            flex-wrap:wrap;
            justify-content: space-evenly;
            align-items: flex-start;


        }
        .radial-bars .radial-bar{
            width:50%;
            height:17.0rem;
            margin-bottom:1.0rem;
            position:relative;
         }
         .radial-bars .radial-bar svg{
            position: absolute;
            top: 50%;
            left:50%;
            transform: translate(-50%, -50%) rotate(-90deg);
            width:12.0rem;
            height:16.0rem;
         }
         .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 forward;
         }
         @keyframes animate-bar{
            100%{
                stroke-dashoffset:-1;
            }
         }
         .path{
            stroke-width:10;
            stroke:#0ef;
            fill:transparent;
            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: 175;
    }
}
@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: 1.7rem;
    font-weight:500;
    animation: showText 0.5s 1s linear forwards;
    opacity:0;
    
}
.radial-bar .text{
    width:100%;
    position:absolute;
    text-align: center;
    left:30%;
    bottom: -.5rem;
    transform:translate(-5.0rem);
    font-size: 1.7rem;
    font-weight:500;
    animation: showText 0.5s 1s linear forwards;
    opacity:0;
    
}
/* project section */
.main-text{
    padding-top:0rem;
    margin-top: 20.0rem;

}
.main-text h2{
    font-size:5.0rem;
    line-height:1;
    text-align:center;
    margin-bottom: 7.0rem;
    margin-top: -5%;
}
.main-text h2 span{
    color:#0ef
}
.portfolio-content{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(359px, auto));
    margin-left: 2.0rem;
    margin-right: 2.0rem;


}
.row{
    position:relative;
    overflow:hidden;
    border-radius:.8rem;
    cursor:pointer;

}
.row img{
width:100%;
border-radius: .8rem;
display:block;
transition: transform 0.5s;

}
.layer{
width:100;
height:0;
background:linear-gradient(rgba(0,0,0,0.1),#0ef) ;
position:absolute;
border-radius: .8rem;
left:0;
bottom:0;
overflow:hidden;
display:flex;
flex-direction: left;
align-items:center;
justify-content: center;
text-align:center;
padding:0 4.0rem;
transition:  height 0.5s;
box-sizing: border-box;
}

.layer h5{
    color:black;
    font-size: 2.0rem;
    font-weight:600 ;
    margin-bottom:1.5rem;
}
.layer p{
    color: white;
     
    font-size: 1rem;
    overflow: hidden;
    line-height:1.8;
   
} 

.layer i{
    color:red;
    background-color:black;
    margin-top:2.0rem;
    font-size: 2.0rem;
    width:6.0rem;
    height:6.0rem;
    border-radius: 50%;
    display:flex;
    justify-content: center;
    align-items: center;

}
.row:hover img{
    transform:scale(1.1);
}
.row:hover .layer{
    height:100%;
}

/* contact section */

.contact{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    align-items:center;
    gap:4.8rem;
    padding-left: 3.0rem;
    margin-top:13.0rem;
}
.contact-text h2{
    /* display: flex; */
    justify-content: center;
    text-align:center;
    font-size:5.0rem;
    line-height:1;
    
    margin-top: 1.0rem;
    margin-bottom: 2.0rem;
}
.contact-text h2 span{
    color:#0ef;
}
.contact-text p{
    color:rgb(177,177,177);
    font-size:2.0rem;
    line-height: 3.0rem;
    margin-bottom: 3.2rem;
}
contact-list{
    margin-bottom:4.8rem;
}
.contact-text li{
    margin-bottom: 1.0rem;
    display:block;
    font-size: 1.8rem;
}

.contact-text i{
    display:inline-block;
    color:#0ef;
    font-size: 2.0rem;
    font-weight:600;
    transition:all .40s ease;
    margin-right: 1.0rem;

}
.contact-text li a:hover{
    transform:scale(1.01) translateY(-.5rem);
    color:#0ef;

}
.contact-icons i{
    display:inline-flex;
    justify-content: center;
    align-items: center;
    width:4.0rem;
    height:4.0rem;
    background: transparent;
    border: 0.2rem solid #0ef;
    border-radius: 50%;
    font-size: 2.0rem;
    color:#0ef;
    text-decoration: none;
    margin: 3.0rem 1.5rem 3.0rem 0;
    transition: .5s ease;
     /* opacity: 0; */
    animation: slideleft 1s ease forwards;
    animation-delay: calc(.2s*var(--i)); 
} 
.contact-icons i:hover{
    background:#0ef;
    color:black;
    box-shadow:0 0 0.2rem #0ef;
    filter: brightness(80%);
}
.contact-form form{
    position: relative;

}
.contact-form form input, form textarea{
    border:none;
    outline:none;
    width:90%;
    padding:1.8rem;
    background: #555557;
    color:black;
    font-size: 1.6rem;
    font-weight:600;
    /* margin-top: 0.5rem; */
    margin-bottom: 0.8rem;
    border-radius: 0.8rem;
}
.contact-form textarea{
    resize:none;
    height:22rem;
}
.contact-form form .send{
    display:inline-block;
    padding:1.4rem 6.0rem;
    background:#0ef;
    border-radius: 4rem;
    font-size:1.8rem;
    color:#081b29;
    letter-spacing: .1rem;
    text-decoration: none;
    font-weight:600;
    opacity:0;
    animation: slideTop 1s ease forwards;
    animation-delay:1.5s;
    box-shadow: 0  0 5px #0ef,
    0 0 5px #0ef

}
.contact-form form .send:hover{
    box-shadow: 0 0 .5rem cyan,
    0 0 .5rem cyan, 0 0 .5rem cyan,
    0 0 1.0rem cyan, 0 0 2.0rem cyan;
    
    


}
.last-text p{
    width:100%;
    padding:2.5rem 0;
   text-align: center;
   background-color: rgb(7,85,91);
   font-weight: 300;
   margin-top:7.0rem;
   font-size: 1.5rem;
}
.top{
    position: fixed;
    bottom: 3.36rem;
    right:3.36rem;

}
.top i{
    color:black;
    background: #0ef;
    font-size:2.0rem;
    padding:1.0rem;
    border-radius: 0.8rem;
}
@keyframes slideRight{
    0%{
        transform: translatex(-10.0rem);
        opacity:0;
    }
    100%{
        transform: translatex(.0rem);
        opacity:1;
    }
    
}
@keyframes slideLeft{
    0%{
        transform: translatex(10.0rem);
        opacity:0;
    }
    100%{
        transform: translatex(0rem);
        opacity:1;
    }
    
}


@keyframes slideTop{
    0%{
        transform: translatey(-10rem);
        opacity:0;
    }
    100%{
        transform: translatey(0rem);
        opacity:1;
    }
    
}
@keyframes slideBottom{
    0%{
        transform: translatey(10rem);
        opacity:0;
    }
    100%{
        transform: translatey(0rem);
        opacity:1;
    }
    
}
@media (max-width: 991px){
    html{
        font-size: 48%;
    }
}
 @media(max-width:767px){
    html{
        font-size:35%;
    }
 }  
@media {max-width:
    
}