/* 
-- mobile view 
*/
@media (max-width: 770px) {
  .hero-container {
    min-height: 60vh;

    & .hero {
      & nav {
        & ul {
          position: fixed;
          top: 0;
          right: -300px;
          width: 300px;
          min-height: 100vh;
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-start;
          gap: 2rem;
          padding: 5rem 0 1rem 3rem;
          background: var(--primary-color);
          border-top-left-radius: 2.5rem;
          border-bottom-left-radius: 2.5rem;
          border-top-right-radius: 0px;
          border-bottom-right-radius: 0px;
          overflow: hidden;
          z-index: 10000;
          transition: all 0.3s ease;

          & li {
            & a {
              color: #e0e0e0;

              &:hover {
                color: var(--text-color);
              }

              &.active-link,
              &.active-link:hover {
                color: var(--text-color);
                font-weight: 600;
              }
            }

            &.initial{
                display: initial;
              }

            & i.fa-xmark {
              display: initial;
              position: absolute;
              top: 2rem;
              right: 2rem;
              font-size: 1.5rem;
              color: var(--primary-color);
              width: 60px;
              height: 60px;
              border-radius: 50%;
              text-align: center;
              line-height: 60px;
              background: var(--text-color);
              transition: all 0.2s ease;
              cursor: pointer;

              &:active {
                background: #ddd;
              }
            }
          }

          &.opennav {
            right: 0px;
          }
        }
      }

      & .mobile {
        display: initial;
        position: absolute;
        top: 1rem;
        right: 1rem;
      }
    }

    & .hero_text {
      text-align: center;
      bottom: 0;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      & h1 {
        font-size: 2.5rem;
      }
    }
  }

  .book_room {
    border-radius: 0rem;

    .booking {
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      justify-content: center;
      text-align: center;

      & .booking_box {
        .gb_two {
          flex-wrap: wrap;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 2.5rem;
          margin-bottom: 1rem;
        }

        &:first-child {
          margin-bottom: 2rem;
        }

        & .get_booking {
          padding: 1rem 1.5rem;
        }
      }
    }
  }

  .offer {
    width: 100%;
    margin: 4rem auto;

    & .offer_head {
      text-align: center;

      & .flex {
        margin: 1rem 0;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;

        & h3 {
          font-size: 2rem;
        }

        & a {
          font-size: 1rem;
        }
      }

      & span {
        font-size: 1.5rem;
      }

      & p {
        max-width: 100%;
        font-size: 1rem;
      }
    }

    & .offer_grid {
      margin-top: 2rem;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      grid-gap: 2rem;
      justify-content: center;
    }
  }

  /* 
-- facilities start
*/
  .facilities {
    & .f_img_grids {
      display: flex;
      flex-direction: column;
    }

    & .f_img_grids {
      & .img_rel {
        & span {
          font-size: 1.5rem;
        }
      }
    }
  }
  /* 
-- facilities end
*/

  /* footer */
  footer {
    & .footer_content {
      & .foot_flex {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 5rem;

        & .newsletter {
          display: flex;
          flex-direction: column;
          gap: 1rem;

          & h5 {
            font-size: 2rem;
            text-align: center;
          }

          & .subscribe {
            margin-top: 2rem;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1rem;

            & input {
              padding: 1rem 1.5rem;
              border-radius: 8px;
              font-size: 1rem;
            }

            & button {
              padding: 1rem 1.5rem;
              border-radius: 8px;
              font-size: 1rem;
            }
          }
        }

        & .footer_links {
          & .links_flex {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: space-between;
            gap: 2rem;
          }
        }
      }

      .copywrite {
        margin-top: 4rem;
      }
    }
  }
}