html{
    scroll-behavior: smooth;
}

*{
    margin: 0;
    padding: 0;
    outline: 0;
    list-style: none;
    text-decoration: none;
    border: 0;
    box-sizing: border-box;

}

:root{
    --color-primary: #156bd4;
    --color-vibrant:rgba(21,107,212,0.5);
    --color-gray-0: #fff;
    --color-gray-50: #edecec;
    --color-gray-100: #e6e5e5;
    --color-gray-200: #c0c0c0;
    --color-gray-300: #a1a1a1;
    --color-gray-400: #919191;
    --color-gray-500: #7b7b7b;
    --color-gray-600: #545454;
    --color-gray-700: #313131;
    --color-gray-800: #1f1f1f;
    --color-gray-900: #0e0e0e;

    --container-w-lg:74%;
    --container-w-sm:94%;
    
}
body{
    font-family: "montserrat";
    line-height:1.6;
    
    color: var(--color-gray-800);
     background: var(--color-gray-50); 
    font-size: 0.9rem;
    

}

.container{
  width: var(--container-w-lg);
  margin-inline: auto;

}

img{
    width:100%;
    display: block;
    object-fit: cover;
    margin-inline:auto ;
}


.logo-relative{
    position: relative;
}

span .dasac-logo{
    width: 3rem;
    height: 3rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: absolute;
    top: 1rem;
    right: 3rem;
}


.nav_therm_btn{
    background: transparent;
  
    font-size: 1.5rem;
    cursor: pointer;
            color: #ffffff}


.nav_bar{
    background-color: var(--color-primary);
    display: flex;
    justify-content: space-between;
    padding: 2rem;


}

h1, h2, h3 h4, h5, h6{
    color: var(--color-gray-900);
    line-height:1.1;
    font-weight: 900;
}

.btn{
    background: var(--color-gray-0); border:2px solid var(--color-gray-100); color: var(--color-gray-900);
    font-weight: 500; padding: 0.7rem 1.6rem; transition: all 400ms ease; cursor: pointer;
    font-size: 1.2rem;


}

.btn.primary{
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    padding: 0.7rem 1.6rem; 

}

.btn:hover{
    border-color: transparent;
    background: var(--color-vibrant);

}


.container_resume{
    display: grid;
    grid-template-columns: 14rem auto;
    gap: 7rem;
    width: 70%;
}

.container_resume .skills ul{
grid-template-columns: repeat(3,1fr);
width: 80%;
}

.resume_left p{
    margin: 0.5rem 0 1rem;

}

.resume_left menu {
    display: flex;
    flex-direction: column;
    gap: 1rem;

}

.resume_left menu button{
    border-color: var(--color-gray-0);

}

/* ************************************************** right section   ***************************************************** */

.resume_right h4 {
    margin-bottom: 0.5rem;
    color: var(--color-primary);
}

.resume_right > p{
    margin-bottom: 1.5rem;
}

.resume_right ul {
    display: grid;
    grid-template-columns: 1fr ;
    gap: 1rem;
}

.resume_right ul li {
    background: var(--color-gray-0);
    padding: 1.5rem;
    border: 0.4rem;
    border: solid 0.4rem var(--color-gray-0);
    cursor: default;
}

.resume_right ul li:hover{
    background: transparent;

}

.resume_right li h6 {
    color: var(--color-gray-500);
}

.resume_right li h5 {
    color: var(--color-primary);
    margin: 0.8rem 0;
}



/* eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee  education  eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee */

.resume_right.education_btn ul {
    grid-template-columns: 1fr;
   
}

.resume_right.education_btn li h5 {
    margin-top: 0;

}

/* eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee  skills eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee */


.resume_right.skills ul{
    
    


    
}
.resume_right.skills ul li{
    padding:1rem;
    
}

.skill-c=ontainer{
    width: 50vw;
    height: fit-content;
    background: red;
    margin-inline: auto;
}
/* eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee  about  eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee */

.resume_right.about ul {
    gap:0;
}

.resume_right.about li{
    background: transparent;
    display: flex;
    align-items: center;
    padding: 0;
    gap: 0.3rem;
    border: 0;
}

.resume_right.about li h5{
    color: var(--color-gray-500);

}

.resume_right.about li h6 {
    color: var(--color-gray-900);
}


.resume_right .ul-about{
    display: grid;
    grid-template-columns: 1fr 1fr;
}



@media(max-width:1024px){
    
    .resume_right.skills ul {
        grid-template-columns: repeat(3,1fr);
        gap: 1.2rem;
    }

}






@media (max-width:600px){
    body{
        font-size: 1rem;
    }
    .container{
        width: var(--container-w-sm);

    }
    section > h1 section > p {
        width: var(--container-w-sm);
    }

    nav{
        height: 4rem;
    }

    .header_container {
        width: 90%;
    }

    .header_container p {
        margin-top: o.4rem;
    }
    .header_socials{
        display: none;
    }

    .container_resume{
        grid-template-columns: 1fr;
        gap: 3rem;
        

    }

    .resume_right menu{
        gap:0.rem;
    }

    .resume_right.skills ul {
        grid-template-columns: repeat(3,1fr);
        gap: 1.2rem;
    }

    
.resume_right .ul-about{
    display: grid;
    grid-template-columns: 1fr;
    
}

}