/* Add custom CSS styles below */
body {
background-color: #fff !important;
}
:root {
--primary-color: #856657;
--secondary-color: #000;
--header-bg: transparent;
--index-header-bg: transparent;
/* --index-header-bg: rgba(0, 0, 0, 0.3); */
/* --stiky-header-bg: rgba(0, 0, 0, 0.3); */
/* --stiky-header-bg: rgba(255, 255, 255, .3); */
--stiky-header-blur: blur(10px);
--header-icons: #856657;
--hover-links-color: #000;
--sub-menu-bg: #fff;
--title-color: #856657;
--title-img: url(https://i.ibb.co/yBpLYsVF/Subtract.png);
/* card */
/* btn */
/* --main-btn-bg: var(--primary-color); */
/* --main-btn-bg: transparent; */
/* --main-btn-bg: #fff; */
/* --main-btn-border-color: var() */
/* login btn */
--login-bg: transparent;
--login-color: #fff;
--login-border: #fff;
--login-bg-hover: var(--primary-color);
--login-color-hover: #fff;
--login-border-hover: var(--primary-color);
--footer-logo: url(https://i.ibb.co/nNGH28Mk/Step-NBag-1.png);
--footer-color: #856657;
/* --footer-bg: url(https://i.ibb.co/zh9k913R/Frame-611.png); */
}
/* ==========================================
nav
=========================================== */
/******* nav bg *******/
@media(min-width: 992px){
body.index div#mainnav{
background-color: var(--index-header-bg);
/* border-bottom: 1px solid #fff; */
}
}
div#mainnav{
background: var(--header-bg);
box-shadow: none;
position: relative;
z-index: 2;
}
/*** stiky nav ***/
div#mainnav .bg-inherit {
background-color: var(--stiky-header-bg);
backdrop-filter: var(--stiky-header-blur);
}
/********* logo *********/
@media(min-width: 1024px) {
.navbar-brand img {
max-height: 4rem;
}
}
/* logo center */
/* @media(min-width: 768px) {
.navbar-brand img{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
} */
/************* links *************/
custom-main-menu nav ul li a span {
color: var(--header-icons);
}
@media only screen and (min-width: 1024px) {
.main-menu li.root-level>a {
color: var(--header-icons);
}
}
/* links hover */
@media only screen and (min-width: 1024px) {
.main-menu>.has-children:hover>a {
color: var(--hover-links-color);
}
}
/* links sub menu*/
.main-menu .sub-menu{
background-color: var(--sub-menu-bg);
}
/************* icons *************/
.header-btn__icon.sicon-user-circle,
.header-btn__icon.icon.sicon-shopping-bag,
.s-cart-summary-total,
.mburger .sicon-menu.text-primary {
color: var(--header-icons);
}
/* search icon */
.header-btn__icon {
border-color: var(--header-icons);
border: none;
}
.header-search-icon i {
cursor: pointer;
color: var(--header-icons);
}
/* user icon */
.s-user-menu-login-btn{
border-color: transparent;
}
.s-user-menu-login-btn svg{
fill: var(--header-icons);
}
.s-user-menu-trigger {
background-color: transparent;
}
/*=========== top nav ===========*/
.top-navbar{
display:none;
}
.top-navbar {
background-color: var(--primary-color);
color: #fff;
/* visibility: hidden; */
}
@media(min-width: 798px){
body.index .top-navbar {
backdrop-filter: blur(1.1px);
background: rgba(0, 0, 0, 0.2);
}
}
/*** header imporatant links ****/
.top-navbar .s-menu-topnav-list{
display: none;
}
.top-navbar salla-contacts.s-contacts.s-contacts-header.hydrated{
display: none;
}
.top-navbar .header-buttons{
display: none;
}
/******* search input *********/
.top-navbar .s-search-input::placeholder {
color: #fff;
}
.s-search-icon svg {
fill: #fff;
}
/*=============login btn =================*/
salla-user-menu.hydrated {
order: 1;
}
@media(min-width: 768px) {
.s-user-menu-login-btn svg {
display: none;
}
button.s-user-menu-login-btn {
padding: 4px 24px;
padding: 8px 48px;
border-radius: 5px;
border: 1px solid #fff;
background-color: #fff;
color: var(--primary-color);
transition: .3s;
order: 1;
width: auto;
height: auto;
}
body.index button.s-user-menu-login-btn {
border: 1px solid transparent;
background-color: var(--primary-color);
/* background-color: transparent; */
color: #fff;
/* color: var(--primary-color); */
}
/* button.header-btn:last-of-type:hover {
background-color: #fff;
border-color: #fff;
color: var(--primary-color);
} */
body.index button.s-user-menu-login-btn:hover {
background-color: #fff;
border-color: #fff;
color: var(--primary-color);
}
button.s-user-menu-login-btn:after {
content: "تسجيل الدخول";
}
i.header-btn__icon.icon.sicon-shopping-bag {
border: none;
}
}
b.s-cart-summary-total {
display: none;
}
.s-user-menu-login-btn {
border-color: transparent;
}
.s-user-menu-login-btn svg {
fill: var(--primary-color);
}
/* =========================================
banners
=========================================== */
:nth-child(1 of section.s-block.s-block--fixed-banner.wide-placeholder) .container {
padding-right: 0;
padding-left: 0;
max-width:100%;
}
.s-block.s-block--fixed-banner.wide-placeholder .container{
max-width:100%;
}
.banner--fixed img {
border-radius: 0;
background-color: transparent;
}
:nth-child(3 of section.s-block.s-block--fixed-banner.wide-placeholder){
margin-top: .5rem;
}
/* ===========================================
main banner
============================================= */
@media(min-width:992px){
:nth-child(1 of section.s-block.s-block--fixed-banner.wide-placeholder) {
margin-top:0rem;
/* margin-top:-6rem; */
/* margin-top:-5.3rem; */
}
}
@media(max-width:992px){
:nth-child(1 of section.s-block.s-block--fixed-banner.wide-placeholder) {
margin-top:0;
}
}
/* ===================titles=============== */
/* ==prod== */
.s-products-slider-wrapper .s-slider-block__title {
margin-bottom: .5rem;
justify-content: center;
}
.s-products-slider-wrapper .s-slider-block__title-left {
display: none !important;
}
.s-products-slider-wrapper .s-slider-block__title h2 {
/* color: var(--primary-color); */
/* color: #000 !important; */
}
.s-slider-block__title h2:where([dir=rtl],[dir=rtl] *), .s-slider-block__title-right:where([dir=rtl]0,[dir=rtl] *) {
padding-left: 0;
}
/* ==cats== */
section.s-block.s-block--categories .s-slider-block__title {
justify-content: center;
}
.s-slider-controls-outer .s-slider-block__title-nav {
display: none;
}
/*==features== */
.s-block__title {
justify-content: center;
}
.s-block__title h2 {
color: var(--primary-color);
}
/*==testimonials== */
.s-reviews-header-wrapper {
justify-content: center;
}
/* -------------group-------------*/
@media(min-width: 768px) {
.s-slider-block__title h2 , .s-block__title h2 , .s-reviews-header-wrapper h1 {
font-size: 22px;
}
}
.s-slider-block__title h2 , /* .s-block__title h2 */
.s-reviews-header-wrapper h1 {
/* color: var(--secondary-color) !important; */
/* color: var(--primary-color) !important; */
color: var(--title-color) !important;
}
.s-slider-block__title h2 , .s-block__title h2, .s-reviews-header-wrapper h1 {
position: relative;
}
/* =========img before, after title======= */
.s-slider-block__title h2, .s-reviews-header-wrapper h1, .s-block__title h2 {
/* margin-right: 31px; */
margin-top: 1rem;
/* position: relative; */
}
.s-slider-block__title h2:before, .s-reviews-header-wrapper h1:before, .s-block__title h2:before, .s-slider-block__title h2:after, .s-reviews-header-wrapper h1:after, .s-block__title h2:after {
content: '';
position: absolute;
top: 50%;
top: 38%;
transform: translateY(-50%);
width: 31px;
height: 34px;
background: var(--title-img) no-repeat;
background-size: contain !important;
}
.s-slider-block__title h2:before, .s-reviews-header-wrapper h1:before, .s-block__title h2:before {
left: 105%;
/* left: 95%; */
/* top: 0%; */
background: var(--title-img-before) no-repeat;
}
.s-slider-block__title h2:after, .s-reviews-header-wrapper h1:after, .s-block__title h2:after {
right: 105%;
/* right: 95%; */
/* top: 120%; */
background: var(--title-img-after) no-repeat;
}
/* ================small title ========================== */
section.s-block.s-block--banners.container h2:after {
/* content: "نحرص على تقديم نباتات صحية ومنتجات عناية تساعدك على الاستمتاع بجمال الطبيعة ÙÂÂيمنزلك"; */
display: block;
font-size: 12px;
font-weight: normal;
margin-top: 8px;
line-height: 1.4;
}
.s-block__title .right-side {
text-align: center;
}
/* ========================Categories============================ */
/* title */
.slide--cat-entry h2 {
display: none;
}
/* swiper container */
/* @media(max-width:768px){ */
.carousel-slider .swiper:where([dir=rtl],[dir=rtl] *) {
padding-left: 0;
}
/* } */
/* @media(max-width:768px){
salla-slider[type]:not(.hydrated) > div:where([dir="rtl"], [dir="rtl"] *),
salla-slider[type]:not(.hydrated) .swiper > div > div:where([dir="rtl"], [dir="rtl"] *),
.carousel-slider .swiper:where([dir="rtl"], [dir="rtl"] *) {
padding-left: 0;
}
} */
/* swiper */
section.s-block.s-block--categories .swiper-wrapper {
transform: none !important;
/* flex-wrap: wrap; */
/* justify-content: center; */
/* display: grid; */
/* grid-template-columns: repeat(3, minmax(0, 1fr)); */
}
@media(min-width: 1024px) {
section.s-block.s-block--categories .swiper-wrapper {
/* justify-content: center; */
}
}
/* slide */
section.s-block.s-block--categories .s-slider-swiper-wrapper .swiper-slide:nth-child(2) {
/* order: 1; */
}
section.s-block.s-block--categories .s-slider-swiper-wrapper .swiper-slide:nth-child(3) {
/* grid-row: span 2; */
}
@media(min-width: 1024px) {
section.s-block.s-block--categories .s-slider-swiper-wrapper .swiper-slide {
/* width: 255px; */ /* width: 650px; */ /* width: 50%; */ /* width: 40%; */ /* width: 25%; */ /* width: 100%; */ width: calc(100% / 3);
}
}
@media(max-width: 1024px) {
section.s-block.s-block--categories .s-slider-swiper-wrapper .swiper-slide {
/* width: 180px; */ /* width: 40%; */ width: 50%;
/* width: 100%; */
/* width: calc(100% / 2.5); */
}
}
/* card */
section.s-block.s-block--categories .swiper-wrapper .swiper-slide > a {
background-color: transparent;
border-width: 0;
height: 100%;
padding: 0;
}
/* img */
section.s-block.s-block--categories .swiper-wrapper .swiper-slide > a > img {
border-radius: 0;
width: 100%;
height: 100%;
transition: .3s;
}
section.s-block.s-block--categories .s-slider-swiper-wrapper .swiper-slide:nth-child(3) a img {
/* object-fit: fill; */
}
section.s-block.s-block--categories .swiper-wrapper .swiper-slide > a > img:hover {
transform : translateY(10px);
transform : scale(1.05);
}
/* =========================================
Products Section
========================================== */
.s-slider-block__title-left {
display: none !important;
}
/*===swiper=== */
.swiper-wrapper.s-slider-swiper-wrapper {
padding-top: 1rem;
padding-bottom: 1.5rem;
}
/*===slide=== */
@media(max-width: 768px) {
.s-products-slider-card.swiper-slide {
width: 175px;
}
}
/*===card=== */
.s-product-card-vertical {
position: relative;
overflow: hidden;
box-shadow: 0px 0px 6px -1px #707070;
/* background-color: #F3F9FC; */
transition: all .3s ease;
height: 31rem;
padding: .5rem;
/* border: 1px dashed var(--primary-color); */
border-radius: 5px;
}
@media(max-width: 768px) {
.s-product-card-vertical {
/* height: 28rem; */ height: 20rem;
}
}
/*========card content======== */
.s-product-card-content {
/* background-color: #fff; */
border-radius: 0;
}
/**** content main ****/
.s-product-card-content-title {
text-align: center;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
/* number of lines to show */
line-clamp: 2;
-webkit-box-orient: vertical;
}
.s-product-card-content-title a {
color: var(--primary-color);
/* color: #000; */
}
/***** content sub *****/
.s-product-card-content-sub {
justify-content: center;
}
.s-product-card-price, .s-product-card-sale-price h4 {
/* color: #D80000 !important; */
/* color: #03A3A8 !important; */
color: var(--primary-color) !important;
/* color: var(--secondary-color) !important; */
/* color: #000 !important; */
}
.s-product-card-content-sub h4 i.sicon-sar {
/* color: var(--secondary-color); */
/* color: #D80000 !important; */
/* color: #03A3A8 !important; */
color: var(--primary-color) !important;
}
/***** content footer *****/
.s-button-wide {
/* background: linear-gradient(to right,#E9C7C6 0%, #593C47 100%); */
/* background-color: #fff; */
background-color: var(--primary-color);
/* background-color: transparent; */
/* color: var(--primary-color); */
color: #fff;
/* color: #EDB162; */
border-radius: 5px;
padding: 8px;
border-color: var(--primary-color);
/* border-color: #EDB162; */
/* box-shadow: 0px 4px 16px 0px #4A2C2A10; */
}
.s-button-wide:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 6px 15px rgba(0,0,0,0.2);
/* background-color: #EDB162 ; */
/* color: #fff; */
}
/*===card img=== */
.s-product-card-vertical .s-product-card-image {
border-radius: 5px;
/* padding: .5rem; */
background-color: transparent;
/* background-color: #fff; */
}
.s-product-card-vertical img {
transition: .5s;
aspect-ratio: 1 / 1;
/* border-radius: .75rem; */
}
.s-product-card-vertical:hover img {
/* transform : rotate(-30deg); */
/* transform: scale(1.04); */
}
/* ======== card shine animation ========== */
.s-product-card-vertical::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
/* height: 100%; */
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.6s;
pointer-events: none;
}
.s-product-card-vertical:hover::after {
left: 100%;
}
.s-product-card-vertical:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}
/* .s-product-card-vertical:hover{
box-shadow: 0px 0px 6px -1px #707070;
} */
.s-products-list-vertical-cards {
padding: .1rem;
}
/* ====== btn shine effect====== */
.s-button-wide::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
transition: 0.6s;
pointer-events: none;
}
.s-button-wide:hover::after {
left: 100%;
}
/* =================================new Features =============================*/
:nth-child(1 of section.s-block.s-block--banners.container) {
/* background-color: #F8ECEC; */
padding-right: 0;
padding-left: 0;
max-width:100%;
/* margin-top: -8px; */
padding-top: 3rem;
}
/* grid */
@media (min-width: 768px) {
:nth-child(1 of section.s-block.s-block--banners.container)
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
/* gap: 0 !important; */
}
}
@media (max-width: 768px) {
:nth-child(1 of section.s-block.s-block--banners.container)
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
/* gap: 0 !important; */
}
}
/* card */
:nth-child(1 of section.s-block.s-block--banners.container)
.md\:grid-cols-3 .banner-entry {
background-color: transparent;
grid-row: span 1;
grid-column: span 1;
}
:nth-child(1 of section.s-block.s-block--banners.container)
.md\:grid-cols-3 .banner-entry:nth-child(2) {
pointer-events: none;
}
@media (min-width: 992px) {
:nth-child(1 of section.s-block.s-block--banners.container)
.md\:grid-cols-3 .banner-entry {
height: 150px;
height: 255px;
/* height: 400px; */
}
}
@media (max-width: 992px) {
:nth-child(1 of section.s-block.s-block--banners.container)
.md\:grid-cols-3 .banner-entry {
height: 120px;
}
}
@media (max-width: 768px) {
:nth-child(1 of section.s-block.s-block--banners.container)
.md\:grid-cols-3 .banner-entry {
/* height:210px; */ /* height:218px; */ height: 70px;
/* height: 300px; */
/* margin-bottom: 1rem; */
}
}
:nth-child(1 of section.s-block.s-block--banners.container)
.md\:grid-cols-3 .banner-entry:hover {
transform: scale(1.01);
}
/* img */
:nth-child(1 of section.s-block.s-block--banners.container)
.md\:grid-cols-3 .banner-entry {
transition: .5s;
}
:nth-child(1 of section.s-block.s-block--banners.container)
.md\:grid-cols-3 .banner-entry:hover {
transform: scale(1.01);
}
.lazy__bg {
background-size: contain;
background-repeat: no-repeat;
}
/* ===============features animation====== */
.s-block--banners .banner-entry {
position: relative;
overflow: hidden;
}
.s-block--banners .banner-entry::after {
content: "";
position: absolute;
top: -120%;
left: -60%;
width: 40%;
height: 260%;
background: linear-gradient( 120deg, transparent, rgba(255,255,255,0.35), transparent );
transform: rotate(20deg);
}
/* .s-block--banners .banner-entry:hover::after { */
.s-block--banners .banner-entry:not(:first-of-type):hover::after {
animation: shineMove 0.9s ease forwards;
}
@keyframes shineMove {
to {
left: 130%;
}
}
/* =========================================
Footer
===========================================*/
/* .footer-is-light .store-footer { */
/* footer.store-footer { */
footer {
background-image: var(--footer-bg);
background-size: cover;
background-color: var(--footer-color) !important;
}
footer > div.store-footer__inner {
background-color: transparent !important;
color: #fff;
border-bottom: none;
}
.s-social-list.hydrated {
place-content: center;
}
.store-footer__inner .container.grid>div:nth-of-type(1) h3 {
display: none;
}
footer > div.store-footer__inner > div > div.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 > a::after {
content: "";
display: block;
width: 100%;
height: 6rem;
background-image: var(--footer-logo);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-bottom: 1rem;
}
}
@media (min-width: 992px) {
footer.store-footer .container.grid {
/* grid-template-columns: repeat(3, minmax(0, 1fr)) !important; */ /* justify-items: center; */
}
}
@media (min-width: 992px) {
footer.store-footer .lg\:grid-cols-6 {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
justify-items: center;
}
}
.store-footer__inner .container.grid>div p {
margin: 10px auto;
}
footer.store-footer * {
text-align: center;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1024px) {
.store-footer__inner {
padding-bottom: 1rem;
}
}
.store-footer__inner .container.grid>div:nth-of-type(1) {
padding-left: 0;
grid-column: span 1 / span 2;
}
footer > div.store-footer__inner > div > div.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 > a {
justify-content: center;
}
footer > div.store-footer__inner > div > div:nth-child(3) {
justify-items: center;
}
.copyright-text p {
color: #fff;
}
.copyright-text a:hover {
color: #fff;
}
/*==========================================
Reviews
=========================================== */
.s-reviews-container {
margin-top: 3rem;
}
.s-reviews-header-wrapper h1 {
position: relative;
}
.s-reviews-header-wrapper {
/* justify-content:center; */
}
.s-reviews-testimonial {
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 3p 3px 3px #ddd;
}
.s-reviews-testimonial__avatar {
border-radius: 0;
}
.s-reviews-testimonial__icon svg {
fill: var(--primary-color);
}
div#contact-slot {
margin: 0 auto;
}
.footerImage {
max-width: 75px;
text-align: center;
margin: 0 auto;
}
.s-reviews-testimonial * {
color: #30373F;
}
/* ===============================global animation + js ========================== */
/* ============== Global Sections Animation ============== */
/* قبل الظهور */
section.before-animate {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
/* بعد الظهور */
section.animate-section {
opacity: 1;
transform: translateY(0);
}
/* ========== Banner Zoom Animation ========== */
/* قبل الظهور */
.s-block--fixed-banner.before-animate {
opacity: 0;
transform: scale(0.9);
transition: transform 1s ease, opacity 1s ease;
}
/* بعد الظهور */
.s-block--fixed-banner.animate-section {
opacity: 1;
transform: scale(1);
}
/*========move whishlist========== */
.s-product-card-content-footer {
display: flex;
align-items: center;
gap: 4px;
gap: 8px;
}
@media(max-width: 768px) {
.s-product-card-content-footer {
gap: 4px;
}
}
.s-product-card-vertical .s-product-card-wishlist-btn {
position: static;
color: var(--primary-color);
/* color: red; */
/* border: none; */
/* border-color: var(--primary-color) !important; */
}
@media(max-width: 768px) {
.s-product-card-vertical .s-product-card-wishlist-btn {
width: 2rem;
height: 2rem;
}
}
/* salla-button.s-product-card-wishlist-btn {
} */
/* زر المÙÂÂÂÂÂÂÂÂضلة */
salla-button.s-product-card-wishlist-btn {
background: rgba(230, 201, 207, 0.25);
backdrop-filter: blur(6px);
border: 1px solid rgba(230, 201, 207, 0.4);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-radius: 50%;
/* border: none; */
/* border-radius: 9px; */
}
/* عند المرور */
salla-button.s-product-card-wishlist-btn:hover {
transform: scale(1.12);
box-shadow: 0 8px 20px rgba(230, 201, 207, 0.6);
}
@keyframes heartPulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.35);
}
100% {
transform: scale(1);
}
}
salla-button.s-product-card-wishlist-btn.favorited {
animation: heartPulse 0.4s ease;
}
salla-button.s-product-card-wishlist-btn.favorited i {
color: #e6c9cf;
/* color: var(--primary-color); */
/* fill: var(--primary-color); */
color: red;
fill: red;
background-color: red;
}