@font-face {

    font-family: Inter;

    src: url(../font/Inter-VariableFont_slnt,wght.ttf);

}



* {

    padding: 0;

    margin: 0;

}





body {

    display: flex;

    font-family: Inter;

    flex-direction: column;



}



/*  */



/* --------------------------- Header ------------------------------------ */

.topbar-section {

    display: flex;

    position: relative;

    flex-direction: row;

    text-align: center;

    align-items: center;

    justify-content: space-around;

    overflow: hidden;

    background-color: transparent;

    z-index: 99;

    transition: padding 0.3s ease, background-color 0.3s ease;

    text-shadow: 2px 2px 5px black;



}

.topbar-section .bi.bi-list{

    padding: 10px;

}

.logo-section {

    display: flex;

    align-items: center;

    text-align: center;

    justify-content: left;



}



a.topbar-menu:after{

    background: none repeat scroll 0 0 transparent;

    bottom: -10px;

    content: "";

    display: block;

    height: 2px;

    left: 50%;

    position: absolute;

    background: #fff;

    transition: width 0.3s ease 0s, left 0.3s ease 0s;

    width: 0;

}

a.topbar-menu:hover:after{

    width: 100%;

    left: 0;

}



.topbar-menu, .topbar-title{

    text-align: center;

    padding: 0 20px 0 20px;

    text-decoration: none;

    color: white;

    font-size: 14px;

    position: relative;

    transition: font-size 0.3s ease;

}

.topbar-title{

    font-weight: 600;

    font-size: 20px;



}

.topbar-content {

    display: flex;

    padding: 1em;

    position: relative;

}



.logo {

    display: flex;

    /* object-fit: cover; */

    width: 7%;

    /* height: 100%; */

}



.sticky {

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 1000; /* Memastikan navbar tetap di atas semua konten lain */

    transition: width 0.3s ease;

    background-color: #2578e0;

    /* background-color: #003D5C; */



}

.sticky .logo {

    width: 8%; /* Mengecilkan logo saat sticky */

}



.sticky + .content {

    padding-top: 60px;

}



.topbar-section.sticky {

    padding: 0.3em 1em; /* Mengurangi padding */

    transition: all 0.3s ease; /* Menambahkan transisi agar perubahan lebih halus */

}



.topbar-section.sticky .logo {

    width: 8%; /* Mengecilkan logo */

    transition: width 0.3s ease; /* Menambahkan transisi untuk logo */

}



.topbar-section.sticky .topbar-menu, .topbar-section.sticky .topbar-title {

    font-size: 15px; /* Mengecilkan ukuran font */

    transition: font-size 0.3s ease; /* Transisi untuk font */

}

.sticky .topbar-menu, .sticky .topbar-title {

    font-size: 18px; /* Mengecilkan ukuran font saat sticky */

}

.topbar-section {

    transition: padding 0.3s ease, background-color 0.3s ease;

}

.solid-background {

    background-color: #2578e0; /* Atau warna latar yang diinginkan */

    /* background-color: #003D5C; */

    z-index: 1000; /* Contoh z-index, atur sesuai kebutuhan */

}



.topbar-section.sticky:not(.solid-background) {

    background-color: transparent; /* Hanya terapkan ini jika .topbar-section bukan merupakan bagian dari .solid-background */

}



.bi.bi-list {

    color: white;

    text-decoration: none;

}







/* -------------------------------- Footer ----------------------------------------- */
.footer {
    background: #0068D3;
    color: #fff;
    font-family: 'Segoe UI', sans-serif;
}

.footer-inner {
    max-width: 1200px;
    margin: auto;
    padding: 50px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
}

.footer-title {
    color: #E2B101;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 10px;
}

.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-column a {
    color: #fff;
    text-decoration: none;
    margin-bottom: 8px;
    font-size: 15px;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: #E2B101;
}

.footer-column p {
    margin: 6px 0;
    font-size: 14px;
}

.footer-column i {
    margin-right: 8px;
    color: #E2B101;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 15px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: auto;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-logo img {
    width: 30px;
    height: auto;
}

.footer-logo a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.footer-social a {
    color: #fff;
    margin-left: 15px;
    font-size: 18px;
    transition: color 0.3s ease;
}

.footer-social a:hover {
    color: #E2B101;
}

@media (max-width: 768px) {
    .footer-inner {
        text-align: center;
    }
    .footer-column p, 
    .footer-column a {
        font-size: 14px;
    }
}





/* --------------------------------- CONTENT ------------------------------- */

.floating-wa {

    position: fixed; /* Menggunakan fixed agar 'mengambang' dan tetap dalam viewport */

    bottom: 20px; /* Jarak dari bawah viewport */

    right: 20px; /* Jarak dari kanan viewport */

    z-index: 1000; /* Pastikan lebih tinggi dari elemen lain untuk selalu tampil di depan */

}



.floating-wa img {

    width: 50px;

    display: block; /* Menghindari masalah spacing bawah pada img */

}

.facility-hero-container,

.container-1 {

    position: relative;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    overflow: hidden;

    height: 100vh;

}



.background-layer {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    

    transition: opacity 0.5s ease-out;

    z-index: 1;

    opacity: 0;

}



.background-layer.active {

    opacity: 1;

    z-index: 2;

}

.container-1::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    /* background: rgba(0, 0, 0, 0.5); */

    z-index: 1; /* Pastikan ini berada di atas background image tetapi di bawah konten lainnya */

}

.container-1 .content {

    position: relative;

    z-index: 2; /* Lebih tinggi dari z-index ::before */

}

@keyframes slideDown {

    0% {

        opacity: 0;

        transform: translateY(-20px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes slideUp {

    0% {

        opacity: 1;

        transform: translateY(0);

    }

    100% {

        opacity: 0;

        transform: translateY(-20px);

    }

}



.changeable-title-text {

    display: none;

    position: absolute; /* Untuk overlay antara judul satu dengan lainnya */

    width: 100%;

    font-size: clamp(1.875rem, 1.1538rem + 2.3077vw, 3.75rem);

}



.changeable-title .changeable-title-text.active {

    display: block;

    animation: slideDown 0.5s forwards; /* Animasi muncul */

}



.changeable-title .changeable-title-text.deactive {

    animation: slideUp 0.5s forwards; /* Animasi menghilang */

}





.dip-black {

    height: 100%;

    background: rgba(17, 17, 17, 0.54);

}

.img-cover {

    display: block;

    filter: brightness(50%);

    object-fit: cover;

    background-size: cover;

    height: auto;

    width: 100%;

}

.hero-section {

    display: none;

    position: absolute;

    top: 65%;

    left: 37%;

    transform: translate(-50%, -50%);

    /* background-color: #000000; */

    color: #ffffff;

    padding: 10px 20px;

    font-size: 30px;

    text-align: left;

    z-index: 1;

    width: 45%;



}

.hero-section .button-more >button {

    font-size: 20px;

}

.hero-section h2 {

    font-weight: 600;

    font-size: clamp(1.3125rem, 0.6635rem + 2.0769vw, 3rem);

}

.changeable-title {

    position: relative;

    height: 3em;

    overflow: hidden;

    padding-top: 20px;

}

.button-more {

    display: flex;

    padding-top: 1em;



}

.button-more > a > button{

    width: 130%;



}

button {

    position: relative;

    display: inline-block;

    cursor: pointer;

    outline: none;

    border: none;

    vertical-align: middle;

    text-decoration: none;

    font-size: 0.9rem; /* Ukuran font sesuai kebutuhan */

    font-family: inherit;

    font-weight: 600;

    color: #0085C8;

    text-transform: uppercase;

    padding: 1em 2em; /* Padding sesuai kebutuhan */

    background: #fff; /* Warna background biru */

    border-radius: 10px; /* Border-radius untuk pembulatan tepi */

    transition: all 0.3s ease; /* Transisi untuk efek */

    box-shadow: 0 0 0 0 #034fa1fb; /* Shadow box yang lebih sederhana */

    border: 1px solid #034fa1fb;

}



button:hover {

    /* Efek 3D yang kuat saat di-hover */

    box-shadow: 0 8px 0 0 #034fa1fb;

    transform: translateY(-8px);

    /* border-bottom: 8px solid #034fa1fb; */



    /* transform: translateY(-6px) scale(1.05); Menggerakkan button ke atas dan sedikit membesar */

}





button:active {

    /* Mengurangi efek terangkat saat button ditekan */

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /*Shadow box yang lebih dekat untuk efek tertekan

    /* transform: translateY(-1px) scale(0.98); Sedikit menggerakkan button ke atas dan mengecilkan untuk efek ditekan */

}



.navigation-hero {

    position: absolute;

    right: 6em; /* Jarak dari sisi kanan */

    bottom: 2em; /* Jarak dari bawah */

    display: flex;

    flex-direction: row;

    align-items: center;

    z-index: 2;

}



/* Tambahkan class khusus untuk ikon kiri dan kanan jika belum ada */

.navigation-hero .icon-left,

.navigation-hero .icon-right {

    position: relative;

    display: flex; /* Tambahkan ini untuk mengizinkan pusat dengan benar */

    justify-content: center; /* Pusatkan konten (ikon) */

    align-items: center; /* Pusatkan konten (ikon) */

    width: 40px; /* Lebar ikon (sesuaikan jika perlu) */

    height: 40px; /* Tinggi ikon (sesuaikan jika perlu) */

    z-index: 2;

    cursor: pointer; /* Jika ikon ini adalah tombol, biar lebih jelas bagi pengguna */

}



.navigation-hero .icon-left::after,

.navigation-hero .icon-right::after {

    content: '';

    position: absolute;

    width: 100%; /* Ukuran relatif terhadap ikon */

    height: 100%; /* Ukuran relatif terhadap ikon */

    background-color: white;

    border-radius: 50%;

    opacity: 0;

    transition: opacity 0.3s ease, transform 0.3s ease;

    z-index: -1;

    transform: scale(0); /* Mulai dari skala 0 agar tidak terlihat */

}



.navigation-hero .icon-left:hover::after,

.navigation-hero .icon-right:hover::after {

    opacity: 1;

    transform: scale(1); /* Melebar ke ukuran penuh */

}



.navigation-hero .icon-left:hover,

.navigation-hero .icon-right:hover {

    color: #000; /* Ubah warna ikon saat hover */

}













/* ----------------------------- About US --------------------------------- */

.aboutus-container {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    margin: 60px 0 60px 0;



}

mark {

    background-color: #0085c8;

    color: white;

}

.about-section {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    width: 50%;

}

.section-1 {

    display: flex;

    flex-direction: column;

    justify-content: left;

    padding: 0.5em;

    padding-bottom: 1em;

    border-bottom: 3px solid #d1d1d1a4 ;

}

.about-title-small, .about-title-big, .title-orange{

    color: #d16d15;

    padding-bottom: 5px;

}

.about-title-big{

    font-size: 20px;

    width: 100%;

}

.about-desc{

    padding-bottom: 20px;

    width: 100%;

    text-align: justify;



}

.section-2 {

    display: flex;

    flex-direction: row;

    /* border-top: 3px solid #d1d1d1a4 ; */

    padding: 1em;

    /* border-right: 3px solid #d1d1d1a4 ; */

    /* width: 55%; */

}
/* 
.trusted-section, .experience-section {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    margin: auto;

    padding: 1em;

    padding-bottom: 2em;

    width: 100%;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.116), 0 6px 20px 0 rgba(0, 0, 0, 0.041);

} */

.title-orange-2{

    color: #d16d15;

    padding-bottom: 5px;

    font-size: 20px;

}

.years{

    font-size: 40px;

    padding: 0.5em;

}

.about-img {

    display: block;

    padding-left: 20px;

    object-fit: cover;

    background-size: cover;

    width: 100%;

    border-radius: 5px;

    border-left: 3px solid #d1d1d1a4 ;

}



/* ------------------------------ Upcoming Line ----------------------------------- */

.upcoming-container {
    margin: 80px 0;
    padding: 0 0 6em 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    background: linear-gradient(180deg, #0068D3 0%, #004EA8 100%);
}

.upcoming-title {
    max-width: 900px;
    padding: 5em 1em 2em 1em;
    color: white;
}

.upcoming-title > h1 {
    font-weight: 700;
    font-size: 40px;
    letter-spacing: 1px;
    margin-bottom: 0.3em;
}

.upcoming-title > p {
    font-weight: 300;
    font-size: 20px;
    line-height: 1.6;
    opacity: 0.9;
}

.upcoming-product-list {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 2em;
}

.upcoming-product {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    overflow: hidden;
    background: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    max-width: 261px;
}

.upcoming-product:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.upcoming-img {
    width: 100%;
    height: 358px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.upcoming-product:hover .upcoming-img {
    transform: scale(1.05);
}

.upcoming-desc {
    padding: 20px;
    text-align: left;
    background-color: white;
    color: #333;
}

.upcoming-desc > h4 {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 6px;
    color: #0068D3;
}

.upcoming-desc > p {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.upcoming-desc > a {
    font-size: 13px;
    color: #0068D3;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.upcoming-desc > a:hover {
    color: #004EA8;
}

/* ------------------------------------ Best Selling ------------------------------- */

.best-selling-zigzag {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h1 {
    font-size: 38px;
    font-weight: 700;
    color: #D16D15;
    margin-bottom: 10px;
}

.section-title p {
    font-size: 18px;
    color: #444;
    max-width: 700px;
    margin: 0 auto;
}

.zigzag-row {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
}

.zigzag-row.reverse {
    flex-direction: row-reverse;
}

.zigzag-image {
    flex: 1;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.zigzag-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.zigzag-image:hover img {
    transform: scale(1.05);
}

.zigzag-content {
    flex: 1;
}

.zigzag-content h2 {
    font-size: 26px;
    color: #006BD5;
    margin-bottom: 15px;
}

.zigzag-content p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
    .zigzag-row {
        flex-direction: column;
    }
    .zigzag-row.reverse {
        flex-direction: column;
    }
    .zigzag-image img {
        height: 250px;
    }
}



/* -------------------------------- Creations ------------------------------------- */
/* Parallax container */
.creations-container {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../img/creation-background.jpeg");
    background-attachment: fixed; /* Parallax effect */
    background-size: cover;
    background-position: center;
    padding: 60px 20px;
}

/* Semi-transparent content box */
.creations-content {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 40px;
    max-width: 1200px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.title-section{
    margin-bottom: 40px;
} 

/* Title section */
.title-section h1 {
    font-weight: 700;
    font-size: 2.2rem;
    color: #006BD5;
    margin-bottom: 10px;
}

.title-section p {
    font-size: 1rem;
    color: #333;
    max-width: 700px;
    margin: 0 auto;
}

/* Product container */
.creation-product-img-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
}

/* Product card */
.creation-product-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.creation-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* Image wrapper */
.img-wrapper {
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.creation-product-card:hover img {
    transform: scale(1.1);
}

/* Description */
.creation-product-desc {
    padding: 15px;
    text-align: center;
}

.creation-product-desc h2 {
    font-size: 1rem;
    font-weight: 600;
    color: #006BD5;
    margin-bottom: 5px;
}

.creation-product-desc p {
    font-size: 0.9rem;
    color: #555;
}



/* --------------------------------- Choose Us -------------------------------- */



.choose-us-container{

    /* padding: 0 0 2em 0; */

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    justify-content: center;

    background-color: #0068D3;

}

.choose-us-section{

    margin: 7em 0 7em 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

.reason-mobile{

    display: none;

}

.reason-mobile .reason-img-4{

    padding: 0;

}

.title-white{

    color: white;

    text-align: center;

    width: 70%;

    margin-bottom: 40px;

}

.title-white > h1{

    font-size: 36px;

    font-weight: 700;

    padding-bottom: 10px;

}

.title-white > p{

    font-size: 1rem;
    color: #ffffff;
    max-width: 700px;
    margin: 0 auto;

}



.container-3{

    display: flex;

    /* padding: 2em; */

    flex-direction: row;

    justify-content: center;

    align-items: center;

}

.reason-container{

    width: 60%;

}

.choose-container-2{

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    width: min-content;

}

.choose-container-3{

    display: flex;

    /* flex-direction: row; */

    align-items: center;

    justify-content: center;

    /* width: min-content; */

}

.reason-1{

    width: 35vw;

    display: flex;

    align-items: center;

    background-color: #ff4b2b;

    color: white;

    border-radius: 10px;

    overflow: hidden;

}

.reason-2{

    width: 35vw;

    display: flex;

    align-items: center;

    text-align: center;

    justify-content: left;

    background-color: #F8C301;

    border-radius: 15px;



}

.reason-3{

    height: 100%;

    width: 35vw;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    justify-content: center;



}

.reason-4{

    display: flex;

    flex-direction: row;

    align-items: center;

    text-align: center;

    justify-content: center;

    width: 60vw;

    height: 100%;

    height: max-content;



}

.reason-title-1{

    padding: 16px;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: white;

    background-color: #E15149;

    width: 45%;

    border-top-left-radius: 15px;

    border-bottom-left-radius: 15px;

    font-size: clamp(1.125rem, 0.6923rem + 1.3846vw, 2.25rem);

}

.reason-title-1 p{

    font-size: 15px;

}

.reason-title-1 h2{

    font-size: 28px !important;

}

.reason-title-2 h2{

    font-size: 28px !important;

}



.reason-title-3 h2{

    font-size: 28px !important;

}



.reason-title-4 h2{

    font-size: 28px !important;

}



.reason-title-2{

    height: 100%;

    padding: 16px;

    display: flex;

    justify-content: center;

    align-items: center;

    /* aspect-ratio: 3/2; */

    text-align: center;

    color: #414141;

    background-color: #F8C301;

    border-radius: 15px;



}

.reason-title-3{

    height: 100%;

    padding: 30px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: white;

    background-color: #0092DC;

    border-bottom-left-radius: 15px;

    border-bottom-right-radius: 15px;

}

.reason-title-4{

    position: relative;

    height: 100%;



    display: flex;



    justify-content: end;

    align-items: center;

    text-align: left;

    color: white;

    background-color: black;

    border-radius: 15px;

}

.reason-img-1{

    width: 55%;

    background-image: url("{{asset('resources/img/high-quality.jpeg')}}");

    background-size: cover; /* Cover the entire area of the grid cell */

    background-position: center; /* Center the background image */

}

.reason-img-1 img{

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.reason-img-2{

    width: 100%;

    background-size: cover; /* Cover the entire area of the grid cell */

    background-position: center; /* Center the background image */

}

.reason-img-2 img{

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.reson-img-4{

    width: 40%;

}

.reason-img-4 img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-top-right-radius: 15px;

    border-bottom-right-radius: 15px;

}

.reason-img-3, .reason-img-4{

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}



.gap-30{

    gap: 30px;

}

.gap-9{

    gap: 9em;

}



.reason-product-img{

    aspect-ratio: 265 / 350;

    width: 100%;

    background-size: cover;

    background-position: center;

    object-fit: cover;

    border-top-right-radius: 14px;

    border-bottom-right-radius: 14px;

}



.reason-product-img-big{

    width: 100%;

    background-size: cover;

    background-position: center;

    object-fit: cover;

    border-top-left-radius: 15px;

    border-top-right-radius: 15px;

}



.reason-product-img-crop{

    aspect-ratio: 539 / 391;

    width: 100%; /* Make the width responsive to the container size */

    max-width: 539px; /* Optional: if you want to limit the maximum size */

    background-size: cover;

    background-position: center;

    object-fit: cover;

    border-top-right-radius: 15px;

    border-bottom-right-radius: 15px;

}

.container-2 {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    grid-template-rows: repeat(auto);

    grid-column-gap: 0px;

    grid-row-gap: 0px;

}



.reason-1 { grid-area: 1 / 1 / 2 / 2; }

.reason-2 { grid-area: 2 / 1 / 3 / 2; }

.reason-3 { grid-area: 1 / 2 / 3 / 3; }





.reason-title-2 > h1{

    font-size: clamp(2.25rem, 0.8077rem + 4.6154vw, 6rem);

    font-weight: 700;

}

.reason-title-2 > h2, .reason-title-3 > h2, .reason-title-4 > h1{

    font-size: clamp(1.125rem, 0.4519rem + 2.1538vw, 2.875rem);

    font-weight: 700;



}

.reason-title-2 > h3, .reason-title-3 > h3{

    padding-top: 10px;

    font-size: clamp(1.125rem, 0.9327rem + 0.6154vw, 1.625rem);

    font-weight: 400;

}

.reason-title-2 > h4, .reason-title-3 > h4{

    font-size: clamp(1.125rem, 0.9327rem + 0.6154vw, 1.625rem);

    font-weight: 700;

}

/* .reason-title-4 > h1{

    padding-top: 1em;

} */

.reason-title-4 > h2{

    padding-top: 10px;

    font-size: clamp(0.75rem, 0.5577rem + 0.6154vw, 1.25rem);

    font-weight: 500;

}



/* ------------------------------ Trusted Parnership ------------------------------- */



.partnership-container{



    padding: 2em 0 5em 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    justify-content: center;

    /* width: 80%; */

}



.partnership-title {

    text-align: center;

}

.partnership-title > h1{

    color: #D16D15;

    font-size: 36px;

    font-weight: 700;

}

.partnership-title > h2{

    color: black;

    font-size: 24px;

    font-weight: 400;

}

.partnership-brand {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    padding-top: 2em;

    width: 80vw;

    overflow-x: auto;

}

.partnership-brand::-webkit-scrollbar {

    height: 8px;

    border-radius: 8px;

    transition: 0.5s ease-in-out;

}

.partnership-brand::-webkit-scrollbar-track {

    background: #f1f1f1;

    border-radius: 8px;

    transition: 0.5s ease-in-out;

}

.partnership-brandr::-webkit-scrollbar-thumb {

    background-color: #888;

    border-radius: 8px;

    transition: 0.5s ease-in-out;

}

.partnership-brand::-webkit-scrollbar-thumb:hover {

    background: #555;

    border-radius: 8px;

    transition: 0.5s ease-in-out;

}

.partnership-new-container{

    margin: 16px 0;

    width: 100%;

    gap: 2em;

}

.brand-logo {

    background-size: contain;

    background-position: center;

    object-fit: cover;

    padding: 0 4em 0 4em;

}



/* --------------------------------- HOMEPAGE END --------------------------------- */

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



/* --------------------------------- ABOUTUS START --------------------------------- */

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

/* ------------------------------------- History  --------------------------------------- */

.history-container {

    margin: 60px 15em 100px 15em;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

.history-title-small {

    display: flex;

    text-align: center;

    justify-content: center;

    padding-bottom: 12px;

}

.history-title-small > h3{

    font-size: 20px;

    font-weight: 500;

    color:#E67817;

}

.history-title-big-section {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    padding-bottom: 6px;



}

.normal-title-1 > h1, .normal-title-2 > h1{

    font-size: 36px;

    font-weight: 500;

    color:#E67817

}

.normal-title-1{

    padding-right: 6px;

}

.normal-title-2{

    padding-left: 6px;

}

.highlight-title{

    background-color:#0085c8 ;

    /* padding: 0 4px 0 4px; */

}

.highlight-title > h1{

    font-size: 36px;

    font-weight: 400;

    color: white;

}

.history-title-big{

    padding-bottom: 30px;

}

.history-title-big > h1 {

    font-size: 36px;

    font-weight: 700;

    color:#D16D15;



}

.history-desc {

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;



}

.history-desc > p {

    font-size: 20px;

    font-weight: 400;

    line-height: 41px;

}



/* --------------------------------- Unveeling ---------------------------------------------- */



.unveeling-container{

    margin-bottom: 3em;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background-color: #0068D3;



}

.unveeling-section{

    width: 90%;

    display: flex;

    flex-direction: row;

    justify-content: space-around;

    align-items: center;

}

.unveeling-img{

    display: flex;

    align-items: center;

}

.unveeling-product-img{

    width: 313.46px;

    height: 273.3px;

    transform: rotate(150.14deg) scaleY(-1);

}



.unveeling-title > h1{

    text-align: right;

    font-size: 45px;

    font-weight: 700;

    color: white;

    margin-left: 50px;

}



/* ------------------------------- Vision ------------------------------------ */

.vision-and-mission-container {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

.vision-section, .value-section  {

    margin: 2em 12em 5em 15em;

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

}

.mission-section{

    margin: 3em 15em 5em 15em;

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

}



/* .vision-title{

    width: 90%;

} */

.vision-title > h1, .mission-title > h1{

    font-size: 64px;

    font-weight: 500;

    color:#D16D15;

}





.vision-desc > h2{

    font-size: 24px;

    font-weight: 400;

}

.mission-desc-container {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    width: 100%;

    padding: 0 10px 0 10px;



}

.mission-desc-section{

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: center;

    position: relative;

    width: 80%;

    background-color: #fff;

    box-shadow: 0 4px 8px rgba(0,0,0,0.2);

    border-radius: 8px;

    padding: 20px 20px 3em 20px;

}

/*.mission-desc-section::after{*/

/*    content: '';*/

/*    position: absolute;*/

/*    bottom: -3em;*/

/*    left: 1em;*/

/*    width: 0;*/

/*    height: 0;*/

/*    filter: drop-shadow(4px 8px 4px rgba(0, 0, 0, 0.2));*/

/*    border-left: 2em solid transparent;*/

/*    border-right: 2em solid transparent;*/

/*    border-top: 3em solid #fff;*/

/*}*/

/* .mission-desc-section-2{

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: left;

    position: relative;

    width: 80%;

    background-color: #ffffff;

    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

    border-radius: 8px;

    padding: 20px 20px 5em 20px;

}

.mission-desc-section-2::after{

    content: '';

    position: absolute;

    bottom: -4em;

    left: 2em;

    width: 0;

    height: 0;

    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));

    border-left: 2em solid transparent;

    border-right: 2em solid transparent;

    border-top: 4em solid #ffffff;

}

.mission-desc-section-3{

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: left;

    position: relative;

    width: 72%;

    background-color: #ffffff;

    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

    border-radius: 8px;

    padding: 20px 20px 5em 20px;

}

.mission-desc-section-3::after{

    content: '';

    position: absolute;

    bottom: -4em;

    left: 2em;

    width: 0;

    height: 0;

    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));

    border-left: 2em solid transparent;

    border-right: 2em solid transparent;

    border-top: 4em solid #ffffff;

}

.mission-desc-section-4{

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: left;

    position: relative;

    width: 77%;

    background-color: #ffffff;

    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

    border-radius: 8px;

    padding: 20px 20px 5em 20px;

}

.mission-desc-section-4::after{

    content: '';

    position: absolute;

    bottom: -4em;

    left: 2em;

    width: 0;

    height: 0;

    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));

    border-left: 2em solid transparent;

    border-right: 2em solid transparent;

    border-top: 4em solid #ffffff;

} */



.mission-desc-img {

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding-bottom: 30px;



}

.mission-desc-img-2 {

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding-bottom: 10px;



}

.mission-desc-img > img{



    width: 76px;

    height: 76px;

}

.mission-desc-img-2 > img{



    width: 112px;

    height: 112px;

}

.mission-desc > h2 {

    font-size: 14px;

    font-weight: 400;

}



/* --------------------------------- Value ------------------------------------ */



.value-container {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background-color: #0068D3;

}



.value-title {

    width: 100%;

}

.value-title > h1 {

    font-size: 64px;

    font-weight: 500;

    color:white;

}

.value-title > h2 {

    font-size: 24px;

    font-weight: 300;

    color:white;

}

.value-desc {

    width: 70%;

    padding-right: 5em;

}

.value-desc > h2 {

    font-size: 20px;

    font-weight: 400;

    color: white;

}

.value-desc-2-section {

    width: 30%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}

.value-desc-img > img{

    width: 231px;

    height: 231px;

}

.value-desc-2 > h1{

    font-size: 36px;

    font-weight: 700;

    color: white;

}

.value-desc-2 > p{

    font-size: 20px;

    font-weight: 500;

    color: white;

}



.value-section {

    width: 67%;

  }



  :root {

    --nb-slides: 5;

    --dot-size: 15px;

    --arrow-size: 50px;

  }



  .line {

    width: 100%;

  }



  .carousel {

    width: 100%;

    overflow: hidden;

    border-radius: 15px;

}



.carousel-wrapper {

    width: 100%;

    overflow: hidden;

    position: relative;

    text-align: center;

}



.carousel ul {

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    list-style: none;

    overflow: hidden;

    margin: 0;

    padding: 0;

    height: 100%;

    width: calc(100% * var(--nb-slides));

    transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1);

}



.carousel li {

    width: 100%;

}



.carousel-value {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}



.value-desc-img img {

    width: 231px;

    height: 231px;

}



.value-desc-2 h1 {

    font-size: 36px;

    font-weight: 700;

    color: white;

}



.value-desc-2 p {

    font-size: 20px;

    font-weight: 500;

    color: white;

}



.nav-dots {

    display: flex;

    justify-content: center;

    position: relative;

    margin-top: 20px;

}



.nav-dot {

    cursor: pointer;

    margin: 0 5px;

    width: var(--dot-size);

    height: var(--dot-size);

    opacity: 0.5;

    background-color: white;

    border-radius: 50%;

    transition: 0.4s;

}



.nav-dot:hover {

    opacity: 0.8;

    transform: scale(1.2);

}



.nav-dot:active {

    transform: scale(0.9);

}





  #slide1:checked ~ .carousel ul {

    left: 0%;

  }



  #slide2:checked ~ .carousel ul {

    left: -100%;

  }



  #slide3:checked ~ .carousel ul {

    left: -200%;

  }



  #slide4:checked ~ .carousel ul {

    left: -300%;

  }



  #slide5:checked ~ .carousel ul {

    left: -400%;

  }



  #slide1:checked ~ .nav-dots .nav-dot[for="slide1"],

  #slide2:checked ~ .nav-dots .nav-dot[for="slide2"],

  #slide3:checked ~ .nav-dots .nav-dot[for="slide3"],

  #slide4:checked ~ .nav-dots .nav-dot[for="slide4"],

  #slide5:checked ~ .nav-dots .nav-dot[for="slide5"] {

    opacity: 1;

  }



  .arrow {

    display: none;

    position: absolute;

    cursor: pointer;

    font-weight: bolder;

    text-shadow: 0 0 7.5px rgba(0, 0, 0, 0.7);

    top: 50%;

    z-index: 1;

    opacity: 0.7;

    margin-top: calc(-1 * var(--arrow-size) / 2);

    height: var(--arrow-size);

    font-size: var(--arrow-size);

    transition: 0.2s;

  }



  .arrow:hover {

    opacity: 1;

    transform: scale(1.2);

  }



  .arrow:active {

    transform: scale(0.9);

  }



  .left-arrow {

    left: 15px;

  }



  .right-arrow {

    right: 15px;

  }



  #slide1:checked ~ .left-arrow[for="slide5"],

  #slide2:checked ~ .left-arrow[for="slide1"],

  #slide3:checked ~ .left-arrow[for="slide2"],

  #slide4:checked ~ .left-arrow[for="slide3"],

  #slide5:checked ~ .left-arrow[for="slide4"],

  #slide1:checked ~ .right-arrow[for="slide2"],

  #slide2:checked ~ .right-arrow[for="slide3"],

  #slide3:checked ~ .right-arrow[for="slide4"],

  #slide4:checked ~ .right-arrow[for="slide5"],

  #slide5:checked ~ .right-arrow[for="slide1"] {

    display: block;

  }



  .signature {

    margin-top: 100px;

    bottom: 0;

    font-family: "Quicksand";

    color: rgba(150, 150, 170);

    text-shadow: 0 2.5px rgba(0, 0, 0, 0.25);

  }



  .signature .name {

    color: white;

  }



  .signature .dot {

    margin: 0 5px;

  }



  .signature a {

    color: white;

    text-decoration: underline;

  }









/* --------------------------------- Achieve ---------------------------------- */



.achieve-container{

    margin: 60px 20em 60px 20em;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}

.achieve-title > h1{

    font-size: 36px;

    font-weight: 700;

    color: #D16D15;

    padding-bottom: 0.5em;

}

.achieve-title > h2{

    font-size: 24px;

    font-weight: 500;

    color: #D16D15;

    padding-bottom: 0.5em;



}

.achieve-desc{

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;



}

.achieve-desc > h3{

    width: 70%;

    font-size: 20px;

    font-weight: 400;

    padding-bottom: 1em;

}

.achieve-logo-section {

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;



}

.achieve-logo-box{

    width: 80%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 1em;

}

/* .achieve-logo-1 > img{

    width: 102px;

    height: 149px;

}

.achieve-logo-2 > img{

    width: 144px;

    height: 140px;

} */

/* .achieve-logo-3{

    display: flex;

    align-items: center;

    justify-content: center;

    /* width: 50%; */

/* } */

/* .achieve-logo-3 > img{

    width: 147px;

    height: 113px;

} */

.achieve-logo > img{

    width: 147px;

    height: 137px;

    background-size: cover;

    background-position: center;

    object-fit: cover;

    display: flex;

    align-items: center;

    justify-content: center;

}

.achieve-logo-title > h3{

    font-size: 20px;

    font-weight: 500;

    padding-top: 5px;

}

.achieve-logo-title-2 > h3{

    text-align: center;

    font-size: 20px;

    font-weight: 500;

    padding-top: 5px;

}



/* --------------------------------- ABOUTUS END --------------------------------- */

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



/* --------------------------------- FACILITY START --------------------------------- */

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

/* --------------------------------------- Facility Hero ------------------------------ */



.facility-hero-container {

    flex-direction: column;

    align-items: center;

    background-size: cover;

    background-position: center;

    object-fit: cover;

    margin-bottom: 5em;

    width: 100%;

    height: 100vh;

    position: relative;

}



.facility-hero-container::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    height: 100vh;

    background: rgba(0, 0, 0, 0.5);

    z-index: 1;

}

.facility-title-section {

    top : 30em;

    left : 7em;

    width: 100%;

    position: absolute;

    flex-direction: column;

    align-items: left;

    justify-content: left;

    text-align: left;

    z-index: 9;

    text-shadow: 1px 1px 5px BLACK;



}

.facility-title-big,.facility-title-desc {

    width: 100%;

}

.facility-title-big > h1 {

    font-size: clamp(1rem, -0.1538rem + 3.6923vw, 4rem);

    font-weight: 700;

    color: white;

}

.facility-title-desc > h3{

    padding:10px 0 5px 0;

    font-size: clamp(0.625rem, 0.3846rem + 0.7692vw, 1.25rem);

    font-weight: 400;

    color: white;

}

.facility-title-desc > h4{

    width: 50%;

    font-size: clamp(0.4375rem, 0.2212rem + 0.6923vw, 1rem);

    font-weight: 300;

    color: white;

}



.navigation-hero-facility {

    position: absolute;

    right: 6em; /* Jarak dari sisi kanan */

    bottom: 2em; /* Jarak dari bawah */

    display: flex;

    flex-direction: row;

    align-items: center;

    z-index: 2;

}



/* Tambahkan class khusus untuk ikon kiri dan kanan jika belum ada */

.navigation-hero-facility .icon-left-facility,

.navigation-hero-facility .icon-right-facility {

    position: relative;

    display: flex; /* Tambahkan ini untuk mengizinkan pusat dengan benar */

    justify-content: center; /* Pusatkan konten (ikon) */

    align-items: center; /* Pusatkan konten (ikon) */

    width: 40px; /* Lebar ikon (sesuaikan jika perlu) */

    height: 40px; /* Tinggi ikon (sesuaikan jika perlu) */

    z-index: 2;

    cursor: pointer; /* Jika ikon ini adalah tombol, biar lebih jelas bagi pengguna */

}



.navigation-hero-facility .icon-left-facility::after,

.navigation-hero-facility .icon-right-facility::after {

    content: '';

    position: absolute;

    width: 100%; /* Ukuran relatif terhadap ikon */

    height: 100%; /* Ukuran relatif terhadap ikon */

    background-color: white;

    border-radius: 50%;

    opacity: 0;

    transition: opacity 0.3s ease, transform 0.3s ease;

    z-index: -1;

    transform: scale(0); /* Mulai dari skala 0 agar tidak terlihat */

}



.navigation-hero-facility .icon-left-facility:hover::after,

.navigation-hero-facility .icon-right-facility:hover::after {

    opacity: 1;

    transform: scale(1); /* Melebar ke ukuran penuh */

}



.navigation-hero-facility .icon-left-facility:hover,

.navigation-hero-facility .icon-right-facility:hover {

    color: #000; /* Ubah warna ikon saat hover */

}

/* --------------------------------------- Facility ------------------------------ */



.facility-gallery-container {

    margin-left: 100px;

    min-height: 500px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



.row{

    display: flex;

}

.padding-top {

    padding-top: 2em;

}



.flex-direction-colunn{

    flex-direction: column;

}



.justify-content-start{

    justify-content: start;

}



.justify-content-end{

    justify-content: end;

}



.justify-content-center{

    justify-content: center;

}



.align-items-center{

    align-items: center;

}



.col{

    display: flex;

    flex-direction: column;

}

.relative {

    position: relative;

}

.height-auto {

    height: auto;

}

.h-100{

    height: 100%;

}

.vx-50{

    width: 50%;

}

.vx-60{

    width: 60%  ;

}

.vx-65{

    width: 65%  ;

}

.vx-90{

    width: 90%  ;

}



.vx-100-p{

    width: 100%;

}

.vx-80{

    width: 80%;

}

.vx-85{

    width: 85%;

}





.x-60{

    width: 60vw;

}



.x-100{

    width: 100%;

}



.vx-100{

    width: 100vw;

}



.facility-gallery-title-section {

    display: flex;

    flex-direction: column;

    align-items: left;

    justify-content: left;

    text-align: left;

}



.facility-gallery-title-button {

    display: flex;

    align-items: center;

    text-align: center;

    justify-content: center;

    border-radius: 100px;

    border: 1px solid #d16d15;

    padding: 10px 1em 10px 1em;

    width: 100px;

}



.overflow-hidden{

    overflow: hidden;

}

.title-desc-container {

    position: relative;

}

.facility-gallery-title-button > h5 {

    font-size: 16px;

    font-weight: 700px;

    color: #D16D15;

}



.facility-gallery-title {

    /* visibility: hidden; */

    display: block;

    padding: 10px 0 10px 0;

    opacity: 1;

    transition: opacity 0.5s ease, visibility 0.5s ease;

}



.facility-gallery-title > h1{

    font-size: 36px;

    font-weight: 700;

    color: #d16d15;

}

.active {

    opacity: 1; /* Elemen menjadi terlihat saat kelas ini diterapkan */

}

/* #current-title, #current-desc {

    opacity: 1;

} */

.fade-enter, .fade-exit {

    opacity: 0;

    transition: opacity 0.5s ease;

}



.fade-enter-active, .fade-exit-active {

    opacity: 1;

}



.facility-gallery-desc {

    /* visibility: hidden; */

    display: block;

    padding: 5px 0 10px 0;

    width: 90%;

    opacity: 1;

    transition: opacity 0.5s ease, visibility 0.5s ease;

    text-align: justify;

}



.facility-gallery-desc > p {

    font-size: 20px;

    font-weight: 300;

}



.facility-gallery-carousel-section{

    min-width: 60vw;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: flex-start;

    padding: 16px 0;

    scroll-behavior: smooth;

    overflow-x: auto;

    cursor: grab;

    position: relative;

}

.facility-gallery-carousel-section:active {

    cursor: grabbing;

}

.facility-gallery-picture.active{

    width: 80%;

    overflow: hidden;

    background-color: black;

    transform: scale(1), translateX(0);

    margin: 0 5px;

    z-index: 1;

}

.custom-facility-container{

    width: 43vw;

    margin: 24px 0 64px 0;

    scrollbar-width: thin;

    scrollbar-color: #8880 #f1f1f100;

}

.custom-facility-container::-webkit-scrollbar {

    height: 8px;

    border-radius: 8px;

}

.custom-facility-container::-webkit-scrollbar-track {

    background: #f1f1f1;

    border-radius: 8px;

}

.custom-facility-container::-webkit-scrollbar-thumb {

    background-color: #888;

    border-radius: 8px;

}

.custom-facility-container::-webkit-scrollbar-thumb:hover {

    background: #555;

    border-radius: 8px;

}

.facility-gallery-picture{

    transition: all 0.5s ease;

    width: 300px;

    height: 200px;

    margin: 0 5px;

    background-color: black;

    border-radius: 20px;

    overflow-x: auto;

    position: relative;

}

.facility-gallery-picture > img{

    /* background-size: cover;

    background-position: center; */

    border-radius: 20px;

    height: 100%;

    object-fit: cover;

    object-position: center;

    position: absolute;

    width: 100%;

    z-index: 1;

}

.facility-gallery-overlay {

    position: absolute;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    background-color: rgba(0, 0, 0, 0.5);

    width: 100%;

    height: 100%;

    z-index: 3;

    color:white;

}

.facility-gallery-overlay h1 > a{

    text-decoration: none;

    color: white;

    font-size: 1vw;

}



/* --------------------------------- Masterpiece ------------------------------ */



.masterpiece-container{

    display: flex;

    flex-direction: column;

    align-items: center;

    /* justify-content: center; */

    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/masterpiece.jpeg'); /* Sesuaikan dengan path gambar Anda */

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

}

.masterpiece-section{

    display: flex;

    flex-direction: column;

    margin: 10em 0 10em 0;

    align-items: center;

    color: white;

}

.masterpiece-title{

    padding: 10px 0 10px 0;

    display: flex;

    flex-direction: column;

    /* align-items: center;

    justify-content: center; */

}

.masterpiece-title > h1{

    font-size: 36px;

    font-weight: 700;

}

.masterpiece-title > h2{

    font-size: 24px;

    font-weight: 500;

}



/* ------------------------------------ Gallery -------------------------------- */



.gallery-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}

.gallery-section {

    width: 60%;

    padding: 4em 0 4em 0;

    aspect-ratio: 352/352;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-template-rows: repeat(3, 1fr);

    grid-gap: 30px;

}

.gallery-item {

    position: relative;

    width: 100%;

    aspect-ratio: 1/1;

}

.gallery-item > img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    border-radius: 5px !important;

}

.gallery-title {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background-color: rgba(0, 0, 0, 0.7);

    color: white;

    opacity: 0;

    transition: opacity 0.5s ease;

}

.gallery-item:hover .gallery-title {

    opacity: 1;

}

.gallery-title > h2 {

    font-size: 24px;

    font-weight: 700;

}

.gallery-title > h3 {

    font-size: 18px;

    font-weight: 300;

    padding: 25px;

}



/* --------------------------------- FACILITY END --------------------------------- */

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



/* --------------------------------- CONTACT US START --------------------------------- */

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



.contactus-container{

    padding: 6em 0 6em 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}

.contactus-title{

    padding : 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

.contactus-title > h1{

    font-size: clamp(1.3125rem, 0.9519rem + 1.1538vw, 2.25rem);

    font-weight: 700;

    color: #d16d15;

    padding-bottom: 5px;

}

.contactus-title > h2{

    font-size: clamp(1.125rem, 0.9808rem + 0.4615vw, 1.5rem);

    font-weight: 400;

}

.contactus-info-container{

    display: flex;

    flex-direction: row;

    padding-top: 3em;

    gap: 3em;

}

.contactus-info{

    display: flex;

    flex-direction: column;

    align-items: left;

    justify-content: left;

}

.info-title {

    text-align: left;

    padding-bottom: 3px;

}

.info-title > h2{

    font-size: clamp(1.3125rem, 1.2404rem + 0.2308vw, 1.5rem);

    font-weight: 700;

    color: #d16d15;

}

.info-maps{

    display: flex;

    align-items: left;

    justify-content: left;

    width: 100%;

    padding-bottom: 4em;

}

.info-detail-box{

    display: flex;

    flex-direction: column;

    align-items: left;

    justify-content: left;

    text-align: left;

    width: 80%;

}

.info-detail-item > h4 {

    width: 80%;

}

.info-detail-item > i {

    color: black;

    padding-right: 40px;

}

.info-detail-item{

    display: flex;

    flex-direction: row;

    padding-bottom: 10px;

}

.detail > h4 {

    font-size: 16px;

    font-weight: 400;

}

.detail {

    display: flex;

    flex-direction: column;

    align-items: left;

    justify-content: center;

}

.contactus-data {

    display: flex;

    flex-direction: column;

    align-items: left;

    justify-content: left;

    text-align: left;

    width: 55%;

}

.form-section {

    color: #d16d15;

}

.form-title, .form-input, .form-title-2, .form-title-3{

    font-size: 14px;

    font-weight: 500;

}

.form-input > input, .form-email > input, .form-company > input {

    padding: 0.7em;

    border-radius: 5px;

    border:1px solid #929292;

    width: 100%;



}

.form-input > textarea {

    font-family: inherit;

    border-radius: 5px;

    padding: 10px;

    width: 100%;

    height: 28vh;

}

.form-input{

    display: flex;

    flex-direction: row;

}

.form-email{

    width: 60%;

    padding-right: 15px;

}

.form-company {

    width: 40%;

}

.form-email, .form-company,.form-title-2, .form-message{

    padding-top: 10px;

}

.form-title-3{

    padding-bottom: 10px;

    color: #929292 ;

}

.form-message > .form-input input{

    display: flex;

    flex-direction: column;

    align-items: left;

    justify-content: center;

    padding: 1em;

    height: 30vh;



}

.form-send{

    padding-top: 20px;

}

.form-send > button {

    width: 40%;

}





/* --------------------------------- CONTACT US END --------------------------------- */

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



/* --------------------------------- FAQ START --------------------------------- */

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



.faq-question-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background-color: #003D5C;

}

.faq-hero-section {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    padding: 3em 1em;

    height: 34%;

    z-index: 3

}

.faq-img-title-container{

    display: flex;

    /* flex-direction: row; */

    align-items: center;

    justify-content: center;

    gap: 2em;

}

.faq-img-box {

    display: block;

    max-width: 100%;

    height: auto;

    aspect-ratio: unset;



}

.faq-title {

    display: flex;

    flex-direction: column;

    justify-content: center;

    color:white;

    align-items: left;

    text-align: left;

}

.faq-title > h2 {

    font-size: 36px;

    font-weight: 700;

    padding-top: 2em;

}

.faq-title > h1 {

    font-size: clamp(2.25rem, 1.5769rem + 2.1538vw, 4rem);

    font-weight: 800;

    padding-bottom: 1.5em;

}

.search-box {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: left ;

    text-align: left;

    border: 1px solid #A3A3A3;

    border-radius: 5px;

    width: 60%;

    padding: 1.5em;

    background-color: white;

}

.search-box > input {

    padding-left: 20px;

    width: 100%;

    font-size: clamp(0.6875rem, 0.5673rem + 0.3846vw, 1rem);

    font-weight: 400;

    border: none;

    outline:none;

    flex-grow: 1;



}

/* a > i {

    font-size: 24px;

    padding: 0.5em;

    color:black;

} */



.topic-section {

    margin: 6em 1em;

}

.topic-title-section {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    color: #d16d15;

}

.topic-title-section > h1 {

    font-size: 36px;

    font-weight: 700;

    padding-bottom: 1em;

}

.topic-title-menu-section {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    width: 100%;

    padding-bottom: 5em;

    justify-content: center;

}

.topic-hover-title a {

    text-decoration: none;

    color: white;

}

.topic-title {

    width: 50px;

    position: relative;

    display: flex;

    text-align: center;

    align-items: center;

    justify-content: center;

    transition: transform 0.3s ease; /* Smooth scaling transition */

    padding: 2em 5em 2em 5em;

    border: 1px solid #E7E7E7;

    border-radius: 5px;

    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

}



.topic-title img {

    width: 100%; /* Image takes full width of its container */

    height: auto; /* Maintain aspect ratio */

    transition: transform 0.3s ease; /* Smooth scaling transition */

    padding: 1em;

}



.topic-title:hover img {

    transform: scale(1.1); /* Scale up image on hover */



}



.topic-hover-title {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #0056b3; /* The blue background on hover */

    color: white;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    opacity: 0; /* Hide by default */

    transition: opacity 0.3s ease; /* Fade transition for hover */

    border-radius: 5px;

}



.topic-title:hover .topic-hover-title {

    opacity: 1; /* Show title on hover */

}



.topic-title.active {

    border-color: #0068D3; /* Border biru ketika aktif */

}





.topic-hover-title h2 {

    font-size: 15px;

    margin: 0;

    padding: 20px;

    background-color: transparent; /* Transparent background for the text */

    width: 100%;

    box-sizing: border-box; /* To include padding in width */

}

.topic-title-section-2 {

    width: 100%;

    display: none ;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    color: #d16d15;

    opacity: 0;

    overflow: hidden;

}

.topic-title-section-2.show {

    transition: opacity 0.5s ease;

    display: flex ;

    opacity: 1;

    height: auto;

}

.topic-title-section-2 >h1{

    font-size: 36px;

    font-weight: 700;

    color: #D16D15;

    padding-bottom: 1em;

}



.topic-menu{

    width: 85%;

    display: flex;

    flex-direction: column;

    align-items: left;

    justify-content: left;

    text-align: left;

}

.topic-menu > h1{

    font-size: 36px;

    font-weight: 700;

    color: #D16D15;

}

.topic-menu-desc {

    max-width: 100%;

    display: flex;

    flex-direction: column;

    text-align: left;

    padding: 2em 0 0 0;

}

/* .topic-menu-desc-title{

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    text-align: left;

    padding: 2em 0 1em 0;

    border-bottom:2px solid #0068D3 ;



} */

.topic-menu-desc-title {

    width: 100%;

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    text-align: left;

    padding: 0 0 1em 0;

    /* border-bottom:2px solid #0068D3 ; */

}



.topic-menu-detail {



    overflow: hidden; /* Keep this to hide content when collapsed */

    max-height: 0; /* Start with zero height */

    transition: max-height 0.5s ease-in-out; /* Transition for max-height */

    flex-direction: column; /* Keep flex styling here */

    align-items: flex-start;

    text-align: left;

    border-bottom: 2px solid #0068D3;

}



.topic-menu-detail.open {

    max-height: 500px; /* Adjust based on your content's needs */

    border-bottom: 2px solid #0068D3;

    padding-bottom: 10px; /* Padding to maintain spacing */

    pdding-left: 40px;

}



.bi-arrow-right {

    transition: transform 0.3s ease !important;

}



.bi-arrow-right.rotate-icon {

    transform: rotate(90deg) !important; /* Or whatever angle you desire */

}







.topic-menu-desc-title > h2, .topic-menu-desc-title-1 > h2{

    font-size: clamp(0.9375rem, 0.7212rem + 0.6923vw, 1.5rem);

    font-weight: 500;

    color: black;

}

.topic-menu-detail > p{

    font-size: clamp(0.9375rem, 0.8173rem + 0.3846vw, 1.25rem);

    font-weight: 500;

    color: #414141;

    white-space: break-spaces;

}

.topic-menu-desc-title > i{

    font-size: clamp(0.9375rem, 0.7212rem + 0.6923vw, 1.5rem);

    font-weight: 500;

    color: black;

}



/* --------------------------------- FAQ END --------------------------------- */

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



/* --------------------------------- CAREER START --------------------------------- */

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



.career-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background-color: #003D5C;

    margin-top: -106px;

    margin-bottom: 5em;

}



.career-hero-section {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 4em 1em;

    height: 38%;

    z-index: 3;

}



.career-img-title-container {

    display: flex;

    flex-direction: row; /* Aligns items in a row */

    align-items: center;

    justify-content: center;

    gap: 2em;

    flex-wrap: wrap; /* Allows items to wrap if the container is too small */

}



.career-img-box {

    /* Make sure to remove 'display: block;' if you want flex properties to apply */

    aspect-ratio: 619/600;

    max-width: 100%;

    width: 20%;

    height: auto;

}



.career-title {

    color: white;

    text-align: left;

    width: 50%;

}

.career-title > button{

    font-size: 15px;

    font-weight: 700;

    width: 30%;

}



.career-title > h2 {

    font-size: 30px;

    font-weight: 700;

    /* padding-top: 0.5em; */

    padding-bottom :0.5em;

}

.career-title > h1 {

    font-size: 40px;

    font-weight: 700;

    padding-top: 0.5em;

    padding-bottom: 1.5em;

}



.life-section {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 20px;

}



.life-title {

    text-align: center;

    margin-bottom: 20px; /* Adds space between title and gallery */

    padding-top: 6em;

}



.life-title h1 {

    font-size: 36px; /* Large text for main title */

    font-weight: 700;

    margin-bottom: 10px; /* Space between the main title and subtitle */

    color:#E67817;

}



.life-title h2 {

    font-size: 24px; /* Smaller text for subtitle */

    font-weight: 400;

    color: black; /* Lighter text color for subtitle */

    max-width: 800px; /* Limits the width of the subtitle */

    margin: 0 auto; /* Center the subtitle if it's less than max width */

}



.life-section {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 20px;

}



.life-title {

    text-align: center;

    margin-bottom: 20px; /* Adds space between title and gallery */

    padding-top: 6em;

}



.life-title h1 {

    font-size: 36px;

    font-weight: 700;

    margin-bottom: 10px; /* Space between the main title and subtitle */

    color: #E67817;

}



.life-title h2 {

    font-size: 24px; /* Smaller text for subtitle */

    font-weight: 400;

    color: black; /* Lighter text color for subtitle */

    max-width: 800px; /* Limits the width of the subtitle */

    margin: 0 auto; /* Center the subtitle if it's less than max width */

}



.life-gallery-section {

    display: grid;

    grid-template-columns: repeat(3, 1fr); /* Keep three columns */

    grid-template-rows: repeat(2, 1fr); /* Keep two rows */

    grid-template-areas:

    'area1 area2 area6'

    'area1 area3 area5'

    'area1 area4 area5'



    ;

    gap: 20px; /* Smaller gap size for a smaller overall layout */

    width: 60%; /* Smaller width of the grid container if necessary */

    padding: 2em 0 5em 0; /* Smaller padding */

    margin: auto; /* Center the section */

}



.life-gallery-item {

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Smaller shadow for a more subtle effect */

    border-radius: 5px; /* Keep rounded corners */

    overflow: hidden; /* Hide overflow */

    display: flex; /* Use flexbox for centering */

    justify-content: center; /* Center content horizontally */

    align-items: center; /* Center content vertically */

}

.area1{

    grid-area: area1;

}

.area2{

    grid-area: area2;

    width: 18.8vw;

}

.area3{

    grid-area: area3;

    width: 18.8vw;

}

.area4{

    grid-area: area4;

    width: 18.8vw;

}

.area5{

    grid-area: area5;

}

.area6{

    grid-area: area6;

    width: 18.8vw;

}

.life-gallery-item img {

    width: 100%; /* Image will fill the width of the container */

    height: 100%; /* Adjust height automatically to maintain aspect ratio */

    object-fit: cover; /* Cover the area without stretching */

}

.life-gallery-item.area1 img {

    height : 100%;

    object-fit: cover; /* Cover the area without stretching */

}

.life-gallery-item.area5 img {

    height: 100%; /* Adjust height automatically to maintain aspect ratio */

    object-fit: cover; /* Cover the area without stretching */

}



.benefit-container{

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background-color: #0068D3;

}

.benefit-section{

    padding: 24px 0;

    width: 60%;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

}

.benefit-title{

    display: flex;

    flex-direction: column;

    align-items: left;

    text-align: left;

    justify-content: left;

    width: 58%;

    padding: 1em;

}

.benefit-title > h2{

    font-size: clamp(1.3125rem, 1.2404rem + 0.2308vw, 1.5rem);

    font-weight: 500;

    color: white;

    padding-bottom: 10px;

}

.benefit-title > h1{

    font-size: clamp(1.3125rem, 0.9519rem + 1.1538vw, 2.25rem);

    font-weight: 700;

    color: white;

}



.benefit-gallery {

    display: grid;

    grid-template-columns: repeat(2, 1fr); /* Two columns */

    grid-template-rows: repeat(3, auto); /* Three rows, but will create more if there are more than 6 items */

    width: 100%; /* Adjust if you want to set a max width for the container */

    margin: auto; /* Center the container on the page */

}



.benefit-item-section {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border: 2px solid white; /* Example border */

    padding: 10px; /* Example padding */

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Example shadow */

}



.benefit-item-img {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

.benefit-item-img img {

    width: 30%; /* Image will fill the width of its container */

    height: auto; /* Maintain aspect ratio */

    object-fit: cover; /* Cover the area without stretching */

    border-radius: 5px; /* If you want rounded corners for images */

    padding: 20px;

}



.benefit-item-img-desc p, .benefit-item-desc p {

    margin: 5px 0; /* Space between paragraphs and around them */

    color:white;

    font-weight: 500;

}

.benefit-item-img-desc p {

    font-size: 16px;

}

.benefit-item-desc p {

    font-size: 14px;

}



.position-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

.position-section{

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;

}

.current-position-section{

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    text-align: left;

    padding: 20px 20px;

    background-color: #E7E7E7;

    width: 97vw;

}

.current-position-desc{

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    align-items: center;

    text-align: left;

    width: 60%;

}

.current-position-desc > h2{

    font-size: 24px;

    font-weight: 500;

}

.current-position-desc > h1{

    font-size: clamp(1.3125rem, 0.9519rem + 1.1538vw, 2.25rem);

    font-weight: 700;

    width: 70%;

}

.position-available-section {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 50px 30px;

}

.carrer-pagination-nav{

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1em;

    margin: 24px 0;

}

.pagination-nav{

    border-radius: 4px;

    padding: 8px 16px;

    border: solid 1px lightgrey;

    transition: 0.3s ease-in-out;

}

.pagination-nav:hover{

    cursor: pointer;

    background-color: rgb(231, 231, 231);

}

.position-available {

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    text-align: left;

    margin: 1em;

    padding: 2em;

    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

    width: 100%;

    background-color: white;

}

.position-name{

    color:#D16D15;

    padding-right: 15em;

}

.position-name > h2{

    font-size: clamp(1.3125rem, 1.2404rem + 0.2308vw, 1.5rem);

    font-weight: 500;

}

.position-name > h3{

    font-size: clamp(0.875rem, 0.7308rem + 0.4615vw, 1.25rem);

    font-weight: 400;

}

.position-apply {

    display: flex;

    align-items: center;

    text-align: center;

}

.position-apply > a{

    font-size: clamp(0.6875rem, 0.4231rem + 0.8462vw, 1.375rem);

    text-decoration: none;

    color:black;

}

a > i{

    font-size: 26px;

}



/* --------------------------------- CAREER END --------------------------------- */

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



/* --------------------------------- CAREER DESC START --------------------------------- */

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



.desc-career-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

.desc-career-container form {

    width: 100%;

}

.desc-career-section {

    display: flex;

    flex-direction: column;

    align-items: left;

    justify-content: center;

    text-align: left;

    padding-bottom: 14em;

    /* width: 45%; */

}

.desc-career-title-with-desc {

    text-align: left;

    padding: 10px 0 10px 0;

    width: 37vw;

}

.desc-career-title {

    padding-bottom: 20px;

    color:#D16D15;

}

.desc-career-title > h1 {

    font-size: 36px;

    font-weight: 700;

}

.desc-career-jobdesc{

    font-size: 18px;

    font-weight: 300;

    text-align: justify;

}

.desc-career-jobdesc > p{

    font-size: 18px;

    font-weight: 300;

}

.desc-career-form-section{

    display: flex;

    flex-direction: column;

    height: 100vh;

}

.desc-career-form {

    display: flex;

    flex-direction: row;

    align-items: left;

    justify-content: center;

    text-align: left;

    padding-top: 20px;

}

/* .form-section-row {

    display: flex;

    flex-direction: row;

    align-items: left;

    justify-content: center;

    text-align: left;

} */

.form-title {

    display: flex;

    flex-direction: column;

    color: #D16D15;

}

.form-title > p{

    font-size: 14px;

    font-weight: 500;

}

.form-desc-input {

    padding-right: 1em;

}

.form-desc-input > input{

    font-family: inherit;

    padding: 1em;

    font-size: 12px;

    font-weight: 500;

}

.form-desc-message-input > textarea{

    font-family: inherit;

    padding: 1em;

    width: 100%;

    height: 28vh;

    font-size: 12px;

    font-weight: 500;

}

.form-message-section {

    padding-right: 1em;

    width: 100%;

    color:#d16d15;

}

.dropbox-file {

    color: black;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    margin-right: 1em;

    padding: 1em;

    border-radius: 5px;

    width: 94%;

    height: 20vh;

    font-size: 12px;

    font-weight: 500;

    border: 1px solid rgba(0, 0, 0, 0.274);

}

.dropbox-file p > a {

    text-decoration: none;

}

.dropbox-file input {

    width: 50%;

}

.form-button{

    display: flex;

    justify-content: center;

    padding-top: 1em;



}

.button {

    padding-right: 1em;

}

.button > button.back {

    background: white !important;

}

button.back a {

    color:#0085c8 !important;

    text-decoration: none !important;

}

button:hover.swal2-confirm.swal2-styled.swal2-default-outline, button:hover.swal2-cancel.swal2-styled.swal2-default-outline, button:hover.swal2-confirm.swal2-styled {

    box-shadow: none !important;

    transform: none !important;

    border-bottom: none !important;

}

.related-jobs-section{

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background-color: #E7E7E7;

    width: 100%;

}

.related-jobs-title{

    padding: 5em 0 0 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



/* --------------------------------- CAREER DESC END --------------------------------- */

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



/* --------------------------------- PRODUCTS START --------------------------------- */

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



.products-container{

    min-height: 70vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    /* background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/products-hero.jpeg'); */

    background-size: cover;

    background-position: center;

    object-fit: cover;

    /* filter: brightness(50%); */

    margin-top: -106px;

    margin-bottom: 10px;



}

.products-hero-section {

    width: 90%;

    margin-top: 15vh;

    display: flex;

    flex-direction: column;

    align-items: left;

    justify-content: left;

    text-align: left;

    text-shadow: 1px 1px 5px BLACK;

}

.products-hero-title, .products-hero-title-bold{

    padding-bottom: 10px;

    color: white;

    width: 100%;

}

.products-hero-title > h1{

    font-size: clamp(1rem, -0.1538rem + 3.6923vw, 4rem);

    font-weight:500 ;

}

.products-hero-title-bold > h1{

    font-size: clamp(1rem, -0.1538rem + 3.6923vw, 4rem);

    font-weight: 700;

}

.products-hero-desc{

    padding-bottom: 3em;

    color: white;

    width: 60%;

}

.products-hero-desc > h3{

    font-size: clamp(0.5rem, 0.2115rem + 0.9231vw, 1.25rem);

    font-weight: 400;

}

.products-hero-section > .button-more > button{

    width: 15%;



}



.highlight-product-container{

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.highlight-product-title{

    display: flex;

    align-items: left;

    justify-content: left;

    padding:3em 0 1em 0;

    text-align: left;

    color:#D16D15 ;

}



.highlight-product-section {

    display: grid;

    grid-template-columns: repeat(2, 1fr); /* Creates exactly two columns */

    grid-template-rows: repeat(3, auto); /* Creates three rows that fit content */

    gap: 20px; /* Space between grid items */

    padding: 20px; /* Padding inside the grid container */

    width: 60%;

}



.highlight-product-item {

    /* border: 1px solid #ccc;  */

    border-radius: 14px; /* Rounded corners */

    overflow: hidden; /* Hide overflow */

    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

}



.highlight-product-img img {

    /* border-bottom-left-radius: 15px;

    border-bottom-right-radius: 15px; */

    width: 100%; /* Image will fill the width of its container */

    height: auto; /* Maintain aspect ratio */

    object-fit: cover; /* Cover the area without stretching */

}

.highlight-product-img a, .highlight-product-desc-title a, .product-line-img a , .product-line-desc-item a{

    text-decoration: none;

    color: #D16D15 ;

}



.highlight-product-desc {

    padding: 20px; /* Padding around the description text */

}



.highlight-product-desc-title h1 {

    color: #D16D15;

    font-size: clamp(0.75rem, 0.4615rem + 0.9231vw, 1.5rem);

    font-weight:700 ; /* Large text for the title */

    margin-bottom: 10px; /* Space below the title */

}

.product-line-container{

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

.product-line-title{

    padding:1em 0 1em 0;

    text-align: center;

    color:#D16D15 ;

}

.product-line-desc{

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: center;

    color: #606060;

    width: 57%;

}

.product-line-desc > h2 {

    font-size: 24px;

    font-weight:500 ;

}

.highlight-product-desc-item p {

    color: #606060;

    font-weight: 400;

    font-size: clamp(0.6875rem, 0.4712rem + 0.6923vw, 1.25rem);

    line-height: 1.3; /* Space between lines of text */

}



.product-line-section {

    display: grid;

    grid-template-columns: repeat(4, 1fr); /* Three columns */

    grid-template-rows: repeat(3, auto); /* Four rows that fit content */

    gap: 20px; /* Space between grid items */

    padding: 5em; /* Padding inside the grid container */

    padding-bottom: 0;

    /* If you want to limit the width or center the grid, you can uncomment the following lines: */

    width: 65%;

    /* margin: auto; */

}

.flex {

    display: flex;

}



.items-center {

    align-items: center;

}



.justify-between {

    justify-content: space-between;

}



.flex-1 {

    flex: 1;

}



.hidden {

    display: none;

}

.z-0 {

    z-index: 0;

}



.inline-flex {

    display: inline-flex;

}



.shadow-sm {

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

}



.rounded-md {

    border-radius: 0.375rem; /* Adjust this value as needed for a medium rounded corner */

}

.px-2 {

    padding-left: 0.5rem; /* 8px */

    padding-right: 0.5rem; /* 8px */

}



.py-2 {

    padding-top: 0.5rem; /* 8px */

    padding-bottom: 0.5rem; /* 8px */

}



.text-sm {

    font-size: 0.875rem; /* 14px */

}



.font-medium {

    font-weight: 500;

}



.text-gray-500 {

    color: #6b7280; /* Adjust this value based on your color palette */

}



.bg-white {

    background-color: #ffffff;

}



.border {

    border-width: 1px;

}



.border-gray-300 {

    border-color: #d1d5db; /* Adjust this value based on your color palette */

}



.cursor-default {

    cursor: default;

}



.rounded-l-md {

    border-top-left-radius: 0.375rem; /* 6px */

    border-bottom-left-radius: 0.375rem; /* 6px */

}



.leading-5 {

    line-height: 1.25rem; /* 20px */

}

.w-5 {

    width: 1.25rem; /* 20px */

}



.h-5 {

    height: 1.25rem; /* 20px */

}



@media (min-width: 640px) {

    .sm\:hidden {

        display: none;

    }



    .sm\:flex-1 {

        flex: 1;

    }



    .sm\:flex {

        display: flex;

    }



    .sm\:items-center {

        align-items: center;

    }



    .sm\:justify-between {

        justify-content: space-between;

    }

}



.pagination {

    display: flex;

    justify-content: center;

    margin-top: 20px;

    list-style: none;

    padding: 0;

}



.pagination a,

.pagination span {

    margin: 0 5px;

    padding: 10px 15px;

    text-decoration: none;

    transition: background-color 0.3s, color 0.3s;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.pagination a {

    border: 1px solid #ddd;

    color: #007bff; /* Default link color */

}



.pagination a:hover {

    background-color: #f1f1f1;

    color: #0056b3; /* Hover link color */

}



.pagination .active span {

    background-color: #007bff;

    color: white;

    border: 1px solid #007bff;

}



.pagination .disabled span {

    color: #ddd;

    cursor: not-allowed;

}



.pagination span {

    color: #333;

}



.pagination a:first-child,

.pagination a:last-child,

.pagination span:first-child,

.pagination span:last-child {

    border-radius: 0.375rem; /* Rounded corners for first and last pagination links */

}



.pagination .page-link svg {

    width: 1.25rem; /* 20px */

    height: 1.25rem; /* 20px */

}

p.text-sm.text-gray-700.leading-5 {

    display: none;

}







.product-line-item {

    /* border: 1px solid #ccc; Example border */

    border-radius: 5px; /* Rounded corners */

    overflow: hidden; /* Hide overflow */

    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

    /* If you want to maintain a consistent size for all items, you can uncomment the following line: */

    /* height: 200px; */

}



.product-line-img img {

    width: 100%; /* Image will fill the width of its container */

    height: 30vh; /* Maintain aspect ratio */

    object-fit: cover; /* Cover the area without stretching */

}



.product-line-desc-item h1 {

    color: #E67817;

    font-size: clamp(1rem, 0.7837rem + 0.6923vw, 1.5625rem);

    margin: 1em 0; /* Space above and below the title */

    text-align: center; /* Center the title */

}



/* --------------------------------- PRODUCTS END --------------------------------- */

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



/* --------------------------------- PRODUCTS DETAIL START --------------------------------- */

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



.detail-product-container{

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

.detail-product-section{

    width: 72%;

    padding: 3em 0em 3em 0em;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

}

.detail-product-preview-section {

    display: flex;

    flex-direction: column;

    width: 30%;

    margin-right: 24px;

}



.detail-product-main{

    border: 1px solid #ccc;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    overflow: hidden;

    width: 360px;

    aspect-ratio: 3/4;

}



.detail-product-main img{

    height: 100%;

    object-fit: cover;

    object-position: center;

}



.detail-product-carousel{

    margin-top: 1em;

    width: 360px !important;

    display: flex;

}



.detail-product-desc-section{

    display: flex;

    flex-direction: column;

    text-align: left;

    padding-left: 50px;

}

.detail-product-desc-title{

    padding-bottom: 10px;

}

.detail-product-desc-title > h2{

    font-size: clamp(1.3125rem, 0.9519rem + 1.1538vw, 2.25rem);

    font-weight: 500;

    color: #D16D15;

}

.detail-product-desc-title > h1{

    font-size: clamp(1.375rem, 1.1346rem + 0.7692vw, 2rem);

    font-weight: 700;

    color: #D16D15;

}

.detail-product-desc {

    padding-bottom: 5px;

    width: 90%;

}

.detail-product-desc > p{

    font-size: clamp(1rem, 0.9038rem + 0.3077vw, 1.25rem);

    font-weight: 400;

}

.detail-product-desc-point {

    padding: 1em; /* Add padding around the container */

    margin: 1em 0; /* Space above and below the point list */

    border-bottom: 1px solid black;

}





.detail-product-desc-point p {

    font-size: clamp(0.75rem, 0.6538rem + 0.3077vw, 1rem);

    font-weight: 400;

    padding: 0.5em 0; /* Padding above and below each point */

    margin: 0; /* Remove the default margin */

}



/* Remove border from the last point */

.detail-product-desc-point p:last-child {

    border-bottom: none;

}



/* If you want to add bullets */

.detail-product-desc-point p::before {

    content: '• '; /* Bullet character */

    color: black; /* Bullet color */

    font-weight: bold; /* Make the bullet bold */

    display: inline-block; /* Needed for ::before content */

    width: 1em; /* Space for the bullet */

    margin-left: -1em; /* Align the bullet outside the text block */

}



.detail-product-desc-type{

    width: 100%;

}

.detail-product-desc-type > h4 {

    font-size: clamp(0.75rem, 0.4615rem + 0.9231vw, 1.5rem);

    font-weight: 700;

    color: #D16D15;

    display: flex;

    margin: 5px;

}

.detail-product-desc-type h4 > p {

    font-size: clamp(0.75rem, 0.4615rem + 0.9231vw, 1.5rem);

    font-weight: 400;

    color: black;

}



.detail-product-full-desc-section{

    display: flex;

    flex-direction: column;

    text-align: left;

    padding: 1em 0 2em 0;

    width: 90%;

}

.detail-product2{

    display: flex;

    flex-direction: column;

    text-align: left;

    padding: 1em 0 2em 0;

    width: 72%;

}

.detail-product-full-desc-title{

    color:#D16D15;

    border-bottom: 1px solid black;

}

.detail-product-full-desc-title > h1{

    font-size: clamp(1.875rem, 1.7788rem + 0.3077vw, 2.125rem);

    font-weight: 700;

    padding-bottom: 20px;

}

.detail-product-full-desc {

    padding: 10px 0 10px 0;

    width: 96%;

}

.detail-product-full-desc > p{

    padding: 10px 0 10px 0;

    font-size: clamp(1rem, 0.9038rem + 0.3077vw, 1.25rem);

    font-weight: 400;

}



.detail-product-related-section {

    display: grid;

    grid-template-columns: repeat(5, 1fr); /* Creates five columns */

    gap: 5em; /* Space between grid items */

    padding: 20px; /* Padding inside the grid container */

    /* Optional: max-width to ensure it doesn't stretch too wide on larger screens */

    max-width: 1200px; /* Adjust as needed */

    margin: auto; /* Center the section on the page */

}



.detail-product-related-item {

    /* Add any borders, shadows, or padding you desire here */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    border-radius: 5px;

    overflow: hidden;

    text-align: center; /* If you want to center the text */

}



.detail-product-related-img img {

    width: 100%; /* Ensure the image fills the container */

    height: auto; /* Maintain aspect ratio */

    object-fit: cover; /* Cover the area of the container without stretching */

}



.detail-product-related-title{

    margin: 20px 0; /* Add space above and below the title */

    padding: 0 10px; /* Add some padding to the left and right */

}

.detail-product-related-title a {

    text-decoration: none;

    color: #D16D15;

}

.detail-product-related-desc{

    margin: 10px 0; /* Add space above and below the title */

    padding: 0 20px; /* Add some padding to the left and right */

}

.detail-product-related-title h4 {

    font-size: 16px;

    font-weight: 700;

    color: #D16D15;

}

.detail-product-related-desc p{

    font-size: 12px;

    font-weight: 400;

    color: #D16D15;

}

.owl-nav{

    display: none;

}



.tablet-show-flex{

    display: none;

}



.mobile-show-flex{

    display: none;

}

.tablet-hide{

    display: flex;

}

.desktop-hide {

    display: none;

}





/* TABLET ADJUSTMENT */

@media (max-width: 1200px) {

    body {

        overflow-x: hidden;

    }

    .reason-mobile{

        display: none   ;

    }

    .tablet-show-flex{

        display: flex;

        padding: 10px;

    }



    .dropdown-content {

        flex-direction: column;

        position: fixed;

        background-color: #f9f9f9;

        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

        z-index: 999;

        width: 100%; /* Full width for mobile view */

        right: 0;

        max-height: 0;

        overflow: hidden;

        transition: max-height 0.5s ease-in-out;

        top: 75px;

        justify-content: center;

        align-items: center;



    }

    .dropdown-content.show {

        display: flex;

        max-height: 400px;

        align-items: center;

        justify-content: center;

    }



    .dropdown-content a {

        color: black;

        padding: 12px 16px;

        text-decoration: none;

        display: block;

        text-align: left;

    }



    .dropdown-content:hover {

        background-color: #f1f1f1;

    }

    #hamburger-icon-img {

        display: inline-block;

        transition: transform 0.3s, opacity 0.3s; /* Transisi halus untuk transformasi dan opasitas */

    }



    .bi-list, .bi-x-lg {

        color: white;

        transition: transform 0.3s, opacity 0.3s;

    }



    .toggle-x {

        transform: rotate(90deg); /* Rotasi untuk efek pergantian */

        opacity: 0; /* Mulai dengan tidak terlihat */

    }



    .topbar-menu, .topbar-title {

      font-size: 14px; /* Sesuaikan ukuran font di perangkat mobile */

    }

    .reason-mobile{

        display: flex;

    }

    .logo {

      width: 7%; /* Atur ukuran logo di perangkat mobile */

    }



    .mobile-hide{

        display: flex;

    }

    .desktop-hide {

        display: none;

    }

    .tablet-hide{

        display: none;

    }

    .tablet-container{

        width: 90%;

    }

    .tablet-show{

        width: 90%;

    }

    .topbar-content{

        display: none;

    }

    .hero-section{

        width: 76%;

        font-size: 30px;

        left: 52%;

    }

    .changeable-title {

        height: 80px;

    }

    .changeable-title-text{

        font-size: 45px;

    }

    button {

        font-size: 0.7em;

    }

    .section-1 .button-more{

        font-size: 1.4em;

    }

    .aboutus-container{

        margin: 60px 40px 60px 40px;

    }

    .section-2 {

        width: 100%;

    }

    /* .trusted-section, .experience-section {

        margin:12px

    } */

    .about-desc{

        width: 100%;

    }

    .upcoming-img {

        width: 240px;

    }

    .best-selling-list{

        width: 80%;

        justify-content: center;

    }

    .best-selling-img-portrait{

        width: 295px;

        height: 467px;

    }

    .best-selling-desc-portrait{

        width: 100%;

    }

    .best-selling-img{

        width: 275px;

        height: 185px;

    }

    .best-selling-desc{

        width: 100%;

    }

    .creations-section{

        width: 75%;

    }

    .title-orange{

        width: 80%;

    }

    .title-orange > h1{

        font-size: 30px;

    }

    .title-orange > p{

        font-size: 12px;

    }

    .title-orange-2 > h1{

        font-size: 24px;

    }

    .title-orange-2 > p {

        width: 100% !important;

    }

    .creation-product-desc{

        width: 100%;

    }

    /* .title-white > h1{

        font-size: 24px;

    } */

    .title-white > p {

        font-size: 16px;

    }

    .reason-container{

        width: 75%;

    }



    .partnership-title > h1{

        font-size: 30px;

        padding-bottom: 10px;

    }

    .partnership-title > h2 {

        font-size: 16px;

    }

    .reason-title-1{

        font-size: 25px;

    }

  



    .reason-title-2 {

        padding: 28px;

    }

    .reason-title-3 {

        padding: 25px;

    }

    .reason-4{

        width: 90%;

    }

    .reason-title-4{

        position: relative;

        width: 50vw;

        padding: 1em 30px 1em 2em;

    }

    .reason-title-2 > h2, .reason-title-3 > h2, .reason-title-4 > h1 {

        font-size: 30px;

    }

    .reason-title-4 > h2 {

        font-size: 21px;

    }



    .partnership-container{

        margin: 60px 0 60px 0;

    }

    .partnership-title{

        width: 75%;

    }

    .footer-title > h2{

        font-size: 16px;

    }

    .footer-menu > a, .footer-menu-row > a{

        font-size: 12px;

    }

    .brand-logo{

        padding: 30px 2em 0 2em;

    }

    .bi.bi-telephone {

        font-size: 20px;

    }

    .footer-menu-icon-2 > i{

        font-size: 20px;

    }

    .copyright-section {

        width: 83%;

    }



}

@media (min-width: 801px) and (max-width: 1000px){

    .container-1{

        width: 100%;

    }

    .upcoming-img {

        width: 200px;

    }

    .tablet-hide{

        display: none;

    }

    .dropdown-content {

        flex-direction: column;

        position: fixed;

        background-color: #f9f9f9;

        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

        z-index: 999;

        width: 100%; /* Full width for mobile view */

        right: 0;

        max-height: 0;

        overflow: hidden;

        transition: max-height 0.5s ease-in-out;

        top: 75px;

        justify-content: center;

        align-items: center;



    }

    .dropdown-content.show {

        display: flex;

        max-height: 400px;

        align-items: center;

        justify-content: center;

    }



    .dropdown-content a {

        color: black;

        padding: 12px 16px;

        text-decoration: none;

        display: block;

        text-align: left;

    }



    .dropdown-content:hover {

        background-color: #f1f1f1;

    }

    #hamburger-icon-img {

        display: inline-block;

        transition: transform 0.3s, opacity 0.3s; /* Transisi halus untuk transformasi dan opasitas */

    }



    .bi-list, .bi-x-lg {

        color: white;

        transition: transform 0.3s, opacity 0.3s;

    }



    .toggle-x {

        transform: rotate(90deg); /* Rotasi untuk efek pergantian */

        opacity: 0; /* Mulai dengan tidak terlihat */

    }



    .topbar-menu, .topbar-title {

      font-size: 14px; /* Sesuaikan ukuran font di perangkat mobile */

    }

    .reason-mobile{

        display: flex;

    }

    .logo {

      width: 10%; /* Atur ukuran logo di perangkat mobile */

    }



    /* --------------------------- About us ------------------------------- */



    .history-container {

        margin: 60px 5em 60px 5em;

    }

    .vision-section, .value-section, .mission-section,.achieve-container {

        margin: 5em 5em 7em 5em;

    }

    .mission-desc-section-1 {

        padding: 20px 20px 1em 20px;

    }



    .mission-desc-section-3 {

        padding: 20px 20px 7em 20px;

    }

    .value-title {

        padding-right: 4em;

    }



    /* ---------------------------- Facility --------------------------------- */



    .facility-title-section {

        top: 20em;

        left:4em;

    }

    .facility-gallery-title-button {

        width: 30%;

    }

    .masterpiece-section {

        margin: 10em 5em 10em 5em;

        text-align: center;

    }



    /* ------------------------------ Products ------------------------------ */



    .products-hero-title, .products-hero-title-bold, .products-hero-desc {

        width: 100%;

    }

    .button-more > a > button {

        font-size: 1em;

    }



    /* -------------------------------- Detail Product ------------------------- */



    .detail-product-section {

        padding: 3em 5em 3em 5em;

    }

    .detail-product-preview-section {

        width: 50%;

    }

    .detail-product-full-desc-section {

        width: 85%;

    }

    .detail-product-related-section {

        gap: 2em;

    }



    /* ------------------------------- Career ----------------------------- */

    .career-hero-section {

        padding: 5em 1em;

        height: 20%;

    }

    .career-img-box {

        aspect-ratio: 500 / 600;

        width: 30%;

    }

    .career-title > button {

        width: 33%;

    }

    .career-title {

        padding-bottom: 5em;

    }

    .life-gallery-section {

        width: 66%;

    }

    .life-gallery-item.area1 img {

        width: 66vw;

    }

    .life-gallery-item.area5 img {

        width: 43vw;

    }



    .area2, .area3, .area4, .area6{

        width: 20vw;

    }

    .benefit-section, .current-position-desc {

        width: 80%;

    }

    .current-position-section {

        width: 96vw;

    }



    /* ----------------------------------- Career Desc ----------------------- */

    .desc-career-form-section {

        height: 180vh;

    }

    .desc-career-section {

        padding: 10em 0em 14em 0em;

    }



    /* ------------------------------- Contact Us ---------------------------- */



    .contactus-info-container {

        width: 95%;

        gap: 2em;

    }

    .contactus-info {

        padding-left: 3em;

    }

    .info-maps {

        width: 93%;

    }



    /* --------------------------------- FAQ -------------------------------- */

    .topic-title {

        justify-content: center;

    }

    .search-box {

        width: 70%;

    }





}

/* MOBILE ADJUSTMENT */

@media (max-width: 800px) {

    .mobile-show-flex{

        display: flex;

    }



    .mobile-hide{

        display: none !important;

    }



    .upcoming-product-list{

        flex-wrap: wrap;

        justify-content: center;

    }



    .upcoming-product{

        width: 40vw;

    }



    .upcoming-product > *{

        width: 100%;

    }

    .container-1 {

        width: 100%;

    }

    .dropdown-content {

        flex-direction: column;

        position: fixed;

        background-color: #f9f9f9;

        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

        z-index: 999;

        width: 100%; /* Full width for mobile view */

        right: 0;

        max-height: 0;

        overflow: hidden;

        transition: max-height 0.5s ease-in-out;

        top: 75px;

        justify-content: center;

        align-items: center;



    }

    .dropdown-content.show {

        display: flex;

        max-height: 400px;

        align-items: center;

        justify-content: center;

    }



    .dropdown-content a {

        color: black;

        padding: 12px 16px;

        text-decoration: none;

        display: block;

        text-align: left;

    }



    .dropdown-content:hover {

        background-color: #f1f1f1;

    }

    #hamburger-icon-img {

        display: inline-block;

        transition: transform 0.3s, opacity 0.3s; /* Transisi halus untuk transformasi dan opasitas */

    }



    .bi-list, .bi-x-lg {

        color: white;

        transition: transform 0.3s, opacity 0.3s;

    }



    .toggle-x {

        transform: rotate(90deg); /* Rotasi untuk efek pergantian */

        opacity: 0; /* Mulai dengan tidak terlihat */

    }



    .topbar-menu, .topbar-title {

      font-size: 14px; /* Sesuaikan ukuran font di perangkat mobile */

    }

    .reason-mobile{

        display: flex;

    }

    .logo {

      width: 10%; /* Atur ukuran logo di perangkat mobile */

    }

    .aboutus-container {

        width: 100%;

    }

    .upcoming-container {

        width: 100%;

    }

    .upcoming-desc {

        width: 75% !important;

    }

    .upcoming-desc p {

        width: 85%;

    }

    .best-selling-container {

        width: 100%;

    }

    .best-selling-desc {

        width: 80%;

    }

    .best-selling-desc-portrait {

        width: 95%;

    }

    /* .creations-container {

        width: 100%;

    } */

    .choose-us-container {

        width: 100%;

    }

    .choose-us-section {

        width: 100%;

    }





    .reason-4{

        width: 90%;

    }

    .reason-title-4 {

        width: 100%;

    }

    .reason-img-4 img {

        width: 35vw;

    }

    .partnership-container {

        width: 100%;

    }

    .footer-container {

        width: 100%;

    }

}



@media (max-width: 600px) {

/* --------------------------------- Hamburger Menu ------------------------------------ */

    .logo-section {

        padding: 20px;

    }

    .navigation-hero {

        right: 1em ;

    }

    .navigation-hero .icon-left, .navigation-hero .icon-right{

        width: 26px;

        height: 26px;



    }

    .topbar-menu-phone{

        text-align: center;

        padding: 0 20px 0 20px;

        text-decoration: none;

        color: white;

        font-size: 20px;

        position: relative;

        transition: font-size 0.3s ease;

    }



    .dropdown-content {

        flex-direction: column;

        position: fixed;

        background-color: #f9f9f9;

        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

        z-index: 999;

        width: 100%; /* Full width for mobile view */

        right: 0;

        max-height: 0;

        overflow: hidden;

        transition: max-height 0.5s ease-in-out;

        top: 75px;

    }

    .dropdown-content.show {

        display: flex;

        max-height: 400px;

        align-items: flex-start;



    }



    .dropdown-content a {

        color: black;

        padding: 12px 16px;

        text-decoration: none;

        display: block;

        text-align: left;

    }



    .dropdown-content:hover {

        background-color: #f1f1f1;

    }

    #hamburger-icon-img {

        display: inline-block;

        transition: transform 0.3s, opacity 0.3s; /* Transisi halus untuk transformasi dan opasitas */

    }



    .bi-list, .bi-x-lg {

        color: white;

        transition: transform 0.3s, opacity 0.3s;

    }



    .toggle-x {

        transform: rotate(90deg); /* Rotasi untuk efek pergantian */

        opacity: 0; /* Mulai dengan tidak terlihat */

    }



    .topbar-menu, .topbar-title {

      font-size: 14px; /* Sesuaikan ukuran font di perangkat mobile */

    }

    .reason-mobile{

        display: flex;

    }

    .logo {

      width: 7%; /* Atur ukuran logo di perangkat mobile */

    }

    .sticky {

        width: 95%;

    }



    .hero-section{

        width: 66%;

        font-size: 21px;

        left: 41%;

    }

    .changeable-title{

        height: 35px;

    }

    .changeable-title-text{

        font-size: 21px;

    }

    /* .aboutus-container {

        width: 80%;

        display: flex;

        flex-direction: column;

    } */

    .about-section {

        width: 100%;

    }

    .about-title-big {

        width: 100%;

    }

    .about-title-big h1 {

        font-size: 30px;

    }

    .about-desc{

        font-size: 12px;

    }

    .section-2{

        flex-direction: column;

        justify-content: center;

        align-items: center;

    }

    .about-img-section{

        display: flex;

        width: 100% !important;

        align-items: center;

        flex-direction: column;

        justify-content: center;

        border-top: 2px solid #d1d1d1;

    }

    .about-img{

        padding-left: 0;

        padding-top: 30px;

        border-top: none;

        height: 100%;

        width: 100%;

        border-left: none;

    }

    .upcoming-container {

        width: 100%;

        flex-direction: column;

    }

    .upcoming-product{

        width: 65vw;

    }

    .upcoming-title > h1{

        font-size: 18px;

    }

    .upcoming-title > p {

        font-size: 14px;

    }

    .upcoming-product-list{

        flex-wrap: wrap;

        justify-content: center;

        width: 90%;

    }

    .upcoming-desc{

        bottom: 13px;

        right: -41px;

    }

    .upcoming-desc > p{

        width: 56%;

    }

    .best-selling-container {

        width: 100%;

    }



    .best-selling-list{

        width: 90%;

        grid-template-columns: repeat(1, 0.5fr);

    }

    .best-selling-img-portrait {

        width: 295px;

        height: 276px;

    }

    .best-selling-img{

        width: 301px;

        height: 185px;

    }

    .best-selling-desc{

        width: 91%;

    }

    .best-selling-desc > h2, .best-selling-desc-portrait > h2 {

        font-size: 20px;

    }

    .best-selling-desc-portrait > p {

        font-size: 16px;

        width: 70%;

    }

    /* .creations-container{

        height: auto;

        width: 100%;

        padding-top: 20px;

        padding-bottom: 20px;

    } */

    .creations-section {

        width: 65%;

        justify-content: center;

        padding: 2em;

    }

    .title-orange-2 {

        justify-content: center;

    }

    .creation-product-img{

        width: 227px;

    }

    .creation-product-img-container {

        flex-wrap: wrap;

        margin-right: 0;

        justify-content: center;

    }

    .creation-product-desc {

        width: calc(100% - 20px);

        padding: 10px;

    }

    .reason-container{

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

    }

    .reason-4 {

        display: none;

    }

    .reason-mobile{

        width: 85vw;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

    }

    .reason-title-1 {

        font-size: 14px;

    }

    .reason-title-2 {

        padding: 40px;

    }

    .reason-title-2 > h1 {

        font-size: 30px;

    }

    .reason-title-2 > h2, .reason-title-3 > h2, .reason-title-4 > h1 {

        font-size: 14px;

    }

    .reason-title-2 > h3, .reason-title-3 > h3 {

        padding-top: 10px;

        font-size: 12px;

    }

    .reason-title-2 > h4, .reason-title-3 > h4 {

        font-size: 12px;

    }



    .reason-title-4 {

        width: 83% !important;

        padding: 1em 30px 1em 1em;

    }

    .reason-title-2 > h2, .reason-title-3 > h2, .reason-title-4 > h1 {

        font-size: 14px;

    }

    .reason-title-4 > h2 {

        font-size: 12px;

    }

    .reason-mobile{



        border-radius:15px;

    }

    .reason-img-4{

        display: flex !important;

    }

    .reason-img-4 img {

        width: 100%;

        border-top-right-radius:15px;

        border-top-left-radius:15px;

        border-bottom-right-radius:0px;

        border-bottom-left-radius:0px;

    }

    .partnership-title > h2 {

        font-size: 16px;

    }

    .partnership-brand {

        flex-direction: column;

    }

    .menu-section{

        flex-direction: column;

    }

    .aboutus-section, .products-section, .contact-section, .location-section {

        width: 60%;

    }

    .products-section, .contact-section, .location-section{

        padding-left: 2em;

        padding-top: 2em;

    }

    .copyright-section {

        flex-direction: column;

        justify-content: center;

    }

    .logo-footer{

        width: 50%;

        height: 100%;

    }

    .logo-footer-section {

        flex-direction: column;

        justify-content: center;

        align-items: center;

        padding-bottom: 10px;

    }

    .copyright {

        padding-bottom: 10px;

        width: 90%;

    }

    .logo-footer-img {

        height: 60px;

    }



    /* ----------------------------- About US --------------------------------- */





    .history-title-big-section,.history-title-big {

        text-align: center;

    }

    .normal-title-1 {

        padding-right: 0;

    }

    .history-desc > p {

        line-height: 21px;

    }

    .unveeling-container {

        flex-direction: column;

    }

    .unveeling-section {



        flex-direction: column;

    }

    .unveeling-title {

        width: 100%;

        padding-top: 60px;

        margin-bottom: 50px;

    }

    .unveeling-product-img{

        width: 280px;

        height: 220px;

    }



    .vision-title , .mission-title {

        text-align: center;

    }

    .mission-title, .value-title, .vision-title{

        text-align: center;

        padding-right: 0;

        padding-bottom: 20px;

    }

    .vision-desc, .value-desc {

        width: 100%;

        text-align: center;

    }

    .value-desc{

        padding-bottom: 60px;

    }

    /* .mission-section {

        margin: 7em 1em 7em 1em;

        flex-direction: column;

    } */

    .mission-desc-container{

        width: 100%;

        padding-bottom: 5em;

    }

    .mission-desc-section-1, .mission-desc-section-2, .mission-desc-section-3, .mission-desc-section-4 {

        width: 100%;

        text-align: center;

    }

    .achieve-container {

        margin: 60px 1em 60px 1em;

        flex-direction: column;

    }

    .achieve-logo-section {

        flex-direction: column;

    }

    .achieve-logo-box{

        width: 100%;

    }

    .achieve-logo-box-2{

        width: 60%;

    }

    .achieve-desc > h3 {

        width: 100%;

    }

    .menu-section {

        margin: 5em 20px 20px 20px ;

    }



    /* ----------------------------------------- Facility --------------------------------------- */

    .facility-hero-container{

        height: 30vh;

        width: 100%;

    }

    .facility-hero-container::before {

        height: 30vh;

        width: 100%;

    }

    .facility-title-section {

        top: 10em;

        left: 2em;

    }

    .facility-title-big, .facility-title-desc {

        width: 90%;

    }

    .facility-title-desc > h4 {

        width: 100%;

    }

    .navigation-hero-facility .icon-left-facility, .navigation-hero-facility .icon-right-facility {

        width: 26px;

        height: 26px;

    }

    .navigation-hero-facility {

        position: relative;

        right: -8em;

        bottom: 3em;

    }

    .facility-gallery-title-button {

        width: 70%;

    }





    .facility-gallery-title-button {

        width: 45%;

    }

    .facility-gallery-carousel-section {

        width: 100%;

    }

    .facility-gallery-picture.active {

        width: 76vw;

    }

    .facility-gallery-picture {

        width: 70vw;

    }

    .masterpiece-section{

        margin: 10em 0px 10em 20px ;

    }

    .gallery-section {

        width: 85%;

        grid-template-columns: repeat(2, 1fr);

        grid-template-rows: repeat(2, 1fr);

        grid-gap: 20px;

    }

    .masterpiece-title > h2 {

       font-size: 20px;

    }



    /* ------------------------------------- Products ---------------------------- */



    .products-hero-title, .products-hero-title-bold, .products-hero-desc{

        width: 100%;

    }



    .products-container{

        height: 30vh;

    }

    .button-more {

        font-size: 14px;

    }

    .highlight-product-section {

        width: 90%;

        text-align: center;

    }

    .product-line-section {

        grid-template-columns: repeat(2, 1fr);

        grid-template-rows: repeat(2,1fr);

        width: 80%;

        padding: 2em;

    }





/* -------------------------- Detail Products --------------------------------- */

    .detail-product-section {

        padding: 3em 0 3em 0;

        flex-direction: column;

        width: 100%;

    }

    .detail-product-preview-section{

        width: 84%;

        padding-bottom: 35px;

    }

    .detail-product-main{

        width: 320px;

    }

    .detail-product-carousel{

        width: 322px !important;

    }

    .detail-product-desc-section{

        width: 85%;

        padding-left: 0;

    }

    .detail-product-related-section {

        gap: 1em;

    }



    .detail-product-desc-type {

        width: 100%;

    }

    .detail-product-desc-type > h4 {

        flex-direction: column;

    }

    .detail-product-full-desc-section {

        width: 85%;

    }

    .detail-product-related-section {

        grid-template-columns: repeat(2, 1fr);

    }



/* -------------------------- Career ----------------------------------------- */



    .career-hero-section{

        position: relative;

        height: 40%;

        padding: 10em 1em;

    }

    .career-img-title-container {

        width: 80%;

        gap: 1em;

    }

    .career-title {

        width: 100%;

    }

    .career-title > button {

        font-size: 20px;

        width: 80%;

    }

    .benefit-item-img-desc p {

        font-size: 14px;

    }

    .benefit-item-desc p {

        font-size: 12px;

    }

    .benefit-section {

        width: 100%;

        flex-direction: column;

        align-items: center;

        padding: 4em 0 4em 0;

    }

    .benefit-title {

        flex-direction: column;

        width: 85%;

        justify-content: center;

        text-align: center;

    }

    .benefit-item-img img {

        width: 45%;

    }

    .benefit-gallery {

        width: 90%;

    }

    .current-position-section {

        flex-direction: column;

        padding: 20px 0 20px 0;

        width: 100%;

    }

    .current-position-desc {

        flex-direction: column;

        text-align: center;

        width: 95%;

    }

    .current-position-desc > h1{

        width: 100%;

    }

    .current-position-desc > h2 {

        padding-bottom: 10px;

    }

    .position-name {

        padding-right: 0;

    }

    .position-available {

        width: 95%;

    }





/* ---------------------------------- Career Desc ------------------------------------ */



    form .row {

        flex-direction: column;

    }

    .desc-career-section {

        padding-top: 3em;

        width: 80%;

        padding: 20px;

        margin-left: 20px;

        align-items: flex-start;

        padding-bottom: 0;

    }

    .desc-career-title-with-desc {

        width: 100%;

    }

    .desc-career-form .form-section {

        width: 100%;

    }

    .desc-career-form-section {

        justify-content: center;

        align-items: center;

        width: 90%;

        margin-left: 20px;

        padding-bottom: 4em;

    }

    .desc-career-form {

        width: 85%;

        gap: 10px;

        align-items: center;

        justify-content: center;

    }

    .form-title {

        width: 100%;

    }

    .form-desc-input {

        padding-right: 0;

        width: 100%;

    }

    .form-desc-input > input {

        width: 100%;

    }

    .desc-career-form {

        width: 95%;

        gap: 10px;

    }

    .form-message-section {

        padding-right: 0;

    }

    .form-button {

        gap: 10px;

    }

    .form-button .button {

        padding-right: 0;

    }

    form .gap-9 {

        gap: 3em;

    }

    .related-jobs-title {

        width: 90%;

    }

    .position-apply {

        flex-direction: column;

    }



    /* --------------------------------- Contact Us ------------------------------------- */

    .contactus-container form {

        width: 100%;

    }

    .contactus-info-container {

        flex-direction: column;

    }



    .info-detail-item {

        width: 100%;

    }

    .contactus-data {

        align-items: center;

    }

    .form-section{

        width: 90%;

    }

    .info-title {

        width: 90%;

    }

    .contactus-info {

        width: 100%;

        align-items: center;

    }

    .info-maps {

        width: 90%;

        align-items: center;

    }

    .info-detail-item > i {

        padding-right: 25px;

    }



    /* ---------------------------- Faq ----------------------------------------- */



    .faq-hero-section {

        justify-content: unset;

        height: 68%;

        width: 100%;

        padding: 0 1em 3em 1em;

    }

    .faq-img-title-container {

        flex-direction: column;

        width: 100%;

    }

    .faq-img-box{

        width: 75%;

        padding-left: 50px;

    }

    .faq-img-title-container {

        gap: 0;

    }

    .faq-img-box img {

        width: 100%;

    }

    .faq-title {

        align-items: flex-start;

        width: 100%;

    }

    .faq-title > h2{

        padding-top: 1em;

    }

    .search-box {

        width: 90%;

        padding: 1em;

    }

    .topic-section {

        width: 90%;

    }

    .topic-title-section {

        width: 100%;

    }

    .topic-title-menu-section {

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;

    }

    .topic-title {

        align-items: center;

        padding: 3em;

        justify-content: center;

    }

    .search > i.bi.bi-search {

        font-size: 24px;

    }





  }





/* Default: Display none untuk desktop */

.mobile-only {

    display: none;

}



/* Menampilkan di tablet dan mobile */

@media only screen and (max-width: 1024px) {

    .mobile-only {

        display: flex; /* Atau inline-block, sesuai kebutuhan */

    }

    .custom-facility-container{

        width: 100%;

    }

    .align-items-center{

        flex-direction: column;

    }

    .facility-gallery-container{

        margin : 30px;

        margin-left : 30px;

    }

    .facility-gallery-picture{

        height: 60px;   

    }

    .facility-gallery-desc{

        width: 100%;

    }

    .facility-hero-container{

        height: 30vh;

    }

    .facility-title-section{

        top: 15vh;

    }

    .products-hero-section {

        top: 15vh;

    }

    .container-1{

        height: 30vh;

    }

    .products-container{

        min-height: 30vh;

    }

    .unveeling-title > h1{

        margin-left: 0px;

    }

    .section-2{

        margin-right: 0px !important;

    }

    #homeSeeMore-2{

        width: 100% !important;

    }

    .topbar-section {

        text-shadow: none;

    }

    .topic-title{

        padding: 1em 1em 1em 1em;

    }

    .history-container {

        margin: 60px 0em 60px 1em;

        width: 90%;

    }

    .vision-section, .value-section, .mission-section{

        width: 100%;

        margin: 2em 1em 1em 1em;

        flex-direction: column;

    }

    .unveeling-title > h1{

        text-align: center;

        

    }

    .info-detail-box {

        align-items: flex-start;

        justify-content: center;

        width: 90%;

        padding-left: 14px;

    }

    .facility-gallery-overlay h1 > a {

        font-size : 7px;

    }

}



/* Default: Display untuk desktop */

.desktop-only {

    display: flex; /* Atau inline-block, sesuai kebutuhan */

}



/* Menyembunyikan di tablet dan mobile */

@media only screen and (max-width: 1024px) {

    .desktop-only {

        display: none;

    }

}