/* Styling untuk Kontainer Utama */
.gtranslate_wrapper {
  /* Agar dropdown tidak terlalu melebar, sesuaikan sesuai kebutuhan */
  max-width: 250px;
  margin: 10px auto; /* Memberi jarak atas/bawah dan memusatkan */
  padding: 5px;
  /* border: 1px solid #ddd; Tambahkan border tipis */
  border-radius: 8px; /* Sudut sedikit membulat */
  /* background-color: #f9f9f9; Warna latar belakang */
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); Sedikit bayangan */
  display: flex; /* Gunakan flexbox untuk penataan internal */
  justify-content: center; /* Pusat elemen di dalamnya */
  align-items: center;
}

/* Styling untuk Elemen Select (Dropdown itu sendiri) */
.gtranslate_wrapper select {
  width: 100%; /* Agar dropdown mengisi lebar kontainer */
  padding: 8px 12px;
  /* border: 1px solid #ccc; */
  border-radius: 6px;
  /* background-color: #fff; */
  font-size: 16px;
  color: #333;
  cursor: pointer;
  -webkit-appearance: none; /* Hapus gaya default browser di WebKit */
  -moz-appearance: none; /* Hapus gaya default browser di Mozilla */
  appearance: none; /* Hapus gaya default browser */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23333" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>'); /* Panah dropdown kustom */
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  transition: border-color 0.2s ease;
}

/* Styling saat dropdown di-hover atau difokuskan */
.gtranslate_wrapper select:hover,
.gtranslate_wrapper select:focus {
  border-color: #007bff;
  outline: none; /* Hapus outline default browser saat fokus */
}

/* Styling untuk setiap Opsi dalam Dropdown */
/* Perlu diingat bahwa menata <option> sangat terbatas dan tidak selalu didukung konsisten di semua browser.
   Biasanya bendera akan muncul di dalam <option> secara otomatis jika GTranslate menyediakannya. */
.gtranslate_wrapper option {
  font-size: 15px;
  padding: 5px 10px;
  /* Warna latar belakang dan teks bisa ditimpa oleh browser */
}

/* Mengatur ukuran bendera di dalam dropdown jika GTranslate menyertakannya.
   Ini biasanya sudah diatur oleh GTranslate itu sendiri berdasarkan flag_size. */
.gtranslate_wrapper option img {
  vertical-align: middle;
  margin-right: 8px;
}

.border-bottom-none {
  border-bottom: none !important;
}

.background-1 {
  background-image: url(../img/background/dekstop/background1-dekstop.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: auto;
  height: auto;
}

.background-2 {
  background-image: url(../img/background/dekstop/background2-dekstop.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: auto;
  height: auto;
}

.background-3 {
  background-image: url(../img/background/dekstop/background3-dekstop.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: auto;
  height: auto;
}

.background-4 {
  background-image: url(../img/background/dekstop/background4-dekstop.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: auto;
  height: auto;
}

.background-5 {
  background-image: url(../img/background/dekstop/background5-dekstop.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: auto;
  height: auto;
}

.background-6 {
  background-image: url(../img/background/dekstop/background6-dekstop.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: auto;
  height: auto;
}

.background-7 {
  background-image: url(../img/background/dekstop/background7-dekstop.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: auto;
  height: auto;
}

.bg-breadcrumb-introduction {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-introduction-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-our-values {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-ourvalues-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-vision-mission {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-visionmission-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-legality {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-legality-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-our-team {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-ourteam-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-services {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-services-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-services-category {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-servicescategory-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-services-detail {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-servicesdetail-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-project {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-project-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-project-detail {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-projectdetail-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-media-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-news {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-news-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-news-detail {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-newsdetail-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-gallery {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-gallery-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-article {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-article-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-article-detail {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-articledetail-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-career {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-career-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-career-detail {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-careerdetail-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-contact {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-contact-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-become-our-partner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-becomeourpartner-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-privacy-policy {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-privacypolicy-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-terms-and-conditions {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-termsconditions-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

.bg-breadcrumb-disclaimer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
    url(../img/carousel/carousel-disclaimer-dekstop-1920x810.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0 60px 0;
  transition: 0.5s;
}

/* --- Tablet --- */
@media (max-width: 991px) {
  .background-1 {
    background-image: url(../img/background/tablet/background1-tablet.png);
  }

  .background-2 {
    background-image: url(../img/background/tablet/background2-tablet.png);
  }

  .background-3 {
    background-image: url(../img/background/tablet/background3-tablet.png);
  }

  .background-4 {
    background-image: url(../img/background/tablet/background4-tablet.png);
  }

  .background-5 {
    background-image: url(../img/background/tablet/background5-tablet.png);
  }

  .background-6 {
    background-image: url(../img/background/tablet/background6-tablet.png);
  }

  .background-7 {
    background-image: url(../img/background/tablet/background7-tablet.png);
  }

  .bg-breadcrumb-introduction {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-introduction-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-our-values {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-ourvalues-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-vision-mission {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-visionmission-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-legality {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-legality-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-our-team {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-ourteam-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-services {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-services-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-services-category {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-servicescategory-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-services-detail {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-servicesdetail-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-project {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-project-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-project-detail {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-projectdetail-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-media {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-media-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-news {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-news-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-news-detail {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-newsdetail-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-gallery {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-gallery-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-article {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-article-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-article-detail {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-articledetail-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-career {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-career-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-career-detail {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-careerdetail-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-contact {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-contact-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-become-our-partner {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-becomeourpartner-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-privacy-policy {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-privacypolicy-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-terms-and-conditions {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-termsconditions-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-disclaimer {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-disclaimer-tablet-911x577.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
}

/* --- Mobile --- */
@media (max-width: 767px) {
  .background-1 {
    background-image: url(../img/background/mobile/background1-mobile.png);
    background-position: top center;
  }

  .background-2 {
    background-image: url(../img/background/mobile/background2-mobile.png);
    background-position: top center;
  }

  .background-3 {
    background-image: url(../img/background/mobile/background3-mobile.png);
    background-position: top center;
  }

  .background-4 {
    background-image: url(../img/background/mobile/background4-mobile.png);
    background-position: top center;
  }

  .background-5 {
    background-image: url(../img/background/mobile/background5-mobile.png);
    background-position: top center;
  }

  .background-6 {
    background-image: url(../img/background/mobile/background6-mobile.png);
    background-position: top center;
  }

  .background-7 {
    background-image: url(../img/background/mobile/background7-mobile.png);
    background-position: top center;
  }

  .bg-breadcrumb-introduction {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-introduction-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-our-values {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-ourvalues-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-vision-mission {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-visionmission-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-legality {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-legality-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-our-team {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-ourteam-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-services {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-services-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-services-category {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-servicescategory-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-services-detail {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-servicesdetail-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-project {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-project-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-project-detail {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-projectdetail-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-media {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-media-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-news {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-news-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-news-detail {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-newsdetail-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-gallery {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-gallery-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-article {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-article-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-article-detail {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-articledetail-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-career {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-career-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-career-detail {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-careerdetail-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-contact {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-contact-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-become-our-partner {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-becomeourpartner-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-privacy-policy {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-privacypolicy-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-terms-and-conditions {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-termsconditions-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-disclaimer {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-disclaimer-mobile-767x1363.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
}

/* --- (Opsional, di bawah 480px) --- */
@media (max-width: 480px) {
  .background-1 {
    background-image: url(../img/background/mobile-480/background1-mobile-480.png);
    background-position: top center;
  }

  .background-2 {
    background-image: url(../img/background/mobile-480/background2-mobile-480.png);
    background-position: top center;
  }

  .background-3 {
    background-image: url(../img/background/mobile-480/background3-mobile-480.png);
    background-position: top center;
  }

  .background-4 {
    background-image: url(../img/background/mobile-480/background4-mobile-480.png);
    background-position: top center;
  }

  .background-5 {
    background-image: url(../img/background/mobile-480/background5-mobile-480.png);
    background-position: top center;
  }

  .background-6 {
    background-image: url(../img/background/mobile-480/background6-mobile-480.png);
    background-position: top center;
  }

  .background-7 {
    background-image: url(../img/background/mobile-480/background7-mobile-480.png);
    background-position: top center;
  }

  .bg-breadcrumb-introduction {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-introduction-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-introduction {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-introduction-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-vision-mission {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-visionmission-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-legality {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-legality-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-our-team {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-ourteam-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-services {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-services-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-services-category {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-servicescategory-mobile480-480x853.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-services-detail {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-servicesdetail-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-project {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-project-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-project-detail {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-projectdetail-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-media {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-media-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-news {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-news-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-news-detail {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-newsdetail-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-gallery {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-gallery-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-article {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-article-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-article-detail {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-articledetail-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-career {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-career-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-career-detail {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-careerdetail-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-contact {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-contact-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-become-our-partner {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-becomeourpartner-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-privacy-policy {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-privacypolicy-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-terms-and-conditions {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-termsconditions-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .bg-breadcrumb-disclaimer {
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(237, 27, 36, 0.3)),
      url(../img/carousel/carousel-disclaimer-mobile480-480x853.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
}

.text-justify {
  text-align: justify !important;
}

.btn-primary:focus {
  box-shadow: none !important;
}

textarea,
input {
  box-shadow: none !important;
}

/* CSS untuk styling rating bintang */
.rating-stars {
  display: block;
  direction: rtl;
  font-size: 2em;
  text-align: left;
}

.rating-stars input {
  display: none;
}

.rating-stars label {
  color: #ccc;
  cursor: pointer;
  padding: 0 2px;
  transition: color 0.2s;
}

.rating-stars label:before {
  content: "★";
}

/* Saat hover, bintang dan bintang di kirinya akan berubah warna */
.rating-stars input:checked ~ label,
.rating-stars label:hover,
.rating-stars label:hover ~ label {
  color: #ffd700; /* Warna bintang yang aktif (emas) */
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* tambahan untuk menyembunyikan konten video secara default */
.video-container {
  display: none;
}

/* untuk tombol yang aktif */
.btn-toggle.active {
  background-color: #ed1b24;
  color: white;
}

.btn-primary i {
  transition: transform 0.3s ease;
}

.btn-primary:hover i {
  transform: translateX(5px);
}

.blog .blog-item-client {
  border-radius: 10px;
  transition: 0.5s;
  text-align: center;
}

.fs-7 {
  font-size: 0.875rem !important; /* 14px */
}