.hero{
  padding: 7rem 0;
}

.image-hero{
  width: 100%;
}

.logo-hero{
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
}

.logo-hero img{
  height: 80px;
}

.hero h1{
  font-weight: 700;
  font-size: 2.5rem;
  color: #363636;
}

.hero h1 span{
  color: #1AA1F5;
}

.hero h3{
  font-size: 1.5rem;
  font-weight: 600;
  color: #363636;
  margin-bottom: 15px;
}

.hero p{
  font-size: .95rem;
  color: gray;
}

.goto-search {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  position: relative;
  width: 70%;
}

.goto-search input{
  height: 45px;
  padding: 0 150px 0 20px;
  border-radius: 25px;
  width: 100%;
  border: none;
  box-shadow: 0px 1px 5px 1px #c5c5c5;
}

.goto-search input:focus{
  border: none;
  outline: none; /* Pastikan outline tetap hilang saat fokus */
}

.goto-search button{
  position: absolute;
  right: 0;
  overflow: hidden;
  background: linear-gradient(45deg, #1AA1F5, #00C3FF, #0066CC, #1AA1F5);
  background-size: 300% 300%;
  animation: moveBackground 4s linear infinite;
  color: white;
  font-size: 1rem;
  height: 45px;
  padding: 0 20px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect */
.goto-search button:hover {
  transform: scale(1.01);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* Keyframes untuk animasi warna background */
@keyframes moveBackground {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.fade-in {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Animasi Berurutan */
.hero .image-hero.show {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.hero .logo-hero.show {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.hero h1.show, .hero h3.show {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.hero p.show {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

.hero .goto-search.show {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.8s;
}


.informasi{
  background-color: #48b6fa18;
  border-radius: .3rem;
  padding: 2rem;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
  box-shadow: 0px 2px 5px 1px #c5c5c5;
  margin-bottom: 7rem;
}

.card-informasi{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
}

.informasi .row .col-3:nth-child(1) .card-informasi,
.informasi .row .col-3:nth-child(2) .card-informasi,
.informasi .row .col-3:nth-child(3) .card-informasi {
  border-right: 1px groove rgb(189, 189, 189);
}

.card-informasi img{
  width: 4rem;
  height: 4rem;
  padding: .9rem;
  border-radius: 5px;
  background-color: white;
}

.value-informasi{
  margin-bottom: 0;
  font-size: 2rem;
  font-weight: 600;
  color: #1AA1F5;
}

.keterangan-informasi{
  margin-bottom: 0;
  font-weight: 500;
  font-size: .9rem;
  color: rgb(100, 100, 100);
}

/* Ketika elemen masuk ke layar */
.informasi.show {
  opacity: 1;
  transform: scale(1);
}


.search-data{
  margin-bottom: 100px;
}

.heading-section{
  color: #1AA1F5;
  font-weight: 500;
  margin-bottom: 35px;
}

.form-search input{
  width: 400px;
  height: 50px;
  border-radius: 50px;
  border: 2px solid #252525;
  padding: 20px;
}

.form-search button{
  background-color: #1AA1F5;
  border: none;
  height: 50px;
  border-radius: 50px;
  color: white;
  width: 100px;
  transition: all ease .3s;
}

.form-search button:hover{
  background-color: #1687cd;
}

.heading-section{
  font-weight: 600;
  font-size: 2rem;
  margin-bottom: 5rem;
}

.kelompok-data{
  margin-bottom: 100px;
}

.data-gender,
.data-anak,
.data-demografi,
.data-capaian-program,
.data-drppa{
  margin-bottom: 7rem;
}

/* Data Gender */
.data-gender .box-img-data-gender{
  width: 100%;
  position: relative;
}

.data-gender .box-img-data-gender img:nth-child(1){
  width: 80%;
  border-radius: 20px;
  object-fit: cover;
}

.data-gender .box-img-data-gender img:nth-child(2){
  position: absolute;
  right: 0;
  bottom: -40px;
  width: 40%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 4px solid white;
}

.box-text h5{
  font-size: 2.3rem;
  font-weight: 600;
  color: rgb(54, 54, 54);
}

.box-text h5 span{
  color: #1AA1F5;
}

.box-text p{
  color: rgb(99, 99, 99);
  font-size: 1.1rem;
}

.box-text p span{
  color: rgb(54, 54, 54);
  font-weight: 700;
}

.button-selengkapnya{
  text-decoration: none;
  color: white;
  background-color: #1AA1F5;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1rem;
  display: inline-block;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.button-selengkapnya:hover{
  background-color: #1980c0;
  transform: scale(1.05)
}

/* Data ANak */
.data-anak .box-img-data-anak{
  width: 100%;
  position: relative;
}

.data-anak .box-img-data-anak img:nth-child(1){
  width: 65%;
  border-radius: 20px;
  object-fit: cover;
  aspect-ratio: 2/2.5;
}

.data-anak .box-img-data-anak img:nth-child(2){
  position: absolute;
  right: 10px;
  bottom: -60px;
  width: 65%;
  aspect-ratio: 2/2.5;
  border-radius: 20px;
  object-fit: cover;
  border: 4px solid white;
}

/* Data Demografi */
.data-demografi .box-img-data-demografi{
  width: 100%;
  position: relative;
}

.data-demografi .box-img-data-demografi img:nth-child(1){
  width: 65%;
  border-radius: 20px;
  object-fit: cover;
  aspect-ratio: 2/2.5;
}

.data-demografi .box-img-data-demografi img:nth-child(2){
  position: absolute;
  right: 10px;
  bottom: -60px;
  width: 65%;
  aspect-ratio: 2/2.5;
  border-radius: 20px;
  object-fit: cover;
  border: 4px solid white;
}

/* Data Capaian Program */
.data-capaian-program .box-img-data-capaian-program{
  width: 100%;
  position: relative;
}

.data-capaian-program .box-img-data-capaian-program img:nth-child(1){
  width: 65%;
  border-radius: 20px;
  object-fit: cover;
  aspect-ratio: 2/2.5;
}

.data-capaian-program .box-img-data-capaian-program img:nth-child(2){
  position: absolute;
  right: 10px;
  bottom: -60px;
  width: 65%;
  aspect-ratio: 2/2.5;
  border-radius: 20px;
  object-fit: cover;
  border: 4px solid white;
}

/* Data DRPPA */
.data-drppa .box-img-data-drppa{
  width: 100%;
  position: relative;
}

.data-drppa .box-img-data-drppa img:nth-child(1){
  width: 65%;
  border-radius: 20px;
  object-fit: cover;
  aspect-ratio: 2/2.5;
}

.data-drppa .box-img-data-drppa img:nth-child(2){
  position: absolute;
  right: 10px;
  bottom: -60px;
  width: 65%;
  aspect-ratio: 2/2.5;
  border-radius: 20px;
  object-fit: cover;
  border: 4px solid white;
}





.fade-in-kelompok-data {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.box-img-data-gender.show {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.box-img-data-anak.show {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.box-img-data-demografi.show {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.box-img-data-capaian-program.show {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.box-img-data-drppa.show {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.box-text h5.show{
  opacity: 1;
  transform: translateY(0);
  transition-delay: .2s;
}

.box-text p.show{
  opacity: 1;
  transform: translateY(0);
  transition-delay: .3s;
}

.button-selengkapnya.show{
  opacity: 1;
  transform: translateY(0);
  transition-delay: .5s;
}