:root {
    --jo-footer-bg: #def0ea; /* الخلفية الفاتحة */
    --jo-primary: #1ABC9C; /* الأخضر الأساسي */
    --jo-primary-dark: #0F766E; /* نص غامق */
    --jo-text: #0B5345; /* نص رئيسي */
    --jo-divider: #BFD7E2; /* الخط الفاصل */
}


.logo {
}

    .logo img {
        max-height: 100px;
        padding: 5px;
        border: 5px solid #58b79c;
        border-radius: 40px 0;
    }

.navbar-back {
    background: #5cb39833;
    border-bottom: 5px solid #58b79c;
    min-height: 300px;
    background: linear-gradient(120deg, #1e1e1e12, #def0ea, #1abc9c);
    background-size: 200% 200%;
    animation: bgMove 14s ease infinite;
    color: #fff;
    overflow: hidden;
}

@keyframes bgMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/*Menu Css*/
/* =========================================
   MAIN MENU WRAPPER
========================================= */
/*.category-menu-wrapper {
    position: relative;
    padding: 15px 0;
}*/
.category-menu-wrapper {
    position: sticky;
    top: 0;
    z-index: 1100;
    padding: 15px 0;
}

/* =========================================
   MAIN CATEGORIES
========================================= */
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    border: none;
}

.main-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Main category link */
.category-link {
    background: #e7f8f3;
    color: #006e5b !important;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 15px;
    border: 2px solid #b8eadd;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: .25s;
    white-space: nowrap;
}

    .category-link:hover {
        background: #c9f4e7;
        border-color: #8edac8;
        transform: translateY(-3px);
    }

    .category-link.active-category {
        background: #bfeee3 !important;
        border-color: #63d9be !important;
        transform: translateY(-2px);
    }

/* Arrow button */
.toggle-subcats-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    color: #fff;
    background: #1abc9c;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .25s;
    box-shadow: 0 3px 6px rgba(0,0,0,.18);
}

    .toggle-subcats-btn:hover {
        transform: translateY(-3px);
        background: #159b7f;
    }

/* =========================================
   SUBCATEGORY BAR
========================================= */
.subcategories-bar {
    /*    background: linear-gradient(to bottom, #1b8dec42, #e7f8f3);
*/ border-radius: 20px 0;
    padding: 12px 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    /*    box-shadow: 0 4px 15px rgba(0,0,0,0.10);
*/ /*    border: 2px solid #e8e8e8;
*/
    margin-top: 14px;
    animation: slideDown .25s ease-out;
}

/* Animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   SUBCATEGORY PILL
========================================= */
.subcategory-pill {
    background: linear-gradient(135deg, #3fa9f5, #0e82e8);
    padding: 8px 20px;
    border-radius: 999px;
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: .25s;
    box-shadow: 0 3px 8px rgba(0,0,0,.20);
    white-space: nowrap;
}

    .subcategory-pill:hover {
        transform: translateY(-3px);
        background: linear-gradient(135deg, #136fd2, #094996);
    }

/* Hide source list */
.subcategories-source {
    display: none !important;
}

.subcategory-pill {
    animation: pillPop .35s ease forwards;
    opacity: 0;
    transform: translateY(8px) scale(0.95);
}

@keyframes pillPop {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.95);
    }

    60% {
        opacity: 1;
        transform: translateY(-2px) scale(1.03);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.subcategory-pill:nth-child(1) {
    animation-delay: .05s;
}

.subcategory-pill:nth-child(2) {
    animation-delay: .10s;
}

.subcategory-pill:nth-child(3) {
    animation-delay: .15s;
}

.subcategory-pill:nth-child(4) {
    animation-delay: .20s;
}

.subcategory-pill:nth-child(5) {
    animation-delay: .25s;
}

.subcategory-pill:nth-child(6) {
    animation-delay: .30s;
}

.subcategory-pill:nth-child(7) {
    animation-delay: .35s;
}

.subcategory-pill:nth-child(8) {
    animation-delay: .40s;
}

.subcategory-pill:nth-child(9) {
    animation-delay: .45s;
}

.subcategory-pill:nth-child(10) {
    animation-delay: .50s;
}

.subcategory-pill:nth-child(11) {
    animation-delay: .55s;
}

.subcategory-pill:nth-child(12) {
    animation-delay: .60s;
}

.subcategory-pill:nth-child(13) {
    animation-delay: .65s;
}

.subcategory-pill:nth-child(14) {
    animation-delay: .70s;
}

.subcategory-pill:nth-child(15) {
    animation-delay: .75s;
}

.subcategory-pill:nth-child(16) {
    animation-delay: .80s;
}

.subcategory-pill:nth-child(17) {
    animation-delay: .85s;
}

.subcategory-pill:nth-child(18) {
    animation-delay: .90s;
}

.subcategory-pill:nth-child(19) {
    animation-delay: .95s;
}


.category-tabs-container {
    position: relative; /* VERY IMPORTANT */
}

.menu-indicator {
    position: absolute;
    height: 4px;
    background: linear-gradient(90deg, #00cba9, #009e80);
    bottom: -6px;
    border-radius: 4px;
    transition: .35s cubic-bezier(.25,.8,.25,1);
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
/* ============ 1) Rotate Arrow ============ */
.toggle-subcats-btn i {
    transition: transform .35s ease;
}

.toggle-subcats-btn.rotated i {
    transform: rotate(180deg);
}

/* ============ 2) Active Glow ============ */
.category-link.active-category {
    background: #bff5e9 !important;
    border-color: #5bd8ba !important;
    box-shadow: 0 0 12px rgba(0, 180, 140, 0.55);
    transform: translateY(-3px);
}

/* ============ 3) Mobile Slider Mode ============ */
@media (max-width: 768px) {
    .nav-tabs {
        overflow-x: auto;
        white-space: nowrap;
        scroll-behavior: smooth;
        padding-bottom: 8px;
    }

    .nav-item {
        display: inline-flex !important;
        margin-right: 10px;
        white-space: nowrap;
    }

    .category-link,
    .toggle-subcats-btn {
        flex-shrink: 0;
    }

    /* Hide indicator on mobile */
    .menu-indicator {
        display: none !important;
    }
}

/*End Menu Css*/


/* === Breadcrumb UI Pro (Amazon / OLX style) === */
/* === Breadcrumb UI Pro (Amazon / OLX style) === */

.custom-breadcrumb {
    direction: rtl;
    font-size: 15px;
    font-weight: 600;
    background: linear-gradient(120deg, #1e1e1e12, #def0ea, #1abc9c);
    background-size: 200% 200%;
    animation: bgMove 14s ease infinite
}

    .custom-breadcrumb ol {
        display: flex;
        align-items: center;
        flex-wrap: nowrap; /* Ensure items don't wrap */
        padding: 10px 15px;
        /*        background: #f7f9fb;
*/ border-radius: 8px;
        border: 1px solid #e4e7eb;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        margin: 0;
    }

.crumb-item {
    display: flex;
    align-items: center;
    color: #0d6efd;
    margin-right: 10px; /* Add margin between items */
}

    .crumb-item span {
        font-size: 16px; /* Adjust font size for better visibility */
        color: #0d6efd; /* Make sure the numbers are styled properly */
    }

    .crumb-item.active {
        color: #444;
        font-weight: 700;
    }

.crumb-link {
    text-decoration: none;
    color: #0d6efd;
    transition: 0.2s;
}



    .crumb-link:hover {
        color: #084298;
        text-decoration: none;
    }

.crumb-sep {
    color: #aaa;
    padding: 0 8px;
    font-size: 13px;
}

    .crumb-sep i {
        font-size: 12px;
    }

/* Ensure no numbering is applied to the breadcrumb list items */
.custom-breadcrumb ol {
    list-style-type: none; /* Prevent numbers or bullets from being shown */
    padding-left: 0; /* Remove any padding that might add space for markers */
}

.custom-breadcrumb .crumb-item {
    counter-reset: none !important; /* Disable any counter-based numbering */
}

    .custom-breadcrumb .crumb-item::marker {
        display: none !important; /* Hide the numbers completely */
    }




/* Responsive */
@media (max-width: 576px) {
    .custom-breadcrumb ol {
        font-size: 14px;
        padding: 8px 10px;
    }

    .custom-breadcrumb .crumb-item {
        font-size: 12px; /* Adjust item font size for small screens */
    }
}
/* Footer Container */

.jo-footer {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #a0aab4;
    font-size: 0.875rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Brand */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #2ecc71, #1abc9c);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
}

.brand-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

.footer-desc {
    line-height: 1.8;
    color: #6b7a8d;
    max-width: 300px;
}

/* Social */
.social-links {
    display: flex;
    gap: 10px;
}

.social-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a0aab4;
    text-decoration: none;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

    .social-btn:hover {
        background: #2ecc71;
        border-color: #2ecc71;
        color: #fff;
        transform: translateY(-2px);
    }

/* Headings */
.footer-heading {
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #2ecc71;
    display: inline-block;
}

/* Links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-links li {
        margin-bottom: 0.6rem;
    }

    .footer-links a {
        color: #6b7a8d;
        text-decoration: none;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .footer-links a::before {
            content: '';
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #2ecc71;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .footer-links a:hover {
            color: #fff;
            padding-right: 4px;
        }

            .footer-links a:hover::before {
                opacity: 1;
            }

/* Contact */
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-contact li {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 0.9rem;
        color: #6b7a8d;
    }

.contact-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(46, 204, 113, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2ecc71;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.footer-contact a {
    color: #6b7a8d;
    text-decoration: none;
    transition: color 0.2s;
}

    .footer-contact a:hover {
        color: #2ecc71;
    }

/* Bottom Bar */
.footer-bottom {
    background: rgba(0,0,0,0.2);
    font-size: 0.8rem;
    color: #4a5568;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .footer-bottom-links a {
        color: #4a5568;
        text-decoration: none;
        transition: color 0.2s;
    }

        .footer-bottom-links a:hover {
            color: #2ecc71;
        }

.divider {
    color: #2d3748;
}


/* end Footer Container */
/* Social Icons */
.social-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #ffffff;
    color: var(--jo-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    font-size: 15px;
    font-weight: bold;
}

    .social-icon:hover, .jo-footer i:hover {
        background-color: var(--jo-primary);
        color: #ffffff;
        transform: translateY(-2px);
    }

/* Footer bottom text */
.footer-bottom {
    text-align: center;
    font-size: 13px;
    color: var(--jo-primary-dark);
}



.object-fit-cover {
    object-fit: cover;
}

.section-separator {
    /*background: linear-gradient( to right, #f8f9fa, #ffffff, #f8f9fa */ );
    border-top: 2px solid #6188c254;
    border-bottom: 2px solid #6188c254;
    padding: 18px 0;
    background: linear-gradient(120deg, #1e1e1e12, #def0ea, #1abc9c);
    background-size: 200% 200%;
    animation: bgMove 14s ease infinite
}

.section-title {
    font-weight: 700;
    color: #006e5b8f;
    position: relative;
    padding-inline-start: 14px;
   /*  border-left: 5px solid #0d6efd4a; Bootstrap primary */
    border-right: 5px solid #0d6efd4a; /* Bootstrap primary */
}

.bgGradiants {
    background: linear-gradient(120deg, #1e1e1e12, #def0ea, #1abc9c);
    background-size: 200% 200%;
    animation: bgMove 14s ease infinite
}

.bgGradiantSrch {
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

    /* ✨ Hover effect */
    .bgGradiantSrch:hover {
        transform: translateX(-6px); /* مناسب لـ RTL */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
        filter: brightness(1.08);
    }

    /* ✅ Active (selected category) */
    .bgGradiantSrch.active {
        transform: translateX(-6px);
        box-shadow: 0 8px 22px rgba(13, 110, 253, 0.45);
        filter: brightness(1.12);
    }

    /* 🖱️ Click feedback */
    .bgGradiantSrch:active {
        transform: translateX(-3px) scale(0.98);
    }
.announcement-card {
    transition: all 0.3s ease;
}

    .announcement-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }

.announcement-img {
    transition: transform 0.4s ease;
}

.announcement-card:hover .announcement-img {
    transform: scale(1.05);
}