/* ======================================================= */
/* GLIGHTBOX CUSTOM */
/* ======================================================= */

  /* custom box title + caption */
  .gslide-caption {
      background: transparent !important;
  }
  
  .gcaption-inner,
  .gslide-description,
  .gslide-caption-content {
      background: transparent !important;
      background-color: transparent !important;
      box-shadow: none !important;
      padding: 0 !important;
  }

  .gslide-title {
      color: #ffffff !important;
      text-align: center !important;
      font-size: 1.2rem !important;
      font-weight: 700 !important;
      margin: 0 auto !important;
      padding: 10px 0 !important;
      display: block !important;
  }
  
  .gslide-caption.gslide-caption-bottom {
      max-width: 100% !important;
      width: 100% !important;
      padding: 10px 0 !important; 
      text-align: center !important;
  }

/* ======================================================= */
/* END OF GLIGHTBOX CUSTOM */
/* ======================================================= */

/* ======================================================= */
/* APPLICATION CSS */
/* ======================================================= */

@media (min-width: 992px) {
    .applications-menu {
        padding-right: 2rem !important; /* Dorong gambar kanan agar renggang */
    }
}

/* 2. FIX MOBILE: Kembalikan padding seimbang kanan-kiri agar RATA TENGAH */
@media (max-width: 991px) {
    .applications-menu {
        /* Gunakan padding standar Bootstrap di kedua sisi agar simetris */
        padding-left: calc(var(--bs-gutter-x) * .5) !important;
        padding-right: calc(var(--bs-gutter-x) * .5) !important;
        
        margin-bottom: 35px; /* Jarak aman sebelum masuk ke grid gambar bawah */
    }
}

.sidebar-link {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-link li {
    padding: 0 !important; 
    margin: 0;
}

.sidebar-link li a {
    display: block; 
    width: 100%;
    padding: 10px 15px; 
    color: #495057; 
    text-decoration: none;
    transition: all 0.15s ease-in-out;
    border: 1px solid silver;
    margin: 4px 0px;
}

.sidebar-link li a:hover,
.sidebar-link li.active a,
.sidebar-link li a.active {
    background-color: #383C95 !important; /* Blok warna biru */
    color: #ffffff !important; 
}

/* Box Utama */
.gallery-card {
    position: relative !important;
    width: 100% !important;
    padding-top: 75% !important; /* KUNCI: Rasio 16:9 pas dengan bentuk landscape foto Anda */
    height: 0 !important;
    border-radius: 12px !important; /* Membuat sudut box melengkung */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; /* Efek shadow lembut */
    overflow: hidden !important;     /* Memotong gambar agar mengikuti lekukan rounded */
    display: block !important;
}

/* Link di dalam Box */
.gallery-card a {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.gallery-card a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Menggunakan warna hitam dengan transparansi awal 0 (tidak kelihatan) */
    background-color: rgba(0, 0, 0, 0.4); 
    
    /* Transisi memudar yang halus */
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity;
    
    /* Memastikan layer berada di atas gambar */
    z-index: 1; 
}

.gallery-card:hover a::after {
    opacity: 1; /* Menjadi aktif saat di-hover */
}

/* Gambar Full tanpa ruang putih */
.gallery-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;    /* Gambar full memenuhi box & tidak gepeng */
    object-position: center !important; /* Gambar tetap fokus di tengah */

    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* KUNCI SMOOTH 2: Beri tahu browser untuk mempersiapkan akselerasi hardware (GPU) */
    will-change: transform;
}

.gallery-card:hover img {
    /* Mengubah skala gambar menjadi 1.1x lebih besar (110%) */
    transform: scale(1.08); 
}

/* ======================================================= */
/* END OF PRODUCTS & APPLICATION CSS */
/* ======================================================= */

.img-wrap{
    position: relative;
}

.img-wrap img{
    max-width: 100%;
    z-index: 1
}

.img-wrap .caption{
    display: block;
    position: absolute;
    left: 0;
    z-index: 2;
    margin: 0;
    bottom: 0px; /*if using padding in the caption, match here */
    padding: 15px 0;
    text-indent: 5px;
    color: #fff;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
}

@media (min-width: 768px) {
    .header-top-about {
        padding-top: 160px;
        padding-bottom: 60px;
    }
}

@media (max-width: 767px) {
    .header-top-about {
        padding-top: 35px;
        padding-bottom: 20px;
    }
    
    .header-top-about img{
        border-radius: 0px;
    }
}

@media (max-width: 767px) {
    .header-top-applications {
        padding-top: 40px;
        padding-bottom: 60px;
    }

    .header-top-applications .applications-menu {
      margin-top: 55px;
      margin-bottom: 0px;
    }
}

@media (min-width: 767px) {
    .header-top-applications {
        padding-top: 145px;
        padding-bottom: 65px;
    }
    
    .header-top-applications .applications-menu {
      margin-top: 65px;
      margin-bottom: 5px;
    }
}

@media (min-width: 992px) {
    .header-top-applications {
        padding-top: 160px;
        padding-bottom: 90px;
    }

    .header-top-applications .applications-menu {
      margin-top: 30px;
      margin-bottom: 0px;
    }
}

@media (min-width: 768px) {
    .header-top-contact {
        padding-top: 200px;
        padding-bottom: 75px;
    }
}

@media (max-width: 767px) {
    .header-top-contact {
        padding-top: 75px;
        padding-bottom: 65px;
    }
}

@media (min-width: 768px) {
    .gmaps {
        padding-bottom: 90px;
    }
}

@media (max-width: 767px) {
    .gmaps {
        padding-bottom: 70px;
    }
}

.img-equal {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center;
}

.swipe-slide-content {
  top: 55%;
  left: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 1200px;
  margin: 0 auto;
}

@media (max-width: 1500px) {
  .swipe-slide-content {
    width: 1020px;
  }
}

@media (max-width: 1199px) {
  .swipe-slide-content {
    width: 800px;
  }
}

@media (max-width: 991px) {
  .swipe-slide-content {
    width: 100%;
    padding: 0 20px;
  }
}

@media (max-width: 575px) {
  .swipe-slide-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.swipe-slide-content .title {
  font-size: 80px;
  font-weight: 900;
  margin-bottom: 15px;
  color: #FFF;
  text-transform: uppercase;
}

@media (max-width: 1199px) {
  .swipe-slide-content .title {
    font-size: 60px;
  }
}

@media (max-width: 767px) {
  .swipe-slide-content .title {
    font-size: 40px;
  }
}

@media (max-width: 575px) {
  .swipe-slide-content .title {
    font-size: 30px;
  }
}

.swipe-slide-content .title.title-space {
  letter-spacing: 8px;
}

.swipe-slide-content .sub-title {
  font-size: 18px;
  max-width: 600px;
  margin: 0 auto;
  color: #FFF;
  line-height: 1.5;
  margin-bottom: 40px;
}

@media (max-width: 1199px) {
  .swipe-slide-content .sub-title {
    max-width: 500px;
  }
}

@media (max-width: 991px) {
  .swipe-slide-content .sub-title {
    max-width: 450px;
    margin-bottom: 20px;
    line-height: 1.3;
  }
}

@media (max-width: 767px) {
  .swipe-slide-content .sub-title {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .swipe-slide-content .btn {
    padding: 15px 25px;
  }
}

@media (max-width: 575px) {
  .swipe-slide-content .btn {
    font-size: 12px;
    padding: 12px 20px;
  }
}

/*-- Slider Animation --*/
.swipe-slide-content > * {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeOutUp;
          animation-name: fadeOutUp;
}

.swiper-slide-active .swipe-slide-content > :nth-child(1) {
  -webkit-animation-delay: .5s;
          animation-delay: .5s;
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}

.swiper-slide-active .swipe-slide-content > :nth-child(2) {
  -webkit-animation-delay: .9s;
          animation-delay: .9s;
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}

.swiper-slide-active .swipe-slide-content > :nth-child(3) {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}

.swiper-slide-active .swipe-slide-content > :nth-child(4) {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}