*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins',sans-serif;
    
}
#home-page{
    height: 600px;
    background: linear-gradient( #262525);
    display: flex;
    justify-content: center;

    .protfolio-container{
    display: flex;
   
   
    }
    .navlist{
    display:flex;
    gap:3.5rem;
    height: 15vh;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    position: fixed;
    position: relative;
    top: -2%;
    


    }
    .circle{
        display: flex;
        justify-content: center;
        border-radius: 50%;
       width: 40%;
       height: 400px;
        background-image:url("image/nag.jpg");
        background-size: 100%;
        background-repeat: no-repeat;
        border: 1rem solid white;
        position: relative;
        top: 20%;
       
        left: 15%;
       
    }
   
    .navlist li{
    list-style: none;
    }
    .navlist li a{
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1rem;
    color: #fff;
    position: relative;
    }

    
    .content{
    margin-left: -110%;
    position: relative;
    top: 20%;
    }
    
    .content .intro span{
    color: #5db9ee;
    font-size: 2rem;
    }    
    .content .intro{
    color: #bbb;
    font-size: 1rem;
    }    
    .content h1{
    font-size: 4rem;
    color: #5db9ee;
    }
    .content .detail{
    font-size: 1.1rem;
    color: #fff;
    max-width: 38rem;
    margin: 1.1rem 0 3rem 0;
    line-height: 1.8rem;
    }
    .btn-container button{
    border: .1rem solid#5db9ee;
    font-size: 1.1rem;
    padding: .8rem 1.5rem;
    border-radius: .5rem;
    cursor: pointer;
    transition: .5s ease;
    }
    button:nth-child(1){
    background:#5db9ee;
    color: #262525;
    }
    button:nth-child(2){
    background: transparent;
    color: #5db9ee;
    margin-left: 2rem;
    }
    button:nth-child(1):hover{
    background: transparent;
    color: #5db9ee;

    }
    button:nth-child(2):hover{
    background: #5db9ee; ;
    color: #262525

    }

   
    
    
    .navlist li a::after{
    content: "";
    position: absolute;
    background: #fff;
    width: 100%;
    height: .1rem;
    left: 0;
    bottom: -5px;
    transform: scaleX(0);
    transition: transform .5s;

    }
    .navlist li a:hover::after{
    transform: scaleX(1);
    }
}
#about-page{
   
    display: flex;
    justify-content: center;
    .left-container{
       width: 30%;
       height: 300px;
        background-image:url("image/WhatsApp Image5 2026-01-22 at 12.08.23 PM.jpeg");
        background-size: 100%;
        background-repeat: no-repeat;
        border: 1rem solid white;
       

    }
    .right-container{
       width: 70%;
        background: linear-gradient( #5db9ee,#3877ff);
       height: 300px;
    }
    .right-container pre{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.2rem;
        position: relative;
        top: 20%;
        left: 0%;
       
    }
    .right-container h1{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        top: 10%;
        left: 10%;
        font-size: 2.5rem;
    }
    .right-container h3{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        top: 2%;
        left: -3%;
        font-size: 1.50rem;
    }
    
}
#skills-page{
   
    background: linear-gradient( green);
    display: flex;
    justify-content: center;
    
    .nage{
        gap: 3.9rem;
       display: flex;
       justify-content: center;
       width: 100%;
       height:300px; 
       position: relative;
      
        background-size: 100%;
        background-repeat: no-repeat;
       
       
    }
    .nage li{    
        display: flex;
        gap: 0.7rem;
        align-items: center;
        justify-content: center;
        position: relative;
        font-size: 1.5rem;
        left: -10%;
    
    }
}
#skills-page  h1{
        display: flex;
        
        position: relative;
        left: 40%;
        font-size: 3rem;
        
    
}
#contact-page{
    
    background: linear-gradient(white);
    .nage{
       gap: 3.9rem;
       display: flex;
       justify-content: center;
       width: 100%;
       height:400px; 
       position: relative;
      top: -30px;
        background-size: 100%;
        background-repeat: no-repeat;
        
    }
}


#contact-page h1{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 40px;
    left: -15%;
    font-size: 2.5rem;
}