@import "components/fonts_and_colors";

/*------------------------------------ Site Wide Starts -----------------------------------*/

.kenburns-top {
  -webkit-animation: kenburns-top 12s ease-out both;
  animation: kenburns-top 12s ease-out both;
}

@keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
    transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
    transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}

@keyframes scroll {
  0% {
    opacity: 0;
  }
  10% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(1.5rem);
    opacity: 0;
  }
}

@keyframes ping {
  0% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity: 1;
  }
  80% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0;
  }
}

/*------------------------------------- Site Wide Ends ------------------------------------*/

/*--------------------------------- Header Wrapper Starts ---------------------------------*/

#header-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  transition: all 0.5s ease-in-out;
  width: 100%;
  .custom-container {
    padding: 0.5rem 6rem;
    &.no-top-bottom-padding {
      .navbar-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .logo-container {
          height: 12rem;
          width: 12rem;
          transition: 0.5s ease;
        }
        .nav-container {
          .nav-content {
            & > ul {
              margin-bottom: 0;
              display: flex;
              align-items: center;
              text-align: center;
              gap: 6rem;
              & > li {
                position: relative;
                text-transform: uppercase;
                font-size: 2.4rem;
                display: inline-block;
                & > a {
                  font-size: 1.4rem;
                  color: $white-color;
                  vertical-align: middle;
                  padding: 5rem 0 4.5rem;
                  &:hover {
                    text-decoration: none;
                  }
                }
                &.submenu-container {
                  position: relative;
                  &:hover {
                    ul.dropdown-menu-own {
                      opacity: 1;
                      transition: all 0.5 ease;
                      pointer-events: initial;
                      top: 120%;
                      &::after {
                        opacity: 1;
                        content: "";
                        z-index: 1100;
                        height: 2rem;
                        width: 1.9rem;
                        position: absolute;
                        background-color: #2e2e2e;
                        top: -2%;
                        right: 80%;
                        transform: rotate(-135deg);
                      }
                    }
                  }
                }
                ul.dropdown-menu-own {
                  position: absolute;
                  text-align: left;
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: center;
                  opacity: 0;
                  // top: -100%;
                  pointer-events: none;
                  transition: all 0.5s ease;
                  padding-left: 0;
                  min-width: 19rem;
                  // border-top-color: #1c1c1c;
                  background-color: #2e2e2e;
                  // border-color: #373737;
                  & > li {
                    padding: 1.4rem 1.2rem;
                    width: 100%;
                    border-bottom: 1px solid #e5e5e5;
                    & > a {
                      text-decoration: none;
                      color: #bebebe;
                      font-size: 1.4rem;
                      &:hover {
                        color: $white-color;
                      }
                    }
                  }
                }
              }
              .common-button-container {
                a {
                  button {
                    font-size: 1.6rem;
                    padding: 1rem 2rem;
                    border-radius: 5rem;
                    i {
                      font-size: 1.6rem;
                    }
                    &:hover {
                      cursor: pointer;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  &.nav-scroll {
    position: fixed;
    background-color: #2d2e3182;
    animation: slide-down 0.7s;
    transition: all 0.5s ease-in-out;
    .custom-container {
      &.no-top-bottom-padding {
        .navbar-container {
          .logo-container {
            height: 7rem;
            width: 7rem;
          }
        }
      }
    }
  }
}

.openbtn {
  display: none;
  font-size: 3rem;
  cursor: pointer;
  z-index: 999;
  color: white;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  background-color: #092648;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 6rem;
  .closebtn {
    position: absolute;
    top: 0;
    right: 2.5rem;
    font-size: 3.6rem;
    margin-left: 5rem;
    &:hover {
      text-decoration: none;
    }
  }
  .nav-section {
    .navigation {
      ul {
        & > li {
          a {
            text-align: left;
            padding: 1rem 3rem;
            text-decoration: none;
            font-size: 1.8rem;
            letter-spacing: 0.2px;
            color: white;
            display: block;
            transition: 0.3s;
            text-transform: uppercase;
            &::before {
              filter: brightness(1.3);
            }
          }
          .uk-accordion-content {
            margin-top: 0;
            .sub-menu {
              margin-left: 3rem;
              li {
                a {
                  font-size: 1.6rem;
                }
              }
            }
          }
        }
      }
    }
  }
}

/*--------------------------------- Header Wrapper Starts ---------------------------------*/
body {
  &.normal {
    #about-page {
      .about-section {
        .custom-container {
          .about-container {
            .section-content-container {
              .column-2 {
                display: none;
              }
              .column-3 {
                right: 1rem;
                transition: all 0.4s ease-in-out;
                display: unset;
              }
            }
          }
        }
      }
    }
  }
}
/*-------------------------------- Content Wrapper Starts ---------------------------------*/

#homepage {
  background-color: #f7f7f7;
  .display-room-section {
    transition: 0.3s;
    .custom-container {
      padding: 4rem 6rem;
      .display-room-container {
        .card-container {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .card-item {
            border-radius: 2rem;
            background-color: $white-color;
            width: 33.33%;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
            border-radius: 20px;
            &:not(:last-of-type) {
              margin-right: 5rem;
            }
            .row1-container {
              position: relative;
              .image-container {
                img {
                  border-radius: 2rem 2rem 0 0;
                }
              }
              .text-container {
                h3 {
                  position: absolute;
                  top: 5%;
                  left: 5%;
                  text-transform: capitalize;
                  color: $white-color;
                  font-size: 1.6rem;
                  font-weight: 600;
                }
              }
            }
            .row2-container {
              padding: 2rem;
              ul {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 0;
                padding: 0;
                li {
                  color: $red;
                  font-size: 1.6rem;
                  font-weight: 500;
                }
              }
            }
            .row3-container {
              display: flex;
              align-items: center;
              background-color: $white-color;
              padding: 0 2rem 2rem;
              ul {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 1.9rem;
                padding: 0;
                width: 100%;
                li {
                  display: flex;
                  align-items: center;
                  gap: 5px;
                  img {
                    width: 1.6rem !important;
                  }
                  p {
                    margin: 0;
                    font-size: 1.3rem;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .menu-section {
    overflow: hidden;
    .custom-container {
      .menu-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .column-1 {
          margin-right: 5.4rem;
          .section-subtitle {
            h2 {
              font-size: 1.6rem;
              color: $red;
              text-transform: uppercase;
              font-weight: 600;
              letter-spacing: 0.6px;
            }
          }
          .section-title {
            h1 {
              font-size: 2.6rem;
              line-height: 1.6;
              font-weight: 600;
              text-transform: uppercase;
              letter-spacing: 0.4px;
            }
          }
          .text-container {
            p {
              font-size: 1.6rem;
              letter-spacing: 0.2px;
            }
          }
          .menu-title {
            margin-top: 3rem;
            h2 {
              font-size: 1.6rem;
              font-weight: 600;
              text-transform: uppercase;
            }
          }
          .section-accordion {
            ul {
              li {
                background-color: $light-black;
                .uk-accordion-title {
                  text-transform: uppercase;
                  font-size: 2.4rem;
                  color: $white-color;
                  padding: 1.5rem;
                  &::before {
                    width: 3em;
                    height: 1.5;
                    color: white;
                  }
                }
                .uk-accordion-content {
                  background-color: #f2f2f2;
                  .section-menu-item {
                    ul {
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      margin: 0;
                      li {
                        .common-icon-button {
                          .serach-button {
                            background-color: $red;
                            border-radius: 50%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            color: $white-color;
                            height: 7rem;
                            width: 7rem;
                            margin-right: 3rem;
                            padding: 2rem;

                            span {
                              font-size: 1.4rem;
                              font-family: "Poppins";
                            }
                          }
                        }
                      }
                      li {
                        background-color: #f2f2f2;
                        margin-top: 2rem;
                        h5 {
                          text-transform: uppercase;
                          color: $green-color;
                          font-size: 1.8rem;
                          font-weight: 600;
                          margin-bottom: 0;
                        }
                        p {
                          font-size: 1.4rem;
                          margin-top: 5px;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          .section-accordion {
            .accordion {
              .accordion-item {
                margin: 2rem 0;
                .accordion-header {
                  text-transform: uppercase;
                  font-size: 2.4rem;
                  color: #fff;
                  padding: 0.5rem;
                  background: #333;
                  button {
                    background: #333;
                    color: white;
                    text-transform: uppercase;
                    border: none;
                    outline: none;
                    box-shadow: none;
                    font-size: 1.5rem;
                    letter-spacing: 0.4px;
                    i {
                      margin-left: auto;
                      font-size: 2rem;
                      margin-top: -5px;
                    }
                    &::after {
                      display: none;
                    }
                  }
                }
                .accordion-body {
                  background-color: #f2f2f2;
                  .section-menu-item {
                    ul {
                      display: flex;
                      align-items: center;
                      margin: 0;
                      padding-left: 2rem;
                      li {
                        .common-icon-button {
                          button {
                            background-color: $red;
                            border-radius: 50%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            color: $white-color;
                            height: 7rem;
                            width: 7rem;
                            margin-right: 3rem;
                            padding: 2rem;

                            span {
                              font-size: 1.4rem;
                              font-family: "Poppins";
                            }
                          }
                        }
                      }
                      li {
                        background-color: #f2f2f2;
                        margin-top: 2rem;
                        h5 {
                          text-transform: uppercase;
                          color: $green-color;
                          font-size: 1.8rem;
                          font-weight: 600;
                          margin-bottom: 0;
                        }
                        p {
                          font-size: 1.4rem;
                          margin-top: 5px;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .column-2 {
          margin-top: 10rem;
          .background-color {
            border-radius: 2rem;
            position: relative;
            background-color: $light-blue;
            width: 53rem;
            height: 34rem;
            .main-image-container {
              position: absolute;
              height: 28rem;
              width: 46rem;
              top: -24%;
              left: 6.5%;
              img {
                border-radius: 2rem;
              }
            }
            .images-container {
              display: flex;
              justify-content: space-between;
              align-items: center;
              position: absolute;
              margin-bottom: 1rem;
              bottom: 12%;
              right: 14%;
              .image-container {
                height: 7rem;
                width: 7rem;
                &:not(:last-of-type) {
                  margin-right: 0.5rem;
                }
              }
            }
            .gallery-link {
              position: absolute;
              bottom: 1.3rem;
              left: 50%;
              transform: translate(-50%);
              color: $green-color;
              font-size: 1.4rem;
              font-weight: 500;
              text-transform: uppercase;
            }
          }
        }
      }
    }
  }

  .feature-section {
    overflow: hidden;
    .custom-container {
      .feature-container {
        display: flex;
        gap: 6rem;
        .column-1 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;
          .image-container {
            height: 36rem;
            width: 18rem;
            margin-right: 1.5rem;
            &.upper {
              margin-bottom: 18%;
              img {
                border-radius: 2rem 2rem 0 0 !important;
              }
            }
          }
          .like-container {
            background-color: $white-color;
            border-radius: 0 2rem 2rem 2rem;
            position: absolute;
            left: 33%;
            bottom: 20%;
            padding: 0 1rem;
            ul {
              display: flex;
              justify-content: space-between;
              align-items: center;
              border-bottom: 2px solid $dark-blue;
              padding-left: 0;
              padding-bottom: 1rem;
              gap: 1rem;
              margin: 1.5rem 0;
              li:nth-of-type(1) {
                color: $red;
                font-size: 1.4rem;
                font-weight: 600;
                text-transform: uppercase;
                margin-right: 1rem;
              }
              li:nth-of-type(2) {
                display: flex;
                align-items: center;
                .image-container {
                  height: 2.5rem;
                  width: 2.5rem;
                  margin-right: 5px;
                }
                .text-container {
                  color: $dark-yellow;
                  font-size: 1.8rem;
                  font-weight: 600;
                }
              }
            }
            .common-button-container {
              a {
                button {
                  border-radius: 0.7rem;
                  font-size: 1.4rem;
                  padding: 1rem 2rem;
                }
              }
            }
          }
        }
        .column-2 {
          .section-subtitle {
            h2 {
              font-size: 1.6rem;
              color: $red;
              text-transform: uppercase;
              font-weight: 600;
              letter-spacing: 0.4px;
            }
          }
          .section-title {
            h1 {
              font-size: 2.6rem;
              line-height: 1.6;
              font-weight: 600;
              text-transform: uppercase;
              letter-spacing: 0.4px;
            }
          }
          .text-container {
            p {
              font-size: 1.6rem;
              letter-spacing: 0.2px;
            }
          }
          .row-item {
            display: flex;
            margin-top: 3rem;
            gap: 6rem;
            .sub-column-1 {
              ul {
                display: flex;
                padding-left: 0;
                align-items: center;
                margin-bottom: 2rem;
                li:nth-of-type(1) {
                  .image-container {
                    height: 4.5rem;
                    width: 4.5rem;
                    background-color: $light-blue;
                    border-radius: 50%;
                    padding: 1rem;
                    margin-right: 2rem;
                  }
                }
                li:nth-of-type(2) {
                  color: $green-color;
                  font-size: 1.6rem;
                  font-weight: 500;
                  text-transform: capitalize;
                }
              }
            }
            .sub-column-2 {
              ul {
                display: flex;
                align-items: center;
                margin-bottom: 2rem;
                li:nth-of-type(1) {
                  .image-container {
                    height: 4.5rem;
                    width: 4.5rem;
                    background-color: $light-blue;
                    border-radius: 50%;
                    padding: 1rem;
                    margin-right: 2rem;
                  }
                }
                li:nth-of-type(2) {
                  color: $green-color;
                  font-size: 1.6rem;
                  font-weight: 500;
                  text-transform: capitalize;
                }
              }
            }
          }
        }
      }
    }
  }

  .service-section {
    background-color: $light-blue;
    overflow: hidden;
    .custom-container {
      padding-bottom: 0;
      .service-container {
        .section-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .column-1 {
            .common-box-container {
              margin-bottom: 6rem;
              padding: 2rem;
              &.text-right {
                text-align: right;
              }
              &.text-left {
                text-align: left;
              }
            }
          }
          .column-2 {
            .image-container {
              width: 44.3rem;
              height: 64rem;
            }
          }
        }
      }
    }
  }

  .places-section {
    .custom-container {
      padding: 6rem 8rem;
      .places-container {
        .section-content {
          display: flex;
          gap: 10rem;
          .item {
            img {
            }
            h3 {
              font-weight: 700;
              text-align: center;
              letter-spacing: 0.04em;
              text-transform: uppercase;
              margin: 3rem 0 2rem;
              font-size: 1.8rem;
            }
            p {
              text-align: center;
            }
          }
        }
      }
    }
  }
}

#about-page {
  background-color: #f7f7f7;
  .about-section {
    min-height: 80rem;
    overflow: hidden;
    .custom-container {
      .about-container {
        .section-content-container {
          display: flex;
          justify-content: space-between;
          .column-1 {
            width: 50%;
            margin-right: 12rem;
            p {
              font-size: 1.6rem;
              word-spacing: 1px;
              line-height: 2.4;
              margin: 2rem 0;
              text-align: justify;
              &.read-more-text {
                display: none;
                &.show {
                  display: block;
                }
              }
            }
            button {
              border: none;
              background: none;
              font-size: 1.6rem;
              text-transform: capitalize;
              color: black;
              margin-top: 2rem;
              padding-left: 0;
              border-bottom: 1px solid black;
              cursor: pointer;
              transition: 0.2s;
              &:hover {
                color: $green-color;
                border-bottom: 1px solid $green-color;
              }
            }
          }
          .column-2 {
            width: 50%;
            .images-container {
              .image-1-container {
                height: 35rem;
                width: 40.4rem;
                position: relative;
                .image-2-container {
                  height: 24.4rem;
                  width: 32rem;
                  position: absolute;
                  top: 39%;
                  right: -34%;
                }
                .image-3-container {
                  height: 26rem;
                  width: 31.6rem;
                  position: absolute;
                  bottom: -49%;
                  right: 9%;
                }
              }

              .text-container {
                font-size: 2.2rem;
                letter-spacing: 0.4px;
                text-transform: uppercase;
                font-weight: bold;
                position: absolute;
                right: -13%;
                bottom: 0;
                color: $white-color;
                span {
                  color: #96ce8c;
                  font-size: 7rem;
                  margin-top: -1rem;
                  font-weight: 600;
                  display: block;
                }
              }
            }
          }
          .column-3 {
            width: 50%;
            display: none;
            margin-left: 2rem;
            .about-item-container {
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              margin-bottom: 4rem;
              .icon-container {
                background-color: white;
                border-radius: 50%;
                padding: 1.8rem;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 6rem;
                .image-container {
                  height: 4rem;
                  width: 4rem;
                }
              }
              .text-container {
                .title-container {
                  h4 {
                    font-size: 1.6rem;
                    font-weight: 600;
                    font-family: "Poppins";
                    margin-bottom: 1.2rem;
                  }
                }
                .content-container {
                  p {
                    font-size: 1.6rem;
                    word-spacing: 1px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .video-section {
    margin-top: 3rem;
    .custom-container {
      padding: 0 !important;
      .video-container {
        .image-container {
          height: 50rem;
          background-position: top;
          background-repeat: no-repeat;
          background-size: cover;
          display: flex;
          align-items: center;
          gap: 6rem;
          padding: 12rem 10rem 6rem;
          .title-container {
            h4 {
              font-size: 2.1rem;
              letter-spacing: 1px;
              text-transform: uppercase;
              color: $white-color;
              font-weight: 600;
              font-family: "Poppins";
            }
            h2 {
              margin-top: 2rem;
              font-size: 4.2rem;
              letter-spacing: 0.6px;
              word-spacing: 2px;
              text-transform: uppercase;
              color: $white-color;
              font-weight: 600;
              line-height: 1.4;
              font-family: "Poppins";
            }
          }
          .icon-container {
            button {
              border: 5px solid white;
              border-radius: 50%;
              background-color: transparent;
              height: 13.5rem;
              width: 13.5rem;
              display: flex;
              justify-content: center;
              align-items: center;
              a {
                .image-container {
                  height: 4.5rem;
                  width: 4.5rem;
                  padding: 0;
                  padding-left: 1rem;
                }
              }
            }
          }
        }
      }
    }
  }
  .offers-section {
    margin-top: 6rem;
    .custom-container {
      .offers-container {
        display: flex;
        gap: 3rem;
        .left-content {
          flex-basis: 30%;
          h3 {
            text-transform: uppercase;
            font-size: 2.1rem;
            line-height: 2.1;
            font-weight: 600;
            max-width: 75%;
          }
        }
        .right-content {
          width: 100%;
          .accordion {
            .accordion-item {
              margin-bottom: 2.5rem;
              .accordion-header {
                button {
                  background: #092648;
                  color: white;
                  padding: 1.5rem;
                  font-size: 1.6rem;
                  text-transform: capitalize;
                  &:after {
                    background-image: none;
                    font: var(--fa-font-solid);
                    content: "\2b";
                  }

                  &.accordion-button:not(.collapsed)::after {
                    background-image: none;
                    font: var(--fa-font-solid);
                    content: "\f068";
                  }
                }
              }
              .accordion-collapse {
                .accordion-body {
                  border: 1px solid #092648;
                  padding: 1.5rem 1.25rem;
                  p {
                    font-size: 1.6rem;
                  }
                }
              }
            }
          }
          .uk-accordion {
            li {
              .uk-accordion-title {
                background: #092648;
                color: white;
                padding: 1.5rem;
                font-size: 1.6rem;
                text-transform: capitalize;
                &::before {
                  filter: brightness(50);
                }
              }
              .uk-accordion-content {
                border: 1px solid #092648;
                padding: 1.5rem;
                margin-top: 0;
                p {
                  font-size: 1.6rem;
                }
              }
            }
          }
        }
      }
    }
  }
  .details-section {
    .custom-container {
      .details-container {
        display: flex;
        gap: 3rem;
        .left-content {
          flex-basis: 23%;
          h3 {
            font-size: 2.1rem;
            line-height: 2.1;
            font-weight: 600;
            max-width: 70%;
          }
        }
        .right-content {
          flex-basis: 70%;
          p {
            font-size: 1.6rem;
            line-height: 2.4;
          }
          .contact-section {
            margin-top: 4rem;
            display: flex;
            gap: 4rem;
            .item {
              flex-basis: 32%;
              h4 {
                text-transform: uppercase;
                font-size: 1.8rem;
                font-weight: 600;
              }
              p {
                font-size: 1.6rem;
                margin-top: 1.5rem;
              }
              ul {
                margin-top: 1.5rem;
                li {
                  font-size: 1.6rem;
                  &:not(:last-of-type) {
                    margin-bottom: 1rem;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
#founder-message-page {
  background-color: #f7f7f7;
  .founder-message-section {
    .custom-container {
      .founder-message-container {
        padding-top: 3rem;
        .profile-section {
          display: flex;
          align-items: center;
          gap: 2rem;
          .left-content {
            img {
              width: 15rem;
              border-radius: 50%;
            }
          }
          .right-content {
            p {
              margin: 0;
              text-transform: uppercase;
              &.name {
                font-weight: 600;
                font-size: 1.8rem;
              }
              &.title {
                color: $green-color;
                font-size: 1.6rem;
                font-weight: 400;
                letter-spacing: 0.4px;
                margin-top: -5px;
              }
            }
          }
        }
        .message-section {
          display: flex;
          margin-top: 3rem;
          gap: 6rem;
          p {
            font-size: 1.6rem;
            line-height: 2.4;
            &.first-paragraph {
              flex-basis: 50%;
            }
            &.second-paragraph {
              flex-basis: 50%;
              margin: 0;
            }
          }
        }
      }
    }
  }
}
#room-type-page {
  background-color: #f7f7f7;
  .room-type-section-1 {
    .custom-container {
      .common-room-type-container {
        .column-1 {
          margin-right: 5rem;
        }
      }
    }
  }
  .room-type-section-2 {
    .custom-container {
      padding-right: 0;
      .common-room-type-container {
        display: flex;
        flex-direction: row-reverse;
        .column-1 {
          margin-left: 5rem;
        }
      }
    }
  }
  .room-type-section-3 {
    .custom-container {
      padding-left: 0;
      .common-room-type-container {
        .column-1 {
          margin-right: 5rem;
        }
      }
    }
  }
}

#menu-page {
  background: #f7f7f7;
  .menu-section {
    .custom-container {
      .menu-slider {
        .menu-slider-item {
          .menu-container {
            padding: 6rem 3rem 10rem;
            margin-top: 3rem;
            background-color: $white-color;
            .heading-container {
              margin-bottom: 8rem;
              .title-container {
                text-align: center;
                h1 {
                  font-size: 2.6rem;
                  font-weight: 600;
                  text-transform: uppercase;
                  letter-spacing: 0.4px;
                  position: relative;
                  &::after {
                    content: "";
                    height: 4px;
                    width: 4rem;
                    background-color: $green-color;
                    position: absolute;
                    bottom: -2.3rem;
                    right: 48%;
                  }
                }
              }
            }
            .menu-images-container {
              display: flex;
              justify-content: space-between;
              .menu-images-item {
                flex-basis: 32%;
                .img-container {
                  width: 100%;
                  img {
                    border-radius: 15% 0 15% 0;
                  }
                }
              }
            }

            .menu-items-container {
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              margin-top: 10rem;
              .menu-item {
                flex-basis: 47%;
                margin-bottom: 8rem;
                h2 {
                  font-weight: 500;
                  font-size: 2.1rem;
                  letter-spacing: 0.04em;
                  text-transform: uppercase;
                  margin-bottom: 2.5rem;
                }
                p {
                  font-weight: 500;
                  font-size: 1.5rem;
                  letter-spacing: 0.04em;
                  text-transform: uppercase;
                  color: #1ace75;
                  margin: 1rem 0 !important;
                }
                .price-section {
                  display: flex;
                  align-items: center;
                  font-size: 1.8rem;
                  margin-top: 2rem;
                  .price-line {
                    border: 1px dashed black;
                    width: 70%;
                    display: block;
                  }
                  .price {
                    text-transform: uppercase;
                    margin-left: 2rem;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .slick-slider {
    .slick-prev,
    .slick-next {
      z-index: 1;
      height: 4rem;
      width: 4rem;
      color: #fff;
      transition: 0.2s;
      &:hover {
        &::after {
          color: $black-color;
        }
      }
    }
    .slick-prev {
      top: 9%;
      border-radius: 50%;
      left: 9rem;
      &::after {
        content: "\f137";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        border-radius: 50%;
        left: -5px;
        bottom: -79px;
        color: $green-color;
        font-size: 3.2rem;
        position: absolute;
        background-image: none;
      }
    }
    .slick-next {
      top: 9%;
      // background: $green-color;
      border-radius: 50%;
      right: 9rem;
      &::after {
        content: "\f138";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        left: -0.3rem;
        bottom: -7.7rem;
        color: $green-color;
        font-size: 3.2rem;
        position: absolute;
        background-image: none;
      }
    }
  }
}

#reservation-page {
  background-color: #f7f7f7;
  .room-details-section {
    .custom-container {
      .room-details-container {
        display: flex;
        justify-content: space-between;

        .column-1 {
          width: 60%;
          margin-right: 10rem;
          .title-container {
            h1 {
              font-size: 2.3rem;
              font-weight: 600;
              text-transform: uppercase;
              letter-spacing: 0.4px;
              margin-bottom: 4.6rem;
            }
          }
          .subtitle-container-1 {
            h2 {
              font-size: 1.7rem;
              text-transform: capitalize;
              font-weight: 500;
              margin-bottom: 2.6rem;
              span {
                font-weight: 400;
                margin-left: 5px;
              }
            }
          }
          .subtitle-container-2 {
            h3 {
              font-size: 1.7rem;
              text-transform: capitalize;
              font-weight: 500;
              margin-bottom: 2.6rem;
              span {
                font-weight: 400;
                margin-left: 5px;
              }
            }
          }
          .content-container {
            p {
              font-size: 1.6rem;
              margin-top: 3rem;
              text-align: justify;
              letter-spacing: 0.4px;
              line-height: 2.6;
            }
          }
          .images-container {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin: 5rem 0;
            .image-item {
              width: 48%;
              .image-container {
                width: 100%;
              }
            }
          }
          .common-facilities-container {
            ul {
              li {
                .image-container {
                  width: 3.8rem;
                }
                &:nth-of-type(2) {
                  .image-container {
                    width: 2.8rem;
                  }
                }
                &:nth-of-type(5) {
                  .image-container {
                    width: 3.2rem;
                  }
                }
              }
            }
          }
          .rules-container {
            margin-top: 4.6rem;
            h4 {
              font-size: 2.1rem;
              font-weight: 500;
              text-transform: capitalize;
              margin: 6rem 0 4rem;
            }
            ul {
              padding-left: 0;
              li {
                margin-bottom: 2rem;
                font-size: 1.6rem;
                i {
                  color: $green-color;
                  font-size: 1.4rem;
                  margin-right: 7px;
                }
              }
            }
          }
        }
        .column-2 {
          width: 40%;
          .form-container {
            padding: 6rem 3rem;
            border: 2px solid $gray-color;
            .title-container {
              h2 {
                font-size: 2.2rem;
                text-transform: uppercase;
                font-weight: 600;
                text-align: center;
                margin-bottom: 6rem;
              }
            }
            form {
              label {
                font-size: 1.8rem;
                color: $green-color;
                font-weight: 500;
                text-transform: uppercase;
                span {
                  color: $black-color;
                }
                .extra-title {
                  color: $green-color;
                }
              }
              input {
                width: 100%;
                margin: 3rem 0 4rem;
                padding-bottom: 1rem;
                font-size: 1.8rem;
                font-weight: 400;
                border: none;
                border-bottom: 1px solid #b8b8b8;
                color: #b8b8b8;
                background: transparent;
              }
              h2 {
                font-size: 2.2rem;
                text-transform: uppercase;
                font-weight: 600;
                text-align: center;
                margin-bottom: 6rem;
              }
              ul {
                padding-left: 0;
                li {
                  display: flex;
                  align-items: center;
                  gap: 1.5rem;
                  margin-bottom: 4rem;
                  i {
                    font-size: 1.8rem;
                    color: #b8b8b8;
                  }
                  .radio-label {
                    display: flex;
                    align-items: center;
                    gap: 2rem;
                    .line {
                      height: 2px;
                      width: 5rem;
                      background-color: #ababab;
                      display: block;
                    }
                  }
                }
              }
              h3 {
                text-transform: capitalize;
                font-size: 2.2rem;
                font-weight: 500;
                text-align: center;
                margin-top: 8rem;
              }
              h1 {
                font-size: 2.8rem;
                text-transform: uppercase;
                color: #fe393e;
                text-align: center;
                margin-top: 4rem;
                font-weight: 500;
              }
              .common-button-container {
                margin-top: 6rem;
                a {
                  button {
                    width: 100%;
                    padding: 2rem 0;
                    border-radius: 5px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
#events-page {
  background-color: $light-gray;
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
    /* Modal Content/Box */
    .modal-content {
      background-color: $white-color;
      margin: 1rem auto; /* 15% from the top and centered */
      padding: 2rem 6rem 6rem 6rem;
      border: 1px solid #888;
      width: 65rem;
      max-width: 95%;
      top: 60%;
      transform: translateY(-50%);
      .close {
        color: #aaa;
        float: right;
        font-size: 4rem;
        font-weight: 100;
        position: absolute;
        top: 6px;
        right: 20px;
        &:hover,
        &:focus {
          color: #676767;
          text-decoration: none;
          cursor: pointer;
        }
      }
      // .form-container {
      //   h1 {
      //     font-size: 4.2rem;
      //     text-transform: uppercase;
      //     text-align: center;
      //     font-weight: 600;
      //     color: $green-color;
      //     padding: 6rem 0;
      //   }
      //   label {
      //     font-size: 2.6rem;
      //     text-transform: uppercase;
      //   }
      //   .price {
      //     color: $red;
      //   }
      //   input {
      //     width: 100%;
      //     margin: 2rem 0;
      //     padding: 1.7rem 0;
      //     font-size: 2.4rem;
      //     font-weight: 600;
      //     border: 1px solid #b8b8b8;
      //   }
      //   button {
      //     width: 100%;
      //     font-size: 2.4rem;
      //     background-color: $green-color;
      //     color: white;
      //     padding: 2.2rem 0;
      //     border-style: none;
      //   }
      // }
    }
  }
  .event-booking-form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: white;
    max-width: 800px;
    margin-inline: auto;
    margin-top: 3rem;
    h2 {
      font-weight: 500;
      font-size: 2.6rem;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      color: $green-color;
      margin-bottom: 5rem;
      text-align: center;
    }
    input {
      border: none;
      border-bottom: 2px solid #ddecef;
      padding-bottom: 1rem;
      margin-bottom: 4.5rem;
      font-size: 1.6rem;
      color: grey;
      width: 100%;
      background: transparent;
      -webkit-transition: 0.3s;
      transition: 0.3s;
      &::placeholder {
        color: grey;
      }
      &:focus {
        outline: none;
        border-bottom: 2px solid #17ce7d;
        &::placeholder {
          transition: 0.3s;
          color: $green-color;
        }
      }
    }
    input[name="price"] {
      color: red;
      font-weight: 500;
    }
    .book-now-btn {
      text-transform: uppercase;
      border: none;
      background: $green-color;
      color: white;
      width: 100%;
      padding: 1.6rem 0;
      font-size: 1.6rem;
      border-radius: 7px;
      font-weight: 500;
      letter-spacing: 0.04em;
      transition: 0.3s;
      &:hover {
        background: $black-color;
        color: $green-color;
      }
    }
  }
}

#gallery-page {
  background-color: $light-gray;
  .gallery {
    margin: 4rem 0;
    .custom-container {
      padding: 6rem;
      .gallery-menu-slider {
        padding-left: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        margin-bottom: 3rem;
        .list {
          border-radius: 10rem;
          background-color: $green-color;
          text-transform: uppercase;
          list-style: none;
          font-size: 1.5rem;
          font-weight: 500;
          text-align: center;
          background-color: #e5e5e5;
          padding: 1.5rem 3rem;
          cursor: pointer;
          letter-spacing: 0.04em;
          transition: 0.4s linear;
          &:hover {
            background-color: black;
            color: $green-color;
          }
          &.active {
            background-color: $green-color;
            color: white;
          }
        }
      }

      .items-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .items {
          position: relative;
          width: 325px;
          height: 260px;
          margin: 12px;
          // box-shadow: 0 3px 5px #000;
          transition: all 0.3s ease;
          img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.2s linear;
          }
          &:hover {
            // &:after {
            //   content: "\f00e";
            //   font-family: "Font Awesome 5 Free";
            //   position: absolute;
            //   top: 50%;
            //   left: 50%;
            //   transform: translate(-50%, -50%);
            //   width: 3.5rem;
            //   height: 3.5rem;
            //   background: #1ace75c7;
            //   color: white;
            //   font-weight: 900;
            //   font-size: 16px;
            //   padding: 0.6rem 1rem;
            //   border-radius: 50%;
            // }
            .img-text {
              // display: block;
              transform: translateY(0%);
              opacity: 1;
            }
          }
          .img-text {
            transform: translateY(50%);
            opacity: 0;
            position: absolute;
            bottom: 0;
            left: 0;
            padding: 2rem 1.2rem;
            background: rgba(85, 85, 85, 0.8);
            z-index: 9999;
            width: 100%;
            transition: 0.5s;
            .img-title {
              text-transform: uppercase;
              color: white;
              font-size: 1.8rem;
              font-weight: 600;
              margin: 0;
            }
            .img-caption {
              color: #e9e9e9;
              font-size: 1.6rem;
              margin-top: 1rem;
            }
          }
        }
      }
    }
  }
}

#contact-page {
  background-color: $light-gray;
  .contact-section {
    margin-top: 3rem;
    .custom-container {
      .contact-container {
        display: flex;
        .contact-us-container {
          width: 45%;
          background-color: $green-color;
          color: white;
          padding: 4rem;
          .heading-container {
            h1 {
              font-weight: 600;
              font-size: 2.4rem;
              letter-spacing: 0.4px;
              color: $white-color;
            }
            p {
              font-size: 1.6rem;
              letter-spacing: 0.4px;
              margin: 3rem 0;
            }
          }
          .icon-text {
            display: flex;
            margin-bottom: 2rem;
            .icon {
              margin-right: 2rem;
              font-size: 2.4rem;
            }
            .text {
              font-size: 2.4rem;
              width: 95%;

              h6 {
                font-size: 1.8rem;
                font-weight: 500;
                letter-spacing: 0.4px;
                padding-bottom: 0;
                color: $white-color;
                text-transform: uppercase;
                margin-bottom: 1.5rem;
                margin-top: 5px;
              }
              ul {
                padding-left: 0;
                li {
                  font-size: 1.6rem;
                  &:not(:last-of-type) {
                    margin-bottom: 1.8rem;
                  }
                }
              }
            }
          }
        }
        .form-container {
          text-align: center;
          width: 55%;
          padding: 4rem;
          background: white;
          h1 {
            font-size: 2.4rem;
            letter-spacing: 0.4px;
            color: $green-color;
            font-weight: 600;
            margin-bottom: 4rem;
          }
          form {
            input,
            textarea {
              width: 100%;
              padding: 1.2rem 1.5rem;
              font-size: 1.6rem;
              letter-spacing: 0.2px;
              font-weight: 400;
              color: black !important;
              border: 1px solid #b8b8b8;
              margin-bottom: 4rem;
              transition: 0.2s;
              &::placeholder {
                color: black;
              }
              &:focus {
                border: 1px solid white;
                outline: none;
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
              }
            }
          }
          button {
            width: 100%;
            font-size: 1.8rem;
            background-color: $green-color;
            color: white;
            padding: 1.5rem;
            border-style: none;
            text-transform: uppercase;
            transition: 0.3s;
            &:hover {
              color: $green-color;
              background-color: $black-color;
            }
          }
        }
      }
    }
  }
}

/*--------------------------------- Content Wrapper Ends ----------------------------------*/

/*--------------------------------- Footer Wrapper Starts ---------------------------------*/

#footer-wrapper {
  background-color: #f7f7f7;
  .footer-section {
    padding-top: 15rem;
    .image-container {
      background-size: cover;
      background-repeat: no-repeat;
      width: 100%;
      position: relative;
      .custom-container {
        padding: 23rem 6rem 8rem 6rem;
        .footer-container {
          display: flex;
          justify-content: space-between;
          gap: 5rem;
          .column-1 {
            width: 25%;
            line-height: 2;
            .image-container {
              margin-top: 0;
              height: 7rem;
              width: 7rem;
              display: flex;
              align-items: center;
              h2 {
                margin: 0;
                font-size: 2.4rem;
                font-weight: 600;
                text-transform: uppercase;
                color: $white-color;
                letter-spacing: 1px;
              }
            }
            p {
              font-size: 1.4rem;
              color: $white-color;
              padding-top: 0;
              margin: 3rem 0 0 0;
            }
          }
          .column-2 {
            width: 25%;
            line-height: 2.5;
            ul {
              padding: 0;
              margin: 0;
              margin-top: 4rem;
              li {
                font-size: 1.4rem;
                color: $white-color;
                letter-spacing: 0.4px;
                strong {
                  font-weight: 600;
                }
              }
            }
          }
          .column-3 {
            width: 25%;
            line-height: 2.5;
            ul {
              padding: 0;
              margin: 0;
              margin-top: 4rem;
              li {
                font-size: 1.4rem;
                color: $white-color;
                text-transform: uppercase;
                i {
                  font-size: 1.2rem;
                  padding-right: 1rem;
                }
                a {
                  color: white;
                  &:hover {
                    text-decoration: none;
                  }
                }
              }
            }
          }
          .column-4 {
            width: 25%;
            line-height: 2.5;
            ul {
              padding: 0;
              margin: 0;
              margin-top: 4rem;
              li {
                font-size: 1.4rem;
                color: $white-color;
                text-transform: uppercase;
                span {
                  font-weight: 600;
                  margin-right: 1rem;
                }
              }
              li:nth-of-type(5) {
                color: $red;
              }
              li:nth-of-type(6) {
                color: $red;
              }
            }
          }
        }
      }
    }
  }

  .copyright-section {
    background-color: $black-color;
    .custom-container {
      padding: 20px 60px;
      .copyright-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        letter-spacing: 0.4px;
        .copyright-left {
          font-size: 1.4rem;
          color: $white-color;
          text-transform: uppercase;
        }
        .copyright-right {
          font-size: 1.4rem;
          color: $white-color;
          text-transform: uppercase;
          a {
            color: $green-color;
          }
        }
      }
    }
  }
}

/*---------------------------------- Footer Wrapper Ends ----------------------------------*/

/*----------------------------------- Components Starts -----------------------------------*/

.lg-outer {
  .lg-object {
    object-fit: contain !important;
  }
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 1.8rem;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.common-banner-section {
  width: 100%;
  height: 100vh;
  position: relative;
  .common-banner-slider {
    .banner-item {
      overflow: hidden;
      .image-container {
        height: 100vh;
        display: flex;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        transition: all 1s ease;
        .custom-container {
          width: 100%;
          text-align: center;
          .inner {
            z-index: 2;
            .banner-content {
              margin-top: 6rem;
              .section-title {
                margin: 3rem 0;
                h1 {
                  font-family: $font-type-2;
                  font-weight: 400;
                  color: $white-color;
                  text-transform: uppercase;
                  letter-spacing: 0.4rem;
                  font-size: 7rem;
                  line-height: 1.4;
                  span {
                    color: #fe393e;
                  }
                }
              }

              .section-content-banner {
                span {
                  display: inline-block;
                  background: $white-color;
                  width: 24rem;
                  height: 5px;
                  position: relative;
                  &:after {
                    content: "";
                    display: inline-block;
                    position: absolute;
                    background-color: $white-color;
                    bottom: 1rem;
                    width: 24rem;
                    height: 1px;
                    left: 0;
                  }
                }
                .thick {
                  height: 1px;
                  &:after {
                    height: 5px;
                  }
                }

                p {
                  display: inline-block;
                  color: $white-color;
                  font-size: 1.8rem;
                  font-weight: 600;
                  text-transform: uppercase;
                  padding: 1rem 3rem;
                  margin-top: 0;
                  letter-spacing: 0.3rem;
                  font-weight: 500;
                  &.upper {
                    padding: 1rem 4rem;
                  }
                }
              }
              .section-content {
                p {
                  font-size: 1.6rem;
                  font-weight: 600;
                  letter-spacing: 0.4px;
                  color: $white-color;
                  font-weight: 300;
                  text-transform: uppercase;
                  &.margin-top {
                    margin-top: 7rem;
                  }
                }
              }
              .icon-container {
                i {
                  color: $white-color;
                  font-size: 2.1rem;
                  position: absolute;
                  bottom: 0.5rem;
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
    }
  }
  .scroll-button {
    position: absolute;
    right: 0;
    bottom: 30px;
    left: 0;
    margin: auto;
    width: 34px;
    height: 55px;
    cursor: pointer;
    .scroll-down-mouse {
      width: 3px;
      padding: 10px 15px;
      height: 35px;
      border: 2px solid #fff;
      border-radius: 25px;
      opacity: 0.75;
      box-sizing: content-box;
      .scroller {
        width: 3px;
        height: 10px;
        border-radius: 25%;
        background-color: #fff;
        animation-name: scroll;
        animation-duration: 2.2s;
        animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
        animation-iteration-count: infinite;
      }
    }
  }

  .swiper {
    .swiper-wrapper {
      .swiper-slide {
        .banner-img {
          width: 100%;
          height: 100%;
          background-position: center;
          background-size: cover;
          position: absolute;
          z-index: 0;
        }
        .banner-content {
          position: relative;
          z-index: 1;
          .section-title {
            margin: 2rem 0;
            h1 {
              font-size: 12rem;
              letter-spacing: 7.2rem;
              margin-left: 7rem;
              font-family: $font-type-2;
              font-weight: 600;
              color: $white-color;
              text-transform: uppercase;
              span {
                color: #fe393e;
              }
              &.text-small {
                font-size: 11.8rem;
                letter-spacing: 0;
              }
            }
          }

          .section-content-banner {
            span {
              display: inline-block;
              background: $white-color;
              width: 28rem;
              height: 5px;
              position: relative;
              &:after {
                content: "";
                display: inline-block;
                position: absolute;
                background-color: $white-color;
                bottom: 1rem;
                width: 28rem;
                height: 1px;
                left: 0;
              }
            }
            .thick {
              height: 5px;
            }
          }

          p {
            display: inline-block;
            color: $white-color;
            margin: 0 2rem;
            font-size: 2.2rem;
            font-weight: 500;
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-top: 0;
            &.upper {
              margin: 0 3.2rem 0 3.2rem;
            }
          }
        }
      }
      .scroll-for-more-section {
        position: absolute;
        bottom: 7%;
        .section-content {
          p {
            font-size: 1.6rem;
            font-weight: 600;
            letter-spacing: 0.4px;
            color: $white-color;
            font-weight: 300;
            text-transform: uppercase;
          }
        }
        .icon-container {
          i {
            color: $white-color;
            font-size: 2.1rem;
            position: absolute;
            bottom: 0.5rem;
            cursor: pointer;
          }
        }
      }
    }
  }
}

.common-banner-section2 {
  width: 100%;
  height: 100vh;
  position: relative;
  .scroll-button {
    position: absolute;
    right: 0;
    bottom: 30px;
    left: 0;
    margin: auto;
    width: 34px;
    height: 55px;
    cursor: pointer;
    .scroll-down-mouse {
      width: 3px;
      padding: 10px 15px;
      height: 35px;
      border: 2px solid #fff;
      border-radius: 25px;
      opacity: 0.75;
      box-sizing: content-box;
      .scroller {
        width: 3px;
        height: 10px;
        border-radius: 25%;
        background-color: #fff;
        animation-name: scroll;
        animation-duration: 2.2s;
        animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
        animation-iteration-count: infinite;
      }
    }
  }
  .swiper {
    .swiper-wrapper {
      .swiper-slide {
        position: relative;
        .banner-img {
          width: 100%;
          height: 100%;
          background-position: center;
          background-size: cover;
          position: absolute;
          z-index: 0;
        }
        .banner-content {
          position: relative;
          z-index: 1;
          margin-top: -5rem;
          .section-title {
            margin: 2rem 0;
            h1 {
              font-family: "Poppins", sans-serif;
              font-weight: 400;
              color: #fff;
              text-transform: uppercase;
              letter-spacing: 0.4rem;
              font-size: 7rem;
              line-height: 1.4;
              span {
                color: #fe393e;
              }
            }
          }

          .section-content-banner {
            span {
              display: inline-block;
              background: $white-color;
              width: 24rem;
              height: 5px;
              position: relative;
              &:after {
                content: "";
                display: inline-block;
                position: absolute;
                background-color: $white-color;
                bottom: 1rem;
                width: 24rem;
                height: 1px;
                left: 0;
              }
            }
            // .thick {
            //   height: 1px;
            //   &:after {
            //     height: 5px;
            //   }
            // }

            p {
              display: inline-block;
              color: $white-color;
              font-size: 1.8rem;
              font-weight: 600;
              text-transform: uppercase;
              padding: 1rem 3rem;
              margin-top: 0;
              letter-spacing: 0.3rem;
              font-weight: 500;
              &.upper {
                padding: 1rem 4rem;
              }
            }
          }
        }
        .scroll-for-more-section {
          position: absolute;
          bottom: 7%;
          .section-content {
            p {
              font-size: 1.6rem;
              font-weight: 600;
              letter-spacing: 0.4px;
              color: $white-color;
              font-weight: 300;
              text-transform: uppercase;
            }
          }
          .icon-container {
            i {
              color: $white-color;
              font-size: 2.1rem;
              position: absolute;
              bottom: 0.5rem;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}

.common-search-section {
  padding: 2rem 3rem 4rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  margin: 6rem auto 2rem;
  border-color: $gray-color;
  border-radius: 1rem;
  background-color: $white-color;
  width: 90%;
  z-index: 19;
  .search-container {
    .section-title {
      h2 {
        text-transform: uppercase;
        font-size: 1.8rem;
        font-weight: 700;
        letter-spacing: 0.02rem;
        border-bottom: 2px solid #b8b8b8;
        padding-bottom: 1rem;
      }
    }
    .form-container {
      display: flex;
      margin-top: 3rem;
      gap: 4rem;
      align-items: center;
      justify-content: space-between;
      .form-inputs {
        display: flex;
        align-items: center;
        gap: 3rem;
        justify-content: space-between;
        width: 100%;
        .input-item {
          flex-basis: 20%;
          label {
            display: block;
            margin-bottom: 1rem;
            font-size: 1.4rem;
            color: #646464;
            text-transform: uppercase;
          }
          .form-input {
            padding: 1rem;
            border-radius: 1rem;
            font-size: 1.4rem;
            color: #868a8d;
            text-transform: uppercase;
            border: 1px solid $gray-color;
            width: 100%;
          }
        }
        .select-room {
          position: relative;
          min-width: 20%;
          select {
            width: 100%;
            padding: 1rem;
            background: transparent;
            border-radius: 10px;
            font-size: 1.4rem;
            height: auto;
            text-transform: uppercase;
            color: #868a8d;
            border: 1px solid #b8b8b8;
            appearance: none;
            font-weight: 500;
            letter-spacing: 0.4px;
          }
          .custom-arrow {
            position: absolute;
            top: 20%;
            right: 0;
            width: 3rem;
            height: 100%;
            display: block;
            pointer-events: none;
            &::after {
              content: "";
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 0;
              height: 0;
              border-left: 0.6em solid transparent;
              border-right: 0.6em solid transparent;
              border-top: 0.6em solid #aba6a6;
            }
          }
        }
      }
    }
  }
}
.common-button-container {
  a {
    button {
      text-transform: uppercase;
      background-color: #1ace75;
      border-style: none;
      color: white;
      font-size: 1.8rem;
      transition: 0.3s;
      &:hover {
        background-color: $black-color;
        transform: scale(1.015) translateY(4px);
      }
    }
  }
}
.common-icon-button {
  button {
    border-radius: 50%;
    border-style: none;
    background-color: $green-color;
    width: 3.5rem;
    height: 3.5rem;
    cursor: pointer;
    transition: 0.3s;
    &:hover {
      background-color: black;
      i {
        color: $green-color;
      }
    }
    i {
      color: white;
    }
  }
  .search-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border-style: none;
    background-color: #1ace75;
    height: 4rem;
    width: 4rem;
    margin-top: 3rem;
    cursor: pointer;
    transform: 0.3s;
    &:hover {
      background-color: black;
    }
    i {
      color: $white-color;
      font-size: 1.2rem;
    }
  }
  .search2-btn {
    display: none;
    width: 100%;
    border-radius: 5px;
    padding: 1.5rem 4rem;
    height: auto;
    font-size: 1.6rem;
    font-weight: 500;
    color: white;
    text-transform: uppercase;
  }
}
.common-box-container {
  background-color: $green-color;
  border-radius: 10px;
  position: relative;
  h2 {
    font-size: 2.1rem;
    color: $white-color;
    text-transform: capitalize;
    margin-bottom: 5px;
    font-weight: 600;
  }
  p {
    font-size: 1.6rem;
    margin: 0;
    margin-top: 0;
    line-height: 1.75;
    padding-inline: 0;
  }
  &::after {
    content: "";
    height: 1.6rem;
    width: 2.5rem;
    position: absolute;
    background-color: $green-color;
    top: 42%;
    transform: translateY(-50%);
    transform: rotate(-45deg);
  }
  &.left {
    &::after {
      right: -2%;
    }
  }
  &.right {
    &::after {
      left: -2%;
    }
  }
}
.common-footer-title {
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  color: $white-color;
  letter-spacing: 0.6px;
  margin-bottom: 3rem;
  padding-bottom: 5px;
  position: relative;
  &::before {
    content: "";
    height: 7px;
    width: 33px;
    background-color: $red;
    position: absolute;
    bottom: 0;
  }
}
.common-room-type-container {
  display: flex;
  justify-content: space-between;
  .column-1 {
    width: 60%;
    height: 100%;
  }
  .column-2 {
    width: 40%;
    border: 1px solid $grayish;
    padding: 4rem 2.5rem;
    .column-2-content {
      h1 {
        font-size: 1.8rem;
        text-transform: uppercase;
        font-weight: 600;
        margin-bottom: 4rem;
      }
      h2 {
        font-size: 1.6rem;
        text-transform: uppercase;
        font-weight: 500;
        margin-bottom: 2rem;
        span {
          color: $red;
          margin-left: 5px;
        }
      }
      p {
        font-size: 1.6rem;
        letter-spacing: 0.4px;
        line-height: 2.4;
        margin-bottom: 3rem;
      }

      a {
        h4 {
          font-size: 1.5rem;
          font-weight: 500;
          text-transform: uppercase;
          color: #626262;
          border-bottom: 1px solid #626262;
          display: inline;
          transition: 0.2s;
        }
        &:hover {
          text-decoration: none;
          h4 {
            color: $green-color;
            border-bottom: 1px solid $green-color;
          }
        }
      }
    }
  }
}
.common-facilities-container {
  h2 {
    font-size: 2.1rem;
    font-size: 600;
    font-weight: 500;
    text-transform: capitalize;
    margin: 2rem 0 4rem;
  }
  ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 4rem;
    padding-left: 0;
    li {
      display: flex;
      align-items: center;
      flex-basis: 29%;
      gap: 1rem;
      font-size: 1.5rem;
      text-transform: capitalize;
      .image-container {
        width: 2.2rem;
        img {
          height: auto !important;
        }
      }
    }
  }
  a {
    font-size: 1.4rem;
    color: $black-color;
    letter-spacing: 0.4px;
    border-bottom: 1px solid black;
    text-transform: uppercase;
    font-weight: 400;
    transition: 0.2s;
    &:hover {
      color: $green-color;
      border-color: $green-color;
      text-decoration: none;
    }
  }
}
.common-card-container {
  &:not(:last-of-type) {
    margin-bottom: 10rem;
  }

  .title-container {
    h1 {
      font-size: 2.3rem;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 6rem;
      position: relative;
      &::after {
        content: "";
        height: 5px;
        width: 3.5rem;
        background-color: $green-color;
        position: absolute;
        bottom: -38%;
        left: 0;
      }
    }
  }
  .card-items-container {
    display: flex;
    align-items: center;
    gap: 6rem;
    flex-wrap: wrap;
    .card-item {
      .common-image-container {
        position: relative;
        height: 36rem;
        width: 25rem;
        margin-bottom: 3rem;
        img {
          border-radius: 2.5rem;
        }
        .date-container {
          position: absolute;
          top: 3%;
          left: 4%;
          button {
            font-size: 1.4rem;
            font-weight: 600;
            color: $white-color;
            border-radius: 50%;
            height: 6.5rem;
            width: 6.5rem;
            border: none;
            background-color: $green-color;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .tag-container {
          position: absolute;
          bottom: 7%;
          right: 7%;
          button {
            border-radius: 50%;
            height: 5rem;
            width: 5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            border: none;
            background-color: $green-color;
            cursor: pointer;
            position: relative;
            &::after {
              content: "";
              width: 23rem;
              height: 23rem;
              border: 8px solid white;
              border-radius: 50%;
              position: absolute;
              left: -9rem;
              top: -9rem;
              -webkit-animation: ping 1.5s ease-in-out infinite both;
              animation: ping 1.5s ease-in-out infinite both;
            }
            i {
              font-size: 2.6rem;
              color: #fff;
              margin-top: -6px;
            }
          }
        }
      }
      .card-caption-container {
        .card-title-container {
          font-size: 1.7rem;
          letter-spacing: 0.2px;
          font-weight: 600;
          text-transform: uppercase;
        }
        .card-location-container {
          p {
            font-size: 1.6rem;
            color: #9c9c9c;
            margin: 5px 0;
            margin-bottom: -10px;
          }
        }
        .card-time-container {
          font-size: 1.7rem;
          text-transform: uppercase;
          letter-spacing: 0.4px;
          margin: 1.5rem 0;
        }
        .card-days-container {
          ul {
            display: flex;
            align-items: center;
            padding-left: 0;
            li {
              margin-right: 5px;
              font-size: 1.4rem;
              height: 2.8rem;
              width: 2.8rem;
              background-color: #e5e5e5;
              border-radius: 50%;
              color: $black-color;
              display: flex;
              justify-content: center;
              align-items: center;
              text-transform: uppercase;
              &.active {
                color: $green-color;
                background-color: $white-color;
                border: 2px solid $green-color;
              }
            }
          }
        }
      }
    }
  }
}
.common-pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  .common-arrow-container {
    height: 4rem;
    width: 4rem;
    margin-right: 0;
    i {
      font-size: 1.4rem;
    }
  }
  .number {
    display: flex;
    margin: 0 2rem;
    button {
      font-size: 1.6rem;
      font-weight: 500;
      background-color: white;
      border: 2px solid #1ace75;
      border-radius: 50%;
      color: #1ace75;
      height: 4rem;
      width: 4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 0.2s;
      &:not(:last-of-type) {
        margin-right: 1rem;
      }
      &.active,
      &:hover {
        background-color: #1ace75;
        color: black;
        border: 2px solid #1ace75;
      }
    }
  }
}
.common-arrow-container {
  background-color: $green-color;
  height: 4.5rem;
  width: 4.5rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.2s;
  i {
    font-size: 1.7rem;
  }
  &:hover {
    background-color: $black-color;
    color: $green-color;
  }
  &.left-margin {
    margin-left: 3rem;
  }
  &.right-margin {
    margin-right: 3rem;
  }
}
.common-heading-container {
  margin-bottom: 6rem;
  .common-section-subtitle {
    text-align: center;
    h2 {
      display: inline-block;
      text-align: center;
      position: relative;
      font-size: 1.6rem;
      text-transform: uppercase;
      color: $red;
      font-weight: 600;
      font-family: "Poppins";
      letter-spacing: 0.4rem;
      &:after,
      &:before {
        content: "";
        position: absolute;
        background-color: red;
        height: 2px;
        width: 2rem;
        top: 50%;
        transform: translateY(-50%);
      }
      &:after {
        right: -16%;
      }
      &:before {
        left: -16%;
      }
    }
  }
  .common-section-title {
    h1 {
      text-align: center;
      text-transform: uppercase;
      font-size: 2.6rem;
      margin-top: 1.5rem;
      letter-spacing: 2px;
      font-weight: 600;
      line-height: 1.4;
      font-family: "Poppins";
      span {
        color: $green-color;
      }
    }
  }
  &.no-margin {
    margin: 0;
  }
}
/*------------------------------------ Components Ends ------------------------------------*/

/*---------------------------------- animation Starts ----------------------------------*/

.animation-area .ani-sequence {
  opacity: 0;
  position: relative;
  transition-delay: 1s;
  transition: all 1.4s ease;

  &:first-of-type {
    left: -100%;
  }
  &:last-of-type {
    right: -100%;
  }
}

.animation-area .ani-sequence.normal {
  opacity: 1;
  transition-delay: 1s;
  transition: all 1.4s ease;

  &:first-of-type {
    left: 0;
  }
  &:last-of-type {
    right: 0;
  }
}

.animation-area1 .ani-sequence {
  opacity: 0;
  position: relative;
  transition-delay: 1s;
  transition: all 1.4s ease;

  &:nth-of-type(1) {
    left: -100%;
    transition: all 0.4s ease-in-out;
  }
  &:nth-of-type(2) {
    left: -100%;
    transition: all 0.7s ease-in-out;
  }
  &:nth-of-type(3) {
    left: -100%;
    transition: all 0.9s ease-in-out;
  }
}

.animation-area1 .ani-sequence.lefting {
  opacity: 1;
  transition-delay: 1s;
  transition: all 1.4s ease;

  &:nth-of-type(1) {
    left: 0;
    transition: all 0.4s ease-in-out;
  }
  &:nth-of-type(2) {
    left: 0;
    transition: all 0.7s ease-in-out;
  }
  &:nth-of-type(3) {
    left: 0;
    transition: all 0.9s ease-in-out;
  }
}

.animation-area2 .ani-sequence {
  opacity: 0;
  position: relative;
  transition-delay: 1s;
  transition: all 1.4s ease;

  &:nth-of-type(1) {
    right: -100%;
    transition: all 0.4s ease-in-out;
  }
  &:nth-of-type(2) {
    right: -100%;
    transition: all 0.7s ease-in-out;
  }
  &:nth-of-type(3) {
    right: -100%;
    transition: all 2s ease-in-out;
  }
}

.animation-area2 .ani-sequence.righting {
  opacity: 1;
  transition-delay: 1s;
  transition: all 1.4s ease;

  &:nth-of-type(1) {
    right: 0;
    transition: all 0.4s ease-in-out;
  }
  &:nth-of-type(2) {
    right: 0;
    transition: all 0.7s ease-in-out;
  }
  &:nth-of-type(3) {
    right: 0;
    transition: all 2s ease-in-out;
  }
}

.animation-area3 .ani-sequence {
  opacity: 0;
  position: relative;
  transition-delay: 1s;
  transition: all 1.4s ease;

  &:nth-of-type(1) {
    right: -100%;
    transition: all 0.4s ease-in-out;
  }
  &:nth-of-type(2) {
    right: -100%;
    transition: all 0.7s ease-in-out;
  }
  &:nth-of-type(3) {
    right: -100%;
    transition: all 2s ease-in-out;
  }
}
.animation-area3 .ani-sequence.normal {
  opacity: 1;
  transition-delay: 1s;
  transition: all 1.4s ease;
  position: relative;
  &:nth-of-type(1) {
    right: 0;

    transition: all 0.4s ease-in-out;
  }
  &:nth-of-type(2) {
    right: 0;

    transition: all 0.7s ease-in-out;
  }
  &:nth-of-type(3) {
    right: 0;

    transition: all 2s ease-in-out;
  }
}

.animation-area4 .ani-sequence {
  opacity: 0;
  position: relative;
  transition-delay: 1s;
  transition: all 1.4s ease;

  &:nth-of-type(1) {
    left: -100%;
    transition: all 0.4s ease-in-out;
  }
  &:nth-of-type(2) {
    right: -100%;
    transition: all 0.7s ease-in-out;
  }
  &:nth-of-type(3) {
    right: -100%;
    transition: all 2s ease-in-out;
  }
}
.animation-area4 .ani-sequence.normal {
  opacity: 1;
  transition-delay: 1s;
  transition: all 1.4s ease;
  position: relative;
  &:nth-of-type(1) {
    left: 0;
    transition: all 0.4s ease-in-out;
  }
  &:nth-of-type(2) {
    right: 0;
    transition: all 0.7s ease-in-out;
  }
  &:nth-of-type(3) {
    right: 0;
    transition: all 2s ease-in-out;
  }
}

@keyframes pulse-popup {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.pulse-animation {
  animation: pulse-popup 1.3s ease-in-out infinite both;
}

@keyframes banner-popup {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.banner-animation {
  animation: banner-popup 15s ease-in-out infinite both;
}

@keyframes scroll-popup {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.scroll-animation {
  animation: scroll-popup 0.5s ease-in-out infinite both;
  margin-top: 4rem;
}

/*---------------------------------- animation ends ----------------------------------*/

/*----------------------------------- Slick Slider starts -----------------------------------*/

.slick-slider {
  .slick-prev,
  .slick-next {
    z-index: 1;
    height: 5rem;
    width: 5rem;
    color: $white-color;
    &:before {
      display: none;
    }
    &:after {
      content: "";
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      height: 5rem;
      width: 5rem;
      top: 50%;
      transform: translateY(-50%);
      margin: auto;
      right: 0;
      left: 0;
    }
  }

  .slick-prev {
    left: 6rem;
    &:after {
      background-image: url("../assets/img/icon/chevron-left.png");
    }
  }

  .slick-next {
    right: 6rem;
    &:after {
      background-image: url("../assets/img/icon/chevron-right.png");
    }
  }
}
/*----------------------------------- Slick Slider Ends -----------------------------------*/

/*------------------------------------- Mcustom Starts ------------------------------------*/
/*-------------------------------------- Mcustom Ends -------------------------------------*/

/*-------------------------------------- Modal Starts -------------------------------------*/

/*--------------------------------------- Modal Ends --------------------------------------*/