/* ======================================
   LEFT COLUMN
====================================== */

.dashboard-left-column{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:24px;
}

/* ======================================
   WELCOME
====================================== */

.dashboard-welcome h1{
    font-size:48px;
    font-weight:700;
    line-height:1.1;
    color:#1C1C1C;

    margin-bottom:14px;
}

.dashboard-welcome p{
    max-width:520px;

    font-size:17px;
    line-height:1.7;

    color:#5A5A5A;
}

/* ======================================
   WELLNESS CARD
====================================== */

.wellness-card{
    background:#fff;

    border:1px solid #ECE7DC;
    border-radius:24px;

    padding:32px;
}

.wellness-card h2{
    font-size:28px;
    font-weight:700;

    margin-bottom:28px;
}

.wellness-content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

.wellness-circle{
    width:220px;
    height:220px;

    border-radius:50%;

    border:12px solid #21461D;

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

    flex-shrink:0;
}

.wellness-score{
    font-size:72px;
    font-weight:700;

    color:#21461D;
    line-height:1;
}

.wellness-circle span{
    font-size:22px;
    color:#444;
}

.wellness-details{
    flex:1;
}

.wellness-details h3{
    color:#21461D;

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

    margin-bottom:16px;
}

.wellness-details p{
    font-size:17px;
    line-height:1.8;

    color:#444;

    margin-bottom:24px;
}

.wellness-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:190px;
    height:56px;

    border:2px solid #21461D;
    border-radius:14px;

    text-decoration:none;

    color:#21461D;

    font-weight:600;

    transition:.3s;
}

.wellness-btn:hover{
    background:#21461D;
    color:#fff;
}

/* ======================================
   REFLECTION CARD
====================================== */

.reflection-card{
    background:#fff;

    border:1px solid #ECE7DC;
    border-radius:24px;

    padding:32px;
}

.reflection-card h2{
    font-size:28px;
    font-weight:700;

    margin-bottom:28px;
}

.reflection-content{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;

    gap:24px;
}

.reflection-text{
    flex:1;
}

.reflection-text p{
    font-size:17px;
    line-height:1.9;

    color:#333;

    margin-bottom:18px;
}

.reflection-image{
    width:180px;
}

.reflection-image img{
    width:100%;
    display:block;
}

/* ======================================
   NOTE CARD
====================================== */

.note-card{
    margin-top:28px;

    background:#F8F6F1;

    border-radius:18px;

    padding:24px;
}

.note-card h3{
    font-size:22px;
    font-weight:700;

    margin-bottom:14px;
}

.note-card p{
    font-size:16px;
    line-height:1.8;

    color:#444;

    margin-bottom:24px;
}

.note-lines{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.note-lines span{
    height:1px;
    background:#D8D1C3;
    display:block;
}

/* ======================================
   RESPONSIVE
====================================== */

@media(max-width:992px){

    .wellness-content{
        flex-direction:column;
        align-items:flex-start;
    }

    .reflection-content{
        flex-direction:column;
    }

    .reflection-image{
        width:140px;
    }

    .dashboard-welcome h1{
        font-size:38px;
    }
}