:root{
  --bg-menu: #97fcea;
  --card-divisi-header: #00baba;
  --white: white;
  --bg-card: #040811;
  --main-cyan: #58C4B1;
  --button-line: #7df5df;
  --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: rgb(60, 184, 222);
} */

h1 {
  color: rgb(255, 255, 255);
}

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;
}

.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: 100vh;
   /* Membuat containerabout berada di tengah vertikal */
  /* ... gaya lainnya ... */
}

.containerabout {
  padding: 5rem; /* Menambahkan padding agar konten tidak terlalu rapat ke tepi */
  width: 140%;
  margin-top: 8rem;
}

.containerabout p{
  font-size: 25px;
}

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



/* 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 */
}



.sticky_parent{
  height: 500vh;
}

.sticky{
  overflow: hidden;
  position: sticky;
  top: 0;
  height: 100vh;
  /* border: 1px solid red; */
}

.scroll_section{
  position: absolute;
  top: 0;
  height: 100vh;
  width: 500vw;
  will-change: transform;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5vw;
}

img{
  width: auto;
  /* height: 80%; */
  object-fit: cover;
  object-position: center;
}

.scramble-text{
  color: white;
}

.scramble-text.cyan {
  color: cyan;
}

.arrow{
  border: solid #fff;
  border-width: 0 0.1em 0.1em 0;
  display: inline-block;
  padding: 0.2em;
  transform: rotate(-45deg);
}

.btn:hover .arrow{
  transform: rotate(-45deg) translate(0.3em, 0.3em);
  border-color: #00FFFF;
}

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


.gambar-parallax{
  max-height: 80vh;
  /* Mencegah scrollbar jika gambar lebih besar */
  overflow: hidden;
  /* Untuk konteks positioning elemen di dalamnya */
  position: relative;
  display: flex; /* Untuk menumpuk gambar dan wording */
  justify-content: center; /* Memusatkan wording secara horizontal */
  align-items: center; /* Memusatkan wording secara vertikal */
}

.image-who-we-are{
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  object-fit: cover;
  /* Membuat gambar tetap di viewport saat konten lain digulir */
  position: fixed;
  top: 0;
  left: 0;
  /* Meletakkan gambar di belakang konten lain */
  z-index: -1;
}



.wording{
    display: flex; /* Menggunakan flexbox */
    flex-direction: column; /* Mengatur arah flexbox menjadi kolom */
    justify-content: center; /* Memusatkan konten secara vertikal */
    align-items: center; /* Memusatkan konten secara horizontal */
    z-index: 1;
}

.awalan{
  justify-content: start;
  text-align: left;
  align-items: start;
  margin-left: 175px;
  /* margin-bottom: -30px; */
  margin-top: 50px;
}

.isicopywriting-awal{
  
   /* Mengatur jarak antar elemen anak */
}
/* 
.wording h1{
  font-size: 130px;

}

.wording h1 span{
  font-size: 160px;
} */

.wording h1 span:last-child {
  margin-left: 20px; /* Space to the left of "IPSUM" */
  color: var(--main-cyan);
  display: inline-block; /* Ensure transform works correctly */
  transition: transform 0.1s ease-out, opacity 0.1s ease-out; /* Smooth transition */
  opacity: 0; /* Start invisible */
  transform: translateX(100%); /* Start off-screen to the right */
}

/* Class to make IPSUM visible when in view */
.visible {
  opacity: 1;
  transform: translateX(0); /* Move to original position */
}

.wording p{
  padding: 20px;
  padding-left: 60px;
}

.isicopywriting-awal{
  font-size: 100px;
  text-align: center;
}
.isicopywriting-awal1{
  font-size: 100px;
  text-align: center;
}

.isicopywriting-awal2{
  font-size: 100px;
  text-align: center;

}

.copywriting-awal {
  height: 70vh;
  width: 100%;
  background-color: #040811;
  display: flex; /* Menggunakan flexbox */
    flex-direction: column;
  
}



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

.visi-misi{
  height: 85vh;
  /* z-index: 1; */
  background-color: #040811;
  justify-content: center;
  align-items: center;
  
}

.copywriting-visi-misi{
  justify-content: center; /* Memusatkan konten secara vertikal */
    align-items: center;
    padding: 150px;
    padding-top: 0;
    padding-bottom: 100px;
    font-size: 25px;
    width: 100%;
    text-align: center;
}

.copywriting-visi-misi span{
  color: var(--main-cyan);
}



.visi-misi-detail {
  display: flex;
  width: 100%;

  align-items: flex-start; /* Align items at the top */
  padding: 50px;
  padding-bottom: 0;
  gap: 20px; /* Add spacing between visi and misi */
}

.gabungan-visi-misi{

  justify-content: center; /* Untuk centering horizontal */
  align-items: center;  
}

.visi {
  /* Gaya untuk elemen visi */
  flex: 0.5; /* Memastikan visi dan misi memiliki lebar yang sama */
  color: white;
  
}

.visi h2{
/* margin-left: 100px; */
text-align: center;
}

.judul-visi, .judul-misi{
  font-size: 40px;
  color: var(--main-cyan);
}




.misi {
  /* Gaya untuk elemen misi */
  flex: 0.5; /* Memastikan visi dan misi memiliki lebar yang sama */
  color: white;
  position: relative;
  text-align: center;
  /* margin-top: 100px; */
}


.misi h2{
  /* margin-left: 100px; */
}

.isi-misi {
  padding-left: 110px;
  padding-right: 110px;
  text-align: justify;
  font-size: 20px;
  display: flex;
  flex-direction: column; 
}

.isi-visi {
  padding-left: 110px;
  padding-right: 110px;
  padding-top: 20px;
  text-align: justify;
  font-size: 20px;
  display: flex;
  flex-direction: column; /* UBAH INI: Agar paragraf berjejer ke bawah */
  /* Hapus: align-items: column; karena tidak valid */ /* Tambahkan jarak vertikal antar paragraf */
}

.isi-visi p {
  margin: 0; /* Hapus margin default paragraf */
  line-height: 1.5; /* Sesuaikan line height untuk keterbacaan */
  margin-bottom: 20px;
  text-align: justify; /* Teks akan rata kiri-kanan */
  /* KUNCI untuk indentasi gantung: */
  padding-left: 40px; /* Beri ruang di kiri paragraf untuk angka Romawi */
  text-indent: -50px; /* Tarik baris pertama (yang berisi angka Romawi) kembali ke kiri */
}

.isi-visi p span {
  display: inline-block; /* Penting: agar bisa mengatur width dan text-align */
  width: 30px; /* Beri lebar tetap untuk angka Romawi, sesuaikan jika perlu */
  text-align: right; /* Angka Romawi rata kanan di dalam lebarnya */
  font-weight: bold;
  margin-right: 20px; /* Jarak antara angka Romawi dan awal teks */
}

.isi-misi p {
  margin: 0; /* Hapus margin default paragraf */
  line-height: 1.5; /* Sesuaikan line height untuk keterbacaan */
  margin-bottom: 20px;
  text-align: justify; /* Teks akan rata kiri-kanan */
  /* KUNCI untuk indentasi gantung: */
  padding-left: 40px; /* Beri ruang di kiri paragraf untuk angka Romawi */
  text-indent: -50px; /* Tarik baris pertama (yang berisi angka Romawi) kembali ke kiri */
}

.isi-misi p span {
  display: inline-block; /* Penting: agar bisa mengatur width dan text-align */
  width: 30px; /* Beri lebar tetap untuk angka Romawi, sesuaikan jika perlu */
  text-align: right; /* Angka Romawi rata kanan di dalam lebarnya */
  font-weight: bold;
  margin-right: 20px; /* Jarak antara angka Romawi dan awal teks */
}

.isi-visi-mobile{
  display: none;
}

.isi-misi-mobile{
  display: none;
}

.angka-visi-misi{
  margin-right: 20px;
}


.isi-misi .angka-isi-misi{
  padding-right: 20px;
  padding-left: 50px;
}

.angka-isi-misi p br{
  gap: 200px;
}

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

.judul-meet-our-expert{
  font-size: 50px;
  padding: 80px;
  font-weight:bolder;
}


.judul-meet-our-expert span{
color: var(--main-cyan);
}


.meet-our-expert {
  /* text-align: center; */
  background-color: #040811;

  /* Tambahkan padding atas dan bawah */
}

.judul-meet-our-expert h1 {
  margin-bottom: 30px;
}

.team-our-expert {
  display: flex;
  justify-content: center; /* Memusatkan anggota tim */
  gap: 40px; /* Jarak antar foto */
}

.expert-member img {
  width: 300px; /* Sesuaikan lebar foto */
  height: 380px; /* Sesuaikan tinggi foto */
  object-fit: cover; 
  /* Memastikan foto mengisi area dengan benar */
  border-radius: 10px; /* Memberikan border radius pada foto */
  /* border: 2px solid #ccc;  */
  /* Contoh: border tipis 1 piksel */
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
  margin: 5px

  /* box-sizing: border-box; */
   /* Memastikan padding termasuk dalam ukuran elemen */
}

.expert-member {
  /* text-align: center; */
  color: white;
  /* background-color: #f0f0f0; */
   /* Memberikan background pada foto */
}

.nama-expert-member{
  margin-top: 10px;
  margin-left: 10px;
}

.jabatan-expert-member{
  margin-top: 2px;
  text-align: left;
  margin-left: 10px;
  font-size: 16px;
}

.nama-expert-member{
  font-size: 40px;
}

.scramble-wrapper {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap; /* Mencegah teks melipat ke baris baru */
}


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

@media (max-width: 1024px) { 
.isicopywriting-awal, .isicopywriting-awal1, .isicopywriting-awal2{
  font-size: 70px;
}

.copywriting-visi-misi {
  font-size: 17px;
  padding: 120px;
  padding-top: 0;
  padding-bottom: 50px;
  
}

.judul-visi, .judul-misi{
  font-size: 25px;
}

.isi-visi p, .isi-misi p{
  font-size: 15px;
}

.isi-visi, .isi-misi{
  padding-left: 50px;
  padding-right: 50px;
}


}