@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");
*{
    font-family: "Poppins",sans-serif;
    margin: 0;
    padding: 0;
}
html{
    background-color: rgb(190, 221, 232);
    scroll-behavior: smooth;
}
body{
    width: 80%;
   
    margin: 0 auto;
}
a{
    text-decoration: none;
    color: black;
}
p{
    color: #555555;
}
a,.btn{
    transition: all 0.3s ease;
}
.icon{
    height: 2rem;
}
.title{
    font-size: 3rem;
    font-weight: 600;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 1rem;
}





/*--------------- Navbar-------------- */
#nav-bar{
    display: flex;
    height: 17vh;
    justify-content: space-between;
    align-items: center;
}
.nav-links{
    display: flex;
    list-style: none;
    gap:2rem;
    font-size: 1.5rem;
}
.nav-logo{
    font-size: 2rem;
    font-weight: 600;
}
nav a:hover{
    color: white;
    text-decoration: underline;
    text-underline-offset: 1rem;
}
.nav-logo:hover{
    cursor: pointer;
}
/* -----------Profile ------- */
#profile{
    display: flex;
    height: 100%;
    background-color: white;
    border-radius: 2rem;
    padding: 9rem 0;
    justify-content: space-around;
    align-items: center;
    margin: 2rem 0;
}
.profile-text-1{
    font-size: 1.5rem;
}
.profile-title{
    font-size: 3.3rem;
}
.profile-text-2{
    font-size: 2rem;
}
.profile-btn-socials{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:1rem;
}
.btn-container{
    display: flex;
    gap:1rem;
}
.btn{
    padding: 1rem;
    border-radius: 2rem;
    width: 8rem;
}
.btn-1{
    background-color: white;
}
.btn-2{
    background-color: black;
    color: white;
}
.btn:hover{
    background-color: lightblue;
}
.socials-container{
    display: flex;
    gap:1rem;
}

/* ---------About Me-------------- */
#about{
    display: flex;
    flex-direction: column;
    gap:2rem;
    height: 100%;
    margin: 5rem 0;
}
.about-containers{
    display: flex;
    gap:5rem;
}
.about-container{
    background-color: white;
    border-radius: 2rem;
    padding: 3rem 0;
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.about-text{
    text-align: center;
}

/* ------Skills-------- */
#skills{
    display: flex;
    flex-direction: column;
    gap:2rem;
    height: 100%;
}
.skills-containers{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.skills-container{
    background-color: white;
    padding: 2rem 5rem;
    border-radius: 2rem;
    width: 30%;

    display: flex;
    flex-direction: column;
    gap:1rem;
}
.skills-sub-title{
    color:#6c6c6c
}
.box{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap:1rem;
}
/* ------projects-----*/
#projects{
    display:flex;
    flex-direction:column;
    gap:2rem;
    margin: 5rem 0;
    height: 100%;
}

#projects .skills-container{
    flex-wrap: wrap;
    gap: 3rem;
}
/*-----Contact---*/
#Contact{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.Contact-container{
    
    border: 0.1rem solid #555555;
    border-radius: 2rem;
    height: 5rem;
    padding: 0.5rem ;
 display: flex;
 justify-content: space-around;
 gap:1rem
}
.contact-container{
display: flex;
align-items: center;
gap:1rem;
}
/* --------Footer--------- */
#footer{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 5rem;
margin-bottom: 3rem;
gap:2rem;
}