/**
 * Project Grid Layout - Alternating Width Pattern
 * Pattern: 100% -> 40% -> 60% -> 100% -> 70% -> 30% (repeats)
 * Only applies to divs with 'type-project' class
 * 
 * @package ExpoXR
 * @version 1.0.0
 */

/* Target the loop grid container */
#all-projects .elementor-loop-container {
    display: flex !important;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}

/* Reset default grid behavior */
#all-projects .elementor-loop-container.elementor-grid {
    grid-template-columns: none !important;
}

/* Base styling for all loop items with type-project class */
#all-projects .type-project {
    box-sizing: border-box;
    margin: 0;
}

/* Ignore style tags and non-project elements */
#all-projects .elementor-loop-container > style,
#all-projects .elementor-loop-container > :not(.type-project) {
    display: none !important;
}

/* Pattern repeats every 6 items - using pattern-X classes added by JS */
/* Item 1: 100% width */
#all-projects .type-project.pattern-1 {
    width: 100%;
    flex: 0 0 100%;
}

/* Item 2: 40% width */
#all-projects .type-project.pattern-2 {
    width: calc(40% - 8px);
    flex: 0 0 calc(40% - 8px);
}

/* Item 3: 60% width */
#all-projects .type-project.pattern-3 {
    width: calc(60% - 8px);
    flex: 0 0 calc(60% - 8px);
}

/* Item 4: 100% width */
#all-projects .type-project.pattern-4 {
    width: 100%;
    flex: 0 0 100%;
}

/* Item 5: 70% width */
#all-projects .type-project.pattern-5 {
    width: calc(70% - 8px);
    flex: 0 0 calc(70% - 8px);
}

/* Item 6: 30% width */
#all-projects .type-project.pattern-6 {
    width: calc(30% - 8px);
    flex: 0 0 calc(30% - 8px);
}

/* Ensure inner content takes full width */
#all-projects .type-project > a,
#all-projects .type-project > div {
    width: 100%;
    display: block;
}

/* Tablet responsive: 2 column layout */
@media (max-width: 1024px) {
    /* Items 1 and 4 stay full width */
    #all-projects .type-project.pattern-1,
    #all-projects .type-project.pattern-4 {
        width: 100%;
        flex: 0 0 100%;
    }
    
    /* Items 2,3 pair: 40/60 split */
    #all-projects .type-project.pattern-2 {
        width: calc(40% - 8px);
        flex: 0 0 calc(40% - 8px);
    }
    
    #all-projects .type-project.pattern-3 {
        width: calc(60% - 8px);
        flex: 0 0 calc(60% - 8px);
    }
    
    /* Items 5,6 pair: 60/40 split (reversed for visual balance) */
    #all-projects .type-project.pattern-5 {
        width: calc(60% - 8px);
        flex: 0 0 calc(60% - 8px);
    }
    
    #all-projects .type-project.pattern-6 {
        width: calc(40% - 8px);
        flex: 0 0 calc(40% - 8px);
    }
}

/* Mobile: Single column */
@media (max-width: 767px) {
    #all-projects .type-project {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* Smooth transitions for layout changes */
#all-projects .type-project {
    transition: width 0.3s ease, flex-basis 0.3s ease;
}

/* Ensure items maintain aspect ratio */
#all-projects .type-project .elementor-element-26fbbfc {
    min-height: 420px;
}

/* Adjust smaller items to have appropriate height */
#all-projects .type-project.pattern-2 .elementor-element-26fbbfc,
#all-projects .type-project.pattern-6 .elementor-element-26fbbfc {
    min-height: 350px;
}

@media (max-width: 1024px) {
    #all-projects .type-project .elementor-element-26fbbfc {
        min-height: 380px;
    }
}

@media (max-width: 767px) {
    #all-projects .type-project .elementor-element-26fbbfc {
        min-height: 320px;
    }
}



.all_project_loop .project_loop_bg {
  transition: border-radius 0.5s ease, transform 0.5s ease;
  border-radius: 0px;
}

.all_project_loop:hover .e-con-inner:hover .elementor-element .project_loop_bg {
  border-radius: 15px;
}