/* Add custom CSS styles below */

.navbar-brand img {

max-height: 5.4rem;

width: auto;

animation: pulse 1s infinite;


}

.store-header::before {

content: '';

background: url("https://g.top4top.io/p_3231kvdof1.png");

background-position-x: 0%;

background-position-y: 0%;

background-size: auto;

background-repeat-y: no-repeat;

background-position-x: 0;

animation: Movecrosswise 5s linear alternate both infinite;

background-size: contain;

height: 40px;

display: block;

background-color:#dc6494;

background-position: center;

-bottom: 16px;

z-index: 9999999999999999;

}

@keyframes Movecrosswise {

0% {

background-position-x: 0%;

}

100% {

background-position-x: 100%;

}

}

body {

font-size: 15px;

font-weight: 400;

line-height: 26px;

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

position: relative;

font-family: sans-serif;

}

.app-inner{

background:white;

}

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

padding-right: 0px;

color:white;

text-shadow:white 0px 5px 15px;

}

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

border-width: 0px;

padding-left: 0px;

color:white;

text-shadow:white 0px 5px 15px;

}

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

border-width: 0px;

padding-left: 0px;

color:white;

text-shadow:white 0px 5px 15px;

}

.s-search-input-wrapper input {

box-shadow:white 0px 5px 15px;


}

.top-navbar .s-search-input {

border-style: none;

background-color: white;

}

.bg-inherit {

background-color:#FCE8E8;

border-radius: 20px;

box-shadow: 0 3px 8px 0 #dc6494;

}

.main-nav-container {

min-height: 68px;

background-color: white;

}

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

.main-menu li > a {

font-size: 0.875rem;

line-height: 1.25rem;

color:#dc6494;

text-shadow:#dc6494 0px 5px 15px;

display: inline-block;

transition: transform 0.3s ease;

}

.main-menu li > a:hover {

transform: translateY(-6px); /* تحرك لفوق 6 بيكسل */

}

}

/*

.main-menu li > a:hover {

animation: wave 0.6s ease;

animation-iteration-count: infinite;

}


@keyframes wave {

0%, 100% {

transform: translateX(0);

}

25% {

transform: translateX(5px);

}

50% {

transform: translateX(-5px);

}

75% {

transform: translateX(5px);

}

}

*/

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

font-family: sallaicons !important;

speak: never;

font-style: normal;

font-weight: 400;

font-variant: normal;

text-transform: none;

line-height: 1;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

border: none;

color:#dc6494;

text-shadow:#dc6494 ؤ0px 5px 15px;


}

.s-cart-summary-total {

font-weight: 600;

--tw-text-opacity: 1;

color: rgb(0, 0, 0);

color:#dc6494;

text-shadow:#dc6494 0px 5px 15px;


}


@media (min-width: 1024px) {

.top-navbar {

padding-top: 0.375rem;

padding-bottom: 0.375rem;

background:#dc6494; }

}


.banner--fixed img {

display: block;

width: 100%;

border-radius: 0.375rem;

border-style: none;

--tw-bg-opacity: 1;

background-color: rgb(243, 244, 246);

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

-o-object-fit: cover;

object-fit: cover;

background-color:inherit;





}






.banner-entry {

position: relative;

height: 400px;

overflow: hidden;

border-radius: 0.375rem;

--tw-bg-opacity: 1;

background-color: inherit;

background-size: cover;

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));

border-radius:12%;

transition: transform 0.3s ease-in-out;

}

.banner-entry{

width: 42vw;

min-height: 100px;

}

.lazy__bg{

background-size: 100% 100%;

background-size: contain!important;

background-repeat:no-repeat!important;


}

.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) {

@media (min-width: 768px) {

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

height: 403px !important;

}


}

}

.s-block--features__item {

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

.s-block--features__item p {

color: black ;}

.text-with-border span {

color : white ;

}

@media (max-width: 480px) {

.banner-entry {

width: 120px;

height: 219px;

margin: auto;

}

}

@media (max-width: 480px) {

.gap-3 {

gap: 0.6rem;

}

}



/* تفعيل الاهتزاز عند تمرير الماوس */


.banner-entry:hover {

animation: shake 0.3s ease-in-out;

}

@keyframes shake {

0% { transform: translateX(0); }

20% { transform: translateX(-4px); }

40% { transform: translateX(4px); }

60% { transform: translateX(-4px); }

80% { transform: translateX(4px); }

100% { transform: translateX(0); }

}



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

--tw-border-opacity: 1;

border-bottom-color: rgba(229, 231, 235, 1);

border-bottom-color: rgba(229, 231, 235, var(--tw-border-opacity));

--tw-bg-opacity: 1;

background-color:#FCE8E8;

border-radius:9%;

border:none;

}

.store-footer {

padding: 30px;

font-size: 14px;

border-top-left-radius: 125px;

border-top-right-radius: 125px;

text-align: center;

}

.py-4 {

box-shadow:#dc6494 0px 5px 15px;

background-color:#FCE8E8;

padding-top: 1rem;

padding-bottom: 1rem;

border-radius:15px;

}

.footer-is-light .store-footer {

--tw-bg-opacity: 1;

background-color:#FCE8E8;

--tw-text-opacity: 1;

color: rgba(55, 65, 81, 1);

color: rgba(55, 65, 81, var(--tw-text-opacity));

box-shadow:#dc6494 0px 5px 15px;

}


:root {

--font-main: 'DINNextLTArabic-Regular';

--color-primary:#dc6494;

--color-primary-dark: #002330;

--color-primary-light: #266f7c;

--color-primary-reverse: white;

}

/*

body:after {

content: '';

width: 100%;

height: 100%;

top: 0;

position: fixed;

z-index: 999999;

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

backdrop-filter: blur(10px);

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

background:

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

left: 0;

background-repeat: no-repeat;

background-position: center;

background-size: 360px;

animation-name: fade-in;

animation-duration: 2.5s;

transform: scale(0);

border: none;

margin-bottom: 1rem;

background-color:#F4F4F4;

}

@keyframes fade-in {

0% {

opacity: 1;

transform: scale(1);

}


75% {

opacity: 1;

transform: scale(1);

}


100% {

opacity: 0;

transform: scale(.1);

}

}

*/

@media(min-width: 640px){

salla-slider[type]:not(.hydrated) > div > div, salla-slider[type]:not(.hydrated) .swiper > div > div > div, .carousel-slider .swiper-wrapper > div{

padding-left:0.625rem;

padding-right:0.625rem;

border-radius:5%;

padding-bottom: 0.625rem;

}

}


.store-footer h3 {

color: #dc6494 !important;

border-radius: 8px;

font-weight: bold;

padding-top: 0.3rem;

width: 100%;

padding-bottom: 0.3rem;

box-shadow: #dc6494 0px 4px 12px;

animation: glow 2s ease-in-out infinite;

}

/* تعريف حركة النور */

@keyframes glow {

0%, 100% {

box-shadow: 0 4px 12px #dc6494;

}

50% {

box-shadow: 0 4px 20px 6px #dc6494;

}

}




.leading-6 {

line-height: 1.5rem;

color:#dc6494;

}


.store-footer a {

transition-property: opacity;

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

transition-duration: 150ms;

color:#dc6494;

border: none;

}


.copyright-text p {

--tw-text-opacity: 1;

color: rgba(55, 65, 81, 1);

color:#dc6494;

}

.s-contacts-icon {

display: flex;

height: 2rem;

width: 2rem;

flex-shrink: 0;

align-items: center;

justify-content: center;

border-radius: 9999px;

border-width: 1px;

border: none;

}

.unicode {

unicode-bidi: plaintext;

color:#dc6494;

}

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

.main-menu li > a:hover {

color:#dc6494;

text-decoration-line: none;

}

}


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

text-align: center;

content:"";

display: block;

border-radius: 10px 40px;

margin: auto auto 20px;

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


background-repeat: no-repeat;

background-size: contain;

background-position: center;

border-width: 0px;

width: auto;

animation: pulse 1s infinite;


height: 130px;

width: 215px;


}



section {

opacity: 0;

transform: translateY(50px); /* Slide up effect */

transition: opacity 1s ease, transform 1s ease;

}


section.visible {

opacity: 1;

transform: translateY(0);

}



h2 {

background:inherit;

padding: 10px 20px;

padding-left: 20px;

padding-left: 20px;

text-shadow: 0 4px 12px #dc6494;

color:#dc6494;

}




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

color:#dc6494;

text-shadow: 0 4px 12px #dc6494;


}

.s-product-card-price{

color:#dc6494;

text-shadow: 0 4px 12px #dc6494;


}


/* Adjustments for mobile screens */


@media (max-width: 768px) {

.navbar-brand img {

max-height: 2.5rem; /* Reduce image size for smaller screens */

}


.store-header::before {

height: 30px;

background-size: cover;

animation: MovecrosswiseMobile 3s linear alternate both infinite;

}


@keyframes MovecrosswiseMobile {

0% {

background-position-x: 0%;

}

100% {

background-position-x: 100%;

}

}

}


*, ::before, ::after {

color:#dc6494;

--tw-border-spacing-x: 0;

--tw-border-spacing-y: 0;

--tw-translate-x: 0;

--tw-translate-y: 0;

--tw-rotate: 0;

--tw-skew-x: 0;

--tw-skew-y: 0;

--tw-scale-x: 1;

--tw-scale-y: 1;

--tw-pan-x: ;

--tw-pan-y: ;

--tw-pinch-zoom: ;

--tw-scroll-snap-strictness: proximity;

--tw-gradient-from-position: ;

--tw-gradient-via-position: ;

--tw-gradient-to-position: ;

--tw-ordinal: ;

--tw-slashed-zero: ;

--tw-numeric-figure: ;

--tw-numeric-spacing: ;

--tw-numeric-fraction: ;

--tw-ring-inset: ;

--tw-ring-offset-width: 0px;

--tw-ring-offset-color: #fff;

--tw-ring-color: rgba(59, 130, 246, 0.5);

--tw-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0);

--tw-ring-shadow: 0 0 rgba(0, 0, 0, 0);

--tw-shadow: 0 0 rgba(0, 0, 0, 0);

--tw-shadow-colored: 0 0 rgba(0, 0, 0, 0);

--tw-blur: ;

--tw-brightness: ;

--tw-contrast: ;

--tw-grayscale: ;

--tw-hue-rotate: ;

--tw-invert: ;

--tw-saturate: ;

--tw-sepia: ;

--tw-drop-shadow: ;

--tw-backdrop-blur: ;

--tw-backdrop-brightness: ;

--tw-backdrop-contrast: ;

--tw-backdrop-grayscale: ;

--tw-backdrop-hue-rotate: ;

--tw-backdrop-invert: ;

--tw-backdrop-opacity: ;

--tw-backdrop-saturate: ;

--tw-backdrop-sepia: ;

--tw-contain-size: ;

--tw-contain-layout: ;

--tw-contain-paint: ;

Show all properties (1 more)

}


.s-product-card-entry {

position: relative;

display: flex;

flex-direction: column;

height: 100%;

justify-content: space-between;

border-radius: .75rem;

background-color: #FCE8E8;

transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

margin-top: 5px;

border-radius: 15px 15px 15px 50px; /* الزوايا */

box-shadow: 2px 2px 10px #dc6494; /* الشادو */

overflow: visible !important; /* مهم جدًا للشادو */

margin-right: 5px;

margin-left: 5px;



}

@keyframes shake {

0%, 100% { transform: translateX(0); }

25% { transform: translateX(-2px); }

50% { transform: translateX(2px); }

75% { transform: translateX(-2px); }

}


.s-product-card-entry:hover {

animation: shake 0.4s ease-in-out;

}




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

color: #dc6494;

text-shadow: 0 4px 12px #dc6494;

text-align: center;

}


.s-products-slider-card {

width: 100%;

max-width: 250px;

padding-left: 0.5rem;

padding-right: 0.5rem;

margin-bottom: 16px;

}


.sicon-shopping-bag::before {

content: "🛒"; /* رمز سلة Unicode */

font-family: inherit; /* خلي الخط يورّي الرمز عادي */

}

.s-product-card-price {

color: #dc6494;

text-shadow: 0 4px 12px #dc6494;

margin: auto;

}






.store-footer::after {

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

color:#dc6494 !important;

font-size: 16px

opacity: .8;

text-align: center;

font-weight: bold;

width: 100%;

display: block;

position: relative;

top: 0;

padding-top: 14px;

text-shadow:#dc6494 0px 5px 15px;

animation: moveUpDown 2s ease-in-out infinite;

}


@keyframes moveUpDown {

0% {

top: 0;

}

50% {

top: -10px;

}

100% {

top: 0;

}

}



.s-slider-nav-arrow{

border-color: #dc6494;

}




@media (min-width: 640px) {

salla-slider[type]:not(.hydrated) > div > div, salla-slider[type]:not(.hydrated) .swiper > div > div > div, .carousel-slider .swiper-wrapper > div {

padding-left: 0.625rem;

padding-right: 0.625rem;

border-radius: 0%;

padding-bottom: 0.625rem;

}

}




@media (max-width: 768px) {
.s-block--slider-with-bg .slider-bg {

width:1047px;
}
}