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


/* General start */

:root {

--main-color: rgb(177, 205, 120);

--second-color: #fffae6;

--ss-color: #97bbbd;

--third-color: rgb(33, 59, 60);

--text-color: #eee6e0;

--back-color: #756369;

--black-color: #252424;

--card-color: rgba(33, 59, 60, 0.7);

--ff-color: rgba(177, 205, 120, 0.7);

}


/* General End */

.almarai-light {

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

font-weight: 300;

font-style: normal;

}


.almarai-regular {

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

font-weight: 400;

font-style: normal;

}


.almarai-bold {

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

font-weight: 700;

font-style: normal;

}


.almarai-extrabold {

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

font-weight: 800;

font-style: normal;

}


/* Body */

body {

width: 100%;

min-height: 100vh;

position: relative;

background-image: linear-gradient(

45deg,

rgba(33, 59, 60, 0.1) 0%,

#fffae6 20%,

rgba(177, 205, 120, 0.1) 20%,

#fffae6 40%,

rgba(33, 59, 60, 0.1) 40%,

#fffae6 60%,

rgba(177, 205, 120, 0.1) 60%,

#fffae6 80%,

rgba(33, 59, 60, 0.1) 80%,

#fffae6 90%,

rgb(177, 205, 120, 0.1) 100%,

#fffae6 100%

);

background-size: cover;

background-attachment: fixed;

}


body:after {

content: "";

width: 100%;

height: 100%;

top: 0;

position: fixed;

z-index: 999999;

background: var(--third-color)

url(https://cdn.salla.sa/BerXy/Dt3mrrmyFQBpNxyfF4CMwWp4Sgr9F22WGMFWZ9LB.png);

left: 0;

background-repeat: no-repeat;

background-position: center;

background-size: 160px;

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;

filter: blur(2px);

transform: scale(0.6);

}


100% {

opacity: 0;

transform: scale(0.3);

}

}


/* NavBar start */


#mainnav {

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

}


.hydrated {

color: var(--black-color);

}


.main-menu {

color: var(--black-color);

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

}

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

}

.navbar-brand img {

filter: drop-shadow(3px 4px 6px var(--black-color));

}


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

color: var(--main-color);

}

.s-cart-summary-total {

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

filter: drop-shadow(7px 9px 10px var(--back-color)) !important;

}

.sicon-menu {

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

filter: drop-shadow(4px 6px 7px var(--back-color)) !important;

}

.sicon-menu:hover {

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

rotate: 360deg;

transition: 0.2s;

}

.header-btn__icon {

border: none;

color: var(--third-color);

filter: drop-shadow(4px 6px 7px var(--back-color)) !important;

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 */


/* Banners */

.s-block--fixed-banner img {

background: none;

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

animation-name: example;

animation-duration: 6s;

animation-iteration-count: infinite;

}

@keyframes example {

0% {

scale: 1;

}

50% {

rotate: 0.3deg;


}


100% {

scale: 1;

}

}

/* Title */

.s-slider-block__title-right h2 {

font-size: 1.4rem;

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

color: var(--third-color);

}

.font-bold {

color: var(--black-color);

}


.s-slider-block__title-right {

display: flex;

justify-content: center !important;

align-items: center !important;

background: var(--main-color);

padding: 10px;

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

width: 60%;

text-align: center !important;

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

}


/* cards*/


.swiper-wrapper {

padding: 10px;

}

.s-product-card-entry {

background: var(--card-color);

color: var(--text-color);

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

text-align: center !important;

border-radius: 15px;

box-shadow: 3px 3px 5px 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: 10px;

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

scale: 0.96;

}

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

color: var(--text-color);

}

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

color: var(--black-color);

}


.s-product-card-entry:hover {

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

transition: 0.5s;

scale: 1.02;

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

.s-product-card-image {

border-radius: 5px;

scale: 0.94;

transition: 0.5s;

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

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

}

}

.s-button-element {

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

background: linear-gradient(90deg, var(--third-color), var(--main-color));

border-radius: 20px;

color: var(--text-color);

}

.s-button-element:hover {

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

color: var(--text-color);

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

border-radius: 10px;

transition: 0.5s;

scale: 1.02;

}


.photos-slider {

background: none;

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

filter: drop-shadow(7px 9px 10px var(--back-color));

animation-name: example;

animation-duration: 6s;

animation-iteration-count: infinite;

}


/* أحدث المنتجات */

.right-side h2 {

font-size: 1.6rem;

text-shadow: 1px 5px 5px var(--third-color);

}


/* Footer */


.store-footer {

margin-right: 20px;

margin-left: 20px;

background: linear-gradient(

90deg,

var(--ff-color),

var(--card-color)

) !important;

padding: 30px;

font-size: 14px;

border-top-left-radius: 50px;

border-top-right-radius: 50px;

box-shadow: 1px 1px 7px 7px var(--text-color);

text-align: center;

}

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

background-color: transparent;

}

.store-footer__inner {

background-color: transparent !important;

}

.store-footer__inner .flex {

justify-content: center;

}

.store-footer__inner .max-w-sm {

margin: auto;

}

.store-footer h3 {

text-align: center !important;

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

padding: 1rem;

border-radius: 50px;


color: var(--black-color);

font-size: 1.6rem;

}

.store-footer h3:hover {

color: var(--black-color);

opacity: 1;

cursor: pointer;

}


.footer-list {

color: var(--text-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;

}


.store-footer i {

color: var(--text-color);

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

}

.store-footer__inner {

text-align: center;

}


salla-apps-icons,

salla-apps-icons h3 {

display: none;

}

.s-apps-icons-list {

display: none;

justify-content: space-around;

align-items: center;

}

.store-footer::after {

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

top: 0px;

font-size: 16px;

opacity: 1;

text-align: center;

font-weight: bold;

width: 100%;

display: inline-block;

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

animation-name: example;

animation-duration: 4s;

animation-iteration-count: infinite;

}


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

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

}

.s-social-list {
  display: flex;
  justify-content: center !important;
  align-items: center !important;
}
.s-social-link a {
  border: 1px solid var(--main-color);
}
.s-social-icon {
  color: var(--black-color) !important;
}



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

color: #eee7e7;

}


.text-primary {

color: var(--main-color);

}