.header {
    background-image: url("/images/services/Asset 16@4x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  @media screen and (min-width: 800px) {
    .navigasi {
      padding-top: 100px;
    }

    .brand {
      padding-top: 100px;
      padding-bottom: 200px;
    }
  }

  @media screen and (max-width: 800px) {
    header h2 {
      font-size: 14pt;
    }

    header h5 {
      font-size: 10pt;
    }

    .navigasi {
      padding-top: 20px;
    }

    .brand {
      padding-top: 20px;
      padding-bottom: 50px;
    }

    .footer div {
      padding-bottom: 20px;
      text-align: center;
    }

  }

  .coming-soon {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    transform: rotate(-20deg);
    text-shadow: 2px 2px #ffffff;

  }

  /* .lapis {
    height: 100%;
    background: linear-gradient(0deg, rgba(45, 50, 80, 1) 0%, rgba(54, 38, 52, 1) 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -3;
  } */

  .footer {
    background: #EFC42A;
  }

  * {
    color: #364777;
  }

  .menu-title {
    color: #364777;
    font-size: 10pt;
  }

  .menu-title:hover {
    animation: slide-in-fwd-center .4s cubic-bezier(.25, .46, .45, .94) both
  }

  @keyframes slide-in-fwd-center {
    0% {
      transform: translateZ(-1400px);
      opacity: 0
    }

    100% {
      transform: translateZ(0);
      opacity: 1
    }
  }

  @keyframes swing-out-bottom-bck {
    0% {
      transform: rotateX(0);
      transform-origin: bottom;
      opacity: 1
    }

    100% {
      transform: rotateX(100deg);
      transform-origin: bottom;
      opacity: 0
    }
  }

  .menu-icon:hover {
    animation: swing-out-bottom-bck .45s cubic-bezier(.6, -.28, .735, .045) both
  }

  .footer-bg{
    background-color: #f5f8fd;
  }