/* Modern Header Redesign (Beta) */

:root {
    --primary-green: #074620;
    --primary-gold: #bd8e34;
    --text-dark: #333;
    --white: #ffffff;
    --font-main: 'Droid Arabic Kufi', sans-serif;
    --header-height: 80px;
    --top-bar-height: 40px;
}

/* ================= Top Bar ================= */
#bar-top {
    background-color: var(--primary-green) !important;
    color: var(--white);
    padding: 5px 0;
    /* Add slight padding */
    font-family: var(--font-main);
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#bar-top .navbar {
    min-height: 40px;
    /* Reduced specific height */
    padding: 0;
}

#bar-top .container {
    padding: 0 15px;
    /* Ensure container padding */
}

/* Force Layout for Top Bar Items */
#bar-top .navbar-nav {
    flex-direction: row !important;
    align-items: center;
    width: 100%;
    justify-content: space-between !important;
    display: flex;
}

/* Grouping: Left Side (Lang + User) / Right Side (Social) */
/* We assume LIs are in order: Lang, User, Social */
/* But since they are siblings, we can just space-between them if we group Lang+User visually */
/* Or rely on the order. Let's make items flex properly */

#bar-top .navbar-nav .nav-item {
    display: flex;
    align-items: center;
}

/* Order Adjustments for Desktop */
/* Lang and User on one side, Social on the other */
#bar-top .navbar-nav .nav-item:nth-child(1),
#bar-top .navbar-nav .nav-item:nth-child(2) {
    order: 1;
    /* Left side (or Right in RTL) */
    margin-right: 15px;
    /* Space between Lang and User */
}

#bar-top .navbar-nav .nav-item:last-child {
    order: 2;
    /* Far side */
    margin-left: auto;
    /* Push to end */
}

body.ar #bar-top .navbar-nav .nav-item:nth-child(1),
body.ar #bar-top .navbar-nav .nav-item:nth-child(2) {
    margin-right: 0;
    margin-left: 15px;
}

body.ar #bar-top .navbar-nav .nav-item:last-child {
    margin-left: 0;
    margin-right: auto;
}

/* Language & User Dropdowns Styling */
#bar-top .dropdown-button {
    color: var(--white);
    background: rgba(255, 255, 255, 0.05);
    /* Subtle background */
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 500;
    display: flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 0.85rem;
}

#bar-top .dropdown-button:hover,
#bar-top .dropdown-button[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.15);
    color: var(--primary-gold);
    border-color: var(--primary-gold);
}

#bar-top .dropdown-button img {
    margin: 0 8px;
    /* Space around flag */
}

#bar-top .dropdown-menu {
    background-color: var(--primary-green);
    border: 1px solid rgba(189, 142, 52, 0.3);
    /* Gold border hint */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin-top: 5px;
    padding: 5px 0;
}

#bar-top .dropdown-item {
    color: var(--white) !important;
    font-size: 0.85rem;
    padding: 8px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s;
}


#bar-top .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--primary-gold) !important;
}

/* Social Icons */
.header_content_child_social ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header_content_child_social ul li {
    padding: 0 5px;
}

.header_content_child_social ul li a svg {
    width: 18px;
    height: 18px;
    fill: var(--white);
    transition: transform 0.3s, fill 0.3s;
}

.header_content_child_social ul li a:hover svg {
    transform: translateY(-2px);
}

.header_content_child_social ul li a:hover svg .cls-1 {
    fill: var(--primary-gold) !important;
}


/* ================= Main Navigation ================= */
.header_content {
    background: var(--white);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 0;
    /* Remove vertical padding to let flexbox handle height */
    transition: all 0.3s ease;
}

.header_content .container {
    padding-top: 10px;
    padding-bottom: 10px;
}

.header_content.sticky {
    padding: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.header_content.sticky .container {
    padding-top: 2px;
    padding-bottom: 2px;
}

.header_content_child_logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Ensure logo aligns to start */
    height: 100%;
}

body.ar .header_content_child_logo {
    padding-right: 0 !important;
    /* Remove inline style override */
    padding-left: 1rem;
}

.header_content_child_logo img {
    max-height: 150px;
    transition: max-height 0.3s ease;
    object-fit: contain;
}

.header_content.sticky .header_content_child_logo img {
    max-height: 50px;
}

/* Override inner container constraints for Nav */
#nav-new .header_content_child {
    width: 100%;
    margin: 0 !important;
}

#nav-new .navbar .container {
    max-width: 100% !important;
    /* Allow nav to use full column width */
    padding: 0 !important;
}

#nav-new .navbar-nav {
    display: flex;
    flex-wrap: nowrap;
    /* Prevent wrapping */
    align-items: center;
    width: 100%;
    justify-content: center;
    /* Push items to the end */
}

/* Adjust grid columns if needed via CSS grid or flex basis overrides */
@media (min-width: 992px) {
    .header_content .row {
        flex-wrap: nowrap;
        /* Ensure single row */
    }

    /* Give logo fixed or flexible width as needed */
    .col-lg-3 {
        flex: 0 0 auto;
        width: auto;
        width: auto;
    }

    /* Let nav take remaining space */
    .col-lg-9 {
        flex: 1 1 auto;
        max-width: none;
    }
}

/* Nav Links */
/* Nav Links */
#nav-new .nav-link {
    color: var(--text-dark) !important;
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 10px 8px !important;
    /* Reduced padding to fit menu */
    position: relative;
    transition: all 0.3s ease;
    border-radius: 25px;
    /* Pill shape for hover background */
    margin: 0 2px;
}

#nav-new .nav-link:hover {
    color: var(--primary-gold) !important;
    background-color: rgba(7, 70, 32, 0.05);
    /* Very subtle green tint */
}

/* Underline Effect - Removed as per user request */
#nav-new .nav-link::after {
    content: none;
}

/* Active State (Optional if handled by backend, but CSS can help) */
#nav-new .nav-item.active .nav-link {
    color: var(--primary-gold) !important;
    background-color: rgba(7, 70, 32, 0.05);
}

/* Search Icon */
.search-bar-btn {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-dark);
    transition: all 0.3s ease;
    margin: 0 10px;
}

.search-bar-btn:hover {
    background-color: var(--primary-green);
    color: var(--white);
}

/* Donate Button */
.header_action #donate-btn {
    background: linear-gradient(135deg, var(--primary-green) 0%, #0a5c2b 100%);
    color: var(--white) !important;
    padding: 12px 30px !important;
    border-radius: 50px;
    /* Modern capsule shape */
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    box-shadow: 0 4px 15px rgba(7, 70, 32, 0.3);
    transition: all 0.3s ease;
    margin-left: 15px;
    border: 1px solid transparent;
}

.header_action #donate-btn:hover {
    background: var(--white);
    color: var(--primary-green) !important;
    border-color: var(--primary-green);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(7, 70, 32, 0.35);
}

/* RTL Adjustments */
body.ar .header_action #donate-btn {
    margin-left: 0;
    margin-right: 10px;
}

body.ar #nav-new .navbar-nav {
    flex-direction: row;
    /* Ensure row direction for RTL */
}

/* Responsive Fixes */
@media (max-width: 991px) {
    .header_content_child_logo img {
        max-height: 60px;
    }
}

/* ================= Mobile Navigation ================= */
#nav-mob {
    background-color: var(--white);
    padding: 10px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

#nav-mob .navbar-brand img {
    max-height: 90px;
    width: auto;
}

#nav-mob .white-logo {
    display: none;
}

#nav-mob .navbar-toggler {
    border: none;
    padding: 0;
    outline: none;
}

/* Custom Toggler Icons (Burger Menu) */
#nav-mob .navbar-toggler-icon {
    background-color: var(--primary-green);
    height: 3px;
    width: 28px;
    display: block;
    margin: 6px 0;
    border-radius: 2px;
    transition: all 0.3s;
}

#nav-mob .navbar-collapse {
    background: var(--white);
    padding: 15px;
    border-radius: 8px;
    margin-top: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    position: absolute;
    width: 96%;
    left: 2%;
    z-index: 1000;
    top: 100%;
}

#nav-mob .container {
    position: relative;
}

#nav-mob .nav-item {
    padding: 2px 0;
    width: 100%;
    text-align: center;
}

#nav-mob .nav-link {
    color: var(--text-dark);
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 10px 20px;
    display: inline-block;
    transition: all 0.3s ease;
    border-radius: 50px;
}

#nav-mob .nav-link:hover,
#nav-mob .nav-item.active .nav-link {
    color: var(--primary-green);
    background-color: rgba(7, 70, 32, 0.08);
    transform: translateY(-1px);
}

/* Mobile Menu Donate Button (distinct) */
.mobile-menu-donate-btn {
    background: linear-gradient(135deg, #0f9d47 0%, #074620 100%);
    color: white !important;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto 10px;
    padding: 12px 35px;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(7, 70, 32, 0.3);
    transition: all 0.3s ease;
    width: 85%;
    max-width: 280px;
    font-size: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    letter-spacing: 0.5px;
}

.mobile-menu-donate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(7, 70, 32, 0.4) !important;
    background: linear-gradient(135deg, #074620 0%, #0f9d47 100%);
}

/* Desktop Header Action Wrapper */
.header_action {
    display: flex;
    align-items: center;
    margin-right: 15px;
    /* Spacing from menu */
}

/* Mobile Search Styling */
#nav-mob .header_content_child_search {
    margin-top: 20px;
    margin-bottom: 10px;
    width: 100%;
    display: flex;
    padding: 0 25px;
    justify-content: center;
    position: relative;
    direction: ltr;
    /* Stabilize flex direction for input group */
}

/* Force correct direction for input group based on language */
body.ar #nav-mob .header_content_child_search {
    direction: rtl;
}

#nav-mob .header_content_child_search input {
    flex-grow: 1;
    border: 1px solid #e0e0e0;
    padding: 0 20px;
    height: 48px;
    /* Taller, more clickable */
    border-radius: 0 50px 50px 0;
    /* RTL default roundness */
    outline: none;
    font-size: 1rem;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    background-color: #f9f9f9;
}

#nav-mob .header_content_child_search input:focus {
    border-color: var(--primary-green);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(7, 70, 32, 0.1);
}

/* LTR roundness flip */
body.en #nav-mob .header_content_child_search input {
    border-radius: 50px 0 0 50px;
}

#nav-mob .header_content_child_search button {
    background: var(--primary-green);
    color: var(--white);
    border: none;
    width: 55px;
    /* Fixed width */
    padding: 0;
    height: 48px;
    border-radius: 50px 0 0 50px;
    /* RTL default roundness */
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(7, 70, 32, 0.2);
}

/* LTR roundness flip */
body.en #nav-mob .header_content_child_search button {
    border-radius: 0 50px 50px 0;
}

#nav-mob .header_content_child_search button:hover {
    background-color: var(--primary-gold);
    transform: translateX(0);
    /* Prevent movement */
}

#nav-mob .header_content_child_search button i {
    font-size: 1.2rem;
}

@media (min-width: 992px) {
    #nav-mob {
        display: none !important;
    }
}



/* ================= Consolidated Inline Styles ================= */
:root {
    --heading-font: 'Droid Arabic Kufi', sans-serif;
}

header ul.popup li:first-child a {
    background: #074620;
    box-shadow: 0 3px 6px #074620;
}

/* Base Navigation Styles */

/* Search button styling */
/*
/* Mobile Header Optimization */
@media (max-width: 991px) {
    #nav-mob {
        display: block;
        /* Ensure visible on mobile */
        background-color: #ffffff;
        padding: 10px 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        /* Subtle shadow */
        position: relative;
        z-index: 1000;
    }

    #nav-mob .navbar-brand img {
        max-height: 60px;
        /* Optimal size for mobile */
        width: auto;
    }

    #nav-mob .navbar-toggler {
        padding: 4px 8px;
        border: 1px solid #074620;
        /* Brand Border */
        border-radius: 4px;
    }

    #nav-mob .navbar-toggler-icon {
        /* Custom Brand Green Toggler */
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23074620' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
    }

    /* Adjust top bar on mobile */
    #bar-top .navbar-nav {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }

    #bar-top .header_content_child {
        margin-bottom: 5px;
    }

    /* Hide Desktop Header Content on Mobile to prevent duplicate navbars */
    .header_content {
        display: none;
    }
}

#nav-new .search-bar-btn {
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    transition: color 0.3s ease;
}

#nav-new .search-bar-btn:hover {
    color: #074620;
}

.header_action #donate-btn {
    background-color: #074620;
    color: #ffffff !important;
    padding: 10px 24px !important;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: 700 !important;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    text-transform: uppercase;
    font-family: var(--heading-font);
    position: relative;
    z-index: 1;
    padding: 0;
}

/* Identity Box (Green) */
.achievements-premium .identity-box {
    background-color: var(--primary-green);
    min-height: 200px;
    z-index: 2;
    position: relative;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.2);
    /* Mobile: Top (1), Desktop: Left (2 in RTL means Left visually if standard flow is Right->Left?
       Actually in RTL: Item 1 is Right, Item 2 is Left.
       We want Logo Left -> Order 2.
    */
}

/* Stats Box (Gold) */
.achievements-premium .stats-box {
    background: linear-gradient(135deg, #d4a03e 0%, #b3852a 100%);
    position: relative;
    padding: 50px 20px;
    z-index: 1;
}

/* Enforce Order via CSS for the specific classes used in HTML using Bootstrap order classes override.
   RTL standard: Start (Right) -> End (Left)
   Identity Box (Logo) -> Right -> First
   Stats Box -> Left -> Second
*/
@media (min-width: 768px) {
    .achievements-premium .identity-box {
        order: 1 !important;
        /* Visual Right in RTL (assuming flex container is RTL direction or just 1st item) */
    }

    .achievements-premium .stats-box {
        order: 2 !important;
        /* Visual Left in RTL */
    }
}

@media (max-width: 767px) {
    .achievements-premium .identity-box {
        order: 1 !important;
        /* Top */
    }

    .achievements-premium .stats-box {
        order: 2 !important;
        /* Bottom */
    }
}

/* Make the inner container a grid */
.achievements-premium .stats-box .d-flex {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    flex-wrap: nowrap;
    /* Desktop: single row */
}

.achievements-premium .stat-item {
    text-align: center;
    color: #fff;
    margin: 0 15px;
    transition: transform 0.3s ease;
}

.achievements-premium .stat-item:hover {
    transform: translateY(-5px);
}

.achievements-premium .stat-number {
    font-family: var(--font-main);
    font-weight: 800;
    /* Extra bold */
    font-size: 2.5rem;
    margin-bottom: 5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.achievements-premium .stat-label {
    font-size: 1.1rem;
    font-weight: 500;
    opacity: 0.9;
}

/* Tablet (768px - 1199px) Grid */
@media (max-width: 1199px) {
    .achievements-premium .stats-box .d-flex {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        /* 3 in top row, 2 below */
        gap: 30px;
        justify-items: center;
        flex-wrap: wrap !important;
        /* Fallback */
    }

    .achievements-premium .stat-item {
        margin: 0;
        width: auto;
    }

    /* Center the last 2 items if possible or just let them align left/right?
       Grid handles this well.
    */
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
    .achievements-premium .stats-box .d-flex {
        grid-template-columns: repeat(2, 1fr);
        /* 2x2 Grid */
        gap: 20px;
    }

    .achievements-premium .stat-number {
        font-size: 1.8rem;
    }

    .achievements-premium .stat-label {
        font-size: 0.9rem;
    }
}

.header_content {
    border-bottom: 1px solid #ffffff !important;
}

header .navbar .navbar-nav li {
    padding-bottom: 0;
}

header .navbar .navbar-nav {
    margin-top: 0.5rem !important;
}

/* Desktop styles */
@media (min-width: 992px) {
    #nav-mob {
        display: none;
    }

    header .header_content_child_social ul {
        margin: 3px;
    }

    /* Underline effect for nav links */
    #nav-new .nav-item .nav-link::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #074620;
        transition: width 0.3s ease;
    }

    #nav-new .nav-item .nav-link:hover::after {
        width: 100%;
    }

    /* Alignment for the right items */
    #nav-new #navbarSupportedContent ul li:nth-last-child(-n+2) {
        margin-left: auto;
        display: flex;
        align-items: center;
    }

    body.ar #nav-new #navbarSupportedContent ul li:nth-last-child(-n+2) {
        margin-left: 0;
        margin-right: auto;
    }

    /* Container spacing */
    #nav-new .navbar .container {
        padding: 0 15px;
        max-width: 100%;
    }

    /* Improved icon spacing */
    #nav-new .fas {
        margin: 0 3px;
    }

    body.ar .en_title {
        font-size: 1.2rem;
    }
}

/* Responsive adjustments */
@media (min-width: 1024px) {
    header #nav-new .navbar {
        padding: 0;
    }

    #nav-new .nav-item {
        padding: 0 15px;
    }
}

@media (min-width: 1200px) {
    #nav-new .navbar .container {
        padding: 0 30px;
    }

    #nav-new .nav-item {
        padding: 0 18px;
    }
}

@media (min-width: 1400px) {
    #nav-new .navbar .container {
        padding: 0 50px;
    }

    #nav-new .nav-item {
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    header #bar-top .navbar .navbar-nav li:last-child {
        width: max-content;
    }
}


@media screen and (max-width: 425px) {
    .dropdown-button {
        padding: 0px !important;
    }
}

#bar-top {
    padding: 0 !important;
    background-color: #074620 !important;
    /* Force solid brand color globally */
    position: relative;
    z-index: 1001;
    /* Ensure above other elements */
}

/* Extra ensurance for small mobile screens to prevent transparency */
@media (max-width: 576px) {
    #bar-top {
        background-color: #074620 !important;
        min-height: 50px;
        /* Ensure height stability */
    }
}

#bar-top .navbar {
    padding: 0;
    height: 50px;
}

header #bar-top .navbar .navbar-nav {
    width: 95%;
}

#bar-top .header_content_child {
    margin-top: 0;
}

#bar-top .mob-app-download {
    text-align: center;
}

header #bar-top .header_content_child .dropdown .dropdown-toggle {
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 600;
}

header #bar-top .navbar .navbar-nav .dropdown .dropdown-menu .dropdown-item {
    color: #FFFFFF;
    border-bottom: 0.7px solid #287947;
    padding-left: 5px !important;
    text-align: left;
}

header #bar-top .header_content_child .dropdown .dropdown-menu.show {
    transform: translateY(33px) !important;
    border-radius: 0;
}

#bar-top .dropdown-menu {
    top: 0;
    background-color: #084620;
    margin: 0;
    min-width: 8rem;
    padding: .4rem;
}

.dropdown-button {
    padding: 5px 20px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.dropdown-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid white;
    margin-left: 5px;
}

.body-overlay.active {
    visibility: visible;
    opacity: 0.97;
}

.body-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    display: block;
    background: rgba(0, 0, 0, 0.95);
    z-index: 999;
    content: "";
    left: 0;
    top: 0;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    cursor:
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVBAMAAABbObilAAAAMFBMVEVMaXH////////////////////////////////////////////////////////////6w4mEAAAAD3RSTlMAlAX+BKLcA5+b6hJ7foD4ZP1OAAAAkUlEQVR4XkWPoQ3CUBQAL4SktoKAbCUjgAKLJZ2ABYosngTJCHSD6joUI6BZgqSoB/+Shqde7sS9x3OGk81fdO+texMtRVTia+TsQtHEUJLdohJfgNNPJHyEJPZTsWLoxShqsWITazEwqePAn69Sw2TUxk1+euPis3EwaXy8RMHSZBIlRcKKnC5hRctjMf57/wJbBlAIs9k1BAAAAABJRU5ErkJggg==),
        progress;
}

.td-search-popup .form-inline {
    width: 35%;
    position: absolute;
    position: fixed;
    top: 50%;
    left: 50%;
    max-width: 90%;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    visibility: hidden;
    opacity: 0;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 999;
}

.td-search-popup.active .form-inline {
    visibility: visible;
    opacity: 1;
    width: 750px;
    height: 4rem;
    max-width: 90%;
    z-index: 9999;
}

.td-search-popup .form-inline input {
    height: 4rem;
}

.header_content {
    border-bottom: 2px solid #287947;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.header_content .container {
    display: flex;
    align-items: center;
}

header #nav-new .navbar {
    padding: 0;
    width: 100%;
}

header #nav-new .header_content_child {
    width: 100%;
}

/* Improved navbar alignment */
#nav-new .navbar-collapse {
    display: flex;
    justify-content: space-between;
}

body.ar #nav-new .navbar-collapse {
    flex-direction: row-reverse;
}

/* Remove right margin from the last li to avoid unwanted extra space */
.navbar-nav li:last-child {
    margin-right: 0;
}

body.ar .navbar-nav li:last-child {
    margin-left: 0;
}

/* RTL Fixes for Alignment Only */
body.ar .dropdown-arrow {
    margin-left: 0;
    margin-right: 5px;
}

body.ar .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
}

body.ar header #bar-top .navbar .navbar-nav .dropdown .dropdown-menu .dropdown-item {
    padding-right: 10px !important;
    padding-left: 0 !important;
    text-align: right;
}

body.ar #nav-new #navbarSupportedContent ul li:nth-last-child(-n+2) {
    margin-left: 0;
    margin-right: auto;
}

/* Removed manual font overrides to trust legacy inheritance */

.lang-icon {
    margin-right: 5px;
}

body.ar .lang-icon {
    margin-right: 0;
    margin-left: 5px;
}

.list-unstyled.popup {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.list-unstyled.popup.visible {
    opacity: 1;
    visibility: visible;
}




/* Restore Donate Button Styles */
#nav-new #donate-btn {
    background-color: #074620;
    color: white !important;
    padding: 12px 25px !important;
    border-radius: 5px;
    transition: all 0.3s ease;
    font-weight: 700 !important;
    display: inline-block;
    /*text-transform: uppercase;*/
    box-shadow: 0 2px 5px rgba(7, 70, 32, 0.3);
    border: 0;
}

#nav-new #donate-btn:hover {
    background-color: #053616;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(7, 70, 32, 0.4);
}

#nav-new #donate-btn:active {
    box-shadow: 0 2px 3px rgba(7, 70, 32, 0.3);
    transform: translateY(0);
}

/* Better alignment for donate button container */
@media (min-width: 992px) {
    .header_content_child_lang {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    header .header_content_child_social ul li a img,
    header .header_content_child_social ul li a svg {
        width: 25px;
        height: 25px;
    }

    header .header_content_child_social ul li {
        padding: 0 0.3rem;
    }

}

#bar-top .collapse {
    display: flex;
}

/*header #bar-top .header_content_child_social ul li{*/
/* display: contents;*/
/*}*/

.header_content.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: #FFFFFF;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    padding: 0;
    transition: all 0.3s ease;
    animation: slideDown 0.5s forwards;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.header_content.sticky #nav-new .nav-item {
    padding-top: 10px;
    padding-bottom: 10px;
}

.header_content.sticky .header_content_child_logo img {
    max-height: 60px;
    transition: all 0.3s ease;
}

.cls-1 {
    fill: #FFFFFF !important;
}

.hero_slider .swiper_parent .swiper-slide {
    border-radius: 0px;
}

.hero_slider .swiper_parent .swiper-container {
    border-radius: 0px;
}

.hero_slider .swiper_parent .swiper-button-next {
    left: 0;
}

.hero_slider .swiper_parent .swiper-button-prev {
    right: 0;
}

.hero_slider .swiper_parent .swiper-slide_anchor_item_img {
    height: 500px;
}

.fas {
    font-size: 1.2rem;
}

/* Search button enhancements */
.search-bar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.search-bar-btn:hover {
    background-color: rgba(7, 70, 32, 0.08);
}

/* Search popup styles */
.td-search-popup.active .form-inline {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.td-search-popup .form-inline input {
    border-color: #074620;
}

.hero_slider .swiper_parent .swiper-slide_anchor_item_img img {
    height: auto;
}

.navbar-nav .dropdown-menu {
    position: absolute;
}

/* Force hide social icons on mobile */
/* Force hide social icons on mobile */
@media (max-width: 576px) {

    #bar-top .header_content_child_social,
    .header_content_child_social,
    .header_content_child_social ul,
    .header_content_child_social li {
        display: none !important;
    }
}

/* ================= Relief Section Polish ================= */

/* Container and Layout */
.gaza-section .container {
    position: relative;
    z-index: 2;
}

/* Card Styling - Transparent White bg */
.gaza-content-card {
    background: rgba(255, 255, 255, 0.95);
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 5;
    max-width: 600px;
}

.gaza-title {
    color: #b78b1e;
    /* Gold color */
    font-weight: 800;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
}

.gaza-title:after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 0;
    width: 60px;
    height: 3px;
    background: #b78b1e;
}

.gaza-text {
    line-height: 1.8;
    color: #333;
    font-size: 1.1rem;
    text-align: justify;
}

/* Image Stack Styling */
.gaza-images-wrapper {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: ltr;
    /* Force LTR for consistent stacking */
}

.gaza-img-card {
    position: absolute;
    width: 280px;
    height: 380px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 5px solid #fff;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    object-fit: cover;
    /* Robust Centering */
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
}

/* Initial States with Floating Animation */
.gaza-img-center {
    z-index: 3;
    transform: translateY(-50%) scale(1.05);
    /* Base state */
    animation: float-center 6s ease-in-out infinite;
}

.gaza-img-left {
    z-index: 2;
    transform: translateY(-50%) translateX(-60px) rotate(-15deg) scale(0.95);
    opacity: 0.9;
    animation: float-left 7s ease-in-out infinite 0.5s;
    /* Slight delay/diff duration */
}

.gaza-img-right {
    z-index: 1;
    transform: translateY(-50%) translateX(60px) rotate(15deg) scale(0.95);
    opacity: 0.9;
    animation: float-right 8s ease-in-out infinite 1s;
}

/* Floating Keyframes */
@keyframes float-center {

    0%,
    100% {
        transform: translateY(-50%) scale(1.05);
    }

    50% {
        transform: translateY(-54%) scale(1.05);
    }

    /* Gentle up */
}

@keyframes float-left {

    0%,
    100% {
        transform: translateY(-50%) translateX(-60px) rotate(-15deg) scale(0.95);
    }

    50% {
        transform: translateY(-55%) translateX(-65px) rotate(-12deg) scale(0.95);
    }

    /* Up + Slight rotation change */
}

@keyframes float-right {

    0%,
    100% {
        transform: translateY(-50%) translateX(60px) rotate(15deg) scale(0.95);
    }

    50% {
        transform: translateY(-53%) translateX(55px) rotate(18deg) scale(0.95);
    }
}

/* Desktop Hover Effects (Pauses/Overrides Float) */
.gaza-images-wrapper:hover .gaza-img-left {
    animation: none;
    /* Stop floating on hover for precise control */
    transform: translateY(-50%) translateX(-140px) rotate(-20deg) scale(0.95);
}

.gaza-images-wrapper:hover .gaza-img-right {
    animation: none;
    transform: translateY(-50%) translateX(140px) rotate(20deg) scale(0.95);
}

.gaza-images-wrapper:hover .gaza-img-center {
    animation: none;
    transform: translateY(-50%) scale(1.1);
    z-index: 4;
}


/* Responsive Adjustments */
@media (max-width: 991px) {
    .gaza-section {
        text-align: center;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .gaza-content-card {
        margin: 0 auto 40px auto;
        padding: 2rem;
    }

    .gaza-title:after {
        right: 50%;
        transform: translateX(50%);
    }

    .gaza-images-wrapper {
        height: 350px;
        margin-top: 20px;
    }

    /* Smaller cards for tablet */
    .gaza-img-card {
        width: 200px;
        height: 280px;
    }

    /* Ensure visibility on tablets */
    .gaza-img-left,
    .gaza-img-right {
        display: block !important;
    }

    /* Tighter Fan Effect for Tablet */
    .gaza-img-center {
        transform: translateY(-50%) scale(1) !important;
    }

    .gaza-img-left {
        transform: translateY(-50%) translateX(-40px) rotate(-10deg) scale(0.9) !important;
    }

    .gaza-img-right {
        transform: translateY(-50%) translateX(40px) rotate(10deg) scale(0.9) !important;
    }
}

@media (max-width: 576px) {
    .gaza-content-card {
        padding: 1.5rem;
    }

    /* Mobile specific adjustments for stack */
    .gaza-images-wrapper {
        height: 300px;
    }

    .gaza-img-card {
        width: 160px;
        height: 220px;
    }

    /* Even Tighter fan for mobile */
    .gaza-img-left {
        transform: translateY(-50%) translateX(-30px) rotate(-10deg) scale(0.9) !important;
    }

    .gaza-img-right {
        transform: translateY(-50%) translateX(30px) rotate(10deg) scale(0.9) !important;
    }
}

/* ================= Beta Projects Page Styles ================= */

.beta-page-hero {
    background: linear-gradient(135deg, var(--primary-green) 0%, #032b12 100%);
    padding: 80px 0 60px;
    text-align: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.beta-page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23bd8e34' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.3;
}

.beta-page-title {
    font-family: var(--font-main);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--primary-gold);
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.beta-page-hero .breadcrumb {
    background: rgba(255, 255, 255, 0.05);
    display: inline-flex;
    padding: 10px 25px;
    border-radius: 50px;
    margin-bottom: 0;
}

.beta-page-hero .breadcrumb-item,
.beta-page-hero .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    text-decoration: none;
}

.beta-page-hero .breadcrumb-item.active {
    color: var(--primary-gold);
    font-weight: 600;
}

.beta-page-hero .breadcrumb-item+.breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.4);
}

/* Project Card */
.beta-project-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}

.beta-project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(7, 70, 32, 0.15);
    border-color: rgba(189, 142, 52, 0.3);
}

.beta-project-card-img {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.beta-project-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.beta-project-card:hover .beta-project-card-img img {
    transform: scale(1.1);
}

.beta-project-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(7, 70, 32, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.beta-project-card:hover .beta-project-card-overlay {
    opacity: 1;
}

.beta-project-card-body {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.beta-project-title {
    margin-bottom: 15px;
    line-height: 1.4;
}

.beta-project-title a {
    color: var(--primary-green);
    font-family: var(--font-main);
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}

.beta-project-title a:hover {
    color: var(--primary-gold);
}

.beta-project-desc {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

.beta-project-footer .btn-outline-primary {
    color: var(--primary-green);
    border-color: var(--primary-green);
    border-radius: 8px;
    padding: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.beta-project-footer .btn-outline-primary:hover {
    background-color: var(--primary-green);
    color: var(--white);
    box-shadow: 0 5px 15px rgba(7, 70, 32, 0.2);
}

/* RTL Specifics applied automatically if body.ar is present, but checking specific direction */
body.ar .beta-project-footer .fas {
    transform: rotate(180deg);
    /* If using arrow-right icon */
}

/* If arrow-left was used in markup:
   <i class="fas fa-arrow-left ms-2"></i>
   In RTL, this points LEFT (backwards for English, forward for Arabic reading direction? No, next is usually Left in RTL).
   Wait, in RTL, 'Next' or 'Go' usually implies moving Left visually or mirroring the Right arrow.
   Let's ensure the icon makes sense.
*/


/* ================= Hero Slider Text Fix ================= */
.hero-main-title,
.hero-main-desc {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    /* Improve readability */
}

/* ================= Beta Single Project Page ================= */

/* Content Section Main */
.beta-project-main {
    padding: 60px 0;
}

.beta-project-main-img img {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.beta-project-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
}

/* Detail Cards (Goals, Axes, etc) */
.beta-detail-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    height: 100%;
    border-top: 4px solid var(--primary-green);
    transition: transform 0.3s ease;
}

.beta-detail-card:hover {
    transform: translateY(-5px);
}

.beta-detail-card h4 {
    color: var(--primary-green);
    font-family: var(--font-main);
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.beta-detail-card .content-text {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
}

/* Donation Form Wrapper Polish */
.donationChannels {
    background-color: #f8f9fa;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(7, 70, 32, 0.08);
    padding: 40px 20px;
    margin-top: 40px;
    border: 1px solid rgba(7, 70, 32, 0.05);
}

.donationChannels h4 {
    color: var(--primary-green);
    font-weight: 800;
}

.donation-card-premium {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #eee;
    transition: all 0.3s;
}

.donation-card-premium.active {
    border-color: var(--primary-gold);
    background-color: rgba(189, 142, 52, 0.05);
}

/* Zakat Request Tabs Polish */
.donationComplaints_tabs_col_tab {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    border: 2px solid transparent;
}

.donationComplaints_tabs_col_tab.active {
    border-color: var(--primary-gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(189, 142, 52, 0.15);
}

.donationComplaints_tabs_col_tab svg rect {
    fill: var(--primary-green);
}

.donationComplaints_tabs_col_tab.inside svg rect {
    fill: var(--primary-gold);
}


/* ================= Beta Form & Button Polish ================= */

/* Form Controls */
.beta-project-page .form-control {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 15px;
    height: auto;
    /* Allow auto height for padding to work */
    font-size: 1rem;
    color: #333;
    background-color: #fcfcfc;
    transition: all 0.3s ease;
    box-shadow: none;
}

.beta-project-page .form-control:focus {
    border-color: var(--primary-gold);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(189, 142, 52, 0.15);
    outline: none;
}

.beta-project-page label {
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

/* Select Inputs wrapper polish (if any manual selects) */
.beta-project-page select.form-control {
    background-image: none;
    /* If we want to remove default arrow, but usually keep it */
    cursor: pointer;
}

/* Submit Button (Donate) */
.beta-project-page .submitBTN,
.beta-project-page .btn-premium {
    background: linear-gradient(135deg, var(--primary-green) 0%, #0a5c2b 100%);
    color: #fff;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 5px 20px rgba(7, 70, 32, 0.3);
    transition: all 0.3s ease;
    width: auto;
    min-width: 200px;
    display: inline-block;
    cursor: pointer;
}

.beta-project-page .submitBTN:hover,
.beta-project-page .btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(7, 70, 32, 0.4);
    background: linear-gradient(135deg, #0a5c2b 0%, var(--primary-green) 100%);
}

.beta-project-page .submitBTN:active {
    transform: translateY(1px);
}

/* Generic Button Success (Check Reply) */
.beta-project-page .btn-success {
    background-color: var(--primary-gold) !important;
    border-color: var(--primary-gold) !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 12px 30px !important;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(189, 142, 52, 0.3);
    transition: all 0.3s;
}

.beta-project-page .btn-success:hover {
    background-color: #a87d2e !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(189, 142, 52, 0.4);
}

/* Select2 Polish Override if needed */
.beta-project-page .select2-container--default .select2-selection--single {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    height: 48px;
    /* Match form control roughly */
    padding: 8px;
}

.beta-project-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px;
}


/* ================= Beta Validation Errors ================= */
.beta-project-page .errors {
    color: #dc3545 !important;
    /* Premium Danger Red */
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 8px;
    background-color: rgba(220, 53, 69, 0.05);
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: 6px;
    padding: 8px 12px;
    text-align: center;
    width: 100%;
}

/* Ensure they don't break layout when hidden */
.beta-project-page .errors[style*="display: none"] {
    display: none !important;
}

/* FORCE HIDE ERRORS BY DEFAULT */
.beta-project-page .errors {
    display: none;
}

/* ================= Beta Zakat Request Tabs Polish ================= */

/* Tab Container */
.donationComplaints_tabs {
    gap: 20px;
    margin-bottom: 30px;
}

/* Individual Tab Card */
.donationComplaints_tabs_col_tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    min-height: 160px;
    /* Ensure consistent height */
    gap: 15px;
    cursor: pointer;
}

/* Tab Icon (SVG) */
.donationComplaints_tabs_col_tab svg {
    width: 60px;
    height: 60px;
    transition: transform 0.3s ease;
}

.donationComplaints_tabs_col_tab:hover svg {
    transform: scale(1.1);
}

/* Tab Text */
.donationComplaints_tabs_col_tab span {
    font-size: 1.1rem;
    font-weight: 700;
    color: #444;
    line-height: 1.4;
}

.donationComplaints_tabs_col_tab.active span {
    color: var(--primary-gold);
}

/* Content Area Text (The 'Please contact us' message) */
.donationComplaints_content_form p {
    font-size: 1.2rem;
    color: #555;
    background: #f8f9fa;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eee;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

/* ================= Beta Header Structure Revisit ================= */

/* Logo Col: Center properly */
.header_content_child_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0;
}

/* Nav Col: Center the list */
.navbar-nav.m-auto {
    margin: 0 auto !important;
}

/* Action Col: Center/Right align button */
.header_action {
    display: flex;
    justify-content: flex-end;
    /* Or center if preferred, but end keeps it balanced */
    align-items: center;
    height: 100%;
}

/* Ensure Logo doesn't overflow */
.header_content_child_logo img {
    max-height: 90px;
    width: auto;
}

/* Fix sticky header alignment */
.header_content.sticky .header_content_child_logo img {
    max-height: 60px;
}

/* Adjust Donate Button Container issues if any */
.donate-btn {
    margin: 0 !important;
    /* Remove old margins */
    display: inline-block;
}