:root{
    --bgmain: #46E1D1;
    --bgsecond: #D6B49B;
}
.bg-main{background-color: var(--bgmain)}
.bg-second{background-color: var(--bgsecond)}

.color-main{color: var(--bgmain)}
.color-second{color: var(--bgsecond)}

.bg-section{background: linear-gradient(180deg, white, var(--bgmain));}
.bg-footer{background: linear-gradient(180deg, var(--bgmain), white);}

.bintang{color: gold}
.text-shadow{text-shadow: 2px 2px 4px rgba(0,0,0,0.6);}

#menu a{color: var(--bgmain);border: 1px solid var(--bgmain);transition: all .5s ease;text-decoration: none}
#menu a:hover{background: var(--bgmain);color: white}

.card-product .kategori a{text-decoration: none;color: var(--bs-body-color);background-color: var(--bgmain);transition: background .5s ease}
.card-product .kategori a:hover{background-color: var(--bgsecond)}
.card-product .title{text-align: center}
.card-product .title a{color: var(--bs-body-color);text-decoration: none;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.card-product .price{text-align: center;color: var(--bgmain);font-weight: bold;}
.card-product .image{position: relative;}
.card-product .image:after{content: '\A';position: absolute;width: 100%; height:100%;top:0; left:0;background:rgba(0,0,0,0.5);opacity: 0;transition: all .5s ease;border-radius: var(--bs-border-radius);z-index: 12;}
.card-product .image:hover:after{opacity:1;}
.card-product .image .diskon{position: absolute;left: 15px;top: 15px;padding: 5px 10px;color: white;z-index: 10;background-color: var(--bgmain);}

.card-product2 a{text-decoration: none;color: var(--bs-body-color);}
.card-product2 .title{display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}

#agenda{background-image: url('../images/agenda-bg.jpg');background-color: rgba(0,0,0,.4);background-blend-mode: overlay;background-size: cover;background-attachment: fixed;background-position: center;background-repeat: no-repeat;}
#agenda .card-title a{font-weight: bold!important;text-decoration: none;}

.social-top{color: var(--bs-body-color)}

.social-icon{background-color: white;padding: 5px 10px;color: var(--bgsecond);border-radius: 5px;transition: all .5s ease;}
.social-icon:hover{background-color: var(--bgsecond);color: white;}

.social-share{background-color: var(--bgmain);padding: 5px 10px;color: white;transition: all .5s ease;}
.social-share:hover{background-color: var(--bgsecond)}

.section-item{padding-top: 4rem;padding-bottom: 4rem}

.overlay{left:0;top:0;width:100%;height:100%;position:absolute;background-color: rgba(0,0,0,.4);z-index: 30;}
.overlay_content{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}
.spinner{width:75px;height:75px;display:inline-block;border-width:2px;border-color:rgba(255,255,255,0.05);border-top-color:#fff;animation:spin 1s infinite linear;border-radius:100%;border-style:solid}
@keyframes spin {
100%{transform:rotate(360deg)}
}

@media only screen and (max-width : 576px){
    .section-item{padding-top: 2rem;padding-bottom: 2rem}
    #menu > .row {
        overflow-x: auto;
    }
}