/* 1. Reset wrapper utama kartu Vesperr */
.services .service-item {
  padding: 0 !important; /* WAJIB: Menghilangkan space kosong bawaan di kiri-kanan gambar */
  background: #ffffff;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 5px; /* Menjaga sudut kartu tetap melengkung */
  overflow: hidden;   /* WAJIB: Memotong ujung gambar agar ikut melengkung sesuai kartu */
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

/* 2. Kontainer Banner Gambar */
.services .service-item .card-banner {
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0; /* Menghilangkan celah pixel kosong di bawah gambar */
}

/* 3. Memaksa Gambar Full Lebar Card secara Otomatis (Aman di HP) */
.services .service-item .card-banner img {
  width: 100% !important; /* Gambar dipaksa memenuhi 100% lebar kartu */
  height: auto !important; /* Tinggi gambar menyesuaikan proporsional rasio 4:1 */
  display: block;
}

/* 4. Kontainer Teks di bawah gambar */
.services .service-item .card-content {
  padding: 20px 25px 25px 25px; /* Padding dipindahkan ke sini agar teks tidak mentok tepi */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.services .service-item .card-content h4 {
  margin-bottom: 12px;
  font-weight: 700;
}
.services .service-item .card-content p {
  margin-bottom: 0;
  line-height: 1.6;
  color: #444444;
}
/* ------------------------------------------------------------- */
/* 5. EFEK HOVER (MOUSE OVER) BERUBAH JADI BIRU SEPERTI GAMBAR UPLOAD AN */
.services .service-item:hover {
  background-color: #2487ce !important; /* Warna biru penuh pada background kartu */
}
/* Mengubah warna semua teks di dalam kartu menjadi putih saat di-hover */
.services .service-item:hover .card-content h4 a,
.services .service-item:hover .card-content p {
  color: #ffffff !important;
}



.modal-body {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Biarkan gambar menyesuaikan lebar layar */
#modalImage {
    max-width: 100%;
    max-height: 85vh; /* Membatasi tinggi agar tidak keluar layar */
    width: auto;
    height: auto;
    display: block;
	cursor: pointer;
}

/* Hilangkan latar belakang modal-content jika ingin gambar tampak melayang bersih */
.modal-content {
    background-color: transparent !important;
    border: none !important;
}

@media (max-width: 768px) {
  .icon-box i {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
  .section-title h2 { 
    font-size: 1.2rem !important; /* Ukuran khusus untuk HP */
	margin-top: -10px;!important;
    line-height: 1.3;}
}
@media (max-width: 576px) {
  .about .content h3 {
    font-size: 1.4rem !important; /* Ukuran khusus untuk HP */
    line-height: 1.3;
  }
  .about .content p {
    font-size: 0.95rem !important; /* Ukuran paragraf yang nyaman di HP */
  }
  .section-title h2 { 
    font-size: 1.2rem !important; /* Ukuran khusus untuk HP */
	margin-top: -10px;!important;
    line-height: 1.3;}
}