html {
    scroll-behavior: smooth;
}

@-webkit-keyframes breathing {
    0% {
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
    }
  
    25% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  
    60% {
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
    }
  
    100% {
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
    }
  }
  
  @keyframes breathing {
    0% {
      -webkit-transform: scale(0.9);
      -ms-transform: scale(0.9);
      transform: scale(0.9);
    }
  
    25% {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }
  
    60% {
      -webkit-transform: scale(0.9);
      -ms-transform: scale(0.9);
      transform: scale(0.9);
    }
  
    100% {
      -webkit-transform: scale(0.9);
      -ms-transform: scale(0.9);
      transform: scale(0.9);
    }
  }

body{
    padding: 0;
    margin: 0;
    width: 100vw;

    overflow-x: hidden;
    min-width: fit-content;
    min-height: fit-content;
}
.container-title{
    width: 100vw;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
h1{
    font-size: 5vh;
}
.title-h1{
    width: 100vw;
    margin-left: 1vw;
    display: flex;
    justify-content: center;
    color: #044040;
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.container-skill {
    animation: slideInBottom 1s ease-out forwards;
    opacity: 0; /* Initialement caché pour éviter qu'il apparaisse avant l'animation */
}


.container-description > div .container-left {
    animation: slideInLeft 1s ease-out forwards;
    opacity: 0;
}

.container-description > div .container-right {
    animation: slideInRight 1s ease-out forwards;
    opacity: 0;
}
.container-description > .container-bottom {
    animation: slideInRight 1s ease-out forwards;
    opacity: 0;
}


.container-description{
    width: 100vw;
    height: 40vh;
    background-color: #591c21;
    display: flex;
    justify-content: center;
    flex-direction: column;
    div{
        display: flex;
        .container-left{
            width: 20%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            img{
                width: 25vh;
                height: 25vh;
            }
        }
        .container-right{
            width: 80%;
            height: 100%;
            color: #f2f2f2;
            display: flex;
            align-items: center;
            flex-direction: column;
            p{
                width: 70%;
                font-size: 2.5vh;
                font-family: sans-serif;
                font-weight: 400;
                font-style: normal;
            }
            
        }
    }
    .container-bottom{
        display: flex;
        align-items: center;
        justify-content: center;
        a{
            animation: breathing 7s infinite normal;
            width: 10vw;
            height: 5vh;
            min-width: fit-content;
            min-height: fit-content;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-transform: uppercase;
            color: #f2f2f2;
            background-color: #044040;
            p{
                line-height: 0;
            }
            span{
                line-height: 0;
                margin-bottom: 1vh;
            }
        }
    }

}
.container-about{
    width: 100%;
    height: 55vh;
    background-color: #591c21;
background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v20H9V0zm25.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm-20 20l1.732 1-10 17.32-1.732-1 10-17.32zM58.16 4.134l1 1.732-17.32 10-1-1.732 17.32-10zm-40 40l1 1.732-17.32 10-1-1.732 17.32-10zM80 9v2H60V9h20zM20 69v2H0v-2h20zm79.32-55l-1 1.732-17.32-10L82 4l17.32 10zm-80 80l-1 1.732-17.32-10L2 84l17.32 10zm96.546-75.84l-1.732 1-10-17.32 1.732-1 10 17.32zm-100 100l-1.732 1-10-17.32 1.732-1 10 17.32zM38.16 24.134l1 1.732-17.32 10-1-1.732 17.32-10zM60 29v2H40v-2h20zm19.32 5l-1 1.732-17.32-10L62 24l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM111 40h-2V20h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zM40 49v2H20v-2h20zm19.32 5l-1 1.732-17.32-10L42 44l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM91 60h-2V40h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM39.32 74l-1 1.732-17.32-10L22 64l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM71 80h-2V60h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM120 89v2h-20v-2h20zm-84.134 9.16l-1.732 1-10-17.32 1.732-1 10 17.32zM51 100h-2V80h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM100 109v2H80v-2h20zm19.32 5l-1 1.732-17.32-10 1-1.732 17.32 10zM31 120h-2v-20h2v20z' fill='%23044040' fill-opacity='0.18' fill-rule='evenodd'/%3E%3C/svg%3E");
    display: flex;
    .container-right{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        color: #f2f2f2;
        display: flex;
        align-items: center;
        h2{
            text-transform: uppercase;
        }
        p{
            width: 70%;
            font-size: 2.5vh;
            font-family: sans-serif;
            font-weight: 400;
            font-style: normal;
        }
        
    }
}

.container-skill{
    margin-top: 10vh;
    margin-left: 2vw;
    margin-bottom: 10vh;
    h2{
        text-transform: uppercase;
        color: #044040;
    }
}
.container-project{
    width: 50vw;
    margin-top: 10vh;
    margin-left: 2vw;   
    h2{
        text-transform: uppercase;
        color: #044040;
    }
}
a{
    text-decoration: none;
}
.btn-contact{
    margin-right: 2vw;
    width: 7vw;
    font-size: 2vh;
    z-index: 10;
}
/*
.btn-primary{
    border-radius: 3vh;
    background-color: #044040;
    color: #f2f2f2;
    height: 5vh;
    border: none;
    font-family: sans-serif;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
    */
/* CSS */
.btn-primary {
  min-width: fit-content;
  min-height: fit-content;
  background-color: #044040;
  border: 1px solid #044040;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
  box-sizing: border-box;
  color: #f2f2f2;
  cursor: pointer;
  font-family: "Akzidenz Grotesk BQ Medium", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 400;
  outline: none;
  outline: 0;
  padding: 10px 25px;
  text-align: center;
  transform: translateY(0);
  transition: transform 150ms, box-shadow 150ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.btn-primary:hover {
  box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0;
  transform: translateY(-2px);
}

@media (min-width: 768px) {
  .btn-primary {
    padding: 10px 30px;
  }
}

.container{
    width: 100%;
    position: relative;
    padding-bottom: 5vh;
}
input{
    padding: 0;
    margin: 0;
    border: solid 5px #044040;
    background-color: #f2f2f2   ;
    border-radius: 25px;
    height: 5vh;
    font-size: 2.5vh;
}
textarea{
    padding: 0;
    margin: 0;
    border: solid 5px #044040;
    border-radius: 25px;
    background-color: #f2f2f2;
    height: 5vh;
    font-size: 2.5vh;
    resize: none;
}
.container-form{
    width: 100%;
    height: 70vh;
    background-color: #591c21;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%23044040' fill-opacity='0.12' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E");
    display: flex;
    
    .container-left{
        height: 100%;
        width: 50%;
        position: relative;
        .title{
            text-transform: uppercase;
            color: #f2f2f2;
            font-size: 2.5vh;
            margin-left: 2vw;
            margin-top: 3vw;
        }
        form{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            margin-top: 3vw;
            div{
                margin-top: 2vh;
                width: 35vw;
                display: flex;
                justify-content: space-between;
                input{
                    width: 45%;
                    padding: 1vh;
                    color: #044040;
                }
            }
            .input-object{
                margin-top: 2vh;
                width: 34vw;
                padding: 1vh;
                color: #044040;
            }
            textarea{
                margin-top: 2vh;
                width: 34vw;
                height: 25vh;
                padding: 1vh;
                color: #044040;
            }
        }
    }
    .container-right{
        
        width: 50%;
        position: relative;
    }
}
.container-right{
    display: flex;
    justify-content: center;
    div{
        margin-top: 5vh;
        margin-left: 5vw;
        .container-e-mail, .container-phone,.container-home{
            display: flex;
            align-items: center;
            
            img{
                width: 5vh;
                height: 5vh;
                margin-bottom: 5px;
                margin-right: 1vw;
            }
            p{
                font-size: 2.5vh;
                text-transform: uppercase;
                color: #f2f2f2;
            }
        }
    }
}
.submit-contact{
    position: absolute;
    top: 60.8vh;
    left: 44vw;
    border: none;
    text-transform: uppercase;
    background-color: #044040;
    color: #f2f2f2;
    width: 10vw;
    height: 5vh;
    cursor: pointer;
}
.container-copy{
    color: #f2f2f2;
    font-size: 1vh;
    top: 62vh;
    left: 25vw;
    position: absolute;
}

.container-carousel{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 97vw;
    height: 35vh;
    .title-carousel{
        h3{
            text-transform: uppercase;
            color: #044040;
        }
    }
    .container-carousel-obj{
        margin-top: 14vh;
    }
    .container-carousel-item > div {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0; /* Empêche de rétrécir */
        width: 100%;
        transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out; /* Ajoute une transition fluide */
        opacity: 0; /* Par défaut, les items sont invisibles */
        transform: translateX(100%); /* Positionne à droite hors de l'écran */
        position: absolute; /* Les items se superposent */
    }
    
    .container-carousel-item > div.active {
        opacity: 1; /* Rendu visible pour l'élément actif */
        transform: translateX(0); /* Remet à sa place dans le viewport */
    }
    
    .container-carousel-item > div.prev {
        opacity: 0;
        transform: translateX(-100%); /* Positionne à gauche hors de l'écran */
    }
    
    .container-carousel-item > div.next {
        opacity: 0;
        transform: translateX(100%); /* Positionne à droite hors de l'écran */
    }
    
    .container-carousel-item > div img {
        margin: 0 1vw;
        width: 15vh;
        height: 15vh;
    }
    .container-carousel-obj {
        position: relative; /* Nécessaire pour ancrer les chevrons */
        display: flex;
        align-items: center;
        justify-content: space-between; /* Espacement fixe entre les chevrons */
        width: 100%;
    }
    
    .btn-carousel-left,
    .btn-carousel-right {
        position: absolute; /* Fixe les boutons à une position absolue dans le conteneur */
        top: 50%; /* Centré verticalement */
        transform: translateY(-50%); /* Ajustement précis du centrage vertical */
        z-index: 10; /* Les mettre au-dessus des autres éléments */
        cursor: pointer;
    }
    
    .btn-carousel-left {
        left: 100px; /* Distance du bord gauche */
    }
    
    .btn-carousel-right {
        right: 100px; /* Distance du bord droit */
    }
    
    span.material-symbols-outlined {
        color: #fff;
        background-color: #044040;
        border-radius: 50%;
        padding: 10px;
        font-size: 2.5rem; /* Taille uniforme pour les icônes */
        transition: transform 0.3s; /* Animation douce si on veut */
    }
    
    span.material-symbols-outlined:hover {
        transform: scale(1.2); /* Animation au survol */
    }
    .container-carousel-item img {
        margin: 0 1vw; /* Marges fixes entre les images */
        width: 200px;
        height: 200px;
        object-fit: contain; /* Assure que l'image garde ses proportions */
    }
    
    .container-carousel-item {
        display: flex; /* Garde un alignement horizontal des images */
        justify-content: center;
        align-items: center;
        width: 100%; /* Fixer la largeur */
        overflow: hidden; /* Empêche tout débordement inattendu */
    }
        
}
.container-project-item{
    height: 150vh;
    width: 95vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-direction: row;
    min-height: fit-content;
    
}

.container-card-item{
    background-color: #591c21;
    height: 70vh;
    min-height: 700px;
    width: 30vw;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    border: solid 1px rgba(50, 50, 93, 0.25);
    border-radius: 7px;
    overflow: hidden;
    margin-top: 1vw;
    margin-bottom: 1vw;
    img{
        width: 100% ;
        height: 40%;
        object-fit: cover;
        
    }
}

.container-card-item-description{
    color: #f2f2f2;
    margin-left: 2vw;
    margin-right: 2vw;
    height: 100%;
    p{
        height: 25%;
    }
}
.btn-more{
    width: 30%;
}
.container-btn-more{
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    margin-top: 2vh;
}
.container-stack{
    h4{
        text-transform: uppercase;
    }
    img{
        width: 50%;
        height: 50%;
        object-fit: fill;
    }
}
.container-stack-img{
    display: flex;
    justify-content: space-around;
    img{
        width: 80px;
    }
}

/* Style de la modal */
.modal {
    display: none; /* La modal est cachée par défaut */
    position: fixed;
    z-index: 1; /* Positionner la modal au-dessus du contenu */
    left: 0;
    top: 0;
    width: 100%; /* Largeur de la modal */
    height: 100%; /* Hauteur de la modal */
    overflow: auto; /* Ajouter un scroll si nécessaire */
    background-color: rgba(0, 0, 0, 0.7); /* Fond semi-transparent */
}

/* Style du contenu de la modal */
.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    width: 80%; /* Taille de la modal */
    max-width: 1000px; /* Largeur max de la modal */
}

/* Style du bouton de fermeture */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.success-message {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #4CAF50; /* Vert pour succès */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 1000;
}

.error-message {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #F44336; /* Rouge pour erreur */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 1000;
}

.container-card-skill{
    background-color: #591c21;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.container-card-skill{
    width: 70vw;
    height: 45vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.design-skill{
    border-right: solid 2px #f2f2f2;
    height: 70%;
    width: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .container-img-skill{
        border-radius: 50%;
        background-color: #044040;
        width: 13vh;
        height: 13vh;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
        img{
            width: 10vh;
        }
    }
    h2{
        color: #f2f2f2;
    }
    ul{
        color: #f2f2f2;
    }
    
}
.devops-skill{
    border-right: solid 2px #f2f2f2;
    height: 70%;
    width: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .container-img-skill{
        border-radius: 50%;
        background-color: #044040;
        width: 13vh;
        height: 13vh;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
        img{
            width: 10vh;
        }
    }
    h2{
        color: #f2f2f2;
    }
    ul{
        color: #f2f2f2;
    }
}
.other-skill{
    height: 70%;
    width: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .container-img-skill{
        border-radius: 50%;
        background-color: #044040;
        width: 13vh;
        height: 13vh;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
        img{
            width: 10vh;
        }
    }
    h2{
        color: #f2f2f2;
    }
    ul{
        color: #f2f2f2;
    }
}
.container-other-skill{
    width: 96vw;
    display: flex;
    justify-content: center;
}