@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap");

/* ===================================== */
/*                General                */
/* ===================================== */

body {
  font-family: "Fredoka", sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: #061116;
  counter-reset: section;
}

.main {
  background-image: url(../img/content-bg.png);
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: max-content;
  position: relative;
}

@media (max-width: 575px) {
  .main {
    background-image: url(../img/galaxybg-mobile.png);
  }
}

.title-w-stroke h1 {
  text-align: center;
  font-family: "Fredoka", sans-serif;
  /* font-size: 35px; */
  font-size: clamp(1.125rem, 0.8213rem + 1.5186vw, 2.188rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  margin: 0;
  background: -webkit-linear-gradient(0deg, #913ef0 0%, #dc6e69 100%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 8px transparent;
  color: #ffffff;
  padding: 0 0.5rem;
}

/* ===================================== */
/*             Sticky Icons              */
/* ===================================== */

.sticky-icons {
  position: sticky;
  position: -webkit-sticky;
  top: 35px;
  left: 0;
  z-index: 9999;
}

.icon-left,
.icon-right {
  position: relative;
  overflow-x: clip;
}

.icon-left > img,
.icon-right > img {
  position: absolute;
  object-fit: contain;
  z-index: 99;
}

.icon-left .one {
  top: 20px;
  left: 7px;
  /* max-width: 140px; */
  max-width: clamp(6.25rem, 0.7143rem + 8.9286vw, 8.75rem);
}

.icon-left .two {
  top: 180px;
  left: 0;
  /* max-width: 135px; */
  max-width: clamp(6.25rem, 1.4051rem + 7.8143vw, 8.438rem);
}

.icon-left .three {
  top: 340px;
  left: -15px;
  /* max-width: 200px; */
  max-width: clamp(8.125rem, -1.5625rem + 15.625vw, 12.5rem);
}

.icon-left .four {
  /* top: 600px; */
  top: clamp(34.375rem, 27.4554rem + 11.1607vw, 37.5rem);
  left: 0;
  /* max-width: 100px; */
  max-width: clamp(5rem, 2.2321rem + 4.4643vw, 6.25rem);
}

.icon-right .one {
  top: 15px;
  right: 0;
  /* max-width: 140px; */
  max-width: clamp(6.25rem, 0.7143rem + 8.9286vw, 8.75rem);
}

.icon-right .two {
  top: 175px;
  right: 0;
  /* max-width: 150px; */
  max-width: clamp(6.25rem, -0.6696rem + 11.1607vw, 9.375rem);
}

.icon-right .three {
  /* top: 450px; */
  top: clamp(25rem, 18.0804rem + 11.1607vw, 28.125rem);
  right: 0;
  /* max-width: 90px; */
  max-width: clamp(4.375rem, 1.6071rem + 4.4643vw, 5.625rem);
}

.icon-right .four {
  /* top: 580px; */
  top: clamp(33.125rem, 26.2054rem + 11.1607vw, 36.25rem);
  right: -30px;
  /* max-width: 200px; */
  max-width: clamp(8.125rem, -1.5625rem + 15.625vw, 12.5rem);
}

.icon-element-footer-mobile {
  padding: 37px;
  text-align: center;
}

.icon-element-header-mobile {
  position: sticky;
  position: -webkit-sticky;
  top: 100px;
  left: 0;
  z-index: 9999;
  text-align: center;
}

.icon-element-footer-mobile img,
.icon-element-header-mobile img {
  max-width: 640px;
}

.kelas-kuih-main .icon-left .one {
  top: 31px;
  left: 53px;
  max-width: clamp(7.5rem, 3.2087rem + 6.9214vw, 9.438rem);
}

.kelas-kuih-main .icon-left .two {
  top: 190px;
  left: 112px;
  max-width: clamp(6.25rem, 0.8516rem + 8.7071vw, 8.688rem);
}

.kelas-kuih-main .icon-left .three {
  top: 315px;
  left: 0;
  max-width: clamp(10.625rem, 5.7801rem + 7.8143vw, 12.813rem);
}

.kelas-kuih-main .icon-left .four {
  top: 600px;
  left: 0;
  max-width: clamp(6.25rem, -1.2232rem + 12.0536vw, 9.625rem);
}

.kelas-kuih-main .icon-right .one {
  top: 34px;
  right: 100px;
  max-width: clamp(6.25rem, 1.5446rem + 7.5893vw, 8.375rem);
}

.kelas-kuih-main .icon-right .two {
  top: 145px;
  right: 0;
  max-width: clamp(6.563rem, 1.0273rem + 8.9286vw, 9.063rem);
}

.kelas-kuih-main .icon-right .three {
  top: 420px;
  right: 0;
  max-width: clamp(6.875rem, -1.4286rem + 13.3929vw, 10.625rem);
}

.kelas-kuih-main .icon-right .four {
  top: 580px;
  right: 0;
  max-width: clamp(7.188rem, -3.1904rem + 16.7393vw, 11.875rem);
}

/* ===================================== */
/*             Banner Swiper             */
/* ===================================== */

.banner-header-wrapper {
  background-color: #061116;
}

.swiper {
  width: 100%;
  padding: 34px 0;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.swiper-slide img {
  display: block;
  width: 100%;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  color: #fff;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: url(../img/left.svg);
  padding-left: 40px;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: url(../img/right.svg);
  padding-right: 40px;
}

/* ===================================== */
/*             Sticky Navbar             */
/* ===================================== */

#jaguh-navbar {
  overflow: hidden;
  background: linear-gradient(135deg, #8e3cf4 0%, #de6f65 100%);
}
#jaguh-navbar.navbar {
  padding: 20px 1rem;
}

.jk-brand {
  height: 36px;
  object-fit: contain;
}

#jaguh-navbar .navbar-collapse {
  justify-content: center;
  border: 0;
}

#jaguh-navbar.sticky {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 9999;
}

#jaguh-navbar.navbar-light .navbar-toggler.collapsed .navbar-toggler-icon {
  background-image: url(../img/hamburger.svg);
}
#jaguh-navbar.navbar-light .navbar-toggler .navbar-toggler-icon {
  background-image: url(../img/close-square-svgrepo-com\ 1.svg);
}

#jaguh-navbar .navbar-toggler {
  padding: 0;
}

#jaguh-navbar.navbar-light .navbar-toggler {
  color: unset;
  border: 0;
  border-color: unset;
}

#jaguh-navbar.navbar-light .navbar-nav .nav-link {
  font-family: "Fredoka", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  padding: 5px 15px;
  border: 3px solid transparent;
  margin: 0 2px;
  max-width: max-content;
}

#jaguh-navbar.navbar-light .navbar-nav .active > .nav-link,
#jaguh-navbar.navbar-light .navbar-nav .nav-link.active,
#jaguh-navbar.navbar-light .navbar-nav .nav-link.show,
#jaguh-navbar.navbar-light .navbar-nav .show > .nav-link {
  border-radius: 10px;
  border: 3px solid #fff !important;
}

#jaguh-navbar.navbar-light .navbar-nav .nav-link:focus,
#jaguh-navbar.navbar-light .navbar-nav .nav-link:hover {
  border-radius: 10px;
  border: 3px solid #fff !important;
}

#jaguh-navbar.sticky + .main {
  margin-top: 80px;
}

/* ===================================== */
/*         Main Birthday Section         */
/* ===================================== */

#main-birthday-section {
  padding: 47px 0;
}

.main-birthday-wrapper {
  position: relative;
}

.birthday-imgs-wrapper {
  border-radius: 10px;
  overflow: hidden;
}

.birthday-imgs-item-wrapper {
  height: 100%;
}

.birthday-imgs-item-wrapper img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.birthday-click-here-wrapper {
  width: 100%;
  max-width: max-content;
  /* border-radius: 20px; */
  border-radius: clamp(0.625rem, 0.4464rem + 0.8929vw, 1.25rem);
  background: linear-gradient(135deg, #8f3df3 0%, #de6f66 100%);
  /* padding: 15px; */
  padding: clamp(0.313rem, 0.1344rem + 0.8929vw, 0.938rem);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  z-index: 1;
}

.birthday-click-here-wrapper h1 {
  width: 100%;
  font-family: "Fredoka", sans-serif;
  color: #fff;
  text-align: center;
  /* font-size: 30px; */
  font-size: clamp(0.875rem, 0.5893rem + 1.4286vw, 1.875rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  margin: 0;
}

.birthday-click-here-wrapper a {
  color: #fff;
  text-align: center;
  /* font-size: 20px; */
  font-size: clamp(0.625rem, 0.4464rem + 0.8929vw, 1.25rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  display: block;
  width: 100%;
  max-width: max-content;
  /* padding: 10px; */
  padding: clamp(0.313rem, 0.2239rem + 0.4457vw, 0.625rem);
  border-radius: 10px;
  background: #0ad4b3;
  transition: 0.2s ease-in-out;
}

.birthday-click-here-wrapper a:hover {
  background: #4d4d4d;
}

/* ===================================== */
/*              Birthday Page            */
/* ===================================== */

#birthday-page {
  padding: 50px 0 67px 0;
}

.birthday-title-wrapper {
  width: fit-content;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* gap: 15px; */
  gap: clamp(0.313rem, 0.1344rem + 0.8929vw, 0.938rem);
  margin-bottom: clamp(1.25rem, 1.1071rem + 0.7143vw, 1.75rem);
}

.birthday-title-wrapper h1 {
  background: -webkit-linear-gradient(0deg, #913ef0 0%, #dc6e69 100%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 8px transparent;
  color: #ffffff;
  text-align: right;
  font-family: "Fredoka", sans-serif;
  /* font-size: 35px; */
  font-size: clamp(1.563rem, 1.3844rem + 0.8929vw, 2.188rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  margin: 0;
  text-align: right;
  padding: 0 0.5rem;
  width: 100%;
  max-width: clamp(14.063rem, 12.5096rem + 7.7671vw, 19.5rem);
}

.tv9-logo-wrapper img {
  max-width: 160px;
  object-fit: contain;
}

.birthday-desc-wrapper p {
  color: #fff;
  font-family: "Fredoka", sans-serif;
  /* font-size: 20px; */
  font-size: clamp(0.875rem, 0.7679rem + 0.5357vw, 1.25rem);
  font-style: normal;
  font-weight: 600;
  /* line-height: 30px; */
  line-height: clamp(1.25rem, 1.0714rem + 0.8929vw, 1.875rem);
  width: 100%;
  max-width: 1000px;
  text-align: center;
  margin-bottom: clamp(1rem, 0.75rem + 1.25vw, 1.875rem);
}

.birthday-desc-wrapper p span {
  /* font-size: 25px; */
  font-size: clamp(1.25rem, 1.1606rem + 0.4471vw, 1.563rem);
}

.birthday-borang-wrapper {
  width: fit-content;
  border-radius: clamp(0.625rem, 0.4464rem + 0.8929vw, 1.25rem);
  background: linear-gradient(135deg, #8f3df3 0%, #de6f66 100%);
  padding-top: clamp(0.313rem, 0.2239rem + 0.4457vw, 0.625rem);
  padding-bottom: clamp(0.313rem, 0.2239rem + 0.4457vw, 0.625rem);
  padding-left: clamp(0.938rem, 0.8489rem + 0.4457vw, 1.25rem);
  padding-right: clamp(0.938rem, 0.8489rem + 0.4457vw, 1.25rem);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: auto;
  margin-bottom: clamp(1.875rem, 1.5179rem + 1.7857vw, 3.125rem);
}

.birthday-borang-wrapper p {
  color: #fff;
  text-align: center;
  font-family: "Fredoka", sans-serif;
  /* font-size: 30px; */
  font-size: clamp(1rem, 0.75rem + 1.25vw, 1.875rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  margin: 0;
}

.birthday-borang-wrapper a {
  display: block;
  color: #fff;
  text-align: center;
  font-family: "Fredoka", sans-serif;
  /* font-size: 20px; */
  font-size: clamp(0.875rem, 0.7679rem + 0.5357vw, 1.25rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  border-radius: 10px;
  background: #903df1;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: clamp(0.625rem, 0.4464rem + 0.8929vw, 1.25rem);
  padding-right: clamp(0.625rem, 0.4464rem + 0.8929vw, 1.25rem);
  transition: 0.2s ease-in-out;
}

.birthday-borang-wrapper a:hover {
  background: #210f2f;
}

.panduan-upload-wrapper {
  margin-bottom: clamp(1.875rem, 1.5179rem + 1.7857vw, 3.125rem);
}

.panduan-upload-wrapper h1 {
  background: -webkit-linear-gradient(0deg, #913ef0 0%, #dc6e69 100%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 8px transparent;
  color: #fff;
  text-align: center;
  font-family: "Fredoka", sans-serif;
  /* font-size: 35px; */
  font-size: clamp(1.125rem, 0.8213rem + 1.5186vw, 2.188rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  margin-bottom: clamp(1.375rem, 1.1964rem + 0.8929vw, 2rem);
}

.panduan-upload-wrapper ul li {
  color: #fff;
  font-family: "Fredoka", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: clamp(0.625rem, 0.4107rem + 1.0714vw, 1.375rem);
  padding-left: 2.7rem;
  background: url("../img/panduan-icon.png") no-repeat left center;
  list-style: none;
  vertical-align: middle;
}

.panduan-upload-wrapper ul {
  list-style: none;
  padding: 0;
}

.video-sambutan-birthday-wrapper {
  display: flex;
  gap: 21px;
}

.video-sambutan-birthday-wrapper .month-year-wrapper {
  width: 250px;
  /* height: fit-content; */
  /* height: 665px; */
  border-radius: 20px;
  background: linear-gradient(132deg, #8f3df3 0%, #de6f66 100%);
}

.video-sambutan-birthday-wrapper .birthday-video-wrapper {
  width: calc(100% - 250px);
  height: fit-content;
  /* height: 665px; */
  padding: 10px 17px;
}

.video-sambutan-birthday-wrapper .accordion {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 17px;
}

.video-sambutan-birthday-wrapper .accordion-item:not(:last-child) {
  margin-bottom: 10px;
}

.video-sambutan-birthday-wrapper .accordion-header {
  border-radius: 10px;
  border: 2px solid #fff;
  color: #fff;
  padding: 10px 15px;
  cursor: pointer;
  text-align: left;
  font-family: "Fredoka", sans-serif;
  /* font-size: 20px; */
  font-size: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
}

.video-sambutan-birthday-wrapper .accordion-item.active .accordion-content {
  /* Your existing styles for the active accordion item go here */
  display: block; /* Show the content of the active accordion item */
}

.video-sambutan-birthday-wrapper .accordion-content {
  padding: 10px;
  display: none;
  max-height: 340px;
  overflow-y: auto;
}

.video-sambutan-birthday-wrapper .accordion-icon {
  float: right;
}

.video-sambutan-birthday-wrapper .accordion-icon i {
  transition: transform 0.2s;
}

.video-sambutan-birthday-wrapper .accordion-item.active .accordion-icon i {
  transform: rotate(180deg);
}

.video-sambutan-birthday-wrapper .accordion-content ul {
  list-style: none;
  padding-left: 0.3rem;
  margin: 0;
}

.video-sambutan-birthday-wrapper .accordion-content ul li {
  color: #fff;
  font-family: "Fredoka", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  background: url("../img/acc-icon.svg") no-repeat left center;
  padding: 13px 10px 13px 30px;
  list-style: none;
  margin: 0;
  vertical-align: middle;
  border-bottom: dashed;
  cursor: pointer;
  transition: 0.01s ease-in-out;
}

.video-sambutan-birthday-wrapper .accordion-content ul li:hover {
  background-color: #1c103473;
  border-left: 15px solid transparent;
  border-radius: 10px;
}

.video-sambutan-birthday-wrapper .accordion-content ul li.active {
  background-color: #1c103473;
  border-left: 15px solid transparent;
  border-radius: 10px;
}

.birthday-video-title-year-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: clamp(1.063rem, 0.9739rem + 0.4457vw, 1.375rem);
}

.birthday-video-title-year-wrapper h2 {
  background: -webkit-linear-gradient(0deg, #913ef0 0%, #dc6e69 100%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 8px transparent;
  color: #fff;
  text-align: center;
  font-family: "Fredoka", sans-serif;
  /* font-size: 35px; */
  font-size: clamp(1.125rem, 0.8213rem + 1.5186vw, 2.188rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  margin: 0;
  padding: 0 0.3rem;
}

.birthday-video-title-year-wrapper span {
  display: block;
  color: #fff;
  text-align: center;
  font-family: "Fredoka", sans-serif;
  /* font-size: 20px; */
  font-size: clamp(0.75rem, 0.6071rem + 0.7143vw, 1.25rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  border-radius: clamp(0.313rem, 0.2239rem + 0.4457vw, 0.625rem);
  background: #903df1;
  padding-top: clamp(0.188rem, 0.0631rem + 0.6243vw, 0.625rem);
  padding-bottom: clamp(0.188rem, 0.0631rem + 0.6243vw, 0.625rem);
  padding-left: clamp(0.625rem, 0.5536rem + 0.3571vw, 0.875rem);
  padding-right: clamp(0.625rem, 0.5536rem + 0.3571vw, 0.875rem);
  text-wrap: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
}

.birthday-month-video-item-wrapper {
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

.birthday-month-video-item-wrapper img {
  height: 134px;
  object-fit: cover;
  object-position: center;
}

.birthday-month-video-item-wrapper .thumb-title-wrapper {
  width: 100%;
  border-radius: 0px 0px 10px 10px;
  background: linear-gradient(90deg, #903df1 0%, #dc6e69 100%);
  padding: 10px;
}

.birthday-month-video-item-wrapper .thumb-title-wrapper p {
  margin: 0;
  color: #fff;
  text-align: center;
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
}

.birthday-month-video-wrapper .col-lg-4,
.birthday-month-video-wrapper .col-md-4,
.birthday-month-video-wrapper .col-sm-4,
.birthday-month-video-wrapper .col-6 {
  padding-left: 10px;
  padding-right: 10px;
}

#hb-page .modal,
#landing-page .modal {
  z-index: 9999;
}

#hb-page .modal-dialog,
#landing-page .modal-dialog {
  width: 100%;
  max-width: 700px;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: 0.5rem;
}

#hb-page .modal-header,
#landing-page .modal-header {
  padding: 0 0.5rem;
  border-bottom: none;
}

#hb-page .modal-body {
  padding: 0.5rem 0.5rem 1rem 0.5rem;
}
#landing-page .modal-body {
  padding: 0.7rem;
  background: linear-gradient(135deg, #8e3cf4 0%, #de6f65 100%);
  border-radius: 10px;
}

#hb-page .modal-content,
#landing-page .modal-content {
  background-color: transparent;
  border: none;
}

#hb-page .birthday-video {
  padding: 0.7rem;
  background: linear-gradient(135deg, #8e3cf4 0%, #de6f65 100%);
  border-radius: 10px;
}

#hb-page .close,
#landing-page .close {
  font-size: 2rem;
  color: #fff;
  opacity: 1;
}

/* ===================================== */
/*         Animasi Terbaik Section       */
/* ===================================== */

#program-animasi-terbaik-section {
  padding: 36px 0 25.5px 0;
}

.program-animasi-terbaik-info-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.program-animasi-terbaik-info-wrapper a {
  width: 100%;
  max-width: fit-content;
  /* border-radius: 10px; */
  border-radius: clamp(0.313rem, 0.2239rem + 0.4457vw, 0.625rem);
  background: #0ad4b3;
  color: #fff;
  text-align: center;
  /* font-size: 20px; */
  font-size: clamp(0.75rem, 0.6071rem + 0.7143vw, 1.25rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  display: block;
  /* padding: 10px 23px; */
  padding-top: clamp(0.188rem, 0.0631rem + 0.6243vw, 0.625rem);
  padding-bottom: clamp(0.188rem, 0.0631rem + 0.6243vw, 0.625rem);
  padding-left: clamp(0.438rem, 0.1523rem + 1.4286vw, 1.438rem);
  padding-right: clamp(0.438rem, 0.1523rem + 1.4286vw, 1.438rem);
  transition: 0.2s ease-in-out;
}

.program-animasi-terbaik-info-wrapper a:hover {
  background: #de6f66;
}

.swiper.mySwiper_animasi {
  padding: 21px 0 0 0;
}

.swiper-animasi .swiper-slide {
  background: linear-gradient(135deg, #8f3df2 0%, #ce6582 100%);
  padding: 2.5px;
  border-radius: 10px;
}

.swiper-animasi .swiper-slide img {
  border-radius: 10px;
  height: 180px;
  object-fit: cover;
  object-position: center;
}

/* ===================================== */
/*              Program Page             */
/* ===================================== */

#program-page {
  padding: 50px 0 68px 0;
}

.swiper.program-page-swiper {
  padding: 0;
}

.program-time-wrapper {
  padding-top: clamp(1.875rem, 1.5179rem + 1.7857vw, 3.125rem);
  padding-bottom: clamp(0.625rem, 0.4464rem + 0.8929vw, 1.25rem);
}

.program-item-wrapper {
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.program-item-wrapper img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.program-item-details-wrapper {
  border-radius: 0px 0px 10px 10px;
  background: linear-gradient(90deg, #903df1 0%, #dc6e69 100%);
  /* padding: 1rem; */
  padding: clamp(0.625rem, 0.5179rem + 0.5357vw, 1rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.program-item-details-wrapper h6 {
  font-family: "Fredoka", sans-serif;
  color: #fff;
  text-align: center;
  /* font-size: 20px; */
  font-size: clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  margin: 0;
  /* word-break: break-all; */
}

.program-item-details-wrapper p {
  font-family: "Fredoka", sans-serif !important;
  color: #fff;
  text-align: center;
  font-family: Fredoka One;
  /* font-size: 16px; */
  font-size: clamp(0.625rem, 0.5179rem + 0.5357vw, 1rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
  text-transform: capitalize;
  margin: 0;
}

#program-page .swiper-button-next:after,
#program-page .swiper-rtl .swiper-button-prev:after,
#program-page .swiper-button-prev:after,
#program-page .swiper-rtl .swiper-button-next:after {
  transform: scale(0.5);
}

/* ===================================== */
/*          Main Aktiviti Section        */
/* ===================================== */

#main-aktiviti-section {
  padding: 25.5px 0 26.5px 0;
}

.main-aktiviti-title-wrapper {
  margin-bottom: 26px;
}

.aktiviti-video-wrapper {
  background: linear-gradient(135deg, #8f3df2 0%, #dd6e67 100%);
  padding: 8px;
  border-radius: 10px;
}

.aktiviti-video-wrapper > div {
  border-radius: 5px;
}

.aktiviti-info-wrapper h2 {
  font-family: "Fredoka", sans-serif;
  /* font-size: 30px; */
  font-size: clamp(1.375rem, 1.2321rem + 0.7143vw, 1.875rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  margin: 0;
  margin-bottom: 19px;
  color: #fff;
}

.aktiviti-info-wrapper p {
  font-family: "Fredoka", sans-serif;
  color: #fff;
  /* font-size: 20px; */
  font-size: clamp(0.875rem, 0.7679rem + 0.5357vw, 1.25rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
  /* text-transform: uppercase; */
  margin: 0;
  margin-bottom: 31px;
  text-align: justify;
}

.aktiviti-info-wrapper a {
  color: #fff;
  text-align: center;
  /* font-size: 20px; */
  font-size: clamp(0.75rem, 0.6071rem + 0.7143vw, 1.25rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  display: block;
  width: 100%;
  max-width: fit-content;
  /* border-radius: 10px; */
  border-radius: clamp(0.313rem, 0.2239rem + 0.4457vw, 0.625rem);
  background: #0ad4b3;
  /* padding: 10px 23px; */
  padding-top: clamp(0.188rem, 0.0631rem + 0.6243vw, 0.625rem);
  padding-bottom: clamp(0.188rem, 0.0631rem + 0.6243vw, 0.625rem);
  padding-left: clamp(0.438rem, 0.1523rem + 1.4286vw, 1.438rem);
  padding-right: clamp(0.438rem, 0.1523rem + 1.4286vw, 1.438rem);
  transition: 0.2s ease-in-out;
}

.aktiviti-info-wrapper a:hover {
  background: #de6f66;
}

/* ===================================== */
/*              Aktiviti Page            */
/* ===================================== */

#aktiviti-page-section {
  padding: 44px 0 71px 0;
}

#aktiviti-page-section .aktiviti-info-wrapper h2 {
  font-size: clamp(1.125rem, 0.9107rem + 1.0714vw, 1.875rem);
  margin-bottom: clamp(0.625rem, 0.4464rem + 0.8929vw, 1.25rem);
}

#aktiviti-page-section .aktiviti-info-wrapper p {
  font-size: clamp(0.875rem, 0.7679rem + 0.5357vw, 1.25rem);
  margin-bottom: 20px;
}

#aktiviti-page-section .main-aktiviti-title-wrapper {
  margin-bottom: clamp(1.25rem, 0.7143rem + 2.6786vw, 3.125rem);
}

.swiper.multiVidSwiper {
  padding: 0;
}

.swiper.multiVidSwiper .swiper-button-next:after,
.swiper.multiVidSwiper .swiper-rtl .swiper-button-prev:after {
  padding-right: 0;
  transform: scale(0.5);
}

.swiper.multiVidSwiper .swiper-button-prev:after,
.swiper.multiVidSwiper .swiper-rtl .swiper-button-next:after {
  padding-left: 0;
  transform: scale(0.5);
}

/* ===================================== */
/*         Main Seni & Kraf Section      */
/* ===================================== */

#main-seni-kraf-section {
  padding: 26.5px 0 82px 0;
}

.seni-kraf-info-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.seni-kraf-info-wrapper a {
  width: 100%;
  max-width: fit-content;
  /* border-radius: 10px; */
  border-radius: clamp(0.313rem, 0.2239rem + 0.4457vw, 0.625rem);
  background: #0ad4b3;
  color: #fff;
  text-align: center;
  /* font-size: 20px; */
  font-size: clamp(0.75rem, 0.6071rem + 0.7143vw, 1.25rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  display: block;
  /* padding: 10px 23px; */
  padding-top: clamp(0.188rem, 0.0631rem + 0.6243vw, 0.625rem);
  padding-bottom: clamp(0.188rem, 0.0631rem + 0.6243vw, 0.625rem);
  padding-left: clamp(0.438rem, 0.1523rem + 1.4286vw, 1.438rem);
  padding-right: clamp(0.438rem, 0.1523rem + 1.4286vw, 1.438rem);
  transition: 0.2s ease-in-out;
}

.seni-kraf-info-wrapper a:hover {
  background: #de6f66;
}

.seni-kraf-file-wrapper {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.main-seni-kraf-picture-wrapper {
  margin-top: 20px;
}

.seni-kraf-file-wrapper img {
  /* height: 235px; */
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.seni-kraf-file-wrapper a {
  border-radius: 0px 0px 10px 10px;
  background: linear-gradient(90deg, #903df1 0%, #dc6e69 100%);
  padding: 13px;
  color: #fff;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  display: block;
  transition: 0.2s ease-in-out;
}

.seni-kraf-file-wrapper a:hover {
  background: #505051;
}

/* ===================================== */
/*        Seni & Kraf Page Section       */
/* ===================================== */

#seni-kraf-page-section {
  padding: 44px 0 72px 0;
}

#seni-kraf-page-section .main-seni-kraf-picture-wrapper {
  margin-top: clamp(0.75rem, 0.3391rem + 2.0543vw, 2.188rem);
}

.page-seni-kraf-printable-wrapper {
  margin-top: clamp(0.75rem, 0.6429rem + 0.5357vw, 1.125rem);
}

/* ===================================== */
/*           Kelas Kuih MY Page          */
/* ===================================== */

#kelas-kuih-malaysia-page {
  padding: 50px 0 70px 0;
}

.page-title-info-wrapper {
  margin-bottom: 33px;
}

.page-title-info-wrapper h1 {
  background: -webkit-linear-gradient(0deg, #913ef0 0%, #dc6e69 100%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 8px transparent;
  color: #ffffff;
  text-align: center;
  font-family: "Fredoka", sans-serif;
  /* font-size: 45px; */
  font-size: clamp(1.625rem, 1.2856rem + 1.6971vw, 2.813rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  width: 100%;
  max-width: 584px;
  margin: auto;
  margin-bottom: 20px;
}

.page-title-info-wrapper p {
  color: #fff;
  text-align: center;
  font-family: "Fredoka", sans-serif;
  /* font-size: 24px; */
  font-size: clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem);
  font-style: normal;
  font-weight: 600;
  line-height: 30px; /* 125% */
  width: 100%;
  max-width: 542px;
  margin: auto;
}

.langkah-penyertaan-wrapper {
  margin-bottom: clamp(1.875rem, 1.7141rem + 0.8043vw, 2.438rem);
}

.langkah-penyertaan-wrapper h2 {
  background: -webkit-linear-gradient(0deg, #913ef0 0%, #dc6e69 100%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 8px transparent;
  color: #ffffff;
  font-family: "Fredoka", sans-serif;
  /* font-size: 46px; */
  font-size: clamp(2.375rem, 2.2321rem + 0.7143vw, 2.875rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 22px;
  padding: 0 0.5rem;
}

.langkah-penyertaan-wrapper h2 span {
  /* font-size: 30px; */
  font-size: clamp(1.563rem, 1.4739rem + 0.4457vw, 1.875rem);
  text-wrap: nowrap;
}

.langkah-penyertaan-wrapper ol {
  padding-left: 6rem;
}

.langkah-penyertaan-wrapper ol li {
  list-style: none;
  color: #fff;
  font-family: "Fredoka", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  /* line-height: 30px; */
  line-height: clamp(1.25rem, 1.0714rem + 0.8929vw, 1.875rem);
  margin-bottom: 20px;
  text-transform: uppercase;
}

.langkah-penyertaan-wrapper ol li::before {
  counter-increment: section;
  content: counter(section);
  position: absolute;
  left: 30px;
  background: linear-gradient(135deg, #913ef0 0%, #d56977 100%);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 67px;
  height: 67px;
  border-radius: 50%;
  font-size: 40px;
}

.langkah-penyertaan-wrapper ol li .borang {
  display: block;
  border-radius: 10px;
  background: #903df1;
  width: fit-content;
  padding: 7px 15px;
  color: #fff;
  margin: 10px 0;
  text-align: center;
  transition: 0.3s ease-in-out;
}

.langkah-penyertaan-wrapper ol li .borang:hover {
  background: #d86b71;
}

.terma-syarat-wrapper h3 {
  background: -webkit-linear-gradient(0deg, #913ef0 0%, #dc6e69 100%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 8px transparent;
  color: #ffffff;
  font-family: "Fredoka", sans-serif;
  /* font-size: 30px; */
  font-size: clamp(1.25rem, 1.0714rem + 0.8929vw, 1.875rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  margin: 0;
  padding: 0 0.5rem;
}

.terma-syarat-wrapper ol {
  margin: 20px 0;
  padding-left: 1.7rem;
}

.terma-syarat-wrapper ol li {
  color: #fff;
  font-family: "Fredoka", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
  text-transform: uppercase;
}

.tarikh-tutup-wrapper {
  width: fit-content;
  margin: auto;
  border-radius: 20px;
  background: linear-gradient(135deg, #8f3df3 0%, #de6f66 100%);
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.tarikh-tutup-wrapper h6 {
  color: #fff;
  text-align: center;
  font-family: "Fredoka", sans-serif;
  /* font-size: 20px; */
  font-size: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  margin: 0;
  text-wrap: nowrap;
}

.tarikh-tutup-wrapper span {
  display: block;
  border-radius: 10px;
  background: #903df1;
  padding: 10px;
  color: #fff;
  text-align: center;
  font-family: "Fredoka", sans-serif;
  /* font-size: 20px; */
  font-size: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  text-wrap: nowrap;
}

/* ===================================== */
/*         Pertandingan hafazan          */
/* ===================================== */

#pertandingan-hafazan-section {
  width: 100%;
  height: max-content;
  background-image: url(../img/info-bg-desktop.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #782a5e;
  position: relative;
}

.pertandingan-info-wrapper .program-logo {
  max-width: 660px;
  margin: auto;
  margin-top: 100px;
  margin-bottom: 50px;
}

.pertandingan-info-wrapper h1,
.pertandingan-info-wrapper h2 {
  color: #fff;
  text-align: center;
  font-family: "Baloo 2", cursive;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  margin-bottom: 30px;
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.35));
}

.pertandingan-info-wrapper h2:nth-of-type(2) {
  font-size: 16px;
  margin-bottom: 20px;
}

.pertandingan-info-wrapper p {
  color: #fff;
  text-align: center;
  font-family: "Baloo 2", cursive;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.8;
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.35));
  margin-bottom: 150px;
  position: relative;
  z-index: 1;
}

.pertandingan-info-wrapper span {
  color: #ffdb03;
  font-family: "Baloo 2", cursive;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  display: block;
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.35));
}

img.alquran1 {
  /* max-width: 237px;
    height: 182.349px; */
  max-width: clamp(8.125rem, 3.6663rem + 12.3852vw, 14.813rem);
  height: clamp(6.25rem, 2.8187rem + 9.5315vw, 11.397rem);
  object-fit: contain;
  position: absolute;
  bottom: 0;
  left: 52px;
}

img.alquran2 {
  /* max-width: 240.623px;
    height: 268.275px; */
  max-width: clamp(6.476rem, 0.7673rem + 15.8574vw, 15.039rem);
  height: clamp(7.188rem, 0.802rem + 17.7389vw, 16.767rem);
  object-fit: contain;
  position: absolute;
  /* bottom: 72px; */
  bottom: clamp(2.188rem, 0.6467rem + 4.2815vw, 4.5rem);
  right: 32px;
}

img.star-left {
  max-width: 337.319px;
  height: 716.889px;
  object-fit: contain;
  position: absolute;
  top: 975px;
  left: 0;
}
img.star-right {
  max-width: 337.319px;
  height: 716.889px;
  object-fit: contain;
  position: absolute;
  top: 489px;
  right: 0;
  z-index: 1;
}

/* ===================================== */
/*         Syarat-syarat Section         */
/* ===================================== */

#syarat-section {
  width: 100%;
  height: max-content;
  padding: 60px 0;
  background-image: url(../img/syarat-bg-d.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #782a5e;
}

.syarat-wrapper h1 {
  color: #ffdb03;
  text-align: center;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: "Baloo 2", cursive;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 40px;
}

.ol-parent li:not(:last-child) {
  margin-bottom: 2rem;
}

.syarat-list-wrapper ol li {
  color: #fff;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.75);
  font-family: "Baloo 2", cursive;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}
.syarat-list-wrapper ol li ol {
  list-style: lower-alpha;
}
.syarat-list-wrapper ol li ol li {
  margin-bottom: 0 !important;
}

.borang-btn-wrapper p {
  color: #fff;
  text-align: center;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  font-family: "Baloo 2", cursive;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: lowercase;
  margin-top: 10px;
  margin-bottom: 20px;
}

.borang-btn-wrapper p a {
  color: inherit;
  transition: 0.3s ease-in-out;
}
.borang-btn-wrapper p a:hover {
  color: inherit;
  text-decoration: underline !important;
}

.borang-btn-wrapper > a {
  width: 100%;
  max-width: fit-content;
  border-radius: 30px;
  background: linear-gradient(180deg, #f5da41 0%, #ff9b00 100%);
  color: #026a93;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: normal;
  text-transform: uppercase;
  padding: 19px 30px;
  margin: auto;
  display: block;
  transition: 0.3s ease-in-out;
}

.borang-btn-wrapper > a:hover {
  background: linear-gradient(180deg, #f5da41 0%, #9ac0d2 100%);
}

/* ===================================== */
/*            Hadiah Menarik             */
/* ===================================== */

#hadiah-menarik-section {
  width: 100%;
  height: max-content;
  padding: 50px 0;
  background-image: url(../img/hadiah-bg-d.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}

.hadiah-menarik-wrapper h1 {
  color: #fff;
  text-align: center;
  font-family: "Baloo 2", cursive;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.45));
  margin-bottom: 30px;
}

.hadiah-category-wrapper h2 {
  color: #fff;
  text-align: center;
  font-family: "Baloo 2", cursive;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.45));
  margin: 0;
}

.hadiah-category-wrapper > p {
  color: #fff;
  text-align: center;
  font-family: "Baloo 2", cursive;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.45));
}

.category-wrapper {
  margin-top: 20px;
}

.category-wrapper .category-item-wrapper:not(:last-child) {
  margin-bottom: 20px;
}

.ranking-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: fit-content;
  border-radius: 24.5px;
  background: #126280;
  margin: auto;
  padding: 0.5rem 3rem;
  margin-bottom: -16px;
}

.ranking-wrapper h6 {
  color: #fff;
  text-align: center;
  font-family: "Baloo 2", cursive;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
}

.prize-wrapper {
  width: 100%;
  max-width: fit-content;
  margin: auto;
  padding: 26px 31px;
  border-radius: 60px;
  border: 2px solid #fff;
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.5));
}

.prize-wrapper p {
  color: #fff;
  text-align: center;
  font-family: "Baloo 2", cursive;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0;
  filter: none;
}

/* ===================================== */
/*          Transformer Section          */
/* ===================================== */

#transformers-section {
  background-image: url(../img/section-bg-d.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  padding: 37px 0;
}

.peraduan-wrapper {
  margin-bottom: 40px;
}

#transformers-section .title-wrapper h1 {
  text-align: center;
  font-family: "Fugaz One", sans-serif;
  font-size: clamp(1.875rem, 1.607rem + 1.34vw, 2.813rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fbfeff 0%, #587a86 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  margin-bottom: 17px;
  padding-bottom: 1rem;
  color: #533964;
  -webkit-text-stroke: 3.5px #533964;
  text-stroke: 3.5px #533964;
  letter-spacing: -0.3px;
}

.info-peraduan-wrapper h1 {
  font-family: "Fugaz One", sans-serif;
  font-size: clamp(1.563rem, 1.4739rem + 0.4457vw, 1.875rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
  background: linear-gradient(180deg, #93aab2 0%, #f8feff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #533964;
  -webkit-text-stroke: 3px #533964;
  text-stroke: 3px #533964;
  letter-spacing: -0.3px;
}

.info-peraduan-wrapper p {
  width: 100%;
  max-width: 405px;
  color: #000;
  text-align: justify;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 15px;
}

.peraduan-date-wrapper {
  width: 100%;
  max-width: 405px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.peraduan-date-wrapper span {
  border-radius: 10px;
  background: #533964;
  color: #fff;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  display: block;
  padding: 7px 10px;
  width: max-content;
}

.syarat-list-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: auto;
}

.syarat-list-wrapper ol {
  margin-bottom: 1.5rem;
}

.syarat-list-wrapper ol li {
  color: #000;
  text-align: justify;
  text-shadow: 0px 4px 4px rgba(255, 255, 255, 0.25);
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
}

.syarat-list-wrapper p {
  color: #000;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  padding-left: 1rem;
  margin-bottom: 0;
}
.syarat-list-wrapper p a {
  color: #533964;
  transition: 0.3s ease-in-out;
  font-style: italic;
}
.syarat-list-wrapper p a:hover {
  text-decoration: underline !important;
}

a.question-btn {
  display: block;
  width: 100%;
  max-width: 350px;
  margin: auto;
  border-radius: 10px;
  background: #533964;
  padding: 22px 12px;
  margin-top: 21px;
  color: #fff;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  transition: 0.3s ease-in-out;
}

a.question-btn:hover {
  background: #204478;
}

/* ===================================== */
/*           Boboiboy Section            */
/* ===================================== */

#boboiboy-section {
  background-image: url(../img/bbb-bg-d.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  padding: 50px 0 100px 0;
}

#boboiboy-section .title-wrapper h1 {
  width: 100%;
  max-width: 670px;
  margin: auto;
  text-align: center;
  font-family: "Fugaz One", sans-serif;
  font-size: clamp(1.188rem, 0.7417rem + 2.2314vw, 2.75rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
  background: #ffec15;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  color: rgba(48, 103, 44, 1);
  -webkit-text-stroke: 3.5px rgba(48, 103, 44, 1);
  text-stroke: 3.5px rgba(48, 103, 44, 1);
  letter-spacing: -0.3px;
}

.title-info-wrapper h6 {
  color: #48c710;
  text-align: center;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.8);
  font-family: "Fugaz One", sans-serif;
  font-size: clamp(1.125rem, 0.9107rem + 1.0714vw, 1.875rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
  margin-top: 30px;
  margin-bottom: clamp(3.125rem, 2.5893rem + 2.6786vw, 5rem);
}

.title-info-wrapper h6 span {
  color: #fff;
}

#boboiboy-section .info-peraduan-wrapper h1 {
  color: #ffd00f;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.8);
  font-family: "Fugaz One", sans-serif;
  font-size: clamp(1.563rem, 1.4739rem + 0.4457vw, 1.875rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
  background: unset;
  background-clip: unset;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  -webkit-text-stroke: unset;
  text-stroke: unset;
  letter-spacing: unset;
}

#boboiboy-section .info-peraduan-wrapper p {
  width: 100%;
  max-width: 405px;
  color: #ffe7af;
  text-align: justify;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8);
}

#boboiboy-section .info-peraduan-wrapper p a {
  color: inherit;
  text-decoration: underline !important;
  transition: 0.3s ease-in-out;
}

#boboiboy-section .info-peraduan-wrapper p a:hover {
  color: #ffd00f;
}

#boboiboy-section .peraduan-date-wrapper {
  border-radius: 10px;
  background: #60c135;
  width: 100%;
  max-width: max-content;
  margin: 50px auto;
  padding: 14px 1rem;
}

#boboiboy-section .peraduan-date-wrapper h6 {
  color: #114a0c;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.8rem, 0.7429rem + 0.2857vw, 1rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  margin: 0;
}

#boboiboy-section .peraduan-date-wrapper h6 p {
  display: flex;
  gap: 0 clamp(0.625rem, 0.5536rem + 0.3571vw, 0.875rem);
  margin: 0;
  font-family: inherit;
}

#boboiboy-section .peraduan-date-wrapper h6 span,
#boboiboy-section .peraduan-date-wrapper h6 div {
  color: #fff;
  background: none;
  width: unset;
  padding: unset;
  border-radius: unset;
  text-align: inherit;
  font-size: inherit;
}

#boboiboy-section .syarat-wrapper h1 {
  text-shadow: none;
  font-size: clamp(1.875rem, 1.6964rem + 0.8929vw, 2.5rem);
  line-height: 1;
}

#boboiboy-section .syarat-list-wrapper ol li {
  color: #ffe7af;
  text-align: justify;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.55);
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
}

#boboiboy-section .syarat-list-wrapper {
  margin-top: 10px;
}

#boboiboy-section .syarat-list-wrapper p {
  color: #ffe7af;
  text-align: justify;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.55);
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  padding-left: 1rem;
  margin-bottom: 0;
}

#boboiboy-section .syarat-list-wrapper p a {
  color: #60c135;
  transition: 0.3s ease-in-out;
  font-style: normal;
}

#boboiboy-section a.question-btn {
  border-radius: 10px;
  background: #fcb600;
  color: rgba(30, 30, 30, 0.8);
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  margin-top: 50px;
}

#boboiboy-section a.question-btn:hover {
  background: #ffd012 !important;
}

/* ===================================== */
/*     Peraduan Cuti Sekolah Section     */
/* ===================================== */

#peraduan-cuti-sekolah {
  background-image: url(../img/peraduan-bg-desktop.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  padding: clamp(3.125rem, 2.9464rem + 0.8929vw, 3.75rem) 0 clamp(7.75rem, 6.25rem + 7.5vw, 13rem) 0;
}

.peraduan-cuti-sekolah-wrapper .title-wrapper {
  width: 100%;
  max-width: 803px;
  margin: auto;
  margin-bottom: clamp(3.125rem, 2.7856rem + 1.6971vw, 4.313rem);
}

.peraduan-cuti-sekolah-wrapper .title-wrapper h1 {
  color: #baf173;
  text-align: center;
  text-shadow: 6px 6px 6px #d62380;
  font-family: "Fredoka", sans-serif;
  font-size: clamp(1.875rem, 1.5179rem + 1.7857vw, 3.125rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.peraduan-cuti-sekolah-wrapper .title-wrapper p {
  color: #fff;
  text-align: center;
  text-shadow: 0px 0px 18px rgba(255, 64, 0, 0.6);
  font-family: "Fredoka", sans-serif;
  font-size: clamp(1.25rem, 1.0714rem + 0.8929vw, 1.875rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 0;
}

.peraduan-cuti-sekolah-wrapper .info-wrapper .info-peraduan-wrapper h6 {
  color: #ffd00f;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.8);
  font-family: "Fugaz One", sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.peraduan-cuti-sekolah-wrapper .info-wrapper .info-peraduan-wrapper p {
  max-width: 353px;
  text-align: left;
  color: #fff;
  text-shadow: 0px 2px 2px #d41887;
  font-family: "Fredoka", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0;
}

.peraduan-cuti-sekolah-wrapper .date-wrapper {
  width: 100%;
  max-width: max-content;
  margin: auto;
  border-radius: 10px;
  border: 3px solid #fff;
  background: #1acb9b;
  padding: 14px 16px;
  margin-bottom: 55px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.peraduan-cuti-sekolah-wrapper .date-wrapper > div {
  display: flex;
  justify-content: center;
  gap: 12px;
  color: #1e1e1e;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.peraduan-cuti-sekolah-wrapper .date-wrapper > div:not(:last-child),
.peraduan-cuti-sekolah-wrapper .date-wrapper > div > div:not(:last-child) {
  border-right: 2.5px solid #fff;
  padding-right: 12px;
}

.peraduan-cuti-sekolah-wrapper .hadiah-wrapper h4,
.peraduan-cuti-sekolah-wrapper .cara-cara-wrapper h4 {
  color: #ffd00f;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.8);
  font-family: "Fugaz One", sans-serif;
  font-size: clamp(1.25rem, 1.0714rem + 0.8929vw, 1.875rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 30px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.peraduan-cuti-sekolah-wrapper .hadiah-wrapper h4::before,
.peraduan-cuti-sekolah-wrapper .cara-cara-wrapper h4::before {
  content: "";
  display: block;
  width: clamp(19.688rem, 16.3846rem + 16.5171vw, 31.25rem);
  height: clamp(2.5rem, 2.3214rem + 0.8929vw, 3.125rem);
  margin: auto;
  background: #de436c;
  filter: blur(20px);
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: -1;
}

.peraduan-cuti-sekolah-wrapper .hadiah-wrapper {
  margin-bottom: 55px;
}

.peraduan-cuti-sekolah-wrapper .hadiah-wrapper .hadiah-item-wrapper {
  width: 100%;
  max-width: 459px;
  margin: auto;
  border-radius: 10px;
  border: 4px solid #fff;
  background: linear-gradient(180deg, #c85e45 0%, #b51872 100%);
  padding: clamp(1.375rem, 1.125rem + 1.25vw, 2.25rem) clamp(2rem, 1.8929rem + 0.5357vw, 2.375rem);
}

.peraduan-cuti-sekolah-wrapper .hadiah-wrapper .hadiah-item-wrapper p {
  color: #fff;
  text-align: center;
  font-family: "Fredoka", sans-serif;
  font-size: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0;
}

.peraduan-cuti-sekolah-wrapper .cara-cara-wrapper {
  margin-bottom: 50px;
}

.peraduan-cuti-sekolah-wrapper .cara-cara-wrapper .cara-cara-item-wrapper {
  width: 100%;
  max-width: 882px;
  margin: auto;
  border-radius: 10px;
  border: 3px solid #fff;
  background: #1acb9b;
  padding: 30px clamp(0.938rem, 0.7594rem + 0.8929vw, 1.563rem);
}

.peraduan-cuti-sekolah-wrapper .cara-cara-wrapper .cara-cara-item-wrapper ol {
  margin-bottom: 20px;
  padding-left: clamp(1.563rem, 1.2953rem + 1.3386vw, 2.5rem);
}
.peraduan-cuti-sekolah-wrapper .cara-cara-wrapper .cara-cara-item-wrapper ol li {
  color: #1e1e1e;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.875rem, 0.8036rem + 0.3571vw, 1.125rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1.5rem;
}
.peraduan-cuti-sekolah-wrapper .cara-cara-wrapper .cara-cara-item-wrapper p {
  color: #1e1e1e;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.75rem, 0.6429rem + 0.5357vw, 1.125rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  margin-left: 1rem;
  margin-bottom: 0;
}
.peraduan-cuti-sekolah-wrapper .cara-cara-wrapper .cara-cara-item-wrapper p a {
  color: #b8246b;
  transition: all 0.3s ease-out;
}

.peraduan-cuti-sekolah-wrapper .cara-cara-wrapper .cara-cara-item-wrapper p a:hover {
  text-decoration: underline !important;
}

.peraduan-cuti-sekolah-wrapper .gform-btn-wrapper a.gform-btn {
  display: block;
  width: 100%;
  max-width: max-content;
  margin: auto;
  border-radius: 10px;
  border: 4px solid #fff;
  background: #e4fc69;
  color: #d31688;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  padding: 25px 50px;
  transition: all 0.3s ease-out;
  cursor: pointer;
}

.peraduan-cuti-sekolah-wrapper .gform-btn-wrapper a.gform-btn:hover {
  background: #832046;
  color: #fff;
}

.disabled-gform-btn {
  pointer-events: none;
}

/* ===================================== */
/*            preloader image            */
/* ===================================== */

#loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: linear-gradient(135deg, #8e3cf4 0%, #de6f65 100%);
}

.loader {
  position: relative;
  width: 108px;
  display: flex;
  justify-content: space-between;
}
.loader::after,
.loader::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 48px;
  background-color: #fff;
  background-image: radial-gradient(circle 14px, #0d161b 100%, transparent 0);
  background-image: -webkit-radial-gradient(circle 14px, #0d161b 100%, transparent 0);
  background-repeat: no-repeat;
  border-radius: 50%;
  animation: eyeMove 10s infinite, blink 10s infinite;
  -webkit-animation: eyeMove 10s infinite, blink 10s infinite;
}
@keyframes eyeMove {
  0%,
  10% {
    background-position: 0px 0px;
  }
  13%,
  40% {
    background-position: -15px 0px;
  }
  43%,
  70% {
    background-position: 15px 0px;
  }
  73%,
  90% {
    background-position: 0px 15px;
  }
  93%,
  100% {
    background-position: 0px 0px;
  }
}
@keyframes blink {
  0%,
  10%,
  12%,
  20%,
  22%,
  40%,
  42%,
  60%,
  62%,
  70%,
  72%,
  90%,
  92%,
  98%,
  100% {
    height: 48px;
  }
  11%,
  21%,
  41%,
  61%,
  71%,
  91%,
  99% {
    height: 18px;
  }
}
@-webkit-keyframes eyeMove {
  0%,
  10% {
    background-position: 0px 0px;
  }
  13%,
  40% {
    background-position: -15px 0px;
  }
  43%,
  70% {
    background-position: 15px 0px;
  }
  73%,
  90% {
    background-position: 0px 15px;
  }
  93%,
  100% {
    background-position: 0px 0px;
  }
}
@-webkit-keyframes blink {
  0%,
  10%,
  12%,
  20%,
  22%,
  40%,
  42%,
  60%,
  62%,
  70%,
  72%,
  90%,
  92%,
  98%,
  100% {
    height: 48px;
  }
  11%,
  21%,
  41%,
  61%,
  71%,
  91%,
  99% {
    height: 18px;
  }
}

.b_loader {
  width: 86px;
  height: 50px;
  border-radius: 50px;
  background: radial-gradient(farthest-side, #0000 calc(100% - 10px), #fff calc(100% - 10px) 100%, #0000) left,
    radial-gradient(farthest-side, #0000 calc(100% - 10px), #fff calc(100% - 10px) 100%, #0000) right;
  background-size: calc(50% + 5px) 100%;
  background-repeat: no-repeat;
  position: relative;
  animation: flipX 1s infinite linear;
  display: block;
  margin: auto;
}
.b_loader:before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8e3cf4 0%, #de6f65 100%);
  transform-origin: -14px 50%;
  animation: rotate 0.5s infinite linear;
}

@keyframes flipX {
  0%,
  49.99% {
    transform: scaleX(1);
  }
  50%,
  100% {
    transform: scaleX(-1);
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

/* ===================================== */
/*             Video Responsive          */
/* ===================================== */

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-21by9::before {
  padding-top: 42.85714286%;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}

/* ===================================== */
/*              Responsive               */
/* ===================================== */

@media (max-width: 991px) {
  .swiper {
    padding: 20px 100px;
  }

  #jaguh-navbar.navbar-light .navbar-nav .nav-link {
    margin: 3px 0;
  }

  #jaguh-navbar.navbar {
    padding: 5px 1rem;
  }

  #jaguh-navbar .navbar-nav {
    padding: 1rem 0;
    align-items: center;
  }

  #jaguh-navbar.sticky + .main {
    margin-top: 52px;
  }

  .swiper-button-next:after,
  .swiper-rtl .swiper-button-prev:after,
  .swiper-button-prev:after,
  .swiper-rtl .swiper-button-next:after {
    transform: scale(0.7);
  }

  #main-seni-kraf-section {
    padding: 26.5px 0 0 0;
  }

  #main-birthday-section {
    padding: 10px 0 47px 0;
  }

  .kelas-kuih-info-wrapper {
    margin-top: 30px;
  }

  .astrochef-img-wrapper img {
    max-width: 309px;
  }

  #kelas-kuih-malaysia-page {
    padding: 30px 0 0 0;
  }

  .video-sambutan-birthday-wrapper {
    flex-direction: column;
  }

  .video-sambutan-birthday-wrapper .month-year-wrapper {
    width: 100%;
    height: fit-content;
  }

  .video-sambutan-birthday-wrapper .accordion-content {
    max-height: 180px;
  }

  .video-sambutan-birthday-wrapper .birthday-video-wrapper {
    width: 100%;
    height: fit-content;
    padding: 10px 0;
  }

  .info-peraduan-wrapper h1 {
    margin-top: 22px;
    text-align: center;
  }

  .info-peraduan-wrapper p {
    max-width: unset;
  }

  .peraduan-date-wrapper {
    max-width: unset;
    justify-content: center;
  }

  #boboiboy-section .info-peraduan-wrapper p {
    max-width: max-content;
    margin: 0;
  }

  #boboiboy-section .info-peraduan-wrapper h1 {
    margin-top: 50px;
  }

  #boboiboy-section .peraduan-date-wrapper {
    max-width: min-content;
  }

  #boboiboy-section .peraduan-date-wrapper h6 p {
    width: max-content;
  }

  .dbb {
    border-bottom: 0.5px solid #114a0c;
    padding-bottom: 8px;
  }
  .pt8px {
    padding-top: 8px;
  }

  .peraduan-cuti-sekolah-wrapper .date-wrapper ul {
    flex-wrap: wrap;
    justify-content: center;
  }

  .peraduan-cuti-sekolah-wrapper .date-wrapper {
    flex-direction: column;
  }
  .peraduan-cuti-sekolah-wrapper .date-wrapper > div {
    gap: clamp(0.938rem, 0.6166rem + 1.6071vw, 2.063rem);
  }
  .peraduan-cuti-sekolah-wrapper .date-wrapper > div:not(:last-child) {
    border-right: unset;
    border-bottom: 2px solid #fff;
  }
  .peraduan-cuti-sekolah-wrapper .date-wrapper > div > div:not(:last-child) {
    margin-bottom: 12px;
    padding-right: clamp(0.938rem, 0.6166rem + 1.6071vw, 2.063rem);
  }
}

@media only screen and (min-width: 640px) and (max-width: 991px) {
  .program-item-details-wrapper h6 {
    word-break: break-all;
  }
}

@media (max-width: 768px) {
  #jaguh-navbar.sticky {
    top: 0px;
  }

  #syarat-section {
    background-image: url(../img/syarat-bg-m.png);
    background-size: contain;
    background-position: bottom;
  }
}

@media (max-width: 767px) {
  .birthday-title-wrapper {
    display: grid;
  }
  .tv9-logo-wrapper {
    text-align: center;
  }
  .birthday-click-here-wrapper h1 {
    max-width: 240px;
  }

  .swiper-button-next:after,
  .swiper-rtl .swiper-button-prev:after,
  .swiper-button-prev:after,
  .swiper-rtl .swiper-button-next:after {
    transform: scale(0.5);
  }

  .birthday-click-here-wrapper {
    gap: 5px;
  }

  .langkah-penyertaan-wrapper h2 {
    text-align: center;
  }

  .langkah-penyertaan-wrapper ol li::before {
    left: 10px;
  }

  .mtm {
    margin-top: 50px;
  }

  .peraduan-cuti-sekolah-wrapper .info-wrapper .info-peraduan-wrapper h6 {
    text-align: center;
  }

  .peraduan-cuti-sekolah-wrapper .info-wrapper .info-peraduan-wrapper p {
    max-width: unset;
    text-align: center;
  }
}

@media (max-width: 575px) {
  .swiper {
    padding: 5px 30px;
  }

  .navbar {
    padding: 3px 1rem;
  }

  .birthday-click-here-wrapper {
    transform: translate(-50%, 65%);
  }

  .title-w-stroke h1 {
    text-align: left;
  }

  #aktiviti-page-section .title-w-stroke h1,
  #seni-kraf-page-section .title-w-stroke h1,
  #program-page .title-w-stroke h1 {
    text-align: center;
  }

  .swiper-animasi .swiper-slide img {
    height: 103px;
  }

  .picture-seni-kraf .col-lg-3,
  .picture-seni-kraf .col-md-6,
  .picture-seni-kraf .col-sm-6,
  .picture-seni-kraf .col-6,
  .printable-seni-kraf .col-lg-3,
  .printable-seni-kraf .col-md-6,
  .printable-seni-kraf .col-sm-6,
  .printable-seni-kraf .col-6 {
    padding-right: 10px;
    padding-left: 10px;
  }

  .swiper-button-next:after,
  .swiper-rtl .swiper-button-prev:after,
  .swiper-button-prev:after,
  .swiper-rtl .swiper-button-next:after {
    transform: scale(0.3);
    padding-right: 0;
    padding-left: 0;
  }

  .icon-element-footer-mobile img,
  .icon-element-header-mobile img {
    max-width: clamp(17.5rem, 0.2451rem + 86.2745vw, 31.25rem);
  }

  .icon-element-header-mobile {
    top: clamp(5.313rem, 6.0973rem + -3.9216vw, 4.688rem);
  }

  #main-aktiviti-section {
    padding: 25.5px 0 15.5px 0;
  }

  .swiper.mySwiper_animasi {
    padding: 13px 0 0 0;
  }

  .main-aktiviti-title-wrapper {
    margin-bottom: 13px;
  }

  #aktiviti-page-section .main-aktiviti-title-wrapper {
    margin-bottom: 20px;
  }

  .main-seni-kraf-picture-wrapper {
    margin-top: 13px;
  }

  #aktiviti-page-section {
    padding: 15px 0 0px 0;
  }

  #seni-kraf-page-section {
    padding: 10px 0 0px 0;
  }

  #program-page {
    padding: 10px 0 0px 0;
  }

  .tarikh-tutup-wrapper {
    width: 290px;
  }

  .tarikh-tutup-wrapper h6 {
    text-wrap: wrap;
  }

  #birthday-page {
    padding: 10px 0 0 0;
  }

  #pertandingan-hafazan-section {
    background-image: url(../img/info-bg-mobile.png);
  }

  #hadiah-menarik-section {
    background-image: url(../img/hadiah-bg-m.png);
  }

  .prize-wrapper {
    padding: 26px 21px;
  }

  .pertandingan-info-wrapper .program-logo {
    margin-top: 52px;
  }

  .pertandingan-info-wrapper h1 {
    margin-bottom: 60px;
  }

  .pertandingan-info-wrapper h2:nth-of-type(2) {
    margin-bottom: 30px;
  }

  img.star-left {
    max-width: 223.319px;
    height: 474.61px;
    top: 224px;
    left: 0;
    z-index: 1;
  }
  img.star-right {
    max-width: 123.319px;
    height: 374.61px;
    top: 500px;
    right: 0;
  }

  #transformers-section {
    background-image: url(../img/section-bg-m.png);
    padding-top: clamp(18.125rem, 16.1636rem + 9.8071vw, 19.688rem);
  }
  #boboiboy-section {
    background-image: url(../img/bbb-bg-m.png);
  }

  #transformers-section .title-wrapper h1 {
    background: linear-gradient(189deg, #fbfeff 6.83%, #587a86 159.35%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-stroke: 2.5px #533964;
    -webkit-text-stroke: 2.5px #533964;
  }

  #boboiboy-section .title-wrapper h1 {
    background: #ffec15;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-stroke: 1.5px rgba(48, 103, 44, 1);
    -webkit-text-stroke: 1.5px rgba(48, 103, 44, 1);
  }

  .info-peraduan-wrapper h1 {
    text-stroke: 2.5px #533964;
    -webkit-text-stroke: 2.5px #533964;
  }

  #boboiboy-section .info-peraduan-wrapper p a {
    line-break: anywhere;
  }

  #peraduan-cuti-sekolah {
    background-image: url(../img/peraduan-bg-mobile.png);
  }
}

@media (max-width: 500px) {
  .birthday-click-here-wrapper h1 {
    max-width: 165px;
  }

  .birthday-click-here-wrapper a {
    max-width: 70px;
  }
}

@media only screen and (min-width: 443px) and (max-width: 575px) {
  .pertandingan-info-wrapper p {
    margin-bottom: clamp(9.375rem, -46.2114rem + 200.7636vw, 25.938rem);
  }
}