/* start background*/
body#app {
    background-color: #252525 ;
}
body.index:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #000000ed url(https://i.ibb.co/wF3fDJJg/Mask-group-18.png);
    position: fixed;
    z-index: 99999999999999999!important;
    transform: scale(0);
    background-size: 250px!important;
    background-repeat: no-repeat;
    background-position: center!important;
    animation-name: logobg;
    animation-duration: 3s;
}
@keyframes logobg{
0% {
    transform: scale(1);
}

20% {
    transform: scale(1);
}
78% {
    transform: scale(1);
}
100% {
    transform: scale(0);
    display: none;
}
}




/* end background*/

/* start header */
.top-navbar {
    color: #fff;
}
div#mainnav .inner.bg-inherit {
    background: #252525;
}
.main-menu li.root-level>a {
    color: #fff;
}
.s-cart-summary-total {
    color: #FF6F00;
}
[class^=sicon-], [class*=" sicon-"] {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* end header */
 /*start first banner*/
 section:first-of-type {
    margin: 0;
}
section.s-block.s-block--photos-slider salla-slider.photos-slider .swiper-slide {
    width: 100%;
    padding: 0;
    margin: 0;
}
salla-slider.photos-slider .swiper:where([dir=rtl],[dir=rtl] *) {
    padding: 0;
}
.s-slider-block__title-nav, section.s-block.s-block--photos-slider .s-slider-block__title {
    display: none !important;
}
 /*end first banner*/

/* start banners*/

section.s-block.s-block--fixed-banner.wide-placeholder .container:not(section:last-of-type.s-block.s-block--fixed-banner.wide-placeholder .container){
    padding: 0;
    margin: 0;
    max-width: 100%;
}
section.s-block.s-block--fixed-banner.wide-placeholder .banner--fixed img {
    background-color: unset;
}

/* end banners*/

/* start products */
.s-slider-block__title {
    color: var(--color-primary);
    justify-content: center;
    padding: 2.5rem;
}
.s-slider-block__title *{
    padding: 0 !important;
}
salla-products-slider .s-slider-block__title::before {
    content: "المنتجـــــــــات";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    font-size: 25px;
}
.s-product-card-vertical {
    box-shadow: 0px 0px 8px 0px #3E3E3C;
    background: unset;
}
.s-product-card-content {
    padding: 1.25rem 0 0 0;
    text-align: center;
}
.s-product-card-content-sub {
    justify-content: center;
}
.s-product-card-content a, .s-product-card-content h4, .s-product-card-content-subtitle {
    color: #fff;
}
.s-product-card-content-title a:hover {
    color: var(--color-primary);
}
.s-button-primary-outline {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 20px 20px 0 0;
}
.s-button-primary-outline span.s-button-text {
    display: flex;
}
.s-button-btn .s-button-text .sicon-shopping-bag:before {
    content: '';
    display: inline-block;
    background-image: url(https://i.ibb.co/mDHM83M/wired-outline-146-trolley.gif) !important;
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px;
    height: 23px;
    margin-left: 5px;
}
img.s-product-card-image-cover.lazy.loaded {
    transition: 0.5s;
}
.s-product-card-image img.loaded:hover {
    transform: rotate(25deg) scale(1.2);
}
ol.s-breadcrumb-wrapper {
    color: #fff;
}
/* start category product */
.s-breadcrumb-arrow,li.s-breadcrumb-item:last-child{
    fill: var(--color-primary);
    color: var(--color-primary);
}
h1#page-main-title {
    color: var(--color-primary);
}
/* end category product */
.main-content .text-xl.mb-6, .product__description, .main-content .gap-4.flex h2 {
    color: #fff;
}
/* start single product */
tamara-widget {
    color: var(--color-primary);
}
form.form.product-form salla-product-options, form.form.product-form section {
    background: unset;
}
form.form.product-form {
    border: 2px solid var(--color-primary);
    border-radius: 20px;
}
.product-single label.s-product-options-option-label, .product-single label.s-product-options-option-label small, label.form-label {
    color: #fff;
}
body.product-single .s-button-primary {
    border: 1px solid var(--color-primary);
}
.s-button-primary:hover {
    background-color: var(--color-primary);
    opacity: 1;
}
.s-quantity-input-input {
    background: var(--color-primary);
}
a#btn-show-more {
    color: var(--color-primary);
}
/* end single product */

/* end product */

/* start footer */
.footer-is-light .store-footer {
    background-color: #4A4A4A;
}
.footer-is-light .store-footer .store-footer__inner {
    background-image: url(https://i.ibb.co/gL9QfNsP/Rectangle-114.png);
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    border: none;
}
span.text-sm.copyright-text p {
    color: #fff;
}
.store-footer h3{
    position: relative;
    width: fit-content;
}
.store-footer h3::before {
    position: absolute;
    width: 100%;
    height: 2px;
    background: #fff;
    content: '';
    bottom: -5px;
}
/* end footer*/

/* start animation */
span.text-sm.copyright-text p {
    background: linear-gradient(90deg, #f56c02, #ddae06, #a44808, #252525);
    background-clip: text;
    color: transparent;
    background-size: 200% auto;
    animation: gradientAnimation 3s linear infinite;
    font-weight: bold;
}
@keyframes gradientAnimation {
0%{
    background-position: 200% 50%;
}
100%{
    background-position: 0% 50%;
}
}

/* start media query */
@media(max-width: 767px){
.s-products-slider-card {
    width: 100%;
    max-width: 213px;
}
}
@media (max-width: 640px) {
.is-sticky-product-bar .sticky-product-bar {
    position: relative;
}
.is-sticky-product-bar.product-single {
     padding-bottom: 0; 
}
}
@media(max-width:1023px){
.footer-is-light .store-footer .store-footer__inner{
    text-align: center;
}
.store-footer h3 {
    margin: 10px auto;
}
.store-footer .s-contacts-list-vertical {
    align-items: center;
}
}
@media only screen and (max-width: 1024px) {
.mm-ocd-opened .mobile-menu {
    background: #252525;
    color: var(--color-primary);
}
}