body{
    margin:0;
}

.navbar{

    background:white;

    border-bottom:1px solid #eee;

}


.icon{
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
     flex-shrink:0;
    border:1px solid var(--border);
    border-radius:50%;

    margin-bottom:22px;
    margin-inline:auto;   /* ← این خط اضافه شد */
    transition:border-color .35s ease, background .35s ease;
    color:var(--primary-dark);
}

.icon img{
    width:70px;
    height:70px;

}

.icon svg{
    width:35px;
    height:35px;

}


.icon-right{
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    border:1px solid var(--border);
    border-radius:50%;
    background:var(--surface);
    margin-bottom:22px;
    margin-inline-end:auto;   /* ← اصلاح شد */
    transition:border-color .35s ease, background .35s ease;
    color:var(--primary-dark);
}


.icon-right img{
    width:70px;
    height:70px;

}

.icon-right svg{
    width:35px;
    height:35px;

}

.hero-icon{
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    
    
    margin-bottom:22px;
    margin-inline:auto;   /* ← این خط اضافه شد */
    transition:border-color .35s ease, background .35s ease;
    color:var(--primary-dark);
}

.hero-icon img{
    width:55px;
    height:55px;

}