.u-section-1 {
  filter: none;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('images/asdar.jpeg');
  background-position: 50% 50%;
  min-height: 100vh;
}

.u-section-1 .u-image-1 {
  width: 394px;
  height: 118px;
  margin: 60px auto 0;
}

.u-section-1 .u-text-1 {
  font-family: "Archivo Black";
  letter-spacing: 13px;
  font-size: 3rem;
  margin: 21px auto 60px;
}

@media (max-width: 991px) {
  .u-section-1 .u-image-1 {
    width: 351px;
    height: 96px;
  }

  .u-section-1 .u-text-1 {
    font-size: 1.875rem;
    width: auto;
  }
}

@media (max-width: 575px) {
  .u-section-1 .u-image-1 {
    width: 308px;
    height: 74px;
    margin-top: 340px;
  }

  .u-section-1 .u-text-1 {
    font-size: 1.5rem;
    margin-top: 22px;
  }
} .u-section-2 {
  filter: none;
  background-image: none;
}

.u-section-2 .u-sheet-1 {
  min-height: 767px;
}

.u-section-2 .u-text-1 {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 19px;
  --animation-custom_in-translate_x: 0px;
  --animation-custom_in-translate_y: 300px;
  --animation-custom_in-opacity: 0;
  --animation-custom_in-rotate: 0deg;
  --animation-custom_in-scale: 1;
  text-shadow: 2px 2px 4px rgba(0,0,0,1);
  margin: 48px auto 0;
}

.u-section-2 .u-image-1 {
  width: 300px;
  height: 300px;
  --animation-custom_in-translate_x: 0px;
  --animation-custom_in-translate_y: 0px;
  --animation-custom_in-opacity: 0;
  --animation-custom_in-rotate: 0deg;
  --animation-custom_in-scale: 0.3;
  margin: 51px auto 0 128px;
}

.u-section-2 .u-image-2 {
  width: 300px;
  height: 300px;
  --animation-custom_in-translate_x: 0px;
  --animation-custom_in-translate_y: 0px;
  --animation-custom_in-opacity: 0;
  --animation-custom_in-rotate: 0deg;
  --animation-custom_in-scale: 0.3;
  margin: -300px auto 0 517px;
}

.u-section-2 .u-image-3 {
  width: 300px;
  height: 300px;
  --animation-custom_in-translate_x: 0px;
  --animation-custom_in-translate_y: 0px;
  --animation-custom_in-opacity: 0;
  --animation-custom_in-rotate: 0deg;
  --animation-custom_in-scale: 0.3;
  margin: -300px auto 0 892px;
}

.u-section-2 .u-text-2 {
  font-weight: 700;
  font-family: "Archivo Black";
  text-shadow: 0px 0px 20px rgba(128,128,128,0.79);
  --animation-custom_in-translate_x: 0px;
  --animation-custom_in-translate_y: 0px;
  --animation-custom_in-opacity: 0;
  --animation-custom_in-rotate: 0deg;
  --animation-custom_in-scale: 0.3;
  font-size: 1.125rem;
  margin: 17px auto 0 948px;
}

.u-section-2 .u-text-3 {
  font-weight: 700;
  font-family: "Archivo Black";
  text-shadow: 0px 0px 20px rgba(128,128,128,0.79);
  --animation-custom_in-translate_x: 0px;
  --animation-custom_in-translate_y: 0px;
  --animation-custom_in-opacity: 0;
  --animation-custom_in-rotate: 0deg;
  --animation-custom_in-scale: 0.3;
  font-size: 1.125rem;
  margin: -29px auto 0;
}

.u-section-2 .u-text-4 {
  font-weight: 700;
  font-family: "Archivo Black";
  text-shadow: 0px 0px 20px rgba(128,128,128,0.79);
  --animation-custom_in-translate_x: 0px;
  --animation-custom_in-translate_y: 0px;
  --animation-custom_in-opacity: 0;
  --animation-custom_in-rotate: 0deg;
  --animation-custom_in-scale: 0.3;
  font-size: 1.125rem;
  margin: -29px auto 0 189px;
}

.u-section-2 .u-btn-1 {
  border-style: solid;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0px;
  --animation-custom_in-translate_x: 0px;
  --animation-custom_in-translate_y: 0px;
  --animation-custom_in-opacity: 0;
  --animation-custom_in-rotate: 0deg;
  --animation-custom_in-scale: 0.3;
  margin: 10px auto 0 203px;
}

.u-section-2 .u-btn-2 {
  border-style: solid;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0px;
  --animation-custom_in-translate_x: 0px;
  --animation-custom_in-translate_y: 0px;
  --animation-custom_in-opacity: 0;
  --animation-custom_in-rotate: 0deg;
  --animation-custom_in-scale: 0.3;
  background-image: none;
  margin: -45px auto 0;
}

.u-section-2 .u-btn-3 {
  border-style: solid;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0px;
  --animation-custom_in-translate_x: 0px;
  --animation-custom_in-translate_y: 0px;
  --animation-custom_in-opacity: 0;
  --animation-custom_in-rotate: 0deg;
  --animation-custom_in-scale: 0.3;
  margin: -45px auto 0 966px;
}

.u-section-2 .u-btn-4 {
  --radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-image: none;
  --animation-custom_in-translate_x: 0px;
  --animation-custom_in-translate_y: 300px;
  --animation-custom_in-opacity: 0;
  --animation-custom_in-rotate: 0deg;
  --animation-custom_in-scale: 1;
  font-size: 1rem;
  margin: 43px auto 60px;
  padding: 10px 192px 10px 191px;
}

@media (max-width: 1399px) {
  .u-section-2 .u-sheet-1 {
    min-height: 793px;
  }

  .u-section-2 .u-text-1 {
    width: auto;
    margin-top: 61px;
  }

  .u-section-2 .u-image-1 {
    margin-top: 52px;
    margin-left: 24px;
  }

  .u-section-2 .u-image-2 {
    margin-left: auto;
  }

  .u-section-2 .u-image-3 {
    margin-left: 816px;
  }

  .u-section-2 .u-text-2 {
    font-size: 1.5rem;
    width: auto;
    margin-top: 5px;
    margin-left: 818px;
  }

  .u-section-2 .u-text-3 {
    font-size: 1.5rem;
    width: auto;
    margin-top: -39px;
  }

  .u-section-2 .u-text-4 {
    font-size: 1.5rem;
    width: auto;
    margin-top: -39px;
    margin-left: 42px;
  }

  .u-section-2 .u-btn-1 {
    margin-top: 16px;
    margin-left: 85px;
  }

  .u-section-2 .u-btn-2 {
    margin-top: -46px;
  }

  .u-section-2 .u-btn-3 {
    margin-top: -46px;
    margin-right: 99px;
    margin-left: auto;
  }

  .u-section-2 .u-btn-4 {
    font-size: 0.875rem;
    margin-top: 73px;
  }
}

@media (max-width: 1199px) {
  .u-section-2 .u-sheet-1 {
    min-height: 762px;
  }

  .u-section-2 .u-text-1 {
    margin-top: 49px;
  }

  .u-section-2 .u-image-1 {
    margin-top: 29px;
  }

  .u-section-2 .u-image-3 {
    margin-left: 616px;
  }

  .u-section-2 .u-text-2 {
    margin-top: 15px;
    margin-right: 43px;
    margin-left: 635px;
  }

  .u-section-2 .u-text-3 {
    margin-top: -40px;
  }

  .u-section-2 .u-text-4 {
    margin-top: -38px;
    margin-left: 33px;
  }

  .u-section-2 .u-btn-1 {
    margin-top: 22px;
    margin-left: 74px;
  }

  .u-section-2 .u-btn-3 {
    margin-top: -45px;
    margin-right: 80px;
  }

  .u-section-2 .u-btn-4 {
    margin-top: 74px;
  }
}

@media (max-width: 991px) {
  .u-section-2 .u-sheet-1 {
    min-height: 1245px;
  }

  .u-section-2 .u-text-1 {
    margin-top: 19px;
    margin-right: -14px;
  }

  .u-section-2 .u-image-1 {
    margin-top: 41px;
    margin-right: 15px;
    margin-left: auto;
  }

  .u-section-2 .u-image-2 {
    margin-left: 13px;
  }

  .u-section-2 .u-image-3 {
    margin-top: 126px;
    margin-left: auto;
  }

  .u-section-2 .u-text-2 {
    width: 250px;
    margin-top: 13px;
    margin-left: auto;
    margin-right: auto;
  }

  .u-section-2 .u-text-3 {
    margin-top: -475px;
    margin-right: 39px;
  }

  .u-section-2 .u-text-4 {
    margin-left: 46px;
  }

  .u-section-2 .u-btn-1 {
    margin-top: 10px;
    margin-left: 88px;
  }

  .u-section-2 .u-btn-2 {
    margin-right: 88px;
  }

  .u-section-2 .u-btn-3 {
    margin-top: 402px;
    margin-right: auto;
  }

  .u-section-2 .u-btn-4 {
    margin-top: 61px;
    padding: 22px 114px 24px 113px;
  }
}

@media (max-width: 767px) {
  .u-section-2 .u-sheet-1 {
    min-height: 1731px;
  }

  .u-section-2 .u-text-1 {
    font-size: 2.6666666666666665rem;
    line-height: 1.07;
    margin-top: 28px;
    margin-right: -15px;
  }

  .u-section-2 .u-image-1 {
    margin-top: 506px;
    margin-right: auto;
  }

  .u-section-2 .u-image-2 {
    margin-top: -774px;
    margin-left: auto;
  }

  .u-section-2 .u-image-3 {
    margin-top: 645px;
  }

  .u-section-2 .u-text-2 {
    font-size: 1.3333333333333333rem;
    margin-top: 0;
  }

  .u-section-2 .u-text-3 {
    font-size: 1.3333333333333333rem;
    margin-top: -503px;
    margin-right: auto;
  }

  .u-section-2 .u-text-4 {
    font-size: 1.3333333333333333rem;
    margin-top: -510px;
    margin-left: 157px;
  }

  .u-section-2 .u-btn-1 {
    margin-top: 11px;
    margin-left: 186px;
  }

  .u-section-2 .u-btn-2 {
    margin-top: 432px;
    margin-right: auto;
  }

  .u-section-2 .u-btn-3 {
    margin-top: 431px;
  }

  .u-section-2 .u-btn-4 {
    margin-top: 86px;
  }
}

@media (max-width: 575px) {
  .u-section-2 .u-sheet-1 {
    min-height: 1710px;
  }

  .u-section-2 .u-text-1 {
    font-size: 2.25rem;
    margin-top: 20px;
    margin-right: -25px;
  }

  .u-section-2 .u-image-1 {
    margin-top: 510px;
  }

  .u-section-2 .u-image-2 {
    margin-top: -778px;
  }

  .u-section-2 .u-image-3 {
    margin-top: 670px;
  }

  .u-section-2 .u-text-2 {
    margin-top: 6px;
  }

  .u-section-2 .u-text-3 {
    margin-top: -532px;
  }

  .u-section-2 .u-text-4 {
    margin-top: -512px;
    margin-left: auto;
  }

  .u-section-2 .u-btn-1 {
    margin-top: 15px;
    margin-left: auto;
  }

  .u-section-2 .u-btn-2 {
    margin-top: 435px;
  }

  .u-section-2 .u-btn-3 {
    margin-top: 442px;
  }

  .u-section-2 .u-btn-4 {
    margin-top: 83px;
    padding-right: 73px;
    padding-left: 72px;
  }
}/* 1. Atur transisi dan kondisi awal */
/* Ganti .smooth-popup dengan Selector elemen Anda */
.smooth-popup {
    /* Tentukan durasi transisi, misalnya 0.3 detik */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; 
    
    /* Mulai dari tidak terlihat dan sedikit mengecil */
    opacity: 0;
    transform: scale(0.95);
}
/* 2. Atur kondisi saat popup terbuka */
/* Ganti .smooth-popup.open dengan Selector + class saat terbuka */
.smooth-popup.open {
    /* Tampilkan penuh dan kembali ke ukuran normal */
    opacity: 1;
    transform: scale(1);
}