/* STYLES MADE OR USED BY ME APART FROM THE TEMPLATE */

/* SIDE BAR FROM  */
.bs-canvas-overlay {
    opacity: 0;
    z-index: -1;
}

.bs-canvas-overlay.show {
    opacity: 0.85;
    z-index: 1100;
}

.bs-canvas-overlay,
.bs-canvas {
    transition: all .4s ease-out;
    -webkit-transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
}

.bs-canvas {
    top: 0;
    z-index: 1110;
    overflow-x: hidden;
    overflow-y: auto;
    width: 330px;
}

.bs-canvas-left {
    left: 0;
    margin-left: -330px;
}

.bs-canvas-right {
    right: 0;
    margin-right: -330px;
}

.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

.bs-canvas-header{
    background-color: var(--main-bg-color);
}

/* FLOATING ACTION BUTTON FOR WHATSAPP */
.fabButton {
    /* background-color: #43e460 !important;
    border-color: #43e460 !important; */
    background: var(--main-bg-color) !important;
    border-color: var(--main-bg-color) !important;
    color: white !important;
}

.fabButton:hover {
    background: #1dc43e !important;
}

.btn-order {
    background-color: var(--main-bg-color) !important;
    color: white !important;
}

.btn-order:hover {
    background-color: var(--main-bg-color-darken) !important;
}

.list-group-item i {
    color: var(--main-bg-color);
}

/* SHAPE FOR OWL CAROUSEL AND FOOTER */
.banner-shap-img {
    background-image: url(../images/brand/shap-banner.png);
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    bottom: -5px;
    height: 100px;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
}

.footer-shap-img {
    background-image: url(../images/brand/shap-banner-2.png);
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    top: -5px;
    height: 100px;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
}