:root {

--main-color:#423c76;

--second-color:#7965a8;

--third-color: white;

--fourth-color:;

--body: white;

--logo: url(https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/vXNwlP/uU4zJXRcrioRGIwA3HDpJgPfO154QCrs2zKx2ob4.png);

}

/* Example of using dark theme */


.loader-init {

display:none;

}

.s-product-card-vertical .s-product-card-image {

flex: 1 1 0%;

border-top-left-radius: .75rem;

border-top-right-radius: .75rem;

}

.s-product-card-vertical .s-product-card-image {

flex: 1 1 0%;

border-top-left-radius: 0rem;

border-top-right-radius: 0rem;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}


::-webkit-scrollbar {

width: 10px;

height: 10px;

}


::-webkit-scrollbar-track-piece {

background-color: var(--body);

-webkit-border-radius: 0;

}


::-webkit-scrollbar-thumb:vertical {

height: 200px;

background-color: var(--main-color);

-webkit-border-radius: 0;

}


::-webkit-scrollbar-thumb:vertical:hover {

background-color: var(--second-color);

}


::-webkit-scrollbar-thumb:horizontal {

width: 200px;

background-color: var(--body);

-webkit-border-radius: 0;

}


::selection {

color: var(--third-color);

background: var(--second-color);

}




.s-block {

margin-top: 2rem;

background: unset;

}


/* ----- start nav -----*/


.bg-inherit {

background-color: inherit;

background: var(--fourth-color);

}


header.store-header {

background: var(--fourth-color);

}


.top-navbar {

display: flex;

min-height: 48px;

padding-top: .5rem;

padding-bottom: .5rem;

background: unset;

}


.s-contacts-topnav-link:last-child:where([dir=rtl], [dir=rtl] *) {

display: none;

}


@media only screen and (min-width: 1024px) {

.main-menu li.root-level>a {

color: var(--main-color);

position: relative;

display: inline-block;

padding: 10px 15px;

text-decoration: none;

transition: all 0.3s ease-in-out;

}


.main-menu li.root-level>a:after {

content: '';

position: absolute;

left: 0;

bottom: 0;

width: 0;

height: 2px;

background-color: var(--second-color);

transition: width 0.3s ease-in-out;

}


.main-menu li.root-level>a:hover {

color: var(--third-color);

/* تغيير اللون */

background-color: var(--main-color);

/* لون خلفية مختلف */

transform: translateY(-5px);

/* رفع العنصر لفوق */

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

/* إضافة ظل */

border-radius: 3px 3px 0px 0px;

}


.main-menu li.root-level>a:hover::after {

width: 100%;

/* الخط يظهر بالكامل عند hover */

}

}


.sicon-user-circle {

content: "\f072";

color: var(--main-color);

border: none;

}


.sicon-user-circle:hover {

content: "\f072";

color: var(--second-color);

}


.header-btn__icon.icon:where([dir=rtl], [dir=rtl] *) {

margin-left: 9px;

margin-right: 0;

margin-right: initial;

color: var(--main-color) !important;

border: none;

}


.header-btn__icon.icon:hover {

margin-left: 9px;

margin-right: 0;

margin-right: initial;

color: var(--second-color) !important;

}


.sicon-shopping-bag:before {

content: "\e901";

text-align: center;

}


.sicon-user-circle:before {

content: "\f077";

text-align: center;

}


i.text-base.sicon-shopping-bag:before {


content: '';

display: inline-block;

width: 24px; /* Set the desired width */

height: 24px; /* Set the desired height */

background: url('https://cdn.assets.salla.network/themes/1894368909/1.11.0/images/icon-cart.svg') no-repeat center center;

background-size: contain;


}


.s-cart-summary-total {

font-weight: 600;

--tw-text-opacity: 1;

color: #000;

color: rgba(0, 0, 0, var(--tw-text-opacity));

color: var(--main-color);

}


.sicon-menu {

content: "\ed7f";

color: var(--main-color);

}


.sicon-menu:hover {

content: "\ed7f";

color: var(--second-color);

}


.s-contacts-topnav-link:where([dir=rtl], [dir=rtl] *) {

border-left-width: 1px;

color: var(--main-color);

}


.s-contacts-topnav-link:hover {

border-left-width: 1px;

color: var(--second-color);

}


.topnav-link-item:last-child:where([dir=rtl], [dir=rtl] *) {

border-width: 0;

padding-left: 0;

color: var(--main-color);

}


.topnav-link-item:last-child:hover {

border-width: 0;

padding-left: 0;

color: var(--second-color);

}


.topnav-link-item.right-side:first-child:where([dir=rtl], [dir=rtl] *) {

padding-right: 0;

color: var(--main-color);

}


.topnav-link-item.right-side:first-child:hover {

padding-right: 0;

color: var(--second-color);

}


.s-search-icon svg {

height: 1rem;

width: 1rem;

fill: var(--main-color);

}


.s-cart-summary-count {

top: -.125rem;

--tw-bg-opacity: 1;

background-color: var(--second-color);

}


.top-navbar .s-search-input {

border-style: none;

background: var(--third-color);

box-shadow: 1px 1px 5px var(--main-color);

}


.s-user-menu-trigger {

background: transparent;

}


#mainnav {

border-radius: 15px;

background: transparent;



}

.main-nav-container.fixed-header .inner {

transform: translated(0, 0, 0);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

}

.bg-inherit {

background-color: inherit;

transform: translated(0, 0, 0);

background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0));


border: 1px solid rgba(255, 255, 255, .18);

}

.s-button-wide {

BORDER: 0PX;

}


@media (min-width: 1024px) {

.main-nav-container {

min-height: 100px;

background: var(--fourth-color);

box-shadow: none;

}

}


.navbar-brand img:hover {

-webkit-animation: blink-1 0.6s both;

animation: blink-1 0.6s both;

}


@-webkit-keyframes blink-1 {


0%,

50%,

100% {

opacity: 1;

}


25%,

75% {

opacity: 0;

}

}


@keyframes blink-1 {


0%,

50%,

100% {

opacity: 1;

}


25%,

75% {

opacity: 0;

}

}


/*----- end nav -----*/


/*----- start sidebar -----*/


@media only screen and (max-width: 1024px) {

.mm-spn.mm-spn--navbar.mm-spn--main:where([dir=rtl], [dir=rtl] *):after {

padding-right: .75rem;

color: var(--third-color);

}

}


.mm-spn.mm-spn--navbar ul {

top: calc(50px + 1px);

top: calc(var(--mm-spn-item-height) + 1px);

color: var(--third-color);

background: none;

}


@media only screen and (max-width: 1024px) {

.mm-spn li a span:hover {

padding: 0;

color: var(--second-color);

background: none;


}

}


[dir=rtl] .mm-spn.mm-spn--navbar.mm-spn--main:after {

padding-right: 0.75rem;

content: "";

background: none;

text-align: center !important;

display: block;

height: 90px !important;

background-image: var(--logo) !important;

background-size: contain !important;

background-repeat: no-repeat !important;

background-position: top center !important;

margin: 30px 50px 11px 50px;

}


/* Navbar Menu Adjustments */

@media (max-width: 650px) {

ul.main-menu.mm-spn--open {

margin-top: 100px;

background: none;

}

}


.mm-spn.mm-spn--navbar ul::before {

content: "";

display: block;

position: fixed;

z-index: 2;

width: 100%;

opacity: 0.15;

}


/* Content Styling */

.mm-ocd__content {

background: #d2ddebb8;

}


@media only screen and (max-width: 1024px) {

.mm-ocd__content {

overflow-y: auto;

min-width: 100% !important;

}


.mm-spn li a,

.mm-spn li > span {

padding: 18px;

display: flex;

gap: 1rem;

margin: 7px;

text-align: center;

align-items: center;

justify-content: center;

}


.mm-spn li a span {

padding: 0;

font-size: 15px;

}


.mm-spn.mm-spn--light {

color: var(--prodCard-btn-background);

background: linear-gradient(var(--second-color), var(--main-color));

}



}

#loaderr {

position: fixed;

z-index: 999999;

top: 0;

left: 0;

width: 100%;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

background: transparent!important;

animation: fade-in 3.5s forwards

}




@keyframes fadeInOut {

0%, 100% {

opacity: 0;

}

50% {

opacity: 1;

}

}

@keyframes fade-in {

0% {

opacity: 1;

transform: scale(1)

}


75% {

opacity: 1;

transform: scale(1)

}


100% {

opacity: 0;

transform: scale(.1)

}

}


.loader__balls {

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

gap: 15px;

}

.loader__balls__group {

display: flex;

flex-direction: column;

justify-content: flex-end;

align-items: center;

position: relative;

height: 100px;

width: 40px;

}

.ball {

height: 30px;

width: 30px;

border-radius: 15px;

position: absolute;

transform-origin: bottom;

}


/* ANIMATION BALL 1*/

.loader__balls__group :nth-child(1) {

background-color: #7965a8;

animation-name: jumpinBallAnimation1;

animation-duration: 1000ms;

animation-iteration-count: infinite;

}

@keyframes jumpinBallAnimation1 {

0% {

transform: translateY(0) scale(1, 1);

}

10% {

transform: translateY(0) scale(1.3, 0.8);

}

11% {

transform: translateY(0) scale(0.7, 1.2);

animation-timing-function: cubic-bezier(0, 0, 0.5, 1);

}

39% {

transform: translateY(-75px) scale(1);

animation-timing-function: cubic-bezier(0, 0, 0.5, 1);

}

40% {

transform: translateY(-75px) scale(1);

}

41% {

transform: translateY(-75px) scale(1);

animation-timing-function: cubic-bezier(1, 0, 1, 0);

}

69% {

transform: translateY(0px) scale(1, 1);

animation-timing-function: cubic-bezier(1, 0, 1, 0);

}

70% {

transform: translateY(0) scale(1.5, 0.4);

}

80% {

transform: translateY(0) scale(0.8, 1.2);

}

90% {

transform: translateY(0) scale(1.1, 0.8);

}

100% {

transform: translateY(0) scale(1, 1);

}

}


/* ANIMATION BALL 2*/

.loader__balls__group :nth-child(2) {

background-color: #6c62c2;

animation-name: jumpinBallAnimation2;

animation-duration: 1000ms;

animation-iteration-count: infinite;

}

@keyframes jumpinBallAnimation2 {

0% {

transform: translateY(0) scale(1, 1);

}

10% {

transform: translateY(0) scale(1.3, 0.8);

}

11% {

transform: translateY(0) scale(0.7, 1.2);

animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);

}

39% {

transform: translateY(-75px) scale(1);

animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);

}

40% {

transform: translateY(-75px) scale(1);

}

41% {

transform: translateY(-75px) scale(1);

animation-timing-function: cubic-bezier(1, 0, 1, 0.5);

}

69% {

transform: translateY(0px) scale(1, 1);

animation-timing-function: cubic-bezier(1, 0, 1, 0.5);

}

70% {

transform: translateY(0) scale(1.5, 0.4);

}

80% {

transform: translateY(0) scale(0.8, 1.2);

}

90% {

transform: translateY(0) scale(1.1, 0.8);

}

100% {

transform: translateY(0) scale(1, 1);

}

}


/* ANIMATION BALL 3*/

.loader__balls__group :nth-child(3) {

background-color:#423c76;

animation-name: jumpinBallAnimation3;

animation-duration: 1000ms;

animation-iteration-count: infinite;

}

@keyframes jumpinBallAnimation3 {

0% {

transform: translateY(0) scale(1, 1);

}

10% {

transform: translateY(0) scale(1.3, 0.8);

}

11% {

transform: translateY(0) scale(0.7, 1.2);

animation-timing-function: cubic-bezier(0, 1, 0.5, 1);

}

39% {

transform: translateY(-75px) scale(1);

animation-timing-function: cubic-bezier(0, 1, 0.5, 1);

}

40% {

transform: translateY(-75px) scale(1);

}

41% {

transform: translateY(-75px) scale(1);

animation-timing-function: cubic-bezier(1, 0, 1, 1);

}

69% {

transform: translateY(0px) scale(1, 1);

animation-timing-function: cubic-bezier(1, 0, 1, 1);

}

70% {

transform: translateY(0) scale(1.5, 0.4);

}

80% {

transform: translateY(0) scale(0.8, 1.2);

}

90% {

transform: translateY(0) scale(1.1, 0.8);

}

100% {

transform: translateY(0) scale(1, 1);

}

}

.loader__balls__group .item1 {

animation-delay: 0ms;

}

.loader__balls__group .item2 {

animation-delay: 100ms;

}

.loader__balls__group .item3 {

animation-delay: 200ms;

}



/* Cancel Icon */

.sicon-cancel::before {

content: "\ea47";

color: var(--main-color);

font-size: 25px;

}


/* Navbar Positioning */

@media (min-width: 991px) {

.mm-spn.mm-spn--navbar ul {

top: calc(var(--mm-spn-item-height) + 80px);

}

}


@media (min-width: 650px) {

.mm-spn.mm-spn--navbar ul {

top: calc(var(--mm-spn-item-height) + 100px);

}

}


/* Close Button */

.btn--close-sm {

background-color: transparent;

}



/* Section Styling */

section:nth-of-type(40) {

width: 100%;

padding: 0 !important;

padding-top: 40px !important;

padding-right: 10px !important;

}


section:nth-of-type(40) .lazy__bg {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100% !important;

background-size: 100% 100% !important;

background-position: center;

}

.s-product-card-image-contain {

object-fit: cover;

}

.container {

max-width: 1500px;

}

/*----- end sidebar -----*/


/*----- start content -----*/


.banner-entry {

width: 50vw;

min-height: 200px;

background: unset;

}


@media(min-width:768px) {

.banner-entry {

width: 42vw;

min-height: 500px;

background: unset

}

}


.lazy__bg {

background-size: 100% 100%;

background-size: contain !important;

background-repeat: no-repeat !important;


}


.lazy__bg:after {

content: "";

position: absolute;

top: -50%;

left: -60%;

width: 20%;

height: 200%;

opacity: 0;

transform: rotate(30deg);


background: rgba(255, 255, 255, 0.13);

background: linear-gradient(to right,

rgba(255, 255, 255, 0.13) 0%,

rgba(255, 255, 255, 0.13) 77%,

rgba(255, 255, 255, 0.5) 92%,

rgba(255, 255, 255, 0.0) 100%);

}


.lazy__bg:hover:after {

opacity: 1;

left: 130%;

transition-property: left, top, opacity;

transition-duration: 0.7s, 0.7s, 0.15s;

transition-timing-function: ease;

}


.lazy__bg:active:after {

opacity: 0;

}


.gap-3 {

display: flex;

flex-wrap: nowrap;

justify-content: center;


}


@media only screen and (max-width: 600px) {

.banner-entry {

height: auto;

}

}


@media (min-width: 768px) {

.two-row .banner-entry:first-child {

height: auto !important;

}

}


.s-slider-block__display-all {

display: inline-block;

font-size: .875rem;

line-height: 1.25rem;

font-weight: 700;

color: #414042;

color: var(--color-primary);

color: var(--main-color);

}


.s-slider-block__display-all:hover {

display: inline-block;

font-size: .875rem;

line-height: 1.25rem;

font-weight: 700;

color: #414042;

color: var(--color-primary);

color: var(--second-color);

}


a.s-block__display-all {

color: var(--main-color);

}


a.s-block__display-all:hover {

color: var(--second-color);

}


.s-slider-block__title h2 {

position: relative;

font-size: 1.125rem;

line-height: 1.75rem;

font-weight: 700;

line-height: 1.2;

color: var(--main-color);

padding: 10px;

border-radius: 26px;

}


.s-block__title h2 {

position: relative;

font-size: 1.125rem;

line-height: 1.75rem;

font-weight: 700;

line-height: 1.2;

color: var(--main-color);

padding: 10px;

border-radius: 32px;

}


.banner--fixed img {

display: block;

width: 100%;

border-radius: .375rem;

border-style: none;

--tw-bg-opacity: 1;

background-color: #f3f4f6;

background-color: rgba(243, 244, 246, var(--tw-bg-opacity));

-o-object-fit: cover;

object-fit: cover;

background: none;

}


.s-breadcrumb-item {

display: inline-block;

color: black;

}


.s-breadcrumb-item:hover {

display: inline-block;

color: var(--second-color);

}


.s-breadcrumb-primary-reverse li {

color: var(--second-color);

opacity: 0.8;

}


.s-breadcrumb-primary-reverse li:hover {

color: var(--second-color);

opacity: 0.8;

}


.profile-header .breadcrumbs a {

color: var(--second-color);

}


.profile-header .breadcrumbs a:hover {

color: var(--second-color);

}


.btn--outline-primary {

border-width: 1px;

border-color: #414042;

border-color: var(--main-color);

color: #414042;

color: var(--main-color);

}


.no-content-placeholder .icon {

margin-bottom: 1rem;

display: flex;

height: 8rem;

width: 8rem;

align-items: center;

justify-content: center;

border-radius: 9999px;

--tw-bg-opacity: 1;

background-color: #f3f4f6;

background-color: rgba(243, 244, 246, var(--tw-bg-opacity));

font-size: 3rem;

line-height: 1;

--tw-text-opacity: 1;

color: #d1d5db;

color: var(--third-color);

background: var(--main-color);

}


.no-content-placeholder p {

margin-bottom: 1rem;

font-size: 1rem;

line-height: 1.5rem;

--tw-text-opacity: 1;

color: #6b7280;

color: rgba(107, 114, 128, var(--tw-text-opacity));

color: var(--main-color);

}


.rtl\:pl-3:where([dir=rtl], [dir=rtl] *) {

padding-left: .75rem;

color: var(--third-color);

}


.text-xl {

font-size: 1.25rem;

line-height: 1.75rem;

color: var(--third-color);

background: var(--main-color);

padding: 5px;

border-radius: 30px;

text-align: center;

}


.px-5 {

padding-left: 1.25rem;

padding-right: 1.25rem;

color: black;

}


span.text-gray-500.line-through {

color: var(--second-color);

}


.product__description a {

--tw-text-opacity: 1;

color: #1d4ed8;

color: rgba(29, 78, 216, var(--tw-text-opacity));

color: var(--main-color);

}


.s-products-list-placeholder span {

margin-bottom: 1rem;

display: flex;

height: 8rem;

width: 8rem;

align-items: center;

justify-content: center;

border-radius: 9999px;

--tw-bg-opacity: 1;

background-color: #f3f4f6;

background-color: rgba(243, 244, 246, var(--tw-bg-opacity));

font-size: 3rem;

line-height: 1;

--tw-text-opacity: 1;

color: #d1d5db;

color: rgba(209, 213, 219, var(--tw-text-opacity));

background: var(--main-color);

}


.s-products-list-placeholder p {

padding-top: .5rem;

text-align: center;

--tw-text-opacity: 1;

color: #9ca3af;

color: rgba(156, 163, 175, var(--tw-text-opacity));

color: var(--main-color);

}


.s-products-list-placeholder span svg {

margin-left: auto;

margin-right: auto;

height: 4rem;

width: 4rem;

fill: var(--third-color);

text-align: center;

}


.s-block--photos-slider {

margin-top: 0 !important;

}


.swiper {

padding-left: 0 !important;

}


salla-slider.photos-slider .swiper-slide {

position: relative;

margin-top: -5px;

margin-left: 1.1rem;

margin-right: 10px;

height: auto;

width: 102%;

overflow: hidden;

padding-left: 0;

padding-right: 0;

}


@media (max-width: 1024px) {

salla-slider.photos-slider .swiper-slide {

position: relative;

margin-top: -5px;

margin-left: 1.1rem;

margin-right: 2px;

height: auto;

width: 107%;

overflow: hidden;

padding-left: 0;

padding-right: 0

}

}


.s-block--tabs-produtcs .tab-trigger.is-active button {

border-color: #414042;

border-color: var(--main-color);

background-color: #414042;

color: #ff6767;

color: var(--third-color);

background: var(--main-color);

}


button.btn--wishlist.animated.hidden.sm\:inline-flex.s-button-element.s-button-icon.s-button-outline.s-button-light-outline.s-button-loader-center.s-button-wrap.hydrated.not-added {

color: var(--second-color);

}


.btn--wishlist.is-added {

--tw-text-opacity: 1;

color: var(--main-color);

}


.s-comments-product {

margin-bottom: 1rem;

--tw-bg-opacity: 1;

background-color: #f3f4f6;

background-color: rgba(243, 244, 246, var(--tw-bg-opacity));

padding-top: 1rem;

padding-bottom: 1rem;

background: unset;

}


.s-breadcrumb-arrow svg {

height: .875rem;

width: .875rem;

fill: var(--second-color);

}


.s-add-product-button-mini-checkout-content {

display: flex;

flex-shrink: 0;

align-items: center;

white-space: nowrap;

font-size: .8rem;

color: var(--main-color);

background: 0 0 !important;

width: 107%;

height: 110%;

justify-content: center;

}


.s-add-product-button-mini-checkout-content:hover {

display: flex;

flex-shrink: 0;

align-items: center;

white-space: nowrap;

font-size: .8rem;

color: var(--second-color);

background: 0 0 !important;

width: 107%;

height: 110%;

justify-content: center;

}


button.s-slider-next.s-slider-nav-arrow.swiper-button-disabled.swiper-button-lock {

opacity: 0;

}


button.s-slider-prev.s-slider-nav-arrow.swiper-button-disabled.swiper-button-lock {

opacity: 0;

}


.s-login-modal-header-icon svg {

height: 1.25rem;

width: 1.25rem;

flex-shrink: 0;

fill: var(--main-color);

}


.s-modal-title {

color: var(--main-color);

}


span.s-login-modal-header-icon {

border: 2px solid var(--main-color);

}


label.s-login-modal-label {

color: var(--main-color);

font-weight: bold;

}


.iti__selected-dial-code {

color: var(--main-color);

font-weight: bold;

}


input.s-tel-input-control.tel-input.s-ltr {

border: 2px solid var(--main-color);

}


a.s-login-modal-link {

color: var(--main-color);

}


a.s-login-modal-link:hover {

color: var(--second-color);

}


.s-block--features__item .feature-icon {

margin-bottom: .75rem;

display: flex;

height: 6rem;

width: 6rem;

align-items: center;

justify-content: center;

overflow: hidden;

border-radius: 9999px;

background-color: #414042;

background-color: var(--main-color);

}


.s-block--features__item .feature-icon i {

font-size: 3.875rem;

line-height: 2.25rem;

color: #ff6767;

color: var(--third-color);

}


.s-block--features__item h2 {

margin-bottom: .25rem;

font-size: 20px;

line-height: 1.25rem;

font-weight: 700;

--tw-text-opacity: 1;

color: #1f2937;

color: rgba(31, 41, 55, var(--tw-text-opacity));

}


.s-block--features__item p {

font-size: 15px;

line-height: 1.25rem;

--tw-text-opacity: 1;

color: #6b7280;

color: var(--main-color);

font-weight: 700;

}


#salla-modal:not(.s-search-modal)>div.s-modal-wrapper>div>div.s-modal-header:before {

display: block !important;

content: '';

background: var(--logo);

background-size: contain;

background-repeat: no-repeat;

background-position: center;

width: 100%;

height: 102px;

margin: 15px auto;

}


@media (max-width: 1024px) {

salla-slider.photos-slider .swiper:where([dir="rtl"], [dir="rtl"] *) {

padding-bottom: 0px;

}

}


/*----- end content -----*/


/*----- start product card -----*/

.s-product-card-image img {

height: 100%;

width: 100%;

opacity: 100;


transition: opacity 500ms cubic-bezier(.4,0,.2,1);

background: 0 0!important;

transition: 1s

}



.s-product-card-image {

position: relative;

height: 100%;

width: 100%;

flex-shrink: 0;

overflow: hidden;

background-color: transparent;

transition: 1s

}

.s-product-card-content-title a {

-webkit-line-clamp: 3;

overflow: hidden;

text-overflow: ellipsis;

height: 20px;

overflow: hidden;

}

.s-product-card-content-title {


line-height: 0.5rem;

}

/* nav start*/


.s-product-card-content {

padding: 0.25rem !important;

background: transparent !important;

}

.s-product-card-price {

z-index: 1 !important;

}

.s-button-btn {

color:white;

z-index: 2 !important;

background: linear-gradient(135deg, var(--second-color), var(--main-color));

font-size: 17px;

}

[class^=sicon-], [class*=" sicon-"] {


font-size: 24px;

}

.s-product-card-vertical .s-product-card-image {

flex: 1 1 0%;

border-radius: 0px;

background: 0 0;

transition: 1s

}


.s-product-card-vertical {

position: relative;

overflow: hidden;

background: transparent !important;

transition: all .3s ease-in-out !important;



}

.s-product-card-vertical .s-product-card-image:after {

content: "";

position: absolute;

top: -50%;

left: -60%;

width: 20%;

height: 200%;

opacity: 0;

transform: rotate(30deg);


background: rgba(255, 255, 255, 0.19);

background: linear-gradient(

to right,

rgba(255, 255, 255, 0.13) 0%,

rgba(255, 255, 255, 0.13) 77%,

rgba(255, 255, 255, 0.5) 92%,

rgba(255, 255, 255, 0.0) 100%

);

}


.s-product-card-vertical .s-product-card-image:hover:after {

opacity: 1;

left: 130%;

transition-property: left, top, opacity;

transition-duration: 0.6s, 0.6s, 0.14s;

transition-timing-function: ease;

}


.s-product-card-vertical .s-product-card-image:active:after {

opacity: 0;

}

.s-product-card-vertical:hover::before {

left:150%;

}

.s-button-primary-outline:hover {

color: #fff !important;

background-color: transparent;

}

/* Original code with hover modifications */

.swiper-wrapper .s-button-element:not(:disabled):not([loading]) {

pointer-events: auto;

width: 68%;

height: 41px;

float: inline-end;

margin-top: -112px;

color: #ffffff;

font-size: 15px;

background: linear-gradient(to top, #423c76, #7965a8);

font-weight: 400;

margin-left: 47px;

border-radius: 42px;


/* Added hover effects */

opacity: 0;

transition: all 0.3s ease-in-out;

transform: translateY(20px);

}


/* Show button on parent hover */

.swiper-wrapper:hover .s-button-element:not(:disabled):not([loading]) {

opacity: 1;

transform: translateY(0);

margin-top: -142px; /* Keep original position */

}


/* Hover state for button itself */

.swiper-wrapper .s-button-element:not(:disabled):not([loading]):hover {

background: linear-gradient(to top, #423c76, #7965a8);

transform: translateY(0) scale(1.05);

box-shadow: 0 4px 15px rgba(40, 51, 137, 0.3);

}

.s-button-outline {

border-color: transparent !important;

}

.s-button-btn, .s-price-range-number-input {

border-radius: 0;

}


.s-product-card-content-main a {

text-decoration: none;

font-weight: 600;

font-size: medium;

letter-spacing: 0.5px;

transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;

position: relative;

color: var(--main-color) !important;

display: flex

;

-webkit-line-clamp: 3 !important;

align-content: flex-end;

justify-content: center;

}


.s-product-card-content-main a:hover {


color: var(--second-color) !important;


}

.s-product-card-content-sub {

margin-bottom: 0.25rem;

display: flex

;

width: 100%;

align-items: center;

justify-content: center;

align-content: center;

flex-wrap: nowrap;

flex-direction: column;

}

.s-product-card-price {

font-size: 18px !important;

line-height: 14px !important;

font-weight: 600 !important;

color: var(--main-color) !important;


}




/*----- end product card -----*/


.banner--fixed img {

opacity: 0;

transform: translateY(50px) scale(0.8);

/* التحريك من أسفل مع التصغير */

transition: opacity 0.8s ease-out, transform 0.8s ease-out;

}


.banner--fixed img.visible {

opacity: 1;

transform: translateY(0) scale(1);

/* الرجوع لمكانه الطبيعي مع التكبير */

}


salla-slider.photos-slider {

opacity: 0;

transform: translateY(50px) scale(0.8);

/* التحريك من أسفل مع التصغير */

transition: opacity 0.8s ease-out, transform 0.8s ease-out;

}


salla-slider.photos-slider.visible {

opacity: 1;

transform: translateY(0) scale(1);

/* الرجوع لمكانه الطبيعي مع التكبير */

}


.lazy__bg {

opacity: 0;

transform: translateY(50px) scale(0.8);

/* التحريك من أسفل مع التصغير */

transition: opacity 0.8s ease-out, transform 0.8s ease-out;

}


.lazy__bg.visible {

opacity: 1;

transform: translateY(0) scale(1);

/* الرجوع لمكانه الطبيعي مع التكبير */

}





.scrolling-text {

background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

overflow: hidden;

position: relative;

width: 100%;

height: 31px;

color: var(--main-color);

display: flex;

align-items: center;

margin-top: 10px;

/* Space below the slider */

font-family: inherit;

margin-top: -36px;

padding: 0;

/* Match the font of the page */

}


@media (max-width: 1024px) {

.scrolling-text {

margin-top: 1px;

}

}


.scrolling-text .text-container {

display: flex;

gap: 2rem;

/* Space between texts */

animation: banSwiperScroll 35s linear infinite;

/* Ensure enough content width */

min-width: 200%;

/* Make sure the text spans more than the visible area */

}


.scrolling-text .text-container span {

display: inline-block;

font-size: 1rem;

/* Adjust font size */

white-space: nowrap;

/* Prevent text wrapping */

}


@keyframes banSwiperScroll {

0% {

transform: translateX(0);

}


100% {

transform: translateX(-50%);

/* Scroll halfway for seamless looping */

}

}



/* Apply the animation to the loader */



.banner-swap {

width: 100%;

background: var(--fourth-color);

color: var(--main-color);

overflow: hidden;

padding: 10px 0;

position: relative;

}


.bannt {

display: flex;

width: 100%;

animation: banSwiperScroll 12s linear infinite;

will-change: transform;

}


.bannt:hover {

animation-play-state: paused;

/* Pause scroll on hover */

}


.banrerr {

white-space: nowrap;

padding: 0 50px;

font-size: 1.2em;

font-weight: bold;

display: flex;

align-items: center;

position: relative;

transition: color 0.3s ease, text-shadow 0.3s ease;

}


.banrerr:hover {

color: var(--third-color);

text-shadow: 0 0 8px var(--main-color), 0 0 12px var(--second-color);

/* Glowing effect */

}


.banrerr i {

margin-left: 10px;

animation: bounceIcon 1.5s infinite ease-in-out;

/* Icon bounce */

}


/* Bouncing icon effect */

@keyframes bounceIcon {


0%,

100% {

transform: translateY(0);

}


50% {

transform: translateY(-5px);

}

}


/* Smooth scrolling renamed from tickerScroll to banSwiperScroll */

@keyframes banSwiperScroll {

0% {

transform: translateX(-100%);

}


100% {

transform: translateX(100%);

}

}


/* start footer */

.wave {

z-index: 1;


position: absolute;

top: -100px;

left: 0;

width: 100%;

height: 16%;

background: url(https://www2.0zz0.com/2025/03/29/04/734247432.png);

background-size: 1000px 100px;


}


.wave#wave1 {

z-index: 1;

opacity: 1;

bottom: 0;

animation: animateWave 4s linear infinite;

}


.wave#wave2 {

z-index: 1;

opacity: .5;

bottom: 0;

animation: animateWave_2 4s linear infinite;

}


.wave#wave3 {

z-index: 1;

opacity: .2;

bottom: 15px;

animation: animateWave 3s linear infinite;

}


.wave#wave4 {

z-index: 999;

opacity: .7;

bottom: 20px;

animation: animateWave_2 3s linear infinite;

}


@keyframes animateWave {

0% {

background-position-x: 1000px;

}


100% {

background-position-x: 0px;

}

}


@keyframes animateWave_2 {

0% {

background-position-x: 0px;

}


100% {

background-position-x: 1000px;

}

}


.store-footer {

background: linear-gradient(to top, #423c76, #423c76) !important;

margin-top: 115px;

}


.footer-is-light .store-footer .store-footer__inner {

background: linear-gradient(to top, #423c76, #7965a8);

margin-top: -38px;

text-align: center;

border-style: inset;

}


@media (min-width: 1024px) {

.lg\:grid-cols-6 {

grid-template-columns: repeat(4, minmax(0, 1fr));

}

}


.store-footer h3 {

font-family: "Almarai", sans-serif;

font-weight: 700;

text-align: center !important;

!important; !important; !important;

padding: 1rem;

border-radius: 50px;

color: var(--main-color);

font-size: 1.4rem;

background: var(--third-color);

}


.store-footer h3:hover {

color: var(--second-color);

opacity: 1;

cursor: pointer;

transition: 0.5s;

}


a.flex.items-center.m-0 {

display: flex;

flex-direction: column;

}


.store-footer a h3:nth-child(1) {

font-size: 0rem;

color: transparent;

background-image: var(--logo);

background-size: 58%;

background-repeat: no-repeat;

scale: 3.5;

line-height: 3;

background-position: center;

margin-bottom: 50px;

margin-top: 50px;

}



salla-apps-icons,

salla-apps-icons h3 {

display: none;

}


@media (min-width: 1024px) {

.rtl\:lg\:pr-20:where([dir="rtl"], [dir="rtl"] *) {

padding-right: 5rem;

background: var(--main-color);

background-repeat: no-repeat;

background-size: contain;

scale: 0.7;

line-height: 0;

margin-bottom: 0;

margin-top: 0;

}

}


.footer-list {

color: var(--main-color);

}


.store-footer__inner .max-w-sm {

color: var(--main-color);

}


.s-contacts-list {

align-items: center !important;

}


.store-footer a {

color: var(--third-color);

}


.store-footer a:hover {

color: var(--main-color);

opacity: 1;

transform: scale(1.03);

transition: 0.4s;

}


.footer-is-light .store-footer {

--tw-bg-opacity: 1;

--tw-text-opacity: 1;

background: var(--main-color);

border-radius: 85px 85px 0 0;

color: var(--third-color);

}


@media (max-width: 1024px) {

.footer-is-light .store-footer {

padding-top: 17px;

}

}


.s-social-list {

display: flex;

gap: 0.625rem;

justify-content: center;

}


.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 {

display: flex;

flex-direction: column;

align-items: center;

}


.s-menu-footer-list {

display: flex;

flex-direction: column;

align-items: center;

}


.s-contacts-list.s-contacts-list-vertical {

display: flex;

align-items: center;

flex-direction: row;

flex-wrap: wrap;

justify-content: center;

}


span.unicode {

display: none;

}


.footer-is-light .store-footer .contact-social {

border: none;

}


.copyright-text p {

color: var(--third-color);

}


.store-footer::after {

content: "برمجة وتطوير ADFAZ";

top: 0;

color: var(--third-color) !important;

font-size: 16px;

opacity: 0.8;

text-align: center;

font-family: sans-serif;

font-weight: 700;

width: 100%;

display: inline-block;

}

/* end footer */




.marquee-bar {

background: linear-gradient(to top, #423c76, #7965a8);

color: white;

padding: 4px 16px;

font-size: 16px;

font-weight: bold;

text-align: center;

overflow: hidden;

white-space: nowrap;

position: relative;

width: 100%;

border-bottom-left-radius: .75rem;

border-bottom-right-radius: .75rem;

}

.marquee-wrapper {

display: flex;

width: max-content;

animation: marquee 30s linear infinite;

}


.marquee-text {

margin-right: 50px; /* مسافة بين العبارات */

}


/* حركة سلسة لا نهائية */

@keyframes marquee {

from {

transform: translateX(100%);

}

to {

transform: translateX(-100%);

}

}