html {
  scroll-behavior: smooth;
}

:root {
}

.equal {
  display: flex;
  flex-wrap: wrap;
}

.section p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

#footer h4 {
  margin-bottom: 10px;
}

.section {
  scroll-margin-top: 100px;
}

.wrap-loader {
  display: none !important;
  visibility: hidden !important;
}

.alert-profile {
  display: none !important;
  visibility: hidden !important;
}

.swiper {
  overflow: hidden;
}

.section-title {
  color: var(--Color-Grayscale-text-color-header, #121212);
  text-align: center;

  /* SemiBold/H2/Display-48 */
  font-family: var(--font-family-title, "Open Sans");
  font-size: var(--font-size-display-xxl, 48px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--font-line-height-display-xxl, 72px); /* 150% */
  letter-spacing: var(--font-letter-spacing-display-xxl, 0.75px);

  margin-bottom: 48px;
}

/* UTILS */

.btn-green {
  background: #018d58;
  border: 1px solid #018d58;
  border-radius: 6px;
  /* SemiBold/Body/Text-default */
  font-family: var(--font-family-body, "Open Sans");
  font-size: var(--font-size-body-default, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--font-line-height-body-default, 24px); /* 150% */
  letter-spacing: 0.3px;
  color: #ffffff;
  padding: 14px 28px;
  transition: 300ms ease-in-out;
}

.btn-green:hover,
.btn-green:active,
.btn-green:focus {
  border: 1px solid #018d58;
  background: #018d58;
  color: #ffffff;
  box-shadow: 8px 10px 20px -13px rgba(0, 0, 0, 0.51);
}

.btn-outline-green {
  background: #fff;
  border: 1px solid #018d58;
  border-radius: 6px;
  color: var(--Color-Grayscale-color-placeholder, #c2c2c2);

  /* SemiBold/Body/Text-default */
  font-family: var(--font-family-body, "Open Sans");
  font-size: var(--font-size-body-default, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--font-line-height-body-default, 24px); /* 150% */
  letter-spacing: 0.3px;
  color: #018d58;
  padding: 14px 28px;
  transition: 300ms ease-in-out;
}

.btn-outline-green:hover,
.btn-outline-green:active,
.btn-outline-green:focus {
  border: 1px solid #018d58;
  background: #018d58;
  color: #ffffff;
  box-shadow: 8px 10px 20px -13px rgba(0, 0, 0, 0.51);
}
/* End Utils */

/* Start Section Hero */

.wrapper-hero {
  position: relative;
  height: 500px;
  width: 100%;
}

.hero-title {
  color: var(--Color-Grayscale-text-color-header, #121212);
  text-align: center;

  /* SemiBold/H1/Display-60 */
  font-family: var(--font-family-title, "Open Sans");
  font-size: var(--font-size-display, 60px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--font-line-height-display, 90px); /* 150% */
}

.section-hero .wrapper-subtitle {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.hero-subtitle {
  color: var(--Color-Grayscale-text-color-description, #4b4b4b);
  text-align: center;

  /* Regular/Body <p>/Text-18 */
  font-family: var(--font-family-body, "Open Sans");
  font-size: var(--font-size-body-xl, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-line-height-body-xl, 27px); /* 150% */
  letter-spacing: var(--font-letter-spacing-text-xl, 0.3px);
  max-width: 750px;
}

.img-hero {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* End Section Hero */

/* Section Founder */
.section-founder .wrapper-card {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  justify-content: center;
}
/* End Section Founder */

/* Section Manager */
.section-manager .wrapper-card {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  justify-content: center;
}
/* End Section Manager */

/* Card Team */
.card-team {
  width: 400px;
  display: flex; /* Menggunakan flexbox */
  flex-direction: column; /* Elemen di dalam card terletak vertikal */
  justify-content: space-between; /* Membuat elemen menyebar antara atas dan bawah */
  /* width: 200px; */
  min-height: 150px;
}

.card-team .bg-avatar {
  width: 400px;
  height: 310px;
  margin-bottom: 18px;
  position: relative;
}

.card-team svg {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0;
  z-index: 999;
  transition: all 300ms ease-in-out;
}

.img-avatar {
  border-radius: var(--Corner-Radius-corner-xl, 24px);
  /* width: 100%;
  height: 280px; */
  width: 400px;
  height: 310px;
  object-fit: cover;
  object-position: top;
  filter: grayscale(1);
  transition: opacity 0.5s ease-in-out; /* Transisi opacity untuk fade in/out */
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}

.img-hover {
  opacity: 0;
}

.card-team:hover .img-avatar {
  opacity: 0;
}

.card-team:hover .img-hover {
  opacity: 1;
  filter: grayscale(0);
}

.card-team:hover svg {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 1;
  z-index: 999;
}

.card-team h3 {
  color: var(--Color-Grayscale-text-color-header, #121212);

  /* SemiBold/H5/Header-24 */
  font-family: var(--font-family-subtitle, "Open Sans");
  font-size: var(--font-size-header-s, 24px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--font-line-height-header-s, 36px); /* 150% */
  letter-spacing: var(--font-letter-spacing-display-md, 0.5px);
  margin-bottom: 5px;

  white-space: normal;
  word-wrap: break-word;
}

.card-team p {
  color: var(--Color-Grayscale-text-color-description, #4b4b4b);

  /* Regular/Body <p>/Text-18 */
  font-family: var(--font-family-body, "Open Sans");
  font-size: var(--font-size-body-xl, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-line-height-body-xl, 27px); /* 150% */
  letter-spacing: var(--font-letter-spacing-text-xl, 0.3px);

  white-space: normal;
  word-wrap: break-word;
}
/* End Card Team */

/* Section Team */
.section-team .swiper-slide {
  width: auto;
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.marquee-top .marquee-content {
  display: inline-block;
  animation: marquee 15s linear infinite;
  /* animation-play-state: paused; */
}

.marquee-bottom .marquee-content {
  display: inline-block;
  animation: marquee-reverse 15s linear infinite;
  /* animation-play-state: paused; */
}

.marquee-content a {
  display: inline-block;
  margin-right: 48px;
}

/* Animasi marquee */
@keyframes marquee {
  0% {
    transform: translateX(0); /* Mulai dari posisi awal */
  }
  100% {
    transform: translateX(
      -50%
    ); /* Geser hingga setengah dari total lebar konten */
  }
}

/* Animasi marquee untuk slider bawah (berlawanan arah) */
@keyframes marquee-reverse {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Hentikan animasi saat hover */
.marquee-top:hover .marquee-content,
.marquee-bottom:hover .marquee-content {
  animation-play-state: paused;
}

.marquee-top {
  margin-bottom: 48px;
}
/* End Section Team */

/* Section Nilai */
.section-nilai .wrapper-card {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* Baris pertama 6 kolom */
  grid-gap: 20px; /* Jarak antar elemen */
}

.card-nilai:nth-child(1),
.card-nilai:nth-child(2),
.card-nilai:nth-child(3) {
  grid-column: span 2;
}

.card-nilai:nth-child(4),
.card-nilai:nth-child(5) {
  grid-column: span 3;
}

.card-nilai {
  border-radius: var(--Corner-Radius-corner-l, 12px);
  border: 1px solid var(--Color-Grayscale-color-stroke, #d9d9d9);
  background: var(--Color-Grayscale-white-background, #fff);
  padding: 18px;
}

.card-nilai img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 20px;
}

.card-nilai h3 {
  color: var(--Color-Grayscale-text-color-header, #121212);

  /* SemiBold/H4/Display-28 */
  font-family: var(--font-family-title, "Open Sans");
  font-size: var(--font-size-display-md, 28px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--font-line-height-display-md, 42px); /* 150% */
  letter-spacing: var(--font-letter-spacing-header-s, 0.5px);
  margin-bottom: 5px;
}

.card-nilai p {
  color: var(--Color-Grayscale-text-color-description, #4b4b4b);

  /* Regular/Body <p>/Text-16 */
  font-family: var(--font-family-body, "Open Sans");
  font-size: var(--font-size-body-default, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-line-height-body-default, 24px); /* 150% */
  letter-spacing: var(--font-letter-spacing-text-default, 0.3px);
}

/* End Section Nilai */

/* Section Prinsip */

.card-prinsip {
  position: relative;
  border-radius: var(--Corner-Radius-corner-l, 12px);
  padding: 18px;

  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.card-prinsip-green {
  background: var(--Color-Primary-primary-background-weak, #f5f9f8);
  border: 1px solid var(--Color-Primary-primary-background-strong, #d6e5e3);
}

.card-prinsip-red {
  border: 1px solid var(--Error-Background---Strong, #fce1e1);
  background: var(--Error-Background, #fef7f7);
}

.card-prinsip-orange {
  border: 1px solid var(--Warning-Background---Strong, #fce9d7);
  background: var(--Color-Warning-color-warning-background, #fefaf5);
}

.card-prinsip .number {
  /* SemiBold/H1/Display-60 */
  font-family: var(--font-family-title, "Open Sans");
  font-size: var(--font-size-display, 60px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--font-line-height-display, 90px); /* 150% */
}

.card-prinsip-green .number {
  color: var(--Color-Primary-primary, #005e4e);
}

.card-prinsip-red .number {
  color: var(--Color-Error-color-error, #ed4141);
}

.card-prinsip-orange .number {
  color: #ed7607;
}

.card-prinsip h3 {
  /* SemiBold/H3/Display-32 */
  font-family: var(--font-family-title, "Open Sans");
  font-size: var(--font-size-display-l, 32px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--font-line-height-display-l, 48px); /* 150% */
  letter-spacing: var(--font-letter-spacing-display-l, 1px);
}

.card-prinsip-green h3 {
  color: var(--Color-Primary-primary, #005e4e);
}

.card-prinsip-red h3 {
  color: var(--Color-Error-color-error, #ed4141);
}

.card-prinsip-orange h3 {
  color: #ed7607;
}

.card-prinsip .overlay {
  opacity: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px;
  transition: 0.3s ease-in-out;
  border-radius: var(--Corner-Radius-corner-l, 12px);
  overflow-y: auto;
  min-height: 100%;

  /* Regular/Body <p>/Text-16 */
  font-family: var(--font-family-body, "Open Sans");
  font-size: var(--font-size-body-default, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-line-height-body-default, 24px); /* 150% */
  letter-spacing: var(--font-letter-spacing-text-default, 0.3px);
}

.card-prinsip-green .overlay {
  background: var(--Color-Primary-primary-background-weak, #f5f9f8);
  color: var(--Color-Primary-primary, #005e4e);
}

.card-prinsip-red .overlay {
  background: var(--Error-Background, #fef7f7);
  color: var(--Color-Error-color-error, #ed4141);
}

.card-prinsip-orange .overlay {
  background: var(--Color-Warning-color-warning-background, #fefaf5);
  color: #ed7607;
}

.card-prinsip-green .overlay p {
  background: var(--Color-Primary-primary-background-weak, #f5f9f8);
  color: var(--Color-Primary-primary, #005e4e);
}

.card-prinsip-red .overlay p {
  background: var(--Error-Background, #fef7f7);
  color: var(--Color-Error-color-error, #ed4141);
}

.card-prinsip-orange .overlay p {
  background: var(--Color-Warning-color-warning-background, #fefaf5);
  color: #ed7607;
}

.card-prinsip:hover .overlay {
  opacity: 1;
}
/* End Section Prinsip */

/* Section CTA */
.section-cta .wrapper-card {
  display: grid;
  gap: 48px;
  grid-template-columns: repeat(2, 1fr);
}

.card-cta {
  border-radius: var(--Corner-Radius-corner-l, 12px);
  border: 1px solid var(--Color-Grayscale-color-stroke, #d9d9d9);
  background: var(--Color-Grayscale-white-background, #fff);
}

.card-cta .card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-cta img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.card-cta h3 {
  color: var(--Color-Grayscale-text-color-header, #121212);

  /* SemiBold/H2/Display-36 */
  font-family: var(--font-family-title, "Open Sans");
  font-size: var(--font-size-display-xl, 36px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--font-line-height-display-xl, 54px); /* 150% */
  letter-spacing: var(--font-letter-spacing-display-xl, 1px);
  margin-bottom: 10px;
}

.card-cta p {
  color: var(--Color-Grayscale-text-color-description, #4b4b4b);

  /* Regular/Body <p>/Text-16 */
  font-family: var(--font-family-body, "Open Sans");
  font-size: var(--font-size-body-default, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-line-height-body-default, 24px); /* 150% */
  letter-spacing: var(--font-letter-spacing-text-default, 0.3px);

  margin-bottom: 48px;
}

.card-cta .wrapper-button {
  display: flex;
  justify-content: end;
}
/* End Section CTA */

/* Section Contact */
.section-contact .wrapper-card {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.section-contact .icon-contact {
  width: 80px;
  height: 80px;
}
/* Section Contact */