@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
@font-face {
    font-family: "Nastaliq";
    src: url("../fonts/IranNastaliq.woff2");
}

a {
    text-decoration: none;
    color: rgba(225, 255, 255, .8);
  }
  /* Slider style */
  .cd-slider {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
  }
  .cd-slider.ie9 nav div span {
      display: none;
  }
  .cd-slider ul li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      visibility: hidden;
      transition: visibility 0s .6s;
  }
  .cd-slider ul li::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 10%;
      height: 1vh;
      border: 5px solid #e6e6e6;
      border-width:0;
      transform: translate(-50%, -50%);
      pointer-events: none;
      transition: border-width .4s .6s;
  }
  .content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* background-position: 50% 100%; */
      background-size: cover;
      background-repeat: no-repeat;
      mix-blend-mode: multiply;
      opacity: 1;
      transform: scale(1.2);
      transition: opacity .4s .6s, transform .4s .6s;
  }
  .content blockquote {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      bottom: 5%;
      left: 4%;
      z-index: 2;
      width: 30%;
      padding: 20px;
      color: #ffffff;
      background: rgba(0, 0, 0, 0.437);
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(2.1px);
        -webkit-backdrop-filter: blur(2.1px);
        border: 1px solid rgba(255, 255, 255, 0.3);
  }
  blockquote p {
      font-size: 4rem;
      margin-bottom: 2rem;
  }
  blockquote span {
      font-size: 1.2rem;
  }
  /* .shoar{
    font-family: "Nastaliq",sans-serif;
    word-spacing: 5px;
    font-size: 3.2rem;
  } */
  /* current slide
  ---------------------------------*/
  .cd-slider li.current_slide {
      visibility: visible;
  }
  .cd-slider li.current_slide::before {
      border-width: 50rem;
  }
  .cd-slider li.current_slide .content {
      opacity: 1;
      transform: scale(1);
  }
  /* nav
  ---------------------------------*/
  .mynav div {
      position: absolute;
      top: 50%;
      left: 4%;
      width: 5rem;
      height: 5rem;
      margin-top: -2.5rem;
      list-style: none;
  }
  .mynav div:last-of-type {
      left: auto;
      right: 4%;
  }
  .prev, .next {
      position: relative;
      z-index: 100;
      width: 70%;
      height: 70%;
      display: block;
      border-radius: 100%;
      transition: box-shadow .3s;
      font-size: 10px;
  }
  .prev::before, .prev::after, .next::before, .next::after {
      content: '';
      position: absolute;
      left: 43%;
      background: #fff;
      width: .4rem;
      min-width: 3px;
      border-radius: 3px;
      height: 34%;
  }
  .prev::before {
      transform: rotate(45deg);
      top: 24%;
  }
  .prev::after {
      transform: rotate(-45deg);
      bottom: 24%;
  }
  .next::before, .next::after {
      left: auto;
      right: 43%;
  }
  .next::before {
      transform: rotate(-45deg);
      top: 24%;
  }
  .next::after {
      transform: rotate(45deg);
      bottom: 24%;
  }
  .prev:hover, .next:hover {
      box-shadow: 0 0 0 1rem rgba(0, 0, 0, 0.15);
  }
  .mynav > div > span {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 100%;
      z-index: 5;
      pointer-events: none;
      will-change: width, height;
      transform: translate(-50%, -50%);
      transition: width .6s, height .6s;
  }

@media screen and (max-width: 600px) {
    .content blockquote{
        width: 90%;
    }
    blockquote p {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    blockquote span {
        font-size: 1rem;
    }
    .slide1{
      background-image: url(../img/imam.jpg) !important;
    }
    .slide2{
      background-image: url(../img/farm.jpg) !important;
    }
    .slide3{
      background-image: url(../img/shr.jpg) !important;
    }
    .slide4{
      background-image: url(../img/save.jpg) !important;
    }
}