/* Font */

@font-face {
    font-family: AlmarenaLight;
    src: url(src/font/almarena-light-webfont.woff2);
  }
  @font-face {
    font-family: AlmarenaRegular;
    src: url(src/font/almarena-regular-webfont.woff2);
  }
  @font-face {
    font-family: AlmarenaBold;
    src: url(src/font/almarena-bold-webfont.woff2);
  }
  @font-face {
    font-family: AlmarenaDisplayLight;
    src: url(src/font/almarena-display-light-webfont.woff2);
  }
  @font-face {
    font-family: AlmarenaDisplayRegular;
    src: url(src/font/almarena-display-regular-webfont.woff2);
  }
  @font-face {
    font-family: AlmarenaDisplayBold;
    src: url(src/font/almarena-display-bold-webfont.woff2);
  }

/* Init */

::-webkit-scrollbar{
    display: none;
}

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: AlmarenaRegular;
text-decoration: none;
list-style: none;
color:#000;
}
/* Preloader */

.preloader{
    position: fixed;
    background-color: #fff;
    z-index: 99999999999999999999;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.preloader-container{
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: 30%;
}

@keyframes preloader {
    0%{
        transform: translateX(15vw);
    }
    16.6%{
        transform: translateX(1vw);

    }
    33.3%{
        transform: translateX(-14.3vw);

    }
    50%{
        transform: translateX(-31vw);

    }
    66.6%{
        transform: translateX(-46.5vw);

    }
    83.3%{
        transform: translateX(-60.5vw);

    }
    100%{
        transform: translateX(-78.5vw);

    }
}

.preloader-logo{
    width: 80%;
}

.preloader-entities{
    overflow: hidden;
    margin-top: 3.5%;
    display: flex;
    align-items: center;
    width: 60%; 
    height: 10%;

}

.preloader-groupe{
    transform: translateX(-78.5vw);
    animation: preloader 5s ease-in-out;
    width: 100%;
    display: inline-block;
}

.preloader-line{
    width: 500%;
    display: flex;
}
.preloader-crea{
    margin: 0 3%;
    height: 300%;
    width: 50%;
}
.preloader-com{
    margin: 0 3%;
    height: 30%;
    width: 90%;
}
.preloader-it{
    margin: 0 3%;
    height: 30%;
    width: 75%;
}
.preloader-rh{
    margin: 0 3%;
    height: 30%;
    width: 65%;
}
.preloader-mark{
    margin: 0 3%;
        height: 30%;
    width: 62%;
}

.preloader-reveal{
    transform: translateY(-100%);
    opacity: 0;
}

.H{
    transform: translateY(100%);
    display: inline-block;
}
.e{
    transform: translateY(100%);
    display: inline-block;
}
.l1{
    transform: translateY(100%);
    display: inline-block;
}
.l2{
    transform: translateY(100%);
    display: inline-block;
}
.o{
    transform: translateY(100%);
    display: inline-block;
}

/* Nav Menu */

.nav-menu{
    opacity: 0;
    position: fixed;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
}

.nav-list{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.nav-list li{
    cursor: none;
    height: 40vw;
    display: flex;
    align-items: center;
   font-size: 5vw; 
}

.nav-list li a{
    cursor: none;
    font-family: AlmarenaDisplayRegular;
    white-space: nowrap;
    margin: 0 3%;
}
.nav-background{
    position: absolute;
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 100vh;
    z-index: -9999999999;
}

.nav-grid{
    width: 150vw;
    height: 96%;
    display: grid;
    gap: 10px;
    grid-template-rows: 23vw 23vw;
    grid-template-columns:  17vw 17vw 17vw 17vw 17vw 17vw 17vw 17vw 17vw 17vw;
}

#member-1{
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 2/6;
}

.member-name h1{
    display: inline-block;
}

.member-pics-1{
    width: 100%;
    height: 100%;
    background: url('src/img/jean.jpg');
    background-size: 70%;
    background-repeat: no-repeat;
    opacity: 0;
    background-position: center;
    transition: all 0.2s ease-in-out;

}

#member-2{
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 1/1;
}

.member-pics-2{
    width: 100%;
    height: 100%;
    background: url('src/img/bertrand.jpg');
    background-size: 70%;
    background-repeat: no-repeat;
    opacity: 0;
    background-position: center;
    transition: all 0.2s ease-in-out;

}

#member-3{
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 2/2;
}

.member-pics-3{
    width: 100%;
    height: 100%;
    background: url('src/img/arnaud.jpg');
    background-size: 70%;
    background-repeat: no-repeat;
    opacity: 0;
    background-position: center;
    transition: all 0.2s ease-in-out;

}
#member-4{
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 1/3;
}

.member-pics-4{
    width: 100%;
    height: 100%;
    background: url('src/img/romain.jpg');
    background-size: 70%;
    background-repeat: no-repeat;
    opacity: 0;
    background-position: center;
    transition: all 0.2s ease-in-out;

}
#member-5{
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 1/9;
}

.member-pics-5{
    width: 100%;
    height: 100%;
    background: url('src/img/stephane.jpg');
    background-size: 70%;
    background-repeat: no-repeat;
    opacity: 0;
    background-position: center;
    transition: all 0.2s ease-in-out;

}

#member-6{
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 2/8;
}

.member-pics-6{
    width: 100%;
    height: 100%;
    background: url('src/img/christine.jpg');
    background-size: 70%;
    background-repeat: no-repeat;
    opacity: 0;
    background-position: center;
    transition: all 0.2s ease-in-out;

}

#member-7{
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 2/4;
}

.member-pics-7{
    width: 100%;
    height: 100%;
    background: url('src/img/jeremie.jpg');
    background-size: 70%;
    background-repeat: no-repeat;
    opacity: 0;
    background-position: center;
    transition: all 0.2s ease-in-out;

}

#member-8{
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 1/7;
}

.member-pics-8{
    width: 100%;
    height: 100%;
    background: url('src/img/olivier.jpg');
    background-size: 70%;
    background-repeat: no-repeat;
    opacity: 0;
    background-position: center;
    transition: all 0.2s ease-in-out;

}

#member-9{
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 1/5;
}

.member-pics-9{
    width: 100%;
    height: 100%;
    background: url('src/img/eden.jpg');
    background-size: 70%;
    background-repeat: no-repeat;
    opacity: 0;
    background-position: center;
    transition: all 0.2s ease-in-out;

}

#member-10{
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 2/10;
}

.member-pics-10{
    width: 100%;
    height: 100%;
    background: url('grz');
    background-size: 70%;
    background-repeat: no-repeat;
    opacity: 0;
    background-position: center;
    transition: all 0.2s ease-in-out;

}

.member-opacity{
    opacity: 0.6;
    transition: all 0.2s ease-in-out;
}

.nav-socials{
    position: absolute;
    bottom: 0;
    width: 100vw;
    height: 5vw;
    padding: 1vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-member-media{
    width: 12%;
    display: flex;
    justify-content: space-between;
    margin-right:5%;
}

.nav-socials-logo{
    width: 30%;
    display: flex;
    margin-left: 5%;
}

.nav-socials-media{
    display: flex;
    width: 40%;
}

.nav-logo{
    width: 30%;
}

.nav-logo svg{
    width: 100%;
}

.menu-hidden{
    display: none;
}

.button-active{
    transition: all 0.2s ease-in-out;
    transform: rotateZ(-45deg);
}
.menu-active{
    transition: all 0.2s ease-in-out;
    display: block;
}

.list-hide{
    opacity: 0!important;
}

.nav-cursor {
display: none;
 width: 150px;
 height: 150px;
 position: fixed; /* Utilisez "fixed" au lieu de "absolute" pour que le curseur suive la souris sur toute la page */
 pointer-events: none; /* Assurez-vous que le curseur ne bloque pas les interactions avec les éléments sous-jacents */
 z-index: 9999; /* Assurez-vous que le curseur est au-dessus de tous les autres éléments */
 transform: translate(-50%, -50%); /* Positionne le curseur exactement sur la souris */
 transition: transform 0.15s ease; /* Ajoute une transition fluide pour le mouvement */
}

.nav-cursor svg{
height: 150px;
width: 150px;
fill: var(--color-text);
}

.nav-option{
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
}


  /* Nav Bar */

  header{
    width: 100vw;
    height: 12vh;
    position: fixed;
    z-index: 9999;
    background-color: #fff  ;
  }
  .header-theme{
    width: 100%;
    height: 100%;
    padding: 1%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo{
    width: 20%;
    transform: translate(-1vw, 7vw);
    opacity: 1;
    margin-left: 2%;
  }

  .navbar{
    width: 40%;
    height: 100%;
  }

  .navbar nav{
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
  }

.navbar nav ul li{
    /* overflow: hidden; */
    display: flex;
    justify-content: space-evenly;
    height: 100%;
    width: 100%;
}

.navbar nav ul{
    width: 100%;
}

.navbar nav ul li a{
    /* display: inline-block; */
    align-items: center;
    font-size: 1vw
}

.nav-down{
    transform: translateY(0vw);
    transition: all 0.4s ease-in-out;

}

.nav-up{
    transform: translateY(-10vw);
    transition: all 0.4s ease-in-out;

}
  .menu-burger{
    cursor: pointer;
    width: 3%;
    transition: all 0.2s ease-in-out;
  }
  .menu-burger svg{
    width: 100%;
  }



/* Main */

.container{
    width: auto;
    height: auto;
}

.container-wrapper{
    width: 100vw;
    height: auto;
}

.home-page{
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.home-text{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    user-select: none;
}

.home-text h1{
    overflow: hidden;
    font-size: 40vw;
    line-height: 90%;
    font-family: AlmarenaRegular;
}

.customers-page{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    border-bottom: #000 solid 1px;
}

.intro-page{
    height: 100vh;
    width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.content-page{
    position: relative;
    width: 50%;
}
    

.branch{
    height: 100%;
    display: flex;
}

.customers{
    overflow: hidden;
    display: flex;
    background-color: #fff;
}

.customer-name{
    border-left: #000 solid 1px;
    border-right: #000 solid 1px;
    height: 100%;
    width: 8vw;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    padding:2vw;
}
.intro-text{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
}
.almarena{
    position: absolute;
    top: -4.3vw;
    left: 20.4vw;
  }

  .expertise{
    position: absolute;
    top: 2.2vw;
    right: 26.8vw;
  }
  .et{
    position: absolute;
    top: 2.2vw;
    right: 11.9vw;
  }
  .creation{
    position: absolute;
    top: 2.2vw;
    right: 3.7vw;
  }
  .a{
    position: absolute;
    top: 4.3vw;
    right: 29.6vw;
  }

  .votre{
    position: absolute;
    top: 4.3vw;
    right: 25.3vw;
  }
  .service{
    position: absolute;
    top: 4.3vw;
    right: 19vw;
  }

.intro-text p{
    flex-grow: 1;
    font-size: 1.8vw;
    text-align: center;
    margin: 0;
}

.text-page-p{
    display: flex;
    justify-content: center;
    align-items: center;
}
.intro-text h1{
    display: flex;
    font-size: 1.8vw;


}

.intro-text h1 span{
    margin: 0 0.5%;
}

.icon-plus{
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.customers-title{
    writing-mode: vertical-lr;
    transform: rotateZ(180deg);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6vw;
}

.customers-title h1{
    font-family: AlmarenaLight;
}
.customer-info{
    height: 100%;
        width: 0vw;
        opacity: 0;
        transition: all ease-in-out 0.5s;

}

.selected{
    width: 50vw;
    padding: 5vw;
    transition: all ease-in-out 0.5s;
}

.opacity{
    opacity: 1;
    transition: all ease-in-out 0.5s;

}

.init{
    display: none;
}

.info-head{
    display: flex;
    width: 100%;
    margin-bottom: 10%
}

.info-bottom{
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 40%;
}

.info-name{
    width: 80%;
    display: flex;
    flex-direction: column;
}
.info-name h2{
font-size: 2vw;
font-family: AlmarenaLight;
}

.info-name p{
    margin: 5% 0;
    font-size: 1.1vw;

}
.info-logo{
    width: 50%;
    display: flex;
    justify-content: flex-end;
}
.info-logo svg{
    height: 100%;
    width: 60%;
}

.info-tags{
    width: 20%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.info-tags h2{
    font-size: 2vw;
    margin-bottom: 10%;


}
.info-tags p{
    font-size: 1.1vw;
    margin: 6% 0;
}

.info-button{
    margin: 8% 0;
}
.button-customer{
    font-size: 1.1vw;
    padding-left: 1vw;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    display: flex;
    width: 20%;
    border-radius: 50px;
    border: solid 1px #000;
}

.transition-page{
    width: 100%;
    height: 40vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    perspective: 800px;
}

.image-transition{
    width: 0vw;
    height: 0vw;
    background: url(almarena.png);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 50px;
    transform: rotateX(90deg);
    transform-style: preserve-3d;   
}

.team-page{
    width: 100%;
    height: auto;
}

.team-container{
    width: 100%;
    height: auto;
}

.team-cpt{
    width: 100%;
    height: 15vh;
    border-top: #000 solid 1px;
    border-bottom: #000 solid 1px;
    display: flex;
    padding: 1%;
    padding-left: 5%;

}

.team-container-mobile{
    display: none;
}

.cpt-member{
    position: relative;
    font-size: 2vw;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
}

.member-info svg{
    height: 4vh;
    width: 1.5vw;
}

.cpt-member h1{
    font-family: AlmarenaLight;
}
.member-info{
    padding: 1%;
    width: 30%;
    display: flex;
    justify-content: flex-end;
}
.member-info p{
    width: 59%;
    font-size: 0.9vw;
}

.member-zone p{
font-size: 1.1vw;
}

.member-media{
    width: 12%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.member-media svg{
    width: 1.2vw;
}

.member-pics{
    width: 17vw;
    height: 23vw;
    position: absolute;
    left: 45%;
    bottom: 10%;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    transform: rotateZ(-5deg);
}
.member-pics img{
    width: 100%;
    height: 100%;
}

.insta{
    display: flex;
    align-items: center;
}
.linkedin{
    display: flex;
    align-items: center;
}
.behance{
    display: flex;
    align-items: center;
}

.member-zone{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.reveal{
    opacity: 0;
    display: none;
}

.reveal-flex{
    opacity: 0;
    display: flex;
}

.member-info p{
    margin-right: 10%;
}

.team-annoucement{
    width: 100%;
    height: 80vh;
}

.team-name{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.team-title{
    font-family: AlmarenaDisplayBold;
    font-size: 30vw;
    transform: translateX(90%);
}

.text-zone{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

}

.text-zone p{
margin-bottom: 5%;
font-size: 1vw;
}

.text-zone h1{
margin-bottom: 4%;
font-size: 5vw;

}

.text-zone-p{
    width: 50%;
}

.text-zone-first{
    position: absolute;
    overflow: auto;
    height: 100%;
    width: 100%;
    display: flex;
    z-index: 10;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}
.text-zone-second{
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    z-index: 10;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}
.text-zone-third{
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    z-index: 10;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}
.text-zone-fourth{
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    z-index: 10;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}

.text-page{
    width: 100%;
    height: 60vh;
    display: flex;
    align-items: center;
}

.text-horizontal{
    display: flex;
    height: 100%;
    width: 100%;
}

.Lorem{
    transform: translate(10vw, 10vw);
}
.Ipsum{
    transform: translate(10vw, 10vw);
}
.Dolor{
    transform: translate(10vw, 10vw);
}
.Sit{
    transform: translate(10vw, 10vw);
}
.Amet{
    transform: translate(10vw, 10vw);
}

.Lorem-second{
    transform: translate(-10vw, -10vw);
}
.Ipsum-second{
    transform: translate(-10vw, -10vw);
}
.Dolor-second{
    transform: translate(-10vw, -10vw);
}
.Sit-second{
    transform: translate(-10vw, -10vw);
}
.Amet-second{
    transform: translate(-10vw, -10vw);
}

/* Footer */

.footer{
    height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.footer-background{
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    padding: 2%;


}

.footer-text{
    position: absolute;
    font-size: 1.5vw;
    transform: translate(38vw, -12vw);
}

.footer-title{
    font-size: 9vw;
    cursor: none;
    white-space: nowrap;
    user-select: none;
}

.footer-media{
    justify-content: center;
    font-size: 1vw;
    width: 100%;
    height: 15%;
    position: relative;
    display: flex;
    background-color: transparent;
    align-items: center;
    z-index: 6;
    border-top: #000 solid 1px;
}

.f-media-container{
    justify-content: space-between;
    align-items: center;
    display: flex;
    padding: 2%;
    width: 95%;

}





.f-media-zone{
    display: flex;
    align-items: center;
    width: 10%;
}

.f-logo{
    width: 8%;
}

.f-logo svg{
    width: 100%;
}

.f-media{
     display: flex;
     justify-content: space-around;
     width: 8%;
}

.f-media svg{
     width: 90%;
}

.f-location{
    width: 10%;
}

.f-street{
    width: 11%;
}

.footer-cursor {
    display: none;
     width: 150px;
     height: 150px;
     position: fixed; /* Utilisez "fixed" au lieu de "absolute" pour que le curseur suive la souris sur toute la page */
     pointer-events: none; /* Assurez-vous que le curseur ne bloque pas les interactions avec les éléments sous-jacents */
     z-index: 9999; /* Assurez-vous que le curseur est au-dessus de tous les autres éléments */
     transform: translate(-50%, -50%); /* Positionne le curseur exactement sur la souris */
     transition: transform 0.15s ease; /* Ajoute une transition fluide pour le mouvement */
}
    
.footer-cursor svg{
    height: 150px;
    width: 150px;
    fill: var(--color-text);
}
    
.footer-option{
       position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
}

#footer-matter{
    position: absolute;
    z-index: 5;
    width: 100vw;
    height: 85%;
    top: 0;
}

#matterA{
    display: none;
}
#matterB{
    display: none;
}
#matterC{
    display: none;
}



/* creative */

.services-page{
    width: 100%;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(croi.svg);
    background-size: 40%;
    background-repeat: space;

}

.services-list{
    width: 90%;
    height: 80%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-cpt-list{
    width: 100%;
    height: 80%;

}

.services-info{
    position: absolute;
    height: 80%;
    width: 30%;
    right: 0;
    display: block;
    font-size: 1.5vw;
}

.services-cpt{
    display: flex;
    margin: 0.7% 0%;
    width: 15%;
    height: 8%;
    
}

.services-name{
    padding: 0.8% 1.5%;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    font-size: 1.5vw;
    transition: all ease-in-out 0.5s;
    border: 1px solid #000;
    background-color: #fff;
}
.services-name:hover{
background-color: #000;
color: #fff;
transition: all ease-in-out 0.5s;

}
.services-name-active{
background-color: #000;
color: #fff;
transition: all ease-in-out 0.5s;

}

.services-number{
    font-size: 1vw;
}

.services-2{
    transform: translate(60vw,-3vw);
}
.services-3{
    transform: translate(30vw,-2vw);
}
.services-4{
    transform: translate(-3vw,0vw);
}
.services-5{
    transform: translate(15vw,-5vw);
}
.services-6{
    transform: translate(45vw,-6vw);
}
.services-7{
    transform: translate(60vw,-3vw);
}

.intro-title{
    font-size: 2vw;
    width: 24%;
}
.intro-content{
    font-size: 1.5vw;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 14vw;
    width: 40%;
}

.intro-customers{
    position: relative;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
}

.intro-logo{
    transform: translate(25vw, -7vw);
    position: absolute;
}

.intro-logo svg{
    width: 10vw;
}

.image-section{
    width: 100%;
    height: 40vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-div{
    height: 100%;
    overflow: hidden;
    width: 0%;
}
.image-div img{
    height: auto;
    width: 100vw;
}

.website-link h1{
    font-size: 20vw;
}
.website-link {
    display: flex;
    justify-content: center;
    cursor: none;
}
.website-link a {
    cursor: none;
}

.website-cursor {
    display: none;
     width: 150px;
     height: 150px;
     position: fixed; /* Utilisez "fixed" au lieu de "absolute" pour que le curseur suive la souris sur toute la page */
     pointer-events: none; /* Assurez-vous que le curseur ne bloque pas les interactions avec les éléments sous-jacents */
     z-index: 9999; /* Assurez-vous que le curseur est au-dessus de tous les autres éléments */
     transform: translate(-50%, -50%); /* Positionne le curseur exactement sur la souris */
     transition: transform 0.15s ease; /* Ajoute une transition fluide pour le mouvement */
    }
    
.website-cursor svg{
    height: 150px;
    width: 150px;
    fill: var(--color-text);
    }
    
.website-option{
       position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
}

.branch-info{
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.branch-text-zone{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.branch-title{
    font-family: AlmarenaBold;
    font-size: 2vw;
    width: 87%;
}

.branch-line{
    display: flex;
    justify-content: space-evenly;
}

.branch-paragraph{
    width: 40%;
}

.paragraphs{
    margin: 3% 0;
    font-size: 1vw;
}

.full-screen-active{
    overflow: hidden;
}

/* Media Queries */

@media only screen and (max-device-width : 1024px) {
    .home-page {
        height: 45vh;
    }

    .intro-page {
        height: 60vh;
    }

    .intro-text h1 {
        font-size: 2.5vw;
    }

    .intro-text p {
        font-size: 2.5vw;
    }

    .content-page {
        width: 70%;
    }

    .almarena{
        position: absolute;
        top: -5.9vw;
        left: 28.8vw;
      }
    
      .expertise{
        position: absolute;
        top: 2.85vw;
        right: 38.2vw;
      }
      .et{
        position: absolute;
        top: 2.85vw;
        right: 16.9vw;
      }
      .creation{
        position: absolute;
        top: 2.85vw;
        right: 5.2vw;
      }
      .a{
        position: absolute;
        top: 5.8vw;
        right: 39.6vw;
      }
    
      .votre{
        position: absolute;
        top: 5.8vw;
        right: 33.5vw;
      }
      .service{
        position: absolute;
        top: 5.8vw;
        right: 24.7vw;
      }
      .customers-title {
        writing-mode: initial; 
        transform: rotateZ(0deg); 
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2.5vw;
    }

    .branch {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .customer-name {
        border-left: #000 solid 0px;
        border-right: #000 solid 0px;
        border-top: #000 solid 1px;
        border-bottom: #000 solid 1px;
        height: 8vh;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
        align-items: center;
        padding: 2vw;
    }

    .icon-plus {
        width: 4%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .customer-info {
    height: 0vw;
    border-bottom: #000 solid 1px;
    }

    .customers-page {
        width: 100%;
        height:100vh;
        display: flex;
        justify-content: center;
        border-bottom: #000 solid 0px;
    }

    .team-annoucement {
        width: 100%;
        height: 40vh;
    }

    
.footer {
    height: 60vh;
    width: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.home-text h1 {
    overflow: hidden;
    font-size: 45vw;
    line-height: 90%;
    font-family: AlmarenaRegular;
}
.footer-text {
    position: absolute;
    font-size: 2.5vw;
    transform: translate(33vw, -18vw);
}

.menu-burger {
    cursor: pointer;
    width: 10%;
    transition: all 0.2s ease-in-out;
}
.navbar nav ul li a {
    display: none;
}
.navbar nav ul li {
    justify-content: flex-end;
    padding-right: 5%;
}

header {
    height: 9vh;
}

.transition-page {
    height: 30vh;
}

.nav-up{
    transform: translateY(-15vw);

}
.text-page {
    width: 100%;
    height: 45vh;
    display: flex;
    align-items: center;
}

.customers {
    flex-direction: column;
}

.selected {
    width: 100vw;
    height: 60vh;
}

.info-name p {
    margin: 5% 0;
    font-size: 2.1vw;
}

.info-name h2 {
    font-size: 3vw;
    font-family: AlmarenaLight;
}

.info-tags h2 {
    font-size: 3vw;
    margin-bottom: 10%;
}

.info-tags p {
    font-size: 2.1vw;
    margin: 6% 0;
}

.button-customer {
    font-size: 3vw;
    padding-left: 2vw;
    padding-top: 0.8vw;
    padding-bottom: 0.8vw;
    display: flex;
    width: 20%;
    border-radius: 50px;
    border: solid 1px #000;
}

.team-cpt {
    width: 100%;
    height: 6vh;
    border-top: #000 solid 1px;
    border-bottom: #000 solid 1px;
    display: flex;
    padding: 1%;
    padding-left: 5%;
}

.member-info p {
    width: 100%;
    font-size: 1.6vw;
}

.member-zone p {
    font-size: 2vw;
}

.nav-list li {
    height: auto;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.nav-list {
    justify-content: center;
}


.preloader-container{
    width: 60%;
}

}

@media only screen and (max-device-width : 786px) {
    .intro-text p {
        font-size: 3.5vw;
    }

    .member-name h1 {
        font-size: 8vw;
    }
    
    .member-zone {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .member-info {
        padding: 1%;
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .member-info svg {
        height: auto;
        width: 5vw;
    }

    .member-pics {
        opacity: 0;
        display: block!important;
    }

    .member-container-mobile{
        display: block;
        width: 100%;
        height: auto;

    }

    .team-container-mobile{
        display: block;
    }
    .team-container{
        display: none;
    }
    
    .cpt-member {
        position: relative;
        font-size: 2vw;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        


}

.member-info p {
    width: 100%;
    font-size: 3vw;
}

.member-zone svg{
    width: 8%;
}

.team-cpt {
    padding-right: 5%;
}

.member-pics {
    width: 17vh;
    height: 23vh;
    position: initial;
    transition: all 0.2s ease-in-out;
    transform: rotateZ(0deg);
}

.member-media-mobile{
    display: flex;
    justify-content: center;
    align-items: center;
}

.member-media {
    margin-left: 10%;
    width: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
}
.member-media svg {
    width: 50%;
}

.member-zone p {
    font-size: 3vw;
}

.customer-info {
    display: none;
    height: 0vw;
    border-bottom: #000 solid 1px;
}

.selected {
    width: 100vw;
    height: 60vh;
}

.display-block{
    display: block;
}

}