*{
    box-sizing: border-box;
}

html {
      scroll-behavior: smooth; 
    }

body {
     margin: 0px;
     padding: 0px;
    font-family: 'Inter', sans-serif;
    background-color:#001;
      color: #d1cfcf;
     
 }
 nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 50px;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    top: -1px;
    background-color: #001;
    box-shadow: 0px 5px 8px #001 ;
    z-index: 9999;
   
 }
 .navLink a{
    text-decoration: none;
 }
.firstLink{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    
}

.logo{
    color:#ff4500;
    text-shadow: 0px 0px 20px ;
    transition: 0.5s ease;
}
.logo:hover{
    transform: scale(1.1);
        text-shadow: 0px 5px 30px ;
}

.logo h1{
    font-size: 30px; 
}
.logo span{
    font-size: 18px;
    margin-left: 2px;
}

.navLink{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    gap: 40px;
    font-weight: 400;
}

.navLink p{
    position: relative;
    color: rgb(209, 207, 207);
    cursor: pointer;
}

.navLink p:hover{
    color: orangered;
     text-shadow: 0px 0px 20px ;
     font-weight: 600;

}

.navLink p::before{
  content: " ";
  background-color: orangered;
  width: 0%;
  height: 2px;
  position: absolute;
  top:30px;
  transition: 0.5s ease;

}

.navLink p:hover::before{
    width: 100%;
}

.mobileNav{
    display: none;
}

.mobilelink{
    display: none;
}

.githubBTN i{
    color: white;
    font-size: 50px;
    border-radius: 50%;
    transition: 0.5s ease;
}

.githubBTN i:hover{
    color: orangered;
    box-shadow: 0px 5px 20px rgba(255, 68, 0, 0.315);
    transform: scale(1.1);
}
button{
    transition: 0.5s ease;
}
button:hover{
    transform: translateY(-3px);
}

header{
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    padding: 90px;
    flex-wrap: wrap;
}


.headerText h1{
    font-size: 60px;

}

.headerText{
    line-height: 1;

}
.headerText p{
    font-size: 20px;
}

.headerIcon {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 40px;
}

.headerIcon i {
    font-size: 30px;
    color: orangered;
    text-shadow: 0px 0px 10px ;
    transition: 0.5s ease;
    border-radius: 50%;
}

.headerIcon i:hover{
    transform: translateY(-2px);
    text-shadow: 0px 8px 10px ;

}

.headerBTn{
    margin-top: 50px;
}
.headerBTn button{
    padding: 10px 40px;
    box-sizing: content-box;
    border: none;
    border-radius: 30px;
    background-color: orangered;
    color: rgb(209, 207, 207); 
    box-shadow: 0px 0px 10px rgba(255, 68, 0, 0.295);
}

.headerBTn button:hover{
     box-shadow: 0px 5px 5px rgba(255, 68, 0, 0.384);
}
.headerImg{
    display: flex;
    align-items: end;

}

.img{
    border: 1px solid orangered;
    height: 330px;
    display: flex;
    align-items: end;
    width: 330px;
    justify-content: center;
    animation: move 3s infinite;
   border-radius: 50%;
   box-shadow: 0px 0px 10px orangered;
}

.aboutSection{
    display: flex;
    gap: 80px;
    padding: 0px 80px;
    margin-top: 70px;
    flex-wrap: wrap;
}
.aboutIMG{
    box-shadow: 0px 0px 10px orangered;
    object-fit: contain;
}

.aboutText h1{
    font-size: 40px;

}


.aboutSection button{
     padding: 10px 40px;
    box-sizing: content-box;
    border: none;
    border-radius: 30px;
    background-color: orangered;
    color: rgb(209, 207, 207); 
    box-shadow: 0px 0px 10px orangered;
}
    .projectSection{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 80px;
       

    }


.projectSection h1{
    font-size: 40px;
    margin-bottom: 40px;
     
}
.projectCard{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}
 .cards:hover{
        transform: translateY(-8px);
     }
.projectCard .cards{
    width: 400px;
    height: 350px;
    border-radius:8px ;
   
    box-shadow: 0px 0px 10px rgba(255, 68, 0, 0.342);
    box-sizing: border-box;
    background-blend-mode: overlay;
    background-color: rgba(0, 0, 0, 0.356);
     transition: 0.5s ease;
}

.projectContent{
    height: 100%;
    width: 100%;
    justify-content: end ;
    align-items: center;
    flex-direction: column;
    background-color: rgba(0, 0, 17, 0.61);
    display: none;
    animation: fadeIn 0.5s ;
    padding: 0px 9px;

}

.projectSection button{
         padding: 10px 40px;
    box-sizing: content-box;
    border: none;
    border-radius: 30px;
    background-color: orangered;
    color: rgb(209, 207, 207); 
    box-shadow: 0px 0px 10px orangered;
    margin-top: 50px;

}

.projectContent p{
    font-size: 15px;
    text-align: left;
     animation: slideUP 0.5s ;
}

.projectContent h1{
    font-size: 23px;
    margin-bottom: -30px;
     animation: slideUP 0.5s ;

}

.projectContent button{
    padding: 10px 30px;
    border: none;
    border-radius: 8px;
    margin-bottom: 30px;
     animation: slideUP 0.5s ;
    
}

.skillsSection{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top:80px ;
    width: 100%;
}

.skillsSection h1{
    font-size: 40px;
    margin-bottom: 40px;
    

}

.skillsCards{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 50px;
    width: 80%;
}

.skillsCards .cardS{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 250px;
   
    border-radius: 8px;
    transition: 0.5s ease ;
  

}
.skillsCards .cardS:hover{
     
     transform: scale(1.1);

}

.cardS h1{
    font-size: 20px;
}
.skillProgress{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.progressBar{
    width: 80%;
    height: 9px;
    background-color: gray;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
}

.contactSection{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
    margin-bottom: 20px;
}

@keyframes progress {

  from{ width: 10%; }
  to { width: 90%;}
    
}

@keyframes css {

  from{ width: 10%; }
  to { width: 80%;}
    
}

@keyframes js {

  from{ width: 10%; }
  to { width: 70%;}
    
}
@keyframes react {

  from{ width: 10%; }
  to { width: 55%;}
    
}
@keyframes tailwind {

  from{ width: 10%; }
  to { width: 75%;}
    
}

@keyframes mobile {

  from{ width: 10%; }
  to { width: 95%;}
    
}

@keyframes wordpress {

  from{ width: 10%; }
  to { width: 90%;}
    
}

.bar{
    width: 90%;
    height: 9px;
    background-color: orangered;
     border-radius: 30px;
}

#css{
     width: 80%;
    height: 9px;
}
#js{
     width: 70%;
    height: 9px;

}

#react{

     width: 55%;
    height: 9px;

}
#tailwind{
     width: 75%;
    height: 9px;
}
#mobile{
      width: 95%;
    height: 9px;

}
#wordpress{
      width: 90%;
    height: 9px;
}

.Move.active{
    animation: progress 3s alternate;

}
.wordpress.active{
     animation: wordpress 3s alternate;

}

.mobile.active{
    animation: mobile 3s alternate;
    
}
.tailwind.active{
    animation: tailwind 3s alternate;
}
.react.active{
    animation: react 3s alternate;
}
.js.active{
    animation: js 3s alternate;
}
.css.active{
    animation: css 3s alternate;
}

.contactMe{
    width: 500px;
    height: auto;
    background-color: rgb(199, 195, 195);
    border-radius: 8px;
    color: black;
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-items: center;
    gap: 20px;
    box-sizing:content-box;
    padding: 10px;
    box-shadow: 0px 0px 8px rgba(255, 68, 0, 0.678);

}

#form{
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 20px;

}

.input{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.input input{
    width:100% ;
    height: 50px;
    background-color: white;
    border: none;
    border-radius: 5px;
}

.input input:focus{
    outline: 1px solid rgba(255, 68, 0, 0.473);
}

.input textarea{
    height: 100px;
    border: none;
    border-radius: 5px;
}

.input textarea:focus{
     outline: 1px solid rgba(255, 68, 0, 0.473);

}

.contactMe button{
    height: 50px;
    border: none;
    border-radius:8px ;
    background-color: orangered;
    color: white;
}
.mobileAbout{
    display: none;
}

footer{
    display: flex;
    align-items: center;
    gap: 50px; 
    padding: 15px;
    width: 100%;
    height: 60px;
    background-color:#ccc1;
    margin-top: 100px;
   
}
.footerIcon{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.footerIcon i{
     font-size: 20px;
    color: orangered;
    text-shadow: 0px 0px 10px ;
    transition: 0.5s ease;
    border-radius: 50%;
}

.footerIcon i:hover{
    transform: translateY(-3px);

}
.speedUP{
    display: none;
    justify-content: right;
    padding:30px ;
    position: fixed;
    bottom: 0px;
    right: 30px;
}

.speedUP i{
    font-size: 30px;
    background-color: orangered;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: white;
}
.speedUP a{
    text-decoration: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1;}
}

@keyframes slideUP {
  from {  transform: translateY(20px); }
  to   {  transform: translateY(0); }
}




@keyframes slide {
  from {  transform: translateX(500px); }
  to   {  transform: translateX(0); }

}


@keyframes move {
    
  0% { transform: translateY(-20px); }
  50% { transform: translateY(0px); }
  100%{ transform: translateY(-20px);}

}



@media (max-width:900px) {

    .speedUP{
        right: 5px;
        padding:10px
    }
    .contactMe{
        width: 350px;
        
    }

    .projectCard .cards{
        width: 350px;
    }
    .aboutText{
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
       gap: 0px;
        
    }
.aboutText p{
    display: none;
}
.mobileAbout{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    font-size: 18px;
    
}
.mobileAbout p{
    display: block;
    text-align: left;
    font-size: 19px;
    line-height: 1.5;
}
    .aboutSection{
        justify-content: center;
        padding: 0px;
        margin-top: 80px;
    }
    .githubBTN i{
        font-size: 30px;
    }

    .headerText{
        line-height: 1;

    }
    .headerImg{
        display: flex;
        justify-content: center;
        margin-bottom: 100px;
       
    }
     .headerText h1{
        margin-top: -5px;
        margin-bottom: -5px;
     }
    .headerIcon i{
        font-size: 40px;
    }
    .headerIcon{
        justify-content: center;
         box-shadow: 0px 5px 8px #001 ;
    }
    header{
        padding: 0px;
        text-align: center;
        justify-content: center;
        align-items: center;
        margin-top: 180px;
        flex-direction: column-reverse;
        z-index: -1;

    }

     .githubBTN button:hover{
        color: orangered;
        text-shadow: 0px 0px 20px ;
     }

    .githubBTN button{
        border: none;
        background-color: transparent;
        color: white;
        font-size: 35px;

    }
    .mobilelink{
        position: fixed;
        flex-direction: column;
        top:70px;
        background-color: orangered;
        left: 0px;
        width: 100%;
        height: 70vh;
        box-sizing: border-box;
        padding: 10px;
          animation: slide 0.5s ease forwards;

    }
    .mobilelink hr{
        width: 100%;
    
    }
    
    .githubBTN{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 35px;
    }
    .mobileNav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 10px;
        position: fixed;
        width: 100%;
        box-sizing: border-box;
        top: 0px;
        left: 0px;
        background-color: #001;
        z-index: 9999;
        

    }

    .mobilelink a{
        text-decoration: none;
        color: white;
    }
    nav{
        display: none;
    }
    
}