.rewards-section {
  margin-top: 0 !important;
  /* margin-top: 30%; */
  /* margin-top: 140px;
  width: 100%; */

  .reward-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    height: 75vh;
    overflow-y: overlay;
    overflow-x: hidden;
    font-family: "CastleT", sans-serif;

    .reward {
      /* width: 22.5rem; */
      width: 90%;
      /* height: 20.625rem; */
      height: fit-content;

      border-radius: 0.875rem;
      border: 0.5px solid #ebe4e3;
      background: #ebe4e3;
      box-shadow: 0 5px 10px 0 rgba(229, 229, 229, 0.5);
      padding: 0.44rem;
      position: relative;

      .outline {
        width: 4.0625rem;
        height: 4.5rem;
        transform: rotate(90deg);
        position: absolute;
        background: 0px 0px / 100% 100% no-repeat;
        right: 2px;
        bottom: -4px;
        border-radius: 0.875rem;
      }

      .room-outline {
        width: 4.0625rem;
        height: 4.5rem;
        transform: rotate(90deg);
        position: absolute;
        background: 0px 0px / 100% 100% no-repeat;
        right: 2px;
        bottom: -4px;
        border-radius: 0.875rem;
      }

      .reward-content {
        /* position: absolute; */
        position: relative;
        /* top: 3%; */

        .reward-description {
          display: flex;
          margin-inline: 1rem;
          justify-content: space-between;

          .reward-info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            /* ensures left alignment */
            /* .logo {
              width: 5.4375rem;
              height: 1.8125rem;
              margin-block: 0.25rem;
              object-fit: contain;
            } */

            .logo {
              max-width: 100%;
              width: auto;
              height: 40px;
              /* lets height scale with width */
              display: block;
              margin: 0;
              object-fit: contain;
              /* ensures the image stays proportionate */
            }


            .title {
              color: #794d1f;
              width: 8.1875rem;
              font-size: 1.125rem;
              font-style: normal;
              font-weight: 600;
              line-height: normal;
            }

            .description {
              color: #492d10;
              /* width: 12rem; */
              font-size: 0.875rem;
              font-style: normal;
              font-weight: 300;
              /* line-height: 1rem; */
              letter-spacing: -0.02113rem;
            }

            .additional-description {
              color: #644527;

              font-size: 0.75rem;
              font-style: normal;
              font-weight: 700;
              line-height: 1rem;
              letter-spacing: -0.02113rem;
            }
          }

          .room-options {
            margin-block: 0.5rem;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: end;
            /* position: relative; */
            right: 1rem;
            max-width: 124px;

            >div {
              margin: 0.2rem;
            }

            .select-any {
              color: #000;
              font-family: "CastleT", sans-serif;
              font-size: 0.75rem;
              font-style: normal;
              font-weight: 300;
              line-height: normal;
              text-align: center;
              margin: 0 auto 6px;
            }

            button {
              width: 6.875rem;
              height: 2.3125rem;
              border-radius: 0.5625rem;
              border: 2px solid #e64f28;

              background: #e7e1e0;

              color: #500808;
              font-family: "CastleT", sans-serif;
              font-size: 0.75rem;
              font-style: normal;
              font-weight: 600;
              line-height: normal;
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 6px;

              .logo {
                width: 1.8125rem;
                height: 1.5rem;
              }
            }

            .or-divider {
              display: flex;
              align-items: center;
              /* width: 8rem; */
              width: 106px;
            }

            .or-divider::before,
            .or-divider::after {
              content: "";
              flex: 1;
              border-bottom: 2px solid #b87333;
              margin-inline: 4px;
            }

            .or-divider span {
              color: #794d1f;

              font-family: "CastleT", sans-serif;
              font-size: 0.875rem;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
            }
          }
        }
      }

      .reward-image {
        /* width: 21.57575rem; */
        width: 100%;
        height: 9.1875rem;

        border-radius: 0.75rem;
        /* background: linear-gradient(168deg, #f4f0ef 11.22%, #e5dcda 91.39%); */
      }
    }
  }
}

.search-input-container {
  display: flex;
  align-items: center;
  border: 1px solid #794d1f;
  border-radius: 8px;
  padding: 6px 14px;
  background: #fff;
  box-sizing: border-box;
  margin-top: 9.125rem;
  align-self: center;
  width: 90%;
  gap: 1rem;

  .search-logo {
    width: 1.5625rem;
    height: 1.5625rem;
  }

  .search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #794d1f;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
  }

  .search-input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 1.12em;
    color: #794d1f;
    background: transparent;
    padding: 4px 0;
    line-height: 1.5rem;
    letter-spacing: -0.03156rem;
  }

  .search-input::placeholder {
    color: #794d1f;
    opacity: 1;
    font-weight: 500;
  }
}