/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 
            ================
                  font
            =================

*/
@font-face {
    font-family: vazir;
    src: url(../fonts/Vazir-Medium.ttf)format(truetype);
}

@font-face {
    font-family: vazirb;
    src: url(../fonts/Vazir-Bold.ttf)format(truetype);
}

@font-face {
    font-family: IranianSans;
    src: url(../fonts/IranianSans.ttf)format(truetype);
}

@font-face {
    font-family: IranNsataliq;
    src: url(../fonts/IranNastaliq.ttf)format(truetype);
}

/* 
            ================
                  grid
            =================

*/
.container {
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}

.row>* {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.col {
    max-width: 100%;
    flex-grow: 1;
}

.col-1 {
    width: 8.33333%;
    flex: 0 0 auto;
}

.col-2 {
    width: 16.66666%;
    flex: 0 0 auto;
}

.col-3 {
    width: 25%;
    flex: 0 0 auto;
}

.col-4 {
    width: 33.33333%;
    flex: 0 0 auto;
}

.col-5 {
    width: 41.66666%;
    flex: 0 0 auto;
}

.col-6 {
    width: 50%;
    flex: 0 0 auto;
}

.col-7 {
    width: 58.33333%;
    flex: 0 0 auto;
}

.col-8 {
    width: 66.66666%;
    flex: 0 0 auto;
}

.col-9 {
    width: 75%;
    flex: 0 0 auto;
}

.col-10 {
    width: 83.33333%;
    flex: 0 0 auto;
}

.col-11 {
    width: 91.66666%;
    flex: 0 0 auto;
}

.col-12 {
    width: 100%;
    flex: 0 0 auto;
}


@media (min-width:576px) {
    .container {
        width: 540px;
    }

    .col-sm-1 {
        width: 8.33333%;
        flex: 0 0 auto;
    }

    .col-sm-2 {
        width: 16.66666%;
        flex: 0 0 auto;
    }

    .col-sm-3 {
        width: 25%;
        flex: 0 0 auto;
    }

    .col-sm-4 {
        width: 33.33333%;
        flex: 0 0 auto;
    }

    .col-sm-5 {
        width: 41.66666%;
        flex: 0 0 auto;
    }

    .col-sm-6 {
        width: 50%;
        flex: 0 0 auto;
    }

    .col-sm-7 {
        width: 58.33333%;
        flex: 0 0 auto;
    }

    .col-sm-8 {
        width: 66.66666%;
        flex: 0 0 auto;
    }

    .col-sm-9 {
        width: 75%;
        flex: 0 0 auto;
    }

    .col-sm-10 {
        width: 83.33333%;
        flex: 0 0 auto;
    }

    .col-sm-11 {
        width: 91.66666%;
        flex: 0 0 auto;
    }

    .col-sm-12 {
        width: 100%;
        flex: 0 0 auto;
    }
}

@media (min-width:768px) {

    .container {
        width: 720px;
    }

    .col-md-1 {
        width: 8.33333%;
        flex: 0 0 auto;
    }

    .col-md-2 {
        width: 16.66666%;
        flex: 0 0 auto;
    }

    .col-md-3 {
        width: 25%;
        flex: 0 0 auto;
    }

    .col-md-4 {
        width: 33.33333%;
        flex: 0 0 auto;
    }

    .col-md-5 {
        width: 41.66666%;
        flex: 0 0 auto;
    }

    .col-md-6 {
        width: 50%;
        flex: 0 0 auto;
    }

    .col-md-7 {
        width: 58.33333%;
        flex: 0 0 auto;
    }

    .col-md-8 {
        width: 66.66666%;
        flex: 0 0 auto;
    }

    .col-md-9 {
        width: 75%;
        flex: 0 0 auto;
    }

    .col-md-10 {
        width: 83.33333%;
        flex: 0 0 auto;
    }

    .col-md-11 {
        width: 91.66666%;
        flex: 0 0 auto;
    }

    .col-md-12 {
        width: 100%;
        flex: 0 0 auto;
    }
}

@media (min-width:992px) {
    .container {
        width: 960px;
    }

    .col-lg-1 {
        width: 8.33333%;
        flex: 0 0 auto;
    }

    .col-lg-2 {
        width: 16.66666%;
        flex: 0 0 auto;
    }

    .col-lg-3 {
        width: 25%;
        flex: 0 0 auto;
    }

    .col-lg-4 {
        width: 33.33333%;
        flex: 0 0 auto;
    }

    .col-lg-5 {
        width: 41.66666%;
        flex: 0 0 auto;
    }

    .col-lg-6 {
        width: 50%;
        flex: 0 0 auto;
    }

    .col-lg-7 {
        width: 58.33333%;
        flex: 0 0 auto;
    }

    .col-lg-8 {
        width: 66.66666%;
        flex: 0 0 auto;
    }

    .col-lg-9 {
        width: 75%;
        flex: 0 0 auto;
    }

    .col-lg-10 {
        width: 83.33333%;
        flex: 0 0 auto;
    }

    .col-lg-11 {
        width: 91.66666%;
        flex: 0 0 auto;
    }

    .col-lg-12 {
        width: 100%;
        flex: 0 0 auto;
    }
}

@media (min-width:1200px) {
    .container {
        width: 1140px;
    }

    .col-xl-1 {
        width: 8.33333%;
        flex: 0 0 auto;
    }

    .col-xl-2 {
        width: 16.66666%;
        flex: 0 0 auto;
    }

    .col-xl-3 {
        width: 25%;
        flex: 0 0 auto;
    }

    .col-xl-4 {
        width: 33.33333%;
        flex: 0 0 auto;
    }

    .col-xl-5 {
        width: 41.66666%;
        flex: 0 0 auto;
    }

    .col-xl-6 {
        width: 50%;
        flex: 0 0 auto;
    }

    .col-xl-7 {
        width: 58.33333%;
        flex: 0 0 auto;
    }

    .col-xl-8 {
        width: 66.66666%;
        flex: 0 0 auto;
    }

    .col-xl-9 {
        width: 75%;
        flex: 0 0 auto;
    }

    .col-xl-10 {
        width: 83.33333%;
        flex: 0 0 auto;
    }

    .col-xl-11 {
        width: 91.66666%;
        flex: 0 0 auto;
    }

    .col-xl-12 {
        width: 100%;
        flex: 0 0 auto;
    }
}

@media (min-width:1400px) {
    .container {
        width: 1370px;
    }

    .col-xxl-1 {
        width: 8.33333%;
        flex: 0 0 auto;
    }

    .col-xxl-2 {
        width: 16.66666%;
        flex: 0 0 auto;
    }

    .col-xxl-3 {
        width: 25%;
        flex: 0 0 auto;
    }

    .col-xxl-4 {
        width: 33.33333%;
        flex: 0 0 auto;
    }

    .col-xxl-5 {
        width: 41.66666%;
        flex: 0 0 auto;
    }

    .col-xxl-6 {
        width: 50%;
        flex: 0 0 auto;
    }

    .col-xxl-7 {
        width: 58.33333%;
        flex: 0 0 auto;
    }

    .col-xxl-8 {
        width: 66.66666%;
        flex: 0 0 auto;
    }

    .col-xxl-9 {
        width: 75%;
        flex: 0 0 auto;
    }

    .col-xxl-10 {
        width: 83.33333%;
        flex: 0 0 auto;
    }

    .col-xxl-11 {
        width: 91.66666%;
        flex: 0 0 auto;
    }

    .col-xxl-12 {
        width: 100%;
        flex: 0 0 auto;
    }
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
}

*,
*::after,
*::before {
    box-sizing: inherit;
}

body {

    direction: rtl;
    font-family: vazir;
    font-size: 1.6rem;
    line-height: 1.6;
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
}

/*           
 
---------------------------  Hayper class  --------------------- 

*/

.p-l-1 {
    padding-left: 1rem;

}

.p-r-1 {
    padding-right: 1rem;
}

.h-100 {
    height: 100%;
}

/* 

--------------------------------------   Header -----------------------------

*/
.header {
    background: url(../img/banner3.png) no-repeat;
    height: 40vh;
    background-size: cover;
    background-position: center;
    padding-top: 1rem;
    transition: all 200ms ease-in;
    position: relative;
}

.header-head {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.header__links {
    display: flex;

}

.header__link {
    text-align: center;
    display: block;
    padding: 0.4rem 0;
    background: #5173d6;
    color: #fff;
    margin-right: 0.5rem;
    border-radius: 2rem;
    font-size: 1.3rem;
    border: 1px solid #5173d6;
    transition: all 200ms ease-in;
    width: 11rem;
    box-shadow: 0 0 2rem rgba(66, 81, 123, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__link:hover {
    color: #5173d6;
    background: #fff;
   
}


.header-btn {

    background: #5173d6;
    position: fixed;
    border-radius: 1rem;
    width: 5rem;
    height: 5rem;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 114;
    right: 2rem;
    top: 0.5rem;
}

.header-btn__line {
    width: 3.3rem;
    height: 0.3rem;
    background: #fff;
    border-radius: 2rem;
    position: relative;
    transition: all 100ms ease-in;
}

.header-btn__line::after {
    position: absolute;
    content: '';
    height: 0.3rem;
    background: #fff;
    width: 3.3rem;
    height: 0.3;
    top: 0.8rem;
    border-radius: 2rem;
    transition: all 150ms ease-in;
}

.header-btn__line::before {
    position: absolute;
    content: '';
    height: 0.3rem;
    background: #fff;
    width: 3.3rem;
    height: 0.3;
    bottom: 0.8rem;
    border-radius: 2rem;
    transition: all 150ms ease-in;
}

.header-btn--open .header-btn__line::after {
    transform: translateY(-0.8rem)rotate(-45deg);
}

.header-btn--open .header-btn__line::before {
    transform: translateY(0.8rem)rotate(45deg);
}

.header-btn--open .header-btn__line {
    background: transparent;
}



.nav {
    position: sticky;
    top: 0;
    z-index: 102;
    background-color: #5173d6;
    border-top: 1px solid #fff;
}

.nav-menu {
    width: 100%;
    display: flex;
    justify-content: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;

}

.nav-menu__item {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #5173d6;
    padding: 1rem 1.2rem;
    border: 1px solid #5173d6;
    transition: all 200ms ease-in;
    cursor: pointer;
    margin-left: 2rem;

}

.nav-menu__item:hover {
    color: #5173d6;
    background: #fff;
}

.nav-menu__item:hover .nav-menu__icon {

    fill: #5173d6;
}

.nav-menu__link {
    color: inherit;
}

.nav-menu__icon {
    margin-left: 0.5rem;
    fill: #fff;
    transition: all 200ms ease-in;
}


.nav__links {
    display: none;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
}

.nav__link {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    background-color: #5173d6;
    border: 1px solid #5173d6;
    color: #fff;
    width: 100%;
    font-size: 1.4rem;
    padding: 0.5rem 0;
    transition: all 200ms ease-in;
}

.nav__link:hover {
    color: #5173d6;
    background-color: #fff;



}

.nav__link__icon-internet,
.nav__link__icon-mobil,
.nav__link__icon-pishkhan {
    margin-left: 0.5rem;
    transition: all 200ms ease-in;
    stroke: #ffffff;


}

.nav__link__icon-internet {}

.nav__link__icon-mobil {}

.nav__link:hover .nav__link__icon-pishkhan ,
.header__link:hover .nav__link__icon-pishkhan{
    fill: #5173d6;
}

.nav__link:hover .nav__link__icon-internet,
.nav__link:hover .nav__link__icon-mobil,
.header__link:hover .nav__link__icon-internet,
.header__link:hover .nav__link__icon-mobil {
    stroke: #5173d6;
}

.nav-head {
    display: none;
    color: #5173d6;
    padding: 1.5rem 0;

    align-items: center;
    font-weight: 600;
}

.nav-head__img {
    width: 2.5rem;
    height: 3rem;
    margin-right: 1rem;
}

/* 

---------------Section ---------- history -------------

*/

.history {

    margin: 2rem 0 2rem 0;
    font-family: vazir;
    box-shadow: 0 0 2rem rgba(66, 81, 123, 0.3);
    padding: 2rem 0;
    position: relative;

}

.history-tab__btn {
    position: absolute;
    bottom: 100%;
    color: #fff;
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    left: 0;
    right: 0;
    top: 0;
}

.history-tab__item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 10rem;
    height: 3rem;
    display: block;
    color: #494949;
    margin-left: 1rem;
    line-height: 3.2rem;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 100ms ease-in;
}

.history-tab__item--active {
    background-color: #b9b9b9;
    color: #fff;
    transform: scale(0.95);
}

.history-tab {

    height: 0;
    opacity: 0;
    overflow: hidden;

}

.history-tab--active {
    height: auto;
    opacity: 1;
    overflow: visible;
    min-height: 34rem;
}

.structure {
    direction: rtl;
    display: flex;
    justify-content: space-between;

    min-height: 36rem;
    padding: 2rem;

}

.structure-content {
    flex-basis: 50%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 1rem;

}

.structure__title {
    color: #333333;
    font-family: vazirb;
    font-size: 1.7rem;
}

.structure-list {}

.structure-list__item {
    color: #333333;
    font-family: vazirb;
    padding: 0.8rem 1rem 0 0;
}

.structure-list__text {
    font-family: vazir;
    font-size: 1.5rem;
    color: #535353;
}

.board-members {
    flex-basis: 50%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 5rem;
}


.history__caption {
    direction: rtl;
    padding: 2rem;
}

.history__caption-text {
    font-size: 1.3rem;
    margin-right: 1rem;
    color: #666666;
}

.history__caption-title {
    color: #333333;
    padding-bottom: 0.5rem;
    font-size: 1.8rem;
}

.history-target__title {
    color: #5173d6;
    padding: 1rem 0 0.5rem 0;
}

.history-target {
    list-style: disc;

}

.history-target__item {

    font-size: 1.4rem;
    color: #666666;
    margin-right: 2.5rem;
}

.history__pic {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 2rem;
  
}

.history__pic-img1 {
    width: 100%;
    
  
}


.history__pic-content {
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 30%;
   
}

.history__pic-img2 {
    width: 100%;
    border-radius: 2rem;
   
}






.side-right {
    padding: 3rem 0;
    box-shadow: 0 0 2rem rgba(66, 81, 123, 0.3);
    height: 100%;
    margin-bottom: 5rem;
    display: flex;
    align-items: start;
    justify-content: center;

}

.side-left {

    box-shadow: 0 0 2rem rgba(66, 81, 123, 0.3);

}

.side-right {}

.menu--open {
    height: auto;
    overflow: visible;
    transition: all 250ms ease-in
}

.menu {
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    transition: all 250ms ease-in;
}

.menu__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #ffffffa4;
    border-radius: 2rem;
    padding: 2rem 0;
    width: 12rem;
    max-width: 14rem;
    box-shadow: 0 0 2rem rgba(66, 81, 123, 0.3);
    cursor: pointer;
    transition: all 200ms ease-in;
}

.menu__item:hover {
    background: rgba(66, 81, 123, 0.3);
}

.menu__item--active {
    background: rgba(66, 81, 123, 0.829);
    color: #fff;

}

.menu__icon {
    width: 6rem;
    height: 6rem;
    transition: all 250ms ease-in;
}

.menu__icon--active {
    transform: scale(1.1);
}

.menu__icon:hover {
    transform: scale(1.1);
}

.menu__caption {
    margin-top: 0.5rem;
    color: inherit;
    font-size: 1.4rem;

}

.servic-head {
    padding-top: 5rem;
    text-align: center;
    position: relative;
}

.servic-head__caption {
    color: #42517b;
    padding: 0.5rem 0 1rem 0;
    letter-spacing: 0.4rem;
    font-size: 1.4rem;
}

.servic-head__title {
    font-size: 2rem;
    color: #5799fd;
}

.servic-head__line {
    content: '';
    position: absolute;
    width: 15rem;
    height: 0.2rem;
    bottom: 0;
    right: 0;
    left: 0;
    background: #5799fd;
    border-radius: 2rem;
    margin: auto;
}

.servic-head__line::before {
    content: '';
    position: absolute;
    width: 4rem;
    height: 0.6rem;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    background: #5799fd;
    border-radius: 2rem;
    margin: auto;

}

.side-left {
    margin-bottom: 5rem;
    height: 100%;
}

.services {}

.servic {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 250ms ease-in;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.service--active {
    height: auto;
    overflow: visible;
    opacity: 1;
}



/*
 -------------------------- Mobil Bank -------------------------- 
 --------------------------            --------------------------
 */


.mobilBank-content {
    width: 100%;
    height: 100%;
    padding: 2rem;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
}

.mobilBank__pic {
    padding:2rem 2rem 0 2rem;
    width: 100%;

}

.mobilBank__img {
    width: 100%;
    max-height: 40rem;
}

.mobilBank-content__title{
    padding: 2rem;
    font-size: 1.5rem;
   
}
.mobilBank-list {
    margin: 2rem 0;
    width: 50%;
}

.mobilBank-list__item {
    font-size: 1.4rem;
    color: #333333;
    margin-bottom: 1rem;
}

.mobilBank__link {
    max-width: 30rem;
    background: #5173d6;
    color: #fff;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobilBank__link-icon{
    margin-left: 0.5rem;
}


.swiper-mobilsild{
   
}
.slid-show-mobilBank-content{
    margin: 2rem 0;
 width: 50%;
  
}
.mobilBank-slid-show__img{
    width: 100%;
   
}


/* 
------------------------------------------------------------------- 
-------------------------------------------------------------------
*/
.internet-bank {
    margin-top: 5rem;
    direction: rtl;
    text-align: right;
    padding: 2rem;
    display: flex;
    justify-content: space-between;


}





.internet-bank__content {
    width: 100%;
}

.internet-bank__title {
    color: #333333;
    font-family: vazirb;
    font-size: 1.8rem;
}

.internet-bank__text {
    color: #686868;
    padding: 1rem 1rem 1rem 0;
    font-size: 1.4rem;
}

.internet-bank__list {

    padding: 0 1rem;
    margin: 2rem 1rem 5rem 0;
    align-self: flex-start
}

.internet-bank__list__item {
    margin-bottom: 0.5rem;
}

.internet-bank__list__link {
    color: #333333;
    font-weight: 600;
    font-size: 1.4rem;
    text-decoration: none;
}

.internet-bank__list-desc {
    margin-right: 1rem;
    font-size: 1.3rem;
    color: #555555;
}

.internet-bank__btn {
    background: #5799fd;
    max-width: 20rem;
    padding: 0.5rem 0;
    text-align: center;
    color: #fff;
    margin: 2rem auto;
    border: 1px solid #5799fd;
    transition: all 200ms ease-in;
}

.internet-bank__btn:hover {
    color: #5173d6;
    background: #fff;
}

.internet-bank__btn__link {
    color: inherit;
    text-decoration: none;

}





.internet-bank__pic {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-right: 2rem;
    height: fit-content;

}

.internet-bank__img {
    max-width: 40rem;

}





.slid-show-content {
    width: 95%;
    box-shadow: 0 0 2rem rgba(66, 81, 123, 0.3);
    padding: 1rem;
    border-radius: 2rem;
}

.swiper {}

.swiper-wrapper {}

.swiper-slide {

    transition-duration: 4s !important;
}

.swiper-pagination {
    position: static !important;

}

.swiper-pagination-bullet {
    width: 1.2rem !important;
    height: 1.2rem !important;

}

.swiper-pagination-bullet-active {
    background: #5799fd !important;
}

.slid-show__img {
    width: 100%;
    border-radius: 2rem;
}

.swiper-button-prev {}

.swiper-button-next {}

/* 
                ====================
                     fast-deposit  واریز آنی
                ====================
*/

.fast-deposit__content {
    direction: rtl;
    text-align: right;
    padding: 2rem;
}


.fast-deposit__title {
    padding: 1rem 0;
    color: #333333;
    font-size: 2rem;
    font-family: vazirb;
}

.fast-deposit__desc-title {
    display: inline-block;
    color: #333333;
    font-size: 1.8rem;
    padding-bottom: 0.2rem;
    border-bottom: 2px solid #5173d6;
    margin-bottom: 1rem;
}

.fast-deposit__desc-title2,
.fast-deposit__desc-title3 {
    margin-bottom: 0.5rem;
    color: #208f0f;
}

.fast-deposit__desc-text {
    list-style: disc;
    margin-bottom: 2rem;
}

.fast-deposit__desc-item {
    font-size: 1.4rem;
    color: #686868;
    margin: 0 2rem 0.5rem 0;
}

.fast-deposit__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2rem;
}

.fast-deposit__img {
    max-width: 30rem;
}



/* 
                ====================
                     tashillat Loan   تسهیلات وام
                ====================
*/


.menu-content {
    padding: 2rem;
}

.menu-content__item {
    margin: 2rem 0;
}

.menu-content__title {

    margin-bottom: 0.5rem;
}

.menu-content__title2 {

    margin-bottom: 0.5rem;
    font-size: 1.4rem;
    color: #5173d6;
}

.menu-content__desc {
    font-size: 1.4rem;
    color: #525252;
    margin-bottom: 1rem;
}

.menu-account-img {
    width: 100%;
    max-height: 60rem;
    display: flex;
    justify-content: center;
}

.accont__img {
    width: 100%;


}


/* 
                ====================
                     tashillat Loan    حسابها
                ====================
*/



/* 

---------------Section ---------- newsletters -------------

*/


.newsletters {
    box-shadow: 0 0 2rem rgba(66, 81, 123, 0.3);
    color: #333333;
    padding: 5rem 0 2rem 0;

    font-family: vazir;
    margin: 2rem 0;
    direction: ltr;
    display: flex;
    justify-content: center;
    align-items: center;
}

.up-page {
    position: absolute;
    box-shadow: 0 0 2rem rgba(66, 81, 123, 0.3);
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2rem;
    top: -4.5rem;
    right: 1rem;
    margin-left: auto;
    transition: all 200ms ease-in;
   scroll-behavior: smooth;
}

.up-page:hover .up-page__icon {
    transition: all 400ms ease-in;
    fill: #1900ff;
}

.newsletters__title {
    text-align: center;

}

.newsletters__email {
    text-align: center;

}

.newsletters_email-title {
    margin-bottom: 1rem;
    font-size: 1.4rem;
   
}

.newsletters__email-content {
    max-width: 35rem;
    height: 6rem;
    box-shadow: 0 0 2rem rgba(66, 81, 123, 0.3);
    display: flex;
    align-items: center;
    border-radius: 2rem;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.newsletter__form {
    width: 100%;
    height: 100%;
   
    display: flex;
    align-items: center;
    justify-content: center;
}

.newsletters__email-icon {
    margin-left: 1rem;
    flex-shrink: 0;
    height: 99%;
}

.newsletter__email-input {
    height: 100%;
    width: 100%;
    outline: none;
    border: none;

    padding: 0 1rem;
}

.newslatter__email-btn {
    position: relative;
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.7rem;
    flex-shrink: 0;
    cursor: pointer;
}

.newsletter__email-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #5a7ad8;
    width: 100%;
    height: 100%;
    position: absolute;
    border: none;
    outline: none;
    border-radius: 2rem;
    transition: all 250ms ease-in;
    cursor: pointer;
}

.newslatter__email-btn:hover .newsletter__email-submit {
    background: #208f0f;
}

.newsletters__email-send {
    position: absolute;

}

.social-network {
    margin: 2rem 0;
   
}

.social-network__title {
    margin-bottom: 1rem;
    text-align: center;
    font-size: 1.4rem;
    color: #5173d6;
}

.social-network__icon {
    display: flex;
    align-items: center;
    justify-content: center;

}

.social-network__item {
    width: 5rem;
    height: 5rem;
    margin-left: 1rem;

}

.social-network__item:first-child {}

.newsletters__singup,
.newsletters__vam {
    direction: rtl;
}

.newsletters__vam-list,
.newsletters__singup-list {
    font-family: vazir;
    list-style: disc;
}

.newsletters__singup-title,
.newsletters__vam-title {
    padding-bottom: 0.5rem;
    text-align: right;
    color: #5173d6;
}

.newsletters__vam-item,
.newsletters__singup-item {
    margin-right: 2rem;
    font-size: 1.4rem;
}



.footer-head {

  font-size: 1.4rem; 

}

.footer {
    direction: ltr;
   
    width: 100%;
    box-shadow: 0 0 2rem rgba(66, 81, 123, 0.3);
   
    position: relative;
    color: #333333;
    text-align: right;

}

.footer-wrapper{

    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
  
    padding: 2rem 5rem;
   
}

.contact-us {
    font-family: vazir;
    font-size: 1.4rem;
    flex: 1 0 50%;
    margin-left: 4rem;
    padding-left: 1rem;
    border-left: 1px solid #5173d6;
}

.contact-us__title {
    text-align: right;
  padding: 1rem 0;
  font-weight: 600;

}

.contact-tel,
.contact-fax,
.contact-internet,
.contact-place {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.contact-tel,
.contact-fax,
.contact-internet {
    margin-bottom: 1rem;
}

.contact-internet__addres {
    color: #333333;
}

.contact-tel__icon,
.contact-fax__icon,
.contact-internet__icon,
.contact-place__icon {
    margin-left: 1rem;
    width: 3rem;
    height: 3rem;
    fill: #5173d6;
}
.footer-links{

    flex: 1 0 50%;
    font-size: 1.4rem;
    
}
.footer-links__title{
    padding: 1rem 0;
    font-weight: 600;
}
.footer__list{

}
.footer-list__item{
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: flex-start;
margin-bottom: 0.5rem;
}
.foter__link{
margin-right: 0.5rem;
color: inherit;
transition: all 200ms ease-in;
}
.foter__link:hover{
transform: scale(0.95);
}
.footer-bottom{
    width: 100%;
    height: 5rem;
    background: #5173d6;
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 
        ====================
            responive
        ====================

*/

@media (max-width:1600px) {}

@media (max-width:1400px) {

    .menu__icon {
        width: 5rem;
        height: 5rem;
    }

    .menu__item {
        width: 100%;
        padding: 1rem 0;
    }




}

@media (max-width:1200px) {
    .slid-show-mobilBank-content{
        width: 40%;
    }
    .newsletters__singup-title {
        line-height: 4;
    }

    .header__baner {
        background-size: cover;
        background-position: left;
    }

    .internet-bank {

        flex-direction: column;
    }

    .internet-bank__pic {
        margin-right: 0;
    }

    .internet-bank__img {
        max-width: 100%;
    }


}



@media (max-width:992px) {
    .mobilBank-content{
        flex-direction: column-reverse;
    }
    .slid-show-mobilBank-content{
        width: 70%;
        height: 80%;
    }
    .mobilBank-content{
       align-items: center;
    }
    .mobilBank-list{
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .menu__icon {
        width: 4rem;
        height: 4rem;
    }

    .menu__item {
        width: 100%;
    }

    .history__pic-img1 {
        width: 50%;
    }

}

@media (max-width:768px) {

    .nav {

        height: 0;
        overflow: hidden;
        position: fixed;
        top: -43.3rem;
        right: 0;
        left: 0;
        margin: auto;
        background-color: transparent;
        transition: all 300ms ease-in;
    }

    .nav-menu-warpper {
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding-top: 0;

        box-shadow: 0 0 2rem rgba(66, 81, 123, 0.3);

    }

    .nav-menu {
        border-top: 2px solid #5173d6;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;


    }

    .nav__links {
        display: flex;


    }

    .cover--open {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: #0000003a;
        z-index: 1;
    }

    .nav-avtive {
        height: auto;
        overflow: visible;
        top: 0;
    }

    .nav-menu__item {
        padding: 1 2rem;
        justify-content: flex-start;
        width: 15rem;
        background-color: #ffffff;
        margin-bottom: 0.5rem;
        color: #5173d6;
        border: none;
    }

    .nav-menu__item:first-child {
        margin-top: 1rem;
    }

    .nav-menu__link {}

    .nav-menu__icon {
        fill: #5173d6;
    }

    .nav-menu__item:hover {
        transform: scale(1.1);
        font-weight: 600;
    }

    .nav-head {
        display: flex;
    }

    .header__baner {
        background-position-x: left;
    }

    .structure {

        flex-wrap: wrap;


    }

    .board-members {
        margin-top: 4rem;
        margin-right: 0;

    }

    .side-right {
        box-shadow: none;
        display: flex;
        width: 100%;
        margin: 0;
        padding: 0;

    }

    .p-l-1 {
        padding-left: 1.5rem;
    }

    .p-r-1 {
        padding-right: 1.5rem;
    }

    .side-left {
        margin-top: 0.5rem;

    }

    .header-btn {
        display: flex;
    }





    .menu {

        padding: 1rem;
        gap: 1rem;
    }

    .menu--open {
        top: 0;

    }

    .menu__item {
        width: 10rem;
        padding: 0.5rem 0;

    }

    .menu__icon {
        width: 4rem;
        height: 4rem;
    }

    .menu__caption {
        font-size: 1.2rem;

    }

    .newsletters .row {

        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }

    .newsletters__singup {
        padding: 3rem 0;
    }

    .history__pic-img1 {
        width: 80%;
    }
    .contact-us{
        flex:1 0 65%;
    }
    .footer-links{
        flex:1 0 35%; 
    }
}

@media (max-width:605px) {}

@media (max-width:576px) {
    .footer{
        flex-wrap: wrap;
    }
    .contact-us{
        border:none;
        margin-bottom: 2rem;
        width: 100%;
    }
    .footer-links{
       width: 100%;  
    }

}

@media (max-width:450px) {
    .header__links {
        display: none;
    }

}

@media (max-width:400px) {
    .nav__links {
        flex-wrap: wrap;

    }



    .header {
        background-position: 55%;
        background-size: 100rem 36rem;
    }
}

@media (max-width:360px) {

    .header {
        background-position: 60%;
    }

    .nav-head {
        margin-right: 5rem;
    }
}

@media (min-width:400px) {
    .header {
        background-position: 60%;

    }
}


@media (min-width:768px) {}

@media (min-width:992px) {
    .slid-show-mobilBank-content{
        width: 30%;
    }

}