@import '../variable.css';



.image__activite{
    display: block;
    width: 20rem;
    height: 20rem;
    margin-left: auto;
  margin-right: auto;
    margin-top: 2rem;
}

section{
    width: fit-content;
    border: 0px 0px 10px black;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.918), rgba(206, 221, 255, 0.733));
    margin: 1rem;
    border-radius:40px;
    opacity: 0;
}

.more__info{
    
   text-align: center;
   background:linear-gradient(to bottom left,rgb(15, 29, 221,0.4), #8d95e2);
   padding: 1rem;
   cursor: pointer;
  
   
}

.more__info:hover{
    background-color: aquamarine;
    animation: bouge 500ms infinite cubic-bezier(.1,.9,.1,1) both ;
    
}

.bloc{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.main{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem ;
    grid-auto-flow: row;
    margin-bottom: 6rem;
    
}
/* .sectionAkwaba,.sectionCarriere{
  position: relative;
  top: 6rem;
} */

@keyframes bouge {
    0% {
        transform: rotate(5deg);
        
    }
    50%{
        transform: rotate(-5deg);
        
    }
    
    
}

@media screen and (max-width: 768px) {
    .sectionAkwaba,.sectionCarriere{
        top: 0rem;
      }

      .main{
        grid-template-columns: 1fr;
        
    }
}

@media screen and (max-width: 350px) {
    .image__activite{
     
        width: 15rem;
        height: 15rem;
   
    }
}



/* .sectionAkwaba{
  margin-top: 10rem;
} */

.animation-entrer-droit{
    animation: animation-entrer-droit 700ms cubic-bezier(0.075, 0.82, 0.165, 1) both ;
}

.animation-sortir-droit{
    animation: animation-entrer-droit 700ms ease-in-out backwards alternate-reverse;
    background-color: red;
}

.animation-entrer-gauche{
    animation: animation-entrer-gauche 700ms  cubic-bezier(0.075, 0.82, 0.165, 1) 100ms both ;
}

@keyframes animation-entrer-droit {
    0%{
        transform: translateX(-120%);
        
    }
    50%{
        opacity: 0.8;
    }
    
    
    100%{
        transform: translateX(0);
        opacity: 1;
    }
    
}

@keyframes animation-entrer-gauche {
    0%{
        transform: translateX(120%);
    }
    50%{
        opacity: 0.8;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
    
}