/* Caroucel */

.caroucel {
    height: 100px;
}

body {
    --color-secondary: rgba(254, 234, 174, 0.6);
}

.caroucel p {
    left: 0% !important;
    right: 0% !important;
}

.caroucel .step-1 {
    position: absolute;
    opacity: 0;
    animation-name: step-1;
    animation-iteration-count: infinite;
    animation-duration: 15s;
    animation-timing-function: ease-in-out;

}

.caroucel .step-2 {
    position: absolute;
    height: 0px;
    animation-name: step-2;
    animation-iteration-count: infinite;
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
  
}

.caroucel .step-3 {
    position: absolute;
    opacity: 0;
    animation-name: step-3;
    animation-iteration-count: infinite;
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
}

.caroucel .step-4 {
    position: absolute;
    opacity: 0;
    animation-name: step-4;
    animation-iteration-count: infinite;
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
}

/* Animation caroucel @KeyFrames */

@keyframes step-1 {
    0% {
        opacity: 0;
    }
    7% {
        opacity: 1;
    }
    18% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes step-2 {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    32% {
        opacity: 1;
    }
    43% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }

}

@keyframes step-3 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    57% {
        opacity: 1;
    }
    68% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes step-4 {
    0% {
        opacity: 0;
    }
    75% {
        opacity: 0;
    }
    83% {
        opacity: 1;
    }
    93% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


/* Other Style */
.welcome {
    position: relative;
    background-image: url('../media/home/thibaud.png');
    background-position: top;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
}


.welcome-filter {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
}

.welcome-center {
    position: absolute;
    right: 0;
    left: 0;
    top: 40%;
    bottom: 0;
}

@media screen and (max-height: 700px) {
    .welcome-center {
        top: 30%;
    }
}

@media screen and (max-height: 500px) {
    .welcome-center {
        top: 20%;
    }
}



.btn {
    border: 1px solid white; 
    border-radius: 4px; 
    padding: 2vh 1vw;
}

.container span {
    color: orange;
}


.a-propos lottie-player {
    min-width: 200px;
    max-width: 400px;
}

.a-propos p {
 margin-top: 8vh;
}

  @media screen and (max-width: 1200px) {
    .a-propos p {
        margin-top: 0px;
    }
}


.section-passion .section-passion-animation {
    width: 10vw;
    height: 10vw;
    min-width: 150px;
    min-height: 150px;
    max-width: 300px;
    max-height: 300px;
    object-fit: cover;
}

.section-passion hr {
    border: none;
}

.skill {
    --skill-height: 8px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding:8px;
    width: auto;
    height: var(--skill-height);
}

.skill-value {
    margin: 0px;
    padding: 0px;
    color: rgba(254, 234, 174, 0.6);
    text-align: right;
}

.skill-bar {
    position: absolute;
    background-color: rgba(254, 234, 174, 0.6);
    border-radius: 12px;
    height: var(--skill-height);
    transition: 1s;
    transition-timing-function: ease-in-out;
}



.skill-technique {
    color: white;
    padding-top: 20px;
    padding-bottom: 7px;
}

.skill-humain {
    color: orange;
    padding-top: 20px;
    padding-bottom: 7px;
}


.mon-parcours {
    border-left: 2px solid var(--color-secondary);
}

.mon-parcours div {
    margin-top: 3%;
}

.mon-parcours img {
    width: max-content;
    max-width: 200px;
}