/* Add custom CSS styles below */ 
/* Add custom CSS styles below */

/* General start */

:root {

--main-color: rgb(165, 138, 108);

--second-color: #fff8f7;

--ss-color: #a57965;

--third-color: rgb(107, 84, 74);

--text-color: #fffaf7;

--back-color: #af9c99;

--black-color: #252424;

--card-color: rgba(107, 84, 74, 0.7);

--ff-color: rgba(165, 138, 108, 0.7);

}

/* General End */

/* Body */

body {

background: url(https://i.postimg.cc/NjsMWnXz/background.png);

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

background-position: center center;

background-size: contain;

box-sizing: border-box;

background-repeat: repeat;

}

body:after {

content: "";

width: 100%;

height: 100%;

top: 0;

position: fixed;

z-index: 999999;

background: var(--second-color)

url(https://cdn.salla.sa/ePdrzR/vtQYZ0ndin1HxkHEOrpAj5DmsuoFIyqbiNrgdu9i.png);

left: 0;

background-repeat: no-repeat;

background-position: center;

background-size: 320px;

animation-name: fade-in;

animation-duration: 1.8s;

transform: scale(0);

border: none;

}

@keyframes fade-in {

0% {

opacity: 1;

transform: scale(1);

}

50% {

opacity: 0.9;

transform: scale(1.02);

}

90% {

opacity: 0.6;

transform: scale(0.6);

}

100% {

opacity: 0;

transform: scale(0.3);

}

}

/* NavBar start */

/* NavBar start */

#mainnav,

.bg-inherit {

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

border-radius: 0px 0px 20px 20px;

border-bottom: 3px solid var(--ff-color) !important;

background: transparent;

}

.bg-inherit .container {

backdrop-filter: blur(3px);

border-bottom: 1px solid var(--ff-color) !important;

border-radius: 0px 0px 20px 20px;

}

.hydrated {

color: var(--black-color);

}

.main-menu {

color: var(--black-color);

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

}

#mainnav .navbar-brand {

animation-name: logo;

animation-duration: 3s;

animation-iteration-count: infinite;

scale: 1.2;

}

@keyframes logo {

0% {

}

40% {

transform: rotate(2deg);

}

80% {

transform: rotate(-2deg);

}

100% {

}

}

.main-menu li:hover {

color: var(--third-color);

transition: 0.3s;

}

.main-menu li a span {

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

}

.main-menu li a span:hover {

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

scale: 1.05;

transition: 0.2s;

}

.mobile-menu {

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

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

}

.sicon-user-circle:hover::before {

color: var(--main-color);

}

.s-cart-summary-total {

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

}

.sicon-menu {

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

}

.sicon-menu:hover {

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

rotate: 360deg;

transition: 0.2s;

}

.header-btn__icon {

border: none;

color: var(--third-color);

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

}

.header-btn__icon:hover {

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

transition: 0.4s;

scale: 1.03;

}

.header-btn:hover {

border: none;

color: var(--main-color);

transition: 0.3s;

scale: 1.04;

}

.s-cart-summary-total {

color: var(--third-color);

}

#mobile-menu {

background: var(--third-color);

}

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

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

color: var(--second-color);

background: var(--main-color);

}

.btn--close:hover {

rotate: 360deg;

scale: 1.1;

transition: 0.3s;

}

}

/* NavBar End */

/*قـــائمــة عنـــاصــــر*/

.square-photos {

width: 48%;

height: 180px;

transition-duration: 0.5s;

transition-property: scale;

background: transparent;

}

.square-photos:hover {

scale: 1.07;

transition: 0.4s;

}

.grid-flow-row {

width: 100%;

display: flex;

justify-content: center;

}

@media (min-width: 1024px) {

.square-photos {

width: 48%;

height: 300px;

transition-duration: 0.5s;

transition-property: scale;

background: transparent;

}

}

/* Banners */

.s-block--fixed-banner img {

background: none;

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

}

/* Title */

.s-slider-block__title-right h2 {

font-size: 0.9rem;

text-shadow: 1px 3px 3px var(--back-color) !important;

color: var(--black-color);

}

.font-bold {

color: var(--black-color);

padding: 10px;

border-right: 5px solid var(--third-color) !important;

}

.s-slider-block__title-right {

display: flex;

justify-content: center !important;

align-items: center !important;

background: linear-gradient(

90deg,

transparent,

transparent,

transparent,

transparent,

var(--ff-color)

) !important;

padding: 10px;

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

width: 50%;

text-align: center !important;

border-right: 5px solid var(--third-color) !important;

border-radius: 20px;

}

.s-slider-block__display-all {

border-left: 5px solid var(--third-color) !important;

color: var(--black-color);

background: linear-gradient(

90deg,

var(--ff-color),

transparent,

transparent,

transparent

) !important;

padding: 10px;

border-radius: 20px;

}

/* Card */

.swiper-wrapper {

padding: 10px;

}

.s-product-card-entry {

background: linear-gradient(90deg, var(--ff-color), var(--card-color));

color: var(--text-color);

text-align: center !important;

border-radius: 15px 15px 7px 7px;

box-shadow: 1px 1px 1px 1px var(--back-color);

}

.s-product-card-content-sub {

display: grid;

justify-content: center !important;

align-items: center !important;

}

.s-product-card-content {

text-align: center;

}

.s-product-card-entry .s-product-card-image {

border-radius: 20px 20px 0 0;

scale: 1;

width: 100%;

}

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

color: var(--black-color);

}

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

color: var(--text-color);

}

.s-product-card-entry:hover {

background: var(--ff-color);

box-shadow: 5px 6px 7px var(--back-color);

transition: 0.5s;

scale: 0.99;

border: 1px solid var(--black-color);

border-radius: 15px 15px 7px 7px;

.s-product-card-image {

border-radius: 20px 20px 0 0;

scale: 0.99;

transition: 0.5s;

border: 1px solid var(--text-color);

box-shadow: 1px 1px 0px var(--ss-color);

}

}

.s-button-element {

border: 1px solid var(--third-color);

background: var(--third-color);

border-radius: 5px 30px 5px 30px;

border: 1px solid var(--ss-color);

color: var(--text-color);

width: 90%;

box-shadow: 5px 4px 4px var(--card-color);

}

.s-button-element .sicon-shopping-bag {

color: var(--main-color);

font-weight: bold;

}

.s-button-element:hover {

background: var(--main-color);

border-radius: 5px 30px 5px 30px;

border: 1px solid var(--third-color);

color: var(--text-color);

transition: 0.5s;

scale: 1.01;

box-shadow: 5px 4px 4px var(--ff-color);

.sicon-shopping-bag {

color: var(--third-color);

font-weight: bold;

}

}

/* Footer */

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

border-bottom-color: var(--ss-color);

--tw-bg-opacity: 1;

background: var(--card-color) !important;

color: var(--text-color);

border-radius: 200px 200px 100px 100px;

border-bottom: 7px solid var(--ff-color);

font-weight: 500;

text-align: center;

box-shadow: 1px 2px 3px 4px var(--ss-color);

animation-name: shadow;

animation-duration: 3s;

animation-iteration-count: infinite;

}

@keyframes shadow {

0% {

}

40% {

box-shadow: 1px 2px 3px 4px var(--third-color);

}

80% {

box-shadow: 1px 2px 3px 4px var(--main-color);

}

100% {

}

}

.store-footer h3 {

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

font-weight: 700;

text-align: center !important;

text-shadow: 1px 3px 3px var(--third-color) !important;

padding: 1rem;

border-radius: 50px;

color: var(--main-color);

font-size: 1.4rem;

}

.store-footer h3:hover {

color: var(--black-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: url(https://cdn.salla.sa/ePdrzR/vtQYZ0ndin1HxkHEOrpAj5DmsuoFIyqbiNrgdu9i.png);

background-size: 90%;

background-repeat: no-repeat;

scale: 3.5;

line-height: 3;

background-position: center;

margin-bottom: 50px;

transform: translateY(10px);

margin-top: 10px;

animation-name: foot;

animation-duration: 5s;

animation-iteration-count: infinite;

}

salla-apps-icons,

salla-apps-icons h3 {

display: none;

}

@keyframes foot {

0% {

}

40% {

transform: rotate(3deg);

}

80% {

transform: rotate(-3deg);

}

100% {

}

}

@media (min-width: 1024px) {

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

padding-right: 5rem;

background: var(--card-color);

background-repeat: no-repeat;

background-size: contain;

scale: 0.7;

line-height: 0;

margin-bottom: 0;

margin-top: 0;

}

}

.footer-list {

color: var(--black-color);

}

.store-footer__inner .max-w-sm {

color: var(--text-color);

}

.s-contacts-list {

align-items: center !important;

}

.store-footer a {

color: var(--text-color);

}

.store-footer a:hover {

color: var(--black-color);

opacity: 1;

transform: scale(1.03);

transition: 0.4s;

}

.footer-is-light .store-footer {

--tw-bg-opacity: 1;

--tw-text-opacity: 1;

color: var(--black-color);

background: var(--ff-color);

border-radius: 200px 200px 0 0;

}

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

}

.text-center::before {

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

font-size: 16px;

font-weight: 700;

background: linear-gradient(

90deg,

var(--third-color),

var(--main-color),

var(--third-color)

);

-webkit-background-clip: text;

color: transparent;

padding: 8px 0 !important;

display: inline-block;

animation: colorChange 3s infinite;

background-size: 200% 200%;

text-shadow: none;

border-radius: 5px;

}

@keyframes colorChange {

0% {

background-position: 0% 50%;

}

50% {

background-position: 100% 50%;

}

100% {

background-position: 0% 50%;

}

}

#scrollToTop {

position: fixed;

bottom: 20px;

right: 20px;

width: 40px;

height: 40px;

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

color: #fff;

border: none;

border-radius: 50%;

text-align: center;

line-height: 40px;

font-size: 30px;

cursor: pointer;

display: none;

z-index: 1000;

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

}