/* ========================================
   GLOBAL PAGE BACKGROUND
======================================== */

html,
body,
.app-inner,
main {
    background-color: #ffffff !important;
}


/* ========================================
   FIXED BANNERS
======================================== */

section.s-block.s-block--fixed-banner.wide-placeholder > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.banner--fixed img {
    display: block;
    width: 100%;
    border-radius: 0 !important;
  background-color: transparent !important; 
}


/* First banner outside the custom group */
main#main-content >
section.s-block.s-block--fixed-banner.wide-placeholder:first-of-type {
    margin-top: 0 !important;
}


/* Second banner before JavaScript groups the sections */
main#main-content >
section.s-block.s-block--fixed-banner.wide-placeholder:nth-of-type(2) {
    margin-top: 140px !important;
}


/* Tablet and mobile */
@media (max-width: 768px) {
    main#main-content >
    section.s-block.s-block--fixed-banner.wide-placeholder:nth-of-type(2) {
        margin-top: 20px !important;
    }
}


/* ========================================
   TOP NAVBAR
======================================== */

.top-navbar,
.top-navbar > .container.flex.justify-between {
    background-color: #f27620 !important;
}


/* Search text */
.s-search-input {
    color: #ffffff !important;
}


/* Search placeholder */
.s-search-input::placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
    opacity: 1 !important;
}

.s-search-input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
}


/* Search icon */
.s-search-icon-wrap,
.s-search-icon-wrap svg,
.s-search-icon-wrap i {
    color: #ffffff !important;
    fill: #ffffff !important;
}


/* Salla main navigation hover */
custom-main-menu #mobile-menu > ul > li > a {
    display: inline-flex;
    transition: transform 0.3s ease;
}

custom-main-menu #mobile-menu > ul > li > a:hover {
    transform: translateY(-2px);
}



i.header-btn__icon.icon.sicon-shopping-bag,
button.s-user-menu-login-btn {
    background-color: #f27620 !important;
    color: white !important;
}
button.s-user-menu-login-btn svg{
    fill: white !important;
}



/* product card */
/* Small shadow for product cards */
.s-product-card-entry {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    border-radius: 10px !important;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* small hover effect */
.s-product-card-entry:hover {
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.11) !important;
    transform: translateY(-3px);
}


/* Product card add-to-cart button */
.s-product-card-content-footer .s-button-element,
.s-product-card-content-footer .s-button-primary-outline {
    background-color: #f27620 !important;
    border-color: #f27620 !important;
    color: #ffffff !important;
}

/* Button text and icon */
.s-product-card-content-footer .s-button-element span,
.s-product-card-content-footer .s-button-element svg,
.s-product-card-content-footer .s-button-element i {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Hover */
.s-product-card-content-footer .s-button-element:hover {
    background-color: #d96314 !important;
    border-color: #d96314 !important;
    color: #ffffff !important;
}



/* ========================================
   About banner + Products + Certificate
======================================== */

.custom-projects-background {
    --content-width: 1200px;

    position: relative !important;
    isolation: isolate !important;

    width: 100% !important;
    overflow: hidden !important;

    margin-top: 80px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;

    padding: 45px 0 0 !important;

    background: transparent !important;
}


/* Decorative background starts lower */
.custom-projects-background::before {
    content: "";
    position: absolute;
    z-index: -1;

    top: 300px;
    right: 0;
    bottom: 0;
    left: 0;

    background-image: url("https://res.cloudinary.com/dieoptjji/image/upload/v1784191350/bg_q4kecv.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    pointer-events: none;
}


/* Keep all grouped sections transparent */
.custom-projects-background > section {
    position: relative !important;
    z-index: 1 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}


/* Remove Salla inner backgrounds */
.custom-projects-background > section > .container,
.custom-projects-background .banner--fixed,
.custom-projects-background .s-block__container,
.custom-projects-background .s-block__title {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}


/* Remove pseudo backgrounds */
.custom-projects-background > section::before,
.custom-projects-background > section::after,
.custom-projects-background .banner--fixed::before,
.custom-projects-background .banner--fixed::after {
    background: transparent !important;
    background-image: none !important;
}


/* ========================================
   ABOUT BANNER
   Keep original full width
======================================== */

.custom-projects-background .custom-about-section {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 0 45px !important;
}


.custom-projects-background
.custom-about-section
> .container {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


.custom-projects-background
.custom-about-section
.banner--fixed {
    width: 100% !important;
    max-width: 100% !important;
}


.custom-projects-background
.custom-about-section
.banner--fixed img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;

    border-radius: 0 !important;
    background: transparent !important;
}


/* ========================================
   PRODUCTS SECTION
======================================== */

.custom-projects-background .custom-products-section {
    width: calc(100% - 96px) !important;
    max-width: var(--content-width) !important;

    margin-top: 160px !important;
    margin-right: auto !important;
    margin-bottom: 70px !important;
    margin-left: auto !important;

    padding: 0 !important;

    box-sizing: border-box !important;
    background: transparent !important;
}


/* Products inner container */
.custom-projects-background
.custom-products-section
> .container {
    width: 100% !important;
    max-width: 100% !important;

    margin-right: auto !important;
    margin-left: auto !important;

    padding-right: 0 !important;
    padding-left: 0 !important;

    box-sizing: border-box !important;
    background: transparent !important;
}


/* Slider wrappers */
.custom-projects-background
.custom-products-section
.s-slider-block__title,

.custom-projects-background
.custom-products-section
.s-slider-container,

.custom-projects-background
.custom-products-section
.swiper,

.custom-projects-background
.custom-products-section
.swiper-container {
    width: 100% !important;
    max-width: 100% !important;

    margin-right: auto !important;
    margin-left: auto !important;

    background: transparent !important;
}


/* Keep product cards white */
.custom-projects-background .s-product-card-entry,
.custom-projects-background .s-product-card-content,
.custom-projects-background .product-entry,
.custom-projects-background .product-card {
    background-color: #ffffff !important;
}


/* ========================================
   CERTIFICATE BANNER
   Full width, no bottom gap
======================================== */

.custom-projects-background .custom-certificate-section {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}


.custom-projects-background
.custom-certificate-section
> .container {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}


.custom-projects-background
.custom-certificate-section
.banner--fixed {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


.custom-projects-background
.custom-certificate-section
.banner--fixed img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;

    border-radius: 0 !important;
    background: transparent !important;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1024px) {
    .custom-projects-background {
        margin-top: 50px !important;
        padding-top: 35px !important;
    }

    .custom-projects-background::before {
        top: 230px;
        background-position: center center;
        background-size: cover;
    }

    .custom-projects-background .custom-products-section {
        width: calc(100% - 56px) !important;

        margin-top: 90px !important;
        margin-bottom: 55px !important;
    }
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {
    .custom-projects-background {
        margin-top: 25px !important;
        padding-top: 20px !important;
        padding-bottom: 0 !important;
    }

    .custom-projects-background::before {
        top: 145px;

        background-position: center center;
        background-size: cover;
    }

    .custom-projects-background .custom-about-section {
        padding-bottom: 25px !important;
    }

    .custom-projects-background .custom-products-section {
        width: calc(100% - 28px) !important;

        margin-top: 50px !important;
        margin-bottom: 40px !important;
    }

    .custom-projects-background .custom-certificate-section {
        padding-bottom: 0 !important;
    }
}





/* ========================================
   الاقسام
======================================== */
a.banner-entry.square-photos {
    background: transparent !important;
  
}
@media (max-width: 450px){
  section.s-block.s-block--banners.container div{
  grid-auto-flow: column !important;
}
  a.banner-entry.square-photos {
   height: 80px !important;
  
}
}



/* ========================================
   FOOTER
======================================== */

.store-footer,
.store-footer > div,
.store-footer .store-footer__inner,
.store-footer .container {
    background-color: #f27620 !important;
    color: #ffffff !important;
}

.store-footer,
.store-footer h2,
.store-footer h3,
.store-footer p,
.store-footer a,
.store-footer span,
.store-footer li,
span.text-sm.copyright-text p {
    color: #ffffff !important;
}


/* Footer logo */
.custom-footer-logo {
    display: block;
    width: 100px;
    max-width: 100%;
    height: auto;

    padding: 15px 25px;
    margin: 0 0 10px auto;

    background-color: #ffffff !important;
    border-radius: 8px;
    object-fit: contain;
    box-sizing: content-box;
}


/* Footer logo on mobile */
@media (max-width: 767px) {
    .custom-footer-logo {
        width: 80px;
        margin-right: auto;
        margin-left: auto;
    }
}