@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/* ==========================================================================
   Base Structure & Swiper Reset
   ========================================================================== */
.gi-carousel-wrapper-8c1b9f6d {
    width: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.gi-swiper-8c1b9f6d {
    width: 100% !important;
}

.gi-swiper-8c1b9f6d .swiper-slide {
    height: auto !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    transition: transform 0.3s ease;
}

.swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.gi-item-container {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    box-sizing: border-box;
    opacity: 95%;
}

/* ==========================================================================
   Tablet Edge Guard (768px - 1024px)
   ========================================================================== */
@media (max-width: 1024px) and (min-width: 768px) {
    .gi-carousel-wrapper-8c1b9f6d {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .gi-swiper-8c1b9f6d {
        overflow: visible !important;
    }
}

/* ==========================================================================
   1. Our Gallery Layout (.layout-gallery-size)
   ========================================================================== */
.elementor-widget-gallery_items_8c1b9f6d:has(.layout-gallery-size) {
    overflow: visible !important;
    clip-path: inset(-50px -4000px -100px 0px) !important;
}

.layout-gallery-size .gi-swiper-8c1b9f6d {
    overflow: visible !important;
}

@media (max-width: 1024px) and (min-width: 768px) {
    .layout-gallery-size .gi-swiper-8c1b9f6d .swiper-slide {
        width: calc((100vw - 40px - 20px) / 2) !important;
    }
}

@media (max-width: 767px) {
    .layout-gallery-size .gi-swiper-8c1b9f6d .swiper-slide {
        width: 100% !important;
    }
}

.layout-gallery-size .gi-image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 626 / 457;
    position: relative !important;
    overflow: hidden !important;
    line-height: 0;
    margin: 0;
}

.layout-gallery-size .gi-image-wrapper .gi-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.layout-gallery-size .gi-post-title {
    text-align: left;
    width: 100%;
}

/* ==========================================================================
   2. Tessellated Tiles Layout (.layout-tiles-size)
   ========================================================================== */
.elementor-widget-gallery_items_8c1b9f6d:has(.layout-tiles-size) {
    overflow: hidden !important;
    clip-path: none !important;
}

@media (max-width: 1024px) and (min-width: 768px) {
    .layout-tiles-size .gi-swiper-8c1b9f6d .swiper-slide {
        width: calc((100vw - 40px - 20px) / 2) !important;
    }
}

@media (max-width: 767px) {
    .layout-tiles-size .gi-swiper-8c1b9f6d .swiper-slide {
        width: 100% !important;
    }
}

.layout-tiles-size .gi-image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 303 / 403;
    position: relative !important;
    overflow: hidden !important;
    line-height: 0;
    margin: 0 auto;
}

.layout-tiles-size .gi-image-wrapper .gi-image,
.layout-tiles-size .gi-image-wrapper .gi-image-placeholder {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.layout-tiles-size .gi-post-title {
    text-align: center;
    width: 100%;
}

.layout-tiles-size {
    display: none !important;
}

/* ==========================================================================
   3. Find Your Style / Collections (.layout-collections-size)
   ========================================================================== */
.elementor-widget-gallery_items_8c1b9f6d:has(.layout-collections-size) {
    overflow: visible !important;
    clip-path: inset(-50px -4000px -100px 0px) !important;
}

.layout-collections-size .gi-swiper-8c1b9f6d {
    overflow: visible !important;
}

@media (max-width: 1024px) and (min-width: 768px) {
    .layout-collections-size .gi-swiper-8c1b9f6d .swiper-slide {
        width: calc((100vw - 40px - 20px) / 2) !important;
    }
   
}
@media (max-width: 1024px) and (min-width: 220px) {
 .gi-learn-more {
        font-size: 16px !important;
    }
}

@media (max-width: 767px) {
    .layout-collections-size .gi-swiper-8c1b9f6d .swiper-slide {
        width: 100% !important;
    }
}

.layout-collections-size .gi-image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 394 / 555;
    position: relative !important;
    overflow: hidden !important;
    line-height: 0;
    margin: 0;
}

.layout-collections-size .gi-image-wrapper .gi-image,
.layout-collections-size .gi-image-wrapper .gi-image-placeholder {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.gi-collections-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.85) 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 0px 0px 30px 32px !important;
    box-sizing: border-box !important;
    text-decoration: none;
    opacity: 1 !important;
    z-index: 2;
}

.gi-slide-number {
    font-family: 'Inter';
    color: #a6a891bf !important;
    font-size: 72px !important;
    font-weight: 400;
    line-height: 100%;
    margin-bottom: 7px !important;
    text-align: left;
    text-decoration: none !important;
}

.gi-collections-title {
    font-family: 'Inter';
    color: #ffffffeb !important;
    font-weight: 400;
    font-size: 39px !important;
    line-height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
    width: 100%;
}

@media (max-width: 767px) {
    .gi-collections-overlay {
        padding: 20px !important;
    }
    .gi-collections-title {
        font-size: 20px !important;
    }
    .gi-slide-number {
        font-size: 36px !important;
        margin-bottom: 4px !important;
    }
}

/* ==========================================================================
   3B. Borders Landscape Layout (.layout-borders-landscape-size)
   ========================================================================== */
.elementor-widget-gallery_items_8c1b9f6d:has(.layout-borders-landscape-size) {
    overflow: hidden !important;
    clip-path: none !important;
}

@media (max-width: 1024px) and (min-width: 768px) {
    .layout-borders-landscape-size .gi-swiper-8c1b9f6d .swiper-slide {
        width: calc((100vw - 40px - 20px) / 2) !important;
    }
}

@media (max-width: 767px) {
    .layout-borders-landscape-size .gi-swiper-8c1b9f6d .swiper-slide {
        width: 100% !important;
    }
}

.layout-borders-landscape-size .gi-image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 400 / 140;
    position: relative !important;
    overflow: hidden !important;
    line-height: 0;
    margin: 0 auto;
}

.layout-borders-landscape-size .gi-image-wrapper .gi-image,
.layout-borders-landscape-size .gi-image-wrapper .gi-image-placeholder {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.layout-borders-landscape-size .gi-post-title {
    text-align: center;
    width: 100%;
}

/* Applies whenever the "Rotate to Landscape" toggle is ON, regardless of
   which aspect-ratio option is selected — keeps individually-sized border
   items centred and gives a bit of breathing room between wide strips. */
.gi-borders-landscape.gi-carousel-wrapper-8c1b9f6d .gi-item-container {
    align-items: center;
}

.gi-borders-landscape.gi-carousel-wrapper-8c1b9f6d .gi-grid-layout-8c1b9f6d {
    align-items: center;
}

/* ==========================================================================
   3C. True 90° Image Rotation (fully responsive, no fixed pixels)
   ==========================================================================
   .gi-rotate-wrapper turns the .gi-image-wrapper into a "size" container so
   we can reference ITS OWN rendered width/height from inside via container
   query units (cqw/cqh). This is what lets a single portrait photo be spun
   90° and land pixel-perfect inside a landscape box AT ANY SCREEN SIZE —
   including small mobile widths — without ever using a fixed px value that
   could overflow the viewport.
   ========================================================================== */
.gi-rotate-wrapper {
    container-type: size;
    container-name: gi-rotate-box;
}

.gi-image-rotate-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Swap the wrapper's own axes: our width = wrapper's height,
       our height = wrapper's width. After a 90° spin this box's visual
       footprint becomes wrapper-width × wrapper-height — an exact fit. */
    width: 100cqh;
    height: 100cqw;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
}

/* Fallback for older browsers without Container Query support (rare as of
   2026, but safe to keep): falls back to the old crop/zoom cover behaviour
   instead of breaking layout entirely. */
@supports not (container-type: size) {
    .gi-image-rotate-inner {
        position: static;
        width: 100%;
        height: 100%;
        transform: none;
    }
}

/* ==========================================================================
   Global UI Components
   ========================================================================== */
.gi-image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.gi-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-decoration: none;
    z-index: 2;
}

@media (min-width: 1025px) {
    .gi-image-wrapper:hover .gi-image-overlay {
        opacity: 1;
    }
}

.gi-overlay-text {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.gi-item-container .gi-post-title {
    font-family: 'Inter', sans-serif;
    color: #000000;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    padding: 0;
    margin-top: 15px;
    margin-bottom: 0px;
}

@media (max-width: 767px) {
    .gi-item-container .gi-post-title {
        font-size: 16px;
        margin-top: 10px;
    }
}

.gi-item-container .gi-learn-more {
    font-family: 'Inter', sans-serif;
    color: #000000;
    text-decoration: underline;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 14px;
    display: inline-block;
    align-self: flex-start;
    margin-top: 10px;
    margin-bottom: 0px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.gi-item-container .gi-learn-more:hover {
    color: #333333;
}

.gi-collections-overlay,
.gi-collections-overlay:hover,
.gi-collections-overlay:focus {
    text-decoration: none !important;
    outline: none !important;
    border-bottom: none !important;
}


/* Base Grid System for Independent Modules */
.tile-factory-grid-layout {
    display: grid;
    width: 100%;
}

/* Card Structures */
.tile-card-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.tile-card-item .image-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
}

.tile-card-item img {
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
}

.tile-card-title {
    font-family: "Segoe UI", sans-serif;
    font-size: 16px;
    margin: 8px 0 0 0;
    color: #333;
}

         .gi-image-wrapper {
                position: relative;
                overflow: hidden;
            }
            .gi-image-overlay {
                display: flex !important;
                align-items: center;
                justify-content: center;
                text-decoration: none !important;
            }
            .gi-overlay-content-new {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 3px; 
                text-align: center;
                opacity: 0;
                transform: translateY(15px);
                transition: all 0.3s ease-in-out;
            }
            .gi-image-overlay:hover .gi-overlay-content-new {
                opacity: 1;
                transform: translateY(0);
            }
            /* Styling for your custom SVG URL element */
            .gi-overlay-custom-icon {
                width: 73px; 
                height: auto;
                display: block;
                object-fit: contain;
            }
            
            /* Custom Typography & Dual Color Implementation according to your specs */
            .gi-overlay-text {
                display: block !important;
                margin: 4px 0px 0px 0px !important;
                font-family: 'Poppins', sans-serif !important;
                font-size: 20px !important;
                font-weight: 500 !important;
                line-height: 100% !important;
                letter-spacing: 0% !important;
            }
            .gi-text-view {
                color: #FFFFFF !important; /* Pure White color for View */
                margin-right: 6px; /* Space between View and Project */
            }
            .gi-text-project {
                color: #A6A891 !important; /* Specific #A6A891 color for Project */
            }
/* ==========================================================
   Patterns post type — grey hover overlay with "View Project"
   ========================================================== */

/* Make sure the wrapper can host an absolutely positioned overlay */
.gi-item-container .gi-image-wrapper {
    position: relative;
}

/* The overlay itself: semi-transparent grey, covers the whole image,
   hidden by default, fades in on hover */
.gi-pattern-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: rgb(206 206 206 / 70%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    text-decoration: none;
    z-index: 2;
}

.gi-image-wrapper:hover .gi-pattern-overlay {
    opacity: 1;
    visibility: visible;
}

.gi-pattern-overlay-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    padding: 0 15px;
}
/* ==========================================================================
   EXCLUSIVE FIXES: Button Padding (1430px to 1024px)
   ========================================================================== */
@media (max-width: 1430px) and (min-width: 1024px) {
    .footer-enquire-btn .elementor-button,
    .contact-btn .elementor-button {
        padding: 0px !important;
    }
}
.elementor-13 .elementor-element.elementor-element-5e687e9 .gi-item-container .gi-learn-more {
    margin-top: 15px;
    height: 100% !important;
}



/* ==========================================================================
   Mobile Pagination Dots (Swiper only) — Fixed Shift & Sticking Issue (ULTRA SMOOTH)
   ========================================================================== */
.gi-swiper-8c1b9f6d .swiper-pagination {
    display: none;
}

@media (max-width: 767px) {
    .gi-carousel-wrapper-8c1b9f6d[data-post-type="patterns"] .gi-mobile-extra-item {
        display: none !important;
    }
    .gi-carousel-wrapper-8c1b9f6d.display-swiper {
        padding-bottom: 28px !important;
    }
    
    .gi-swiper-8c1b9f6d .swiper-pagination {
        display: flex !important;
        position: static !important;
        justify-content: center;
        align-items: center;
        gap: 8px; /* Safe gap to prevent sticking */
        margin-top: 28px;
        width: 100%;
        /* Hardware Acceleration triggers */
        transform: translate3d(0, 0, 0); 
        -webkit-transform: translate3d(0, 0, 0);
    }
    
    /* Standard Base Bullet Style */
    .gi-swiper-8c1b9f6d .swiper-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        margin: 0 !important;
        border-radius: 10px; /* FIXED: Kept same as active state to prevent radius jerk */
        background: #000000;
        opacity: 0.25;
        display: inline-block;
        
        /* Optimized hardware acceleration hooks */
        will-change: width, opacity;
        /* FIXED: Synced timing (0.3s) with standard Swiper physics */
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Active Bullet Expansion - Butter Smooth Pill Shift */
    .gi-swiper-8c1b9f6d .swiper-pagination .swiper-pagination-bullet-active {
        width: 22px; /* Your favorite expansion look preserved */
        opacity: 1;
        border-radius: 10px; /* Clean pill shape */
        background: #000000;
    }
}