@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap'); */

* {
    font-family: 'Inter', sans-serif;
}

html,
body {
    position: relative;
    height: 100%;
}

:root {
    /* ====== Global Color Variables ====== */
    --color-primary: #eb4222;
    --color-primary-dark: #c6391d;

    /* Versi turunan opsional */
    --color-bg-primary: var(--color-primary);
    --color-bg-primary-dark: var(--color-primary-dark);
    --color-text-primary: var(--color-primary);
    --color-text-primary-dark: var(--color-primary-dark);

    /* Warna lainnya */
    --color-green: #4cbb17;
    --color-green-secondary: #44aa15;

}

.btn-primary-custom,
.bg-primary-custom {
    background-color: var(--color-bg-primary) !important;
}

.btn-green {
    background-color: var(--color-green) !important;
}

.btn-green:hover {
    background-color: var(--color-green-secondary) !important;
}

.color-primary-custom {
    color: var(--color-text-primary) !important;
}


.bg-primary-custom:hover,
.btn-primary-custom:hover {
    background-color: var(--color-bg-primary-dark) !important;
}


.fw-semibold {
    font-weight: 600 !important;
}

.list-halaman {
    list-style-type: none;
    padding: 0;
    margin: 0 0 0 0;
}


.list-halaman li a,
footer a {
    transition: .2s all ease-in;
    text-decoration: none;
}

footer a:hover {
    color: var(--color-primary-dark) !important;
    transform: scale(.9);
}

.list-halaman li a:hover {
    margin-left: .3rem;
    color: var(--color-primary-dark) !important;
}

.list-halaman li:nth-child(2) {
    margin: 8px 0;

}

#product,
#detail-product {
    min-height: 75vh;
}

#detail-product .checkout-container {
    background-color: rgba(68, 170, 21, 0.1);
    border: solid rgba(68, 170, 21, .2) 1px;
}

#detail-product .services-container .col-lg-4 div {
    border: solid rgba(235, 66, 34, .3) 1px;
    height: 80px;
}

#detail-product .services-container .col-lg-4 svg {
    color: var(--color-primary-dark);
}

.list-group-item a {
    text-decoration: none;
    transition: .1s ease-in-out;
    font-weight: 600;
    color: black;
}

.breadcrumb-item a {
    transition: .1s ease-in-out;
    font-weight: 600;
    color: var(--color-text-primary);
}


.list-group-item a.active {
    color: var(--color-text-primary);

}

.list-group-item a:hover,
.breadcrumb-item a:hover {

    color: var(--color-text-primary-dark);
}

.product-card {
    text-decoration: none;
    color: black;

}

.product-card .card {
    transition: .1s ease-in;
    color: black;

}

.product-card .card:hover {
    border: solid 1px var(--color-bg-primary);
    transform: scale(1.01);
}

.pagination {
    justify-content: center;
    /* posisikan di tengah */
    margin-top: 20px;
}

.page-item .page-link {
    color: #912009;
    /* warna teks */
    border: 1px solid #912009;
    font-weight: 500;
}

.page-item.active .page-link {
    background-color: #eb4222;
    /* warna aktif */
    border-color: #eb4222;
    color: #fff;
}

.page-item .page-link:hover {
    background-color: #912009;
    color: #fff;
}

.swiper {
    width: 320px;
    height: 400px;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.swiper-slide {
    background-color: gray;
}

.whatsapp-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--color-green);
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    z-index: 1000;
}

@media only screen and (max-width: 992px) {
    .card {
        width: 25rem !important;
    }
}

@media only screen and (max-width: 768px) {
    .card {
        width: 25rem !important;
    }

    .swiper {
        width: 240px;
        height: 320px;
    }
}

@media only screen and (max-width: 600px) {
    .card {
        width: 100% !important;
    }
}