body{
    font-family: Arial;
    overflow-x:hidden;

}
*{
    margin:0;
    padding:0;
    scroll-behavior: smooth;

 }
::-webkit-scrollbar {
    width: 12px;
    /*display: none;*/
    background: black;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
    margin:5px 0;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #00a68a;
    border-radius: 15px;

}
.scrolling{
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 8px;
    z-index: 10;
}
.scrollChild{
    width: 0%;
    background: #00ffd7;
    height: 100%;
    transition: all .1s linear;
}
.navbar{
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    top:10px;
   width:50%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
    padding: 0 5px;
    z-index: 5;
    transition: all .3s;

    /* background-image: linear-gradient(to top, #323232, #111111); */
    opacity: .8;
}
.navbar a {
    text-decoration: none;
    color: white;
    text-align: center;
    width: 22%;
    padding:6px;
    border-radius: 25px;
    transition: all .2s;
    display: flex;
    justify-content: center;
    align-items: end;
}
.navbar a:hover:not(.navbar-active){
    background: rgba(72, 72, 72, 0.288);
}
.navbar-active{
    background: #008b7d;
}
.icon-nav{
    width: 20px;
    height: 20px;
    margin:0 4px;
}.icon-nav img{
     width: 100%;
     height: 100%;


 }
header{
    /*background: #171717;*/
    background-image: url("../image/background/wallpaper-for-hacker.jpg");
    background-position: center;
    background-size: cover;
    padding:5vh 0;
}
.bio-part-1{
    width:45%;
    /*float: left;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color:white;
    padding-top:60px;
}
.bio-part-1 *{
    margin:10px;
}
.bio-part-1 h2{
    color: #e1e1e1;
}
.picture-me{
    width: 80vw;
    height:80vw;
    max-width: 380px;
    max-height: 380px;
    border-radius: 50%;
    overflow: hidden;
    background:gray;
    margin:10px 0;
    /*box-shadow: 0 0 58px 0px rgba(185, 185, 185, 0.06);*/
    border:1px solid rgb(52, 52, 52);
}.picture-me img{
    width:100%;
    height:100%;
    margin:0;
    filter:hue-rotate(352deg) brightness(70%) contrast(99%);
}
.abilities{
    display: flex;
    flex-wrap: wrap;
    width: 70%;
    justify-content:flex-start;
 }
.ability{
    flex-grow: 1;
    padding:6px 8px;
    background: #008b84c9;
    color:rgb(224, 224, 224);
    /* background: #d0d300; */
    margin:3px;
    border-radius: 35px;
    text-align: center;
    transition: all .2s;

 }.ability:hOver{
      background: rgb(238, 238, 238);
    color: black;
    box-shadow:0 0 15px 1px #ffffff;
  }
.bio-part-2{
    width: 55%;
}
.bio-slider{
    width:85%;
    max-width: 550px;
    height: 340px;
    margin:0 auto;
    position:relative;
}
.bio-slide{
    width: 100%;
    height:100%;
    background: rgb(14, 14, 14);
    position: absolute;
    box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.944);
    border-radius: 10px;
    transition: all .5s;
    color:white;
    
 }
.bio-slide:nth-child(1){
    right:0;
    bottom:0;
    z-index:4;
    opacity: 1;
}
.bio-slide:nth-child(2){
    bottom:-12px;
    right:-12px;
    z-index: 3;
    opacity: .95;
}.bio-slide:nth-child(3){
     bottom:-22px;
     right:-22px;
     z-index: 2;
     opacity: .85;
 }

.bio-slider-dots{
    position: absolute;
    bottom:-70px;
    z-index: 5;
    display: flex;
    left:50%;
    opacity: .8;
    transform: translateX(-50%);
}
.dot{
    width:15px;
    height:15px;
    border-radius: 50%;
    background:rgb(88, 88, 88);
    margin:0 5px;
    cursor: pointer;
}
.dot-active{
    background: cyan;
}
#Specialties{
    /*background: #212121;*/
    background-image: url("../image/background/background2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    padding:20px;
    padding-top:50px;
}
.title-Special{
    width: 100%;
    text-align: center;
    font-size:3rem;
    /*background-color: rgb(14, 14, 14);*/
    background-color: rgba(0, 88, 88, 0.849);
    padding:.5rem 0 ;
    border-radius:4% 4% 26% 26% / 46% 46% 15% 15%   ;
    color:rgb(214, 214, 214);
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.26);

}
.cards-special{
    margin:30px 0;
    padding:15px 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
 }
.card-special{
    /*box-shadow: 0 0 20px rgba(0, 0, 0, 0.42);*/
    box-shadow: inset 0 0 75px 18px rgba(0, 0, 0, 0.648);
    width: 320px;
    height: 180px;
    margin:20px auto;
    background-color: rgba(27, 27, 27, 0.37);
    border-radius: 20px 20px 15px 15px;
    position: relative;
    overflow: hidden;
    z-index: 2;
    transition: all .3s;
    background-size:cover;
    background-position:center ;
background-repeat: no-repeat;

}.title-card-special{
     width:100%;
     background-color: rgba(0, 0, 0, 0.73);
     height: 30%;
     display: flex;
     align-items: center;
     justify-content: center;
     color:white;
     position: absolute;
     bottom:-2px;
     opacity: 1;
     border-radius: 15px 15px 0 0 / 10px 10px 0 0;
     transition: all .5s;

 }.title-card-special h2{
      margin:0;
  }
.card-special:hover{
    box-shadow: inset 0 0 28px 1px rgba(0, 0, 0, 0.549);
    transform:scale(1.08);
}
.card-special:hover .title-card-special{
    background-color: rgba(0, 0, 0, 0.85);
}

.card-special::before{
    content: '';
    width:100%;
    height: 100%;
    position: absolute;
    left:-400px;
    top:0;
    background: rgba(255, 255, 255, 0.06);
    transition: all 1s;
    z-index:1;
    animation:ani 4s linear infinite;
}
.javascript{
    background-image: url('../image/programing/javascript.png');
    background-position:bottom ;
}
.html{
    background-image: url('../image/programing/html5-2.png');
}
.css{
    background-image: url('../image/programing/css3.jpg');
}.nodejs{
    background: #cecece;
     background-image: url('../image/programing/nodejs.png');
 }
 .reactjs{
     background-image: url('../image/programing/reactjs.png');
 }
 .expressjs{
     background-image: url('../image/programing/express2.png');
 }.bootstrap{
       background-image: url('../image/programing/bootstrap.jpg');
   }
.php{
    background-image: url('../image/programing/php.png');
}
.wordpress{
    background-image: url('../image/programing/wordpress2.png');
}
.regex{
    background-image: url('../image/programing/regEx.png');
}
.jquery{
    background-image: url('../image/programing/jquery2.png');
    background-size:contain;
    background-repeat: repeat;
}
.mongoDB{
    background-color: #01381c;
    background-image: url('../image/programing/mongodb.png');
    background-size:contain;
}
.mySql{
    background-image: url('../image/programing/mysql.png');
}
.tailwind{
    background-image: url('../image/programing/tailwind-banner.jpg');
}
.git{
    background-image: url('../image/programing/git2.png');
}
.linux{
    background-image: url('../image/programing/linux.jpg');
}
@keyframes ani {
    0%{
        left:-400px;
        opacity: .6;
    }25%{
         opacity: 0;
         left:1000px;
     }100%{
          left:1000px;
          opacity: 0;
      }
}

#projects{
    
    background-image: url('../image/background/background.jpg');
    background-size:cover ;
    background-position: center;
    background-attachment: fixed;
    padding:50px 20px;
    padding-bottom: 80px;
}
.title-projects{
    color:rgba(255, 255, 255, 0.937);
    font-size:4rem;
    text-align: center;
   /* background-color: black; */
   animation: ani2 4s infinite;

}.projects-wrapper{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content:center;
    margin-top: 50px;
}
.project{
    flex-basis: 450px;
    padding:15px 18px;
    background-color: rgba(16, 16, 16, 0.277);
    margin:8px;
    border-radius: 15px;
    color:rgba(255, 255, 255, 0.827);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 0 12px rgba(254, 254, 254, 0.245);
    transition: all .2s;
}.title-project{
    display: flex;
    justify-content: space-between;
    align-items: center;
}.title-project > div{
    display: flex;
}
.title-project h3{
    color:rgb(236, 236, 236);
    font-size:1.7rem;
    padding:10px 0;
}.link-icon{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding:10px;
}.link-icon img{
    width: 100%;
    height: 100%;
}.link-icon:hover{
    background-color: rgba(255, 255, 255, 0.125);
}
.dependencies{
    padding:10px 0;
}.dep{
    font-size: .75rem;
    border-radius: 20px;
    padding:5px;
    margin:4px 1px;
    font-weight: 600;
    opacity: .8;
    display: inline-block;
}
.project:hover{
    background-color: rgba(0, 0, 0, 0.475);
    box-shadow: 0 0 18px 0 rgba(255, 255, 255, 0.562) ;
}
#Contacts{
    padding:80px 0;
    background-image: linear-gradient(to right, #032d2d, #152831, #032d2d);
}
.title-contacts{
    font-size:4rem;
    text-align: center;
    color:transparent;
    -webkit-background-clip: text;
    margin-bottom:50px;
    /* background-image: linear-gradient(to right, #032d2d, #152831, #032d2d); */
    background-image: linear-gradient(to top, #ffffff, #3de8ff 80%);
}
.contact-wrapper{
    display: flex;
     justify-content: center;
    /* flex-wrap: wrap;  */
    padding:15px;
    margin-bottom: 15px;
    position: relative;
    overflow-x:hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.contact{
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 300px;
    opacity: .8;
    background-image: url("../image/background/pattern1.png");
       background-color: rgba(255, 255, 255, 0.15);
    background-size: cover;
      border-radius: 8px;
      margin:5px;
      transition: all .3s;
    padding:10px 0;
    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.53);
    /* scroll-snap-align: end; */
  }
.contact h2{
       color: rgb(245, 245, 245);
       font-family: 'Arial';
    margin:20px 0;
}
.contact h3{
    color: rgb(175, 175, 175);
}
.btn-contact{
    text-align: center;
    text-decoration: none;
    font-family: 'Arial';
    padding:10px;
    width: 75%;
    color:rgb(255, 255, 255);
    font-size:1.2rem;
    font-weight: bold;
    background-color: rgba(22, 22, 22, 0.852);
    border-radius: 5px;
    transition: all .2s;
    border:1px solid rgba(22, 22, 22, 0.566);
}
.btn-contact:hover{
    background-color: rgba(231, 231, 231, 0.41);
    color:black;
}
.btn-contact-copy{
    border:none;   
    outline:none;
    text-align: center;
    padding:6px 0;
    width: 80%;
    margin:12px 0;
    margin-top:5px;
    /* background-color: transparent; */
    background-color: rgba(199, 199, 199, 0.162);
    border:1px solid rgba(255, 255, 255, 0.356);
    border-radius: 5px;
    opacity: .9;
    cursor: pointer;
    transition: all .2s;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color:white;
}
.btn-contact-copy img{
    width: 22px;
    height: 22px;
    margin:0 2px;
    filter: brightness(90%);
}
.btn-contact-copy:hover{
    background-color: rgba(199, 199, 199, 0.36);
}.btn-contact-copy:hover img{
     filter: brightness(100%);
 }
.contact:hover{
    opacity: 1;
}
.image-contact{
    animation: aniContact 10s infinite ;
}
.contact-info{
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.contact-info > div{
    padding:20px 10px;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.079);
    margin:7px 5px;
    display: flex;
    align-items: center;
    color: rgba(245, 245, 245, 0.82);
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.21);
    font-size:.9rem;
    background-image: url("../image/background/pattern1.png");
 background-size: cover;
 flex-basis: 590px;
 transition: all .2s;
}
.contact-info-img{
    margin:0 9px;
    filter: brightness(70%);
}.contact-info-title{
    font-size: 1.8rem;
    text-align: center;
    color:rgba(176, 176, 176, 0.962);
    margin: 20px 0;
}
.contact-info > div:nth-child(1){
    background-position: top;
}
.contact-info > div:nth-child(2){
    background-position: right;
}
.contact-info > div:nth-child(3){
    background-position: bottom;
}
.contact-info > div:nth-child(4){
    background-position: top left;
}
.contact-info > div:hover{
    background-color: rgba(255, 255, 255, 0.179);
  
}
footer{
    background-color:#000e0e;
    padding:20px 0;
}footer ul{
    list-style: none;
  width: 100%;
  margin:0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}footer ul li{
    text-align: center;
    margin:10px 5px;
    color:white;
}
footer ul li a{
    /* text-decoration: none; */
    color:rgba(255, 255, 255, 0.714);
}
footer ul li a:hover{
    /* text-decoration: none; */
    color:white;
}
@keyframes aniContact {
    0%{
        transform:rotateY(0deg);
    }10%{
    transform:rotateY(360deg);
    }
    100%{
        transform: rotateY(360deg);
    }

}
@media screen and (max-width:1240px){
    .contact-wrapper{
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-color: #032d2d,#032d2d  ;/*#032d2d #152831*/
        scrollbar-width: thin;
    }
    .contact{
        margin: 0 20px;

    }
}
@media screen and (max-width:992px ){
    .navbar{
        width: 70% ;
    }.bio-part-1 h1{
        font-size:1.8rem;
    }
    .bio-part-1 h2{
        font-size:1.241rem;
    }
    .picture-me{
        max-width: 300px;
        max-height: 300px;
    }.abilities{
         width: 95%;
     }
    .ability{
        padding:4px;
    }.bio-part-1{
        width: 45%;
    }.bio-slider{
        width:78%;
        height: 250px;
    }.abilities{
        width: 80%;
    }
}
@media screen and (max-width: 768px){
 
    .navbar{
        width: 90%;
    }.bio-part-1{
        width: 100%;
        margin-bottom: 5rem;

    }.bio-part-2{
        width: 100%;
        padding:5rem 0;
    } .picture-me{
        max-width: 400px;
        max-height: 400px;
    }
    .bio-slider{
        width:75%;
        /* margin-right: 2rem; */
        height: 280px;
    }  
    .abilities{
        width: 65%;
    }.picture-me img{
        filter:hue-rotate(352deg) brightness(85%) contrast(99%);
    }
    .contact{
      opacity: .9;
    }.contact-info > div{
        padding:15px 5px;
        font-size:.8rem;
    }footer ul{
        flex-direction: column-reverse;
    }footer ul li{
        font-size:.84rem;
    }
}
@media screen and (max-width: 576px){
    .navbar{
        width: 96%;
    }.bio-slider{
        width:82%;
        /* margin-right: 2rem; */
        height: 220px;
    }  .navbar a {
        width: 22%;
        padding:6px;
        font-size: .8rem;
    }
    .icon-nav{
        width: 18px;
        height: 18px;
        margin:0 3px;
    }.title-project h3{
        font-size:1.5rem;
        padding:9px 0;
    }.link-icon{
        width: 18px;
        height: 18px;
        padding:8px;
    }
  .dep{
        font-size: .65rem;
        padding:3px;
        margin:4px 1px;
    }
    .card-special{
     
        width: 160px;
        height: 105px;
        margin:15px auto;
    }.nodejs{
      background-position: center;
     }.title-card-special{
        width:100%;
        background-color: rgba(0, 0, 0, 0.8);
        height: 25%;
        font-size:0.7rem;
       
    }
}
@keyframes ani2{
    0%,39%,41%,59%,61%,100%{
        text-shadow: rgba(255, 255, 255, 0.519) 0 0 12px,
        #008aa9 0 0 24px,
        hsl(191, 100%, 20%) 0 0 36px,
        hsl(192, 100%, 15%) 0 0 66px;
    }
    40%,60%{
        text-shadow: none;
    }
}