/*this is the code for product card add to cart button */
.SukariDates salla-add-product-button button,
.SukariDates salla-add-product-button::part(button),
.SukariDates salla-add-product-button .btn {
  background-color: #778053 !important;
}
/*this is the code for product card add to cart button */

/*this is the code for product card add to cart button on hover */

.SukariDates salla-add-product-button:hover button,
.SukariDates salla-add-product-button:hover::part(button),
.SukariDates salla-add-product-button:hover .btn {
  color: #ffffff !important;
}
/*this is the code for product card add to cart button on hover */

/*this is the code for top strip on which there is different pages */

#app > div.app-inner.flex.flex-col.min-h-full.bg-storeBG > header > div.top-navbar {
  background-color: #778053 !important;
}
/*this is the code for top strip on which there is different pages */

/* Change add-to-cart button color for ALL product cards inside this slider in 3 product and one big image slider */
#slider-with-bg-12 salla-add-product-button::part(button),
#slider-with-bg-12 salla-add-product-button button,
#slider-with-bg-12 salla-add-product-button .btn {
  background-color: #778053 !important;
  color: #ffffff !important;
}
/* Change add-to-cart button color for ALL product cards inside this slider in 3 product and one big image slider */

/*this is the code for the 3 products and one picture named mumayaz on main page*/
.s-block--special-products-slider img {
  border-radius: 16px !important;
}
/*description down the logo in footer */
#app > div.app-inner.flex.flex-col.min-h-full.bg-storeBG > footer > div.store-footer__inner > div > div > div:nth-child(1) > h2 {
    font-size: 0.8rem;      /* typical h4 size */
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}
/*description down the logo in footer */

/*the code for three pictures i created by HTML after first product section*/

.album{
display:grid;
grid-template-columns:2fr 1fr;
gap:16px;
width:100%;
max-width:1200px;
margin:auto;
align-items:stretch;
direction:rtl;
}

.album a{
position:relative;
display:block;
overflow:hidden;
border-radius:24px;
}

.album .big{
height:500px;
}

.album .right{
display:grid;
grid-template-rows:1fr 1fr;
gap:16px;
}

.album .small{
height:242px;
}

.album img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .5s ease;
}

.album a:hover img{
transform:scale(1.05);
}

.album a::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to bottom,rgba(0,0,0,.18),rgba(0,0,0,.08));
z-index:1;
pointer-events:none;
}

.album span{
position:absolute;
top:18px;
right:18px;
color:#fff;
font-size:24px;
font-weight:700;
z-index:2;
text-shadow:0 2px 10px rgba(0,0,0,.35);
}

@media(max-width:768px){

.album{
grid-template-columns:1fr;
gap:12px;
padding:0 10px;
}

.album .big{
height:260px;
border-radius:18px;
}

.album .right{
grid-template-columns:1fr 1fr;
grid-template-rows:none;
gap:12px;
}

.album .small{
height:120px;
border-radius:18px;
}

.album span{
font-size:14px;
top:10px;
right:12px;
}

}

/*the code for three pictures i created by HTML after first product section*/

/* marquee container */

.ShareetIlaan{
overflow:hidden;
white-space:nowrap;
position:relative;
}

.ShareetIlaan > *{
display:inline-block;
white-space:nowrap;
animation:marqueeMove 80s linear infinite;
will-change:transform;
}

/* smooth movement */
@keyframes marqueeMove{

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

100%{
transform:translateX(-120%);
}

}



/* marquee container */

/* Installment tabby tamara madfu animation */

.installment a{
    position:relative;
    overflow:hidden;
    border-radius:16px;
}

.installment a::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:50%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-25deg);
    animation:shine 4s infinite;
    z-index:2;
}

@keyframes shine{
    100%{
        left:150%;
    }
}

/* Installment tabby tamara madfu animation */

/* curved top shape footer */
footer{
    position: relative;
    background: #7a845a; /* keep your color */
}

/* curved top shape */
footer::before{
    content: "";
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    height: 80px;
    background: #7a845a;

    border-radius: 50% 50% 0 0;
}
/* curved top shape footer */

header .sub-menu,
header .dropdown-menu,
header .sub-menu *,
header .dropdown-menu * {
    color: #000000 !important;
}
/* Sub Menu Categories Styling */

header .sub-menu,
header .dropdown-menu {
    background: rgba(255, 255, 255, 0.65) !important; /* more transparent */
    border-radius: 16px !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 10px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.10);
    border: 1px solid rgba(255,255,255,0.25);
}

/* Bold + visible text */
header .sub-menu *,
header .dropdown-menu *,
header .sub-menu a,
header .dropdown-menu a {
    color: #778053 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #778053 !important;
    text-shadow: 0 0 1px rgba(0,0,0,0.15);
}

/* Hover effect */
header .sub-menu a:hover,
header .dropdown-menu a:hover {
    background: rgba(255,255,255,0.35) !important;
    border-radius: 10px;
}
/* Sub Menu Categories Styling */

/* Hide سياسة الأستخدام */
.top-navbar a[href*="سياسة-الأستخدام"] {
    display: none !important;
}

/* Keep items close together */
.top-navbar ul,
.top-navbar .header-buttons {
    display: flex;
    align-items: center;
    gap: 8px !important;
}

/* Add white vertical line before language button */
.top-navbar .header-buttons::before {
    content: "";
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.7);
    display: block;
    margin-inline-end: 8px;
}

/* Text style */
.top-navbar .topnav-link-item,
.top-navbar button {
    font-weight: 600;
}

/* code for B2B Page  code for B2B Page */

.shmas-b2b-page{
background:#f7f5f1;
color:#222;
font-family:'Tajawal', sans-serif;
line-height:1.7;
}

.shmas-b2b-page .shmas-hero{
height:90vh;
background:
linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55)),
url('https://images.immediate.co.uk/production/volatile/sites/30/2024/02/Bowl-of-dates-6aae23f.jpg?quality=90&resize=440,400') center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:20px;
color:#fff;
border-radius:30px;
overflow:hidden;
}

.shmas-b2b-page .hero-content{
max-width:900px;
margin:auto;
}

.shmas-b2b-page .hero-title{
font-size:60px;
margin-bottom:20px;
letter-spacing:2px;
color:#fff;
}

.shmas-b2b-page .hero-text{
font-size:22px;
margin-bottom:30px;
color:#fff;
}

.shmas-b2b-page .hero-btn{
display:inline-block;
padding:15px 35px;
background:#b8860b;
color:#fff !important;
text-decoration:none;
border-radius:30px;
font-weight:bold;
}

.shmas-b2b-page .shmas-section{
padding:80px 8%;

}

.shmas-b2b-page .white-bg{
background:#778053;
border-radius:30px;
}

.shmas-b2b-page .section-title{
font-size:38px;
margin-bottom:20px;
color:#black;
}

.shmas-b2b-page .section-sub{
max-width:800px;
margin-bottom:50px;
color:#555;
  font-size: 20px;
  font-weight: bold;
}

.shmas-b2b-page .grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
border-radius:30px;
}

.shmas-b2b-page .shmas-card,
.shmas-b2b-page .cert-box{
background:#fff;
padding:25px;
border-radius:30px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:.3s;
overflow:hidden;
}

.shmas-b2b-page .shmas-card:hover{
transform:translateY(-8px);
}

.shmas-b2b-page .shmas-card img,
.shmas-b2b-page .cert-box img{
width:100%;
height:220px;
object-fit:cover;
border-radius:30px;
margin-bottom:20px;
}

.shmas-b2b-page .shmas-card h3,
.shmas-b2b-page .cert-box h3{
margin-bottom:12px;
color:#8b5e00;
}

.shmas-b2b-page .process{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:40px;
}

.shmas-b2b-page .step{
background:#fff;
padding:25px;
border-left:5px solid #b8860b;
border-radius:30px;
}

.shmas-b2b-page .shmas-contact{
background:#778053;
color:#fff;
text-align:center;
padding:70px 20px;
border-radius:30px;
}

.shmas-b2b-page .contact-title{
font-size:40px;
margin-bottom:20px;
}

.shmas-b2b-page .contact-text{
max-width:700px;
margin:auto;
margin-bottom:25px;
color:#ddd;
}

.shmas-b2b-page .shmas-footer{
background:#778053;
color:#aaa;
padding:25px;
text-align:center;
font-size:14px;
border-radius:30px;
}

@media(max-width:768px){

.shmas-b2b-page .hero-title{
font-size:40px;
}

.shmas-b2b-page .hero-text{
font-size:17px;
}

.shmas-b2b-page .section-title{
font-size:30px;
}

}
/*-------------------------------------*/
.section-sub,
.hero-text,
.contact-text,
.shmas-card p,
.step p,
.section-sub div,
.hero-text div,
.contact-text div {
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.9;
    color: inherit;
}

html[lang="ar"] .section-sub,
html[lang="ar"] .hero-text,
html[lang="ar"] .contact-text {
    direction: rtl;
    text-align: justify;
}
/* code for B2B Page  code for B2B Page */




/* =====================================
   SHMAS FAQ GLASS SECTION COMPLETE CSS
   ===================================== */


/* FAQ Cards */
.s-block--faq .single-faq {
    background: rgba(255,255,255,0.18) !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;

    border: 1px solid rgba(255,255,255,0.25) !important;

    box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;

    border-radius: 30px !important;

    overflow: hidden !important;
}


/* Override Salla default card background */
.s-block--faq .single-faq.bg-store-bg-secondary {
    background: rgba(255,255,255,0.18) !important;
}


/* FAQ answer area */
.s-block--faq .faq-content {
    background: transparent !important;
}


/* Text */
.s-block--faq .single-faq p,
.s-block--faq .single-faq button,
.s-block--faq .single-faq .faq-content p {
    color:#111 !important;
}


/* Section background image */
.s-block--faq {
    background:
    linear-gradient(
        rgba(255,255,255,0.25),
        rgba(255,255,255,0.25)
    ),
    url('https://i.ibb.co/tpjshWxV/Gemini-Generated-Image-drfi4idrfi4idrfi4idrfi.png')
    center/cover no-repeat !important;

    padding:80px 0 !important;
}


/* Force every FAQ item in the grid */
.s-block--faq .grid > div.single-faq {
    background: rgba(255,255,255,0.18) !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;

    border:1px solid rgba(255,255,255,0.25) !important;

    border-radius:30px !important;

    box-shadow:0 8px 32px rgba(0,0,0,0.10) !important;
}

/* =====================================
   SHMAS FAQ GLASS SECTION COMPLETE CSS
   ===================================== */



/* Fix blog card background and text visibility */
.post-entry,
.list-block.post-entry {
    background-color: #ffffff !important;
}

/* Fix blog title color */
.post-entry__title,
.post-entry__title a {
    color: #2b2b2b !important;
}

/* Fix blog description color */
.post-entry p {
    color: #666666 !important;
}

/* Fix date and author text */
.post-entry .text-store-text-secondary {
    color: #777777 !important;
}

/* Fix image cropping */
.post-entry__image {
    height: 280px !important;
}

.post-entry__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background-color: #f7f7f7 !important;
}

/* Fix tags visibility */
.post-entry .border-t a {
    color: #555555 !important;
    background: #f5f5f5 !important;
}

.post-entry .border-t a:hover {
    color: #ffffff !important;
    background: #b58b45 !important;
}

/* Fix blog card background and text visibility */