body {
  direction: rtl;
  font-family: IRANSans, sans-serif;
  font-size: 16px;
  margin: 0;
  text-align: right;
  background-color: #f5f5f7;
}
.jq-toast-single{font-family: 'IRANSans',sans-serif;direction: rtl;}
body::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #727377;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #727377;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #727377;
}

a {
  color: #fff;

  &:hover {
    text-decoration: none;
    color: #fff;
  }
}

button {
  border: none;
  outline: none;
  cursor: pointer;

  &:focus {
    outline: none;
  }
}

$amounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100);
$sides: (top, right, bottom, left);

@each $space in $amounts {
  @each $side in $sides {
    .margin-#{$side}-#{$space} {
      margin-#{$side}: #{$space}px !important;
    }

    .padding-#{$side}-#{$space} {
      padding-#{$side}: #{$space}px !important;
    }
  }
}

@each $space in $amounts {
  .padding-#{$space} {
    padding: #{$space}px !important;
  }
}

$amounts_2: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95);

@each $width in $amounts_2 {
  .w-#{$width} {
    width: #{$width}% !important;
  }
}

.header_style {
  background-color: #d8d8d8;
  padding: 25px 0;

  button,.myFabrikaBtn {
    background-color: #f2c200;
    padding: 5px 10px;
    font-size: 18px;
    color: #fff;
    border-radius: 25px;
    font-weight: 300;

    i {
      font-size: 20px;
      color: #fff;
      font-weight: bold;
      vertical-align: middle;
      margin-left: 10px;
    }
  }

  nav {
    padding: 0;

    ul {
      display: flex;
      padding: 0;
      padding-top: 25px;
      margin: 0;

      @media (max-width: 991px) {
        padding-top: 5px;
      }

      i {
        font-size: 25px;
        color: #454545;
        font-weight: bold;
        vertical-align: middle;
        margin-left: 10px;
      }

      li {
        list-style: none;
        margin-left: 25px;
        position: relative;

        @media (max-width: 991px) {
          margin-left: 0;
        }

        &:hover {
          &:after {
            content: "";
            position: absolute;
            width: 50%;
            height: 5px;
            background-color: #f2c200;
            border-radius: 5px;
            bottom: -9px;
            left: 50%;
            transform: translateX(-50%);
          }
        }

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

        a {
          color: #454545;
          font-size: 18px;
          display: flex;
          align-items: center;
          padding: 0 !important;

          &.dropdown-toggle {
            &:before {
              content: "\ef0a";
              margin-left: 5px;
              color: #454545;
              font-size: 14px;
              font-weight: bold;
              vertical-align: middle;
              font-family: 'azarin-icon';
            }
          }

          &:after {
            display: none;
          }
        }
      }
    }
  }

  img {
    width: 100%;
    @media (max-width: 991px) {
      width: auto;
    }
  }

  .link_left {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    width: 100%;

    a {
      color: #454545;
      font-size: 18px;
      margin-left: 25px;

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

.breadcrumb_style {
  background-color: #111111;
  padding: 15px 0;

  ul {
    display: flex;
    padding: 0;
    margin: 0;

    li {
      list-style: none;
      margin: 0 7px;
      display: flex;
      align-items: center;

      a {
        color: #666666;
        font-size: 16px;
      }

      &:after {
        content: "/";
        font-size: 18px;
        color: #666666;
        vertical-align: middle;
        margin-right: 15px;
      }

      &:last-child {
        &:after {
          display: none;
        }
      }
    }
  }
}

.breadcrumb_style_2 {
  background-color: #111111;
  padding: 15px 0;

  .back_bread {
    overflow-x: auto;

    ul {
      display: flex;
      padding: 0;
      margin: 0;
      min-width: max-content;

      li {
        list-style: none;
        margin: 0 7px;
        display: flex;
        align-items: center;

        &:last-child {
          a {
            color: #a8a8a8;
          }
        }

        a {
          color: #666666;
          font-size: 16px;
        }

        &:after {
          content: "/";
          font-size: 18px;
          color: #666666;
          vertical-align: middle;
          margin-right: 15px;
        }

        &:last-child {
          &:after {
            display: none;
          }
        }
      }
    }
  }
}

.states_pick {
  background-image: url("../uploads/img/back_states.jpg");
  width: 100%;
  height: 800px;
  background-size: cover;
  background-position-y: top;
  display: flex;
  align-items: center;

  @media (max-width: 767px) {
    height: auto;
    padding: 50px 0;
  }

  .back_ul {
    overflow-x: auto;

    ul {
      padding: 0 50px;
      border: none;
      display: flex;

      @media (max-width: 1199px) {
        padding: 0 40px;

        a {
          padding: 15px 10px !important;
        }
      }

      @media (max-width: 991px) {
        min-width: 1000px;
        padding: 0;
      }

      li {
        margin-left: 15px !important;
        flex: 1;
        margin-bottom: 0 !important;

        &:last-child {
          margin-left: 0 !important;
        }

        a {
          background-color: #fff !important;
          border: none !important;
          color: #454545 !important;
          border-radius: 10px !important;
          padding: 15px;
          text-align: center;
          font-weight: 500;

          img {
            margin-left: 7px;
          }

          &.active {
            background-color: #f2c200 !important;
            color: #fff !important;

            img {
              filter: brightness(100);
            }
          }
        }
      }
    }
  }

  .tab-content {
    background-color: rgba(255, 255, 255, 0.93);
    margin-top: 35px;
    border-radius: 15px;
    padding: 20px;
    padding-bottom: 60px;
    position: relative;

    .title {
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        color: #454545;
        font-weight: 300;
        font-size: 18px;
      }

      strong {
        color: #9a9a9a;
        margin: 0 18px;
        font-size: 24px;
        font-weight: 300;
      }

      b {
        color: #000;
        font-size: 18px;
        font-weight: 400;
      }
    }

    .advanced_search {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      padding: 5px 50px;
      background-color: #b7b7b7;
      border-radius: 20px 20px 0 0;
      color: #000;
      font-size: 16px;

      @media (max-width: 575px) {
        padding: 5px 14px;
      }
    }
  }

  .full_slide {
    position: relative;

    #slider_1 {
      margin-top: 25px;

      .swiper-slide {
        height: auto;

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

          &:hover {
            img {
              filter: saturate(1);
            }
          }
          &.active{
            img {
              filter: saturate(1);
            }
          }

          img {
            margin-bottom: 20px;
            filter: saturate(4%);
            max-height: 165px;
          }

          span {
            font-size: 20px;
            color: #454545;
            font-weight: 300;
          }
        }
      }
    }

    .swiper-button-next {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ececec'%2F%3E%3C%2Fsvg%3E");
      background-size: 30px 30px;
      width: 30px;
      height: 30px;
      right: -80px;
      outline: none;

      @media (max-width: (1199px)) {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23c0beb7'%2F%3E%3C%2Fsvg%3E");
        right: -20px;
      }
    }

    .swiper-button-prev {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ececec'%2F%3E%3C%2Fsvg%3E");
      background-size: 30px 30px;
      width: 30px;
      height: 30px;
      left: -80px;
      outline: none;

      @media (max-width: (1199px)) {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23c0beb7'%2F%3E%3C%2Fsvg%3E");
        left: -20px;
      }
    }
  }

  .search_style {
    margin: 35px 60px;
    margin-bottom: 20px;
    position: relative;

    @media (max-width: 991px) {
      margin: 35px 0 !important;

      input {
        padding: 25px 5px !important;
      }
    }

    input {
      width: 100%;
      padding: 25px 35px;
      color: #000;
      font-size: 20px;
      font-weight: 300;
      border-radius: 20px;
      border: none;
      outline: none;

      &::placeholder {
        font-size: 20px;
        font-weight: 200;
        color: #454545;
      }
    }

    button {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background-color: #f2c200;
      padding: 0 35px;
      border-radius: 20px 0 0 20px;
      color: #fff;
      font-size: 20px;

      @media (max-width: 991px) {
        position: relative;
        width: 100%;
        padding: 10px 35px;
        border-radius: 15px;
        margin-top: 10px;
      }
    }
  }

  .dashes {
    width: 95%;
    height: 1px;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  .select_2_back {
    .count {
      .v-select{
        .dropdown-toggle{
          &:after{
            display: none;
          }
          .clear{margin-right: 0;margin-left: 6px}
          border:0
        }
        &:before{content: "انتخاب زیر دسته";font-size: 20px;color: #000;font-weight: 500;}
        background-color: white;
        border-radius: 15px;
        padding: 10px;
        border:1px solid #ccc;
        outline: none;
        input{direction: rtl}
      }

      &:nth-child(2) {
        .v-select{
          &:before{content: "انتخاب نوع";font-size: 20px;color: #000;font-weight: 500;}
        }
      }
      &:nth-child(3) {
        .v-select{
          &:before{content: "انتخاب اولویت";font-size: 20px;color: #000;font-weight: 500;}
        }
      }
      &:nth-child(4) {
        .v-select{
          &:before{content: "انتخاب شهر";font-size: 20px;color: #000;font-weight: 500;}
        }
      }

      &:last-child {
        .select2-selection {
          &:before {
            content: "نوع آگهی";
          }
        }
      }
    }

    .select2-container {
      width: 100% !important;
      background-color: #f7f7f7;
      height: 100%;

      .select2-selection {
        height: 100%;
        padding: 10px 0;
        padding-right: 50px;
        border-radius: 15px;
        border-color: #cccccc;
        outline: none;

        .select2-selection__rendered {
          padding: 0;
          font-size: 16px;
          color: #747474;
          font-weight: 300;
        }

        .select2-selection__arrow {
          top: 50%;
          right: 25px;
          transform: translateY(-50%);
          width: auto;

          i {
            font-size: 35px;
            color: #000;
            font-weight: bold;
          }
        }
      }
    }
  }
}

.content_1 {
  background-color: #f5f5f7;
  padding: 80px 0;
  padding-bottom: 150px;
  position: relative;

  @media (max-width: 767px) {
    padding-bottom: 80px;

    .img_1 {
      display: none;
    }
    .img_2 {
      display: none;
    }
    .img_3 {
      display: none;
    }
  }

  .back {
    display: flex;
    justify-content: space-between;
    align-items: center;

    @media (max-width: 767px) {
      flex-direction: column;

      .info {
        margin-bottom: 20px;
      }
    }

    .info {
      display: flex;
      flex-direction: column;
      span {
        &:first-child {
          font-size: 26px;
          color: #000;
          font-weight: 500;
        }

        &:last-child {
          font-size: 18px;
          color: #b6b6b6;
        }
      }
    }

    a {
      background-color: #f2c200;
      padding: 10px 25px;
      font-size: 18px;
      color: #fff;
      border-radius: 25px;
      font-weight: 300;
      z-index: 2;
    }
  }

  .back_post {
    height: 310px;
    position: relative;
    transition: ease 0.4s;
    border-radius: 20px;

    .instant {
      position: absolute;
      top: 0;
      left: 25px;
      background-color: #de7426;
      font-size: 14px;
      font-weight: 200;
      color: #fff;
      padding: 2px 6px;
      z-index: 2;
    }

    @media (max-width: 767px) {
      margin-bottom: 25px;
    }

    &:hover {
      box-shadow: 0 4px 26px 1px #0000001f;

      .details {
        height: 58%;
      }

      .slider_post {
        height: 42%;

        img {
          object-fit: cover;
        }

        .states_back {
          span {
            opacity: 0;
            user-select: none;
            cursor: initial;
          }

          .shadow {
            opacity: 0;
          }
        }

        .swiper-button-next {
          opacity: 1;

          &.swiper-button-disabled {
            opacity: 0.3;
          }
        }

        .swiper-button-prev {
          opacity: 1;

          &.swiper-button-disabled {
            opacity: 0.3;
          }
        }
      }
    }

    .details {
      background-color: #fff;
      padding: 20px;
      border-radius: 0 0 20px 20px;
      height: 70%;
      transition: height 1s;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      h3 {
        font-size: 16px;
        color: #333;
      }

      span {
        font-size: 12px;
        color: #717171;
        font-weight: 200;
      }

      .icons {
        margin-top: 20px;
        display: flex;
        justify-content: center;

        span {
          margin-left: 20px;
          display: flex;
          font-weight: bold;
          font-size: 12px;

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

          i {
            font-size: 20px;
            font-weight: bold;
            color: #f2c200;
            vertical-align: middle;
            margin-right: 10px;
          }
        }
      }
    }

    .slider_post {
      position: relative;
      height: 30%;
      transition: height 1s;

      .states_back {
        height: 100%;
        position: relative;

        .shadow {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.3);
          border-radius: 20px 20px 0 0;
          transition: opacity 0.4s ease-in-out;
        }

        span {
          font-size: 18px;
          position: absolute;
          left: 50%;
          bottom: 15px;
          transform: translateX(-50%);
          color: #fff;
          display: inline-table;
          transition: opacity 0.4s ease-in-out;
        }

        img {
          width: 100%;
          border-radius: 20px 20px 0 0;
          height: 100%;
          object-fit: cover;
          object-position: top;
        }
      }

      .swiper-button-next {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ececec'%2F%3E%3C%2Fsvg%3E");
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
        outline: none;
        margin-top: 0;
        transform: translateY(-50%);
        opacity: 0;
        transition: opacity 0.4s ease-in-out;
      }

      .swiper-button-prev {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ececec'%2F%3E%3C%2Fsvg%3E");
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
        outline: none;
        margin-top: 0;
        transform: translateY(-50%);
        opacity: 0;
        transition: opacity 0.4s ease-in-out;
      }
    }
  }

  .img_1 {
    background-image: url("../uploads/img/tractor_back.png");
    width: 789px;
    height: 476px;
    position: absolute;
    left: 0;
    bottom: 20px;
  }

  .img_2 {
    background-image: url("../uploads/img/build.png");
    width: 497px;
    height: 437px;
    position: absolute;
    left: 0;
    bottom: 20px;
  }

  .img_3 {
    background-image: url("../uploads/img/building.png");
    width: 494px;
    height: 500px;
    position: absolute;
    left: 0;
    bottom: 20px;
  }
}

.content_2 {
  background-color: #d8d8d8;
  padding: 80px 0;
  padding-bottom: 180px;
  position: relative;

  @media (max-width: 767px) {
    padding-bottom: 80px;

    .img_1 {
      display: none;
    }
    .img_2 {
      display: none;
    }
  }

  .back {
    display: flex;
    justify-content: space-between;
    align-items: center;

    @media (max-width: 767px) {
      flex-direction: column;

      .info {
        margin-bottom: 20px;
      }
    }

    .info {
      display: flex;
      flex-direction: column;
      span {
        &:first-child {
          font-size: 26px;
          color: #454545;
          font-weight: 500;
        }

        &:last-child {
          font-size: 18px;
          color: #454545;
        }
      }
    }

    a {
      background-color: #f2c200;
      padding: 10px 25px;
      font-size: 18px;
      color: #fff;
      border-radius: 25px;
      font-weight: 300;
    }
  }

  .back_post {
    height: 310px;
    position: relative;
    transition: ease 0.4s;
    border-radius: 20px;

    .instant {
      position: absolute;
      top: 0;
      left: 25px;
      background-color: #de7426;
      font-size: 14px;
      font-weight: 200;
      color: #fff;
      padding: 2px 6px;
      z-index: 2;
    }

    @media (max-width: 767px) {
      margin-bottom: 25px;
    }

    &:hover {
      box-shadow: 0 4px 26px 1px #0000001f;

      .details {
        height: 58%;
      }

      .slider_post {
        height: 42%;

        img {
          object-fit: cover;
        }

        .states_back {
          span {
            opacity: 0;
            user-select: none;
            cursor: initial;
          }

          .shadow {
            opacity: 0;
          }
        }

        .swiper-button-next {
          opacity: 1;

          &.swiper-button-disabled {
            opacity: 0.3;
          }
        }

        .swiper-button-prev {
          opacity: 1;

          &.swiper-button-disabled {
            opacity: 0.3;
          }
        }
      }
    }

    .details {
      background-color: #fff;
      padding: 20px;
      border-radius: 0 0 20px 20px;
      height: 70%;
      transition: height 1s;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      h3 {
        font-size: 16px;
        color: #333;
      }

      span {
        font-size: 12px;
        color: #717171;
        font-weight: 200;
      }

      .icons {
        margin-top: 20px;
        display: flex;
        justify-content: center;

        span {
          margin-left: 20px;
          display: flex;
          font-weight: bold;
          font-size: 12px;

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

          i {
            font-size: 20px;
            font-weight: bold;
            color: #f2c200;
            vertical-align: middle;
            margin-right: 10px;
          }
        }
      }
    }

    .slider_post {
      position: relative;
      height: 30%;
      transition: height 1s;

      .states_back {
        height: 100%;
        position: relative;

        .shadow {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.3);
          border-radius: 20px 20px 0 0;
          transition: opacity 0.4s ease-in-out;
        }

        span {
          font-size: 18px;
          position: absolute;
          left: 50%;
          bottom: 15px;
          transform: translateX(-50%);
          color: #fff;
          display: inline-table;
          transition: opacity 0.4s ease-in-out;
        }

        img {
          width: 100%;
          border-radius: 20px 20px 0 0;
          height: 100%;
          object-fit: cover;
          object-position: top;
        }
      }

      .swiper-button-next {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ececec'%2F%3E%3C%2Fsvg%3E");
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
        outline: none;
        margin-top: 0;
        transform: translateY(-50%);
        opacity: 0;
        transition: opacity 0.4s ease-in-out;
      }

      .swiper-button-prev {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ececec'%2F%3E%3C%2Fsvg%3E");
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
        outline: none;
        margin-top: 0;
        transform: translateY(-50%);
        opacity: 0;
        transition: opacity 0.4s ease-in-out;
      }
    }
  }

  .img_1 {
    background-image: url("../uploads/img/ghate.png");
    width: 523px;
    height: 501px;
    position: absolute;
    right: 0;
    bottom: 20px;
  }

  .img_2 {
    background-image: url("../uploads/img/sanati.png");
    width: 383px;
    height: 530px;
    position: absolute;
    right: 40px;
    bottom: -20px;
    background-size: cover;
  }
}

.app_style {
  background-image: url("../uploads/img/back_app.png");
  width: 100%;
  height: 775px;
  display: flex;
  align-items: center;

  @media (max-width: 991px) {
    height: auto;
    padding: 50px 0;

    .img_download {
      text-align: center;
      margin: 40px 0;
    }
  }

  span {
    font-size: 26px;
    color: #454545;
    display: block;
    margin-bottom: 15px;
    font-weight: 500;
  }

  p {
    font-size: 16px;
    color: #454545;
    font-weight: 300;
  }

  .back_input {
    position: relative;

    input {
      width: 100%;
      padding: 15px 25px;
      color: #000;
      font-size: 16px;
      font-weight: 300;
      border-radius: 30px;
      border: none;
      outline: none;
      background-color: #eaeaea;
    }

    button {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background-color: #f2c200;
      padding: 0 30px;
      border-radius: 30px;
      color: #fff;
      font-size: 16px;

      @media (max-width: 991px) {
        position: relative;
        width: 50%;
        padding: 10px 25px;
        display: block;
        margin: 0 auto;
        margin-top: 10px;
      }
    }
  }

  .img_download {
    margin-top: 40px;

    img {
      margin-left: 15px;

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

.footer_style {

  .part_1 {
    background-color: #292929;
    padding: 50px 0;

    span {
      color: #fff;
      font-size: 22px;
      display: block;
      margin-bottom: 30px;
    }

    ul {
      flex: 1;
      padding: 0;
      padding-right: 8px;

      li {
        list-style: none;
        margin-bottom: 8px;
        a {
          color: #e6e6e6;
          font-size: 18px;
          font-weight: 300;
          transition: ease 0.2s;
          position: relative;
          padding-right: 22px;

          &:hover {
            &:before {
              background-color: #f2c200;
              border-color: #f2c200;
            }
          }

          &:before {
            content: "";
            width: 15px;
            height: 15px;
            background-color: transparent;
            border: 2px solid #fff;
            border-radius: 50%;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }

    .contact_us {
      span {
        color: #fff;
        margin-bottom: 0;
        font-size: 20px;
        line-height: 1;
      }

      p {
        color: #fff;
        font-size: 18px;
        font-weight: 200;
      }

      i {
        font-size: 30px;
        font-weight: bold;
        color: #f2c200;
        vertical-align: middle;
        margin-left: 10px;
      }
    }

    .subscribe {
      input {
        width: 100%;
        padding: 10px 13px;
        color: #000;
        border-radius: 30px;
        border: 3px solid #d3d3d3;
        outline: none;
      }

      i {
        font-size: 20px;
        color: #fff;
        padding: 8px;
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: bold;
        background-color: #f2c200;
        border-radius: 50%;
        cursor: pointer;
      }
    }
  }

  .part_2 {
    background-color: #363636;
    padding: 15px 0;

    i {
      font-size: 30px;
      color: #c5c5c5;
      vertical-align: middle;
      transition: ease 0.2s;

      &:hover {
        color: #f2c200;
      }
    }

    p {
      font-size: 14px;
      color: #fff;
      text-align: left;
      margin-bottom: 5px;

      &:first-child {
        font-weight: 300;
      }

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

.list_style {
  padding: 50px 0;

  .back_right {
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 26px 1px #0000001f;
    padding: 25px 20px;

    .name_ad {
      display: flex;
      align-items: center;
      flex-direction: column;

      img {
        margin-bottom: 20px;
      }

      span {
        color: #454545;
        font-size: 18px;
        display: flex;
        align-items: center;

        i {
          font-size: 22px;
          color: #454545;
          font-weight: bold;
          vertical-align: middle;
          margin-right: 7px;
        }
      }
    }

    .dashes {
      margin: 20px 0;
      img {
        width: 100%;
        height: 1px;
      }
    }

    .filters {

      span {
        font-size: 20px;
        color: #454545;
        display: block;
        margin-bottom: 20px;
      }

      b {
        font-weight: normal;
        color: #454545;
        font-size: 16px;

        strong {
          font-weight: normal;
          color: #8d8d8d;
          font-size: 16px;
        }
      }
    }

    .select_2_back {
      margin-top: 15px;

      .count {
        .select2-selection {
          .v-select{
            .dropdown-toggle:after{display:none}
          }
          &:before {
            content: "برند";
            font-size: 18px;
            color: #000;
            font-weight: 500;
          }
        }

        &:first-child {
          .select2-selection {
            &:before {
              content: "استان";
            }
          }
        }

        &:last-child {
          .select2-selection {
            &:before {
              content: "سال ساخت";
            }
          }
        }

        margin-bottom: 15px;

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

      .select2-container {
        width: 100% !important;
        background-color: transparent;
        height: 100%;

        .select2-selection {
          height: 100%;
          padding: 10px 0;
          padding-right: 60px;
          border-radius: 15px;
          border-color: #cccccc;
          outline: none;
          text-align: right;

          .select2-selection__rendered {
            padding: 0;
            font-size: 14px;
            color: #747474;
            font-weight: 300;
          }

          .select2-selection__arrow {
            top: 50%;
            right: 15px;
            transform: translateY(-50%);
            width: auto;

            i {
              font-size: 35px;
              color: #000;
              font-weight: bold;
            }
          }
        }
      }

      button {
        padding: 10px 0;
        background-color: #e2e2e2;
        border-radius: 10px;
        color: #000;
        font-size: 16px;
        font-weight: 300;
        width: 100%;
      }
    }

    .buttons {
      display: flex;
      flex-direction: column;

      button {
        padding: 5px 0;
        border-radius: 10px;
        color: #fff;
        font-size: 18px;
        width: 100%;
        font-weight: 300;

        &:first-child {
          background-color: #f2c200;
          margin: 10px 0;
        }

        &:last-child {
          background-color: #acacac;
        }
      }
    }
  }

  .back_left {
    .search_style {
      position: relative;

      @media (max-width: 991px) {
        input {
          font-size: 16px !important;
          padding: 20px 15px !important;
        }
      }

      input {
        width: 100%;
        padding: 15px 25px;
        color: #000;
        font-size: 20px;
        font-weight: 300;
        border-radius: 20px;
        outline: none;
        border: 1px solid #ccc;

        &::placeholder {
          font-size: 18px;
          font-weight: 200;
          color: #454545;

          @media (max-width: 991px) {
            font-size: 16px;
          }
        }
      }

      button {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background-color: #f2c200;
        padding: 0 35px;
        border-radius: 20px 0 0 20px;
        color: #fff;
        font-size: 20px;

        @media (max-width: 991px) {
          position: relative;
          width: 100%;
          padding: 10px 35px;
          border-radius: 15px;
          margin-top: 10px;
        }
      }
    }

    .select_2_back {
      .v-select{
        .dropdown-toggle{
          height: 45px;
          background-color: white;
        }
      }
      .count {
        .select2-selection {
          &:before {
            content: "نوع آگهی";
            font-size: 18px;
            color: #000;
            font-weight: 500;
          }
        }

        &:first-child {
          .select2-selection {
            &:before {
              content: "نحوه چینش نتایج";
            }
          }
        }
      }

      .select2-container {
        width: 100% !important;
        background-color: #f7f7f7;
        height: 100%;

        .select2-selection {
          height: 100%;
          padding: 10px 0;
          padding-right: 80px;
          border-radius: 15px;
          border-color: #cccccc;
          outline: none;

          .select2-selection__rendered {
            padding: 0;
            font-size: 14px;
            color: #747474;
            font-weight: 300;
          }

          .select2-selection__arrow {
            top: 50%;
            right: 25px;
            transform: translateY(-50%);
            width: auto;

            i {
              font-size: 35px;
              color: #000;
              font-weight: bold;
            }
          }
        }
      }

      button {
        padding: 10px 0;
        background-color: #e2e2e2;
        border-radius: 10px;
        color: #000;
        font-size: 16px;
        font-weight: 300;
        width: 100%;
      }
    }

    .dashes {
      margin: 20px 0;
      img {
        width: 100%;
        height: 1px;
      }
    }

    .result {
      display: flex;
      justify-content: space-between;

      i {
        font-size: 25px;
        font-weight: bold;
        color: #454545;
        vertical-align: middle;
        margin-left: 10px;

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

        &.active {
          color: #f2c200;
        }
      }

      span {
        color: #454545;
        font-size: 18px;

        strong {
          font-weight: 300;
        }
      }
    }

    .back_post {
      height: 310px;
      position: relative;
      transition: ease 0.4s;
      border-radius: 20px;
      margin-bottom: 25px;

      .instant {
        position: absolute;
        top: 0;
        left: 25px;
        background-color: #de7426;
        font-size: 14px;
        font-weight: 200;
        color: #fff;
        padding: 2px 6px;
        z-index: 2;
      }

      @media (max-width: 767px) {
        margin-bottom: 25px;
      }

      &:hover {
        box-shadow: 0 4px 26px 1px #0000001f;

        .details {
          height: 58%;
        }

        .slider_post {
          height: 42%;

          img {
            object-fit: cover;
          }

          .states_back {
            span {
              opacity: 0;
              user-select: none;
              cursor: initial;
            }

            .shadow {
              opacity: 0;
            }
          }

          .swiper-button-next {
            opacity: 1;

            &.swiper-button-disabled {
              opacity: 0.3;
            }
          }

          .swiper-button-prev {
            opacity: 1;

            &.swiper-button-disabled {
              opacity: 0.3;
            }
          }
        }
      }

      .details {
        background-color: #fff;
        padding: 20px;
        border-radius: 0 0 20px 20px;
        height: 70%;
        transition: height 1s;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        h3 {
          font-size: 16px;
          color: #333;
        }

        span {
          font-size: 12px;
          color: #717171;
          font-weight: 200;
        }

        .icons {
          margin-top: 20px;
          display: flex;
          justify-content: center;

          span {
            margin-left: 20px;
            display: flex;
            font-weight: bold;
            font-size: 12px;

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

            i {
              font-size: 20px;
              font-weight: bold;
              color: #f2c200;
              vertical-align: middle;
              margin-right: 10px;
            }
          }
        }
      }

      .slider_post {
        position: relative;
        height: 30%;
        transition: height 1s;

        .states_back {
          height: 100%;
          position: relative;

          .shadow {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 20px 20px 0 0;
            transition: opacity 0.4s ease-in-out;
          }

          span {
            font-size: 18px;
            position: absolute;
            left: 50%;
            bottom: 15px;
            transform: translateX(-50%);
            color: #fff;
            display: inline-table;
            transition: opacity 0.4s ease-in-out;
          }

          img {
            width: 100%;
            border-radius: 20px 20px 0 0;
            height: 100%;
            object-fit: cover;
            object-position: top;
          }
        }

        .swiper-button-next {
          background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ececec'%2F%3E%3C%2Fsvg%3E");
          background-size: 30px 30px;
          width: 30px;
          height: 30px;
          outline: none;
          margin-top: 0;
          transform: translateY(-50%);
          opacity: 0;
          transition: opacity 0.4s ease-in-out;
        }

        .swiper-button-prev {
          background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ececec'%2F%3E%3C%2Fsvg%3E");
          background-size: 30px 30px;
          width: 30px;
          height: 30px;
          outline: none;
          margin-top: 0;
          transform: translateY(-50%);
          opacity: 0;
          transition: opacity 0.4s ease-in-out;
        }
      }
    }
  }

  .part_3_back {
    margin-top: 35px;

    .paginations {
      display: flex;

      .swiper-button-next {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23777777'%2F%3E%3C%2Fsvg%3E");
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
        outline: none;
        position: initial;
        margin-top: 0;
      }

      .swiper-button-prev {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23777777'%2F%3E%3C%2Fsvg%3E");
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
        outline: none;
        transition: opacity 0.4s ease-in-out;
        position: initial;
        margin-top: 0;
      }
    }

    span {
      font-size: 24px;
      color: #000;
      font-weight: 300;
    }

    .part_3 {
      background-color: #fff;
      border-radius: 20px;
      box-shadow: 0 4px 26px 1px #0000001f;
      margin: 15px;
      margin-top: 25px;
      overflow: hidden;
      .back_right_3 {
        background-color: #f6f6f6;
        border-radius: 0 0 20px 0;
        height: 100%;

        @media (max-width: 991px) {
          border-radius: 20px 20px 0 0;
        }

        img{width: 100%}
        .slide_text {
          border-radius: 0 0 20px 0;
          padding: 15px 0;
          height: 50%;
          display: flex;
          flex-direction: column;
          justify-content: center;

          span {
            color: #454545;
            font-size: 18px;
            display: block;
            text-align: center;
            margin-bottom: 10px;
            font-weight: 400;
          }

          .icons {
            margin-top: 20px;
            display: flex;
            justify-content: center;

            span {
              margin-left: 20px;
              display: flex;
              font-size: 18px;

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

              i {
                font-size: 20px;
                font-weight: bold;
                color: #f2c200;
                vertical-align: middle;
                margin-right: 10px;
              }
            }
          }
        }
      }

      .back_left {
        padding: 35px 0;
        padding-left: 30px;

        @media (max-width: 991px) {
          padding: 35px 15px;
        }

        .text {
          display: flex;
          flex-direction: column;

          span {
            font-size: 22px;
            font-weight: 500;
            margin-bottom: 5px;
          }

          strong {
            font-size: 16px;
            color: #6a6969;
            font-weight: 300;
            margin-bottom: 5px;

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

        .border_shadow {
          width: 1px;
          background-color: #ebebeb;
          box-shadow: 0 0 16px 1px #0000001a;
        }

        .info_related {
          flex: 1;
          padding: 5px 0;

          &:first-child {
            padding-left: 15px;

            @media (max-width: 575px) {
              padding-left: 0;
            }
          }

          &:last-child {
            padding-right: 15px;

            @media (max-width: 575px) {
              padding-right: 0;
            }
          }

          & > div {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;

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

            span {
              color: #454545;

              &:first-child {
                font-size: 18px;
                font-weight: 400;
              }

              &:last-child {
                font-size: 16px;
                font-weight: 300;
              }
            }
          }
        }
      }
    }
  }
}

.shop_list {
  width: 100%;
  height: 297px;
  display: flex;
  align-items: flex-end;
  padding-bottom: 40px;
  background-position: center;
  background-size: cover;
  img{border-radius: 50%}
  @media (max-width: 575px) {
    height: auto;
    padding: 40px 0;

    .info {
      margin: 0 auto;

      h3 {
        text-align: center;
        margin-top: 10px;
      }

      span {
        text-align: center;
      }
    }

    .rate {
      text-align: center;
    }

    button {
      margin-top: 10px;
    }
  }

  .info {
    h3 {
      color: #fff;
      font-size: 24px;
      font-weight: 300;
    }

    span {
      color: #fff;
      font-size: 18px;
      font-weight: 200;

      &:last-child {
        margin-top: 10px;
      }
    }
  }

  .rate {
    span {
      color: #fff;
      font-size: 18px;
      font-weight: 300;
    }

    i {
      color: #f2c200;
      font-weight: bold;
      font-size: 20px;
    }
  }

  button {
    padding: 10px 0;
    border-radius: 5px;
    color: #000;
    font-size: 18px;
    width: 100%;
    font-weight: 300;
    background-color: #f2c200;
  }
}

.single_style {
  padding: 50px 0;

  .order {
    background-color: #11427a;
    width: 100%;
    padding: 15px 0;
    display: flex;
    border-radius: 15px;
    justify-content: center;
    align-items: center;
    margin-top: 25px;

    @media (max-width: 1199px) {
      flex-direction: column;

      i {
        margin-left: 0 !important;
        margin-bottom: 10px;
      }
    }

    span {
      font-size: 22px;
    }

    strong {
      font-size: 16px;
      font-weight: 200;
    }

    i {
      font-size: 45px;
      color: #fff;
      margin-left: 15px;
    }
  }

  .back_right {
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 26px 1px #0000001f;
    padding: 25px 20px;

    .name_ad {
      display: flex;
      align-items: center;
      flex-direction: column;

      img {
        margin-bottom: 20px;
      }

      span {
        color: #454545;
        font-size: 18px;
        display: flex;
        align-items: center;

        i {
          font-size: 22px;
          color: #454545;
          font-weight: bold;
          vertical-align: middle;
          margin-right: 7px;
        }
      }
    }

    .dashes {
      margin: 20px 0;
      img {
        width: 100%;
        height: 1px;
      }
    }

    .table_2 {
      width: 100%;

      & > div {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;

        span {
          font-size: 16px;
          color: #454545;

          &.check {
            background-color: #de7426;
            padding: 2px 10px;
            color: #fff;
          }

          &:last-child {
            font-weight: 300;
          }
        }
      }
    }

    .buttons {
      display: flex;
      flex-direction: column;
      width: 100%;

      button {
        padding: 5px 0;
        border-radius: 10px;
        color: #fff;
        font-size: 18px;
        width: 100%;
        font-weight: 300;
        background-color: #acacac;
        margin: 10px 0;
        &.yellow {
          background-color: #f2c200;
        }
      }
    }
  }

  .back_left {

    .part_1 {
      background-color: #fff;
      border-radius: 20px;
      box-shadow: 0 4px 26px 1px #0000001f;
      padding: 25px 0;
      padding-right: 30px;
      margin: 15px;
      margin-top: 0;

      @media (max-width: 991px) {
        padding: 25px 15px;
      }

      .text {
        display: flex;
        flex-direction: column;

        span {
          font-size: 22px;
          font-weight: 500;
          margin-bottom: 5px;
        }

        strong {
          font-size: 16px;
          color: #6a6969;
          font-weight: 300;
          margin-bottom: 5px;

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

      .icon {
        display: flex;
        justify-content: flex-end;
        padding-left: 30px;

        @media (max-width: 991px) {
          padding-left: 0;
          justify-content: center;
          margin-top: 15px;
        }

        i {
          font-size: 28px;
          color: #a3a3a3;
          font-weight: bold;
          margin-left: 18px;
          vertical-align: middle;

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

      .dashes {
        margin-top: 20px;
        display: flex;

        img {
          width: 100%;
          height: 1px;
        }
      }

      .details {
        .details_text {
          padding: 0 30px;
          padding-top: 40px;

          @media (max-width: 991px) {
            margin-bottom: 35px;
          }

          & > div {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #e2e2e2;
            margin-bottom: 15px;
            padding-bottom: 3px;

            span {
              color: #454545;
              font-size: 18px;

              &:last-child {
                font-weight: 300;
              }
            }
          }

          & > span {
            font-size: 22px;
            margin-bottom: 15px;
            display: block;
            font-weight: 500;
          }
        }

        .gallery-thumbs .swiper-slide {
          width: 25%;
          height: 100%;
          opacity: 0.4;
        }

        .gallery-thumbs .swiper-slide-active {
          opacity: 1;
        }

        .gallery_slide {
          height: 500px;
          display: flex;
          flex-direction: column;
          background-color: #f6f6f6;
          margin-top: -1px;

          .gallery-top {
            height: 80%;
            width: 100%;

            .swiper-slide {
              background-size: cover;
              background-position: center;
            }
          }

          .icons {
            margin-top: 20px;
            display: flex;
            justify-content: center;

            span {
              margin-left: 30px;
              display: flex;
              font-size: 18px;

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

              i {
                font-size: 24px;
                font-weight: bold;
                color: #f2c200;
                vertical-align: middle;
                margin-right: 10px;
              }
            }
          }

          span {
            color: #454545;
            font-size: 24px;
            display: block;
            text-align: center;
            margin: 10px 0;
          }

          .back_thumbs {
            position: relative;
            height: 20%;

            .gallery-thumbs {
              width: 80%;
              height: 100%;
              padding: 10px 0;

              .swiper-slide {
                background-size: cover;
                background-position: center;
                cursor: pointer;
              }
            }

            .swiper-button-next {
              background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23454545'%2F%3E%3C%2Fsvg%3E");
              left: 10px;
              right: auto;
              background-size: 20px 20px;
              width: 20px;
              height: 20px;
              margin-top: 0 !important;
              transform: translateY(-50%);
              outline: none;
            }

            .swiper-button-prev {
              background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23454545'%2F%3E%3C%2Fsvg%3E");
              right: 10px;
              background-size: 20px 20px;
              width: 20px;
              height: 20px;
              margin-top: 0 !important;
              transform: translateY(-50%);
              outline: none;
            }
          }
        }

        .share {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;

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

          span {
            font-size: 18px;
            color: #454545;
          }

          & > div {
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;

            i {
              font-size: 22px;
              color: #989898;
              vertical-align: middle;
            }
          }
        }
      }
    }

    .part_2 {
      background-color: #fff;
      border-radius: 20px;
      box-shadow: 0 4px 26px 1px #0000001f;
      padding: 25px 45px;
      margin: 15px;
      margin-top: 25px;

      @media (max-width: 575px) {
        padding: 25px 15px;
      }

      h3 {
        font-size: 24px;
        color: #000;
        font-weight: 300;
      }

      p {
        font-size: 16px;
        color: #454545;
        font-weight: 300;
        margin-bottom: 0;
        line-height: 1.7;
      }
    }

    .part_3_back {
      margin-top: 35px;

      .paginations {
        display: flex;

        .swiper-button-next {
          background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23777777'%2F%3E%3C%2Fsvg%3E");
          background-size: 30px 30px;
          width: 30px;
          height: 30px;
          outline: none;
          position: initial;
          margin-top: 0;
        }

        .swiper-button-prev {
          background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23777777'%2F%3E%3C%2Fsvg%3E");
          background-size: 30px 30px;
          width: 30px;
          height: 30px;
          outline: none;
          transition: opacity 0.4s ease-in-out;
          position: initial;
          margin-top: 0;
        }
      }

      span {
        font-size: 24px;
        color: #000;
        font-weight: 300;
      }

      #swiper_2 {

        .part_3 {
          background-color: #fff;
          border-radius: 20px;
          box-shadow: 0 4px 26px 1px #0000001f;
          margin: 15px;
          margin-top: 25px;

          .back_right_3 {
            background-color: #f6f6f6;
            border-radius: 0 0 20px 0;
            height: 100%;

            @media (max-width: 991px) {
              border-radius: 20px 20px 0 0;
            }

            #swiper_1 {
              border-radius: 0 20px 0 0;
              height: 50%;

              @media (max-width: 991px) {
                border-radius: 20px 20px 0 0;
              }

              .swiper-slide {
                img {
                  width: 100%;
                  border-radius: 0 20px 0 0;
                  object-fit: cover;
                  height: 100%;

                  @media (max-width: 991px) {
                    border-radius: 20px 20px 0 0;
                  }
                }
              }

              .swiper-button-next {
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ececec'%2F%3E%3C%2Fsvg%3E");
                background-size: 30px 30px;
                width: 30px;
                height: 30px;
                outline: none;
                margin-top: 0;
                transform: translateY(-50%);
                transition: opacity 0.4s ease-in-out;
              }

              .swiper-button-prev {
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ececec'%2F%3E%3C%2Fsvg%3E");
                background-size: 30px 30px;
                width: 30px;
                height: 30px;
                outline: none;
                margin-top: 0;
                transform: translateY(-50%);
                transition: opacity 0.4s ease-in-out;
              }
            }

            .slide_text {
              border-radius: 0 0 20px 0;
              padding: 15px 0;
              height: 50%;
              display: flex;
              flex-direction: column;
              justify-content: center;

              span {
                color: #454545;
                font-size: 18px;
                display: block;
                text-align: center;
                margin-bottom: 10px;
                font-weight: 400;
              }

              .icons {
                margin-top: 20px;
                display: flex;
                justify-content: center;

                span {
                  margin-left: 20px;
                  display: flex;
                  font-size: 18px;

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

                  i {
                    font-size: 20px;
                    font-weight: bold;
                    color: #f2c200;
                    vertical-align: middle;
                    margin-right: 10px;
                  }
                }
              }
            }
          }

          .back_left {
            padding: 35px 0;
            padding-left: 30px;

            @media (max-width: 991px) {
              padding: 35px 15px;
            }

            .text {
              display: flex;
              flex-direction: column;

              span {
                font-size: 22px;
                font-weight: 500;
                margin-bottom: 5px;
              }

              strong {
                font-size: 16px;
                color: #6a6969;
                font-weight: 300;
                margin-bottom: 5px;

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

            .border_shadow {
              width: 1px;
              background-color: #ebebeb;
              box-shadow: 0 0 16px 1px #0000001a;
            }

            .info_related {
              flex: 1;
              padding: 5px 0;

              &:first-child {
                padding-left: 15px;

                @media (max-width: 575px) {
                  padding-left: 0;
                }
              }

              &:last-child {
                padding-right: 15px;

                @media (max-width: 575px) {
                  padding-right: 0;
                }
              }

              & > div {
                display: flex;
                justify-content: space-between;
                margin-bottom: 5px;

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

                span {
                  color: #454545;

                  &:first-child {
                    font-size: 18px;
                    font-weight: 400;
                  }

                  &:last-child {
                    font-size: 16px;
                    font-weight: 300;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

}

.extra_page {
  padding: 50px 0;

  .back_right {
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 26px 1px #0000001f;
    padding: 25px 20px;

    .name_ad {
      display: flex;
      align-items: center;
      flex-direction: column;

      span {
        color: #454545;
        font-size: 18px;
        display: flex;
        align-items: center;

        i {
          font-size: 22px;
          color: #454545;
          font-weight: bold;
          vertical-align: middle;
          margin-right: 7px;
        }
      }
    }

    .dashes {
      margin-top: 10px;
      margin-bottom: 5px;
      img {
        width: 100%;
        height: 1px;
      }
    }

    .table_2 {
      width: 100%;

      & > div {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;

        span {
          font-size: 16px;
          color: #454545;

          &.check {
            background-color: #197b30;
            padding: 2px 5px;
            color: #fff;
          }

          &:last-child {
            font-weight: 300;
            direction: ltr;
          }
        }
      }
    }

    .buttons {
      display: flex;
      flex-direction: column;
      width: 100%;

      button {
        padding: 5px 0;
        border-radius: 10px;
        color: #fff;
        font-size: 18px;
        width: 100%;
        font-weight: 300;

        &:first-child {
          background-color: #f2c200;
          margin: 10px 0;
        }

        &:last-child {
          background-color: #acacac;
        }
      }
    }
  }

  .back_left {

    .part_1 {
      background-color: #fff;
      border-radius: 20px;
      box-shadow: 0 4px 26px 1px #0000001f;
      padding: 25px 0;
      padding-right: 30px;
      margin-top: 0;
      margin-bottom: 25px;

      @media (max-width: 991px) {
        padding: 25px 15px;
      }

      .text {
        display: flex;
        flex-direction: column;

        span {
          font-size: 22px;
          font-weight: 500;
          margin-bottom: 5px;
        }

        strong {
          font-size: 16px;
          color: #6a6969;
          font-weight: 300;
          margin-bottom: 5px;

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

      .buttons {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        padding-left: 30px;

        @media (max-width: 991px) {
          padding-left: 0;
          align-items: center;
          margin-top: 15px;
        }

        a {
          padding: 8px 15px;
          border-radius: 10px;
          color: #fff;
          font-size: 18px;
          text-align: center;
          width: 70%;
          font-weight: 300;

          &:first-child {
            background-color: #003471;
            margin-bottom: 7px;
          }

          &:last-child {
            background-color: #555555;
          }
        }
      }

      .dashes {
        margin-top: 20px;
        display: flex;

        img {
          width: 100%;
          height: 1px;
        }
      }

      .details {
        .details_text {
          padding: 0 15px;
          padding-top: 40px;

          span {
            font-size: 22px;
            font-weight: 300;
            color: #454545;
            display: block;
            margin-bottom: 10px;
          }

          p {
            font-size: 17px;
            font-weight: 200;
            color: #454545;
            line-height: 1.7;
            margin-bottom: 10px;

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

        .details_text_2 {
          padding: 0 15px;
          padding-top: 40px;

          & > span {
            font-size: 22px;
            font-weight: 300;
            color: #454545;
            display: block;
            margin-bottom: 10px;
          }

          p {
            font-size: 16px;
            font-weight: 200;
            color: #454545;
            line-height: 1.7;
            margin-bottom: 10px;

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

          & > div {
            display: flex;
            justify-content: space-between;

            @media (max-width: 991px) {
              margin-bottom: 15px;
            }

            span {
              font-size: 18px;
              color: #454545;
              font-weight: 200;
            }
          }
        }

        .rating {
          background-color: #f6f6f6;
          height: 100%;
          margin-top: -1px;
          padding: 50px 0;

          @media (max-width: 575px) {
            padding: 25px 0;
          }

          .flex-wrapper {
            display: flex;
            flex-flow: row nowrap;
            flex-direction: row-reverse;
            direction: ltr;

            span {
              text-align: center;
              font-size: 16px;
              color: #535353;
              display: block;
            }

            .single-chart {
              width: 100%;
              justify-content: space-around;
            }

            .circular-chart {
              display: block;
              margin: 0 auto;
              max-width: 70%;
              max-height: 250px;
            }

            .circle-bg {
              fill: none;
            }

            .circle {
              stroke-width: 2px;
              animation: progress 1s ease-out forwards;
              fill: #fff;
              stroke: #f2c200;
            }

            @keyframes progress {
              0% {
                stroke-dasharray: 0 100;
              }
            }

            .percentage {
              fill: #454545;
              font-size: 0.4em;
              text-anchor: middle;
              color: #000;
              user-select: none;
            }

            .text_style {
              font-size: 2.7px;
              color: #454545;
            }

            .bold {
              font-weight: bold;
              font-size: 1.3em;
            }
          }

          .votes {
            padding: 0 30px;
            margin-top: 25px;

            & > div {
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;

              @media (max-width: 575px) {
                flex-direction: column;
                align-items: center;
              }

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

              span {
                font-size: 16px;
                color: #454545;

                &:last-child {
                  font-weight: 300;
                  margin-bottom: 0;
                }
              }
            }
          }
        }

        .share {
          display: flex;
          justify-content: space-between;
          margin-top: 50px;

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

          span {
            font-size: 18px;
            color: #454545;
          }

          & > div {
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;

            i {
              font-size: 22px;
              color: #989898;
              vertical-align: middle;
            }
          }
        }
      }
    }

    .extra_commend {
      background-color: #fff;
      box-shadow: rgba(0, 0, 0, 0.12) 0 4px 26px 1px;
      border-radius: 20px;
      padding: 25px 30px;

      @media (max-width: 575px) {
        padding: 50px 15px;
      }

      & > span {
        font-size: 22px;
        color: #454545;
      }

      & > p {
        font-size: 18px;
        font-weight: 300;
        color: #454545;
        margin-top: 15px;
      }

      .back_rating {
        background-color: #f7f7f7;
        padding: 25px;
        border-radius: 10px;
        margin-top: 30px;

        .comment_text {
          display: flex;
          flex-direction: column;

          span {
            color: #454545;

            &:first-child {
              font-weight: 500;
              font-size: 18px;
            }

            &:last-child {
              font-weight: 300;
              font-size: 16px;

              i {
                font-size: 20px;
                font-weight: bold;
                color: #454545;
                vertical-align: middle;
                margin-right: 5px;
              }
            }
          }
        }
      }

      .votes {
        display: flex;
        flex-direction: column;
        height: 100%;

        span {
          &:first-child {
            font-size: 18px;
            color: #3f3f3f;
          }

          &:last-child {
            font-size: 16px;
            color: #6b6b6b;
          }
        }
      }

      .score_bar {
        padding: 10px 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .progress {
          flex-direction: row-reverse;
          height: 8px;
          border-radius: 5px;
          box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2);

          .progress-bar {
            background: linear-gradient(to right, #a02b2d, #f0484e);
            border-radius: 0 5px 5px 0;
          }
        }
      }

      .score_details {
        display: flex;
        flex-direction: column;

        & > div {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;

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

          span {
            font-size: 15px;
            color: #535353;

            &:first-child {
              font-size: 18px;
            }

            strong {
              font-size: 18px;
              font-weight: 500;
            }
          }
        }
      }

      .back_average_u {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        background-color: #f7f7f7;
        padding: 25px 0;
        border-radius: 10px;

        span {
          font-size: 24px;
          color: #717171;
        }

        b {
          font-size: 48px;
          font-weight: bold;
          color: #454545;
        }
      }

      .people_rate {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        height: 100%;
      }

      .user_avatar {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        @media (max-width: 991px) {
          margin-bottom: 15px;
        }

        img {
          margin-bottom: 5px;
          border: 4px solid #f2c200;
          border-radius: 50%;
        }

        span {
          font-size: 20px;
          color: #3f3f3f;
          font-weight: 500;
        }
      }

      .text_area {
        text-align: left;

        button {
          padding: 5px 35px;
          background-color: #f2c200;
          color: #fff;
          border: none;
          border-radius: 5px;
          margin-top: 10px;
        }

        textarea {
          width: 100%;
          min-height: 150px;
          border: 1px solid #b7b7b7;
          border-radius: 5px;
          padding: 20px;
          resize: none;
          display: block;

          &::placeholder {
            color: #c4c4c4;
            font-size: 18px;
            font-weight: 200;
          }
        }
      }

      .comment_user {
        .count {
          position: relative;
          width: 100%;
          border-bottom: 1px solid #cccccc;
          padding-bottom: 10px;
          margin-bottom: 35px;

          span {
            font-size: 22px;
            color: #3a3a3a;
            z-index: 2;
            position: relative;
            background-color: #fff;
            padding-left: 15px;
            font-weight: 300;
          }
        }

        .user_avatar {
          display: flex;
          flex-direction: column;
          align-items: center;

          @media (max-width: 991px) {
            margin-bottom: 15px;
          }

          img {
            margin-bottom: 5px;
            border: 4px solid #f2c200;
            border-radius: 50%;
          }

          span {
            font-size: 20px;
            color: #3f3f3f;
            font-weight: 500;
          }
        }

        .comment_details {
          background-color: #f4f4f4;
          padding: 15px 25px;

          p {
            color: #3a3a3a;
            font-size: 18px;
            font-weight: 300;
            margin-bottom: 0;
            line-height: 1.7;
          }

          .comment_report {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;

            @media (max-width: 575px) {
              flex-direction: column;
              align-items: center;
            }

            strong {
              font-size: 18px;
              font-weight: normal;
              color: #454545;

              b {
                font-weight: 500;
                color: #454545;
              }
            }

            span {
              background-color: #b7b7b7;
              padding: 3px 10px;
              color: #fff;
              font-weight: 300;
              border-radius: 5px;
            }
          }
        }

        .row {
          position: relative;
          margin-bottom: 40px;
          padding-bottom: 40px;

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

            &:after {
              display: none;
            }
          }
        }
      }

      .paginat {
        ul {
          display: flex;
          justify-content: center;
          padding: 0;
          margin: 0;
          li {
            list-style: none;
            background-color: #d7d7d7;
            border-radius: 15px;
            width: 40px;
            margin-left: 5px;
            text-align: center;

            &.active {
              background-color: #f2c200;
            }

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

            a {
              color: #fff;
              font-size: 24px;
            }
          }
        }
      }
    }
  }
}
.v-select{
  .dropdown-toggle:after{display:none}
  .dropdown-toggle{
    .clear{margin-right: 0;margin-left: 5px}
  }
  .dropdown-menu{
    li{text-align: right}
  }
  input{direction:rtl}
}

#loadMore{padding: 10px;background-color: white;text-align:center}
.modals{
  .back_login_reg {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0;
    direction: rtl;
    p {
      font-size: 14px;
      font-weight: lighter;
      line-height: 1.2;
      margin-bottom: 30px;
      text-align: center;
      &> a {
        color: #6ba5ff !important;
        font-size: 14px;
      }
    }
    i {
      font-weight: bold;
      color: #e9eaed;
      font-size: 19px;
      vertical-align: middle;
      margin-right: 8px;
    }
    input {
      direction: ltr;
      border: none;
      border-bottom: 1px solid #e9eaed;
      padding-bottom: 5px;
      outline: none;
      padding-left: 5px;
      font-size: 18px;
    }
    button {
      border: none;
      outline: none;
      width: 100%;
      margin-top: 40px;
      padding: 5px 0;
      background-color: #f2c200;
      color: #fff;
      cursor: pointer;
    }
    &::placeholder {
      color: #ecedef;
      opacity: 1;
      font-size: 18px;
    }
    &:-ms-input-placeholder {
      color: #ecedef;
      font-size: 18px;
    }
    &::-ms-input-placeholder {
      color: #ecedef;
      font-size: 18px;
    }
    span {
      font-size: 18px;
      color: #000;
      padding-left: 0;
      margin: 5px 0;
    }
  }
  .image-register {
    width: 100%;
    height: 100%;
    background-size: cover;
  }
  .register_style {
    flex-direction: row;
    margin: 0;
    p {
      font-size: 14px;
      font-weight: lighter;
      color: #7b7b7b;
    }
    .text-input {
      background-color: #f6f6f8;
      border: 1px solid #e9eaed;
      height: 50px;
      padding: 0 10px;
      width: 100%;
      direction: rtl;
    }
    .v-select .dropdown-toggle{
      background-color: #f6f6f8;
      border: 1px solid #e9eaed;
      height: 50px;
      padding: 0 10px;
      width: 100%;
      direction: rtl;
    }
    div.position-relative {
      margin-bottom: 20px;
    }
  }
  .register_button {
    border: none;
    outline: none;
    width: 100%;
    padding: 5px 0;
    background-color: #f2c200;
    color: #fff;
    cursor: pointer;
  }
}
.switch-button{
  .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }

  input:checked + .slider {
    background-color: #f2c200;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }

  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }

  .slider.round:before {
    border-radius: 50%;
  }
}
.mainCat{border-bottom: 1px solid #eee;margin-top:10px}
.subCatParent{display: flex;flex-wrap: nowrap;flex-direction: row}
.subCat{
  margin:5px 10px;
  input{vertical-align: middle}
  label{vertical-align: middle;margin-bottom: 0}
}
.photo-upload{
  label{
    &{cursor: pointer;position: relative}
    .pic-show{position: absolute;right:0;left: 0;top: 0;bottom: 0;background-size: cover;background-position: center}
  }
  i.remove{position: absolute;right: 20px;top:5px;cursor: pointer;z-index: 3;color: red}
}
.expert-modal{
  .expertParent{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 5px 0;
    img{width:64px;height:64px;border-radius:50%;object-fit: cover;}
    button{background-color: #f2c200;color:white}
    &:last-child{border-bottom: 0}
  }
}
.createAd{
  .v-select{
    .dropdown-toggle{
      background-color: white;
    }
  }
  .submit-form{
    background-color:#f2c200;color:white
  }
  .cat-select{
    .relative{position: relative}
    .cat-dropdown{position: absolute;right:0;left: 0;background-color: white;top:0;height:200px;z-index: 2;border-radius: 0 0 4px 4px;border:1px solid #ccc;overflow-y: scroll}
    .cats{padding: 10px 5px;cursor:pointer;display: flex;justify-content: space-between}
    i{vertical-align: middle}
    .cats:hover{background-color: #80bdff;color:white}
  }
}
.myFabrika{
  .back_right {
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 26px 1px #0000001f;
    padding: 25px 20px;

    .name_ad {
      display: flex;
      align-items: center;
      flex-direction: column;

      span {
        color: #454545;
        font-size: 18px;
        display: flex;
        align-items: center;

        i {
          font-size: 22px;
          color: #454545;
          font-weight: bold;
          vertical-align: middle;
          margin-right: 7px;
        }
      }
    }

    .dashes {
      margin-top: 10px;
      margin-bottom: 5px;
      img {
        width: 100%;
        height: 1px;
      }
    }
    ul{
      padding: 0;
      margin: 0;
      text-align: right;
      li{
        list-style: none;
        border-bottom: 1px solid #eee;
        padding: 5px 0;
        a{
          color: #454545;
          &.active{color:#f2c200}
        }
        &:last-child{border-bottom: 0}
      }
    }
  }
  .tabs-parent{
    text-align: right;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 26px 1px #0000001f;
    padding: 25px 20px;
    .fabrikaBtn{background-color: #f2c200;color:white}
    .back_post {
      height: 310px;
      position: relative;
      transition: ease 0.4s;
      border-radius: 20px;
      margin-bottom: 25px;

      .instant {
        position: absolute;
        top: 0;
        left: 25px;
        background-color: #de7426;
        font-size: 14px;
        font-weight: 200;
        color: #fff;
        padding: 2px 6px;
        z-index: 2;
      }

      @media (max-width: 767px) {
        margin-bottom: 25px;
      }

      &:hover {
        box-shadow: 0 4px 26px 1px #0000001f;

        .details {
          height: 58%;
        }

        .slider_post {
          height: 42%;

          img {
            object-fit: cover;
          }

          .states_back {
            span {
              opacity: 0;
              user-select: none;
              cursor: initial;
            }

            .shadow {
              opacity: 0;
            }
          }

          .swiper-button-next {
            opacity: 1;

            &.swiper-button-disabled {
              opacity: 0.3;
            }
          }

          .swiper-button-prev {
            opacity: 1;

            &.swiper-button-disabled {
              opacity: 0.3;
            }
          }
        }
      }

      .details {
        background-color: #f4f4f4;
        padding: 20px;
        border-radius: 0 0 20px 20px;
        height: 70%;
        transition: height 1s;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        h3 {
          font-size: 16px;
          color: #333;
        }

        span {
          font-size: 12px;
          color: #717171;
          font-weight: 200;
        }

        .icons {
          margin-top: 20px;
          display: flex;
          justify-content: center;

          span {
            margin-left: 20px;
            display: flex;
            font-weight: bold;
            font-size: 12px;

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

            i {
              font-size: 20px;
              font-weight: bold;
              color: #f2c200;
              vertical-align: middle;
              margin-right: 10px;
            }
          }
        }
      }

      .slider_post {
        position: relative;
        height: 30%;
        transition: height 1s;

        .states_back {
          height: 100%;
          position: relative;

          .shadow {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 20px 20px 0 0;
            transition: opacity 0.4s ease-in-out;
          }

          span {
            font-size: 18px;
            position: absolute;
            left: 50%;
            bottom: 15px;
            transform: translateX(-50%);
            color: #fff;
            display: inline-table;
            transition: opacity 0.4s ease-in-out;
          }

          img {
            width: 100%;
            border-radius: 20px 20px 0 0;
            height: 100%;
            object-fit: cover;
            object-position: top;
          }
        }

        .swiper-button-next {
          background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ececec'%2F%3E%3C%2Fsvg%3E");
          background-size: 30px 30px;
          width: 30px;
          height: 30px;
          outline: none;
          margin-top: 0;
          transform: translateY(-50%);
          opacity: 0;
          transition: opacity 0.4s ease-in-out;
        }

        .swiper-button-prev {
          background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ececec'%2F%3E%3C%2Fsvg%3E");
          background-size: 30px 30px;
          width: 30px;
          height: 30px;
          outline: none;
          margin-top: 0;
          transform: translateY(-50%);
          opacity: 0;
          transition: opacity 0.4s ease-in-out;
        }
      }
    }
    .chatUserParent{
      align-items: center;
      justify-content: flex-start;
      cursor: pointer;
      border-bottom: 1px solid #eee;
      &:last-child{border-bottom:0}
      img{width: 64px;height: 64px;border-radius: 50%}
      .details{
        margin-right: 10px;
        p{margin: 0}
      }
    }
    .chat-header{
      align-items: center;
      justify-content: flex-start;
      cursor: pointer;
      img{width: 64px;height: 64px;border-radius: 50%}
      h5{margin-right: 10px}
    }
    .chatMain{
      height: 500px;
      overflow-y: auto;
      transform: scaleY(-1);
      .myChat{
        background-color: #f2c200;border-radius: 10px;display: inline-block;padding: 5px;
      transform: scaleY(-1);
        p{margin: 0}
      }
      .otherChat{
        background-color: #eee;border-radius: 10px;display: inline-block;padding: 5px;
      transform: scaleY(-1);
        p{margin: 0}
      }
    }
    .message-footer{
      display: flex;
      margin-top: 20px;
      input{border-radius: 0;border-left:0}
      button{background-color: #f2c200;color:white}
    }
    .expertList{
      .card-header{
        button{
          display: flex;
          align-items: center;
          text-decoration: none;
          h5{color:#454545;margin-right: 10px}
        }
      }
      .card-body{
        button{background-color: #f2c200;color:white}
      }
    }
  }
}
.main-loader{display: flex;flex-direction: column;flex:1;align-items: center;justify-content: center;padding: 50px}