/*==================================================
        MobarakShahrNews Buttons
==================================================*/

.btn-msn{

display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;

padding:12px 22px;

border:none;

border-radius:12px;

font-size:14px;

font-weight:700;

line-height:1;

cursor:pointer;

text-decoration:none !important;

transition:.35s;

}


/*====================================
Primary
====================================*/

.btn-primary{

background:linear-gradient(135deg,#9d0000,#c81919);

color:#fff !important;

box-shadow:0 10px 25px rgba(157,0,0,.18);

}


.btn-primary:hover{

background:linear-gradient(135deg,#840000,#d51d1d);

color:#fff !important;

transform:translateY(-3px);

box-shadow:0 14px 30px rgba(0,0,0,.18);

}


/*====================================
Secondary
====================================*/

.btn-secondary{

background:#fff;

border:1px solid #ddd;

color:#444 !important;

}


.btn-secondary:hover{

background:#fafafa;

border-color:#b30000;

color:#b30000 !important;

}


/*====================================
Outline
====================================*/

.btn-outline{

background:transparent;

border:2px solid var(--primary-color);

color:var(--primary-color);

}


.btn-outline:hover{

background:var(--primary-color);

color:#fff !important;

}


/*====================================
Icon
====================================*/

.btn-msn i{

display:flex;

align-items:center;

justify-content:center;

width:28px;

height:28px;

border-radius:50%;

background:rgba(255,255,255,.18);

transition:.35s;

}


.btn-primary i{

background:#fff;

color:#b30000;

}


.btn-msn:hover i{

transform:translateX(-5px);

}


/*====================================
Small
====================================*/

.btn-sm{

padding:9px 16px;

font-size:13px;

}


/*====================================
Large
====================================*/

.btn-lg{

padding:15px 28px;

font-size:16px;

}