.elementor-695 .elementor-element.elementor-element-e379184{--display:flex;}.elementor-695 .elementor-element.elementor-element-9bb68ad{--display:flex;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-695 .elementor-element.elementor-element-abde0ec{--grid-columns:3;--grid-column-gap:10px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-695 .elementor-element.elementor-element-abde0ec{--grid-columns:2;}}@media(max-width:767px){.elementor-695 .elementor-element.elementor-element-abde0ec{--grid-columns:1;}}/* Start custom CSS for loop-grid, class: .elementor-element-abde0ec *//* ==============================================
   Grid Layout - 3 Columns Responsive
   ============================================== */

/* Main Grid Container */
.elementor-loop-container.elementor-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
    width: 100% !important;
    padding: 20px !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Parent Container */
.elementor-element-9bb68ad {
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

.elementor-widget-loop-grid {
    width: 100% !important;
    margin: 0 !important;
}

/* Grid Items */
.e-loop-item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Container Adjustments */
.elementor-element-0ce52c0 {
    width: 100% !important;
}

.e-con-inner {
    width: 100% !important;
}

/* Font Size Adjustments Only */
.project-content h3 {
    font-size: 1.1rem !important;
}

.project-details {
    font-size: 0.85rem !important;
}

.project-details strong {
    font-size: 0.85rem !important;
}

.project-link {
    font-size: 0.9rem !important;
}

/* ==============================================
   Responsive Design
   ============================================== */

/* Large Desktop - 3 Columns */
@media screen and (min-width: 1200px) {
    .elementor-loop-container.elementor-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
        padding: 20px !important;
    }
    
    .elementor-element-9bb68ad {
        padding: 0 20px !important;
    }
}

/* Desktop & Tablets - 2 Columns */
@media screen and (max-width: 1199px) and (min-width: 769px) {
    .elementor-loop-container.elementor-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
        padding: 18px !important;
    }
    
    .elementor-element-9bb68ad {
        padding: 0 18px !important;
    }
    
    .project-content h3 {
        font-size: 1.05rem !important;
    }
    
    .project-details {
        font-size: 0.8rem !important;
    }
    
    .project-link {
        font-size: 0.85rem !important;
    }
}

/* Mobile Landscape - 2 Columns */
@media screen and (max-width: 768px) and (min-width: 481px) {
    .elementor-loop-container.elementor-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 15px !important;
    }
    
    .elementor-element-9bb68ad {
        padding: 0 15px !important;
    }
    
    .project-content h3 {
        font-size: 1rem !important;
    }
    
    .project-details {
        font-size: 0.75rem !important;
    }
    
    .project-link {
        font-size: 0.8rem !important;
    }
    
    /* تصغير فلتر الجانب على التابلت */
    .naht-side-filter {
        max-width: 280px !important;
        padding: 1.2rem !important;
        margin: 0 auto 20px !important;
    }
    
    .naht-filter-header {
        font-size: 1.1rem !important;
    }
    
    .naht-input-label {
        font-size: 0.8rem !important;
    }
    
    .naht-maps-select {
        font-size: 0.85rem !important;
        padding: 0.65rem 0.75rem !important;
    }
}

/* Mobile Portrait - 1 Column */
@media screen and (max-width: 480px) {
    .elementor-loop-container.elementor-grid {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 15px !important;
        padding: 15px 10px !important;
    }
    
    .elementor-element-9bb68ad {
        padding: 0 10px !important;
    }
    
    .project-content h3 {
        font-size: 1.05rem !important;
    }
    
    .project-details {
        font-size: 0.8rem !important;
    }
    
    .project-link {
        font-size: 0.85rem !important;
    }
    
    /* جعل الفلتر أفقي على الموبايل */
    .naht-side-filter {
        max-width: 100% !important;
        padding: 1rem !important;
        margin: 0 0 15px !important;
    }
    
    .naht-filter-header {
        font-size: 1rem !important;
    }
    
    .naht-filter-content {
        gap: 1rem !important;
    }
    
    .naht-input-label {
        font-size: 0.75rem !important;
    }
    
    .naht-maps-select {
        font-size: 0.8rem !important;
        padding: 0.6rem 0.7rem !important;
    }
    
    .naht-status-options {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.4rem !important;
    }
    
    .naht-status-btn {
        padding: 0.6rem 0.3rem !important;
        font-size: 0.7rem !important;
    }
    
    .naht-status-btn i {
        font-size: 0.9rem !important;
    }
}

/* Very Small Mobile */
@media screen and (max-width: 375px) {
    .elementor-loop-container.elementor-grid {
        gap: 12px !important;
        padding: 12px 8px !important;
    }
    
    .elementor-element-9bb68ad {
        padding: 0 8px !important;
    }
    
    .project-content h3 {
        font-size: 1rem !important;
    }
    
    .project-details {
        font-size: 0.75rem !important;
    }
    
    .project-link {
        font-size: 0.8rem !important;
    }
    
    .naht-side-filter {
        padding: 0.8rem !important;
        margin: 0 0 12px !important;
    }
    
    .naht-status-btn {
        font-size: 0.65rem !important;
    }
}

/* ==============================================
   RTL Support (Arabic)
   ============================================== */

[dir="rtl"] .project-status-badge {
    right: auto;
    left: 15px;
}

[dir="rtl"] .project-link {
    flex-direction: row-reverse;
}

[dir="rtl"] .project-icon-rtl {
    transform: rotate(180deg);
}

/* ==============================================
   Print Styles
   ============================================== */

@media print {
    .elementor-loop-container.elementor-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    .project-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ==============================================
   Accessibility Improvements
   ============================================== */

.project-card:focus-within {
    outline: 2px solid #A6937C;
    outline-offset: 4px;
}

.project-link:focus {
    outline: 2px solid #A6937C;
    outline-offset: 2px;
}

/* Smooth Loading Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.project-card {
    animation: fadeInUp 0.5s ease-out;
}

/* Stagger Animation for Grid Items */
.e-loop-item:nth-child(1) .project-card { animation-delay: 0.05s; }
.e-loop-item:nth-child(2) .project-card { animation-delay: 0.1s; }
.e-loop-item:nth-child(3) .project-card { animation-delay: 0.15s; }
.e-loop-item:nth-child(4) .project-card { animation-delay: 0.2s; }
.e-loop-item:nth-child(5) .project-card { animation-delay: 0.25s; }
.e-loop-item:nth-child(6) .project-card { animation-delay: 0.3s; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9bb68ad *//* تخصيص الكونتينر الأب ليصبح صف بنسبة 70-30 */
.elementor-element-9bb68ad {
    display: flex !important;
}

.elementor-695 .elementor-element.elementor-element-9bb68ad {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 2rem !important;
    width: 100% !important;
    align-items: flex-start !important;
}

/* الجريد لوب - 70% */
.elementor-element-abde0ec {
    flex: 0 0 80% !important;
    max-width: 80% !important;
    width: 70% !important;
}

/* الفلتر - 30% - Sticky */
.elementor-element-fa6b2b5 {
    flex: 0 0 20% !important;
    max-width: 20% !important;
    width: 30% !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 100px !important; /* المسافة من أعلى الصفحة عند التثبيت */
    align-self: flex-start !important;
    height: fit-content !important;
}

/* جعل الفلتر يأخذ العرض الكامل */
.naht-side-filter {
    max-width: 100% !important;
    width: 100% !important;
}

/* إزالة أي margin أو padding قد يؤثر على المحاذاة */
.elementor-element-9bb68ad .e-con-inner > * {
    flex-shrink: 0 !important;
    margin-top: 0 !important;
}

/* للشاشات الصغيرة - عرض عمودي */
@media (max-width: 1024px) {
    .elementor-element-9bb68ad > .e-con-inner {
        flex-direction: column !important;
    }
    
    .elementor-element-abde0ec,
    .elementor-element-fa6b2b5 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .elementor-element-fa6b2b5 {
        position: static !important;
        order: -1; /* الفلتر يظهر أولاً في الموبايل */
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e379184 */.elementor-element.elementor-element-89b25d2.elementor-widget.elementor-widget-puiux_epk_widget_additional-pages_315 {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 50px 0;
}/* End custom CSS */