/* Keseluruhan halaman */
body {
  font-family: Arial, sans-serif; /* Mengatur jenis font untuk seluruh halaman */
  margin: 0; /* Menghilangkan margin default dari browser */
  padding: 0; /* Menghilangkan padding default dari browser */
  display: flex; /* Menggunakan flexbox untuk layout */
  flex-direction: column; /* Mengatur arah flex menjadi kolom */
  height: 100%; /* Mengatur tinggi body menjadi 100% dari viewport */
  padding-top: 120px; /* Memberikan padding atas sebesar 120px */
  background-color: #fdfffd ; /* Mengatur warna latar belakang menjadi biru tua */
}

/* Gaya untuk teks */
.text {
  font-size: 24px; /* Mengatur ukuran font untuk elemen dengan kelas .text */
}

/* Gaya untuk teks tambahan yang disembunyikan */
.moreText {
  display: none; /* Menyembunyikan elemen dengan kelas .moreText */
}

/* Gaya untuk tombol baca lebih lanjut */
.read-more-btn {
  /* Memberikan padding pada tombol */
 /* Mengatur warna latar belakang tombol */
  color: #07ab22; /* Mengatur warna teks tombol */
  border: none; /* Menghilangkan border default */
  outline: none; /* Menghilangkan outline saat tombol difokuskan */
  font-size: 15px; /* Mengatur ukuran font tombol */
  cursor: pointer; /* Mengubah kursor menjadi pointer saat hover */
}
#wrap {
  margin: 20px auto;
  text-align: center;
}
#wrap br {
  display: none;
}
.button.left {
  display: inline-block;
  position: relative;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  background: #068f21;
  padding: 10px 30px;
  font-size: 14px;
  margin: 0 3px;
  color: #fff ;
  border-radius: 50px;
  border: none;
  text-transform: uppercase;
  text-decoration: none;
}
.button.right {
  display: inline-block;
  position: relative;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  background:#fff;
  padding: 10px 30px;
  font-size: 14px;
  margin: 0 3px;
  color: #068f21 ;
  border-radius: 50px;
  border: none;
  text-transform: uppercase;
  text-decoration: none;
}
.button i {
  margin-left: 15px;
  font-weight: normal;
  font-family: FontAwesome;
}

/* Menampilkan teks tambahan saat tombol diklik */
.text.show-more .moreText {
  display: inline; /* Menampilkan elemen dengan kelas .moreText saat .text memiliki kelas show-more */
}

/* Menyembunyikan titik saat teks tambahan ditampilkan */
.text.show-more .dots {
  display: none; /* Menyembunyikan elemen dengan kelas .dots saat .text memiliki kelas show-more */
}

/* Gaya untuk navbar */
.navbar {
  position: fixed; /* Menetapkan posisi navbar tetap di atas */
  top: 0; /* Menempatkan navbar di bagian atas */
  width: 100%; /* Mengatur lebar navbar menjadi 100% */
  z-index: 1050; /* Mengatur z-index untuk memastikan navbar di atas elemen lain */
  background-color: white; /* Mengatur warna latar belakang navbar menjadi putih */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Menambahkan bayangan pada navbar */
}

/* Gaya untuk hero section */
.hero {
  position: relative; /* Mengatur posisi relatif untuk elemen hero */
  text-align: center; /* Mengatur teks di dalam hero menjadi rata tengah */
}

/* Gaya untuk gambar di dalam hero section */
.hero img {
  width: 100%; /* Mengatur lebar gambar menjadi 100% dari kontainer */
  height: auto; /* Mengatur tinggi gambar secara otomatis */
}

/* Gaya untuk teks di dalam hero section */
.hero-text {
  position: absolute; /* Mengatur posisi teks menjadi absolut */
  top: 50%; /* Menempatkan teks di tengah vertikal */
  left: 50%; /* Menempatkan teks di tengah horizontal */
  transform: translate(-50%, -50%); /* Menggeser teks agar tepat di tengah */
  color: white; /* Mengatur warna teks menjadi putih */
}

/* Gaya untuk berita */
.news {
  display: flex; /* Menggunakan flexbox untuk layout berita */
  justify-content: space-around; /* Mengatur jarak antar item berita */
  padding: 20px; /* Memberikan padding pada elemen berita */
}

/* Gaya untuk item berita */
.news-item {
  display: flex; /* Menggunakan flexbox untuk item berita */
  align-items: center; /* Mengatur item berita agar rata tengah secara vertikal */
  margin-bottom: 10px; /* Memberikan margin bawah pada item berita */
}

/* Gaya untuk gambar berita */
.news-image {
  width: 50px; /* Mengatur lebar gambar berita */
  height: 50px; /* Mengatur tinggi gambar berita */
  margin-right: 10px; /* Memberikan margin kanan pada gambar berita */
}

/* Gaya untuk konten berita */
.news-content {
  flex-grow: 1; /* Membiarkan konten berita tumbuh sesuai ruang yang tersedia */
}

/* Gaya untuk konten yang disembunyikan */
#ch {
  display: none; /* Menyembunyikan elemen dengan ID ch */
}

/* Menyembunyikan label saat checkbox dicentang */
#ch:checked ~ label {
  display: none; /* Menyembunyikan label saat checkbox dicentang */
}

/* Menampilkan konten saat checkbox dicentang */
#ch:checked ~ .content {
  display: block; /* Menampilkan konten saat checkbox dicentang */
}

/* Gaya untuk konten */
.content {
  display: none; /* Menyembunyikan konten secara default */
}

/* Gaya untuk label */
label {
  display: inline-block; /* Mengatur label menjadi inline-block */
  cursor: pointer; /* Mengubah kursor menjadi pointer saat hover */
  color: #fff; /* Mengatur warna teks label menjadi putih */
  background-color: rgb(72, 113, 97); /* Mengatur warna latar belakang label */
  padding: 3px 13px; /* Memberikan padding pada label */
  border-radius: 3px; /* Mengatur sudut label menjadi melengkung */
  margin-top: 12px; /* Memberikan margin atas pada label */
}

/* Gaya untuk garis horizontal */
hr {
  margin: 10px 0; /* Memberikan margin atas dan bawah pada garis */
  border: 0; /* Menghilangkan border default */
  border-top: 1px solid #ddd; /* Mengatur garis atas dengan warna abu-abu */
}

/* Gaya untuk pendidikan */
.edu {
  text-align: center; /* Mengatur teks di dalam elemen pendidikan menjadi rata tengah */
  padding: 20px; /* Memberikan padding pada elemen pendidikan */
}

/* Gaya untuk item pendidikan */
.edu-item {
  background-color: #f8f9fa; /* Mengatur warna latar belakang item pendidikan */
  padding: 20px; /* Memberikan padding pada item pendidikan */
  margin: 10px; /* Memberikan margin pada item pendidikan */
  border-radius: 5px; /* Mengatur sudut item pendidikan menjadi melengkung */
}

/* Gaya untuk konten footer */
.footer-content {
  background-color: white; /* Mengatur warna latar belakang footer menjadi putih */
  color: white; /* Mengatur warna teks footer menjadi putih */
  text-align: center; /* Mengatur teks di dalam footer menjadi rata tengah */
  padding: 20px; /* Memberikan padding pada footer */
}

/* Menampilkan dropdown menu saat hover */
.navbar-nav .nav-item:hover .dropdown-menu {
  display: block; /* Menampilkan dropdown menu saat item navbar dihover */
}

/* Gaya untuk kontainer marquee */
.marquee-container {
  width: 100%; /* Mengatur lebar kontainer marquee menjadi 100% */
  overflow: hidden; /* Menyembunyikan konten yang melampaui batas kontainer */
  color: black; /* Mengatur warna teks menjadi hitam */
  padding: 10px 0; /* Memberikan padding atas dan bawah pada kontainer marquee */
  margin: 0; /* Menghilangkan margin pada kontainer marquee */
  position: relative; /* Mengatur posisi relatif untuk kontainer marquee */
  flex-grow: 1; /* Membiarkan kontainer marquee tumbuh sesuai ruang yang tersedia */
  white-space: nowrap; /* Mengatur konten marquee agar tidak terputus */
  padding: 0 10px; /* Memberikan padding kiri dan kanan pada kontainer marquee */
  display: flex; /* Menggunakan flexbox untuk kontainer marquee */
  align-items: center; /* Mengatur item marquee agar rata tengah secara vertikal */
}

/* Gaya untuk marquee */
.marquee {
  display: inline-block; /* Mengatur marquee menjadi inline-block */
  white-space: nowrap; /* Mengatur konten marquee agar tidak terputus */
  animation: marquee 15s linear infinite; /* Menambahkan animasi marquee */
}

/* Animasi marquee */
@keyframes marquee {
  0% {
    transform: translateX(100%);
  } /* Memindahkan konten dari kanan */
  100% {
    transform: translateX(-100%);
  } /* Memindahkan konten ke kiri */
}

/* Gaya untuk item carousel */
.carousel-item {
  transition: transform 0.5s ease-in-out; /* Menambahkan transisi pada transformasi item carousel */
}

/* Gaya untuk slide-in */
.slide-in {
  opacity: 0; /* Mengatur opasitas menjadi 0 untuk efek masuk */
  transform: translateX(-100%); /* Menggeser item ke kiri */
  transition: all 0.5s ease-out; /* Menambahkan transisi pada semua properti */
}

/* Gaya untuk slide-in yang terlihat */
.slide-in.visible {
  opacity: 1; /* Mengatur opasitas menjadi 1 saat terlihat */
  transform: translateX(0); /* Mengatur posisi kembali ke normal */
}

/* Gaya untuk konten */
.content {
  flex: 1; /* Membiarkan konten tumbuh sesuai ruang yang tersedia */
}

/* Gaya untuk footer */
footer {
  background-color: #228b22; /* Mengatur warna latar belakang footer menjadi hijau */
  color: white; /* Mengatur warna teks footer menjadi putih */
  padding: 20px; /* Memberikan padding pada footer */
  text-align: center; /* Mengatur teks di dalam footer menjadi rata tengah */
}

/* Mengatur tinggi untuk html dan body */
html,
body {
  height: 100%; /* Mengatur tinggi html dan body menjadi 100% dari viewport */
  margin: 0; /* Menghilangkan margin default */
}

/* Gaya untuk body */
body {
  display: flex; /* Menggunakan flexbox untuk layout */
  flex-direction: column; /* Mengatur arah flex menjadi kolom */
}

/* Gaya untuk konten */
.content {
  flex: 1; /* Membiarkan konten tumbuh sesuai ruang yang tersedia */
}

/* Gaya untuk footer */
footer {
  background-color: #228b22; /* Mengatur warna latar belakang footer menjadi hijau */
  color: white; /* Mengatur warna teks footer menjadi putih */
  padding: 20px; /* Memberikan padding pada footer */
  text-align: center; /* Mengatur teks di dalam footer menjadi rata tengah */
}

/* Gaya untuk judul berita */
.news-title {
  background-color: #004080; /* Mengatur warna latar belakang judul berita menjadi biru tua */
  color: white; /* Mengatur warna teks judul berita menjadi putih */
  padding: 5px; /* Memberikan padding pada judul berita */
  border-radius: 0; /* Mengatur sudut judul berita menjadi tajam */
  width: auto; /* Mengatur lebar judul berita secara otomatis */
  min-width: 110px; /* Mengatur lebar minimum judul berita */
  box-sizing: border-box; /* Mengatur box-sizing untuk menghitung padding dan border */
  font-size: 1rem; /* Mengatur ukuran font judul berita */
  white-space: nowrap; /* Mengatur teks judul berita agar tidak terputus */
}

/* Gaya untuk kontainer footer */
footer .container {
  text-align: left; /* Mengatur teks di dalam kontainer footer menjadi rata kiri */
}

/* Gaya untuk tab navigasi */
.nav-tabs {
  display: flex; /* Menggunakan flexbox untuk tab navigasi */
  flex-wrap: nowrap; /* Mengatur agar tab tidak membungkus */
}

/* Gaya untuk item navigasi */
.nav-item {
  flex: 1; /* Membiarkan item navigasi tumbuh sesuai ruang yang tersedia */
}

/* Gaya untuk link navigasi */
.nav-link {
  display: block; /* Mengatur link navigasi menjadi block */
  width: 100%; /* Mengatur lebar link navigasi menjadi 100% */
  text-align: center; /* Mengatur teks di dalam link navigasi menjadi rata tengah */
  padding: 10px; /* Memberikan padding pada link navigasi */
}

/* Gaya untuk item navigasi pada layar besar */
@media (min-width: 768px) {
  .nav-item {
    flex: 1; /* Membiarkan item navigasi tumbuh sesuai ruang yang tersedia */
  }
}

/* Gaya untuk item navigasi pada layar kecil */
@media (max-width: 768px) {
  body {
    font-size: 14px; /* Mengatur ukuran font dasar untuk mobile */
  }

  .navbar-brand span,
  .btn,
  .card-title,
  .card-text,
  .carousel-caption h5,
  .carousel-caption p,
  .navbar-nav .nav-link {
    font-size: 0.875rem; /* Mengatur ukuran font secara seragam */
  }

  .btn,
  .info-box .button,
  .btn-group-vertical .btn {
    padding: 0.5rem 1rem; /* Mengatur padding untuk tombol */
    width: 100%; /* Membuat tombol mengisi lebar kontainer */
    box-sizing: border-box; /* Menghitung padding dan border dalam lebar total */
  }

  .card.mb-3,
  .info-box {
    max-width: 100%; /* Memastikan kartu dan info box mengambil lebar penuh di mode mobile */
  }

  .navbar-nav {
    text-align: left; /* Menyelaraskan teks ke kiri */
    width: 100%; /* Membuat setiap item mengambil lebar penuh */
  }

  .navbar-expand-lg {
    top: 10px; /* Menyesuaikan posisi atas sesuai tinggi navbar pertama pada mobile */
  }

  img.fullscreen-image {
    max-width: 100%; /* Memastikan gambar menyusut pada layar kecil */
    max-height: 100%; /* Memastikan gambar menyusut pada layar kecil */
  }

  .navbar .form-control {
    padding: 12px 15px; /* Menambahkan padding yang lebih besar */
    margin-left: 15px; /* Memberikan sedikit ruang dari kiri */
    font-size: 1rem; /* Meningkatkan ukuran font */
    width: auto; /* Menyesuaikan lebar secara otomatis */
    flex-grow: 1; /* Membiarkan elemen tumbuh sesuai ruang yang tersedia */
  }

  .navbar .btn {
    padding: 8px 12px; /* Mengurangi padding untuk tombol */
    font-size: 0.875rem; /* Mengurangi ukuran font pada tombol */
  }
}

/* Gaya untuk video carousel */
.carousel-video {
  width: 100%; /* Mengatur lebar video carousel menjadi 100% */
  height: 315px; /* Mengatur tinggi video carousel */
  overflow: hidden; /* Menyembunyikan konten yang melampaui batas */
  position: relative; /* Mengatur posisi relatif untuk video carousel */
}

/* Gaya untuk iframe di dalam video carousel */
.carousel-video iframe {
  width: 100%; /* Mengatur lebar iframe menjadi 100% */
  height: 100%; /* Mengatur tinggi iframe menjadi 100% */
  border: none; /* Menghilangkan border pada iframe */
}

/* Gaya untuk item sejarah */
.history-item {
  background-color: #f8f9fa; /* Mengatur warna latar belakang item sejarah */
  border-radius: 8px; /* Mengatur sudut item sejarah menjadi melengkung */
  padding: 20px; /* Memberikan padding pada item sejarah */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Menambahkan bayangan pada item sejarah */
}

/* Gaya untuk gambar sejarah */
.history-image {
  width: 150px; /* Mengatur lebar gambar sejarah */
  height: auto; /* Mengatur tinggi gambar secara otomatis */
  border-radius: 8px; /* Mengatur sudut gambar sejarah menjadi melengkung */
}

/* Gaya untuk konten sejarah */
.history-content {
  max-width: 600px; /* Mengatur lebar maksimum konten sejarah */
}

/* Gaya untuk tautan baca lebih lanjut */
.read-more {
  color: #007bff; /* Mengatur warna tautan menjadi biru */
  text-decoration: none; /* Menghilangkan garis bawah pada tautan */
  font-weight: bold; /* Mengatur teks menjadi tebal */
  display: none; /* Menyembunyikan tautan secara default */
}

/* Gaya untuk tautan baca lebih lanjut saat hover */
.read-more:hover {
  text-decoration: underline; /* Menambahkan garis bawah saat hover */
}

/* Gaya default untuk mode web */
.footer-logo-container {
  display: flex; /* Menggunakan flexbox untuk kontainer logo footer */
  align-items: center; /* Mengatur item logo agar rata tengah secara vertikal */
  margin-bottom: 20px; /* Memberikan margin bawah pada kontainer logo */
}

/* Gaya untuk logo footer */
.footer-logo {
  margin-right: 40px; /* Memberikan margin kanan pada logo footer */
}

/* Penyesuaian mode mobile */
@media (max-width: 768px) {
  .footer-logo-container {
    display: block; /* Mengubah kontainer logo menjadi block */
    text-align: center; /* Mengatur teks di dalam kontainer logo menjadi rata tengah */
  }

  .footer-logo {
    margin: 0 auto 20px; /* Mengatur margin logo footer */
  }
}

/* Gaya untuk judul kartu */
.card-title {
  font-family: "YourDesiredFont", sans-serif; /* Mengatur jenis font untuk judul kartu */
  font-size: 1.25rem; /* Mengatur ukuran font judul kartu */
}

/* Gaya untuk teks kartu */
.card-text {
  font-family: "YourDesiredFont", sans-serif; /* Mengatur jenis font untuk teks kartu */
}

/* Gaya untuk gambar responsif */
.img-fluid {
  width: 100%; /* Mengatur lebar gambar menjadi 100% */
  height: auto; /* Mengatur tinggi gambar secara otomatis */
  aspect-ratio: 16/9; /* Mengatur rasio aspek gambar */
  object-fit: cover; /* Memastikan gambar menutupi kontainer */
}

/* Gaya untuk gambar galeri */
.gallery-img {
  width: 100%; /* Mengatur lebar gambar galeri menjadi 100% */
  height: auto; /* Mengatur tinggi gambar galeri secara otomatis */
  aspect-ratio: 16 / 9; /* Mengatur rasio aspek gambar galeri */
  object-fit: cover; /* Memastikan gambar menutupi kontainer */
}

/* Gaya untuk kartu */
.card {
  border: none; /* Menghilangkan border pada kartu */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Menambahkan bayangan pada kartu */
}

/* Gaya untuk badan kartu */
.card-body {
  padding: 10px; /* Memberikan padding pada badan kartu */
}

/* Gaya untuk teks kartu */
.card-text {
  font-size: 1em; /* Mengatur ukuran font teks kartu */
  color: #333; /* Mengatur warna teks kartu menjadi abu-abu gelap */
}

/* Gaya untuk kontainer swiper */
.swiper-container {
  width: 100%; /* Mengatur lebar kontainer swiper menjadi 100% */
  height: 315px; /* Mengatur tinggi kontainer swiper */
}

/* Gaya untuk slide swiper */
.swiper-slide {
  display: flex; /* Menggunakan flexbox untuk slide swiper */
  justify-content: center; /* Mengatur item di dalam slide agar rata tengah secara horizontal */
  align-items: center; /* Mengatur item di dalam slide agar rata tengah secara vertikal */
}

/* Gaya untuk gambar fullscreen */
img.fullscreen-image {
  width: 100%; /* Mengatur lebar gambar fullscreen menjadi 100% */
  height: auto; /* Mengatur tinggi gambar fullscreen secara otomatis */
  max-width: 100vw; /* Memastikan gambar tidak melebihi lebar viewport */
  max-height: 100vh; /* Memastikan gambar tidak melebihi tinggi viewport */
  object-fit: cover; /* Memastikan gambar menutupi kontainer */
}

/* Penyesuaian mode mobile untuk gambar fullscreen */
@media (max-width: 768px) {
  img.fullscreen-image {
    width: 100%; /* Mengatur lebar gambar fullscreen menjadi 100% */
    height: auto; /* Mengatur tinggi gambar fullscreen secara otomatis */
    max-width: 100%; /* Memastikan gambar menyusut pada layar kecil */
    max-height: 100%; /* Memastikan gambar menyusut pada layar kecil */
  }
}

/* Gaya untuk gambar */
img {
  max-width: auto; /* Mengatur lebar maksimum gambar */
  height: auto; /* Mengatur tinggi gambar secara otomatis */
}

/* Gaya untuk dropdown menu di navbar */
.navbar .dropdown-menu {
  position: absolute; /* Mengatur posisi dropdown menu menjadi absolut */
  z-index: 1050; /* Mengatur z-index untuk memastikan dropdown di atas elemen lain */
}

/* Memastikan navbar kedua tetap di atas */
.navbar-expand-lg {
  position: fixed; /* Mengatur posisi navbar kedua menjadi tetap */
  top: 76px; /* Menempatkan navbar kedua di bawah navbar pertama */
  width: 100%; /* Mengatur lebar navbar kedua menjadi 100% */
  background-color: white; /* Mengatur warna latar belakang navbar kedua menjadi putih */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Menambahkan bayangan pada navbar kedua */
}

/* Menyesuaikan padding body untuk navbar tetap */
body {
  padding-top: 120px; /* Memberikan padding atas pada body untuk menghindari tumpang tindih dengan navbar */
}

/* Gaya untuk brand navbar dan link navigasi */
.navbar-brand,
.navbar-nav .nav-link {
  padding: 10px 15px; /* Memberikan padding pada brand navbar dan link navigasi */
}

/* Mengatur ulang navbar pertama agar tetap di atas */
.navbar-green {
  position: fixed; /* Mengatur posisi navbar pertama menjadi tetap */
  top: 0; /* Menempatkan navbar pertama di bagian atas */
  width: 100%; /* Mengatur lebar navbar pertama menjadi 100% */
  z-index: 1050; /* Mengatur z-index untuk memastikan navbar di atas elemen lain */
  background-color: #008000; /* Mengatur warna latar belakang navbar pertama menjadi hijau */
}

/* Penyesuaian mode mobile untuk navbar kedua */
@media (max-width: 768px) {
  .navbar-expand-lg {
    top: 10px; /* Menyesuaikan posisi atas navbar kedua pada mobile */
  }
}

/* Mengatur ulang beberapa properti untuk navbar pada tampilan mobile */
@media (max-width: 768px) {
  .navbar {
    position: static; /* Menghilangkan posisi tetap pada navbar */
    width: 100%; /* Memastikan navbar mengambil lebar penuh */
  }
  .container-fluid {
    padding-right: 0; /* Menghilangkan padding kanan */
    padding-left: 0; /* Menghilangkan padding kiri */
    margin-right: auto; /* Menyesuaikan margin kanan */
    margin-left: auto; /* Menyesuaikan margin kiri */
  }
  .navbar-nav {
    flex-direction: column; /* Mengubah arah flex items menjadi vertikal */
    width: 100%; /* Memastikan item navbar mengambil lebar penuh */
  }
  .nav-link {
    text-align: left; /* Menyelaraskan teks ke kiri */
    width: 100%; /* Memastikan link mengambil lebar penuh */
  }
}

/* Penyesuaian untuk tombol toggler navbar pada mobile */
@media (max-width: 768px) {
  .navbar-toggler {
    position: absolute; /* Menggunakan posisi absolut untuk tombol toggler */
    right: 10px; /* Menempatkan tombol di sebelah kanan */
    top: 50%; /* Menempatkan tombol di tengah secara vertikal */
    transform: translateY(
      -50%
    ); /* Mengatur posisi vertikal agar tepat di tengah */
  }
}

/* Mengatur ulang gaya teks untuk tulisan 'tam' pada mode mobile */
@media (max-width: 768px) {
  .navbar-brand {
    font-weight: bold; /* Membuat teks menjadi tebal */
    font-size: 1.2rem; /* Meningkatkan ukuran font */
  }
}

/* Styles for chat popup */
.customer-service img {
  transition: transform 0.3s;
}

.customer-service img:hover {
  transform: scale(1.1); /* Slightly enlarge on hover */
}

.btn-close {
  background: white; /* Transparent background for close button */
  border: none; /* No border */
  width: 15px; /* Default width */
  height: 15px; /* Default height */
}

@media (max-width: 768px) {
  .btn-close {
    width: 15px; /* Mobile width */
    height: 15px; /* Mobile height */
  }
}

/* Media queries for navbar styles */
@media (max-width: 768px) {
  .navbar-expand-lg {
    margin-top: 100px !important; /* Mengatur margin atas untuk mode mobile */
  }
  .navbar-nav {
    display: flex;
    justify-content: flex-end; /* Mengatur item navbar ke kanan */
    width: 100%; /* Pastikan navbar mengambil lebar penuh */
  }
  .navbar-toggler {
    float: right !important; /* Pastikan tombol garis tiga berada di pojok kanan */
  }
  .nav-link.dropdown-toggle {
    float: right !important;
  }
  .input-group .form-control {
    height: 35px; /* Set height for mobile */
  }
  .input-group .btn {
    height: 35px; /* Set height for mobile */
    padding: 5px 10px; /* Adjust padding */
    font-size: smaller; /* Make the button text smaller */
  }
}

/* Additional styles for customer service button */
@keyframes slideIn {
  from {
    transform: translateX(100%); /* Inizia fuori dallo schermo a destra */
  }
  to {
    transform: translateX(0); /* Termina nella posizione originale */
  }
}