.view-hotel-detail {
  margin-top: 460px;
  @media (max-width: 575.98px) {
    margin-top: 400px;
  }
  @media (min-width: 576px) and (max-width: 767.98px) {
    margin-top: 500px;
  }
  @media (min-width: 992px) and (max-width: 1199.98px) {
    margin-top: 440px;
  }
  .block-alert {
    .jc-bs3-container {
      width: 100%;
      .jc-bs3-row {
        margin: auto;
        width: 100%;
        .jconfirm-box-container {
          width: 22%;
          transform: translateX(-25%)!important;
          .jconfirm-box {
            height: 150px;
            padding: 20px;
            position: relative;
            overflow: unset;
            .jconfirm-content-pane {
              height: 100% !important;
              margin-bottom: 0;
              .jconfirm-content {
                height: 100%;
                position: relative;
                & > div {
                  position: absolute;
                  width: 100%;
                  top: 50%;
                  left: 0;
                  transform: translateY(-50%);
                  .wrapper-alert {
                    width: 100%;
                    display: flex;
                    flex-flow: column wrap;
                    align-items: flex-start;
                    padding-left: 80px;
                    span.title-box {
                      color: #FB646F;
                      font-size: 20px;
                      font-weight: 600;
                      display: inline-block;
                      margin-bottom: 10px;
                    }
                    span.content-box {
                      color: #666666;
                      font-size: 16px;
                    }
                  }
                  i.icon-nb-hand {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%) rotate(45deg);
                    color: #FB646F;
                    font-size: 56px;
                  }
                }
              }
            }
            .jconfirm-buttons {
              position: absolute;
              top: 50%;
              right: -21px;
              transform: translateY(-50%);
              width: 45px;
              height: 45px;
              button {
                border-radius: 50%;
                width: 45px;
                height: 45px;
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                i {
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
    }
  }
  .block-slide {
    position: absolute;
    width: 100%;
    top: 370px;
    left: 0;
    @media (max-width: 575.98px) {
      top: 250px;
    }
    @media (min-width: 576px) and (max-width: 767.98px) {
      top: 500px;
    }
    @media (min-width: 767.98px) and (max-width: 1920px) {
    }
      .gallery-slide {
        .slick-list{
          @media (max-width: 575.98px) {
            height: 100%;
          }
          .slick-track{
            .slick-slide{
              .img-block {
                width: 100%;
                height: 400px;
                @media (max-width: 575.98px) {
                  height: 60%;
                }
                @media (min-width: 576px) and (max-width: 767.98px) {
                  height: 70%;
                }
                div {
                  width: 100%;
                  height: 100%;
                  padding-bottom: calc(100% * 400/ 630);
                  position: relative;
                  @media (max-width: 575.98px) {
                    padding-bottom: calc(100% * 0.6/ 1);
                  }
                  @media (min-width: 576px) and (max-width: 767.98px) {
                    padding-bottom: calc(100% * 0.7/ 1);
                  }
                  img {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    object-fit: cover;
                    object-position: center;
                    &.lazy {
                      background-image: url("../images/giphy.gif");
                      background-repeat: no-repeat;
                      background-position: 50% 50%;
                    }
                  }
                }
              }
            }
          }
        }

    }
    .arrow-next, .arrow-prev {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 99;
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;
      transition: 250ms all ease-in-out;
      @media (max-width: 575.98px) {
        display: none;
      }
        &:hover, &:active {
        background-color: #F02737;
        i {
          color: #ffffff;

        }
      }
      i {
        font-size: 20px;
        color: #666666;
        transition: 250ms all ease-in-out;
      }

    }
    .arrow-prev {
      left: 70px;
    }
    .arrow-next {
      right: 70px;
    }
  }
  .content-left {
    .info-hotel {
      .name-hotel {
        margin-bottom: 3%;
        h4 {
          font-weight: bold;
          font-size: 25px;
          color: #141514;;
        }
      }
      .block-group-address-rating {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        @media (max-width: 575.98px) {
          flex-flow: column;
        }
        .address-hotel {
          font-size: 19px;
          margin-right: 30px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          span {
            color: #347EEC;
          }
          i {
            margin-right: 10px;
            color: #347EEC;
          }
          @media (max-width: 575.98px) {
            width: 100%;
            margin-right: 0;
          }
          @media (min-width: 576px) and (max-width: 767.98px) {
            width: 52%;
          }
          @media (min-width: 768px) and (max-width: 991.98px) {
            width: 40%;
          }
          @media (min-width: 992px) and (max-width: 1199.98px) {
            width: 41%
          }
        }
        .ratting-hotel {
          @media (max-width: 575.98px) {
            width: 100%;
            margin: 20px 0;
          }
          .block-rating {
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-start;
            align-items: center;
            ul.list-rating-star {
              list-style: none;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin: 0;
              &::after {
                content:'|';
                display: inline-block;
                margin: 0 10px;
              }
              .item-star {
                margin: 0;
                &+.item-star {
                  margin-left: 5px;
                }
                i {
                  font-size: 14px;
                  &.fas {
                    color: #FFDC00;;
                  }
                  &.far {
                    color: #D7DBE3;
                  }
                }
              }
            }
            & > .rating-review {
              margin: 0;
              span {
                font-size: 16px;
                color: #768092;
              }
            }
          }
        }
      }
      .price-hotel {
        margin-bottom: 2%;
        span.title {
          font-weight: bold;
          font-size: 19px;
          color: #444647;
        }
        span.price {
          color: #f13b49;
          font-weight: bold;
          font-size: 30px;
          &::after {
            content:'/';
            display: inline-block;
            margin: 0 5px;
          }
        }
        span.suffixes {
          color: #f13b49;
          font-weight: bold;
          font-size: 20px;
        }
      }
      .description-1 {
        color: #8d8e90;
        font-size: 19px;
        margin-bottom: 3%;
      }
      .description-2 {
        color: #5f6062;
        font-weight: bold;
        font-size: 19px;
        margin-bottom: 2%;
        .des {
          margin-bottom: 2%;
        }
      }
      .description-3 {
        color: #8d8e90;
        font-size: 19px;
        margin-bottom: 3%;
      }
      .note {
        border-top: 1px solid #eaf0fa;
        border-bottom: 1px solid #eaf0fa;
        padding: 20px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        @media (max-width: 575.98px) {
          flex-flow: column;
          align-items: flex-start;
        }
        @media (min-width: 576px) and (max-width: 767.98px) {
          flex-flow: column;
          align-items: flex-start;
        }

        .note-text {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 50%;
          @media (max-width: 575.98px) {
            width: 100%;
            margin: 0 0 15px 0;
          }
          @media (min-width: 576px) and (max-width: 767.98px) {
            width: 100%;
            margin: 0 0 15px 0;
          }
          i {
            color: #1c73e9;
            font-size: 15px;
            margin-right: 10px;
          }
          span {
            font-size: 18px;
            font-weight: 600;
            color: #414344;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

        }

        .btn-note {
          width: 50%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          @media (max-width: 575.98px) {
            width: 100%;
          }
          @media (min-width: 576px) and (max-width: 767.98px) {
            width: 100%;
          }
          .link-social {
            width: 40px;
            height: 40px;
            box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            border: none;
            background: #fff;
            color: #141414;
            transition: 250ms all ease-in-out;
            &+.link-social {
              margin-left: 15px;
            }
            &:hover {
              background: #1D73EA;
              i {
                color: #ffffff;
              }
            }
            i {
              font-size: 16px;
              color: #333333;
              transition: 250ms all ease-in-out;
            }
          }

        }

      }
      .best-services {
        margin-bottom: 4%;
        h4 {
          font-size: 25px;
          font-weight: bold;
          margin-bottom: 3%;
          color: #252626;
        }
        .content-service {
          box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
          border-radius: 4px;
          padding: 30px;
          .box-services {

            display: grid;
            grid-column-gap: 15px;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            @media (max-width: 575.98px) {
              grid-row-gap: 15px;
              grid-template-columns: 1fr;
            }
            @media (min-width: 576px) and (max-width: 767.98px) {
              grid-column-gap: 15px;
              grid-row-gap: 15px;
              grid-template-columns: 1fr 1fr;
            }
            @media (min-width: 768px) and (max-width: 991.98px) {
              grid-column-gap: 15px;
              grid-row-gap: 15px;
              grid-template-columns: 1fr 1fr 1fr;
            }
            @media (min-width: 992px) and (max-width: 1199.98px) {
              grid-column-gap: 15px;
              grid-row-gap: 15px;
              grid-template-columns: 1fr 1fr 1fr;
            }
            .block-item {
              display: flex;
              flex-flow: column;
              align-items: center;
              padding: 10px;
              text-align: center;
              span {
                font-size: 18px;
                font-weight: bold;
              }
              .img-service {
                width: 100%;
                height: 100px;
                @media (max-width: 575.98px) {
                  height: 60%;
                }
                @media (min-width: 576px) and (max-width: 767.98px) {
                  height: 70%;
                }
                @media (min-width: 768px) and (max-width: 991.98px) {
                  height: 70%;
                }
                @media (min-width: 992px) and (max-width: 1199.98px) {
                  height: 70%;
                }
                div {
                  width: 100%;
                  height: 100%;
                  padding-bottom: calc(100% * 100 / 150);
                  position: relative;
                  @media (max-width: 575.98px) {
                    padding-bottom: calc(100% * 0.6 / 1);
                  }
                  @media (min-width: 576px) and (max-width: 767.98px) {
                    padding-bottom: calc(100% * 0.7 / 1);
                  }
                  @media (min-width: 768px) and (max-width: 991.98px) {
                    padding-bottom: calc(100% * 0.7 / 1);
                  }
                  @media (min-width: 992px) and (max-width: 1199.98px) {
                    padding-bottom: calc(100% * 0.7 / 1);
                  }
                  img {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    object-position: center;
                    object-fit: cover;
                    &.lazy {
                      background-image: url("../images/giphy.gif");
                      background-repeat: no-repeat;
                      background-position: 50% 50%;
                    }
                  }
                }
              }
            }
          }
        }

      }
      .take-a-hotel {
        margin-bottom: 4%;
        h4 {
          font-size: 25px;
          font-weight: bold;
          margin-bottom: 3%;
          color: #252626;
        }
        .video-hotel {
          width: 100%;
          height: 360px;
          border-radius: 5px;
          overflow: hidden;
          div {
            width: 100%;
            height: 100%;
            padding-bottom: calc(100% * 360 / 892);
            position: relative;
            img {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              object-fit: cover;
              object-position: center;
              &.lazy {
                background-image: url("../images/giphy.gif");
                background-repeat: no-repeat;
                background-position: 50% 50%;
              }
            }
          }
        }
      }
      .pricing-plan {
        h4 {
          font-size: 25px;
          font-weight: bold;
          margin-bottom: 4%;
        }
        .box-room {
          margin-bottom: 10%;
          display: flex;
          -ms-flex-direction: column;
          flex-direction: column;
          min-width: 0;
          word-wrap: break-word;
          background-color: #fff;
          background-clip: border-box;
          border: 0 solid rgba(0, 0, 0, .125);
          border-radius: .25rem;
          box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
          overflow: hidden;
          position: relative;
          z-index: 1;
          .title-room {
            h4 {
              font-size: 25px;
              text-align: center;
              font-weight: bold;
              padding: 20px;
              text-transform: uppercase;
              margin: 0;
            }
          }
          .img-block {
            width: 100%;
            height: 200px;
            overflow: hidden;
            @media (max-width: 575.98px) {
              height: 50%;
            }
            @media (min-width: 576px) and (max-width: 767.98px) {
              height: 60%;
            }
            @media (min-width: 768px) and (max-width: 991.98px) {
              height: 60%;
            }
            div {
              width: 100%;
              height: 100%;
              padding-bottom: calc(100% * 200 / 278);
              position: relative;
              @media (max-width: 575.98px) {
                padding-bottom: calc(100% * 0.5 / 1);
              }
              @media (min-width: 576px) and (max-width: 767.98px) {
                padding-bottom: calc(100% * 0.6 / 1);
              }
              @media (min-width: 768px) and (max-width: 991.98px) {
                padding-bottom: calc(100% * 0.6 / 1);
              }
              img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                object-fit: cover;
                object-position: center;
                &.lazy {
                  background-image: url("../images/giphy.gif");
                  background-repeat: no-repeat;
                  background-position: 50% 50%;
                }
              }
            }
          }
          .detail-room {
            display: flex;
            flex-flow: column;
            align-items: center;
            text-align: center;
            margin-top: 20px;
            margin-bottom:20px;
            height: 200px;
            overflow: hidden;
            span {
              font-size: 16px;
              font-weight: bold;
              display: inline-block;
              &+span {
                margin-top: 10px;
              }
            }

          }
          .btn-book {
            text-align: center;
            margin-bottom: 10%;
            button {
              color: #ffff;
              font-weight: bold;
              background: #1d2124;
              text-transform: uppercase;
              transition: 250ms all ease-in-out;
              &:hover {
                background: #1D73EA;
              }
            }
          }
          .price::before {
            content: '';
            width: 0px;
            height: 0;
            border-top: 16px solid transparent;
            border-bottom: 16px solid transparent;
            border-right: 16px solid #f12838;
            display: block;
            position: absolute;
            top: 0;
            left: -16px;
            @media (max-width: 575.98px) {
              left: -16px;
            }
            @media (min-width: 576px) and (max-width: 767.98px) {
              left: -16px;
            }
            @media (min-width: 768px) and (max-width: 991.98px) {
              left: -16px;
            }
            @media (min-width: 992px) and (max-width: 1199.98px) {
              left: -16px;
            }
          }
          .price {
            z-index: 2;
            position: absolute;
            top: 35%;
            right: 0;
            background: #f12838;
            color: #fff;
            font-weight: bold;
            padding: 5px 18px;
            display: flex;
            align-items: center;
            justify-content: center;

            span {
              font-size: 15px;
              &:first-child {
                &::after {
                  content: '/';
                  display: inline-block;
                  margin: 0 5px;
                }
                &::before {
                  content: '';
                  display: inline-block;
                  width: 7px;
                  height: 7px;
                  background-color: #ffffff;
                  border-radius: 50%;
                  position: absolute;
                  top: 50%;
                  left: -4px;
                  transform: translateY(-50%);
                }
              }
            }
          }
        }
      }
      .hotel-location {
        margin-bottom: 3%;
        h4 {
          font-size: 25px;
          font-weight: bold;
          margin-bottom: 3%;
          color: #252626;
        }
        .hotel-map {
          width: 100%;
          height: 360px;
          border-radius: 5px;
          overflow: hidden;
          div {
            width: 100%;
            height: 100%;
            padding-bottom: calc(100% * 360 / 892);
            position: relative;
            img {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              object-fit: cover;
              object-position: center;
              &.lazy {
                background-image: url("../images/giphy.gif");
                background-repeat: no-repeat;
                background-position: 50% 50%;
              }
            }
          }
        }
      }
      .hotline {
        @media (max-width: 575.98px) {
          flex-flow: column;
        }
        @media (min-width: 576px) and (max-width: 767.98px) {
          flex-flow: column;
        }
        margin-bottom: 50px;
        color: #ffffff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background: #1d73ea;
        border-radius: 5px;
        .toll-free {
          @media (max-width: 575.98px) {
            width: 100%;
            border-bottom: 2px solid #3884ec;
            padding: 30px;
          }
          @media (min-width: 576px) and (max-width: 767.98px) {
            width: 100%;
            border-bottom: 2px solid #3884ec;
            padding: 30px;
          }
          @media (min-width: 768px) and (max-width: 991.98px) {
            padding: 30px;
          }
          @media (min-width: 992px) and (max-width: 1199.98px) {
            padding: 30px;
          }
          width: 50%;
          border-right: 2px solid #3884ec;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          padding: 60px 30px;
          .icon {
            padding-right: 20px;
            @media (min-width: 576px) and (max-width: 767.98px) {
              padding-right: 20px;
            }

          }
          .content-toll {
            .text {
              font-size: 18px;
            }
            .content {
              font-weight: bold;
            }
          }
        }
        .email-us {
          width: 50%;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          padding: 60px 30px;
          @media (max-width: 575.98px) {
            width: 100%;
            padding: 30px;
          }
          @media (min-width: 576px) and (max-width: 767.98px) {
            width: 100%;
            padding: 30px;
          }
          @media (min-width: 768px) and (max-width: 991.98px) {
            padding: 30px;
          }
          .icon {
            padding-right: 20px;

          }
          .content-email {
            .text {
              font-size: 18px;
            }
            .content {
              font-weight: bold;
            }
          }
        }
      }
      .rating-review {
        margin-bottom: 5%;
        .title-rating {
          margin-bottom: 7%;
          h4 {
            font-size: 25px;
            font-weight: bold;
          }
        }
        .quality-star {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 5%;
          @media (max-width: 575.98px) {
            flex-flow: column;
          }
          .number-star {
            width: 70px;
            height: 70px;
            background: #e0b318;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20px;
            @media (max-width: 575.98px) {
              margin: 0 0 10px 0;
            }
            span {
              color: #ffffff;
              font-weight: bold;
              font-size: 25px;
            }
          }
        }
        .overall-rating {
          display: flex;
          flex-flow: column;
          align-items: flex-start;
          margin-bottom: 30px;
          .block-item-rating {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            ul.list-rating-star {
              width: 30%;
              list-style: none;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin: 0 15px 0 0;
              @media (max-width: 575.98px) {
                width: 35%;
              }
              .item-star {
                margin: 0;
                &+.item-star {
                  margin-left: 5px;
                }
                i {
                  font-size: 14px;
                  &.fas {
                    color: #FFDC00;;
                  }
                  &.far {
                    color: #D7DBE3;
                  }
                }
              }
            }
            .progress {
              width: 50%;
              height: 10px;
              margin: 0 15px 0 0;
              @media (max-width: 575.98px) {
                width: 40%;
              }
              .progress-bar {
                width: 100%;
              }
            }
            .number-rating {
              font-size: 19px;
              font-weight: bold;
              @media (max-width: 575.98px) {
                width: 15%;
                text-align: right;
              }
            }
          }
        }
        .title-review {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 30px;
          @media (max-width: 575.98px) {
            flex-flow: column;
            align-items: flex-start;
          }
          h4 {
            font-size: 25px;
            font-weight: bold;
            margin-right: 30px;
            @media (max-width: 575.98px) {
              margin: 0 0 15px 0;
            }
          }
        }
        .input-review {
          .row-form-review {
            margin-bottom: 20px;
            .block-name,.block-email, .block-title {
              input[type="text"] {
                width: 100%;
                border-radius: 4px;
              }
            }
            .block-name{
              @media (max-width: 575.98px) {
                margin-bottom: 20px;
              }
              @media (min-width: 576px) and (max-width: 767.98px) {
                margin-bottom: 20px;
              }
              @media (min-width: 768px) and (max-width: 991.98px) {
                margin-bottom: 20px;
              }
              }
            .block-comment {
              textarea {
                &::placeholder {
                  font-size: 16px;
                }
              }
            }
          }
        }
        .btn-submit {
          button {
            padding: 10px 30px;
            text-transform: uppercase;
            background: #1d73ea;
            font-weight: bold;
            border: none;
            @media (max-width: 575.98px) {
              width: 100%;
            }
          }
          button:hover {
            background: #005cbf;
          }
        }
      }
      .comment {
        @media (min-width: 768px) and (max-width: 991.98px) {
          margin-bottom: 8%;
        }
        .comment-1 {
          padding: 30px 0;
          border-top: 1px solid #e8effa;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          .image-reviewer {
            width: 100px;
            height: 100px;
            div {
              width: 100%;
              height: 100%;
              position: relative;
              padding-bottom: calc(100% * 1 / 1);
              img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                object-fit: cover;
                object-position: center;
                border-radius: 75px;
                &.lazy {
                  background-image: url("../images/giphy.gif");
                  background-repeat: no-repeat;
                  background-position: 50% 50%;
                }
              }
            }
          }
          .info-review {
            margin-left: 30px;
            width: 90%;
            .info-top {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              @media (max-width: 575.98px) {
                flex-direction: column;
              }
              @media (min-width: 576px) and (max-width: 767.98px) {
                flex-direction: column;
              }
              .reviewer-name {
                width: 16%;
                font-weight: bold;
                @media (max-width: 575.98px) {
                  width: 100%;
                }
                @media (min-width: 576px) and (max-width: 767.98px) {
                  width: 100%;
                }
                @media (min-width: 768px) and (max-width: 991.98px) {
                  width: 20%;
                }
                @media (min-width: 992px) and (max-width: 1199.98px) {
                  width: 22%;
                }
                @media (min-width: 1200px) {
                  width: 18%;
                }
              }
              .datetime-review {
                width: 28%;
                margin-left: 2%;
                @media (max-width: 575.98px) {
                  width: 100%;
                  margin-left: 0;
                }
                @media (min-width: 576px) and (max-width: 767.98px) {
                  width: 100%;
                  margin-left: 0;
                }
                @media (min-width: 768px) and (max-width: 991.98px) {
                  width: 36%;
                }
                @media (min-width: 992px) and (max-width: 1199.98px) {
                  width: 38%;
                }
                span {
                  font-size: 16px;
                  font-style: italic;
                  color: #9e9fa0;
                  font-weight: bold;
                }
                .time-review {
                  margin-right: 5px;
                }
                .date-review {
                  margin-right: 10px;
                  margin-left: 5px;
                }
              }
              ul.list-rating-star {
                list-style: none;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin: 0;
                .item-star {
                  margin: 0;
                  &+.item-star {
                    margin-left: 5px;
                  }
                  i {
                    font-size: 14px;
                    &.fas {
                      color: #FFDC00;;
                    }
                    &.far {
                      color: #D7DBE3;
                    }
                  }
                }
              }
            }
            .content-review {
              width: 100%;
              @media (max-width: 575.98px) {
                width: 100%;
              }
              @media (min-width: 576px) and (max-width: 767.98px) {
                width: 100%;
              }
              @media (min-width: 768px) and (max-width: 991.98px) {
                width: 100%;
              }
              @media (min-width: 992px) and (max-width: 1199.98px) {
                width: 100%;
              }
              span {
                font-style: italic;
                color: #909295;
                font-size: 20px;
              }
            }
          }
        }
        ul.pagination-review {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          li {
            margin: 0 10px 0 10px;
            a {
              font-size: 16px;
              border-radius: 4px;
            }
          }
        }
      }

    }
  }
  .content-right {
    .title {
      margin-bottom: 30px;
      h4 {
        font-weight: bold;
        font-size: 25px;
        color: black;
      }
    }
    .input-right {
      margin-bottom: 10%;
      width: 100%!important;
      form[name="booking-form"] {
        .block-check-in, .block-check-out,.block-number-adult, .block-number-child, .block-select-roomtype {
          margin-bottom: 20px;
          input[type="text"] {
            box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
            border: none;
          }
        }

      }
    }
    .total-amount {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 5%;
      .amount {
        width: 80%;
        margin-bottom: 5px;
        @media (min-width: 992px) and (max-width: 1199.98px) {
          width: 70%;
        }
      }
      .price {
        width: 20%;
        margin-bottom: 5px;
        font-weight: bold;
        text-align: end;
        @media (min-width: 992px) and (max-width: 1199.98px) {
          width: 30%;
        }
      }
      .price-3 {
        border-bottom: 1px solid #ccc;
        margin-bottom: 10px;
      }
      .amount-3 {
        border-bottom: 1px solid #ccc;
        margin-bottom: 10px;
        padding-bottom: 15px;
      }
      .price-4 {
        color: #2478ea;
      }

    }


    .btn-book-now {
      margin-bottom: 30px;
      button {
        width: 100%;
        height: 41px;
        background: #1d73ea;
        font-weight: bold;
        border: none;
        text-transform: uppercase;
      }
      button:hover {
        background: #005cbf;
      }
    }
    .instagram {
      margin-bottom: 15%;
      .title-insta {
        margin-bottom: 10%;
        font-weight: bold;
        font-size: 18px;
        color: black;
      }
      .img-insta {
        width: 100%;
        height: 100%;
        margin-bottom: 15%;
        position: relative;
        div {
          width: 100%;
          height: 100%;
          position: relative;
          padding-bottom: calc(100% * 1 / 1);
          img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            object-fit: cover;
            object-position: center;
            border-radius: 5px;
            &.lazy {
              background-image: url("../images/giphy.gif");
              background-repeat: no-repeat;
              background-position: 50% 50%;
            }
          }
        }
        .icon-insta {

          transition: .5s ease;
          opacity: 0;
          position: absolute;
          left: 50%;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          text-align: center;
          top: 85%;
          @media (max-width: 575.98px) {
            i {
              font-size: 50px;
            }
          }
          @media (min-width: 576px) and (max-width: 767.98px) {
            i {
              font-size: 60px;
            }
          }
          @media (min-width: 768px) and (max-width: 991.98px) {
            i {
              font-size: 65px;
            }
          }
          @media (min-width: 992px) and (max-width: 1199.98px) {
            left: 51%;
            top: 66%;
            i {
              font-size: 15px;
            }
          }
          @media (min-width: 1200px) {
            top: 80%;
          }
        }
      }
      .insta-1 {
        position: relative;
        &:hover div {
          opacity: 0.3;
          cursor: pointer;
        }
        &:hover .icon-insta {
          opacity: 1;
          cursor: pointer;
        }
        div {
          opacity: 1;
          display: block;
          transition: .5s ease;
          backface-visibility: hidden;
        }

      }
      .insta-2 {
        position: relative;
        &:hover div {
          opacity: 0.3;
          cursor: pointer;
        }
        &:hover .icon-insta {
          opacity: 1;
          cursor: pointer;
        }
        div {
          opacity: 1;
          display: block;
          transition: .5s ease;
          backface-visibility: hidden;
        }
      }
      .insta-3 {
        position: relative;
        &:hover div {
          opacity: 0.3;
          cursor: pointer;
        }
        &:hover .icon-insta {
          opacity: 1;
          cursor: pointer;
        }
        div {
          opacity: 1;
          display: block;
          transition: .5s ease;
          backface-visibility: hidden;
        }

      }
      .insta-4 {
        position: relative;
        &:hover div {
          opacity: 0.3;
          cursor: pointer;
        }
        &:hover .icon-insta {
          opacity: 1;
          cursor: pointer;
        }
        div {
          opacity: 1;
          display: block;
          transition: .5s ease;
          backface-visibility: hidden;
        }
      }
      .insta-5 {
        position: relative;
        &:hover div {
          opacity: 0.3;
          cursor: pointer;
        }
        &:hover .icon-insta {
          opacity: 1;
          cursor: pointer;
        }
        div {
          opacity: 1;
          display: block;
          transition: .5s ease;
          backface-visibility: hidden;
        }
      }
      .insta-6 {
        position: relative;
        &:hover div {
          opacity: 0.3;
          cursor: pointer;
        }
        &:hover .icon-insta {
          opacity: 1;
          cursor: pointer;
        }
        div {
          opacity: 1;
          display: block;
          transition: .5s ease;
          backface-visibility: hidden;
        }
      }
    }
    .code-sale {
      width: 100%;
      height: 350px;
      position: relative;
      border-radius: 5px;
      overflow: hidden;
      background: #9e5406;
      @media (max-width: 575.98px) {
        height: 120%;
      }
      @media (min-width: 576px) and (max-width: 767.98px) {
        height: 400px;
      }
      @media (min-width: 768px) and (max-width: 991.98px) {
        width: 50%;
        height: 450px;
        margin: 0 auto;
      }
      &:hover{
        .image-code-sale {
          opacity: 0.4;
        }
        .content-code-sale {
          &::before, &::after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
          }
          .block-test {
            h2 {
              opacity: 1;
              -webkit-transform: translate3d(0,0,0);
              transform: translate3d(0,0,0);
            }
            a.btn-get-coupon {
              opacity: 1;
              -webkit-transform: translate3d(0,0,0);
              transform: translate3d(0,0,0);
            }
          }

        }

      }

      .image-code-sale{
        width: 100%;
        height: 100%;
        opacity: 0.7;
        -webkit-transition: opacity 0.35s;
        transition: opacity 0.35s;
        div{
          width: 100%;
          height: 100%;
          padding-bottom: calc(100% * 350 / 278);
          position: relative;
          @media (max-width: 575.98px) {
            padding-bottom: calc(100% * 1.2 / 1);
          }
          .image {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            object-fit: cover;
            object-position: center;
          }
        }
      }
      .content-code-sale {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #fff;
        text-transform: uppercase;
        font-size: 1.25em;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        &::before, &::after {
          position: absolute;
          top: 30px;
          right: 30px;
          bottom: 30px;
          left: 30px;
          content: '';
          opacity: 0;
          -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
          transition: opacity 0.35s, transform 0.35s;
        }
        &::before {
          border-top: 1px solid #fff;
          border-bottom: 1px solid #fff;
          -webkit-transform: scale(0,1);
          transform: scale(0,1);
        }
        &::after {
          border-right: 1px solid #fff;
          border-left: 1px solid #fff;
          -webkit-transform: scale(1,0);
          transform: scale(1,0);
        }
        .block-test {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 99;
          padding: 2em;
          h2 {
            font-size: 30px;
            padding-top: 30%;
            -webkit-transition: -webkit-transform 0.35s;
            transition: transform 0.35s;
            -webkit-transform: translate3d(0,-20px,0);
            transform: translate3d(0,-20px,0);
            margin: 0;
            word-spacing: -0.15em;
            font-weight: 300;
            text-align: center;
          }
          a.btn-get-coupon {
            width: 100%;
            background: #fff;
            margin: 20px 0 0 0;
            display: block;
            border-radius: 4px;
            font-size: 20px;
            text-align: center;
            padding: 8px 16px;
            opacity: 0;
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
            -webkit-transform: translate3d(0,20px,0);
            transform: translate3d(0,20px,0);
          }
        }
      }
    }
  }
}