/* Define color variables for easy editing */
    :root {
        --bg-page: #1a1a1a6b;        /* Main dark background */
        --bg-card: #2c2c2c91;        /* The darker card color */
        --text-main: #ffffff;      /* Main text color (Name/Dates) */
        --text-sub: #b0b0b0;       /* Sub-text color (Title/Labels) */
        --avatar-bg: #3c5482;      /* Avatar background color */
        --border-color: #444444;   /* Divider and card border */
    }
        
    .author-card {
        background-color: var(--bg-card);
        border-radius: 12px;
        padding: 5px 10px;
        display: flex;
        align-items: center;
        gap: 30px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.3);
        border: 1px solid rgba(255, 255, 255, 0.05); /* Optional subtle border */
        margin:0 auto;
        position: relative;
        top:60px;
        width: 80%;
    }

    /* --- Left Section (Avatar & Name) --- */
    .author-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .avatar {
        width: 40px;
        height: 40px;
        background-color: var(--avatar-bg);
        color: var(--text-main);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 17px;
        font-weight: bold;
        text-transform: uppercase;
    }

    .author-details {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .author-name {
        color: var(--text-main);
        font-size: 15px;
        font-weight: 600;
        margin: 0;
    }

    .author-description {
        color: var(--text-sub);
        font-size: 10px;
        margin: 0;
        max-width: 275px;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* ✅ number of lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* --- Vertical Divider --- */
    .divider {
        width: 1px;
        height: 50px;
        background-color: var(--border-color);
    }

    /* --- Right Section (Stats) --- */
    .author-stats {
        display: flex;
        gap: 70px;
    }

    .stat-group {
        display: flex;
        flex-direction: column;
        gap: 1px;
        position: relative;
        top: 5px;
    }

    .stat-label {
        color: var(--text-sub);
        font-size: 13px;
        margin: 0;
    }

    .stat-value {
        color: var(--text-main);
        font-size: 12px;
        font-weight: 600;
    }
    .stat-value.social-icons{
        font-size: 16px;
    }
    .stat-value a {
        color: var(--text-main);
        font-size: 12px;
        font-weight: 600;
        margin-inline: 6px;
    }
@media screen and (max-width: 768px) {
    .divider {
    width: 100%;
    height: 1px;
    }
    .author-card {
        display: block;
        width: 365px;
        position: relative;
        top: 20px;
        text-align: center;
        width: 95%;
    }

    .author-stats {
        display: flex;
        gap: 65px;
    }
}