/* Add custom CSS styles below */ 
.promotion-title {
    background-color: var(--1);
    color: #fff
}

.s-product-card-promotion-title {
    background-color: var(--1);
    color: #fff
}
body {
    background: url(https://i.imgur.com/PDm3dFn.png);
background-size: cover;
}
button.undefined.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center {
    border-color: #fff
}

button.btn--close-sm.close-mobile-menu.sicon-cancel.hidden {
    background-color: var(--1);
    color: #fff
}body {
    background: url(https://i.imgur.com/PDm3dFn.png);
background-size: cover;
}

button.undefined.s-button-element.s-button-btn.s-button-solid.s-button-primary.s-button-loader-center {
    background-color: var(--1);
    color: var(--color-primary)
}

button.undefined.s-button-element.s-button-btn.s-button-solid.s-button-primary.s-button-loader-center:hover {
    background-color: var(--color-primary);
    color: var(--1)
}

button.undefined.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center {
    background-color: var(--1);
    color: var(--color-primary)
}

.s-slider-nav-arrow {
    background-color: var(--1);
    color: var(--color-primary)
}

button.undefined.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center:hover {
    border-color: var(--color-primary);
    color: var(--1)
}

button.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center {
    background-color: var(--1);
    color: var(--color-primary)
}

button.undefined.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:hover {
    background-color: var(--color-primary);
    color: var(--1)
}

button.s-quick-buy-button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-after:hover {
    color: var(--color-primary);
    background-color: var(--1)
}

.text-primary {
    color: var(--1)
}

.header-btn__icon {
    color: #fff;
    border-color: #fff;
    background-color: var(--1)
}

.header-btn__icon:hover {
    color: var(--1);
    border-color: var(--1);
    background-color: #fff
}

.s-cart-summary-count {
    border-color: #000;
    background-color: var(--1)
}
body {
    background: url(https://i.imgur.com/PDm3dFn.png);

}
button.undefined.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center:hover {
    background-color: #fff;
    color: var(--1);
    border-color: var(--1)
}

.s-button-primary-outline:hover {
    background-color: #fff;
    color: var(--1)
}

a.s-block__display-all {
    color: #000
}

.s-block--features__item .feature-icon i {
    color: var(--color-primary)
}

.s-block--features__item .feature-icon {
    background-color: var(--1)
}

salla-slider.photos-slider .swiper-slide {
    width: 100%
}

.swiper.s-slider-container.swiper-initialized.swiper-horizontal.swiper-pointer-events.swiper-rtl.swiper-backface-hidden {
    padding: 0
}

@media(min-width:480px) .banner-entry {
    padding: 2.50rem;
}

[dir=rtl] salla-slider[type]:not(.hydrated)>div,
[dir=rtl] salla-slider[type]:not(.hydrated) .swiper>div>div,
[dir=rtl] .carousel-slider .swiper {
    padding: 0.5rem;
}

salla-slider.photos-slider .swiper-slide {
    width: 100%;
}

.banner--fixed img {
}





.swiper.s-slider-container.swiper-initialized.swiper-horizontal.swiper-pointer-events.swiper-rtl.swiper-backface-hidden {
    padding-left: 0rem;
}

salla-slider.photos-slider .swiper-slide {
    border-radius: 0.375rem;
}

.store-footer__inner,
.footer-is-light .store-footer .store-footer__inner {
    background-color: var(--1);
    color: #ffffff;
    border-top-left-radius: 5rem;
    border-top-right-radius: 5rem;
    box-shadow: 0 2px 5px 1px rgba(64, 60, 67, .16);
}

.store-footer {
    background-color: var(--color-primary);
    border-top-left-radius: 20rem 1rem;
    border-top-right-radius: 20rem 1rem;
}

.store-footer h3 {
    color: var(--color-primary);
}

a.mb-4.last\:mb-0.flex.items-center.text-sm.leading-none {
    color: #fff;
}

a.flex.items-center.m-0 {
    justify-content: center;
}

.store-footer__inner {}

.container.grid.grid-col-1.lg\:grid-cols-6.gap-8.lg\:gap-6 {
    display: grid;
    text-align: center;
    justify-items: center;
}

.footer-list.store-links-items {
    columns: 2;
}

.store-footer .contact-social {
    border-top-width: 0px;
    margin-top: 0.25rem;
    padding-top: 0.25rem;
}

.s-block--features__item {
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.s-block--features__item:first-child {
    grid-column: span 1/span 1;
}

.s-block--features__item .feature-icon {
    cursor: pointer;
    transition: all .5s;
    box-shadow: 0 4px 5px 1px rgba(64, 60, 67, .16);
}

.s-block--features__item {
    animation-name: slideinup;
}

a.social-link {
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    box-shadow: 0 4px 5px 1px rgba(64, 60, 67, .16);
}

.store-footer .social-link {
    color: var(--1);
    font-size: 1.125rem;
    height: 3rem;
    width: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 1.25rem;
    line-height: 1.75rem;
}

li.w-12.h-8.bg-white.rounded.flex.items-center.p-1 {
    border-radius: 1.25rem;
    border: 1px solid transparent;
    box-shadow: 0 2px 5px 1px rgba(64, 60, 67, .16);
}

.text-gray-400 {
    color: #fff;
}

.md\:flex.items-center.justify-between.py-4.container.text-center {
    margin-top: 1rem;
    padding: 1rem;
    background-color: transparent;
    margin: auto;
}

@media (max-width: 767px) {
    .md\:flex.items-center.justify-between.py-4.container.text-center {
        display: flex;
        flex-direction: column
    }
}

.text-gray-400 {
    color: #fff;
    margin-top: 1rem
}

.s-block.s-block--banners>.grid {
    grid-template-columns: 1fr 1fr 1fr 1fr
}

.s-block.s-block--banners>.grid .banner-entry {
    padding-top: 0%;
    height: 8rem
}

.two-row .banner-entry:first-child {
    grid-column: auto;
    grid-row: auto
}

.s-block.s-block--banners:nth-of-type(19) {
    margin-bottom: 1rem
}

@media(max-width:991px) {
    .s-block.s-block--banners>.grid {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }
    .s-block.s-block--banners>.grid .banner-entry {
        height: 3rem
    }
}

.s-block--features+.s-block--features,
.s-block--fixed-banner+.s-block--fixed-banner,
.s-block--banners+.s-block--banners {
    margin-top: 1em
}

body.index div.app-inner.flex.flex-col.min-h-full>section.s-block--banners:nth-child(n) div div:hover {
    transform: translateY(-8px);
    box-shadow: 0 -10px 10px 10px rgb(0 0 0/1%)!important
}

a.banner-entry.square-photos:hover {
    transition: all .3s ease-in-out;
    transform: scale(1.1)
}

.index>div.app-inner.flex.flex-col.min-h-full>section.s-block.s-block--banners.container>div>a.banner-entry.square-photos {
    transition: .5s
}

.index>div.app-inner.flex.flex-col.min-h-full>section.s-block.s-block--banners.container>div>a.banner-entry.square-photos:hover {
    transform: scale(1.1)
}

body.index div.app-inner.flex.flex-col.min-h-full>section.s-block--banners:nth-child(n) div {
    transition: transform .3s, box-shadow .3s
}

.banner-entry {
    background-color: transparent
}

.navbar-brand img,
.main-nav-container.fixed-pinned .navbar-brand img {
    max-width: 190px;
    width: auto;
    height: 100%;
    max-height: 78px
}

@media(max-width:650px) {
    .navbar-brand img,
    .main-nav-container.fixed-pinned .navbar-brand img {
        max-width: 132px;
    }
}

body>div.app-inner.flex.flex-col.min-h-full>section.s-block.s-block--photos-slider {
    margin: 0
}

body.index:before,
body[data-template=home]:before {
    content: '';
    width: 100%;
    height: 100%;
    background: #f5f5f529;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    position: fixed;
    z-index: 999999;
    transform: scale(0);
    animation-name: pupup;
    animation-duration: 3s
}

@keyframes pupup {
    0% {
        transform: scale(1)
    }
    18% {
        transform: scale(1)
    }
    80% {
        transform: scale(1)
    }
    100% {
        transform: scale(0)
    }
}

body.index:after,
body[data-template=home]:after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    position: fixed;
    z-index: 999999;
    background: var(--logo);
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20%;
    transform: scale(0);
    animation-name: pupup_logo;
    animation-duration: 3s
}

@keyframes pupup_logo {
    0% {
        transform: scale(1)
    }
    14% {
        transform: scale(1.3)
    }
    28% {
        transform: scale(1)
    }
    42% {
        transform: scale(1.3)
    }
    70% {
        transform: scale(1)
    }
    100% {
        transform: scale(0)
    }
}

.sicon-whatsapp2::after {
    content: "\E916";
    content: "\e917";
    text-align: center;
    cursor: pointer;
    background: #46a51e;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0;
    color: #fff;
    box-shadow: #00000022 1.5px 1.5px 5px;
    width: 0;
    height: 0;
    border-radius: 27.5px;
    position: fixed;
    bottom: 19px;
    right: 17px;
    transform: rotate(360);
    transition: all .2s ease-in-out
}

body[style] .sicon-whatsapp2::after,
body[cz-shortcut-listen=true] .sicon-whatsapp2::after,
i.sicon-whatsapp2::after {
    width: 56px;
    height: 56px;
    border-radius: 32.5px;
    font-size: 32px;
    box-shadow: #0000006b 2px 2px 8px
}

.sicon-whatsapp2:after:hover {
    border-radius: 0;
    border: 0;
    width: 180px;
    height: 60px
}

.sicon-whatsapp2:hover::after {
    content: "حاب نساعدك 😃؟ ";
    content: "     في خدمتك ؟ ";
    font-family: dinnextltarabic-regular!important;
    width: 260px!important;
    animation: trns 1s;
    font-size: 20px!important;
    color: #ffffffff;
    display: flex;
    justify-content: center;
    align-items: center
}

@keyframes trns {
    0% {
        color: #ffffff00
    }
    100% {
        color: #ffffff99
    }
}

.s-product-card-entry,
.s-block--features__item:hover {
    --c: var(--1);
    --b: 3px;
    --g: 5px;
    padding: calc(var(--g)+ var(--b));
    --_g: #0000 25%, var(--c) 0;
    background: conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g)) var(--_i, 200%) 0/200% var(--_i, var(--b)) no-repeat, conic-gradient( at bottom var(--b) left var(--b), var(--_g)) 0 var(--_i, 200%)/var(--_i, var(--b)) 200% no-repeat;
    transition: .3s, background-position .3s .3s;
    cursor: pointer
}

.s-product-card-entry:hover,
.s-block--features__item:hover {
    --_i: 100%;
    transition: .3s, background-size .3s .3s
}

.s-slider-block__display-all {
    padding: 5px;
    color: var(--1);
    margin: 10px auto;
    border-radius: 15px;
    animation: signal 1200ms linear infinite
}

@keyframes signal {
    0% {
        box-shadow: 0 0 0 0 var(--color-primary)
    }
    100% {
        box-shadow: 0 0 0 5px #fff
    }
}

@media only screen and (min-width:1024px) {
    .main-menu li.root-level>a {
        padding-bottom: 1rem;
        padding-right: .2rem
    }
    .main-nav-container {
        min-height: 88px;
        height: 116px!important
    }
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

section.s-block.s-block--banners.container {
    padding-right: 5px;
    padding-left: 5px;
    margin-right: auto;
    margin-left: auto
}

@media(min-width:768px) {
    .container {
        width: 750px
    }
}

@media(min-width:992px) {
    .container {
        width: 970px
    }
}

@media(min-width:1200px) {
    .container {
        width: 1170px
    }
}

:root {
    --color-primary: #ffffff;
    --color-primary-dark: #703f00;
    --color-primary-light: #bd8c47;
    --color-primary-reverse: #ffffed;
    --1: #a17c69;
    --logo: url("https://cdn.salla.sa/ydwbEy/UVS61qLYIEhWbhWLl5meeLtENksdRWo1xLGylrfJ.png")
}
body {
    background: url(https://i.imgur.com/PDm3dFn.png);
background-size: cover;
}
.banner--fixed img {
    display: block;
    width: 100%;
    border-radius: 0.375rem;
    border-style: none;
    --tw-bg-opacity: 1;
    background-color: rgba(243, 244, 246, 1);
    background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
    -o-object-fit: cover;
    object-fit: cover;
    box-shadow: 2px 6px 10px 2px #00000059;
}