body {
    font-family: Arial, sans-serif;
}


.kepala-sekolah-img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border: 5px solid #ff4d4d;
    transition: transform 0.3s ease-in-out;
  }
  
  .kepala-sekolah-img:hover {
    transform: scale(1.1);
  }

  .img-berita:hover{
    transform: scale(1.1);
    transition: transform 0.5s ease-in-out;
  }
  
  .sambutan-card {
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    border-left: 5px solid #ff4d4d;
    border-radius: 10px;
    transition: box-shadow 0.3s ease-in-out;
  }
  
  .sambutan-card:hover {
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
  }

/* Membuat kontainer gambar tetap bulat */
.img-container {
  width: 150px;  /* Tentukan lebar tetap */
  height: 150px; /* Tentukan tinggi tetap */
  overflow: hidden; /* Menyembunyikan bagian gambar yang lebih besar */
  margin: 0 auto; /* Agar gambar berada di tengah */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%; /* Membuat gambar menjadi bulat */
  position: relative; /* Menyusun gambar dengan posisi absolut */
  top: 10px; /* Memberikan jarak antara gambar dan border atas card */
}

/* Mengatur gambar agar tetap proporsional dan terpotong dengan cover */
.img-container img {
  position: absolute; /* Gambar diposisikan secara absolut di dalam kontainer */
  top: 0;  /* Menempatkan gambar di bagian atas kontainer */
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Memastikan gambar tetap proporsional */
  margin: 0 auto; /* Memastikan gambar tetap terpusat */
}

/* Mengatur card agar memiliki tinggi yang sama dan memberi jarak */
.card-guru {
  height: 350px; /* Menetapkan tinggi card yang konsisten */
  margin-bottom: 5px; /* Memberikan jarak bawah antara card */
}

/* Menambahkan padding pada card-body untuk memberi ruang pada teks */
.card-body {
  padding-top: 15px; /* Memberikan ruang antara gambar dan konten card */
}


/* Untuk perangkat dengan layar lebih kecil seperti smartphone Android */
@media (max-width: 480px) {
  .nav-pills {
    flex-direction: column;
  }
}

.gallery-img {
  transition: transform 0.3s ease;
  cursor: pointer;
}

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

.modal-img {
  width: 100%;
}

.modal-backdrop {
  z-index: 1040 !important;
}

.modal-content {
  z-index: 1050 !important;
}

.card-text {
  white-space: pre-wrap; /* Pastikan spasi dan baris baru ditampilkan dengan benar */
}