@import "components/fonts_and_colors";

@media all and (min-width: 1800px) {
  html {
    font-size: 70% !important;
  }
  .custom-container {
    padding-inline: 8rem !important;
  }
}
@media all and (min-width: 2400px) {
  html {
    font-size: 80% !important;
  }
  .custom-container {
    padding-inline: 12rem !important;
  }
  #footer-wrapper {
    .footer-section {
      .image-container {
        .custom-container {
          padding: 26rem 6rem 8rem 6rem;
        }
      }
    }
  }
}
@media all and (min-width: 3000px) {
  html {
    font-size: 90% !important;
  }
}
@media all and (min-width: 3600px) {
  html {
    font-size: 100% !important;
  }
}

@media all and (max-width: 1800px) {
  $f1: 16px;

  $f2: 16px;

  $f3: 18px;

  $f4: 18px;

  $f5: 26px;

  $f6: 28px;

  $f7: 28px;

  $f8: 30px;

  $f9: 36px;

  $f10: 32px;

  $f11: 32px;

  $f12: 40px;

  $f13: 42px;

  $f14: 44px;

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

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

  /*--------------------------------- Header Wrapper Starts ---------------------------------*/
  #header-wrapper {
    .custom-container {
      &.no-top-bottom-padding {
        .navbar-container {
          .nav-container {
            .nav-content {
              & > ul {
                & > li {
                  & > a {
                    &:hover {
                      text-decoration: none;
                    }
                  }
                  &.submenu-container {
                    &:hover {
                      ul.dropdown-menu-own {
                        min-width: 250px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    &.nav-scroll {
      position: fixed;
      background-color: #2d2e3182;
      animation: slide-down 0.7s;
      transition: all 0.5s ease-in-out;
    }
  }
  /*--------------------------------- Header Wrapper Starts ---------------------------------*/

  /*-------------------------------- Content Wrapper Starts ---------------------------------*/
  #homepage {
    .menu-section {
      .custom-container {
        .menu-container {
          .column-1 {
            .section-accordion {
              ul {
                li {
                  .uk-accordion-title {
                    font-size: $f4;
                  }
                  .uk-accordion-content {
                    .section-menu-item {
                      ul {
                        li {
                          .common-icon-button {
                            button {
                              padding: 20px;
                              margin-right: 30px;
                              span {
                                font-size: $f4;
                              }
                            }
                          }
                        }
                        li {
                          h5 {
                            font-size: $f5;
                          }
                          p {
                            font-size: $f4;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          .column-2 {
            .background-color {
              h5 {
                font-size: $f2;
              }
            }
          }
        }
      }
    }
    .feature-section {
      .custom-container {
        .feature-container {
          .column-1 {
            .like-container {
              ul {
                li:nth-of-type(3) {
                  font-size: $f4;
                }
              }
            }
          }
          .column-2 {
            .row {
              .sub-column-1 {
                ul {
                  li:nth-of-type(2) {
                    font-size: $f3;
                  }
                }
              }
              .sub-column-2 {
                ul {
                  li:nth-of-type(2) {
                    font-size: $f3;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  #gallery-page {
    .gallery-section {
      .custom-container {
        .gallery-container {
          .heading-container {
            h1 {
              font-size: $f13;
            }
          }
          .filter-title-container {
            h2 {
              font-size: $f4;
              &:first-of-type {
                margin-left: 40px;
              }
            }
            .arrow-container {
              i {
                font-size: 30px;
              }
            }
          }
          .images-container {
            .column-1 {
              .image-container {
                .hover-caption-container {
                  h2 {
                    font-size: $f5;
                  }
                  p {
                    font-size: $f4;
                  }
                }
              }
            }
            .column-2 {
              .row-1-container {
                .image-container {
                  .hover-caption-container {
                    h2 {
                      font-size: $f5;
                    }
                    p {
                      font-size: $f4;
                    }
                  }
                }
              }
              .row-2-container {
                .image-container {
                  .hover-caption-container {
                    h2 {
                      font-size: $f5;
                    }
                    p {
                      font-size: $f4;
                    }
                  }
                }
              }
            }
            .column-3 {
              .row-1-container {
                .image-container {
                  position: relative;
                  .hover-caption-container {
                    h2 {
                      font-size: $f5;
                    }
                    p {
                      font-size: $f4;
                    }
                  }
                }
              }
              .row-2-container {
                .image-container {
                  .hover-caption-container {
                    h2 {
                      font-size: $f5;
                    }
                    p {
                      font-size: $f4;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

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

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

  /*----------------------------------- Components Starts -----------------------------------*/
  .common-search-section {
    .custom-container {
      .search-container {
        .section-title {
          h2 {
            font-size: $f4;
          }
        }
        .form-container {
          .form-inputs {
            .form-input {
              &::placeholder {
                font-size: $f3;
              }
            }
          }
        }
      }
    }
  }

  .common-facilities-container {
    h4 {
      font-size: $f4;
    }
  }

  .common-heading-container {
    &.no-margin {
      margin: 0;
    }
  }

  /*------------------------------------ Components Ends ------------------------------------*/

  /*---------------------------------- Slick Slider Starts ----------------------------------*/
  /*----------------------------------- Slick Slider Ends -----------------------------------*/

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

@media all and (max-width: 1600px) {
  $f1: 16px;
  $f2: 14px;
  $f3: 16px;
  $f4: 16px;
  $f5: 24px;
  $f6: 22px;
  $f7: 26px;
  $f8: 24px;
  $f9: 36px;
  $f10: 32px;
  $f11: 32px;
  $f12: 40px;
  $f13: 26px;
  $f14: 44px;
  /*------------------------------------ Site Wide Starts -----------------------------------*/
  /*------------------------------------- Site Wide Ends ------------------------------------*/

  /*--------------------------------- Header Wrapper Starts ---------------------------------*/
  #header-wrapper {
    .custom-container {
      &.no-top-bottom-padding {
        .navbar-container {
          .nav-container {
            .nav-content {
              & > ul {
                & > li {
                  & > a {
                    &:hover {
                      text-decoration: none;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    &.nav-scroll {
      position: fixed;
      background-color: #2d2e3182;
      animation: slide-down 0.7s;
      transition: all 0.5s ease-in-out;
    }
  }
  #about-page {
    .video-section {
      .custom-container {
        padding: 0;
      }
    }
  }

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

  /*-------------------------------- Content Wrapper Starts ---------------------------------*/
  #homepage {
    .menu-section {
      .custom-container {
        .menu-container {
          .column-1 {
            .section-accordion {
              ul {
                li {
                  .uk-accordion-title {
                    font-size: $f4;
                  }
                  .uk-accordion-content {
                    .section-menu-item {
                      ul {
                        li {
                          .common-icon-button {
                            button {
                              padding: 20px;
                              margin-right: 30px;
                              span {
                                font-size: $f4;
                              }
                            }
                          }
                        }
                        li {
                          h5 {
                            font-size: $f5;
                          }
                          p {
                            font-size: $f4;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          .column-2 {
            .background-color {
              h5 {
                font-size: $f2;
              }
            }
          }
        }
      }
    }
    .feature-section {
      .custom-container {
        .feature-container {
          .column-1 {
            .like-container {
              ul {
                li:nth-of-type(3) {
                  font-size: $f4;
                }
              }
            }
          }
          .column-2 {
            .row {
              .sub-column-1 {
                ul {
                  li:nth-of-type(2) {
                    font-size: $f3;
                  }
                }
              }
              .sub-column-2 {
                ul {
                  li:nth-of-type(2) {
                    font-size: $f3;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #gallery-page {
    .gallery-section {
      .custom-container {
        .gallery-container {
          .heading-container {
            h1 {
              font-size: $f13;
            }
          }
          .filter-title-container {
            h2 {
              font-size: $f4;
              padding: 20px 40px;
              margin-right: 40px;
              &:first-of-type {
                margin-left: 40px;
              }
            }
            .arrow-container {
              height: 60px;
              width: 60px;
              i {
                font-size: 30px;
              }
            }
          }
          .images-container {
            .column-1 {
              .image-container {
                .hover-caption-container {
                  padding: 34px 20px;
                  h2 {
                    font-size: $f5;
                    margin: 0 0 10px 0;
                  }
                  p {
                    font-size: $f4;
                  }
                }
              }
            }
            .column-2 {
              .row-1-container {
                .image-container {
                  .hover-caption-container {
                    h2 {
                      font-size: $f5;
                    }
                    p {
                      font-size: $f4;
                    }
                  }
                }
              }
              .row-2-container {
                .image-container {
                  .hover-caption-container {
                    h2 {
                      font-size: $f5;
                    }
                    p {
                      font-size: $f4;
                    }
                  }
                }
              }
            }
            .column-3 {
              .row-1-container {
                .image-container {
                  position: relative;
                  .hover-caption-container {
                    h2 {
                      font-size: $f5;
                    }
                    p {
                      font-size: $f4;
                    }
                  }
                }
              }
              .row-2-container {
                .image-container {
                  .hover-caption-container {
                    h2 {
                      font-size: $f5;
                    }
                    p {
                      font-size: $f4;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

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

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

  /*----------------------------------- Components Starts -----------------------------------*/
  .common-search-section {
    .custom-container {
      .search-container {
        .section-title {
          h2 {
            font-size: $f4;
          }
        }
        .form-container {
          .form-inputs {
            .form-input {
              height: 44px;
              width: 200px;
              margin-right: 26px;
              &::placeholder {
                font-size: $f3;
              }
            }
          }
        }
      }
    }
  }

  .common-section-title {
    h1 {
      font-size: $f13;
    }
  }

  .common-facilities-container {
    h4 {
      font-size: $f4;
      margin-top: 10px;
    }
  }

  .common-heading-container {
    &.no-margin {
      margin: 0;
    }
  }

  /*------------------------------------ Components Ends ------------------------------------*/

  /*---------------------------------- Slick Slider Starts ----------------------------------*/
  /*----------------------------------- Slick Slider Ends -----------------------------------*/

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

@media all and (max-width: 1400px) {
  $f1: 14px;
  $f2: 14px;
  $f3: 13px;
  $f4: 14px;
  $f5: 24px;
  $f6: 18px;
  $f7: 26px;
  $f8: 25px;
  $f9: 36px;
  $f10: 32px;
  $f11: 32px;
  $f12: 40px;
  $f13: 26px;
  $f14: 44px;

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

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

  /*--------------------------------- Header Wrapper Starts ---------------------------------*/
  #header-wrapper {
    .custom-container {
      &.no-top-bottom-padding {
        .navbar-container {
          .nav-container {
            .nav-content {
              & > ul {
                & > li {
                  & > a {
                    &:hover {
                      text-decoration: none;
                    }
                  }
                  &.submenu-container {
                    &:hover {
                      ul.dropdown-menu-own {
                        min-width: 197px;
                      }
                    }
                  }
                  ul.dropdown-menu-own {
                    &::after {
                      right: 161px !important;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  /*--------------------------------- Header Wrapper Starts ---------------------------------*/

  /*-------------------------------- Content Wrapper Starts ---------------------------------*/
  #homepage {
    .menu-section {
      .custom-container {
        .menu-container {
          .column-1 {
            .section-accordion {
              ul {
                li {
                  .uk-accordion-title {
                    font-size: $f4;
                  }
                  .uk-accordion-content {
                    .section-menu-item {
                      ul {
                        li {
                          .common-icon-button {
                            button {
                              padding: 20px;
                              margin-right: 30px;
                              span {
                                font-size: $f4;
                              }
                            }
                          }
                        }
                        li {
                          h5 {
                            font-size: $f5;
                          }
                          p {
                            font-size: $f4;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          .column-2 {
            .background-color {
              h5 {
                font-size: $f2;
              }
            }
          }
        }
      }
    }
    .feature-section {
      .custom-container {
        .feature-container {
          .column-1 {
            .like-container {
              ul {
                li:nth-of-type(2) {
                  .image-container {
                    height: 30px;
                    width: 30px;
                  }
                }
                li:nth-of-type(3) {
                  font-size: $f4;
                }
              }
            }
          }
          .column-2 {
            .row {
              .sub-column-1 {
                ul {
                  li:nth-of-type(2) {
                    font-size: $f3;
                  }
                }
              }
              .sub-column-2 {
                ul {
                  li:nth-of-type(2) {
                    font-size: $f3;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  #about-page {
    .about-section {
      .custom-container {
        .about-container {
          .section-content-container {
            .column-3 {
              width: 50%;
              .about-item-container {
                .icon-container {
                  border-radius: 50%;
                  padding: 10px;
                  .image-container {
                    height: 40px;
                    width: 40px;
                  }
                }
                .text-container {
                  .title-container {
                    h4 {
                      font-size: $f4;
                    }
                  }
                  .content-container {
                    p {
                      font-size: $f4;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #gallery-page {
    .gallery-section {
      .custom-container {
        .gallery-container {
          .heading-container {
            h1 {
              font-size: $f13;
            }
          }
          .filter-title-container {
            h2 {
              font-size: $f4;
              padding: 20px 40px;
              margin-right: 25px;
              &:first-of-type {
                margin-left: 40px;
              }
            }
            .arrow-container {
              height: 60px;
              width: 60px;
              i {
                font-size: 30px;
              }
            }
          }
          .images-container {
            .column-1 {
              .image-container {
                .hover-caption-container {
                  padding: 34px 20px;
                  h2 {
                    font-size: $f5;
                    margin: 0 0 10px 0;
                  }
                  p {
                    font-size: $f4;
                  }
                }
              }
            }
            .column-2 {
              .row-1-container {
                .image-container {
                  .hover-caption-container {
                    h2 {
                      font-size: $f5;
                    }
                    p {
                      font-size: $f4;
                    }
                  }
                }
              }
              .row-2-container {
                .image-container {
                  .hover-caption-container {
                    h2 {
                      font-size: $f5;
                    }
                    p {
                      font-size: $f4;
                    }
                  }
                }
              }
            }
            .column-3 {
              .row-1-container {
                .image-container {
                  position: relative;
                  .hover-caption-container {
                    h2 {
                      font-size: $f5;
                    }
                    p {
                      font-size: $f4;
                    }
                  }
                }
              }
              .row-2-container {
                .image-container {
                  .hover-caption-container {
                    h2 {
                      font-size: $f5;
                    }
                    p {
                      font-size: $f4;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

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

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

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

  /*---------------------------------- Slick Slider Starts ----------------------------------*/
  /*----------------------------------- Slick Slider Ends -----------------------------------*/

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

@media all and (max-width: 1200px) {
  html {
    font-size: 58% !important;
  }
  $f1: 14px;
  $f2: 13px;
  $f3: 13px;
  $f4: 14px;
  $f5: 24px;
  $f6: 18px;
  $f7: 22px;
  $f8: 14px;
  $f9: 36px;
  $f10: 32px;
  $f11: 32px;
  $f12: 40px;
  $f13: 26px;
  $f14: 44px;
  /*------------------------------------ Site Wide Starts -----------------------------------*/
  /*------------------------------------- Site Wide Ends ------------------------------------*/

  /*--------------------------------- Header Wrapper Starts ---------------------------------*/
  #header-wrapper {
    .custom-container {
      padding: 1rem 4rem;
      &.no-top-bottom-padding {
        .navbar-container {
          .logo-container {
            height: 10rem;
            width: 10rem;
          }
          .nav-container {
            .nav-content {
              & > ul {
                gap: 4rem;
                & > li {
                  & > a {
                    font-size: 1.4rem;
                    color: $white-color;
                    &:hover {
                      text-decoration: none;
                    }
                  }
                  &.submenu-container {
                    &:hover {
                      ul.dropdown-menu-own {
                        min-width: 19.8rem;
                      }
                    }
                  }
                  ul.dropdown-menu-own {
                    background-color: #2e2e2e;
                    min-width: 15rem;
                    &::after {
                      left: 11%;
                    }
                    & > li {
                      padding: 14px 12px;
                      & > a {
                        font-size: $f4;
                      }
                    }
                  }
                }
                .common-button-container {
                  a {
                    button {
                      i {
                        font-size: 1.4rem;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  /*--------------------------------- Header Wrapper Starts ---------------------------------*/

  /*-------------------------------- Content Wrapper Starts ---------------------------------*/
  #homepage {
    .service-section {
      .custom-container {
        .service-container {
          .common-section-subtitle {
            h2 {
              &:after {
                right: -28%;
              }
              &:before {
                left: -28%;
              }
            }
          }
          .section-content {
            .column-2 {
              .image-container {
                width: 333px;
                height: 552px;
              }
            }
          }
        }
      }
    }
    .places-section {
      .custom-container {
        padding: 6rem 4rem;
      }
    }
  }

  #about-page {
    .about-section {
      .custom-container {
        .about-container {
          .section-content-container {
            .column-1 {
              margin-right: 6rem;
            }
            .column-3 {
              width: 50%;
              .about-item-container {
                .icon-container {
                  border-radius: 50%;
                  padding: 10px;
                  .image-container {
                    height: 30px;
                    width: 30px;
                  }
                }
                .text-container {
                  .title-container {
                    h4 {
                      font-size: $f4;
                    }
                  }
                  .content-container {
                    p {
                      font-size: $f4;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #menu-page {
    .menu-section {
      .custom-container {
        .menu-slider {
          .menu-slider-item {
            .menu-container {
              .menu-items-container {
                .menu-item {
                  .price-section {
                    .price-line {
                      width: 68%;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .slick-slider {
      .slick-prev {
        &::after {
          left: -27px;
          bottom: -79px;
        }
      }
      .slick-next {
        &::after {
          left: -24px;
          bottom: -79px;
        }
      }
    }
  }

  #reservation-page {
    .room-details-section {
      .custom-container {
        .room-details-container {
          .column-1 {
            margin-right: 6.5rem;
          }
          .column-2 {
            .form-container {
              padding: 6rem 2rem;
              form {
                ul {
                  li {
                    .radio-label {
                      .line {
                        width: 3rem;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #gallery-page {
    .gallery-section {
      .custom-container {
        .gallery-container {
          .heading-container {
            h1 {
              font-size: $f13;
            }
          }
          .filter-title-container {
            margin-bottom: 60px;
            h2 {
              font-size: $f4;
              padding: 14px 24px;
              margin-right: 22px;
              &:first-of-type {
                margin-left: 40px;
              }
            }
            .arrow-container {
              height: 50px;
              width: 50px;
              i {
                font-size: 22px;
              }
            }
          }
          .images-container {
            .column-1 {
              .image-container {
                .hover-caption-container {
                  padding: 34px 20px;
                  h2 {
                    font-size: $f5;
                    margin: 0 0 10px 0;
                  }
                  p {
                    font-size: $f4;
                  }
                }
              }
            }
            .column-2 {
              .row-1-container {
                .image-container {
                  .hover-caption-container {
                    h2 {
                      font-size: $f5;
                    }
                    p {
                      font-size: $f4;
                    }
                  }
                }
              }
              .row-2-container {
                .image-container {
                  .hover-caption-container {
                    h2 {
                      font-size: $f5;
                    }
                    p {
                      font-size: $f4;
                    }
                  }
                }
              }
            }
            .column-3 {
              .row-1-container {
                .image-container {
                  position: relative;
                  .hover-caption-container {
                    h2 {
                      font-size: $f5;
                    }
                    p {
                      font-size: $f4;
                    }
                  }
                }
              }
              .row-2-container {
                .image-container {
                  .hover-caption-container {
                    h2 {
                      font-size: $f5;
                    }
                    p {
                      font-size: $f4;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .gallery {
      .custom-container {
        .gallery-menu-slider {
          &.slick-slider {
            .slick-prev {
              &::after {
                left: -26px;
                bottom: -78px;
              }
            }
            .slick-next {
              &::after {
                left: -23px;
                bottom: -78px;
              }
            }
          }
        }
      }
    }
  }
  /*--------------------------------- Content Wrapper Ends ----------------------------------*/

  /*--------------------------------- Footer Wrapper Starts ---------------------------------*/
  #footer-wrapper {
    .footer-section {
      .image-container {
        .custom-container {
          padding: 23rem 6rem 8rem 6rem;
        }
      }
    }

    .copyright-section {
      .custom-container {
        .copyright-container {
          .copyright-left {
            font-size: $f4;
          }
          .copyright-right {
            font-size: $f4;
          }
        }
      }
    }
  }
  /*---------------------------------- Footer Wrapper Ends ----------------------------------*/

  /*----------------------------------- Components Starts -----------------------------------*/
  .common-box-container {
    h2 {
      font-size: $f8;
      margin-bottom: 0;
    }
    p {
      font-size: $f4;
    }
    &::after {
      height: 10px;
      width: 19px;
    }
  }

  .common-search-section {
    .custom-container {
      .search-container {
        .section-title {
          h2 {
            font-size: $f4;
          }
        }
        .form-container {
          .form-inputs {
            .form-input {
              height: 37px;
              width: 152px;
              margin-right: 14px;
              &::placeholder {
                font-size: $f3;
              }
            }
          }
        }
      }
    }
  }
  .common-room-type-container {
    .column-1 {
      width: 55%;
    }
    .column-2 {
      width: 45%;
    }
  }

  /*------------------------------------ Components Ends ------------------------------------*/

  /*---------------------------------- Slick Slider Starts ----------------------------------*/
  .slick-slider {
    .slick-prev,
    .slick-next {
      height: 50px;
      width: 50px;
      &:after {
        height: 50px;
        width: 88px;
        margin: auto;
        right: 0;
        left: 0px;
      }
    }

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

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

@media all and (max-width: 991px) {
  html {
    font-size: 60%;
  }
  /*------------------------------------ Site Wide Starts -----------------------------------*/

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

  /*--------------------------------- Header Wrapper Starts ---------------------------------*/
  #header-wrapper {
    .custom-container {
      .navbar-container {
        .nav-container {
          display: none;
        }
      }
    }
  }
  .openbtn {
    display: unset;
  }
  /*--------------------------------- Header Wrapper Starts ---------------------------------*/

  /*-------------------------------- Content Wrapper Starts ---------------------------------*/
  #homepage {
    .display-room-section {
      .custom-container {
        .display-room-container {
          .card-container {
            flex-wrap: wrap;
            justify-content: center;
            gap: 6rem;
            .card-item {
              width: 52%;
              &:not(:last-of-type) {
                margin-right: 0;
              }
            }
          }
        }
      }
    }

    .menu-section {
      .custom-container {
        .menu-container {
          flex-wrap: wrap;
          .column-1 {
            margin-right: 0;
          }
          .column-2 {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
          }
          // .column-2 {
          //   margin-top: 16rem;
          //   .background-color {
          //     width: 87vw;
          //     height: 39rem;
          //     .main-image-container {
          //       height: 42rem;
          //       width: 87%;
          //     }
          //     .images-container {
          //       display: none;
          //     }
          //     .gallery-link {
          //       bottom: 2rem;
          //       font-size: 1.8rem;
          //     }
          //   }
          // }
        }
      }
    }

    .feature-section {
      .custom-container {
        .feature-container {
          flex-wrap: wrap;
          .column-1 {
            order: 2;
            width: 100%;
            display: flex;
            justify-content: center;
            .like-container {
              left: 39%;
            }
          }
          .column-2 {
            width: 100%;
            .row {
              .sub-column-1 {
                ul {
                  li:nth-of-type(1) {
                    margin-right: -10px;
                    .image-container {
                      height: 30px;
                      width: 30px;
                      margin-right: 13px;
                    }
                  }
                }
              }
              .sub-column-2 {
                ul {
                  li:nth-of-type(1) {
                    margin-right: -10px;
                    .image-container {
                      height: 30px;
                      width: 30px;
                      margin-right: 13px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .places-section {
      .custom-container {
        .places-container {
          .section-content {
            flex-wrap: wrap;
            gap: 6rem;
            .item {
              flex-basis: 100%;
              img {
                max-width: 33rem !important;
                margin-inline: auto;
                width: 100%;
                display: flex;
              }
            }
          }
        }
      }
    }
  }

  #about-page {
    .about-section {
      .custom-container {
        .about-container {
          .section-content-container {
            .column-2 {
              .images-container {
                .image-1-container {
                  height: 35rem;
                  width: 37rem;
                  .image-2-container {
                    height: 22rem;
                    width: 29rem;
                    right: -29%;
                  }
                  .image-3-container {
                    height: 24rem;
                    width: 29rem;
                  }
                }
              }
            }
          }
        }
      }
    }
    .offers-section {
      .custom-container {
        .offers-container {
          flex-wrap: wrap;
          .left-content {
            flex-basis: 100%;
            h3 {
              max-width: 100%;
            }
          }
        }
      }
    }
    .details-section {
      .custom-container {
        .details-container {
          flex-wrap: wrap;
          .left-content {
            flex-basis: 100%;
            h3 {
              max-width: 100%;
            }
          }
          .right-content {
            flex-basis: 100%;
            .contact-section {
              flex-wrap: wrap;
              gap: 4rem;
              .item {
                flex-basis: 100%;
              }
            }
          }
        }
      }
    }
  }

  #founder-message-page {
    .founder-message-section {
      .custom-container {
        .founder-message-container {
          .message-section {
            flex-wrap: wrap;
            gap: 0rem;
            p {
              &.first-paragraph {
                flex-basis: 100%;
              }
              &.second-paragraph {
                flex-basis: 100%;
              }
            }
          }
        }
      }
    }
  }

  #menu-page {
    .menu-section {
      .custom-container {
        .menu-slider {
          .menu-slider-item {
            .menu-container {
              .menu-items-container {
                .menu-item {
                  flex-basis: 100%;
                  margin-bottom: 5rem;
                }
              }
            }
          }
        }
      }
    }

    .slick-slider {
      .slick-prev,
      .slick-next {
        top: 7%;
      }
    }
  }

  #reservation-page {
    .room-details-section {
      .custom-container {
        .room-details-container {
          flex-wrap: wrap;
          .column-1 {
            width: 100%;
            margin-top: 2rem;
            margin-right: 0;
          }
          .column-2 {
            width: 100%;
            margin-top: 4rem;
          }
        }
      }
    }
  }

  #contact-page {
    .contact-section {
      margin-top: 0;
      .custom-container {
        padding: 0;
        .contact-container {
          flex-wrap: wrap;
          .contact-us-container {
            width: 100%;
          }
          .form-container {
            width: 100%;
          }
        }
      }
    }
  }

  #room-type-page {
    .room-type-section-1 {
      .custom-container {
        padding: 4rem 6rem;
      }
    }
    .room-type-section-2 {
      .custom-container {
        padding: 4rem 6rem;
      }
    }
    .room-type-section-3 {
      .custom-container {
        padding: 4rem 6rem;
      }
    }
  }
  /*--------------------------------- Content Wrapper Ends ----------------------------------*/

  /*--------------------------------- Footer Wrapper Starts ---------------------------------*/
  #footer-wrapper {
    .footer-section {
      .image-container {
        .custom-container {
          .footer-container {
            flex-wrap: wrap;
          }
        }
      }
    }
  }
  /*---------------------------------- Footer Wrapper Ends ----------------------------------*/
  /*----------------------------------- Components Starts -----------------------------------*/

  .common-banner-section2 {
    .swiper {
      .swiper-wrapper {
        .swiper-slide {
          .banner-content {
            .section-title {
              h1 {
                font-size: 6rem;
              }
            }
            
            .section-content-banner {
              span {
                width: 25rem;
                &:after {
                  width: 25rem;
                }
              }
            }
          }
        }
      }
    }
  }

  .common-room-type-container {
    flex-wrap: wrap;
    .column-1 {
      width: 100%;
    }
    .column-2 {
      width: 100%;
    }
  }
  /*------------------------------------ Components Ends ------------------------------------*/

  /*---------------------------------- Slick Slider Starts ----------------------------------*/
  /*----------------------------------- Slick Slider Ends -----------------------------------*/

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

@media all and (max-width: 768px) {
  $f1: 14px;
  $f2: 13px;
  $f3: 13px;
  $f4: 13px;
  $f5: 24px;
  $f6: 18px;
  $f7: 18px;
  $f8: 14px;
  $f9: 36px;
  $f10: 32px;
  $f11: 20px;
  $f12: 40px;
  $f13: 26px;
  $f14: 44px;
  .custom-container {
    padding: 40px 20px;
  }
  /*------------------------------------ Site Wide Starts -----------------------------------*/
  /*------------------------------------- Site Wide Ends ------------------------------------*/

  /*--------------------------------- Header Wrapper Starts ---------------------------------*/
  #header-wrapper {
    .custom-container {
      padding: 1rem 2rem;
      &.no-top-bottom-padding {
        .navbar-container {
          .logo-container {
            height: 8.5rem;
            width: 8.5rem;
          }
        }
      }
    }
    &.nav-scroll {
      .custom-container {
        &.no-top-bottom-padding {
          .navbar-container {
            .logo-container {
              height: 6.5rem;
              width: 6.5rem;
            }
          }
        }
      }
    }
  }
  /*--------------------------------- Header Wrapper Starts ---------------------------------*/

  /*-------------------------------- Content Wrapper Starts ---------------------------------*/
  body {
    &.normal {
      #about-page {
        .about-section {
          .custom-container {
            .about-container {
              .section-content-container {
                .column-2 {
                  display: none;
                }
                .column-3 {
                  right: 0;
                  transition: all 0.4s ease-in-out;
                  display: unset;
                }
              }
            }
          }
        }
      }
    }
  }
  #homepage {
    .display-room-section {
      .custom-container {
        padding: 40px 20px;
        .display-room-container {
          .card-container {
            flex-wrap: wrap;
            .card-item {
              width: 100%;
              max-width: 430px;
              &:not(:last-of-type) {
                margin-right: 0;
              }
              .row1-container {
                .text-container {
                  h3 {
                    font-size: $f4;
                  }
                }
              }
              .row2-container {
                padding: 2rem;
                ul {
                  li {
                    font-size: $f4;
                  }
                }
              }
              .row3-container {
                ul {
                  flex-wrap: wrap;
                }
              }
            }
          }
        }
      }
    }
    .menu-section {
      .custom-container {
        .menu-container {
          .column-1 {
            .section-title {
              h1 {
                font-size: 2.4rem;
              }
            }
          }
        }
      }
    }
    .feature-section {
      .custom-container {
        .feature-container {
          .column-1 {
            .like-container {
              left: 37%;
            }
          }
          .column-2 {
            .section-title {
              h1 {
                font-size: 2.4rem;
              }
            }
          }
        }
      }
    }
    .service-section {
      .custom-container {
        .service-container {
          .section-content {
            flex-wrap: wrap;
            margin-top: 4rem;
            .column-1 {
              margin-inline: auto;
              .common-box-container {
                margin-bottom: 3rem;
                text-align: center;
                &.text-right {
                  text-align: center;
                }
                &.text-left {
                  text-align: center;
                }
                &::after {
                  display: none;
                }
              }
            }
            .column-2 {
              display: none;
            }
          }
        }
      }
    }
    .places-section {
      .custom-container {
        padding: 6rem 2rem;
      }
    }
  }

  #about-page {
    .about-section {
      .custom-container {
        .about-container {
          .common-heading-container {
            margin-bottom: 2rem;
          }
          .section-content-container {
            flex-wrap: wrap;
            .column-1 {
              width: 100%;
              margin-right: 0;
              p {
                font-size: $f4;
              }
              button {
                font-size: $f4;
              }
            }
            .column-2 {
              width: 100%;
              .images-container {
                margin-top: 3rem;
                .image-1-container {
                  height: 100%;
                  width: 100%;
                  position: unset;
                  .image-2-container {
                    height: 100%;
                    width: 100%;
                    position: unset;
                    top: 0;
                    right: 0;
                  }
                  .image-3-container {
                    height: 100%;
                    width: 100%;
                    position: unset;
                    bottom: 0;
                    right: 0;
                  }
                }

                .text-container {
                  display: none;
                  span {
                    font-size: 78px;
                  }
                }
              }
            }
            .column-3 {
              width: 100%;
              margin-left: 0;
              margin-top: 4rem;
              .about-item-container {
                justify-content: flex-start;
                .icon-container {
                  border-radius: 50%;
                  padding: 15px;
                  margin-right: 20px;
                  .image-container {
                    height: 30px;
                    width: 30px;
                  }
                }
                .text-container {
                  .title-container {
                    h4 {
                      font-size: $f4;
                    }
                  }
                  .content-container {
                    p {
                      font-size: $f4;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .video-section {
      .custom-container {
        .video-container {
          .image-container {
            flex-wrap: wrap;
            gap: 0rem;
            padding: 7rem 2rem 6rem;
            .title-container {
              padding: 0 2rem;
              h4 {
                font-size: 1.7rem;
              }
              h2 {
                font-size: 3.6rem;
              }
            }
            .icon-container {
              margin-inline: auto;
              button {
                height: 12rem;
                width: 12rem;
                a {
                  .image-container {
                    height: 4rem;
                    width: 4rem;
                    padding-left: 0.5rem;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #menu-page {
    .menu-section {
      .custom-container {
        .menu-slider {
          .menu-slider-item {
            .menu-container {
              .heading-container {
                .title-container {
                  h1 {
                    font-size: 2.4rem;
                  }
                }
              }
              .menu-images-container {
                .menu-images-item {
                  flex-basis: 100%;
                  &:not(:first-of-type) {
                    display: none;
                  }
                  .img-container {
                    display: flex;
                    justify-content: center;
                  }
                }
              }
            }
          }
        }
      }
    }

    .slick-slider {
      .slick-prev,
      .slick-next {
        display: block;
        top: 7%;
        &::after {
          display: block;
          bottom: -46px;
          font-size: 2.8rem;
        }
      }
      .slick-prev {
        left: 3rem;
      }
      .slick-next {
        right: 3rem;
      }
    }
  }

  #room-type-page {
    .room-type-section-1 {
      .custom-container {
        padding: 4rem 2rem;
      }
    }
    .room-type-section-2 {
      .custom-container {
        padding: 4rem 2rem;
      }
    }
    .room-type-section-3 {
      .custom-container {
        padding: 4rem 2rem;
      }
    }
  }

  #reservation-page {
    .room-details-section {
      .custom-container {
        padding: 6rem 2rem;
        .room-details-container {
          .column-1 {
            .title-container {
              h1 {
                font-size: 2.1rem;
              }
            }
          }
          .column-2 {
            .form-container {
              .title-container {
                h2 {
                  font-size: 2rem;
                }
              }
              form {
                label {
                  font-size: 1.6rem;
                }
                input {
                  font-size: 1.6rem;
                }
                h2,
                h3 {
                  font-size: 2rem;
                }
                h1 {
                  font-size: 2.5rem;
                }
              }
            }
          }
        }
      }
    }
  }

  #events-page {
    .modal {
      .modal-content {
        padding: 2rem 2rem 6rem;
        .close {
          font-size: 3rem;
          top: 0px;
          right: 10px;
        }
      }
    }
    .event-booking-form {
      h2 {
        font-size: 2.4rem;
      }
    }
  }
  #event-booking-page {
    background-color: $light-gray;
    .event-booking-section {
      .custom-container {
        .event-booking-form {
          padding: 8rem 2rem;
          h2 {
            font-size: 2.2rem;
          }
        }
      }
    }
  }

  #gallery-page {
    .gallery {
      .custom-container {
        padding: 6rem 2rem;
        .gallery-menu-slider {
          &.slick-slider {
            .slick-prev,
            .slick-next {
              display: block;
              &::after {
                display: block;
              }
            }
            .slick-prev {
              left: 3rem;
            }
            .slick-next {
              right: 3rem;
            }
          }
        }
      }
    }
  }

  #contact-page {
    .contact-section {
      .custom-container {
        .contact-container {
          .contact-us-container {
            padding: 6rem 2rem;
          }
          .form-container {
            padding: 6rem 2rem;
            form {
              input,
              textarea {
                font-size: 1.5rem;
                margin-bottom: 4rem;
              }
            }
            button {
              font-size: 1.6rem;
            }
          }
        }
      }
    }
  }

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

  /*--------------------------------- Footer Wrapper Starts ---------------------------------*/
  #footer-wrapper {
    .footer-section {
      .image-container {
        .custom-container {
          padding: 15rem 2rem 6rem;
          .footer-container {
            gap: 2rem;
            .column-1 {
              width: 100%;
              .image-container {
                margin-left: 0;
              }
              p {
                margin: 2rem 0 0 0;
              }
            }
            .column-2 {
              width: 100%;
              margin-left: 0;
              ul {
                margin-top: 2rem;
              }
            }
            .column-3 {
              width: 100%;
              ul {
                margin-top: 2rem;
              }
            }
            .column-4 {
              width: 100%;
              ul {
                margin-top: 2rem;
              }
            }
          }
        }
      }
    }

    .copyright-section {
      .custom-container {
        padding: 30px 20px;
        .copyright-container {
          flex-wrap: wrap;
          justify-content: center;
          text-align: center;
          .copyright-left {
            font-size: 12px;
            margin-bottom: 15px;
            flex-basis: 100%;
          }
          .copyright-right {
            font-size: 12px;
            flex-basis: 100%;
          }
        }
      }
    }
  }
  /*---------------------------------- Footer Wrapper Ends ----------------------------------*/

  /*----------------------------------- Components Starts -----------------------------------*/
  .common-banner-section {
    .common-banner-slider {
      .banner-item {
        .image-container {
          .custom-container {
            .inner {
              .banner-content {
                .section-title {
                  h1 {
                    font-size: 5rem;
                  }
                }

                .section-content-banner {
                  span {
                    width: 18rem;
                    &:after {
                      width: 18rem;
                    }
                  }

                  p {
                    &.upper {
                      // padding: 1.9rem 5.2rem 1.5rem 5.2rem;
                    }
                  }
                }
                .section-content {
                  p {
                    font-size: 1.5rem;
                  }
                }
                .icon-container {
                  i {
                    font-size: 2.1rem;
                  }
                }
              }
            }
          }
        }
      }
    }

    .swiper {
      .swiper-wrapper {
        .swiper-slide {
          .banner-content {
            .section-title {
              h1 {
                font-size: 8rem;
                letter-spacing: 5rem;
                margin-left: 5rem;
              }
            }

            .section-content-banner {
              span {
                width: 17rem;
                &:after {
                  content: "";
                  width: 17rem;
                }
              }
            }

            p {
              font-size: 1.9rem;
              &.upper {
                margin: 0 3rem 0 3rem;
              }
            }
          }
          .section-content {
            p {
              font-size: 1.6rem;
            }
          }
        }
      }
    }
  }

  .common-banner-section2 {
    .swiper {
      .swiper-wrapper {
        .swiper-slide {
          .banner-content {
            .section-title {
              h1 {
                font-size: 5rem;
              }
            }
            .section-content-banner {
              span {
                width: 18rem;
                &:after {
                  width: 18rem;
                }
              }
              p {
                &.upper {
                  // padding: 1.9rem 5.2rem 1.5rem 5.2rem;
                }
              }
            }
          }
          .scroll-for-more-section {
            .section-content {
              p {
                font-size: 1.5rem;
              }
            }
            .icon-container {
              i {
                font-size: 2.1rem;
              }
            }
          }
        }
      }
    }
  }

  .common-heading-container {
    .common-section-subtitle {
      h2 {
        font-size: 1.4rem;
        letter-spacing: 0.3rem;
      }
    }
    .common-section-title {
      h1 {
        font-size: 2.1rem;
      }
    }
  }
  .common-search-section {
    .search-container {
      .section-title {
        h2 {
          font-size: $f4;
        }
      }
      .form-container {
        flex-wrap: wrap;
        align-items: center;
        flex-direction: column;
        .form-inputs {
          flex-wrap: wrap;
          gap: 1rem;
          .input-item {
            flex-basis: 100%;
            .form-input {
              margin-bottom: 1rem;
              margin-right: 0;
              &::placeholder {
                font-size: $f3;
              }
            }
          }
        }
      }
    }
  }
  .common-icon-button {
    .search-btn {
      display: none;
    }
    .search2-btn {
      display: block;
    }
  }
  .common-footer-title {
    &::before {
      content: "";
    }
  }

  .common-card-container {
    .title-container {
      h1 {
        text-align: center;
        &::after {
          bottom: -50%;
          left: 47%;
        }
      }
    }
    .card-items-container {
      flex-direction: column;
      align-items: center;
      .card-item {
        text-align: center;
        .card-caption-container {
          .card-days-container {
            display: flex;
            justify-content: center;
          }
        }
      }
    }
  }

  .common-arrow-container {
    height: 4rem;
    width: 4rem;
    i {
      font-size: 1.5rem;
    }
  }
  /*------------------------------------ Components Ends ------------------------------------*/

  /*---------------------------------- Slick Slider Starts ----------------------------------*/
  .slick-slider {
    .slick-prev,
    .slick-next {
      display: none;
      &:before {
        display: none;
      }
      &:after {
        display: none;
      }
    }

    .slick-prev {
      left: 60px;
      &:after {
        display: none;
      }
    }

    .slick-next {
      right: 60px;
      &:after {
        display: none;
      }
    }
  }
  /*----------------------------------- Slick Slider Ends -----------------------------------*/

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

@media all and (max-width: 600px) {

  #menu-page {
    .menu-section {
      .custom-container {
        .menu-container {
          .menu-items-container {
            .column {
              .menu-item-container {
                .price-container {
                  span {
                    width: 72%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .common-banner-section2 {
    .swiper {
      .swiper-wrapper {
        .swiper-slide {
          .banner-content {
            .section-title {
              h1 {
                font-size: 5rem;
                letter-spacing: 0.3rem;
              }
            }
            .section-content-banner {
              span {
                width: 14rem;
                &:after {
                  width: 14rem;
                }
              }
            }
          }
        }
      }
    }
  }

}

@media all and (max-width: 540px) {
  #homepage {
    .menu-section {
      .custom-container {
        .menu-container {
          .column-2 {
            .background-color {
              width: 100%;
              height: 20rem;
              background-color: transparent;
              .main-image-container {
                width: 100%;
                left: 0;
              }
              .images-container {
                display: none;
              }
              .gallery-link {
                display: none;
              }
            }
          }
        }
      }
    }

    .feature-section {
      .custom-container {
        .feature-container {
          .column-1 {
            .image-container {
              &:first-of-type {
                display: none;
              }
              &:nth-of-type(2) {
                width: 100%;
              }
              &:nth-of-type(3) {
                display: none;
              }
            }
            .like-container {
              left: 4%;
              bottom: 6%;
              width: 85%;
              ul {
                li {
                  &:nth-of-type(2) {
                    .image-container {
                      display: block;
                    }
                  }
                }
              }
            }
          }
          .column-2 {
            .row-item {
              flex-direction: column;
              gap: 0;
              .sub-column-2 {
                ul {
                  padding-left: 0;
                }
              }
            }
          }
        }
      }
    }
  }

  .common-banner-section {
    .swiper {
      .swiper-wrapper {
        .swiper-slide {
          .banner-content {
            .section-title {
              h1 {
                font-size: 6rem;
                letter-spacing: 4.3rem;
                margin-left: 4rem;
              }
            }

            .section-content-banner {
              span {
                width: 12rem;
                &:after {
                  content: "";
                  width: 12rem;
                }
              }
            }

            p {
              font-size: 1.8rem;
            }
          }
          .section-content {
            margin-top: 6rem;
            p {
              font-size: 1.5rem;
            }
          }
          .icon-container {
            i {
              font-size: 2rem;
            }
          }
        }
      }
    }
  }
  
  .common-banner-section2 {
    .swiper {
      .swiper-wrapper {
        .swiper-slide {
          .banner-content {
            .section-title {
              margin: 1rem 0;
            }
          }
        }
      }
    }
  }
}

@media all and (max-width: 500px) {
  #about-page {
    .video-section {
      .custom-container {
        .video-container {
          .image-container {
            .title-container {
              h4 {
                font-size: 1.5rem;
              }
              h2 {
                font-size: 3.2rem;
              }
            }
            .icon-container {
              button {
                height: 8.5rem;
                width: 8.5rem;
                a {
                  .image-container {
                    height: 2.5rem;
                    width: 2.5rem;
                    padding-left: 0.5rem;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #founder-message-page {
    .founder-message-section {
      .custom-container {
        .founder-message-container {
          .profile-section {
            .left-content {
              img {
                width: 10rem;
              }
            }
            .right-content {
              p {
                &.name {
                  font-size: 1.6rem;
                  line-height: 1.4;
                }
                &.title {
                  font-size: 1.5rem;
                  margin-top: 0px;
                }
              }
            }
          }
        }
      }
    }
  }

  #menu-page {
    .menu-section {
      .custom-container {
        padding: 40px 10px;
        .menu-container {
          padding: 6rem 1rem;
          .menu-items-container {
            .column {
              .menu-item-container {
                .price-container {
                  span {
                    width: 68%;
                  }
                }
              }
            }
          }
        }
      }
    }
    .slick-slider {
      .slick-prev,
      .slick-next {
        top: 6%;
      }
    }
  }
  #reservation-page {
    .room-details-section {
      .custom-container {
        .room-details-container {
          .column-1 {
            .images-container {
              .image-item {
                width: 100%;
              }
            }
          }
          .column-2 {
            .form-container {
              padding: 6rem 1rem;
              form {
                ul {
                  li {
                    .radio-label {
                      .line {
                        width: 2rem;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .common-banner-section {
    .common-banner-slider {
      .banner-item {
        .image-container {
          .custom-container {
            .inner {
              .banner-content {
                .section-title {
                  h1 {
                    font-size: 3.2rem;
                    letter-spacing: 0.1rem;
                  }
                }

                .section-content-banner {
                  span {
                    width: 6.2rem;
                    &:after {
                      width: 6.2rem;
                    }
                  }
                  p {
                    font-size: 1.7rem;
                    padding: 1rem 2rem 1rem 2rem;
                    &.upper {
                      padding: 1.9rem 3.8rem 1.5rem 3.8rem;
                    }
                  }
                }

                .section-content {
                  p {
                    font-size: 1.4rem;
                  }
                }

                .icon-container {
                  i {
                    font-size: 1.8rem;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .common-banner-section2 {
    .swiper {
      .swiper-wrapper {
        .swiper-slide {
          .banner-content {
            .section-title {
              margin: 1rem 0;
              h1 {
                font-size: 3.2rem;
                letter-spacing: 0.1rem;
              }
            }
            .section-content-banner {
              span {
                width: 6.2rem;
                &:after {
                  width: 6.2rem;
                }
              }
              p {
                font-size: 1.7rem;
                padding: 1rem 2rem 1rem 2rem;
                &.upper {
                  padding: 1.9rem 3.8rem 1.5rem 3.8rem;
                }
              }
            }
          }
          .scroll-for-more-section {
            .section-content {
              p {
                font-size: 1.4rem;
              }
            }

            .icon-container {
              i {
                font-size: 1.8rem;
              }
            }
          }
        }
      }
    }
  }

  .common-room-type-container {
    .column-2 {
      padding: 4rem 1rem;
    }
  }
  .common-facilities-container {
    ul {
      li {
        flex-basis: 46%;
      }
    }
  }
  .common-card-container {
    .title-container {
      h1 {
        &::after {
          left: 45%;
        }
      }
    }
  }
}

@media all and (max-width: 400px) {
  #homepage {
    .menu-section {
      .custom-container {
        .menu-container {
          .column-1 {
            .section-accordion {
              .accordion {
                .accordion-item {
                  .accordion-body {
                    .section-menu-item {
                      ul {
                        flex-direction: column;
                        text-align: center;
                      }
                    }
                  }
                }
              }
            }
          }
          .column-2 {
            .background-color {
              height: 13rem;
              .main-image-container {
                height: 30rem;
              }
            }
          }
        }
      }
    }
  }

  #menu-page {
    .menu-section {
      .custom-container {
        .menu-slider {
          .menu-slider-item {
            .menu-container {
              padding: 10rem 3rem 10rem;
              .menu-items-container {
                .menu-item {
                  .price-section {
                    .price-line {
                      width: 47%;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    // .slick-slider {
    //   .slick-prev,
    //   .slick-next {
    //     height: 3.5rem;
    //     width: 3.5rem;
    //     top: 8rem;
    //     &::after {
    //       font-size: 1.4rem;
    //     }
    //   }
    //   .slick-prev {
    //     left: 2rem;
    //     &::after {
    //       left: -29px;
    //       bottom: -84px;
    //     }
    //   }
    //   .slick-next {
    //     right: 2rem;
    //     &::after {
    //       left: -26px;
    //       bottom: -83px;
    //     }
    //   }
    // }
  }

  .common-banner-section {
    .swiper {
      .swiper-wrapper {
        .swiper-slide {
          .banner-content {
            .section-title {
              h1 {
                font-size: 5.4rem;
                letter-spacing: 3rem;
                margin-left: 3rem;
              }
            }

            .section-content-banner {
              span {
                width: 8rem;
                &:after {
                  content: "";
                  width: 8rem;
                }
              }
            }

            p {
              font-size: 1.6rem;
            }
          }
          .section-content {
            p {
              font-size: 1.4rem;
            }
          }
        }
      }
    }
  }
}

@media all and (max-width: 320px) {
  html {
    font-size: 50% !important;
  }

  // .common-banner-section {
  //   .common-banner-slider {
  //     .banner-item {
  //       .image-container {
  //         .custom-container {
  //           .inner {
  //             .banner-content {
  //               .section-content-banner {
  //                 p {
  //                   padding: 1rem 1rem;
  //                   &.upper {
  //                     padding: 1.9rem 3.8rem 1.5rem 3.8rem;
  //                     padding: 1rem 2rem;
  //                   }
  //                 }
  //               }
  //             }
  //           }
  //         }
  //       }
  //     }
  //   }
  // }

  .common-banner-section2 {
    .swiper {
      .swiper-wrapper {
        .swiper-slide {
          .banner-content {
            .section-content-banner {
              p {
                padding: 1rem 1rem;
                &.upper {
                  padding: 1.9rem 3.8rem 1.5rem 3.8rem;
                  padding: 1rem 2rem;
                }
              }
            }
          }
        }
      }
    }
  }

}