:root {
  --hilo-green: #C2D500;
  --hilo-yellow: #F3DE25;
  --hilo-pink: #D93085;
  --hilo-blue: #000B8C;
  --sky-blue: #98CFEB;

  --bs-body-font-family: 'Barlow Condensed', var(--bs-font-sans-serif);
  --bs-body-font-size: 1.2rem;
  --bs-body-font-weight: 500;
}

body {
  background-color: var(--sky-blue);
}
p{ line-height: 1.375; }
/* body.home-body{
  --bs-body-font-family: 'Antonio', var(--bs-font-sans-serif);
} */
img{
  max-width: 100%;
}
/* --- Custom Header --- */
.navbar-custom {
  background-color: var(--hilo-green);
  --bs-navbar-nav-link-padding-x: .75rem;
}
.navbar-custom .nav-link:hover, .nav-link.active {
  background-color: rgba(57, 161, 94, .25);
}
.navbar-custom .navbar-nav{
  --bs-nav-link-padding-y: .5rem;
  --bs-nav-link-padding-x: 1rem;
  gap: .25rem;
}
.navbar-custom .nav-item,
.navbar-custom .nav-link{
  display: flex;
  flex-direction: column;
  transition: .3s;
  border-radius: var(--bs-border-radius);
}

.navbar-custom .navbar-collapse.align-items-md-stretch .nav-link{
  justify-content: center;
  font-size: 1.125rem;
}
.nav-link {
  font-weight: normal;
  font-family: 'Anton', 'Barlow Condensed', var(--bs-font-sans-serif);
  color: var(--hilo-blue);
  letter-spacing: 0.5px;
}


.search-pill {
  border-radius: 50px;
  border: none;
  padding-left: 15px;
}


/* --- Kids Positioning (Mockup Simulation) --- */
.kids-container {
  position: absolute;
  top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
  z-index: 1;
}

.kid-img {
  height: 200px;
  object-fit: contain;
}

/* --- Product Intro --- */
.product-list {
  padding: 40px 0;
  background-color: var(--sky-blue);
}

.product-item img {
  max-width: 100px;
  transition: transform 0.3s;
}

.product-item img:hover {
  transform: scale(1.1);
}
.btn{
  font-family: 'Anton', 'Antonio', sans-serif;
}
.btn-accent{
  --bs-btn-color: white;
  --bs-btn-hover-color: #efff83;
}
.btn.btn-skewed .skew-label{
  background-color: #D93085;
  display: inline-flex;
  padding-block: var(--bs-btn-padding-y);
  transform: skewY(1deg);
}
.btn.btn-skewed .skew-label .skew-label-text{
  transform: skewY(-1deg);
}
.section-header{
  text-align: center;
  margin-bottom: 2rem;
}
.section-header .sh-title{
  font-size: 2.375rem;
  color: var(--hilo-blue);
  font-weight: normal;
}
.section-header .sh-subtitle{
  color: var(--bs-accent);
  font-size: 1.5rem;
  font-weight: normal;
}
.section-header .sh-title > strong{
  font-weight: normal;
  font-size: 1.5em;
}
.section-header .sh-title > small{
  font-size: .75em;
}
#wrapper{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#wrapper #content{
  flex: 1;
}
#footer{
  padding: 2.5rem 1rem 3.5rem;
  font-family: 'Antonio', sans-serif;
  text-align: center;
  margin-top: 2rem;
}
#footer .footer-bg{
  left: 3%;
  width: 95%;
  height: calc(100% + 1rem);
}
#footer .terms-links{
  justify-content: center;
}
#page-title{
  background-color: var(--hilo-blue);
  color: #fff;
  padding: .5rem 0;
}
#page-title .breadcrumb{
  margin: 0;
  color: #fff;
  --bs-breadcrumb-item-active-color: var(--hilo-green);
  --bs-breadcrumb-divider-color: white;
  font-family: 'Barlow Condensed', sans-serif;
}
#page-title .breadcrumb .breadcrumb-item{ font-size: .875rem; }
#page-title .breadcrumb .breadcrumb-item.active{ font-weight: bold; }
#page-title .breadcrumb a{
  color: #fff;
  text-decoration: none;
}
#page-title h1{
  font-size: 2rem;
  margin-bottom: 0rem;
}
.font-antonio{
  font-family: "Antonio", sans-serif;
}
.pagination{
  font-family: "Antonio", sans-serif;
  --bs-pagination-active-bg: var(--bs-accent);
  --bs-pagination-active-border-color: var(--bs-accent);
  border: 4px solid;
  border-image: url(../img/base-charcoal-border.svg) 8;
  border-image-outset: 4px;
  background-color: #fff;
  display: inline-flex;
}
.pagination .page-link{
  border-radius: 0;
  border: 0;
}

/* Style untuk Loading Screen */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.bubble-description, .button-actions{
  position: relative;
  z-index: 9;
}
.form-control::placeholder{
  opacity: .5;
}
.bg-brush-paper{
  border: 8px solid;
  border-image: url(../img/base-charcoal-border.svg) 36;
  border-image-outset: 8px;
  background-color: #fff;
}
body.modal-open{ padding-right: 0 !important; }
body.modal-open #mainHeader.fixed-top{ padding-right: 0 !important; }
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.giraffe-icon {
    text-align: center;
    margin-bottom: 30px;
    margin-top: 20px;
}

.giraffe-icon img {
    width: 100px;
    height: auto;
}

.giraffe-bounce {
    animation: bounceGiraffe 0.6s ease-in-out;
}

.giraffe-shake {
    animation: shakeGiraffe 0.5s ease-in-out;
}

.swal2-popup {
    border-radius: 30px !important;
    background: #fff8e7 !important;
    padding-top: 30px !important;
}

.swal2-header {
    padding-top: 0 !important;
}

.swal2-title {
    color: #e76f51 !important;
    font-weight: bold !important;
    margin-top: 10px !important;
    padding-top: 0 !important;
}

.swal2-html-container {
    color: #6d4c41 !important;
    margin-bottom: 20px !important;
}

.swal2-confirm {
    border-radius: 50px !important;
    background: #ffb703 !important;
    color: white !important;
    font-weight: bold !important;
    padding: 10px 30px !important;
    box-shadow: 0 5px 0 #fb8500 !important;
    transition: all 0.2s !important;
    margin-bottom: 20px !important;
}

.swal2-confirm:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 7px 0 #fb8500 !important;
}

.swal2-icon {
    display: none !important;
}

/* Loading spinner */
.btn-loading {
    opacity: 0.7;
    pointer-events: none;
}

.btn-loading .skew-label-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-loading .skew-label-text::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}
#loader-main {
  position: relative;
  width: fit-content;
  animation: floatingMove 6s infinite linear;
  animation-delay: 1s;
}
.loader__bg{
  width: 200px;
  transform: rotate(-45deg) translate(33%, -33%);
  opacity:0;
  animation: bgMove .75s forwards;
}
.loader__letter {
  width: 200px;
  position: absolute;
  left:0;
  top:0;
  opacity:0;
  animation:letterShow .75s forwards;
}
.loader__letter.loader__badge-school{
  transform-origin: 80% 80%;
  animation: badgeZoom .5s forwards;
}
.loader__letter.loader__letter--h{animation-delay: .375s;}
.loader__letter.loader__letter--i{animation-delay: .5s;}
.loader__letter.loader__letter--l{animation-delay: .625s;}
.loader__letter.loader__letter--o{animation-delay: .75s;}
.loader__letter.loader__badge-school{animation-delay: .5s;}
.loader-aligner{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
#loader-main span{
  background-color:#26326f;
  display:block;
  width:8px;
  height:8px;
  border-radius:16px;
  animation:loading 3.5s infinite;
  margin-top:16px;
}
@keyframes floatingMove{
  0% { transform: translate(0, 0px); }
  20% { transform: translate(2px, 4px); }
  40% { transform: translate(2px, -4px); }
  60% { transform: translate(-2px, 4px); }
  80% { transform: translate(-2px, -4px); }
  100% { transform: translate(0, 0px); }
  }
@keyframes letterShow{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}
@keyframes badgeZoom{
  from{
    transform: scale(.3);
  }
  to{
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes bgMove{
  from{
    transform: rotate(-45deg) translate(33%, -33%);
    opacity:0;
  }
  to{
    transform: rotate(0deg) translate(0%, 0%);
    opacity:1;
  }
}
@keyframes loading {
  0% {
      width: 8px;
      transform: translateX(0px);
  }

  40% {
      width: 100%;
      transform: translateX(0px);
  }

  80% {
      width: 8px;
      transform: translateX(134px);
  } 

  90% {
      width: 100%;
      transform: translateX(0px);
  }

  100% {
      width: 8px;
      transform: translateX(0px);
  }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}