*{margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
body{font-family: 'Open Sans', sans-serif; color: #232323;}
html{scroll-behavior: smooth;}
img{user-select: none;}
a{text-decoration: none; color: blue;}
a:visited{color: mediumblue;}
ul{list-style: none;}
p{line-height: 1.5rem; margin: 1rem auto;}
/* ########## khusus ul li before ########## */
 .klas-ul li{
  line-height: 1.5rem;
  margin: .5rem 0;
}
.klas-ul li::before{
  content: '\25B6';
  padding-right: 1rem;
}
.baca-juga{
  margin: auto;
  padding: .5rem;
  line-height: 1.5rem;
  background: rgb(220 220 220 / 50%);
  border-left: 16px solid #ea4335;
}
.baca-juga a{font-style: italic;}
.baca-juga a:hover{color: darkblue;}
.quote{
  width: 95%;
  margin: auto;
  padding: 16px 16px 0;
  background: ghostwhite;
  color:#ea4335;
  text-align: justify;
  font-style: italic;
}
.quote p{
  border-top: 1px solid silver;
  text-align: right;
  padding: 16px 0;
  color: grey;
}
/*------------------------------------------------ Seksi Header ------------------------------------------------*/
.navbar-area {
  background: #232323;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9999;
}
.container-navbar {padding: 8px 1rem;}
.site-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: auto;
}
.site-navbar a{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.site-navbar ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.site-navbar ul li a {
  color: gainsboro;
  padding: 8px 16px;
  display: block;
  font-weight: 550;
}
.site-navbar ul li a:hover {color: #fbbc04;}
.site-navbar .blog{
  margin-left: 1rem;
  border: 2px solid #fbbc04;
  border-radius: 1rem;
  color: #fbbc04;
}
.site-navbar .blog:hover{background-color: #fbbc04; color: #232323;}
/* nav-toggler css start */
.nav-toggler {
  border: 3px solid gainsboro;
  padding: 5px;
  background-color: transparent;
  cursor: pointer;
  height: 39px;
  display: none;
}
.nav-toggler span, .nav-toggler span:before, .nav-toggler span:after{
  width: 28px;
  height: 3px;
  background-color: gainsboro;
  display: block;
  transition: .3s;
}
.nav-toggler span:before {
  content: '';
  transform: translateY(-9px);
}
.nav-toggler span:after {
  content: '';
  transform: translateY(6px);
}
.nav-toggler.toggler-open span {
  background-color: transparent;
}
.nav-toggler.toggler-open span:before {
  transform: translateY(0px) rotate(45deg);
}
.nav-toggler.toggler-open span:after {
  transform: translateY(-3px) rotate(-45deg);
}

/* mobile breakpoint start */
@media (max-width: 900px) {
  .nav-toggler{display: block;}
  .site-navbar {min-height: 50px;}
  .site-navbar ul {
    position: absolute;
    width: 100%;
    height: calc(100vh - 50px);
    left: 0;
    top: 52.5px;
    flex-direction: column;
    background-color: #232323;
    max-height: 0;
    overflow: hidden;
    transition: .3s;
  }
  .site-navbar ul li {
    width: 100%;
    text-align: center;
  }
  .site-navbar ul li a {padding: 20px;}
  .site-navbar ul li a:hover {background-color: rgba(255,255,255,.1);
  }
  .site-navbar .blog{
    width: 5rem;
    margin: 20px auto 40px;
    padding: 5px 10px;
  }
  .site-navbar ul.open {
    margin-top: 16px;
    max-height: 75vh;
  }
}
@media (max-width: 600px){
  .site-navbar {width: 97.5%;}
}
/*------------------------------------------------ Seksi BG Hero ------------------------------------------------*/
.bg-hero{margin: 70px auto 0;}
.wadah-slideshow{position: relative; top: 0; left: 0;}
.wadah-slideshow img{width: 100%; height: 100%;}
.mySlides {display: none;}
.mySlides img{
  width: 75%;
  height: 75%;
  position: absolute;
  top: 7.5%;
  left: 12.5%;
}
.mySlides h1, .mySlides h2{
  position: absolute;
  left: 25%;
  font-weight: bold;
  width: 50%;
  text-align: center;
}
.mySlides h1{
  top: 27%;
  color: #fbbc04;
  font-size: 64px;
}
.mySlides h2{
  top: 52.5%;
  color: #34a853;
  font-size: 32px;
}
.hero-prev, .hero-next {
  cursor: pointer;
  position: absolute;
  top: 44%;
  padding: 10px 20px;
  margin-top: -20px;
  color: gainsboro;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 50%;
}
.hero-prev{left: 12.85%;}
.hero-next{right: 12.75%;}
.hero-prev:hover, .hero-next:hover{background-color: gainsboro; color: #232323;}
@media (max-width: 900px){
  .wadah-slideshow img{
    width: 100%;
    height: 75vh;
  }
  .mySlides img{
    width: 85%;
    height: 72.5%;
    left: 7.5%;
  }
  .mySlides h1{
    top: 24%;
    font-size: 56px;
  }
  .mySlides h2{
    top: 50.5%;
    font-size: 28px;
  }
  .hero-prev, .hero-next {
    top: 42.75%;
  }
  .hero-prev{left: 7.95%;}
  .hero-next {right: 7.85%;}
}
@media (min-width: 280px) and (max-width: 600px){
  .wadah-slideshow img{
    width: 100%;
    height: 60vh;
  }
  .mySlides img{
    width: 100%;
    height: 70%;
    left: 0;
  }
  .mySlides h1, .mySlides h2{
    left: 8.75%;
    width: 82.5%;
  }
  .mySlides h1{
    top: 23.75%;
    font-size: 44px;
  }
  .mySlides h2{
    top: 48.5%;
    font-size: 22px;
  }
  .hero-prev, .hero-next {
    top: 41.25%;
  }
  .hero-prev{left: 0.5%;}
  .hero-next {right: 0.5%;}
}

/*---------------------------------------------- Seksi Breadcrumbs ----------------------------------------------*/
.breadcrumb{width: 87.5%; margin: 2rem auto;}
.wadah-bc{background-color: gainsboro; border-radius: .25rem;}
.wadah-bc .isi-bc {padding:10px 16px;}
.wadah-bc .isi-bc li {display:inline;}
.wadah-bc .isi-bc li+li:before {padding:8px; content:"\25B6"; font-weight: bold;}
.wadah-bc .isi-bc li a:hover{color:darkblue;}
.isi-bc i{vertical-align: text-top; padding-right: .25rem;}

@media(max-width: 480px){
  .wadah-bc .isi-bc li:nth-child(3){
    display: block;
}
  .wadah-bc .isi-bc li:nth-child(3):before{padding-left: 0;}
}

/*---------------------------------------------- Seksi Artikel ----------------------------------------------*/
/* Halaman Utama */
.main{width: 87.5%; margin: 2rem auto;}
.artikel-utama h1{text-align: center; font-size: 48px;}
.artikel-utama h2{margin:1rem 0; font-size: 32px;}
.artikel-utama article h3{margin:1rem 0; font-size: 24px;}
.artikel-utama article ol{margin-left: 24px; margin-bottom: 16px;}
.artikel-utama article ol li{line-height: 1.5rem;}
.artikel-utama article ul{margin-bottom: 16px;}
.artikel-utama article ul li{list-style:none; line-height: 1.5rem;}
.artikel-utama article ul li:before{content: '\2714'; padding-right: .5rem;}

.artikel-utama > p:nth-child(2){font-style: italic; text-align: center;}
.artikel-utama img{
  width: 50%; height: 50%; display: block; margin: 2rem auto;
}
.konten-jasa {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: auto;
}
.item-jasa {
  flex: 30%;
  margin: .5rem;
  border: 1px solid #232323;
  border-radius: 10px;
  overflow: hidden;
}
.item-jasa:hover{box-shadow: 0 2.5px 5px rgba(0, 0, 0, 0.75);}
.item-jasa img{width: 100%; height: auto; margin-bottom: -4px;}
.item-jasa:nth-child(3){position: relative;}
.item-jasa:nth-child(3) span{
  position: absolute;
  transform: rotate(45deg);
  top: 20px;
  right: -32.5px;
  padding: .5rem 2rem;
  background: #ff3366;
  color: #fff;
  font-weight: bold;
}
.teks-card h3{font-size: 26px; padding: 10px 0 5px;}
.teks-card h4, .bintang{font-size: 22px; padding: 5px 0 10px;}
.teks-card h3, .teks-card h4{text-align: center; background-color: white; color: #ff3366; font-weight: bold;}
.bintang{display: flex; justify-content: center;}
.bintang i{padding: .5rem; color: #ff3366;}
.tombol-jasa{margin: 0 auto; padding: 10px 20px;}
.tombol-jasa a{
  margin: 0 auto;
  padding: 10px 20px;
  display: block;
  text-align: center;
  color: #ff3366;
  border: 1px solid #ff3366;
  border-radius: 20px;
}
.tombol-jasa a:hover{background: #ff3366; color: white;}
@media(max-width: 900px){
    .item-jasa {flex: 40%;}
}
@media(max-width: 600px){
  .konten-jasa {flex-direction: column;}
  .item-jasa {flex: 100%; margin: .75rem 0;}
}
.iklan {display: flex; flex-wrap: nowrap;}
.isi-iklan {
  flex: 20%;
  margin: 10px 2.5px;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  border-radius: .5rem;
  border: 1px solid gainsboro;
  cursor: pointer;
}
.isi-iklan:hover{background-color: blue; color: white;}
.share-post{display: flex; margin-top: 1.5rem;}
.berbagi{flex:50%; font-size: 20px; font-weight: bold; color: gray;}
.share-produk{flex:50%; font-size: 20px; display: flex; justify-content: space-between;}
.share-produk i{padding: .25rem; border-radius: 25%; color: white; cursor: pointer;}
.share-produk i:hover{color: gainsboro; background: #232323;}
.share-produk .ri-facebook-circle-fill{background: blue;}
.share-produk .ri-twitter-fill{background: #1d9bf0;}
.share-produk .ri-pinterest-fill{background: #c92619;}
.share-produk .ri-whatsapp-fill{background: #00e676;}
@media (min-width: 601px) and (max-width: 900px){
  .iklan {display: flex; flex-wrap: wrap;}
  .isi-iklan {flex: 40%;}
}
@media (max-width: 600px){
  .artikel-utama img{width: 100%; height: 100%;}
  .artikel-utama .darurat-img{width: 87.5%; height: auto; margin: 2rem auto;}
  .artikel-utama h1{font-size: 34px;}
  .iklan {flex-direction: column;}
  .isi-iklan {width: 210px; margin: 10px auto;}
  .share-post{flex-direction: column;}
  .berbagi{margin-bottom: 1rem; text-align: center;}
}
/* Halaman Izin Usaha */
.konten-card-izin-usaha {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: auto;
}
.item-card-izin-usaha {
  flex: 30%;
  height: 350px;
  margin: .5rem;
  border: 1px solid #232323;
  border-radius: 10px;
  overflow: hidden;
}
.item-card-izin-usaha:hover{box-shadow: 0 2.5px 5px rgba(0, 0, 0, 0.75);}
.teks-card-izin-usaha h3{font-size: 26px; padding: 10px 0 5px;}
.teks-card-izin-usaha h4{font-size: 22px; padding: 5px 0 10px;}
.teks-card-izin-usaha h3, .teks-card-izin-usaha h4{
  text-align: center;
  background-color: gainsboro;
  color: #ff3366;
  font-weight: bold;
}
.teks-card-izin-usaha p{padding-left: .5rem; font-style: italic; font-weight: bold;}
.teks-card-izin-usaha li{
  line-height: 1.5rem;
}
.teks-card-izin-usaha li::before{
  content: '\25B6';
  padding-left: .5rem;
  padding-right: .5rem;
}
@media(max-width: 900px){
    .item-card-izin-usaha {flex: 40%;}
}
@media(max-width: 600px){
  .konten-card-izin-usaha {display: block;}
  .item-card-izin-usaha {margin: 1rem 0;}
}

/* ---------- halaman foto klien (galeri foto klien / infinite autoplay slider) ---------- */
.container-infinite-slider{
  height: auto;
  width: 87.5%;
  margin: 1rem auto;
  border: 1px solid #d0d0d0;
  overflow: hidden;
}
.slide-track{
  display: flex;
  align-items: center;
  width: calc(300px * 17);
  animation: scroll 90s linear infinite;
}
.slide-track:hover{animation-play-state: paused;}
.slide-track img{width: 300px; height: 400px; margin: 8px;}

@keyframes scroll{
  0%{transform: translateX(0);}
  100%{transform: translateX(calc(-300px * 17));}
}
/* ---------- halaman tentang ---------- */
.flex-tentang{
  display: flex;
  justify-content:
  space-around;
  flex-wrap: wrap;
}
.item-flex-tentang{
  flex: auto;
  width: 100px;
  margin: .5rem;
  border: 1px solid grey;
  border-radius: .5rem;
  padding: .5rem;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
}
.item-flex-tentang:hover{background-color: blue; color: white;}

/* ---------- halaman faq / Tanya Jawab ---------- */
.pertanyaan{
  background-color: #ff3366;
  color: white;
  cursor: pointer;
  width: 100%;
  margin: 8px auto;
  padding: 1rem;
  padding-right: 2rem;
  border: none;
  text-align: left;
  font-size: 18px;
  line-height: 1.5rem;
  transition: 0.25s;
  position: relative;
}
.faqActive, .pertanyaan:hover {
  color: #232323;
}
.pertanyaan:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  position: absolute;
  top: 50%;
  right: 2.5%;
  transform: translate(-50%, -50%);
}
.faqActive:after {
  content: "\2212";
  color: #232323;
}
.jawaban{
  padding: 0 1rem;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  line-height: 1.5rem;
}

/*########## Halaman Kontak ##########*/
.konten-chat-kontak{
  display: flex;
}
.item-chat-kontak{
  display: flex;
  flex: 30%;
  justify-content: space-around;
  margin: .5rem;
  padding: .5rem;
  border: 1px solid gainsboro;
  border-radius: .25rem;
}
.item-chat-kontak:hover{background-color: #232323;}
.item-chat-kontak i, .item-chat-kontak span{/*flex: 40%; */}
.item-chat-kontak i{font-size: 42px;}
.item-chat-kontak .ri-mail-fill{color: #f14336;}
.item-chat-kontak .ri-whatsapp-fill{color: #00e676;}
.item-chat-kontak .ri-telegram-fill{color: #27a7e5;}
.item-chat-kontak span{font-size: 20px; line-height: 42px;}
.item-chat-kontak:first-child span{color: #f14336;}
.item-chat-kontak:nth-child(2) span{color: #00e676;}
.item-chat-kontak:last-child span{color: #27a7e5;}
@media (max-width: 900px){
  .konten-chat-kontak{flex-wrap: wrap;}
  .item-chat-kontak{
    flex: : 42.5%;
    justify-content: center;
    margin: .5rem;
    padding: .5rem;
  }
}
@media (max-width: 600px){
  .konten-chat-kontak{flex-direction: column;}
  .item-chat-kontak{
    justify-content: flex-start;
    margin: .5rem 0;
    padding: .5rem 0;
  }
}
/*------------------------------------------- Artikel Menarik Lainnya -------------------------------------------*/
.tabs-container {
  width: 100%;
  border: 1px solid gainsboro;
  margin-top: 2rem;
}
.tabs-container span{
  display: block;
  font-size: 20px;
  font-weight: bold;
  background-color: gainsboro;
  width: 100%;
  padding: 1rem;
  text-align: center;
}
div.tabs-nav {
  display: flex;
  justify-content: space-around;
  padding: 16px 8px 8px;
}
a.tabs-menu {
  display: inline-block;
  font-size: 16px;
  color: gray;
  padding: 8px;
  width: 75px;
  font-weight: bold;
  border: 1px solid gray;
  border-radius: 4px;
  text-align: center;
}
a.tabs-menu:hover, a.tabs-menu.tabs-menu-active {
  background-color: rgba(0,0,0,.75);
  color: silver;
  border: 1px solid rgba(0,0,0,.75);
}
a.tabs-menu.tabs-menu-active{cursor: text;}
.tabs-content{/*margin: auto;*/}
.tabs-panel {display: none; padding: 8px 8px 0;}
.flex-content {display: flex; justify-content: space-around; border-top: 1px solid gainsboro;}
.flex-kiri{
  display: flex;
  flex: 30%;
  justify-content: center;
  align-items: center;
}
.flex-kiri img{width: 180px; height: 125px;}
.flex-kanan{flex:70%;}
a.tombol-artikel{color: #fbbc04;}
.tombol-artikel{
  display: block;
  margin: .5rem .65rem;
  padding: 4px;
  width: 120px;
  border: 1px solid #fbbc04;
  border-radius: 8px;
  text-align: center;
  color: red;
}
.tombol-artikel:hover{color: #fbbc04; background-color: #232323; border: 1px solid #232323;}
.judul-card-artikel{font-weight: bold; padding: 10px; text-align: justify; color: dimgray;}
.ket-artikel{padding: 10px; font-size: 14px; text-align: justify; color: gray;}

@media (max-width: 600px){
  .flex-content {flex-direction: column;}
  div.tabs-nav {padding-left: 0; padding-right: 0;}
  a.tabs-menu {margin: 0 4px; }
  .flex-kiri{padding-top: 8px;}
  .tombol-artikel{margin: .5rem auto;}
}

/*------------------------------------------- Seksi Pagination -------------------------------------------*/
.jtable{width: 87.5%; margin: auto;}
.jtable > .jtable__panel {
  width: 100%;
  margin: .5rem 0;
  display: flex;
}
.jtable > .jtable__panel > div:first-child {
  margin-left: .5rem;
  display: flex;
  width: 50%;
  align-items: center;
}
.jtable .jtable__select{width: 75px;}
.jtable > .jtable__panel > div:first-child > span {
  margin-left: .5rem;
}

.jtable > .jtable__panel > div:last-child {
    display: flex;
    justify-content: flex-end;
    width: 50%;
    margin-right: .5rem;
}
.jtable .jtable__search{
  width: 75%;
}
.jtable .jtable__search,
.jtable .jtable__select {
  font-size: 1rem;
  border-radius: .25rem;
  border: 1px solid #d0d0d0;
  padding: .5rem 1rem;
}
.jtable table {
  border: 1px solid #d0d0d0;
  border-radius: .25rem;
  border-spacing: 0;
  width: 100%;
  margin: 1rem 0;
}
.jtable table > tbody > tr:nth-child(2n){
  background-color: #f9f9f9;
}
.jtable tbody > tr > td:first-child{text-align: center;}
.jtable tbody > tr > td:nth-child(2){}
.jtable table tr > th,
.jtable table tr > td {
  vertical-align: top;
  padding: .5rem .25rem;
  border-bottom: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  line-height: 1.5rem;
}
.jtable table tr:last-child > td {border-bottom: none;}
.jtable table tr > th:last-child,
.jtable table tr > td:last-child {border-right: none;}
.jtable table > thead th{cursor: pointer; background-color: gray; height: 75px; vertical-align: middle;}
.jtable table > thead th:first-child{
  width: 12.5%;
}
.jtable table > thead th:nth-child(2){
  width: 25%;
}
.jtable table > thead th:last-child{
  width: 60%;
}
.jtable > div:nth-child(3){
  margin-bottom: 2rem;
}
.jtable__pagination {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.jtable__pagination > button {
  height: 2rem;
  min-width: 2rem;
  margin: 0 .25em;
  text-align: center;
  border-radius: 4px;
  border: solid .01em #d0d0d0;
  cursor: pointer;
  padding: 8px;
  font-size: 16px;
}
.jtable__pagination > button:first-child {margin-left: 0;}
.jtable__pagination > button.btn-char {font-size: 12px;}
.jtable__pagination > button[aria-selected=true] {
  background-color: gray;
  border-color: gray;
}
.jtable__pagination > button:last-child {margin-right: 0;}

/* MOBILE */
@media (max-width: 600px) {
  .jtable{width: 97.5%; margin: 1.25%;}
  .jtable > .jtable__panel {
    flex-direction: column;
  }
  .jtable > div:first-child > div {
    padding-left: 1rem;
  }
  .jtable > .jtable__panel > div {
    width: 100% !important;
    font-size: 14px;
  }
  .jtable .jtable__search,
  .jtable .jtable__select {
    font-size: 14px;
  }
  .jtable > .jtable__panel > div:first-child {
    margin-left: 0;
  }
  .jtable > .jtable__panel > div:first-child,
  .jtable > .jtable__panel > div:last-child {
      margin: .5rem 0;
      justify-content: flex-start;
  }
  .jtable > .jtable__panel > div:first-child > span {
      align-items: center;
  }
  .jtable table > thead th:first-child{
    width: 12.5%;
  }
  .jtable table > thead th:nth-child(2){
    width: 17.5%;
  }
  .jtable table > thead th:last-child{
    width: auto;
  }

  .jtable table tr > th,
  .jtable table tr > td {font-size: 14px;}
  .jtable > div:nth-child(3) > #example_pgdisplay, #example_pagination{justify-content: center; font-size: 14px;}
  .jtable table tr > th > span,
  .jtable table tr > td > span{display: block;}

  .jtable__pagination > button {
    min-width: 1.75rem;
    margin: 0 .15rem;
    padding: 4px;
    font-size: 14px;
  }
}
/*---------------------------------------------- Seksi footer ----------------------------------------------*/
.footer{
  width: 100%;
  background-color: #232323;
  color: gainsboro;
}
.slogan{
  width: 87.5%;
  margin: auto;
  padding: 1rem 0;
  text-align: center;
}
.slogan .jasa{color: #fbbc04;} .slogan .jatim{color: #34a853;}
.slogan h3{font-size: 28px;}
.slogan p{font-style: italic;}
.lokasi{margin: 0 auto; padding: 1rem 0 0; width: 87.5%;}
.konten-lokasi{display: flex;}
.konten-lokasi i{font-size: 20px; vertical-align: middle; padding-right: 1rem;}
.konten-lokasi .ri-map-pin-fill{vertical-align: top;}
.konten-lokasi a{color: gainsboro;}
.konten-lokasi a:hover{color: #fbbc04;}
.alamat, .email, .tele{flex: 30%; margin: 1rem .5rem; padding: .5rem;}
.alamat{margin-left: 0;}
.tele{margin-right: 0;}
.maps{flex: 60%; width: 100%; height: 450px;}
.maps iframe{width: 100%; height: 100%;}
.sitemap{display: flex; margin: 0 auto; padding: 2rem 0; width: 87.5%;}
.sitemap h3{color: #fbbc04; margin-bottom: 1rem; font-size: 20px;}
.sitemap a{color: gainsboro;}
.sitemap a:hover{color: #fbbc04;}
.sitemap ul li{line-height: 1.5rem;}
.profil, .dukungan, .produk, .medsos{flex: 25%;}
.profil li:before, .dukungan li:before, .produk li:before{content: '\25B6'; padding-right: 8px;}
.medsos ul {display: flex; flex: 25%; justify-content: space-between;}
.medsos i{font-size: 24px;}
.footer .copyright{
  border-top: 1px solid #dcdcdc40;
  color: gainsboro;
  text-align: center;
  margin: 0 auto;
  padding: 1rem;
  word-spacing: .1rem;
  letter-spacing: .1rem;
}
.footer .copyright span a{color: #fabb04;}
@media(max-width: 900px){
  .sitemap{flex-wrap: wrap;}
  .profil, .dukungan, .produk, .medsos{flex: 40%; margin: 1rem auto;}
  .konten-lokasi{flex-wrap: wrap;}
  .alamat{flex:100%;}
  .email, .tele{flex: 45%;}
}
@media(max-width: 600px){
  .sitemap{flex-direction: column;}
  .profil, .dukungan, .produk, .medsos{flex: 100%; margin: 1rem 0;}
  .medsos ul {justify-content: space-around;}
  .sitemap h3{margin-top: 1.5rem;}
  .konten-lokasi{flex-direction: column;}
  .alamat{margin-left: .5rem;}
  .tele{margin-right: .5rem; margin-bottom: 2rem;}
  .alamat, .email, .tele{padding: 0;}
}

/*--------------------------------------------- Tombol mengapung ---------------------------------------------*/
.chat-wa, .kembali-keatas{
  position: fixed;
  z-index: 9999;
}
.chat-wa i, .kembali-keatas i{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  transition: all 0.5s;
}
/* chat whatsapp */
.chat-wa{right: 1%; bottom: 10%;}
.chat-wa i{background: #00e676; color: white;}
.chat-wa i:hover {background: #34a853; color: #232323;}
/* kembali keatas */
.kembali-keatas {right: 1%; bottom: 1%;}
.kembali-keatas i {background: rgb(220 220 220 / 50%); color: silver;}
.kembali-keatas i:hover {background: grey; color: #fff;}
@media (max-width: 900px) {
  .chat-wa {
    right: 1%;
    bottom: 10%;}
  .kembali-keatas {
    right: 1%;
    bottom: 1%;}
}

/* **************************************** CSS Animation **************************************** */
.animated{animation-duration: 1s;}
.fade-in {animation: fade-in 1s ease-in-out both;}
@keyframes fade-in {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.fade-in-bottom {animation: fade-in-bottom 2s ease-in-out both;}
@keyframes fade-in-bottom {
  0% {transform: translateY(50px); opacity: 0;}
  100% {transform: translateY(0); opacity: 1;}
}
.fade-in-top {animation: fade-in-top 2s ease-in-out both;}
@keyframes fade-in-top {
  0% {transform: translateY(-50px); opacity: 0;}
  100% {transform: translateY(0); opacity: 1;}
}

/*notifikasi popup modal jasa jatim*/
.promo{
	padding: 0 1rem;
	width: 90%;
	height: 90vh;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 999999;
	background: ghostwhite;
    box-shadow: 0 0 10rem #000;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 2rem 0;
}
.promo .wadah-gambar img{
    width: 100%;
    height: 100%;
}
.promo .wadah-pesan{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.promo .wadah-pesan h3{
	text-align: center;
	font-size: 24px;
	color: #232323;
}
.promo .wadah-tombol{
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	gap: 1rem;
}
.promo .wadah-tombol a{
	width: 6rem;
	height: 3rem;
	border-radius: 4px;
	font-size: 20px;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "Lucida Handwriting";
}
.promo .wadah-tombol a:hover{
    color: ghostwhite;
}
.promo .wadah-tombol .iya{
    border: 1px solid green;
    color: green;
}
.promo .wadah-tombol .iya:hover{
	background: green;
}
.promo .wadah-tombol .tidak{
	border: 1px solid red;
    color: red;
}
.promo .wadah-tombol .tidak:hover{
	background: red;
}



/* ------------------------- bottom-ads ------------------------- */
.bottom-ads{
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translate(-50%);
    width: 100%;
    height: 90px;
    max-width: 2000px;
    padding: 0 3rem;
    background:#fff;
    z-index: 10;
    transition: 1s ease-in-out;
}
.bottom-ads.hidden{
    bottom: -90px;
}
.bottom-ads .toggleAds{
    width: 48px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,10%);
    border-radius: 4px 4px 0 0;
    padding: 8px;
    position: relative;
    top: -32px;
    background: rgb(220 220 220 / 50%);
    color: silver;
}
.bottom-ads .toggleAds.down::after{
  content: '\25bc';
}
.bottom-ads .toggleAds.up::after{
  content: '\25b2';
}
.bottom-ads a{
    position: relative;
    bottom: 32px;
}
.bottom-ads a .banner{
    max-width: 728px;
    width: 100%;
    max-height: 90px;
    height: 100%;
    margin: auto;
    display: block;
}
/* responsive */
@media(max-width: 768px){
  .bottom-ads{
    padding: 0 2rem;
  }
}
@media(max-width: 480px){
  .bottom-ads{
    padding: 0;
  }
  .bottom-ads a .banner{
    max-width: 468px;
  }