@font-face { font-family:iransans; src: url('../fonts/iransans.otf'); src: url('../fonts/iransans.eot') format('eot'), url('../fonts/iransans.woff') format('woff'), url('../fonts/iransans.ttf') format('truetype'), url('../fonts/iransans.woff2') format('woff2'); font-display: swap; }


::-webkit-scrollbar {    height: 5px;    width: 10px;    background: #171715;}
::-webkit-scrollbar-thumb {    background: #0850a0;height: 2px;    -webkit-border-radius: 0;}
::-webkit-scrollbar-corner {    background: #171715;}
::-moz-selection { /* Code for Firefox */  color: #171715;  background: #0850a0;}
::selection {  color: #171715;  background: #0850a0;}

*, ol, ul, li,p {padding:0; margin:0; }
body {font-family:iransans, sans-serif; padding:20px; background-color: #f0f0f0;}
body.wrapper-fluid .site-grid {grid-gap:0; }
body.noScroll, html.noScroll {  overflow-y: hidden;}
h1,h2,h3,h4,h5,h6 { iransans, sans-serif; }
header { font-family:iransans, sans-serif; }

a, a:not([class]) { text-decoration:none;}

.brand-logo img { max-width:100px;}

.container-header .grid-child { padding:.4em;}

body .container-component > * + *, body .container-component > :first-child { margin:0;}

.fountainbgtop > div {  padding: 90px 50px;  color: #fff; }

body.wrapper-fluid header > .grid-child { padding-left:1em; padding-right:1em;}

/*************** MENU ********************/
header .grid-child { display: flex; flex-direction: row-reverse;}
.metismenu.mod-menu .metismenu-item > a:focus, .metismenu.mod-menu .metismenu-item > button:focus { outline:0; }
.container-header { width:100%;  background:#fff;}
.container-header .navbar-brand { padding:0; margin-inline-end:unset; }
header.container-header .mod-menu#MainMenu { flex-direction: column; display:flex; grid-gap:1em;}
header.container-header .mod-menu#MainMenu li { padding:0; margin:0;}
#MenuHolder{ max-height: 0;overflow: hidden;top: 0;background: #fff;transition: all 1s ease-in-out;height: 100%;text-align: center;display: flex;flex-direction: column;padding: 0;justify-content: center;}
#MenuHolder.open {  max-height:  1500px;}

#MenuHolder #MainMenu a {  color:#0850a0; display: flex;width: 100%;height: 100%;align-items: center;justify-content: center; opacity:0; font-size:13px; transition:all 0.3s ease;padding:20px 0;}
#MenuHolder #MainMenu .active a { color:#ffc300; }
#MenuHolder.open #MainMenu a {  opacity: 1;  }

#MenuHolder.open #MainMenu li:nth-child(1) a { transition-delay: 0.4s;}
#MenuHolder.open #MainMenu li:nth-child(2) a { transition-delay: 0.5s;}
#MenuHolder.open #MainMenu li:nth-child(3) a { transition-delay: 0.6s;}
#MenuHolder.open #MainMenu li:nth-child(4) a { transition-delay: 0.7s;}
#MenuHolder.open #MainMenu li:nth-child(5) a { transition-delay: 0.8s;}
#MenuHolder.open #MainMenu li:nth-child(6) a { transition-delay: 0.9s;}

#MenuHolder .metismenu-item button { display:none; }

.metismenu.mod-menu .metismenu-item { padding:0; flex:1; }

.metismenu.mod-menu .metismenu-item ul {  margin-inline-end: 0;
  background: #1d1d1d;
  border: 1px solid #f4f4f4;
  left: 0;
}


/**** Nav Icon ***/
#navbtn{    display: block;    width: 75px;    height: 50px;    transition: 0.3s ease transform;    cursor: pointer;z-index:100;direction: rtl ;padding:11px 1em 13px 12px;order:3; position:relative;margin-inline-end:auto; }

#navbtnholder {  text-align: center;border-bottom:1px solid #ececec;}

#navbtnholder span{  font-size: 11px;  font-weight: bold;cursor: pointer;display:none;}

#navbtn div{    width: 6px;    height: 8px;    background-color: #0850a0;    margin-left: 0;    margin-bottom: 1px;    border-radius: 0;    transition: 0.3s ease width, 0.3s ease margin-left, 0.3s ease margin-bottom, 0.3s ease background-color; }

#navbtn div:first-child{    width: 31px;}
#navbtn:hover div:first-child {    width: 8px;}

#navbtn div:nth-child(2){    width: 21px;}

#navbtn div:last-child{    width: 8px;    margin-bottom: 0;}

#navbtn.close:hover div:last-child {    width: 31px;}

#navbtn.open{ transform: translateX(15px) translateY(15px) rotateZ(-90deg);}

#navbtn.open div{    width: 6px;  height:5px;  margin-left: 12px;    margin-bottom: 3px;    background-color: #fff; border: 1px; border:2px solid;}

.homebgtop { min-height: 80vh;  margin: 0 !important;}
.homebgtop > div { min-height:100%; padding:50px; display: flex;  flex-direction: column;  justify-content: center; }
.homebgtop {  color: #fff;   }
.homebgtop h3 { font-size: 5.1vw;max-width: 620px; margin-bottom: 10px; margin-top: 25px;}

.callicon {  position: absolute;  top: 0;  left: 0; }
.callicon a {  padding: 10px 15px;  display: block;  background-color: #ffc300;  color: #003566;display: flex;  flex-direction: column;  align-items: center; font-size:10px;transition:all 0.3s ease;}
.callicon svg { width: 20px;  height: 20px;}
.callicon:hover a { background-color:#fff;}

.verticalline > div {display: flex; justify-content: center; top:-80px; height:150px;}
.verticalline > div::after { width:2px; height:216px; content:''; background-color:#ffc300; display:block;}


.homeslogan > div { padding: 50px;  line-height: 35px; color:#fff; font-size:13px;}

/********** FOUNTAIN ***********/

.fountaintype { list-style: none;  margin-bottom: 50px;  display: grid;  grid-template-columns: 1fr;  grid-gap: 2em;}

.fountaintype li { border: 1px solid #e1e1e1;  padding: 10px;  border-radius: 10px; }

.item-content { text-align: center;}

.item-content .page-header h2 { font-size: 18px; }

.item-content .readmore { margin-top:20px;}


ul.sigFreeClassic li.sigFreeThumb a.sigFreeLink img.sigFreeImg, ul.sigFreeClassic li.sigFreeThumb a.sigFreeLink:hover img.sigFreeImg { background-size: 100%;}
/*********** FOOTER **************/

.container-footer.footer.full-width {  background: transparent;  color: #000;  border-top: 1px solid #c7c7c7;  margin: 0;}
.container-footer.footer.full-width .moduletable {  width: 100%;}
#mod-custom115 {  display: flex;  justify-content: space-between;  width: 100%;  direction: ltr;  font-size: 11px;  color: #22262a;  padding: 1em;}
body ul.sigFreeClassic li.sigFreeThumb a.sigFreeLink:hover::after { background-size:50%; background-position: 50%;}
/******************* RESPONSIVE *******************/


@media screen and (min-width: 1100px) {
#MenuHolder #MainMenu a { font-size:15px;}
.homebgtop h3 { font-size: 3.1vw; margin-bottom: 20px; margin-top: 50px;}
header { display: flex;  flex-direction: row-reverse; padding: 15px 45px;}
body.wrapper-fluid header > .grid-child { flex-basis: content;    margin: 0; }
header.container-header .mod-menu#MainMenu { flex-direction: row; grid-gap: 6em;}
#navbtn { display:none;}
#MenuHolder { max-height: inherit;    flex-basis: initial; padding: 0 2em;}
#MenuHolder #MainMenu a { opacity:1; }
.fountaintype { grid-template-columns: 1fr 1fr; }
}