/* CSS untuk Logo Gambar */
 .logo-img {
     height: 50px;
     /* Tinggi logo pada tampilan normal */
     width: auto;
     /* Tambahkan me-2 (margin-end: 2) di HTML untuk jarak antara gambar dan teks */
 }

 /* Mengatur Teks Logo (Optional: Untuk memastikan teks tidak terpotong) */
 .logo-text {
     line-height: 1.1;
     /* Mengurangi jarak antar baris teks (PERTAPA dan BERSATU) */
 }

 /* Media Query untuk Mobile (Merapikan teks di layar yang sangat kecil) */
 @media (max-width: 768px) {
     .logo-img {
         height: 30px;
         /* Logo sedikit lebih kecil di HP */
     }

     .logo-text h5,
     .logo-text h6 {
         font-size: 0.8rem !important;
         /* Dikecilkan lagi untuk kerapihan di HP */
         line-height: 1;
         /* Rapatkan lagi */
     }
 }

 /* Ukuran Judul Hero default (untuk layar besar) */
 .hero-title {
     font-size: 3.5rem;
     /* Ukuran yang setara atau sedikit lebih kecil dari display-4 */
     font-weight: 700;
     /* Tebal */
 }

 /* Media Query untuk Perangkat Seluler (Sangat Kecil) */
 @media (max-width: 576px) {

     /* Judul Utama */
     .hero-title {
         font-size: 1.8rem !important;
         /* Dikecilkan drastis untuk HP */
         line-height: 1.2;
         margin-bottom: 10px !important;
         /* Kecilkan margin bawah */
     }

     /* Subjudul */
     .carousel-caption p {
         font-size: 1rem !important;
         /* Dikecilkan subjudul */
         margin-bottom: 20px !important;
     }

     /* Container untuk padding agar tidak terlalu mepet */
     .carousel-caption .container {
         padding: 0 10px;
     }

     /* Tombol */
     .carousel-caption .btn {
         padding: 8px 15px;
         /* Kecilkan tombol sedikit */
         font-size: 0.9rem;
     }
 }