.offers {
    background: var(--color-fill-gradient);
    height: 6.25rem;
    padding: 0.625rem 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.disc {
    gap: 1rem;
}

.disc-number {
    display: flex;
    padding: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.40);
    background: rgba(255, 255, 255, 0.24);
}

.text-disc {
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 90%; /* 18px */
}

.quantity-disc {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 90%; /* 36px */
}

.text-visa {
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 27px */
}

.timer {
    height: 48px;
    padding: 8px 4px 8px 24px;
    gap: 24px;
    border-radius: 999px;
    border: 1px solid var(--color-white);
    background: rgba(255, 255, 255, 0.80);
}

.text-offers-end {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

.btn-get-now {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    height: 2.5rem;
    padding: 0.625rem 2.5rem;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 99999px;
}

.custom-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white);
}

.logo{
    width: 108.829px;
    height: 24px;
}

.navbar-nav {
    margin-left: 4rem;
    /* gap: 32px; */
}

.navbar-nav .nav-link {
    color: black;
    font-size: 1rem;
    margin-right: 15px;
}

/* Form Search */
.form-search {
    display: flex;
    width: 300px;
    height: 40px;
    padding: 10px 16px;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    border: 2px solid var(--color-grey-30);
    position: relative;
    background: white;
}

/* Input Search */
.search-bar {
    border: none;
    outline: none; /* Menghilangkan outline saat mengetik */
    width: 90%;
    padding-left: 30px; /* Ruang untuk ikon search */
    color: rgba(0, 0, 0, 0.50);
    font-family: Manrope, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
}

/* Ikon Search */
.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 0, 0, 0.50);
}

/* Ikon Clear (X) */
.clear-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: rgba(0, 0, 0, 0.50);
    display: none; /* Disembunyikan saat input kosong */
}

.search-bar:not(:placeholder-shown) {
    color: var(--color-grey-90);
}

/* Saat input memiliki teks, tampilkan ikon X */
.search-bar:not(:placeholder-shown) + .clear-icon {
    display: block;
}

/* Hapus ikon "X" bawaan di Chrome, Edge */
.search-bar::-webkit-search-cancel-button {
    display: none;
}

/* Hapus ikon "X" bawaan di Firefox */
.search-bar::-moz-search-clear-button {
    display: none;
}

.banner {
    height: 31.25rem;
    display: flex;
    padding: 46px 40px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex-shrink: 0;
    border-radius: 1.5rem;
}

.w-text-banner{
    width: 1061px;
    align-items: center;
}

.card-product {
    display: flex;
    height: 300px;
    padding: 28px 24px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1 0 0;
    border-radius: 16px;
    box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.04);

    background-image: url('../../image/Union.svg'); /* Ganti dengan URL gambar */
    background-size: 150px; /* Atur ukuran */
    background-position: right bottom; /* Pojok kanan bawah */
    background-repeat: no-repeat;
}