@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --primary-color: #045e2c;
  --color-light: #ffffff;
  --color-dark: #494949;
}

body {
  background-color: #ffffff;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

p,
h1,
h2,
h3,
h4,
h5,
a,
span,
button {
  font-family: "Montserrat", sans-serif;
}

h1,
h2,
h3 {
  text-transform: uppercase;
}

p {
  font-weight: 400;
  font-size: 20px;
  line-height: 100%;
}

.header {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 7rem;
  background-color: #ffffff36;
  box-sizing: border-box;
  z-index: 10;

  .header_bars {
    display: none;
  }

  img {
    margin: 0 0 0 5rem;
  }

  .header_menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    box-sizing: border-box;
    a {
      text-transform: uppercase;
      text-decoration: none;
      font-weight: 400;
      font-size: 17px;
      line-height: 100%;
      color: var(--color-light);
    }

    a:hover {
      color: var(--primary-color);
    }
  }

  button {
    background-color: var(--primary-color);
    width: 14rem;
    height: 100%;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 17px;
    line-height: 100%;
    color: var(--color-light);
    outline: none;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
  }
}

.banner {
  position: relative;
  width: 100%;
  z-index: 1;

  img {
    top: 0;
    position: relative;
    width: 100%;
    z-index: 2;
  }

  .banner_intro {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 4;
    p {
      text-transform: uppercase;
      font-weight: 200;
      font-size: 40px;
      line-height: 100%;
      color: var(--color-light);
      text-align: center;
      margin: 2rem 0;

      span {
        font-weight: 300;
        font-size: 96px;
        line-height: 100%;
        color: var(--color-light);
        text-align: center;
      }
    }

    button {
      width: 16.5rem;
      height: 4rem;
      background: #045e2cad;
      font-weight: 400;
      font-size: 24px;
      line-height: 100%;
      color: var(--color-light);
      text-align: center;
      border-radius: 8px;
      opacity: 0.7;
      border: none;
      cursor: pointer;
    }

    button:hover {
      opacity: 1;
    }
  }

  .banner_chevrons {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 3;

    img {
      height: 4.5rem;
      width: 4.5rem;
    }

    .left {
      top: 50%;
      position: absolute;
      transform: rotate(180deg);
      left: 0;
    }

    .right {
      top: 50%;
      position: absolute;
      right: 0;
    }

    .down {
      position: absolute;
      bottom: 3rem;
      right: 50%;
      transform: translate(50%, 0);
      width: 3rem;
      height: 3rem;
      background-color: #ffffff45;
      border-radius: 50%;
      padding: 1rem;
      box-sizing: border-box;

      img {
        width: 100%;
        height: 100%;
        transform: rotate(90deg);
      }
    }

    .left,
    .right,
    .down {
      cursor: pointer;
      opacity: 0.5;
    }

    .left:hover,
    .right:hover,
    .down:hover {
      opacity: 1;
    }
  }
}

.location {
  width: 100%;
  padding: 0 7rem;
  box-sizing: border-box;

  .location_intro {
    font-size: 24px;
    text-align: center;
    margin: 3rem 2rem;
  }

  .location_description {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    width: 100%;
    margin: 6rem 0;
    box-sizing: border-box;

    .location_description_context {
      width: 50%;

      h1 {
        font-weight: 100;
        font-size: 96px;
        line-height: 89%;
        text-align: right;
        color: var(--primary-color);
        margin: 0;

        p {
          font-weight: 400;
          font-size: 24px;
          line-height: 100%;
          color: var(--color-dark);
          margin: 1rem 0;
        }
      }

      p {
        font-weight: 400;
        font-size: 20px;
        line-height: 100%;
        text-align: right;
      }
    }

    .location_description_img {
      width: 50%;

      img {
        width: 100%;
      }
    }
  }
}

.accommodation {
  width: 100%;
  padding: 0 7rem;
  box-sizing: border-box;

  h1 {
    font-weight: 100;
    font-size: 96px;
    line-height: 89%;
    text-align: left;
    color: var(--primary-color);
    margin: 0;

    p {
      font-weight: 400;
      font-size: 24px;
      line-height: 100%;
      color: var(--color-dark);
      margin: 1rem 0;
    }
  }

  .accommodation_description {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 4rem;
    width: 100%;
    margin: 3rem 0;
    box-sizing: border-box;

    .accommodation_description_img {
      width: 70%;
      margin: 0 0 0 2rem;

      img {
        width: 100%;
      }
    }

    .accommodation_description_context {
      width: 28%;

      p {
        font-weight: 400;
        font-size: 20px;
        line-height: 100%;
        text-align: left;
        margin: 0;
      }
    }
  }
}

.welless {
  position: relative;
  width: 100%;
  margin: 6rem 0;

  img {
    width: 100%;
    position: relative;
    z-index: 1;
  }

  h1 {
    position: absolute;
    bottom: 3rem;
    left: 5rem;
    font-weight: 100;
    font-size: 64px;
    line-height: 81%;
    text-align: left;
    color: var(--color-light);
    margin: 0;
    z-index: 2;

    p {
      font-weight: 400;
      font-size: 24px;
      line-height: 100%;
      color: var(--color-light);
      margin: 1rem 0.5rem;
    }
  }
}

.experiences {
  width: 100%;
  margin: 0 0 8rem 0;
  box-sizing: border-box;

  .experiences_heading {
    display: flex;
    margin: 6rem;

    h1 {
      align-self: flex-start;
      width: 70%;
      font-weight: 100;
      font-size: 96px;
      line-height: 81%;
      text-align: left;
      color: var(--primary-color);
      margin: 0;

      p {
        font-weight: 400;
        font-size: 24px;
        line-height: 100%;
        color: var(--color-dark);
        margin: 1rem 0.7rem;
      }
    }

    p {
      width: 33%;
      align-self: flex-end;
      font-weight: 400;
      font-size: 20px;
      line-height: 100%;
      text-align: left;
      margin: 0;
    }
  }

  .experiences_img {
    display: flex;
    width: 100%;

    img {
      width: 25%;
      aspect-ratio: 6/9;
      object-fit: cover;
    }
  }
}

.services {
  width: 100%;
  padding: 3rem 10% 10rem 10%;
  background-color: #fbfbfb;
  box-sizing: border-box;

  h2 {
    font-weight: 100;
    font-size: 48px;
    line-height: 81%;
    text-transform: uppercase;
    text-align: center;
    color: var(--primary-color);
  }

  .service_types {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8rem;
    width: 100%;

    div {
      width: 18.75rem;
      height: 34rem;
      background-color: var(--color-light);

      img {
        width: 100%;
        object-fit: cover;
        aspect-ratio: 1/1;
      }

      h3 {
        font-weight: 100;
        font-size: 29px;
        line-height: 33px;
        text-transform: uppercase;
        margin: 1rem 1rem 0 1rem;
      }

      p {
        font-weight: 100;
        font-size: 13px;
        line-height: 33px;
        text-transform: lowercase;
        margin: 0 1rem;
      }
    }
  }
}

.address {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  width: 100%;
  border: 9px solid #e2e2e28a;
  padding: 2rem 6rem;
  box-sizing: border-box;

  .address_maps {
    width: 51%;
    aspect-ratio: 16/9;
  }

  .address_context {
    width: 40%;

    h1 {
      font-weight: 400;
      font-size: 24px;
      line-height: 100%;
      color: var(--primary-color);
    }

    p {
      font-weight: 400;
      font-size: 15px;
      line-height: 100%;
    }
  }
}

.footer {
  position: relative;
  width: 100%;
  padding: 5rem;
  background-color: var(--primary-color);
  box-sizing: border-box;

  .footer_logo {
    position: absolute;
    bottom: 38%;
    right: 50%;
    width: 27rem;
    height: 16rem;
    transform: translate(50%, 50%);
    border-radius: 50%;
    background: var(--primary-color);

    img {
      width: 100%;
    }
  }

  .footer_menu {
    display: flex;
    align-items: start;
    justify-content: center;
    width: 100%;
    margin: 0 0 5rem 0;
    box-sizing: border-box;

    div {
      width: 19rem;
      margin: 0 0 0 1rem;
      box-sizing: border-box;

      h1 {
        font-weight: 400;
        font-size: 24px;
        line-height: 100%;
      }

      p {
        font-weight: 400;
        font-size: 15px;
        line-height: 170%;
        margin: 0.5rem 0;
      }

      a {
        display: block;
        font-weight: 400;
        font-size: 15px;
        line-height: 170%;
        text-decoration: none;
        text-transform: uppercase;
      }

      h1,
      p,
      a {
        color: var(--color-light);
      }

      .social_media {
        width: 100%;
        margin: 0;

        a {
          display: unset;
          opacity: 0.5;

          img {
            width: 2rem;
            height: 2rem;
          }
        }

        a:hover {
          opacity: 1;
        }
      }
    }

    div:nth-child(1) {
      margin: 0 0 0 4rem;
    }

    div:nth-child(2) {
      margin: 0 0 0 3rem;
    }
  }

  .footer_details {
    width: 100%;
    height: 10.5rem;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    padding: 2rem 0;
    box-sizing: border-box;

    p {
      font-weight: 400;
      font-size: 12px;
      line-height: 100%;
      color: var(--color-light);
      text-align: center;
      margin: 0;
    }
  }

  .footer_others {
    width: 100%;
    text-align: center;
    margin: 2rem 0;
  }
}

@media (max-width: 600px) {
  .header {
    display: flex;
    height: 4rem;
    background-color: #ffffff75;
    overflow: unset;

    .header_bars {
      display: block;
      align-self: flex-start;
      width: 2.5rem;
      height: 2.5rem;
      background-color: var(--primary-color);
      padding: 0.5rem;
      border-bottom-right-radius: 5px;
      box-sizing: border-box;

      img {
        width: 100%;
        height: 100%;
      }
    }

    img {
      align-self: center;
      height: 80%;
      margin: 0;
    }

    .header_menu {
      display: none;

      .header_bars {
        display: none;
      }
    }

    .header_menu.header-responsive {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 3rem;
      position: absolute;
      top: 0;
      width: 100%;
      height: 65rem;
      background-color: var(--primary-color);
      padding: 2rem 0 0 5rem;
      box-sizing: border-box;

      .header_bars {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        background-color: #ffffff36;
        margin: 0;
      }

      a {
        font-size: 20px;
      }
    }

    button {
      width: 6rem;
      height: 100%;
      font-size: 14px;
    }

    .reserve {
      position: absolute;
      top: 30rem;
      left: 5rem;
      background-color: #ffffff36;
      border-radius: 5px;
    }
  }

  .header-none {
    background-color: transparent;
  }

  .banner {
    img {
      aspect-ratio: 30/31;
      object-fit: cover;
    }

    .banner_intro {
      p {
        font-size: 30px;
        margin: 2rem 0;

        span {
          font-weight: 300;
          font-size: 50px;
          line-height: 100%;
          color: var(--color-light);
          text-align: center;
        }
      }

      button {
        width: 8rem;
        height: 2.5rem;
        font-size: 14px;
        line-height: 100%;
      }
    }

    .banner_chevrons {
      img {
        height: 2rem;
        width: 2rem;
      }

      .down {
        bottom: 2rem;
        width: 1.5rem;
        height: 1.5rem;
        padding: 5px;
      }
    }
  }

  .location {
    padding: 0 1.5rem;

    .location_intro {
      font-size: 16px;
      margin: 3rem 0;
    }

    .location_description {
      gap: 1rem;
      margin: 2rem 0;

      .location_description_context {
        h1 {
          font-size: 50px;
          margin: 0;

          p {
            font-size: 16px;
            margin: 1rem 0;
          }
        }

        p {
          font-size: 14px;
        }
      }

      .location_description_img {
        width: 50%;

        img {
          width: 100%;
          aspect-ratio: 9/16;
          object-fit: cover;
        }
      }
    }
  }

  .accommodation {
    padding: 0 1.5rem;

    h1 {
      font-size: 50px;

      p {
        font-size: 16px;
        margin: 1rem 0;
      }
    }

    .accommodation_description {
      gap: 1rem;
      width: 100%;
      margin: 3rem 0;

      .accommodation_description_img {
        width: 70%;
        margin: 0 0 0 1rem;

        img {
          width: 100%;
          aspect-ratio: 1/1;
          object-fit: cover;
        }
      }

      .accommodation_description_context {
        width: 28%;

        p {
          font-size: 14px;
        }
      }
    }
  }

  .welless {
    img {
      width: 100%;
      position: relative;
      aspect-ratio: 1/1;
      object-fit: cover;
      z-index: 1;
    }

    h1 {
      bottom: 3rem;
      left: 3rem;
      font-size: 36px;

      p {
        font-size: 16px;
      }
    }
  }

  .experiences {
    width: 100%;
    margin: 0 0 4rem 0;
    box-sizing: border-box;

    .experiences_heading {
      display: flex;
      margin: 1.5rem;

      h1 {
        font-size: 35px;

        p {
          font-size: 16px;
          margin-left: 0.2rem;
        }
      }

      p {
        font-size: 14px;
      }
    }
  }

  .services {
    padding: 2rem 1.5rem 5rem 1.5rem;

    h2 {
      font-size: 28px;
    }

    .service_types {
      gap: 2rem;

      div {
        img {
          width: 100%;
          object-fit: cover;
          aspect-ratio: 1/1;
        }

        h3 {
          font-size: 20px;
        }
      }
    }
  }

  .address {
    flex-wrap: wrap-reverse;
    gap: 1rem;
    padding: 2rem 1.5rem;

    .address_maps {
      width: 100%;
      aspect-ratio: 16/9;
    }

    .address_context {
      width: 100%;

      h1 {
        font-size: 16px;
      }

      p {
        font-size: 13px;
      }
    }
  }

  .footer {
    padding: 1.5rem;

    .footer_logo {
      top: 35%;
      right: 50%;
      width: 15rem;
      height: 10rem;

      img {
        width: 100%;
      }
    }

    .footer_menu {
      margin: 0 0 2rem 0;

      div {
        width: 10rem;
        margin: 0 0 0 1rem;

        h1 {
          font-size: 10px;
        }

        p {
          font-size: 8px;
        }

        a {
          font-size: 8px;
        }

        .social_media {
          width: 100%;
          margin: 0;

          a {
            display: unset;
            opacity: 0.5;

            img {
              width: 1.5rem;
              height: 1.5rem;
            }
          }

          a:hover {
            opacity: 1;
          }
        }
      }

      div:nth-child(1) {
        margin: 0 0 0 0;
      }

      div:nth-child(2) {
        margin: 0 0 0 0;
      }
    }

    .footer_others {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      text-align: center;
      margin: 2rem 0;

      img {
        width: 25%;
      }
    }
  }
}