.hero{
        width:100%;
        min-height:650px;
        position:relative;
        background-color:#ffffff;
        background-image:url("../images/hero.webp");
        background-repeat:no-repeat;
        background-position:right -50px;
        background-size:auto 100%;
        overflow:hidden;
        display:flex;
        align-items:flex-start;
        padding:25px 0 50px;
    }

    .hero-container{
        width:100%;
        max-width:1500px;
        margin:0 auto;
        padding:0 35px;
        position:relative;
        z-index:5;
    }

    .hero-content{
        width:48%;
        max-width:620px;
        position:relative;
        z-index:10;
        top:-30px;
    }

    .hero-badge{
        display:inline-flex;
        align-items:center;
        gap:10px;
        color:#0F5132;
        font-size:14px;
        font-weight:600;
        text-transform:uppercase;
        letter-spacing:1px;
        margin-bottom:12px;
    }

    .hero-badge i{
        color:#0F5132;
        font-size:15px;
    }

    .hero h1{
        margin:0 0 12px;
        font-size:30px;
        font-weight:600;
        line-height:1.08;
        letter-spacing:-0.5px;
        color:#103B2D;
        max-width:900px;
    }

    .hero h1 span{
        display:block;
        color:#F58220;
        font-size:34px;
        font-weight:750;
    }

    .hero h2{
        margin:0 0 15px;
        font-size:31px;
        font-weight:700;
        line-height:1.2;
        color:#103B2D;
        max-width:650px;
    }

    .hero h2 span{
        color:#F58220;
    }

    .hero-short{
        margin:0 0 12px;
        max-width:620px;
        font-size:20px;
        font-weight:600;
        line-height:1.5;
        color:#222222;
    }

    .hero-text{
        margin:0 0 22px;
        max-width:620px;
        font-size:17px !important;

        font-weight: 500;
        color:#666666;
    }

    .hero-buttons{
        display:flex;
        align-items:center;
        gap:18px;
        flex-wrap:wrap;
    }

    .primary-btn,
    .outline-btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        padding:14px 28px;
        border-radius:50px;
        text-decoration:none;
        font-size:15px;
        font-weight:600;
        transition:all .3s ease;
    }

    .primary-btn{
        background:#0F5132;
        color:#ffffff;
        border:2px solid #0F5132;
    }

    .primary-btn:hover{
        background:#F58220;
        border-color:#F58220;
        color:#ffffff;
    }

    .outline-btn{
        background:#ffffff;
        color:#0F5132;
        border:2px solid #0F5132;
    }

    .outline-btn:hover{
        background:#0F5132;
        color:#ffffff;
    }

    .hero-feature-icon{
        font-size:23px;
    }

    .hero-feature-text h4{
        font-size:15px;
        font-weight:700;
        line-height:1.35;
        color:#103B2D;
    }
@media (max-width:991.98px){

    .hero{
        background-image:none;
        min-height:auto;
        padding:50px 0;
    }

    .hero-container{
        padding:0 25px;
    }

    .hero-content{
        width:100%;
        max-width:100%;
        margin:0 auto;
        top:0;
        text-align:center;
    }

    .hero-badge{
        justify-content:center;
    }

    .hero h1{
        max-width:100%;
        font-size:34px;
        line-height:1.2;
    }

    .hero h1 span{
        font-size:36px;
    }

    .hero h2{
        max-width:100%;
        font-size:26px;
    }

    .hero-short{
        max-width:100%;
        font-size:18px;
    }

    .hero-text{
        max-width:100%;
        font-size:15px !important;
        line-height:1.8;
        margin:0 auto 25px;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
        gap:15px;
    }
}

@media (max-width:576px){

    .hero{
        padding:40px 0;
    }

    .hero-container{
        padding:0 18px;
    }

    .hero h1{
        font-size:28px;
    }

    .hero h1 span{
        font-size:30px;
    }

    .hero h2{
        font-size:22px;
    }

    .hero-short{
        font-size:16px;
    }

    .hero-text{
        font-size:14px !important;
        line-height:1.7;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
        gap:12px;
    }

    .primary-btn,
    .outline-btn{
        width:100%;
        max-width:300px;
    }

    .hero-short br,
    .hero-text br{
        display:none;
    }
}