/* FONT */
@font-face {
    font-family: "roboto";
    src: url(../fonts/Roboto/Roboto-Regular.ttf);
}

@font-face {
font-family: "oswald";
src: url(../fonts/Oswald/Oswald-Regular.ttf);
}

@font-face {
    font-family: "oswald-light";
    src: url(../fonts/Oswald/Oswald-ExtraLight.ttf);
    }

/* FONT */

/* GENERALE */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: black;
    font-family: 'oswald';
}
.container-fluid{
    padding-left: 0rem;
    padding-right: 0rem;
    overflow: hidden;
}
.white-block{
    border: solid 3px white;
    width: 370px;
    margin: auto;
    padding: 15px;
    margin-bottom: 40px;
    text-transform: uppercase;
}
.black-block{
    border: solid 3px black;
    width: 370px;
    margin: auto;
    padding: 15px;
    margin-bottom: 40px;
    text-transform: uppercase;
}
/* GENERALE */


/* NABAR */
nav{
    background-color: black;
}
.nav-link{
    color: rgba(154, 154, 154, 0.989);
    /* font-family: 'roboto'; */
}
.nav-link:hover, .nav-link:focus {
    color: white ;
}
.active {
    color: #ffffff !important; 
}
.nav-item a{
    text-transform: uppercase;
}
/* NABAR */

/* HOME */
.video-home{
    height: 70vh;
    width: 100%;
}
.title{
    text-align: center;
    color: white;
}

.project-img img{
    width: 900px;
    height: auto;
}

.logos{
    overflow: hidden;
    padding: 60px 0;
    white-space: nowrap;
    position: relative;
}
.logos-slide{
    animation: 80s slide infinite linear;
    display: inline-block;
}
.logos-slide img{
    height: 100px;
    margin: 0 40px;
}
.logos:hover .logos-slide{
    animation-play-state:paused
}
.logos:before, .logos:after{
    position: absolute;
    top: 0;
    width: 400px;
    height: 100%;
    z-index: 2;
    content: "";
}
.logos:after{
    background: linear-gradient(to right,rgba(255,255,255,0),black);
    right: 0;
}

.logos:before{
    background: linear-gradient(to left,rgba(255,255,255,0),black);
    left: 0;
}

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


/* HOME */

/* FOOTER */
footer{
    background: black;
    color: white;
}
footer a{
    text-decoration: none;
    color: white;
}
.logo-social{
    width: 30px;
    height: auto;
}
/* FOOTER */

/* PROJETS */
.project-poster{
    text-align: center;
}
.project-poster img{
    width: 450px;
    height: auto;

}
.project-text{
    margin: 10px;
    color: white;
    width: 700px;
    height: 500px;
    font-size: 25px;
    text-overflow: ellipsis;
    display: block;
    overflow: auto; 
    text-align: justify;

}
.project-type{
    writing-mode: vertical-lr;
    text-transform: uppercase;
    color: white;
    font-size: 35px;
    white-space: nowrap;
}
.project-date{
    float: right;
    margin-right: 30px;
    margin-top: 30px;
 }
/* PROJETS */


/* ScrollBar  */
        
::-webkit-scrollbar {
    width: 2px;
}

::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #e7e7e7;
    border: 1px solid #cacaca;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #363636;
}

/* ScrollBar  */

.service-name{
    color: rgba(154, 154, 154, 0.989);
    text-align: left;
    cursor: pointer;
}
.service-name::after {
    content: "  •  "; 
    color: white; 
    margin: 0 20px;

}

.service-name:last-child::after {
    content: none; 
}
.service-name:hover{
    color: white;
}
.line{
    border-top: 5px solid rgb(183, 183, 183);
    margin-top: 20px;
    border-radius: 25px;
}
article{
    color: white;
    font-size: 22px;
    text-align: justify;

}
.title-philosophy{
    text-transform: uppercase;
    color: white;
    font-size: 30px;
    margin-top: 35px;
    margin-bottom: 20px;
}
.founders{
    text-align: center;
    margin-top: 15px;
}
.founders img{
    width: 400px;
    height: 500px;
    object-fit: cover;
    
}
.founder-info{
    color: white;
    font-family: 'oswald-light';

}

/* contact */

input{
    width:100%;
    padding:15px;
    border-radius:15px;
    border:0;
    box-shadow:4px 4px 10px rgba(0,0,0,0.06);
    height:50px;
    margin-bottom: 25px;
}
textarea {
    width:100%;
    resize: vertical;
    padding:15px;
    border-radius:15px;
    border:0;
    box-shadow:4px 4px 10px rgba(0,0,0,0.06);
    height:150px;
  }
  
.titles-form{
    color: white;
    text-transform: uppercase;
    font-size: 30px;
}

/* button contact */

.black-button {
    position: relative;
    overflow: hidden;
    border: solid 3px white;
    width: 370px;
    margin: auto;
    padding: 15px;
    margin-bottom: 40px;
    text-transform: uppercase;
    background: black;
    color: white;
    transition: background-color 0.3s ease, color 0.3s ease; 
  }
  
  .black-button::before {
    content: '';
    position: absolute;
    top: 100%; 
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white; 
    transition: top 0.2s ease-in; 
    z-index: 0;
  }
  
  .black-button:hover::before {
    top: 0; 
  }
  
  .black-button:hover {
    color: black; 
  }
  
  .black-button h2 {
    position: relative;
    z-index: 1;
  }
  
  .lang-button-active {
    color: white !important; 
}




@media only screen and (max-width: 600px) {
    .logos:before, .logos:after{
        width: 100px;
    }
  }
  
@media only screen and (max-width: 1280px) {
  .nav-item{
    margin: auto;
  }
}