@import url("https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Rubik:ital@0;1&family=Vollkorn:ital,wght@0,400..900;1,400..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");

:root {
    /* Mendefinisikan font family global */
    --font-rubik: "Rubik", sans-serif;
    --font-cabin: "Cabin", sans-serif;
    --font-vollkorn: "Vollkorn", serif;
    --font-work-sans: "Work Sans", sans-serif;
    --font-size-0-65rem: 0.65rem;
    --font-size-0-75rem: 0.75rem;
    --font-size-0-8rem: 0.8rem;
    --font-size-0-9rem: 0.9rem;
    --font-size-1rem: 1rem;
    --font-size-1-1rem: 1.1rem;
    --font-size-1-2rem: 1.2rem;
    --font-size-1-4rem: 1.4rem;
    --font-size-1-5rem: 1.5rem;
    --font-size-2rem: 2rem;
    --font-size-8rem: 8rem;
    --font-weight-300: 300;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-weight-800: 800;
    --font-weight-900: 900;
    --background-white: #fff;
    --background-black: #000;
    --background-7ab9e0: #7ab9e0;
    --text-color-black: #000;
    --text-color-white: #fff;
    --text-color-313: #313131;
    --text-color-333: #333333;
    --text-color-888: #888888;
    --text-color-778460: #778460;
    --text-color-add8e6: #add8e6;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

body.no-scroll {
    overflow: hidden !important;
}

.container {
    margin: 0;
    padding: 0px 0px;
}

.wrappertengah {
    width: 100%;
    /* margin: 0 auto; */
}

.topbar {
    background-color: var(--background-black);
    color: var(--text-color-white);
    padding: 10px 0;
    text-align: center;
    font-style: var(--font-rubik);
    font-size: var(--font-size-0-9rem);
    font-weight: var(--font-weight-300);
    overflow: hidden; /* Penting agar teks yang keluar batas tidak terlihat */
}

.vertical-slide .carousel-item {
    transition: transform 0.6s ease-in-out;
}

.vertical-slide .carousel-item-next.carousel-item-start,
.vertical-slide .carousel-item-prev.carousel-item-end {
    transform: translateY(0);
}

.vertical-slide .active.carousel-item-start {
    transform: translateY(-100%);
}

.vertical-slide .active.carousel-item-end {
    transform: translateY(100%);
}

.vertical-slide .carousel-item-next {
    transform: translateY(100%);
}

.vertical-slide .carousel-item-prev {
    transform: translateY(-100%);
}

/* Menghilangkan margin default p agar rapi di tengah */
.carousel-item p {
    font-size: var(--font-size-0-9rem);
    font-weight: var(--font-weight-400);
}

#myCarousel .carousel-item img {
    height: 470px !important;
    object-fit: cover !important;
    object-position: center !important;
}

.logo {
    padding: 0px 10px;
    margin-bottom: 10px;
    /* background-color: aqua; */
}

/* 
.logo-spacing {
    letter-spacing: 2px;
}

.menu-spacing {
    letter-spacing: 1px;
} */
.custom-badge {
    background-color: var(--background-7ab9e0); /* Warna biru muda seperti di gambar */
    font-size: var(--font-size-0-65rem);
    padding: 0.35em 0.5em;
    margin-top: 5px;
}

nav ul li {
    font-family: var(--font-fourth);
    font-size: var(--font-size-base-3);
    color: var(--text-color-third);
}

nav ul li a:hover {
    background-color: var(--background-secondary);
    color: var(--text-color-secondary);
}

.text-account {
    font-family: var(--font-rubik);
    font-size: var(--font-size-0-8rem);
    color: var(--text-color-313);
    font-weight: var(--font-weight-300r);
    letter-spacing: 3px;
}

#content {
    padding: 0px 10px;
    /* margin-top: 20px; */
}

#contentnewrelease {
    padding: 0px 10px;
}

#myCarousel {
    overflow: hidden;
}

/* Menimpa durasi bawaan Bootstrap (0.6s) menjadi 1.2s */
.carousel-fade .carousel-item {
    transition: opacity 1.2s ease-in-out !important;
}

/* Reset Dasar Tombol Bootstrap */
.custom-hover-effect {
    width: auto !important;
    opacity: 1 !important;
    pointer-events: none;
    display: flex;
    align-items: center; /* Membuat ikon berada di tengah secara vertikal */
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
}

/* Pisahkan Posisi Ujung Kiri dan Kanan agar tidak ke tengah */
.carousel-control-prev.custom-hover-effect {
    left: 0 !important;
    right: auto !important;
}

.carousel-control-next.custom-hover-effect {
    right: 0 !important;
    left: auto !important;
}

/* Styling Ikon Custom (FontAwesome) */
.custom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-black) !important ;
    pointer-events: auto;
    font-size: var(--font-size-1-4rem) !important;

    /* Animasi masuk dan keluar yang smooth */
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 0.6s ease;
}

.custom-icon i {
    font-weight: var(--font-weight-900) !important;
}

/* --- SETTING AWAL (SEMBUNYI & TEPAT DI LUAR GARIS TEPI) --- */
.carousel-control-prev.custom-hover-effect .custom-icon {
    opacity: 0;
    transform: translateX(-50px); /* Ikon Prev bersembunyi di luar kiri */
}

.carousel-control-next.custom-hover-effect .custom-icon {
    opacity: 0;
    transform: translateX(50px); /* Ikon Next bersembunyi di luar kanan */
}

/* --- SETTING SAAT HOVER (MELUNCUR KE DALAM 20px) --- */
#myCarousel:hover .carousel-control-prev.custom-hover-effect .custom-icon {
    opacity: 1;
    transform: translateX(20px); /* Meluncur masuk ke kanan sejauh 20px */
}

#myCarousel:hover .carousel-control-next.custom-hover-effect .custom-icon {
    opacity: 1;
    transform: translateX(-20px); /* Meluncur masuk ke kiri sejauh 20px */
}

/* --- SETTING SAAT KURSOR TEPAT DI ATAS IKON --- */
.custom-icon:hover {
    color: gray !important;
    cursor: pointer;
}

#product h2 {
    font-family: var(--font-secondary);
    font-size: var(--font-size-base-4);
    color: var(--text-color-primary);
    font-weight: var(--font-weight-400);
    margin-bottom: 20px;
    letter-spacing: 0.1em;
}

/* Wrapper Utama (Mengunci layout dan memberi ruang) */
.product-carousel-wrapper {
    /* Angka 60px ini adalah total lebar panah (sekitar 30px) + gap kosong (sekitar 30px) */
    padding: 0 60px;
    max-width: 100%;
}

/* Kontainer Swiper itu sendiri */
.productSwiper {
    width: 100%;
    /* Berikan sedikit padding vertikal agar efek box-shadow buku tidak terpotong */
    padding: 15px 0;
}

.product-image-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 1. Kondisi Awal Tombol (Sembunyi di Bawah Gambar) */
.quick-add-btn {
    position: absolute;
    bottom: -60px; /* Posisi di bawah garis batas gambar */
    left: 50%;
    transform: translateX(-50%); /* Memastikan posisi tepat di tengah horizontal */
    width: 90%;
    background-color: var(--background-white); /* Putih */
    color: var(--text-color-black); /* Hitam */
    border: 1px solid #d1d1d1;
    font-family: var(--font-rubik);
    font-size: var(--font-size-0-8rem);
    letter-spacing: 3px;
    padding: 12px 0;
    opacity: 0; /* Transparan */
    z-index: 2; /* Berada di atas gambar */
    /* Cubic-bezier memberikan efek animasi yang smooth dan sedikit mengerem saat mau berhenti */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 2. Kondisi Saat Card/Gambar Di-Hover (Tombol Meluncur Naik) */
.product-card:hover .quick-add-btn {
    bottom: 15px; /* Jarak 15px dari bawah gambar */
    opacity: 1; /* Menjadi terlihat penuh */
}

.product-card h6 {
    font-size:var(--font-size-1rem);
}

.product-card p {
    font-size: var(--font-size-0-75rem);
    font-family: var(--font-rubik);
}

/* 3. Kondisi Saat Tombol Quick Add Sendiri Di-Hover (Invert Warna) */
.quick-add-btn:hover {
    background-color: var(--background-black); /* Menjadi Hitam */
    color: var(--text-color-white); /* Teks menjadi Putih */
    border-color: var(--background-black);
    cursor: pointer;
}

    .img-wrapper {
        position: relative; /* Penting: Agar tombol Quick Add bisa melayang di dalamnya */
        width: 100%;
        aspect-ratio: 3/4;
        /* background-color: #f8f9fa; */
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }


/* Navigasi Panah Swiper Custom */
.custom-swiper-nav::after {
    font-size: var(--font-size-1-2rem) !important;
    color: var(--text-color-black) !important;
}

/* Menarik panah sejauh mungkin ke ujung batas .product-carousel-wrapper */
.swiper-button-prev.custom-swiper-nav {
    left: 0 !important;
}

.swiper-button-next.custom-swiper-nav {
    right: 0 !important;
}

.product-title {
    font-family: var(--font-cabin);
    letter-spacing: 2px;
    color: var(--font-color-313);
    font-weight: var(--font-weight-300);
    font-size: var(--font-size-0-9rem);
}

.product-author {
    font-family: var(--font-vollkorn);
    font-size: var(--font-size-0-9rem);
    color: var(--text-color-313);
    font-weight: var(--font-weight-300);
    letter-spacing: 2px;
}

.product-price {
    font-family: var(--font-rubik);
    font-size: var(--font-size-0-8rem);
    color: var(--text-color-313);
    font-weight: var(--font-weight-300);
    letter-spacing: 2px;
}

/* 1. Hilangkan panah tebal bawaan dari Swiper */
.custom-swiper-nav::after {
    display: none !important;
}

/* 2. Styling untuk ikon FontAwesome */
.custom-swiper-nav {
    width: 40px; /* Area klik panah */
    height: 40px;
}

.custom-swiper-nav i {
    font-size: var(--font-size-1rem); /* Ukuran panjang panah, sesuaikan jika kurang besar */
    color: var(--text-color-black); /* Menggunakan warna hitam dari variabel Anda */
    transition: color 0.2s ease;
}

/* Opsional: Ubah warna panah saat di-hover agar lebih interaktif */
.custom-swiper-nav:hover i {
    color: var(--text-color-888); /* Warna abu-abu saat di-hover, sesuaikan jika perlu */
}

/* 3. Posisi ditarik ke ujung kiri dan kanan wrapper */
.swiper-button-prev.custom-swiper-nav {
    left: 0 !important;
}

.swiper-button-next.custom-swiper-nav {
    right: 0 !important;
}

.content-2 p {
    font-family: var(--font-rubik);
    font-size: var(--font-size-0-8rem);
    color: var(--text-color-313);
    font-weight: var(--font-weight-300);
    letter-spacing: 2px;
    text-align: justify;
    background-color: transparent;
}

.quote h2 {
    font-family: var(--font-vollkorn);
    font-size: var(--font-size-1-4rem);
    color: var(--text-color-313);
    font-weight: var(--font-weight-500);
}

.quote p {
    font-family: var(--font-rubik);
    font-size: var(--font-size-0-8rem);
    color: var(--text-color-313);
    font-weight: var(--font-weight-300);
    letter-spacing: 1px;
    margin-top: 30px;
}

.follow-our-instagram {
    font-family: "Helvetica", sans-serif;
    font-size: var(--font-size-0-9rem);
    color: var(--text-color-313);
    font-weight: 300;
}

/* Kontainer utama thumbnail */
.ig-thumbnail {
    display: block;
    position: relative;
    overflow: hidden; /* Mencegah gambar meluber saat di-zoom */
    cursor: pointer;
}

/* Memastikan gambar memenuhi kontainer */
.ig-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease; /* Transisi untuk efek zoom */
}

/* Layer transparan (Background hitam 50%) */
.ig-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 50% Opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Tersembunyi pada awalnya */
    transition: opacity 0.4s ease;
}

/* Ikon Instagram */
.ig-overlay i {
    color: #ffffff;
    font-size: 3rem; /* Ukuran ikon */
    transform: scale(0.5); /* Ikon sedikit mengecil saat sembunyi */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- EFEK SAAT MOUSE DI ARAHKAN (HOVER) --- */

/* 1. Munculkan overlay hitam transparan */
.ig-thumbnail:hover .ig-overlay {
    opacity: 1;
}

/* 2. Berikan efek ikon membesar (pop-up) */
.ig-thumbnail:hover .ig-overlay i {
    transform: scale(0.6);
}

/* 3. (Opsional) Gambar asli akan sedikit nge-zoom ke dalam */
.ig-thumbnail:hover img {
    transform: scale(1.1);
}

/* 1. Styling Judul Kolom (Dengan Garis Bawah Presisi) */
.footer-heading {
    font-size: var(--font-size-0-8rem);
    font-weight: var(--font-weight-400);
    letter-spacing: 2px; /* Jarak huruf renggang */
    color: var(--text-color-black);
    font-family: var(--font-cabin);
    /* Trik agar garis bawah hanya sepanjang teks */
    display: inline-block;
    border-bottom: 1.5px solid #000;
    padding-bottom: 5px;
    margin-bottom: 25px; /* Jarak antara judul dan list menu */
}

/* 2. Reset List Default */
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 5px !important; /* Jarak antar baris yang luas seperti di gambar */
}

/* 3. Styling Teks & Link Menu */
.footer-menu a,
.footer-menu span {
    text-decoration: none;
    color: var(--text-color-313); /* Warna abu-abu gelap/hitam pudar */
    font-family: var(--font-rubik); /* Font sans-serif yang rapi */
    font-size: var(--font-size-0-75rem);
    letter-spacing: 2px;
    font-weight: var(--font-weight-300);
    transition: color 0.3s ease;
}

/* Efek Hover untuk Link */
.footer-menu a:hover {
    color: var(--text-color-778460);
    font-weight: 900;
}

/* 4. Styling Khusus Ikon */
.footer-menu i {
    color: var(--font-color-313); /* Warna ikon hitam/abu gelap */
    /* Ikon tidak akan berubah bentuk meskipun teks di sebelahnya panjang */
    flex-shrink: 0;
}

.footer-content {
    font-family: var(--font-rubik);
    font-size: var(--font-size-0-8rem);
    color: var(--font-color-313);
    letter-spacing: 3px;
    font-weight: var(--font-weight-300);
    line-height: var(--font-size-1-4rem);
}

.footer-follow-us {
    font-size: var(--font-size-0-8rem);
    font-weight: var(--font-weight-400);
    letter-spacing: 2px; /* Jarak huruf renggang */
    color: var(--text-color-black);
    font-family: var(--font-cabin);
    /* Trik agar garis bawah hanya sepanjang teks */
    display: inline-block;
    border-bottom: 1.5px solid #000;
    padding-bottom: 5px;
    margin-bottom: 15px; /* Jarak antara judul dan list menu */
}

.footer-copyright {
    font-family: var(--font-rubik);
    font-size: var(--font-size-0-8rem);
    color: var(--font-color-313);
    font-weight: var(--font-weight-300);
    margin: 40px 0px;
}

.floating-chat-widget {
    position: fixed;
    bottom: 20px; /* Jarak dari bawah layar */
    right: 25px; /* Jarak dari kanan layar */
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antara kapsul teks dan tombol bulat */
    z-index: 9999; /* Memastikan selalu berada di lapisan paling atas */
    text-decoration: none; /* Menghilangkan garis bawah bawaan link */
}

/* .floating-chat-widget {
    bottom: 20px;
    right: 20px;
} */

.floating-wishlist-vertical {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%); /* Menarik presisi ke tengah vertikal */
    background-color: #5ba9c6; /* Warna biru sesuai gambar referensi */
    color: #ffffff;

    /* Flexbox Column: Menyusun isi menjadi vertikal (atas ke bawah) */
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 20px 4px; /* Padding atas-bawah 20px, kiri-kanan 8px */
    border-radius: 0 6px 6px 0; /* Melengkung kecil di sisi kanan saja */
    z-index: 9999;
    box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.15);
    gap: 8px; /* Jarak antara teks dan ikon hati */
    transition: all 0.3s ease;
}

.wishlist-text {
    /* Trik Rahasia: Membuat teks vertikal membaca dari bawah ke atas */
    writing-mode: vertical-rl;
    transform: rotate(180deg);

    font-family: var(--font-cabin); /* Menggunakan font sans-serif yang rapi */
    font-size: var(--font-size-0-8rem);
    letter-spacing: 2px;
    white-space: nowrap; /* Mencegah teks patah/turun baris */
}

.floating-wishlist-vertical i {
    font-size: var(--font-size-0-8rem);
    writing-mode: vertical-rl;
    transform: rotate(-90deg);
    white-space: nowrap; /* Mencegah teks patah/turun baris */
}

/* Efek saat tab disentuh di HP */
.floating-wishlist-vertical:active {
    background-color: #4a8fa8; /* Warna biru sedikit lebih gelap */
}
/* Opsional: Sembunyikan teks di HP agar tidak menutupi layar, hanya tampil tombolnya saja */
.chat-label {
    display: none;
}

.chat-button {
    width: 45px;
    height: 45px;
    background-color: #2b2b2b; /* Warna abu-abu sangat gelap hampir hitam */
    color: #ffffff; /* Warna ikon putih */
    border-radius: 50%; /* Membuat lingkaran sempurna */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-1-4rem); /* Ukuran ikon */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Bayangan lebih pekat */
    transition: all 0.3s ease;
}

#content h3 {
    font-family: var(--font-rubik);
    font-size: var(--font-size-1-1rem);
    letter-spacing: 1px;
    margin-bottom: 0px;
}

.footer-logo img {
    max-width: 150px;
}

.aboutus-text {
    margin-bottom: 60px;
}

.aboutus-text h2 {
    font-family: var(--font-cabin);
    font-size: var(--font-size-1-5rem);
}

.aboutus-text p {
    font-family: var(--font-rubik);
    font-size: var(--font-size-0-8rem);
    color: var(--text-color-888);
    font-weight: 300;
    letter-spacing: 2px;
}

/* 2. Mematikan (disable) efek fokus pada form input */
.custom-search-input:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: #ced4da !important; /* Mempertahankan warna border abu-abu bawaan */
}

.custom-search-input {
    font-family: var(--font-rubik);
    font-size: var(--font-size-0-75rem);
}

/* 3. Memberikan overlay gelap 50% pada elemen <main id="content"> */
main#content.search-overlay-active {
    position: relative;
}

/* Trik menggunakan pseudo-element untuk menutupi seluruh isi <main> */
main#content.search-overlay-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Hitam dengan opacity 50% */
    z-index: 1040; /* Berada di atas produk, tapi di bawah navbar/search box */
    pointer-events: none; /* Mencegah klik tembus ke produk di bawahnya */
    text-align: center;
}

/* Styling tambahan untuk hasil pencarian autocomplete */
#searchResults {
    background-color: #ffffff;
}
#searchResults .list-group-item {
    cursor: pointer;
    font-size: var(--font-size-0-8rem);
    padding: 10px 15px;
    transition: background-color 0.2s ease;
}
#searchResults .list-group-item:hover {
    background-color: #f8f9fa;
    color: #000000;
}

/* Penyesuaian lebar kotak pencarian khusus di layar Mobile/HP */
header.search-active-header {
    z-index: 1050 !important;
}

#searchBox {
    right: 0px; /* Lebih mentok ke kanan layar di HP */
    margin-top: 15px; /* Jarak sedikit lebih rapat ke ikon di HP */
    width: 300px; /* Lebar dikecilkan agar tidak menabrak kiri layar HP */
}

/* ==========================================================
   STYLING PRODUCT COLLECTION & SIDEBAR
   ========================================================== */

/* Spasi huruf yang renggang (Khas desain elegan) */
.ls-wide {
    letter-spacing: 2px;
}

/* Memotong judul produk menjadi maksimal 2 baris (mencegah grid berantakan) */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.5rem; /* Menjaga tinggi tetap konsisten meski hanya 1 baris */
}

/* --------------------------------------
   Kustomisasi Checkbox (Hitam Putih)
   -------------------------------------- */
.custom-check:checked {
    background-color: #000000 !important;
    border-color: #000000 !important;
}

/* --------------------------------------
   Kustomisasi Scrollbar pada Filter
   -------------------------------------- */
.filter-list.custom-scrollbar {
    max-height: 125px; /* Memaksa scrollbar muncul jika item lebih dari 4 */
    overflow-y: auto;
}

/* Merubah desain scrollbar bawaan browser */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #a8a8a8;
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #7a7a7a;
}

.border-bottom-new-release {
    border-bottom: 1px solid black;
    display: block;
    /* padding-top: 30px; */
}

.border-top-new-release {
    border-top: 1px solid black;
    display: block;
    /* padding-top: 30px; */
}

.new-release-text-filter h5 {
    font-family: var(--font-rubik);
    font-size: var(--font-size-0-8rem);
    font-weight: 300;
    letter-spacing: 2px;
}

.new-release-text-filter {
    font-family: var(--font-rubik);
    font-size: var(--font-size-0-65rem);
    letter-spacing: 1px;
}

/* ==========================================================
   STYLING AUTOCOMPLETE DROPDOWN (PREMIUM)
   ========================================================== */

/* Layout untuk setiap item hasil pencarian */
.autocomplete-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    border: none !important;
    transition: background-color 0.2s ease;
}

.autocomplete-item:hover {
    background-color: #f8f9fa;
}

/* Gambar Thumbnail Produk */
.autocomplete-img {
    width: 35px; /* Lebar gambar kecil sesuai contoh */
    height: 50px; /* Tinggi gambar */
    object-fit: contain; /* Memastikan gambar tidak gepeng */
    margin-right: 25px; /* Jarak antara gambar dan teks */
}

/* Teks Judul Produk */
.autocomplete-text {
    font-family: var(--font-fourth);
    font-size: 0.95rem;
    letter-spacing: 2px;
    color: #000000;
}

/* Footer "Search for..." */
.search-footer-hover {
    background-color: #fcfcfc;
    transition: background-color 0.2s ease;
}
.search-footer-hover:hover {
    background-color: #f1f1f1;
}

/* Warna Biru Muda khas tombol keranjang */
.btn-light-blue {
    background-color: #7ab8e6; /* Sesuaikan warna hex jika perlu */
    border-color: #7ab8e6;
}

.btn-light-blue:hover {
    background-color: #63a0cf;
    border-color: #63a0cf;
    color: #ffffff;
}

/* Warna Outline Biru Muda untuk tombol kembali */
.btn-outline-light-blue {
    color: #7ab8e6;
    border: 1px solid #7ab8e6;
    background-color: transparent;
}

.btn-outline-light-blue:hover {
    color: #ffffff;
    background-color: #7ab8e6;
}

/* Modifikasi kotak Thumbnail Warna */
.color-thumbnail {
    width: 35px;
    height: 35px;
    transition: border-color 0.2s;
}
.color-thumbnail:hover {
    border-color: #000 !important;
}

/* Modifikasi Nav Tabs agar mirip desain gambar */
.product-tabs .nav-link {
    color: #999 !important; /* Warna abu-abu saat tidak aktif */
    border-bottom: 2px solid transparent !important; /* Garis bawah transparan */
    padding-bottom: 5px;
}

.product-tabs .nav-link.active {
    color: #000 !important; /* Warna hitam saat aktif */
    border-bottom: 2px solid #000 !important; /* Garis bawah hitam tebal saat aktif */
}

/* Menghilangkan input panah naik-turun bawaan browser pada kolom Quantity */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.text-detail h4 {
    font-family: var(--font-cabin);
    font-weight: var(--font-weight-300);
    font-size: var(--font-size-1rem);
}

.text-detail p {
    font-family: var(--font-rubik);
    font-size: var(--font-size-0-8rem);
    /* font-weight: var(--font-weight-300); */
    color: var(--text-color-888);
    text-align:justify;
}

.text-detail label {
    font-family: var(--font-rubik);
    font-size: var(--font-size-0-8rem);
    /* font-weight: var(--font-weight-300); */
    color: var(--text-color-888);
}

.text-detail button {
    font-family: var(--font-rubik);
    font-size: var(--font-size-0-8rem);
    /* font-weight: var(--font-weight-300); */
    color: var(--text-color-888);
}

.text-detail input {
    font-family: var(--font-rubik);
    font-size: var(--font-size-0-8rem);
    /* font-weight: var(--font-weight-300); */
    color: var(--text-color-888);
}

.text-detail ul li button {
    font-family: var(--font-rubik);
    font-size: var(--font-size-0-8rem);
    /* font-weight: var(--font-weight-300); */
    color: var(--text-color-888);
}

.text-detail h5 {
    font-family: var(--font-rubik);
    font-size: var(--font-size-1rem);
}

.text-detail-button button {
    font-family: var(--font-rubik);
    font-size: var(--font-size-0-8rem);
    /* font-weight: var(--font-weight-300); */
    color: var(--text-color-add8e6);
}

.text-detail h2 {
    font-size:var(--font-size-2rem);
    font-family:var(--font-rubik);
}

.text-detail i {
    font-size:var(--font-size-0-9rem);
    margin-right:2px;
}

.text-detail span {
    font-size:var(--font-size-0-75rem);
    font-family:var(--font-rubik);
    font-weight:var(--font-weight-600);
}
.review-none p {
    font-size:var(--font-size-0-65rem);
}

.review-item h6 {
    font-family:var(--font-rubik);
    font-size:var(--font-size-0-9rem);
}

.review-item span {
    font-family:var(--font-rubik);
    font-size:var(--font-size-0-75rem);
}

.review-item i {
    font-size:var(--font-size-0-75rem);
}

.review-item p {
    font-size:var(--font-size-0-8rem);
    font-family:var(--font-rubik);
}
/* ==========================================================
   STYLING CAROUSEL PRODUCT DETAIL (DOT INDICATORS)
   ========================================================== */

/* Mengubah bentuk indikator menjadi lingkaran kecil */
#productImageCarousel .custom-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important; /* Membuatnya bulat sempurna */
    background-color: #000000 !important;
    opacity: 0.3; /* Warna abu-abu pudar saat tidak aktif */
    border: none !important;
    margin: 0 4px !important; /* Jarak antar titik */
    transition: opacity 0.3s ease;
    cursor: pointer;
}

/* Warna saat indikator sedang aktif */
#productImageCarousel .custom-dot.active {
    opacity: 1 !important; /* Menjadi hitam pekat */
}

#btnMinus,
#btnPlus {
    background-color: transparent;
    color: #000000;
}

#btnMinus:hover,
#btnPlus:hover {
    background-color: #f1f1f1; /* Efek abu-abu lembut saat disentuh */
}

/* Mematikan border fokus bawaan input agar terlihat mulus dengan wadahnya */
#qtyInput:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Efek hover untuk tombol quantity atas-bawah */
.custom-qty-hover:hover {
    background-color: #f1f1f1 !important;
}

.qty-controls {
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out; /* Transisi halus (fade in/out) */
}

.qty-wrapper:hover .qty-controls,
.qty-wrapper:focus-within .qty-controls {
    opacity: 1;
    visibility: visible;
}

/* 3. Efek saat ikon segitiganya sendiri ditekan/disorot */
.qty-controls button:hover {
    color: #000000 !important; /* Berubah dari abu-abu menjadi hitam pekat */
}

.cart-qty-btn {
    width: 22px;
    height: 22px;
    background-color: #222; /* Hitam pudar (bukan #000 pekat) mirip desain */
}

.cart-qty-btn i {
    font-size: 10px; /* Ukuran ikon di dalam lingkaran */
    color: #ffffff;
}

.cart-qty-btn:hover {
    background-color: #000000;
}

/* Memastikan tulisan keranjang tidak patah */
#cartOffcanvas .text-secondary {
    color: #777 !important;
}
/* Media query untuk layar lebih besar */
.cart h6 {
    font-family:var(--font-rubik);
    font-size:var(--font-size-0-9rem);
}

.cart p {
    font-family:var(--font-rubik);
    font-size:var(--font-size-0-75rem);
}

.cart span {
    font-family:var(--font-rubik);
    font-size:var(--font-size-0-8rem);
}

.cart-count span {
    font-family:var(--font-rubik);
    font-size:var(--font-size-0-9rem)
}

.cart-count a {
    font-family:var(--font-rubik);
    font-size:var(--font-size-0-75rem);
}

.cart-count button {
    font-family:var(--font-rubik);
    font-size:var(--font-size-0-75rem);
}

.btn-continue-shopping,
.btn-continue-shopping u {
    transition: color 0.3s ease-in-out;
    font-size:var(--font-size-0-8rem);
}
.btn-continue-shopping:hover,
.btn-continue-shopping:hover u {
    color:#5ba9c6 !important; /* Ubah kode hex ini dengan warna primary brand Anda jika ada */
}

.highlight-news p{
    font-size:var(--font-size-0-75rem);
    font-family:var(--font-rubik);
}

/* S: LOGIN */

    /* Mematikan border biru bawaan browser saat form diklik (fokus) */
    .custom-login-input:focus {
        outline: none !important;
        box-shadow: none !important;
        border-width: 2px !important; /* Membuat garis hitam lebih tebal saat aktif mengetik */
    }

    /* Efek transisi warna abu-abu elegan saat tombol Google disorot */
    /* .google-btn-hover {
        transition: all 0.3s ease;
    }
    .google-btn-hover:hover {
        background-color: #f1f1f1;
        color: #000000;
        border-color: #000000;
    } */

    /* Mengubah warna link menjadi sedikit memudar saat disorot */
    .custom-link-hover:hover {
        color: #555555 !important;
    }

    /* Merubah warna border menjadi merah jika ada class error */
    .custom-login-input.border-danger {
        border-color: #dc3545 !important;
    }
    .custom-login-input.border-danger:focus {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
    }

    .login-section {
        font-family: var(--font-rubik);
    }

    .login-section h4{
        font-size: var(--font-size-1-5rem);
    }

    .login-section label {
        font-size: var(--font-size-0-8rem);
    }

    .login-section input {
        font-size: var(--font-size-0-8rem);
    }

    .login-section .text-danger {
        font-size: var(--font-size-0-75rem) !important;
    }

    .login-section .forgot-your-password {
        font-size: var(--font-size-0-75rem);
    }

    .login-section .forgot-your-password a:hover {
        font-size: var(--font-size-0-75rem);
        color: green !important;
    }

    .login-section .btn-login {
        font-size: var(--font-size-0-8rem);
    }

    .login-section .or {
        font-size: var(--font-size-0-9rem);
    }

    .login-section .dont-have-account {
        font-size: var(--font-size-0-8rem);
    }

    .login-section .dont-have-account a:hover {
        font-size: var(--font-size-0-8rem);
        color: green !important;
    }

/* E: LOGIN */

/* S: 404 */

.content-404 {
    font-family: var(--font-rubik);
}

.content-404 h1 {
    font-size: var(--font-size-8rem); 
    letter-spacing: -3px; 
    color: #212529; 
    line-height: 1;
}

.content-404 hr {
    width: 50px; 
    opacity: 1; 
    border-width: 2px;
}

.content-404 h4 {
    font-size: var(--font-size-1-2rem)
}

.content-404 p {
    font-size: var(--font-size-1rem);
}

.content-404 .button-404 a {
    font-size: var(--font-size-0-75rem);
}
/* E: 404 */

/* S:DASHBOARD */

.custom-member-nav .nav-link {
        color: #212529;
        transition: all 0.3s ease;
        font-size: var(--font-size-0-65rem);
        font-family: var(--font-rubik);
    }
    .custom-member-nav .nav-link:hover {
        background-color: #f8f9fa;
    }
    .custom-member-nav .nav-link.active {
        background-color: #212529 !important;
        color: #ffffff !important;
        border-color: #212529 !important;
    }

    .custom-member-nav .logout-button {
        font-size: var(--font-size-0-65rem);
        font-family: var(--font-rubik);
    }

    .dashboard-stat-box {
        border: 2px solid #212529;
        padding: 20px;
        text-align: center;
        transition: transform 0.2s ease;
    }
    .dashboard-stat-box:hover {
        transform: translateY(-5px);
    }

    .dashboard-stat-box  h1{
        font-size: var(--font-size-2rem);
    }

    .dashboard-stat-box span {
        font-size: var(--font-size-0-75rem);
    }

    .content-dashboard {
        font-family: var(--font-rubik);
    }

    .content-dashboard h2 {
        font-size: var(--font-size-1-5rem);
    }

    .content-dashboard a {
        font-size: var(--font-size-0-8rem);
    }

    .dashboard-panel h4 {
        font-size: var(--font-size-1-4rem);
    }

    .dashboard-panel p {
        font-size: var(--font-size-0-9rem);
    }

    .buku-alamat h5 {
        font-family: var(--font-rubik);
        font-size: var(--font-size-1-4rem);
    }

    .buku-alamat button {
        font-family: var(--font-rubik);
        font-size: var(--font-size-0-75rem);
    }

    .buku-alamat span {
        font-family: var(--font-rubik);
        font-size: var(--font-size-0-75rem);
    }

    .btn-hover-lift {
        transition: all 0.2s ease-in-out;
    }
    .btn-hover-lift:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
    }

    /* Efek untuk Tombol Hapus */
    .btn-hover-danger {
        transition: all 0.2s ease;
    }
    .btn-hover-danger:hover {
        background-color: #dc3545;
        color: white !important;
        border-color: #dc3545 !important;
    }

    .address-card p {
        font-family: var(--font-rubik);
        font-size: var(--font-size-0-75rem);
    }

    .address-card h6 {
        font-family: var(--font-rubik);
        font-size: var(--font-size-0-8rem);
    }

    .address-card h5 {
        font-family: var(--font-rubik);
        font-size: var(--font-size-0-8rem);
    }

    .modal-address-form h5{
        font-family: var(--font-rubik);
        font-size: var(--font-size-0-9rem);
    }

    .modal-address-form label, 
    .modal-address-form input,
    .modal-address-form select,
    .modal-address-form textarea,
    .modal-address-form button {
        font-family: var(--font-rubik);
        font-size: var(--font-size-0-8rem);
    }

    .modal-address-form button {
        font-family: var(--font-rubik);
        font-size: var(--font-size-0-75rem);
    }

    .edit-profile-form label,
    .edit-profile-form input,
    .edit-profile-form small,
    .edit-profile-form h6 {
        font-family: var(--font-rubik);
        font-size: var(--font-size-0-8rem);
    }

    .edit-profile-form button {
        font-family: var(--font-rubik);
        font-size: var(--font-size-0-75rem);
    }

    .order-dashboard h5 {
        font-family: var(--font-rubik);
        font-size: var(--font-size-0-9rem);
    }
    
    .orders-dashboard span {
        font-family: var(--font-rubik);
        font-size: var(--font-size-0-8rem);
    }

    .orders-dashboard select {
        font-family: var(--font-rubik);
        font-size: var(--font-size-0-75rem);
    }

    .orders-dashboard button {
        font-family: var(--font-rubik);
        font-size: var(--font-size-0-8rem);
    }

    .review-modal h5 {
        font-family: var(--font-rubik) !important;
        font-size: var(--font-size-0-8rem) !important;
    }

    .review-modal label {
        font-family: var(--font-rubik) !important;
        font-size: var(--font-size-0-8rem) !important;
    }

    .review-modal select {
        font-family: var(--font-rubik) !important;
        font-size: var(--font-size-0-8rem) !important;
    }

    .review-modal textarea {
        font-family: var(--font-rubik) !important;
        font-size: var(--font-size-0-8rem) !important;
    }

    .review-modal button {
        font-family: var(--font-rubik) !important;
        font-size: var(--font-size-0-8rem) !important;
    }
    /* E: DASHBOARD */

    /* S: WISHLIST */

    .wishlist-content {
        font-family: var(--font-rubik);
    }

    .wishlist-content h2 {
        font-size: var(--font-size-1-5rem);
    }

    .wishlist-content span {
        font-size: var(--font-size-0-65rem);
    }

    .wishlist-item {
        font-family: var(--font-rubik);
    }

    .wishlist-item h6 {
        font-size: var(--font-size-0-9rem);
    }

    .wishlist-item p {
        font-size: var(--font-size-0-8rem);
    }

    .wishlist-item .btn {
        font-size: var(--font-size-0-75rem);
    }
/* E: WISHLIST */

.custom-pagination a {
    font-size: var(--font-size-0-75rem);
    font-family: var(--font-rubik);
}

/* S: DETAIL COLLECTION */

.detail-collection p {
    font-family: var(--font-rubik);
    font-size: var(--font-size-0-75rem);
    color: var(--text-color-888);
    letter-spacing: 2px;
}

.variant-option {
    transition: all 0.2s ease-in-out;
}

/* Khusus untuk tombol teks (Size dll) */
.variant-option.btn.selected {
    background-color: #212529 !important; /* Warna Gelap / Dark */
    color: #fff !important;
    font-weight: 500 !important;
}

/* Khusus untuk thumbnail gambar (Color) */
.color-thumbnail {
    border-color: #dee2e6 !important; /* Border terang saat belum dipilih */
}
.color-thumbnail.selected {
    border-color: #212529 !important; /* Border gelap & tebal saat dipilih */
    border-width: 2px !important;
    padding: 0px !important; /* Menyesuaikan ketebalan border */
}
/* E: DETAIL COLLECTION */

/* S: CART OFFCANVAS */

/* ========================================================= */
/* KONTROL QUANTITY PREMIUM (CART)                           */
/* ========================================================= */
.premium-qty-container {
    background-color: #f4f4f4;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.premium-qty-container:hover {
    border-color: #212529;
    background-color: #ffffff;
}

.premium-qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #6c757d;
    transition: all 0.2s ease;
}

.premium-qty-btn:hover {
    background-color: #212529;
    color: #ffffff !important;
}

.premium-qty-btn:active {
    transform: scale(0.85); /* Efek tombol tertekan */
}

.qty-input {
    font-size: var(--font-size-0-75rem);
    font-family: var(--font-rubik);
}

.offcanvas-cart span {
    font-size: var(--font-size-0-8rem);
    font-family: var(--font-rubik);
}

.offcanvas-cart a{
    font-size: var(--font-size-0-8rem);
    font-family: var(--font-rubik);
}

/* E: CART OFFCANVAS */

/* S: CONTENT CHECKOUT */

.content-checkout h3 {
    font-family:var(--font-rubik) !important;
    font-size:var(--font-size-1-2rem) !important;
}

.content-checkout h5 {
    font-family:var(--font-rubik);
    font-size:var(--font-size-0-9rem);
}

.content-checkout h6 {
    font-family:var(--font-rubik);
    font-size:var(--font-size-0-9rem);
}

.content-checkout p {
    font-family:var(--font-rubik);
    font-size:var(--font-size-0-75rem);
}

.content-checkout button {
    font-family:var(--font-rubik);
    font-size:var(--font-size-0-65rem);
}

.content-checkout-alamat {
    font-family:var(--font-rubik);
    font-size:var(--font-size-0-9rem);
}

.content-checkout-alamat a {
    color:black;
}
.content-checkout-alamat a:hover{
    color:red;
}

.modal-header h5 {
    font-family: var(--font-rubik);
    font-size: var(--font-size-0-9rem);
}

.modal-header button {
    font-size: var(--font-size-0-75rem);
}

.content-checkout-modal a {
    font-size: var(--font-size-0-75rem);
    font-family:var(--font-rubik);
}

.content-checkout-modal h6 {
    font-size: var(--font-size-0-9rem);
    font-family:var(--font-rubik);
}

.content-checkout-modal p {
    font-size: var(--font-size-0-8rem);
    font-family:var(--font-rubik);
}

.content-checkout-modal span {
    top:5px;
}

.content-checkout-modal button {
    font-size: var(--font-size-0-75rem);
    font-family:var(--font-rubik);    
}

.content-metode-pengiriman-checkout h5 {
    font-size: var(--font-size-0-9rem);
    font-family:var(--font-rubik); 
}

.shipping-option-box {
    font-size: var(--font-size-0-8rem);
    font-family:var(--font-rubik); 
}

.content-checkout-pesanan h5 {
    font-size: var(--font-size-0-9rem);
    font-family:var(--font-rubik); 
}

.content-checkout-pesanan label {
    font-size: var(--font-size-0-8rem);
    font-family:var(--font-rubik); 
}

.content-checkout-pesanan input {
    font-size: var(--font-size-0-8rem);
    font-family:var(--font-rubik);
}

.coupon-message-alert {
    font-size: var(--font-size-0-8rem);
    font-family:var(--font-rubik);
}

.content-checkout-pesanan span {
    font-size: var(--font-size-0-8rem);
    font-family:var(--font-rubik);
}

.content-checkout-pesanan button {
    font-size: var(--font-size-0-75rem) !important;
    font-family:var(--font-rubik);
}
/* E: CONTENT CHECKOUT */

@media (min-width: 768px) {
    .container {
        padding: 0px 0px;
    }
    .wrappertengah {
        width: 980px;
        margin: 0 auto;
    }

    .logo {
        padding: 0px 20px;
        margin-bottom: 0px;
    }

    /* --- Styling Hover Menu Desktop --- */
    .menu-hover {
        /* 16px untuk atas-bawah (menggantikan py-3), dan 10px untuk kanan-kiri */
        padding: 10px 15px !important;
        transition: background-color 0.2s ease-in-out;
        border-radius: 0; /* Memastikan sudut kotak (tidak membulat) */
        font-family: var(--font-rubik);
        font-size: var(--font-size-0-75rem);
        font-weight: var(--font-weight-300);
    }

    /* Efek saat mouse berada di atas menu */
    .menu-hover:hover {
        background-color: var(--background-black); /* Warna latar abu-abu muda, silakan ganti sesuai desain */
        color: var(--text-color-white) !important; /* Memastikan teks tetap hitam */
    }

    .custom-fixed-header {
        /* Samakan dengan lebar .wrappertengah Anda */
        width: 980px !important;
        /* Pusatkan elemen fixed */
        left: 50% !important;
        transform: translateX(-50%);
        right: auto !important;
    }

    #content {
        padding: 0px 20px;
        margin-top: 20px;
    }

    #contentnewrelease {
        padding: 0px 20px;
        margin-top: 0px;
    }

    /* Kontainer Utama yang mengunci posisi di layar */
    .floating-chat-widget {
        position: fixed;
        bottom: 30px; /* Jarak dari bawah layar */
        right: 30px; /* Jarak dari kanan layar */
        display: flex;
        align-items: center;
        gap: 15px; /* Jarak antara kapsul teks dan tombol bulat */
        z-index: 9999; /* Memastikan selalu berada di lapisan paling atas */
        text-decoration: none; /* Menghilangkan garis bawah bawaan link */
    }

    /* Kotak Teks Kapsul Putih */
    .chat-label {
        background-color: var(--background-white); /* Warna putih */
        color: var(--text-color-black); /* Warna hitam */
        font-family: var(--font-cabin); /* Menggunakan font sekunder Anda */
        font-size: var(--font-size-0-9rem);
        letter-spacing: 2px; /* Renggang huruf seperti di gambar */
        padding: 7px 15px;
        border-radius: 10px; /* Membuat bentuk kapsul */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Bayangan lebih pekat */
        transition: all 0.3s ease;
        display: inline-block;
    }

    /* Tombol Bulat Gelap */
    .chat-button {
        width: 65px;
        height: 65px;
        background-color: #2b2b2b; /* Warna abu-abu sangat gelap hampir hitam */
        color: #ffffff; /* Warna ikon putih */
        border-radius: 50%; /* Membuat lingkaran sempurna */
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--font-size-1-4rem); /* Ukuran ikon */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Bayangan lebih pekat */
        transition: all 0.3s ease;
    }

    /* --- EFEK SAAT MOUSE DI ARAHKAN (HOVER) --- */
    .floating-chat-widget:hover .chat-button {
        background-color: var(--background-black); /* Menjadi hitam pekat saat dihover */
        transform: scale(1.05); /* Membesar sedikit */
    }

    .floating-chat-widget:hover .chat-label {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); /* Bayangan membesar */
        transform: translateY(-2px); /* Teks sedikit naik */
    }

    /* 2. POSISI DEFAULT SEARCH BOX (DESKTOP) */
    #searchBox {
        display: none; /* Disembunyikan saat pertama load */
        top: 100%; /* Posisinya tepat di garis bawah elemen pembungkusnya */
        right: 15px; /* Rata kanan sejajar dengan kumpulan ikon */
        margin-top: 0px; /* Jarak dari ikon ke kotak search */
        width: 350px; /* Lebar kotak di desktop */
        z-index: 1060; /* Posisi di atas header (1050) */
    }

    main#content.search-overlay-active {
        position: relative;
    }
    /* Trik menggunakan pseudo-element untuk menutupi seluruh isi <main> */
    main#content.search-overlay-active::before {
        content: "";
        position: absolute;
        /* top: 0;
        left: 0; */
        width: 98%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Hitam dengan opacity 50% */
        z-index: 1040; /* Berada di atas produk, tapi di bawah navbar/search box */
        pointer-events: none; /* Mencegah klik tembus ke produk di bawahnya */
        top: 50%; /* Pindahkan tepi atas anak ke tengah induk */
        left: 50%; /* Pindahkan tepi kiri anak ke tengah induk */

        /* Kunci 3: Geser kembali elemen sebesar setengah tinggi & lebarnya sendiri */
        transform: translate(-50%, -50%);
        padding: 20px;
    }

    .border-bottom-new-release {
        border-bottom: 1px solid black;
        display: block;
        /* padding-top: 30px; */
    }

    .border-top-new-release {
        /* border-top: 1px solid black; */
        display: none;
        /* padding-top: 30px; */
    }
   
}