*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration:none;    
}
html,body{
    min-width:100vw;
    overflow-x: hidden;
}
body{
    font-family:"Poppins", sans-serif ;
    scroll-behavior: smooth;
}
:root{
    --violet:#754ef9;
    --gray:#808080;
}
.data-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    opacity:0;
    background-color:hsla(0, 0%, 0%, 0.849);
    pointer-events: none;
    z-index:1;
}
.data-overlay.active{
    pointer-events:all;
    opacity:1;
}
a{
    cursor: pointer;
    color: black;
}
td .fa-angles-down{
    display:none;
}
.desktop-nav{
    display: flex;
    align-items: center;
    justify-content: space-around;
    height:15vh;
    font-size:22px;
}
.nav-menu{
display: flex;
justify-content: center;
align-items: center;
gap:50px;
}
.nav-title li{
    color:black;
    font-weight: 600;
    font-size:25px;
}
.nav-menu-list{
margin-bottom:5px;
}
.desktop-nav .fa-solid{
    display: none;
}

.profile-image img{
    width:375px;
    height:375px;
    border-radius: 50%;
    border:1px solid black;
}
.nav-menu a{
    position: relative;
}
.nav-menu-list::after{
    content:" ";
    position:absolute;
    background-color:var(--gray);
    bottom:0;
    left:0;
    width:0;
    height:3px;  
    transition:all 0.3s ease-in;  
}
.nav-menu-list:hover::after{
    width:100%;
}
.nav-menu-list:hover{
    transition: all 0.5s ease-in;
    color:var(--gray);
}
.animate-fadeIn{
    opacity:0;
    transform:translateX(-100vw);
}
.animate-show-fadeIn, .animate-show-left-fadeIn{
    animation: fadeImage 3s ease forwards;
}
@keyframes fadeImage {
    to{  
        opacity:1;
        transform:translateX(0);
    }
}
.profile {
    width:100%;
    min-height:85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:50px;
}
.profile-content{
    margin-left:20px;
}
.profile-content .intro , .role{
    color:var(--gray);
    font-size:16px;
    font-weight:600;
}
.animate-fadeDown{
    opacity:0;
    transform: translateY(-3rem);
}
.animate-show-fadeDown{
    animation: fadeDown 3s ease forwards ;
}
@keyframes fadeDown {
    to{
        transform: translateY(0);
        opacity:1;
    }
}
.profile-content .intro{
    text-align: center;
}
.profile-content .name{
    font-size:48px;
    text-align: center;
}
.profile-content .role{
    font-size:27px;
    margin-bottom: 12px;
   
}
.role1{
    position: relative;
    width: max-content;
    padding-right:15px;
}
.role1::before,.role1::after{
    content:"";
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}
.role1::before{
    background-color:white;
    animation:bg-color 4s steps(20) infinite ; 
}
@keyframes bg-color {
    to{
        left:100%;
    }
}
.role1::after{
    width:3px;
    background-color:var(--gray);
    animation:bg-color 4s steps(20) infinite, blink 500ms steps(20) infinite;
}
@keyframes blink {
    to{
        background: transparent;
    }
}
.animate-fadeUp{
    opacity:0;
    transform: translateY(3rem);
}
.animate-show-fadeUp{
    animation:fadeUp 3s ease forwards;
}
@keyframes fadeUp {
    to{
        opacity:1;
        transform: translateY(0);
    }
}
.profile-button-container button{
    width:42%;
     padding:15px 20px;
     margin:10px;
     background-color:unset;
     border:1px solid var(--gray);
     border-radius:25px;
     cursor: pointer;
     font-size:16px;
}
.profile-button-container .cv:hover{
    transition: all 0.8s ease;
    background-color:var(--violet) ;
    color:white;
}
.profile-button-container .contact{
    color:white;
    background-color:gray;
}
.profile-icon{
    margin-top:30px;
    display: flex;
    text-align: center;
    justify-content: center;
    gap:60px;
    
}
.fa-brands{
    font-size:50px;
    cursor: pointer;
}
/* about */
.about-container{
min-height:100vh;
display: flex;
align-items:center;
justify-content:center;
gap:40px;
padding:0px 4.5%;
}
.about-me span{
    color:var(--violet);
}
.about-image img{
    width:37vw;   
}
.about-me .about-title{
    font-size:50px;
    margin-bottom:10px;
}
.about-desc,.about-desc-text{
    max-width:95%;
    margin-bottom:15px;
}
.animate-left-fadeIn{
    opacity:0;
    transform: translateX(100vw);
}
.about-me > :nth-child(2){
    font-size:20px;
}
.about-me > :nth-child(3){
    font-size:16px;
    color: var(--gray);
}
.personal-table td tr{
    max-width:98%;
}
.personal-table td{
    font-size:16px;
}
.personal-table{
    display: flex;
    gap:10px;
}
.personal-info > :nth-child(1){
    margin-bottom:15px;
}
.personal-info-table1 td{
    padding-left: 5px;
    font-weight: 600;
    color: var(--gray);
}
/* education */
.education .container {
    position: relative;
    min-height:100vh;
}
.education-title{
    font-size:45px;
    color:black;
    text-align: center;
    margin-bottom:7%;
}
.education-list{
    background-color:black;
    margin-bottom:6%;
    width:45%;
    padding:20px 30px;
    color: var(--gray);
 
}
.animate-scale{
   opacity:0;
   transform:scale(0.6);
}
.animate-show-scale{
    animation:zoomIn 3s ease forwards;
}
@keyframes zoomIn{
   to{
    opacity:1;
    transform:scale(1);
   } 
}
.education-list:hover{
    box-shadow: 0px 7px 29px 0px rgba(0, 0, 0, 0.562);
}
.education{
    position: relative;
}
.education-list-container::after{
  position:absolute;
  top:0;
  left:50%;
  content:'';
  width:3px;
  background-color: black;
  z-index:-1;
  animation:line 6s ease forwards 3s infinite;
}
@keyframes line {
    from{
        height:0;
    }
    to{
        height:100%;
    }
    
}
.education-list-container .education-list::before{
    content: "";
    position: absolute;
    background-color: red;
    transform: translate(-50%);
    width:20px;
    height:20px;
    border-radius: 50%;
}


.education-list-container {
    max-width:1130px;
    margin: auto;
    position: relative;
}
.education-list-container > p,h2,h1{
      margin-bottom:16px;
}
.education-list-container .left-container{
margin-top:10px;
border-radius:25px 0px 0px 25px;
margin-left:15px;
}
.education-list-container .left-container::before{
    left:50%
}

.education-list-container .right-container{
    position:relative;
    left:50%;
    margin-left:40px;
    border-radius:0px 25px 25px 0px;
}
.right-container::before{
 left:-40px;
}
.education-list-container h1{
    color:green
}
.education-list-container h2{
    color:red;
}
.education-list-container p{
    font-weight: 600;
}
.education-list-container span{
    color:white;
}


/* certificate */
.certificate .container {
    min-height:100vh;
    margin-bottom:5%;
}
.certificate  .container h1{
  font-size:45px;
    text-align: center;
    position: relative;
    left:50%;
    transform: translate(-50%,0);
    margin-top:10%;
    margin-bottom: 5%;

}
.certificate .certificate-item{
    border:2px solid black;
    border-radius:25px;
    width:30%;
    text-align: center;
    padding:30px 30px;
    margin-top:5%;
    position: relative;
    margin: auto;
    /* left:50%; */

}
.certificate .certificate-item >:nth-child(2){
    color: red;
    margin-bottom:15px;
} 

.certificate .certificate-item >:nth-child(3){
    margin-bottom:15px;
} 
.skill .container{
    min-height:100vh;
    margin-bottom:5%;
}
.skill .container h1{
    font-size: 45px;
    text-align: center;
    margin-bottom:4%;
}
.skill-list{
    width:100%;
    text-align: center;
}
.skill-items{
    display: grid;
    grid-template-columns:auto auto auto;
    align-items: center;
    justify-items: center;
    gap:50px;
}
.skill-list .fa-brands{
    font-size:70px;
    text-shadow: 6px 0px 4px rgba(53, 52, 52, 0.295);
}
.skill-list .skill-name{
    font-size:30px;
    font-weight: 700;
    margin:15px 0px;
}
.skill-list .skill-percentage{
    font-size:25px;
    font-weight: 500;
    margin-bottom:15px;
}
.progress-bar{
    width:70%;
    height:25px;
    border:2px solid black;
    border-radius:25px;
    margin:auto ;
}
.progress-bar .progress-color{
    width:90%;
    height: 100%;
    border:0.5px solid white;
    background-color:var(--violet);
    border-radius:25px 0 0 25px;
    animation: progress 6s ease forwards 1s infinite ;
}
  
@keyframes progress {
    0%{
        width: 0;
    }
    100%{
        width:90%;
    }
}
.javascript-bar .progress-color{
    width:85%;
    animation: progressJava 6s ease forwards 1s infinite ;
}
@keyframes  progressJava {
    0%{
        width: 0;
    }
    100%{
        width:85%;
    }
}
.react-bar .progress-color{
    width:80%;
    animation: progressReact 6s ease forwards 1s infinite ;
}
@keyframes  progressReact {
    0%{
        width: 0;
    }
    100%{
        width:80%;
    }
}
.project .container{
    min-height:100vh;
    margin-bottom:5%;
}
.project .container h1{
    font-size: 45px;
    margin-bottom:7%;
    text-align: center;
    padding:0px 20px;
}
.project-items{
width:100%;
display: grid;
grid-template-columns:auto auto;
justify-items: center;
align-items: center;
gap:20px;
/* transform: translateY(40%); */
}
.box img{
    width:100%;
    max-height:350px;
    border-radius:20px;
    transition: transform 0.5s;
}
.box{
    border-radius:20px;
    position: relative;
    overflow: hidden;
    box-shadow:5px 5px 15px rgba(0, 0, 0, 0.562); 
}
.overlay{
    height:0;
    width:100%;
    background:linear-gradient(transparent, #1c1c1ce3 58%);
    border-radius:20px;
    position: absolute;
    bottom:0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding:0 40px;
    text-align:center;
    font-size:15px;
    transition: height 0.5s;
}
.overlay h3{
font-weight:700;
margin-bottom:10px;
font-size:30px;
letter-spacing:2px;
color:white;
}
.overlay a{
    font-weight: 600;
    color:black;
    font-size:15px;
    background-color:white;
    border-radius:50px;
    text-align: center;
    padding:5px 15px;
    transition:all linear 0.5s ;
    margin-bottom:10px;
}

.box:hover img{
    transform: scale(1.2);
}
.box:hover .overlay{
    height:100%;
}
.box a:hover{
    transition: all 0.8s ease;
    background-color:var(--violet) ;
    color: white;
}
.contact .container h1 {
    font-size:45px;
text-align: center;
}
.contact-box{
    height:95vh;
    display:flex;
    justify-content: flex-start;
    align-items: center;
    gap:50px;
}
.contact-list{
    position: relative;
    display: flex;
    align-items: center;
    gap:20px;
}
.contact-list p{
    font-weight: 700;
    font-size:20px;
}
.contact-list p:hover{
    cursor: pointer;
    color: var(--gray);
}
.contact-list a:hover{
    color: var(--gray);
}
.contact-item-list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap:30px;
}
.home-navigation{
    position:fixed;
    bottom:2rem;
    right:1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}
.top-items i{
    font-size:20px;
    color: black;
    font-weight:bolder;
    background-color:#ff6969;
    padding:10px 12px;
    border-radius:8px;
}
.container-footer{
    background-color: black;
}
.footer p{
    text-align: center;
    padding:10px 0px;
    color: var(--gray);
}