main > .container, main > .container-fluid
{
    padding: 10px 15px 20px; 
} 
html, body {
            height: 100%;
            margin: 0;
        }
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        main {
            flex: 1 0 auto;
        }
        footer {
            flex-shrink: 0;
        }
.site-error {
    text-align: center;
    padding: 50px;
}
.alert-danger {
    max-width: 600px;
    margin: 20px auto;
}

/* Styling default untuk h2 (Desktop) */
h2 {
    font-size: clamp(2.5rem, 5vw, 4rem); /* Desktop: besar dan menonjol */
    line-height: 1.2;
    margin: 0;
}

/* Tablet */
@media (max-width: 992px) {
    h2 {
        font-size: clamp(2rem, 4vw, 3rem); /* Tablet: sedikit lebih kecil */
    }
}

/* Mobile */
@media (max-width: 768px) {
    h2{
        font-size: clamp(1.5rem, 3vw, 2.5rem); /* Mobile: lebih kecil lagi */
    }
}

/* Layar sangat kecil (opsional) */
@media (max-width: 576px) {
    h2 {
        font-size: clamp(1.25rem, 2.5vw, 2rem); /* Sangat kecil: paling kecil */
    }
}

.age-verification-container {
    height: 100vh; /* Memastikan tampilan penuh layar */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    color: #f8f9fa; /* Warna teks light */
}

.age-verification-container img {
    max-width: 400px; /* Responsif terhadap ukuran layar */
    height: auto;
}

.age-verification-box {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    max-width: 400px; /* Batasi lebar maksimum */
}

/* Responsif untuk layar kecil (mobile) */
@media (max-width: 768px) {
    .age-verification-container {
        padding: 15px;
    }

    .age-verification-container h1 {
        font-size: 1.8rem; /* Perkecil ukuran font */
		
    }

    .age-verification-container img {
        max-width: 250px; /* Perkecil logo di layar kecil */
		padding-bottom:30px:
    }

    .age-verification-box {
        max-width: 200px; /* Perkecil ukuran tombol */
		flex-direction: column;
		gap: 10px;
		width: 100%;
    }

    .btn {
        font-size: 0.9rem; /* Perkecil ukuran tombol */
        padding: 10px;
    }
}


/* Banner */
/* Transisi untuk carousel */
.banner-carousel .carousel-item {
    transition: opacity 1s ease-in-out;
}

/* Gambar carousel */
.banner-carousel .carousel-item img {
    object-fit: cover;
    width: 100%;
    height: 85vh; /* Default untuk layar besar */
}

/* Styling dasar untuk caption */
.carousel-caption {
    position: absolute;
    bottom: 10%; /* Posisi desktop tetap */
    left: 0; /* Mulai dari kiri */
    right: 0; /* Sampai kanan */
    margin-left: auto; /* Memusatkan */
    margin-right: auto; /* Memusatkan */
    background: rgba(0, 0, 0, 0.5); /* Latar belakang transparan */
    padding: 1rem;
    border-radius: 8px;
    text-align: left; /* Teks di dalam caption terpusat */
    width: 90%; /* Membatasi lebar caption */
    max-width: 1200px; /* Lebar maksimum untuk layar besar */
}

/* Teks dalam caption (Desktop) */
.carousel-caption h2 {
    margin: 0;
    font-size: clamp(2.5rem, 6vw, 5rem); /* Ukuran desktop tetap */
    line-height: 1.2;
    font-weight: bold;
    color: #fff;
    overflow-wrap: break-word; /* Memastikan teks tidak meluber */
    white-space: nowrap; /* Memaksa teks tetap satu baris */
}

.carousel-caption p {
    margin: 0.5rem 0 0;
    font-size: clamp(1.5rem, 3.5vw, 2.5rem); /* Ukuran desktop tetap */
    line-height: 1.4;
    color: #fff;
    overflow-wrap: break-word; /* Memastikan teks tidak meluber */
}

/* Responsif untuk tablet */
@media (max-width: 992px) {
    .banner-carousel .carousel-item img {
        height: 60vh; /* Tinggi lebih kecil untuk tablet */
    }

    .carousel-caption {
        padding: 0.75rem;
        /*bottom: 40px; /* Posisi tablet tetap */
    }

    .carousel-caption h2 {
        font-size: clamp(2.5rem, 6vw, 5rem); /* Diperbesar dari 4rem ke 5rem maksimum */
    }

    .carousel-caption p {
        font-size: clamp(1.5rem, 3.5vw, 2.5rem); /* Diperbesar dari 2rem ke 2.5rem maksimum */
    }
}

/* Responsif untuk mobile */
@media (max-width: 768px) {
    .banner-carousel .carousel-item img {
        height: 50vh; /* Tinggi untuk mobile */
    }

    .carousel-caption {
        padding: 0.5rem;
        /*bottom: 30px; /* Posisi mobile tetap */
        width: 95%; /* Lebih lebar di mobile */
    }

    .carousel-caption h2 {
        font-size: clamp(2rem, 5vw, 4rem); /* Diperbesar dari 3rem ke 4rem maksimum */
    }

    .carousel-caption p {
        font-size: clamp(1.25rem, 3vw, 2rem); /* Diperbesar dari 1.75rem ke 2rem maksimum */
    }

    .carousel-control-prev, .carousel-control-next {
        width: 10%;
    }

    .carousel-indicators button {
        width: 8px;
        height: 8px;
    }
}

/* Layar sangat kecil (opsional) */
@media (max-width: 576px) {
    .carousel-caption h2 {
        font-size: clamp(1.5rem, 4vw, 3rem); /* Diperbesar dari 2.5rem ke 3rem maksimum */
    }

    .carousel-caption p {
        font-size: clamp(1rem, 2.5vw, 1.75rem); /* Diperbesar dari 1.5rem ke 1.75rem maksimum */
    }
}
/* End Banner */



/* Product section in homepage */
/* Product section in homepage */
.custom-carousel-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.custom-carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.custom-carousel-item {
    flex: 0 0 calc(100% / 4); /* Default: 4 produk per slide untuk desktop */
    padding: 10px;
    box-sizing: border-box;
    position: relative; /* Parent untuk title */
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-carousel-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Header dengan indikator dan tombol */
.custom-carousel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* Indikator */
.custom-carousel-indicators {
    display: flex;
    gap: 5px;
}

.custom-carousel-indicators span {
    width: 10px;
    height: 10px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s;
}

.custom-carousel-indicators .active {
    background-color: #000; /* Warna aktif */
}

/* Tombol kontrol */
.custom-carousel-controls {
    display: flex;
    gap: 5px;
}

.custom-carousel-control-prev,
.custom-carousel-control-next {
    border: none;
    background: none; /* Tanpa background */
    color: #212529; /* Warna tombol dark */
    font-size: 24px;
    cursor: pointer;
    padding: 5px 10px;
}

.custom-carousel-control-prev:hover,
.custom-carousel-control-next:hover {
    color: #000; /* Warna lebih gelap saat hover */
}

/* Styling untuk title produk */
.custom-carousel-title {
    position: absolute;
    bottom: 15px; /* Jarak dari bawah, sedikit lebih tinggi dari sebelumnya */
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background: rgba(0, 0, 0, 0.6); /* Hitam transparan */
    color: #fff;
    padding: 8px 12px;
    border-radius: 5px;
    text-align: center;
    width: 90%; /* Membatasi lebar */
    max-width: 90%;
    white-space: nowrap; /* Teks tetap satu baris */
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(1.5rem, 3.5vw, 2rem); /* Sesuai desktop banner */
}

/* Responsif untuk tablet */
@media (max-width: 992px) {
    .custom-carousel-item {
        flex: 0 0 calc(100% / 3); /* 3 produk per slide */
    }

    .custom-carousel-title {
        font-size: clamp(1.25rem, 3vw, 2rem); /* Sesuai tablet banner */
        bottom: 10px; /* Sedikit lebih tinggi */

    }
}

/* Responsif untuk mobile */
@media (max-width: 768px) {
    .custom-carousel-item {
        flex: 0 0 calc(100% / 2); /* 2 produk per slide */
    }

    .custom-carousel-title {
        font-size: clamp(1rem, 2.5vw, 1.75rem); /* Sesuai mobile banner */
        bottom: 10px; /* Sedikit lebih tinggi */
        padding: 4px 0;
    }

    .custom-carousel-control-prev,
    .custom-carousel-control-next {
        font-size: 20px; /* Sedikit lebih kecil untuk mobile */
    }
}

/* Layar sangat kecil (opsional) */
@media (max-width: 576px) {
    .custom-carousel-title {
        font-size: clamp(0.875rem, 2vw, 1.5rem); /* Sesuai layar kecil banner */

    }
}

/* Store Location on index */

.store-card {
        border: 1px solid #ddd; /* Optional: adds a border to the card */
        border-radius: 5px; /* Optional: rounds the corners */
        overflow: hidden; /* Ensures content doesn't overflow */
    }

    .store-image-container {
        height: 200px; /* Fixed height for the image container */
        overflow: hidden; /* Crops excess image */
    }

    .store-image {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures image fills container while maintaining aspect ratio */
    }

    .store-info {
        height: 200px; /* Matches the image container height */
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Aligns content to the top */
    }

    .store-info h5, .store-info p {
        margin: 0; /* Removes default margins */
    }

    /* Tablet adjustment: 2 items per row */
    @media (min-width: 768px) and (max-width: 991px) {
        .col-tablet-6 {
            flex: 0 0 50%; /* 50% width for 2 items per row */
            max-width: 50%;
        }
        .store-image-container, .store-info {
            height: 180px; /* Slightly smaller height for tablet */
        }
    }

    /* Mobile adjustment: 2 columns (image left, text right) */
    @media (max-width: 767px) {
        .store-card {
            flex-direction: row; /* Ensures horizontal layout on mobile */
        }
        .store-image-container, .store-info {
            height: 150px; /* Smaller height for mobile */
        }
        .col-6 {
            flex: 0 0 50%; /* 50% width for each column */
            max-width: 50%;
        }
        .store-info {
            padding: 10px; /* Reduced padding for mobile */
        }
    }


/* Product detail in product page */
.description-column {
        padding: 15px;
    }

    .product-image-grid {
        width: 100%;
        height: 200px; /* Fixed height for tablet and desktop */
        object-fit: cover; /* Crops images for tablet and desktop */
        border-radius: 5px; /* Optional: rounded corners */
        transition: transform 0.3s ease; /* Smooth hover effect */
    }

    .product-image-grid:hover {
        transform: scale(1.05); /* Slight zoom on hover */
    }

    .variant-item {
        padding: 10px;
    }

    /* Tablet adjustment: 2 images per row */
    @media (min-width: 768px) and (max-width: 991px) {
        .variant-item {
            flex: 0 0 50%; /* 50% width for 2 items per row */
            max-width: 50%;
        }
        .product-image-grid {
            height: 180px; /* Slightly smaller for tablet */
        }
    }

    /* Mobile adjustment: 2 columns per row, reduced height, no cropping */
    @media (max-width: 767px) {
        .description-column, .col-12 {
            padding: 10px; /* Reduced padding for mobile */
        }
        .variant-item {
            flex: 0 0 50%; /* 50% width for 2 items per row */
            max-width: 50%;
        }
        .product-image-grid {
            height: auto; /* Allows natural scaling */
            max-height: 120px; /* Reduced maximum height for mobile */
            object-fit: contain; /* Ensures full image is visible */
        }
        .product-grid {
            display: flex;
            flex-wrap: wrap; /* Ensures items wrap into 2 columns */
        }
    }

    /* Desktop: 3 images per row (default) */
    @media (min-width: 992px) {
        .variant-item {
            flex: 0 0 33.3333%; /* 33.33% width for 3 items per row */
            max-width: 33.3333%;
        }
    }
	
/* awards */
  .award-card {
        border: 1px solid #ddd; /* Optional: adds a border to the card */
        border-radius: 5px; /* Optional: rounds the corners */
        overflow: hidden; /* Prevents content overflow */
    }

    .award-image-container {
        height: 200px; /* Fixed height for image container */
        overflow: hidden; /* Crops excess image */
    }

    .award-image {
        width: 100%;
        height: 100%; /* Fills the container */
        object-fit: cover; /* Ensures image fills container while maintaining aspect ratio */
    }

    .award-info {
        height: 200px; /* Matches image container height */
        display: block; /* Simplified to block for consistency */
    }

    .award-info h5, .award-info p {
        margin: 0 0 10px 0; /* Adds consistent spacing between elements */
    }

    /* Tablet adjustment: 1 item per row, 2 columns (image left, text right) */
    @media (min-width: 768px) and (max-width: 991px) {
        .col-md-6 {
            flex: 0 0 100%; /* Full width for 1 item per row */
            max-width: 100%;
        }
        .award-card {
            flex-direction: row; /* Side-by-side layout */
        }
        .award-image-container {
            height: 180px; /* Fixed height for tablet */
            flex: 0 0 50%; /* 50% width for image */
            max-width: 50%;
        }
        .award-info {
            height: 180px; /* Matches image height */
            flex: 0 0 50%; /* 50% width for text */
            max-width: 50%;
            display: block; /* Ensure text is visible */
            overflow-y: auto; /* Scroll if text overflows vertically */
            padding: 15px; /* Consistent padding */
        }
    }

    /* Mobile adjustment: Stack image and text vertically */
    @media (max-width: 767px) {
        .award-card {
            flex-direction: column; /* Stack vertically on mobile */
        }
        .col-md-6 {
            flex: 0 0 100%; /* Full width for stacking */
            max-width: 100%;
        }
        .award-image-container, .award-info {
            height: 150px; /* Smaller height for mobile */
        }
        .award-info {
            padding: 10px; /* Reduced padding for mobile */
        }
    }

.no-round {
	border-radius: 0; /* Menghilangkan sudut bulat */
}
#aboutus{
	min-height: 80vh;
}
#aboutus h1 {
    font-size: 3rem; /* Ukuran font judul */
    margin-bottom: 20px; /* Jarak antara judul dan isi */
}

#aboutus p {
    
    max-width: 600px; /* Batasi lebar agar teks tidak terlalu lebar */
    margin: 0 auto; /* Pusatkan teks */
} 

.aboutus {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    text-align: center;
}

@media (max-width: 768px) {
    .aboutus {
        padding: 30px 10px;
    }
	#aboutus{
		min-height: 60vh;
	}
}

#about-section {
    min-height: 50vh; /* Tinggi minimal untuk section */
    overflow: hidden; /* Mencegah konten meluber */
}

.about-image {
    max-width: 80%; /* Membuat gambar lebih kecil */
    max-height: 300px; /* Batasi tinggi maksimum */
    object-fit: contain; /* Pastikan gambar ditampilkan penuh tanpa terpotong */
    width: 100%; /* Memastikan gambar responsif */
    border-radius: 8px; /* Opsional: sudut membulat untuk estetika */
    margin-left: 0 !important; /* Pastikan rata kiri, override gaya lain */
    text-align: left !important; /* Mengatasi jika ada text-align: center dari parent */
    display: inline-block; /* Pastikan gambar mengikuti alur alami */
}

@media (max-width: 767px) {
    .about-image {
        max-width: 100%; /* Gambar memenuhi lebar kolom di layar kecil */
        max-height: 200px; /* Tinggi lebih kecil untuk layar kecil */
        margin-left: 0 !important; /* Tetap rata kiri pada layar kecil */
        text-align: left !important; /* Pastikan rata kiri di mobile */
        margin-bottom: 20px; /* Jarak tambahan pada layar kecil */
    }
}

.marketplace-card {
    width: 100%;
    max-width: 350px;
    border-radius: 10px;
    background: #fff;
    transition: 0.3s ease-in-out;
}

.marketplace-card:hover {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
}

.marketplace-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.marketplace-image {
    width: 100%;
    max-width: 120px;
    height: auto;
    object-fit: cover;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .marketplace-card {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .marketplace-image-container {
        width: 100%;
    }

    .marketplace-image {
        max-width: 100px;
    }
}

#footer .container {
        padding: 20px 0; /* Add some padding to the footer container */
    }

    .navbar-brand-logo {
        max-width: 150px; /* Optional: Control logo size */
    }

    /* Ensure consistent alignment and spacing */
    .col-6, .col-md-6 {
        padding: 0 15px; /* Match Bootstrap's gutter */
    }

    .d-flex.flex-wrap {
        gap: 15px; /* Replace me-3 with gap for better spacing control */
    }

    /* Tablet adjustment: Ensure 2 columns side by side */
    @media (min-width: 768px) and (max-width: 991px) {
        .col-md-6 {
            flex: 0 0 50%; /* Ensure each column takes 50% width */
            max-width: 50%;
        }
    }

    /* Mobile adjustment: 2 columns side by side */
    @media (max-width: 767px) {
        .col-6 {
            flex: 0 0 50%; /* 50% width for 2 columns */
            max-width: 50%;
        }
    }


/* faq */
.faq-header, .contact-header {
        margin-bottom: 20px; /* Consistent spacing below headers */
    }

    .accordion-item {
        margin-bottom: 15px; /* Space between accordion items */
    }

    .accordion-button {
        padding: 15px; /* Consistent padding */
    }

    .accordion-body {
        padding: 15px; /* Consistent padding */
    }

    .contact-info p {
        margin: 0 0 10px 0; /* Consistent spacing between contact lines */
    }

    /* Tablet adjustments */
    @media (min-width: 768px) and (max-width: 991px) {
        .col-md-4 {
            flex: 0 0 33.333%; /* Slightly smaller header column */
            max-width: 33.333%;
            padding: 0 15px; /* Consistent padding */
        }
        .col-md-8 {
            flex: 0 0 66.667%; /* Larger content column */
            max-width: 66.667%;
            padding: 0 15px; /* Consistent padding */
        }
        .faq-header, .contact-header {
            font-size: 1.75rem; /* Slightly smaller header */
        }
        .accordion-button {
            font-size: 1rem; /* Adjust button text size */
        }
        .accordion-body {
            font-size: 0.9375rem; /* Adjust body text size */
        }
    }

    /* Mobile adjustments */
    @media (max-width: 767px) {
        .col-12 {
            padding: 0 15px; /* Consistent padding on mobile */
        }
        .faq-header, .contact-header {
            font-size: 1.5rem; /* Smaller header on mobile */
        }
        .accordion-button {
            font-size: 0.9rem; /* Smaller button text */
        }
        .accordion-body {
            font-size: 0.875rem; /* Smaller body text */
        }
        .contact-info p {
            font-size: 0.875rem; /* Smaller contact text */
        }
    }

.navbar-nav {
	font-family: 'Roboto', sans-serif;
    justify-content: center; /* Pastikan menu selalu berada di tengah */
    width: 100%; /* Agar menu mencakup area navbar */
}
.navbar-brand-logo {
    height: 50px;  /* Sesuaikan dengan tinggi navbar */
    width: auto;
}
.carousel-item {
    position: relative;
}



/* Custom Navigation Arrows */
.custom-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    z-index: 10;
    transition: background 0.3s ease-in-out;
}

.custom-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}

.custom-icon {
    font-size: 30px;
    color: white;
    font-weight: bold;
    display: block;
    text-align: center;
    line-height: 50px;
}

.dropdown:hover .dropdown-menu {
   /* display: flex; /* Menampilkan submenu secara horizontal saat hover */	
	
}
.category-section {
    padding: 40px 0;
}

.card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.card-img-top {
    width: 100%;  /* Pastikan lebar penuh */
    height: 350px; /* Atur tinggi sesuai keinginan */
    object-fit: cover; /* Potong bagian gambar yang tidak muat */
    transition: transform 0.3s ease;
}

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


h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 1.8rem;
}

.category-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.category-card:hover {
    transform: scale(1.05);
}

.category-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.category-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    padding: 15px;
    transition: background 0.3s ease-in-out;
}

.category-card:hover .category-overlay {
    background: rgba(0, 0, 0, 0.8);
}

.product-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border-radius: 10px;
    overflow: hidden;
}

.product-card:hover {
    transform: scale(1.05);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}



.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}
.product-image-grid {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
}
.product-info {
    margin-top: 10px;
}
.carousel-left, .carousel-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: auto;
}

.carousel-left {
    left: -120px; /* Jarak dari kiri */
}

.carousel-right {
    right: -120px; /* Jarak dari kanan */
}

.carousel-inner .row {
    display: flex;
    justify-content: center;
}


.btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    z-index: 1000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}
.product-grid img {
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .product-grid img:hover {
            transform: scale(1.1);
        }
        .product-grid img.active {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

.nopadding{
	padding:0;
}
.img-fluid a img {
    transition: transform 0.3s ease-in-out;
}

.img-fluid a:hover img {
    transform: scale(1.05); /* Perbesar gambar saat hover */
}
.img-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6); /* Transparan hitam */
    color: #fff; /* Warna teks putih */
    text-align: center;
    padding: 8px;
    font-size: 14px;
}
.img-container a img { 
    transition: transform 0.3s ease-in-out;
}

.img-container a:hover img {
    transform: scale(1.05); /* Perbesar gambar saat hover */
}





.testimonial-card {
    max-width: 500px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.testimonial-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin-bottom: 15px;
}

.testimonial-text {
    font-size: 1.2rem;
    font-style: italic;
    color: #555;
}

.customer-name {
    margin-top: 10px;
    font-size: 1.1rem;
    font-weight: bold;
}

#newsletter {
    padding-top: 50px;
}

#newsletter h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 20px;
}

#newsletter p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

#newsletter .form-control {
    max-width: 400px;
    border-radius: 0.25rem;
}

#newsletter .btn {
    border-radius: 0.25rem;
}


.grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.grid-view .product-item {
    border: 1px solid #ddd;
    padding: 15px;
    text-align: center;
}

.list-view {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.list-view .product-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd; /* Hanya garis pemisah antar item */
}

.list-view .product-item:last-child {
    border-bottom: none; /* Hilangkan garis di item terakhir */
}

.list-view .product-img {
    width: 120px;
    height: auto;
    margin-right: 15px;
    object-fit: cover;
}

.list-view .product-info {
    flex-grow: 1;
}

.list-view h5 {
    margin: 0;
    font-size: 1.2em;
}

.list-view p {
    margin: 5px 0;
}

.list-view .btn {
    margin-top: 5px;
}


@media (max-width: 767px) {
    #footer .col-md-4 {
        margin-bottom: 30px;
    }
}
/* CSS untuk Store Page */
.store-location-card, .distributor-card {
    margin-bottom: 30px;
}

.card-body {
    text-align: center;
}

.card-title {
    font-size: 1.2rem;
    font-weight: bold;
}

.card-text {
    font-size: 1rem;
    color: #6c757d;
}

.card img {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

hr {
    margin: 40px 0;
}

/* Styling untuk link online store */
a {
    text-decoration: none;
    color: #007bff;
}
a:hover {
    text-decoration: underline;
}


@media (max-width: 991px) { 
    .navbar.sticky-top {
        position: fixed !important;
        top: 0;
        width: 100%;
        z-index: 1020;
    }
}

/* Custom styling for fullwidth submenu */
.dropdown-menu {
	position: absolute;
	top: 100%; /* Tepat di bawah navbar */
	left: 0;
	margin-top: 0; /* Hilangkan jarak default */
	border-radius: 0; /* Hilangkan border radius */
}

.dropdown-item {
	text-align: center; /* Teks rata tengah */
	
}
 .parallax {

	background-image: url('//www.oxva.com/cdn/shop/files/VPRIME_36561e69-79b2-4e06-8975-1c683a27b51c.jpg?v=1735023273');
	background-attachment: fixed; /* Membuat gambar tetap */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
            height: 100vh; /* Tinggi gambar sesuai dengan tinggi layar */
            overflow: hidden;
}
.parallax .text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 36px;
	font-weight: bold;
	text-align: center;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.contentparallax {
		height: 1000px;
		background: linear-gradient(white, lightgray);
		padding: 20px;
	}
 .image-container {
	position: relative;
	height: 400px;
	overflow: hidden;
}

.image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1); /* Mulai dari skala 1 */
	transition: transform 0.3s ease; /* Efek transisi zoom */
}

.image-container-text-slide {
		position: relative;
		height: 100vh; 
		overflow: hidden;
	}

	.image-container-text-slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.image-container-text-slide .text {
		position: absolute;
		bottom: 10%;
		left: -100%; /* Awal di luar layar */
		font-size: 36px;
		font-weight: bold;
		color: white;
		text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
		transition: transform 0.5s ease; /* Efek transisi */
	}

	.content-text-slide {
		height: 1500px;
		padding: 20px;
		background: lightgray;
	}
		
.navbar{
	--bs-navbar-padding-y: 0;
	width:100%;
}

.footer {
    background-color: #f5f5f5;
    font-size: .9em;
    height: 60px;
}

.footer > .container, .footer > .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px #212529;
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px #212529;
    border-bottom-width: 0;
}

.grid-view th,
.grid-view td:last-child {
    white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
    min-width: 50px;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.navbar form > button.logout {
    padding-top: 7px;
    color: rgba(255, 255, 255, 0.5);
}

@media(max-width:767px) {
    .navbar form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.navbar form > button.logout:focus,
.navbar form > button.logout:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
}

.navbar form > button.logout:focus {
    outline: none;
}

/* style breadcrumb widget as in previous bootstrap versions */
.breadcrumb {
    background-color: var(--bs-gray-200);
    border-radius: .25rem;
    padding: .75rem 1rem;
}

.breadcrumb-item > a
{
    text-decoration: none;
}