:root{
  --bg-menu: #97fcea;
  --card-divisi-header: #00baba;
  --white: white;
  --bg-card: #040811;
  --main-cyan: #78cac2;
  --button-line: #78cac2;
  --main-white: #ededed;
  --text-body: #ffff;
}

@font-face {
  font-family: "CustomFont";
  src: url('../asset/font/Satoshi-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

body {
  margin: 0;
  font-family: "CustomFont";
  /* background: #292929; */
  background: linear-gradient(to bottom, #040811);
  display: flex;
  flex-direction: column;
  /* min-height: 100vh; */
  
}

html, body, main{
  width: 100%;
  height: 100%;
}





header {
  margin-top: 3em;
  text-align: center;
  color: white;
}

p {
  color: white;
  /* width: 100%; */
  margin: 1.5rem 0;
}

h1 {
  color: var(--main-white);
}

header h1 {
  font-size: 2em;
  font-weight: 900;
}

footer {
  margin-bottom: 3em;
  text-align: center;
  color: white;
}

footer h3 {
  font-size: 2em;
  font-weight: 900;
}
/* 
#container3D canvas {
  width: 100w !important;
  height: 100h !important;
  position: absolute;
  top: 10;
  left: 0;
} */




section{
  height: 100vh;
  background-color: var(--bg-card);
}

.container{
  padding: 5rem;
}

#container3D {
  flex: 1; /* Mengisi ruang yang tersedia */
  position: relative; /* Penting untuk posisi canvas */
}



.container-flex {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 50vh;
   /* Membuat containerabout berada di tengah vertikal */
  /* ... gaya lainnya ... */
}


.first-landing-page {
  position: relative;
  /* height: 100vh;
  width: 100vw; */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  height: 300vh;
  flex-direction: column;
  /* background-image: url(../asset/images/BG.png); */
  background-repeat: no-repeat; /* Mencegah gambar berulang */
  background-color: transparent;
  
  /* Dark background for contrast */
}

.wallpaper-mobile{
  display: none;
}

.wallpaper {
  position: fixed;
  width: 100%;
  height: 100%; /* Ensure the container covers the full height */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the container */
  background-image: url('../asset/images/toyota-lux.jpg'); /* Replace with your image path */
  background-size: cover; /* Scale the background to cover the container */
  background-position: center; /* Center the background image */
  background-repeat: no-repeat; /* Prevent image tiling */
  transition: filter 0.3s ease;
  z-index: -1;
}

.wallpaper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-card); /* Warna gelap */
  opacity: var(--darken-opacity, 0); /* Opacity dikontrol oleh variabel CSS */
  transition: opacity 0.5s ease-out; /* Transisi untuk efek gelap */
  pointer-events: none; /* Penting: agar tidak menghalangi interaksi mouse dengan elemen di bawahnya */
}

.wallpaper.blur {
  filter: blur(5px); /* Adjust blur radius as needed */
}


.containerabout{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* width: 100%;
  height: 100%; */
  margin: 0 auto;
  text-align: center;
  font-size: 6.5rem; /* Responsif */
  line-height: 1.2;
  margin-top: -1800px;
  position: relative;
  gap: 1.8rem;
}

.instagram-section {
  max-width: 1200px;
  margin: 50px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.instagram-section h2 {
  font-size: 2.5em;
  margin-bottom: 30px;
  color: #333;
}

.instagram-collage-grid {
  display: grid;
  /* Default: 3 columns, responsive down to 280px minimum width per column */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 960px; /* Max width for the grid itself */
  margin: 0 auto 30px auto;
}

.loading-message {
  grid-column: 1 / -1; /* Spans across all columns */
  text-align: center;
  padding: 20px;
  font-style: italic;
  color: #666;
}

.instagram-photo-item {
  background-color: #f8f8f8;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Maintain aspect ratio by giving height relative to width */
  padding-bottom: 100%; /* Makes the item square (1:1 aspect ratio) */
  position: relative;
}

.instagram-photo-item:hover {
  transform: translateY(-5px);
}

.instagram-photo-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the area, cropping if needed */
  display: block;
}

.view-more-button {
  display: inline-block;
  background-color: #C13584; /* Instagram gradient purple */
  color: white;
  padding: 12px 25px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
  margin-top: 20px;
}

.view-more-button:hover {
  background-color: #833AB4; /* Darker purple */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .instagram-collage-grid {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 2 columns on tablets */
  }
  .instagram-section h2 {
      font-size: 2em;
  }
}

@media (max-width: 480px) {
  .instagram-collage-grid {
      grid-template-columns: 1fr; /* Single column on mobile */
  }
  .instagram-section {
      padding: 15px;
  }
}


.containerabout h2 {
color: var(--main-white);
  font-size: inherit;
  font-weight: 700;
  font-size: 35px;
  margin-top: 20px;
  
  
}

/* Styling span dengan gradient atau warna solid */


.containerabout p{
  font-size: 30px;
  color: transparent;
}

.containerabout,
.container-changeshape {
  flex: 1; 
  /* Membuat kedua elemen mengisi ruang yang tersedia secara merata */
  /* Memastikan padding dan border disertakan dalam lebar/tinggi elemen */
}

.containerabout .lux {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  z-index: 0;
  
}

.weare{
  position: fixed;
  text-align: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 40%;
  line-height: 9rem;
  opacity: 1; /* Ensure it's initially visible */
  transition: opacity 0.5s ease-in-out; 

}

.containerabout .lux h1 {
  background: var(--main-cyan);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  font-size: 120px;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  will-change: transform, opacity;
  display: inline-block;
}
.lux-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(110%); /* Start below the viewport */
  width: 100%; /* Adjust size as needed */

  opacity: 1;
  transition: transform 2s ease-in-out, opacity 2s ease-in-out; /* Slower transition */
  pointer-events: none; /* Prevent interaction with image */
  z-index: -999;
}

.lux-image.visible {
  transform: translate(-50%, -50%) translateY(0); /* Slide to center */
  opacity: 1;
}


/* Jika Anda ingin container-changeshape mengisi seluruh ruangnya: */
.container-changeshape spline-viewer {
  width: 50%;
  height: 50%;
  display: block;
   /* Penting untuk memastikan spline-viewer mengisi ruang */
}

/* 
-------------- */



/* ----------------------------- */

.overlay {
  position: fixed; /* Penting agar overlay menutupi seluruh layar */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Contoh: latar belakang gelap */
  display: flex; /* Untuk memusatkan konten loading */
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Pastikan di atas semua elemen lain */
  opacity: 1; /* Awalnya terlihat */
  visibility: visible; /* Awalnya terlihat */
  transition: opacity 1s ease-out, visibility 1s ease-out; /* Transisi untuk fade out */
}

.overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* Penting agar tidak bisa diklik setelah tersembunyi */
}

/* Tambahkan juga gaya untuk konten di dalam overlay Anda, misalnya: */
.bar-wrapper {
  /* Gaya untuk konten loading Anda */
  /* background-color: #fff; */
  background-image: url("../asset/images/logo-lux-aeternam.png");
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}


.bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../asset/images/BG-Footer.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex; /* Menggunakan flexbox untuk tata letak */
  justify-content: space-between; /* Membuat elemen di kiri dan kanan */
  align-items: center; /* Posisi vertikal di tengah */
  padding: 0 20px; /* Memberikan jarak dari tepi kiri dan kanan */
}

.loading-content-wrapper {
  position: absolute;
  top: 50%; /* Changed to 50% for vertical centering */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  width: 100%;
  height: auto;

  /* --- Flexbox for Centering and Gap --- */
  display: flex;             /* Enable Flexbox */
  flex-direction: column;    /* Stack items vertically */
  align-items: center;       /* Center items horizontally within the wrapper */
  justify-content: center;   /* Center content vertically if wrapper has defined height,
                                  but primarily aligns flex items if column direction */
  gap: 25vh;                 /* Creates a 50vh gap between flex items */
}

.tulisan-loading {
  font-size: 2vw;
  opacity: 1;
  transition: opacity 0.5s ease-out;
  line-height: 0.5;
  
  /* Removed text-align: center; as flexbox handles centering */
  /* Removed margin-bottom; gap handles spacing now */
}

.tulisan-loading p {
  color: var(--main-cyan);
}

.counter {
  z-index: 10000;
  /* padding-right: 1em; */
  font-size: 2vw;
  opacity: 1;
  transition: opacity 0.5s ease-out;
  color: var(--main-cyan);
  background: linear-gradient(to right, var(--main-cyan) 70%, black 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Removed text-align: center; as flexbox handles centering */
}

.gambar-loading {
  width: 100vw; /* Lebar penuh sesuai viewport */
  height: 100vh; /* Tinggi penuh sesuai viewport */
  position: fixed; /* Mengikat ke viewport, bukan elemen induk */
  top: 0; /* Mulai dari tepi atas */
  left: 0; /* Mulai dari tepi kiri */
  object-fit: cover; /* Video mengisi area tanpa distorsi, memotong jika perlu */
}

.counter.hidden {
  opacity: 0; /* Untuk efek fade out */
}

.loading-bar {
  position: fixed;
  bottom: 10px; /* Posisi di bagian bawah layar */
  left: 0;
  width: 90%; /* Mulai dari 0% lebar */
  height: 1px; /* Tinggi 1px */
  background-color: var(--main-cyan); /* Warna loading bar */
  transition: width 0.2s ease-out; /* Animasi lebar */
  z-index: 10001; /* Pastikan di atas elemen lain */
  margin-bottom: 10px;
  margin-left: 10px;
}
/* ----------------------------------------- */
.divisi{
  flex: 1;
  margin: 0 auto;
  margin-right: 130px;
}

.bagian-divisi{
height: 300vh;
background-color: var(--bg-card);
}

.judul-card-divisi{
  width: 100%;
  margin: 0 auto;
  display: flex;
  /* flex-direction: column; */
  position: sticky;
  top: 10%;
  /* right: 400px;
  height: 200px; */
  
  /* border: 2px solid #fff; */
  /* background-color: var(--card-divisi-header); */

  padding: 40px;
  padding-top: 80px;
  padding-bottom: 60px;
  align-items: flex-start;
  /* border-top: 1px dashed grey; */
  /* margin-bottom: -40px; */
  will-change: transform; 
  background-color: var(--bg-card);
    overflow: hidden;
    
}


.card-divisi{
  width: 100%;
  margin: 0 auto;
  display: flex;
  /* flex-direction: column; */
  position: sticky;
  top: 10%;
  /* right: 400px;
  height: 200px; */
  overflow: hidden;
  /* border: 2px solid #fff; */
  /* background-color: var(--card-divisi-header); */
  background-color: var(--bg-card);
  padding: 40px;
  align-items: flex-start;
  border-top: 2px solid #58C4B1; /* Solid line with specified color */
  border-bottom-color: none!important;
  /* box-shadow: 0 0 10px #58C4B1;  */
  /* Basic glow effect */
  margin-bottom: -40px;
  border-radius: 20px;
  will-change: transform;
  border-bottom: none !important; 
}



/* Optional: More pronounced glow with spread and multiple shadows */
.card-divisi.glowing-border {
  box-shadow: 0 0 5px #58C4B1, 0 0 0px #58C4B1, 0 0 0px #58C4B1, 0 0 0px #58C4B1;
  box-shadow: red;
}


.card-divisi.animated-glow {
  animation: glow-border 2s infinite alternate;
}

.divisi-image {/* Sesuaikan lebar gambar */
  width: 300px;
  height: 400px;
  margin-left: 20px; /* Memberikan ruang antara teks dan gambar */
  margin-bottom: 0;
  border-radius: 20px;
  border-top: 2px solid #58C4B1;
  
}

.divisi-image.glowing-border {
  box-shadow: 0 0 5px #58C4B1, 0 0 5px #58C4B1;
}

.divisi-image.animated-glow {
  animation: glow-border 2s infinite alternate;
}

/* Optional: Animated glow */
@keyframes glow-border {
  0% { box-shadow: 0 0 9px #58C4B1; }
  50% { box-shadow: 0 0 10px #58C4B1; }
  100% { box-shadow: 0 0 9px #58C4B1; }
}

.card-divisi .judul-divisi{
  width: 100%;
  height: 100%;
  display: flex;
  
  font-size: 45px;
  color: var(--main-white);

}


.judul-card-divisi .judul-divisi-main{
  width: 100%;
  height: 100%;
  display: flex;
  
  font-size: 45px;
  color: var(--main-white);
}

.card-divisi:nth-child(2){
  transform: translateY(20%) translateX(0%);
}
.card-divisi:nth-child(3){
  transform: translateY(40%) translateX(0%);
}
.card-divisi:nth-child(4){
  transform: translateY(60%) translateX(0%);
}
.card-divisi:nth-child(5){
  transform: translateY(80%) translateX(0%);
}
.card-divisi:nth-child(6){
  transform: translateY(100%) translateX(0%);
}
/* ----------------------------- */






.kosong {
  width: 400px;
  height: 155px;
  position: relative; /* Penting agar position: absolute berfungsi relatif terhadap div ini */
}

.kosong p {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0; /* Menghilangkan margin bawaan */
  padding-left: 100px;
  color: var(--bg-menu);
}

.nomor-divisi {
  width: 200px;
  height: 155px;
  padding-left: 100px;
/* Penting agar position: absolute berfungsi relatif terhadap div ini */
}





.divisi-button{
  border-radius: 5px;
  width: 180px;
  height: 30px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.3s linear;
  background: none;
  border: 0.5px solid var(--button-line);
  position: relative;
  color: white;
  overflow: hidden;
}

.divisi-button:hover{
  color: black;
  box-shadow: 0 0 10px var(--button-line); /* Menambahkan glow effect */
  border-color: var(--button-line); /* Opsional: Mempertegas border saat hover */
}

.divisi-button::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #78cac2;
  z-index: -1;
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
}

.divisi-button:hover::before{
  opacity: 1;
}

.divisi-button ion-icon {
  margin-left: 5px;
  font-size: 1.5em;
}

.button-book-text {
  font-size: 20px;
}

.divisi-button-book{
  border-radius: 8px;
  width: 180px;
  /* height: 30px; */
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.3s linear;
  background: none;
  border: 0.5px solid var(--button-line);
  position: relative;
  color: white;
  overflow: hidden;
  padding: 12px;
}

.divisi-button-book:hover{
  color: black;
  box-shadow: 0 0 10px var(--button-line); /* Menambahkan glow effect */
  border-color: var(--button-line); /* Opsional: Mempertegas border saat hover */
}

.divisi-button-book::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--main-cyan);
  z-index: 0;
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
}

.divisi-button-book:hover::before{
  opacity: 1;
}

.divisi-button-book ion-icon {
  margin-left: 5px;
  font-size: 1.5em;
}

.button-book-text{
  z-index: 2;
}

/* ---------------------------- */
.divisi-button-service{
  border-radius: 5px;
  width: 220px;
  height: 35px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.3s linear;
  background: none;
  border: 0.5px solid var(--button-line);
  position: relative;
  color: white;
  overflow: hidden;
  margin-top: 20px;
}

.divisi-button-service:hover{
  color: black;
  box-shadow: 0 0 10px var(--button-line); /* Menambahkan glow effect */
  border-color: var(--button-line); /* Opsional: Mempertegas border saat hover */
  background-color: #51f5d7;
}

.divisi-button-service::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #51f5d7;
  z-index: -1;
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
}

.divisi-button-service:hover::before{
  opacity: 1;
}

.divisi-button-service ion-icon {
  margin-left: 5px;
  font-size: 1.5em;
}

/* .button-divisi-text{
 font-size: 14px;
} */
/* ------------- */




.who-we-are{
  display: contain;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 750px;
  z-index: 2;
}

.who-we-are-div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-image: url(../asset/images/create-eternal-moment-photo.JPG);
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; /* Added for better image alignment */
  text-align: center;
  border-radius: 80px;
  position: relative; /* Required for ::before positioning */
  overflow: hidden; /* Ensures border-radius applies to ::before */
}

.who-we-are-div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay (adjust opacity as needed) */
  z-index: 1; /* Places overlay behind content but over background */
}

.who-we-are-div > * {
  position: relative; /* Ensures content stays above the ::before overlay */
  z-index: 2; /* Higher than ::before */
}



.who-we-are-div .text .p1 {
  /* Hapus display: inline-block agar span berada di barisnya */
  margin: 0;
  padding: 40px;
  font-size: 48px;
  font-weight: 800;
  text-align: center;
  justify-content: start;
  align-items: start;
  line-height: 1.3;
}

.who-we-are-div .text .p1 .line {
  display: block; /* Membuat setiap span menjadi satu baris */
  background: linear-gradient(
    to right,
    rgb(255, 255, 255) 50%,
    rgb(71, 70, 70) 50%
  );
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  margin-bottom: 5px; /* Optional: Atur jarak antar baris */
}

.make-eternal{
  font-size: 75px;
  font-weight: 700;
  margin-top: -100px;
}

.make-eternal span{
  color: var(--main-cyan);
}


/* --------------------------------------- */

.section-article {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  /* If you also want to center the content horizontally */
  align-items: center;
  justify-content: center; /* If you want to center the column vertically */
  height: 80vh; /* Example for vertical centering */
}

.judul-swiper{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  color: white;
  margin-top: 20px;
}

.section-swiper{
  display: flex;
  justify-content: center;
  align-items: center;
  /* min-height: 100vh; */
  overflow: hidden;
}

.section-swiper::before,
.section-swiper::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

.section-swiper .swiper {
  width: 100%; /* Perlebar kontainer Swiper agar memenuhi layar */
  padding: 50px 20px; /* Kurangi padding horizontal untuk ruang lebih */
}

.section-swiper {
  overflow: visible !important;
}

.swiper {
  overflow-y: visible !important;
  overflow-x: hidden !important;
}

.swiper-slide {
  position: relative;
  width: 40vw; /* Gunakan viewport width untuk ukuran dinamis */
  max-width: 800px; 
  /* Batasi lebar maksimum untuk layar besar */
  height: 60vh; /* Tinggi dinamis berdasarkan viewport */
  border-radius: 14px;
  border: 1px solid rgba(177, 177, 177, 0.4);
  margin-right: 0; /* Hapus margin-right karena spaceBetween di Swiper sudah cukup */
}


.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%; /* Pastikan gambar memenuhi slide */
  object-fit: contain;
  border-radius: inherit;
  cursor: pointer; /* Indicate clickability */
}

.title{
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translate(-50%, -20%);
  -ms-transform: translate(-50%, -20%);
  width: max-content;
  text-align: center;
  padding: 10px 18px;
  background: rgba(46, 39, 39, 0.3);
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255);
  box-shadow: 0 4px 30px rgba(0,0,0,0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.5s linear;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--main-cyan);
}

.swiper-slide-active .title{
  box-shadow: 0 10px 30px 2px rgba(25,43,206,0.6);
}

.swiper-pagination{
  --swiper-pagination-bottom: -6px;
}

.swiper-pagination-bullet {
  width: 14px;
  height: 14px;
  background-color: #fff;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

.swiper-pagination  .swiper-pagination-bullet-active{
  width: 20px;
  background-color: rgba(25,43,206,1);
  border-radius: 14px;
}

/* 
----------------- */

.gradient-container {
  border-radius: 50%;
  filter: blur(100px);
  position: absolute;
  width: 20vh;
  height: 20vh;
  transition: transform 0.5s ease, width 0.5s ease, height 0.5s ease;
}

#gradient1 {
  top: 0vh;
  left: 0vh;
  background: linear-gradient(to right, #58c4b1, #040811);
  animation: moveWater1 5s ease-in-out infinite;
}

#gradient3 {
  top: 8vh;
  left: 5vh;
  background: linear-gradient(to right, #58c4b1, #040811);
  animation: moveWater2 7.5s ease-in-out infinite;
}

#gradient4 {
  top: 0vh;
  left: 10vh;
  background: linear-gradient(to right, #58c4b1, #040811);
  animation: moveWater3 6.25s ease-in-out infinite;
}

@keyframes moveWater1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  25% {
    transform: translate(10px, 20px) scale(1.03);
  }

  50% {
    transform: translate(-15px, 5px) scale(0.97);
  }

  75% {
    transform: translate(5px, -10px) scale(1.01);
  }
}

@keyframes moveWater2 {
  0%,
  100% {
    transform: translate(5vh, 10vh) scale(1);
  }

  20% {
    transform: translate(15vh, 0vh) scale(0.99);
  }

  40% {
    transform: translate(10vh, 10vh) scale(1.02);
  }

  60% {
    transform: translate(-5vh, 15vh) scale(0.98);
  }

  80% {
    transform: translate(0vh, 5vh) scale(1.005);
  }
}

@keyframes moveWater3 {
  0%,
  100% {
    transform: translate(10vh, 0vh) scale(1);
  }

  30% {
    transform: translate(15vh, 5vh) scale(1.02);
  }

  50% {
    transform: translate(10vh, -5vh) scale(0.98);
  }

  70% {
    transform: translate(18vh, 2vh) scale(1.01);
  }
}

#gradient2 {
  bottom: 0vh;
  right: 0vh;
  background: linear-gradient(to left, #58c4b1, #040811);
  animation: moveWater1 5s ease-in-out infinite;
}

#gradient5 {
  bottom: 25vh;
  right: 0vh;
  background: linear-gradient(to left, #58c4b1, #040811);
  animation: moveWater2 7.5s ease-in-out infinite;
}

#gradient6 {
  bottom: 0vh;
  right: 35vh;
  background: linear-gradient(to left, #58c4b1, #040811);
  animation: moveWater3 6.25s ease-in-out infinite;
}

@keyframes moveWater4 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  25% {
    transform: translate(-10px, -20px) scale(1.03);
  }

  50% {
    transform: translate(15px, -5px) scale(0.97);
  }

  75% {
    transform: translate(-5px, 10px) scale(1.01);
  }
}

@keyframes moveWater5 {
  0%,
  100% {
    transform: translate(5vh, 10vh) scale(1);
  }

  20% {
    transform: translate(0vh, 0vh) scale(0.99);
  }

  40% {
    transform: translate(5vh, 5vh) scale(1.02);
  }

  60% {
    transform: translate(10vh, 15vh) scale(0.98);
  }

  80% {
    transform: translate(15vh, 10vh) scale(1.005);
  }
}

@keyframes moveWater6 {
  0%,
  100% {
    transform: translate(10vh, 0vh) scale(1);
  }

  30% {
    transform: translate(5vh, 5vh) scale(1.02);
  }

  50% {
    transform: translate(10vh, 10vh) scale(0.98);
  }

  70% {
    transform: translate(2vh, 2vh) scale(1.01);
  }
}
.sticky-parent {
  height: 200vh;
  position: relative;
  justify-content: center; /* Memusatkan secara horizontal */
  align-items: center;
  top: -100vh;
  margin-bottom: -100vh;
}

.sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 10;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.judul-divisia {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  color: var(--main-white);
  margin: 20px 0;
  text-align: center;
  width: 100%;
  transition: opacity 5s ease-out;
}

.judul-divisia-mobile {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  color: var(--main-white);
  margin: 20px 0;
  text-align: center;
  width: 100%;
  transition: opacity 5s ease-out;
}

.judul-divisia span,
.judul-divisia-mobile span {
  color: var(--main-cyan);
}




.scroll_section {
  display: flex;
  align-items: center;
  gap: 3vw;
}

/* In your CSS, modify the .scroll_section img rule */
.scroll_section img {
  width: 500px; /* Or any fixed width you prefer */
  height: 620px; /* Or any fixed height to create your desired aspect ratio */
  object-fit: cover; /* This will crop the image to fit the dimensions */
  object-position: center; /* Centers the image within the frame */
  border-radius: 10px;
  border: 1px solid var(--menu-line);
}

/* .tagline-container {
  position: absolute;
  height: 60vh;
  width: 100%;
  overflow-y: hidden; 
  z-index: 11;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px; 
}

.tagline {
  position: absolute;
  height: 10vh;
  width: 100%;
  overflow-y: auto; 
  z-index: 11; 
  box-sizing: border-box;
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  transition: transform 0.3s ease-out;
} */
/* 
--------------------------------------------- */

.bintang-bawah {
  position: relative;
  width: 100%;
  height: 30vh; /* Set height to 30vh */
  overflow: hidden;
  background: transparent; /* Ensure background is transparent */
}

/* Sparkle particle styling for bintang-bawah */
.bintang-bawah::before,
.bintang-bawah::after,
.bintang-bawah .sparkle {
  content: '';
  position: absolute;
  background: #ffffff; /* White sparkles */
  border-radius: 50%; /* Circular sparkles */
  box-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff; /* Glow effect */
  animation: sparkle-down 3s linear infinite; /* Animation for floating downward */
}

/* Multiple sparkles with different sizes and positions for bintang-bawah */
.bintang-bawah::before {
  width: 6px;
  height: 6px;
  left: 20%;
  animation-delay: 0s;
}

.bintang-bawah::after {
  width: 4px;
  height: 4px;
  left: 50%;
  animation-delay: 1s;
}

.bintang-bawah .sparkle:nth-child(1) {
  width: 5px;
  height: 5px;
  left: 30%;
  animation-delay: 0.5s;
}

.bintang-bawah .sparkle:nth-child(2) {
  width: 3px;
  height: 3px;
  left: 70%;
  animation-delay: 1.5s;
}

.bintang-bawah .sparkle:nth-child(3) {
  width: 7px;
  height: 7px;
  left: 90%;
  animation-delay: 2s;
}

/* Downward sparkle animation */
@keyframes sparkle-down {
  0% {
    transform: translateY(-50%) translateX(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(15vh) translateX(calc(sin(1) * 20px)) scale(0.75); /* Subtle horizontal drift */
    opacity: 0.7;
  }
  100% {
    transform: translateY(30vh) translateX(0) scale(0.5); /* Move downward by 30vh */
    opacity: 0; /* Fade out */
  }
}

@media (min-width: 1024px) {
  .bagian-divisi-mobile{
    display: none;
  }
  

  
  .lux-image-mobile{
    display: none;
  }
  
  .judul-card-divisi-mobile{
    display: none;
  }
  
  .judul-divisia-mobile{
    display: none;
  }
  
  .p1-mobile{
    display: none;
  }


}

@media (max-width: 1025px) { /* Targeting larger desktops */
  .who-we-are-div .text .p1 {
    font-size: 30px;
}

.scroll_section img {
  width: 400px;
  height: 520px;
}



.make-eternal{
  font-size: 65px;
}

/* .bagian-divisi-mobile{
  display: none;
} */



.lux-image-mobile{
  display: none;
}

.judul-card-divisi-mobile{
  display: none;
}

/* .judul-divisia-mobile{
  display: none;
} */

/* .p1-mobile{
  display: none;
} */

.card-divisi .judul-divisi{
  font-size: 35px;

}


.judul-card-divisi .judul-divisi-main {
  font-size: 35px;
}

.divisi{
  margin-right: 0;
}

.divisi-image {
  width: 100%; /* Full width */
  height: auto; /* Maintain aspect ratio */
  aspect-ratio: 16 / 9; /* Enforce landscape aspect ratio (e.g., 16:9) */
  object-fit: cover; /* Ensure the image covers the area, cropping if necessary */
  margin-left: 0px;
  border-radius: 20px;
  margin-top: 30px;
  border-top: 2px solid #58c4b1;
}



}
/* 
.lux-image-mobile{
  display: none;
} */