.bouton{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8vh;
    width: 16vw;
    position: absolute;
    top: -450px;
}

.portfolioJean .image.active:hover .bouton{
    top: -320px;
    transition: 1s;
  }

  .portfolioJean .bouton:hover span.arrow i:nth-child(2){
    opacity: 1;
  }
  .portfolioJean .bouton:hover span.arrow i:nth-child(3){
    opacity: 1;
  }
  
  .text span.arrow i:nth-child(2) {
    opacity: 0;
}
  
  .text span.arrow i:nth-child(3) {
    opacity: 0;
}

.text button {
    font-family: "Poppins", sans serif;
    font-size: 2.2vw;
    font-weight: bold;
    background-color: indigo;
    color: white;
    border: 0;
    padding: 10px 50px;
    transform: skewX(-15deg);
    cursor: none;
    transition: 0.5s;
    box-shadow: 15px 15px 0px #000101;
}

.text button:hover {
    padding-right: 80px;
    box-shadow: 20px 20px 0px #fefeff;
}

.text span.arrow {
    margin-left: 25px;
    position: relative;    
    transform: skewX(15deg) !important;
}

.text span.arrow i {
    transform: skewX(15deg);
    color: white;
    transition: 0.3s;
    
}

.text span.arrow i:nth-child(2) {
    position: absolute;
    right: 0;
    top: 10px;
    animation-delay: 0.4s;

}
.text span.arrow i:nth-child(3) {
    position: absolute;
    right: 0;
    top: 10px;
    animation-delay: 0.8s;

}
.text button:hover i:nth-child(2) {
    right: -20px;
}
.text button:hover i:nth-child(3) {
    right: -40px;
}

@keyframes color {
    0% {
        color: white;
        
    }
    50% {
        color: indigo;

    }
    100% {
        color: white;

    }
}
.text button:hover i {
    animation: color 1.6s infinite linear;
}


/*-------------------------------------------Portfolio jean 2---------------------------------------------*/


.bouton2{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8vh;
    width: 16vw;
    position: absolute;
    top: -450px;
}



.portfolioJean2 .image2.active:hover .bouton2{
    top: -320px;
    transition: 1s;
  }

  .portfolioJean2 .bouton2:hover span.arrow i:nth-child(2){
    opacity: 1;
  }
  .portfolioJean2 .bouton2:hover span.arrow i:nth-child(3){
    opacity: 1;
  }
  
  .text2 span.arrow i:nth-child(2) {
    opacity: 0;
}
  
  .text2 span.arrow i:nth-child(3) {
    opacity: 0;
}
  
  


.text2 button {
    font-family: "Poppins", sans serif;
    font-size: 2.2vw;
    font-weight: bold;
    background-color: indigo;
    color: white;
    border: 0;
    padding: 10px 50px;
    transform: skewX(-15deg);
    cursor: none;
    transition: 0.5s;
    box-shadow: 15px 15px 0px #000101;
}

.text2 button:hover {
    padding-right: 80px;
    box-shadow: 20px 20px 0px #fefeff;
}

.text2 span.arrow {
    margin-left: 25px;
    position: relative;    
    transform: skewX(15deg) !important;
}

.text2 span.arrow i {
    transform: skewX(15deg);
    color: white;
    transition: 0.3s;
    
}

.text2 span.arrow i:nth-child(2) {
    position: absolute;
    right: 0;
    top: 10px;
    animation-delay: 0.4s;

}
.text2 span.arrow i:nth-child(3) {
    position: absolute;
    right: 0;
    top: 10px;
    animation-delay: 0.8s;

}
.text2 button:hover i:nth-child(2) {
    right: -20px;
}
.text2 button:hover i:nth-child(3) {
    right: -40px;
}

@keyframes color {
    0% {
        color: white;
        
    }
    50% {
        color: indigo;

    }
    100% {
        color: white;

    }
}
.text2 button:hover i {
    animation: color 1.6s infinite linear;
}