/* =========================================================
   WHATSAPP FLOATING BUTTON
========================================================= */

.whatsapp-link {
  position: fixed;

  right: 22px;
  bottom: 100px;

  z-index: 9999;

  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;

  background: linear-gradient(
    145deg,
    #0A4799,
    #06346f
  );

  color: #ffffff !important;

  box-shadow:
    0 10px 28px rgba(10, 71, 153, 0.35);

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

.whatsapp-link:hover {
  transform: translateY(-5px) scale(1.05);

  background: #FFDE00;

  color: #0A4799 !important;

  box-shadow:
    0 14px 34px rgba(255, 222, 0, 0.35);
}

.whatsapp-link i {
  font-size: 29px;
}


/* =========================================================
   YELLOW RIBBON
========================================================= */

.footer-ribbon {
  position: relative;

  width: 100%;
  height: 7px;

  overflow: hidden;

  background: linear-gradient(
    90deg,
    #FFDE00 0%,
    #FFE84A 35%,
    #FFDE00 70%,
    #F6C900 100%
  );
}

.footer-ribbon::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );

  transform: translateX(-100%);

  animation: footerRibbonShine 5s ease-in-out infinite;
}

@keyframes footerRibbonShine {

  0%,
  70% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }

}


/* =========================================================
   FOOTER MAIN
========================================================= */

.footer-ut {
  position: relative;

  display: flex;
  flex-direction: column;

  min-height: 560px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #0A4799 0%,
      #073b7d 40%,
      #052b60 72%,
      #041f46 100%
    );

  color: #ffffff;
}


/* =========================================================
   SVG BACKGROUND
========================================================= */

.footer-ut-svg-bg {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 0;

  pointer-events: none;

  overflow: hidden;
}

.footer-ut-svg-bg svg {
  width: 100%;
  height: 100%;

  display: block;
}


/* =========================================================
   FOOTER CONTENT WRAPPER
========================================================= */

.footer-ut-content {
  position: relative;

  z-index: 2;

  flex: 1;

  width: 100%;

  padding-top: 70px;
  padding-bottom: 55px;
}


/* =========================================================
   LOGO / BRAND AREA
========================================================= */

.footer-ut-brand {
  max-width: 380px;
}

.footer-ut-logo {
  display: block;

  max-width: 310px;
  width: 100%;

  margin-bottom: 24px;

  transition: transform 0.3s ease;
}

.footer-ut-logo:hover {
  transform: translateY(-3px);
}

.footer-ut-logo img {
  display: block;

  width: 100%;
  height: auto;
}


/* =========================================================
   INTRO
========================================================= */

.footer-ut-description {
  max-width: 370px;

  margin-bottom: 24px;

  color: rgba(255, 255, 255, 0.8) !important;

  font-size: 14px;
  line-height: 1.75;
}


/* =========================================================
   CONTACT
========================================================= */

.footer-contact-list {
  display: flex;
  flex-direction: column;

  gap: 12px;

  margin-top: 22px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;

  gap: 11px;
}

.footer-contact-icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  background: rgba(255, 222, 0, 0.14);
  color: #FFDE00;

  font-size: 16px;
}

.footer-contact-item a,
.footer-contact-item span {
  padding-top: 5px;

  color: rgba(255, 255, 255, 0.88) !important;

  font-size: 18px;
  line-height: 1.6;

  text-decoration: none;
}

.footer-contact-item a:hover {
  color: #FFDE00 !important;
}


/* =========================================================
   WIDGET
========================================================= */

.footer-ut .widget {
  position: relative;

  height: 100%;
}

.footer-widget-title {
  position: relative;

  display: inline-flex;
  align-items: center;

  margin: 0 0 22px;

  color: #ffffff !important;

  font-size: 18px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.footer-widget-title::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 42px;
  height: 3px;

  border-radius: 999px;

  background: #FFDE00;
}


/* =========================================================
   FOOTER LINKS
========================================================= */

.footer-link-list {
  margin: 0;
  padding: 0;

  list-style: none;
}

.footer-link-list li {
  margin-bottom: 9px;
}

.footer-link-list li:last-child {
  margin-bottom: 0;
}

.footer-link-list a {
  position: relative;

  display: inline-flex;
  align-items: center;

  gap: 7px;

  color: rgba(255, 255, 255, 0.78) !important;

  font-size: 18px;
  line-height: 1.55;

  text-decoration: none;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.footer-link-list a::before {
  content: "";

  width: 5px;
  height: 5px;

  flex: 0 0 5px;

  border-radius: 50%;

  background: #FFDE00;

  opacity: 0.65;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.footer-link-list a:hover {
  color: #FFDE00 !important;

  transform: translateX(4px);
}

.footer-link-list a:hover::before {
  opacity: 1;

  transform: scale(1.5);
}


/* =========================================================
   SOCIAL MEDIA
========================================================= */

.footer-social {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-top: 26px;
}

.footer-social a {
  width: 40px;
  height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 11px;

  background: rgba(255, 255, 255, 0.08);

  color: #ffffff !important;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  font-size: 18px;

  text-decoration: none;

  transition:
    transform 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.footer-social a:hover {
  transform: translateY(-4px);

  border-color: #FFDE00;

  background: #FFDE00;

  color: #0A4799 !important;
}

.footer-social a:hover i {
  color: #0A4799 !important;
}


/* =========================================================
   FLAG COUNTER CARD
========================================================= */

.footer-counter-card {
  width: 100%;

  padding: 18px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 15px;

  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.footer-counter-label {
  display: block;

  margin-bottom: 12px;

  color: #FFDE00;

  font-size: 13px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.footer-counter-card img {
  display: block;

  max-width: 100%;
  height: auto;

  margin: auto;

  border-radius: 6px;
}


/* =========================================================
   COPYRIGHT
   SELALU PALING BAWAH
========================================================= */

.footer-ut-bottom {
  position: relative;

  z-index: 3;

  width: 100%;

  margin-top: auto;

  border-top: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(2, 21, 48, 0.42);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.footer-ut-bottom-inner {
  min-height: 72px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-top: 18px;
  padding-bottom: 18px;

  text-align: center;
}

.footer-ut-copyright {
  margin: 0;

  color: rgba(255, 255, 255, 0.76) !important;

  font-size: 18px;
  line-height: 1.7;
}

.footer-ut-copyright strong {
  color: #ffffff;

  font-weight: 700;
}

.footer-ut-copyright .footer-yellow {
  color: #FFDE00;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .footer-ut-content {
    padding-top: 55px;
    padding-bottom: 45px;
  }

  .footer-ut-brand {
    max-width: 100%;
  }

  .footer-ut-logo {
    max-width: 280px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

  .footer-ut {
    min-height: auto;
  }

  .footer-ut-content {
    padding-top: 45px;
    padding-bottom: 40px;
  }

  .footer-ut-brand {
    text-align: center;
  }

  .footer-ut-logo {
    max-width: 270px;

    margin-left: auto;
    margin-right: auto;
  }

  .footer-ut-description {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
  }

  .footer-contact-list {
    align-items: stretch;

    text-align: left;
  }

  .footer-widget-title {
    margin-top: 12px;
  }

  .footer-social {
    justify-content: flex-start;
  }

  .footer-counter-card {
    max-width: 300px;
  }

  .footer-ut-bottom-inner {
    min-height: 82px;

    padding: 18px 16px;
  }

  .footer-ut-copyright {
    font-size: 18px;
  }

  .whatsapp-link {
    right: 16px;
    bottom: 85px;

    width: 52px;
    height: 52px;
  }

  .whatsapp-link i {
    font-size: 26px;
  }

}