/*** Spinner Start ***/
#spinner {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
  z-index: 99999;
}

#spinner.show {
  transition: opacity 0.5s ease-out, visibility 0s linear 0s;
  visibility: visible;
  opacity: 1;
}
/*** Spinner End ***/

.back-to-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  transition: 0.5s;
  z-index: 99;
}

/*** Button Start ***/
.btn {
  font-weight: 600;
  transition: 0.5s;
}

.btn-square {
  width: 32px;
  height: 32px;
}

.btn-sm-square {
  width: 34px;
  height: 34px;
}

.btn-md-square {
  width: 44px;
  height: 44px;
}

.btn-lg-square {
  width: 56px;
  height: 56px;
}

.btn-xl-square {
  width: 66px;
  height: 66px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square,
.btn-xl-square {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
}

.btn.btn-primary {
  color: var(--bs-white);
  border: none;
}

.btn.btn-primary:hover {
  background: var(--bs-dark);
  color: var(--bs-white);
}

.btn.btn-light {
  color: var(--bs-primary);
  border: none;
}

.btn.btn-light:hover {
  color: var(--bs-white);
  background: var(--bs-dark);
}

.btn.btn-dark {
  color: var(--bs-white);
  border: none;
}

.btn.btn-dark:hover {
  color: var(--bs-primary);
  background: var(--bs-light);
}

/*** Navbar Start ***/
.nav-bar {
  background: var(--bs-white);
  transition: 1s;
}

.navbar-light .navbar-brand img {
  max-height: 60px;
  transition: 0.5s;
}

.nav-bar .navbar-light .navbar-brand img {
  max-height: 50px;
}

.navbar .navbar-nav .nav-item .nav-link {
  padding: 0;
}

.navbar .navbar-nav .nav-item {
  display: flex;
  align-items: center;
  padding: 15px;
}

.navbar-light .navbar-nav .nav-item:hover,
.navbar-light .navbar-nav .nav-item.active,
.navbar-light .navbar-nav .nav-item:hover .nav-link,
.navbar-light .navbar-nav .nav-item.active .nav-link {
  color: var(--bs-primary);
}

@media (max-width: 991px) {
  .navbar {
    padding: 20px 0;
  }

  .navbar .navbar-nav .nav-link {
    padding: 0;
  }

  .navbar .navbar-nav .nav-item {
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: end;
    align-items: start;
  }

  .navbar .navbar-nav .nav-btn {
    display: flex;
    justify-content: end;
  }

  .navbar .navbar-nav {
    width: 100%;
    display: flex;
    margin-top: 20px;
    padding-bottom: 20px;
    background: var(--bs-white);
    border-radius: 10px;
  }

  .navbar.navbar-expand-lg .navbar-toggler {
    padding: 8px 15px;
    border: 1px solid var(--bs-primary);
    color: var(--bs-primary);
  }
}

.navbar .dropdown-toggle::after {
  border: none;
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  vertical-align: middle;
  margin-left: 8px;
}

.dropdown .dropdown-menu .dropdown-item:hover {
  background: var(--bs-primary);
  color: var(--bs-white);
}

@media (min-width: 992px) {
  .navbar {
    padding: 20px 0;
  }

  .navbar .nav-btn {
    display: flex;
    align-items: center;
    justify-content: end;
  }

  .navbar .navbar-nav {
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    background: var(--bs-white);
    border-radius: 10px;
  }

  .navbar .navbar-nav .nav-btn {
    width: 100%;
    display: flex;
    margin-left: auto;
  }

  .navbar .nav-item .dropdown-menu {
    display: block;
    visibility: hidden;
    top: 100%;
    transform: rotateX(-75deg);
    transform-origin: 0% 0%;
    border: 0;
    border-radius: 10px;
    transition: 0.5s;
    opacity: 0;
  }

  .navbar .nav-item:hover .dropdown-menu {
    transform: rotateX(0deg);
    visibility: visible;
    margin-top: 20px;
    background: var(--bs-light);
    transition: 0.5s;
    opacity: 1;
  }
}
/*** Navbar End ***/

/*** Hero Section Start ***/
.header-carousel .header-carousel-item {
  height: 700px;
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 60px;
  background: var(--bs-light);
  color: var(--bs-primary);
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
}

.header-carousel .owl-nav .owl-prev {
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 30px;
}
.header-carousel .owl-nav .owl-next {
  bottom: 30px;
  right: 50%;
  transform: translateX(-50%);
  margin-right: 30px;
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
  box-shadow: inset 0 0 100px 0 var(--bs-secondary);
  color: var(--bs-white);
}

.header-carousel .header-carousel-item .carousel-caption {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
}

@media (max-width: 991px) {
  .header-carousel .header-carousel-item .carousel-caption {
    padding-top: 45px;
  }

  .header-carousel .header-carousel-item {
    height: 1300px;
  }
}

@media (max-width: 767px) {
  .header-carousel .header-carousel-item {
    height: 950px;
  }

  .header-carousel .owl-nav .owl-prev {
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    margin-left: -45px;
  }

  .header-carousel .owl-nav .owl-next {
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 45px;
  }
}
/*** Hero Section End ***/

/*** Single Page Hero Header Start ***/
.bg-breadcrumb {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(1, 95, 201, 0.9), rgba(0, 0, 0, 0.2)),
    url(../img/komunikasi.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 60px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb .breadcrumb {
  position: relative;
}

.bg-breadcrumb .breadcrumb .breadcrumb-item a {
  color: var(--bs-white);
}
/*** Single Page Hero Header End ***/

/*** Tahapan Pengaduan Start ***/
#stepper2 {
  margin-top: 15px;
}

.bs-stepper-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  flex: 1; /* Membuat setiap step fleksibel */
}

.bs-stepper-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--bs-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--bs-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.step:hover .bs-stepper-circle {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}

/* Tahapan Pengaduan */
.bs-stepper-progress {
  position: absolute;
  top: 15%;
  left: calc(11% + 20px); /* Mengatur titik awal dari step pertama */
  width: calc(76% - 20px); /* Panjang garis hanya sampai antara dua circle pertama dan terakhir */
  height: 2px;
  background-color: var(--bs-gray);
  z-index: 0;
}

.bs-stepper-line {
  display: none; /* Hilangkan garis vertikal jika tidak diperlukan */
}

.step:first-child .bs-stepper-progress {
  left: calc(25% + 20px); /* Mengatur posisi awal garis */
}

.step:last-child .bs-stepper-progress {
  width: calc(50% - 40px); /* Mengatur panjang garis */
}

.bs-stepper-circle {
  position: relative;
  z-index: 1; /* Pastikan circle berada di atas garis */
}

.bs-stepper-label {
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--bs-dark);
  margin-top: 10px;
}

.step-description {
  color: var(--bs-gray);
  font-size: 0.9rem;
  margin-top: 5px;
  max-width: 180px;
}

/* Responsivitas untuk layar kecil */
@media (max-width: 768px) {
  .bs-stepper-header {
    flex-direction: column;
  }

  .bs-stepper-progress {
    left: 5%;
    width: 90%;
    height: 0px;
    background-color: var(--bs-gray);
  }

  .step {
    margin-bottom: 40px;
  }

  .step .bs-stepper-circle {
    margin-bottom: 10px;
  }

  .step:first-child .bs-stepper-progress,
  .step:last-child .bs-stepper-progress {
    height: 50%;
  }
}

.contact .contact-img {
  position: relative;
}

.contact .contact-img::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 1;
  animation-name: image-efects;
  animation-duration: 10s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transition: 0.5s;
}

@keyframes image-efects {
  0% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }

  25% {
    border-radius: 35% 65% 27% 73% / 71% 25% 75% 29%;
  }

  50% {
    border-radius: 41% 59% 45% 55% / 32% 21% 79% 68%;
  }

  75% {
    border-radius: 69% 31% 39% 61% / 70% 83% 17% 30%;
  }

  100% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
}

.contact .contact-img .contact-img-inner {
  position: relative;
  z-index: 9;
}

.mb-4 {
  margin-bottom: 1.5rem;
}

/* Separator Line Start */
hr.my-5 {
  margin: 3rem 0;
  border: 0;
  border-top: 1px solid var(--bs-gray);
}
/* Separator Line End */
/*** Ajukan Konsultasi End ***/

/* Pantau Konsultasi Start */
.konsultasi-item-content h1 {
  text-align: center;
}

.konsultasi-item-content p {
  margin-bottom: 20px !important;
  color: gray !important;
  text-align: center;
  font-weight: normal;
}

.konsultasi-item-conten p.text-dark.mb-4 {
  margin-bottom: 8px;
  text-align: center;
}

.konsultasi-item-content .btn {
  margin-top: 20px;
  text-align: center;
  display: inline-block;
  margin: 0 auto;
}
/* Pantau Konsultasi End */

/*** Footer Start ***/
.footer {
  background: var(--bs-dark);
}

.footer .footer-item {
  display: flex;
  flex-direction: column;
}

.footer .footer-item a {
  line-height: 35px;
  color: var(--bs-body);
  transition: 0.5s;
}

.footer .footer-item p {
  line-height: 35px;
}

.footer .footer-item iframe {
  border: 1px solid var(--bs-white);
  margin-bottom: 20px;
  width: 100%;
  max-width: 300px;
  height: 200px;
}

.footer .footer-item .footer-btn a {
  display: flex;
}

.footer .footer-item .footer-btn {
  margin-right: 10px;
}

.footer .footer-item a:hover {
  color: var(--bs-primary);
}

.footer .footer-item .footer-btn a,
.footer .footer-item .footer-btn a i {
  transition: 0.5s;
}

.footer .footer-item .footer-btn a:hover {
  background: var(--bs-white);
}

.footer .footer-item .footer-btn a:hover i {
  color: var(--bs-primary);
}

.footer .footer-item .footer-instagram {
  position: relative;
  overflow: hidden;
}

.footer .footer-item .footer-instagram img {
  transition: 0.5s;
}

.footer .footer-item .footer-instagram:hover img {
  transform: scale(1.2);
}

.footer .footer-item .footer-instagram .footer-search-icon {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
  opacity: 0;
}

.footer .footer-item .footer-instagram:hover .footer-search-icon {
  opacity: 1;
  background: rgba(0, 0, 0, 0.6);
}

.footer .footer-item .footer-btn a {
  background: var(--bs-light);
  color: var(--bs-primary);
}

.footer .footer-item .footer-btn a:hover {
  background: var(--bs-primary);
}

.footer .footer-item .footer-btn a:hover i {
  color: var(--bs-white);
}
/*** Footer End ***/

/*** copyright Start ***/
.copyright {
  background: var(--bs-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.copyright .text-white {
  color: var(--bs-white) !important;
}
/*** copyright end ***/

/* Stepper Start */
.bs-stepper .step-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: #6c757d;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: none;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

@media (max-width: 520px) {
  .bs-stepper .step-trigger {
    flex-direction: column;
    padding: 10px;
  }
}

.bs-stepper-label {
  display: inline-block;
  margin: 0.25rem;
  font-size: 1.2rem;
  color: black;
  font-weight: bold;
}

.bs-stepper-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 520px) {
  .bs-stepper-header {
    margin: 0 -10px;
    text-align: center;
  }
}

.bs-stepper-line,
.bs-stepper .line {
  flex: 1 0 32px;
  min-width: 1px;
  min-height: 1px;
  margin: 0 1rem;
  background-color: var(--bs-gray);
}

@media (max-width: 400px) {
  .bs-stepper-line,
  .bs-stepper .line {
    flex-basis: 20px;
  }
}

.bs-stepper-circle {
  display: inline-flex;
  align-content: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  padding: 0.75em;
  margin: 0.25rem;
  line-height: 1em;
  color: #fff;
  background-color: var(--bs-blue);
  border-radius: 50%;
  font-size: 1.5rem;
}

.active .bs-stepper-circle {
  background-color: #007bff;
}

.bs-stepper-content {
  padding: 0 20px 20px;
}

@media (max-width: 520px) {
  .bs-stepper-content {
    padding: 0;
  }
}

.bs-stepper-pane:not(.fade),
.bs-stepper .content:not(.fade) {
  display: none;
}

.bs-stepper .content.fade,
.bs-stepper-pane.fade {
  visibility: hidden;
  transition-duration: 0.3s;
  transition-property: opacity;
}

.bs-stepper-pane.fade.active,
.bs-stepper .content.fade.active {
  visibility: visible;
  opacity: 1;
}

.bs-stepper-pane.active:not(.fade),
.bs-stepper .content.active:not(.fade) {
  display: block;
  visibility: visible;
}

.bs-stepper-pane.dstepper-block,
.bs-stepper .content.dstepper-block {
  display: block;
}

.step:first-child .bs-stepper-progress::before {
  left: 50%; /* Setengah garis di awal (untuk Ajukan Pengaduan) */
}

.step:last-child .bs-stepper-progress::before {
  right: 50%; /* Setengah garis di akhir (untuk Selesai) */
}

.row {
  display: flex;
  justify-content: center; /* Pusatkan konten di dalam row */
}

.nav-pills {
  display: flex; /* Pastikan ul menggunakan flexbox */
  justify-content: center; /* Pusatkan items dalam nav-pills */
}

.custom-nav-item {
  flex: 1; /* Make both buttons take equal width */
  position: relative; /* Required for the divider */
}

.custom-nav-item:first-child .nav-link {
  border-top-left-radius: 10px; /* Add rounded corners for the first button */
  border-bottom-left-radius: 10px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none; /* Remove right border for the first button */
}

.custom-nav-item:last-child .nav-link {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 10px; /* Add rounded corners for the last button */
  border-bottom-right-radius: 10px;
}

/* Center divider between buttons */
.custom-nav-item:first-child::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%; /* Pindahkan ke tengah */
  transform: translateX(-50%); /* Pusatkan */
  width: 2px; /* Lebar divider */
  height: 100%;
}

@media (max-width: 768px) {
  .nav-pills {
    flex-direction: column; /* Stack buttons on smaller screens */
  }

  .custom-nav-item {
    margin-bottom: 0px; /* Add space between stacked buttons */
  }

  .custom-nav-item:first-child::after {
    display: none; /* Remove the divider on small screens */
  }

  .custom-nav-item:first-child .nav-link,
  .custom-nav-item:last-child .nav-link {
    border-radius: 10px; /* Rounded corners for both buttons on small screens */
  }
}

/* Stepper End */