@font-face {
      font-family: 'BNazanin';
      src: url('fonts/BNazanin.eot?-wwn5ej');
      src: url('fonts/BNazanin.eot?#iefix-wwn5ej') format('embedded-opentype'),
      url('fonts/BNazanin.woff?-wwn5ej') format('woff'),
      url('fonts/BNazanin.ttf?-wwn5ej') format('truetype'),
      url('fonts/BNazanin.svg?-wwn5ej#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
  }

  * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      direction: rtl;

  }

  *::selection {
      background: #444;
      color: #1ABC9C;
  }

  *::-moz-selection {
      background: #444;
      color: #1ABC9C;
  }

  ::-webkit-scrollbar {
      width: 5px;
  }

  ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px grey;
  }

  ::-webkit-scrollbar-thumb {
      background: #1ABC9C;
  }

  ::-webkit-scrollbar-thumb:hover {
      background: #E74C3C;
  }

  body {
      font-family: BNazanin, sans-serif;
      /*  color: #666; */
      background-color: #eeeff1;
      font-size: 100%;

  }

  a {
      text-decoration: none;
      color: #666;
  }

  ul,
  li {
      padding: 0;
      margin: 0;
      list-style: none;
  }

  .clear {
      clear: both;
  }

  .container-Faraz {
      width: 70%;
      min-height:  1100px;
      margin-right: 15%;
      margin-left: auto;
      margin-top: 20px;
      margin-bottom: auto;
      background-color: #fff;
      display: inline-block;


  }

  /* -------------------- Start header -------------------- */

  a {
      text-decoration: none
  }

  li {
      list-style: none;
  }

  nav {
      width: 100%;
      height: 60px;
      background-color: #333;
      float: right;




      -webkit-box-shadow: 0 1px 2px #555;
      box-shadow: 0 1px 2px #555;
      /* margin-bottom: 10px; */
  }

  nav > ul > li {
      float: right;
      /* font-size: 80px; */
      padding: 10px 5px;
      font-family: BNazanin, sans-serif;

  }

  nav > ul > li:hover {
      background-color: #fff;
      box-shadow: 0 0 3px #cccfd1;
  }

  nav > ul > li > a {
      font-size: 20px;
      padding: 0 20px;
      display: block;
      line-height: 40px;
      color: #1ABC9C;
  }

  nav > ul > li:hover > a,
  nav > ul > li:focus > a {
      color: #16a085;
  }

  nav > ul > li > a > i {
      float: left;
      margin-top: 10px;
      margin-right: 5px;
      color: #16a085;
      -webkit-transition: .5s all;
      -o-transition: .5s all;
      transition: .5s all;
  }

  /*  nav>ul>li:hover>a>i {
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            transform: rotate(180deg);
            margin-top: 10px
        } */

  nav > ul > li > ul {
      display: none;
      position: absolute;
      border-bottom: 1px solid #e1e1e1;
      top: 40px;
      left: 0;
      right: 0;
      z-index: 1000;
      -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
      height: 44px;
      background-color: #fff;
      list-style: none;
      margin: 1px 1px 0 0;
      padding: 0;

  }

  nav > ul > li:hover > ul {
      display: block;
  }

  nav > ul > li > ul {
      float: right
  }

  nav > ul > li > ul > a {
      font-size: 17px;
      display: block;
      padding: 0 25px;
      line-height: 43px;
      position: relative;
      color: #555
  }

  nav > ul > li > ul:hover > a {
      color: #16a085
  }

  nav > ul > li > ul {
      position: absolute;
      width: 99.9%;
      height: auto;
      top: 60px;
      right: 0;
      display: none;
      background: #fcfcfc;
      -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
      border-radius: 0 0 5px 5px
  }

  nav > ul > li > ul:hover > .submenu {
      display: block
  }

  nav > ul > li > ul > .submenu .image-menu {
      position: absolute;
      left: 4px;
      bottom: 4px;
  }

  nav > ul > li > ul > .submenu .col {
      width: 12.5%;
      height: 300px;
      float: right;
      border-left: 1px solid #e2e2e2;
  }

  nav > ul > li > ul > .submenu .col .title {
      color: #3498db;
      text-align: right;
      position: relative;
      border-bottom: 1px solid red;
      z-index: 9;
      font-size: 16px;
      line-height: 27px;
      padding-right: 25px;
      width: 75%;
  }

  /* nav>ul>li>ul>li>.submenu .col .title:hover{
     
    color: #237fbd
    
} */

  nav > ul > li > ul > .submenu .col ul {
      position: relative;
      z-index: 9;
      padding: 10px 0
  }

  nav > ul > li > ul > .submenu .col ul li a {
      text-align: right;
      font-size: 17px;
      font-family: BNazanin;
      display: block;
      padding: 0 25px;
      line-height: 27px;
      position: relative;
      color: #555
  }

  nav > ul > li > ul > .submenu .col ul li:hover a {
      color: #16a085
  }

  .logo {

      float: left;
      margin-left: 5%;
      display: contents;


  }


  .navigation form {
      float: left;
      padding: 5px;
      margin-left: 20px;
  }

  .navigation form input[type=search] {
      padding: 9px;
      background: transparent;
      border-radius: 0 5px 5px 0;
      border: 1px solid #1ABC9C;
      outline: none;
      color: #ddd;
      transition: 500ms;
      font-family: BNazanin, sans-serif;
  }

  .navigation form input[type=search]:focus {
      border: 1px solid #E74C3C;
  }

  .navigation form input[type=submit] {
      padding: 9px;
      border-radius: 5px 0 0 5px;
      border: 1px solid #1ABC9C;
      color: #000;
      background-color: #1ABC9C;
      outline: none;
      transition: 500ms;
      font: 14px BNazanin, sans-serif;
      cursor: pointer;
  }

  .navigation form input[type=submit]:hover {
      background: transparent;
      color: #fff;
  }

  /* -------------------- Start Slider -------------------- 
.slider-hero {
    background: url(images/backgrounds/ROJIN-HAMD-ARYA0081.jpg) 100% no-repeat;
    height: 500px; 
   
     
}

.slider-hero h1,
.slider-hero h2 {
    position: relative;
    top: 50%;
    font-family: Yekan, sans-serif;
    color: #fdfdfd;
    text-align: center;
    transform: translateY(-50%);
}

.slider-hero h2 {
    color: #1ABC9C;
}
    */

  /* -------------------- Start project-farazkavian -------------------- */

  .project-images {
      opacity: 1;
      display: block;
      width: 100%;
      height: auto;
      transition: .5s ease;
      backface-visibility: hidden;
  }

  .container-box {
      text-align: center;
      padding: 20px 20px;
      display: flex;
      flex-direction: column-reverse;

  }

  .container-box p {
      font: 13px BNazanin, sans-serif;
      font-style: oblique;
      align-content: center;
      justify-content: center;

  }


  .polaroid1 {
      position: relative;
      max-width:300px;
      height: auto;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      float: right;
     margin: 10px;
      /* margin-bottom: 40px; */

  }

  .middle {
      transition: .5s ease;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%)
  }

  .polaroid1:hover .project-images {
      opacity: 0.4;
  }

  .polaroid1:hover .middle {
      opacity: 1;
  }

  .text {
      background-color: #4CAF50;
      color: #fff;
      font: 16px BNazanin, sans-serif;
      margin: auto;
      padding: 15px 15px;
      display: inline-block;
      align-content: center;
      justify-content: center;
      border-radius: 10px;

  }

  .button-pro {
      color: #fff;
  }

  .polaroid2 {
      position: relative;
      max-width:300px;
      height: auto;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      float: right;
      margin: 10px;
  }

  .polaroid2:hover .project-images {
      opacity: 0.4;
  }

  .polaroid2:hover .middle {
      opacity: 1;
  }


  .polaroid3 {
      position: relative;
      max-width:300px;
      height: auto;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      float: right;
     margin: 10px;
  }

  .polaroid3:hover .project-images {
      opacity: 0.4;
  }

  .polaroid3:hover .middle {
      opacity: 1;
  }

  .polaroid4 {
      position: relative;
      max-width:300px;
      height: auto;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      float: right;
      margin: 10px;
  }

  .polaroid4:hover .project-images {
      opacity: 0.4;
  }

  .polaroid4:hover .middle {
      opacity: 1;
  }

  .polaroid5 {
      position: relative;
      max-width:300px;
      height: auto;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      float: right;
      margin: 10px;
  }

  .polaroid5:hover .project-images {
      opacity: 0.4;
  }

  .polaroid5:hover .middle {
      opacity: 1;
  }


  .polaroid6 {
      position: relative;
      max-width:300px;
      height: auto;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      float: right;
      margin: 10px;
  }

  .polaroid6:hover .project-images {
      opacity: 0.4;
  }

  .polaroid6:hover .middle {
      opacity: 1;
  }


  .polaroid7 {
      position: relative;
      max-width: 300px;
      height: auto;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      float: right;
      margin: 10px;
  }

  .polaroid7:hover .project-images {
      opacity: 0.4;
  }

  .polaroid7:hover .middle {
      opacity: 1;
  }


  .polaroid8 {
      position: relative;
      max-width:300px;
      height: auto;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      float: right;
      margin: 10px;
  }

  .polaroid8:hover .project-images {
      opacity: 0.4;
  }

  .polaroid8:hover .middle {
      opacity: 1;
  }

 .polaroid9 {
      position: relative;
      max-width:300px;
      height: auto;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      float: right;
      margin-top: 10px;
     
  }

  .polaroid9:hover .project-images {
      opacity: 0.4;
  }

  .polaroid9:hover .middle {
      opacity: 1;
  }







  /* -------------------- Start Footer -------------------- */

  footer.footer {
      margin-top: 20px;

      border-top: 5px solid #1ABC9C;
      background: #333;
      float: right;
  }

  .footer .footer-box {
      float: right;
      margin-right: 20px;
      padding: 5px;
      width: 23%;

  }

  .footer .footer-box > h3 {
      color: #fff;
      padding: 10px 0;
      border-bottom: 2px solid #1ABC9C;
      line-height: 20px;
      margin-bottom: 5px;
      position: relative;
  }

  .footer .footer-box h3::after {
      position: absolute;
      content: "";
      right: 0px;
      top: 40px;
      width: 0;
      height: 2px;
      background-color: #c60303;
      display: inline-block;
      transition: 500ms;
  }

  .footer .footer-box:hover h3::after {
      width: 100px;
  }

  .footer .footer-box > p {
      text-align: justify;
      color: #ddd;
  }

  .footer .footer-box > p > i {
      color: #1ABC9C;
  }

  .footer .footer-box .social {
      direction: ltr;
  }

  .footer .footer-box .social a > i {
      padding: 5px;
      color: #1ABC9C;
      border-radius: 5px;
      width: 25px;
      height: 25px;
      text-align: center;
      transition: 800ms;
  }

  .footer .footer-box .social a > i:hover {
      color: #fff;
  }

  .footer .footer-box .social a i.fa-facebook:hover {
      background: #3B5998;
  }

  .footer .footer-box .social a i.fa-twitter:hover {
      background: #1DA1F2;
  }

  .footer .footer-box .social a i.fa-pinterest:hover {
      background: #bd081c;
  }

  .footer .footer-box .social a i.fa-linkedin:hover {
      background: #0077B5;
  }

  .footer .footer-box .social a i.fa-instagram:hover {
      background: #e1306c;
  }

  .footer .footer-box .social a i.fa-telegram:hover {
      background: #0088cc;
  }

  .footer .footer-box .social a i.fa-rss:hover {
      background: orange;
  }

  .footer .footer-box .newsletter p {
      color: #ddd;
      padding: 20px 0;
  }

  .footer .footer-box .newsletter form input[type=email] {
      width: 75%;
      padding: 10px;
      background: transparent;
      border-radius: 0 5px 5px 0;
      border: 1px solid #1ABC9C;
      outline: none;
      color: #ddd;
      transition: 500ms;
      font-family: BNazanin, sans-serif;
  }

  .footer .footer-box .newsletter form input[type=email]:focus {
      border: 1px solid #E74C3C;
      text-align: left;
  }

  .footer .footer-box .newsletter form input[type=submit] {
      width: 20%;
      padding: 10px;
      border-radius: 5px 0 0 5px;
      border: 1px solid #1ABC9C;
      color: #000;
      background-color: #1ABC9C;
      outline: none;
      transition: 500ms;
      font: 14px BNazanin, sans-serif;
      cursor: pointer;
  }

  .footer .footer-box .newsletter form input[type=submit]:hover {
      background: transparent;
      color: #fff;
  }

  .footer .footer-box .comments {
      float: left;
      margin-bottom: 5px;
      padding: 5px;
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 5px;
  }

  .footer .footer-box .comments img {
      width: 50px;
      height: auto;
      margin-left: 5px;
      border-radius: 5px;
      float: right;
  }

  .footer .footer-box .comments span {
      color: #ddd;
      font-size: 13px;
  }

  .socket {
      padding: 10px 5px;
      background-color: #222;
      color: #ddd;
  }

  .socket p a {
      color: #1ABC9C;
      transition: 500ms;
  }

  .socket p a:hover {
      color: #E74C3C;
  }

  .go-top {
      position: relative;
  }

  .go-top a i {
      position: absolute;
      left: 20px;
      bottom: 3px;
      color: #1ABC9C;
      font-size: 40px;
      opacity: 0.3;
      transition: 800ms;
  }

  .go-top a i:hover {
      opacity: 1;
  }