*{
    margin: 0px;
    border-bottom: none;
}

body{
    background-color: rgb(20, 20, 46);
    color: rgb(255, 255, 255);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.navbar{
    position: fixed;
    top: 0px;
    width: 100%;
    display:flex;
    padding-block: 1rem;
    justify-content:space-evenly;
    align-items: center;
    background-color: rgba(225, 207, 207, 0.229);
    backdrop-filter: blur(10px);
    z-index: 1;   
}

.nav-logo{
    display: flex;
    letter-spacing: 0.1rem;
    cursor: pointer;
    column-gap: 20px;
    align-items: center;

}
.nav-logo img{
    width: 50px;
    height: 50px;
    border-radius: 10rem;

}

.Rgt-navbar{
    display: flex;
    flex-wrap:wrap;
    column-gap: 30px;
    
}

.Rgt-navbar a{
    text-decoration: none;
    color: white;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    letter-spacing: 1px;
    font-weight: 500;
}

.Rgt-navbar a:hover{
    color:rgb(37, 133, 133);
    text-decoration:overline;
    transition: 1s;

}

.my-info{
    text-align: center;
    width: 50rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-top: 8rem;

}

.my-info>img{
    width: 15rem;
    height: 15rem;
    border-radius: 10rem;
    border: 3px solid white;
    box-shadow:0px 0px 20px 0px white;
}

.my-buttons{
    display: flex;
    gap: 4rem;
    text-align: center;
    margin-top: 2rem;

}
.my-buttons a{
    text-decoration: none;
    color: white;
    

}

.my-buttons img{
    width: 35px;
    height: 35px;
}


.contact{
    
    background-color:rgb(51, 47, 47);
    padding: 10px;
    width: 8rem;
    border-radius: 5rem;
    text-align: center;
    box-shadow:0px 0px 20px 0px rgb(109, 105, 105); 
    border: 2px solid white;
    
    a{
        display: flex;
        align-items: center;
        justify-content: center;

        img{
            width: 25px;
            height: 25px;
            margin-left: 10px;
        }
    }
}

.contact:hover{
    transform: scale(1.2);
    transition: 2s;
 }



.resume{
    background-color:rgb(51, 47, 47);
    padding: 10px;
    width: 8rem;
    border-radius: 5rem;
    text-align: center;
    box-shadow:0px 0px 20px 0px rgb(109, 105, 105); 
    border: 2px solid white;

     a{
        display: flex;
        align-items: center;
        font-weight: 600;
        justify-content: center;
        
        img{
            width: 20px;
            height: 20px;
            margin-left: 10px;
        }
    }

}


.resume:hover{
    transform: scale(1.2);
    transition: 2s;
 }



#about{
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin-top: 3rem ;
    text-align: center;
    justify-items: center;

    h2{
        font-family:Verdana, Geneva, Tahoma, sans-serif;
        padding-block: 2rem;
    }

    hr{
        margin: auto;
        width: 40rem;
        filter: brightness(0.5);
    }
}



#about-me{
    display: flex;
    padding-inline: 10rem;
    padding-block: 5rem;
}



.about-img img{
    width: 15rem;
    height: 20rem;
    border-radius: 5rem;
    border:none;
    }

.about-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 80rem;
    p{
        margin-top: 2rem;
        padding-inline: 5rem;
    }
}


#Qualification{
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin-top: 3rem ;
    text-align: center;
    justify-items: center;
    h2{
        font-family:Verdana, Geneva, Tahoma, sans-serif;
        padding-block: 2rem;
    }

    hr{
        margin: auto;
        width: 40rem;
        filter: brightness(0.5);
    }
}


.line{
    border: 3px solid white;
    width: 1px;
    height: 40rem;
    border-radius: 10px;
}



.education{
    display: grid;
    grid-template-columns: auto auto;
    gap:2rem;
    margin-top: 2rem;
    margin-inline: 5rem;
}

.edu1{
    width: 40vw;
    height:25vh;
    border-radius: 10px;
    border: 1px solid rgb(255, 255, 255);
    text-align: center;
    display: flex;
    flex-direction:column;
    justify-content: center;
    background-color: rgb(3, 3, 84);
    color: rgb(255, 255, 255);
    line-height: 2rem;
}


.edu1:hover{
    transform: scale(1.1);
    transition: 2s;
}

.edu2{
    width: 40vw;
    height:25vh;
    border-radius: 10px;
    border: 1px solid rgb(255, 255, 255);
    text-align: center;
    display: flex;
    flex-direction:column;
    justify-content: center;
    background-color: rgb(3, 3, 84);
    color: rgb(255, 255, 255);
    line-height: 2rem;
}

.edu2:hover{
    transform: scale(1.1);
    transition: 2s;
}

.edu3{
    width: 40vw;
    height:25vh;
    border-radius: 10px;
    border: 1px solid rgb(255, 255, 255);
    text-align: center;
    display: flex;
    flex-direction:column;
    justify-content: center;
    background-color: rgb(3, 3, 84);
    color: rgb(255, 255, 255);
    line-height: 2rem;
}

.edu3:hover{
    transform: scale(1.1);
    transition: 2s;
}

#Project{
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin-top: 3rem ;
    text-align: center;
    justify-items: center;
    h2{
        font-family:Verdana, Geneva, Tahoma, sans-serif;
        padding-block: 2rem;
    }

    hr{
        margin: auto;
        width: 40rem;
        filter: brightness(0.5);
    }
}


#Certificaions{
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin-top: 3rem ;
    text-align: center;
    justify-items: center;
    h2{
        font-family:Verdana, Geneva, Tahoma, sans-serif;
        padding-block: 2rem;
    }

    hr{
        margin: auto;
        width: 40rem;
        filter: brightness(0.5);
    }
}



#Contact{
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin-top: 3rem ;
    text-align: center;
    justify-items: center;
    h2{
        font-family:Verdana, Geneva, Tahoma, sans-serif;
        padding-block: 2rem;
    }


    hr{
        margin: auto;
        width: 40rem;
        filter: brightness(0.5);
    }
}


.projects{
    display: grid;
    grid-template-columns: auto auto auto;
    padding-block: 5rem;
    justify-content:space-evenly;
}
/*1*/
.prg1{
    border: 2px solid white;
    background-color: rgb(3, 3, 54);
    border-radius: 10px;
    width: 20vw;
    box-shadow:0px 0px 16px 0px white;
    transform: scale(0.8);

}

.prg1-img img{
    width: 20vw;
    height: 30vh;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.prg1-info{
    padding-inline: 20px;
}

.prg1-lang{
    display: flex;
    justify-content: space-evenly;
    gap: 10px;
    margin-block: 15px;
}

.prg1:hover{
    transform: scale(0.9);
    transition: 2s;
}

/*2*/

.prg2{
    border: 2px solid white;
    background-color: rgb(3, 3, 54);
    border-radius: 10px;
    width: 20vw;
    box-shadow:0px 0px 16px 0px white;
    transform: scale(0.8);

}

.prg2-img img{
    width: 20vw;
    height: 30vh;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.prg2-info{
    padding-inline: 20px;
}

.prg2-lang{
    display: flex;
    justify-content: space-evenly;
    gap: 10px;
    margin-block: 15px;
}

.prg2:hover{
    transform: scale(0.9);
    transition: 2s;
}

/*3*/

.prg3{
    border: 2px solid white;
    background-color: rgb(3, 3, 54);
    border-radius: 10px;
    width: 20vw;
    box-shadow:0px 0px 16px 0px white;
    transform: scale(0.8);

}

.prg3-img img{
    width: 20vw;
    height: 30vh;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.prg3-info{
    padding-inline: 20px;
}

.prg3-lang{
    display: flex;
    justify-content: space-evenly;
    gap: 10px;
    margin-block: 15px;
}


.prg3:hover{
    transform: scale(0.9);
    transition: 2s;
}
/*end*/


#lang1{
    border: 1px solid white;
    border-radius: 5rem;
    width: 5rem;
    padding: 3px;
    font-size: 13px;
}

.git1{
    border: 2px solid white;
    border-radius: 5rem;
    width: 10rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    margin-top: 2rem;
    font-weight: 500;
}

.git1 a{
    text-decoration: none;
    color: white;
}

#Contact>p{
    padding-block: 2rem;
    font-weight: 500;
    font-size: 18px;
    
    
}
.contact-box{
    display: flex;
    text-align: start;
    width: 20rem;
    margin-inline: 8rem;
    padding-block: 2rem;
    
}

.contact-info{
    width: 20rem;
    p{filter: brightness(0.7);
    }

}

.connect-social{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-block: 2rem;
    
}

.social-icons{
    display: flex;
    gap: 1.5rem;
    a{
        transform: scale(1.3);
        color: rgb(24, 114, 218);

    }
}

.social-icons a:hover{
    color: blanchedalmond;
    transform: scale(1.5);
    transition: 0.5s;
}

.contact-pg{
    h3,p{
        font-size: 15px;
    }
}

.contact-info>p{
    padding-top: 1rem;
    
}

.contact-form{
    border: 1px solid rgba(255, 255, 255, 0.301);
    width: 60rem;
    padding: 30px;
    margin-inline: 2rem;
    border-radius: 10px;
    label{
        padding-bottom: 0.5rem;
    }

}

.form-info1{
    display: flex;
    gap: 2rem;
    padding-bottom: 2rem;
    
}

.form-name{
    display: flex;
    flex-direction: column;
    text-align: start;
    input{
        border-radius: 10px;
        color: white;
        height: 5vh;
        width: 23vw;
        font-size: 15px;
        padding-inline: 10px;
        background: transparent;
        border: 0.5px solid rgba(255, 255, 255, 0.301);
    }
}

.form-email{
    display: flex;
    flex-direction: column;
    text-align: start;
    input{
        border-radius: 10px;
        color: white;
        height: 5vh;
        width: 23vw;
        font-size: 15px;
        padding-inline: 10px;
        background: transparent;
        border: 0.5px solid rgba(255, 255, 255, 0.301);
    }
}

.form-info2{
    display: flex;
    flex-direction: column;
    text-align: start;
    padding-bottom: 2rem;
    input{
        border-radius: 10px;
        color: white;
        height: 5vh;
        width: 50vw;
        font-size: 15px;
        padding-inline: 10px;
        background: transparent;
        border: 0.5px solid rgba(255, 255, 255, 0.301);
    }
}


.form-info3{
    display: flex;
    flex-direction: column;
    text-align: start;
    input{
        border-radius: 10px;
        color: white;
        height:15vh;
        width: 50vw;
        font-size: 15px;
        padding-inline: 10px;
        background: transparent;
        border: 0.5px solid rgba(255, 255, 255, 0.301);
    }
}


.form-btn button{
    width: 51.5vw;
    height: 6vh;
    background-color: rgb(82, 104, 243);
    margin-top: 2rem;
    font-size: 15px;
    border-radius: 10px;
    border: none;
}

.form-btn button:hover{
    background-color: blue;
    color: white;
}



.footer{
 text-align: center;
    hr{
        width: 85rem;
        margin: auto;
        filter: brightness(0.8);
    }

    p{
        filter: brightness(0.8);
        padding:1rem;
    }
}


@media screen and (max-width:480px){

    .navbar{
    display:grid;
    grid-template-columns: auto;
    margin: 0;
    width: 100%;
    row-gap: 1rem;
    line-height: 2.5rem;
    justify-items: center;
 
}

    .my-info{
        width: 20rem;
        margin-top: 13rem;
    }

    .my-info>img{
        width: 10rem;
        height: 10rem;
        
    }

    .Rgt-navbar{
        justify-content: center;
    }
   
    .my-buttons{
        transform: scale(1);
        gap:2rem;
    }

    #about{
        hr{
            width: 20rem;
        }
    }


    #about-me{
    display: flex;
    flex-direction: column;
    padding-inline:1rem;
    justify-content: center;
    align-items: center;
    }

    .about-img{
    width: 15rem;   
}


    .about-text{
        width: 20rem;

        p{
            padding-inline: 0rem;
        }
    }

    .footer{
        hr{
            width: 20rem;
        }
    }

    #Qualification{
        display: flex;
        justify-content: center;
        align-items: center;
        hr{
            width: 20rem;
        }
    }

    .education{
        display: flex;
        flex-direction: column;
    }

    .edu0{
        display:none;
    }

    .edu1{
        width: 20rem;
        height:15rem;
    }

    .edu2{
        width: 20rem;
        height:15rem;
    }

    .edu3{
        width: 20rem;
        height:15rem;
    }

  

    #Project{
        hr{
            width: 20rem;
        }
    }

    .projects{
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        transform: scale(1.1);
    }

    .prg1{
        width: 20rem;
    }
    .prg2{
        width: 20rem;
    }
    .prg3{
        width: 20rem;
    }

    .prg1-img img{
        width: 20rem;
    }

    .prg2-img img{
        width: 20rem;
    }

    .prg3-img img{
        width: 20rem;
    }

    #Contact{
        hr{
            width: 20rem;
        }
    }

    .contact-box{
        display: flex;
        flex-direction: column;
        margin-inline: 0.4rem;
    }

    .contact-form{
    width: 17rem;
    margin-inline: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
   
    }

    .form-info1{
         display: flex;
        flex-direction: column;
    }

    .form-info1 input{
        width:15rem
    }

    .form-info2 input{
        width:15rem
    }

    .form-info3 input{
        width: 15rem;
        height: 10rem;
    } 

    .form-btn {
        text-align: center;
    }

    
}