.elementor-1241 .elementor-element.elementor-element-a38721d{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1241 .elementor-element.elementor-element-25d3d0d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1241 .elementor-element.elementor-element-ae0bb95{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1241 .elementor-element.elementor-element-7c1ae1c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1241 .elementor-element.elementor-element-9ed3bd3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1241 .elementor-element.elementor-element-0c8f89c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for container, class: .elementor-element-a38721d *//* --- FIX FOR TABLET & MOBILE (Paste this at the end of your CSS) --- */

@media (max-width: 1024px) {
    /* 1. Force Slider Height on Tablet/Mobile */
    .hero-slider {
        height: 100vh !important; /* Forces full screen height */
        min-height: 600px !important; /* Ensures it never gets too short */
        width: 100% !important;
    }

    /* 2. Force Image to Cover the Area */
    .slide-bg {
        width: 100% !important;
        height: 100% !important;
        
        /* This is the key property: it crops the image to fill the space */
        object-fit: cover !important; 
        
        object-position: center !important;
        transform: none !important; /* Disables zoom animation to prevent glitching */
    }
    
    /* Optional: Center text better on smaller screens */
    .hero-content {
        width: 90% !important;
        max-width: 100% !important;
    }
}/* End custom CSS */