@font-face {
  font-family: 'Blibli-Bold';
  src: url(../font/Blibli\ Regular.otf) format('truetype');
  /* Gantilah 'your-font-file.ttf' dengan nama file font yang sebenarnya dan sesuaikan format sesuai jenis font */
  }

@font-face {
  font-family: 'Blibli-ExtraBlack';
  src: url(../font/Blibli\ Black.ttf) format('truetype');
  /* Gantilah 'your-font-file.ttf' dengan nama file font yang sebenarnya dan sesuaikan format sesuai jenis font */
  }

@font-face {
  font-family: 'Blibli-Black';
  src: url(../font/Blibli\ Black.ttf) format('truetype');
  /* Gantilah 'your-font-file.ttf' dengan nama file font yang sebenarnya dan sesuaikan format sesuai jenis font */
  }

@font-face {
  font-family: 'Blibli-Regular';
  src: url(../font/Blibli\ Regular.otf) format('truetype');
  /* Gantilah 'your-font-file.ttf' dengan nama file font yang sebenarnya dan sesuaikan format sesuai jenis font */
  }

  @font-face {
    font-family: 'Blibli-ExtraBold';
    src: url(../font/Blibli\ ExtraBold.otf) format('truetype');
    /* Gantilah 'your-font-file.ttf' dengan nama file font yang sebenarnya dan sesuaikan format sesuai jenis font */
    }
  


/* desktop */

.desktop {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.desktop .div {
  background-color: #ffffff;
  overflow: hidden;
  width: 1280px;
  height: 5950px;
  position: relative;
}

.desktop .overlap {
  position: absolute;
  width: 1454px;
  height: 2057px;
  top: 0;
  left: -174px;
}

.desktop .overlap-group {
  position: absolute;
  width: 1324px;
  height: 2057px;
  top: 0;
  left: 130px;
}

.desktop .rectangle {
  position: absolute;
  width: 1280px;
  height: 2057px;
  top: 0;
  left: 44px;
}

.desktop .time {
  font-weight: 1000;
  font-family: "Blibli-ExtraBold", Helvetica;
}

.desktop .frame-show {
  display: flex;
  flex-direction: column;
  width: 1152px;
  height: 288px;
  align-items: flex-start;
  gap: 15px;
  position: relative;
  top: 1248px;
  left: 104px;
}

.desktop .text-wrapper-show {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Blibli-Bold", Helvetica;
  font-weight: 700;
  color: var(--collection-1-white);
  font-size: 23px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-2-show {
  width: fit-content;
  font-family: "Inter", Helvetica;
  font-weight: 300;
  color: var(--collection-1-orange);
  font-size: 28px;
  line-height: 28px;
  white-space: nowrap;
  position: relative;
  letter-spacing: 0;
}

.desktop .workshop-upcycled {
  position: relative;
  align-self: stretch;
  font-family: "Blibli-Bold", Helvetica;
  font-weight: 700;
  color: var(--collection-1-white);
  font-size: 23px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .kaki {
  position: absolute;
  width: 458px;
  height: 580px;
  top: 113px;
  left: 798px;
  object-fit: cover;
}

.desktop .img {
  position: absolute;
  width: 334px;
  height: 65px;
  top: 578px;
  left: 135px;
}

.desktop .SCBD-PARK-LOT {
  position: absolute;
  width: 619px;
  top: 447px;
  left: 135px;
  font-family: "Blibli-ExtraBlack", Helvetica;
  font-weight: 400;
  color: var(--collection-1-white);
  font-size: 24px;
  letter-spacing: 0;
  line-height: 32px;
}

.desktop .span {
  font-weight: 950;
}

.desktop .text-wrapper-3 {
  font-family: "Blibli-Bold", Helvetica;
  font-weight: 700;
}

.desktop .top-bar-no-logo {
  position: absolute;
  width: 1280px;
  height: 44px;
  top: 0;
  left: 44px;
}

.desktop .layer {
  position: absolute;
  width: 623px;
  height: 109px;
  top: 316px;
  left: 135px;
  object-fit: cover;
}

.desktop .logo-langkah-membumi {
  position: absolute;
  width: 511px;
  height: 198px;
  top: 95px;
  left: 135px;
  object-fit: cover;
}

.desktop .frame-2 {
  display: flex;
  flex-direction: column;
  width: 409px;
  align-items: flex-start;
  gap: 30px;
  padding: 10px;
  position: absolute;
  top: 806px;
  left: 847px;
}

.desktop .frame-3 {
  display: flex;
  width: 399px;
  align-items: center;
  gap: 25px;
  position: relative;
  flex: 0 0 auto;
  margin-right: -10px;
}

.desktop .image {
  position: relative;
  width: 44px;
  height: 44px;
  object-fit: cover;
}

.desktop .tukar-sampah-plastik {
  position: relative;
  width: 390px;
  margin-top: -1px;
  margin-right: -60px;
  font-family: "Blibli-ExtraBlack", Helvetica;
  font-weight: 950;
  color: #ffffff;
  font-size: 23px;
  letter-spacing: 0;
  line-height: 23px;
}

.desktop .image-2 {
  position: relative;
  width: 29.15px;
  height: 44px;
  object-fit: cover;
}

.desktop .coba-langsung {
  position: relative;
  width: 390px;
  margin-top: -1px;
  margin-right: -45.15px;
  font-family: "Blibli-ExtraBlack", Helvetica;
  font-weight: 950;
  color: #ffffff;
  font-size: 23px;
  letter-spacing: 0;
  line-height: 23px;
}

.desktop .image-3 {
  position: relative;
  width: 57.76px;
  height: 44px;
  object-fit: cover;
}

.desktop .uji-emisi-gratis {
  position: relative;
  width: 390px;
  margin-top: -1px;
  margin-right: -73.76px;
  font-family: "Blibli-ExtraBlack", Helvetica;
  font-weight: 950;
  color: #ffffff;
  font-size: 23px;
  letter-spacing: 0;
  line-height: 23px;
}

.desktop .image-4 {
  position: relative;
  width: 29.94px;
  height: 44px;
  object-fit: cover;
}

.desktop .cek-kesehatan-gratis {
  position: relative;
  width: 390px;
  margin-top: -1px;
  margin-right: -45.94px;
  font-family: "Blibli-ExtraBlack", Helvetica;
  font-weight: 950;
  color: #ffffff;
  font-size: 23px;
  letter-spacing: 0;
  line-height: 23px;
}

.desktop .group {
  position: absolute;
  width: 1324px;
  height: 487px;
  top: 1570px;
  left: 0;
}

.desktop .overlap-2 {
  position: absolute;
  width: 1121px;
  height: 487px;
  top: 0;
  left: 44px;
}

.desktop .image-5 {
  position: absolute;
  width: 993px;
  height: 487px;
  top: 0;
  left: 128px;
  object-fit: cover;
}

.desktop .image-6 {
  position: absolute;
  width: 149px;
  height: 106px;
  top: 41px;
  left: 0;
  object-fit: cover;
}

.desktop .image-7 {
  position: absolute;
  width: 82px;
  height: 95px;
  top: 115px;
  left: 1242px;
  object-fit: cover;
}

.desktop .rectangle-2 {
  position: absolute;
  width: 249px;
  height: 195px;
  top: 44px;
  left: 845px;
  background-color: #ffffff;
  border-radius: 0px 0px 10px 10px;
}

.desktop .flexcontainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  position: absolute;
  width: 189px;
  height: 148px;
  top: 63px;
  left: 875px;
}

.desktop .text {
  align-self: stretch;
  font-family: "Blibli-Bold", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 19px;
  line-height: 22px;
  position: relative;
  letter-spacing: 0;
}

.desktop .text-wrapper-4 {
  font-family: "Blibli-Bold", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 19px;
  letter-spacing: 0;
  line-height: 22px;
}

.desktop .frame-4 {
  display: flex;
  flex-wrap: wrap;
  width: 780px;
  align-items: flex-start;
  gap: 10px 10px;
  padding: 10px 0px;
  position: absolute;
  top: 789px;
  left: 104px;
}

.desktop .frame-5 {
  display: flex;
  flex-direction: column;
  width: 364px;
  align-items: flex-start;
  justify-content: center;
  padding: 10px 0px;
  position: relative;
}

.desktop .sambutan-pembuka {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Blibli-ExtraBlack", Helvetica;
  font-weight: 950;
  color: var(--collection-1-orange);
  font-size: 25px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-5 {
  position: relative;
  width: fit-content;
  font-family: "Blibli-ExtraBlack", Helvetica;
  font-weight: 950;
  color: var(--collection-1-white);
  font-size: 32px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .frame-6 {
  display: flex;
  flex-direction: column;
  width: 357px;
  align-items: flex-start;
  justify-content: center;
  padding: 10px 0px;
  position: relative;
}

.desktop .text-wrapper-6 {
  position: relative;
  width: 433px;
  margin-top: -1px;
  margin-right: -76px;
  font-family: "Blibli-ExtraBlack", Helvetica;
  font-weight: 950;
  color: var(--collection-1-orange);
  font-size: 25px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-7 {
  position: relative;
  width: fit-content;
  font-family: "Blibli-ExtraBlack", Helvetica;
  font-weight: 950;
  color: var(--collection-1-white);
  font-size: 32px;
  letter-spacing: 0;
  line-height: 32px;
}

.desktop .berbagai-keseruan {
  position: relative;
  width: 433px;
  margin-top: -1px;
  margin-right: -69px;
  font-family: "Blibli-ExtraBlack", Helvetica;
  font-weight: 950;
  color: var(--collection-1-orange);
  font-size: 25px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .frame-7 {
  display: flex;
  flex-direction: column;
  width: 335px;
  align-items: flex-start;
  justify-content: center;
  padding: 10px 0px;
  position: relative;
}

.desktop .text-wrapper-8 {
  position: relative;
  width: 433px;
  margin-top: -1px;
  margin-right: -98px;
  font-family: "Blibli-ExtraBlack", Helvetica;
  font-weight: 950;
  color: var(--collection-1-orange);
  font-size: 25px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .rectangle-3 {
  position: absolute;
  width: 174px;
  height: 97px;
  top: 49px;
  left: 0;
  background-color: #d9d9d9;
}

.desktop .group-wrapper {
  position: absolute;
  width: 1280px;
  height: 1025px;
  top: 2057px;
  left: 0;
  /* background-image: url(../images/img/rectangle-17.png); */
  background-size: 100% 100%;
}

.desktop .frame-wrapper {
  position: relative;
  width: 1051px;
  height: 796px;
  top: 115px;
  left: 115px;
}

.desktop .div-wrapper {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  position: relative;
}

.desktop .frame-8 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.desktop .frame-9 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .text-wrapper-9 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Blibli-Black", Helvetica;
  font-weight: 900;
  color: var(--collection-1-orange);
  font-size: 62px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .frame-10 {
  display: inline-flex;
  align-items: flex-start;
  padding: 10px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .frame-11 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.desktop .frame-12 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 30px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border: 1px solid;
  border-color: var(--collection-1-gray-1);
}

.desktop .text-wrapper-10-1 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Blibli-Bold", Helvetica;
  font-weight: 700;
  color: var(--collection-1-blubli);
  font-size: 42px;
  letter-spacing: 0;
  line-height: normal;
  padding-left: 30px;
}

.desktop .text-wrapper-10-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Blibli-Bold", Helvetica;
  font-weight: 700;
  color: var(--collection-1-blubli);
  font-size: 42px;
  letter-spacing: 0;
  line-height: normal;
  padding-left: 5px;
}

.desktop .frame-13 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  padding: 30px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  margin-top: -1px;
  border: 1px solid;
  border-color: var(--collection-1-gray-1);
}

.desktop .element {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Blibli-Regular", Helvetica;
  font-weight: 400;
  color: var(--collection-1-text-primary);
  font-size: 22px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .text-wrapper-11 {
  position: relative;
  align-self: stretch;
  font-family: "Blibli-Regular", Helvetica;
  font-weight: 400;
  color: var(--collection-1-text-primary);
  font-size: 22px;
  letter-spacing: 0;
  line-height: normal;
}

.desktop .frame-14 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
  margin-left: -1px;
}

.desktop .group-2 {
  position: absolute;
  width: 1px;
  height: 1px;
  top: -3545px;
  left: -5232px;
}

.desktop .vector {
  position: absolute;
  width: 484px;
  height: 113px;
  top: -2979px;
  left: -4171px;
}

.desktop .overlap-group-wrapper {
  position: absolute;
  width: 1282px;
  height: 166px;
  top: 5800px;
  left: 0;
}

.desktop .overlap-group-2 {
  width: 1280px;
  height: 166px;
  background-image: url(../images/img/rectangle-10-1.png);
  background-size: 100% 100%;
}

.desktop .frame-15 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  position: relative;
  top: 61px;
  left: 100px;
}

.desktop .frame-16 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 10px;
  position: relative;
  flex: 0 0 auto;
}

.desktop .text-wrapper-12 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Blibli-Regular", Helvetica;
  font-weight: 400;
  color: var(--collection-1-white);
  font-size: 19px;
  letter-spacing: 0;
  line-height: normal;
  text-decoration: underline;
}

.desktop .group-3 {
  position: absolute;
  width: 3000px;
  height: 1000px;
  top: 2700px;
  left: 32px;
}

.desktop .group-4 {
  position: absolute;
  width: 1500px;
  height: 1000px;
  top: 1300px;
  left: 0px;
}

.desktop .community-partner {
  position: absolute;
  width: 260px;
  height: 50px;
  top: 6px;
  left: 230px;
}

.desktop .logo {
  position: absolute;
  width: 1200px;
  height: 1620px;
  top: 100px;
  left: 10;
  /* object-fit: cover; */
}

.desktop .group-5 {
  position: absolute;
  width: 168px;
  height: 200px;
  top: 320px;
  left: 855px;
}

.desktop .venue-partner {
  position: absolute;
  width: 190px;
  height: 45px;
  top: 10px;
  left: 0;
}

.desktop .artha-graha-peduli {
  position: absolute;
  width: 100px;
  height: 60px;
  top: 80px;
  left: 40px;
  object-fit: cover;
}

.desktop .group-6 {
  position: absolute;
  width: 612px;
  height: 200px;
  top: 0px;
  left: 606px;
}

.desktop .event-partner {
  position: absolute;
  width: 200px;
  height: 48px;
  /* top: 7px; */
  left: 238px;
}


.desktop .eventpartners {
  position: absolute;
  width: 630px;
  height: 95px;
  top: 80px;
  left: 0;
  /* object-fit: cover; */
}

.desktop .group-7 {
  position: absolute;
  width: 587px;
  height: 325px;
  top: 0;
  left: 0;
}

.desktop .sponsored-by-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 30px;
  position: absolute;
  top: 0;
  left: 250px;
  background-color: var(--collection-1-blubli);
  border-radius: 30px;
}

.desktop .sponsored-by {
  position: relative;
  flex: 0 0 auto;
}

.desktop .logo-sponsored-by {
  position: absolute;
  width: 650px;
  height: 180px;
  top: 75px;
  left: 0;
  /* object-fit: cover; */
}


/* mobile  */

.mobile {
  /* Properti yang ingin disembunyikan di layar desktop */
  display: none;
}

@media only screen and (max-width: 768px) {
  /* Menyembunyikan gaya desktop ketika lebar layar kurang dari atau sama dengan 768px */

  .desktop {
    display: none;
  }

  /* Menampilkan gaya untuk layar mobile */
  .mobile {
    display: block;
  }
}

.frame {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.frame .div {
  background-color: #ffffff;
  overflow: hidden;
  width: 599px;
  height: 7630px;
  position: relative;
}

.frame .overlap-group {
  position: absolute;
  width: 599px;
  height: 2006px;
  top: 0;
  left: 0;
  background-image: url(../images/img/rectangle-10-2.png);
  background-size: 100% 100%;
}

.frame .overlap {
  position: absolute;
  width: 599px;
  height: 750px;
  top: 1250px;
  left: 0;
}

.frame .time {
  font-weight: 1000;
  font-family: "Blibli-ExtraBold", Helvetica;
}

.frame .image {
  position: absolute;
  width: 390px;
  height: 195px;
  top: 563px;
  left: 0;
}

.frame .img {
  position: absolute;
  width: 82px;
  height: 95px;
  top: 214px;
  left: 517px;
  object-fit: cover;
}

.frame .image-2 {
  position: absolute;
  width: 75px;
  height: 65px;
  top: 276px;
  left: 0;
  object-fit: cover;
}

.frame .div-2 {
  display: flex;
  flex-direction: column;
  width: 430px;
  align-items: flex-start;
  gap: 30px;
  padding: 15px;
  position: absolute;
  top: 0;
  /* left: 75px; */
}

.frame .div-3 {
  display: inline-flex;
  align-items: flex-start;
  gap: 74px;
  position: relative;
  flex: 0 0 auto;
  margin-right: -67.12px;
}

.frame .image-3 {
  position: relative;
  width: 33.12px;
  height: 50px;
  object-fit: cover;
}

.frame .text-wrapper {
  position: relative;
  width: 390px;
  margin-top: -1px;
  font-family: "Blibli-ExtraBlack", Helvetica;
  font-weight: 950;
  color: #ffffff;
  font-size: 25px;
  letter-spacing: 0;
  line-height: 30px;
}

.frame .div-4 {
  display: inline-flex;
  align-items: flex-start;
  gap: 90px;
  position: relative;
  flex: 0 0 auto;
  margin-right: -60.64px;
}

.frame .image-4 {
  position: relative;
  width: 65.64px;
  height: 50px;
  object-fit: cover;
}

.frame .image-6 {
  position: relative;
  width: 45px;
  height: 60px;
  object-fit: cover;
}

.frame .div-5 {
  display: inline-flex;
  align-items: flex-start;
  gap: 55px;
  position: relative;
  flex: 0 0 auto;
  margin-right: -65px;
}

.frame .image-5 {
  position: relative;
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.frame .p {
  position: absolute;
  width: 420px;
  top: 1012px;
  /* left: 55px; */
  font-family: "Blibli-Regular", Helvetica;
  font-weight: 400;
  color: var(--collection-1-orange);
  font-size: 40px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .element-TALKSHOWS {
  position: absolute;
  top: 1000px;
  left: 33px;
  font-family: "Blibli-ExtraBlack", Helvetica;
  font-weight: 950;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
  letter-spacing: 0;
  line-height: 32px;
}

.frame .overlap-2 {
  position: absolute;
  width: 525px;
  height: 782px;
  top: 35px;
  /* left: 44px; */
}

.frame .kaki {
  position: absolute;
  width: 326px;
  height: 413px;
  top: 50px;
  left: 38px;
  object-fit: cover;
}

.frame .layer {
  width: 265px;
  top: 306px;
  left: 30px;
  position: absolute;
  height: 90px;
}

.frame .layer-2 {
  width: 269px;
  top: 380px;
  left: 100px;
  position: absolute;
  height: 90px;
}

.frame .SCBD-PARK-LOT {
  position: absolute;
  width: 352px;
  top: 590px;
  left: 20px;
  font-family: "Blibli-ExtraBlack", Helvetica;
  font-weight: 400;
  color: var(--collection-1-white);
  font-size: 24px;
  text-align: center;
  letter-spacing: 0;
  line-height: 32px;
}

.frame .span {
  font-weight: 950;
}

.frame .text-wrapper-2 {
  font-family: "Blibli-Bold", Helvetica;
  font-weight: 700;
}

.frame .logo-langkah-membumi {
  position: absolute;
  padding: 10px;
  width: 400px;
  height: 175px;
  top: 20px;
  left: 0;
  /* object-fit: cover; */
}

.frame .vector {
  position: absolute;
  width: 24px;
  height: 21px;
  top: 0;
  left: 501px;
}

.frame .img-2 {
  position: absolute;
  width: 334px;
  height: 65px;
  top: 830px;
  left: 25px;
}

.frame .overlap-3 {
  position: absolute;
  width: 602px;
  height: 1555px;
  top: 2006px;
  left: 0;
}

.frame .rectangle {
  position: absolute;
  width: 599px;
  height: 1555px;
  top: 0;
  left: 0;
}

.frame .group {
  position: absolute;
  width: 602px;
  height: 1410px;
  top: 0px;
  left: 0;
}

.frame .frame-wrapper {
  display: flex;
  width: 395px;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  position: relative;
}

.frame .div-6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.frame .div-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.frame .text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Blibli-Black", Helvetica;
  font-weight: 900;
  color: var(--collection-1-orange);
  font-size: 30px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .div-7 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.frame .div-8 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.frame .div-wrapper-2 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 30px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border: 1px solid;
  border-color: var(--collection-1-gray-1);
}

.frame .text-wrapper-4 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Blibli-Bold", Helvetica;
  font-weight: 700;
  color: var(--collection-1-blubli);
  font-size: 25px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .div-9 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  padding: 30px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  margin-top: -1px;
  border: 1px solid;
  border-color: var(--collection-1-gray-1);
}

.frame .element {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Blibli-Regular", Helvetica;
  font-weight: 400;
  color: var(--collection-1-text-primary);
  font-size: 22px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-wrapper-5 {
  position: relative;
  align-self: stretch;
  font-family: "Blibli-Regular", Helvetica;
  font-weight: 400;
  color: var(--collection-1-text-primary);
  font-size: 22px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .div-10 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  margin-top: -1px;
}

.frame .group-2 {
  position: absolute;
  width: 599px;
  height: 166px;
  top: 4970px;
  left: 0;
  background-image: url(../images/img/rectangle-18.png);
  background-size: 100% 100%;
}

.frame .frame-wrapper-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  position: relative;
  top: 61px;
  left: 56px;
}

.frame .div-11 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 10px;
  position: relative;
  flex: 0 0 auto;
}

.frame .text-wrapper-6 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Blibli-Regular", Helvetica;
  font-weight: 400;
  color: var(--collection-1-white);
  font-size: 19px;
  letter-spacing: 0;
  line-height: normal;
  text-decoration: underline;
}

.frame .group-3 {
  position: absolute;
  width: 576px;
  height: 174px;
  top: 5870px;
  /* left: 13px; */
}

.frame .text-wrapper-7 {
  position: absolute;
  top: 0;
  left: 115px;
  font-family: "Blibli-Black", Helvetica;
  font-weight: 900;
  color: var(--collection-1-blubli);
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .eventpartners {
  position: absolute;
  width: 395px;
  height: 1700px;
  top: 0px;
  left: 0;
  padding: 10px;
  /* object-fit: cover; */
}

.frame .group-4 {
  position: absolute;
  width: 575px;
  height: 309px;
  top: 3845px;
  /* left: 13px; */
}

.frame .text-wrapper-8 {
  position: absolute;
  top: 0;
  left: 115px;
  font-family: "Blibli-Black", Helvetica;
  font-weight: 900;
  color: var(--collection-1-blubli);
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .sponsored-by {
  position: absolute;
  width: 395px;
  height: 140px;
  top: 65px;
  left: 0;
  padding: 10px;
  /* object-fit: cover; */
}

.frame .group-5 {
  position: absolute;
  width: 168px;
  height: 180px;
  top: 4090px;
  left: 160px;
}

.frame .text-wrapper-9 {
  /* position: absolute; */
  top: 0;
  left: 0;
  font-family: "Blibli-Black", Helvetica;
  font-weight: 900;
  color: var(--collection-1-blubli);
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .artha-graha-peduli {
  position: absolute;
  width: 60px;
  height: 40px;
  top: 90px;
  /* padding: 10px; */
  /* left: 21px; */
  /* object-fit: cover; */
}

.frame .group-6 {
  position: absolute;
  width: 558px;
  height: 481px;
  top: 4290px;
  /* left: 22px; */
}

.frame .text-wrapper-10 {
  position: absolute;
  top: 0;
  left: 70px;
  font-family: "Blibli-Black", Helvetica;
  font-weight: 900;
  color: var(--collection-1-blubli);
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .logo {
  width: 400px;
  padding: 10px;
  top: 61px;
  left: 0;
  position: absolute;
  height: 150px;
}

.frame .logo-2 {
  width: 415px;
  top: 230px;
  padding: 10px;
  /* left: 37px; */
  position: absolute;
  height: 160px;
}


/* register */

.frame-register {
  display: flex;
  flex-direction: column;
  width: 540px;
  height: 618px;
  align-items: flex-start;
  gap: 20px;
  padding: 80px 0px;
  position: relative;
}

.frame-register .logo-langkah-membumi {
  position: relative;
  width: 504.95px;
  height: 180px;
  object-fit: cover;
}

.frame-register .text-wrapper {
  position: relative;
  align-self: stretch;
  font-family: "Blibli-Bold", Helvetica;
  font-weight: 700;
  color: var(--collection-1-white);
  font-size: 30px;
  letter-spacing: 0;
  line-height: normal;
}

.frame-register .div {
  display: flex;
  flex-direction: column;
  height: 497px;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  margin-bottom: -195px;
}

.frame-register .talk-show-sandiaga {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Blibli-Regular", Helvetica;
  font-weight: 400;
  color: var(--collection-1-white);
  font-size: 15px;
  letter-spacing: 0;
  line-height: normal;
}

.frame-register .text-wrapper-2 {
  position: relative;
  width: fit-content;
  font-family: "Inter", Helvetica;
  font-weight: 300;
  color: var(--collection-1-orange);
  font-size: 28px;
  letter-spacing: 0;
  line-height: 28px;
  white-space: nowrap;
}

.frame-register .p {
  position: relative;
  align-self: stretch;
  font-family: "Blibli-Regular", Helvetica;
  font-weight: 400;
  color: var(--collection-1-white);
  font-size: 15px;
  letter-spacing: 0;
  line-height: normal;
}

.frame-register body {
  background-image: url(../images/img/bg-1.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff; /* Sesuaikan warna teks dengan warna yang sesuai dengan gambar latar belakang */
}

/* Tambahkan properti ini untuk menambahkan scrollbar */
.list-group {
    display: flex;
    flex-direction: column; /* Ubah dari nowrap ke column */
    gap: 10px;
    overflow-y: auto; /* Aktifkan scrollbar vertikal */
    max-height: 200px; /* Tentukan tinggi maksimum untuk scroll */
    padding: 0;
    list-style-type: none;
}

.list-group::-webkit-scrollbar {
    width: 6px; /* Lebar scrollbar */
}

.list-group::-webkit-scrollbar-thumb {
    background: #cccccc; /* Warna thumb scrollbar */
    border-radius: 10px; /* Membuat sudutnya bulat */
}

.list-group::-webkit-scrollbar-thumb:hover {
    background: #888888; /* Warna thumb saat dihover */
}