javascript – Travel agent website

I’ve created a travel agent website, I would like to know how can I improve, DRY my code and how to increase performance – I tinified img’s but the bottom one I’ve made in PS takes much time to load.

Here is a preview hosted on github pages and repository

(idk if I could ask here for design feedback but it would be welcome too if possible)

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Adure</title>
    <link rel="stylesheet" href="style/main.css" />
  </head>
  <body>
    <div class="landing-page">
      <div class="container">
        <header class="header">
          <div class="header__logo">
            <img src="https://codereview.stackexchange.com/img/icons/logo.svg" alt="logo" />
            <p>adure</p>
          </div>
          <nav class="nav nav--header">
            <ul>
              <li><a class="header__link" href="#benefits">Why us</a></li>
              <li><a class="header__link" href="#locations">Locations</a></li>
              <li><a class="header__link" href="#reviews">Reviews</a></li>
              <li><a class="header__link" href="#booking">Booking</a></li>
              <li><a class="header__link" href="#contact">Contact</a></li>
            </ul>
          </nav>
          <div class="hamburger">
            <span class="hamburger__outline">
              <span class="hamburger__bar"></span>
            </span>
          </div>
        </header>
      </div>

      <div class="hero container">
        <img src="img/icons/logo-big-white.svg" alt="logo big" />
        <h1 class="hero__heading">Your most exciting life experience</h1>
        <h2 class="hero__subheading">Memorable experiences, wild natural environment</h2>
        <a href="#" class="hero__cta">Book now</a>
      </div>

      <div class="socials container">
        <a href="#"><img src="img/icons/twitter-logo.svg" alt="twitter" /></a>
        <a href="#"><img src="img/icons/ig-logo.svg" alt="twitter" /></a>
      </div>
      <div class="landing-page__blur"></div>
      <div class="landing-page__bgc"></div>
    </div>

    <section class="benefits" id="benefits">
      <div class="container">
        <h2 class="subheading">Why us</h2>
        <div class="benefits-container">
          <div class="benefit">
            <img src="img/icons/fitness.svg" alt="fit" class="benefit__img" />
            <h3 class="benefit__heading">Fit</h3>
            <p class="benefit__desc">Lorem ipsum dolor sit amet consectetur</p>
          </div>
          <div class="benefit">
            <img src="img/icons/map.svg" alt="fit" class="benefit__img" />
            <h3 class="benefit__heading">Guidance</h3>
            <p class="benefit__desc">Lorem ipsum dolor sit amet consectetur</p>
          </div>
          <div class="benefit">
            <img src="img/icons/paw.svg" alt="fit" class="benefit__img" />
            <h3 class="benefit__heading">Wild nature</h3>
            <p class="benefit__desc">Lorem ipsum dolor sit amet consectetur</p>
          </div>
          <div class="benefit">
            <img src="img/icons/star.svg" alt="fit" class="benefit__img" />
            <h3 class="benefit__heading">High rated</h3>
            <p class="benefit__desc">Lorem ipsum dolor sit amet consectetur</p>
          </div>
        </div>
      </div>
    </section>

    <section class="locations" id="locations">
      <h2 class="subheading">Locations</h2>
      <div class="locations-container">
        <div class="location">
          <h2 class="location__heading">Banff National Park</h2>
          <p class="location__location"><img src="img/icons/location-canada.svg" alt="pin" />Canada</p>
          <p class="location__desc">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas consectetur amet ducimus corporis quaerat fugiat
            tempore.
            <span>
              Eos pariatur ipsum labore id voluptas voluptate odio. Repudiandae nobis quis placeat odio totam voluptate
              praesentium nihil, ullam atque consequatur dolor consectetur quasi sit accusamus dolore cum qui quas.
            </span>
          </p>
          <a href="#" class="book-btn book-btn--green">Book it</a>
        </div>
        <img src="img/location_1.jpg" alt="lake" class="locations-img locations-img--green" />

        <img src="img/location_2.jpg" alt="lake" class="locations-img locations-img--blue" />
        <div class="location">
          <h2 class="location__heading">Perito Moreno Glacier</h2>
          <p class="location__location"><img src="img/icons/location-argentina.svg" alt="pin" />Argentina</p>
          <p class="location__desc">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis nostrum voluptas repellendus!
            <span>
              Praesentium iste repellendus nesciunt quidem aut omnis, molestias eaque fugit fuga excepturi asperiores id magnam
              quaerat illo incidunt ducimus amet esse sed mollitia ea nemo debitis atque sint. Dolor aperiam non aspernatur
              beatae.
            </span>
          </p>
          <a href="#" class="book-btn book-btn--blue">Book it</a>
        </div>

        <div class="location">
          <h2 class="location__heading">Grand canyon</h2>
          <p class="location__location"><img src="img/icons/location-arizona.svg" alt="pin" />Arizona US</p>
          <p class="location__desc">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus eveniet esse rerum omnis, illum ex iste dolor
            eius odio.
            <span>
              Nam minus corrupti dolorem debitis porro voluptatem repellendus vel, sit odio assumenda provident suscipit ducimus,
              distinctio quaerat consequatur, magni magnam delectus at explicabo a? Officiis, pariatur.
            </span>
          </p>
          <a href="#" class="book-btn book-btn--orange">Book it</a>
        </div>
        <img src="img/location_3.jpg" alt="lake" class="locations-img locations-img--orange" />
      </div>

      <div class="container">
        <h2 class="subheading">Search for more locations</h2>
        <div class="more-locations">
          <input type="text" placeholder="Location name" />
          <a href="#">
            <img src="img/icons/search.svg" alt="magnifier" />
          </a>
        </div>
      </div>
    </section>

    <section class="reviews" id="reviews">
      <div class="container">
        <h2 class="subheading">From our clients</h2>
        <div class="reviews-container">
          <div class="review">
            <div class="review__client">
              <img src="img/client_1.png" alt="client 1" class="review__img" />
              <div>
                <p class="review__name">Ted Brigmond</p>
                <p class="review__date">10.08.2020</p>
              </div>
              <div class="review__stars">
                <img src="img/icons/star-filled.svg" alt="star" />
                <img src="img/icons/star-filled.svg" alt="star" />
                <img src="img/icons/star-filled.svg" alt="star" />
                <img src="img/icons/star-filled.svg" alt="star" />
                <img src="img/icons/star-filled.svg" alt="star" />
              </div>
            </div>
            <hr class="review__line" />
            <p class="review__feedback">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi unde voluptas odio dolore beatae, voluptatem quas
              sint libero rem quae corporis non temporibus reiciendis doloribus voluptatibus nemo mollitia ex, perferendis,
              molestiae ad optio blanditiis minus totam. Recusandae consequatur vero porro! Explicabo numquam eaque et tempora hic
              id, expedita molestias quidem eligendi veniam laboriosam exercitationem aperiam ipsa! In repellat unde atque velit
              provident tenetur temporibus officiis a aliquid, et magni! Eius quod consequatur facere expedita reprehenderit.
            </p>
          </div>
          <div class="review">
            <div class="review__client">
              <img src="img/client_2.png" alt="client 1" class="review__img" />
              <div>
                <p class="review__name">Norine Desh</p>
                <p class="review__date">08.09.2020</p>
              </div>
              <div class="review__stars">
                <img src="img/icons/star-filled.svg" alt="star" />
                <img src="img/icons/star-filled.svg" alt="star" />
                <img src="img/icons/star-filled.svg" alt="star" />
                <img src="img/icons/star-filled.svg" alt="star" />
                <img src="img/icons/star-black.svg" alt="star" />
              </div>
            </div>
            <hr class="review__line" />
            <p class="review__feedback">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam expedita ex unde, quibusdam atque consectetur autem
              eius, iusto quidem at non, temporibus voluptate possimus! Suscipit voluptatem, voluptatum assumenda vitae
              voluptates, at eligendi ex est a corrupti odio fugit debitis fugiat exercitationem ut aperiam repellat ea tenetur
              dolorem vero porro eaque quas quaerat! Commodi ipsa optio quidem, mollitia quibusdam ipsum distinctio molestiae
              asperiores, labore consequuntur provident.
            </p>
          </div>
          <div class="review">
            <div class="review__client">
              <img src="img/client_3.png" alt="client 1" class="review__img" />
              <div>
                <p class="review__name">Janell Palos</p>
                <p class="review__date">02.11.2020</p>
              </div>
              <div class="review__stars">
                <img src="img/icons/star-filled.svg" alt="star" />
                <img src="img/icons/star-filled.svg" alt="star" />
                <img src="img/icons/star-filled.svg" alt="star" />
                <img src="img/icons/star-filled.svg" alt="star" />
                <img src="img/icons/star-filled.svg" alt="star" />
              </div>
            </div>
            <hr class="review__line" />
            <p class="review__feedback">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate modi asperiores a totam? Quaerat voluptatibus
              rem delectus at, provident atque itaque vitae minima officia repellat enim commodi nisi exercitationem aperiam
              consequuntur inventore est cupiditate maxime fuga nobis magnam accusamus animi rerum? Dolore quia inventore debitis
              accusantium culpa maxime asperiores doloremque vitae pariatur sed nam, animi labore atque aut, quos dolorem
              repellendus nulla? Repellendus quisquam unde, quam eveniet officiis sapiente quae?
            </p>
          </div>
          <p></p>
        </div>
      </div>
    </section>

    <section class="booking" id="booking">
      <img src="img/bgc.png" alt="kyoto" />
      <div class="booking-container">
        <h2 class="booking__heading">Ready for an unforgettable adventure?</h2>
        <a href="#" class="booking__cta">Book now</a>
      </div>
    </section>

    <footer class="footer" id="contact">
      <div class="footer-column">
        <img src="img/icons/logo-big-white.svg" alt="logo big" />
        <div class="phone-box">
          <img src="img/icons/phone.svg" alt="phone" />
          <p>536 272 926</p>
        </div>
        <div class="email-box">
          <img src="img/icons/mail.svg" alt="phone" />
          <p>adure@gmail.com</p>
        </div>
        <hr />
      </div>
      <div class="footer-column">
        <nav class="nav nav--footer">
          <ul>
            <li><a class="header__link" href="#benefits">Why us</a></li>
            <li><a class="header__link" href="#locations">Locations</a></li>
            <li><a class="header__link" href="#reviews">Reviews</a></li>
            <li><a class="header__link" href="#booking">Booking</a></li>
            <li><a class="header__link" href="#contact">Contact</a></li>
          </ul>
        </nav>
        <hr />
      </div>
      <div class="footer-column">
        <ul class="footer-cities">
          <li><a class="footer-city" href="#">Kyoto</a></li>
          <li><a class="footer-city" href="#">Dubrovnik</a></li>
          <li><a class="footer-city" href="#">St. Petersburg</a></li>
          <li><a class="footer-city" href="#">Bergen</a></li>
          <li><a class="footer-city" href="#">San Francisco</a></li>
        </ul>
        <hr />
      </div>
      <div class="footer-column">
        <div class="footer-socials-box">
          <p>Follow us</p>
          <div>
            <a href="#"><img src="img/icons/twitter-logo.svg" alt="twitter" /></a>
            <a href="#"><img src="img/icons/ig-logo.svg" alt="instagram" /></a>
          </div>
        </div>
        <hr />
      </div>
      <div class="footer-column">
        <form action="#">
          <p>Get updates about new adventures and more.</p>
          <input type="text" placeholder="Your name" pattern="(a-zA-Z)+" required />
          <input type="text" placeholder="Your email" required />
          <button>Send</button>
        </form>
      </div>
    </footer>
    <div class="copy-right">Copyright &copy; 2021 Adure. All rights reserved.</div>

    <script src="script.js"></script>
  </body>
</html>

CSS generated by SASS

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: 144rem;
  margin: 0 auto;
  padding: 0 7rem;
}

@media (max-width: 36em) {
  .container {
    padding: 0 3rem;
  }
}

.subheading {
  margin-top: 14rem;
  margin-bottom: 8rem;
}

:root {
  --font-size: 1.6rem;
  --heading: calc(var(--font-size) * 3.5);
  --subheading: calc(var(--font-size) * 2);
}

@media (max-width: 62em) {
  :root {
    --font-size: 1.5rem;
    --heading: calc(var(--font-size) * 3);
    --subheading: calc(var(--font-size) * 1.8);
  }
}

@media (max-width: 36em) {
  :root {
    --font-size: 1.4rem;
    --heading: calc(var(--font-size) * 2.5);
    --subheading: calc(var(--font-size) * 1.5);
  }
}

.subheading {
  font-size: var(--subheading);
  font-weight: bold;
  text-align: center;
}

.header__link {
  font-size: 1.8rem;
  color: #e7e7e7;
  font-weight: 600;
}

.header__link:hover {
  color: #fefefe;
}

.hero__heading {
  color: #fefefe;
  font-size: var(--heading);
  font-weight: bold;
}

.hero__subheading {
  color: #fefefe;
  font-size: var(--subheading);
  font-weight: 400;
}

.hero__cta {
  color: black;
  font-weight: bold;
  font-size: var(--font-size);
}

.location__heading {
  font-size: var(--subheading);
  font-weight: 600;
  color: #fefefe;
}

.location__location {
  color: #fefefe;
  font-weight: bold;
  font-size: 1rem;
}

.location__desc {
  font-size: var(--font-size);
  font-weight: 300;
  color: #c4c4c4;
  line-height: 1.5;
}

.review__feedback {
  font-size: var(--font-size);
  font-weight: 300;
  line-height: 1.5;
}

.review__name {
  font-size: 2rem;
  font-weight: 500;
}

.review__date {
  font-size: 1rem;
  font-weight: 500;
}

.booking__heading {
  font-size: var(--subheading);
  font-weight: 600;
}

.footer-city {
  font-size: 1.8rem;
  color: #fc6482;
  font-weight: 300;
}

.footer-city:hover {
  color: #fefefe;
}

.copy-right {
  font-size: 1.2rem;
  color: #fefefe;
}

.benefit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 2rem;
}

.benefit__heading {
  font-size: 2rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.benefit__desc {
  font-size: var(--font-size);
  text-align: center;
  width: 70%;
}

.book-btn {
  margin-top: 2.5rem;
  -ms-flex-item-align: start;
      align-self: flex-start;
  color: #000;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 1.2rem 4.5rem;
  border-radius: 0.3rem;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.book-btn--green {
  background: -webkit-gradient(linear, left top, right top, from(#00f5a0), to(#00d9f5));
  background: linear-gradient(to right, #00f5a0, #00d9f5);
}

.book-btn--blue {
  background: -webkit-gradient(linear, left top, right top, from(#00c6ff), to(#0072ff));
  background: linear-gradient(to right, #00c6ff, #0072ff);
}

.book-btn--orange {
  background: -webkit-gradient(linear, left top, right top, from(#ffe259), to(#ffa751));
  background: linear-gradient(to right, #ffe259, #ffa751);
}

.book-btn:hover {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
}

.book-btn:active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
}

@media (max-width: 62em) {
  .nav--header {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    background-color: #fefefe;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .nav--header ul {
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .nav--header a {
    color: #1a1919;
    font-size: 4rem;
  }
}

@media (max-width: 62em) and (max-width: 36em) {
  .nav--header a {
    font-size: 2.5rem;
  }
}

.nav--header ul {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.nav--header li:not(:first-child) {
  margin-left: 5rem;
}

@media (max-width: 62em) {
  .nav--header li:not(:first-child) {
    margin-left: 0;
    margin-top: 5rem;
  }
}

.nav--footer ul {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media (max-width: 62em) {
  .nav--footer ul {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.nav--footer li:not(:first-child) {
  margin-top: 1.5rem;
}

@media (max-width: 62em) {
  .nav--footer li:not(:first-child) {
    margin-top: 0;
    margin-left: 2rem;
  }
}

.nav--moveIn {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.hamburger {
  display: none;
  position: relative;
  z-index: 100;
}

@media (max-width: 62em) {
  .hamburger {
    display: inline-block;
  }
}

.hamburger__outline {
  display: inline-block;
  height: 2.4rem;
}

.hamburger__bar {
  width: 3rem;
  height: 0.4rem;
  background-color: #61e786;
  display: inline-block;
  position: relative;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.hamburger__bar::before, .hamburger__bar::after {
  content: '';
  width: 100%;
  height: 0.4rem;
  background-color: #61e786;
  position: absolute;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.hamburger__bar::before {
  top: -0.8rem;
}

.hamburger__bar::after {
  top: 0.8rem;
}

.hamburger__bar--hidden {
  background: transparent;
  -webkit-transition: all 0s;
  transition: all 0s;
}

.hamburger--active .hamburger__bar::before {
  -webkit-transform: translatey(0.8rem) rotate(45deg);
          transform: translatey(0.8rem) rotate(45deg);
}

.hamburger--active .hamburger__bar::after {
  -webkit-transform: translatey(-0.8rem) rotate(-45deg);
          transform: translatey(-0.8rem) rotate(-45deg);
}

.landing-page {
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  overflow-x: hidden;
}

.landing-page__blur {
  z-index: -1;
  height: 100%;
  width: 40%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

@media (max-width: 62em) {
  .landing-page__blur {
    display: none;
  }
}

.landing-page__blur::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -9;
  background-color: black;
  opacity: 0.1;
}

.landing-page__bgc {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.3))), url("../img/background-hero.jpg");
  background: linear-gradient(rgba(0, 0, 0, 0.3)), url("../img/background-hero.jpg");
  position: absolute;
  top: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 2rem;
}

.header__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fefefe;
  font-size: 1.4rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: 600;
}

@media (min-width: 112.5em) {
  .hero {
    border-left: 0.5rem solid #fefefe;
    padding: 5.5rem 8rem;
  }
}

@media (max-width: 62em) {
  .hero {
    text-align: center;
  }
}

.hero__subheading {
  margin-bottom: 5rem;
  margin-top: 1rem;
}

.hero__cta {
  background: #61e786;
  padding: 1.5rem 5rem;
  border-radius: 0.3rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

@media (max-width: 36em) {
  .hero__cta {
    padding: 1rem 4rem;
  }
}

.hero__cta:hover {
  background: #3de46c;
}

.socials {
  padding-bottom: 2rem;
}

@media (max-width: 62em) {
  .socials {
    text-align: center;
  }
}

.socials a:first-child {
  margin-right: 2.5rem;
}

.socials img {
  width: 3rem;
  height: 3rem;
}

.benefits-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(30rem, 1fr))(auto-fit);
      grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  grid-gap: 2rem;
}

@media (max-width: 75em) {
  .benefits-container {
    -ms-grid-columns: (1fr)(2);
        grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 36em) {
  .benefits-container {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }
}

.locations-container {
  background-color: #1a1919;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (50%)(2);
      grid-template-columns: repeat(2, 50%);
}

@media (max-width: 75em) {
  .locations-container {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    background-color: transparent;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.locations-img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  position: relative;
  z-index: 1;
}

@media (max-width: 75em) {
  .locations-img--green {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
  }
}

@media (max-width: 75em) {
  .locations-img--orange {
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    grid-row: 5/6;
  }
}

.location {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  margin: 0 auto;
  padding: 0 5rem;
}

@media (min-width: 112.5em) {
  .location {
    width: 50%;
    padding: 0;
  }
}

@media (max-width: 75em) {
  .location {
    background-color: #1a1919;
    padding: 10rem;
  }
}

@media (max-width: 36em) {
  .location {
    background-color: #1a1919;
    padding: 7rem 5rem;
  }
}

@media (max-width: 36em) {
  .location__desc span {
    display: none;
  }
}

.location__location {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0.5rem;
  margin-bottom: 2.5rem;
}

.location__location img {
  margin-right: 0.5rem;
}

.more-locations {
  border: 1px solid black;
  border-radius: 0.5rem;
  width: 60rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.5rem 3rem;
}

@media (max-width: 48em) {
  .more-locations {
    width: 100%;
  }
}

.more-locations input {
  outline: none;
  border: none;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-right: 1rem;
}

.more-locations input::-webkit-input-placeholder {
  color: black;
  font-size: 1.8rem;
  font-weight: 300;
}

.more-locations input:-ms-input-placeholder {
  color: black;
  font-size: 1.8rem;
  font-weight: 300;
}

.more-locations input::-ms-input-placeholder {
  color: black;
  font-size: 1.8rem;
  font-weight: 300;
}

.more-locations input::placeholder {
  color: black;
  font-size: 1.8rem;
  font-weight: 300;
}

.reviews .reviews-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (1fr)(3);
      grid-template-rows: repeat(3, 1fr);
  grid-row-gap: 5rem;
}

.reviews .review {
  padding: 5rem 8rem;
  -webkit-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
  border-radius: 0.3rem;
}

@media (max-width: 48em) {
  .reviews .review {
    padding: 4rem 7rem;
  }
}

@media (max-width: 36em) {
  .reviews .review {
    padding: 3rem 4rem;
  }
}

.reviews .review__img {
  margin-right: 1.5rem;
}

.reviews .review__client {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: min-content max-content 1fr;
      grid-template-columns: -webkit-min-content -webkit-max-content 1fr;
      grid-template-columns: min-content max-content 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (max-width: 36em) {
  .reviews .review__client {
    -ms-grid-columns: min-content max-content;
        grid-template-columns: -webkit-min-content -webkit-max-content;
        grid-template-columns: min-content max-content;
  }
}

.reviews .review__stars {
  margin-left: 1.5rem;
  -ms-grid-column-align: end;
      justify-self: end;
}

@media (max-width: 36em) {
  .reviews .review__stars {
    grid-column: 1/-1;
    -ms-grid-column-align: start;
        justify-self: start;
    margin-left: 0;
    margin-top: 1.5rem;
  }
}

.reviews .review__stars img {
  width: 2.5rem;
}

.reviews .review__feedback {
  position: relative;
}

.reviews .review__feedback::before {
  content: "''";
  font-size: 5rem;
  position: absolute;
  top: -2.5rem;
  left: -2rem;
  display: inline-block;
  color: #61e786;
  font-weight: 500;
}

.reviews .review__line {
  margin: 2rem 0;
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.booking {
  margin-top: 14rem;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (max-width: 62em) {
  .booking {
    display: none;
  }
}

.booking .booking-container {
  padding: 0 5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  text-align: center;
  width: 100%;
}

@media (max-width: 62em) {
  .booking .booking-container {
    top: 60%;
  }
}

@media (max-width: 48em) {
  .booking .booking-container {
    display: none;
  }
}

.booking__cta {
  margin-top: 1.5rem;
  display: inline-block;
  background: #fb4b6e;
  padding: 1rem 4rem;
  border-radius: 0.3rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 1.5rem;
  font-weight: 600;
  color: white;
}

.booking__cta:hover {
  background: #fa325a;
}

.booking img {
  width: 100%;
}

.footer {
  padding: 5rem 0;
  background-color: #1a1919;
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-grid-columns: min-content (max-content)(3);
      grid-template-columns: -webkit-min-content repeat(3, -webkit-max-content);
      grid-template-columns: min-content repeat(3, max-content);
}

@media (min-width: 112.5em) {
  .footer {
    -ms-grid-columns: (max-content)(5);
        grid-template-columns: repeat(5, -webkit-max-content);
        grid-template-columns: repeat(5, max-content);
  }
}

@media (max-width: 75em) {
  .footer {
    -ms-grid-columns: (max-content)(3);
        grid-template-columns: repeat(3, -webkit-max-content);
        grid-template-columns: repeat(3, max-content);
  }
}

@media (max-width: 62em) {
  .footer {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    justify-items: center;
    grid-gap: 5rem;
  }
}

.footer .footer-column {
  padding: 0 6rem;
  color: #fff;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.footer .footer-column:nth-child(2) {
  display: none;
}

@media (min-width: 112.5em) {
  .footer .footer-column {
    padding: 0 10rem;
  }
  .footer .footer-column:nth-child(2) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media (max-width: 75em) {
  .footer .footer-column:nth-child(3) {
    display: none;
  }
}

@media (max-width: 62em) {
  .footer .footer-column:nth-child(1) div {
    display: none;
  }
  .footer .footer-column:nth-child(2) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .footer .footer-column:nth-child(4) p {
    display: none;
  }
  .footer .footer-column:last-child {
    display: none;
  }
}

@media (max-width: 36em) {
  .footer .footer-column:nth-child(1) img {
    width: 6rem;
  }
  .footer .footer-column:nth-child(4) img {
    width: 3rem;
  }
  .footer .footer-column:nth-child(2) {
    display: none;
  }
  .footer .footer-column:last-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
  }
}

.footer .footer-column hr {
  border: 0;
  height: 100%;
  width: 1px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  position: absolute;
  top: 0;
  right: 0;
}

@media (max-width: 62em) {
  .footer .footer-column hr {
    display: none;
  }
}

.footer .phone-box,
.footer .email-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 2rem;
}

.footer .phone-box img,
.footer .email-box img {
  width: 2.5rem;
}

.footer .phone-box p,
.footer .email-box p {
  margin-left: 1.5rem;
  font-size: 1.5rem;
}

.footer .footer-cities {
  list-style: none;
}

.footer .footer-cities li:not(:first-child) {
  margin-top: 1.5rem;
}

.footer .footer-socials-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: 100%;
}

.footer .footer-socials-box p {
  margin-bottom: 2rem;
  font-size: 2rem;
}

.footer .footer-socials-box a:first-child {
  margin-right: 1.5rem;
}

.footer form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.footer form p {
  font-size: 1.4rem;
  margin-bottom: 3rem;
}

.footer form input {
  margin-bottom: 2rem;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #fefefe;
  color: #fefefe;
  padding: 1rem 0;
}

.footer form input::-webkit-input-placeholder {
  color: #989898;
}

.footer form input:-ms-input-placeholder {
  color: #989898;
}

.footer form input::-ms-input-placeholder {
  color: #989898;
}

.footer form input::placeholder {
  color: #989898;
}

.footer form button {
  padding: 1rem 0;
  border: 2px solid #fb4b6e;
  background: none;
  border-radius: 3px;
  color: #fefefe;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.footer form button:hover {
  background: #fb4b6e;
}

.copy-right {
  padding: 1rem;
  text-align: center;
  background-color: #151414;
}
/*# sourceMappingURL=main.css.map */

AND JS

'use strict';

// #####################################
// CHANING TEXT ON DIFFERENT DEVICES

const text = document.querySelectorAll('.review__feedback');
// TABLET
const userAgent = navigator.userAgent.toLowerCase();
const isTablet = /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/.test(
  userAgent
);

if (isTablet) {
  for (let item of text) {
    item.textContent =
      'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum quam fuga labore obcaecati, hic voluptates est laudantium corrupti. Possimus, soluta necessitatibus voluptatibus porro delectus, nemo tempora cupiditate sit excepturi voluptatem dolorem. Voluptatem officia ullam dignissimos laborum aliquid, soluta quidem odit?';
  }
}

// PHONE
window.mobileCheck = function () {
  let check = false;
  (function (a) {
    if (
      /(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
        a
      ) ||
      /1207|6310|6590|3gso|4thp|50(1-6)i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez((4-7)0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-(a-w))|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10(0-2)|n20(2-3)|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-((1-8)|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-(2-7)|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5(0-3)|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(
        a.substr(0, 4)
      )
    )
      check = true;
  })(navigator.userAgent || navigator.vendor || window.opera);
  return check;
};

if (mobileCheck()) {
  for (let item of text) {
    item.innerHTML =
      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic natus laboriosam, veritatis distinctio, saepe earum libero veniam labore id, beatae suscipit magni similique numquam possimus.';
  }
}

// #####################################
// HAMBURGER MENU

const hamburger = document.querySelector('.hamburger__outline');
const bar = document.querySelector('.hamburger__bar');
const nav = document.querySelector('nav');
const links = document.querySelectorAll('.header__link');
const body = document.querySelector('body');

const menu = (whatToDo) => {
  hamburger.classList.toggle('hamburger--active');
  nav.classList.toggle('nav--moveIn');
  //   body.classList.toggle('u-overflow-hidden');

  if (whatToDo === 'Open') {
    bar.classList.add('hamburger__bar--hidden'); // on first click
  } else {
    setTimeout(function () {
      bar.classList.remove('hamburger__bar--hidden');
    }, 100);
  }
};

hamburger.addEventListener('click', function () {
  if (bar.classList.contains('hamburger__bar--hidden')) {
    menu('Close');
  } else {
    menu('Open');
  }
});

for (let i = 0; i < links.length; i++) {
  links(i).addEventListener('click', () => {
    menu('Close');
  });
}