.container .square-grid {

    display: flex !important;

    flex-wrap: wrap !important;

    justify-content: center !important;

    align-items: flex-start !important;

    align-content: flex-start !important;

    

    /* Disable old grid system */

    grid-template-columns: none !important;

    

    /* Spacing: 0.75rem vertical, 1.5rem horizontal */

    gap: 0.75rem 1.5rem !important; 

    

    width: 100%;

    box-sizing: border-box;

}



/* -------------------------------------------------------------------------- */

/* --- ITEM SIZING (RESPONSIVE) --- */

/* -------------------------------------------------------------------------- */



.container .square-grid .banner-square {

    /* --- MOBILE DEFAULT (Phones): Show 2 items per row. --- */

    /* Formula: (100% - 1 gap of 1.5rem) / 2 items */

    width: calc((100% - 1.5rem) / 2) !important;

    

    grid-column: auto !important;

    margin: 0 !important;

    

    display: block !important;

    max-width: none !important;

    flex: 0 0 auto !important;

}



/* --- DESKTOP OVERRIDE (Tablets & Computers) --- */

@media (min-width: 768px) {

    .container .square-grid .banner-square {

        /* Show 4 items per row. Formula: (100% - 3 gaps of 1.5rem) / 4 items */

        width: calc((100% - 4.5rem) / 4) !important;

    }

}



/* -------------------------------------------------------------------------- */

/* --- IMAGE CONTAINER FIXES --- */

/* -------------------------------------------------------------------------- */



.banner-square {

    overflow: visible !important; 

}



/* SCOPED SELECTOR: explicitly targets only the box-img inside .square-grid */

.container .square-grid .box-img {

    aspect-ratio: auto !important; 

    height: auto !important; 

    

    /* Border styles */

    border: 2px solid #333333 !important; 

    border-radius: 12px !important; 

    

    box-sizing: border-box !important;

    

    width: 100%;

    overflow: hidden;

}



.container .square-grid .box-img img {

    width: 100%;

    height: auto !important;

    object-fit: contain; 

    display: block !important;

}



/* Hover effects */

.zoomed-img:hover img {

    transform: scale(1.05);

}





/* -------------------------------------------------------------------------- */

/* --- CUSTOM DIVIDER/TITLE SECTION (FLICKER EFFECT) --- */

/* -------------------------------------------------------------------------- */



/* تعريف حركة الوميض (Flicker/Glitch) */

@keyframes flicker {

    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {

        text-shadow: 

            -0.5px -0.5px 1px rgba(255, 87, 34, 0.9), /* ظل خفيف برتقالي */

            0.5px 0.5px 1px rgba(255, 160, 0, 0.7); /* ظل برتقالي أفتح */

        opacity: 1;

    }

    20%, 24%, 55% {

        text-shadow: none;

        opacity: 0.8; /* جعل النص يبهت قليلاً */

    }

}



/* 2. تصميم الحاوية الرئيسية (Main Container Design) - تنظيف الأنماط */

.divider-container {

    /* إلغاء جميع الأنماط الإضافية والعودة إلى الأساس */

    max-width: initial !important; 

    margin: 0 auto !important; 

    padding: 1rem 0 !important; 

    border-radius: 0 !important;

    background: transparent !important; 

    box-shadow: none !important; 

    border: none !important; 

    overflow: visible;

}



/* 3. تصميم العناوين (Title and Subtitle Styling) - لسطح المكتب */

.divider-title h2 {

    /* جعل العنوان أكبر بكثير وجريئًا */

    color: #FF5722 !important; 

    font-size: 3rem !important; 

    font-weight: 900 !important; 

    margin-bottom: 0.5rem !important;

    

    /* تطبيق تأثير الوميض الكهربائي/الإعصار على النص */

    animation: flicker 4s infinite alternate;

}



.divider-title p {

    /* جعل الوصف أكبر وجريئًا أيضًا */

    color: #232323 !important; 

    font-size: 1.5rem !important; 

    font-weight: 700 !important; 

    margin-top: 0.25rem !important;

}



/* 4. تصميم أيقونة التقسيم (Divider Icon) - تكبير بسيط */

/* .flying-obj has been moved to the end section for consolidation */

.divider-container .divider-icon {

    /* تم تحديث الحجم بناءً على طلب المستخدم: 195px عرض، 55px ارتفاع */

    width: 195px !important;

    height: 55px !important;

    /* تم تقليل الهامش السفلي لجعله أقرب إلى العنوان */

    margin-bottom: 0 !important; 

}

.divider-container .divider-icon img {

    /* FIX: Updated max-height to match parent container (55px) for consistency */

    max-height: 55px !important; 

}



/* 5. تصميم العد التنازلي (Countdown Timer Styling) - لسطح المكتب */

.s-count-down-wrapper ul.s-count-down-list {

    margin: 1rem 0 !important;

    padding: 0 !important;

    background: transparent !important;

}

.s-count-down-item {

    background: transparent !important; 

    color: #232323 !important; 

    border-radius: 0 !important;

    padding: 0.5rem 0.25rem !important;

    min-width: 70px !important; 

    box-shadow: none !important;

}



.s-count-down-item-value {

    /* تكبير أرقام العد التنازلي وجعلها أكثر جرأة */

    font-size: 2.5rem !important; /* حجم سطح المكتب */

    font-weight: 900 !important;

    line-height: 1.2 !important;

}



.s-count-down-item-label {

    font-size: 0.9rem !important;

    opacity: 0.9 !important;

    margin-top: 0.2rem !important;

}



/* 6. تصميم زر الدعوة للعمل (Call to Action Button) - العودة إلى البساطة */

.divider-url {

    color: #232323 !important; 

    font-size: 1.2rem !important;

    font-weight: 700 !important;

    padding: 0.75rem 2.5rem !important;

    border-radius: 50px !important;

    transition: all 0.3s ease;

    margin-top: 1rem !important;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

}



/* تأثير التمرير (Hover Effect) على الزر */

.divider-url:hover,

.divider-url:focus,

.divider-url:active {

    text-decoration: none !important; 

    background: #FF5722 !important;

    color: #ffffff !important;

    transform: translateY(-2px); 

}



/* ========================================================================= */

/* 7. الاستجابة للهواتف المحمولة (Mobile Responsiveness) - الأجهزة ذات العرض ≤ 640px */

/* ========================================================================= */

@media (max-width: 640px) {

    

    /* تصغير حجم العناوين ليتناسب مع شاشة الهاتف */

    .divider-title h2 {

        font-size: 1.8rem !important; 

    }



    .divider-title p {

        font-size: 1rem !important; 

    }



    /* تصغير حجم الأيقونة وعرضها */

    .divider-container .divider-icon {

        width: 100px !important; 

        height: 40px !important; 

    }

    .divider-container .divider-icon img {

        max-height: 40px !important;

    }



    /* تصغير أرقام العد التنازلي */

    .s-count-down-item-value {

        font-size: 1.5rem !important; 

    }

    

    .s-count-down-item-label {

        font-size: 0.7rem !important;

    }



    /* تصغير حجم زر الدعوة للعمل (CTA) */

    .divider-url {

        font-size: 1rem !important;

        padding: 0.6rem 2rem !important;

    }

}





/* -------------------------------------------------------------------------- */

/* --- GENERAL TITLE & BUTTON STYLING (COLOR PULSE) --- */

/* -------------------------------------------------------------------------- */

.s-block__title, .s-block__title h2 {

    position: relative;

    text-align: center;

    font-weight: bold;

    font-size: 22px; 

    animation: color-pulse 2s infinite linear;

}



@keyframes color-pulse {

    0% {

        color: #232323; 

    }

    50% {

        color: #e07125; 

    }

    100% {

        color: #232323; 

    }

}



/* CONSOLIDATED: Offset for the element */

.flying-obj {

    position: relative;

}



a.btn-primary[style*="background-color:#e07125"] {

    position: relative;

    bottom: -100px; 

}



.angel-ad__img.lazy__bg {

    /* Set a specific width and height */

    width: 152.4px; 

    height: 58.8px; 

    background-size: cover;

}



/*

======================================================

 CRAZY ANGEL THEME - SLIDER & CONTAINER EFFECTS

======================================================

*/



/* ----------------------------------------------------

    1. SWIPER 3D SHADOW STYLING (THE NEON SHIMMER EFFECT)

    ---------------------------------------------------- */



.swiper-3d .swiper-slide-shadow,

.swiper-3d .swiper-slide-shadow-left, 

.swiper-3d .swiper-slide-shadow-right, 

.swiper-3d .swiper-slide-shadow-top, 

.swiper-3d .swiper-slide-shadow-bottom {

    /* Removes default shadow background */

    background: transparent !important;

    /* Uses the primary color in a transparent box-shadow to simulate a neon light source */

    box-shadow: inset 0 0 100px -10px var(--color-primary) !important;

    opacity: 0.2 !important;

    /* Makes the shadow subtly shimmer */

    animation: neon-shimmer 4s infinite alternate;

}



@keyframes neon-shimmer {

    0% { opacity: 0.15; }

    100% { opacity: 0.3; }

}





/* ----------------------------------------------------

    2. CONTAINER STYLING (VISUAL SEPARATION / INLAY EFFECT)

    ---------------------------------------------------- */

.container {

    /* Ensures the default padding/centering works */

    margin-left: auto;

    margin-right: auto;

    padding-left: 15px !important;

    padding-right: 15px !important;

    

    /* CRAZY EFFECT: Add a subtle visual separation using dashed lines */

    border-top: 1px dashed var(--color-secondary);

    border-bottom: 1px dashed var(--color-secondary);

    padding-top: 20px !important;

    padding-bottom: 20px !important;

    margin-top: 15px !important;

    margin-bottom: 15px !important;

    

    /* Make the content area feel slightly recessed */

    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.03);

}



/* ----------------------------------------------------

    3. CAROUSEL SLIDER WRAPPER (RTL & GENERAL)

    ---------------------------------------------------- */

.carousel-slider .swiper:where([dir=rtl],[dir=rtl] *), 

salla-slider[type]:not(.hydrated) .swiper>div>div:where([dir=rtl],[dir=rtl] *), 

salla-slider[type]:not(.hydrated)>div:where([dir=rtl],[dir=rtl] *)

{

    /* Give the whole slider box a distinct, glowing border */

    background-color: var(--color-card-light) !important;

    border: 3px solid var(--color-primary) !important;

    border-radius: 15px !important;

    padding: 20px !important;

    box-shadow: 0 0 25px rgba(247, 165, 65, 0.4); /* Strong overall glow */

    transition: all 0.3s ease-in-out;

}





/* ----------------------------------------------------

    4. CATEGORY SLIDER ITEMS (.Cat-Slider)

    ---------------------------------------------------- */

.Cat-Slider .swiper-slide, 

.Cat-Slider .s-category-item a, 

.Cat-Slider .s-category-item {

    /* CRAZY EFFECT: Make category items look like sleek, colorful pills */

    display: inline-flex !important; 

    justify-content: center;

    align-items: center;

    

    background-color: var(--color-primary) !important;

    border-radius: 50px !important; 

    color: var(--color-text-dark) !important;

    font-weight: 900;

    text-align: center;

    text-decoration: none !important;

    padding: 10px 25px !important;

    margin-right: 10px; 

    transition: all 0.2s ease-in-out;

    box-shadow: 0 5px 10px rgba(247, 165, 65, 0.5);

    transform: perspective(1px) translateZ(0); 

}



/* Hover effect: Subtle lift and color change */

.Cat-Slider .swiper-slide:hover, 

.Cat-Slider .s-category-item a:hover {

    background-color: var(--color-secondary) !important;

    color: var(--color-card-light) !important; 

    box-shadow: 0 8px 15px var(--color-secondary);

    transform: translateY(-4px) scale(1.02); 

}