/* ========================================= */
/*  CONTENT CSS */
/* ========================================= */
/* 1 SCROLL BAR */
/* 2 REUSABLE CSS */
/* 3 NAVBAR */
/* 4 BACKGROUND HOLDER */
/* 5 BUTTON */
/* 6 FORM GROUP CUSTOM */
/* 7 GRID GALLERY */
/* 8 CARD */
/* ========================================= */
html {
    scroll-behavior: smooth;
}

/* SCROLL BAR */
::-webkit-scrollbar {
    width: .60rem;
    background-color: white;
}

::-webkit-scrollbar-thumb {
    background-color:  #f1426b;
}

::-webkit-scrollbar-thumb:hover {
    background-color:  #f1426b;
    /* background-color: #0F3124; */
}


/* REUSABLE CSS */
.checked {
    color: yellow;
    font-size: 1.5rem;
    margin-bottom: .5rem;
}

h1.text-title-1 span {
    color: #0b599d;
}

h1.text-title-2 {
    color: white;
}

span.span-new-product {
    color: #0b599d;
}

.span-new-card {
    background-color: darkgrey;
    border-radius: 2rem;
    padding: 1rem 2rem 1rem 2rem;
    z-index: 9999;
}

.span-link {
    color: white;
    font-weight: 600;
    font-size: 16px;
    background-color: darkgrey;
    text-decoration: none;
    cursor: pointer;
}

.span-button {
    position: relative;
    left: 20%;
    background-color: #337AB7;
    color: white;
    padding: 1rem;
}

.span-type-product-greeting {
    color: chartreuse;
}

.span-type-product-wedding {
    color: #E03577;
}

.text-title {
    line-height: 120%;
    color: #394b7c;
}

.text-subtitle-1 {
    color: black;
    font-size: 18px;
    font-weight: 600;
}

.text-subtitle-2 {
    color: black;
    font-size: 18px;
    font-weight: 700;
}

.text-order {
    color: black;
    font-weight: 600;
}

.products-desc {
    color: #0576d9;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 2px;
}

.title-product {
    left: 0;
}

.wrapper-carousel {
    width: 240px;
    height: auto;
}

.carousel-item {
    justify-content: center;
}

/* NAVBAR */
.navbar-toggler {
    background-color: white;
    border: black;
}

.navbar-dark .navbar-toggler-icon {
    filter: brightness(0%);
}

.navbar-dark .navbar-nav .nav-link {
    color: black;
    font-weight: 500;
}

.navbar-dark .navbar-nav .nav-link:hover, .nav-link:focus {
    color: black;
}

/* BACKGROUND HOLDER */
.bg-card-preview {
    width: 800px;
    height: auto;
}

/* BUTTON */
.button-custom {
    border-radius: 50%;
    padding: 0 18px 14px 18px;
}

.btn-custom-product {
    background-color: #0b599d;
    border-color: #0b599d;
    padding: .5rem;
}

.btn-custom-product a {
    color: white;
}

.btn-custom-product:hover, .btn-custom-product:focusm {
    background-color: #0b599d;
    border-color: #0b599d;
}

.btn-custom-product-carousel {
    background-color: #a6ce57;
    padding: .75rem;
    border: #a6ce57;
    border-radius: 1.2rem;
}

.btn-custom-product-carousel a {
    color: white;
    font-weight: 600;
}

.btn-custom-product-carousel:hover, .btn-custom-product-carousel:focusm {
    background-color: #a6ce57;
    color: white;
}

/* FORM GROUP CUSTOM */
.rounded {
    text-align: center;
}

/* GRID GALLERY */
.wrapper-new-product {
    width: 360px;
    height: auto;
}

/* PRODUCT US */
.screen {
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 120px;
    overflow: hidden;
    position: relative;
    border-radius: 1px;
    margin: 0 auto;
}

.screen img {
    width: 100%;
    height: auto;
    position: absolute;

}

.screen img:hover {
    transform: translate(0, -100%);
    transition-timing-function: ease-in-out;
    transition-duration: 10s;
}

/* CARD */
.wrapper-gallery .card {
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
    margin: 1rem;
}

.wrapper-gallery .card-body {
    color: black;
}

.wrapper-gallery .card-title {
    font-size: 16px;
}

.wrapper-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/* RESPOSIVE DEVICES */
@media only screen and (max-width: 576px) {
    h1.text-title-hero {
        font-size: 2rem;
    }
    .wrapper-gallery {
        grid-template-columns: repeat(1, 1fr);
    }
    .span-new-card {
        padding: .5rem 1rem .5rem 1rem;
    }
    .span-link {
        font-size: 12px;
    }
    .custom-footer {
        padding-top: 6rem;
    }
    .wrapper-carousel {
        width: 320px;
        height: auto;
    }
    .owl-carousel .owl-item img {
        width: 70%;
        height: auto;
    }
    #product-kami-title {
        color: #d4af37;
    }
}

@media only screen and (min-width: 576px) {
    .wrapper-gallery {
        grid-template-columns: repeat(1, 1fr);
    }
    .custom-holder-sel-produk {
        background-size: 240%;
    }
    .custom-footer {
        padding-top: 12rem;
    }
    .wrapper-carousel {
        width: 200px;
        height: auto;
    }
    #product-kami-title {
        color: #d4af37;
    }
}

@media only screen and (min-width: 768px) {
    h1.text-title-hero {
        font-size: 2.5rem;
    }
    .wrapper-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    .custom-holder-sel-produk {
        background-size: 150%;
    }
    .custom-footer {
        padding-top: 5rem;
    }
    .wrapper-carousel {
        width: 200px;
        height: auto;
    }
    #product-kami-title {
        color: #d4af37;
    }
}

@media only screen and (min-width: 992px) {
    h1.text-title-hero {
        font-size: 3rem;
    }
    .wrapper-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    #product-kami-title {
        color: #d4af37;
    }
}

@media only screen and (min-width: 1200px) {
    h1.text-title-hero {
        font-size: 4rem;
    }
    .wrapper-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
    .wrapper-carousel {
        width: 180px;
        height: auto;
    }
    #product-kami-title {
        color: white;
    }
}

@media only screen and (min-width: 1500px) {
    .wrapper-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
    .custom-holder-sel-produk {
        background-size: 150%;
    }
    .wrapper-carousel {
        width: 200px;
        height: auto;
    }
    #product-kami-title {
        color: white;
    }
}

/* FOOTER */
p.footer-text {
    color: white;
}

.img-footer-left {
    width: 200px;
}

.img-footer-right {
    width: 240px;
}

.icons-footer {
    width: 48px;
}

.dropdown-menu {
    background-color: #dfe2d0;
}

.navbar-dark .navbar-nav .show>.nav-link, .navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active {
    color: #8C919D;
}

/* CEK PEMESANAN */
.pemesanan-title {
    color: #0b599d;
}

.label-pemesanan {
    color: black;
}

.input-pemesanan::placeholder {
    color: black;
}

.btn-buy {
    background-color: #0b599d;
    color: white;
}

.btn-buy:hover {
    background-color: #337AB7;
    color: white;
}