/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Custom Hero Styles for Full-Width Right Side */
.main-hero {
    overflow: hidden !important;
    position: relative !important;
}

/* Target the Inner Container of Elementor to allow the right side to bleed out */
.main-hero > .e-con-inner {
    position: static !important;
    max-width: 1250px !important; /* Adjust to your site's boxed width */
    margin: 0 auto !important;
    display: flex !important;
}

/* Right Side Background - Absolute to the main container, width 33.33vw */
.hero-right-bg {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 33.33vw !important;
    z-index: 1 !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Left Side Content - Relative to stay above the absolute right bg */
.hero-left-bg {
    position: relative !important;
    z-index: 2 !important;
    width: 66.66% !important;
    background: transparent !important;
}

/* Fix for when the screen is smaller than the boxed width */
@media (max-width: 1200px) {
    .main-hero > .e-con-inner {
        padding: 0 20px !important;
    }
}

/* Mobile: Reset to stacked layout and handle padding */
@media (max-width: 1024px) {
    .main-hero > .e-con-inner {
        flex-direction: column !important;
        padding: 0 !important; /* Remove the container padding to allow full-width children */
    }
    .hero-right-bg {
        position: relative !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .hero-left-bg {
        width: 100% !important;
        background-position: left !important;
        padding: 20px !important; /* Apply the 20px padding ONLY to the content area */
    }
}

/* Mobile hero image: full-width with product centered */
@media (max-width: 767px) {
    .hero-right-bg {
        background-size: 100% auto !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 10 !important;
    }

    .elementor-19 .elementor-element.elementor-element-ee178ea {
        --min-height: 0px !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 10 !important;
    }

    .elementor-19 .elementor-element.elementor-element-ee178ea:not(.elementor-motion-effects-element-type-background),
    .elementor-19 .elementor-element.elementor-element-ee178ea > .elementor-motion-effects-container > .elementor-motion-effects-layer {
        background-size: 100% auto !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .elementor-19 .elementor-element.elementor-element-ee178ea::before {
        background-size: 100% auto !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
}

/* Elementor Lightbox: pull text closer to image with negative margin */
.elementor-lightbox footer.elementor-slideshow__footer {
    padding-top: 0 !important;
}

.elementor-lightbox .elementor-slideshow__title {
    margin-top: -40px !important;
}

/* Remove default Hello Elementor #c36 accent color across the project */
button, 
[type="button"], 
[type="reset"], 
[type="submit"],
a,
.elementor-button {
    border-color: inherit;
}

button:active,
[type="button"]:active,
[type="submit"]:active,
.elementor-button:active {
    background-color: transparent !important;
}

/* Specifically target any element that might have this background color */
[style*="background-color: #c36"],
[style*="background-color:#c36"],
[style*="background: #c36"],
[style*="background:#c36"] {
    background-color: transparent !important;
}

/* Global override for any element that might be using #c36 */
*:active, *:focus {
    outline-color: transparent !important;
}



/* If you want to replace it with the project's green instead of just removing it, 
   uncomment the lines below. For now, we just "remove" it as requested. */
/*
button, [type="submit"] {
    border-color: #769B26 !important;
    color: #769B26 !important;
}
button:hover, [type="submit"]:hover {
    background-color: #769B26 !important;
    color: #fff !important;
}
*/