.elementor-27 .elementor-element.elementor-element-2fc69a8{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}@media(max-width:767px){.elementor-27 .elementor-element.elementor-element-2fc69a8{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}}@media(min-width:768px){.elementor-27 .elementor-element.elementor-element-2fc69a8{--width:100vw;}}/* Start custom CSS *//* ===== 
   HERO BRAND
   TYPOGRAPHY
   ===== */
.hero-text-wrapper {
    width: 100%;
    text-align: center;
}

.brand-name-top {
    margin: 0;
}

.hero-DeltAp,
.hero-Solutions {
    font-family: 'Stem SemiLight', sans-serif;
    line-height: 1; 
    display: block;
    width: 100%;
}

.hero-DeltAp {
    color: var(--e-global-color-primary);
    font-weight: bold;
    font-size: clamp(2.5rem, 8.5vw + 1.5rem, 8.75rem);
    letter-spacing: 0.08em;
    padding-left: 0.08em;
    margin-top: 5.5rem; 
}

.hero-Solutions {
    color: var(--e-global-color-secondary);
    font-weight: bold;
    font-size: clamp(1.875rem, 4.3vw + 1rem, 6.25rem);
    margin-top: 0.1rem; 
    letter-spacing: 0.08em;
    padding-right: 0.08em;
}

.hero-slogan-h1 {
    color: var(--e-global-color-text);
    font-weight: 500; 
    line-height: 1.3;
    margin-top: 1.2rem; 
    font-size: clamp(1.125rem, 1.2vw + 0.8rem, 1.6875rem);
    text-wrap: balance; 
}

/* ===== 
   OPTIMIZED UI
   ANIMATION 
   ENGINE 
   ===== */
.anim-delta,
.anim-hero-DeltAp,
.anim-hero-Solutions,
.hero-slogan-h1 {
    opacity: 1;
    transform: none;
}

.anim-delta {
    flex-shrink: 0;
    min-width: var(--icon-size);
    width: var(--icon-size);
}

.anim-delta img {
    max-width: 100%;
    height: auto;
}

@media (prefers-reduced-motion: no-preference) {
    .anim-delta,
    .anim-hero-DeltAp,
    .anim-hero-Solutions,
    .hero-slogan-h1 {
        opacity: 0;
        animation-fill-mode: forwards;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }

    .anim-delta,
    .anim-hero-DeltAp,
    .anim-hero-Solutions {
        will-change: transform, opacity;
    }

    .hero-slogan-h1 {
        will-change: opacity;
        animation-name: sloganFadeIn;
        animation-duration: 350ms;
        animation-delay: 1500ms;
        animation-timing-function: ease-in;
    }

    .anim-delta {
        animation-name: hero-zoomInSoft;
        animation-duration: 0.6s;
        animation-delay: 0s;
    }

    .anim-hero-DeltAp {
        animation-name: hero-fadeSlideRight;
        animation-duration: 0.8s;
        animation-delay: 0.5s;
    }

    .anim-hero-Solutions {
        animation-name: hero-fadeSlideUp;
        animation-duration: 0.8s;
        animation-delay: 1s;
    }
}

/* =====
   PARENT CONTAINERS 
   ===== */
.split-container.e-con {
    width: 100vw;
    height: 100vh;
    gap: 0 !important;
    padding: 0 !important;
    position: sticky;
    top: 0;
    z-index: 1;
}

.split-container > .e-con {
    width: 50%;
    padding: 0 !important;
    margin: 0 !important;
}

/* =====
   CONTAINERS
   ===== */
.text-container {
    color: var(--e-global-color-secondary);
    justify-content: center;
    position: relative;
}

.text-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: -35px;
    width: 50px; 
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,1) 100%);
    pointer-events: none;
    z-index: 2;
}

.img-dynamic-container {
    position: relative;
}

.img-dynamic-container img {
    object-fit: cover;
    object-position: top left;
    width: 100%;
    height: 100%;
    display: block;
}

.img-dynamic-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.85) 90%, rgba(0,0,0,1) 100%);
    pointer-events: none;
    z-index: 1;
}

/* =====
   IMAGE
   BEFORE / AFTER
   ===== */
.before-after-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.before-after-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-before-clip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
}

.img-before-clip img {
    width: 100vw;
    max-width: none;
}

.slider-line {
    position: absolute;
    top: 0;
    left: 100%;
    width: 3px;
    height: 100%;
    background: #ffffff;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    z-index: 3;
    transform: translateX(-50%);
}

/* ===== 
   KEYFRAMES
   ===== */
@keyframes hero-zoomInSoft {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes hero-fadeSlideRight {
    0% { opacity: 0; transform: translateX(2rem); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes hero-fadeSlideUp {
    0% { opacity: 0; transform: translateY(1.5rem); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes sloganFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* =====
   RESPONSIVE
   OVERRIDES
   ===== */
@media (max-width: 768px) {
    .hero-DeltAp {
        margin-top: 0;
    }
    
    .split-container.e-con {
        flex-direction: column !important;
        height: 100vh !important;
        min-height: 100vh !important;
    }
    
    .split-container > .e-con {
        width: 100% !important;
        height: 50vh !important;
        min-height: 50vh !important;
    }
    
    .text-container {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .img-dynamic-container::after {
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,1) 100%);
    }

    .text-container::before {
        top: -40px; 
        left: 0;
        width: 100%;
        height: 40px;
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
        z-index: 5;
    }
}/* End custom CSS */