body{
    background: var(--body-background);
    background-repeat: repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}
.bg-main-site{
    background: var(--bg-main-site);
}
.bg-box{
    background: linear-gradient(to bottom right, var(--bg-box-site1), var(--bg-box-site2));
}
.header-color{
    background: var(--bg-header-color) ;
    /* background: linear-gradient(to bottom right, var(--bg-header-color1), var(--bg-header-color2)); */
}
.footer-color{
    background: var(--bg-footer-color);
}
.main-text-color{
    color : var(--main-text-color)
}
.main-card{
    background: var(--main-card-color);
}
.bg-nav-category{
    /* background-color: var(--bg-nav-category); */
    background:  var(--bg-nav-category);
}
.bg-nav-category-card{
    /* background-color: var(--bg-nav-category-card); */
    background: var(--bg-nav-category-card);
}
.bg-category-card{
    background: var(--bg-category-card);
}
.bg-provider-card{
    background: var(--bg-provider-card);
}
.button-primary{
    background: var(--bg-button-primary);
    color:var(--text-button-primary);
}
.button-success{
    background: var(--bg-button-success);
    color:var(--text-button-success);
}
.button-danger{
    background: var(--bg-button-danger);
    color:var(--text-button-danger);
}
.button-secondary{
    background:var(--bg-button-secondary);
    color:var(--text-button-secondary);
}
.action{
    background: var(--bg-action);
    box-shadow: 0 5px 7px #000;
}
.no-action{
    background: var(--bg-no-action);
}
.bg-hover{
    background: var(--bg-hover-color);
    box-shadow: 0 5px 7px #000;
}
.border-main{
    border-color: var(--border-main-color);
}
/* .swiper-scrollbar{
    background: var(--bg-action) !important;
} */
.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    width: 50px;
    left : 50% !important;
    transform: translateX(-50%);
    background: var(--bg-no-action) !important;
}
.swiper{
    padding-bottom: 30px !important;
}
.swiper-scrollbar-drag {
    background: var(--bg-action) !important;
}