/* ==========================================================================
   1. Banner Styles
   ========================================================================== */
section:nth-of-type(2).s-block.s-block--fixed-banner.wide-placeholder .container {
    padding: 0;
    margin-top: -2.7vw;
    max-width: 100%;
}

section:nth-of-type(2).s-block.s-block--fixed-banner.wide-placeholder .container .banner--fixed img {
    border-radius: 0rem 0rem 5rem 5rem !important;
}

@media (max-width: 991px) {
    section:nth-of-type(2).s-block.s-block--fixed-banner.wide-placeholder .container {
        margin-top: -8vw !important;
    }
    section:nth-of-type(2).s-block.s-block--fixed-banner.wide-placeholder .container .banner--fixed img {
        border-radius: 0rem 0rem 1.6rem 1.6rem !important;
    }
    .w-24 {
        width: 4rem;
    }
}

div.kayan-banners.py-10.overflow-hidden {
    margin-top: -6.5rem;
}

div.flex.lg:flex-nowrap.flex-wrap.gap-8.w-full.h-full.items-center.justify-center {
    flex-wrap: nowrap !important;
}

div.kayan-features.px-10.py-10.border-black.overflow-hidden {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
    background: #F5EAD4 !important; /* الخلفية باللون البيج المطلوب */
    border-radius: 0 !important;
}

div.kayan-features.px-10.py-10.border-black.overflow-hidden * {
    color: var(--main-text-color) !important; /* يعتمد على لون نص ثيم سلة */
}

.banner--fixed img {
    --tw-bg-opacity: 0;
}

/* ==========================================================================
   2. Global & Body Styles (توحيد الخلفية العامة للموقع بالكامل)
   ========================================================================== */
#app::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    opacity: .25;
    z-index: -1;
    background-position: bottom center !important;
    background-repeat: repeat !important;
    background-size: 10vw !important;
    background-image: linear-gradient(92.83deg, #F5EAD4 0, #F5EAD4 100%) !important; /* الخلفية باللون البيج المطلوب */
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
}

body {
    font-weight: 600 !important;
    background-color: #F5EAD4 !important; /* الخلفية باللون البيج المطلوب */
    color: var(--main-text-color); /* يعتمد على لون ثيم سلة */
}

/* ==========================================================================
   3. Products Slider Cards
   ========================================================================== */
.s-products-slider-card {
    padding: 60px 25px 25px 25px;
    border-radius: 3rem !important;
    perspective: 1000px;
    border: 3px solid rgb(255, 255, 255);
    transform-style: preserve-3d;
    background: #ffffff !important; 
    width: 100%;
    box-shadow: rgba(142, 142, 142, 0.15) 0px 20px 30px -10px; 
    transition: all 0.5s ease-in-out;
}

.s-products-slider-card.swiper-slide {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.s-products-slider-card:hover {
    transform: rotate3d(0.5, 1, 0, 30deg);
}

.s-products-slider-card h4 {
    display: inline-block;
    color: var(--main-text-color) !important; /* يعتمد على لون ثيم سلة */
    font-size: 25px;
    font-weight: 900;
    transition: all 0.5s ease-in-out;
    transform: translate3d(0px, 0px, 50px);
}

/* ==========================================================================
   4. Kayan Cards
   ========================================================================== */
.kayan-card {
    padding: 5px;
    border-radius: 3rem !important;
    perspective: 1000px;
    border: 3px solid rgb(255, 255, 255);
    transform-style: preserve-3d;
    background: #ffffff !important; 
    width: 100%;
    box-shadow: rgba(142, 142, 142, 0.15) 0px 20px 30px -10px;
    transition: all 0.5s ease-in-out;
}

.kayan-card:hover {
    transform: rotate3d(0.5, 1, 0, 30deg);
}

.kayan-card img {
    border-radius: 3rem !important;
}

.kayan-card h4 {
    display: inline-block;
    color: var(--main-text-color) !important; /* يعتمد على لون ثيم سلة */
    font-size: 20px;
    font-weight: 900;
    transition: all 0.5s ease-in-out;
    transform: translate3d(0px, 0px, 50px);
}

.kayan-card .px-6 {
    padding-left: 2px !important;
    padding-right: 2px !important;
    flex-direction: column;
    display: flex;
}

.kayan-card .px-6 h4 {
    font-size: 14px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    overflow: hidden; 
}

@media screen and (max-width: 767px) {
    .kayan-card .px-6 h4 {
        font-size: 14px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        overflow: hidden;
    }
}

.content-box .card-title:hover {
    transform: translate3d(0px, 0px, 60px);
}

/* الأسعار والأزرار تتبع الألوان العادية لثيم سلة */
.s-products-slider-card .s-product-card-price,
.kayan-card .s-product-card-price {
    color: var(--primary-color) !important; /* يتبع اللون الأساسي المحدد في ثيم سلة */
}

.s-button-element:not(:disabled):not([loading]) {
    background: #ffffff !important; 
    border: 2px solid var(--primary-color) !important; /* إطار يتبع لون ثيم سلة */
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-color) !important; /* نص يتبع لون ثيم سلة */
    transition: all 0.5s ease-in-out;
    transform: translate3d(0px, 0px, 30px);
}

.s-button-element:not(:disabled):not([loading]) * {
    color: var(--primary-color) !important;
}

.kayan-card .s-button-element:not(:disabled):not([loading]) {
    max-width: 85% !important;
    margin: 0 7.5% 10px auto !important;
}

.px-10 {
    padding: 10px !important;
}

.flex.items-center.justify-center.flex-col.gap-2.aos-init.aos-animate i {
    padding: 22px !important;
}

  /* ==========================================================================
   5. Header & Navigation
   ========================================================================== */
.kayan-header {
    background: #DFCE9F !important; /* تم تجميع اللون ليكون أغمق بدرجة إضافية */
}

.navbar {
    background: #DFCE9F !important; /* تم تعديل الـ navbar لنفس الدرجة الأغمق */
    border-radius: 0 0 3rem 3rem !important;
}

[class*=" sicon-"], [class^="sicon-"] {
    background: var(--primary-color) !important; /* أيقونات تتبع ثيم سلة العادي */
    padding: 5px;
    border-radius: 2rem !important;
}
/* ==========================================================================
   6. WhatsApp Protection (حماية اللون الأخضر للواتساب)
   ========================================================================== */
[class*="sicon-whatsapp"], [class^="sicon-whatsapp"], .sicon-whatsapp {
    background: #25D366 !important; 
    color: #ffffff !important;
}

/* ==========================================================================
   7. Footer Styles
   ========================================================================== */
.kayan-footer {
    background: #F5EAD4 !important; /* الخلفية باللون البيج المطلوب */
    border-radius: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
}

.kayan-footer::before {
    display: none !important;
}

.kayan-footer li *, 
.kayan-footer h5 {
    color: var(--main-text-color) !important; /* نصوص الفوتر تتبع لون ثيم سلة العادي */
}

.kayan-footer h5 {
    min-width: 90% !important;
    max-width: 90% !important;
}