body{
    font-family: 'Vazir','IRANSans','Tahoma';
    direction: rtl;
}


/* header */
header{
    height: 100vh;
    /* background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.5)) , url(images/header.jpg) no-repeat center center  */
    /* /cover; */
    background:  url(images/header.jpg) no-repeat center center /cover , linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.5));

}

/* navbar */
 .nav-menu{
    background: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.5));
    padding: 30px;
    transition: all .7s;
} 
.menu-item{
    font-size: 13px;
    letter-spacing: 1px;
    color: #eee;
    /* transition: color .5s; */
}
.menu-item:hover{
    color :#70aed2;
}
.line1, .line2, .line3{
width: 23px;
height: 3px;
margin: 5px;
}
.custom-navbar{
    padding: 5px 30px;
    background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.7));
}

ul.nav a:hover { background-color: #FFFF00;
    color: #FFC0CB; }
/* end of navbar */

/* banner */
.banner{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:80%;
}
.banner-heading{
    animation-name:anim ;
    animation-duration: 2s;
}

.banner-par{
    animation-name:anim ;
    animation-duration: 2s;
    animation-delay: .5s;
    animation-fill-mode: forwards;
}
@keyframes anim{
    0%{
        transform: translateX(-100px);
        opacity: 0;

    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}
/* end of banner */

/* end of header */


/* mission */
.mission{
    background: #151f20;
}
.underline{
    width:150px;
    border: 3px solid #eee;
    margin: auto;
}

/* end of mission */

/* our system */
.card-1{
    background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.5)),url(images/quiz.jpg) center  no-repeat ;
    box-shadow: 7px 18px 50px #555;
    max-width: 400px;
}
.card-2{
    background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.5)),url(images/vc.jpg) center no-repeat ;
    box-shadow: 7px 18px 50px #555;
    max-width: 400px;
}
.card-3{
    background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.5)),url(images/eschool.jpg) center no-repeat ;
    box-shadow: 7px 18px 50px #555;
    max-width: 400px;
}
.card-list-item{
    border-bottom: 1px groove #eee;
    width:50%;
    margin: auto;
}

.system-card-button{
    background: #f5593d;
    width: 130px;
    border-radius: 25px;
    box-shadow: 5px 8px 18px #000;
    transition: all .2s;
}

.system-card-button:hover{
    background: #f9793d;
    transform: translateY(-2px);
}

.moveFromRight{
    animation-name: moveFromRight;
    animation-duration: 2s;
}

.moveFromBottom{
    animation-name: moveFromBottom;
    animation-duration: 2s;
}

.moveFromLeft{
    animation-name: moveFromLeft;
    animation-duration: 2s;
}

@keyframes moveFromLeft{
    0%{
        transform: translateX(-100px);
        opacity: 0;

    }
    100%{
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes moveFromRight{
    0%{
        transform: translateX(100px);
        opacity: 0;

    }
    100%{
        transform: translateX(0px);
        opacity: 1;
    }
}
@keyframes moveFromBottom{
    0%{
        transform: translateY(100px);
        opacity: 0;

    }
    100%{
        transform: translateY(0px);
        opacity: 1;
    }
}
/* end of our system */


/* footer */
.footer-link{
    color:#eee;
    font-size:13px;
    transition: all .3s;
    text-decoration: none;

}

.footer-link:hover{
    color:#70ae2d;
    text-decoration: none;
}

/*  end of footer */

/* persian fonts */
@font-face {
    font-family: "IRANSans";
    src: url('fonts/fonts/eot/IRANSansWeb_Black.eot?1552596388');
    src: url('fonts/fonts/eot/IRANSansWeb_Black.eot?&1552596388#iefix') format('embedded-opentype'), url('fonts/fonts/woff2/IRANSansWeb_Black.woff2?1552596388') format('woff2'), url('fonts/fonts/woff/IRANSansWeb_Black.woff?1552596388') format('woff'), url('fonts/fonts/ttf/IRANSansWeb_Black.ttf?1552596388') format('truetype');
    font-weight: 900;
    font-style: "normal";
  }
  @font-face {
    font-family: "IRANSans";
    src: url('fonts/fonts/eot/IRANSansWeb_Bold.eot?1552596388');
    src: url('fonts/fonts/eot/IRANSansWeb_Bold.eot?&1552596388#iefix') format('embedded-opentype'), url('fonts/fonts/woff2/IRANSansWeb_Bold.woff2?1552596388') format('woff2'), url('fonts/fonts/woff/IRANSansWeb_Bold.woff?1552596388') format('woff'), url('fonts/fonts/ttf/IRANSansWeb_Bold.ttf?1552596388') format('truetype');
    font-weight: "bold";
    font-style: "normal";
  }
  @font-face {
    font-family: "IRANSans";
    src: url('fonts/fonts/eot/IRANSansWeb_Medium.eot?1552596388');
    src: url('fonts/fonts/eot/IRANSansWeb_Medium.eot?&1552596388#iefix') format('embedded-opentype'), url('fonts/fonts/woff2/IRANSansWeb_Medium.woff2?1552596388') format('woff2'), url('fonts/fonts/woff/IRANSansWeb_Medium.woff?1552596388') format('woff'), url('fonts/fonts/ttf/IRANSansWeb_Medium.ttf?1552596388') format('truetype');
    font-weight: 500;
    font-style: "normal";
  }
  @font-face {
    font-family: "IRANSans";
    src: url('fonts/fonts/eot/IRANSansWeb_Light.eot?1552596388');
    src: url('fonts/fonts/eot/IRANSansWeb_Light.eot?&1552596388#iefix') format('embedded-opentype'), url('fonts/fonts/woff2/IRANSansWeb_Light.woff2?1552596388') format('woff2'), url('fonts/fonts/woff/IRANSansWeb_Light.woff?1552596388') format('woff'), url('fonts/fonts/ttf/IRANSansWeb_Light.ttf?1552596388') format('truetype');
    font-weight: 300;
    font-style: "normal";
  }
  @font-face {
    font-family: "IRANSans";
    src: url('fonts/fonts/eot/IRANSansWeb_UltraLight.eot?1552596388');
    src: url('fonts/fonts/eot/IRANSansWeb_UltraLight.eot?&1552596388#iefix') format('embedded-opentype'), url('fonts/fonts/woff2/IRANSansWeb_UltraLight.woff2?1552596388') format('woff2'), url('fonts/fonts/woff/IRANSansWeb_UltraLight.woff?1552596388') format('woff'), url('fonts/fonts/ttf/IRANSansWeb_UltraLight.ttf?1552596388') format('truetype');
    font-weight: 200;
    font-style: "normal";
  }
  @font-face {
    font-family: "IRANSans";
    src: url('fonts/fonts/eot/IRANSansWeb.eot?1552596388');
    src: url('fonts/fonts/eot/IRANSansWeb.eot?&1552596388#iefix') format('embedded-opentype'), url('fonts/fonts/woff2/IRANSansWeb.woff2?1552596388') format('woff2'), url('fonts/fonts/woff/IRANSansWeb.woff?1552596388') format('woff'), url('fonts/fonts/ttf/IRANSansWeb.ttf?1552596388') format('truetype');
    font-weight: "normal";
    font-style: "normal";
  }
  /**
  IF you want all numbers in persian use this
   */
  @font-face {
    font-family: "IRANSans_FaNum";
    src: url('fonts/fonts/eot/IRANSansWeb(FaNum)_Black.eot?1552596388');
    src: url('fonts/fonts/eot/IRANSansWeb(FaNum)_Black.eot?&1552596388#iefix') format('embedded-opentype'), url('fonts/fonts/woff2/IRANSansWeb(FaNum)_Black.woff2?1552596388') format('woff2'), url('fonts/fonts/woff/IRANSansWeb(FaNum)_Black.woff?1552596388') format('woff'), url('fonts/fonts/ttf/IRANSansWeb(FaNum)_Black.ttf?1552596388') format('truetype');
    font-weight: 900;
    font-style: "normal";
  }
  @font-face {
    font-family: "IRANSans_FaNum";
    src: url('fonts/fonts/eot/IRANSansWeb(FaNum)_Bold.eot?1552596388');
    src: url('fonts/fonts/eot/IRANSansWeb(FaNum)_Bold.eot?&1552596388#iefix') format('embedded-opentype'), url('fonts/fonts/woff2/IRANSansWeb(FaNum)_Bold.woff2?1552596388') format('woff2'), url('fonts/fonts/woff/IRANSansWeb(FaNum)_Bold.woff?1552596388') format('woff'), url('fonts/fonts/ttf/IRANSansWeb(FaNum)_Bold.ttf?1552596388') format('truetype');
    font-weight: "bold";
    font-style: "normal";
  }
  @font-face {
    font-family: "IRANSans_FaNum";
    src: url('fonts/fonts/eot/IRANSansWeb(FaNum)_Medium.eot?1552596388');
    src: url('fonts/fonts/eot/IRANSansWeb(FaNum)_Medium.eot?&1552596388#iefix') format('embedded-opentype'), url('fonts/fonts/woff2/IRANSansWeb(FaNum)_Medium.woff2?1552596388') format('woff2'), url('fonts/fonts/woff/IRANSansWeb(FaNum)_Medium.woff?1552596388') format('woff'), url('fonts/fonts/ttf/IRANSansWeb(FaNum)_Medium.ttf?1552596388') format('truetype');
    font-weight: 500;
    font-style: "normal";
  }
  @font-face {
    font-family: "IRANSans_FaNum";
    src: url('fonts/fonts/eot/IRANSansWeb(FaNum)_Light.eot?1552596388');
    src: url('fonts/fonts/eot/IRANSansWeb(FaNum)_Light.eot?&1552596388#iefix') format('embedded-opentype'), url('fonts/fonts/woff2/IRANSansWeb(FaNum)_Light.woff2?1552596388') format('woff2'), url('fonts/fonts/woff/IRANSansWeb(FaNum)_Light.woff?1552596388') format('woff'), url('fonts/fonts/ttf/IRANSansWeb(FaNum)_Light.ttf?1552596388') format('truetype');
    font-weight: 300;
    font-style: "normal";
  }
  @font-face {
    font-family: "IRANSans_FaNum";
    src: url('fonts/fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot?1552596388');
    src: url('fonts/fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot?&1552596388#iefix') format('embedded-opentype'), url('fonts/fonts/woff2/IRANSansWeb(FaNum)_UltraLight.woff2?1552596388') format('woff2'), url('fonts/fonts/woff/IRANSansWeb(FaNum)_UltraLight.woff?1552596388') format('woff'), url('fonts/fonts/ttf/IRANSansWeb(FaNum)_UltraLight.ttf?1552596388') format('truetype');
    font-weight: 200;
    font-style: "normal";
  }
  @font-face {
    font-family: "IRANSans_FaNum";
    src: url('fonts/fonts/eot/IRANSansWeb.eot?1552596388');
    src: url('fonts/fonts/eot/IRANSansWeb.eot?&1552596388#iefix') format('embedded-opentype'), url('fonts/fonts/woff2/IRANSansWeb(FaNum).woff2?1552596388') format('woff2'), url('fonts/fonts/woff/IRANSansWeb(FaNum).woff?1552596388') format('woff'), url('fonts/fonts/ttf/IRANSansWeb(FaNum).ttf?1552596388') format('truetype');
    font-weight: "normal";
    font-style: "normal";
  }
  /* ====== Vazir Font ======== */
  @font-face {
    font-family: "Vazir";
    src: url('fonts/fonts/Vazir/Vazir.eot?1559033547');
    src: url('fonts/fonts/Vazir/Vazir.eot?&1559033547#iefix') format('embedded-opentype'), url('fonts/fonts/Vazir/Vazir.woff2?1559033548') format('woff2'), url('fonts/fonts/Vazir/Vazir.woff?1559033547') format('woff'), url('fonts/fonts/Vazir/Vazir.ttf?1559033547') format('truetype');
    font-weight: "normal";
    font-style: "normal";
  }
  @font-face {
    font-family: "Vazir";
    src: url('fonts/fonts/Vazir/Vazir-Bold.eot?1559033539');
    src: url('fonts/fonts/Vazir/Vazir-Bold.eot?&1559033539#iefix') format('embedded-opentype'), url('fonts/fonts/Vazir/Vazir-Bold.woff2?1559033540') format('woff2'), url('fonts/fonts/Vazir/Vazir-Bold.woff?1559033539') format('woff'), url('fonts/fonts/Vazir/Vazir-Bold.ttf?1559033539') format('truetype');
    font-weight: "bold";
    font-style: "normal";
  }
  @font-face {
    font-family: "Vazir";
    src: url('fonts/fonts/Vazir/Vazir-Black.eot?1559033537');
    src: url('fonts/fonts/Vazir/Vazir-Black.eot?&1559033537#iefix') format('embedded-opentype'), url('fonts/fonts/Vazir/Vazir-Black.woff2?1559033538') format('woff2'), url('fonts/fonts/Vazir/Vazir-Black.woff?1559033537') format('woff'), url('fonts/fonts/Vazir/Vazir-Black.ttf?1559033537') format('truetype');
    font-weight: 900;
    font-style: "normal";
  }
  @font-face {
    font-family: "Vazir";
    src: url('fonts/fonts/Vazir/Vazir-Medium.eot?1559033544');
    src: url('fonts/fonts/Vazir/Vazir-Medium.eot?&1559033544#iefix') format('embedded-opentype'), url('fonts/fonts/Vazir/Vazir-Medium.woff2?1559033545') format('woff2'), url('fonts/fonts/Vazir/Vazir-Medium.woff?1559033544') format('woff'), url('fonts/fonts/Vazir/Vazir-Medium.ttf?1559033544') format('truetype');
    font-weight: 500;
    font-style: "normal";
  }
  @font-face {
    font-family: "Vazir";
    src: url('fonts/fonts/Vazir/Vazir-Light.eot?1559033542');
    src: url('fonts/fonts/Vazir/Vazir-Light.eot?&1559033542#iefix') format('embedded-opentype'), url('fonts/fonts/Vazir/Vazir-Light.woff2?1559033543') format('woff2'), url('fonts/fonts/Vazir/Vazir-Light.woff?1559033542') format('woff'), url('fonts/fonts/Vazir/Vazir-Light.ttf?1559033542') format('truetype');
    font-weight: 300;
    font-style: "normal";
  }
  @font-face {
    font-family: "Vazir";
    src: url('fonts/fonts/Vazir/Vazir-Thin.eot?1559033546');
    src: url('fonts/fonts/Vazir/Vazir-Thin.eot?&1559033546#iefix') format('embedded-opentype'), url('fonts/fonts/Vazir/Vazir-Thin.woff2?1559033547') format('woff2'), url('fonts/fonts/Vazir/Vazir-Thin.woff?1559033546') format('woff'), url('fonts/fonts/Vazir/Vazir-Thin.ttf?1559033546') format('truetype');
    font-weight: 100;
    font-style: "normal";
  }
/* end of persian fonts */