@media only screen and (max-width: 992px) {
   body,
   h5 {
      background-color: #fafafa;
      font-size: 16px;
   }
   nav {
      display: none;
   }
   .width-section,
   .sections {
      width: auto;
      border: none;
   }
   .header,
   .container {
      padding: 0;
   }
   .header {
      height: auto;
      /* min-height: auto; */
   }
   .header img {
      width: 150px;
      height: 150px;
      position: absolute;
      top: 68px;
      left: 0;
      right: 0;
      margin: auto;
   }
   .lang {
      position: absolute;
      top: 24px;
      right: 20px;
   }
   .header .position i,
   .header .position,
   .header .title h1,
   .button,
   .button i {
      color: #333533;
   }
   .header .title h1 {
      font-size: 36px;
   }
   .header .position {
      font-size: 24px;
      margin: 30px 0px;
   }
   .title .button {
      border: 1px solid #333533;
      width: 100%;
      display: inline-block;
      padding: 8px 0px;
   }
   .header .title {
      background-color: #fafafa;
      margin: 0;
      width: 100%;
      text-align: center;
      margin-top: 150px;
      padding: 100px 20px 60px;
   }
   .sections {
      padding: 0px 20px;
   }
   .sections section {
      border-top: 1px solid #d9d9d9;
      padding: 60px 0;
   }
   .sections section h4 {
      margin-top: 0;
      font-size: 20px;
   }
   .contact {
      flex-wrap: nowrap;
   }
   .contact div {
      width: 100%;
   }
   .project {
      width: 100%;
   }
   .project:not(:last-child) {
      margin-right: 0;
   }
.mobile-nav {
   display: block;
   background-color: #333533;
   color: #fafafa;
   position: fixed;
   right: 0;
   bottom: 0;
   left: 0;
}
.mobile-nav ul {
   display: flex;
   justify-content: space-between;
   margin: 0;
}
.mobile-nav ul li {
   padding-top: 15px;
   padding-bottom: 15px;
   text-align: center ;
   flex: 1;
}
.mobile-nav ul li i {
margin-right: 5px;
}
.mobile-nav ul li.active {
   color: #ffd100;
   border-bottom: 4px solid #ffd100;
}
}