body {
    font-family: 'Poppins', sans-serif;
    /* background: #FFFFFE; */
  }

/* Bagian Layar 1 Judul */
.hero {
  background: linear-gradient(to bottom, #7D0633 50%, #7D0633 80%, #31112C 100%);
  padding: 80px 20px;
  text-align: left;
}

.hero h1 {
  color: white;
  font-size: 3.5rem;
  font-weight: bold;
  margin-bottom: 50px;
  
}
  
.hero img {
  max-width: 96%;
  max-height: 96%;
  border-radius: 20px;
  margin-left: 30px;
  margin-top: 100px;
  margin-bottom: 90px;
}

.hero button {
  background-color: white;
  color: #7D0633;
  border: 1px solid #BFBFBF;
  padding: 9px 30px;
  font-size: 17px;
  font-weight: bold;
  border-radius: 50px;
  text-decoration: none;
  text-align: center;
  box-shadow: 0px 3px 0px #BFBFBF;
}


.hero button:hover {
  background-color: #FBDCC4;
  color: black;
  border: 1px solid #F2A07B;
  box-shadow: 0px 3px 0px #F2A07B;
}

.hero p {
  color: white;
}

/* Bagian Layar 2 Fitur */
.features {
  background:#FBDCC4;
  padding: 70px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Jarak antar fitur */
  justify-content: space-between; /* Menyebarkan fitur ke kiri dan kanan */
}

.feature {
  display: flex;
  align-items: center;
  width: 48%; /* Setiap fitur mengambil setengah lebar */
  background: #fff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
  min-height: 170px; /* Pastikan tinggi minimum sama */
  margin-bottom: 10px;
}

.feature img {
  max-width: 80px; /* Ukuran gambar lebih kecil */
  margin-right: 15px;
}

.feature h4 {
  color: #7D0633;
  font-weight: bold;
  margin-bottom: 10px;
}

.feature p {
  margin: 0; /* Menghapus margin default */
  flex-grow: 1; /* Isi teks mendorong agar kotak tetap seragam */
  color: #31112C;
}

.sd {
  color: #31112C;
  margin-top: 30px;
  font-weight: bold;
}

/* Bagian Layar 3 */
.cta {
  background: #F4F4F4;
  padding: 60px 20px;
  text-align: center;
}

.cta h3 {
  color: #7D0633;
  /* font-size: 2.5rem; */
}

.cta p {
  color: #7D0633;
}

.cta button {
  background-color: white;
  color: #7D0633;
  border: 1px solid #BFBFBF;
  padding: 9px 30px;
  font-size: 17px;
  font-weight: bold;
  border-radius: 50px;
  text-decoration: none;
  text-align: center;
  box-shadow: 0px 3px 0px #BFBFBF;
}


.cta button:hover {
  background-color: #FBDCC4;
  color: black;
  border: 1px solid #F2A07B;
  box-shadow: 0px 3px 0px #F2A07B;
}

footer {
  width: 100%;
  background-color: #3B3B3B;
  color: white;
  text-align: center;
  padding: 2px;
  padding-top: 13px;
  /* justify-content: center; */
}

/* Bagian NAVBAR */
.nav {
  /* background-color: #7D0633; */
  /* background-color: #F6C1C7; */
  /* background-color: #F9D1D9; */
  /* background-color: #E8A2B7; */
  background-color: #7D0633;
  /* border: 2px solid #FBDCC4; */
  border-bottom: none;
  padding: 13px;
  color: white;
}

.nav-p {
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  /* border: 2px solid ; */
  /* text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); */
  /* text-shadow:
        -2px -2px 0 #D48CA3,
         2px -2px 0 #D48CA3,
        -2px  2px 0 #D48CA3,
         2px  2px 0 #D48CA3,
         0px -2px 0 #D48CA3,
         0px  2px 0 #D48CA3,
        -2px  0px 0 #D48CA3,
         2px  0px 0 #D48CA3; */

}

.navbar-brand img {
  margin-right: 10px; /* Memberikan jarak antara logo dan teks */
  width: 30px;
  height: 30px;
}
  
.nav-item {
  margin-right: 16px;
}

.nav-link:hover, 
.navbar-brand:hover {
  color: white !important;
}

.nav-link.active, 
.nav-link:focus {
  color: white !important;  /* Tetap putih saat aktif */
  font-weight: bold;        /* Jadi bold saat aktif */
}

.bnv {
    background-color: #D32F2F;
    color: white;
    padding: 6px 23px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    border-radius: 50px;
    border: 1px solid white;
    box-shadow: 0px 2px 0px white;

}

.bnv:hover {
    background-color: #FF3B3B;
    color: white !important;
    border: 1px solid white;
    box-shadow: 0px 2px 0px white;
}

.hidden {
  display: none;
}

.btn-log {
  background-color: white;
  color: #7D0633;
  border: 1px solid #BFBFBF;
  padding: 4px 23px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 50px;
  text-decoration: none;
  text-align: center;
  box-shadow: 0px 2px 0px #BFBFBF;
  /* border: 3px solid #BFBFBF;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.5); */
}

.btn-log:hover {
  background-color: #FBDCC4;
  color: black;
  border: 1px solid #F2A07B;
  box-shadow: 0px 2px 0px #F2A07B;
}

/* Media Query untuk tablet dan perangkat lebih kecil */
@media screen and (max-width: 768px) {

  /* Hero Section */
  .hero {
    padding: 50px 20px;
    /* Menyesuaikan padding agar tidak terlalu besar di layar kecil */
    text-align: justify; /* Menyelaraskan teks di tengah untuk perangkat kecil */
    align-items: center;
  }

  .hero h1 {
    font-size: 2.5rem; /* Menyesuaikan ukuran font */
    margin-bottom: 20px; /* Mengurangi margin bawah */
    /* margin-top: 50px; */
  }

  .hero img {
    max-width: 90%; /* Mengurangi ukuran gambar */
    max-height: 80%; /* Membatasi tinggi gambar */
    margin-left: 0px; /* Menghapus margin kiri */
    margin-top: 70px !important; /* Mengurangi margin atas */
    margin-bottom: 30px; /* Mengurangi margin bawah */
  }

  /* Fitur Section */
  .features {
    padding: 50px 20px;
    flex-direction: column; /* Menyusun fitur menjadi satu kolom */
    align-items: center; /* Menyelaraskan item ke tengah */
  }

  .feature {
    width: 100%; /* Menyesuaikan lebar fitur menjadi 100% */
    margin-bottom: 20px; /* Memberikan ruang antara fitur */
  }

  .feature img {
    max-width: 60px; /* Menyesuaikan ukuran gambar */
    margin-right: 10px; /* Mengurangi margin gambar */
  }

  .cta {
    padding: 40px 20px;
  }

  .cta h3 {
    font-size: 2rem; /* Menyesuaikan ukuran font */
  }

  /* Navbar */
  .nav {
    padding: 10px; /* Mengurangi padding navbar */
  }

  .nav-item {
    margin-right: 12px; /* Mengurangi jarak antar item */
  }

  /* Button Styling */
  .cta button, .hero button, .btn-log {
    padding: 8px 20px; /* Menyesuaikan ukuran padding button */
    font-size: 15px; /* Menyesuaikan ukuran font */
  }

  /* Footer */
  footer {
    padding: 10px;
  }
}

/* Media Query untuk perangkat mobile (lebar layar < 480px) */
@media screen and (max-width: 480px) {

  /* Hero Section */
  .hero {
    /* padding: 30px 15px; */
    padding: 50px 20px;
    text-align: justify;
    align-items: center;
  }

  .hero h1 {
    font-size: 2rem; /* Menyesuaikan ukuran font */
    margin-bottom: 15px; /* Mengurangi margin bawah */
  }

  .hero img {
    max-width: 100%; /* Gambar akan mengisi 100% lebar */
    margin-top: 30px;
    margin-bottom: 20px;
  }

  /* Fitur Section */
  .features {
    flex-direction: column; /* Menyusun fitur dalam satu kolom */
    align-items: center;
    padding: 40px 15px; /* Menyesuaikan padding */
  }

  .feature {
    width: 100%; /* Fitur mengambil lebar penuh */
    margin-bottom: 15px; /* Mengurangi jarak antar fitur */
  }

  .cta {
    padding: 30px 15px;
  }

  .cta h3 {
    font-size: 1.8rem;
  }

  /* Navbar */
  .nav {
    padding: 10px;
  }

  .nav-item {
    margin-right: 10px; /* Mengurangi margin */
  }

  /* Button Styling */
  .cta button, .hero button, .btn-log {
    padding: 6px 18px;
    font-size: 14px;
  }

  /* Footer */
  footer {
    padding: 8px 15px;
  }
}