body{
    background-color: rgb(0, 0, 0);
    padding-top: 100px;
}

.text-red {
  color: #E2171D;
}

.nav-link:hover {
  color: #eb1f1f !important;
}

.bg-abu{
  background-color: rgb(25, 28, 36);
}

a:hover {
  color: #eb1f1f; /* Mengubah warna teks menjadi merah saat hover */
}

.btn-lg-square {
  width: 40px;  /* Atur lebar */
  height: 40px; /* Atur tinggi */
  background-color: #000; /* Warna hitam */
  display: flex; /* Menggunakan flexbox untuk menempatkan ikon di tengah */
  justify-content: center; /* Memastikan ikon berada di tengah horizontal */
  align-items: center; /* Memastikan ikon berada di tengah vertikal */
  border-radius: 5px; /* Menambahkan sedikit border-radius jika ingin sudut melengkung */
  transition: background-color 0.3s, color 0.3s; /* Efek transisi yang halus */
  text-decoration: none; /* Menghapus garis bawah dari link */
}
.btn-lg-square:hover {
  background-color: #ffffffaf; /* Warna latar belakang putih saat hover */
}

.btn-square {
  width: 40px;  /* Atur lebar */
  height: 40px; /* Atur tinggi */
  background-color: #000; /* Warna hitam */
  display: flex; /* Menggunakan flexbox untuk menempatkan ikon di tengah */
  justify-content: center; /* Memastikan ikon berada di tengah horizontal */
  align-items: center; /* Memastikan ikon berada di tengah vertikal */
  border-radius: 5px; /* Menambahkan sedikit border-radius jika ingin sudut melengkung */
  transition: background-color 0.3s, color 0.3s; /* Efek transisi yang halus */
  text-decoration: none; /* Menghapus garis bawah dari link */
}

.btn-square:hover {
  background-color: #ffffffaf; /* Warna latar belakang putih saat hover */
}

.container {
  width: 100%;
}
.bg-abu {
  background-color: #191C24 !important;
}

.text-red {
  color: #E2171D;
}

.text-abu{
  color: #6C7293;
}
.form-control {
  border-color: #6C7293 !important; /* Ubah warna garis border input */
  color: #6C7293 !important; /* Ubah warna teks dalam input */
}

.form-control:focus {
  border-color: #ffffff98 !important; /* Ubah warna garis saat input difokuskan */
  box-shadow: 0 0 8px rgba(226, 23, 29) !important; /* Efek fokus */
} 

.img-fluid {
  transform: scale(1.2);
  transition: transform 0.3s ease;
}

.btn-red{
  background-color: rgb(226, 23, 29);
}

.img-fluid:hover {
  transform: scale(1.3);
}

.image-container {
  position: relative;
  width: 100%;
  min-height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.responsive-img {
  width: 100%;
  max-width: 450px;
  height: auto;
  object-fit: cover;
}

.navbar-brand {
  line-height: 50px; /* Matches the navbar height */
}

  .footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
    text-decoration: none; /* Menghilangkan garis bawah */
  }
  .footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    font-size: 15px;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
    text-decoration: none; /* Menghilangkan garis bawah */
    color: #6C7293; /* Ganti dengan warna yang diinginkan */
  }
  
  .footer .btn.btn-link:hover {
    color: #E2171D; /* Ganti dengan warna yang diinginkan */
    letter-spacing: 1px;
    box-shadow: none;
  }
  
  @media only screen and (max-width: 768px) {
    .responsive {
      width: 49.99999%;
      margin: 6px 0;
    }
    .navbar {
      padding: 0.5rem 1rem;
    }  
    .image-container {
      min-height: 250px; /* Mengurangi tinggi minimum di layar kecil */
  }
  }
  
  @media only screen and (max-width: 576px) {
    .responsive {
      width: 100%;
    }
    .image-container {
      min-height: 180px;
    }
  }
  
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }