#overlay {
    display: none;
}
#overlay-input{
  display: none;
}

#mobile-navbar {
  display: none;
}

#navbar {
  background-color: #171e24;
  position: fixed;
  top: 20px;
  left: 10%;
  width: 80%;
  height: 80px;
  display: block;
  transition: top 1s;
  z-index: 99;
  border-radius: 10px;
}


#navbar img {
    width: 156px;
    position: absolute;
    top: 17px;
    left: 5.4%;
}

.menu a{
    color: #ffff;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
}

.menu a:hover {
   transition: all .3s ease-in-out;
   background-color: #7C40FF;
   border-radius: 5px;
   
}

.menu {
    position: absolute;
    top: 30px;
    right: 10%;
    cursor: pointer;
}

.select-language select{
    cursor: pointer;
    background-color:#171e24;
    color: #ffff;
    border: none;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    position: absolute;
    top: 30px;
    right: 2.5%;
}


  /*RESPONSIVE*/
@media (min-width: 240px) and (max-width: 359.98px) and (orientation: portrait)  {  
    #navbar {
      display: none;
    }

    .menu {
        display: none;
    }

    .select-language {
        display: none;
    }

    #mobile-navbar img {
        width: 100px;
        position: absolute;
        top: 11px;
        left: 3%;
        z-index: 99;
    }

    #mobile-navbar {
      display: block;
      background-color: #171e24;
      position: fixed;
      top: 0px;
      left: 00%;
      width: 100%;
      height: 50px;
      transition: top 1s;
      z-index: 99;
    }

    @keyframes bugfix {
        from {
          padding: 0;
       }
        to {
          padding: 0;
       }
    }
    @-webkit-keyframes bugfix {
        from {
          padding: 0;
       }
        to {
          padding: 0;
       }
    }
    #overlay-button {
      transform: scale(0.6);
      display: block;
      position: absolute;
      right: 1%;
      top: -5px;
      padding: 26px 11px;
      cursor: pointer;
      user-select: none;
      z-index: 99;
      transition: top 1s;
    }

    #overlay-button span {
      height: 4px;
      width: 35px;
      border-radius: 2px;
      background-color: #a9a9a9;
      position: relative;
      display: block;
      transition: all 0.2s ease-in-out;
    }

    #overlay-button span:before {
      top: -10px;
      visibility: visible;
    }

    #overlay-button span:after {
      top: 10px;
    }

    #overlay-button span:before, #overlay-button span:after {
      height: 4px;
      width: 35px;
      border-radius: 2px;
      background-color: #a9a9a9;
      position: absolute;
      content: "";
      transition: all 0.2s ease-in-out;
     }
      #overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
        background: #a9a9a9;
     }
      input[type=checkbox] {
        display: none;
     }
      input[type=checkbox]:checked ~ #overlay {
        visibility: visible;
     }
      input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
        background: transparent;
     }
      input[type=checkbox]:checked ~ #overlay-button span:before {
        transform: rotate(45deg) translate(7px, 7px);
        opacity: 1;
     }
      input[type=checkbox]:checked ~ #overlay-button span:after {
        transform: rotate(-45deg) translate(7px, -7px);
     }

    #overlay {
      display: block;
      height: 100%;
      width: 100%;
      background: #11151a;
      z-index: 98;
      visibility: hidden;
      position: fixed;
      left: 0%;
      top: 0%;
      text-align: left;
    }

    #overlay.active {
      visibility: visible;
    }

    #overlay ul {
      text-align: left;
      list-style-type: none;
      position: absolute;
      top: 60px;
      left: -5%;
    }
      #overlay ul li {
        padding: 10px;
     }
      #overlay ul li a {
        color: #fff;
        text-decoration: none;
        font-size: 1.5em;
     }
      #overlay ul li a:hover {
        color: #333332;
     }
      #overlay ul li button {
       text-align: left;
       z-index: 99;
       font-family: 'Poppins', sans-serif;
       font-size: 22px;
       width: 160px;
       height: 30px;
       background-color: #11151a;
       color: #7C40FF;
       border: none;
       border-radius: 5px;
       box-shadow:
       0px 0px 2.2px rgba(0, 0, 0, 0.011),
       0px 0px 5.3px rgba(0, 0, 0, 0.016),
       0px 0px 10px rgba(0, 0, 0, 0.02),
       0px 0px 17.9px rgba(0, 0, 0, 0.024),
       0px 0px 33.4px rgba(0, 0, 0, 0.029),
       0px 0px 80px rgba(0, 0, 0, 0.04);
      }
     
       .select-mobile  {
        appearance: none; 
        -moz-appearance: none; 
        -webkit-appearance: none; 
         font-family: 'Open Sans', sans-serif;
         font-size: 14px;
         color: #fff;
         position: absolute;
         bottom: 100px;
         left: 10%;
         width: 80%;
         height: 40px;
         background-color: #11151a;
         text-align: center;
         border-style: solid;
         border-radius: 5px;
         border-width: 1px;
         border-color: #7C40FF;
         box-shadow:
         0px 0px 2.2px rgba(0, 0, 0, 0.011),
         0px 0px 5.3px rgba(0, 0, 0, 0.016),
         0px 0px 10px rgba(0, 0, 0, 0.02),
         0px 0px 17.9px rgba(0, 0, 0, 0.024),
         0px 0px 33.4px rgba(0, 0, 0, 0.029),
         0px 0px 80px rgba(0, 0, 0, 0.04);
       }


       .web-services-link button {
         font-family: 'Open Sans', sans-serif;
         font-size: 16px;
         color: #fff;
         position: absolute;
         bottom: 50px;
         left: 10%;
         width: 80%;
         height: 40px;
         background-color: #7C40FF;
         border-style: solid;
         border-radius: 5px;
         border: none;
         box-shadow:
         0px 0px 2.2px rgba(0, 0, 0, 0.011),
         0px 0px 5.3px rgba(0, 0, 0, 0.016),
         0px 0px 10px rgba(0, 0, 0, 0.02),
         0px 0px 17.9px rgba(0, 0, 0, 0.024),
         0px 0px 33.4px rgba(0, 0, 0, 0.029),
         0px 0px 80px rgba(0, 0, 0, 0.04);
       }

}
  
@media (min-width: 360px) and (max-width: 575.98px) and (orientation: portrait) {
  #navbar {
    display: none;
  }

  .menu {
      display: none;
  }

  .select-language {
      display: none;
  }

  #mobile-navbar img {
    width: 114px;
    position: absolute;
    top: 14px;
    left: 4%;
    z-index: 99;
  }

  #mobile-navbar {
    display: block;
    background-color: #171e24;
    position: fixed;
    top: 0px;
    left: 00%;
    width: 100%;
    height: 60px;
    transition: top 1s;
    z-index: 99;
  }

  @keyframes bugfix {
      from {
        padding: 0;
     }
      to {
        padding: 0;
     }
  }
  @-webkit-keyframes bugfix {
      from {
        padding: 0;
     }
      to {
        padding: 0;
     }
  }

  #overlay-button {
    transform: scale(0.7);
    display: block;
    position: absolute;
    right: 0%;
    top: 0px;
    padding: 26px 11px;
    cursor: pointer;
    user-select: none;
    z-index: 99;
    transition: top 1s;
  }

  #overlay-button span {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: #a9a9a9;
    position: relative;
    display: block;
    transition: all 0.2s ease-in-out;
  }

  #overlay-button span:before {
    top: -10px;
    visibility: visible;
  }

  #overlay-button span:after {
    top: 10px;
  }

  #overlay-button span:before, #overlay-button span:after {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: #a9a9a9;
    position: absolute;
    content: "";
    transition: all 0.2s ease-in-out;
   }
    #overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
      background: #a9a9a9;
   }
    input[type=checkbox] {
      display: none;
   }
    input[type=checkbox]:checked ~ #overlay {
      visibility: visible;
   }
    input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
      background: transparent;
   }
    input[type=checkbox]:checked ~ #overlay-button span:before {
      transform: rotate(45deg) translate(7px, 7px);
      opacity: 1;
   }
    input[type=checkbox]:checked ~ #overlay-button span:after {
      transform: rotate(-45deg) translate(7px, -7px);
   }

  #overlay {
    display: block;
    height: 100%;
    width: 100%;
    background: #11151a;
    z-index: 98;
    visibility: hidden;
    position: fixed;
    left: 0%;
    top: 0%;
    text-align: left;
  }

  #overlay.active {
    visibility: visible;
  }

  #overlay ul {
    text-align: left;
    list-style-type: none;
    position: absolute;
    top: 60px;
    left: -5%;
  }
    #overlay ul li {
      padding: 10px;
   }
    #overlay ul li a {
      color: #fff;
      text-decoration: none;
      font-size: 1.5em;
   }
    #overlay ul li a:hover {
      color: #333332;
   }
    #overlay ul li button {
     text-align: left;
     z-index: 99;
     font-family: 'Poppins', sans-serif;
     font-size: 28px;
     width: 300;
     height: 30px;
     background-color: #11151a;
     color: #7C40FF;
     border: none;
     border-radius: 5px;
     box-shadow:
     0px 0px 2.2px rgba(0, 0, 0, 0.011),
     0px 0px 5.3px rgba(0, 0, 0, 0.016),
     0px 0px 10px rgba(0, 0, 0, 0.02),
     0px 0px 17.9px rgba(0, 0, 0, 0.024),
     0px 0px 33.4px rgba(0, 0, 0, 0.029),
     0px 0px 80px rgba(0, 0, 0, 0.04);
    }
   
     .select-mobile  {
      appearance: none; 
      -moz-appearance: none; 
      -webkit-appearance: none; 
       font-family: 'Open Sans', sans-serif;
       font-size: 16px;
       color: #fff;
       position: absolute;
       bottom: 100px;
       left: 10%;
       width: 80%;
       height: 42px;
       background-color: #11151a;
       text-align: center;
       border-style: solid;
       border-radius: 5px;
       border-width: 1px;
       border-color: #7C40FF;
       box-shadow:
       0px 0px 2.2px rgba(0, 0, 0, 0.011),
       0px 0px 5.3px rgba(0, 0, 0, 0.016),
       0px 0px 10px rgba(0, 0, 0, 0.02),
       0px 0px 17.9px rgba(0, 0, 0, 0.024),
       0px 0px 33.4px rgba(0, 0, 0, 0.029),
       0px 0px 80px rgba(0, 0, 0, 0.04);
     }


     .web-services-link button {
       font-family: 'Open Sans', sans-serif;
       font-size: 18px;
       color: #fff;
       position: absolute;
       bottom: 50px;
       left: 10%;
       width: 80%;
       height: 42px;
       background-color: #7C40FF;
       border-style: solid;
       border-radius: 5px;
       border: none;
       box-shadow:
       0px 0px 2.2px rgba(0, 0, 0, 0.011),
       0px 0px 5.3px rgba(0, 0, 0, 0.016),
       0px 0px 10px rgba(0, 0, 0, 0.02),
       0px 0px 17.9px rgba(0, 0, 0, 0.024),
       0px 0px 33.4px rgba(0, 0, 0, 0.029),
       0px 0px 80px rgba(0, 0, 0, 0.04);
     }
}

@media (min-width: 576px) and (max-width: 767.98px) and (orientation: portrait)  {

  #navbar {
    display: none;
  }

  .menu {
      display: none;
  }

  .select-language {
      display: none;
  }

  #mobile-navbar img {
    width: 150px;
    position: absolute;
    top: 14px;
    left: 3%;
    z-index: 99;
  }

  #mobile-navbar {
    display: block;
    background-color: #171e24;
    position: fixed;
    top: 0px;
    left: 0%;
    width: 100%;
    height: 70px;
    transition: top 1s;
    z-index: 99;
  }

  @keyframes bugfix {
      from {
        padding: 0;
     }
      to {
        padding: 0;
     }
  }

  @-webkit-keyframes bugfix {
      from {
        padding: 0;
     }
      to {
        padding: 0;
     }
  }

  #overlay-button {
    transform: scale(0.9);
    display: block;
    position: absolute;
    right: 2%;
    top: 5px;
    padding: 26px 11px;
    cursor: pointer;
    user-select: none;
    z-index: 99;
    transition: top 1s;
  }

  #overlay-button span {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: #a9a9a9;
    position: relative;
    display: block;
    transition: all 0.2s ease-in-out;
  }

  #overlay-button span:before {
    top: -10px;
    visibility: visible;
  }

  #overlay-button span:after {
    top: 10px;
  }

  #overlay-button span:before, #overlay-button span:after {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: #a9a9a9;
    position: absolute;
    content: "";
    transition: all 0.2s ease-in-out;
   }
    #overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
      background: #a9a9a9;
   }
    input[type=checkbox] {
      display: none;
   }
    input[type=checkbox]:checked ~ #overlay {
      visibility: visible;
   }
    input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
      background: transparent;
   }
    input[type=checkbox]:checked ~ #overlay-button span:before {
      transform: rotate(45deg) translate(7px, 7px);
      opacity: 1;
   }
    input[type=checkbox]:checked ~ #overlay-button span:after {
      transform: rotate(-45deg) translate(7px, -7px);
   }

  #overlay {
    display: block;
    height: 100%;
    width: 100%;
    background: #11151a;
    z-index: 98;
    visibility: hidden;
    position: fixed;
    left: 0%;
    top: 0%;
    text-align: left;
  }

  #overlay.active {
    visibility: visible;
  }

  #overlay ul {
    text-align: left;
    list-style-type: none;
    position: absolute;
    top: 100px;
    left: 0%;
  }
    #overlay ul li {
      padding: 10px;
   }
    #overlay ul li a {
      color: #fff;
      text-decoration: none;
      font-size: 1.5em;
   }
    #overlay ul li a:hover {
      color: #333332;
   }
    #overlay ul li button {
     text-align: left;
     z-index: 99;
     font-family: 'Poppins', sans-serif;
     font-size: 40px;
     width: 300;
     height: 60px;
     background-color: #11151a;
     color: #7C40FF;
     border: none;
     border-radius: 5px;
     box-shadow:
     0px 0px 2.2px rgba(0, 0, 0, 0.011),
     0px 0px 5.3px rgba(0, 0, 0, 0.016),
     0px 0px 10px rgba(0, 0, 0, 0.02),
     0px 0px 17.9px rgba(0, 0, 0, 0.024),
     0px 0px 33.4px rgba(0, 0, 0, 0.029),
     0px 0px 80px rgba(0, 0, 0, 0.04);
    }
   
     .select-mobile  {
      appearance: none; 
      -moz-appearance: none; 
      -webkit-appearance: none; 
       font-family: 'Open Sans', sans-serif;
       font-size: 20px;
       color: #fff;
       position: absolute;
       bottom: 120px;
       left: 10%;
       width: 80%;
       height: 60px;
       background-color: #11151a;
       text-align: center;
       border-style: solid;
       border-radius: 5px;
       border-width: 1px;
       border-color: #7C40FF;
       box-shadow:
       0px 0px 2.2px rgba(0, 0, 0, 0.011),
       0px 0px 5.3px rgba(0, 0, 0, 0.016),
       0px 0px 10px rgba(0, 0, 0, 0.02),
       0px 0px 17.9px rgba(0, 0, 0, 0.024),
       0px 0px 33.4px rgba(0, 0, 0, 0.029),
       0px 0px 80px rgba(0, 0, 0, 0.04);
     }


     .web-services-link button {
       font-family: 'Open Sans', sans-serif;
       font-size: 20px;
       color: #fff;
       position: absolute;
       bottom: 50px;
       left: 10%;
       width: 80%;
       height: 60px;
       background-color: #7C40FF;
       border-style: solid;
       border-radius: 5px;
       border: none;
       box-shadow:
       0px 0px 2.2px rgba(0, 0, 0, 0.011),
       0px 0px 5.3px rgba(0, 0, 0, 0.016),
       0px 0px 10px rgba(0, 0, 0, 0.02),
       0px 0px 17.9px rgba(0, 0, 0, 0.024),
       0px 0px 33.4px rgba(0, 0, 0, 0.029),
       0px 0px 80px rgba(0, 0, 0, 0.04);
     }
}
     
@media  (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
  #navbar {
    display: none;
  }

  .menu {
      display: none;
  }

  .select-language {
      display: none;
  }

  #mobile-navbar img {
    width: 180px;
    position: absolute;
    top: 14px;
    left: 3%;
    z-index: 99;
  }

  #mobile-navbar {
    display: block;
    background-color: #171e24;
    position: fixed;
    top: 0px;
    left: 00%;
    width: 100%;
    height: 80px;
    transition: top 1s;
    z-index: 99;
  }

  @keyframes bugfix {
      from {
        padding: 0;
     }
      to {
        padding: 0;
     }
  }

  @-webkit-keyframes bugfix {
      from {
        padding: 0;
     }
      to {
        padding: 0;
     }
  }

  #overlay-button {
    transform: scale(1.1);
    display: block;
    position: absolute;
    right: 2%;
    top: 12px;
    padding: 26px 11px;
    cursor: pointer;
    user-select: none;
    z-index: 99;
    transition: top 1s;
  }

  #overlay-button span {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: #a9a9a9;
    position: relative;
    display: block;
    transition: all 0.2s ease-in-out;
  }

  #overlay-button span:before {
    top: -10px;
    visibility: visible;
  }

  #overlay-button span:after {
    top: 10px;
  }

  #overlay-button span:before, #overlay-button span:after {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: #a9a9a9;
    position: absolute;
    content: "";
    transition: all 0.2s ease-in-out;
   }
    #overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
      background: #a9a9a9;
   }
    input[type=checkbox] {
      display: none;
   }
    input[type=checkbox]:checked ~ #overlay {
      visibility: visible;
   }
    input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
      background: transparent;
   }
    input[type=checkbox]:checked ~ #overlay-button span:before {
      transform: rotate(45deg) translate(7px, 7px);
      opacity: 1;
   }
    input[type=checkbox]:checked ~ #overlay-button span:after {
      transform: rotate(-45deg) translate(7px, -7px);
   }

  #overlay {
    display: block;
    height: 100%;
    width: 100%;
    background: #11151a;
    z-index: 98;
    visibility: hidden;
    position: fixed;
    left: 0%;
    top: 0%;
    text-align: left;
  }

  #overlay.active {
    visibility: visible;
  }

  #overlay ul {
    text-align: left;
    list-style-type: none;
    position: absolute;
    top: 100px;
    left: 0%;
  }
    #overlay ul li {
      padding: 10px;
   }
    #overlay ul li a {
      color: #fff;
      text-decoration: none;
      font-size: 1.5em;
   }
    #overlay ul li a:hover {
      color: #333332;
   }
    #overlay ul li button {
     text-align: left;
     z-index: 99;
     font-family: 'Poppins', sans-serif;
     font-size: 40px;
     width: 300;
     height: 60px;
     background-color: #11151a;
     color: #7C40FF;
     border: none;
     border-radius: 5px;
     box-shadow:
     0px 0px 2.2px rgba(0, 0, 0, 0.011),
     0px 0px 5.3px rgba(0, 0, 0, 0.016),
     0px 0px 10px rgba(0, 0, 0, 0.02),
     0px 0px 17.9px rgba(0, 0, 0, 0.024),
     0px 0px 33.4px rgba(0, 0, 0, 0.029),
     0px 0px 80px rgba(0, 0, 0, 0.04);
    }
   
     .select-mobile  {
      appearance: none; 
      -moz-appearance: none; 
      -webkit-appearance: none; 
       font-family: 'Open Sans', sans-serif;
       font-size: 20px;
       color: #fff;
       position: absolute;
       bottom: 120px;
       left: 9%;
       width: 40%;
       height: 60px;
       background-color: #11151a;
       text-align: center;
       border-style: solid;
       border-radius: 5px;
       border-width: 1px;
       border-color: #7C40FF;
       box-shadow:
       0px 0px 2.2px rgba(0, 0, 0, 0.011),
       0px 0px 5.3px rgba(0, 0, 0, 0.016),
       0px 0px 10px rgba(0, 0, 0, 0.02),
       0px 0px 17.9px rgba(0, 0, 0, 0.024),
       0px 0px 33.4px rgba(0, 0, 0, 0.029),
       0px 0px 80px rgba(0, 0, 0, 0.04);
     }

     .web-services-link button {
       font-family: 'Open Sans', sans-serif;
       font-size: 20px;
       color: #fff;
       position: absolute;
       bottom: 120px;
       left: 52%;
       width: 40%;
       height: 60px;
       background-color: #7C40FF;
       border-style: solid;
       border-radius: 5px;
       border: none;
       box-shadow:
       0px 0px 2.2px rgba(0, 0, 0, 0.011),
       0px 0px 5.3px rgba(0, 0, 0, 0.016),
       0px 0px 10px rgba(0, 0, 0, 0.02),
       0px 0px 17.9px rgba(0, 0, 0, 0.024),
       0px 0px 33.4px rgba(0, 0, 0, 0.029),
       0px 0px 80px rgba(0, 0, 0, 0.04);
     }
}
     
@media (min-width: 992px) and (max-width: 1199.98px) and (orientation: portrait)  {

  #navbar {
    display: none;
  }

  .menu {
      display: none;
  }

  .select-language {
      display: none;
  }

  #mobile-navbar img {
    width: 200px;
    position: absolute;
    top: 16px;
    left: 3%;
    z-index: 99;
  }

  #mobile-navbar {
    display: block;
    background-color: #171e24;
    position: fixed;
    top: 0px;
    left: 00%;
    width: 100%;
    height: 90px;
    transition: top 1s;
    z-index: 99;
  }

  @keyframes bugfix {
      from {
        padding: 0;
     }
      to {
        padding: 0;
     }
  }

  @-webkit-keyframes bugfix {
      from {
        padding: 0;
     }
      to {
        padding: 0;
     }
  }

  #overlay-button {
    transform: scale(1.2);
    display: block;
    position: absolute;
    right: 2%;
    top: 17px;
    padding: 26px 11px;
    cursor: pointer;
    user-select: none;
    z-index: 99;
    transition: top 1s;
  }

  #overlay-button span {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: #a9a9a9;
    position: relative;
    display: block;
    transition: all 0.2s ease-in-out;
  }

  #overlay-button span:before {
    top: -10px;
    visibility: visible;
  }

  #overlay-button span:after {
    top: 10px;
  }

  #overlay-button span:before, #overlay-button span:after {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: #a9a9a9;
    position: absolute;
    content: "";
    transition: all 0.2s ease-in-out;
   }
    #overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
      background: #a9a9a9;
   }
    input[type=checkbox] {
      display: none;
   }
    input[type=checkbox]:checked ~ #overlay {
      visibility: visible;
   }
    input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
      background: transparent;
   }
    input[type=checkbox]:checked ~ #overlay-button span:before {
      transform: rotate(45deg) translate(7px, 7px);
      opacity: 1;
   }
    input[type=checkbox]:checked ~ #overlay-button span:after {
      transform: rotate(-45deg) translate(7px, -7px);
   }

  #overlay {
    display: block;
    height: 100%;
    width: 100%;
    background: #11151a;
    z-index: 98;
    visibility: hidden;
    position: fixed;
    left: 0%;
    top: 0%;
    text-align: left;
  }

  #overlay.active {
    visibility: visible;
  }

  #overlay ul {
    text-align: left;
    list-style-type: none;
    position: absolute;
    top: 100px;
    left: 0%;
  }
    #overlay ul li {
      padding: 14px;
   }
    #overlay ul li a {
      color: #fff;
      text-decoration: none;
      font-size: 1.5em;
   }
    #overlay ul li a:hover {
      color: #333332;
   }
    #overlay ul li button {
     text-align: left;
     z-index: 99;
     font-family: 'Poppins', sans-serif;
     font-size: 50px;
     width: 500;
     height: 70px;
     background-color: #11151a;
     color: #7C40FF;
     border: none;
     border-radius: 5px;
     box-shadow:
     0px 0px 2.2px rgba(0, 0, 0, 0.011),
     0px 0px 5.3px rgba(0, 0, 0, 0.016),
     0px 0px 10px rgba(0, 0, 0, 0.02),
     0px 0px 17.9px rgba(0, 0, 0, 0.024),
     0px 0px 33.4px rgba(0, 0, 0, 0.029),
     0px 0px 80px rgba(0, 0, 0, 0.04);
    }
   
     .select-mobile  {
      appearance: none; 
      -moz-appearance: none; 
      -webkit-appearance: none; 
       font-family: 'Open Sans', sans-serif;
       font-size: 26px;
       color: #fff;
       position: absolute;
       bottom: 120px;
       left: 9%;
       width: 40%;
       height: 80px;
       background-color: #11151a;
       text-align: center;
       border-style: solid;
       border-radius: 5px;
       border-width: 1px;
       border-color: #7C40FF;
       box-shadow:
       0px 0px 2.2px rgba(0, 0, 0, 0.011),
       0px 0px 5.3px rgba(0, 0, 0, 0.016),
       0px 0px 10px rgba(0, 0, 0, 0.02),
       0px 0px 17.9px rgba(0, 0, 0, 0.024),
       0px 0px 33.4px rgba(0, 0, 0, 0.029),
       0px 0px 80px rgba(0, 0, 0, 0.04);
     }

     .web-services-link button {
       font-family: 'Open Sans', sans-serif;
       font-size: 26px;
       color: #fff;
       position: absolute;
       bottom: 120px;
       left: 52%;
       width: 40%;
       height: 80px;
       background-color: #7C40FF;
       border-style: solid;
       border-radius: 5px;
       border: none;
       box-shadow:
       0px 0px 2.2px rgba(0, 0, 0, 0.011),
       0px 0px 5.3px rgba(0, 0, 0, 0.016),
       0px 0px 10px rgba(0, 0, 0, 0.02),
       0px 0px 17.9px rgba(0, 0, 0, 0.024),
       0px 0px 33.4px rgba(0, 0, 0, 0.029),
       0px 0px 80px rgba(0, 0, 0, 0.04);
     }
}

@media  (min-width: 1200px) and (max-width: 1399.98px)  {  
  
#overlay {
  display: none;
}

#overlay-input {
  display: none;
}

#mobile-navbar {
display: none;
}

#navbar {
background-color: #171e24;
position: fixed;
top: 20px;
left: 10%;
width: 80%;
height: 80px;
display: block;
transition: top 1s;
z-index: 99;
border-radius: 10px;
}

.menu {
  position: absolute;
  top: 30px;
  right: 15%;
  cursor: pointer;
}

#navbar img {
  width: 150px;
  position: absolute;
  top: 18px;
  left: 5%;
}

.menu a{
  color: #ffff;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  padding: 10px;
  font-size: 14px;
  font-weight: 500;
}

.menu a:hover {
 transition: all .3s ease-in-out;
 background-color: #7C40FF;
 border-radius: 5px;
 
}

.select-language select{
  cursor: pointer;
  background-color:#171e24;
  color: #ffff;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  position: absolute;
  top: 30px;
  right: 2.5%;
}
}
     
@media  (min-width: 1400px) and (max-width: 1599.98px)  {   
  #overlay {
    display: none;
  }
  
  #overlay-input {
    display: none;
  }
  
  #mobile-navbar {
  display: none;
  }
  
  #navbar {
  background-color: #171e24;
  position: fixed;
  top: 20px;
  left: 10%;
  width: 80%;
  height: 80px;
  display: block;
  transition: top 1s;
  z-index: 99;
  border-radius: 10px;
  }
  
  .menu {
    position: absolute;
    top: 30px;
    right: 13%;
    cursor: pointer;
  }
  
  #navbar img {
    width: 160px;
    position: absolute;
    top: 18px;
    left: 5%;
  }
  
  .menu a{
    color: #ffff;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
  }
  
  .menu a:hover {
   transition: all .3s ease-in-out;
   background-color: #7C40FF;
   border-radius: 5px;
   
  }
  
  .select-language select{
    cursor: pointer;
    background-color:#171e24;
    color: #ffff;
    border: none;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    position: absolute;
    top: 30px;
    right: 2.5%;
  }   
}
     
@media  (min-width: 3840px) and (max-width: 7679.98px)  {  
  
#overlay {
  display: none;
}

#overlay-input{
display: none;
}

#mobile-navbar {
display: none;
}

#navbar {
background-color: #171e24;
position: fixed;
top: 40px;
left: 10%;
width: 80%;
height: 160px;
display: block;
transition: top 1s;
z-index: 99;
border-radius: 20px;
}


#navbar img {
  width: 312px;
  position: absolute;
  top: 34px;
  left: 5.4%;
}

.menu a{
  color: #ffff;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  padding: 20px;
  font-size: 28px;
  font-weight: 500;
}

.menu a:hover {
 transition: all .3s ease-in-out;
 background-color: #7C40FF;
 border-radius: 10px;
 
}

.menu {
  position: absolute;
  top: 60px;
  right: 10%;
  cursor: pointer;
}

.select-language select{
  cursor: pointer;
  background-color:#171e24;
  color: #ffff;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-size: 28px;
  position: absolute;
  top: 60px;
  right: 2.5%;
}
}
     
@media  (min-width: 7680px) and (max-width: 7681px) {  
  #overlay {
    display: none;
  }
  
  #overlay-input {
    display: none;
  }
  
  #mobile-navbar {
    display: none;
  }
  
  #navbar {
    background-color: #171e24;
    position: fixed;
    top: 80px;
    left: 20%;
    width: 160%;
    height: 320px;
    display: block;
    transition: top 1s;
    z-index: 99;
    border-radius: 40px;
  }
  
  #navbar img {
    width: 624px;
    position: absolute;
    top: 72px;
    left: 5.4%;
  }
  
  .menu a {
    color: #ffff;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    padding: 40px;
    font-size: 56px;
    font-weight: 500;
  }
  
  .menu a:hover {
    transition: all .3s ease-in-out;
    background-color: #7C40FF;
    border-radius: 20px;
  }
  
  .menu {
    position: absolute;
    top: 120px;
    right: 20%;
    cursor: pointer;
  }
  
  .select-language select {
    cursor: pointer;
    background-color: #171e24;
    color: #ffff;
    border: none;
    font-family: 'Poppins', sans-serif;
    font-size: 56px;
    position: absolute;
    top: 120px;
    right: 5%;
  }
  
}




/* LANDSCAPE RESPONSIVE*/
@media (min-width: 500px) and (max-width: 639.98px) and (orientation: landscape) {
  #navbar {
    display: none;
  }

  .menu {
      display: none;
  }

  .select-language {
      display: none;
  }

  #mobile-navbar img {
    width: 120px;
    position: absolute;
    top: 12px;
    left: 3%;
    z-index: 99;
  }

  #mobile-navbar {
    display: block;
    background-color: #171e24;
    position: fixed;
    top: 0px;
    left: 00%;
    width: 100%;
    height: 60px;
    transition: top 1s;
    z-index: 99;
  }

  @keyframes bugfix {
      from {
        padding: 0;
     }
      to {
        padding: 0;
     }
  }
  @-webkit-keyframes bugfix {
      from {
        padding: 0;
     }
      to {
        padding: 0;
     }
  }

  #overlay-button {
    transform: scale(0.7);
    display: block;
    position: absolute;
    right: 0%;
    top: 0px;
    padding: 26px 11px;
    cursor: pointer;
    user-select: none;
    z-index: 99;
    transition: top 1s;
  }

  #overlay-button span {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: #a9a9a9;
    position: relative;
    display: block;
    transition: all 0.2s ease-in-out;
  }

  #overlay-button span:before {
    top: -10px;
    visibility: visible;
  }

  #overlay-button span:after {
    top: 10px;
  }

  #overlay-button span:before, #overlay-button span:after {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: #a9a9a9;
    position: absolute;
    content: "";
    transition: all 0.2s ease-in-out;
   }
    #overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
      background: #a9a9a9;
   }
    input[type=checkbox] {
      display: none;
   }
    input[type=checkbox]:checked ~ #overlay {
      visibility: visible;
   }
    input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
      background: transparent;
   }
    input[type=checkbox]:checked ~ #overlay-button span:before {
      transform: rotate(45deg) translate(7px, 7px);
      opacity: 1;
   }
    input[type=checkbox]:checked ~ #overlay-button span:after {
      transform: rotate(-45deg) translate(7px, -7px);
   }

  #overlay {
    display: block;
    height: 100%;
    width: 100%;
    background: #11151a;
    z-index: 98;
    visibility: hidden;
    position: fixed;
    left: 0%;
    top: 0%;
    text-align: left;
  }

  #overlay.active {
    visibility: visible;
  }

  #overlay ul {
    text-align: left;
    list-style-type: none;
    position: absolute;
    top: 50px;
    left: -5%;
  }
    #overlay ul li {
      padding: 5px;
   }
    #overlay ul li a {
      color: #fff;
      text-decoration: none;
      font-size: 1.5em;
   }
    #overlay ul li a:hover {
      color: #333332;
   }
    #overlay ul li button {
     text-align: left;
     z-index: 99;
     font-family: 'Poppins', sans-serif;
     font-size: 20px;
     width: 300;
     height: 20px;
     background-color: #11151a;
     color: #7C40FF;
     border: none;
     border-radius: 5px;
     box-shadow:
     0px 0px 2.2px rgba(0, 0, 0, 0.011),
     0px 0px 5.3px rgba(0, 0, 0, 0.016),
     0px 0px 10px rgba(0, 0, 0, 0.02),
     0px 0px 17.9px rgba(0, 0, 0, 0.024),
     0px 0px 33.4px rgba(0, 0, 0, 0.029),
     0px 0px 80px rgba(0, 0, 0, 0.04);
    }
   
     .select-mobile  {
      appearance: none; 
      -moz-appearance: none; 
      -webkit-appearance: none; 
       font-family: 'Open Sans', sans-serif;
       font-size: 16px;
       color: #fff;
       position: absolute;
       bottom: 100px;
       left: 50%;
       width: 40%;
       height: 42px;
       background-color: #11151a;
       text-align: center;
       border-style: solid;
       border-radius: 5px;
       border-width: 1px;
       border-color: #7C40FF;
       box-shadow:
       0px 0px 2.2px rgba(0, 0, 0, 0.011),
       0px 0px 5.3px rgba(0, 0, 0, 0.016),
       0px 0px 10px rgba(0, 0, 0, 0.02),
       0px 0px 17.9px rgba(0, 0, 0, 0.024),
       0px 0px 33.4px rgba(0, 0, 0, 0.029),
       0px 0px 80px rgba(0, 0, 0, 0.04);
     }

     .web-services-link button {
       font-family: 'Open Sans', sans-serif;
       font-size: 18px;
       color: #fff;
       position: absolute;
       bottom: 50px;
       left: 50%;
       width: 40%;
       height: 42px;
       background-color: #7C40FF;
       border-style: solid;
       border-radius: 5px;
       border: none;
       box-shadow:
       0px 0px 2.2px rgba(0, 0, 0, 0.011),
       0px 0px 5.3px rgba(0, 0, 0, 0.016),
       0px 0px 10px rgba(0, 0, 0, 0.02),
       0px 0px 17.9px rgba(0, 0, 0, 0.024),
       0px 0px 33.4px rgba(0, 0, 0, 0.029),
       0px 0px 80px rgba(0, 0, 0, 0.04);
     }
}

@media (min-width: 640px) and (max-width: 811.98px) and (orientation: landscape) {
  #navbar {
    display: none;
  }

  .menu {
      display: none;
  }

  .select-language {
      display: none;
  }

  #mobile-navbar img {
    width: 140px;
    position: absolute;
    top: 14px;
    left: 3%;
    z-index: 99;
  }

  #mobile-navbar {
    display: block;
    background-color: #171e24;
    position: fixed;
    top: 0px;
    left: 0%;
    width: 100%;
    height: 70px;
    transition: top 1s;
    z-index: 99;
  }

  @keyframes bugfix {
      from {
        padding: 0;
     }
      to {
        padding: 0;
     }
  }

  @-webkit-keyframes bugfix {
      from {
        padding: 0;
     }
      to {
        padding: 0;
     }
  }

  #overlay-button {
    transform: scale(0.9);
    display: block;
    position: absolute;
    right: 2%;
    top: 5px;
    padding: 26px 11px;
    cursor: pointer;
    user-select: none;
    z-index: 99;
    transition: top 1s;
  }

  #overlay-button span {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: #a9a9a9;
    position: relative;
    display: block;
    transition: all 0.2s ease-in-out;
  }

  #overlay-button span:before {
    top: -10px;
    visibility: visible;
  }

  #overlay-button span:after {
    top: 10px;
  }

  #overlay-button span:before, #overlay-button span:after {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: #a9a9a9;
    position: absolute;
    content: "";
    transition: all 0.2s ease-in-out;
   }
    #overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
      background: #a9a9a9;
   }
    input[type=checkbox] {
      display: none;
   }
    input[type=checkbox]:checked ~ #overlay {
      visibility: visible;
   }
    input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
      background: transparent;
   }
    input[type=checkbox]:checked ~ #overlay-button span:before {
      transform: rotate(45deg) translate(7px, 7px);
      opacity: 1;
   }
    input[type=checkbox]:checked ~ #overlay-button span:after {
      transform: rotate(-45deg) translate(7px, -7px);
   }

  #overlay {
    display: block;
    height: 100%;
    width: 100%;
    background: #11151a;
    z-index: 98;
    visibility: hidden;
    position: fixed;
    left: 0%;
    top: 0%;
    text-align: left;
  }

  #overlay.active {
    visibility: visible;
  }

  #overlay ul {
    text-align: left;
    list-style-type: none;
    position: absolute;
    top: 50px;
    left: 0%;
  }
    #overlay ul li {
      padding: 5px;
   }
    #overlay ul li a {
      color: #fff;
      text-decoration: none;
      font-size: 1.5em;
   }
    #overlay ul li a:hover {
      color: #333332;
   }
    #overlay ul li button {
     text-align: left;
     z-index: 99;
     font-family: 'Poppins', sans-serif;
     font-size: 24px;
     width: 300;
     height: 20px;
     background-color: #11151a;
     color: #7C40FF;
     border: none;
     border-radius: 5px;
     box-shadow:
     0px 0px 2.2px rgba(0, 0, 0, 0.011),
     0px 0px 5.3px rgba(0, 0, 0, 0.016),
     0px 0px 10px rgba(0, 0, 0, 0.02),
     0px 0px 17.9px rgba(0, 0, 0, 0.024),
     0px 0px 33.4px rgba(0, 0, 0, 0.029),
     0px 0px 80px rgba(0, 0, 0, 0.04);
    }
   
     .select-mobile  {
      appearance: none; 
      -moz-appearance: none; 
      -webkit-appearance: none; 
       font-family: 'Open Sans', sans-serif;
       font-size: 18px;
       color: #fff;
       position: absolute;
       bottom: 120px;
       left: 60%;
       width: 30%;
       height: 50px;
       background-color: #11151a;
       text-align: center;
       border-style: solid;
       border-radius: 5px;
       border-width: 1px;
       border-color: #7C40FF;
       box-shadow:
       0px 0px 2.2px rgba(0, 0, 0, 0.011),
       0px 0px 5.3px rgba(0, 0, 0, 0.016),
       0px 0px 10px rgba(0, 0, 0, 0.02),
       0px 0px 17.9px rgba(0, 0, 0, 0.024),
       0px 0px 33.4px rgba(0, 0, 0, 0.029),
       0px 0px 80px rgba(0, 0, 0, 0.04);
     }


     .web-services-link button {
       font-family: 'Open Sans', sans-serif;
       font-size: 18px;
       color: #fff;
       position: absolute;
       bottom: 50px;
       left: 60%;
       width: 30%;
       height: 50px;
       background-color: #7C40FF;
       border-style: solid;
       border-radius: 5px;
       border: none;
       box-shadow:
       0px 0px 2.2px rgba(0, 0, 0, 0.011),
       0px 0px 5.3px rgba(0, 0, 0, 0.016),
       0px 0px 10px rgba(0, 0, 0, 0.02),
       0px 0px 17.9px rgba(0, 0, 0, 0.024),
       0px 0px 33.4px rgba(0, 0, 0, 0.029),
       0px 0px 80px rgba(0, 0, 0, 0.04);
     }
}

@media (min-width: 812px) and (max-width: 959.98px) and (orientation: landscape) {
  #navbar {
    display: none;
  }

  .menu {
      display: none;
  }

  .select-language {
      display: none;
  }

  #mobile-navbar img {
    width: 160px;
    position: absolute;
    top: 18px;
    left: 3%;
    z-index: 99;
  }

  #mobile-navbar {
    display: block;
    background-color: #171e24;
    position: fixed;
    top: 0px;
    left: 00%;
    width: 100%;
    height: 80px;
    transition: top 1s;
    z-index: 99;
  }

  @keyframes bugfix {
      from {
        padding: 0;
     }
      to {
        padding: 0;
     }
  }

  @-webkit-keyframes bugfix {
      from {
        padding: 0;
     }
      to {
        padding: 0;
     }
  }

  #overlay-button {
    transform: scale(1.1);
    display: block;
    position: absolute;
    right: 2%;
    top: 12px;
    padding: 26px 11px;
    cursor: pointer;
    user-select: none;
    z-index: 99;
    transition: top 1s;
  }

  #overlay-button span {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: #a9a9a9;
    position: relative;
    display: block;
    transition: all 0.2s ease-in-out;
  }

  #overlay-button span:before {
    top: -10px;
    visibility: visible;
  }

  #overlay-button span:after {
    top: 10px;
  }

  #overlay-button span:before, #overlay-button span:after {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: #a9a9a9;
    position: absolute;
    content: "";
    transition: all 0.2s ease-in-out;
   }
    #overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
      background: #a9a9a9;
   }
    input[type=checkbox] {
      display: none;
   }
    input[type=checkbox]:checked ~ #overlay {
      visibility: visible;
   }
    input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
      background: transparent;
   }
    input[type=checkbox]:checked ~ #overlay-button span:before {
      transform: rotate(45deg) translate(7px, 7px);
      opacity: 1;
   }
    input[type=checkbox]:checked ~ #overlay-button span:after {
      transform: rotate(-45deg) translate(7px, -7px);
   }

  #overlay {
    display: block;
    height: 100%;
    width: 100%;
    background: #11151a;
    z-index: 98;
    visibility: hidden;
    position: fixed;
    left: 0%;
    top: 0%;
    text-align: left;
  }

  #overlay.active {
    visibility: visible;
  }

  #overlay ul {
    text-align: left;
    list-style-type: none;
    position: absolute;
    top: 60px;
    left: 0%;
  }
    #overlay ul li {
      padding: 5px;
   }
    #overlay ul li a {
      color: #fff;
      text-decoration: none;
      font-size: 1.5em;
   }
    #overlay ul li a:hover {
      color: #333332;
   }
    #overlay ul li button {
     text-align: left;
     z-index: 99;
     font-family: 'Poppins', sans-serif;
     font-size: 24px;
     width: 300;
     height: 30px;
     background-color: #11151a;
     color: #7C40FF;
     border: none;
     border-radius: 5px;
     box-shadow:
     0px 0px 2.2px rgba(0, 0, 0, 0.011),
     0px 0px 5.3px rgba(0, 0, 0, 0.016),
     0px 0px 10px rgba(0, 0, 0, 0.02),
     0px 0px 17.9px rgba(0, 0, 0, 0.024),
     0px 0px 33.4px rgba(0, 0, 0, 0.029),
     0px 0px 80px rgba(0, 0, 0, 0.04);
    }
   
     .select-mobile  {
      appearance: none; 
      -moz-appearance: none; 
      -webkit-appearance: none; 
       font-family: 'Open Sans', sans-serif;
       font-size: 18px;
       color: #fff;
       position: absolute;
       bottom: 120px;
       left: 60%;
       width: 25%;
       height: 60px;
       background-color: #11151a;
       text-align: center;
       border-style: solid;
       border-radius: 5px;
       border-width: 1px;
       border-color: #7C40FF;
       box-shadow:
       0px 0px 2.2px rgba(0, 0, 0, 0.011),
       0px 0px 5.3px rgba(0, 0, 0, 0.016),
       0px 0px 10px rgba(0, 0, 0, 0.02),
       0px 0px 17.9px rgba(0, 0, 0, 0.024),
       0px 0px 33.4px rgba(0, 0, 0, 0.029),
       0px 0px 80px rgba(0, 0, 0, 0.04);
     }

     .web-services-link button {
       font-family: 'Open Sans', sans-serif;
       font-size: 18px;
       color: #fff;
       position: absolute;
       bottom: 40px;
       left: 60%;
       width: 25%;
       height: 60px;
       background-color: #7C40FF;
       border-style: solid;
       border-radius: 5px;
       border: none;
       box-shadow:
       0px 0px 2.2px rgba(0, 0, 0, 0.011),
       0px 0px 5.3px rgba(0, 0, 0, 0.016),
       0px 0px 10px rgba(0, 0, 0, 0.02),
       0px 0px 17.9px rgba(0, 0, 0, 0.024),
       0px 0px 33.4px rgba(0, 0, 0, 0.029),
       0px 0px 80px rgba(0, 0, 0, 0.04);
     }
}

@media (min-width: 960px) and (max-width: 999.98px) and (orientation: landscape) {
  #navbar {
    display: none;
  }

  .menu {
      display: none;
  }

  .select-language {
      display: none;
  }

  #mobile-navbar img {
    width: 180px;
    position: absolute;
    top: 14px;
    left: 3%;
    z-index: 99;
  }

  #mobile-navbar {
    display: block;
    background-color: #171e24;
    position: fixed;
    top: 0px;
    left: 00%;
    width: 100%;
    height: 80px;
    transition: top 1s;
    z-index: 99;
  }

  @keyframes bugfix {
      from {
        padding: 0;
     }
      to {
        padding: 0;
     }
  }

  @-webkit-keyframes bugfix {
      from {
        padding: 0;
     }
      to {
        padding: 0;
     }
  }

  #overlay-button {
    transform: scale(1.1);
    display: block;
    position: absolute;
    right: 2%;
    top: 12px;
    padding: 26px 11px;
    cursor: pointer;
    user-select: none;
    z-index: 99;
    transition: top 1s;
  }

  #overlay-button span {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: #a9a9a9;
    position: relative;
    display: block;
    transition: all 0.2s ease-in-out;
  }

  #overlay-button span:before {
    top: -10px;
    visibility: visible;
  }

  #overlay-button span:after {
    top: 10px;
  }

  #overlay-button span:before, #overlay-button span:after {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: #a9a9a9;
    position: absolute;
    content: "";
    transition: all 0.2s ease-in-out;
   }
    #overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
      background: #a9a9a9;
   }
    input[type=checkbox] {
      display: none;
   }
    input[type=checkbox]:checked ~ #overlay {
      visibility: visible;
   }
    input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
      background: transparent;
   }
    input[type=checkbox]:checked ~ #overlay-button span:before {
      transform: rotate(45deg) translate(7px, 7px);
      opacity: 1;
   }
    input[type=checkbox]:checked ~ #overlay-button span:after {
      transform: rotate(-45deg) translate(7px, -7px);
   }

  #overlay {
    display: block;
    height: 100%;
    width: 100%;
    background: #11151a;
    z-index: 98;
    visibility: hidden;
    position: fixed;
    left: 0%;
    top: 0%;
    text-align: left;
  }

  #overlay.active {
    visibility: visible;
  }

  #overlay ul {
    text-align: left;
    list-style-type: none;
    position: absolute;
    top: 100px;
    left: 0%;
  }
    #overlay ul li {
      padding: 10px;
   }
    #overlay ul li a {
      color: #fff;
      text-decoration: none;
      font-size: 1.5em;
   }
    #overlay ul li a:hover {
      color: #333332;
   }
    #overlay ul li button {
     text-align: left;
     z-index: 99;
     font-family: 'Poppins', sans-serif;
     font-size: 40px;
     width: 300;
     height: 60px;
     background-color: #11151a;
     color: #7C40FF;
     border: none;
     border-radius: 5px;
     box-shadow:
     0px 0px 2.2px rgba(0, 0, 0, 0.011),
     0px 0px 5.3px rgba(0, 0, 0, 0.016),
     0px 0px 10px rgba(0, 0, 0, 0.02),
     0px 0px 17.9px rgba(0, 0, 0, 0.024),
     0px 0px 33.4px rgba(0, 0, 0, 0.029),
     0px 0px 80px rgba(0, 0, 0, 0.04);
    }
   
     .select-mobile  {
      appearance: none; 
      -moz-appearance: none; 
      -webkit-appearance: none; 
       font-family: 'Open Sans', sans-serif;
       font-size: 20px;
       color: #fff;
       position: absolute;
       bottom: 120px;
       left: 9%;
       width: 40%;
       height: 60px;
       background-color: #11151a;
       text-align: center;
       border-style: solid;
       border-radius: 5px;
       border-width: 1px;
       border-color: #7C40FF;
       box-shadow:
       0px 0px 2.2px rgba(0, 0, 0, 0.011),
       0px 0px 5.3px rgba(0, 0, 0, 0.016),
       0px 0px 10px rgba(0, 0, 0, 0.02),
       0px 0px 17.9px rgba(0, 0, 0, 0.024),
       0px 0px 33.4px rgba(0, 0, 0, 0.029),
       0px 0px 80px rgba(0, 0, 0, 0.04);
     }

     .web-services-link button {
       font-family: 'Open Sans', sans-serif;
       font-size: 20px;
       color: #fff;
       position: absolute;
       bottom: 120px;
       left: 52%;
       width: 40%;
       height: 60px;
       background-color: #7C40FF;
       border-style: solid;
       border-radius: 5px;
       border: none;
       box-shadow:
       0px 0px 2.2px rgba(0, 0, 0, 0.011),
       0px 0px 5.3px rgba(0, 0, 0, 0.016),
       0px 0px 10px rgba(0, 0, 0, 0.02),
       0px 0px 17.9px rgba(0, 0, 0, 0.024),
       0px 0px 33.4px rgba(0, 0, 0, 0.029),
       0px 0px 80px rgba(0, 0, 0, 0.04);
     }
}

@media (min-width: 1000px) and (max-width: 1200px) and (orientation: landscape) {
  #navbar {
    display: none;
  }

  .menu {
      display: none;
  }

  .select-language {
      display: none;
  }

  #mobile-navbar img {
    width: 190px;
    position: absolute;
    top: 18px;
    left: 3%;
    z-index: 99;
  }

  #mobile-navbar {
    display: block;
    background-color: #171e24;
    position: fixed;
    top: 0px;
    left: 00%;
    width: 100%;
    height: 90px;
    transition: top 1s;
    z-index: 99;
  }

  @keyframes bugfix {
      from {
        padding: 0;
     }
      to {
        padding: 0;
     }
  }

  @-webkit-keyframes bugfix {
      from {
        padding: 0;
     }
      to {
        padding: 0;
     }
  }

  #overlay-button {
    transform: scale(1.2);
    display: block;
    position: absolute;
    right: 2%;
    top: 17px;
    padding: 26px 11px;
    cursor: pointer;
    user-select: none;
    z-index: 99;
    transition: top 1s;
  }

  #overlay-button span {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: #a9a9a9;
    position: relative;
    display: block;
    transition: all 0.2s ease-in-out;
  }

  #overlay-button span:before {
    top: -10px;
    visibility: visible;
  }

  #overlay-button span:after {
    top: 10px;
  }

  #overlay-button span:before, #overlay-button span:after {
    height: 4px;
    width: 35px;
    border-radius: 2px;
    background-color: #a9a9a9;
    position: absolute;
    content: "";
    transition: all 0.2s ease-in-out;
   }
    #overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
      background: #a9a9a9;
   }
    input[type=checkbox] {
      display: none;
   }
    input[type=checkbox]:checked ~ #overlay {
      visibility: visible;
   }
    input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
      background: transparent;
   }
    input[type=checkbox]:checked ~ #overlay-button span:before {
      transform: rotate(45deg) translate(7px, 7px);
      opacity: 1;
   }
    input[type=checkbox]:checked ~ #overlay-button span:after {
      transform: rotate(-45deg) translate(7px, -7px);
   }

  #overlay {
    display: block;
    height: 100%;
    width: 100%;
    background: #11151a;
    z-index: 98;
    visibility: hidden;
    position: fixed;
    left: 0%;
    top: 0%;
    text-align: left;
  }

  #overlay.active {
    visibility: visible;
  }

  #overlay ul {
    text-align: left;
    list-style-type: none;
    position: absolute;
    top: 100px;
    left: 0%;
  }
    #overlay ul li {
      padding: 14px;
   }
    #overlay ul li a {
      color: #fff;
      text-decoration: none;
      font-size: 1.5em;
   }
    #overlay ul li a:hover {
      color: #333332;
   }
    #overlay ul li button {
     text-align: left;
     z-index: 99;
     font-family: 'Poppins', sans-serif;
     font-size: 50px;
     width: 500;
     height: 70px;
     background-color: #11151a;
     color: #7C40FF;
     border: none;
     border-radius: 5px;
     box-shadow:
     0px 0px 2.2px rgba(0, 0, 0, 0.011),
     0px 0px 5.3px rgba(0, 0, 0, 0.016),
     0px 0px 10px rgba(0, 0, 0, 0.02),
     0px 0px 17.9px rgba(0, 0, 0, 0.024),
     0px 0px 33.4px rgba(0, 0, 0, 0.029),
     0px 0px 80px rgba(0, 0, 0, 0.04);
    }
   
     .select-mobile  {
      appearance: none; 
      -moz-appearance: none; 
      -webkit-appearance: none; 
       font-family: 'Open Sans', sans-serif;
       font-size: 26px;
       color: #fff;
       position: absolute;
       bottom: 220px;
       left: 52%;
       width: 40%;
       height: 80px;
       background-color: #11151a;
       text-align: center;
       border-style: solid;
       border-radius: 5px;
       border-width: 1px;
       border-color: #7C40FF;
       box-shadow:
       0px 0px 2.2px rgba(0, 0, 0, 0.011),
       0px 0px 5.3px rgba(0, 0, 0, 0.016),
       0px 0px 10px rgba(0, 0, 0, 0.02),
       0px 0px 17.9px rgba(0, 0, 0, 0.024),
       0px 0px 33.4px rgba(0, 0, 0, 0.029),
       0px 0px 80px rgba(0, 0, 0, 0.04);
     }

     .web-services-link button {
       font-family: 'Open Sans', sans-serif;
       font-size: 26px;
       color: #fff;
       position: absolute;
       bottom: 120px;
       left: 52%;
       width: 40%;
       height: 80px;
       background-color: #7C40FF;
       border-style: solid;
       border-radius: 5px;
       border: none;
       box-shadow:
       0px 0px 2.2px rgba(0, 0, 0, 0.011),
       0px 0px 5.3px rgba(0, 0, 0, 0.016),
       0px 0px 10px rgba(0, 0, 0, 0.02),
       0px 0px 17.9px rgba(0, 0, 0, 0.024),
       0px 0px 33.4px rgba(0, 0, 0, 0.029),
       0px 0px 80px rgba(0, 0, 0, 0.04);
     }
}