/* ==========================================================================
   SUB Custom Styles
   ========================================================================== */

@font-face {
  font-family: "Univers";
  src: url("../fonts/UniversLT.woff2") format("woff2"),
    url("../fonts/UniversLT.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Helvetica Neue", "Helvetica Neue", "Helvetica Neue", Helvetica,
    Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}

#sub-container {
  overflow: hidden;
}

header {
  background-color: #fff;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  padding: 14px 0;
  display: block;
  transition: all 100ms ease-in-out;
}

.logo {
  text-align: left;
  margin-top: 0;
}

.logo img {
  width: 230px;
  margin-left: 0px;
}

.logo a {
  display: inline-block;
  position: relative;
  z-index: 999;
  width: 100%;
}

#main-content {
  padding-top: 40px;
}

.main-menu {
  position: relative;
  display: block;
}

.main-menu a {
  color: #000;
  font-size: 15px;
  font-size: 18px;
  text-decoration: none;
  line-height: 0;
  letter-spacing: 0.5px;
  transform: scaleY(0.85);
  display: inline-block;
  transition: all 0.3s ease;
}

.main-menu a:hover,
.main-menu a:focus {
  color: #aaa;
  text-decoration: none;
}

.nav-r {
  text-align: right;
}

/* Tambahkan ke css/main.css - REPLACE existing caption styles */

/* FIXED: Box Image Container */
.box-img {
  position: relative;
  display: block;
  overflow: hidden;
  /* IMPORTANT: Prevent caption overflow */
  width: 100%;
  height: auto;
}

/* FIXED: Image Sizing - Konsisten antar browser */
.box-img img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  /* Changed from height: 100% */
  object-fit: cover;
  /* Ensure consistent image display */
  position: relative;
  margin-bottom: 1px;
  transition: all 0.3s ease;
  vertical-align: top;
  /* Fix baseline alignment issue */
}

/* FIXED: Caption Wrap - More robust positioning */
.caption-wrap {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* ADD: Explicit right positioning */
  bottom: 0;
  /* ADD: Explicit bottom positioning */
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.85);

  /* IMPROVED: Flexbox with fallbacks */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;

  padding: 15px;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 99;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  text-align: center;
  /* Fallback for non-flexbox browsers */

  /* IMPORTANT: Box model consistency */
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

/* FIXED: Hover state */
a.box-img:hover .caption-wrap,
.box-img:hover .caption-wrap {
  visibility: visible;
  opacity: 1;
}

/* ADDITIONAL: Caption text container for better control */
.caption-wrap .caption-text {
  display: block;
  line-height: 1.4;
  max-width: 90%;
  word-wrap: break-word;
  hyphens: auto;
}

/* FALLBACK: For older browsers without flexbox */
@supports not (display: flex) {
  .caption-wrap {
    display: table;
    table-layout: fixed;
  }

  .caption-wrap .caption-text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
}

/* RESPONSIVE: Adjust for different screen sizes */
@media (max-width: 767px) {
  .caption-wrap {
    font-size: 16px;
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .caption-wrap {
    font-size: 14px;
    padding: 8px;
  }
}

/* DEBUGGING: Uncomment to debug positioning issues */

/* .box-img {
  border: 2px solid red !important;
}

.caption-wrap {
  border: 2px solid blue !important;
  background-color: rgba(255, 0, 0, 0.3) !important;
} */

/* a.box-img:hover .caption-wrap {
  visibility: visible;
  opacity: 1;
  color: #000;
} */

.caption,
.sub-caption {
  background: #000;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  width: 100%;
  padding-left: 20px;
  line-height: 14px;
  border-right: 1px solid #fff;
}

.sub-caption {
  border-bottom: 1px solid #fff;
}

.box-img-detail img {
  width: 100%;
}

.caption:before {
  content: " ";
  background: #fff;
  height: 14px;
  display: inline-block;
  position: absolute;
  left: 0;
  border-left: 12px solid transparent;
  border-top: 14px solid #000;
}

article.content {
  text-align: justify;
  font-size: 13px;
}

article.content img {
  max-width: 100%;
}

article.content .title {
  text-transform: uppercase;
  margin-bottom: 10px;
  font-size: 15px;
}

article.content .title a {
  color: #000;
  transition: all 0.3s ease;
}

article.content .title a:hover,
article.content .title a:focus {
  color: #aaa;
  text-decoration: none;
}

article.content a {
  color: #000;
  text-decoration: none;
}

article.content a:hover,
article.content a:focus {
  text-decoration: underline;
}

.brief {
  width: 100%;
  margin: 14px 0;
}

.gutter {
  margin-bottom: 15px;
}

.gutter-lg {
  margin-bottom: 30px;
}

.maps {
  width: 100%;
  height: 400px;
  margin-bottom: 14px;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

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

.main-title {
  font-weight: 600;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

footer {
  padding: 10px 14px;
  position: fixed;
  bottom: 0;
  z-index: 999;
  width: 100%;
  background-color: #fff;
}

.social {
  position: relative;
  text-align: right;
  float: right;
}

.sc-center {
  position: relative;
  left: -50%;
}

ul.social {
  position: relative;
  margin: 0;
  padding: 0;
}

ul.social li {
  float: left;
  list-style: none;
  margin-right: 7px;
}

ul.social li:last-child {
  margin-right: 0;
}

ul.social li.icon {
  display: block;
  padding: 2px;
  border-radius: 3px;
  background-color: #000;
}

ul.social li.instagram a {
  background-color: #fff;
  -webkit-mask-image: url("../images/instagram.svg");
  mask-image: url("../images/instagram.svg");
}

ul.social li.mail a {
  background-color: #fff;
  -webkit-mask-image: url("../images/mail.svg");
  mask-image: url("../images/mail.svg");
}

ul.social li.phone a {
  background-color: #fff;
  -webkit-mask-image: url("../images/phone.svg");
  mask-image: url("../images/phone.svg");
}

ul.social li.whatsapp a {
  background-color: #000;
  background-image: url("../images/whatsapp.svg");
}

ul.social li a {
  display: block;
  position: relative;
  width: 20px;
  height: 20px;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: -9999em;
}

.social li.facebook a {
  background-position: -18px 0px;
}

ul.social li a:hover,
ul.social li a:active,
ul.social li a:focus,
ul.social li a:hover,
ul.social li a:active,
ul.social li a:focus {
  opacity: 0.7;
}

#loading {
  background-color: #fff;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 9999;
  margin-top: 0px;
  top: 0px;
  overflow: hidden;
}

#loading-center {
  width: 100%;
  position: relative;
  top: 50%;
  margin-top: -55px;
}

.logo-load {
  text-align: center;
  margin-bottom: 20px;
  margin-left: 30px;
  position: relative;
}

.logo-load img {
  height: 100px;
  width: auto;
  position: relative;
  margin-left: -40px;
}

.cssload-container {
  width: 100%;
  height: 50px;
  text-align: center;
}

.cssload-speeding-wheel {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  margin-top: -125px;
  border: 3px solid rgb(0, 0, 0);
  border-radius: 50%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: cssload-spin 875ms infinite linear;
  -o-animation: cssload-spin 875ms infinite linear;
  -ms-animation: cssload-spin 875ms infinite linear;
  -webkit-animation: cssload-spin 875ms infinite linear;
  -moz-animation: cssload-spin 875ms infinite linear;
}

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

@-o-keyframes cssload-spin {
  100% {
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-ms-keyframes cssload-spin {
  100% {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes cssload-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes cssload-spin {
  100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.people-box {
  position: relative;
  margin-bottom: 1px;
}

.people-box .people-image img {
  width: 100%;
  aspect-ratio: 2/2.5;
  object-fit: cover;
}

.people-box .people-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  background-color: rgba(255, 255, 255, 0.8);
  visibility: hidden;
  opacity: 0;
  transition: all 300ms cubic-bezier(0.17, 0.67, 1, 1.23);
}

.people-box .people-overlay .people-content {
  transform: translateY(-1rem);
  transition: all 300ms cubic-bezier(0.17, 0.67, 1, 1.23);
}

.people-name {
  font-weight: 400;
  margin-bottom: 0.5rem;
  text-align: left;
}

.people-position {
  color: #7e7e7e;
  font-size: 12px;
}

.people-box:hover .people-overlay {
  visibility: visible;
  opacity: 1;
}

.people-box:hover .people-overlay .people-content {
  transform: translateY(0);
}

.people-former {
  color: #222222;
  font-weight: 300 !important;
  padding-bottom: 1rem;
}

.people-grid {
  margin-bottom: 2rem;
}

.former-grid {
  margin-bottom: 1rem;
}

.article-box {
  padding: 1rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.article-title {
  font-size: 15px;
  font-weight: 300;
  color: #000;
  text-decoration: none;
  margin-bottom: 0.5rem;
  display: block;
  transition: all 300ms cubic-bezier(0.17, 0.67, 1, 1.23);
}

.article-title:hover,
.article-title:focus {
  color: #7e7e7e;
  text-decoration: none;
}

.article-desc {
  color: #7e7e7e;
}

.article-desc a {
  color: #7e7e7e;
  text-decoration: underline;
  transition: all 300ms cubic-bezier(0.17, 0.67, 1, 1.23);
}

.article-desc a:hover,
.article-desc a:focus {
  color: #000;
}

.article-image {
  margin-top: 1rem;
}

.article-image img {
  width: 100%;
  max-width: 100%;
}

/* =========== Loader =========== */
.ldBar {
  position: relative;
}

.ldBar-label {
  font-size: 12px;
  text-align: center;
  padding: 30px 0;
  white-space: nowrap;
  letter-spacing: 0.3rem;
  color: rgba(255, 255, 255, 0.5);
  display: none;
}

.ldBar-label:before {
  content: "Loading ";
  display: inline;
  text-transform: uppercase;
}

.ldBar-label:after {
  content: "%";
  display: inline;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1031;
  background-color: rgba(255, 255, 255, 1);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#preloader.is-hidden {
  visibility: hidden;
  opacity: 0;
  display: none;
}

.is-loading {
  overflow: hidden;
}

.an-loading *,
.an-loading *:before,
.an-loading *:after {
  animation-play-state: paused !important;
}

/* ==========================================================================
   Overide styles
   ========================================================================== */
.container-fluid {
  --bs-gutter-x: 4rem;
  --bs-gutter-y: 0;
}

.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: 40px;
  height: 40px;
  background-color: #fff;
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: 17px;
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
  color: #000;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */
@media (max-width: 991px) {
  .logo {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  header {
    padding: 5px 0;
  }

  .logo a {
    bottom: 0;
  }

  .main-menu {
    text-align: center;
    padding: 0;
  }

  .main-menu a {
    font-size: 14px;
    line-height: 18px;
  }

  .heading-title,
  article.content .title a {
    font-size: 14px;
  }

  article.content {
    font-size: 13px;
  }

  .nav-r {
    text-align: none;
  }

  #main-content {
    padding-top: 75px;
  }
}

@media (max-width: 767px) {
  .caption-wrap {
    bottom: 0;
  }

  .maps {
    height: 200px;
  }

  .main-menu a {
    font-size: 12px;
    line-height: 14px;
  }

  #headerProject.bg-transparent {
    background-color: transparent !important;
  }

  .container-fluid {
    --bs-gutter-x: 2.5rem;
    --bs-gutter-y: 0;
  }

  .box-img img {
    height: auto;
  }
}

/* Single Project Header Styles - TRANSPARENT WITHOUT BLUR */
#headerProject {
  background-color: #fff;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  padding: 14px 0;
  display: block;
  transition: background-color 300ms ease-in-out;
}

#headerProject.bg-transparent {
  background-color: transparent !important;
}

/* Ensure content starts from top when header is transparent */
.single-project #main-content-detail {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.single-project .box-img-detail {
  margin-top: 0;
  position: relative;
  z-index: 1;
}

.single-project .box-img-detail img {
  width: 100%;
  height: auto;
  display: block;
}

/* Content after hero image */
.single-project #main-content-detail .row {
  padding-top: 2rem;
}

/* Optional: Adjust logo and menu colors for better visibility on transparent header */
#headerProject.bg-transparent .logo img {
  /* Add filter if logo needs to be white on dark images */
  /* filter: brightness(0) invert(1); */
}

#headerProject.bg-transparent .main-menu a {
  /* Change text color if needed for better contrast */
  /* color: #fff; */
  /* text-shadow: 0 1px 3px rgba(0,0,0,0.3); */
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
  #headerProject.bg-transparent {
    /* Full transparent on mobile too */
    background-color: transparent !important;
  }

  .single-project .box-img-detail {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Full Width Gallery Slider */
.gallery-img {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.gallery-img .swiper-wrapper {
  height: auto;
}

.gallery-img .swiper-slide {
  height: auto;
}

.gallery-img .box-img-detail {
  margin: 0;
  width: 100%;
}

.gallery-img .box-img-detail img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

/* Remove navigation buttons */
.gallery-img .swiper-button-next,
.gallery-img .swiper-button-prev {
  display: none !important;
}

/* Optional: Style pagination dots */
.gallery-img .swiper-pagination {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  z-index: 10;
}

.gallery-img .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
  margin: 0 5px;
  transition: all 0.3s ease;
}

.gallery-img .swiper-pagination-bullet-active {
  background: rgba(255, 255, 255, 1);
  width: 30px;
  border-radius: 5px;
}

/* Ensure full width on about page */
.page-template-page-about #main-content .gallery-img,
body.page-id-[ABOUT_PAGE_ID] #main-content .gallery-img {
  margin-left: calc(-1 * var(--bs-gutter-x, 0.75rem));
  margin-right: calc(-1 * var(--bs-gutter-x, 0.75rem));
  width: calc(100% + var(--bs-gutter-x, 0.75rem) * 2);
}

/* Alternative: If using page slug */
body.page-slug-about #main-content .gallery-img {
  margin-left: calc(-1 * var(--bs-gutter-x, 0.75rem));
  margin-right: calc(-1 * var(--bs-gutter-x, 0.75rem));
  width: calc(100% + var(--bs-gutter-x, 0.75rem) * 2);
}

/* Fade effect styles */
.gallery-img.swiper-fade .swiper-slide {
  opacity: 0 !important;
  transition-property: opacity;
}

.gallery-img.swiper-fade .swiper-slide-active {
  opacity: 1 !important;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .gallery-img .swiper-pagination {
    bottom: 10px;
  }

  .gallery-img .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 3px;
  }

  .gallery-img .swiper-pagination-bullet-active {
    width: 20px;
  }
}

/* Ensure images maintain aspect ratio */
.gallery-img img {
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* Optional: Set a max-height if needed */
.gallery-img .box-img-detail {
  max-height: 80vh;
  /* Maximum 80% of viewport height */
  overflow: hidden;
}

.gallery-img .box-img-detail img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* About Page Header Styles - TRANSPARENT WITHOUT BLUR (SAME AS SINGLE PROJECT) */
#headerAbout {
  background-color: #fff;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  padding: 14px 0;
  display: block;
  transition: background-color 300ms ease-in-out;
}

#headerAbout.bg-transparent {
  background-color: transparent !important;
}

/* About Page Content Structure */
.page-template-page-about #main-content-about,
body.page-about #main-content-about {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* UPDATED: Full Width Gallery Slider for About Page */
.gallery-img-about {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
  margin-bottom: 2rem;
}

.gallery-img-about .swiper-wrapper {
  height: auto;
}

.gallery-img-about .swiper-slide {
  height: auto;
}

.gallery-img-about .box-img-detail {
  margin: 0;
  width: 100%;
  height: auto;
  /* Changed from 70vh to auto to match single project */
  max-height: none;
  /* Remove max-height restriction */
  overflow: visible;
  /* Changed from hidden to visible */
  position: relative;
}

.gallery-img-about .box-img-detail img {
  width: 100%;
  height: auto;
  /* Changed to auto to maintain aspect ratio */
  object-fit: contain;
  /* Changed from cover to maintain full image */
  display: block;
}

/* Remove navigation buttons for about page slider */
.gallery-img-about .swiper-button-next,
.gallery-img-about .swiper-button-prev {
  display: none !important;
}

/* Pagination dots styling */
.gallery-img-about .swiper-pagination {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  z-index: 10;
}

.gallery-img-about .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
  margin: 0 5px;
  transition: all 0.3s ease;
}

.gallery-img-about .swiper-pagination-bullet-active {
  background: rgba(255, 255, 255, 1);
  width: 30px;
  border-radius: 5px;
}

/* Fade effect styles for about slider */
.gallery-img-about.swiper-fade .swiper-slide {
  opacity: 0 !important;
  transition-property: opacity;
}

.gallery-img-about.swiper-fade .swiper-slide-active {
  opacity: 1 !important;
}

/* Ensure first image is visible immediately */
.gallery-img-about .box-img-detail:first-child {
  position: relative;
  z-index: 1;
}

/* Optional: Adjust logo and menu colors for better visibility on transparent header */
#headerAbout.bg-transparent .logo img {
  /* Add filter if logo needs to be white on dark images */
  /* filter: brightness(0) invert(1); */
}

#headerAbout.bg-transparent .main-menu a {
  /* Change text color if needed for better contrast */
  /* color: #fff; */
  /* text-shadow: 0 1px 3px rgba(0,0,0,0.3); */
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .gallery-img-about .box-img-detail {
    height: auto;
    max-height: none;
  }
}

@media (max-width: 767px) {
  #headerAbout.bg-transparent {
    background-color: transparent !important;
  }

  .gallery-img-about .swiper-pagination {
    bottom: 10px;
  }

  .gallery-img-about .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 3px;
  }

  .gallery-img-about .swiper-pagination-bullet-active {
    width: 20px;
  }

  .gallery-img-about .box-img-detail {
    height: auto;
    max-height: none;
  }
}

/* Fallback single image styling */
.page-template-page-about .box-img-detail:not(.swiper-slide .box-img-detail),
body.page-about .box-img-detail:not(.swiper-slide .box-img-detail) {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: auto;
  max-height: none;
  overflow: visible;
}

.page-template-page-about
  .box-img-detail:not(.swiper-slide .box-img-detail)
  img,
body.page-about .box-img-detail:not(.swiper-slide .box-img-detail) img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Project Single Title Header Styles */

.project-header-title {
  margin-bottom: 1rem;
  padding-bottom: 0rem;
  /* border-bottom: 1px solid #e0e0e0; */
}

.project-header-title h1 {
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  line-height: 1.4;
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .project-header-title h1 {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .project-header-title h1 {
    font-size: 18px;
  }

  .project-header-title {
    margin-bottom: 0.75rem;
    padding-bottom: 0rem;
  }
}

/* Optional: Animation on load */
.project-header-title {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ADDED: Project Gallery Images - maintain original aspect ratio */
.box-img-pd {
  margin-bottom: 1rem;
  width: 100%;
}

.box-img-pd img {
  width: 100%;
  height: auto;
  /* Maintain aspect ratio */
  display: block;
  object-fit: contain;
  /* Show full image without cropping */
}

/* Consistent gallery spacing untuk single project */
.single-project .box-img-pd {
  margin-bottom: 1rem !important;
  /* Sama dengan g-3 */
}

@media (min-width: 1200px) {
  .single-project .box-img-pd {
    margin-bottom: 1.5rem !important;
    /* Sama dengan g-xl-4 */
  }
}

/* ==========================================================================
   Social Media Section for About Page - Simplified without hover
   ========================================================================== */

.social-media-section {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.social-media-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.social-media-item {
  display: inline-block;
}

.social-media-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #000;
  text-decoration: none;
  padding-right: 0.5rem;
  /* padding: 0.5rem 1rem; */
  border-radius: 4px;
  font-size: 14px;
  background-color: #fff;
  transition: none;
  /* Remove transition */
}

/* Remove hover and focus effects - keep consistent appearance */
.social-media-link:hover,
.social-media-link:focus {
  color: #000;
  text-decoration: none;
  background-color: #fff;
  border-color: #e0e0e0;
}

/* Social Icons using existing theme icon style */
.social-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Instagram Icon */
.social-link-instagram .social-icon {
  background-color: #000;
  -webkit-mask-image: url("../images/instagram.svg");
  mask-image: url("../images/instagram.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* WhatsApp Icon */
.social-link-whatsapp .social-icon {
  background-color: #000;
  -webkit-mask-image: url("../images/whatsapp.svg");
  mask-image: url("../images/whatsapp.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Mail Icon */
.social-link-mail .social-icon {
  background-color: #000;
  -webkit-mask-image: url("../images/mail.svg");
  mask-image: url("../images/mail.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Phone Icon */
.social-link-phone .social-icon {
  background-color: #000;
  -webkit-mask-image: url("../images/phone.svg");
  mask-image: url("../images/phone.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Generic social icons for platforms without existing SVG files */
.social-link-facebook .social-icon,
.social-link-twitter .social-icon,
.social-link-linkedin .social-icon,
.social-link-youtube .social-icon,
.social-link-custom .social-icon {
  background-color: #000;
  border-radius: 3px;
}

/* Facebook placeholder */
.social-link-facebook .social-icon::after {
  content: "f";
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 20px;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
}

/* Twitter placeholder */
.social-link-twitter .social-icon::after {
  content: "X";
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 20px;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
}

/* LinkedIn placeholder */
.social-link-linkedin .social-icon::after {
  content: "in";
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 20px;
  color: #fff;
  font-weight: bold;
  font-size: 10px;
}

/* YouTube placeholder */
.social-link-youtube .social-icon::after {
  content: "▶";
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 20px;
  color: #fff;
  font-size: 10px;
}

/* Custom link placeholder */
.social-link-custom .social-icon::after {
  content: "🔗";
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  filter: grayscale(1);
}

/* Text in social media link */
.social-text {
  font-weight: 300;
  letter-spacing: 0.5px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .social-media-list {
    flex-direction: column;
    gap: 0.5rem;
  }

  .social-media-item {
    display: block;
    width: 100%;
  }

  .social-media-link {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }
}

/* ==========================================================================
   Team Members Grid - 5 Column Layout & Fixed Ratio 5:4
   ========================================================================== */

/* 5 Column Grid System */
.people-grid-5col {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
}

/* Custom 5 column for large screens */
@media (min-width: 992px) {
  .people-grid-5col .col-lg-custom-5 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* Responsive breakpoints for team grid */
@media (max-width: 991px) and (min-width: 768px) {
  .people-grid-5col .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

@media (max-width: 767px) and (min-width: 576px) {
  .people-grid-5col .col-sm-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

@media (max-width: 575px) {
  .people-grid-5col .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Updated People Box with Fixed Ratio 4:5 Portrait */
.people-box {
  position: relative;
  margin-bottom: 0;
  /* Remove extra margin since we use gap */
}

.people-box .people-image {
  position: relative;
  width: 100%;
  padding-bottom: 125%;
  /* 5/4 = 1.25 = 125% for 4:5 portrait ratio */
  overflow: hidden;
  background-color: #f5f5f5;
}

.people-box .people-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* Focus on top part for portraits */
}

/* Ensure overlay covers the fixed ratio container */
.people-box .people-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  background-color: rgba(255, 255, 255, 0.9);
  visibility: hidden;
  opacity: 0;
  transition: all 300ms cubic-bezier(0.17, 0.67, 1, 1.23);
  display: flex;
  align-items: center;
  justify-content: center;
}

.people-box .people-overlay .people-content {
  transform: translateY(-1rem);
  transition: all 300ms cubic-bezier(0.17, 0.67, 1, 1.23);
  text-align: center;
}

.people-name {
  font-weight: 400;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: 14px;
}

.people-position {
  color: #7e7e7e;
  font-size: 12px;
  text-align: center;
  line-height: 1.3;
}

.people-box:hover .people-overlay {
  visibility: visible;
  opacity: 1;
}

.people-box:hover .people-overlay .people-content {
  transform: translateY(0);
}

/* Ensure proper spacing matching home and archive pages */
.people-grid {
  margin-bottom: 2rem;
}

/* Former members grid remains unchanged */
.former-grid {
  margin-bottom: 1rem;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 767px) {
  .people-box .people-overlay {
    padding: 1rem;
  }

  .people-name {
    font-size: 13px;
  }

  .people-position {
    font-size: 11px;
  }
}

.main-menu {
  margin-left: -12px;
}

.menu-pertama .main-menu a {
  margin-left: 6px !important;
}

.menu-terakhir .main-menu a {
  margin-left: -5px !important;
}

/* ==========================================================================
   FIX EQUAL HEIGHT ROWS - FRONT PAGE ONLY
   Tambahkan code ini di PALING BAWAH file css/main.css
   ========================================================================== */

/* Main row flexbox - HANYA untuk front page */
body.home.blog #main-content > .row,
body.page-template-default.page #main-content > .row {
  display: flex;
  flex-wrap: wrap;
}

/* Columns stretch */
body.home.blog #main-content > .row > [class*='col-'],
body.page-template-default.page #main-content > .row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

/* Nested row flex */
body.home.blog #main-content .row .row,
body.page-template-default.page #main-content .row .row {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

/* Nested columns */
body.home.blog #main-content .row .row > [class*='col-'],
body.page-template-default.page #main-content .row .row > [class*='col-'] {
  display: flex;
}

/* Box image fill height */
body.home.blog .box-img,
body.page-template-default.page .box-img {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Image fill container */
body.home.blog .box-img img,
body.page-template-default.page .box-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Mobile normal */
@media (max-width: 991px) {
  body.home.blog .box-img img,
  body.page-template-default.page .box-img img {
    height: auto !important;
  }
}