.site-header{

    position:sticky;
    top:0;
    z-index:999;

    background:#ffffff;

    border-bottom:1px solid #e5e7eb;

    box-shadow:0 4px 18px rgba(0,0,0,.06);

}

.header-container{

    width:min(1200px,95%);
    margin:auto;

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

    height:72px;

}

.site-logo{

    display:flex;
    align-items:center;
    gap:10px;

    text-decoration:none;

    color:#2563eb;

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

}

.site-logo i{

    font-size:26px;

}

.site-menu{

    display:flex;
    gap:10px;
    flex-wrap:wrap;

}

.site-menu a{

    display:flex;
    align-items:center;
    gap:8px;

    text-decoration:none;

    color:#444;

    padding:10px 18px;

    border-radius:10px;

    transition:.25s;

}

.site-menu a:hover{

    background:#2563eb;
    color:#fff;

}

.site-menu .btn-blog:hover{

    background:#f0b71b;
    color:#fff;

}

.site-menu .btn-support:hover{

    background: #28a745;
    color:#fff;

}

.site-menu i{

    font-size:15px;

}

@media(max-width:768px){

.site-header{

    position:relative;
   width: 100%;
   display: block;

}

.header-container{

    flex-direction:column;

    height:auto;

    padding:18px 0;

}

.site-menu{

    justify-content:center;

    margin-top:15px;

}

.site-logo{

    font-size:22px;

}

}

.footer{
    margin-top:40px;
    background:#1d1d1d;
    color:#ddd;
    direction:rtl;
    font-size:14px;
}

.footer-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    flex-wrap:wrap;
    gap:40px;
    padding:40px 20px;
}

.footer-container>div{
    flex:1;
    min-width:220px;
}

.footer h3,
.footer h4{
    color:#fff;
    margin-bottom:15px;
}

.footer p{
    line-height:1.9;
    color:#bfbfbf;
}

.footer ul{
    list-style:none;
    padding:0;
    margin:0;
}

.footer li{
    margin:8px 0;
}

.footer a{
    color:#cfcfcf;
    text-decoration:none;
    transition:.2s;
}

.footer a:hover{
    color:#fff;
    padding-right:5px;
}

.footer-bottom{
    text-align:center;
    border-top:1px solid rgba(255,255,255,.08);
    padding:18px;
    color:#999;
    font-size:13px;
}

@media (max-width:768px){
    .footer-container{
        flex-direction:column;
        gap:25px;
    }
}
 

.social{

    display:flex;
    gap:12px;

}

.social a{

    width:42px;
    height:42px;

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

    border-radius:10px;

    background:#2b3240;

    margin:0;

}

i.icon-rubika {
    width: 24px;
    height: 24px;
    display: inline-block;
    background: url('/assets/images/rubika.png') center / contain no-repeat;
    vertical-align: middle;
}