/* Add custom CSS styles below */ 
/* */
.py-16 {
    padding-top: 0rem;
    padding-bottom: 2rem;
}

.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: #6B4E45;
    background-color: #006847;
        font-size: 15px;
    font-weight: 400;
    line-height: 26px;
    color: #DEC9B2;
    color: #FFD037;
    position: relative
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
    font-size: 15px;
    font-weight: 400;
    line-height: 26px;
    color: #006847;
    color: #036847;
    color: #006847;
    position: relative
}

.store-footer ul.flex.justify-center.items-stretch.rtl\:space-x-reverse.space-x-2 {
 display: flex;
 flex-wrap: wrap;
 gap: 10px 2px;
}


.index .flex.flex-wrap.gap-5.lg\:gap-14.justify-center .border-t.border-gray-300.py-4.h-28 {
 display: none;
}

.s-products-list-filters-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .625rem;
}

@media (max-width: 767px) {

.s-products-list-filters-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .625rem;
}

.product-index .py-4.flex.justify-between {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:15px
}

.product-index .py-4.flex.justify-between a{
  order : 2  
}

.product-index .border-t.border-gray-300.py-4.h-28 {
    display: none;
}

.product-index .flex.justify-between.bg-white.rounded-md.w-10\/12.m-auto.-translate-y-4.py-2.px-3.shadow-lg.h-9 {
    height: 100%;
    width: 95%;
}

.product-index span.text-gray-500.text-base.py-1.flex.items-center.gap-2 {
    font-size: 14px;
}

}


//
#app > div.app-inner.flex.flex-col.min-h-full > div > div > div > div.flex.min-h-screen > salla-products-list > div.s-products-list-wrapper.s-products-list-filters-results > custom-salla-product-card > .md\:w-96 {
  		width: 100% !important
  }


@media (min-width: 768px) {
    #app > div.app-inner.flex.flex-col.min-h-full > div > div > div > div.flex.min-h-screen > salla-products-list > div.s-products-list-wrapper.s-products-list-filters-results .md\:w-96 {
        width: 100% !important;
    }
    #app > div.app-inner.flex.flex-col.min-h-full > div > div > div > div.flex.min-h-screen > salla-products-list > div.s-products-list-wrapper.s-products-list-filters-results .md\:w-96 a > img {
    width: 100% !important;
    }
}

-- -- -- -- -- -- -- -- -- -- --
element.style {
    box-shadow: rgba(222 201 178 0.5) 0px 2px 16px;
}
-- -- -- -- -- -- -- -- -- -- --
.logo order-2 z-50 {

    height: 100%; /* اجعل الصورة تملأ ارتفاع الـ nav bar بالكامل */
    max-height: 90px; /* أو يمكنك تحديد ارتفاع معين حسب ارتفاع الـ nav bar */
    object-fit: contain; /* يضمن أن الصورة لن تُقص */
        border-radius: 50%; /* يجعل الصورة دائرية بالكامل */


}

.col-span-2 lg:col-span-2 flex lg:justify-start justify-center items-center max-h-[90px]{

    height: 100%; /* اجعل الصورة تملأ ارتفاع الـ nav bar بالكامل */
    max-height: 90px; /* أو يمكنك تحديد ارتفاع معين حسب ارتفاع الـ nav bar */
    object-fit: contain; /* يضمن أن الصورة لن تُقص */
        border-radius: 50%; /* يجعل الصورة دائرية بالكامل */

}

.logo order-2 z-50{

    height: 100%; /* اجعل الصورة تملأ ارتفاع الـ nav bar بالكامل */
    max-height: 90px; /* أو يمكنك تحديد ارتفاع معين حسب ارتفاع الـ nav bar */
    object-fit: contain; /* يضمن أن الصورة لن تُقص */
        border-radius: 50%; /* يجعل الصورة دائرية بالكامل */

}

.w-[7.8rem] text-3xl{

width: 65%;
    height: 100%; /* اجعل الصورة تملأ ارتفاع الـ nav bar بالكامل */
    max-height: 90px; /* أو يمكنك تحديد ارتفاع معين حسب ارتفاع الـ nav bar */
    object-fit: contain; /* يضمن أن الصورة لن تُقص */
        border-radius: 50%; /* يجعل الصورة دائرية بالكامل */

}

.text-3xl{
width: 88px;
height: 88px;
}

#app > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--fixed-banner.wide-placeholder
{
 margin-top: 0 !important;
 background-color: #006847;
 
}
/*
.container{
background-color: #006847;
}
*/

-- -- -- -- -- -- -- -- -- -- -- -- 
/* هذا لتعديل عنوان اللي في الرئيسيه > المدونة > يوم نسر العالمي - لان المرشد السياحي هو النسر الذي يحلق تاريخ وطنه */
/*
#app > div.app-inner.flex.flex-col.min-h-full > header nav > div > div > div.col-span-2.lg\:col-span-2.flex.lg\:justify-start.justify-center.items-center.max-h-\[90px\] > a > div > img {
    width: 60% !important;
    height: auto !important;
}


.order-2{
  width: 400px;
  height: 400px;
}

#app > div.app-inner.flex.flex-col.min-h-full > header > nav > div > div > div > div.col-span-2.lg\:col-span-3.flex.lg\:justify-start.justify-center.items-center.max-h-\[90px\] > a > div > img{
    max-width: 60% !important;
    width: 60% !important;
}
*/
-- -- -- -- -- -- -- -- -- -- -- --
هذا لعناوين المقالات

#app > div.app-inner.flex.flex-col.min-h-full > div > div > div > h1 {
 width: unset !important;
}
.main-content.blog-category h1 { width: unset !important; }