///////////////////////////// error page
.error--page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  h1 {
    font-family: sans-serif;
    font-size: 60px;
  }

  p {
    text-transform: uppercase;
    font-family: sans-serif;
    font-size: 14px;
    margin-top: -20px;
  }

  a {
    margin-top: 20px;
    font-family: 'sahel', sans-serif;
  }
}

//////////////////////////////////////////////////////// home page
.home--page {
  padding: 0 !important;

  .s1 {
    height: calc(100vh - #{$HF_height});

    .slider {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      overflow: hidden;

      .slide {
        width: 100%;
        height: 100%;
        position: relative;

        img {
          width: 100vw;
          height: 100vh;
          object-fit: cover;
        }

        p {
          width: 300px;
          padding: 20px;
          position: absolute;
          bottom: 25%;
          right: 10%;
          z-index: 1;
          color: $theme;
          line-height: 1.6em;
          border: 1px solid $theme;
          display: none;

          &:first-child {
            display: block;
          }

          @media (max-width: 575px) {
            & {
              width: 90%;
              bottom: 20%;
              right: 5%;
            }
          }
        }
      }

      .indicators {
        position: absolute;
        bottom: 90px;
        right: 0;
        width: 100%;
        text-align: center;
        direction: ltr;

        div {
          width: 10px;
          height: 10px;
          display: inline-block;
          background: #707070;
          margin-left: 5px;
          margin-right: 5px;
          @include borderRadius(50%);
          @include transition(background $trs);
          cursor: pointer;
        }

        .active {
          background: $theme !important;
        }
      }

      .slick-next {
        right: 25px;
        z-index: 5;
      }

      .slick-prev {
        left: 25px;
        z-index: 5;
      }

      .slick-dots {
        bottom: 100px;

        li {
          button:before {
            color: $theme;
            font-size: 10px;
            @extend %defaultTransition;
          }
        }
      }
    }
  }

  .site--footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 3;
  }
}

//////////////////////////////////////////////////////// menu page
.menu--page {

  .s1 {
    overflow: hidden;

    h2 {
      width: 470px;
      margin: 110px auto 10px;
      font-size: 3em;
      text-align: center;
      font-family: "B Yekan";
      font-weight: bold;

      &:nth-child(2) {
        margin: 0 auto 20px;
      }

      span {
        color: $theme;
        font-weight: bold;
      }

      @media (max-width: 540px) {
        & {
          width: 90%;
          margin: 110px auto 10px;
          font-size: 3.5em;
          text-align: center;
        }
      }
    }

    p {
      font-family: 'sahel';
      font-weight: bold;
      font-size: 0.9em;
      line-height: 1.5em;
      width: 470px;
      margin: 0 auto;
      text-align: center;
      direction: rtl;
      color: rgba(0, 0, 0, 0.5);

      @media (max-width: 540px) {
        & {
          font-size: 0.8em;
          line-height: 2em;
          width: 90%;
        }
      }
    }

    .mainSectionAnimation {
      width: 100%;
      z-index: 1;
      position: relative;

      ////////////////////////////// background shapes
      .shape1 {
        position: absolute;
        width: 85%;
        top: -11%;
        left: 7.5%;
        z-index: -1;

        svg {
          width: 100%;
        }
      }

      .shape2 {
        width: 16%;
        position: absolute;
        bottom: 1%;
        left: 12%;
        z-index: -1;

        svg {
          width: 100%;
        }
      }

      .shape3 {
        width: 70px;
        position: absolute;
        top: 15%;
        right: 16%;
        z-index: -1;

        svg {
          width: 100%;
          @include transform(rotate(180deg));
        }

        @media (max-width: 1400px) {
          & {
            right: 14.5%;
          }
        }

        @media (max-width: 1200px) {
          & {
            right: 12.5%;
          }
        }

        @media (max-width: 992px) {
          & {
            width: 50px;
            top: 18%;
            right: 12%;
          }
        }

        @media (max-width: 768px) {
          & {
            width: 50px;
            top: 18%;
            right: 9%;
          }
        }

        @media (max-width: 768px) {
          & {
            width: 7%;
            top: 18%;
            right: 12%;
          }
        }

      }

      ////////////////////////////// live picture
      .imgMap {
        width: 70%;
        position: absolute;
        top: 0;
        left: 15%;
        z-index: 3;

        path {
          cursor: pointer;
        }
      }

      .mainA {
        display: block;
        width: 70%;
        margin: 0 auto;
        z-index: 0;
      }

      .kebabA, .chickenA, .fishA {
        width: 70%;
        position: absolute;
        top: 0;
        left: 15%;
        z-index: 1;
        opacity: 0;
      }


      ///////////// captions
      .caption {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        @include boxShadow(10px 15px 20px rgba(0, 0, 0, 0.3));
        @include borderRadius(15px);
        position: absolute;
        text-align: center;
        padding: 10px;
        opacity: 0;

        h3 {
          color: $red;
          font-size: 16px;

          @media (max-width: 1400px) {
            & {
              font-size: 14px;
            }
          }

          @media (max-width: 1200px) {
            & {
              font-size: 13px;
            }
          }
        }

        p {
          width: auto;
          font-size: 12px;
          color: rgba(0, 0, 0, 0.4);
          margin-top: 3px;

          @media (max-width: 1400px) {
            & {
              font-size: 10px;
            }
          }

          @media (max-width: 1200px) {
            & {
              font-size: 8px;
            }
          }
        }

      }

      .kebabC {
        top: 69%;
        left: 25%;
        opacity: 0;

        @media (max-width: 1200px) {
          & {
            top: 70%;
            left: 24%;
          }
        }

        @media (max-width: 992px) {
          & {
            top: 68%;
            left: 20%;
          }
        }
      }

      .chickenC {
        top: 13%;
        right: 20%;
        opacity: 0;

        @media (max-width: 1200px) {
          & {
            top: 13%;
            right: 19%;
          }
        }

        @media (max-width: 992px) {
          & {
            top: 11%;
            right: 13%;
          }
        }
      }

      .fishC {
        top: 60%;
        left: 50%;
        opacity: 0;

        @media (max-width: 1200px) {
          & {
            top: 55%;
            left: 45%;
          }
        }
      }

      .sauceC {
        top: 29%;
        left: 14%;
        opacity: 0;

        @media (max-width: 1200px) {
          & {
            top: 28%;
            left: 12%;
          }
        }

        @media (max-width: 992px) {
          & {
            top: 27%;
            left: 5%;
          }
        }
      }


      ///////////// tap animations
      .tapHere {
        position: absolute;
      }

      .tc1 {
        width: 30px;
        height: 30px;
        background: #fff;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        position: absolute;
        opacity: 0;
      }

      .tc2 {
        width: 30px;
        height: 30px;
        background: #fff;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        position: absolute;
        opacity: 0;
      }

      .kebabT {
        top: 59%;
        left: 33%;

        @media (max-width: 1200px) {
          & {
            top: 58%;
          }
        }

        @media (max-width: 992px) {
          & {
            top: 57%;
            left: 34%;
          }
        }
      }

      .chickenT {
        top: 36%;
        right: 29%;

        @media (max-width: 991px) {
          & {
            top: 35%;
            right: 28%;
          }
        }
      }

      .sauceT {
        top: 36%;
        left: 34%;

        @media (max-width: 1400px) {
          & {
            top: 35%;
            left: 34%;
          }
        }

        @media (max-width: 1200px) {
          & {
            top: 35%;
            left: 34.5%;
          }
        }

        @media (max-width: 991px) {
          & {
            top: 34.5%;
            left: 35%;
          }
        }
      }

      .fishT {
        top: 50%;
        left: 50%;
      }
    }

    .mainCaption {
      width: 100%;
      height: 300px;
      @include boxSizing(border-box);

      @media (max-width: 500px) {
        & {
          height: 250px;
        }
      }

      @media (max-width: 290px) {
        & {
          height: 300px;
        }
      }

      .bg {
        width: 90%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        background-color: $theme;

        p {
          width: 90%;
          max-width: 850px;
          line-height: 2em;
          font-size: 20px;
          color: #fff;
          padding: 110px 20px 60px;
          @media (max-width: 768px) {
            & {
              font-size: 15px;
            }
          }

          @media (max-width: 500px) {
            & {
              padding: 50px 5px;
            }
          }
        }

        @media (max-width: 500px) {
          & {
            width: 100%;
          }
        }
      }

      .relativePos {
        height: 100%;
      }
    }
  }

  .s2 {
    ////// globals in section 2
    .menuColumn {
      padding: 0 15px;
      overflow: visible;
    }

    .waterMark {
      position: sticky;
      top: 100px;
      margin-bottom: 100px;
      //opacity: 0.2;

      @media (max-width: 768px) {
        & {
          margin-bottom: 70px;
        }
      }

      @media (max-width: 450px) {
        & {
          margin-bottom: 50px;
        }
      }

      svg {
        height: 70px;

        @media (max-width: 450px) {
          & {
            height: 40px;
          }
        }
      }
    }

    .menu--heading {
      color: $theme;
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 20px;

      @media (max-width: 768px) {
        font-size: 35px;
        padding: 10px 0;
        cursor: pointer;

        &::after {
          content: '';
          display: block;
          width: 100%;
          height: 3px;
          background: rgba(0, 0, 0, 0.05);
          margin-top: 15px;
        }
      }

    }

    .lists {
      margin-bottom: 50px;
    }

    .foodFrame {
      width: 90%;
      margin: 0 0;
      padding: 20px;
      @include transition(background-color 0.4s);

      @media (max-width: 992px) {
        & {
          width: 100%;
        }
      }

      @media (max-width: 380px) {
        & {
          padding: 20px 0;
        }
      }

      &:hover {
        background: rgba(0, 0, 0, 0.02);
        @media (max-width: 380px) {
          & {
            background: rgba(0, 0, 0, 0);
          }
        }
      }


      h3 {
        font-size: 15px;
        margin: 0 auto 10px;
        width: 100%;
        cursor: pointer;
        color: #000;
      }

      p {
        font-family: 'sahel';
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
      }

      span {
        display: inline-block;
        position: absolute;
        top: 20px;
        left: 20px;
        color: $red;
        font-size: 15px;
        @media (max-width: 380px) {
          & {
            left: 0;
          }
        }
      }

      img {
        width: 250px;
        position: absolute;
        display: none;
        z-index: 12;
        @include transition(opacity 0.2s);
        box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.3);
      }
    }

    .bg--shapes {
      div {
        z-index: -1;
      }

      svg {
        z-index: -1;
      }
    }

    ////// locals in section 2
    .food--menu {
      direction: rtl;

      .container > .row {
        //overflow: hidden;
      }

      /////// shapes
      .circle2 {
        position: absolute;
        top: -280px;
        left: 0;
        width: 40%;
        max-width: 500px;
        overflow: hidden;

        svg {
          @include transform(translateX(-200px));
        }
      }

      .leaf2 {
        position: absolute;
        top: 30%;
        left: 5%;
        opacity: 0.3;
      }

      .leaf3 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 150px;
        opacity: 0.3;
        @include transform(rotateY(180deg) translateX(50%));
      }

      .leaf4 {
        position: absolute;
        top: 30%;
        right: 0;
        overflow: hidden;

        svg {
          width: 50px;
          @include transform(rotateX(180deg) translateX(10px))
        }
      }

      .leaf5 {
        position: absolute;
        top: 80%;
        left: 0;
        overflow: hidden;
        opacity: 0.3;

        svg {
          width: 250px;
          @include transform(rotate(180deg) translateX(20px))
        }
      }

      .leaf6 {
        position: absolute;
        bottom: -50px;
        right: 10%;
        width: 50px;
        opacity: 0.3;
      }

    }

    .coffee--menu {
      margin-top: 100px;
      padding-top: 50px;
      //padding-bottom: 150px;
      //background: rgba(0, 0, 0, 0.4);

      .menu--heading {
        color: $coffeeThemeHover;
      }

      .foodFrame {

        //h3 {
        //  color: #fff;
        //}
        //
        //p {
        //  color: #fff;
        //}

        span {
          color: $coffeeThemeHover;
        }
      }

      /////// shapes

      .nut1 {
        position: absolute;
        top: 15%;
        right: 0;
        overflow: hidden;
        opacity: 0.3;

        svg {
          width: 150px;
          @include transform(translateX(60px));
        }

      }

      .nut2 {
        position: absolute;
        top: 30%;
        left: 5%;
        width: 80px;
        opacity: 0.3;
      }

      .leaf1 {
        position: absolute;
        top: 47%;
        right: 0;
        opacity: 0.3;
        width: 70px;
        @include transform(rotateY(180deg));

      }

      .leaf2 {
        position: absolute;
        top: 80%;
        left: 0;
        opacity: 0.3;
        width: 70px;
      }

      .cup {
        margin-right: 10%;
        @media (max-width: 768px) {
          & {
            display: none;
          }
        }

        path {
          fill: #dadfdf;
          opacity: 0.5;
        }
      }
    }
  }

  .s3 {
    overflow: hidden;

    .wave {
      display: block;
      margin: 0 auto 50px;
      @include transform(translateY(-25px));
    }

    .ext--title {
      h2 {
        font-size: 70px;
        color: $theme;
        opacity: 0.2;
        margin: -27px 0 0;
        padding-bottom: 40px;
        text-align: center;

        @media (max-width: 575px) {
          & {
            font-size: 40px;
          }
        }

        @media (max-width: 320px) {
          & {
            font-size: 30px;
          }
        }
      }
    }

    .info {
      background: green;
      text-align: center;
      padding: 0;
      overflow: hidden;

      .row {
        height: 100%;

        & > div {
          box-sizing: border-box;
          min-height: 300px;
          background: #fff;
          padding-top: 30px;
        }
      }

      svg {
        display: block;
        //width: 20%;
        margin: 0 auto 20px;
      }

      h3 {
        width: 100%;
        font-size: 14px;
        margin: 0 0 10px;
      }

      p {
        width: 100%;
        font-family: 'sahel';
        font-size: 10px;
        margin-bottom: 30px;
      }

      .top {
        height: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .bott {
        height: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .reservation {
        width: 100%;
        height: 90px;

        a {
          width: 100%;
          height: 100%;
          background: $theme;
          color: #fff;
          text-align: center;
          line-height: 90px;
          font-size: 20px;
          @include transition(background $trs);

          &:hover {
            background: $themeHover;
          }
        }
      }

    }

    .party--menu {
      padding-right: 50px;

      @media (max-width: 992px) {
        & {
          padding-right: 10px;
        }
      }

      .title {
        h2 {
          font-size: 70px;
          color: $theme;
          opacity: 0.2;
          margin: -27px 0 0;
          padding-bottom: 40px;

        }
      }

      .offers {
        padding: 30px;
        border-top: 1px solid #fff;
        min-height: 220px;

        h3 {
          font-family: 'sahel';
          font-size: 1.8em;
          font-weight: bold;
        }

        p {
          font-family: 'sahel';
          font-size: 0.9em;
          color: rgba(0, 0, 0, 0.9);
          margin: 30px 0;
          line-height: 1.8em;
        }

        span {
          display: inline-block;
          font-family: 'sahel';
          font-size: 0.9em;
          font-weight: bold;
          color: $red;
        }
      }

      .indicators {
        margin: 10px 0 0;
        padding-right: 25px;
        box-sizing: border-box;
        overflow: hidden;

        ul {
          li {
            width: 50px;
            height: 50px;
            background-color: $theme;
            display: inline-block;
            line-height: 50px;
            text-align: center;
            color: #fff;
            cursor: pointer;
            margin-left: 10px;
            margin-bottom: 5px;
            user-select: none;
            @include borderRadius(50%);
            @include transition(background-color $trs);


            span {
              font-size: 16px;
              font-weight: bold;

              @media (max-width: 575px) {
                & {
                  font-size: 14px;
                }
              }
            }

            @media (max-width: 575px) {
              & {
                width: 40px;
                height: 40px;
                margin-left: 5px;
                line-height: 40px;
              }
            }
          }

          .active {
            background-color: $themeHover !important;
          }
        }


      }

    }


  }

}

//////////////////////////////////////////////////////// about page
.about--page {
  overflow: hidden;
  position: relative;

  .s1 {
    margin-top: 100px;

    .txt {
      width: 100%;
      margin: 0 auto;

      h1 {
        font-size: 40px;
      }

      p {
        margin-top: 50px;
        line-height: 1.6em;
        padding-right: 30px;
        border-right: 1px solid $theme;
      }
    }
  }

  .s2 {
    padding: 100px 0;

    #slick {
      width: 100%;
      position: relative;

      .slick-list {
        overflow: visible !important;
      }

      .slick-prev {
        left: auto;
        right: 25px;
        z-index: 1;
        @include transform(rotate(180deg));
      }

      .slick-next {
        left: 25px;
        right: auto;
        z-index: 1;
        @include transform(rotate(180deg));
      }

      .slick-slide {
        width: 100%;

        img {
          width: 100%;
          @include transition(0.2s);
          cursor: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg width='20px' height='20px' fill='white' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 490.8 490.8' style='enable-background:new 0 0 490.8 490.8;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M364.8,299.55c46.3-75.8,36.9-176.3-28.6-241.9c-76.8-76.8-201.8-76.8-278.6,0s-76.8,201.8,0,278.5 c65.5,65.5,166,74.9,241.9,28.6L412,477.25c18,18,47.3,18,65.3,0s18-47.3,0-65.3L364.8,299.55z M295.5,295.55 c-54.4,54.4-142.8,54.4-197.1,0c-54.4-54.4-54.4-142.8,0-197.1c54.4-54.4,142.8-54.4,197.1,0 C349.8,152.75,349.8,241.15,295.5,295.55z M220,171.95h59.4v45.3H220v59.4h-45.3v-59.4h-59.3v-45.3h59.4v-59.4h45.3v59.4H220z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"), pointer !important;

          &:hover {
            @include transform(scale(1.1));
          }
        }
      }
    }
  }
}

// image modal (global class) -- used in about--page and gallery--page
.imageModal {
  display: block;
  opacity: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -3;
  @include transition(opacity $trs);

  .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
  }

  .imgBox {
    width: 50vw;
    position: fixed;
    top: 50%;
    left: 50%;
    @include transform(translateY(-50%) translateX(-50%));

    img {
      display: block;
      width: 0;
      @include transition($trs);
      @include transform(translate(-50%, 50%));
    }

    .close--btn {
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
      z-index: 3;
      opacity: 0;
    }
  }
}

.modal--active {
  opacity: 1 !important;
  z-index: 3 !important;

  .close--btn {
    opacity: 1 !important;
  }

  .zoom {
    display: block !important;
    width: 100% !important;
    @include transform(translate(0, 0) !important);
  }
}

//////////////////////////////////////////////////////// subscriber-affair page
.subs--page {
  .s1 {
    .subscription--box {
      width: 80%;
      max-width: 1300px;
      margin: 200px auto 100px;
      border: 1px solid #fff;
      padding: 0 70px;

      @media (max-width: 575px) {
        & {
          width: 100%;
          border: none;
          padding: 0 15px;
          margin: 150px auto 0;
        }
      }

      .form {
        width: 100%;
        max-width: 1000px;
        margin: 150px auto 90px;

        #address {
          width: 83%;

          @media (max-width: 992px) {
            & {
              width: 100%;
            }
          }
        }

        button {
          padding: 5px 15px;
          cursor: pointer;

          span {
            margin-left: 6px;
            color: $theme;
          }

          &:hover {
            border: 1px solid rgba(0, 0, 0, 0.1);
            @include boxShadow(0 0 4px rgba(0, 0, 0, 0.5))
          }

          @media (max-width: 992px) {
            & {
              margin-top: 20px;
            }
          }
        }

        input {
          width: 65%;
          margin-right: 20px;
          padding: 10px;

          &#phoneNumber {
            direction: ltr;
            text-align: right;
          }

          &:focus {
            border: 1px solid rgba(0, 0, 0, 0.1);
            @include boxShadow(0 0 4px rgba(0, 0, 0, 0.5))
          }

          @media (max-width: 1050px) {
            & {
              margin-right: 10px;
            }
          }

          @media (max-width: 992px) {
            & {
              width: 100%;
              margin-right: 0;
              margin-top: 10px;
            }
          }
        }

        .form--row {
          margin-bottom: 15px;
          height: 50px;
          text-align: left;
          padding: 0;

          @media (max-width: 992px) {
            & {
              text-align: right;
              height: auto;
            }
          }

          label {
            color: #fff;
            @media (max-width: 1300px) {
              & {
                font-size: 14px !important;
              }
            }

            @media (max-width: 1170px) {
              & {
                font-size: 12px !important;
              }
            }
            @media (max-width: 992px) {
              & {
                display: block;
                font-size: 16px !important;
              }
            }
          }

          p {
            color: red;
            font-size: 13px;
            font-family: 'sahel', sans-serif;
            margin-top: 4px;
            direction: rtl;
            text-align: right;
            padding-right: 35%;

            &.addressValidation {
              padding-right: 17%;
            }

            @media (max-width: 992px) {
              & {
                padding-right: 0;
              }
              &.addressValidation {
                padding-right: 0;
              }
            }
          }
        }

        .err {
          input {
            border: 1px solid red !important;

            &:focus {
              @include boxShadow(0 0 5px red !important);
            }
          }
        }
      }

      /////////// icons
      .subs--icon {
        width: 220px;
        position: absolute;
        top: 0;
        left: 50%;
        @include transform(translate(-50%, -50%));
      }

      .letters {
        width: 100px;
        position: absolute;
        overflow: hidden;

        svg {
          width: 100%;
        }
      }

      .l1 {
        bottom: 0;
        left: 0;

        svg {
          @include transform(translate(-15px, 10px))
        }
      }

      .l2 {
        top: 0;
        right: 0;

        svg {
          @include transform(translate(15px, -5px) rotateY(180deg));
        }

        @media (max-width: 370px) {
          & {
            display: none;
          }
        }
      }
    }
  }
}

//////////////////////////////////////////////////////// gallery page
.gallery--page {
  position: relative;
  text-align: center;

  .s1 {
    padding-top: 100px;

    .images {
      img {
        width: 100%;
        cursor: pointer;
      }
    }

    .indicators {
      display: inline-flex;
      margin-top: 30px;

      div {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-family: sans-serif;
        background: $theme;
        color: #fff;
        margin: 0 5px;
        cursor: pointer;
        @include borderRadius(50%);
        @include transition($trs);

        &:hover {
          background: $themeHover;
        }
      }

      .active {
        background: $themeHover;
      }
    }
  }
}

//////////////////////////////////////////////////////// franchise page
.franchise--page {
  position: relative;

  .s1 {
    color: #fff;
    position: relative;

    .txtBox {
      position: relative;
      width: 100%;
      margin: 100px auto 0;
      z-index: 1;

      p {
        line-height: 1.6em;
        margin-top: 50px;
      }
    }

  }

  /////// watermarks
  svg {
    position: absolute;
  }

  .w1 {
    bottom: 100px;
    left: 100px;

    @media (max-width: 768px) {
      & {
        display: none;
      }
    }
  }

  .w2 {
    width: 50px;
    @include transform(rotate(65deg));
    right: 0;
    bottom: 100px;
    opacity: 0.5;
    @media (max-width: 768px) {
      & {
        bottom: 20px;
      }
    }
  }

}

//////////////////////////////////////////////////////// contact page
.contact--page {
  .s1 {
    padding: 100px 0;

    .right {
      background: #fff;
      padding: 20px 50px;

      & > h2 {
        margin-bottom: 20px;
      }

      & > p {
        margin-bottom: 30px;
        opacity: 0.5;
        font-size: 14px;
      }

      .form {

        button {
          padding: 5px 15px;
          cursor: pointer;
          background: $theme;
          @include transform(translateY(70px));

          span {
            margin-left: 6px;
            color: #fff;
          }

          svg {
            path {
              fill: #fff;
            }
          }

          &:hover {
            border: 1px solid rgba(0, 0, 0, 0.1);
            @include boxShadow(0 4px 4px rgba(0, 0, 0, 0.2))
          }

          @media (max-width: 992px) {
            & {

            }
          }
        }

        input {
          width: 100%;
          padding: 15px 0 5px 10px;
          border-bottom: 3px solid rgba(0, 0, 0, 0.1);

          &#phoneNumber {
            direction: ltr;
            text-align: right;
          }

          &:focus {
            border-bottom: 3px solid rgba(0, 0, 0, 0.1);
            @include boxShadow(0 4px 4px rgba(0, 0, 0, 0.1))
          }

          &::placeholder {
            color: rgba(0, 0, 0, 0.5);
          }

          @media (max-width: 1050px) {
            & {
              margin-right: 10px;
            }
          }

          @media (max-width: 992px) {
            & {
              width: 100%;
              margin-right: 0;
              margin-top: 10px;
            }
          }
        }

        .form--row {
          margin-bottom: 15px;
          height: 50px;
          text-align: left;
          padding: 0;

          @media (max-width: 992px) {
            & {
              text-align: right;
              height: auto;
            }
          }

          label {
            @media (max-width: 1300px) {
              & {
                font-size: 14px !important;
              }
            }

            @media (max-width: 1170px) {
              & {
                font-size: 12px !important;
              }
            }
            @media (max-width: 992px) {
              & {
                display: block;
                font-size: 16px !important;
              }
            }
          }

          p {
            color: red;
            font-size: 13px;
            font-family: 'sahel', sans-serif;
            margin-top: 2px;
          }
        }

        .err {
          input {
            border-bottom: 3px solid red !important;

            &::placeholder {
              color: red;
            }
          }
        }

      }

    }

    .left {
      background: $theme;
      padding: 90px 0;

      @media (max-width: 992px) {
        & {
          padding: 60px 0;
        }
      }

      .container-fluid {
        height: 100%;

        .row {
          flex-direction: column;
          justify-content: space-between;
          align-content: center;
          height: 100%;


        //   @media (max-width: 992px) {
        //     & {
        //       flex-direction: row;
        //     }
        //   }

          div {
            width: 300px;
            text-align: right;
            position: relative;
            padding-left: 30px;
            flex-grow: unset;

            @media (max-width: 992px) {
              & {
                text-align: center;
                direction: ltr;
              }
            }

            &:first-child {
              @media (max-width: 992px) {
                & {
                  direction: rtl;

                  svg {
                    @include transform(translateY(5px));
                  }
                }
              }
            }

            &:last-child {
              margin-bottom: 0;
            }

            p {
              display: inline-block;
              color: #fff;
              line-height: 1.4em;

              @media (max-width: 575px) {
                & {
                  margin-top: 10px;
                }
              }
            }

            a {
              display: inline-block;
              font-family: 'sahel';
              color: #fff;
              direction: ltr;

              @media (max-width: 575px) {
                & {
                  margin-top: 15px;
                }
              }
            }

            svg {
              position: absolute;
              top: 0;
              left: 0;

              @media (max-width: 992px) {
                & {
                  position: static;
                  margin: 0 10px;
                  @include transform(translateY(3px));
                }
              }

            }
          }
        }
      }


    }
  }
}

//////////////////////////////////////////////////////// social responsibility page
.socialR--page {
  .s1 {
    .txtBox {
      width: 100%;
      margin: 100px auto;

      p {
        margin-top: 50px;
        line-height: 1.6em;
      }
    }
  }
}

//////////////////////////////////////////////////////// preLoader
.preLoader {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 25;

  .bgDIV {
    width: 100%;
    height: 50vh;
    background-color: $theme;
  }

  .content {
    position: absolute;
    top: calc(50% - 17.5px);
    width: 100%;
    height: 35px;
    text-align: center;
    overflow: hidden;

    p {
      font-size: 30px;
      position: absolute;
      left: calc(50% - 150px);
      top: 70px;
      width: 300px;
      height: 50px;
      color: #fff;
      z-index: 5;
      font-family: 'sahel';
      font-weight: bold;
    }

    .p1 {
      top: 0;
    }
  }

  .progressBar {
    width: 100vw;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: calc(50% - 0.5px);
    left: 0;
    z-index: 4;
    opacity: 0;
  }

}

//////////////////////////////////////////////////////// pageLoad
.pageLoad {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 25;
  display: none;
  overflow: hidden;

  @media (max-width: 768px) {
    display: none !important;
  }

  //////// new theme
  .cCol {
    width: 100%;
    display: block;
    opacity: 0;
    line-height: 0;
    background: #8DC640;
  }

}

//////////////////////////////////////////////////////// pageLoad
.error--page {
  min-height: 100vh;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;

  a {
    color: $theme;
    font-weight: bold;
    margin-top: 20px;
  }
}

//////////////////////////////////////////////////////// pageLoad
.reservation--page {
  min-height: 100vh;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;

  h1 {
    color: $theme;
    font-weight: bold;
    margin-top: 20px;
  }
}

/////////////////////////////////////////////////////// pageqrcode
.download-app {
  .instagram-style {
    margin-bottom: 24px;
    //border: 2px solid;
    border-radius: 50px;
    min-width: 295px;
    background: black;

    span {
      font-weight: bolder;
      //margin-right: 90px;
      font-size: 20px;
      margin: 0 auto;
      color: white;
    }
  }
}

/////////////////////////////////////////////////////// social page
.logo-image {
  position: relative;
  //display: inline-block;
  border: 5px solid #009444;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;

  //&::before {
  //  content: '';
  //  position: absolute;
  //  top: 0;
  //  left: 0;
  //  width: 100%;
  //  height: 100%;
  //  border-radius: 50%;
  //  background: radial-gradient(circle, #ffcc00, #ff9900);
  //  clip-path: circle(50% at 50% 50%);
  //  z-index: -1;
  //}

  img {
    //display: block;
    width: 40px;
    //height: 40px; /* ابعاد تصویر را به همراه ابعاد مطابقت دهید */
    //border-radius: 50%;
    //overflow: hidden; /* مطمئن شوید که حاشیه گرادیانت داخل تصویر قابل مشاهده است */
    //position: absolute;
    //top: 15px;
  }
}

.contactBtnSocial {
  background: #009444;
  color: white;
  padding: 10px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  //font-weight: bold;
}

//////////////////////////////////////////////////////// qr landing
.social-links {
  .icon-social-link{
    margin-left: 20px;
    width: 50px;
    height: 50px;
    background: #E6F4DA;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  i {
    //padding: 15px;
    //background: #E6F4DA;
    //border-radius: 15px;
    color: #009444;
    font-size: 25px
  }

  .social-title{
    font-size: 16px;
    font-weight: bold;
    color: black;
  }
}