.elementor-283 .elementor-element.elementor-element-6c447af{--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:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-739569e */:root{
    --primary:#43a2a2;
    --accent:#ffd836;
    --light:#f4f9f9;
    --dark:#1f2d2d;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Boogiela','Poppins',sans-serif;
    background:var(--light);
    color:var(--dark);
    line-height:1.7;
}

h1,h2,h3{
    font-family:'Bright Aura','Poppins',sans-serif;
    color:var(--primary);
}

/* HERO */
.hero{
    text-align:center;
    padding:100px 20px 80px;
    background:linear-gradient(135deg, #ffffff 0%, #f4f9f9 100%);
    position:relative;
}

.hero::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:2px;
    background:linear-gradient(90deg, transparent, var(--primary), transparent);
}

.hero h1{
    font-size:3.5rem;
    margin-bottom:20px;
    background:linear-gradient(135deg, var(--primary), #2d7878);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.sub-line{
    font-size:1.5rem;
    color:var(--primary);
    margin-bottom:35px;
    font-weight:600;
}

.hero p{
    max-width:900px;
    margin:auto;
    font-size:1.15rem;
    line-height:1.8;
    color:#2d4545;
}

/* STRUCTURE */
.structure{
    padding:80px 20px;
    text-align:center;
    background:white;
}

.structure h2{
    font-size:2.2rem;
    margin-bottom:50px;
}

.comparison-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    max-width:1100px;
    margin:0 auto;
}

.comparison-card{
    padding:40px 30px;
    border-radius:20px;
    position:relative;
    overflow:hidden;
}

.comparison-card.without{
    background:linear-gradient(135deg, #ffe6e6 0%, #fff0f0 100%);
    border:2px solid #ffcccc;
}

.comparison-card.with{
    background:linear-gradient(135deg, #e6f9f9 0%, #f0fffe 100%);
    border:2px solid var(--primary);
}

.comparison-card h3{
    font-size:1.5rem;
    margin-bottom:25px;
}

.comparison-card.without h3{
    color:#d63636;
}

.comparison-card ul{
    list-style:none;
    text-align:left;
}

.comparison-card li{
    margin:15px 0;
    font-size:1.05rem;
    padding-left:35px;
    position:relative;
}

.comparison-card.without li::before{
    content:'✕';
    position:absolute;
    left:0;
    color:#d63636;
    font-size:1.3rem;
    font-weight:bold;
}

.comparison-card.with li::before{
    content:'✓';
    position:absolute;
    left:0;
    color:var(--primary);
    font-size:1.3rem;
    font-weight:bold;
}

.structure-quote{
    margin-top:50px;
    font-size:1.3rem;
    color:var(--primary);
    font-weight:600;
    font-style:italic;
}

/* SUCCESS STORIES */
.success-stories{
    padding:100px 20px;
    background:linear-gradient(180deg, #f4f9f9 0%, #ffffff 100%);
}

.section-header{
    text-align:center;
    margin-bottom:70px;
}

.section-header h2{
    font-size:2.8rem;
    margin-bottom:15px;
}

.section-header p{
    font-size:1.15rem;
    color:#2d4545;
    max-width:700px;
    margin:0 auto;
}

.stories-container{
    max-width:1200px;
    margin:0 auto;
}

.story-card{
    background:white;
    border-radius:25px;
    overflow:hidden;
    margin-bottom:50px;
    box-shadow:0 10px 40px rgba(67,162,162,0.1);
    transition:all 0.4s ease;
}

.story-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 50px rgba(67,162,162,0.15);
}

.story-header{
    background:linear-gradient(135deg, var(--primary), #2d7878);
    color:white;
    padding:30px 40px;
    text-align:center;
}

.story-header h3{
    color:white;
    font-size:1.8rem;
    margin:0;
}

.story-content{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:0;
}

.before-section, .after-section{
    padding:45px 40px;
}

.before-section{
    background:linear-gradient(135deg, #fff8f8 0%, #ffffff 100%);
    border-right:2px solid var(--light);
}

.after-section{
    background:linear-gradient(135deg, #f0fffe 0%, #ffffff 100%);
    border-left:2px solid var(--light);
}

.stage-label{
    font-size:0.9rem;
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:700;
    margin-bottom:15px;
    display:inline-block;
    padding:6px 16px;
    border-radius:20px;
}

.before-section .stage-label{
    background:#ffe6e6;
    color:#d63636;
}

.after-section .stage-label{
    background:#e6f9f9;
    color:var(--primary);
}

.stage-content{
    font-size:1.05rem;
    line-height:1.8;
    color:#2d4545;
}

.transformation-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:45px 30px;
    background:white;
    position:relative;
}

.arrow-icon{
    width:50px;
    height:50px;
    background:linear-gradient(135deg, var(--accent), #ffc107);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    color:var(--dark);
    font-weight:bold;
    box-shadow:0 5px 15px rgba(255,216,54,0.3);
}

.change-highlight{
    background:linear-gradient(135deg, var(--light) 0%, #ffffff 100%);
    padding:40px;
    text-align:center;
    border-top:3px solid var(--accent);
    border-bottom:3px solid var(--accent);
}

.change-highlight h4{
    color:var(--primary);
    font-size:1.2rem;
    margin-bottom:15px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.change-highlight p{
    font-size:1.05rem;
    color:#2d4545;
    line-height:1.7;
    font-weight:500;
}

/* CLOSING */
.closing{
    padding:100px 20px;
    text-align:center;
    background:linear-gradient(135deg, #ffffff 0%, #f4f9f9 100%);
}

.closing h2{
    font-size:2.5rem;
    margin-bottom:30px;
}

.closing p{
    max-width:850px;
    margin:20px auto;
    font-size:1.2rem;
    line-height:1.8;
    color:#2d4545;
}

.closing .highlight{
    color:var(--primary);
    font-weight:600;
}

/* ============================= */
/* MOBILE RESPONSIVE */
/* ============================= */

@media(max-width:968px){
    .comparison-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .story-content{
        grid-template-columns:1fr;
    }

    .before-section{
        border-right:none;
        border-bottom:2px solid var(--light);
    }

    .after-section{
        border-left:none;
        border-top:2px solid var(--light);
    }

    .transformation-arrow{
        padding:25px;
    }

    .arrow-icon{
        transform:rotate(90deg);
    }
}

@media(max-width:768px){
    .hero{
        padding:60px 20px 50px;
    }

    .hero h1{
        font-size:2.2rem;
    }

    .sub-line{
        font-size:1.2rem;
    }

    .hero p{
        font-size:1rem;
    }

    .structure{
        padding:60px 20px;
    }

    .structure h2{
        font-size:1.8rem;
        margin-bottom:35px;
    }

    .comparison-card{
        padding:30px 20px;
    }

    .comparison-card h3{
        font-size:1.3rem;
    }

    .comparison-card li{
        font-size:0.95rem;
        padding-left:30px;
    }

    .structure-quote{
        font-size:1.1rem;
        margin-top:40px;
    }

    .success-stories{
        padding:60px 20px;
    }

    .section-header h2{
        font-size:2rem;
    }

    .section-header p{
        font-size:1rem;
    }

    .story-card{
        margin-bottom:35px;
    }

    .story-header{
        padding:25px 20px;
    }

    .story-header h3{
        font-size:1.4rem;
    }

    .before-section, .after-section{
        padding:30px 20px;
    }

    .stage-label{
        font-size:0.8rem;
        letter-spacing:1.5px;
    }

    .stage-content{
        font-size:0.95rem;
    }

    .change-highlight{
        padding:30px 20px;
    }

    .change-highlight h4{
        font-size:1rem;
    }

    .change-highlight p{
        font-size:0.95rem;
    }

    .closing{
        padding:60px 20px;
    }

    .closing h2{
        font-size:1.8rem;
    }

    .closing p{
        font-size:1rem;
    }
}/* End custom CSS */