.wrap {
  //background: #6F3F37;
  color: #fff;
  height: 100vh;

  .container {
    display: flex;
    gap: 135px;
    justify-content: left;
    padding-top: 54px;
    max-width: 95%;
    margin: 0 auto;
    .content {
      z-index: 3;

      &-info {
        height: 100%;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        &-title {
          font-size: 175px;
          padding-bottom: 21px;
        }

        &-subtitle {
          padding-bottom: 32px;
          font-size: 40px;
          color: #FFE600;
        }

        button {
          display: flex;
          align-items: center;
          background: #161616;
          border: 0;
          color: #fff;
          padding: 0 23px;
          border-radius: 5px;
          cursor: pointer;
          font-size: 20px;
          box-shadow: 0px 10px 10px rgba(0,0,0, 0.25);
        }
      }
    }




    .bg-image {
      position: absolute;
      top: 0;
      right: 0;
      width: 60%;
      height: 100vh;
      background: #000;
      overflow: hidden;


      .bathroom-list {
        .bathroom {
          position: absolute;
          height: 100%;
          width: 0;

        }


        .active {
          width: 100%;
        }

      }

      .right-content {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 3;
        display: flex;
        justify-content: right;
        .slider-slides {
          position: absolute;
          overflow: hidden;
          bottom: 0;
          left: 30px;
          img {
            cursor: pointer;
          }
        }
        .right-content-menu {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 54px 65px 51px 0;
          text-align: right;

          .burger {
            cursor: pointer;
          }
          .right-content-list {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            li {
              padding: 10px 0;
              cursor: pointer;
              font-size: 20px;
              list-style: none;
              display: flex;
              align-items: center;
              justify-content: right;
              &:hover {
                .circle {
                  opacity: 1;
                }
              }
              .circle {
                transition: all 0.8s linear;

                opacity: 0;
                margin-left: 10px;
                display: block;
                content: '';
                width: 15px;
                height: 15px;
                background: #fff;
                border-radius: 100%;
              }
            }
          }
          .arrows {
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 30px;
            .arrow {
              border-radius: 2px;
              padding: 13px 19px;
              cursor: pointer;

            }
            .disable {
              background: #161616;
              svg {
                fill: #fff;
              }
            }
            .able {
              background: #FFE600;
              svg {
                fill: #000;
              }
            }
          }

        }
      }
    }




    .bg-color {
      z-index: -1;
      background: #6F3F37;
      position: absolute;
      width: 40%;
      top: 0;
      left: 0;
      height: 100vh;
      .line-main:first-child {
        background: rgba(255,255,255, .60);
        width: 1px;
        height: 222px;
        position: absolute;
        right: 84px;
      }
      .line-main:nth-child(2) {
        background: rgba(255,255,255, .60);
        width: 1px;
        height: 222px;
        position: absolute;
        left: 40%;
        bottom: 0;
      }
    }
  }
}