@font-face {
    font-family: 'Gunterz-Black';
    src: url('../assets/Gunterz-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: black;
    scroll-behavior: smooth;
}

.website-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.no-scroll {
    overflow: hidden;
    height: 100%; /* S'assure que le corps utilise toute la hauteur */
    }

.title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.line {
    position: relative;
    display: block;
    width: 10vw;
    height: .1rem;
    background-color: white;
    margin: -2rem 0 3rem 3rem;
}

.title h1 {
    position: relative;
    display: flex;
    font-size: 2rem;
    padding: 3rem;
    color: white;
    font-family: 'Gunterz-Black';
    margin: 0 0 0 0;
}

@media only screen and (max-width: 600px) {
    .line {}
    .title h1 {font-size: 1.5rem;}
}






/* 000000000000000000000000000000000000000000000000000000 BURGER MENU 000000000000000000000000000000000000000000000000000000 */


.burger-menu {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    height: 4.2rem;
    width: 4.2rem;
    z-index: 10;
    margin: .5rem;
    border-radius: 5rem;
    background-color: white;
    overflow: hidden;
    cursor: pointer;
    transition: .2s;
    box-shadow: 3px 4px 5px black;
}

.burger-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.burger-menu img {
    width: 3.55rem;
    height: 3.55rem;
    object-fit: cover;
    margin: 7.5% 7.5%;
}

.burger-options {
    position: relative;
    display: none;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    transition: .1s;
}

.burger-icon {
    position: relative;
    display: flex;
    text-decoration: none;
}

.burger-options i {
    position: relative;
    display: block;
    font-size: 1.3rem;
    margin: 1rem 0 .7rem 0;
    color: black;
    transition: .2s;
}

.burger-options i:hover {
    color: red;
}


.burger-menu:hover .burger-options {display: flex;}

.burger-menu:hover {
    height: 14rem;
}







/* 000000000000000000000000000000000000000000000000000000 HEADER SECTION 000000000000000000000000000000000000000000000000000000 */


.header {
    position: relative;
    display: flex;
    height: 100vh;
    width: 100%;
    background-color: black;
}

.parallax-1 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.main-logo {
    position: fixed;
    display: flex;
    height: 20rem;
    width: 20rem;
    filter: blur(0px);
}

.header-zoom {
    animation: header-bye linear;
    animation-timeline: view();
    animation-range-start: cover 50%;
    animation-range-end: contain 150%;
}

@keyframes header-bye {
    from {transform: scale(1);filter: blur(0)}
    to {transform: scale(.86);filter: blur(3px)}
}




@media only screen and (max-width: 600px) {
  .main-logo {
    height: 13rem;
    width: 13rem;
  }
}








/* 000000000000000000000000000000000000000000000000000000 US SECTION 000000000000000000000000000000000000000000000000000000 */

.us {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: black;
    margin: none;
    padding: none;
}

.mountain-transition {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100vw;
    top: -7vw;
}

.mountain-transition img {
    position: relative;
    display: flex;
    width: 50vw;
    max-height: 100vh;
}

.us-container {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 55vw;
}

.us-1 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 100%;
}

.us-1 h1 {
    position: relative;
    display: flex;
    font-size: 2rem;
    padding: 3rem;
    color: white;
    text-align-last: center;
    font-family: 'Gunterz-Black';
}

.us-1 p {
    position: relative;
    display: flex;
    font-size: 1rem;
    padding: 3rem;
    color: white;
    text-align: center;
    font-family: 'Gunterz-Black';
}

.us-2 {
    position: relative;
    display: flex;
    justify-content: center;
    width: 50%;
    height: 100%;
}

.us-img-container {
    position: relative;
    display: flex;
    justify-content: center;
    width: 80%;
}

.us-2 img {
    position: absolute;
    display: block;
    width: 100%;
    padding: 2rem;
}

.zoom-in {
    animation: reveal linear;
    animation-timeline: view();
    animation-range-start: cover 0%;
    animation-range-end: contain 40%;
}

@keyframes reveal {
    from {transform: scale(.9);}
    to {transform: scale(1);}
}




@media only screen and (max-width: 1200px) {
    .us-1 h1 {
      font-size: .9rem;
      padding: 1rem;
    }
    .us-1 p {
      font-size: .9rem;
      padding: 1rem;
    }
}

@media only screen and (max-width: 600px) {
    .mountain-transition {
        top: -10vw;
    }
    .mountain-transition img {
        width: 70vw;
    }
    .us-container {
    flex-direction: column-reverse;
      height: 200vw;
    }
    .us-1, .us-2 {
        width: 100%;
    }
}








/* 000000000000000000000000000000000000000000000000000000 WORK SECTION 000000000000000000000000000000000000000000000000000000 */


.work {
    position: relative;
    display: flex;
    background-color:black;
}

.work-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}

.vid-grid {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 80%;
}

.vid-container {
    position: relative;
    display: flex;
    height: 15rem;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 2rem;
    margin-bottom: 2vh;
    cursor: pointer;
    overflow: hidden;
}

.vid-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.9rem;
    transition: .25s;
}

.data {
    position: absolute;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.data-child {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33%;
    height: 100%;
    opacity: 0;
    transform: translateY(5rem);
    transition: .25s;
}

.data-child-logo {
    position: relative;
    display: block;
    height: 60%;
    filter: brightness(0) invert(1) drop-shadow(1px 1px 2px rgba(0,0,0,1));
}

.data-child-description {
    position: relative;
    display: flex;
    font-size: 1.3rem;
    padding: 1rem;
    color: white;
    text-align: center;
    text-shadow: 1px 1px 2px black;
    font-family: 'Gunterz-Black';
}

.data-child-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    text-decoration: none;
    background-color: white;
    box-shadow: 2px 2px 8px black;
}

.data-child-btn i {
    position: relative;
    display: block;
    font-size: 4rem;
    color: black;
    transition: .15s;
}

.data-child-btn:hover i {
    color: white;
    text-shadow: 0px 0px 1rem black;
    transform: scale(1.1);
}

.vid-container:hover .vid-background {
    transform: scale(1.02);
}

.vid-container:hover .data-child {
    opacity: 1;
    transform: translateY(0rem);
}

.popup {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    z-index: 10;
}

.popup.active {
    display: flex;
}

.popup-background {
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    backdrop-filter: blur(6px);
}

.popup-video-player-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    aspect-ratio: 16 / 9;
    background-color: black;
    
}

.popup-video-player {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 2;
    border: solid 8px black;
}

.popup-video-player-container svg {
    position: absolute;
    display: flex;
    z-index: 1;
    width: 10rem;
    height: 10rem;
    animation: rotation 2s linear infinite;
}

@keyframes rotation {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

.popup-video-player-container svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 5;
    stroke: white;
    stroke-linecap: round;
    transform: translate(.62rem, .62rem);
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: loading 4s linear infinite;
}

@keyframes loading {
    0%, 100% {stroke-dashoffset: 440;}
    50% {stroke-dashoffset: 0;}
    50.1% {stroke-dashoffset: 880;}
}






@media only screen and (max-width: 1200px) {
    .data-child-logo {
        height: 30%;
    }
    .data-child-description {
        font-size: .8rem;
    }
    .data-child-btn {
        width: 4rem;
        height: 4rem;
    }
    .data-child-btn i {
        font-size: 2.5rem;
    }
}

@media only screen and (max-width: 600px) {
    .vid-container {height: 8rem;}
    .data-child-logo {height: 35%;}
    .data-child-description {
        font-size: .4rem;
        padding: .1rem;
    }
    .data-child-btn {
        width: 3rem;
        height: 3rem;
    }
    .data-child-btn i {font-size: 2.2rem;}
    .popup-video-player-container {width: 90%;}
}








/* 000000000000000000000000000000000000000000000000000000 CONTACT SECTION 000000000000000000000000000000000000000000000000000000 */


.contact {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items:flex-start;
    min-height: 100vh;
    background-color: black;
}

.contact-container {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.agenda-container {
    position: relative;
    display: flex;
    z-index: 2;
    height: 5.5rem;
    width: 40%;
    justify-content: center;
    align-items: center;
    margin: 2rem 2rem 3.5rem 2rem;
    border-radius: 3rem;
    justify-content: center;
    background-color: white;
}

.calendly-popup-btn{
    position: relative;
    display: flex;
    font-size: 2rem;
    font-family: 'Gunterz-Black';
    color: black;
    text-decoration: none;
    text-align: center;
    line-height: 2rem;
    transition: .2s;
    margin: 0 2rem 0 2rem;
}

.calendly-popup-btn:hover {
    color: red;
}

.mini-contacts-container {
    position: relative;
    display: flex;
    z-index: 2;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 15%;
    width: 40%;
    margin-bottom: 5rem;
    
}

.mini-contacts-container a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
    width: 5rem;
    text-decoration: none;
    border-radius: 50%;
    background-color: white;
    cursor: pointer;
    transition: .3s;
}

.mini-contacts-container .mini-contact-1:hover {background-color:#b0f8b1;}
.mini-contacts-container .mini-contact-2:hover {background-color:#f9cad9;}
.mini-contacts-container .mini-contact-3:hover {background-color:#cad9f9;}

.mini-contacts-container a:hover .mini-contact {
    transform: scale(1.1) rotate(12deg);
}

.mini-contacts-container .mini-contact {
    position: relative;
    display: block;
    font-size: 1.5rem;
    color: black;
    transition: .2s;
}

.legend {
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    z-index: 1;
    align-items: center;
    justify-content: flex-end;
    bottom: 0;
    flex-direction: column;
    margin-bottom: 3rem;
}

.legend-1, .legend-2, .legend-3 {
    position: relative;
    display: block;
    font-size: 0.86rem;
    text-align: center;
    margin: .2rem 0 0 0;
    line-height: 1rem;
    font-family: 'Gunterz-Black';
    color: darkgray;
    cursor:auto;
    transition: .2s;
    }





@media only screen and (max-width: 1000px) {
    .agenda-container {width: 80%;}
    .mini-contacts-container {width: 80%;}
}

@media only screen and (max-width: 600px) {
    .mini-contacts-container a {
        height: 4rem;
        width: 4rem;
    }
    .calendly-popup-btn {font-size: 1.2rem;}
    .legend {margin-top: 3rem;}
}