/* Add custom CSS styles below */ 

 :root {
    --primary-color: #fcba4a!important;
    --secondary-color: #062740!important;
    --linear-gradient: linear-gradient(to right, var(--primary-color), var(--secondary-color)) !important;
    --font-color: #fff !important
}

/*Header*/
.navbar-brand img,.main-nav-container.fixed-pinned .navbar-brand img {
    max-height: 3rem;
    width: auto;
    animation: scale 1.3s linear infinite
}

.top-navbar .hidden {
    display: none !important;
}
.bg-inherit {
    background-color: #FFFFFF;
}
.store-header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 1px 10px;
}


.top-navbar,
.main-nav-container {
    width: 100%;
    background: #fff;
}

.s-search-inline {
    min-width: 220px;
    max-width: 100%;
}


@media only screen and (min-width: 1024px) {
    .main-menu li>a:hover {
        color: var(--primary-color) !important;
    }
    salla-slider.photos-slider .swiper-slide {
    width: 100%;
    }
    .s-slider-v-centered .s-slider-block__title-nav button {
    display: none;
    }
}

@media (min-width: 640px) {
    .navbar-brand img {
        max-height: 6rem !important;
    }
    .navbar-brand img {
        padding: 10px;
    }
    .s-block--slider-with-bg .slider-bg h3 {
        font-size: 2rem;
    }

    .s-block--slider-with-bg .slider-bg p {
        font-size: 1.2rem;
        line-height: 50px;
    }
    .s-block {
    margin-top: 2rem;
    }
    salla-slider.photos-slider .swiper:where([dir=rtl],            
         [dir=rtl] *) {
      padding-left: 0rem;
      padding-right: 0rem; 
    }
}

.navbar-brand img {
    max-height: 4rem;
}

.top-navbar .s-search-input {
    color: #000 !important;
    border: 1px solid var(--primary-color) !important;
}

.s-search-inline {
    margin-left: auto;
}

.s-menu-topnav-list {
    display: none;
}

.top-navbar .s-search-input {
background-color: rgb(255 255 255);
}

.sicon-menu {
    font-size: 30px;
}

.main-nav-container .leading-none {
    margin-top: 10px;
}

.main-nav-container.fixed-pinned .navbar-brand img {
    max-height: 5rem;
}

.main-nav-container.fixed-header .inner {
    background: #ffffffcc;
    backdrop-filter: blur(40px);
}

.sub-menu li>a {
    color: var(--primary-color) !important;
}

.header-btn__icon {
    background-color: var(--primary-color);
    color: #FFF;
}

.s-contacts-header{
        display: none!important;
}
.store-header .btn--rounded-gray{
    border: 1px solid #e0e1e0 !important
}
.s-block--features_item .feature-icon, .store-footer a .rtl\:ml-2\.5, .s-slider-nav-arrow, .header-btn_icon {
    box-shadow: rgba(0,0,0,.24) 0 3px 8px;
}
text-gray-500:hover span {
  color: #4b2f83 !important;
}

@media only screen and (max-width: 1024px){
.mm-spn li:after {
    border-color: var(--primary-color);
}
}
@media (max-width: 1024px){
salla-slider.photos-slider .swiper:where([dir="rtl"], [dir="rtl"] *) {
    padding-right: 0rem;
    padding-left: 0rem; 
}
}

.mm-spn li:after {
    opacity: .8;
}
.mm-spn li:hover a {
    color: var(--secondary-color); 
    transition: .3s;
}
.sicon-menu:hover {
    color: var(--secondary-color);
    transition: .3s;
}

salla-slider.photos-slider .swiper:where([dir="rtl"], [dir="rtl"] *) {
    padding-right: 0rem;
    padding-left: 0rem;
}
/*Header*/

.s-product-card-vertical .s-product-card-wishlist-btn {
    opacity: 1;
}

/*Features*/

.s-block--features__item {
    box-shadow: 4px 4px 10px -4px var(--primary-color);
    border-radius: 15px!important;
    text-align: center!important;
    padding: 15px 0
}

.s-block--features__item .feature-icon {
    background-color: #fff!important;
    border: 2px solid #fff!important;
    box-shadow: 0 0 10px -2px var(--primary-color)
}

.s-block--features__item .feature-icon i {
    color: #fff!important
}

.s-block--features__item .sicon-fire::before,.s-block--features__item .sicon-store2::before,.s-block--features__item .sicon-headset::before,.s-block--features__item .sicon-money-circle:before,.s-block--features__item .sicon-full-wallet::before,.s-block--features__item .sicon-shipping-fast::before,.s-block--features__item .sicon-clothes-hanger:before {
    content: ""!important
}

.s-block--features__item h2 {
    color: var(--primary-color)!important;
    font-size: 16px!important;
    font-weight: 700;
    margin-bottom: 5px!important
}

.s-block--features__item p {
    color: #3790c8!important;
    font-size: 14px!important;
    font-weight: 700;
    background-color: #fff!important;
    border: 0 solid var(--primary-color)!important;
    box-shadow: 0 0 0 0 var(--secondary-color);
    border-radius: 0!important;
    padding: 8px 2px!important;
    width: 95%!important;
    margin: auto!important
}
.s-block--features__item:hover .feature-icon i {
    animation: none;
}
/*Features*/


/*Footer*/
.store-footer {
    color: var(--primary-color)!important;
    font-weight: 600;
    text-align: center!important;
    border: 1px solid var(--primary-color);
    border-radius: 50px!important;
    box-shadow: 0 0 10px -2px var(--primary-color);
    background: var(--font-color)!important;
    width: 95%!important;
    margin: 40px auto 15px!important
}

.store-footer__inner {
    color: (--primary-color)!important;
    font-weight: 600;
    text-align: center!important;
    border-radius: 50px!important;
    background: var(--font-color)!important;
    border-bottom-color: var(--primary-color)!important;
    border-bottom-width: 1px;
    padding-top: 0!important;
    padding-bottom: 2rem!important
}

.store-footer__inner:before {
    text-align: center;
    content: "";
    display: block;
    height: 70px;
    width: 70px;
    margin: 10px auto 15px;
    background-image: url(https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/vXBZRo/F3X4X4SjOslZoLIaQnLZF2rmcqyB1zdt1avGT22l.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: transparent;
    border-radius: 0;
    animation: scale 1.3s linear infinite
}

.store-footer h3 {
    color: var(--font-color)!important;
    font-size: 16px!important;
    background-color: var(--primary-color)!important;
    box-shadow: 2px 2px 12px -2px var(--primary-color);
    border-radius: 12px!important;
    padding: 5px!important;
    width: 145px!important;
    margin: 0 auto 15px!important
}

.me-4 {
    margin-left: auto!important;
    margin-right: auto!important
}

.py-4 {
    padding-top: 10px!important;
    padding-bottom: .5rem
}

.lg\:gap-6 {
    gap: 1.5rem;
    display: flex!important
}

.store-footer a,.store-footer .contact-social {
    display: grid!important;
    text-align: center;
    justify-content: center;
    color: #000;
}

.s-social-list .s-social-link a,.store-footer .rounded-full,.store-footer .social-link,.store-footer .s-contacts-icon {
    border: 0 solid var(--primary-color)!important;
    box-shadow: 0 0 10px -2px var(--primary-color)
}

.store-footer .unicode {
    display: none
}

.store-footer .social-link {
    padding-top: 5px!important
}

.store-footer .contact-social {
    border-color: var(--primary-color)!important
}

.store-links-items .leading-none {
    line-height: 1.75!important
}

.lg:col-span-2 .flex {
    display: inline-block!important;
    text-align: center!important
}

.md\:flex {
    display: block!important
}

.store-footer .rounded-full,.store-footer .social-link {
    border: 1px solid var(--font-color)!important;
    border-radius: 50%!important
}

.footer-list,.store-links-items {
    display: grid!important
}

.store-footer__inner .lg\:block {
    display: none!important
}

.store-footer__inner:nth-child(1) .lg\:gap-6 .lg\:col-span-2 a {
    display: none!important
}

.store-footer__inner .space-x-2 {
    display: grid!important
}

.s-apps-icons-list {
    text-align: center;
    justify-content: center
}

.s-contacts-list-vertical {
    flex-direction: initial;
    justify-content: center
}

.md\:mb-0 {
    margin-bottom: 20px;
    color: var(--primary-color)!important;
    font-weight: 600
}
/*Footer*/


@media only screen and (max-width: 767px) {
    body::before {
        background-size:35%!important
    }

    .mm-spn li a span,.mm-spn li>span {
        color: var(--primary-color);
        font-size: 1rem;
        font-weight: 600!important;
        text-align: center;
        justify-content: center
    }

    .mm-spn li a span:hover,.mm-spn li>span:hover {
        color: var(--secondary-color)
    }

    .mm-spn #offers a span {
        color: red!important
    }
    .two-row .banner-entry:first-child {
        height: 100% !important;
        grid-column: span 2 / span 1;
        grid-row: span 2 / span 2;
    }

    .s-block--banners+.s-block--banners {
        margin-top: 1em
    }

    .banner-entry {
        height: 100px!important
    }
    .banner-entry:hover p {
    opacity: 0;
    }
    
    .banner-entry h3 {
        font-size: 12px!important;
        line-height: 20px!important;
        background: gray;
        border-radius: 8px;
        width: 115%!important;
        /* margin: 95px -10px auto; */
        margin-top: 15%;
        padding: 2px;
    }

    .two-row .banner-entry:first-child h3 {
        width: 130%!important;
        margin: 95px -18px auto;
        margin-top: 82px;
        padding: 10px
    }

    .s-block__title h2,.s-slider-block__title h2 {
        font-size: 1.2rem!important
    }

    .s-block__display-all {
        font-size: 18px!important
    }

    .testimonials-slider .swiper-slide {
        margin: 10px 15px 10px 0!important
    }

    .text-lg span {
        font-size: 14px!important
    }

    .last\:border-0:last-child {
        width: 100%;
        padding: 12px 10px 25px 30px!important
    }

    .s-block--features__item {
        width: 94%;
        margin: auto
    }

    .store-footer {
        width: 92%!important;
        margin: 25px auto 15px!important
    }

    .store-footer__inner:before {
        height: 60px;
        width: 60px
    }

    .store-footer__inner {
        text-align: center!important;
        border-radius: 50px!important
    }

    .me-4 {
        margin-left: 12px;
        margin-right: 12px
    }

    .md\:flex::after {
        font-size: 12px;
        margin: 10px auto 0!important
    }

    .lg\:gap-6 {
        gap: 1.5rem;
        display: grid!important
    }
}

/*Products*/

.s-product-card-content-title {
    text-align: center;
    display: block;
}

.s-product-card-content-title a {
    font-weight: bolder;
    color: rgb(252 186 74);
}

.s-button-element:not(:disabled):not([loading]) {
    background: #fcba4a;
    color: #FFF;
}

.s-product-card-wishlist-btn .s-button-text {
    color: #fcba4a;
}

.s-product-card-content-subtitle {
    text-align: center;
    color: var(--secondary-color);
}
    
    .s-product-card-content-sub {
    justify-content: center;
    }
    
     salla-slider.photos-slider .swiper-slide {   
    width: 100%;  
    }
    
        salla-slider.photos-slider .swiper:where([dir="rtl"], [dir="rtl"] *) {
       padding:5px; 
    }
    
    .s-slider-block__title {
    display: none;
    }
    
    .s-products-slider-card.swiper-slide.swiper-slide-active {
        margin: 0 auto;
        padding: 0;
    }
    

.sicon-store2:before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url('https://i.postimg.cc/XBfc22F2/icon.png'); /* استبدل 'icon.png' بالمسار المباشر للصورة */
    background-size: cover;
    background-position: center;
}

.sicon-shipping-fast:before{
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url('https://i.postimg.cc/wxmghphJ/moisturizing-1.png'); /* استبدل 'icon.png' بالمسار المباشر للصورة */
    background-size: cover;
    background-position: center;
}

.sicon-fire:before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
   background-image: url('https://i.postimg.cc/BnM0qQ0W/cream.png');
    background-size: cover;
    background-position: center;
      font-weight: bold;

}

@media (max-width: 768px) { 
    /* تعديل عدد الأعمدة إلى 1 فقط */
    .grid-cols-\[repeat\(2\2c minmax\(0\2c 1fr\)\)\] {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    /* جعل العنصر الأول يأخذ العمود الأول */
    .s-block--features__item:first-child {
        grid-column: 1;
    }

    /* إزالة الـ padding-left للـ slider في RTL */
    salla-slider[type]:not(.hydrated) > div:where([dir="rtl"], [dir="rtl"] *), 
    salla-slider[type]:not(.hydrated) .swiper > div > div:where([dir="rtl"], [dir="rtl"] *), 
    .carousel-slider .swiper:where([dir="rtl"], [dir="rtl"] *) {
        padding-left: 0;
    }
}

.has-overlay::after {
    opacity: 0;
}

.has-overlay:hover::after {
    opacity: 1;
    transition: .3s;
}

.s-product-card-image:hover .s-product-card-image-cover {
    transition: .3s;
    transform: scale(1.2);

}

body::before {
    content: '';
    width: 100%;
    height: 100%;
    background: #fff url(https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/vXBZRo/F3X4X4SjOslZoLIaQnLZF2rmcqyB1zdt1avGT22l.png);
    position: fixed;
    z-index: 9999999999999!important;
    transform: scale(0);
    background-size: 20%!important;
    background-repeat: no-repeat;
    background-position: center!important;
    animation-name: splash;
    animation-duration: 2s
}

@keyframes splash {
    0% {
        transform: scale(1)
    }

    20% {
        transform: scale(1)
    }

    80% {
        transform: scale(1)
    }

    100% {
        transform: scale(0)
    }
}

/*
body:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #fff;
    position: fixed;
    z-index: 999999;
    transform: scale(0);
    animation-name: pupup;
    animation-duration: 5s
}

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

    18% {
        transform: scale(1)
    }

    80% {
        transform: scale(1)
    }

    100% {
        transform: scale(0)
    }
}


body:after {
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    position: fixed;
    z-index: 999999;
    background: url();
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 350px;
    transform: scale(0);
    animation-name: pupup_logo;
    animation-duration: 5s
}

@keyframes pupup_logo {
    0% {
        transform: scale(0)
    }

    18% {
        transform: scale(1)
    }

    75% {
        transform: scale(1)
    }

    95% {
        transform: scale(0)
    }

    100% {
        transform: scale(0)
    }
}
*/
/*WhatsApp Button*/
.dkuywW {
    display: none;
}

.ljrDDi:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 2px solid #4dc247;
    animation: WhatsApp 1200ms linear infinite;
    border-radius: 50%;
}

@keyframes WhatsApp {
    0% {
     opacity: 1;
    transform: scale(1);
    }

    100% {
    opacity: 0;
    transform: scale(1.4);  
    }
}
/*WhatsApp Button*/