/* Kontainer utama untuk Flexbox */
.tab-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* Buat 5 kolom yang sama besar */
  gap: 0; /* Jarak antar elemen grid */
  justify-content: center;
}

/* Setiap box-tab */
.box-tab {
  display: flex;
  justify-content: center; /* Pusatkan konten secara horizontal */
  align-items: center;
  margin: 0;
}

.sub_box{
  color: #000;
  z-index: 100;
  margin-top: -20px;
}

/* Style dasar untuk .text-desc */
.text-desc {
  display: none; /* Tersembunyi secara default */
  opacity: 0; /* Setel opacity menjadi 0 untuk transisi efek */
  transition: opacity 0.3s ease-in-out; /* Tambahkan transisi untuk efek halus */
  margin-top: 500px;
}



.effect:hover .text-desc {
  display: block; /* Tampilkan elemen */
  opacity: 1; /* Ubah opacity menjadi 1 */
  transform: translateY(0); /* Pindahkan teks deskripsi ke posisi atas */
  color: #080707;
  z-index: 1000;
  margin-left: -35px;
}


/* Efek dan tampilan gambar */
.effect {
  position: relative;
  overflow: hidden;
  max-height: 340px;
  max-width: 270px;
  background: #3085a3;
  /* text-align: center; */
  cursor: pointer;
  width: 100%; /* Pastikan gambar memenuhi kotak */
  height: 100%; /* Pastikan gambar memenuhi kotak */
}

.effect img {
  width: 100%;
  height: auto;
  opacity: .8;
  transition: all .35s;
  transform: translate3d(0, 0, 0) scale(1.1, 1.1);
}


.effect:hover img {
  opacity: 5.5;
  transform: translate3d(0, 0, 0) scale(1, 1);
}

/* Gaya untuk teks dalam kotak */
.effect .tab-text {
  color: #212529;
  font-size: 1.25rem;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 70px;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Pusatkan teks secara vertikal */
  /* align-items: center;  */
  padding: 20px;
}

.tab-text h2 {
  color: #212529;
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
  transform: translate3d(0, 5px, 0);
  transition: all .35s;
}

.effect:hover h2 {
  transform: translate3d(0, 0, 0);
}

.tab-text p {
  color: #212529;
  margin: 0;
  font-size: 1rem;
  transform: translate3d(0, 10px, 0);
  transition: all .35s;
}

.effect:hover p {
  transform: translate3d(0, 0, 0);
}



.effect.effect-ten {
	background-color: #162633
}

.effect.effect-ten img {
	transition: all .35s;
	transform: translate3d(-20px, 0, 0) scale(1.1, 1.1);
	-webkit-transition: all .35s;
	-webkit-transform: translate3d(0px, 0, 0) scale(1.1, 1.1)
}


.effect.effect-ten h2 {
	transform: translate3d(0, 5px, 0);
	-webkit-transform: translate3d(0, 5px, 0);
	transition: all .35s;
	-webkit-transition: all .35s;
	font-family: 'Roboto';
	z-index: 2;
	position: relative;
	padding-top: 30%
}

/*.effect.effect-ten:hover h2 {
	transform: translateY(-20px);
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0)

}*/

.effect.effect-ten:hover h2 {
  transform: translateY(-20px);
}

.effect.effect-ten p {
	font-size: 1.1rem;
	line-height: 1.1;
	padding-top: 5px;
	transform: translate3d(0, 10px, 0);
	transition: all .35s;
	-webkit-transform: translate3d(0, 10px, 0);
	-webkit-transition: all .35s;
	font-family: 'Roboto';
}



.effect.effect-ten .tab-text {
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	perspective: 300px
}

.effect.effect-ten .tab-text:after {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(108, 117, 125, 0.62) 49%, rgba(255, 255, 255, 0.7) 50%);
  position: absolute;
  top: 150px;
  left: 0;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}

/* Background saat di-hover dengan lebih transparan */
.effect.effect-ten:hover .tab-text:after {
  top: -70px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.7) 50%);
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}






/* Tablet (min-width: 768px) */
@media (min-width: 768px) {
  .effect.effect-ten .tab-text:after {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(108, 117, 125, 0.62) 49%, rgba(255, 255, 255, 0.7) 50%);
    position: absolute;
    top: 30px;
    left: 0;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
  }

  .effect.effect-ten h2 {
    transform: translate3d(0, 5px, 0);
    -webkit-transform: translate3d(0, 5px, 0);
    transition: all .35s;
    -webkit-transition: all .35s;
    font-family: 'Roboto';
    z-index: 2;
    position: relative;
    margin-top: -75px;
    font-size: 12px;
    font-weight: bold;
  }

  .text-li{
    font-size: 11px;
  }

}


/* Media query untuk ukuran layar lebih kecil mobile */
@media (max-width: 576px) {
  .tab-container {
    flex-direction: column;
    align-items: center;
    grid-template-columns: 1fr; /* Ubah menjadi satu kolom */
    max-width: 200px;
  }

  .effect.effect-ten .tab-text:after {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(108, 117, 125, 0.62) 49%, rgba(255, 255, 255, 0.7) 50%);
    position: absolute;
    top: 130px;
    left: 0;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
  }

  .effect.effect-ten:hover .tab-text:after {
    top: -45px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.7) 50%);
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
  }

  .effect.effect-ten h2 {
    transform: translate3d(0, 5px, 0);
    -webkit-transform: translate3d(0, 5px, 0);
    transition: all .35s;
    -webkit-transition: all .35s;
    font-family: 'Roboto';
    z-index: 2;
    position: relative;
    padding-top: 45%
  }

  .effect .tab-text {
    padding: 1em; /* Kurangi padding pada teks */
    font-size: 1rem; /* Kurangi ukuran font */
    top: 45px;
  

  }

  .tab-text h2 {
    font-size: 1rem; /* Kurangi ukuran font pada heading */
    font-weight: bold;
  }

  .text-li   {
    font-size: 10px !important;
    text-align: left;
    
  }
}


/* Tablet (min-width: 768px) */
@media (min-width: 1024px) {
  .effect.effect-ten .tab-text:after {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(108, 117, 125, 0.62) 49%, rgba(255, 255, 255, 0.7) 50%);
    position: absolute;
    top: 90px;
    left: 0;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
  }

  .effect.effect-ten h2 {
    transform: translate3d(0, 5px, 0);
    -webkit-transform: translate3d(0, 5px, 0);
    transition: all .35s;
    -webkit-transition: all .35s;
    font-family: 'Roboto';
    z-index: 2;
    position: relative;
    margin-top: -55px;
    font-size: 27px;
    font-weight: bold;
    color: #000;
  }

  .text-li{
    font-size: 15px;
  }

}

#loader-background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 9998;
  display: flex;
  justify-content: center;
  align-items: center;
}

#loader {
  width: 120px;
  height: 120px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  z-index: 9999;
}



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

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



.loader{
  width: 40px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(#227EB7 0 0);
  background: 
    var(--c) 0    0,
    var(--c) 0    100%, 
    var(--c) 50%  0,  
    var(--c) 50%  100%, 
    var(--c) 100% 0, 
    var(--c) 100% 100%;
  background-size: 8px 50%;
  animation: l7-0 1s infinite;
  position: relative;
  overflow: hidden;
}
.loader:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3498db;
  top: calc(50% - 4px);
  left: -8px;
  animation: inherit;
  animation-name: l7-1;
}

@keyframes l7-0 {
 16.67% {background-size:8px 30%, 8px 30%, 8px 50%, 8px 50%, 8px 50%, 8px 50%}
 33.33% {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
 50%    {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 30%}
 66.67% {background-size:8px 50%, 8px 50%, 8px 30%, 8px 30%, 8px 30%, 8px 30%}
 83.33% {background-size:8px 50%, 8px 50%, 8px 50%, 8px 50%, 8px 30%, 8px 30%}
}

@keyframes l7-1 {
 20%  {left:0px}
 40%  {left:calc(50%  - 4px)}
 60%  {left:calc(100% - 8px)}
 80%,
 100% {left:100%}
}

@keyframes l6-0 {
  0%,30%  {background-position: 0  0   ,50% 0   }
  33%     {background-position: 0  100%,50% 0   }
  41%,63% {background-position: 0  0   ,50% 0   }
  66%     {background-position: 0  0   ,50% 100%}
  74%,100%{background-position: 0  0   ,50% 0   }
}
@keyframes l6-1 {
  90%  {transform:translateY(0)}
  95%  {transform:translateY(15px)}
  100% {transform:translateY(15px);left:calc(100% - 8px)}
}
@keyframes l6-2 {
  100% {top:-0.1px}
}
@keyframes l6-3 {
  0%,80%,100% {transform:translate(0)}
  90%         {transform:translate(26px)}
}

@keyframes l10-0 {to{rotate: 1turn;}}
@keyframes l10-1 {to{transform: rotate(-1turn) translate(-12.5%) rotate(.75turn);}}

.tutup {
  display: none !important;
}