/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%; /* Pastikan html dan body memiliki tinggi 100% */
}

body {
  font-family: "Poppins", sans-serif;
  background-color: #f4f4f4; /* Warna latar belakang */
  margin: 0; /* Menghapus margin untuk body */
  padding: 0; /* Menghapus padding untuk body */
}

.container {
  min-height: 100%; /* Memastikan konten mengisi penuh */
  display: flex;
  flex-direction: column; /* Mengatur isi menjadi kolom */
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #333;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  color: white;
}

.navbar .logo {
  display: flex;
  align-items: center;
  color: white; /* Warna teks menjadi putih */
}

.navbar .logo img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin-right: 10px;
  object-fit: cover;
}

.navbar .logo span {
  color: rgb(123, 121, 121); /* Warna teks menjadi putih */
  font-size: 13px; /* Sesuaikan ukuran teks */
}

/* Navbar Style */
.nav-links {
  width: 100%;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  justify-content: flex-start;
}
/* .nav-links {
  width: 100%;
  list-style: none;
  padding: 0;
} */

.nav-links li {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2px 15px;
}

/* .nav-links a,
.nav-links button {
  text-decoration: none;
  font-size: 16px;
  color: white;
  padding: 8px 15px;
  border-radius: 5px;
  transition: background 0.3s ease;
  display: block;
} */

.nav-links a {
  text-decoration: none;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}

.nav-links a:hover,
.nav-links button:hover {
  background-color: #555555;
}

.nav-links .dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-links .dropdown .dropdown-toggle {
  display: flex;
  align-items: center;
  font-size: 16px;
  justify-content: space-between; /* Menyebarkan ruang antara teks dan panah */
}

.nav-links .dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  list-style: none;
  padding: 5px 0;
  border: 1px solid #ddd;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 100;
  min-width: 160px;
}

.nav-links .dropdown .dropdown-menu li {
  border-bottom: 1px solid #ddd;
  margin: 2px 0; /* Mengurangi jarak antar item */
  padding: 8px 15px; /* Atur padding dalam item */
}

.nav-links .dropdown .dropdown-menu li:last-child {
  border-bottom: none; /* Hilangkan garis di item terakhir */
}

.nav-links .dropdown .dropdown-menu li a {
  display: block;
  padding: 1px 15px;
  color: #333;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  transition: background 0.3s ease;
}

/* Efek hover pada dropdown */
.nav-links .dropdown .dropdown-menu li a:hover {
  background-color: #f5f5f5;
}

/* Tampilkan dropdown hanya saat ada kelas 'show' */
.nav-links .dropdown .dropdown-menu.show {
  display: block;
}

.nav-links .dropdown:hover .dropdown-menu {
  display: block;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  z-index: 10;
}

.nav-links .dropdown .dropdown-toggle .arrow-down1 {
  margin-left: 50px; /* Menambahkan jarak antara teks dan panah */
}

.nav-links .dropdown .dropdown-toggle .arrow-down2 {
  margin-left: 30px; /* Menambahkan jarak antara teks dan panah */
}

/* Opsional: Rotasi tanda panah saat dropdown aktif */
.dropdown:hover .arrow-down {
  transform: rotate(180deg);
}

.bar {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 4px 0;
  transition: 0.4s;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .nav-links {
    display: none; /* Sembunyikan menu di mobile */
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0; /* Posisi dari kiri */
    width: 100%; /* Lebar 100% agar full layar */
    height: 100vh; /* Menutupi seluruh layar */
    background-color: #000000;
    border-radius: 0;
    padding: 20px 0; /* Padding lebih untuk jarak antar item */
  }

  .nav-links .dropdown .dropdown-toggle .arrow-down1 {
  margin-left: 235px; /* Menambahkan jarak antara teks dan panah */
  }

  .nav-links .dropdown .dropdown-toggle .arrow-down2 {
  margin-left: 160px; /* Menambahkan jarak antara teks dan panah */
  }

  .nav-links li {
    margin: 15px 0; /* Jarak antar menu lebih besar */
  }

  .menu-toggle {
    display: flex; /* Tampilkan icon menu toggle di mobile */
  }

  .nav-links.active {
    display: flex; /* Tampilkan menu saat aktif */
  }
}

/* Container untuk flyer */
.flyer-container1 {
  background-color: black; /* Latar belakang hitam */
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}

.flyer-img {
  width: 100%;
  height: auto; /* Mempertahankan proporsi gambar */
  max-width: 100%; /* Memastikan gambar tidak melebihi lebar kontainer */
  border-radius: 8px; /* Optional: menambahkan sudut melingkar */
}

/* flayer pembangunan */
.flyer-pembangunan {
  background-color: black; /* Latar belakang hitam */
  padding: 10px;
  border-radius: 10px;
  text-align: center;
}

.flyer-img {
  width: 100%;
  height: auto; /* Mempertahankan proporsi gambar */
  max-width: 100%; /* Memastikan gambar tidak melebihi lebar kontainer */
  border-radius: 8px; /* Optional: menambahkan sudut melingkar */
}

/* Media Query untuk layar kecil */
@media (max-width: 768px) {
  .flyer-container {
    width: 100%;
  }

  .flyer-img {
    max-width: 100%; /* Mempersempit gambar di layar kecil */
  }
}

@media (min-width: 1024px) {
  /* Tampilan desktop */
  .flyer-container {
    width: 100%;
  }
  .flyer-img {
    max-width: 100%;
  }
}

.contact-section {
  background-color: #f9f9f9;
  padding: 40px 20px;
  text-align: center;
}

.contact-section h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #333;
}

.contact-info, .contact-address, .contact-hours {
  margin-bottom: 20px;
}

.contact-info h3,
.contact-address h3,
.contact-hours h3 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 20px;
}

.contact-section p {
  font-size: 16px;
  color: #555;
}


/* content1 */
#image-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: rgb(0, 0, 0);
}

.image-container {
  position: relative;
  padding: 0; /* Menghilangkan padding untuk menghindari ruang tambahan */
  overflow: hidden;
  background-color: rgba(7, 7, 7);
}

.responsive-image {
  display: block;
  height: auto;
}

@media (min-width: 768px) {
  .image-caption {
    font-size: 2em; /* Ukuran font judul lebih besar di tablet */
  }
}

@media (min-width: 1024px) {
  .image-caption {
    font-size: 2.5em; /* Ukuran font judul lebih besar di desktop */
  }
}

.content2 {
  display: flex;
  flex-direction: column; /* Mengatur agar konten di bawah satu sama lain */
  align-items: center; /* Memusatkan konten */
  padding: -10px; /* Ruang di sekitar konten */
  background-color: rgb(
    0,
    0,
    0
  ); /* Warna latar belakang (misalnya, abu-abu terang) */
  margin: 20px 0;
}

.content2-pastor {
  position: relative; /* Agar bisa memposisikan konten di atas gambar */
}

.pastor-image {
  position: relative;
  width: 100%;
  max-width: 400px; /* Atur lebar maksimum gambar */
  border-radius: 10px; /* Sudut melengkung untuk gambar */
  overflow: hidden; /* Mencegah konten keluar dari batas */
}

.responsive-image {
  display: block;
  width: 100%; /* Gambar memenuhi lebar container */
  height: auto; /* Menjaga rasio gambar */
}

.misi-visi {
  background-color: #000000;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  margin-top: 40px;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

.isi-visimisi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
}
.isi-visimisi p {
  align-items: center;
  color: #ffffff;
}

.visi,
.misi {
  flex: 1;
  text-align: center;
  margin: 10px;
}

.visi h2,
.misi h2 {
  font-size: 20px; /* Ukuran khusus untuk judul visi dan misi */
  font-weight: normal;
  margin: 0 0 10px;
}

.visi p,
.misi p {
  font-size: 18px; /* Ukuran khusus untuk isi teks visi dan misi */
  font-weight: bold;
  margin: 0;
}

/* Media Query untuk layar kecil (ponsel) */
@media (max-width: 768px) {
  .isi-visimisi {
    flex-direction: column; /* Me visi dan misi kebawah pada layar kecil */
    align-items: center;
  }

  .visi,
  .misi {
    width: 100%;
    text-align: center;
    margin: 10px 0;
  }
}

/* Media Queries untuk Responsivitas */
@media (max-width: 768px) {
  .content2 {
    padding: 10px; /* Mengurangi padding pada layar kecil */
  }

  .pastor-wrapper {
    max-width: 90%; /* Mengatur lebar maksimum pada layar kecil */
  }

  .pastor-info {
    font-size: 14px; /* Mengurangi ukuran font pada layar kecil */
  }

  h1 {
    font-size: 18px; /* Mengurangi ukuran font untuk nama pada layar kecil */
  }

  h2 {
    font-size: 16px; /* Mengurangi ukuran font untuk judul visi dan misi */
  }
}

@media (max-width: 480px) {
  .pastor-wrapper {
    max-width: 100%; /* Memastikan gambar mengisi lebar penuh pada layar sangat kecil */
  }

  .pastor-info {
    font-size: 12px; /* Ukuran font lebih kecil untuk layar sangat kecil */
  }

  h1 {
    font-size: 16px; /* Ukuran font lebih kecil untuk nama pada layar sangat kecil */
  }

  h2 {
    font-size: 14px; /* Ukuran font lebih kecil untuk judul visi dan misi */
  }
}

/* untuk Youtube */
.youtube-videos {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap; /* Mencegah turun ke bawah */
  gap: 20px; /* Jarak antar video */
  padding: 20px; /* Ruang dalam kontainer */
  background-color: #000000; /* Warna background */
  border-radius: 10px; /* Membuat sudut melengkung */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
  overflow-x: auto; /* Supaya bisa di-scroll jika layar kecil */
  white-space: nowrap; /* Cegah elemen turun */
  margin-bottom: 20px;
}

.youtube-video {
  flex: 1 1 auto;
  text-align: center;
  width: 45%; /* Masing-masing video mengambil hampir setengah lebar */
  max-width: 400px; /* Batasi ukuran maksimum */
}

.youtube-video img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

.youtube-video a {
  display: block;
}

.title-youtube {
  text-align: center;
  color: #000;
  font-size: 30px;
  margin-top: 40px;
}

.thumbnail {
  width: 100%;
  height: auto;
  border-radius: 8px; /* Membuat sudut gambar melengkung */
  transition: transform 0.3s ease;
}

.thumbnail:hover {
  transform: scale(1.05); /* Animasi saat hover */
}

.youtube-videos p {
  margin-top: 10px;
  font-size: 16px;
  color: #ffffff; /* Warna teks */
}

/* Responsif: Jika layar terlalu kecil */
@media (max-width: 600px) {
  .youtube-videos {
    flex-wrap: nowrap; /* Paksa tetap sejajar */
    overflow-x: auto; /* Bisa di-scroll ke samping */
  }

  .youtube-video {
    flex: 0 0 auto; /* Pastikan tidak mengecil */
    width: 50%; /* Setengah layar */
  }
}

/* kontent about */
.content {
  background-color: rgb(13, 14, 13);
  text-align: center;
  padding: 100px;
}

.content h1 {
  color: white;
  font-size: 40px;
}

/* Menghapus padding untuk konten About yang tidak terpakai */
#content-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
}

/* Mengatur gaya untuk item konten */
.content-item {
  width: 45%;
  padding: 50px;
}

/* Gaya umum untuk heading dan paragraf */
h1 {
  font-size: 90px;
}

p {
  margin: 20px 0 !important; /* Menambahkan !important untuk memastikan ini diterapkan */
  color: #666; /* Warna untuk teks paragraf */
  line-height: 1.6; /* Jarak antar baris untuk keterbacaan */
}

.pastor-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Memberikan jarak antar elemen */
}

.pastor-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 250px; /* Lebar elemen */
  border: 1px solid #ddd; /* Border untuk keseluruhan elemen */
  padding: 15px;
  border-radius: 8px; /* Membulatkan sudut border */
  background-color: #f9f9f9;
}

.pastor-title {
  text-align: center;
  font-size: 30px;
  color: #000;
  font-weight: bold;
  margin-bottom: 20px;
}

.pastor-item img {
  max-width: 100%; /* Membuat gambar responsif */
  margin-bottom: 10px;
}

.pastor-info {
  margin: 0; /* Menghapus margin default */
  padding: 0;
}

.pastor-info h4,
.pastor-info p {
  margin: 5px 0; /* Jarak kecil antar teks */
  font-size: 15px;
}

.pastor-info p {
  color: #555; /* Warna teks deskripsi */
  font-size: 14px;
}

/* Media Queries untuk layar sedang */
@media (max-width: 1024px) {
  .pastor-section {
    grid-template-columns: repeat(3, 1fr); /* 3 kolom di layar sedang */
  }
}

/* Media Queries untuk layar kecil */
@media (max-width: 768px) {
  .pastor-section {
    grid-template-columns: repeat(2, 1fr); /* 2 kolom di layar kecil */
    gap: 15px; /* Jarak antar elemen lebih kecil */
  }
}

/* Media query untuk tampilan di perangkat seluler */
@media (max-width: 768px) {
  .pastor-section {
    gap: 10px;
  }

  .pastor-item {
    flex: 1 1 calc(50% - 10px); /* 2 kolom */
    max-width: calc(50% - 10px); /* Pastikan tidak melebihi lebar kolom */
  }
}

/* Media Query untuk responsif */
@media (max-width: 768px) {
  .content {
    padding: 50px; /* Mengurangi padding di layar kecil */
  }

  #content-section {
    flex-direction: column; /* Mengubah arah flex menjadi kolom di layar kecil */
    align-items: center; /* Memusatkan konten di tengah */
  }

  .content-item {
    width: 90%; /* Mengubah lebar menjadi 90% untuk responsivitas */
    padding: 20px; /* Mengurangi padding di layar kecil */
  }

  h1 {
    font-size: 40px; /* Ukuran teks lebih kecil di layar kecil */
  }

  p {
    font-size: 14px; /* Ukuran teks lebih kecil di layar kecil */
  }
}

.department-section {
  padding: 20px;
  background-color: #000000;
  border-radius: 8px;
  margin-top: 40px; /* Jarak antara Our Pastor dan Department */
  margin-bottom: 20px;
}

.department-title {
  font-size: 40px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
  margin-top: 20px;
}

.department-content {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.department-item {
  flex: 1 1 200px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.department-item strong {
  display: block;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 20px;
}

/* Media query untuk tampilan di perangkat seluler */
@media (max-width: 768px) {
  .department-content {
    gap: 10px;
  }

  .department-item {
    flex: 1 1 calc(50% - 10px); /* 2 kolom */
    max-width: calc(50% - 10px); /* Pastikan tidak melebihi lebar kolom */
  }
}

/* bantuan */
.help-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  background-color: #0d0d0d;
  color: white;
  padding: 60px 40px;
  gap: 30px;
}

.help-left {
  flex: 1 1 300px;
}

.help-left h2 {
  font-size: 42px;
  font-weight: bold;
  margin: 0;
}

.help-right {
  flex: 1 1 300px;
  background-image: url('/img/background01.jpg'); /* ganti path sesuai lokasi file */
  background-size: cover;
  background-position: center;
  padding: 30px;
  color: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.help-right p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: white;
}

.help-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: white;
  color: black;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
}

.help-button:hover {
  background-color: #79f350;
  transform: scale(1.0s);
}

/* Responsive di layar kecil */
@media (max-width: 768px) {
  .help-section {
    flex-direction: column;
    padding: 30px 20px;
  }

  .help-left h2 {
    font-size: 32px;
    margin-bottom: 20px;
  }

  .help-right {
    padding: 20px;
  }
}

/* Style Bantuan */
/* --- CONTACT US SECTION STYLES --- */
.jpcc-contact-wrapper {
    padding: 60px 20px;
    background-color: #1a1a1a; /* Ensure the wrapper matches body bg */
    flex-grow: 1;
}

.jpcc-contact-container {
    max-width: 1200px;
    margin: 0 auto;
    background: #2a2a2a; /* Slightly lighter dark for the main container */
    border-radius: 16px;
    padding: 40px;
    color: #f0f0f0; /* Text inside container is light */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Darker shadow for dark theme */
}

/* Judul & Subjudul */
.jpcc-contact-title {
    text-align: center;
    font-size: 3.5em; /* Larger title */
    font-weight: 700;
    color: #f0f0f0;
    margin-bottom: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.jpcc-contact-subtitle {
    text-align: center;
    font-size: 1.2em;
    color: #aaa;
    margin-bottom: 50px;
}

.jpcc-contact-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
}

.jpcc-contact-form {
    flex: 2;
    min-width: 300px;
    background-color: #2a2a2a; /* Darker panel background */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.jpcc-contact-info {
    flex: 1;
    min-width: 280px;
    background-color: #2a2a2a; /* Darker panel background */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.jpcc-contact-info h3 {
    font-size: 1.8em;
    color: #f0f0f0;
    margin-bottom: 20px;
    font-weight: 600;
}

.jpcc-contact-info p {
    color: #ccc;
    font-size: 1em;
    margin-bottom: 10px;
}

.jpcc-contact-info strong {
    font-size: 1.3em;
    color: #007bff; /* Highlight WhatsApp number */
    display: block;
    margin: 15px 0;
    font-weight: 700;
}

.jpcc-contact-info ul {
    list-style: none; /* Changed from disc to none for cleaner look */
    padding: 0;
    margin-top: 20px;
    margin-bottom: 30px;
}

.jpcc-contact-info ul li {
    color: #ccc;
    font-size: 0.95em;
    margin-bottom: 8px;
}

.jpcc-contact-info a {
    display: inline-block;
    background-color: #25D366; /* WhatsApp green */
    color: white;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
    font-size: 1.05em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jpcc-contact-info a:hover {
    background-color: #1EAF55;
}

/* Sticky */
.sticky-info {
    position: sticky;
    top: 100px;
    align-self: flex-start;
}

/* --- FORM STYLES --- */
.form-group {
    margin-bottom: 25px;
    position: relative;
}

/* Custom Select Styling */
.custom-select {
    position: relative;
    width: 100%;
}

.custom-select select {
    display: none; /* Hide original select box */
}

.select-selected {
    background-color: #3a3a3a; /* Darker input background */
    padding: 14px 16px;
    cursor: pointer;
    border-radius: 4px;
    color: #f0f0f0;
    border: 1px solid #444; /* Darker border */
    font-size: 1em;
    transition: all 0.3s ease;
    min-height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

/* Arrow for select box */
.select-selected:after {
    position: absolute;
    content: "";
    top: 50%;
    right: 15px;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border: solid #f0f0f0;
    border-width: 0 2px 2px 0;
    transition: transform 0.3s ease;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
    transform: translateY(-50%) rotate(-135deg);
}

/* --- MODIFIED: Select Dropdown Options Styling (White Background, Black Text) --- */
.select-items {
    background-color: #ffffff; /* White background for options */
    position: absolute;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Standard shadow */
    z-index: 99;
    margin-top: 5px;
    border: 1px solid #ccc; /* Lighter border for white background */
}

.select-items div {
    color: #333333; /* Dark text for options */
    padding: 12px 16px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease;
}

/* Highlight the options when hovering: */
.select-items div:hover, .same-as-selected {
    background-color: #e0e0e0; /* Lighter gray on hover */
}
/* --- END MODIFIED --- */


/* Form Floating Label styles */
.form-floating {
    position: relative;
    margin-bottom: 25px;
}

.form-floating input,
.form-floating textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #444;
    background-color: #3a3a3a;
    color: #f0f0f0;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    outline: none;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    min-height: 48px; /* Ensure consistent height with select */
}

.form-floating textarea {
    min-height: 120px; /* Adjust as needed */
    resize: vertical;
}

.form-floating input:focus,
.form-floating textarea:focus {
    border-color: #007bff;
    background-color: #303030;
}

.form-floating label {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #888;
    pointer-events: none;
    transition: all 0.3s ease;
    font-size: 1em;
}

.form-floating input:focus + label,
.form-floating input:not(:placeholder-shown) + label,
.form-floating textarea:focus + label,
.form-floating textarea:not(:placeholder-shown) + label {
    top: 0;
    font-size: 0.75em;
    color: #007bff;
    background-color: #2a2a2a; /* Match panel background */
    padding: 0 5px;
    left: 10px;
    transform: translateY(-50%);
}


/* Submit Button */
.jpcc-contact-form button[type="submit"] {
    background-color: #007bff;
    color: white;
    padding: 14px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
    transition: background-color 0.3s ease;
    margin-top: 15px;
}

.jpcc-contact-form button[type="submit"]:hover {
    background-color: #0056b3;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .jpcc-contact-title {
        font-size: 3em;
    }
    .jpcc-contact-content {
        flex-direction: column;
        gap: 30px;
    }
    .jpcc-contact-form,
    .jpcc-contact-info {
        flex: none;
        width: 100%;
        min-width: unset;
    }
}

@media (max-width: 576px) {
    .jpcc-contact-wrapper {
        padding: 40px 15px;
    }
    .jpcc-contact-title {
        font-size: 2.2em;
    }
    .jpcc-contact-subtitle {
        font-size: 1em;
        margin-bottom: 30px;
    }
    .jpcc-contact-form,
    .jpcc-contact-info {
        padding: 20px;
    }
    .jpcc-contact-info h3 {
        font-size: 1.5em;
    }
    .form-group, .form-floating {
        margin-bottom: 20px;
    }
}




/* Gereja Cabang */
/* Styling Section Gereja Cabang */
.branch-section {
  padding: 20px;
  text-align: center;
  background-color: #000000;
}

.title-cabang {
  text-align: center;
  margin-bottom: 20px;
  color: #000000;
}

.branch-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.branch-item {
  width: 200px;
  cursor: pointer;
  text-align: center;
  color: white;
}

.branch-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
  transition: transform 0.3s;
}

.branch-item:hover img {
  transform: scale(1.05);
}

.branch-item strong {
  font-size: 1.2em;
  color: #ffffff;
}

/* Modal Styling */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  max-width: 600px;
  text-align: left;
}

.close-btn {
  float: right;
  font-size: 1.5em;
  font-weight: bold;
  cursor: pointer;
  color: #333;
}

.modal img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.modal p {
  margin: 5px 0;
  font-size: 1em;
  color: #555;
}

/* Sunday Service */
.sunday-service {
  text-align: center;
  padding: 10px;
  background-color: #000000;
  border-radius: 5px;
  width: 100%;
  margin-bottom: 20px;
}

.title-Sunday-Service {
  padding: 20px;
  font-size: 2rem;
  text-align: center;
  color: #ffffff;
  text-align: center;
  margin-bottom: 20px;
  background-color: #000000;
}

.service-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.service-images {
  display: flex; /* Gunakan flexbox untuk tata letak horizontal */
  gap: 10px; /* Jarak antar gambar */
  justify-content: center; /* Posisikan gambar di tengah */
}

.service-images img {
  width: 100%; /* Gambar akan mengikuti lebar container */
  max-width: 300px; /* Batas lebar maksimal untuk setiap gambar */
  height: auto; /* Proporsi gambar tetap terjaga */
  border-radius: 5px; /* Sudut gambar sedikit melengkung */
  transition: transform 0.3s ease; /* Efek animasi saat hover */
}

.service-images img:hover {
  transform: scale(1.05); /* Zoom saat hover */
}

.service-details {
  text-align: left;
  max-width: 1300px;
  background-color: rgb(14, 14, 14);
  margin-top: -10px;
}

.service-flayer {
  background-color: rgb(0, 0, 0); /* Warna hitam sebagai background */
  padding: 15px; /* Menambahkan ruang di dalam div */
  width: 100%;
  text-align: center;
  border-radius: 10px; /* Membuat sudut lebih lembut */
  margin-bottom: 10px;
  margin-top: -10px;
}

.service-flayer img {
  width: 100%; /* Gambar akan menyesuaikan dengan lebar container */
  max-width: 600px; /* Batas maksimal lebar gambar */
  height: auto; /* Menjaga proporsi gambar */
  display: block; /* Menghilangkan celah bawah gambar */
  margin: 0 auto; /* Memusatkan gambar */
  border-radius: 7px; /* Opsional: Membuat sudut gambar lebih lembut */
  margin-bottom: 20px;
  background-color: #000000;
}

.service-details p {
  margin: 10px 0;
  font-size: 1.50rem;
  text-align: center;
  color: #fffdfd;
  background-color: #000000;
}

@media (max-width: 768px) {
  .service-images {
    flex-direction: column; /* Gambar ditampilkan vertikal di layar kecil */
    align-items: center;
  }

  .service-images img {
    max-width: 90%; /* Sesuaikan lebar untuk layar kecil */
  }
}

/* Y2A Service Styles */

.jadwal-container {
  text-align: left;
  max-width: 1300px;
  background-color: rgb(14, 14, 14);
  margin-top: -15px;
  margin-bottom: -15px;
}

.jadwal-container p {
  margin: -20px 0;
  font-size: 1rem;
  text-align: center;
  color: #fffdfd;
  background-color: #000000;
}

.jadwal-flayer {
  background-color: rgb(0, 0, 0); /* Warna hitam sebagai background */
  margin-top: 5px;
  padding: 15px; /* Menambahkan ruang di dalam div */
  width: 100%;
  text-align: center;
  border-radius: 10px; /* Membuat sudut lebih lembut */
  margin-bottom: 3px;
}

.jadwal-flayer img {
  width: 100%; /* Gambar akan menyesuaikan dengan lebar container */
  max-width: 600px; /* Batas maksimal lebar gambar */
  height: auto; /* Menjaga proporsi gambar */
  display: block; /* Menghilangkan celah bawah gambar */
  margin: 0 auto; /* Memusatkan gambar */
  border-radius: 7px; /* Opsional: Membuat sudut gambar lebih lembut */
  margin-bottom: 20px;
  background-color: #000000;
}
/* Gaya untuk section Ibadah Y2A */
#ibadah-y2a {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Judul */
#ibadah-y2a h1 {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #444;
  margin-bottom: 20px;
}

/* Paragraf */
#ibadah-y2a p {
  font-size: 18px;
  text-align: justify;
  margin-bottom: 20px;
  color: #555;
}

/* Gaya untuk ayat */
#ibadah-y2a .verse {
  margin-top: 20px;
}

#ibadah-y2a .verse strong {
  font-size: 18px;
  color: #444;
}

#ibadah-y2a .verse blockquote {
  margin: 10px 0;
  padding: 10px 20px;
  font-style: italic;
  background: #f9f9f9;
  border-left: 4px solid #007bff;
  color: #666;
}

.content-ibadah {
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  text-align: center;
  max-width: 600px;
  margin: 20px auto;
}

/* Style umum untuk container dokumentasi */
.dokumentasi-container {
  display: flex;
  margin-top: 40px;
  gap: 40px; /* Jarak antar konten */
  padding: 20px; /* Padding pada container */
  background-color: #060606; /* Warna latar belakang container */
}

/* Judul setiap konten */
.dokumentasi-container h3,
.content-ibadah h3 {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

/* Kontainer gambar */
.image-container1,
.image-container2 {
  display: grid; /* Membuat grid untuk gambar */
  grid-template-columns: repeat(
    auto-fill,
    minmax(150px, 1fr)
  ); /* Responsive grid */
  gap: 15px; /* Jarak antar gambar */
  justify-content: center;
  padding: 10px;
}

/* Gambar */
.image-container1 img,
.image-container2 img {
  width: 100%; /* Gambar menyesuaikan lebar grid */
  height: 150px; /* Tinggi tetap untuk gambar */
  object-fit: cover; /* Memastikan gambar tidak terdistorsi */
  border-radius: 8px; /* Sudut melengkung */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Bayangan gambar */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efek animasi */
}

/* Efek hover pada gambar */
.image-container1 img:hover,
.image-container2 img:hover {
  transform: scale(1.05); /* Memperbesar gambar saat dihover */
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Bayangan lebih besar */
}

/* Style untuk content-ibadah */
.content-ibadah {
  padding: 20px;
  background-color: #fff; /* Warna latar belakang putih */
  border-radius: 10px; /* Sudut melengkung pada konten */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Bayangan konten */
  margin-bottom: 50px;
}

/* Style untuk Junior Church */
.junior-church {
  text-align: start;
  padding: 5px;
  padding-top: 20px;
  margin-top: -50px;
}
.junior-church p {
  color: white;
  background-color: #000000;
  font-size: 20px;
}

.title-JC {
  font-size: 36px;
  background-color: #000000;
  color: white;
  text-align: center;
  margin-bottom: 20px;
}

.service-description {
  width: 100%;
  display: flex;
  flex-direction: column; /* Agar teks di atas dan gambar di bawah */
  align-items: center; /* Pusatkan konten */
  text-align: center; /* Pusatkan teks */
}

/* .service-description img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 10px;
} */

.service-flayer-jc {
  background-color: rgb(0, 0, 0);
  padding: 15px;
  width: 100%;
  text-align: center;
  border-radius: 10px;
  margin-bottom: -20px;
  margin-top: -30px;
}

.service-flayer-jc img {
  width: 100%; /* Gambar akan menyesuaikan dengan lebar container */
  max-width: 600px; /* Batas maksimal lebar gambar */
  height: auto; /* Menjaga proporsi gambar */
  display: block; /* Menghilangkan celah bawah gambar */
  margin: 0 auto; /* Memusatkan gambar */
  border-radius: 7px; /* Opsional: Membuat sudut gambar lebih lembut */
  margin-bottom: 10px;
  background-color: #000000;
}

/* Container untuk gambar */
.service-images {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px; /* Spasi antar gambar */
  margin-top: 20px;
}

.image-wrapper {
  background-color: #000000;
  display: flex; /* Aktifkan flexbox untuk elemen pembungkus */
  justify-content: center; /* Pusatkan gambar secara horizontal */
  align-items: center; /* Pusatkan gambar secara vertikal */
  border: 2px solid #ddd; /* Tambahkan border opsional */
  border-radius: 8px; /* Berikan sudut melengkung */
  padding: 10px; /* Ruang di sekitar gambar */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Tambahkan efek bayangan */
}

/* Ukuran gambar besar */
.service-images img {
  display: block;
  width: 100%; /* Lebar gambar penuh mengikuti wrapper */
  max-width: 400px; /* Ukuran maksimum gambar */
  height: auto; /* Menjaga aspek rasio gambar */
  border-radius: 5px; /* Melengkungkan sudut gambar */
}

/* Responsif untuk layar kecil */
@media (max-width: 768px) {
  .junior-church h1 {
    font-size: 28px;
  }

  .service-images {
    flex-direction: column; /* Menyusun gambar ke bawah pada layar kecil */
    gap: 10px;
  }

  .service-images img {
    max-width: 90%; /* Gambar lebih kecil di layar kecil */
  }
}

/* Container utama untuk informasi Sunday School */
.sunday-school-info {
  background-color: #f4f4f4; /* Latar belakang abu terang */
  border: 1px solid #ddd; /* Border ringan */
  border-radius: 10px; /* Sudut melengkung */
  padding: 20px;
  margin-bottom: 30px; /* Jarak dengan bagian berikutnya */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Bayangan lembut */
  text-align: center; /* Teks rata tengah */
}

.sunday-school-info img {
  max-width: 100%; /* Pastikan gambar tidak melebihi parent */
  height: auto; /* Menjaga aspek rasio gambar */
  display: block; /* Hindari celah di bawah gambar */
  margin-top: 15px; /* Beri jarak antara teks dan gambar */
  border-radius: 10px; /* Opsional: Beri sudut melengkung pada gambar */
}

.sunday-school-info h2 {
  font-size: 28px;
  color: #333; /* Warna teks utama */
  margin-bottom: 10px;
}

.sunday-school-info p {
  font-size: 16px;
  color: #555; /* Warna teks deskripsi */
  margin: 10px 0;
}

.sunday-categories {
  list-style-type: none; /* Hilangkan bullet */
  padding: 0;
  margin: 20px 0;
}

.sunday-categories li {
  font-size: 16px;
  color: #333; /* Warna teks */
  margin: 5px 0;
}

/* Jadwal ibadah */
.schedule {
  font-weight: bold;
  color: #000; /* Warna teks tebal */
  font-size: 18px;
}

/* Container utama untuk konten Sunday School */
.sunday-school-container {
  display: flex; /* Membuat semua kategori sejajar horizontal */
  flex-wrap: wrap; /* Membungkus kategori ke baris berikutnya jika ruang tidak cukup */
  gap: 20px; /* Jarak antar kategori */
  justify-content: space-around; /* Memusatkan semua kategori */
  padding: 20px;
}

/* Gaya untuk setiap kategori */
.sunday-category {
  background-color: #000000; /* Latar belakang kategori */
  border: 1px solid #ddd; /* Border ringan */
  border-radius: 10px; /* Sudut melengkung */
  padding: 15px;
  width: 300px; /* Lebar tetap untuk setiap kategori */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Bayangan lembut */
  text-align: center; /* Teks rata tengah */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efek hover untuk kategori */
.sunday-category:hover {
  transform: translateY(-10px); /* Naik sedikit saat dihover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Tambah bayangan saat dihover */
}

/* Judul kategori */
.sunday-category h3 {
  font-size: 24px;
  color: #ffffff;
  margin-bottom: 10px;
}

/* Deskripsi usia anak */
.sunday-category p {
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 15px;
}

/* Gaya untuk gambar */
.sunday-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Jarak antar gambar */
  justify-content: center;
}

.sunday-images img {
  width: 200px; /* Ukuran lebar gambar */
  height: 200px; /* Ukuran tinggi gambar */
  object-fit: cover; /* Memastikan gambar tidak terdistorsi */
  border-radius: 8px; /* Sudut melengkung pada gambar */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Bayangan ringan */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover efek untuk gambar */
.sunday-images img:hover {
  transform: scale(1.1); /* Perbesar sedikit saat dihover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Tambah bayangan saat dihover */
}

/* Responsif untuk layar kecil */
@media (max-width: 768px) {
  .sunday-category {
    width: 100%; /* Lebar penuh untuk setiap kategori */
  }

  .sunday-images img {
    width: 100px; /* Ukuran lebih kecil untuk layar kecil */
    height: 100px;
  }
}

/* CSS untuk isi GBI_Metro */
#gbi_metro {
  padding: 20px;
  background-color: #bbb9b9;
}

.gereja {
  text-align: center;
  margin-bottom: 30px;
}

.title-metro {
  font-size: 35px;
  font-weight: bold;
  margin-bottom: 10px;
  background-color: #000;
  color: white;
}

.gereja img {
  width: 100%;
  max-width: 600px;
  border-radius: 10px;
}

.gembala {
  margin-top: 20px;
  /* text-align: center; */
}

.title-metro-gembala {
  font-size: 35px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #000;
}

.gembala-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.gembala-info img {
  width: 40%;
  height: 30%;
  /* border-radius: 50%;
  object-fit: cover; */
}

.gembala-detail {
  font-size: 16px;
}

.gembala-detail a {
  color: blue;
  text-decoration: none;
}

/* GBi Cosmos */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.section-title {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.branch {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.branch-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.branch-header h3 {
  font-size: 15px !important; /* Ukuran teks h3 */
  font-weight: bold !important;
  color: #333; /* Warna teks */
  margin: 10px 0; /* Memberi jarak atas dan bawah teks */
}

.branch-header p {
  font-size: 18px !important;
  font-weight: bold;
}

.images {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.images img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.images img:hover {
  transform: scale(1.05);
}

.branch-info {
  text-align: center;
  margin-top: 20px;
}

.branch-info p {
  margin: 5px 0;
  color: #555;
  font-size: 1rem;
}

.branch-info strong {
  margin: 5px 0;
  color: #555;
  font-size: 1.5rem;
}

.branch-info a {
  color: #4caf50;
  text-decoration: none;
  font-weight: bold;
}

.branch-info a:hover {
  text-decoration: underline;
}

.map iframe {
  margin-top: 15px;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.branch-photo {
  text-align: center;
  margin-top: 20px;
}

.large-photo {
  width: 100% !important; /* Ukuran penuh container */
  max-width: 300px !important; /* Maksimal ukuran gambar */
  height: auto !important; /* Memastikan proporsi gambar tetap */
  border-radius: 8px; /* Opsional: Membuat sudut gambar sedikit melengkung */
  margin-bottom: 15px; /* Memberi jarak antara gambar dan teks */
}

/* Ujung Serdang */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.section-title-Home {
  text-align: center;
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: bold;
}

.branch {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.branch-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 20px; /* Jarak antar elemen jika ada */
}

.branch-header h3 {
  font-size: 15px !important; /* Memperbesar teks */
  font-weight: bold !important; /* Membuat teks tebal */
  color: #444; /* Warna teks */
  margin: 10px 0; /* Memberi jarak atas dan bawah */
}

.branch-header p {
  font-size: 18px !important;
  font-weight: bold;
}

.branch-home a:hover {
  text-decoration: underline;
}

.branch-home {
  text-align: center;
  margin-top: 20px;
}

.branch-home p {
  margin: 5px 0;
  color: #555;
  font-size: 1rem;
}

.branch-home strong {
  color: #555;
  font-size: 1.5rem;
  font-weight: bold;
}

.branch-home a {
  color: #4caf50;
  text-decoration: none;
  font-weight: bold;
}

.branch-header img {
  width: 150px;
  height: 150px;
  /* border-radius: 50%;
  object-fit: cover; */
  margin-bottom: 10px;
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}

.map iframe {
  margin-top: 15px;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.contact {
  font-size: 14px;
  color: #007bff;
}

.images {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.image-wrapper {
  background-color: black; /* Background hitam */
  padding: 10px; /* Memberi sedikit ruang di sekitar gambar */
  border-radius: 8px; /* Memberi sudut yang melengkung */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.image-wrapper img {
  width: 100%;
  max-width: 400px; /* Menentukan ukuran maksimum gambar */
  height: auto; /* Menjaga proporsi gambar */
  border-radius: 5px; /* Sudut gambar melengkung */
  transition: transform 0.3s ease; /* Efek transisi pada hover */
}

/* GBI MCP */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.section-title-MCP {
  text-align: center;
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: bold;
}

.branch {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.branch-header {
  text-align: center;
  margin-bottom: 20px;
}

.branch-header h3 {
  margin: 10px 0;
  font-size: 20px !important;
  font-weight: bold !important;
  color: #333;
}

.branch-header p {
  margin: 5px 0;
  font-size: 17px !important;
  font-weight: bold !important;
  color: #555;
}

.map iframe {
  margin-top: 15px;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.branch-header img {
  width: 150px;
  height: 150px;
  /* border-radius: 50%;
  object-fit: cover; */
  margin-bottom: 10px;
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}

.images {
  display: flex;
  justify-content: center; /* Pusatkan gambar secara horizontal */
  gap: 16px; /* Tambahkan jarak antar gambar */
  padding: 0; /* Pastikan tidak ada padding tambahan */
  margin: 0; /* Hilangkan margin */
}

.image-wrapper {
  background: none; /* Tidak ada latar belakang */
  border: none; /* Hilangkan border jika ada */
}

.image-wrapper img {
  display: block; /* Hilangkan ruang default pada inline-block */
  max-width: 100%; /* Pastikan gambar tidak melebihi ukuran kontainernya */
  height: auto; /* Pertahankan proporsi gambar */
}

.branch-mcp {
  text-align: center;
  margin-top: 20px;
}

.branch-mcp p {
  margin: 5px 0;
  color: #555;
  font-size: 1rem;
}

.branch-mcp strong {
  margin: 5px 0;
  color: #555;
  font-size: 1.5rem;
}

.branch-mcp a {
  color: #4caf50;
  text-decoration: none;
  font-weight: bold;
}

/* GBI Pasar 7 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.section-title-pasar7 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: bold;
}

.branch {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.branch-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 20px; /* Jarak antar elemen jika ada */
}

.branch-header h3 {
  margin: 10px 0;
  font-size: 20px !important;
  font-weight: bold !important;
  color: #444;
}

.branch-header p {
  font-size: 15px !important;
  font-weight: bold;
}

.map iframe {
  margin-top: 15px;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.large-photo {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto 15px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.branch-header img {
  width: 150px;
  height: 150px;
  /* border-radius: 50%;
  object-fit: cover; */
  margin-bottom: 10px;
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}

.contact {
  font-size: 14px;
  color: #007bff;
}

.images {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.images img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.images img:hover {
  transform: scale(1.05);
}

.branch-pasar7 {
  text-align: center;
  margin-top: 20px;
}

.branch-pasar7 p {
  margin: 5px 0;
  color: #555;
  font-size: 1rem;
}

.branch-pasar7 strong {
  margin: 5px 0;
  color: #555;
  font-size: 1.5rem;
}

.branch-pasar7 a {
  color: #4caf50;
  text-decoration: none;
  font-weight: bold;
}

/* GBI Tigajuhar */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.section-title-tigajuhar {
  text-align: center;
  margin-bottom: 30px;
  font-size: 30px;
  font-weight: bold;
}

.branch {
  margin-bottom: 40px;
}

.branch-header {
  text-align: center;
  margin-bottom: 20px;
}

.branch-header h3 {
  margin: 10px 0;
  font-size: 17px !important;
  color: #333;
}

.branch-header p {
  margin: 5px 0;
  font-size: 18px !important;
  color: #555;
}

.branch-header img {
  width: 150px;
  height: 150px;
  /* border-radius: 50%;
  object-fit: cover; */
  margin-bottom: 10px;
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}

.contact {
  font-size: 14px;
  color: #007bff;
}

.images {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.image-wrapper {
  background-color: black; /* Background hitam */
  padding: 10px; /* Memberi sedikit ruang di sekitar gambar */
  border-radius: 8px; /* Memberi sudut yang melengkung */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.image-wrapper img {
  width: 100%;
  max-width: 400px; /* Menentukan ukuran maksimum gambar */
  height: auto; /* Menjaga proporsi gambar */
  border-radius: 5px; /* Sudut gambar melengkung */
  transition: transform 0.3s ease; /* Efek transisi pada hover */
}

.image-wrapper img:hover {
  transform: scale(1.05); /* Menambah efek zoom ketika gambar di-hover */
}

.map iframe {
  margin-top: 15px;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.large-photo {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto 15px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.branch-tigajuhar {
  text-align: center;
  margin-top: 20px;
}

.branch-tigajuhar p {
  margin: 5px 0;
  color: #555;
  font-size: 1rem;
}

.branch-tigajuhar strong {
  color: #555;
  font-size: 1.5rem;
  font-weight: bold;
}

.branch-tigajuhar a {
  color: #4caf50;
  text-decoration: none;
  font-weight: bold;
}

/* Ibaadah Online */
.content-wrapper {
  text-align: center;
  padding: 20px;
  background-color: #000000;
  color: white;
  margin-bottom: 80px;
}

.content-wrapper h1 {
  margin: 0;
  font-size: 28px;
}

.content-wrapper p {
  margin: 10px 0 20px;
  font-size: 16px;
}

.ibadah-section {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.ibadah-section h2 {
  font-size: 24px;
  color: #4caf50;
}

.ibadah-section p {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.thumbnail {
  max-width: 100%;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.thumbnail:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.link-button {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #ff4d4d;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.link-button:hover {
  background-color: #e63939;
}

.footer {
  text-align: center;
  padding: 10px;
  background-color: #333;
  color: white;
  font-size: 14px;
}

/* Container utama untuk xi bagian service */
.content-pemuda,
.content-ibadah {
  text-align: left;
  padding-top: 50px;
  font-size: 30px;
  background-color: #0f0f0f; /* Menghilangkan background */
}

/* Jarak antar foto pada content-pemuda */
.content-pemuda .image-container1 {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* Jarak antar gambar */
  justify-content: center; /* Pusatkan gambar */
  margin-top: 20px; /* Jarak atas gambar dari judul */
}

/* Jarak antar foto pada content-ibadah */
.content-ibadah .image-container2 {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* Jarak antar gambar */
  justify-content: center; /* Pusatkan gambar */
  margin-top: 20px; /* Jarak atas gambar dari judul */
}

.content-pemuda h3,
.content-ibadah h3 {
  font-size: 30px;
  color: #f7f4f4;
}

/* Mengatur gambar untuk responsif */
.image-container1 img,
.image-container2 img {
  width: 100%; /* Gambar akan menyesuaikan lebar kontainer */
  max-width: 300px; /* Maksimal lebar gambar */
  height: auto; /* Mempertahankan rasio aspek */
  object-fit: cover; /* Menjaga agar gambar tetap proporsional */
}

/* Responsif untuk layar kecil (HP) */
@media (max-width: 768px) {
  .image-container1,
  .image-container2 {
    overflow-x: auto; /* Membuat scroll horizontal */
  }

  .image-container1 img,
  .image-container2 img {
    max-width: 100%; /* Gambar akan memenuhi lebar layar di HP */
  }

  .content-pemuda,
  .content-ibadah {
    font-size: 20px; /* Mengurangi ukuran font untuk layar kecil */
    padding: 15px; /* Mengurangi padding untuk layar kecil */
    margin-top: 40px;
  }

  .container h2 {
    font-size: 40px; /* Ukuran font untuk h2 lebih kecil di layar kecil */
    padding: 50px; /* Mengurangi padding untuk h2 */
  }
}

/* bagian dokumentasi */
.judul-utama {
  text-align: center;
  color: #fff;
  background-color: #0f0f0f;
  padding: 90px;
  margin-bottom: 40px;
  border-radius: 5px;
  font-size: 70px; /* Ukuran font default */
}

h2 {
  color: #ddd;
  font-size: 30px;
}

.kegiatan {
  margin-bottom: 40px;
  border-radius: 5px;
  background-color: black; /* Menghapus background */
}

.gambar-kegiatan {
  max-height: 300px;
  display: block;
  margin: 10px auto;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%; /* Membuat gambar responsif */
  height: 200px; /* Menjaga proporsi gambar */
}

/* Media query untuk layar HP */
@media (max-width: 768px) {
  .gambar-kegiatan {
    height: 180px; /* Atur tinggi lebih kecil untuk HP */
  }
}

/* Media Queries untuk Responsivitas */
@media (max-width: 768px) {
  .judul-utama {
    font-size: 50px; /* Ukuran font untuk tablet */
    padding: 60px; /* Mengurangi padding untuk tablet */
  }
}

@media (max-width: 480px) {
  .judul-utama {
    font-size: 30px; /* Ukuran font untuk ponsel */
    padding: 30px; /* Mengurangi padding untuk ponsel */
  }
}

.gambar-container {
  display: flex;
  flex-wrap: wrap; /* Membuat gambar tetap rapi dalam baris */
  justify-content: center; /* Memusatkan gambar di dalam kontainer */
}

/* Mengatur ukuran gambar dan responsivitas */
.gambar-item {
  flex: 1 1 30%; /* Mengatur lebar gambar */
  max-width: 300px; /* Membatasi lebar maksimum gambar */
  margin: 10px; /* Jarak antar gambar */
}

.gambar-kegiatan {
  width: 100%; /* Membuat gambar memenuhi lebar kontainer */
  height: auto; /* Mempertahankan proporsi gambar */
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Media Queries untuk Responsivitas */
@media (max-width: 768px) {
  .gambar-container {
    flex-direction: row; /* Gambar akan ditampilkan ke samping di tablet */
  }

  .gambar-item {
    flex: 1 1 45%; /* Gambar akan lebih besar di tablet */
  }
}

@media (max-width: 480px) {
  .gambar-container {
    flex-direction: column; /* Gambar akan ditampilkan ke bawah di ponsel */
  }

  .gambar-item {
    flex: 1 1 100%; /* Gambar memenuhi lebar di ponsel */
  }
}

/* Komunitas Styles */
/* Section Styles */
.content-section {
  margin: 20px auto;
  padding: 20px;
  max-width: 800px;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.content-section h1 {
  font-size: 20px;
  margin-bottom: 10px;
  text-align: center;
}

.content-section p {
  font-size: 16px;
  margin-bottom: 10px;
}

/* Kategori FC Styles */
.fc-kategori1 {
  margin-top: 20px;
  padding: 20px;
  background: #000000;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.fc-kategori2 {
  margin-top: 20px;
  padding: 20px;
  background: #000000;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.fc-kategori3 {
  margin-top: 20px;
  padding: 20px;
  background: #000000;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.fc-kategori4 {
  margin-top: 20px;
  padding: 20px;
  background: #000000;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.fc-kategori5 {
  margin-top: 20px;
  padding: 20px;
  background: #000000;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.fc-kategori1 .fc-section1 {
  margin-top: 15px;
  padding: 15px;
  background: #000000;
  border-left: 3px solid #3498db;
  border-radius: 5px;
}

.fc-kategori2 .fc-section2 {
  margin-top: 15px;
  padding: 15px;
  background: #000000;
  border-left: 3px solid #3498db;
  border-radius: 5px;
}

.fc-kategori3 .fc-section3 {
  margin-top: 15px;
  padding: 15px;
  background: #000000;
  border-left: 3px solid #3498db;
  border-radius: 5px;
}

.fc-kategori4 .fc-section4 {
  margin-top: 15px;
  padding: 15px;
  background: #000000;
  border-left: 3px solid #3498db;
  border-radius: 5px;
}

.fc-kategori5 .fc-section5 {
  margin-top: 15px;
  padding: 15px;
  background: #000000;
  border-left: 3px solid #3498db;
  border-radius: 5px;
}

.fc-kategori1 .fc-section1 h2 {
  font-size: 20px;
  margin-bottom: 5px;
  color: #ffffff;
}

.fc-kategori1 .fc-section1 p {
  margin: 0;
  color: white;
}

.fc-kategori2 .fc-section2 h2 {
  font-size: 20px;
  margin-bottom: 5px;
  color: #ffffff;
}

.fc-kategori2 .fc-section2 p {
  margin: 0;
  color: white;
}

.fc-kategori3 .fc-section3 h2 {
  font-size: 20px;
  margin-bottom: 5px;
  color: #ffffff;
}

.fc-kategori3 .fc-section3 p {
  margin: 0;
  color: white;
}

.fc-kategori4 .fc-section4 h2 {
  font-size: 20px;
  margin-bottom: 5px;
  color: #ffffff;
}

.fc-kategori4 .fc-section4 p {
  margin: 0;
  color: white;
}

.fc-kategori5 .fc-section5 h2 {
  font-size: 20px;
  margin-bottom: 5px;
  color: #ffffff;
}

.fc-kategori5 .fc-section5 p {
  margin: 0;
  color: white;
}

.form-container {
  text-align: center;
  margin: 20px 0;
}

.form-text {
  background-color: black;
  color: white;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
}

.form-link {
  display: block;
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #0011ff;
  text-decoration: none;
}

.form-link:hover {
  color: #ff9900;
  text-decoration: underline;
}


/* Contact Section Styles */
.contact-section {
  margin: 20px auto;
  padding: 20px;
  max-width: 800px;
  background: #ecf0f1;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-align: center;
}

.contact-section p {
  font-size: 16px;
  margin-bottom: 10px;
}

.contact-section ul {
  list-style-type: none;
  padding: 0;
}

.contact-section li {
  font-size: 16px;
  margin-bottom: 5px;
}

/* Giving Section Styles */
.giving-section {
  background-color: #000000;
  text-align: center;
}

/* Introductory Image Styles */
.giving-intro {
  margin-bottom: 30px;
}

.giving-image {
  width: 100%;
  max-width: 600px;
  border-radius: 8px;
}

/* Persembahan Title Styles */
.title-persembahan {
  font-size: 50px;
  font-family: "Georgia", "serif";
  font-style: italic;
  font-weight: 300;
  color: #ffffff;
  margin-bottom: 80px; /* Space between title and content */
  letter-spacing: 1px;
}

/* Content Text Styles */
.content-persembahan {
  padding: 20px; /* Memberikan ruang di sekitar konten */
}

.content-persembahan .content-text {
  font-size: 15px;
  line-height: 1.4;
  color: #ffffff;
  margin: 0 20px;
  text-align: justify;
}

/* Image for Persembahan Umum */
.persembahan-umum-image {
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
  margin-top: 30px;
  margin-bottom: 10px; /* Space between image and content text */
}

/* Image Only Content Section */
.content-pembangunan-gereja {
  text-align: center;
}

.pembangunan-gereja-image {
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
  margin-bottom: 5px;
}

/* Image Only Content Section */
.content-bukti-transfer {
  text-align: center;
  margin-top: 5px; /* Adjust spacing as needed */
}

.bukti-transfer-image {
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.excel-container {
  text-align: center;
  margin: 20px 0;
}

.excel-text {
  background-color: black;
  color: white;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
}

.excel-link {
  display: block;
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #0d00ff;
  text-decoration: none;
}

.excel-link:hover {
  color: #00cc99;
  text-decoration: underline;
}


/* Responsive Styles */
@media (max-width: 768px) {
  /* Reduce font size for smaller screens */
  .title-persembahan {
    font-size: 30px;
    margin-bottom: 60px;
  }

  .content-text {
    font-size: 16px;
    margin: 0 10px;
  }

  /* Images: Full width on smaller screens */
  .giving-image,
  .persembahan-umum-image,
  .pembangunan-gereja-image,
  .bukti-transfer-image {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  /* Further reduce font size for very small screens */
  .title-persembahan {
    font-size: 28px;
    margin-bottom: 40px;
  }

  .content-text {
    font-size: 14px;
    margin: 0 5px;
  }
}

/* event */
.event-section .event-title {
  color: rgb(243, 242, 242); /* Warna tulisan putih */
  font-size: 7em; /* Ukuran font default */
  text-align: center;
  padding: 30px 500px;
  margin: 0;
  background-color: #00050c; /* Latar belakang untuk judul */
}

.content-event {
  margin-top: 20px;
  padding: 20px;
  color: black;
  text-align: center;
  background-color: transparent;
}

/* Media Queries untuk responsif */
@media (max-width: 768px) {
  .event-section .event-title {
    font-size: 4em;
    padding: 10px 20px;
  }
}

@media (max-width: 480px) {
  .event-section .event-title {
    font-size: 3em;
    padding: 15px 20px;
  }
}

/* Konten footer */
footer {
  background-color: #282c34; /* Warna latar belakang gelap */
  color: #ffffff; /* Warna teks putih */
  padding: 20px 0; /* Padding atas dan bawah */
  text-align: center; /* Rata tengah */
}

.custom-footer-container {
  display: flex; /* Mengatur konten menjadi fleksibel */
  justify-content: space-between; /* Menyebar konten dengan ruang di antaranya */
  max-width: 1200px; /* Lebar maksimum footer */
  margin: 0 auto; /* Memusatkan footer */
  flex-wrap: wrap; /* Membungkus konten jika diperlukan */
}

.social-media {
  text-align: center; /* Rata tengah untuk konten sosial media */
  flex: 1; /* Membiarkan konten mengambil ruang sama */
}

.social-media h3 {
  margin-bottom: 10px; /* Jarak bawah untuk heading */
}

.social-icons {
  display: flex; /* Menyusun ikon sosial media dalam baris */
  justify-content: center; /* Memusatkan ikon */
}

.social-media a {
  color: #ffffff; /* Warna ikon sosial media */
  margin: 0 10px; /* Jarak antara ikon */
  font-size: 24px; /* Ukuran ikon */
  transition: color 0.3s; /* Transisi halus untuk efek hover */
}

.social-media a:hover {
  color: #2a36e0; /* Warna saat hover */
}

.custom-footer-item {
  flex: 2; /* Membiarkan konten mengambil ruang lebih */
  text-align: left; /* Rata kiri untuk konten */
  margin-left: 20px; /* Memberikan jarak dari sisi kiri */
}

.custom-footer-item h2 {
  margin-bottom: 10px; /* Jarak bawah untuk heading */
}

.footer-bottom {
  background-color: #1c1e22; /* Warna latar belakang yang lebih gelap untuk bagian copyright */
  padding: 10px 0; /* Padding atas dan bawah */
}

.footer-bottom p {
  margin: 0; /* Menghilangkan margin */
  font-size: 14px; /* Ukuran font */
}

/* Media Queries untuk Responsivitas */
@media (max-width: 768px) {
  .custom-footer-container {
    flex-direction: column; /* Mengatur konten menjadi kolom di layar kecil */
    align-items: center; /* Memusatkan konten */
  }

  .social-media,
  .custom-footer-item {
    margin-bottom: 20px; /* Jarak bawah untuk setiap bagian di layar kecil */
    text-align: center; /* Rata tengah untuk teks */
    margin-left: 0; /* Menghapus margin kiri untuk layar kecil */
  }
}

@media (max-width: 480px) {
  .social-media h3,
  .custom-footer-item h2 {
    font-size: 18px; /* Ukuran font lebih kecil untuk heading */
  }

  .social-media a {
    font-size: 20px; /* Ukuran ikon sosial media lebih kecil */
    margin: 0 5px; /* Mengurangi jarak antara ikon */
  }

  .footer-bottom p {
    font-size: 12px; /* Ukuran font lebih kecil untuk copyright */
  }
}