:root {
  --white: rgba(217, 217, 217, 1);
  --brown: rgb(234, 69, 76);
  --black: hwb(0 0% 100%);
  --border: rgba(115, 115, 115, 1);
  --col: rgba(181, 181, 181, 1);
  --grey: rgba(38, 50, 56, 1);
}
html {
  scroll-behavior: smooth;
  transition: 0.5s ease-in-out;
}
body {
  background: var(--black);
}
/* Navbar */
@import url("https://fonts.googleapis.com/css2?family=Port+Lligat+Slab&display=swap");
.header {
  background-color: var(--black);
  color: var(--white);
  padding: 2px 15px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  font-family: "Port Lligat Slab";

  .fitness {
    font-weight: 400;
    font-size: 20px;
    line-height: 21.42px;

    #fitnessIcon {
      color: var(--brown);
    }
  }
  .navItem {
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    ul {
      display: flex;
      text-align: center;

      li {
        list-style: none;
        margin-left: 13px;
        a {
          font-weight: 400;
          text-decoration: none;
          color: var(--white);
          font-size: 20px;

          &:hover {
            color: var(--brown);
          }
        }
      }
    }
  }
  #open,
  #close {
    display: none;
  }
}
.btn {
  background: var(--grey);
  padding: 5px;
  margin: 0 2rem;
  border-radius: 10px;
  font-size: 16px;
  text-decoration: none;
  color: var(--white);
}
@media (max-width: 705px) {
  .header {
    position: relative;
    padding: 15px;
    #open {
      display: block;
      color: var(--brown);
      font-size: 20px;
    }
  }
  .navItem {
    z-index: 100;
    position: absolute;
    background-color: var(--black);
    width: 100%;
    text-align: center;
    top: -100rem;
    right: 0;
    transition: 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    #close {
      display: block;
      font-size: 2rem;
      color: var(--brown);
      position: absolute;
      top: 1rem;
      left: 1rem;
    }
    ul {
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
      li {
        font-size: 4rem;
      }
    }
  }
  .btn {
    margin-bottom: 2rem;
  }
  .active {
    top: 1rem;
  }
  .unscroll {
    overflow: hidden;
  }
}
/* Home */
@import url("https://fonts.googleapis.com/css2?family=Stick+No+Bills:wght@200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Angkor&family=Stick+No+Bills:wght@200..800&display=swap");
.home {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  background: url(image/gym.png), no-repeat;
  height: 100vh;
  background-position: center;
  background-size: cover;
  position: relative;
  overflow: hidden;

  .homeContent {
    display: flex;
    color: var(--white);
    .strong {
      position: absolute;
      top: 131.6px;
      letter-spacing: 20px;
      left: 35px;
      font-family: Angkor;
      font-weight: 900;
      font-size: 65.3px;
      line-height: 117.48px;
      color: var(--brown);
    }
    .content {
      position: absolute;
      top: 197px;
      width: 290px;
      opacity: 60%;
      left: 81px;
      text-transform: capitalize;
      font-weight: 800;
      color: var(--white);
      line-height: 30.9px;
      font-size: 20.67px;
    }
  }
  .offer {
    /* border: 2px solid #fff; */
    width: 700px;
    height: 700px;
    opacity: 10%;
    rotate: 45deg;
    background-color: var(--black);
    /* border-right: none; */
    /* border-top: none; */
    position: absolute;
    top: 40px;
    left: 996px;
  }
  h2 {
    color: var(--white);
    position: absolute;
    width: 242px;
    top: 179px;
    left: 941px;
    rotate: 90deg;
    opacity: 60%;
    font-weight: 800;
    font-size: 21.67px;
    letter-spacing: 3px;
  }
}
@media (max-width: 434px) {
  .home {
    .homeContent {
      .strong {
        font-size: clamp(2.9rem, 2vw, 2.7rem);
      }
      .content {
        left: 2.4rem;
      }
    }
  }
}
@media (max-width: 355px) {
  .home {
    .homeContent {
      .strong {
        left: 1rem;
        font-size: 2.4rem;
      }
      .content {
        left: 0.3rem;
        font-size: 1rem;
        top: 11.5rem;
      }
    }
  }
}
/* Gallery */
@import url("https://fonts.googleapis.com/css2?family=Port+Lligat+Slab&family=Stick+No+Bills:wght@200..800&display=swap");
.client {
  position: relative;
  text-align: center;
  color: var(--white);
  /* overflow: hidden; */
  padding-top: 2.5rem;
  .move {
    position: absolute;
    /* opacity: 20%; */
    left: 0;
    top: 0;
    width: 100%;
    z-index: -2;
  }
  .overlay {
    width: 100%;
    height: 102.7vh;
    position: absolute;
    opacity: 2;
    left: 0;
    top: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--black), transparent 10%);
    /* border: 2px solid gold; */
  }
  .content {
    .clientContent {
      font-size: 29.65px;
      letter-spacing: 3px;
      font-size: "Port Lligat Slab";
      font-weight: 400;
      line-height: 31.75px;
    }
    hr {
      border: 1px solid var(--brown);
      width: 100px;
    }
  }
  .clientSay {
    margin-top: 3rem;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    align-items: center;
    gap: 30px;
    padding: 0 2rem;
    .sayContent {
      overflow: hidden;
      display: flex;
      position: relative;
      text-align: center;
      justify-content: space-between;
      width: 100%;
      transition: transform 300ms, width 300ms;
      filter: blur(4px);
      cursor: pointer;
      height: 160.27px;
      border-radius: 10px;
      background-color: rgb(95, 128, 128);

      &:hover {
        filter: blur(0);
      }
      .name {
        display: flex;
        flex-direction: column;
        text-align: left;
        margin-left: 6px;
        .nameZ {
          font-family: "Port Lligat Slab", serif;
          font-size: 24.51px;
          font-weight: 800;
          /* line-height: 33.66px; */
          letter-spacing: 0.03em;
        }
        .nameC {
          font-family: "Port Lligat Slab";
          font-size: 19.23px;
          font-weight: 800;
          /* line-height: 22.77px; */
          letter-spacing: 0.03em;
          color: var(--brown);
        }
        .nameL {
          font-family: "Port Lligat Slab";
          font-size: 12.18px;
          font-weight: 800;
          width: 200px;
          padding: 1px;
          /* line-height: 18.22px; */
          letter-spacing: 0.03em;
        }
        span {
          margin-top: 5px;
          i {
            color: gold;
          }
        }
      }
      .img {
        position: absolute;
        right: -1.6rem;
        .back {
          width: 190px;
          height: 160px;
          /* transform: translateY(-50px); */
          transform: skew(-19deg);
        }
      }
    }
  }
}
.clientSay .sayContent.ative {
  filter: blur(0);
  /* transform: scale(1.1); */
  z-index: 100;
  border: 5px solid var(--brown);
}
.customer {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  justify-content: center;
  padding: 0 3rem;
  gap: 30px;
  .photo {
    cursor: pointer;
    gap: 10px;

    filter: blur(4px);
    img {
      height: 200px;
      border-radius: 15px;
      width: 400px;
      /* border: 5px solid var(--brown); */

      /* &:hover {
        filter: blur(0);
      } */
    }
  }
}
@media (max-width: 523px) {
  .customer {
    .photo {
      img {
        width: 300px;
      }
    }
  }
}
.customer .photo.action {
  filter: blur(0);
  /* transform: scale(1.1); */
  /* border:  5px solid var(--brown); */
  overflow: hidden;
  border-radius: 15px;

  img {
    border: 5px solid var(--brown);
  }
}
@media (max-width: 1275px) {
  .client {
    .clientSay {
      .sayContent {
        .img {
          .back {
            width: 120px;
          }
        }
      }
    }
  }
}

/* membership */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
.memebership {
  color: var(--white);
  text-align: center;
  margin-top: 19rem;

  .title {
    font-family: Port Lligat Slab;
    font-size: 29.65px;
    font-weight: 400;
    line-height: 31.75px;
    letter-spacing: 0.03em;
    text-align: center;
  }
  hr {
    width: 100px;
    border: 1px solid var(--brown);
  }
  .memebershipPrice {
    margin: 4rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 10px;
    .priceCont {
      display: flex;
      flex-direction: column;
      text-align: centers;
      align-items: center;
      justify-content: center;
      border: 6px solid var(--border);
      border-radius: 15px;
      color: var(--col);
      font-family: Poppins;
      .price {
        margin: 1.3rem;
        font-size: 12px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;

        .span {
          font-family: Poppins;
          font-size: 15px;
          font-weight: 700;
          line-height: 22.5px;
        }
      }
      .days {
        background: var(--border);
        padding: 5px;
        font-family: Poppins;
        font-size: 12px;
        font-weight: 700;
        line-height: 18px;
        width: 100%;
        color: var(--grey);
      }

      .benefits {
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;

        .benefit {
          margin-top: 1rem;
          padding-bottom: 6px;
          width: 150px;
          border-bottom: 2px solid var(--brown);
        }
      }

      .button {
        background: var(--brown);
        outline: none;
        border: none;
        padding: 10px;
        margin-bottom: 1rem;
        border-top-left-radius: 40px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 40px;
        border-bottom-left-radius: 10px;
        font-weight: 800;
        cursor: pointer;
        color: var(--black);
        width: 119px;
      }
    }
  }
}
/* Contact */
.contact {
  margin-top: 9rem;
  color: var(--white);

  .num {
    background: url(image/contact.jpeg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    background-position: center;
    background-size: cover;
    aspect-ratio: 19/5.5;
    position: relative;
    .numlayers {
      content: "";
      position: absolute;
      width: 100%;
      aspect-ratio: 19/5.5;
      background: color-mix(in srgb, var(--black), transparent 23%);
    }
    .numContent {
      z-index: 100;
      font-family: Poppins;
      font-size: 22px;
      font-weight: 700;
      line-height: 18px;
      letter-spacing: 0.03em;
      margin-bottom: 2rem;
    }
    .phoneNum {
      z-index: 100;
      font-family: Port Lligat Slab;
      font-size: 59.06px;
      font-weight: 400;
      line-height: 63.26px;
      letter-spacing: 0.03em;
    }
    .numText {
      margin-top: 2rem;
      z-index: 100;
      font-family: Port Lligat Slab;
      font-size: 15px;
      font-weight: 400;
      line-height: 16.06px;
      letter-spacing: 0.03em;
      width: 500px;
    }
  }
  .fullContact {
    margin: 5rem;
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    justify-content: left;
    align-items: last baseline;
    gap: 20px;
    .fit {
      margin-right: 14rem;
      .fitness {
        font-family: Port Lligat Slab;
        font-size: 39.05px;
        font-weight: 400;
        line-height: 41.82px;
        letter-spacing: 0.03em;

        #fitnessIcon {
          color: var(--brown);
        }
      }
      .word {
        margin-top: 1.3rem;
        font-family: Port Lligat Slab;
        font-size: 15px;
        font-weight: 400;
        line-height: 16.06px;
        letter-spacing: 0.03em;
        width: 400px;
      }
      .internets {
        margin-top: 1rem;
        display: flex;
        gap: 10px;

        svg {
          width: 30px;
          color: var(--brown);
          border: 1.13px solid var(--brown);
          padding: 5px;
          border-radius: 5px;
        }
      }
    }
    .contactFull {
      .fitness {
        font-family: Port Lligat Slab;
        font-size: 39.05px;
        font-weight: 400;
        line-height: 41.82px;
        letter-spacing: 0.03em;
      }
      .flex {
        margin-top: 1.3rem;
        .location {
          display: flex;
          text-align: left;
          font-family: Port Lligat Slab;
          font-size: 15px;
          font-weight: 400;
          line-height: 16.06px;
          letter-spacing: 0.03em;
          margin-top: 1.3rem;

          svg {
            margin-right: 1rem;
            width: 28px;
          }
          span {
            width: 300px;
          }
        }
      }
    }
  }
}
@media (max-width: 725px) {
  .contact {
    .num {
      .numContent {
        margin-bottom: 0.2rem;
      }
      .phoneNum {
        font-size: 30px;
      }
      .numText {
        margin-top: 0.1rem;
      }
    }
    .fullContact {
      text-align: left;
      justify-content: left;
    }
  }
}
@media (max-width: 476px) {
  .contact {
    .num {
      .numlayers {
        height: 200px;
      }
      .numText {
        width: 300px;
        margin-bottom: 1rem;
      }
    }
    .fullContact {
      .fit {
        .word {
          width: 200px;
        }
      }
      .contactFull {
        .flex {
          text-align: left;
          .location {
            span {
              width: 150px;
            }
          }
        }
      }
    }
  }
}
.truncate {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.invisible {
  display: none;
}
.show-more,
.show-less {
  border: none;
  background: none;
  text-align: left;
  margin-top: 2px;
  font-size: 10px;
  cursor: pointer;
  text-decoration: underline;
  color: var(--brown);
}