@media (max-width: 768px) {

  body {
    background: url(../img/background.png) no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #002085;
  }

  #about {
    scroll-margin-top: 70px;
  }

  #service,
  #portofolio {
    scroll-margin-top: 120px;
  }

  #contact {
    scroll-margin-top: 50px;
  }

  .navbar .container-fluid {
    padding: 0px !important;
  }

  .navbar-brand {
    display: none;
  }

  .navbar-brand-mobile {
    display: block !important;
    letter-spacing: 2px;
    font-size: 18px;
    padding-left: 10px !important;
  }

  .navbar.active-nav {
    background-color: rgb(0, 5, 82);
  }

  .navbar-collapse {
    padding: 0px 20px;
  }

  .hero {
    background: url(../img/hero-sm.png) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
    overflow: hidden;
    height: 98vh;
    display: flex;
    text-align: center;
    align-items: center;
  }

  .hero-content {
    width: 100%;
    padding: 30px !important;
    margin-top: 50px;
  }

  .hero-content img {
    display: block;
    margin: 0px auto;
  }

  .hero-content .w-50,
  .hero-content .col-3 {
    width: 100% !important;
  }

  .hero-brand {
    width: 80%;
    margin: 0px auto;
  }

  .motto {
    text-shadow: 3px 3px 8px rgba(0, 0, 0);
    margin-bottom: 40px;
  }

  .hero-content a {
    background: #001D5F;
    background: linear-gradient(0deg, rgba(0, 29, 95, 1) 30%, rgba(71, 148, 255, 1) 100%);
    color: whitesmoke;
    border-radius: 10px !important;
    display: block;
    width: 100%;
    margin-right: 0 !important;
  }

  .box-intro {
    margin-top: -50px;
    padding: 00px 30px;
  }

  .intro {
    margin: 15px 0px;
  }

  .container-mobile {
    padding: 0px;
  }

  .tetang-kami {
    margin-top: -30px;
  }

  .tetang-kami-one {
    border-radius: 0px !important;
    padding: 40px 30px !important;
    padding-bottom: 100px !important;
  }

  .btn-page {
    border-radius: 5px;
  }

  .tetang-kami-two {
    border-radius: 0px !important;
    padding: 20px !important;
    padding-bottom: 150px !important;
  }

  .tetang-kami-two img {
    margin-top: -100px;
    border-radius: 10px !important;
  }

  .visi-misi {
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: 20px 10px !important;
  }

  .visi-misi .icon-misi {
    width: 70px;
    height: 70px;
    margin-bottom: 15px;
    border-radius: 50%;
  }

  .visi-misi .col {
    margin-left: 0 !important;
  }

  .section-bidang-usaha {
    padding-top: 0px !important;
    margin-top: -50px;
  }

  .bidang-usaha h1 {
    font-size: 24px;
  }

  .bidang-usaha .col-6 {
    width: 100%;
    color: #adcdfd;
  }

  .box-bisnis {
    width: 90% !important;
    margin: 30px auto;
    border-radius: 10px;
    flex-direction: column;
    border: solid 2px #0d6efd !important;
  }

  .img-bisnis {
    width: 100%
  }

  .content-bisnis {
    width: 100%;
    padding: 20px !important;
  }

  .row-list {
    flex-direction: column;
    margin-bottom: 20px !important;
  }

  .row-list .col {
    margin: 0px;
  }

  .content-bisnis a {
    border-radius: 10px !important;
  }

  .img-bisnis-bottom {
    order: -1;
    width: 100%;
  }

  .pesan-join {
    border-radius: 0px !important;
    margin-top: -50px;
    padding: 30px 0px !important;
    background: #001138;
  }

  .pesan-join h3 {
    font-size: 18px;
    width: 90%;
    margin: 0px auto;
    line-height: 1.5;
    letter-spacing: 1px;
  }

  .pesan-join h6 {
    width: 90%;
    margin: auto;
  }

  .brand-break {
    display: block;
    color: #adcdfd;
    margin-bottom: 30px;
  }

  .manajemen-mutu {
    margin-top: -30px;
  }

  .manajemen-mutu .col-6 {
    padding: 0px 20px;
    width: 100% !important;
  }

  .box-iso {
    padding: 10px;
  }

  .img-iso {
    padding: 8px !important;
  }

  .img-iso img {
    border: solid #0d6efd 3px !important;
  }

  .keunggulan h1 {
    font-size: 22px;
  }

  .keunggulan .col-6 {
    width: 100%;
    padding: 0px 25px;
  }

  .list-keunggulan>div {
    width: 100%;
  }

  /* biar lebih rapi */
  .list-keunggulan {
    padding: 0px;
    margin-top: 10px !important;
  }

  .content-keunggulan {
    display: flex;
    gap: 15px;
    padding: 15px !important;
  }

  .icon-unggulan {
    margin-right: 0px;
    width: 50px;
    height: 50px;
  }

  .content-text {
    flex: 1;
  }

  .content-text h5 {
    margin-top: 0px !important;
    font-size: 18px;
    font-weight: bolder;
  }

  .content-contact {
    padding: 60px 15px;
  }

  .content-contact .container {
    padding: 0px;
  }

  .content-contact .row.mt-5 {
    margin-top: 10px !important;
  }

  .content-alamat {
    width: 100%;
    padding: 15px !important;
  }

  .box-contact {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    text-align: center;
  }

  .icon-box {
    margin-bottom: 10px !important;
    margin: auto;
    width: 45px;
    height: 45px;
  }

  .icon-box i {
    font-size: 24px;
  }

  .box-contact .text-intro {
    line-height: 1.2 !important;
    width: 100%;
  }

  .send-email {
    padding: 0px 15px !important;
  }

  .box-send-email {
    padding: 20px;
  }

  .box-send-email label {
    margin-bottom: 5px;
  }

  .penutup {
    padding: 20px 0px !important;
  }

  .penutup .col-5 {
    width: 100%;
    margin: 0px 0px !important;
    padding: 0px;
  }

  .penutup img {
    width: 80px;
    margin-left: 10px;
  }

  .penutup h4 {
    font-size: 22px;
    letter-spacing: 1px;
    margin-left: 10px;
  }

  .text-penutup {
    font-size: 14px;
  }

  .penutup-socialmedia {
    margin-top: 20px !important;
  }

  .icon-sosialmedia {
    width: 45px !important;
    height: 45px !important;
    margin-right: 15px;
  }

  .icon-sosialmedia i {
    font-size: 24px;
  }

  .penutup-content {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 40px !important;
    padding: 0px 15px !important;
  }

  .penutup a {
    line-height: 1.5;
  }

  .penutup-perusahaan {
    margin-top: 15px !important;
  }



  /* End ... */
}