/* Container and Outer spacing */
.montagut-widget-container-e9b80812 {
    display: flex;
    flex-direction: column;
    gap: 30px;
    font-family: 'Montserrat', sans-serif;
    width: 100%;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Hero section columns layout: EXACT 40% and 60% split */
.montagut-hero-section {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 40px;
    align-items: center;
    position: relative;
    width: 100% !important;
    box-sizing: border-box;
}

/* Left Column styling (40% width) */
.montagut-left-column {
    flex: 0 0 38% !important;
    width: 38% !important;
    max-width: 38% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.montagut-subtitle {
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #e52b2b; /* Montagut Red */
    margin-bottom: 12px;
    text-transform: uppercase;
}

.montagut-main-title {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.2;
    color: #1a1a1a;
    margin-bottom: 24px;
    margin-top: 0;
}

.montagut-view-all {
    font-size: 11px;
    font-weight: 700;
    color: #e52b2b;
    text-decoration: none;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s;
    text-transform: uppercase;
}

.montagut-view-all:hover {
    transform: translateX(4px);
}

/* Right Column (60% width) */
.montagut-right-column {
    flex: 0 0 58% !important;
    width: 58% !important;
    max-width: 58% !important;
    position: relative;
    overflow: hidden !important; /* Prevents Swiper overflow */
    box-sizing: border-box;
}

.montagut-swiper {
    width: 100% !important;
    overflow: hidden !important;
    position: relative;
}

/* Let Swiper handle transitions natively */
.montagut-swiper .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
}

/* Let Swiper calculate slides sizes, with minimal CSS margin to prevent stretching */
.montagut-swiper .swiper-slide {
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.montagut-carousel-image {
    width: 100% !important;
    height: 280px; /* Overwritten dynamically by slider */
    object-fit: cover !important;
    display: block !important;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.05);
}

/* Circular floating navigation buttons overlap styling like screenshot */
.montagut-swiper-button-prev,
.montagut-swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: #ffffff;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 99 !important;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.montagut-swiper-button-prev:hover,
.montagut-swiper-button-next:hover {
    background-color: #e52b2b;
    color: #ffffff;
    transform: translateY(-50%) scale(1.05);
}

.montagut-swiper-button-prev {
    left: -24px;
}

.montagut-swiper-button-next {
    right: -24px;
}

/* CTA BANNER: Bottom banner design with rounded corners */
.montagut-cta-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #222222; /* Dark slate background */
    border-radius: 12px;
    padding: 24px 40px;
    color: #ffffff;
    gap: 20px;
    margin-top: 15px;
}

.montagut-cta-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.montagut-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #bd1a1a; /* Elegant red */
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 14px 26px;
    border-radius: 6px;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background-color 0.2s, transform 0.2s;
    white-space: nowrap;
}

.montagut-cta-button:hover {
    background-color: #e52b2b;
    transform: translateY(-2px);\n}\n\n.montagut-arrow {\n    display: inline-block;\n    transition: transform 0.2s;\n}\n\n/* Mobile & Tablet Responsiveness */\n@media (max-width: 1024px) {\n    .montagut-hero-section {\n        flex-direction: column !important;\n        gap: 30px;\n    }\n    \n    .montagut-left-column {\n        flex: 0 0 100% !important;\n        width: 100% !important;\n        max-width: 100% !important;\n        align-items: center;\n        text-align: center;\n    }\n\n    .montagut-right-column {\n        flex: 0 0 100% !important;\n        width: 100% !important;\n        max-width: 100% !important;\n    }\n\n    .montagut-swiper-button-prev {\n        left: 5px;\n    }\n    \n    .montagut-swiper-button-next {\n        right: 5px;\n    }\n}\n\n@media (max-width: 767px) {\n    .montagut-main-title {\n        font-size: 26px;\n    }\n\n    .montagut-cta-banner {\n        flex-direction: column;\n        text-align: center;\n        padding: 25px 20px;\n    }\n\n    .montagut-cta-title {\n        font-size: 18px;\n    }\n\n    .montagut-cta-button {\n        width: 100%;\n        justify-content: center;\n    }\n}\n"
      }
    },
    {
      "filename": "script.js",
      "content": "class MontagutCarouselHandler extends elementorModules.frontend.handlers.Base {\n    getDefaultSettings() {\n        return {\n            selectors: {\n                container: '.montagut-swiper',\n                prevButton: '.montagut-swiper-button-prev',\n                nextButton: '.montagut-swiper-button-next'\n            }\n        };\n    }\n\n    getDefaultElements() {\n        const selectors = this.getSettings('selectors');\n        return {\n            $container: this.$element.find(selectors.container),\n            $prevButton: this.$element.find(selectors.prevButton),\n            $nextButton: this.$element.find(selectors.nextButton)\n        };\n    }\n\n    bindEvents() {\n        this.initSwiper();\n    }\n\n    initSwiper() {\n        const $container = this.elements.$container;\n        if (!$container.length) {\n            return;\n        }\n\n        const swiperOptions = {\n            slidesPerView: 3,\n            spaceBetween: 20,\n            loop: true,\n            grabCursor: true,\n            observer: true,\n            observeParents: true,\n            navigation: {\n                nextEl: this.elements.$nextButton[0],\n                prevEl: this.elements.$prevButton[0],\n            },\n            breakpoints: {\n                0: {\n                    slidesPerView: 1,\n                    spaceBetween: 10\n                },\n                768: {\n                    slidesPerView: 2,\n                    spaceBetween: 15\n                },\n                1024: {\n                    slidesPerView: 3,\n                    spaceBetween: 20\n                }\n            }\n        };\n\n        // Safe initializations\n        if (typeof Swiper !== 'undefined') {\n            new Swiper($container[0], swiperOptions);\n        } else if (typeof elementorFrontend.utils !== 'undefined' && typeof elementorFrontend.utils.swiper !== 'undefined') {\n            new elementorFrontend.utils.swiper($container, swiperOptions).then((newSwiperInstance) => {\n                // Swiper initialised\n            });\n        }\n    }\n}\n\njQuery(window).on('elementor/frontend/init', () => {\n    const addHandler = ($element) => {\n        elementorFrontend.elementsHandler.addHandler(MontagutCarouselHandler, { $element });\n    };\n    elementorFrontend.hooks.addAction('frontend/element_ready/featured_projects_cta_e9b80812.default', addHandler);\n});\n"
    }
  ],
  type: