/* kayan.dev 054-320-1512*/

/* theme color */ 
body,.footer-is-light .store-footer .store-footer__inner,.bg-cover,.s-product-card-horizontal .s-product-card-content,.s-product-card-vertical{
background-color:#fcf1fe;
} 
.s-user-menu-trigger{
background-color: #ffffff00;
}
.top-navbar{
    background-color: #915bf4;
    }
/* header icons */ 
.sicon-user-circle:before,.sicon-shopping-bag:before,.sicon-menu:before{
    color: #000;
}
i.header-btn__icon.sicon-user-circle,i.header-btn__icon.icon.sicon-shopping-bag{
    border-color: #fff;
        background-color: #ffffffb8;
}
.s-slider-block__display-all{

    background-color: #ffffff;
    padding: 0.6em;
    border-radius: 8px;
}

/* تأثير النبض لزر الشراء */
.s-button-element {
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0px rgba(var(--primary-color-rgb), 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(var(--primary-color-rgb), 0);
    }
    100% {
        box-shadow: 0 0 0 0px rgba(var(--primary-color-rgb), 0);
    }
}
.mm-ocd--open .mm-ocd__content{
transform: translate3d(0, 0, 0);
    background-color: #ffffffed;
}
/* top search bg */
.top-navbar .s-search-input,.top-navbar > div > div > div.header-buttons > button{
    background-color: #ffffff;
}
header{
  position: relative;
   z-index: 999;
      position: sticky;
    top: 0;
    z-index: 999;
}
.main-nav-container,.top-navbar {
    
      /* خلفية بيضاء شفافة جداً */
    background: rgba(255, 255, 255, 0.15) !important; 
    
    /* تأثير الضبابية (أهم جزء) */
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    
    /* إضافة حدود ناعمة لتعزيز شكل الزجاج */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    
    /* إضافة ظل خفيف لإعطاء عمق */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}


/* top banner button right left */ 
.s-slider-v-centered.fullwidth-slider .s-slider-block__title-nav button {
    --tw-shadow-color: #000000c7;
    --tw-shadow: var(--tw-shadow-colored);
    background-color: rgb(255 255 255 / 23%);
}
@media (max-width:767px){
/* second section */

/* first banner */
#app > div.app-inner.flex.flex-col.min-h-full > section:nth-child(4) > div > a > img{
    margin-top: -74px;
    transform: scale(1.06);
     z-index: 1;

     
}
}
body::before {
    content: " ";
    background-color: #fffff;
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    z-index: 9998;
    opacity: 0;
    animation: intro 2s;
}

body:after {
    z-index: 9999;
    position: fixed;
    content: "";
    background-image: url('https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/xoPgQ/T9zKh0oLH1SiWwgQWP4UJNdZEYIJs3TSaDdKVYgz.png') !important;
    background-position: center;
    background-size: 100px;
    background-repeat: no-repeat;
    width: 0px;
    transform: translate(50px, -50px) scale(2) rotateY(0deg); /* Y-axis rotation */
    height: 100px;
    right: 50%;
    top: 50%;
    opacity: 0;
    visibility: visible !important;
    background-color: transparent !important;
    animation: intro_logo 1.5s;
}
.store-footer h3 , .leading-6,salla-menu > div > div > a,.s-contacts-item{
color:#000 !important;
}


article#more-content {
    max-height: 754vh !important ;
}

@keyframes intro {
    0% {
        width: 100%;
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }
    99% {
        width: 100%;
    }

    100% {
        width: 0;
        opacity: 0;
        display: none;
    }
}

@keyframes intro_logo {
    0% {
        width: 100px;
        opacity: 0.8;
        transform: translate(50px, -50px) scale(2) rotateY(0deg); /* Initial Y-axis rotation */
    }

    50% {
        opacity: 0.9;
    }

    70% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }
    99% {
        width: 100px;
    }

    100% {
        width: 0;
        opacity: 0;
        display: none;
        transform: translate(50px, -50px) scale(2) rotateY(360deg); /* Y-axis rotation */
    }
}
.grid-flow-row {
    grid-template-columns: repeat(2,minmax(0,1fr));
}
 .lazy__bg {
    height: 85%!important;
        border-radius: 0.8em;
}

@media (max-width: 600px) {
#app > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--banners.container > div > a:nth-child(n){
    position: relative;
    height: 129px;

    }
    }
    .s-product-card-image {
    position: relative;
    height: 100%;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    --tw-bg-opacity: 1;
    background-color: rgba(243, 244, 246, 1);
    background-color: rgb(243 244 246 / 0%);
}
    @media (min-width: 640px) {
    .two-row .banner-entry:first-child {
        grid-column: span 1 / span 1;
        grid-row: span 1 / span 1;
    }
    .banner-entry {
    position: relative;
    height: 255px;
    overflow: hidden;
    border-radius: 0.375rem;
    --tw-bg-opacity: 1;
    background-color: rgba(243, 244, 246, 1);
    background-color: rgb(243 244 246 / 0%);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0.75rem;
    text-align: center;
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}
}
@media (min-width: 640px) {
    .banner-entry {
        position: relative;
        height: 430px;
        overflow: hidden;
        border-radius: 0.375rem;
        --tw-bg-opacity: 1;
        background-color: rgba(243, 244, 246, 1);
        background-color: rgb(243 244 246 / 0%);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding: 0.75rem;
        text-align: center;
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, 1);
        color: rgba(255, 255, 255, var(--tw-text-opacity));
    }
}
.bg-cover{
background-size: contain;
background-repeat: no-repeat;
}
.s-block--hero-slider .swiper-slide{
    background-color: rgb(255 255 255);
}



.s-block--hero-slider .swiper-slide .overlay-bg:after {
    position: absolute;
    top: 0px;
    height: 100%;
    width: 100%;
    background-color: rgb(255 255 255 / 0%);
    --tw-content: "";
    content: "";
    content: var(--tw-content);
}

.footer-is-light .store-footer .store-footer__inner {
    margin-top: 10px;
    border-radius: 60px;
    --tw-border-opacity: 1;
    border-bottom-color: #000;
    border-bottom-color:#000;
    --tw-bg-opacity: 1;
    
  
}
.footer-is-light .store-footer {
    border-radius: 40px 40px 0px 0px;;
    --tw-bg-opacity: 1;
        background-color: #fcf1fe;

    --tw-text-opacity: 1;
    color: rgba(55, 65, 81, 1);
    color: rgba(55, 65, 81, var(--tw-text-opacity));
}
.store-footer h3 {
    color: #000;
    text-align: center;
 
}
#app > div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div > div.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 > a{
display: flex;
justify-content: center;
color: #000;
}
.s-menu-footer-list, salla-social > li > a {
    text-align: center;
    color: #000;
}
.leading-6 {
    text-align: center;
    color: #000;
    }
    .s-social-list {
    color: #fff;
    display: flex;
    gap: 0.625rem;
    justify-content: center;
}
.s-contacts-item {
color: #fff;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    line-height: 1;
    justify-content: center;
}
.copyright-text p {
    --tw-text-opacity: 1;
    color: rgba	(37, 211, 102) !important;
    color: rgb	(37, 211, 102);
}


/*  whatsapp */ 
.s-contacts-icon {
    position: relative; /* Establishes a positioning context */
}

.s-contacts-icon::after {
    content: ''; 
    /* Required for pseudo-elements */
    position: fixed;
     /* Fixes the position relative to the viewport */
    bottom: 105px;
     /* Vertical position from the bottom */
    right: 16px; 
    /* Horizontal position from the right */
      width: 55px;
    height: 55px;
    background-color: rgb(37 211 102) !important;
    /* Green background */
    border-radius: 50%; 
    /* Makes the background circular */
    display: flex; 
    /* Centers the icon */
    justify-content: center;
     /* Centers the icon horizontally */
    align-items: center; 
    /* Centers the icon vertically */
    z-index: 1000; 
    /* Places it above other content */
}

.s-contacts-icon::after {
    background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="white"><path d="M27.281 4.65c-2.994-3-6.975-4.65-11.219-4.65-8.738 0-15.85 7.112-15.85 15.856 0 2.794 0.731 5.525 2.119 7.925l-2.25 8.219 8.406-2.206c2.319 1.262 4.925 1.931 7.575 1.931h0.006c0 0 0 0 0 0 8.738 0 15.856-7.113 15.856-15.856 0-4.238-1.65-8.219-4.644-11.219zM16.069 29.050v0c-2.369 0-4.688-0.637-6.713-1.837l-0.481-0.288-4.987 1.306 1.331-4.863-0.313-0.5c-1.325-2.094-2.019-4.519-2.019-7.012 0-7.269 5.912-13.181 13.188-13.181 3.519 0 6.831 1.375 9.319 3.862 2.488 2.494 3.856 5.8 3.856 9.325-0.006 7.275-5.919 13.188-13.181 13.188zM23.294 19.175c-0.394-0.2-2.344-1.156-2.706-1.288s-0.625-0.2-0.894 0.2c-0.262 0.394-1.025 1.288-1.256 1.556-0.231 0.262-0.462 0.3-0.856 0.1s-1.675-0.619-3.188-1.969c-1.175-1.050-1.975-2.35-2.206-2.744s-0.025-0.613 0.175-0.806c0.181-0.175 0.394-0.463 0.594-0.694s0.262-0.394 0.394-0.662c0.131-0.262 0.069-0.494-0.031-0.694s-0.894-2.15-1.219-2.944c-0.319-0.775-0.65-0.669-0.894-0.681-0.231-0.012-0.494-0.012-0.756-0.012s-0.694 0.1-1.056 0.494c-0.363 0.394-1.387 1.356-1.387 3.306s1.419 3.831 1.619 4.1c0.2 0.262 2.794 4.269 6.769 5.981 0.944 0.406 1.681 0.65 2.256 0.837 0.95 0.3 1.813 0.256 2.494 0.156 0.762-0.113 2.344-0.956 2.675-1.881s0.331-1.719 0.231-1.881c-0.094-0.175-0.356-0.275-0.756-0.475z"></path></svg>') no-repeat center;
    background-size: 50%; 
    /* Ensures the SVG scales properly */
}

.s-products-slider-card:hover{
transform: scale(1.08);
}