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

.homecare-hero{
    padding:90px 0;

    background:
    linear-gradient(
        135deg,
        #EAFBF8,
        #FFFFFF
    );
}

.homecare-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;
}

.homecare-label{
    display:inline-block;

    background:
    rgba(14,159,141,.1);

    color:#0E9F8D;

    padding:8px 16px;

    border-radius:30px;

    font-size:12px;
    font-weight:700;
}

.homecare-content h1{
    margin-top:18px;

    font-size:54px;

    font-weight:800;

    line-height:1.1;
}

.homecare-content p{
    margin-top:18px;

    color:#6B7280;

    line-height:1.9;
}

.homecare-btn{
    display:inline-block;

    margin-top:30px;

    background:#0E9F8D;

    color:#fff;

    text-decoration:none;

    padding:14px 28px;

    border-radius:50px;
}

.homecare-image img{
    width:100%;
}

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

.homecare-about{
    padding:90px 0;
}

.homecare-features{
    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:24px;
}

.homecare-card{
    background:#fff;

    border-radius:24px;

    padding:30px;

    text-align:center;

    box-shadow:
    0 10px 25px rgba(0,0,0,.05);
}

.homecare-card i{
    font-size:36px;

    color:#0E9F8D;

    margin-bottom:15px;
}

.homecare-card h4{
    margin-bottom:10px;
}

/* =========================
   FLOW
========================= */

.homecare-flow{
    background:#F9FAFB;

    padding:90px 0;
}

.flow-grid{
    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:30px;
}

.flow-item{
    text-align:center;
}

.flow-number{
    width:70px;
    height:70px;

    margin:auto auto 20px;

    border-radius:50%;

    background:#0E9F8D;

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:26px;
    font-weight:700;
}
/* =========================
   HOME CARE MOBILE
========================= */
/* =========================
   FLOW MOBILE
========================= */

@media(max-width:768px){

    .flow-grid{
        grid-template-columns:1fr;
        gap:0;
    }

    .flow-item{
        position:relative;

        text-align:center;

        padding-bottom:50px;
    }

    .flow-number{
        width:60px;
        height:60px;

        margin:0 auto 15px;

        border-radius:50%;

        background:#0E9F8D;
        color:#fff;

        display:flex;
        align-items:center;
        justify-content:center;

        font-size:22px;
        font-weight:700;

        position:relative;
    }

    /* GARIS TIMELINE */
    .flow-item:not(:last-child) .flow-number::after{

        content:'';

        position:absolute;

        left:50%;
        top:100%;

        transform:translateX(-50%);

        width:2px;
        height:50px;

        background:#0E9F8D;
    }

}