/*
---------------------------------------------------
Follow us in Social
---------------------------------------------------
 */
:root {
    --social-bg:#ffffff;
    --social-card:#0f172a;
    --social-muted:#94a3b8;
    --social-accent:#06b6d4;
    --social-radius:12px;
}
.follow-card{
    max-width:760px;
    margin:32px auto;
    background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent), var(--social-bg);
    border-radius:var(--social-radius);
    box-shadow:0 8px 30px rgba(2,6,23,0.12);
    overflow:hidden;
    display:flex;
    gap:20px;
    align-items:center;
    padding:22px;
    direction:rtl;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,'Helvetica Neue',Arial;
}
.follow-card__left{
    flex:1;
}
.follow-card__title{
    font-size:20px; margin:0 0 6px 0; color:var(--social-card);
}
.follow-card__desc{
    margin:0;
    color:var(--social-muted);
    line-height:1.5
}

.follow-list{
    display:flex;
    gap:12px;
    margin-top:16px;
    flex-wrap:wrap
}
.follow-btn{
    display:inline-flex;
    gap:10px;
    align-items:center;
    padding:10px 14px;
    border-radius:12px;
    text-decoration:none;
    background:#f8fafc;
    border:1px solid rgba(2,6,23,0.04);
    box-shadow:0 2px 6px rgba(2,6,23,0.04);
    transition:transform .12s ease, box-shadow .12s ease;
    color:var(--social-card);
    font-weight:600;
}
.follow-btn:active{
    transform:translateY(1px)
}
.follow-btn:hover{
    box-shadow:0 8px 18px rgba(2,6,23,0.08)
}
.follow-btn svg{
    width:18px;
    height:18px;
    display:block
}

.follow-card__right{
    flex:0 0 140px;
    display:flex;
    justify-content:center;
    align-items:center
}
.avatar-pill {
    display: flex;
    width: 120px;
    height: 120px;
    padding: 5px;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(2,6,23,0.08);
    overflow: hidden;
}
.avatar-pill img {
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
}

@media (max-width:540px){
    .follow-card{
        flex-direction:column;
        text-align:center;
    }
    .follow-card__right{
        order:-1
    }
}

/*
---------------------------------------------------
End of Follow us in Social
---------------------------------------------------
 */