body {
  width: 100%;
  overflow-x: hidden;
}

.container-xl2 {
  width: 100%;
  padding-right: var(--bs-gutter-x, 130px);
  padding-left: var(--bs-gutter-x, 130px);
  margin-right: auto;
  margin-left: auto;
}
.home-about-descr {

  font-family: 'Open Sans', sans-serif;
}
.container-xxl2 {
  width: 100%;
  padding-right: var(--bs-gutter-x, 200px);
  padding-left: var(--bs-gutter-x, 200px);
  margin-right: auto;
  margin-left: auto;
}

.container-include {
  padding-right: 150px;
  padding-left: 150px;
}
.container-include-sustainability {
  padding-right: 10px;
  padding-left: 150px;
}
.section-media {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.card-sustainability {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  border-radius: 15px;
  transition: all 0.3s ease;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 50.32%,
    rgba(0, 0, 0, 0.77) 100%
  );
  box-shadow: 0px 4px 11px 0px rgba(0, 0, 0, 0.25);
}
.img-about-directors{
  object-fit: cover;object-position: center; height: 100%; width: 100%;
}
.detail-media-desc {
  color: #333;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 30px */
  letter-spacing: 0.5px;
}
.list-media-date {
  color: rgba(255, 255, 255, 0.77);
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.list-media-category {
  color: rgba(255, 255, 255, 0.77);
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal; /* 171.429% */
}
.detail-media-title {
  color: #000;
  font-family: 'Playfair Display', sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 48px */
  letter-spacing: 0.5px;
  margin-bottom: 48px;
  margin-top: 24px;
}

.card-sustainability-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  transition: all 0.3s ease;
}

.card-sustainability-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 10px;
  transition: all 0.3s ease;
  background: rgba(0, 11, 18, 0.2);
  height: 120px; /* Tinggi awal untuk menampilkan judul */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}

.card-sustainability-title {
  color: #fff;
  font-size: 21px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 42px */
  letter-spacing: 0.5px;
  padding: 5px;
  font-family: 'Open Sans', sans-serif;
  transition: all 0.3s ease;
  z-index: 2;
}

.card-sustainability-description {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.3s ease;
  width: 90%; /* Mengatur lebar deskripsi */
  text-align: left;
  z-index: 1;
  margin-top: 30px;
}

.card-sustainability-description p {
  color: #fff;

  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 30px */
  letter-spacing: 0.5px;
}
.social-mobile-image {
  display: none; /* Sembunyikan gambar mobile */
}

.card-sustainability:hover .card-sustainability-content {
  background-color: rgba(0, 112, 192, 0.8);
  height: 100%; /* Membuat elemen card-content menjadi full height */
}

.card-sustainability:hover .card-sustainability-title {
  transform: translateY(-100px);
}

.card-sustainability:hover .card-sustainability-description {
  opacity: 1;
}

.card-sustainability:hover .card-sustainability-img {
  transform: scale(1.1);
}

.card-environment {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  border-radius: 15px;
  transition: all 0.3s ease;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 50.32%,
    rgba(0, 0, 0, 0.77) 100%
  );
  box-shadow: 0px 4px 11px 0px rgba(0, 0, 0, 0.25);
}

.card-environment-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  transition: all 0.3s ease;
}

.card-environment-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 10px;
  transition: all 0.3s ease;
  background: rgba(0, 11, 18, 0.77);
  height: 120px; /* Tinggi awal untuk menampilkan judul */
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-environment-title {
  color: #fff;
  font-size: 21px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 42px */
  letter-spacing: 0.5px;
  padding: 5px;
  font-family: 'Open Sans', sans-serif;
  transition: all 0.3s ease;
  z-index: 2;
}
.min-vh-contact {
  min-height: 70vh !important;
}
.card-environment-description {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.3s ease;
  width: 90%; /* Mengatur lebar deskripsi */
  text-align: left;
  z-index: 1;
}

.card-environment-description p {
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 30px */
  letter-spacing: 0.5px;
  margin-top: 54px;
}

.card-environment:hover .card-environment-content {
  background-color: #226030e0;
  height: 100%; /* Membuat elemen card-content menjadi full height */
}

.card-environment:hover .card-environment-title {
  transform: translateY(-100px);
}

.card-environment:hover .card-environment-description {
  opacity: 1;
}

.card-environment:hover .card-environment-img {
  transform: scale(1.1);
}

.card-social {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  border-radius: 15px;
  transition: all 0.3s ease;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 50.32%,
    rgba(0, 0, 0, 0.77) 100%
  );
  box-shadow: 0px 4px 11px 0px rgba(0, 0, 0, 0.25);
}

.card-social-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  transition: all 0.3s ease;
}

.card-social-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 10px;
  transition: all 0.3s ease;
  background: rgba(255, 204, 41, 0.8);
  height: 120px; /* Tinggi awal untuk menampilkan judul */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

.card-social-title {
  color: black;
  font-size: 21px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 42px */
  letter-spacing: 0.5px;
  padding: 5px;
  font-family: 'Open Sans', sans-serif;
  transition: all 0.3s ease;
  z-index: 2;
}

.card-social-description {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.3s ease;
  width: 90%; /* Mengatur lebar deskripsi */
  text-align: left;
  z-index: 1;
  margin-top: 30px;
}

.card-social-description p {
  color: black;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 30px */
  letter-spacing: 0.5px;
}

.card-social:hover .card-social-content {
  background: rgba(255, 204, 41, 0.8);
  height: 100%;
}

.card-social:hover .card-social-title {
  transform: translateY(-100px);
}

.card-social:hover .card-social-description {
  opacity: 1;
}

.card-social:hover .card-social-img {
  transform: scale(1.1);
}

.visi-left {
  padding-top: 2rem;
  padding-right: 2rem;
  padding-bottom: 1rem;
}

.misi-right {
  padding-top: 2rem;
  padding-left: 2rem;
  padding-bottom: 1rem;
}

.img-quote {
  margin-right: 30px;
}

.quote-text {
  font-size: 24px;
  line-height: 40px;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
}

.author-name {
  margin-top: 30px;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 0px !important;
}

.author-title {
  font-size: 16px;
}

.environment-header {
  display: flex;
  align-items: center;
}

.environment-icon {
  height: 120px;
  width: 120px;
}

.environment-title {
  font-size: 56px;
  color: #23672f;
  font-weight: bold;
  margin-left: 20px;
  font-family: 'Playfair Display', serif;
}

.mt-40 {
  margin-top: 40px;
}

.mt-10 {
  margin-top: 10px;
}

.container-box {
  background: rgba(35, 103, 47, 0.88);
  padding: 24px;
  width: 240px;
  height: 298px;
}

.box-content-span {
  min-height: 157px;
  display: block;
  font-family: 'Open Sans', sans-serif;
}

.box-title {
  font-size: 18px;
  font-weight: 700;
  min-height: 58px;
  display: block;
  font-family: 'Open Sans', sans-serif;
}


.am5-html-container > div {
  position: relative !important;
}

.title-header {
  font-family: 'Playfair Display', serif;
  font-size: 1rem !important;
  margin-left: 4px;
}

.box-content {
  font-size: 14px;
}

.mt-20 {
  margin-top: 20px;
}

.mb-50 {
  margin-bottom: 20px;
}

.number-box {
  border: 2px solid white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-btn {
  display: flex;
  border-color: rgba(35, 103, 47, 0.88);
  margin-top: 20px;
  align-items: center;
  justify-content: center;
  background: rgba(35, 103, 47, 0.88);
  color: #ffffff;
  width: 170px;
  height: 60px;
}

.carousel-mobile {
  display: none;
}

.carousel-web {
  display: block;
}

.border-porto {
  border-top: 1px solid #fff;
  margin-top: -5px;
}

.social-title {
  font-size: 56px;
  color: black;
  font-weight: bold;
  font-family: 'Playfair Display', serif;
  margin-left: 20px;
}

.container-box-social {
  background: #ffcc29;
  padding: 24px;
  width: 240px;
  height: auto !important;
}

.visi-misi-image {
  height: 565px;
  object-fit: cover;
  object-position: center;
}

.social-box-title {
  color: black;
  font-size: 18px;
  font-weight: 700;
  min-height: 58px;
  display: block;
  font-family: 'Open Sans', sans-serif;
}

.social-box-content {
  color: black;
  font-size: 14px;
}

.social-number-box {
  border: 2px solid black;
  color: black;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-btn {
  display: flex;
  border-color: #ffcc29;
  margin-top: 20px;
  align-items: center;
  justify-content: center;
  background: #ffcc29;
  color: black;
  width: 170px;
  height: 60px;
}

.governance-title {
  font-size: 56px;
  color: black;
  font-weight: bold;
  margin-left: 20px;
  font-family: 'Playfair Display', serif;
}

.container-box-governance {
  background: rgba(0, 112, 192, 0.88);
  padding: 24px;
  width: 240px;
  height: auto !important;
}

.governance-box-title {
  color: white;
  font-size: 18px;
  font-weight: 700;
  min-height: 77px;
  display: block;
  font-family: 'Open Sans', sans-serif;
}

.governance-box-content {
  color: white;
  font-size: 14px;
}

.governance-number-box {
  border: 2px solid white;
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.governance-btn {
  display: flex;
  border-color: rgba(0, 112, 192, 0.88);
  margin-top: 20px;
  align-items: center;
  justify-content: center;
  background: rgba(0, 112, 192, 0.88);
  color: black;
  width: 170px;
  height: 60px;
}

.img-dir {
  float: left;
  margin: 20px 30px 0px 0px;
}

.dir-descr {
  text-align: justify;
  padding-top: 20px;
  font-size: 18px;
}

.section-sustain-content {
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: white;
  color: black;
}

.title-sustain-guide {
  color: #333;
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 48px */
  letter-spacing: 0.5px;
}

.desc-sustain-guide {
  color: #333;
  text-align: justify;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 30px */
}

.image-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Pusatkan elemen anak secara horizontal */
}

.chairman-image {
  width: 345.6px;
  height: 432px;
}

.bg-shadow-sustain-2 {
  background-color: #000000a2;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.environment-detail-title {
  color: #ffcc29;
  font-family: 'Open Sans', sans-serif;
  font-size: 35px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 57.6px */
  letter-spacing: 0.5px;
  display: block;
}

.environment-detail-desc {
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 42px */
  letter-spacing: 0.5px;
}
.governance-detail-title {
  color: #ffcc29;
  font-family: 'Playfair Display', serif;
  font-size: 35px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 57.6px */
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 13px;
  text-align: center; /* Center the title text */
}

.governance-detail-desc {
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 42px */
  letter-spacing: 0.5px;
  max-width: 70%;
  margin: 0 auto;
  display: block;
  text-align: center;
}

.environment-detail-header {
  display: flex;
  align-items: center;
}

.environment-detail-container-box {
  margin-top: 30px;
  height: 100%; /* Set tinggi elemen menjadi 100% */
}

.environment-detail-box-title {
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.5px;
  min-width: 251px;
  display: block;
  min-height: 67px;
  margin-bottom: 10px;
  min-height: 90px;
}

.environment-detail-box-content {
  color: #fff;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 13px;
  font-weight: 300 !important;
  line-height: 150%; /* 30px */
  letter-spacing: 0.5px;
}

.environment-detail-box-image {
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  height: auto;
  margin-bottom: 20px;
}

.environment-row-title {
  margin-top: 36px;
  margin-bottom: 60px;
}

.governance-row-title {
  margin-top: 36px;
  margin-bottom: 60px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.booklet-image {
  width: 228px !important;
  height: 281px !important;
  object-fit: cover !important;
  object-position: center;
}

.home-about-video {
  width: 30% !important;
}

.about-about-video {
  width: 50% !important;
}

.social-detail-title-card {
  color: black;
  font-family: 'Open Sans', sans-serif;
  font-size: 35px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 57.6px */
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 13px;
  text-align: center; /* Center the title text */
}

.social-detail-desc-card {
  color: #333;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 42px */
  letter-spacing: 0.5px;
  max-width: 70%;
  margin: 0 auto;
  display: block;
  text-align: center;
}

.social-detail-title {
  color: #141414;
  font-family: 'Playfair Display', serif;
  font-size: 35px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 57.6px */
  letter-spacing: 0.5px;
}

.social-detail-desc {
  color: #141414;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 30px */
  letter-spacing: 0.5px;
  text-align: justify;
}
.social-detail-title-first {
  color: #141414;
  font-family: 'Playfair Display', serif;
  font-size: 35px;
  font-style: normal;
  font-weight: 600;
  line-height: 139%; /* 83.4px */
  letter-spacing: 0.5px;
  margin-top: 20px;
}

.governance-detail-title-first {
  color: white;
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 139%; /* 83.4px */
  letter-spacing: 0.5px;
  margin-top: 20px;
}
.environment-detail-title-first {
  color: white;
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 139%; /* 83.4px */
  letter-spacing: 0.5px;
  margin-top: 20px;
}
.guidelines-detail-title-first {
  color: white;
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 139%; /* 83.4px */
  letter-spacing: 0.5px;
  margin-top: 20px;
}
.history-min-height {
  min-height: 100vh;
}
.social-detail-header {
  display: flex;
  align-items: center;
}

.social-detail-container-box {
  margin-top: 30px;
  height: 100%; /* Set tinggi elemen menjadi 100% */
}

.social-detail-box-title {
  color: #333;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.5px;
  min-width: 251px;
  display: block;
  min-height: 90px;
}

.social-detail-box-content {
  color: #333;
  margin-top: 50px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 150%; /* 30px */
  letter-spacing: 0.5px;
}

.social-detail-box-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.carousel-inner-social {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.carousel-item-content {
  text-align: left;
  max-width: 743px;
  margin: 0 auto;
  padding: 20px;
}

.carousel-image {
  width: 700px;
  object-fit: cover;
  max-width: 700px; /* Pastikan gambar sesuai dengan lebar konten */
  height: 373px;
}

.carousel-title {
  color: #141414;
  font-family: 'Playfair Display', serif;
  font-size: 35px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 57.6px */
  letter-spacing: 0.5px;
  margin-bottom: 30px;
  margin-top: 30px;
}

.carousel-description {
  color: #141414;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 30px */
  letter-spacing: 0.5px;
  text-align: justify;
}
.carousel-control-next-social {
  position: absolute;
  top: 39%;
  transform: translateY(-50%);
  right: 10px; /* Sesuaikan jarak dari gambar */
}
.carousel-control-prev-social {
  position: absolute;
  top: 39%;
  transform: translateY(-50%);
  left: 10px;
}

.desktop-mision {
  display: block;
}

.desktop-vision {
  display: block;
}

.mobile-mision {
  display: none;
}
.carousel-top-post {
  padding-left: 60px;
  padding-right: 60px;
}
.carousel-image-top-post {
  height: auto;
}

.mobile-vision {
  display: none;
}
.text-title-section {
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-size: 49px !important;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 72px */
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}
.text-desc-section {
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px !important;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 36px */
  letter-spacing: 0.5px;
  margin-bottom: 40px;
}

.carousel-box-top {
  margin-top: 45px;
}

.section-top-post {
  padding-top: 4rem;
}

.section-post {
  padding-top: 4rem;
}

.text-title-top {
  min-height: 70px;
  font-size: 18px !important;
}

.custom-proto-card {
  width: 25%;
}
.custom-direction-card {
  width: 20%;
}

.custom-values-card {
  width: 19%;
}

.line-custom {
  height: 100%;
  width: 1px;
  border-left: 1px solid #fff;
  margin: 0px auto;
}

.circle-custom {
  position: sticky;
  width: 10px;
  height: 10px;
  background: #fff;
  bottom: 0;
  margin: 0px auto;
  border-radius: 20px;
}

.card-porto {
  padding: 5px 10px;
  background-image: linear-gradient(#404040, #404040, #000);
}

.card-porto:hover {
  background-image: linear-gradient(#404040, #404040, #dab12f);
}
.detail-desc-management p span {
  color: white !important;
}

.detail-desc-management {
  padding-right: 50px;
  width: 100%;
  margin-top: 30px;
  overflow-y: scroll;
  max-height: 450px;
  max-width: 500px;
  color: white !important;
}

.detail-desc-management::-webkit-scrollbar {
  width: 0;
}

.detail-desc-management::-webkit-scrollbar-thumb {
  width: 0;
  height: 0;
}

.text-section-social {
  color: #ffcc29;
  font-family: 'Playfair Display', serif;
  width: 743px;
  font-size: 56px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 67.2px */
  letter-spacing: 0.5px;
}

.desc-section-social {
  color: #fff;
  width: 1134px;
  margin-top: 24px;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 30px */
  letter-spacing: 0.5px;
  margin-bottom: 34px;
}

.social-video {
  width: 366px !important;
  height: 205px !important;
}
.social-grid-title {
  color: #141414;
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0.5px;
  margin-bottom: 30px;
  margin-right: 20px;
}

.social-grid-img {
  width: 100%;
  margin-top: 0px;
  height: 100%;
  object-fit: cover;
}
.social-grid-detail-desc {
  color: #333;
  font-family: 'Open Sans', sans-serif;
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.5px;
  margin: 0 auto;
  text-align: justify;
}

.sustainability-breadcumb-back {
  color: black;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 0.5px;
  border: none !important;
  margin-bottom: 20px;
  border: none;
  outline: none;
  text-decoration: none;
  transition: color 0.3s; /* Efek transisi warna saat hover */
}
.icon-sustainability-back {
  width: 13px;
  height: 7px;
  fill: #ffcc29;
  margin-right: 10px;
  flex-shrink: 0;
}

.sustainability-breadcumb-back:hover {
  color: white;
}

.governance-breadcumb-back {
  color: white;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 0.5px;
  border: none !important;
  margin-bottom: 20px;
  border: none;
  outline: none;
  text-decoration: none;
  transition: color 0.3s; /* Efek transisi warna saat hover */
}
.governance-breadcumb-back:hover {
  color: rgb(196, 196, 196);
}

.environment-breadcumb-back {
  color: white;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 0.5px;
  border: none !important;
  margin-bottom: 20px;
  border: none;
  outline: none;
  text-decoration: none;
  transition: color 0.3s; /* Efek transisi warna saat hover */
}
.environment-breadcumb-back:hover {
  color: rgb(196, 196, 196);
}

.guidelines-breadcumb-back {
  color: white;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 0.5px;
  border: none !important;
  margin-bottom: 20px;
  border: none;
  outline: none;
  text-decoration: none;
  transition: color 0.3s; /* Efek transisi warna saat hover */
}
.guidelines-breadcumb-back:hover {
  color: rgb(196, 196, 196);
}

.text-aboutus-subtitle {
  color: #ffcc29;
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%; /* 81.2px */
  letter-spacing: 0.5px;
}
.text-aboutus-desc {
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 30px */
  letter-spacing: 0.5px;
  margin-top: 8px;
}
.img-social-right {
  margin-top: 223px;
}

@media (min-width: 2560px) {
  body {
    zoom: 175%;
  }

  .history-min-height {
    min-height: 50vh !important;
  }
}

@media (min-width: 768px) {
  .desktop-vision {
    padding-left: 0px !important;
  }

  .desktop-mision {
    padding-right: 0px !important;
  }
}

@media (max-width: 768px) {

  .social-desktop-image {
    display: none; /* Sembunyikan gambar desktop */
  }
  .social-mobile-image {
      display: block; /* Tampilkan gambar mobile */
  }
  .carousel-control-next-social {
    position: absolute;
    top: 39%;
    transform: translateY(-50%);
    right: 0px; /* Sesuaikan jarak dari gambar */
  }

  .social-detail-title {
    color: #141414;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 57.6px */
    letter-spacing: 0.5px;
  }

  .carousel-control-prev-social {
    position: absolute;
    top: 39%;
    transform: translateY(-50%);
    left: 0px;
  }
  .text-section-social {
    color: #ffcc29;
    font-family: 'Playfair Display', serif;
    width: auto;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 67.2px */
    letter-spacing: 0.5px;
  }

  .desc-section-social {
    color: #fff;
    width: auto;
    margin-top: 24px;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    letter-spacing: 0.5px;
    margin-bottom: 34px;
  }
  .social-video {
    width: 366px !important;
    height: 205px !important;
  }

  .card-social {
    position: relative;
    width: auto;
    height: 400px;
    overflow: hidden;
    border-radius: 15px;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 50.32%,
      rgba(0, 0, 0, 0.77) 100%
    );
    box-shadow: 0px 4px 11px 0px rgba(0, 0, 0, 0.25);
  }

  .card-social-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    transition: all 0.3s ease;
  }

  .card-social-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 10px;
    transition: all 0.3s ease;
    background: rgba(255, 204, 41, 0.8);
    height: 120px; /* Tinggi awal untuk menampilkan judul */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
  }

  .card-social-title {
    color: black;
    font-size: 19px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 42px */
    letter-spacing: 0.5px;
    padding: 5px;
    font-family: 'Open Sans', sans-serif;
    transition: all 0.3s ease;
    z-index: 2;
  }

  .card-social-description {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0.3s ease;
    width: 90%; /* Mengatur lebar deskripsi */
    text-align: left;
    z-index: 1;
    margin-top: 30px;
  }

  .card-social-description p {
    color: black;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    letter-spacing: 0.5px;
  }

  .card-social.active .card-social-content {
    background-color: rgba(255, 204, 41, 0.8);
    height: 100%;
  }

  .card-social.active .card-social-title {
    transform: translateY(-100px);
  }

  .card-social.active .card-social-description {
    opacity: 1;
  }

  .card-social.active .card-social-img {
    transform: scale(1.1);
  }
  .social-detail-title-card {
    color: black;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 57.6px */
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 25px;
    text-align: center; /* Center the title text */
  }

  .social-detail-desc-card {
    color: #333;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 42px */
    letter-spacing: 0.5px;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    text-align: center;
  }

  .card-sustainability {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    border-radius: 15px;
    transition: all 0.3s ease;
    margin-bottom: 20px;
  }

  .card-sustainability-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    transition: all 0.3s ease;
  }

  .card-sustainability-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 10px;
    transition: all 0.3s ease;
    background: rgba(0, 11, 18, 0.2);
    height: 100px; /* Tinggi awal untuk menampilkan judul */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card-sustainability-title {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 42px */
    letter-spacing: 0.5px;
    margin-top: 34px;
    padding: 5px;
    font-family: 'Open Sans', sans-serif;
    transition: all 0.3s ease;
    z-index: 2;
  }

  .card-sustainability-description {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0.3s ease;
    width: 90%; /* Mengatur lebar deskripsi */
    text-align: left;
    z-index: 1;
  }

  .card-sustainability-description p {
    color: #fff;

    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    letter-spacing: 0.5px;
  }

  .card-sustainability.active .card-sustainability-content {
    background-color: rgba(0, 112, 192, 0.8);
    height: 100%;
  }

  .card-sustainability.active .card-sustainability-title {
    transform: translateY(-100px);
  }

  .card-sustainability.active .card-sustainability-description {
    opacity: 1;
  }

  .card-sustainability.active .card-sustainability-img {
    transform: scale(1.1);
  }

  .section-top-post {
    padding-top: 4rem;
  }
  .carousel-box-top {
    margin-top: 20px;
    max-width: 309px;
  }
  .detail-media-desc ol {
    padding-inline-start: 16px !important;
  }

  .carousel-container-top-mobile {
    padding: 0px !important;
  }
  .environment-detail-box-title {
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.5px;
    min-width: 251px;
    display: block;
    min-height: auto;
    margin-bottom: 10px;
  }
  .environment-detail-desc {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 42px */
    letter-spacing: 0.5px;
  }

  .environment-detail-title {
    color: #ffcc29;
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    margin-bottom: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 57.6px */
    letter-spacing: 0.5px;
    max-width: 400px;
    display: block;
  }
  .text-title-section {
    font-size: 30px !important;
    font-family: 'Playfair Display', serif;
    margin-bottom: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 72px */
    letter-spacing: 0.5px;
  }
  .text-desc-section {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 36px */
    letter-spacing: 0.5px;
    margin-bottom: 40px;
  }
  #vision {
    flex-direction: column;
  }
  .bg-top-media {
    top: auto;
    position: absolute;
    min-height: 100px;
  }
  .section-post {
    padding-top: 4rem;
  }
  .w-50 {
    width: 100% !important;
  }
  .text-title-top {
    min-height: auto;
    font-size: 18px !important;
  }
  .text-href {
    font-size: 14px !important;
  }
  .text-calender-top {
    font-size: 14px !important;
  }
  .carousel-top-post {
    padding-left: 0px;
    padding-right: 0px;
  }
  .carousel-image-top-post {
    height: auto;
  }

  .booklet-image {
    width: 100% !important;
    height: 281px !important;
    object-fit: cover !important;
    object-position: center;
  }

  .bg-shadow-sustain-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .container-xl2 {
    width: 100%;
    padding: 15px;
    margin-right: auto;
    margin-left: auto;
  }

  .container-xxl2 {
    width: 100%;
    padding: 15px;
    margin-right: auto;
    margin-left: auto;
  }

  /* .environment-header {
        flex-direction: column;
        align-items: center;
    } */

  .container-box {
    margin-top: 20px;
    align-items: center;
    width: 100%;
  }

  .container-box-social {
    margin-top: 20px;
    align-items: center;
    width: 100%;
  }

  .container-box-governance {
    align-items: center;
    margin-top: 20px;
    width: 100%;
  }

  .custom-btn {
    margin-top: 20px;
    color: black;
    border-color: rgba(35, 103, 47, 0.88);
  }

  .social-btn {
    margin-top: 20px;
    border-color: #ffcc29;
  }

  .img-quote {
    display: none;
    margin-top: 20px;
    margin-right: 15px;
  }

  .img-fluid {
    max-width: 100%;
    height: 353px;
    object-fit: cover;
    width: 274px;
  }

  .card {
    display: none;
  }

  .quote-text {
    margin-top: 20px;
    font-size: 18px;
    line-height: 30px;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
  }

  .author-name {
    font-size: 16px;
    margin-bottom: 0px !important;
  }

  .author-title {
    font-size: 12px;
  }

  .home-banner {
    min-height: 100vh !important;
  }

  .home-banner > div {
    margin-top: -50px;
    padding: 0px 1.9rem;
  }

  .home-quick {
    padding: 0px 1.9rem;
  }

  .home-about {
    min-height: 70vh !important;
  }

  .home-about > div {
    min-height: 70vh !important;
  }
  .home-about > div > div {
    padding: 0px 1.9rem;
  }

  .carousel-web {
    display: none !important;
  }

  .home-about-video {
    width: 100% !important;
  }

  .about-about-video {
    width: 100% !important;
  }

  .header-home {
    margin-top: -100px !important;
  }

  .home-about-descr {
    text-align: left;
    margin-bottom: 20px;
    width: 100% !important;
    font-family: 'Open Sans', sans-serif;
  }

  .home-journey-card {
    padding: 0px 1.9rem;
    font-family: 'Open Sans', sans-serif;
  }

  /* .footer-mobile {
        padding: 1rem 2.5rem;
    } */

  .footer-mobile > div {
    margin-bottom: 40px;
  }

  .footer-site-mobile {
    margin-top: 30px;
  }

  .home-banner {
    min-height: 100vh !important;
  }

  .home-banner > div {
    margin-top: -50px;
    padding: 0px 1.9rem;
  }

  .home-quick {
    padding: 0px 1.9rem;
  }

  .home-about {
    min-height: 70vh !important;
  }

  .home-about > div {
    min-height: 70vh !important;
  }

  .home-about > div > div {
    padding: 0px 1.9rem;
  }

  .carousel-mobile {
    display: block !important;
    padding: 0px 10px !important;
  }

  .carousel-web {
    display: none !important;
  }

  .home-journey-card {
    padding: 0px 1.9rem;
  }

  .footer-site-mobile {
    margin-top: 30px;
  }

  .environment-icon {
    height: 90px;
    width: 90px;
  }

  .environment-title {
    font-size: 30px;
    font-weight: bold;
    margin-left: 20px;
  }

  .social-icon {
    display: inline-flex; /* Enables flexbox */
    align-items: center; /* Vertically centers the child element */
    justify-content: center; /* Horizontally centers the child element */
    width: 40px;
    height: 40px;
    margin-right: 0;
    padding: 9px !important;
    margin-top: 5px;
    margin-right: 5px;
  }

  .social-icon i {
    width: 24px; /* Adjust based on the desired size */
    height: 24px;
  }

  .social-title {
    font-size: 30px;
    font-weight: bold;
    margin-left: 20px;
    font-family: 'Playfair Display', serif;
  }

  .title-sustain-guide {
    font-size: 30px;
  }

  .container-mobile {
    padding: 50px !important;
    width: 100% !important;
  }

  .container-mobile-title-sustainability {
    padding-left: 50px !important;
    width: 100% !important;
  }

  .about-header-mobile {
    width: 100% !important;
    line-height: 2.5rem;
  }

  .history-min-height {
    min-height: 70vh !important;
  }

  .mobile-h {
    height: 350px;
  }

  .img-mobile {
    margin-bottom: -65px;
    margin-top: 30px;
  }

  .img-mobile > img {
    object-fit: contain;
  }

  .desktop-mision {
    display: none;
  }

  .desktop-vision {
    display: none;
  }

  .mobile-vision {
    display: block;
    object-fit: cover;
    object-position: center;
    width: 100%;
  }

  .mobile-mision {
    display: block;
    object-fit: cover;
    object-position: center;
    width: 100%;
  }

  .mobile-service-image {
    height: 250px;
    object-fit: cover;
    object-position: center;
  }

  .values-mobiles-descr {
    align-items: center;
    display: flex;
    padding: 0px 29px;
    text-align: left;
  }

  #director {
    padding-bottom: 0 !important;
  }

  #portfolio {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #operational {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #chartdiv {
    height: 300px !important;
  }

  .achievment-height {
    padding: 20px 50px !important;
    min-height: 10vh !important;
  }

  .carouselExample-award {
    padding: 0px 40px !important;
  }

  .box-achieve-mobile {
    min-height: 300px !important;
  }

  .text-achieve-mobile {
    position: inherit !important;
    width: 100%;
  }

  .descr-achieve-mobile {
    width: 100% !important;
    font-size: 16px;
  }

  .bg-mobile-header {
    background-color: rgb(0 0 0 / 85%) !important;
    z-index: 9999 !important;
  }

  #navbarContent {
    padding: 25px 0px !important;
  }

  #navbarContent > ul > li {
    margin-bottom: 10px;
  }

  #navbarContent > ul > li > a {
    padding: 10px;
  }

  #carousel-achievement {
    padding: 0px 30px !important;
  }
  .mobile-popup-director {
    padding: 10px 25px !important;
  }

  .title-header {
    font-size: 0.6rem !important;
    margin-left: 4px;
    font-family: 'Playfair Display', serif;
  }

  .visi-left {
    padding: 0px !important;
  }

  .misi-right {
    padding: 0px !important;
  }
  .text-award-title {
    font-size: 14px;
  }
  .custom-values-card {
    width: 100%;
  }
  .custom-proto-card {
    width: 100%;
  }
  .custom-direction-card {
    width: 100%;
  }
  .border-porto {
    border-top: 1px solid #fff;
    margin-top: -55px;
  }

  .container-mobile-carousel {
    padding: 0px 0px 30px 0px !important;
  }

  .text-align-mobile {
    text-align: left !important;
  }

  .margin-values-mobile {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .governance-row-title {
    margin-top: 20px;
    margin-bottom: 30px;
    text-align: left;
  }

  .governance-detail-title {
    color: #ffcc29;
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 57.6px */
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 15px;
    text-align: left;
  }

  .governance-detail-desc {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    text-align: left;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.5px;
    display: block;
    max-width: 100%;
  }
  .carousel-image {
    width: 100%;
    object-fit: cover;
    max-width: 100%;
    height: 100%;
  }
  .carousel-item-content {
    text-align: left;
    max-width: 743px;
    margin: 0 auto;
    padding: 56px;
  }
  .social-detail-desc {
    color: #333;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.5px;
    margin: 0 auto;
    margin-top: 10px;
    text-align: justify;
  }
  .social-grid-title {
    color: #141414;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    margin-right: 0px;
    margin-top: 20px;
  }
  .social-grid-detail-desc {
    color: #333;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.5px;
    margin: 0 auto;
    text-align: justify;
  }
  .social-grid-img {
    width: 100%;
    margin-top: 10px;
  }
  .social-detail-title-first {
    color: #141414;
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 139%; /* 83.4px */
    letter-spacing: 0.5px;
    margin-top: 20px;
  }

  .governance-detail-title-first {
    color: white;
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 139%; /* 83.4px */
    letter-spacing: 0.5px;
    margin-top: 20px;
  }
  .environment-detail-title-first {
    color: white;
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 139%; /* 83.4px */
    letter-spacing: 0.5px;
    margin-top: 20px;
  }
  .guidelines-detail-title-first {
    color: white;
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 139%; /* 83.4px */
    letter-spacing: 0.5px;
    margin-top: 20px;
  }

  .detail-desc-management {
    padding-right: 0px !important;
  }

  .sustainability-breadcumb-back {
    color: black;
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.5px;
    border: none !important;
    margin-bottom: 20px;
    border: none;
    outline: none;
    text-decoration: none;
    transition: color 0.3s; /* Efek transisi warna saat hover */
  }

  .governance-breadcumb-back {
    color: white;
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.5px;
    border: none !important;
    margin-bottom: 20px;
    border: none;
    outline: none;
    text-decoration: none;
    transition: color 0.3s; /* Efek transisi warna saat hover */
  }

  .environment-breadcumb-back {
    color: white;
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.5px;
    border: none !important;
    margin-bottom: 20px;
    border: none;
    outline: none;
    text-decoration: none;
    transition: color 0.3s; /* Efek transisi warna saat hover */
  }

  .guidelines-breadcumb-back {
    color: white;
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.5px;
    border: none !important;
    margin-bottom: 20px;
    border: none;
    outline: none;
    text-decoration: none;
    transition: color 0.3s; /* Efek transisi warna saat hover */
  }
  .text-aboutus-subtitle {
    color: #ffcc29;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 81.2px */
    letter-spacing: 0.5px;
  }
  .text-aboutus-desc {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    letter-spacing: 0.5px;
  }
  .min-vh-contact {
    min-height: 50vh !important;
  }

  .img-dir {
    margin: 0px !important;
  }
  .carousel-title {
    color: #141414;
    font-family: 'Open Sans', sans-serif;
    font-size: 29px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 57.6px */
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    margin-top: 10px;
  }

  .carousel-description {
    color: #141414;
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    letter-spacing: 0.5px;
    text-align: left;
  }
  .section-media {
    padding-top: 0rem;
    padding-bottom: 0rem;
  }

  .card-environment {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    border-radius: 15px;
    transition: all 0.3s ease;
    margin-bottom: 20px;
  }

  .card-environment-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    transition: all 0.3s ease;
  }

  .card-environment-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 10px;
    transition: all 0.3s ease;
    background: rgba(0, 11, 18, 0.8);
    height: 100px; /* Tinggi awal untuk menampilkan judul */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card-environment-title {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 42px */
    letter-spacing: 0.5px;

    padding: 5px;
    font-family: 'Open Sans', sans-serif;
    transition: all 0.3s ease;
    z-index: 2;
  }

  .card-environment-description {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0.3s ease;
    width: 90%; /* Mengatur lebar deskripsi */
    text-align: left;
    z-index: 1;
    margin-top: 25px;
  }
  .img-about-directors{
    object-fit: cover;object-position: top; height: 100%; width: 100%;
  }
  .card-environment-description p {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    letter-spacing: 0.5px;
    margin-top: 54px;
  }

  .card-environment.active .card-environment-content {
    background-color: #226030e0;
    height: 100%;
  }

  .card-environment.active .card-environment-title {
    transform: translateY(-100px);
  }

  .card-environment.active .card-environment-description {
    opacity: 1;
  }

  .card-environment.active .card-environment-img {
    transform: scale(1.1);
  }

  .img-social-right {
    margin-top: 20px;
  }

  #modal-video.modal.fade.show {
    display: flex !important;
    align-items: center !important;
  }
}

@media (max-width: 320px) {
  .title-header {
    font-family: 'Playfair Display', serif;
    font-size: 0.48rem !important;
  }
}

@media (max-width: 768px) {
  .slider-bg-custom {
    background-position: right bottom !important;
  }
}