.display-none {
  display: none !important;
}

/*--------------------------------------------------------------
# Header / Navbar
--------------------------------------------------------------*/
.chat-button {
  z-index: 1000;
  right: 25px;
  width: 244px;
  border: none;
  position: fixed;
  bottom: 10px !important;
  background: none;
  outline: none;
  display: inline-block;
  align-items: flex-start;
}
.chat-button:focus {
  border: none;
  outline: none;
}
.chat-button img {
  margin-left: 165px;
}
.chat-button p{
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 10px;
  width: 156px;
  height: 42px;
  opacity: 1;
}
.chat-title {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font: normal normal 600 13px/26px Poppins;
  color: #2c2c2c;
  position: absolute;
  bottom: 20px;
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 8px;
  padding-left: 26px;
}

@media only screen and (max-width: 420px) and (min-width:280px) {
  .chat-button {
    z-index: 1000;
    right: 0;
    width: 244px;
    border: none;
    position: fixed;
    bottom: 10px !important;
    background: none;
    outline: none;
    display: inline-block;
    align-items: flex-start;
  }
}

.navbar {
  background: #ffffff;
  transition: all 0.5s;
  padding: 12px;
  top: 0px;
  /* box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); */
}

.navbar .nav-logo {
  /* margin-left: 20px; */
}

.collapse > ul > li {
  display: block;
  position: relative;
  padding: 10px 0 10px 28px;
}

.collapse .a {
  display: block;
  transition: 0.3s;
  position: relative;
  color: #2c2c2c;
  opacity: 1;
  font: normal normal normal 15px/23px Poppins;
}
/* .collapse .li-button {
  margin-right: 134px;
} */
.collapse .btn-nav {
  /* display: block; */
  /* position: relative; */
  background-color: #00a6cf;
  /* margin-right: 134px; */
  padding-top: 12px;
  margin-top: -5px;
  transition: 0.3s;
  width: 168px;
  height: 50px;
  font: normal normal normal 15px/23px Poppins;
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 1;
}

.collapse .a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 1px;
  left: 0;
  /* right: 0; */
  background-color: #106eea;
  visibility: hidden;
  width: 0px;
  transition: all 0.3s ease-in-out 0s;
}

.collapse .a:hover:before,
.collapse li:hover > .a:before,
.collapse .active > .a:before {
  visibility: visible;
  width: 100%;
}
/* NAVBAR CUSTOM RESPONSIVE */
  #nav-side-mobile{
    top: 0;
    left: 0;
    display: none;
    position: fixed;
    z-index: 1000;
    background-color:white;
    border:2px solid white;
    height: 100%;
    width: 100%;
  }
  .nav-side-mobile .hide-nav {
    background: none;
    border: none;
    outline: none;
    margin-top: 23px;
  }
  
  .nav-side-mobile .nav-item a {
    text-align: left;
    font: normal normal 600 14px/21px Poppins;
    letter-spacing: 0px;
    color: #2C2C2C;
    opacity: 1;
  }
  .nav-side-mobile .nav-item .btn-nav-mobile {
    margin-top: 90px;
    background: #00A6CF;
    width: 265px;
    height: 50px;
    padding-top: 10px;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    text-align: center;
    font: normal normal normal 15px/23px Poppins;
  }
  .nav-side-mobile .head-nav img{
    margin-left: 10px;
  }
  .nav-side-mobile .hide-nav{
    margin-right: 10px;
  }
  .nav-side-mobile .body-nav .nav-li {
    margin-top: 10px;
  }
  .nav-side-mobile .body-nav .nav-li-top {
    margin-top: 50px;
  }
  .nav-side-mobile .body-nav .nav-item .nav-link {
    margin-left: 10px;
  }
  .navbar .btn-show-nav {
    margin-top: 10px;
    margin-right: 10px;
    border-radius: 50%;
    height: 45px;
    width: 45px;
  }
  /* responsive */
  @media only screen and (max-width: 360px) and (min-width:250px)  {
    .navbar {
      margin-bottom: 36px;
      position: sticky;
      z-index: 1000;
      background: #ffffff;
      transition: all 0.5s;
      padding: 12px;
      top: 0px;
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1) !important;
    }
    .nav-side-mobile .nav-item .btn-nav-mobile {
      background: #00A6CF;
      width: 200px;
      height: 50px;
      padding-top: 10px;
      letter-spacing: 0px;
      color: #FFFFFF;
      opacity: 1;
      text-align: center;
      font: normal normal normal 15px/23px Poppins;
    }
    .nav-side-mobile .active {
      background: #00a6cf;
      color: white !important;
    }
    .nav-side-mobile .nav-item .aktif {
      color: white !important;
    }
  }
  @media only screen and (max-width: 767px) and (min-width:361px)  {
    .navbar {
      margin-bottom: 36px;
      position: sticky;
      z-index: 1;
      background: #ffffff;
      transition: all 0.5s;
      padding: 12px;
      top: 0px;
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1) !important;
    }
    .nav-side-mobile .active {
      background: #00a6cf;
      color: white !important;
    }
    .nav-side-mobile .nav-item .aktif {
      color: white !important;
    }
    
  }
  @media only screen and (min-width:768px) and (max-width: 1000px)  {
    .navbar {
      margin-bottom: 72px;
      position: sticky;
      z-index: 1;
      background: #ffffff;
      transition: all 0.5s;
      padding: 12px;
      top: 0px;
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1) !important;
    }
    .nav-side-mobile .nav-item .btn-nav-mobile {
      background: #00A6CF;
      width: 293px;
      height: 50px;
      padding-top: 10px;
      letter-spacing: 0px;
      color: #FFFFFF;
      opacity: 1;
      text-align: center;
      font: normal normal normal 15px/23px Poppins;
    }
    .nav-side-mobile .head-nav img{
      margin-left: 40px;
    }
    .nav-side-mobile .hide-nav{
      margin-right: 40px;
    }
    .nav-side-mobile .body-nav .nav-li-top {
      margin-top: 80px;
      border-bottom: 1px solid #e0e0e0;
      margin-left: 34px;
      margin-right: 40px;
      height: 70px;
    }
    .nav-side-mobile .body-nav .nav-li {
      margin-top: 30px;
      border-bottom: 1px solid #e0e0e0;
      margin-left: 34px;
      margin-right: 40px;
      height: 70px;
    }
    
    .nav-side-mobile .body-nav .active {
      border-bottom: 1px solid #e0e0e0;
      border-left: thick solid #00a6cf;
      margin-left: 34px;
      margin-right: 40px;
      height: 70px;
    }
    .nav-side-mobile .body-nav .nav-item .nav-link {
      margin-left: 30px;
      margin-top: 20px;
    }
  }
  @media only screen and (max-width:1050px) and (min-width: 1000px) {
    .navbar {
      margin-bottom: 72px;
      position: sticky;
      z-index: 1;
      background: #ffffff;
      transition: all 0.5s;
      padding: 12px;
      top: 0px;
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1) !important;
    }
    .navbar .navbar-nav {
      display: none;
    }
    .navbar .btn-show-nav {
      display: block;
      margin-left: 760px;
    }
    
    .nav-side-mobile .nav-item .btn-nav-mobile {
      margin-top: 200px;
      background: #00A6CF;
      width: 320px;
      height: 77px;
      padding-top: 16px;
      letter-spacing: 0px;
      color: #FFFFFF;
      opacity: 1;
      text-align: center;
      font: normal normal normal 25px Poppins;
    }
    .nav-side-mobile .head-nav img{
      margin-left: 40px;
    }
    .nav-side-mobile .hide-nav{
      margin-right: 40px;
    }
    .nav-side-mobile .body-nav .nav-li-top {
      margin-top: 110px;
      border-bottom: 1px solid #e0e0e0;
      margin-left: 34px;
      margin-right: 40px;
      height: 110px;
    }
    .nav-side-mobile .body-nav .nav-li {
      margin-top: 0;
      border-bottom: 1px solid #e0e0e0;
      margin-left: 34px;
      margin-right: 40px;
      height: 110px;
    }
    .nav-side-mobile .body-nav .active {
      border-bottom: 1px solid #e0e0e0;
      border-left: thick solid #00a6cf;
      margin-left: 34px;
      margin-right: 40px;
      height: 110px;
    }
    .nav-side-mobile .body-nav .nav-item .nav-link {
      margin-left: 30px;
      margin-top: 35px;
      font: normal normal 600 26px Poppins;
    }
  }
/* END OF NAVBAR CUSTOM RESPONSIVE */

@media only screen and (max-width: 1200px) {
  .collapse .li-button {
    margin-right: 0;
  }
  /* .navbar .nav-logo {
    margin-left: 0;
  } */
}
/*--------------------------------------------------------------
# Nav Beranda
# Section banner atas
--------------------------------------------------------------*/

#banner-atas {
  width: 100%;
  background: #ffffff;
  /* background: #a3a2a2; */
  background-size: cover;
  padding-bottom: 120px;
  position: relative;
}

.banner-atas .row {
  display: flex;
}

.banner-atas .point-banneratas {
  position: absolute;
  /* top: 23px; */
  left: -80px;
  margin-top: 80px;
}

.banner-atas .bigio {
  /* margin-left: 136px; */
  margin-top: 60px;
  text-align: left;
  font: normal normal 600 15px/64px Poppins;
  letter-spacing: 3px;
  color: #00a6cf;
  opacity: 1;
}

.banner-atas .swiper-wrapper {
  margin-top: -21px;
}

.banner-atas .swiper-slide-active {
  height: auto !important;
}

.wrapper-headline{
  height: 380px;
  margin-bottom: 20px;
}

.banner-atas .bangun {
  /* margin-top: -21px; */
  /* margin-left: 134px; */
  text-align: left;
  font: normal normal 600 40px/56px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.banner-atas .lebih {
  /* margin-left: 136px; */
  margin-top: 30px;
  text-align: left;
  font: normal normal normal 15px/26px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}

.banner-atas .membangun {
  /* margin-left: 136px; */
  margin-top: -16px;
  text-align: left;
  font: normal normal normal 15px/26px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}

.banner-atas .pekerjaan {
  /* margin-left: 136px; */
  margin-top: -16px;
  text-align: left;
  font: normal normal normal 15px/26px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}

.banner-atas .software {
  width: 400px;
  font: normal normal normal 15px/26px Poppins;
  color: #666366;
  /* margin-left: 136px; */
}

.banner-atas .col-right {
  position: absolute;
  overflow: hidden;
  right: 0;
}

.banner-atas .ilustrasi-atas {
  position: relative;
  margin-top: 60px;
  margin-left: 90px;
  max-width: 816px;
  max-height: 385px;
}

.banner-atas .btn-selengkapnya {
  /* margin-left: 137px; */
  background-color: #00a6cf;
  border-radius: 5px;
  width: 168px;
  height: 50px;
  /* height: auto; */
  /* font-size: 15px; */
  padding-top: 12px;
  padding-right: 12px;
  padding-left: 12px;
  font: normal normal normal 15px/23px Poppins;
  letter-spacing: 0px;
  margin-top: 18px;
}

.banner-atas .btn-selengkapnya:hover {
  box-shadow: 0px 3px 6px #00A6CF80;
}

@media only screen and (max-width: 765px) {
  #banner-atas {
    padding-bottom: 40px;
  }

  #banner-atas .col-left {
    padding-left: 34px;
    padding-right: 34px;
  }

  #banner-atas .col-left p {
    width: 100%;
    margin-left: 0;
  }

  #banner-atas .bigio {
    margin-top: 20px;
  }

  #banner-atas .col-left a {
    width: 168px;
    height: 50px;
    margin-left: 0;
  }

  #banner-atas .col-right {
    position: relative;
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;
  }

  #banner-atas .col-right img {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
  }

  #banner-atas .row {
    display: flex;
    flex-direction: column-reverse;
  }

  .banner-atas .bangun {
    font: normal normal 600 25px/40px Poppins;
  }

  .banner-atas .software {
    font: normal normal normal 12px/26px Poppins;
  }

  .banner-atas .point-banneratas {
    left: -40px;
    margin-top: 42px;
  }
}

@media only screen and (max-width: 1200px) and (min-width: 768px) {
  .banner-atas .bangun {
    font: normal normal 600 35px/56px Poppins;
  }

  .banner-atas .point-banneratas {
    left: -65px;
  }

  .banner-atas .ilustrasi-atas {
    margin-top: 40px;
  }
}

/*--------------------------------------------------------------
# Nav Beranda
# Section protofolio
--------------------------------------------------------------*/
/* #list {
  text-align: center;
  color: white;
  margin-top: 80px;
  width: 100%;
  overflow: hidden;
  margin-bottom: -1.875em;
  -webkit-column-count: 2;
  -webkit-column-gap: 1.875em;
  -webkit-column-fill: auto;
  -moz-column-count: 2;
  -moz-column-gap: 1.875em;
  -moz-column-fill: auto;
  column-count: 2;
  column-gap: 1.875em;
  column-fill: auto;
} */

.portofolio .flex {
  display: flex;
  flex-wrap: wrap;
}

#portofolio {
  height: 100%;
  background: #f8f8f8 0% 0% no-repeat padding-box;
  padding-top: 70px;
  padding-bottom: 70px;
}

.portofolio .row {
  display: flex;
}

.portofolio .sisi-kanan {
  margin-top: -135px;
}

.portofolio .point-portofolio {
  position: absolute;
  right: 0px;
  margin-top: -40px;
}

.portofolio .judul {
  margin-top: 0px;
  text-align: left;
  font: normal normal 600 45px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.card-zoom {
  transition: transform 0.6s;
}

.card-zoom:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
}

.portofolio .card-holder1 {
  position: relative;
  width: 100%;
  height: auto;
  opacity: 1;
  background-color: transparent;
  border: none;
  text-align: center;
  display: block;
  margin: 0 auto;
}

.portofolio .card-holder1:hover {
  text-decoration: none;
}

.portofolio .card1 {
  position: relative;
  margin-top: 130px;
  width: 505px;
  height: auto;
  border-radius: 40px;
  z-index: 1;
}

.portofolio .card-bg {
  position: relative;
  background: fit-content(100%);
  width: 505px;
  background: #ffffff;
  border-radius: 40px;
}

.portofolio .card1:hover .card-zoom {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
}

.portofolio .point-cardporto1 {
  position: absolute;
  left: -9%;
  bottom: -14%;
}

.portofolio .point-cardporto2 {
  position: absolute;
  right: -6%;
  top: -14%;
}

.portofolio .card1:hover {
  text-decoration: none;
}

.portofolio .img1 {
  margin-top: -50px;
  max-height: 400px;
  max-width: 80%;
  opacity: 1;
}

.portofolio .deskripsi {
  margin-left: 35px;
  margin-right: 35px;
  margin-top: 20px;
}

.portofolio .judul-card1 {
  margin-top: 0px;
  text-align: left;
  font: normal normal 600 24px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.portofolio .card1:hover .judul-card1 {
  color: #ffffff;
  text-decoration: none;
}

.portofolio .sub-judul-card1 {
  /* margin-top: -10px; */
  text-align: left;
  font: normal normal normal 15px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}

.portofolio .card1:hover .sub-judul-card1 {
  color: #ffffff;
  opacity: 0.8;
  text-decoration: none;
}

/* .portofolio .ingin-tau-holder {
  margin-top: -150px;
} */

.portofolio .ingin-tahu {
  margin-top: -30px;
  font: normal normal 600 24px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.portofolio .yuk {
  position: relative;
  margin-top: -30px;
  font: normal normal normal 15px/64px Poppins;
  color: #00a6cf;
  margin-right: 65px;
}

.portofolio .yuk i {
  opacity: 0;
  margin-left: -20px;
  transition: all 0.3s linear;
}

.portofolio .yuk:hover {
  text-decoration: none;
}

.portofolio .yuk a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -3px;
  right: 0;
  background-color: #00a6cf;
  transition: all 0.3s ease-in-out 0s;
}

.portofolio .yuk:hover:after {
  width: 0%;
  background: transparent;
  transition: all 0.3s ease-in-out 0s;
}

.portofolio .yuk a:hover i {
  opacity: 1;
  transform: translateX(25px);
}

.portofolio .ingin-tau-holder {
  float: right;
  width: 400px;
  height: 100px;
  opacity: 1;
}

@media only screen and (max-width: 280px) {
  .portofolio .yuk {
    width: 100%;
    text-align: right;
    margin-right: 0px !important;
  }
}

@media only screen and (max-width: 765px) {
  /* Portofolio beranda */
  .portofolio .judul {
    padding-left: 20px;
    padding-right: 20px;
    font: normal normal 600 20px/64px Poppins;
  }

  .portofolio .point-portofolio {
    display: none;
  }

  .portofolio .sisi-kanan {
    margin-top: 0px;
    width: 100%;
  }

  .portofolio .sisi-kiri {
    width: 100%;
  }

  .portofolio .card-bg {
    width: 100%;
  }

  .portofolio .card1 {
    width: 100%;
  }

  .portofolio .judul-card1 {
    font: normal normal 600 16px Poppins;
  }

  .portofolio .sub-judul-card1 {
    font: normal normal 600 12px Poppins;
  }

  .portofolio .ingin-tau-holder {
    width: 100%;
    margin-top: 0px;
    margin-bottom: 80px;
    text-align: center;
  }

  .portofolio .ingin-tahu {
    margin-top: -30px;
    font: normal normal 600 14px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }

  .portofolio .yuk {
    font: normal normal normal 12px Poppins;
    margin-top: -10px;
    margin-right: 20px;
  }
}

@media only screen and (max-width: 1200px) and (min-width: 768px) {
  .portofolio .judul {
    font: normal normal 600 35px/41px Poppins;
  }

  .portofolio .judul-card1 {
    font-size: 18px;
  }

  .portofolio .sub-judul-card1 {
    font: normal normal normal 13px/35px Poppins;
  }

  .portofolio .ingin-tahu {
    font: normal normal 600 18px/45px Poppins;
  }

  .portofolio .yuk {
    font: normal normal normal 12px/43px Poppins;
    margin-right: 47px;
  }

  .portofolio .point-portofolio {
    margin-top: -100px;
  }
}

/*--------------------------------------------------------------
# Nav Beranda
# Section pelanggan kami
--------------------------------------------------------------*/

#pelanggan-kami {
  height: auto;
  background: 0% 0% no-repeat padding-box;
}

.pelanggan-kami .judul {
  text-align: left;
  font: normal normal 600 45px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.pelanggan-kami .img-area {
  max-width: 200px;
  max-height: 110px;
  margin-bottom: 60px;
  margin-left: 80px;
  margin-top: 50px;
  width: 200px;
  height: 110px;
  opacity: 1;
}

.pelanggan-kami .img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.pelanggan-kami .img:hover {
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}

.pelanggan-kami .arah-kiri {
  position: relative;
  margin-left: -90px;
  background: transparent 0% 0% no-repeat padding-box;
  opacity: 1;
}

.pelanggan-kami .arah-kiri:hover {
  left: -10px;
  transition: transform 0.6s;
}

.pelanggan-kami .arah-kanan {
  position: relative;
  margin-right: -90px;
  background: transparent 0% 0% no-repeat padding-box;
  opacity: 1;
}

.pelanggan-kami .arah-kanan:hover {
  left: 10px;
  transition: transform 0.6s;
}

.pelanggan-kami .point-pelanggan {
  position: absolute;
  right: 20px;
  margin-top: -40px;
}

@media only screen and (max-width: 765px) {
  .pelanggan-kami {
    padding-left: 20px;
    padding-right: 20px;
  }

  .pelanggan-kami .judul {
    font: normal normal 600 20px/64px Poppins;
    margin-top: -110px;
  }

  /* .pelanggan-kami .img-area {
    margin-top: 80px;
  } */

  .pelanggan-kami .glide__arrows {
    display: none;
  }

  .pelanggan-kami .model {
    margin-left: 0px !important;
    width: 98px;
    height: 64px;
    margin-top: 20px;
  }
  
  .pelanggan-kami .glide__slide {
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
    margin-left: 0px !important;
    margin-right: 10px !important;
  }


  .pelanggan-kami .point-pelanggan {
    display: none;
  }
}

@media only screen and (max-width: 1200px) and (min-width: 768px) {
  .pelanggan-kami .judul {
    font: normal normal 600 35px/41px Poppins;
  }

  .pelanggan-kami .glide__arrows {
    display: none;
  }

  .pelanggan-kami .model {
    margin-left: 0px !important;
    width: 176px;
    height: 97px;
  }

  .pelanggan-kami .glide__slide {
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
    margin-left: 0px !important;
    margin-right: 10px !important;
  }
}

/*--------------------------------------------------------------
# Nav Beranda
# Section testimoni
--------------------------------------------------------------*/
.testimoni .center {
  display: flex;
  align-items: center;
  /* justify-content: center; */
}

.testimoni .col-foto {
  padding-left: 30px;
}

#testimoni {
  padding-bottom: 100px;
  width: 100%;
  height: auto;
  background: #f8f8f8 0% 0% no-repeat padding-box;
  opacity: 1;
}

.testimoni .judul {
  text-align: left;
  font: normal normal 600 45px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.testimoni .col-testi {
  padding: 0px;
}

.testimoni .splide,
.testimoni .slick {
  margin-top: 50px;
}

.testimoni .splide__slide, 
.testimoni .slick-slide {
  background: #f8f8f8 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 15px;
  margin: 0 30px;
}

.testimoni .splide__slide {
  opacity: 0.3;
}

.testimoni .is-active {
  opacity: 1;
}

.testimoni .splide__arrow--prev {
  position: absolute;
  left: 80px;
  background: url("../themes/big-theme/assets/img/Beranda/Arrow\ Left.png");
  width: 45px;
  height: 45px;
  opacity: 1;
}

.testimoni .splide__arrow--next {
  position: absolute;
  right: 80px;
  background: url("../themes/big-theme/assets/img/Beranda/Arrow\ Right.png");
  width: 45px;
  height: 45px;
  opacity: 1;
}

.testimoni .splide__arrows svg {
  display: none;
}

.testimoni .slick {
  display: none;
}

.testimoni .card-testi {
  margin-top: 50px;
  margin-left: 15%;
  width: 70%;
  height: auto;
  background: #f8f8f8 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 8px;
  opacity: 1;
}

.testimoni .card-testi:hover {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 5px;
  opacity: 1;
}

.testimoni .pp {
  width: 80px;
  height: 80px;
  margin-top: 25px;
}

.testimoni .petik {
  /* margin-top: -130px; */
  margin-left: -7%;
  text-align: left;
  font: normal normal bold 103px/30px Times New Roman;
  letter-spacing: 0px;
  color: #dddddd;
  opacity: 1;
}

.testimoni .nama {
  /* margin-top: -70px; */
  /* margin-left: 150px; */
  padding-top: 30px;
  text-align: left;
  font: normal normal 600 20px/30px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.testimoni .nama-keterangan {
  /* margin-top: -50px; */
  /* margin-left: 150px; */
  text-align: left;
  font: normal normal normal 15px/30px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}

.testimoni .pre {
  overflow-x: auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  margin-right: 10px;
  text-align: left;
  font: normal normal normal 20px/32px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.testimoni .pesan {
  margin-right: 10px;
  margin-top: -30px;
  text-align: left;
  font: normal normal normal 20px/32px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.testimoni .arah-kiri {
  margin-top: 20px;
  position: relative;
  color: #0c2a50;
  background: transparent 0% 0% no-repeat padding-box;
  opacity: 1;
}

/* .testimoni .arah-kiri:hover {
  left: -10px;
  transition: transform 0.6s;
} */

.testimoni .arah-kanan {
  margin-top: 20px;
  position: relative;
  color: #0c2a50;
  background: transparent 0% 0% no-repeat padding-box;
  opacity: 1;
}

/* .testimoni .arah-kanan:hover {
  left: 10px;
  transition: transform 0.6s;
} */
@media only screen and (width: 280px) {
  .testimoni .pre {
    overflow-x: auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    margin-right: 10px;
    text-align: left;
    font: normal normal normal 17px/32px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
}

@media only screen and (max-width: 765px) {
  .testimoni .judul {
    padding-left: 20px;
    padding-right: 20px;
    font: normal normal 600 20px/64px Poppins;
  }

  .testimoni .card-testi {
    width: 85%;
    margin: 0 auto;
  }

  .testimoni .col-foto {
    padding-left: 15px;
  }

  .testimoni .nama {
    font: normal normal 600 11px Poppins;
  }

  .testimoni .nama-keterangan {
    font: normal normal normal 7px Poppins;
    margin-top: -15px;
  }

  .testimoni .deskripsi {
    margin-top: -20px;
  }

  .testimoni .petik {
    font: normal normal normal 43px Passion One;
  }

  .testimoni .pesan {
    margin-top: -45px;
  }

  .testimoni .pre {
    font: normal normal normal 8px/15px Poppins;
  }

  .testimoni .pp {
    width: 23px;
    height: 23px;
  }

  .testimoni .nama {
    padding-top: 10px;
  }

  .testimoni .glide__arrow {
    display: none;
  }

  .testimoni .splide {
    display: none;
  }

  .testimoni .slick {
    display: inline-block;
    width: 100%;
  }

  .testimoni .slick-slide {
    margin: 0 10px;
  }
}

@media only screen and (max-width: 1200px) and (min-width: 768px) {
  .testimoni .judul {
    font: normal normal 600 35px/41px Poppins;
  }

  .testimoni .pp {
    width: 50px;
    height: 50px;
  }

  .testimoni .nama-keterangan {
    font: normal normal normal 12px/29px Poppins;
    margin-top: -10px;
  }

  .testimoni .pre {
    font: normal normal normal 15px/30px Poppins;
  }
  
  .testimoni .glide__arrow {
    display: none;
  }

  .testimoni .slick {
    display: inline-block;
    width: 100%;
  }

  .testimoni .splide {
    display: none;
  }
}

/*--------------------------------------------------------------
# Nav pelayanan Kami
# Section pelayanan
--------------------------------------------------------------*/

body {
  color: white;
}

.nav-pelayanan {
  margin-bottom: 100px;
}

.nav-pelayanan .title {
  margin-top: 72px;
  text-align: center;
  font: normal normal 600 45px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.nav-pelayanan .title-desc {
  text-align: center;
  font: normal normal normal 15px/26px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}
/* css layanan yang gambarnya sebelah kiri */
.nav-pelayanan .mobile-left {
  margin-top: 63px;
  text-align: center;
}
.nav-pelayanan .mobile-right .box-tentang1 {
  width: 450px;
}
.nav-pelayanan .mobile-right .mobile-title {
  margin-top: 150px;
  text-align: left;
  font: normal normal 600 45px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}
.nav-pelayanan .mobile-right .mobile-desc {
  text-align: left;
  font: normal normal normal 15px/30px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}
.nav-pelayanan .mobile-right {
  overflow: hidden;
}

.nav-pelayanan .row-mobile .card-layanan-mobile {
  display: none;
  border-top: 10px solid red;
  border-radius: 10px;
  width: 290px;
  height: 380px;
} 
/* css layanan yang gambarnya sebelah kanan */
.nav-pelayanan .website-left .box-tentang2 {
  width: 450px;
  margin-left: 100px;
}
.nav-pelayanan .website-right {
  margin-top: 100px;
  text-align: center;
  overflow: hidden;
}
.nav-pelayanan .website-left .website-title {
  margin-top: 160px;
  text-align: left;
  font: normal normal 600 45px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}
.nav-pelayanan .website-left .website-desc {
  text-align: left;
  font: normal normal normal 15px/30px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}
.nav-pelayanan .row-mobile .card-layanan-mobile2 {
  display: none;
  border-top: 10px solid #FE7F46;
  border-radius: 10px;
  width: 290px;
  height: auto;
}

.nav-pelayanan .row-layanan .makeup-layanan1 {
  position: absolute;
  /* height: 100%; */
  overflow: hidden;
  margin-top: 5%;
  right: 0;
  z-index: -1;
}
.nav-pelayanan .row-layanan .makeup-layanan1 img {
  width: 348px;
  height: 460px;
  margin-right: -50px;
  /* margin-top: 55px; */
}

.nav-pelayanan .row-layanan .absolute-left {
  position: absolute;
  top: 20px;
  z-index: -1;
}
.nav-pelayanan .row-layanan .absolute-left img {
  width: 348px;
  height: 460px;
  margin-left: -120px;
}

.banner-bawah-layanan {
  margin-top: 150px;
}

/* .nav-pelayanan-banner .bangun-aplikasi {
  margin-top: 100px;
} */
/* css responsive bagian menu pelayanan kami */
@media only screen and (width: 280px) {
  .nav-pelayanan .title {
    margin-top: 50px;
    text-align: center;
    font: normal normal 600 20px/37px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .nav-pelayanan .title-desc {
    text-align: center;
    font: normal normal normal 11px/26px Poppins;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }
  .nav-pelayanan .row-desktop {
    display: none;
  }
  .nav-pelayanan .right-side {
    display: none;
    flex-direction: column-reverse;
  }
  .nav-pelayanan .row-mobile {
    margin-left: -55px;
  }
  .nav-pelayanan .row-mobile .card-layanan-mobile {
    display: block;
    border-top: 10px solid #00a6cf;
    border-radius: 10px;
    width: 210px;
    height: auto;
  }
  .nav-pelayanan .row-mobile .card-layanan-mobile2 {
    display: block;
    border-top: 10px solid #FE7F46;
    border-radius: 10px;
    width: 210px;
    height: auto;
  }
  .nav-pelayanan .row-mobile .card-layanan-mobile .title-responsive {
    margin-top: 5px;
    font: normal normal 600 18px/27px Poppins;
    letter-spacing: 0px;
    color: #2C2C2C;
    opacity: 1;
  }
  .nav-pelayanan .row-mobile .card-layanan-mobile .desc-responsive {
    font: normal normal normal 10px/20px Poppins;
    letter-spacing: 0px;
    color: #2C2C2C;
    opacity: 1;
    padding-left: 10px;
    padding-right: 10px;
  }
  .nav-pelayanan .row-mobile .card-layanan-mobile2 .title-responsive {
    margin-top: 5px;
    font: normal normal 600 18px/27px Poppins;
    letter-spacing: 0px;
    color: #2C2C2C;
    opacity: 1;
  }
  .nav-pelayanan .row-mobile .card-layanan-mobile2 .desc-responsive {
    font: normal normal normal 10px/20px Poppins;
    letter-spacing: 0px;
    color: #2C2C2C;
    opacity: 1;
    padding-left: 10px;
    padding-right: 10px;
  }
  .nav-pelayanan .row-pelayanan {
    margin-left: auto;
    margin-right: auto;
  }
  .nav-pelayanan .mobile-right {
    margin-left: auto;
    margin-right: auto;
  }
  .nav-pelayanan .website-left {
    margin-left: auto;
    margin-right: auto;
  }
  .nav-pelayanan .mobile-right .box-tentang1 {
    margin-top: 70px;
    width: auto;
  }
  .nav-pelayanan .website-left .box-tentang2 {
    margin-top: 70px;
    width: auto;
    margin-left: 0;
  }
  .nav-pelayanan .mobile-left {
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
  }

  .nav-pelayanan .mobile-left img {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
  }

  .nav-pelayanan .website-right {
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
  }

  .nav-pelayanan .website-right img {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
  }

  .nav-pelayanan .mobile-right .mobile-title,
  .nav-pelayanan .website-left .website-title {
    margin-top: 0;
  }
  .nav-pelayanan .row-layanan .makeup-layanan1 {
    position: absolute;
    overflow: hidden;
    margin-top: 100%;
    right: 0;
    z-index: -1;
  }
}
@media only screen and (max-width: 540px) and (min-width: 320px) {
  .nav-pelayanan .title {
    margin-top: 72px;
    text-align: center;
    font: normal normal 600 30px/37px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .nav-pelayanan .title-desc {
    text-align: center;
    font: normal normal normal 11px/26px Poppins;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }
  .nav-pelayanan .row-desktop {
    display: none;
  }
  .nav-pelayanan .right-side {
    display: none;
    flex-direction: column-reverse;
  }
  .nav-pelayanan .row-mobile {
    margin-left: -55px;
  }
  .nav-pelayanan .row-mobile .card-layanan-mobile {
    display: block;
    border-top: 10px solid #00a6cf;
    border-radius: 10px;
    width: 290px;
    height: auto;
  }
  .nav-pelayanan .row-mobile .card-layanan-mobile2 {
    display: block;
    border-top: 10px solid #FE7F46;
    border-radius: 10px;
    width: 290px;
    height: auto;
  }
  .nav-pelayanan .row-mobile .card-layanan-mobile .title-responsive {
    margin-top: 5px;
    font: normal normal 600 18px/27px Poppins;
    letter-spacing: 0px;
    color: #2C2C2C;
    opacity: 1;
  }
  .nav-pelayanan .row-mobile .card-layanan-mobile .desc-responsive {
    font: normal normal normal 10px/20px Poppins;
    letter-spacing: 0px;
    color: #2C2C2C;
    opacity: 1;
    padding-left: 10px;
    padding-right: 10px;
  }
  .nav-pelayanan .row-mobile .card-layanan-mobile2 .title-responsive {
    margin-top: 5px;
    font: normal normal 600 18px/27px Poppins;
    letter-spacing: 0px;
    color: #2C2C2C;
    opacity: 1;
  }
  .nav-pelayanan .row-mobile .card-layanan-mobile2 .desc-responsive {
    font: normal normal normal 10px/20px Poppins;
    letter-spacing: 0px;
    color: #2C2C2C;
    opacity: 1;
    padding-left: 10px;
    padding-right: 10px;
  }
  .nav-pelayanan .row-pelayanan {
    margin-left: auto;
    margin-right: auto;
  }
  .nav-pelayanan .mobile-right {
    margin-left: auto;
    margin-right: auto;
  }
  .nav-pelayanan .website-left {
    margin-left: auto;
    margin-right: auto;
  }
  .nav-pelayanan .mobile-right .box-tentang1 {
    margin-top: 70px;
    width: auto;
  }
  .nav-pelayanan .website-left .box-tentang2 {
    margin-top: 70px;
    width: auto;
    margin-left: 0;
  }
  .nav-pelayanan .mobile-left {
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
  }

  .nav-pelayanan .mobile-left img {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
  }

  .nav-pelayanan .website-right {
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
  }

  .nav-pelayanan .website-right img {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
  }

  .nav-pelayanan .mobile-right .mobile-title,
  .nav-pelayanan .website-left .website-title {
    margin-top: 0;
  }
  .nav-pelayanan .row-layanan .makeup-layanan1 {
    position: absolute;
    overflow: hidden;
    margin-top: 100%;
    right: 0;
    z-index: -1;
  }
}
@media only screen and (max-width: 1000px) and (min-width: 768px) {
  .nav-pelayanan .mobile-left {
    text-align: left;
  }
  .nav-pelayanan .mobile-left img{
    height: 300px;
    width: 300px;
  }
  .nav-pelayanan .website-right img {
    height: 300px;
    width: 300px;
  }
  .nav-pelayanan .mobile-right .box-tentang1 {
    width: 320px;
  }
  .nav-pelayanan .mobile-right .mobile-title {
    margin-top: 80px;
    text-align: left;
    font: normal normal 600 37px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .nav-pelayanan .mobile-right .mobile-desc {
    text-align: left;
    font: normal normal normal 17px Poppins;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }

  .nav-pelayanan .website-left .box-tentang2 {
    width: 320px;
    margin-left: 0;
  }
  .nav-pelayanan .website-right {
    margin-top: 100px;
    text-align: center;
    overflow: hidden;
  }
  .nav-pelayanan .website-left .website-title {
    margin-top: 86px;
    text-align: left;
    font: normal normal 600 45px/64px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .nav-pelayanan .website-left .website-desc {
    text-align: left;
    font: normal normal normal 15px/30px Poppins;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }
}
@media only screen and (max-width: 1026px) and (min-width: 1001px) {
  .nav-pelayanan .mobile-left {
    text-align: left;
  }
  .nav-pelayanan .mobile-left img{
    height: 340px;
    width: 340px;
  }
  .nav-pelayanan .website-right img {
    height: 340px;
    width: 340px;
  }
  .nav-pelayanan .mobile-right .box-tentang1 {
    width: 400px;
  }
  .nav-pelayanan .mobile-right .mobile-title {
    margin-top: 100px;
    text-align: left;
    font: normal normal 600 37px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .nav-pelayanan .mobile-right .mobile-desc {
    text-align: left;
    font: normal normal normal 17px Poppins;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }

  .nav-pelayanan .website-left .box-tentang2 {
    width: 360;
    margin-left: 0;
  }
  .nav-pelayanan .website-right {
    margin-top: 100px;
    text-align: center;
    overflow: hidden;
  }
  .nav-pelayanan .website-left .website-title {
    margin-top: 130px;
    text-align: left;
    font: normal normal 600 45px/64px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .nav-pelayanan .website-left .website-desc {
    text-align: left;
    font: normal normal normal 15px/30px Poppins;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }
}
/*--------------------------------------------------------------
# Page Beranda
# Layanan kami
--------------------------------------------------------------*/
.layanan-kami {
  /* height: 667px; */
  height: 100%;
  padding-top: 70px;
  padding-bottom: 70px;
  background: #f8f8f8;
}

.layanan-kami .judul {
  text-align: left;
  font: normal normal 600 45px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  margin-bottom: 81px;
}

.layanan-kami .card-layanan {
  position: relative;
  width: 320px;
  margin-bottom: 20px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 5px 10px #0000001F;
}

.layanan-kami .card-layanan:hover {
  transition: all 0.8s ease-out 0s;
  box-shadow: 0px 0px 30px #00000029;
}

.layanan-kami .card-layanan a:hover {
  text-decoration: none;
}

.layanan-kami .card-layanan::after {
  content: "";
  position: absolute;
  transition: all 0.3s ease-in-out 0s;
}

.layanan-kami .card-layanan:hover::after {
  transition: all 0.3s ease-in-out 0s;
}

.layanan-kami .card-layanan i {
  opacity: 0;
  color: #00a6cf;
  margin-left: -20px;
  transition: all 0.3s linear;
}

.layanan-kami .card-layanan:hover i {
  opacity: 1;
  transform: translateX(23px);
}

.layanan-kami .img-layanan {
  width: 200px;
  height: 198px;
}

.layanan-kami .card-layanan h4 {
  font: normal normal 600 24px/32px Poppins;
  color: #2c2c2c;
  margin-top: 35px;
}

.layanan-kami .card-layanan h5 {
  font: normal normal normal 15px Poppins;
  color: #666366;
}

@media only screen and (max-width: 765px) {
  .layanan-kami {
    padding-top: 28px;
    padding-bottom: 63px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .layanan-kami .judul {
    font: normal normal 600 20px/64px Poppins;
    margin-bottom: 0px;
  }

  .layanan-kami .card-layanan {
    width: 190px;
    /* height: 219px; */
    border-radius: 10px;
    box-shadow: 0px 5px 10px #0000001F;
    margin-left: auto;
    margin-right: auto;
  }

  .layanan-kami .img-layanan {
    width: 135px;
    height: 132px;  
  }

  .layanan-kami .card-layanan h4 {
    font: normal normal 600 14px/37px Poppins;
    margin-top: 0px;
    text-align: center;
  }

  .layanan-kami .card-layanan h5 {
    display: none;
  }
}

@media only screen and (max-width: 1200px) and (min-width: 768px) {
  .layanan-kami .judul {
    font: normal normal 600 35px/41px Poppins;
  }

  .layanan-kami .card-layanan {
    width: auto;
  }

  .layanan-kami .card-layanan h4 {
    font: normal normal 600 18px Poppins;
    text-align: center;
  }

  .layanan-kami .card-layanan h5 {
    display: none;
  }
}

/*--------------------------------------------------------------
# Page Beranda
# Produk
--------------------------------------------------------------*/
.product {
  height: 100%;
  padding-top: 70px;
  padding-bottom: 70px;
}

.product .title {
  text-align: left;
  font: normal normal 600 45px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
}

.product .nm-product {
  margin-top: 20px;
  text-align: left;
  font: normal normal 600 15px/64px Poppins;
  letter-spacing: 3px;
  color: #00a6cf;
  opacity: 1;
}

.product .tagline-product {
  text-align: left;
  font: normal normal 600 40px/56px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.product .desc-product-short {
  width: 100%;
  font: normal normal normal 15px/26px Poppins;
  color: #666366;
}

.product .btn-learn-more {
  background-color: #00a6cf;
  border-radius: 5px;
  width: 200px;
  height: 50px;
  padding-top: 12px;
  padding-right: 12px;
  padding-left: 12px;
  font: normal normal normal 15px/23px Poppins;
  letter-spacing: 0px;
  margin-top: 18px;
  margin-bottom: 10px;
}

.product .image {
  max-height: 500px;
  max-width: 100%;
  opacity: 1;
  margin-top: 10px;
}

.product .image.mini {
  display: none;
}

@media only screen and (max-width: 765px) {
  .product .mini-reverse {
    flex-direction: column-reverse !important;
    display: flex !important;
    padding: 0px;
  }

  .product .info {
    padding: 10px;
  }

  .product .info * {
    align-items: center !important;
    text-align: center !important;
  }

  .product .description {
    padding: 5px;
  }

  .product .title {
    font: normal normal 600 20px/64px Poppins;
  }
  
  .product .nm-product {
    font: normal normal 600 15px/20px Poppins !important;
  }

  .product .tagline-product {
    font: normal normal 600 25px/40px Poppins;
  }

  .product .desc-product-short {
    display: table-cell !important;
    font: normal normal normal 12px/26px Poppins;
  }

  .product .learn-more {
    padding: 10px;
  }

  .product .learn-more a {
    width: 100% !important;
  }

  .product .image {
    display: none;
  }

  .product .image.mini {
    display: block !important;
  }
}

/*--------------------------------------------------------------
# Page Beranda
# Banner bawah
--------------------------------------------------------------*/
.bangun-aplikasi {
  width: 100%;
  height: auto;
  padding-top: 75px;
  padding-bottom: 75px;
  /* background: #0c2a50; */
  background: url("../themes/big-theme/assets/img/Beranda/Bg_banner-bangun aplikasimu.png") no-repeat;
  background-size: cover;
  /* background-image: url("{{'assets/img/Beranda/Bg_banner-bangun aplikasimu.png' | theme}}"); */
}

.bangun-aplikasi h3 {
  /* width: 566px; */
  /* height: 33px; */
  text-align: left;
  font: normal normal 600 24px Poppins;
  letter-spacing: 0px;
  color: #ffffff;
}

.bangun-aplikasi h6 {
  /* width: 226px; */
  /* height: 21px; */
  text-align: left;
  font: normal normal normal 15px Poppins;
  letter-spacing: 0px;
  color: #ffffff;
}

.bangun-aplikasi .btn-gabung {
  height: 50px;
  background: #02a4d2;
  border-radius: 5px;
  text-align: center;
  font: normal normal 600 16px/25px Poppins;
  color: #ffffff;
  padding-top: 10px;
}

.bangun-aplikasi .btn-bangun {
  /* width: 274px; */
  height: 50px;
  background: #02a4d2;
  border-radius: 5px;
  text-align: center;
  font: normal normal 600 16px/25px Poppins;
  letter-spacing: 0px;
  color: #ffffff;
  padding-top: 12px;
}

.gabung {
  height: 398px;
  width: 100%;
  background: transparent url("../themes/big-theme/assets/img/Beranda/bg-banner-lihat karir.png");
  background-size: cover;
}

.gabung h2 {
  height: 63px;
  font: normal normal 600 45px/64px Poppins;
  letter-spacing: 0px;
  color: #ffffff;
  margin-bottom: 15px;
}

.gabung h6 {
  font: normal normal normal 15px/26px Poppins;
  letter-spacing: 0px;
  color: #ffffff;
  margin-bottom: 59px;
}

.gabung .button-gabung {
  width: 141px;
  height: 50px;
  background: #02a4d2;
  text-align: center;
  font: normal normal 500 16px/25px Poppins;
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 1;
  padding-top: 12px;
  box-shadow: 0px 3px 6px #00000059;
  border-radius: 5px;
  display: block;
  margin: 0 auto;
}

@media only screen and (max-width: 765px) {
  .bangun-aplikasi {
    padding-left: 5px;
    padding-right: 5px;
  }

  .bangun-aplikasi h3 {
    width: 100%;
    font: normal normal 600 14px/20px Poppins;
    margin-bottom: 15px;
  }

  .bangun-aplikasi h6 {
    width: 100%;
    font: normal normal normal 12px/20px Poppins;
  } 

  .bangun-aplikasi .btn-bangun {
    height: 40px;
    font-size: 12px;
    padding-top: 5px;
    margin-top: 25px;
  }
}

@media only screen and (max-width: 1024px) and (min-width: 765px) {
  .bangun-aplikasi h3 {
    font: normal normal 600 35px/50px Poppins;
    margin-bottom: 20px;
  }

  .bangun-aplikasi h6 {
    font: normal normal normal 25px/38px Poppins;
    margin-bottom: 10px;
  }

  .bangun-aplikasi .btn-bangun {
    height: 70px;
    padding-top: 20px;
    margin-top: 25px;
    font-size: 25px;
  }
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

.footer {
  /* height: 400px; */
  box-shadow: 0px -3px 6px #00000029;
  opacity: 1;
  position: relative;
}

.footer .logo {
  width: 119px;
  height: 87px;
  opacity: 1;
  margin-right: 50px;
  margin-top: 90px;
}

.footer .layanan {
  margin-top: 116px;
  margin-right: 40px;
}

.footer .layanan ul {
  margin-bottom: 8px;
}

.footer .layanan .hidden {
  display: none;
}

.footer .layanan ul a {
  text-align: left;
  font: normal normal normal 15px/32px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
  text-decoration: none;
}

.footer .development {
  color: #666366;
  opacity: 1;
  margin-top: 45px;
  padding-bottom: 30px;
}

.footer .development .title {
  font: normal normal 600 15px/32px Poppins;
}

.footer .development .alamat1,
.alamat2 {
  font: normal normal normal 15px/40px Poppins;
  margin-bottom: 8px;
  margin-top: -10px;
}

.footer .development .alamat1-res,
.alamat2-res {
  display: none;
}

.footer .sosmed {
  margin-top: 70px;
}

.footer .sosmed h6 {
  font: normal normal normal 15px/32px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}

.footer .sosmed .ikon {
  display: flex;
}

.footer .sosmed .ikon a {
  text-decoration: none;
}

.footer .sosmed .instagram {
  background: url("../themes/big-theme/assets/img/Footer/Instagram.png");
}

.footer .sosmed .facebook {
  background: url("../themes/big-theme/assets/img/Footer/Facebook.png");
}

.footer .sosmed .linkedin {
  background: url("../themes/big-theme/assets/img/Footer/Linkedin.png");
}

.footer .sosmed .dribbble {
  background: url("../themes/big-theme/assets/img/Footer/Dribbble.png");
}

.footer .sosmed .behance {
  background: url("../themes/big-theme/assets/img/Footer/Behance.png");
}

.footer .sosmed .instagram,
.facebook,
.linkedin,
.dribbble,
.behance {
  height: 38px;
  width: 38px;
  margin-top: 5px;
  margin-left: 10px;
  transition: 0.5s ease;
}

.footer .sosmed .ikon p {
  text-align: center;
  font: normal normal normal 12px/32px Poppins;
  color: #666366;
  opacity: 0;
}

.footer .sosmed .instagram:hover {
  background: url("../themes/big-theme/assets/img/Footer/Instagram\ -\ Hover.png");
  transform: translateY(-20%);
}

.footer .sosmed .facebook:hover {
  background: url("../themes/big-theme/assets/img/Footer/Facebook\ -\ Hover.png");
  transform: translateY(-20%);
}

.footer .sosmed .linkedin:hover {
  background: url("../themes/big-theme/assets/img/Footer/Linkedin\ -Hover.png");
  transform: translateY(-20%);
}

.footer .sosmed .dribbble:hover {
  background: url("../themes/big-theme/assets/img/Footer/Dribbble\ -\ Hover.png");
  transform: translateY(-20%);
}

.footer .sosmed .behance:hover {
  background: url("../themes/big-theme/assets/img/Footer/Behance\ -\ Hover.png");
  transform: translateY(-20%);
}

.footer .sosmed .instagram:hover p {
  opacity: 1;
  margin-top: 40px;
}

.footer .sosmed .facebook:hover p {
  opacity: 1;
  margin-top: 40px;
}

.footer .sosmed .linkedin:hover p {
  opacity: 1;
  margin-top: 40px;
}

.footer .sosmed .dribbble:hover p {
  opacity: 1;
  margin-top: 40px;
}

.footer .sosmed .behance:hover p {
  opacity: 1;
  margin-top: 40px;
}

.footer .makeup-footer1 {
  position: absolute;
  left: 45px;
  margin-top: -20px;
}

.footer .makeup-footer2 {
  position: absolute;
  right: 15px;
  margin-top: -40px;
  z-index: -1;
  display: none;
}

.footer .absolute-footer1 {
  position: absolute;
  width: 359px;
  height: 140px;
  z-index: -1;
  margin-top: -100px;
  left: 0;
}

.footer .absolute-footer2 {
  position: absolute;
  right: 0;
  width: 359px;
  height: 140px;
  z-index: -1;
  margin-top: -100px;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  display: none;
}

.nav-pelayanan .row-website {
  display: flex;
}

@media only screen and (max-width: 1200px) {
  .footer {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer .logo {
    margin-top: 50px;
  }

  .footer .makeup-footer1 {
    display: none;
  }

  .footer .makeup-footer2 {
    display: inline-block;
  }

  .footer .col-info {
    display: flex;
    flex-direction: column-reverse;
  }

  .footer .layanan {
    display: none;
  }

  .footer .sosmed {
    text-align: left !important;
    margin-top: 0px;
    padding-bottom: 50px;
  }

  .footer .sosmed h6 {
    font: normal normal normal 11px/32px Poppins;
  }

  .footer .sosmed .instagram,
  .facebook,
  .linkedin,
  .dribbble,
  .behance {
    margin-left: 0px;
    margin-right: 10px;
  }

  .footer .ikon {
    justify-content: start !important;
    margin-top: -10px;
  }
  
  .footer .development {
    flex-direction: column-reverse;
    padding-bottom: 0px;
    margin-top: 30px;
  }

  .footer .development .title {
    font: normal normal 600 11px/23px Poppins;
  }

  .footer .development .alamat1,
  .alamat2 {
    display: none;
  }

  .footer .development .alamat1-res,
  .alamat2-res {
    display: inline-block;
    font: normal normal normal 11px/23px Poppins;
    padding-left: 0px;
    margin-top: -15px;
  }

  .footer .malang,
  .bandung {
    text-align: left !important;
    margin-top: 14px;
  }

  .footer .absolute-footer1 {
    display: none;
  }

  .footer .absolute-footer2 {
    display: inline-block;
  }
}

@media only screen and (max-width: 1200px) and (min-width: 768px) {
  .footer .development .title {
    font: normal normal 600 20px/35px Poppins;
  }

  .footer .development .alamat1-res,
  .alamat2-res {
    font: normal normal normal 20px/35px Poppins;
  }

  .footer .sosmed h6 {
    font: normal normal normal 20px/32px Poppins;
    margin-top: 20px;
  }
}

/*--------------------------------------------------------------
# Page Detail Portofolio
--------------------------------------------------------------*/
.detail {
  margin-top: 98px;
  margin-bottom: 70px;
}

.detail .section-1 {
  margin-left: 80px;
  margin-right: 80px;
  margin-bottom: 118px;
}

.detail .gmb-detail {
  position: relative;
  width: 505px;
  height: auto;
}

.detail .point-detailporto1 {
  position: absolute;
  margin-top: -50px;
  margin-left: -50px;
}

/* .detail .deskripsi {
  padding-left: 40px;
} */

.detail .perusahaan {
  font: normal normal normal 15px/64px Poppins;
  color: #00a6cf;
  margin-top: -25px;
}
.detail .box-detail{
  width: 500px;
  height: 300px;
  background-color: blue;
}
.detail .nama-app {
  font: normal normal 600 45px/64px Poppins;
  color: #2c2c2c;
  margin-top: -25px;
}

.detail .desc-app {
  text-align: left;
  font: normal normal normal 15px/30px Poppins;
  letter-spacing: 0.24px;
  color: #666366;
  margin-bottom: 53px;
}

.detail .btn-visit {
  background: #000000;
  border-radius: 5px;
  color: #fff;
  width: 155px;
  height: 46px;
  padding-top: 10px;
  position: relative;
}

.detail .btn-visit i {
  opacity: 0;
  margin-left: -20px;
  transition: all 0.3s linear;
}

.detail .btn-visit:hover {
  background: #00a6cf;
  padding-right: 30px;
}

.detail .btn-visit::after {
  content: "";
  position: absolute;
}

.detail .btn-visit:hover i {
  opacity: 1;
  transform: translateX(25px);
}
.detail .row-store-tablet {
  display: none;
}

.detail .section-2 {
  height: 100%;
  width: 100%;
  background: #f8f8f8;
  padding-top: 60px;
  padding-bottom: 60px;
  padding-left: 80px;
  padding-right: 80px;
  position: relative;
}

.gmb-teknologi {
  max-width: 56px;
}

.gmb-platform {
  max-width: 156px;
}

.detail .gmb-teknologi {
  margin-right: 10px;
  margin-bottom: 20px;
}

.detail .section-2 .judul {
  font: normal normal 600 15px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  margin-bottom: 30px;
}

.detail .list-scope {
  font: normal normal normal 15px/30px Poppins;
  color: #666366;
  margin-left: -20px;
  margin-top: -30px;
}
.detail .garis {
  display: none;
}
.detail .point-detailporto2 {
  position: absolute;
  right: 0;
  align-self: center;
}

.detail .section-3 {
  height: auto;
}

.detail .tentang {
  margin-top: 80px;
  margin-bottom: 80px;
  padding-left: 80px;
}

.detail .judul-tentang {
  font: normal normal 600 45px/64px Poppins;
  color: #2c2c2c;
}

.detail .desc-tentang {
  font: normal normal normal 15px/30px Poppins;
  letter-spacing: 0.24px;
  color: #666366;
}

.detail .gmb-tentang {
  width: 100%;
  height: 100%;
  margin-left: 15px;
}

.detail .gmb-detailbawah {
  width: 100%;
  height: auto;
}

.detail .judul-rekomendasi {
  font: normal normal 600 45px/64px Poppins;
  color: #2c2c2c;
  margin-left: 90px;
  margin-top: 77px;
  margin-bottom: -50px;
}

.detail .link {
  margin-right: 110px;
}

.detail .lihat-porto {
  position: relative;
  font: normal normal normal 16px/64px Poppins;
  color: #00a6cf;
}

.detail .lihat-porto i {
  margin-left: -20px;
  opacity: 0;
  transition: all 0.3s linear;
}

.detail .lihat-porto::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -3px;
  right: 0;
  background-color: #00a6cf;
  transition: all 0.3s ease-in-out 0s;
}

.detail .lihat-porto:hover {
  text-decoration: none;
}

.detail .lihat-porto:hover:after {
  width: 0%;
  background: transparent;
  transition: all 0.3s ease-in-out 0s;
}

.detail .lihat-porto:hover i {
  opacity: 1;
  transform: translateX(25px);
}

/* @media only screen and (max-width: 760px) {
  .detail .nama-app,
  .perusahaan,
  .judul,
  .judul-tentang {
    text-align: center;
  }
} */
  @media only screen and (width: 280px) {
    .detail {
      margin-top: 50px;
      margin-bottom: 70px;
    }
    .detail .section-1,
    .section-2,
    .section-3,
    .section-4,
    .section-5 {
      height: 100%;
    }
  .detail .point-detailporto1 {
    position: absolute;
    margin-left: 10px;
    top: 40px;
    width: 70px;
    height: 70px;
  }
  .detail .section-1 {
    margin: 0 auto;
  }

  .detail .gmb-detail {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .detail .point-detailporto2 {
    bottom: 0;
    margin-bottom: 80px;
    display: none;
  }

  .detail .perusahaan {
    font: normal normal normal 14px/64px Poppins;
    color: #00a6cf;
    margin-top: -25px;
  }
  .detail .nama-app {
    font: normal normal 600 20px/37px Poppins;
    color: #2c2c2c;
    margin-top: -25px;
  }
  .detail .desc-app {
    width: 100%;
    text-align: left;
    font: normal normal normal 12px/26px Poppins;
    letter-spacing: 0.24px;
    color: #666366;
    margin-bottom: 20px;
  }
  .detail .store {
    margin-bottom: 50px;
  }

  .detail .store img {
    width: 75px;
    height: 20px;
    margin-bottom: 10px;
  }
  .detail .row-store-tablet {
    display: none;
  }
  .detail .section-2 {
    display: flex;
    flex-direction: column-reverse;
    height: 100%;
    width: 100%;
    background: #f8f8f8;
    padding-top: 35px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
  }
  .detail .list-scope {
    font: normal normal normal 15px/30px Poppins;
    color: #666366;
    margin-left: -22px;
    margin-top: -40px;
  }
  .detail .garis {
    display: block;
    background-color: #DDDDDD;
  }
  .detail .teknologi .div-img-teknologi {
    margin-top: -35px;
  }
  .detail .teknologi .div-img-teknologi img{
    width: 40px;
    height: 40px;
  }

  .detail .section-3 {
    width: 100%;
    margin: 0 auto;
  }

  .detail .tentang {
    padding-left: 30px;
  }
  .detail .judul-tentang {
    font: normal normal 600 22px/37px Poppins;
    color: #2c2c2c;
    margin-top: -35px;
  }
  .detail .desc-tentang {
    font: normal normal normal 12px/30px Poppins;
    letter-spacing: 0.24px;
    color: #666366;
  }
  .detail .col-gmb-tentang {
    margin-top: -80px;
  }
  .detail .gmb-tentang {
    width: 100%;
    /* margin-left: 0; */
    /* margin: 0 auto;
    display: block; */
  }
  .detail .banner-bawah-porto {
    margin-top: -4px;
  }

  .detail .judul-rekomendasi {
    font: normal normal 600 15px/37px Poppins;
    color: #2c2c2c;
    width: 100%;
    margin-left: 0;
    padding-left: 40px;
    text-align: left;
    margin-top: 50px;
    margin-bottom: 0;
  }
  /* .detail .sec-rekomendasi {
    padding-left: 35px;
    padding-right: 35px;
  } */
  .detail .sec-rekomendasi .row-tablet {
    margin-left: 0;
    margin-right: 0;
    margin-top: 30px;
  }
  .detail .nav-portofolio .list-portfolio .card-image {
    width: 210px;
    height: 170px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 0px 29px 0px rgba(68, 88, 144, 0.12);
  }
  .detail .nav-portofolio .list-portfolio .port-title {
    font: normal normal 600 16px/37px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  
  .detail .nav-portofolio .list-portfolio .port-owner {
    display: flex;
    flex-direction: column;
    margin-top: -25px;
    font: normal normal normal 13px Poppins;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }

  .detail .link {
    margin: 0 auto;
    padding-right: 40px;
    text-align: right !important;
  }
}
/* @media only screen and (max-width: 1200px) { */
  @media only screen and (min-width: 320px) and (max-width: 540px) {
    .detail {
      margin-top: 50px;
      margin-bottom: 70px;
    }
    .detail .section-1,
    .section-2,
    .section-3,
    .section-4,
    .section-5 {
      height: 100%;
    }
  .detail .point-detailporto1 {
    position: absolute;
    margin-left: 10px;
    top: 40px;
    width: 70px;
    height: 70px;
  }
  .detail .section-1 {
    margin: 0 auto;
  }

  .detail .gmb-detail {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .detail .point-detailporto2 {
    bottom: 0;
    margin-bottom: 80px;
    display: none;
  }

  .detail .perusahaan {
    font: normal normal normal 14px/64px Poppins;
    color: #00a6cf;
    margin-top: -25px;
  }
  .detail .nama-app {
    font: normal normal 600 20px/37px Poppins;
    color: #2c2c2c;
    margin-top: -25px;
  }
  .detail .desc-app {
    width: 100%;
    text-align: left;
    font: normal normal normal 12px/26px Poppins;
    letter-spacing: 0.24px;
    color: #666366;
    margin-bottom: 20px;
  }
  .detail .store {
    margin-bottom: 50px;
  }

  .detail .store img {
    width: 93px;
    height: 27px;
    margin-bottom: 10px;
  }
  .detail .row-store-tablet {
    display: none;
  }
  .detail .section-2 {
    display: flex;
    flex-direction: column-reverse;
    height: 100%;
    width: 100%;
    background: #f8f8f8;
    padding-top: 35px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
  }
  .detail .list-scope {
    font: normal normal normal 15px/30px Poppins;
    color: #666366;
    margin-left: -22px;
    margin-top: -40px;
  }
  .detail .garis {
    display: block;
    background-color: #DDDDDD;
  }
  /* .detail .teknologi .gmb-teknologi {
    margin-right: 10px;
    margin-bottom: 20px;
  } */
  .detail .teknologi .div-img-teknologi {
    margin-top: -35px;
  }
  .detail .teknologi .div-img-teknologi img{
    width: 40px;
    height: 40px;
  }
  .detail .section-3 {
    width: 100%;
    margin: 0 auto;
  }

  .detail .tentang {
    padding-left: 30px;
  }
  .detail .judul-tentang {
    font: normal normal 600 22px/37px Poppins;
    color: #2c2c2c;
    margin-top: -35px;
  }
  .detail .desc-tentang {
    font: normal normal normal 12px/30px Poppins;
    letter-spacing: 0.24px;
    color: #666366;
  }
  .detail .col-gmb-tentang {
    margin-top: -80px;
  }
  .detail .gmb-tentang {
    width: 100%;
    /* margin-left: 0; */
    /* margin: 0 auto;
    display: block; */
  }
  .detail .banner-bawah-porto {
    margin-top: -4px;
  }

  .detail .judul-rekomendasi {
    font: normal normal 600 20px/37px Poppins;
    color: #2c2c2c;
    width: 100%;
    margin-left: 0;
    padding-left: 40px;
    text-align: left;
    margin-top: 50px;
    margin-bottom: 0;
  }
  
  .detail .link {
    margin: 0 auto;
    padding-right: 40px;
    text-align: right !important;
  }
}
/* responsive ipad */
@media only screen and (min-width: 768px) and (max-width: 900px) {
  .detail {
    margin-top: 50px;
    margin-bottom: 70px;
  }
  .detail .section-1,
  .section-2,
  .section-3,
  .section-4,
  .section-5 {
    height: 100%;
  }
  .detail .point-detailporto1 {
    position: absolute;
    margin-left: 10px;
    top: 40px;
    width: 70px;
    height: 70px;
  }
  .detail .section-1 {
    margin: 0 auto;
  }

  .detail .gmb-detail {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .detail .point-detailporto2 {
    bottom: 0;
    margin-bottom: 80px;
    display: none;
  }

  .detail .perusahaan {
    font: normal normal normal 14px/64px Poppins;
    color: #00a6cf;
    margin-top: -25px;
  }
  .detail .nama-app {
    font: normal normal 600 20px/37px Poppins;
    color: #2c2c2c;
    margin-top: -25px;
  }
  .detail .desc-app {
    width: 100%;
    text-align: left;
    font: normal normal normal 12px/26px Poppins;
    letter-spacing: 0.24px;
    color: #666366;
    margin-bottom: 20px;
  }
  .detail .store {
    margin-bottom: 50px;
  }

  .detail .store img {
    width: 93px;
    height: 27px;
    margin-bottom: 10px;
  }
  .detail .row-store-tablet {
    display: none;
  }
  /* .detail .section-2 {
    display: flex;
    flex-direction: column-reverse;
    height: 100%;
    width: 100%;
    background: #f8f8f8;
    padding-top: 35px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
  } */
  .detail .list-scope {
    font: normal normal normal 15px/30px Poppins;
    color: #666366;
    margin-left: -22px;
    margin-top: -40px;
  }
  /* .detail .garis {
    display: block;
    background-color: #DDDDDD;
  } */
  /* .detail .teknologi .gmb-teknologi {
    margin-right: 10px;
    margin-bottom: 20px;
  } */
  .detail .teknologi .judul {
    margin-left: -20px;
  }
  .detail .teknologi .div-img-teknologi{
    display: flex;
    flex-wrap: wrap;
    margin-top: -20px;
    margin-left: -29px;
  }
  .detail .section-3 {
    width: 100%;
    margin: 0 auto;
  }

  /* .detail .tentang {
    padding-left: 30px;
  } */
  /* .detail .judul-tentang {
    font: normal normal 600 22px/37px Poppins;
    color: #2c2c2c;
    margin-top: -35px;
  }
  .detail .desc-tentang {
    font: normal normal normal 12px/30px Poppins;
    letter-spacing: 0.24px;
    color: #666366;
  } */
  .detail .judul-tentang {
    font: normal normal 600 16px Poppins;
    color: #2c2c2c;
    margin-top: -45px;
  }
  .detail .desc-tentang {
    font: normal normal normal 13px Poppins;
    letter-spacing: 0.24px;
    color: #666366;
  }
  .detail .col-gmb-tentang {
    margin-top: 0;
  }
  .detail .gmb-tentang {
    width: 100%;
    /* margin-left: 0; */
    /* margin: 0 auto;
    display: block; */
  }
  .detail .banner-bawah-porto {
    margin-top: -4px;
  }

  .detail .judul-rekomendasi {
    font: normal normal 600 20px/37px Poppins;
    color: #2c2c2c;
    width: 100%;
    margin-left: 0;
    padding-left: 20px;
    text-align: left;
    margin-top: 50px;
    margin-bottom: 0;
  }
  .detail .sec-rekomendasi {
    padding-left: 35px;
    padding-right: 35px;
  }
  .detail .sec-rekomendasi .row-tablet {
    margin-left: 0;
    margin-right: 0;
    margin-top: 30px;
  }
  .detail .nav-portofolio .list-portfolio .card-image {
    width: 210px;
    height: 170px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 0px 29px 0px rgba(68, 88, 144, 0.12);
  }
  .detail .nav-portofolio .list-portfolio .port-title {
    font: normal normal 600 16px/37px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  
  .detail .nav-portofolio .list-portfolio .port-owner {
    display: flex;
    flex-direction: column;
    margin-top: -25px;
    font: normal normal normal 13px Poppins;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }
  .detail .link {
    margin: 0 auto;
    padding-right: 40px;
    text-align: right !important;
  }
}
/* responsive ipad pro */
@media only screen and (max-width: 1050px) and (min-width: 1000px) {
  .detail {
    margin-top: 50px;
    margin-bottom: 70px;
  }
  .detail .section-1,
  .section-2,
  .section-3,
  .section-4,
  .section-5 {
    height: 100%;
  }
  .detail .point-detailporto1 {
    position: absolute;
    margin-left: 10px;
    top: 40px;
    width: 70px;
    height: 70px;
  }
  .detail .section-1 {
    margin: 0 auto;
  }

  .detail .gmb-detail {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 30px;
    padding-left: 30px;
    width: 400px;
    height: auto;
  }

  .detail .point-detailporto2 {
    bottom: 0;
    margin-bottom: 80px;
    display: none;
  }

  .detail .perusahaan {
    font: normal normal normal 16px/64px Poppins;
    color: #00a6cf;
    /* margin-top: -25px; */
  }
  .detail .nama-app {
    font: normal normal 600 23px Poppins;
    color: #2c2c2c;
    margin-top: -25px;
  }
  .detail .desc-app {
    width: 100%;
    text-align: left;
    font: normal normal normal 14px Poppins;
    letter-spacing: 0.24px;
    color: #666366;
    margin-bottom: 20px;
    padding-right: 50px;
  }
  .detail .store {
    display: none;
  }

  /* .detail .store img {
    width: 93px;
    height: 27px;
    margin-bottom: 10px;
  } */
  .detail .row-store-tablet {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 40px;
  }
  .detail .row-store-tablet img {
    margin-right: 20px;
  }
  .detail .list-scope {
    font: normal normal normal 15px/30px Poppins;
    color: #666366;
    margin-left: -22px;
    margin-top: -40px;
  }
  /* .detail .garis {
    display: block;
    background-color: #DDDDDD;
  } */
  .detail .teknologi .judul {
    margin-left: -20px;
  }
  .detail .teknologi .div-img-teknologi{
    display: flex;
    flex-wrap: wrap;
    margin-top: -20px;
    margin-left: -29px;
  }

  .detail .section-3 {
    width: 100%;
    margin: 0 auto;
  }

  .detail .judul-tentang {
    font: normal normal 600 25px Poppins;
    color: #2c2c2c;
    margin-top: -45px;
  }
  .detail .desc-tentang {
    font: normal normal normal 12px/30px Poppins;
    letter-spacing: 0.24px;
    color: #666366;
  }
  /* .detail .col-gmb-tentang {
    margin-top: -80px;
  } */
  .detail .gmb-tentang {
    width: 100%;
    /* margin-left: 0; */
    /* margin: 0 auto;
    display: block; */
  }
  .detail .banner-bawah-porto {
    margin-top: -4px;
  }
  .detail .sec-rekomendasi {
    padding-left: 35px;
    padding-right: 35px;
  }
  .detail .nav-portofolio .row-tablet {
    margin-left: 0;
    margin-right: 0;
    margin-top: 30px;
  }
  .detail .judul-rekomendasi {
    font: normal normal 600 35px Poppins;
    color: #2c2c2c;
    margin-left: 20px;
    margin-top: 49px;
    margin-bottom: 0;
    padding-left: -70px;
  }
  .detail .nav-portofolio .list-portfolio .card-image {
    width: 280px;
    height: 240px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 0px 29px 0px rgba(68, 88, 144, 0.12);
  }
  .detail .link {
    /* margin: 0 auto; */
    margin-right: 0;
  }
}
/*--------------------------------------------------------------
# Page Detail Artikel
--------------------------------------------------------------*/
.detail-artikel {
  margin-bottom: 62px;
}

.detail-artikel .section-1 {
  width: 900px;
  height: 100%;
  justify-content: center;
  margin-top: 105px;
  margin-bottom: 87px;
}

.detail-artikel .section-1 h2 {
  font: normal normal 600 45px/64px Poppins;
  color: #2c2c2c;
}

.detail-artikel .section-1 .main-image {
  width: 100%;
  border-radius: 1%;
}

.detail-artikel .section-1 .gmb-kiri,
.gmb-kanan {
  display: flex;
}

.detail-artikel .gmb-kiri {
  justify-content: flex-start;
}

.detail-artikel .gmb-kanan {
  justify-content: flex-end;
}

.detail-artikel .section-1 .gmb-user {
  width: 38px;
  height: 38px;
  align-self: center;
}

.detail-artikel .section-1 .nama {
  font: normal normal normal 18px/64px Poppins;
  color: #fd4f00;
  margin-left: 11px;
}

.detail-artikel .section-1 .titik {
  width: 7px;
  height: 7px;
  background: #dddddd;
  margin-left: 11px;
  border-radius: 50%;
  align-self: center;
}

.detail-artikel .section-1 .waktu {
  font: normal normal normal 18px/64px Poppins;
  color: #a9a9a9;
  margin-left: 11px;
}

.detail-artikel .section-1 .gmb-kanan i {
  color: #dddddd;
  align-self: center;
}

.detail-artikel .section-1 .isi-artikel {
  text-align: left;
  font: normal normal normal 18px/45px Poppins;
  color: #2c2c2c;
  margin-top: 40px;
  margin-bottom: 21px;
}

.detail-artikel .section-1 p img {
  max-width: 100%;
}

.detail-artikel .section-1 .tag {
  font: normal normal medium 18px/32px Poppins;
  color: #2c2c2c;
}

.detail-artikel .section-1 .badge {
  background: #f2f2f2;
  font: normal normal normal 15px/45px Poppins;
  color: #919191;
  padding: 0 16px;
  margin-right: 5px;
}

.detail-artikel .sosmed a {
  text-decoration: none;
}

.detail-artikel .sosmed {
  display: flex;
  justify-content: flex-end;
}

/* .detail-artikel .sosmed a {
  width: 50px;
  height: 50px;
  transform: matrix(0, 1, -1, 0, 0, 0);
  background: #fbfbfb;
  box-shadow: 0px 1px 3px #0000001a;
  border-radius: 50%;
  padding: 5px 10px;
}

.detail-artikel .sosmed a:focus {
  border: none;
  outline: none;
} */

.detail-artikel .sosmed p {
  font: normal normal normal 12px/32px Poppins;
  color: #666366;
}

.detail-artikel .btn-share {
  background-color: transparent;
  border: none;
  text-align: left;
  display: block;
  margin: 0 auto;
}

.detail-artikel .btn-share:focus {
  background-color: transparent;
  border: none;
  outline: none;
}

.detail-artikel .modallink {
  width: 354px;
}

.detail-artikel .modal-share {
  margin-top: 20px;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 46px;
}

.detail-artikel .modal-share .share {
  font: normal normal 600 18px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
}

.detail-artikel .modal-share .copyLink {
  background: #00a6cf;
}

.detail-artikel .modal-share h6 {
  font: normal normal 600 15px/32px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
}

.detail-artikel .nav-artikel h3 {
  font: normal normal 600 30px/64px Poppins;
  color: #2c2c2c;
  margin-bottom: -70px;
  margin-left: 80px;
}

.detail-artikel .section-2 a {
  text-decoration: none;
}

.detail-artikel .nav-artikel .link {
  margin-right: 110px;
}

.detail-artikel .nav-artikel .lihat {
  position: relative;
  font: normal normal normal 16px/64px Poppins;
  color: #00a6cf;
}

.detail-artikel .lihat i {
  margin-left: -20px;
  opacity: 0;
  transition: all 0.3s linear;
}

.detail-artikel .lihat:hover {
  text-decoration: none;
}

.detail-artikel .lihat::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -3px;
  right: 0;
  background-color: #00a6cf;
  transition: all 0.3s ease-in-out 0s;
}

.detail-artikel .lihat:hover:after {
  width: 0%;
  background: transparent;
  transition: all 0.3s ease-in-out 0s;
}

.detail-artikel .lihat:hover i {
  opacity: 1;
  transform: translateX(25px);
}

/* @media only screen and (max-width: 768px) {
  .detail-artikel .section-1 .gmb-kanan {
    justify-content: start !important;
    margin-bottom: 20px;
  }

  .detail-artikel .section-1 .sosmed {
    width: 100%;
    justify-content: center;
    margin: 0 auto;
  }
} */
@media only screen and (width: 280px) {
  .detail-artikel .section-1 h2 {
    font: normal normal 600 20px/37px Poppins;
    color: #2c2c2c;
  }
  .detail-artikel .section-1 {
    width: 900px;
    height: 100%;
    justify-content: center;
    margin-top: 35px;
    margin-bottom: 87px;
  }
  .detail-artikel .section-1 .gmb-user {
    width: 36px;
    height: 37px;
    align-self: center;
  }
  .detail-artikel .section-1 .nama {
    font: normal normal normal 12px/46px Poppins;
    color: #fd4f00;
    margin-left: 11px;
    margin-top: auto;
    margin-bottom: auto;
  }
  
  .detail-artikel .section-1 .titik {
    width: 4px;
    height: 4px;
    background: #dddddd;
    margin-left: 11px;
    border-radius: 50%;
    align-self: center;
    margin-top: auto;
    margin-bottom: auto;
  }
  
  .detail-artikel .section-1 .waktu {
    font: normal normal normal 11px/49px Poppins;
    color: #a9a9a9;
    margin-left: 11px;
    margin-top: auto;
    margin-bottom: auto;
  }
  .detail-artikel .section-1 .gmb-kanan .post{
    font: normal normal normal 12px Poppins;
    letter-spacing: 0px;
    color: #2C2C2C;
    opacity: 1;
  }
  .detail-artikel .section-1 .main-image {
    width: 100%;
    border-radius: 5px;
  }
  .detail-artikel .section-1 .isi-artikel {
    text-align: left;
    font: normal normal normal 12px/30px Poppins;
    color: #2c2c2c;
    letter-spacing: 0px;
    margin-top: 25px;
    margin-bottom: 21px;
  }
  .detail-artikel .section-1 .row-sosmed {
    margin-top: 40px;
  }
  .detail-artikel .section-1 .sosmed img {
    width: 44px;
    height: 44px;
  }
  .detail-artikel .nav-artikel h3 {
    font: normal normal 600 20px/37px Poppins;
    color: #2c2c2c;
    margin-left: 20px;
  }
  .detail-artikel .nav-artikel .link {
    margin-right: 30px;
    text-align: right !important;
  }
  .detail-artikel .nav-artikel .lihat {
    font: normal normal normal 12px/64px Poppins;
  }
}
@media only screen and (min-width: 320px) and (max-width: 540px){
  /* default (sebelum di rubah) */
  .detail-artikel .section-1 .gmb-kanan {
    /* justify-content: end; */
    margin-bottom: 10px;
  }

  .detail-artikel .section-1 .sosmed {
    width: 100%;
    justify-content: center;
    margin: 0 auto;
  }
/* end of default (sebelum di rubah) */
  .detail-artikel .section-1 h2 {
    font: normal normal 600 20px/37px Poppins;
    color: #2c2c2c;
  }
  .detail-artikel .section-1 {
    width: 900px;
    height: 100%;
    justify-content: center;
    margin-top: 35px;
    margin-bottom: 87px;
  }
  .detail-artikel .section-1 .gmb-user {
    width: 36px;
    height: 37px;
    align-self: center;
  }
  .detail-artikel .section-1 .nama {
    font: normal normal normal 12px/46px Poppins;
    color: #fd4f00;
    margin-left: 11px;
    margin-top: auto;
    margin-bottom: auto;
  }
  
  .detail-artikel .section-1 .titik {
    width: 4px;
    height: 4px;
    background: #dddddd;
    margin-left: 11px;
    border-radius: 50%;
    align-self: center;
    margin-top: auto;
    margin-bottom: auto;
  }
  
  .detail-artikel .section-1 .waktu {
    font: normal normal normal 11px/49px Poppins;
    color: #a9a9a9;
    margin-left: 11px;
    margin-top: auto;
    margin-bottom: auto;
  }
  .detail-artikel .section-1 .gmb-kanan .post{
    font: normal normal normal 12px Poppins;
    letter-spacing: 0px;
    color: #2C2C2C;
    opacity: 1;
  }
  .detail-artikel .section-1 .main-image {
    width: 100%;
    border-radius: 5px;
  }
  .detail-artikel .section-1 .isi-artikel {
    text-align: left;
    font: normal normal normal 12px/30px Poppins;
    color: #2c2c2c;
    letter-spacing: 0px;
    margin-top: 25px;
    margin-bottom: 21px;
  }
  .detail-artikel .section-1 .row-sosmed {
    margin-top: 40px;
  }
  .detail-artikel .section-1 .sosmed img {
    width: 44px;
    height: 44px;
  }
  .detail-artikel .nav-artikel h3 {
    font: normal normal 600 20px/37px Poppins;
    color: #2c2c2c;
    margin-left: 20px;
  }
  .detail-artikel .nav-artikel .link {
    margin-right: 40px;
    text-align: right !important;
  }
  .detail-artikel .nav-artikel .lihat {
    font: normal normal normal 12px/64px Poppins;
  }
}

/* responsive detail artikel ipad */
@media only screen and (min-width: 768px)  and (max-width: 850px){
  .detail-artikel .section-1 h2 {
    font: normal normal 600 37px Poppins;
    color: #2c2c2c;
  }
  .detail-artikel .section-1 {
    width: 900px;
    height: 100%;
    justify-content: center;
    margin-top: 35px;
    margin-bottom: 87px;
  }
  .detail-artikel .section-1 .row-identitas {
    margin-bottom: 20px;
  }
  .detail-artikel .section-1 .nama {
    color: #fd4f00;
    margin-left: 11px;
    margin-top: auto;
    margin-bottom: auto;
  }
  
  .detail-artikel .section-1 .titik {
    width: 6px;
    height: 6px;
    background: #dddddd;
    margin-left: 11px;
    border-radius: 50%;
    align-self: center;
    margin-top: auto;
    margin-bottom: auto;
  }
  
  .detail-artikel .section-1 .waktu {
    color: #a9a9a9;
    margin-left: 11px;
    margin-top: auto;
    margin-bottom: auto;
  }
  .detail-artikel .section-1 .row-sosmed {
    margin-top: 40px;
  }
  .detail-artikel .sosmed {
    display: flex;
    justify-content: center;
  }
  .detail-artikel .nav-artikel h3 {
    /* font: normal normal 600 20px/37px Poppins; */
    color: #2c2c2c;
    margin-left: 20px;
  }
  .detail-artikel .nav-artikel .section-2 .card-artikel {
    width: 200px;
    height: 280px;
    border: none;
    margin-bottom: 20px;
  }
  .detail-artikel .nav-artikel .section-2 .card-artikel:hover {
    background: #FFFFFF;
    box-shadow: 0px 10px 47px rgba(0, 0, 0, 0.12);
    border-radius: 18px;
    width: 200px;
    height: 280px;
    border: none;
  }
  .detail-artikel .nav-artikel .section-2 .gmb-artikel {
    /* width: 100%; */
    box-shadow: none;
    height: auto;
    border-radius: 5px;
  }
  .detail-artikel .nav-artikel .section-2 .judul-artikel {
    text-align: left;
    margin-top: 10px;
    margin-bottom: 20px;
    font: normal normal 600 15px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .detail-artikel .nav-artikel .link {
    margin-right: 40px;
    text-align: right !important;
  }
  .detail-artikel .nav-artikel .lihat {
    font: normal normal normal 20px/64px Poppins;
  }
}
@media only screen and (min-width: 900px) and (max-width: 990px){
  .detail-artikel .section-1 {
    width: 900px;
    height: 100%;
    justify-content: center;
    margin-top: 46px;
    margin-bottom: 87px;
    padding-left: 30px;
    padding-right: 30px;
  }
  .detail-artikel .section-1 .row-identitas {
    margin-bottom: 20px;
  }
  .detail-artikel .section-1 .nama {
    color: #fd4f00;
    margin-left: 11px;
    margin-top: auto;
    margin-bottom: auto;
  }
  
  .detail-artikel .section-1 .titik {
    width: 6px;
    height: 6px;
    background: #dddddd;
    margin-left: 11px;
    border-radius: 50%;
    align-self: center;
    margin-top: auto;
    margin-bottom: auto;
  }
  
  .detail-artikel .section-1 .waktu {
    color: #a9a9a9;
    margin-left: 11px;
    margin-top: auto;
    margin-bottom: auto;
  }
  .detail-artikel .section-1 .row-sosmed {
    margin-top: 40px;
  }
  .detail-artikel .sosmed {
    display: flex;
    justify-content: center;
  }
  .detail-artikel .nav-artikel h3 {
    /* font: normal normal 600 20px/37px Poppins; */
    color: #2c2c2c;
    margin-left: 60px;
  }
  .detail-artikel .nav-artikel .section-2 .card-artikel {
    width: 200px;
    height: 280px;
    border: none;
    margin-bottom: 20px;
  }
  .detail-artikel .nav-artikel .section-2 .card-artikel:hover {
    background: #FFFFFF;
    box-shadow: 0px 10px 47px rgba(0, 0, 0, 0.12);
    border-radius: 18px;
    width: 200px;
    height: 280px;
    border: none;
  }
  .detail-artikel .nav-artikel .section-2 .gmb-artikel {
    /* width: 100%; */
    box-shadow: none;
    height: auto;
    border-radius: 5px;
  }
  .detail-artikel .nav-artikel .section-2 .judul-artikel {
    text-align: left;
    margin-top: 10px;
    margin-bottom: 20px;
    font: normal normal 600 15px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .detail-artikel .nav-artikel .link {
    margin-right: 80px;
    text-align: right !important;
  }
  .detail-artikel .nav-artikel .lihat {
    font: normal normal normal 20px/64px Poppins;
  }
}
@media only screen and (max-width: 1100px) and (min-width: 1000px){
  .detail-artikel .section-1 {
    width: 900px;
    height: 100%;
    justify-content: center;
    margin-top: 60px;
    margin-bottom: 87px;
    padding-left: 30px;
    padding-right: 30px;
  }
  .detail-artikel .section-1 .row-identitas {
    margin-bottom: 20px;
  }
  .detail-artikel .section-1 .nama {
    color: #fd4f00;
    margin-left: 11px;
    margin-top: auto;
    margin-bottom: auto;
  }
  
  .detail-artikel .section-1 .titik {
    width: 6px;
    height: 6px;
    background: #dddddd;
    margin-left: 11px;
    border-radius: 50%;
    align-self: center;
    margin-top: auto;
    margin-bottom: auto;
  }
  
  .detail-artikel .section-1 .waktu {
    color: #a9a9a9;
    margin-left: 11px;
    margin-top: auto;
    margin-bottom: auto;
  }
  .detail-artikel .section-1 .row-sosmed {
    margin-top: 40px;
  }
  .detail-artikel .sosmed {
    display: flex;
    justify-content: center;
  }
  .detail-artikel .nav-artikel h3 {
    /* font: normal normal 600 20px/37px Poppins; */
    color: #2c2c2c;
    margin-left: 60px;
  }
  .detail-artikel .nav-artikel .section-2 .card-artikel {
    width: 240px;
    height: 290px;
    border: none;
    margin-bottom: 20px;
  }
  .detail-artikel .nav-artikel .section-2 .card-artikel:hover {
    background: #FFFFFF;
    box-shadow: 0px 10px 47px rgba(0, 0, 0, 0.12);
    border-radius: 18px;
    width: 240px;
    height: 290px;
    border: none;
  }
  .detail-artikel .nav-artikel .section-2 .gmb-artikel {
    /* width: 100%; */
    box-shadow: none;
    height: auto;
    border-radius: 5px;
  }
  .detail-artikel .nav-artikel .section-2 .judul-artikel {
    text-align: left;
    margin-top: 10px;
    margin-bottom: 20px;
    font: normal normal 600 15px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .detail-artikel .nav-artikel .link {
    margin-right: 80px;
    text-align: right !important;
  }
  .detail-artikel .nav-artikel .lihat {
    font: normal normal normal 20px/64px Poppins;
  }
}
/*--------------------------------------------------------------
# Page Karir
--------------------------------------------------------------*/
.karir {
  margin-top: 72px;
  margin-bottom: 162px;
}

.karir .judul {
  font: normal normal 600 45px/64px Poppins;
  color: #2c2c2c;
}

.karir .deskripsi {
  font: normal normal normal 15px/26px Poppins;
  color: #666366;
  margin: 0 auto;
  margin-bottom: 67px;
  width: 600px;
}

.karir .card-karir {
  width: 320px;
  /* height: auto; */
  background: #ffffff;
  box-shadow: 0px 4px 10px #00000029;
  border-radius: 15px;
  padding: 0 20px;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
}

.karir .card-emptykarir {
  width: 320px;
  height: 220px;
  background: #ffffff;
  box-shadow: 0px 4px 10px #00000029;
  border-radius: 15px;
  padding: 0 20px;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
}

.karir .card-karir .namakarir {
  font: normal normal 600 20px/36px Poppins;
  color: #2c2c2c;
}

.karir .card-karir .lokasi {
  display: flex;
  margin-bottom: 35px;
}

.karir .card-karir .lokasi i {
  width: 15px;
  height: 25px;
  color: #fc4f00;
  align-self: center;
  margin-right: 10px;
}

.karir .card-karir .nama-lokasi {
  font: normal normal normal 16px/36px Poppins;
  color: #2c2c2c;
}

.karir .card-karir .btndetail {
  height: 50px;
  background: #00a6cf;
  border-radius: 5px;
  font: normal normal normal 15px/23px Poppins;
  color: #ffffff;
  padding-top: 12px;
  padding-left: 30px;
  transition: 100ms ease;
}

.karir .card-karir .btndetail i {
  opacity: 0;
  padding-left: 5px;
}

.karir .card-karir .btndetail:hover {
  padding-right: 30px;
}

.karir .card-karir .btndetail:hover i {
  opacity: 1;
}
.karir .card-emptykarir .gmb-emptykarir {
  width: 120px;
  height: 120px;
}
.karir .card-emptykarir .text-emptykarir {
  font: normal normal medium 20px/64px Poppins;
  color: #2c2c2c;
  opacity: 1;
}

.karir .makeup-karir1 {
  position: absolute;
  width: 683px;
  height: 304px;
  margin-top: 175px;
  z-index: -1;
}
.karir .makeup-karir2 {
  position: absolute;
  left: 89px;
  margin-top: 170px;
  z-index: -1;
}
.karir .makeup-karir3 {
  position: absolute;
  z-index: -1;
  left: 799px;
  margin-top: 390px;
  width: 82px;
  height: 82px;
}
.karir .makeup-karir4 {
  position: absolute;
  z-index: -1;
  right: 0;
  margin-top: 150px;
}

/* responsive makeup halaman karir */
/* @media only screen and (max-width: 1200px) and (min-width: 770px) {
  .karir .makeup-karir4 {
    position: absolute;
    z-index: -1;
    left: 850px;
    margin-top: 150px;
  }
} */
/* @media only screen and (max-width: 355px) and (min-width: 275px) {
  .karir .card-karir {
    width: 250px;
    height: 220px;
    background: #ffffff;
    box-shadow: 0px 4px 10px #00000029;
    border-radius: 15px;
    padding: 0 20px;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
  }
  .karir .makeup-karir1 {
    position: absolute;
    width: 250px;
    height: 200px;
    margin-top: 300px;
    z-index: -1;
  }
  .karir .makeup-karir2 {
    position: absolute;
    left: 20px;
    margin-top: 280px;
    z-index: -1;
  }
  .karir .makeup-karir3 {
    position: absolute;
    z-index: -1;
    left: 0;
    visibility: hidden;
    margin-top: 530px;
    width: 82px;
    height: 82px;
  }
  .karir .makeup-karir4 {
    position: absolute;
    z-index: -1;
    left: 0;
    visibility: hidden;
    margin-top: 150px;
  }
} */

@media only screen and (max-width: 280px) {
  .karir .card-karir .btndetail {
    padding-left: 0px !important;
    height: 35px !important;
  }
}

@media only screen and (max-width: 765px) {
  .karir {
    margin-top: 30px;
    margin-bottom: 50px;
  }

  .karir .deskripsi {
    width: 100%;
    font: normal normal normal 11px/26px Poppins;
    margin-bottom: 40px;
  }

  .karir .card-karir {
    position: relative;
    padding-left: 0px;
    padding-right: 0px;
    width: auto;
  }
  
  .karir .card-body {
    padding: 15px
  }

  .karir .judul {
    font: normal normal 600 20px/37px Poppins;
  }

  .karir .card-karir .namakarir {
    /* width: 102px; */
    font: normal normal 600 14px/20px Poppins;
  }

  .karir .card-karir .nama-lokasi {
    font: normal normal normal 10px Poppins;
  }

  .karir .card-karir .lokasi i {
    margin-right: 0px;
  }

  .karir .card-karir .btndetail {
    height: auto;
    font-size: 11px;
    margin-top: -20px;
    padding: 5px 0;
    padding-left: 15px;
  }

  .karir .card-karir .btndetail:hover {
    padding-right: 0px;
  }

  .karir .card-karir .btndetail:hover i {
    opacity: 0;
  }

  .karir .makeup-karir1 {
    position: absolute;
    width: 350px;
    height: 200px;
    margin-top: 300px;
    z-index: -1;
    display: none;
  }

  .karir .makeup-karir2 {
    position: absolute;
    left: 20px;
    margin-top: 280px;
    z-index: -1;
    display: none;
  }

  .karir .makeup-karir3 {
    position: absolute;
    z-index: -1;
    left: 0;
    margin-top: 530px;
    width: 82px;
    height: 82px;
    visibility: hidden;
    display: none;
  }

  .karir .makeup-karir4 {
    position: absolute;
    z-index: -1;
    left: 0;
    visibility: hidden;
    margin-top: 150px;
    display: none;
  }
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
  .karir .card-karir {
    width: 80%;
  }

  .karir .makeup-karir2 {
    left: 0;
  }

  .karir .makeup-karir3 {
    left: 900px;
  }

  .karir .makeup-karir4 {
    margin: auto;
    left: 0;
    top: 20%;
    right: 8%;
    bottom: 0;
  }

}

/*--------------------------------------------------------------
# Page Detail Karir
--------------------------------------------------------------*/
.detail-karir {
  margin-top: 72px;
  margin-bottom: 105px;
}

.detail-karir .div-lokasi1 {
  display: none;
}

.detail-karir .sisi-kiri {
  border-right: 1px solid rgba(12, 42, 80, 0.18);
  padding-right: 65px;
}

.detail-karir .judul {
  font: normal normal 600 45px/64px Poppins;
  color: #2c2c2c;
  text-align: center;
  margin-bottom: 86px;
}

.detail-karir .deskripsi {
  display: none;
}

.detail-karir .absolute-left {
  position: absolute;
  top: 146px;
  left: -10px;
  z-index: -1;
  width: 90px;
  height: 102px;
}

.detail-karir .absolute-right {
  overflow: hidden;
  margin-top: -80px;
  position: absolute;
  z-index: -1;
  right: 0;
}
.detail-karir .absolute-right img {
  margin-right: -20px;
  width: 90px;
  height: 102px;
}

.detail-karir .tujuan,
.tanggungjawab {
  font: normal normal normal 15px/30px Poppins;
  color: #2c2c2c;
  margin-bottom: 40px;
}

.detail-karir .skill {
  font: normal normal normal 15px/30px Poppins;
  color: #2c2c2c;
}

.detail-karir .point {
  font: normal normal bold 20px/30px Poppins;
  color: #2c2c2c;
}

.detail-karir .nomor {
  font: normal normal medium 40px/60px Poppins;
  color: #00a6cf;
}

.detail-karir .sisi-kanan {
  margin-left: 65px;
}

.detail-karir .pekerjaan,
.nama-lokasi {
  font: normal normal normal 15px/23px Poppins;
  color: #2c2c2c;
}

.detail-karir .pekerjaan {
  margin-bottom: 40px;
}

.detail-karir .lokasi {
  display: flex;
  margin-bottom: 0;
}

.detail-karir .lokasi i {
  width: 15px;
  height: 35px;
  color: #fc4f00;
  margin-right: 10px;
  align-self: center;
}

.detail-karir .btn-lamaran {
  margin-top: 40px;
  height: 50px;
  background: #00a6cf;
  border-radius: 5px;
  text-align: center;
  padding-top: 10px;
  margin-bottom: 30px;
}

.detail-karir .lihat-lowongan {
  position: relative;
  font: normal normal normal 15px/64px Poppins;
  color: #00a6cf;
}

.detail-karir .lihat-lowongan i {
  margin-left: -20px;
  opacity: 0;
  transition: all 0.3s linear;
}

.detail-karir .lihat-lowongan:hover {
  text-decoration: none;
}

.detail-karir .lihat-lowongan::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -3px;
  right: 0;
  background-color: #00a6cf;
  transition: all 0.3s ease-in-out 0s;
}

.detail-karir .lihat-lowongan:hover:after {
  width: 0%;
  background: transparent;
  transition: all 0.3s ease-in-out 0s;
}

.detail-karir .lihat-lowongan:hover i {
  opacity: 1;
  transform: translateX(25px);
}

@media only screen and (max-width: 765px) {
  .detail-karir {
    margin-top: 40px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .detail-karir .div-lokasi1 {
    display: inline-block;
    padding: 0 15px;
    margin-bottom: 30px;
  }

  .detail-karir .div-lokasi2 {
    display: none;
  }

  .detail-karir .lokasi i {
    width: 18px;
    height: 18px;
    margin-right: 0px;
    margin-top: -12px;
  }

  .detail-karir .judul {
    font: normal normal 600 25px/37px Poppins;
    text-align: left;
    padding: 0 15px;
    margin-bottom: 15px;
  }

  .detail-karir .deskripsi {
    display: inline-block;
    font: normal normal 600 14px/26px Poppins;
    color: #2c2c2c;
  }

  .detail-karir .absolute-left,
  .absolute-right {
    display: none;
  }

  .detail-karir .sisi-kiri {
    border-right: 0px;
    padding-right: 15px;
  }

  .detail-karir .sisi-kanan {
    margin-left: 0px;
    margin: 0 auto;
  }

  .detail-karir .point {
    font: normal normal 600 14px/26px Poppins;
  }

  .detail-karir .tujuan,
  .tanggungjawab {
    font: normal normal normal 11px/26px Poppins;
  }

  .detail-karir .nomor {
    font: normal normal medium 30px/46px Poppins;
  }

  .detail-karir .skill {
    font: normal normal normal 11px/26px Poppins;
  }

  .detail-karir .pekerjaan {
    font: normal normal normal 11px/26px Poppins;
  }

  .detail-karir .nama-lokasi {
    font: normal normal normal 14px Poppins;
  }

  .detail-karir .btn-lamaran {
    display: block;
    margin-top: 20px;
    font-size: 12px;
    height: 40px;
  }

  .detail-karir .lihat-lowongan {
    font: normal normal medium 12px/18px Poppins;
    text-decoration: none;
    display: block;
    text-align: center;
    margin-top: -10px;
  }

  .detail-karir .lihat-lowongan:hover i {
    opacity: 0;
  }

  .detail-karir .lihat-lowongan::after {
    width: 0px;
  }
}

@media only screen and (max-width: 1200px) and (min-width: 768px) {
  .detail-karir .sisi-kiri {
    padding: 0 40px;
    border-right: 0px;
  }

  .detail-karir .sisi-kanan {
    display: flex;
    margin-top: 50px;
    margin-left: 0px;
    padding: 0 40px;
  }

  .detail-karir .div-pekerjaan {
    margin-right: 150px;
  }

  .detail-karir .btn-lamaran {
    margin-top: 0px;
  }

  .detail-karir .col-lowongan {
    display: block;
    width: 100%;
  }

  .detail-karir .lihat-lowongan i {
    opacity: 1;
    margin-left: 0px;
    margin-right: 10px;
  }

  .detail-karir .lihat-lowongan::after {
    width: 0px;
  }

  .detail-karir .absolute-left,
  .absolute-right {
    display: none;
  }
}

/*--------------------------------------------------------------
# Page Kirim Lamaran
--------------------------------------------------------------*/
.kirim-lamaran {
  width: 600px;
  margin: 0 auto;
  margin-top: 72px;
  margin-bottom: 134px;
}

.kirim-lamaran .judul {
  font: normal normal 600 45px/64px Poppins;
  color: #2c2c2c;
}

.kirim-lamaran .desk {
  font: normal normal normal 15px/26px Poppins;
  color: #666366;
  margin-bottom: 50px;
}

.kirim-lamaran .desk span {
  color: #fe7f46;
}

.kirim-lamaran label {
  font: normal normal 600 15px/26px Poppins;
  color: #2c2c2c;
}

.kirim-lamaran .input {
  font: normal normal normal 15px/26px Poppins;
  color: #a0a4a8;
}

.kirim-lamaran .max {
  font: normal normal normal 16px/26px Poppins;
  color: #a0a4a8;
}

.kirim-lamaran .custom-file-upload {
  width: 120px;
  height: 50px;
  background: #fe7f46;
  border-radius: 5px;
  font: normal normal normal 15px/26px Poppins;
  color: #ffffff;
  text-align: center;
  padding-top: 10px;
  margin-bottom: 60px;
}

.kirim-lamaran .custom-text {
  font: normal normal normal 14px/26px Poppins;
  color: #2c2c2c;
  margin-left: 20px;
}

.kirim-lamaran .btn-kembali {
  width: 140px;
  height: 50px;
  background: #ffffff;
  border: 1px solid #00a6cf;
  border-radius: 5px;
  font: normal normal normal 15px/23px Poppins;
  color: #00a6cf;
  padding-top: 12px;
}

.kirim-lamaran .btn-kirim {
  width: 140px;
  height: 50px;
  background: #00a6cf;
  border-radius: 5px;
  font: normal normal normal 15px/23px Poppins;
  color: #ffffff;
}

.modal-lamaran {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 70px;
}

.modal-lamaran .terimakasih {
  margin: 0 60px;
}

.modal-lamaran .terimakasih h2 {
  font: normal normal 600 45px/68px Poppins;
  color: #000000;
}

.modal-lamaran .terimakasih p {
  font: normal normal normal 15px/30px Poppins;
  color: #666366;
}

.modal-lamaran .btntoberanda {
  width: 222px;
  height: 50px;
  background: #00a6cf;
  border-radius: 5px;
  font: normal normal normal 15px/23px Poppins;
  color: #ffffff;
  padding-top: 10px;
  margin-top: 20px;
}

@media only screen and (max-width: 765px) {
  .kirim-lamaran {
    margin-top: 30px;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }

  .kirim-lamaran .judul {
    font: normal normal 600 20px/37px Poppins;
  }

  .kirim-lamaran .desk {
    font: normal normal normal 11px/26px Poppins;
  }

  .kirim-lamaran .desk {
    font: normal normal 600 12px/26px Poppins;
  }

  .kirim-lamaran label {
    font: normal normal 600 12px/26px Poppins;
  }

  .kirim-lamaran .input {
    font: normal normal 600 12px/26px Poppins;
  }

  .kirim-lamaran .custom-file-upload {
    height: 40px;
    padding-top: 5px;
    font-size: 12px;
    margin-bottom: 20px;
  }

  .kirim-lamaran .row-tombol {
    display: flex;
    flex-direction: column-reverse;
  }

  .kirim-lamaran .btn-kirim {
    width: 100%;
    margin-bottom: 16px;
  }

  .kirim-lamaran .btn-kembali {
    width: 100%;
    border: 0px;
  }
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
  .kirim-lamaran {
    width: 80%;
  }

  .kirim-lamaran .btn-kembali {
    width: 100%;
  }

  .kirim-lamaran .btn-kirim {
    width: 100%;
  }
}

@media only screen and (max-width: 1200px) {
  /* Portofolio */
  .portofolio {
    width: 100%;
  }

  .portofolio .card-bg {
    width: 100%;
    height: 100%;
  }
  
  .portofolio .card1 {
    width: 100%;
    height: 100%;
  }
  
  /* Detail Artikel */
  .detail-artikel .section-1 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .detail-artikel .section-1 .badge {
    margin-bottom: 20px;
  }

  /* .detail-artikel .nav-artikel h3 {
    margin-left: 20px;
  } */

  /* .detail-artikel .nav-artikel .link {
    margin: 0 auto;
    text-align: center !important;
  } */

  /* Detail Karir */
  /* .detail-karir .sisi-kanan {
    margin-left: 0px;
    margin: 0 auto;
  }

  .detail-karir .sisi-kiri {
    padding-right: 0px !important;
  } */

  /* Kirim Lamaran */
  /* .kirim-lamaran {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  } */
}

/*--------------------------------------------------------------
# Nav Portofolio
--------------------------------------------------------------*/
.nav-portofolio .title {
  margin-top: 72px;
  text-align: center;
  font: normal normal 600 45px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.nav-portofolio .title-desc {
  text-align: center;
  font: normal normal normal 15px/26px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}
.nav-portofolio .normal-input {
  display: block;
}
.nav-portofolio .select-input {
  display: none;
  padding-left: 20px;
  padding-right: 20px;
}
.nav-portofolio .select-input .style-select {
  /* width: 320px; */
  height: 45px;
  font: normal normal normal 14px/64px Poppins;
  color: #2c2c2c;
}
/* 
.nav-portofolio .list {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
} */

/* .nav-portofolio .list a {
  padding: 0.5rem;
  flex: auto;
  text-align: center;
} */

/* .nav-portofolio nav {
  margin-left: 0;
} */

/* .nav-portofolio .list a {
  margin-right: 20px;
  margin-top: 45px;
  width: 140px;
  height: 45px;
} */

/* .nav-portofolio .list a:hover,
.nav-portofolio .list .active {
  border-radius: 5px;
  background-color: #00a6cf;
  color: white;
} */
.nav-portofolio .list-kategori {
  margin-top: 80px;
}

.nav-portofolio .list-kategori button {
  font: normal normal normal 15px/23px Poppins;
  color: #106eea;
  background-color: transparent;
  border: none;
}

.nav-portofolio .list-kategori .active {
  font: normal normal normal 15px/23px Poppins;
  color: #106eea;
  background-color: #00a6cf;
  outline: none;
  border: none;
}

.nav-portofolio .list-portfolio {
  margin-left: 60px;
  margin-right: 60px;
  margin-top: 104px;
  margin-bottom: 50px;
}

.nav-portofolio .list-portfolio .btn-card {
  background-color: transparent;
  border: none;
  text-align: left;
  display: block;
  margin: 0 auto;
}

.nav-portofolio .list-portfolio .btn-card:focus {
  background-color: transparent;
  border: none;
  outline: none;
}

.nav-portofolio .list-portfolio .card-image {
  width: 320px;
  height: 280px;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0px 0px 29px 0px rgba(68, 88, 144, 0.12);
}

.nav-portofolio .list-portfolio .card-image > img {
  width: 100%;
  max-width: inherit;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(1.6);
  -moz-transform: translate(-50%, -50%) scale(1.6);
  -o-transform: translate(-50%, -50%) scale(1.6);
  transform: translate(-50%, -50%) scale(1.6);
}

.nav-portofolio .list-portfolio .port-title {
  font: normal normal 600 20px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.nav-portofolio .list-portfolio .port-owner {
  display: flex;
  flex-direction: column;
  margin-top: -25px;
  font: normal normal normal 15px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}

/* .nav-portofolio .list-portfolio .flex {
  display: flex;
  flex-wrap: wrap;
} */
.nav-portofolio .makeup-porto1 {
  position: absolute;
  left: -10px;
  top: 150px;
  z-index: -1;
  width: 88px;
  height: 102px;
}

.makeup-porto2 {
  position: absolute;
  overflow: hidden;
  right: 0;
  top: 765px;
  z-index: -2;
}
.makeup-porto2 img {
  margin-right: -10px;
  width: 90px;
  height: 104px;
}

.porto-paginate-kecil {
  display: none;
}
/*--------------------------------------------------------------
# CSS Untuk Tampilan Halaman Portofolio yang baru
--------------------------------------------------------------*/
.nav-portofolio .cardnya-porto {
  width: 320px;
  /* height: 358px; */
  border: none;
}
.nav-portofolio .cardnya-porto .card-body{
  /* margin-top: -20px; */
  margin-left: -20px;
}
.nav-portofolio .card-text-porto {
  text-align: left;
  font: normal normal 600 20px Poppins;
  letter-spacing: 0px;
  color: #2C2C2C;
  opacity: 1;
}
.nav-portofolio .card-text-porto2 {
  text-align: left;
  font: normal normal normal Poppins;
  font-size: 15px;
  color: #666366;
  letter-spacing: 0px;
  opacity: 1;
  margin-top: -20px;
}
.nav-portofolio .cardnya-porto .div-image {
  height: 280px;
  position: relative;
  overflow: hidden;
}
/* .nav-portofolio .cardnya-porto .div-image > img{
  width: 100%;
  max-width: inherit;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(1.6);
  -moz-transform: translate(-50%, -50%) scale(1.6);
  -o-transform: translate(-50%, -50%) scale(1.6);
  transform: translate(-50%, -50%) scale(1.6);
  margin-right: auto;
  margin-left: auto;
} */
.nav-portofolio .cardnya-porto .card-body .flex-display-porto {
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (width:280px) {
  .nav-portofolio .normal-input {
    display: none;
  }
  .nav-portofolio .select-input {
    display: block;
  }
  .nav-portofolio .row-kategori {
    margin-bottom: 50px;
  }
  .nav-portofolio .list-portfolio {
    margin-left: auto;
    margin-right: auto;
  }
  .nav-portofolio .list-portfolio button {
    justify-content: center;
  }
  .nav-portofolio .list-portfolio {
    margin-left: 0px;
    margin: 0 auto;
  }

  .nav-portofolio .list-portfolio .flex {
    display: flex;
    justify-content: center;
  }

  .nav-portofolio .list-portfolio .card-image {
    width: 280px;
    height: 240px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
  }
  .nav-portofolio .list-portfolio .btn-card {
    background-color: transparent;
    border: none;
    margin-right: auto;
    margin-left: auto;
  }
  /* responsive layout halaman portofolkio yang baru */
  /* .nav-portofolio .cardnya-porto .div-image > img{
    width: 100%;
    max-width: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(2);
    -moz-transform: translate(-50%, -50%) scale(2);
    -o-transform: translate(-50%, -50%) scale(2);
    transform: translate(-50%, -50%) scale(2);
    margin-right: auto;
    margin-left: auto;
  } */
  .nav-portofolio .cardnya-porto {
    width: 210px;
    height: 238px;
    border: none;
  }
  .nav-portofolio .list-portfolio {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 20px;
  }
  .nav-portofolio .makeup-porto1 {
    display: none;
    position: absolute;
    left: -10px;
    top: 150px;
    z-index: -1;
    width: 88px;
    height: 102px;
  }
  
  .makeup-porto2 {
    display: none;
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 765px;
    z-index: -2;
  }
  .makeup-porto2 img {
    display: none;
    margin-right: -10px;
    width: 90px;
    height: 104px;
  }
  .porto-paginate-kecil {
    display: block;
  }
  .porto-paginate {
    display: none;
  }
}
@media only screen and (width:320px) {
  .nav-portofolio .normal-input {
    display: none;
  }
  .nav-portofolio .select-input {
    display: block;
  }
  .nav-portofolio .row-kategori {
    margin-bottom: 50px;
  }
  .nav-portofolio .list-portfolio {
    margin-left: auto;
    margin-right: auto;
  }
  .nav-portofolio .list-portfolio button {
    justify-content: center;
  }
  .nav-portofolio .list-portfolio {
    margin-left: 0px;
    margin: 0 auto;
  }

  .nav-portofolio .list-portfolio .flex {
    display: flex;
    justify-content: center;
  }

  .nav-portofolio .list-portfolio .card-image {
    width: 280px;
    height: 240px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
  }
  .nav-portofolio .list-portfolio .btn-card {
    background-color: transparent;
    border: none;
    margin-right: auto;
    margin-left: auto;
  }
  /* responsive layout halaman portofolkio yang baru */
  /* .nav-portofolio .cardnya-porto .div-image > img{
    width: 100%;
    max-width: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(2);
    -moz-transform: translate(-50%, -50%) scale(2);
    -o-transform: translate(-50%, -50%) scale(2);
    transform: translate(-50%, -50%) scale(2);
    margin-right: auto;
    margin-left: auto;
  } */
  .nav-portofolio .cardnya-porto {
    width: 240px;
    height: 268px;
    border: none;
  }
  .nav-portofolio .list-portfolio {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 20px;
  }
  .nav-portofolio .makeup-porto1 {
    display: none;
    position: absolute;
    left: -10px;
    top: 150px;
    z-index: -1;
    width: 88px;
    height: 102px;
  }
  
  .makeup-porto2 {
    display: none;
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 765px;
    z-index: -2;
  }
  .makeup-porto2 img {
    display: none;
    margin-right: -10px;
    width: 90px;
    height: 104px;
  }
  .porto-paginate-kecil {
    display: block;
  }
  .porto-paginate {
    display: none;
  }
} 
@media only screen and (min-width: 360px) and (max-width: 540px) {
  .nav-portofolio .normal-input {
    display: none;
  }
  .nav-portofolio .select-input {
    display: block;
  }
  .nav-portofolio .row-kategori {
    margin-bottom: 50px;
  }
  .nav-portofolio .list-portfolio {
    margin-left: auto;
    margin-right: auto;
  }
  .nav-portofolio .list-portfolio button {
    justify-content: center;
  }
  .nav-portofolio .list-portfolio {
    margin-left: 0px;
    margin: 0 auto;
  }

  .nav-portofolio .list-portfolio .flex {
    display: flex;
    justify-content: center;
  }

  .nav-portofolio .list-portfolio .card-image {
    width: 280px;
    height: 240px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
  }
  .nav-portofolio .list-portfolio .btn-card {
    background-color: transparent;
    border: none;
    margin-right: auto;
    margin-left: auto;
  }
  /* responsive layout halaman portofolkio yang baru */
  /* .nav-portofolio .cardnya-porto .div-image > img{
    width: 100%;
    max-width: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(2);
    -moz-transform: translate(-50%, -50%) scale(2);
    -o-transform: translate(-50%, -50%) scale(2);
    transform: translate(-50%, -50%) scale(2);
    margin-right: auto;
    margin-left: auto;
  } */
  .nav-portofolio .cardnya-porto {
    width: 290px;
    height: 318px;
    border: none;
  }
  .nav-portofolio .list-portfolio {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 20px;
  }
  .nav-portofolio .makeup-porto1 {
    display: none;
    position: absolute;
    left: -10px;
    top: 150px;
    z-index: -1;
    width: 88px;
    height: 102px;
  }
  
  .makeup-porto2 {
    display: none;
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 765px;
    z-index: -2;
  }
  .makeup-porto2 img {
    display: none;
    margin-right: -10px;
    width: 90px;
    height: 104px;
  }
  .porto-paginate-kecil {
    display: block;
  }
  .porto-paginate {
    display: none;
  }
}

@media only screen and (min-width: 766px) and (max-width: 900px) {
  .nav-portofolio .row-kategori {
    margin-bottom: 50px;
  }
  .nav-portofolio .list-portfolio {
    margin-left: auto;
    margin-right: auto;
  }
  .nav-portofolio .list-portfolio button {
    justify-content: center;
  }
  .nav-portofolio .list-portfolio {
    margin-left: 0px;
    margin: 0 auto;
  }

  .nav-portofolio .list-portfolio .flex {
    display: flex;
    justify-content: center;
  }

  .nav-portofolio .list-portfolio .card-image {
    width: 280px;
    height: 240px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
  }
  .nav-portofolio .list-portfolio .btn-card {
    background-color: transparent;
    border: none;
    margin-right: auto;
    margin-left: auto;
  }
  /* responsive layout halaman portofolkio yang baru */
  /* .nav-portofolio .cardnya-porto .div-image > img{
    width: 100%;
    max-width: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(2);
    -moz-transform: translate(-50%, -50%) scale(2);
    -o-transform: translate(-50%, -50%) scale(2);
    transform: translate(-50%, -50%) scale(2);
    margin-right: auto;
    margin-left: auto;
  } */
  .nav-portofolio .cardnya-porto {
    width: 290px;
    height: 318px;
    border: none;
  }
  .nav-portofolio .list-portfolio {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 20px;
  }
  .nav-portofolio .makeup-porto1 {
    display: none;
    position: absolute;
    left: -10px;
    top: 150px;
    z-index: -1;
    width: 88px;
    height: 102px;
  }
  
  .makeup-porto2 {
    display: none;
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 765px;
    z-index: -2;
  }
  .makeup-porto2 img {
    display: none;
    margin-right: -10px;
    width: 90px;
    height: 104px;
  }
}

@media only screen and (width: 1024px){
  .nav-portofolio .normal-input {
    margin-left: 15px;
    margin-right: 15px;
  }
  /* responsive layout halaman portofolkio yang baru */
  .nav-portofolio .list-portfolio {
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 104px;
    margin-bottom: 20px;
  }
  .nav-portofolio .cardnya-porto {
    width: 410px;
    height: 438px;
    border: none;
  }
  .nav-portofolio .list-portfolio .card-image {
    width: 280px;
    height: 240px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
  }
  /* .nav-portofolio .cardnya-porto .div-image > img{
    width: 100%;
    max-width: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(2);
    -moz-transform: translate(-50%, -50%) scale(2);
    -o-transform: translate(-50%, -50%) scale(2);
    transform: translate(-50%, -50%) scale(2);
    margin-right: auto;
    margin-left: auto;
  } */
  .nav-portofolio .cardnya-porto .card-body{
    /* margin-top: -20px; */
    margin-top: 13px;
    margin-left: -20px;
  }
}
/*--------------------------------------------------------------
# Nav Artikel
--------------------------------------------------------------*/

@media only screen and (min-width: 280px) and (max-width:320px) {
  .nav-artikel .divider-right {
    border-right: 0px;
    padding-right: 0px !important;
  }
}

@media only screen and (min-width: 280px) and (max-width:850) {
  .nav-artikel .divider-right {
    border-right: 0px;
    padding-right: 0px !important;
  }
}

.nav-artikel {
  width: 100%;
}

.nav-artikel .divider-right {
  border-right: 1px solid #CACCCF;
  padding-right: 5px !important;
}

.nav-artikel .action-bar {
  margin-top: 45px;
}

.nav-artikel .action-bar .search {
  margin: auto;
}

.nav-artikel .action-bar .categories {
  margin: 20px 18px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 15px 0px;
}

.nav-artikel .action-bar .categories::-webkit-scrollbar {
  width: 0em;
  height: 0em;
}

.nav-artikel .action-bar .next-category-btn {
  position: absolute;
  width: 100px;
  background: linear-gradient(270deg, #FFFFFF 63%, rgba(255, 255, 255, 0) 100%);
  top: 25px;
  left: 89.5%;
}

.nav-artikel .action-bar .prev-category-btn {
  position: absolute;
  width: 100px;
  background: linear-gradient(90deg, #FFFFFF 63%, rgba(255, 255, 255, 0) 100%);
  top: 25px;
}

.nav-artikel .action-bar .next-category-btn:hover,
.nav-artikel .action-bar .prev-category-btn:hover {
  cursor: pointer;
}

.nav-artikel .action-bar .next-category-btn img {
  margin: 11px 0px 11px 45%;
}

.nav-artikel .action-bar .prev-category-btn img {
  margin: 11px 0px;
}

.nav-artikel .action-bar .categories .category-badge {
  display: inline;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 28px;

  margin: 0px 5px;
  height: 51px;
  
  border: 1px solid #CACCCF;
  box-sizing: border-box;
  border-radius: 33px;
  color: #666366;
  
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 27px;
}

.nav-artikel .action-bar .categories .category-badge.active {
  border: 0px !important;
  color: #fff;
  background: #00A6CF;
}

.nav-artikel .action-bar .categories .category-badge:hover { 
  cursor: pointer;
  color: #fff;
  background: #00A6CF;
}

.nav-artikel .content-divider {
  padding-right: 15px;
  padding-left: 15px;
  margin: 45px auto;
  width: 100%;
  height: 0px;
  border-top: 1px solid #CACCCF;
}

.nav-artikel .row-filter-artikel {
  margin-top: 65px;
  margin-left: 70px;
  margin-right: 70px;
}

.nav-artikel .form-select {
  width: 320px;
  height: 45px;
  font: normal normal normal 14px/64px Poppins;
  color: #2c2c2c;
}


.nav-artikel .box {
  width: 320px;
  height: 45px;
  display: flex;
  align-items: center;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #CACCCF;
  box-sizing: border-box;
  border-radius: 33px;
}

.nav-artikel .box i {
  color: #dddddd;
  padding-left: 20px;
}

.nav-artikel .input-search {
  font: normal normal normal 14px/64px Poppins;
  background-color: transparent !important;
  color: #a0a4a8;
  border: none;
  outline: none;
}

.nav-artikel .latest-article .title {
  text-align: left !important;
  margin-top: 10px;
  font: normal normal 600 30px/49px Poppins;
}

.nav-artikel .title {
  text-align: center;
  margin-top: 72px;
  font: normal normal 600 45px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.nav-artikel .sub-title {
  font: normal normal 600 24px/43px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.nav-artikel .latest-article .content {
  font: normal normal 300 15px/32px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
  margin-bottom: 50px;
}

.nav-artikel .latest-article .image-container {
  height: 401px;
  max-width: 100%;
  margin-bottom: 10px;
}

.nav-artikel .latest-article .image-container .image-content {
  max-height: 100%;
  max-width: 100%;
  border-radius: 10px;
  filter: drop-shadow(0px 22px 37px rgba(0, 0, 0, 0.08));
}

.nav-artikel .latest-article .btn-main {
  width: 209px;
  height: 51px;
  border: 1px solid #00A6CF;
  box-sizing: border-box;
  border-radius: 10px;
  color: #00A6CF;
  font: normal normal 600 15px/20px Poppins;
  background-color: transparent;
}

.nav-artikel .latest-article .btn-main:hover {
  border: 1px solid #00A6CF;
  background-color: #00A6CF;
  color: #fff;
}

.nav-artikel .title-desc {
  text-align: center;
  font: normal normal normal 15px/26px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}

.nav-artikel .section-2 {
  margin-left: auto;
  margin-right: auto;
  margin-top: 45px;
  margin-bottom: 20px;
}

.nav-artikel .section-2 .btn-card {
  background-color: transparent;
  border: none;
  text-align: left;
  display: block;
  margin: 0 auto;
}

.nav-artikel .section-2 .btn-card:focus {
  background-color: transparent;
  border: none;
  outline: none;
}

.nav-artikel .section-2 .card-artikel .label-container {
  left: 0px;
  top: 34%;

  position: absolute;

  display: flex;
}

.nav-artikel .section-2 .card-artikel .label {
  display: flex;
  flex-direction: row;
  align-items: center;

  padding: 8px 25px;
  min-width: 110px;
  height: 40px;

  background: #000000;
  border-radius: 0px 6px 6px 0px;
  
  text-transform: uppercase;
  color: #fff;
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;

  z-index: 2;
}

.nav-artikel .section-2 .card-artikel .label.popular {
  background-color: #FD4F00;
  z-index: 1;
  left: 41.6%;
  position: absolute;
}

.nav-artikel .section-2 .card-artikel .label.popular img {
  left: 89.67%;
  right: 16.68%;
  top: 2.23%;
  position: relative;
  bottom: 8.33%;
}


.nav-artikel .section-2 .card-artikel {
  width: 320px;
  height: 380px;
  border: none;
  margin-bottom: 20px;
}
.nav-artikel .section-2 .card-artikel:hover {
  background: #FFFFFF;
  box-shadow: 0px 10px 47px rgba(0, 0, 0, 0.12);
  border-radius: 18px;
  width: 320px;
  height: 380px;
  border: none;
}
.nav-artikel .section-2 .gmb-artikel {
  /* width: 100%; */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  height: 200px;
  border-radius: 5px;
}
.nav-artikel .row-empty {
  margin-top: 100px;
  margin-bottom: 250px;
}
.nav-artikel .row-empty .gmb-empty {
  margin-right: auto;
  margin-left: auto;
  width: 100px;
  height: 100px;
}
.nav-artikel .row-empty p {
  font: normal normal medium 20px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}
.nav-artikel .section-2 .text-empty {
  text-align: left;
  font: normal normal normal 15px/26px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}
.nav-artikel .section-2 .judul-artikel {
  text-align: left;
  margin-top: 10px;
  margin-bottom: 20px;
  font: normal normal 600 20px/25px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.nav-artikel .section-2 .row-user-artikel {
  margin-top: -5px;
}

.nav-artikel .section-2 .col-gambar {
  position: absolute;
  bottom: 5%;
}

.nav-artikel .section-2 .col-user {
  position: absolute;
  margin-left: 50px;
  margin-bottom: -40px;
  bottom: 5%;
}

.nav-artikel .section-2 .gmb-user-artikel {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.nav-artikel .section-2 .nama-user-artikel {
  text-align: left;
  margin-top: -20px;
  font: normal normal normal 15px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}
.nav-artikel .section-2 .tgl-artikel {
  text-align: left;
  margin-top: -60px;
  font: normal normal normal 13px/64px Poppins;
  letter-spacing: 0px;
  color: #a9a9a9;
  opacity: 1;
}

.nav-artikel .row-btn-loadmore {
  margin-top: 32px;
  margin-bottom: 150px;
}
.nav-artikel .row-btn-loadmore .btn-loadmore {
  width: 170px;
  height: 50px;
  border: none;
  background: #00a6cf 0% 0% no-repeat padding-box;
  border-radius: 5px;
  opacity: 1;
  font: normal normal normal 15px/23px Poppins;
  text-align: center;
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 1;
}

.nav-artikel .makeup-artikel1 {
  position: absolute;
  left: -10px;
  top: 660px;
  z-index: -1;
  width: 88px;
  height: 102px;
}
.nav-artikel .makeup-artikel2 {
  position: absolute;
  overflow: hidden;
  right: 0;
  top: 1250px;
  z-index: -1;
}
.nav-artikel .makeup-artikel2 img {
  margin-right: -10px;
  width: 90px;
  height: 104px;
}

/* .nav-artikel .section-3 {
  justify-content: center;
  margin-bottom: 30px;
}
.nav-artikel .section-3 .pagination li {
  display: inline;
}
.nav-artikel .section-3 .pagination li a {
  display: inline-block;
  padding: 9px 16px;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid #ddd;
  font: normal normal normal 15px/23px Poppins;
  color: #2c2c2c;
  margin-right: 3px;
}

.nav-artikel .section-3 .pagination li a.active {
  background-color: #00a6cf;
  color: #ffffff;
}

.nav-artikel .section-3 .pagination li a:hover:not(.active) {
  background: #ddd;
} */
/* galaxy fold */
@media only screen and (min-width: 280px) and (max-width:320px) {
  .nav-artikel .section-1 {
    margin-bottom: 30px;
  }
  .nav-artikel .section-1 .col-head {
    padding-left: 35px;
    padding-right: 35px;
  }
  .nav-artikel .title {
    margin-top: 30px;
    text-align: center;
    font: normal normal 600 20px/37px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .nav-artikel .title-desc {
    text-align: center;
    font: normal normal normal 11px/26px Poppins;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }
  .nav-artikel .row-filter-artikel {
    margin-left: 0;
    margin-right: 0;
  }
  .nav-artikel .form-select {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }
  .nav-artikel .box {
    width: 100%;
    margin: 0 auto;
  }
  .nav-artikel .section-2 {
    margin-left: auto;
    margin-right: auto;
  }
  .nav-artikel .section-2 .card-artikel {
    width: 210px;
    height: auto;
    height: fit-content(100%);
    border: none;
    margin-bottom: 40px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  }
  .nav-artikel .section-2 .card-artikel:hover {
    background: #FFFFFF;
    box-shadow: 0px 10px 47px rgba(0, 0, 0, 0.12);
    border-radius: 18px;
    width: 210px;
    height: auto;
    border: none;
  }
  .nav-artikel .section-2 .gmb-artikel {
    /* width: 100%; */
    box-shadow: none;
    height: auto;
    border-radius: 5px;
  }
  .nav-artikel .section-2 .col-gambar {
    position: relative;
  }

  .nav-artikel .section-2 .col-user {
    position: relative;
    margin-top: -40px;
  }

  .nav-artikel .makeup-artikel1 {
    display: none;
    position: absolute;
    left: -10px;
    top: 660px;
    z-index: -1;
    width: 88px;
    height: 102px;
  }
  .nav-artikel .makeup-artikel2 {
    display: none;
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 1250px;
    z-index: -1;
  }
  .nav-artikel .makeup-artikel2 img {
    display: none;
    margin-right: -10px;
    width: 90px;
    height: 104px;
  }
  .nav-artikel .section-2 .judul-artikel {
    text-align: left;
    margin-top: 10px;
    margin-bottom: 20px;
    font: normal normal 600 14px/21px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .nav-artikel .section-2 .nama-user-artikel {
    text-align: left;
    margin-top: -11px;
    font: normal normal normal 12px/46px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .nav-artikel .section-2 .tgl-artikel {
    text-align: left;
    margin-top: -45px;
    font: normal normal normal 11px/49px Poppins;
    letter-spacing: 0px;
    color: #a9a9a9;
    opacity: 1;
  }
}

@media only screen and (max-width: 540px) and (min-width: 360px) {
  .nav-artikel .section-1 {
    margin-bottom: 30px;
  }
  .nav-artikel .section-1 .col-head {
    padding-left: 35px;
    padding-right: 35px;
  }
  .nav-artikel .title {
    margin-top: 30px;
    text-align: center;
    font: normal normal 600 20px/37px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .nav-artikel .title-desc {
    text-align: center;
    font: normal normal normal 11px/26px Poppins;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }
  .nav-artikel .row-filter-artikel {
    margin-top: 64px auto;
  }
  .nav-artikel .section-2 .card-artikel {
    width: 290px;
    height: auto;
    height: fit-content(100%);
    border: none;
    margin-bottom: 40px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  }
  .nav-artikel .section-2 .card-artikel:hover {
    background: #FFFFFF;
    box-shadow: 0px 10px 47px rgba(0, 0, 0, 0.12);
    border-radius: 18px;
    width: 290px;
    height: auto;
    border: none;
  }
  
  .nav-artikel .section-2 .gmb-artikel {
    /* width: 100%; */
    box-shadow: none;
    height: auto;
    border-radius: 5px;
  }
  .nav-artikel .section-2 .col-gambar {
    position: relative;
  }

  .nav-artikel .section-2 .col-user {
    position: relative;
    margin-top: -40px;
  }

  .nav-artikel .form-select {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }

  .nav-artikel .box {
    width: 100%;
    margin: 0 auto;
  }

  .nav-artikel .section-2 {
    margin-left: auto;
    margin-right: auto;
  }
  /* .nav-artikel .section-2 .card-artikel {
    width: 235px;
    height: fit-content(100%);
    border: none;
    margin-bottom: 40px;
  } */
  /* makeup mobile */
  .nav-artikel .makeup-artikel1 {
    display: none;
    position: absolute;
    left: -10px;
    top: 660px;
    z-index: -1;
    width: 88px;
    height: 102px;
  }
  .nav-artikel .makeup-artikel2 {
    display: none;
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 1250px;
    z-index: -1;
  }
  .nav-artikel .makeup-artikel2 img {
    display: none;
    margin-right: -10px;
    width: 90px;
    height: 104px;
  }
  .nav-artikel .section-2 .judul-artikel {
    text-align: left;
    margin-top: 10px;
    margin-bottom: 20px;
    font: normal normal 600 16px/21px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
}
@media only screen and (max-width: 850px) and (min-width: 750px) {
  .nav-artikel .section-1 {
    margin-bottom: 30px;
  }
  .nav-artikel .section-1 .col-head {
    padding-left: 35px;
    padding-right: 35px;
  }
  .nav-artikel .title {
    margin-top: 30px;
    text-align: center;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .nav-artikel .title-desc {
    text-align: center;
    margin-left: 50px;
    margin-right: 50px;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }
  .nav-artikel .row-filter-artikel {
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
  .nav-artikel .form-select {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }
  .nav-artikel .box {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }
  .nav-artikel .section-2 .card-artikel {
    width: 320px;
    height: auto;
    height: fit-content(100%);
    border: none;
    margin-bottom: 40px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  }
  .nav-artikel .section-2 .card-artikel:hover {
    background: #FFFFFF;
    box-shadow: 0px 10px 47px rgba(0, 0, 0, 0.12);
    border-radius: 18px;
    width: 320px;
    height: auto;
    border: none;
  }
  .nav-artikel .section-2 .gmb-artikel {
    /* width: 100%; */
    box-shadow: none;
    height: auto;
    border-radius: 5px;
  }
  .nav-artikel .section-2 .col-gambar {
    position: relative;
  }

  .nav-artikel .section-2 .col-user {
    position: relative;
    margin-top: -40px;
  }

  .nav-artikel .form-select {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }

  .nav-artikel .box {
    width: 100%;
    margin: 0 auto;
  }

  .nav-artikel .section-2 {
    margin-left: auto;
    margin-right: auto;
  }
  /* .nav-artikel .section-2 .card-artikel {
    width: 235px;
    height: fit-content(100%);
    border: none;
    margin-bottom: 40px;
  } */
  /* makeup mobile */
  .nav-artikel .makeup-artikel1 {
    display: none;
    position: absolute;
    left: -10px;
    top: 660px;
    z-index: -1;
    width: 88px;
    height: 102px;
  }
  .nav-artikel .makeup-artikel2 {
    display: none;
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 1250px;
    z-index: -1;
  }
  .nav-artikel .makeup-artikel2 img {
    display: none;
    margin-right: -10px;
    width: 90px;
    height: 104px;
  }
  .nav-artikel .section-2 .judul-artikel {
    text-align: left;
    margin-top: 10px;
    margin-bottom: 20px;
    font: normal normal 600 16px/21px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
}
@media only screen and (max-width: 990px) and (min-width: 900px) {
  .nav-artikel .title-desc {
    text-align: center;
    margin-left: 70px;
    margin-right: 70px;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }
  .nav-artikel .section-2 .card-artikel {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  }
}
@media only screen and (width: 1024px){
  .nav-artikel .row-filter-artikel {
    padding-left: 35px;
    padding-right: 35px;
  }
  .nav-artikel .section-2 .card-artikel {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  }
  
}
/*--------------------------------------------------------------
# page bangun aplikasimu
--------------------------------------------------------------*/
.ayo-mulai .judul {
  text-align: left;
  font: normal normal 600 45px/68px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.ayo-mulai .deskripsikan {
  text-align: left;
  font: normal normal normal 15px/23px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}

.ayo-mulai .nlengkap {
  width: auto;
  height: 21px;
  text-align: left;
  font: normal normal 600 15px/23px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.ayo-mulai .email {
  width: auto;
  height: 21px;
  text-align: left;
  font: normal normal 600 15px/23px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.ayo-mulai .input-nama {
  width: 101%;
  height: 50px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  opacity: 1;
}

.ayo-mulai .input-email {
  width: 101%;
  height: 50px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  opacity: 1;
}

.ayo-mulai .desc {
  width: auto;
  height: 21px;
  text-align: left;
  font: normal normal 600 15px/23px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.ayo-mulai .input-desc {
  width: 100%;
  height: 100px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  opacity: 1;
}

.ayo-mulai .btn {
  width: 159px;
  height: 50px;
  background: var(--unnamed-color-00a6cf) 0% 0% no-repeat padding-box;
  background: #00a6cf 0% 0% no-repeat padding-box;
  border-radius: 5px;
  opacity: 1;
}

/* tipe */
@import "../themes/big-theme/assets/css/lesshat";

.tipe .r1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tipe .btn-tipe1 {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 100%;
  width: 24px;
  height: 24px;
  background: #00a6cf 0% 0% no-repeat padding-box;
}

.tipe .btn-tipe2 {
  font: normal normal 600 16px/25px Poppins;
  letter-spacing: 0px;
  color: #707070;
  opacity: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 100%;
  width: 24px;
  height: 24px;
  background: #e7e7ee 0% 0% no-repeat padding-box;
}

.tipe .judul-btn {
  text-align: center;
  font: normal normal medium 15px/23px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.tipe .judul {
  text-align: center;
  font: normal normal 600 24px/35px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.tipe .sub-judul {
  text-align: center;
  font: normal normal normal 15px/23px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}

.tipe .card-judul {
  text-align: center;
  font: normal normal medium 15px/23px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
  margin-top: 35px;
}

.card-content {
  position: relative;
  width: 222px;
  height: 275px;
  border-radius: 3px;
  padding: 25px 25px 10px 25px;
  cursor: pointer;
}
.checked {
  border-radius: 5px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.checked {
  border: solid 2px #000;
  visibility: hidden;
  z-index: 1;
}
input:checked ~ .checked {
  border-color: #00a6cf;
  visibility: visible;
}
input:checked ~ .checked-judul {
  color: #00a6cf; 
}
.visually-hidden {
  position: absolute;
  opacity: 0;
}
.card-wrapper {
  width: 222px;
  height: 275px;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 5px;
  opacity: 1;
}

.tipe .btn-sebelumnya {
  text-align: center;
  color: #00a6cf;
  width: 222px;
  height: 50px;
  border: 1px solid var(--unnamed-color-00a6cf);
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #00a6cf;
  border-radius: 5px;
  opacity: 1;
}

.tipe .btn-selanjutnya {
  width: 222px;
  height: 50px;
  background: var(--unnamed-color-00a6cf) 0% 0% no-repeat padding-box;
  background: #00a6cf 0% 0% no-repeat padding-box;
  border-radius: 5px;
  opacity: 1;
}

.tipe .resp {
  margin-left: 10%;
  margin-right: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* cerita */
.cerita .btn-tipe1 {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 100%;
  width: 24px;
  height: 24px;
  background: #00a6cf 0% 0% no-repeat padding-box;
}

.cerita .btn-tipe2 {
  font: normal normal 600 16px/25px Poppins;
  letter-spacing: 0px;
  color: #707070;
  opacity: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 100%;
  width: 24px;
  height: 24px;
  background: #e7e7ee 0% 0% no-repeat padding-box;
}

.cerita .judul-btn {
  text-align: center;
  font: normal normal medium 15px/23px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.cerita .judul {
  text-align: center;
  font: normal normal 600 24px/35px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.cerita .sub-judul {
  text-align: center;
  font: normal normal normal 15px/23px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}

.cerita .sub-judul1 {
  text-align: left;
  font: normal normal 600 24px/35px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.cerita .sub-judul2 {
  text-align: left;
  font: normal normal normal 15px/23px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}

.cerita .desc {
  width: 100%;
  border: none;
  opacity: 1;
}

.cerita .garis {
  margin-top: -1px;
  margin-left: 0%;
  width: 100%;
  height: 0px;
  border: 1px solid #707070;
  opacity: 1;
}

.cerita .btn-sebelumnya {
  text-align: center;
  color: #00a6cf;
  width: 222px;
  height: 50px;
  border: 1px solid var(--unnamed-color-00a6cf);
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #00a6cf;
  border-radius: 5px;
  opacity: 1;
}

.cerita .btn-selanjutnya {
  width: 222px;
  height: 50px;
  background: var(--unnamed-color-00a6cf) 0% 0% no-repeat padding-box;
  background: #00a6cf 0% 0% no-repeat padding-box;
  border-radius: 5px;
  opacity: 1;
}

.cerita .resp {
  margin-left: 10%;
  margin-right: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* anggaran */
.anggaran .btn-tipe1 {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 100%;
  width: 24px;
  height: 24px;
  background: #00a6cf 0% 0% no-repeat padding-box;
}

.anggaran .btn-tipe2 {
  font: normal normal 600 16px/25px Poppins;
  letter-spacing: 0px;
  color: #707070;
  opacity: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 100%;
  width: 24px;
  height: 24px;
  background: #e7e7ee 0% 0% no-repeat padding-box;
}

.anggaran .judul-btn {
  text-align: center;
  font: normal normal medium 15px/23px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.anggaran .judul {
  text-align: center;
  font: normal normal 600 24px/35px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.anggaran .sub-judul {
  text-align: center;
  font: normal normal normal 15px/23px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}

.anggaran .jumlah {
  text-align: center;
  font: normal normal 600 20px/30px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.anggaran .card {
  width: 100%;
  height: 80px;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 5px 10px #bad0f1;
  border-radius: 5px;
  opacity: 1;
}

.anggaran .label1 {
  text-align: right;
  margin-top: 28px;
  font: normal normal medium 20px/24px Roboto;
  letter-spacing: 0px;
  color: #707070;
}
.anggaran .label2 {
  text-align: left;
  margin-top: 28px;
  font: normal normal medium 20px/24px Roboto;
  letter-spacing: 0px;
  color: #707070;
}

.slidecontainer {
  margin-right: auto;
  margin-left: auto;
  /* margin-left: 10%; */
  width: 80%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  margin-top: 35px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #2e6ee6;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4caf50;
  cursor: pointer;
}

.anggaran .btn-sebelumnya {
  text-align: center;
  color: #00a6cf;
  width: 222px;
  height: 50px;
  border: 1px solid var(--unnamed-color-00a6cf);
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #00a6cf;
  border-radius: 5px;
  opacity: 1;
}

.anggaran .btn-selanjutnya {
  width: 222px;
  height: 50px;
  background: var(--unnamed-color-00a6cf) 0% 0% no-repeat padding-box;
  background: #00a6cf 0% 0% no-repeat padding-box;
  border-radius: 5px;
  opacity: 1;
}

.anggaran .resp {
  margin-left: 10%;
  margin-right: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* waktu */
.waktu .btn-tipe1 {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 100%;
  width: 24px;
  height: 24px;
  background: #00a6cf 0% 0% no-repeat padding-box;
}

.waktu .judul-btn {
  text-align: center;
  font: normal normal medium 15px/23px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.waktu .judul {
  text-align: center;
  font: normal normal 600 24px/35px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.waktu .sub-judul {
  text-align: center;
  font: normal normal normal 15px/23px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}

.waktu .tenggat {
  text-align: left;
  font: normal normal 600 24px/35px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.waktu .dd {
  width: 100%;
  border: transparent;
  text-align: left;
  font: normal normal normal 20px/30px Poppins;
  letter-spacing: 0px;
  color: #707070;
  opacity: 1;
}

.waktu .btn-sebelumnya {
  text-align: center;
  color: #00a6cf;
  width: 222px;
  height: 50px;
  border: 1px solid var(--unnamed-color-00a6cf);
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #00a6cf;
  border-radius: 5px;
  opacity: 1;
}

.waktu .btn-selanjutnya {
  width: 222px;
  height: 50px;
  background: var(--unnamed-color-00a6cf) 0% 0% no-repeat padding-box;
  background: #00a6cf 0% 0% no-repeat padding-box;
  border-radius: 5px;
  opacity: 1;
}

.waktu .resp {
  margin-left: 10%;
  margin-right: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* terimakasih */
.terimakasih .judul {
  text-align: center;
  font: normal normal 600 45px/68px Poppins;
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
}

.terimakasih .sub-judul {
  text-align: center;
  font: normal normal normal 15px/23px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}

.terimakasih .btn-beranda {
  width: 222px;
  height: 50px;
  background: var(--unnamed-color-00a6cf) 0% 0% no-repeat padding-box;
  background: #00a6cf 0% 0% no-repeat padding-box;
  border-radius: 5px;
  opacity: 1;
}

/* Responsive mobile form bangun aplikasimu */
@media only screen and (max-width: 576px) {
  /* .form1 .btn-tipe1,
  .btn-tipe2 {
    margin: 0 auto;
  }
  
  .form1 .nonaktif {
    display: none;
  } */
  /* BAGIAN AYO MULAI */
  .ayo-mulai .col-ayomulai {
    padding-left: 25px;
    padding-right: 25px;
  }
  .ayo-mulai .judul {
    text-align: left;
    font: normal normal 600 18px/30px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  
  .ayo-mulai .deskripsikan {
    text-align: left;
    font: normal normal normal 11px/25px Poppins;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }
  .ayo-mulai .nlengkap {
    width: auto;
    height: 21px;
    text-align: left;
    font: normal normal 600 12px/26px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  
  .ayo-mulai .email {
    width: auto;
    height: 21px;
    text-align: left;
    font: normal normal 600 12px/26px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    margin-top: 20px;
  }
  
  .ayo-mulai .input-nama {
    width: 100%;
    height: 40px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    opacity: 1;
    margin-top: -7px;
  }
  
  .ayo-mulai .input-email {
    width: 100%;
    height: 40px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    opacity: 1;
    margin-top: -7px;
  }
  
  .ayo-mulai .desc {
    width: auto;
    height: 21px;
    text-align: left;
    font: normal normal 600 12px/26px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    margin-top: 20px;
  }
  
  .ayo-mulai .input-desc {
    width: 100%;
    height: 150px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    opacity: 1;
    margin-top: -7px;
  }
  
  .ayo-mulai .btn-responsive {
    width: 100%;
    height: 40px;
    background: #00a6cf;
    font: Poppins;
    font-size: 12px;
    border-radius: 5px;
    opacity: 1;
  }
  /* END OF BAGIAN AYO MULAI */

  /* bagian tipe */
  .tipe .row-tipe {
    display: flex;
    flex-wrap: nowrap;
    padding-left: 40px;
    padding-right: 40px;
  }
  .tipe .row-tipe .judul-btn {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    font: Poppins;
    font-size: 12px;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .tipe .btn-tipe1 {
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    background: #00a6cf 0% 0% no-repeat padding-box;
    margin-right: auto;
    margin-left: auto;
  }
  
  .tipe .btn-tipe2 {
    margin-right: auto;
    margin-left: auto;
    font: normal normal 600 16px/25px Poppins;
    letter-spacing: 0px;
    color: #707070;
    opacity: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    background: #e7e7ee 0% 0% no-repeat padding-box;
  }
  
  .tipe .judul {
    text-align: center;
    font: normal normal 600 16px/25px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }

  .tipe .sub-judul {
    text-align: center;
    font: normal normal normal 11px/26px Poppins;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }
  .tipe .card-judul {
    text-align: center;
    font: normal normal 580 12px/18px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    margin-top: 15px;
  }
  .card-content {
    position: relative;
    width: 138px;
    height: 158px;
    border-radius: 3px;
    padding: 25px 25px 10px 25px;
    cursor: pointer;
  }
  .checked {
    border-radius: 5px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .checked {
    border: solid 2px #000;
    visibility: hidden;
    z-index: 1;
  }
  input:checked ~ .checked {
    border-color: #00a6cf;
    visibility: visible;
  }
  input:checked ~ .checked-judul {
    color: #00a6cf; 
  }
  .visually-hidden {
    position: absolute;
    opacity: 0;
  }
  .card-wrapper {
    width: 138px;
    height: 158px;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 5px;
    opacity: 1;
  }
  .card-wrapper .card-content .image img {
    width: 80px;
    height: 80px;
  }
  .tipe .btn-sebelumnya {
    text-align: center;
    color: #00a6cf;
    width: 100%;
    height: 40px;
    border: 1px solid var(--unnamed-color-00a6cf);
    background: #ffffff 0% 0% no-repeat padding-box;
    border: none;
    font: Poppins;
    font-size: 12px;
    border-radius: 5px;
    opacity: 1;
  }
  
  .tipe .btn-selanjutnya {
    width: 100%;
    height: 40px;
    background: #00a6cf 0% 0% no-repeat padding-box;
    font: Poppins;
    font-size: 12px;
    border-radius: 5px;
    opacity: 1;
  }
  .tipe .row-tombol-next {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 50px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 35px;
    padding-right: 35px;
  }
  .tipe .resp {
    margin-left: 0;
    margin-right: 0;
    display: block;
    align-items: center;
    justify-content: center;
  }
/* END OF BAGIAN TIPE */

  /* bagian cerita */
  .cerita .row-cerita {
    display: flex;
    flex-wrap: nowrap;
    padding-left: 40px;
    padding-right: 40px;
  }
  .cerita .btn-tipe1 {
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    background: #00a6cf 0% 0% no-repeat padding-box;
    margin-right: auto;
    margin-left: auto;
  }
  
  .cerita .btn-tipe2 {
    margin-right: auto;
    margin-left: auto;
    font: normal normal 600 16px/25px Poppins;
    letter-spacing: 0px;
    color: #707070;
    opacity: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    background: #e7e7ee 0% 0% no-repeat padding-box;
  }
  .cerita .row-cerita .judul-btn {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    font: Poppins;
    font-size: 12px;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .cerita .row-head-cerita {
    padding-left: 22px;
    padding-right: 22px;
  }
  .cerita .judul {
    text-align: center;
    font: normal normal 600 16px/25px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  
  .cerita .sub-judul {
    text-align: center;
    font: normal normal normal 11px/26px Poppins;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }
  .cerita .desc {
    width: 100%;
    height: 150px;
    border: none;
    opacity: 1;
  }
  .cerita .btn-sebelumnya {
    text-align: center;
    color: #00a6cf;
    width: 100%;
    height: 40px;
    border: 1px solid var(--unnamed-color-00a6cf);
    background: #ffffff 0% 0% no-repeat padding-box;
    border: none;
    font: Poppins;
    font-size: 12px;
    border-radius: 5px;
    opacity: 1;
  }
  
  .cerita .btn-selanjutnya {
    width: 100%;
    height: 40px;
    background: #00a6cf 0% 0% no-repeat padding-box;
    font: Poppins;
    font-size: 12px;
    border-radius: 5px;
    opacity: 1;
  }
  .cerita .row-tombol-next {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 50px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 35px;
    padding-right: 35px;
  }
  .cerita .resp {
    margin-left: 0;
    margin-right: 0;
    display: block;
    align-items: center;
    justify-content: center;
  }
  /* END OF BAGIAN CERITA */

  /* bagian anggaran */
  .anggaran .row-anggaran {
    display: flex;
    flex-wrap: nowrap;
    padding-left: 40px;
    padding-right: 40px;
  }
  .anggaran .btn-tipe1 {
    margin-right: auto;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    background: #00a6cf 0% 0% no-repeat padding-box;
  }
  
  .anggaran .btn-tipe2 {
    margin-right: auto;
    margin-left: auto;
    font: normal normal 600 16px/25px Poppins;
    letter-spacing: 0px;
    color: #707070;
    opacity: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    background: #e7e7ee 0% 0% no-repeat padding-box;
  }
  
  .anggaran .judul-btn {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    font: Poppins;
    font-size: 12px;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .anggaran .judul {
    text-align: center;
    font: normal normal 600 16px/25px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .anggaran .sub-judul {
    text-align: center;
    font: normal normal normal 11px/26px Poppins;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
    padding-left: 25px;
    padding-right: 25px;
  }
  .anggaran .row-slider {
    padding-left: 25px;
    padding-right: 25px;
  }
  .anggaran .jumlah {
    text-align: center;
    font: normal normal 600 14px/21px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  
  .anggaran .card {
    width: 100%;
    height: 44px;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 5px 10px #bad0f1;
    border-radius: 5px;
    opacity: 1;
  }
  
  .anggaran .label1 {
    text-align: right;
    font: normal normal medium 14px/21px Roboto;
    letter-spacing: 0px;
    color: #707070;
    margin-top: 9px;
  }
  .anggaran .label2 {
    text-align: left;
    font: normal normal medium 14px/21px Roboto;
    letter-spacing: 0px;
    color: #707070;
    margin-top: 9px;
  }
  
  .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    margin-top: 20px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: 0.2s;
    transition: opacity 0.2s;
  }
  .anggaran .btn-sebelumnya {
    text-align: center;
    color: #00a6cf;
    width: 100%;
    height: 40px;
    border: 1px solid var(--unnamed-color-00a6cf);
    background: #ffffff 0% 0% no-repeat padding-box;
    border: none;
    font: Poppins;
    font-size: 12px;
    font-weight: 580;
    border-radius: 5px;
    opacity: 1;
  }
  
  .anggaran .btn-selanjutnya {
    width: 100%;
    height: 40px;
    background: #00a6cf 0% 0% no-repeat padding-box;
    font: Poppins;
    font-size: 12px;
    font-weight: 580;
    border-radius: 5px;
    opacity: 1;
  }
  .anggaran .row-tombol-next {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 35px;
    padding-right: 35px;
  }
  .anggaran .resp {
    margin-left: 0;
    margin-right: 0;
    display: block;
    align-items: center;
    justify-content: center;
  }
  /* END OF BAGIAN ANGGARAN */

  /* bagian waktu */
  .waktu .row-waktu {
    display: flex;
    flex-wrap: nowrap;
    padding-left: 40px;
    padding-right: 40px;
  }
  .waktu .btn-tipe1 {
    margin-right: auto;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    background: #00a6cf 0% 0% no-repeat padding-box;
  }
  
  .waktu .judul-btn {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font: Poppins;
    font-size: 12px;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .waktu .judul {
    text-align: center;
    font: normal normal 600 16px/25px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .waktu .sub-judul {
    text-align: center;
    font: normal normal normal 11px/26px Poppins;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
    padding-left: 30px;
    padding-right: 30px;
  }
  .waktu .row-tenggat {
    padding-left: 25px;
    padding-right: 25px;
  }
  .waktu .tenggat {
    text-align: left;
    font: normal normal 600 12px/26px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  
  .waktu .dd {
    width: 100%;
    border: transparent;
    text-align: left;
    font: normal normal normal 12px/64px Poppins;
    letter-spacing: 0px;
    color: #707070;
    opacity: 1;
  }
  .waktu .btn-sebelumnya {
    text-align: center;
    color: #00a6cf;
    width: 100%;
    height: 40px;
    border: 1px solid var(--unnamed-color-00a6cf);
    background: #ffffff 0% 0% no-repeat padding-box;
    border: none;
    font: Poppins;
    font-size: 12px;
    font-weight: 580;
    border-radius: 5px;
    opacity: 1;
  }
  
  .waktu .btn-selanjutnya {
    width: 100%;
    height: 40px;
    background: #00a6cf 0% 0% no-repeat padding-box;
    font: Poppins;
    font-size: 12px;
    font-weight: 580;
    border-radius: 5px;
    opacity: 1;
  }
  .waktu .row-tombol-next {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 35px;
    padding-right: 35px;
  }
  .waktu .resp {
    margin-left: 0;
    margin-right: 0;
    display: block;
    align-items: center;
    justify-content: center;
  }
  /* END OF BAGIAN WAKTU */
}

@media only screen and (min-width: 900px) and (max-width: 950px) {
  /* BAGIAN AYO MULAI */
  .ayo-mulai .col-ayomulai {
    padding-left: 0;
    padding-right: 0;
  }
  .ayo-mulai .judul {
    text-align: left;
    font: normal normal 600 40px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .ayo-mulai .row-inputname {
    display: flex;
    flex-direction: column;
  }
  .ayo-mulai .deskripsikan {
    text-align: left;
    font: normal normal normal 15px/30px Poppins;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }
  .ayo-mulai .nlengkap {
    width: auto;
    height: 21px;
    margin-top: 20px;
    text-align: left;
    /* font: normal normal 600 12px/26px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  
  .ayo-mulai .email {
    width: auto;
    height: 21px;
    text-align: left;
    /* font: normal normal 600 12px/26px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    margin-top: 20px;
  }
  
  .ayo-mulai .input-nama {
    width: 700px;
    height: 50px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    opacity: 1;
  }
  
  .ayo-mulai .input-email {
    width: 700px;
    height: 50px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    opacity: 1;
  }
  
  .ayo-mulai .desc {
    width: auto;
    height: 21px;
    text-align: left;
    /* font: normal normal 600 12px/26px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    margin-top: 20px;
  }
  
  .ayo-mulai .input-desc {
    width: 100%;
    max-width: 700px !important;
    height: 150px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    opacity: 1;
  }
  .ayo-mulai .btn-responsive {
    height: 50px;
    background: #00a6cf;
    border-radius: 5px;
    opacity: 1;
    margin-right: -110px;
  }
  /* END OF BAGIAN AYO MULAI */

  /* bagian tipe */
  .tipe .judul {
    text-align: center;
    font: normal normal 600 28px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    padding-left: 30px;
    padding-right: 30px;
  }

  .tipe .sub-judul {
    text-align: center;
    /* font: normal normal normal 11px/26px Poppins; */
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
    padding-left: 30px;
    padding-right: 30px;
  }
  .tipe .card-judul {
    text-align: center;
    /* font: normal normal 580 12px/18px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    margin-top: 8px;
  }
  .card-content {
    position: relative;
    width: 208px;
    height: 228px;
    border-radius: 3px;
    padding: 25px 25px 10px 25px;
    cursor: pointer;
  }
  .checked {
    border-radius: 5px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .checked {
    border: solid 2px #000;
    visibility: hidden;
    z-index: 1;
  }
  input:checked ~ .checked {
    border-color: #00a6cf;
    visibility: visible;
  }
  input:checked ~ .checked-judul {
    color: #00a6cf; 
  }
  .visually-hidden {
    position: absolute;
    opacity: 0;
  }
  .card-wrapper {
    width: 208px;
    height: 228px;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 5px;
    opacity: 1;
  }
  .card-wrapper .card-content .image img {
    width: 170px;
    height: 170px;
  }
  .tipe .btn-sebelumnya {
    text-align: center;
    color: #00a6cf;
    width: 250px;
    height: 50px;
    border: 1px solid var(--unnamed-color-00a6cf);
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #00a6cf;
    font: Poppins;
    font-size: 14px;
    border-radius: 5px;
    opacity: 1;
  }
  
  .tipe .btn-selanjutnya {
    width: 250px;
    height: 50px;
    background: #00a6cf 0% 0% no-repeat padding-box;
    border-radius: 5px;
    opacity: 1;
  }
  .tipe .row-tombol-next {
    margin-top: 50px;
  }
  
/* END OF BAGIAN TIPE */

  /* bagian cerita */
  .cerita .row-head-cerita {
    padding-left: 30px;
    padding-right: 30px;
  }
  .cerita .judul {
    text-align: center;
    /* font: normal normal 600 16px/25px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  
  .cerita .sub-judul {
    text-align: center;
    /* font: normal normal normal 11px/26px Poppins; */
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }
  .cerita .desc {
    width: 100%;
    height: 150px;
    border: none;
    opacity: 1;
  }
  .cerita .btn-sebelumnya {
    text-align: center;
    color: #00a6cf;
    width: 250px;
    height: 50px;
    border: 1px solid var(--unnamed-color-00a6cf);
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #00a6cf;
    border-radius: 5px;
    opacity: 1;
  }
  
  .cerita .btn-selanjutnya {
    width: 250px;
    height: 50px;
    background: #00a6cf 0% 0% no-repeat padding-box;
    border-radius: 5px;
    opacity: 1;
  }
  .cerita .row-tombol-next {
    margin-top: 50px;
  }
  /* END OF BAGIAN CERITA */

  /* bagian anggaran */
  .anggaran .judul {
    text-align: center;
    /* font: normal normal 600 16px/25px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .anggaran .sub-judul {
    text-align: center;
    /* font: normal normal normal 11px/26px Poppins; */
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  
  .anggaran .card {
    width: 500px;
    /* height: 44px; */
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 5px 10px #bad0f1;
    border-radius: 5px;
    opacity: 1;
    margin-left: -120px;
  }
  .anggaran .btn-sebelumnya {
    text-align: center;
    color: #00a6cf;
    width: 250px;
    height: 50px;
    border: 1px solid var(--unnamed-color-00a6cf);
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #00a6cf;
    border-radius: 5px;
    opacity: 1;
  }
  
  .anggaran .btn-selanjutnya {
    width: 250px;
    height: 50px;
    background: #00a6cf 0% 0% no-repeat padding-box;
    border-radius: 5px;
    opacity: 1;
  }
  .anggaran .row-tombol-next {
    margin-top: 50px;
  }
  /* END OF BAGIAN ANGGARAN */

  /* bagian waktu */
  .waktu .judul {
    text-align: center;
    /* font: normal normal 600 16px/25px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .waktu .sub-judul {
    text-align: center;
    /* font: normal normal normal 11px/26px Poppins; */
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
    padding-left: 30px;
    padding-right: 30px;
  }
  .waktu .row-tenggat {
    padding-left: 80px;
    padding-right: 80px;
  }
  .waktu .tenggat {
    text-align: left;
    font: normal normal 600 20px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .waktu .btn-sebelumnya {
    text-align: center;
    color: #00a6cf;
    width: 250px;
    height: 50px;
    border: 1px solid var(--unnamed-color-00a6cf);
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #00a6cf;
    border-radius: 5px;
    opacity: 1;
  }
  
  .waktu .btn-selanjutnya {
    width: 250px;
    height: 50px;
    background: #00a6cf 0% 0% no-repeat padding-box;
    border-radius: 5px;
    opacity: 1;
  }
  .waktu .row-tombol-next {
    margin-top: 50px;
  }
  /* END OF BAGIAN WAKTU */
}

/* Responsive Ipad pro */
@media only screen and (min-width: 1000px) and (max-width: 1050px) {
  /* BAGIAN AYO MULAI */
  .ayo-mulai .col-ayomulai {
    padding-left: 0;
    padding-right: 0;
  }
  .ayo-mulai .judul {
    text-align: left;
    font: normal normal 600 40px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .ayo-mulai .row-inputname {
    display: flex;
    flex-direction: column;
  }
  .ayo-mulai .deskripsikan {
    text-align: left;
    font: normal normal normal 15px/30px Poppins;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }
  .ayo-mulai .nlengkap {
    width: auto;
    height: 21px;
    margin-top: 20px;
    text-align: left;
    /* font: normal normal 600 12px/26px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  
  .ayo-mulai .email {
    width: auto;
    height: 21px;
    text-align: left;
    /* font: normal normal 600 12px/26px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    margin-top: 20px;
  }
  
  .ayo-mulai .input-nama {
    width: 700px;
    height: 50px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    opacity: 1;
  }
  
  .ayo-mulai .input-email {
    width: 700px;
    height: 50px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    opacity: 1;
  }
  
  .ayo-mulai .desc {
    width: auto;
    height: 21px;
    text-align: left;
    /* font: normal normal 600 12px/26px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    margin-top: 20px;
  }
  
  .ayo-mulai .input-desc {
    width: 100%;
    max-width: 700px !important;
    height: 150px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    opacity: 1;
  }
  .ayo-mulai .btn-responsive {
    height: 50px;
    background: #00a6cf;
    border-radius: 5px;
    opacity: 1;
    margin-right: -110px;
  }
  /* END OF BAGIAN AYO MULAI */

  /* bagian tipe */
  .tipe .judul {
    text-align: center;
    font: normal normal 600 28px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    padding-left: 30px;
    padding-right: 30px;
  }

  .tipe .sub-judul {
    text-align: center;
    /* font: normal normal normal 11px/26px Poppins; */
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
    padding-left: 30px;
    padding-right: 30px;
  }
  .tipe .card-judul {
    text-align: center;
    /* font: normal normal 580 12px/18px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    margin-top: 8px;
  }
  .card-content {
    position: relative;
    width: 228px;
    height: 248px;
    border-radius: 3px;
    padding: 25px 25px 10px 25px;
    cursor: pointer;
  }
  .checked {
    border-radius: 5px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .checked {
    border: solid 2px #000;
    visibility: hidden;
    z-index: 1;
  }
  input:checked ~ .checked {
    border-color: #00a6cf;
    visibility: visible;
  }
  input:checked ~ .checked-judul {
    color: #00a6cf; 
  }
  .visually-hidden {
    position: absolute;
    opacity: 0;
  }
  .card-wrapper {
    width: 228px;
    height: 248px;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 5px;
    opacity: 1;
  }
  .card-wrapper .card-content .image img {
    width: 170px;
    height: 170px;
  }
  .tipe .btn-sebelumnya {
    text-align: center;
    color: #00a6cf;
    width: 250px;
    height: 50px;
    border: 1px solid var(--unnamed-color-00a6cf);
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #00a6cf;
    border-radius: 5px;
    opacity: 1;
  }
  
  .tipe .btn-selanjutnya {
    width: 250px;
    height: 50px;
    background: #00a6cf 0% 0% no-repeat padding-box;
    border-radius: 5px;
    opacity: 1;
  }
  .tipe .row-tombol-next {
    margin-top: 50px;
  }
/* END OF BAGIAN TIPE */

  /* bagian cerita */
  .cerita .row-head-cerita {
    padding-left: 30px;
    padding-right: 30px;
  }
  .cerita .judul {
    text-align: center;
    /* font: normal normal 600 16px/25px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  
  .cerita .sub-judul {
    text-align: center;
    /* font: normal normal normal 11px/26px Poppins; */
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }
  .cerita .desc {
    width: 100%;
    height: 150px;
    border: none;
    opacity: 1;
  }
  .cerita .btn-sebelumnya {
    text-align: center;
    color: #00a6cf;
    width: 250px;
    height: 50px;
    border: 1px solid var(--unnamed-color-00a6cf);
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #00a6cf;
    border-radius: 5px;
    opacity: 1;
  }
  
  .cerita .btn-selanjutnya {
    width: 250px;
    height: 50px;
    background: #00a6cf 0% 0% no-repeat padding-box;
    border-radius: 5px;
    opacity: 1;
  }
  .cerita .row-tombol-next {
    margin-top: 50px;
  }
  /* END OF BAGIAN CERITA */

  /* bagian anggaran */
  .anggaran .judul {
    text-align: center;
    /* font: normal normal 600 16px/25px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .anggaran .sub-judul {
    text-align: center;
    /* font: normal normal normal 11px/26px Poppins; */
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  
  .anggaran .card {
    width: 500px;
    /* height: 44px; */
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 5px 10px #bad0f1;
    border-radius: 5px;
    opacity: 1;
    margin-left: -70px;
  }
  .anggaran .btn-sebelumnya {
    text-align: center;
    color: #00a6cf;
    width: 250px;
    height: 50px;
    border: 1px solid var(--unnamed-color-00a6cf);
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #00a6cf;
    border-radius: 5px;
    opacity: 1;
  }
  
  .anggaran .btn-selanjutnya {
    width: 250px;
    height: 50px;
    background: #00a6cf 0% 0% no-repeat padding-box;
    border-radius: 5px;
    opacity: 1;
  }
  .anggaran .row-tombol-next {
    margin-top: 50px;
  }
  /* END OF BAGIAN ANGGARAN */

  /* bagian waktu */
  .waktu .judul {
    text-align: center;
    /* font: normal normal 600 16px/25px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .waktu .sub-judul {
    text-align: center;
    /* font: normal normal normal 11px/26px Poppins; */
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
    padding-left: 30px;
    padding-right: 30px;
  }
  .waktu .row-tenggat {
    padding-left: 80px;
    padding-right: 80px;
  }
  .waktu .tenggat {
    text-align: left;
    font: normal normal 600 20px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .waktu .btn-sebelumnya {
    text-align: center;
    color: #00a6cf;
    width: 250px;
    height: 50px;
    border: 1px solid var(--unnamed-color-00a6cf);
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #00a6cf;
    border-radius: 5px;
    opacity: 1;
  }
  
  .waktu .btn-selanjutnya {
    width: 250px;
    height: 50px;
    background: #00a6cf 0% 0% no-repeat padding-box;
    border-radius: 5px;
    opacity: 1;
  }
  .waktu .row-tombol-next {
    margin-top: 50px;
  }
  /* END OF BAGIAN WAKTU */
}
/* Responsive Ipad */
@media only screen and (min-width: 768px) and (max-width: 800px) {
  /* BAGIAN AYO MULAI */
  .ayo-mulai .col-ayomulai {
    padding-left: 25px;
    padding-right: 25px;
  }
  .ayo-mulai .judul {
    text-align: left;
    font: normal normal 600 30px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .ayo-mulai .row-inputname {
    display: flex;
    flex-direction: column;
  }
  .ayo-mulai .deskripsikan {
    text-align: left;
    font: normal normal normal 13px/30px Poppins;
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }
  .ayo-mulai .nlengkap {
    width: auto;
    height: 21px;
    text-align: left;
    /* font: normal normal 600 12px/26px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  
  .ayo-mulai .email {
    width: auto;
    height: 21px;
    text-align: left;
    /* font: normal normal 600 12px/26px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    margin-top: 20px;
  }
  
  .ayo-mulai .input-nama {
    width: 558px;
    height: 50px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    opacity: 1;
  }
  
  .ayo-mulai .input-email {
    width: 558px;
    height: 50px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    opacity: 1;
  }
  
  .ayo-mulai .desc {
    width: auto;
    height: 21px;
    text-align: left;
    /* font: normal normal 600 12px/26px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    margin-top: 20px;
  }
  
  .ayo-mulai .input-desc {
    width: 100%;
    height: 150px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    opacity: 1;
  }
  .ayo-mulai .btn-responsive {
    height: 50px;
    background: #00a6cf;
    border-radius: 5px;
    opacity: 1;
    margin-right: -10px;
  }
  /* END OF BAGIAN AYO MULAI */
  /* bagian tipe */
  .tipe .judul {
    text-align: center;
    font: normal normal 600 28px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    padding-left: 30px;
    padding-right: 30px;
  }

  .tipe .sub-judul {
    text-align: center;
    /* font: normal normal normal 11px/26px Poppins; */
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
    padding-left: 30px;
    padding-right: 30px;
  }
  .tipe .card-judul {
    text-align: center;
    /* font: normal normal 580 12px/18px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    margin-top: 8px;
  }
  .card-content {
    position: relative;
    width: 178px;
    height: 198px;
    border-radius: 3px;
    padding: 25px 25px 10px 25px;
    cursor: pointer;
  }
  .checked {
    border-radius: 5px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .checked {
    border: solid 2px #000;
    visibility: hidden;
    z-index: 1;
  }
  input:checked ~ .checked {
    border-color: #00a6cf;
    visibility: visible;
  }
  input:checked ~ .checked-judul {
    color: #00a6cf; 
  }
  .visually-hidden {
    position: absolute;
    opacity: 0;
  }
  .card-wrapper {
    width: 178px;
    height: 198px;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 5px;
    opacity: 1;
  }
  .card-wrapper .card-content .image img {
    width: 120px;
    height: 120px;
  }
  .tipe .btn-sebelumnya {
    text-align: center;
    color: #00a6cf;
    width: 100%;
    height: 40px;
    border: 1px solid var(--unnamed-color-00a6cf);
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #00a6cf;
    font: Poppins;
    font-size: 12px;
    border-radius: 5px;
    opacity: 1;
  }
  
  .tipe .btn-selanjutnya {
    width: 100%;
    height: 40px;
    background: #00a6cf 0% 0% no-repeat padding-box;
    font: Poppins;
    font-size: 12px;
    border-radius: 5px;
    opacity: 1;
  }
  .tipe .row-tombol-next {
    margin-top: 50px;
  }
/* END OF BAGIAN TIPE */

  /* bagian cerita */
  .cerita .row-head-cerita {
    padding-left: 30px;
    padding-right: 30px;
  }
  .cerita .judul {
    text-align: center;
    /* font: normal normal 600 16px/25px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  
  .cerita .sub-judul {
    text-align: center;
    /* font: normal normal normal 11px/26px Poppins; */
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
  }
  .cerita .desc {
    width: 100%;
    height: 150px;
    border: none;
    opacity: 1;
  }
  .cerita .btn-sebelumnya {
    text-align: center;
    color: #00a6cf;
    width: 100%;
    height: 40px;
    border: 1px solid var(--unnamed-color-00a6cf);
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #00a6cf;
    font: Poppins;
    font-size: 12px;
    border-radius: 5px;
    opacity: 1;
  }
  
  .cerita .btn-selanjutnya {
    width: 100%;
    height: 40px;
    background: #00a6cf 0% 0% no-repeat padding-box;
    font: Poppins;
    font-size: 12px;
    border-radius: 5px;
    opacity: 1;
  }
  .cerita .row-tombol-next {
    margin-top: 50px;
  }
  /* END OF BAGIAN CERITA */

  /* bagian anggaran */
  .anggaran .judul {
    text-align: center;
    /* font: normal normal 600 16px/25px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .anggaran .sub-judul {
    text-align: center;
    /* font: normal normal normal 11px/26px Poppins; */
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  
  .anggaran .card {
    width: 400px;
    /* height: 44px; */
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 5px 10px #bad0f1;
    border-radius: 5px;
    opacity: 1;
    margin-left: -60px;
  }
  .anggaran .btn-sebelumnya {
    text-align: center;
    color: #00a6cf;
    width: 100%;
    height: 40px;
    border: 1px solid var(--unnamed-color-00a6cf);
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #00a6cf;
    font: Poppins;
    font-size: 12px;
    border-radius: 5px;
    opacity: 1;
  }
  
  .anggaran .btn-selanjutnya {
    width: 100%;
    height: 40px;
    background: #00a6cf 0% 0% no-repeat padding-box;
    font: Poppins;
    font-size: 12px;
    border-radius: 5px;
    opacity: 1;
  }
  .anggaran .row-tombol-next {
    margin-top: 50px;
  }
  /* END OF BAGIAN ANGGARAN */

  /* bagian waktu */
  .waktu .judul {
    text-align: center;
    /* font: normal normal 600 16px/25px Poppins; */
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .waktu .sub-judul {
    text-align: center;
    /* font: normal normal normal 11px/26px Poppins; */
    letter-spacing: 0px;
    color: #666366;
    opacity: 1;
    padding-left: 30px;
    padding-right: 30px;
  }
  .waktu .row-tenggat {
    padding-left: 80px;
    padding-right: 80px;
  }
  .waktu .tenggat {
    text-align: left;
    font: normal normal 600 20px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
  .waktu .btn-sebelumnya {
    text-align: center;
    color: #00a6cf;
    width: 100%;
    height: 40px;
    border: 1px solid var(--unnamed-color-00a6cf);
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #00a6cf;
    font: Poppins;
    font-size: 12px;
    border-radius: 5px;
    opacity: 1;
  }
  
  .waktu .btn-selanjutnya {
    width: 100%;
    height: 40px;
    background: #00a6cf 0% 0% no-repeat padding-box;
    font: Poppins;
    font-size: 12px;
    border-radius: 5px;
    opacity: 1;
  }
  .waktu .row-tombol-next {
    margin-top: 50px;
  }
  /* END OF BAGIAN WAKTU */

}
/*--------------------------------------------------------------
# Nav tentang kami
--------------------------------------------------------------*/
/* atas */
.atas .judul {
  margin-top: 72px;
  text-align: center;
  font: normal normal 600 45px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.atas .sub-judul {
  text-align: center;
  font: normal normal normal 15px/30px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}

.atas .img {
  margin-top: 30px;
  width: 100%;
  height: 100%;
}

/* siapa kita  */
.siapa-kita .box {
  width: 413px;
}
.siapa-kita .judul {
  margin-top: 72px;
  text-align: left;
  font: normal normal 600 45px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.siapa-kita .desc1 {
  text-align: left;
  margin-top: 50px;
  font: normal normal normal 15px/30px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}

.siapa-kita .judul2 {
  margin-top: 148px;
  text-align: left;
  font: normal normal 600 15px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.siapa-kita .check {
  margin-top: -15px;
  margin-left: 15px;
  text-align: center;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background-color: rgba(0, 166, 207, 0.1);
}
.siapa-kita .fa-check {
  color: #00a6cf;
  opacity: 1;
}
.siapa-kita .list {
  margin-top: -18px;
  margin-left: 10px;
  font-weight: bolder;
  text-align: left;
  font: normal normal normal 15px/30px Poppins;
  letter-spacing: 0px;
  color: #8f8f8f;
  opacity: 1;
}

.siapa-kita .pt {
  padding-top: 8px;
}

.siapa-kita .makeup-tentang1 {
  position: absolute;
  left: 0;
}
.siapa-kita .makeup-tentang2 {
  position: absolute;
  right: 0;
  z-index: -1;
  margin-top: -350px;
}
.siapa-kita .makeup-tentang3 {
  position: absolute;
  right: 50px;
  margin-top: -20px;
}
@media only screen and (width: 320px) {
  .siapa-kita .makeup-tentang2 {
    position: absolute;
    height: 490px;
    right: 0;
    z-index: -1;
    margin-top: -450px;
  }
  .siapa-kita .judul {
    margin-top: 72px;
    text-align: left;
    font: normal normal 600 39px/64px Poppins;
    letter-spacing: 0px;
    color: #2c2c2c;
    opacity: 1;
  }
}
/* budaya kami */
.budaya-kami .judul {
  margin-top: 72px;
  text-align: left;
  font: normal normal 600 45px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.budaya-kami .inovatif {
  margin-top: 40px;
  width: 505px;
  height: 722px;
  background: #eaf5fa 0% 0% no-repeat padding-box;
  border-radius: 36px;
  opacity: 1;
  position: relative;
}

.budaya-kami .card-judul1 {
  margin-left: 40px;
  color: var(--unnamed-color-00a6cf);
  text-align: left;
  font: normal normal 600 36px/55px Poppins;
  letter-spacing: 0px;
  color: #00a6cf;
  opacity: 1;
}

.budaya-kami .sub-judul1 {
  margin-left: 40px;
  margin-right: 40px;
  color: var(--unnamed-color-0c2a50);
  text-align: left;
  font: normal normal normal 20px/30px Poppins;
  letter-spacing: 0px;
  color: #0c2a50;
  opacity: 1;
}

.budaya-kami .sharing {
  margin-top: 60px;
  width: 505px;
  height: 526px;
  background: #fff1eb 0% 0% no-repeat padding-box;
  border-radius: 40px;
  opacity: 1;
  position: relative;
}

.budaya-kami .card-judul2 {
  margin-left: 40px;
  color: var(--unnamed-color-fe7f46);
  text-align: left;
  font: normal normal 600 36px/55px Poppins;
  letter-spacing: 0px;
  color: #fe7f46;
  opacity: 1;
}

.budaya-kami .sub-judul2 {
  margin-left: 40px;
  margin-right: 40px;
  color: var(--unnamed-color-0c2a50);
  text-align: left;
  font: normal normal normal 20px/30px Poppins;
  letter-spacing: 0px;
  color: #0c2a50;
  opacity: 1;
}

.budaya-kami .aktif {
  margin-top: 40px;
  width: 505px;
  height: 583px;
  background: #fff1eb 0% 0% no-repeat padding-box;
  border-radius: 40px;
  opacity: 1;
  position: relative;
}

.budaya-kami .mengajar {
  margin-top: -90px;
  width: 505px;
  height: 680px;
  background: #eaf5fa 0% 0% no-repeat padding-box;
  border-radius: 40px;
  opacity: 1;
  position: relative;
}

.budaya-kami .detailbudaya {
  margin-right: 90px;
}

.budaya-kami .penasaran {
  margin-top: 20px;
  text-align: right;
  font: normal normal 600 25px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.budaya-kami .yuk {
  margin-top: -30px;
  color: var(--unnamed-color-00a6cf);
  text-align: right;
  text-decoration: underline;
  font: normal normal normal 15px/64px Poppins;
  letter-spacing: 0px;
  color: #00a6cf;
  opacity: 1;
  margin-right: 115px;
}

.budaya-kami .img1 {
  width: 100%;
  position: absolute;
  max-height: 80%;
  bottom: 0px;
}

.budaya-kami .img2 {
  margin-left: 10%;
  width: 90%;
  height: 60%;
}

.budaya-kami .img3 {
  width: 100%;
  height: 70%;
}

.budaya-kami .img4 {
  margin-top: -50px;
  width: 100%;
  height: 80%;
}

.budaya-kami .detailbudaya .yuk {
  text-align: right;
  text-decoration: none;
}
.budaya-kami .detailbudaya .yuk:hover {
  text-decoration: none;
}
.budaya-kami .detailbudaya .yuk a:hover {
  text-decoration: none;
}

.budaya-kami .detailbudaya .yuk a {
  position: relative;
  font: normal normal normal 15px/64px Poppins;
  letter-spacing: 0px;
  color: #00a6cf;
}
.budaya-kami .detailbudaya .yuk a:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -3px;
  right: 0;
  /* right: 0; */
  background-color: #00a6cf;
  /* visibility: hidden; */
  /* width: 300px; */
  transition: all 0.3s ease-in-out 0s;
}
.budaya-kami .detailbudaya .yuk a:hover:after {
  /* visibility: visible; */
  width: 0%;
  background: transparent;
  transition: all 0.3s ease-in-out 0s;
}

.budaya-kami .detailbudaya .yuk i {
  margin-left: -20px;
  opacity: 0;
  transition: all 0.3s linear;
}

.budaya-kami .detailbudaya .yuk a:hover i {
  opacity: 1;
  transform: translateX(28px);
}

.budaya-kami .makeup-tentang4 {
  position: absolute;
  left: 0;
  margin-top: 200px;
}

/* anggota tim */
#anggota-tim {
  height: auto;
  /* background: #f8f8f8 0% 0% no-repeat padding-box; */
  opacity: 1;
}

.anggota-tim .col-card {
  display: flex;
  align-items: stretch;
  justify-content: left;
}

.anggota-tim .judul {
  margin-top: 72px;
  text-align: left;
  font: normal normal 600 45px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.anggota-tim .card {
  width: 260px;
  height: 370px;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 5px;
  opacity: 1;
  border: none;
  margin: 0 auto;
}

.anggota-tim .card-title {
  text-align: left;
  font: normal normal 600 20px/30px Poppins;
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
}

.anggota-tim .card-text {
  text-align: left;
  font: normal normal normal 15px/23px Poppins;
  letter-spacing: 0.75px;
  color: #000000;
  opacity: 1;
}
.anggota-tim .makeup-tentang5 {
  position: absolute;
  z-index: -1;
  left: 0;
  width: 88%;
  height: 689px;
}
.anggota-tim .makeup-tentang6 {
  position: absolute;
  margin-top: 1.5%;
  left: 2%;
  z-index: -1;
}
.anggota-tim .makeup-tentang7 {
  position: absolute;
  right: 4%;
  z-index: -1;
  width: 17%;
  margin-top: -8%;
}

/* bawah */
.bawah {
  background: none;
  width: 100%;
}

/* .bawah .img {
  height: 398px;
  width: 100%;
  background: transparent url("../img/Beranda/Banner-bawah.png");
  margin-top: auto;
  margin-bottom: auto;
} */
.banner-gabung {
  height: 398px;
  width: 100%;
  background: transparent url("../themes/big-theme/assets/img/Beranda/bg-banner-lihat karir.png");
  background-size: cover;
}
.banner-gabung .kalimat-1 {
  text-align: center;
  font: normal normal 600 45px/64px Poppins;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
  margin-top: 89px;
}
.banner-gabung .kalimat-2 {
  text-align: center;
  font: normal normal normal 15px/26px Poppins;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
  margin-top: 20px;
}
.banner-gabung .kalimat-3 {
  text-align: center;
  font: normal normal normal 15px/26px Poppins;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
}
.banner-gabung .btn-banner-gabung {
  width: 141px;
  height: 50px;
  background: #02a4d2;
  text-align: center;
  font: normal normal 500 16px/25px Poppins;
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 1;
  padding-top: 12px;
  box-shadow: 0px 3px 6px #00000059;
  border-radius: 5px;
  display: block;
  margin: 0 auto;
}
@media only screen and (max-width: 765px) {
  .atas .judul {
    font: normal normal 600 20px/37px Poppins;
    margin-top: 30px;
    padding: 0 20px;
  }

  .atas .sub-judul {
    font: normal normal normal 11px/26px Poppins;
    padding: 0 20px;
  }

  .siapa-kita .judul {
    font: normal normal 600 20px/64px Poppins;
  }

  .siapa-kita .box {
    width: 100%;
    padding: 0 20px;
  }

  .siapa-kita .desc1 {
    font: normal normal normal 11px/30px Poppins;
    margin-top: 15px;
  }

  .siapa-kita .col-nilai {
    background-color: #FAFAFA;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 35px;
    padding-right: 35px;
  }

  .siapa-kita .judul2 {
    margin-top: 0px;
  }

  .siapa-kita .list {
    font: normal normal normal 12px/30px Poppins;
  }

  .budaya-kami .judul {
    font: normal normal 600 20px/64px Poppins;
    margin-top: 20px;
    padding: 0 20px;
  }

  .budaya-kami .col-card {
    padding: 0px;
  }

  .budaya-kami .inovatif,
  .budaya-kami .aktif,
  .budaya-kami .sharing,
  .budaya-kami .mengajar {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 112px;
    border-radius: 0px;
    margin-top: 0px;
    margin-bottom: 32px;
  }

  .budaya-kami .inovatif,
  .budaya-kami .sharing {
    flex-direction: row-reverse;
  }

  .budaya-kami .card-judul1, 
  .budaya-kami .card-judul2 {
    font: normal normal 600 20px/20px Poppins;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 10px;
    padding-top: 20px !important;
  }

  .budaya-kami .sub-judul1,
  .budaya-kami .sub-judul2 {
    font: normal normal normal 10px/16px Poppins;
    margin-left: 30px;
    margin-right: 30px;
  }

  .budaya-kami .img1 {
    position: relative;
    width: 35%;
    max-height: 100%;
  }

  .budaya-kami .info {
    margin-top: auto;
    margin-bottom: auto;
  }

  .budaya-kami .detailbudaya {
    margin-right: 0px
  }

  .budaya-kami .penasaran {
    font: normal normal 600 14px/32px Poppins;
    padding-top: 0px !important;
  }

  .budaya-kami .yuk {
    font: normal normal normal 12px/64px Poppins;
    margin-right: 0px;
  }

  .budaya-kami .detailbudaya .yuk a {
    font: normal normal normal 12px Poppins;
  }

  .anggota-tim .container {
    padding: 0 30px;
  }

  .anggota-tim .judul {
    font: normal normal 600 20px/64px Poppins;
    margin-top: 0px;
    padding-top: 20px !important;
  }

  .anggota-tim .r1 {
    align-items: stretch;
  }
  
  .anggota-tim .col-card {
    margin: 0 auto;
  }

  .anggota-tim .card {
    width: 131px;
    height: auto;
  }

  .anggota-tim .card-body {
    padding: 15px;
    margin-top: auto;
    margin-bottom: auto;
  }

  .anggota-tim .card-img-top {
    width: 131px;
    height: 127px;
  }

  .anggota-tim .card-title {
    font: normal normal 600 11px/17px Poppins;
    margin-bottom: 5px;
  }

  .anggota-tim .card-text {
    font: normal normal normal 9px/13px Poppins;
    letter-spacing: 0.45px;
  }

  .bawah {
    padding-top: 0px !important;
  }

  .banner-gabung {
    background: url("../themes/big-theme/assets/img/Tentang\ Kami/banner-loker.png");
    height: 100%;
    padding: 45px 0;
    background-size: cover;
  }

  .banner-gabung .kalimat-1 {
    text-align: center;
    font: normal normal 600 18px Poppins;
    letter-spacing: 0px;
    color: #FFFFFF;
    width: 100%;
    margin-top: 0px;
  }

  .banner-gabung .kalimat-2 {
    font: normal normal normal 12px/26px Poppins;
  }

  .banner-gabung .btn-banner-gabung {
    margin-top: 20px;
    font-size: 12px;
    height: 40px;
    padding-top: 8px;
  }

  .siapa-kita .makeup-tentang1,
  .makeup-tentang2, .makeup-tentang3 {
    display: none;
  }

  .budaya-kami .makeup-tentang4 {
    display: none;
  }

  .anggota-tim .makeup-tentang5,
  .makeup-tentang6, .makeup-tentang7 {
    display: none;
  }
}

@media only screen and (max-width: 280px) {
  .budaya-kami .penasaran {
    font-size: 12px;
  }

  .budaya-kami .yuk {
    font-size: 10px;
    margin-right: 0px;
  }

  .budaya-kami .detailbudaya .yuk a {
    font-size: 10px;
  }

  .anggota-tim .col-card {
    max-width: 100%;
  }
}

@media only screen and (max-width: 1200px) and (min-width: 768px) {
  .siapa-kita {
    margin-bottom: 150px;
  }

  .siapa-kita .box {
    width: 100%;
  }

  .siapa-kita .desc1 {
    margin-top: 20px;
  }

  .siapa-kita .col-nilai {
    margin-left: 30%;
  }

  .budaya-kami .container {
    padding: 0 30px;
  }

  .siapa-kita .judul,
  .budaya-kami .judul,
  .anggota-tim .judul {
    font: normal normal 600 35px/64px Poppins;
  }

  .budaya-kami .inovatif,
  .budaya-kami .aktif,
  .budaya-kami .sharing,
  .budaya-kami .mengajar {
    width: 100%;
    height: 355px;
    display: flex;
    justify-content: space-between;
  }
  

  .budaya-kami .aktif,
  .budaya-kami .mengajar {
    flex-direction: row-reverse;
  }

  .budaya-kami .mengajar {
    margin-top: 40px;
  }

  .budaya-kami .info {
    margin-top: 60px;
    padding-left: 30px;
    padding-right: 40px;
  }

  .budaya-kami .card-judul1,
  .budaya-kami .card-judul2 {
    font: normal normal 600 30px/46px Poppins;
  }

  .budaya-kami .sub-judul1,
  .budaya-kami .sub-judul2 {
    font: normal normal normal 18px/27px Poppins;
  }

  .budaya-kami .img1 {
    position: relative;
    width: 45%;
    max-height: 100%;
  }

  .budaya-kami .penasaran{
    text-align: left;
  }

  .budaya-kami .detailbudaya .yuk{
    text-align: left;
    margin-right: 0px;
    text-decoration: none;
  }

  .budaya-kami .detailbudaya .yuk a:after {
    width: 0px;
  }

  .budaya-kami .detailbudaya .yuk i {
    margin-left: 5px;
    opacity: 1;
  }

  .anggota-tim .container {
    padding: 0 30px;
  }

  .anggota-tim .makeup-tentang5,
  .makeup-tentang6, .makeup-tentang7 {
    display: none;
  }

  .anggota-tim .r1 {
    justify-content: left !important;
  }

  .anggota-tim .card {
    width: auto;
    height: auto;
  }

  .banner-gabung .kalimat-1 {
    font: normal normal 600 40px/64px Poppins;
  }

  .banner-gabung .kalimat-2 {
    font: normal normal normal 17px/26px Poppins;
    margin-bottom: 20px;
  }
  
}

/*--------------------------------------------------------------
# detail tentang kami
--------------------------------------------------------------*/
.tentang-detail .judul {
  margin-top: 72px;
  text-align: center;
  font: normal normal 600 45px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
  margin-bottom: 115px;
}

.tentang-detail .point-budaya1 {
  position: absolute;
  top: -25%;
  left: -20%;
}

.tentang-detail .point-budaya2 {
  position: absolute;
  top: -20%;
  right: -11%;
}

.tentang-detail .point-budaya3 {
  position: absolute;
  top: -20%;
  left: -16%;
}

.tentang-detail .point-budaya31 {
  position: absolute;
  top: -10%;
  right: -5%;
}

.tentang-detail .point-budaya4 {
  position: absolute;
  top: -20%;
  right: -11%;
}

.tentang-detail .point-budaya41 {
  position: absolute;
  transform: scaleX(-1);
  transform: rotate(180deg);
  top: -15%;
  left: -12%;
  z-index: -1;
}

.tentang-detail .img1 {
  position: relative;
  border-radius: 20px;
  width: 505px;
  height: 310px;
}

.tentang-detail .title1 {
  text-align: left;
  font: normal normal 600 45px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
  z-index: 1;
}

.tentang-detail .sub-title1 {
  text-align: left;
  font: normal normal normal 15px/30px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}

.tentang-detail .title2 {
  text-align: left;
  font: normal normal 600 45px/64px Poppins;
  letter-spacing: 0px;
  color: #2c2c2c;
  opacity: 1;
}

.tentang-detail .sub-title2 {
  text-align: left;
  font: normal normal normal 20px/30px Poppins;
  letter-spacing: 0px;
  color: #666366;
  opacity: 1;
}

.tentang-detail .flx {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15px;
  margin-bottom: 150px;
}

.tentang-detail .left {
  order: 1;
}

.tentang-detail .right {
  order: 2;
}

.tentang-detail .row-mobile {
  display: none;
}


@media only screen and (max-width: 765px) {
  .tentang-detail .flx {
    display: none;
  }

  .tentang-detail .row-mobile {
    display: inline-block;
  }

  .tentang-detail .row-mobile .col {
    padding: 0 35px;
  }

  .tentang-detail .row-mobile .card {
    width: 100%;
    box-shadow: 0px 2px 4px #00000029;
    border-radius: 5px;
    margin-bottom: 45px;
  }

  .tentang-detail .card-img-top {
    height: 211px;
  }

  .tentang-detail .title-mobile {
    text-align: center;
    font: normal normal 600 18px/27px Poppins;
    color: #2C2C2C;
  }

  .tentang-detail .sub-mobile {
    text-align: center;
    font: normal normal normal 11px/20px Poppins;
    color: #2C2C2C;
  }

  .tentang-detail .judul {
    font: normal normal 600 20px/37px Poppins;
    margin-top: 30px;
    margin-bottom: 60px;
  }

  .tentang-detail .point-mobile1 {
    position: absolute;
    left: 5px;
    margin-top: -35px;
    z-index: 2;
  }

  .tentang-detail .point-mobile2 {
    position: absolute;
    right: 0;
    top: 230px;
  }

  .tentang-detail .point-mobile3 {
    position: absolute;
    left: 0;
    top: 180px;
  }
}

@media only screen and (max-width: 1200px) and (min-width: 768px) {
  .tentang-detail .row {
    width: 100%;
    margin-left: 0px;
  }

  .tentang-detail .judul {
    font: normal normal 600 40px/64px Poppins;
    margin-bottom: 50px;
  }

  .tentang-detail .flx {
    margin-bottom: 120px;
  }

  .tentang-detail .img1 {
    width: 100%;
    height: 246px;
  }

  .tentang-detail .title1 {
    font: normal normal 600 30px/64px Poppins;
  }

  .tentang-detail .sub-title1 {
    font: normal normal normal 13px/30px Poppins;
  }

  .tentang-detail .desc-budaya {
    padding: 0 50px;
  }

  .tentang-detail .point-budaya1, 
  .tentang-detail .point-budaya2, 
  .tentang-detail .point-budaya3, 
  .tentang-detail .point-budaya4 {
    width: 299px;
    height: 343px;
  }

  .tentang-detail .point-budaya2, 
  .tentang-detail .point-budaya4 {
    right: -10%;
  }
}