/* ===========================================
   HERO
=========================================== */

.tpc-hero{

    padding:60px 0 90px;

}

.tpc-hero-card{

    background:linear-gradient(
        135deg,
        #14532d 0%,
        #166534 60%,
        #16a34a 100%
    );

    border-radius:34px;

    overflow:hidden;

    box-shadow:
        0 20px 60px rgba(0,0,0,.10);

}

.tpc-hero-grid{

    display:grid;

    grid-template-columns:42% 58%;

    min-height:620px;

    align-items:stretch;

}

.tpc-hero-content{

    padding:60px 55px 60px 60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}
    
/* ===========================================
   LEFT
=========================================== */

.tpc-badge{

    display:inline-flex;

    align-items:center;

    padding:12px 22px;

    border-radius:999px;

    background:rgba(255,255,255,.10);

    color:#ffffff;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.05em;

    margin-bottom:30px;

}

.tpc-hero-title{

    font-size:4rem;

    line-height:1.02;

    font-weight:800;

    color:#ffffff;

    letter-spacing:-.04em;

    margin-bottom:26px;

}

.tpc-hero-title span{

    display:block;

    color:#bbf7d0;

}

.tpc-hero-description{

    font-size:1.15rem;

    line-height:1.9;

    color:rgba(255,255,255,.88);

    max-width:580px;

    margin-bottom:36px;

}

/* ===========================================
   FEATURES
=========================================== */

.tpc-hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:42px;

}

.tpc-hero-features span{

    padding:12px 18px;

    border-radius:999px;

    background:rgba(255,255,255,.10);

    color:#fff;

    font-size:.9rem;

    font-weight:600;

}

/* ===========================================
   BUTTON
=========================================== */

.tpc-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    background:#ffffff;

    color:#166534;

    border-radius:14px;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.tpc-btn:hover{

    transform:translateY(-2px);

}

/* ===========================================
   IMAGE
=========================================== */

/* ===========================================
   HERO IMAGE
=========================================== */

.tpc-hero-image{
    position:relative;
    height:100%;
    min-height:620px;
    align-self:stretch;
    overflow:hidden;
}

.tpc-hero-image > img{

    position:absolute !important;

    top:0 !important;
    left:0 !important;

    width:100% !important;
    height:100% !important;

    display:block !important;

    object-fit:cover !important;
    object-position:center center !important;

    max-width:none !important;
    max-height:none !important;
}
/* ===========================================
   IMAGE FADE
=========================================== */

.tpc-hero-image::before{

    content:"";
    position:absolute;
    inset:0;
    width:42%;
    z-index:5;
    pointer-events:none;

    background:linear-gradient(
        to right,
        #166534 0%,
        rgba(22,101,52,.98) 12%,
        rgba(22,101,52,.92) 30%,
        rgba(22,101,52,.55) 55%,
        rgba(22,101,52,.18) 80%,
        transparent 100%
    );
}

@media (max-width:991px){

.tpc-hero-grid{

    grid-template-columns:1fr;

}

.tpc-hero-content{

    padding:50px 35px;

}

.tpc-hero-image{

    height:360px;
    min-height:360px;
}


}