@import url(https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans:200,300,regular,500,600,700,800,200italic,300italic,italic,500italic,600italic,700italic,800italic);
@import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
@import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Plus Jakarta Sans", sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif;
  color: #282828;
}
h1 {
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 800;
  text-transform: uppercase;
}
h2 {
  font-size: clamp(2.625rem, 3vw, 3.225rem);
  font-weight: 300;
  line-height: 1.4;
}
h3 {
  font-family: "Inter", sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
  font-size: clamp(1.625rem, 1.5vw, 2rem);
  font-weight: 500;
  line-height: 1.4;
}
h4 {
  font-size: clamp(1.225rem, 1.5vw, 1.325rem);
  font-weight: 500;
  line-height: 1.4;
}
h5 {
  font-size: 1.125rem;
  line-height: 1.4;
}
:is(h1, h2, h3, h4, h5) {
  text-wrap: balance;
  @media (width <= 640px) {
    text-wrap: stable;
  }
}

:is(p, span, li, a, button) {
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-family: "Inter", sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
  text-decoration: none;
  color: #282828;
  text-wrap: stable;
  line-height: 1.6;
}

small {
  font-size: 1rem;
}

.sm-text {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 400;
}
.bold-text {
  font-weight: bold;
}

li {
  list-style: none;
}

label,
input,
textarea {
  width: 100%;
  border-radius: 0.5rem;
  font-family: "Inter", sans-serif;
}

button {
  border-radius: 0.5rem;
}

body {
  min-height: 100dvh;
  background: rgb(253, 211, 208);
  background: radial-gradient(
    circle,
    rgba(253, 211, 208, 1) 0%,
    rgba(245, 245, 245, 1) 100%
  );
}

img {
  -webkit-user-drag: none;
}

.section {
  width: min(90rem, 100% - 8rem);
  margin-inline: auto;

  @media (width <= 640px) {
    width: min(100%, 100% - 2.5rem);
    margin-inline: auto;
  }
}

.header-navbar {
  width: min(90rem, 100% - 8rem);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 200ms ease-in;
  opacity: 100%;

  position: fixed;
  top: 1%;
  left: 50%;
  transform: translate(-50%);
  z-index: 10;

  @media (width <= 768px) {
    width: min(98%, 100%);
  }
  .logo {
    font-family: "Poppins";
    font-size: clamp(1.5rem, 0.875rem + 2vw, 2rem);
    font-weight: bold;
    letter-spacing: 1px;
    margin-right: 1rem;
  }
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    @media (width <= 1280px) {
      &.navbar {
        display: none;
      }
    }
    .navbar__list {
      display: flex;
      flex-flow: row wrap;
      list-style: none;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
    }
    .navbar__item {
      position: relative;
    }
    .navbar__link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-decoration: none;
      padding: 0.5rem;
    }
    .navbar__divider {
      height: 1.375rem;
      border-style: none;
      border: 1px solid rgba(28, 28, 28, 0.5);
      margin-left: 2rem;
    }
    .navbar__item .services {
      cursor: pointer;
    }
    .navbar__item .arrow-down {
      transition: transform 200ms ease;
      opacity: 100%;
    }
    .navbar__item.open .arrow-down {
      transform: rotate(180deg);
      opacity: 100%;
    }
    button {
      width: fit-content;
      margin-left: 2rem;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      background-color: transparent;
      border: 1px solid #1c1c1c;
      cursor: pointer;
      transition: background 200ms ease-in-out;
    }
    .login-btn {
      border: none;
      font-weight: bold;
      background-color: transparent;

      &:hover {
        color: #1c1c1c;
        background-color: #c0c0c0;
      }
    }
    .signin-btn {
      color: #fff;
      background-color: #292929;

      &:hover {
        color: #fff;
        background-color: #1c1c1c;
      }
    }
  }
  .open-sidebar-icon {
    display: block;
    cursor: pointer;

    @media (width >= 1280px) {
      display: none;
    }
  }
}

.header-navbar.hidden {
  opacity: 0%;
}

.sidebar {
  width: 100dvw;
  min-height: 100dvh;
  padding: 0.5rem 2rem 2rem 2rem;
  background: rgb(253, 211, 208);
  background: radial-gradient(
    circle,
    rgba(253, 211, 208, 1) 0%,
    rgba(245, 245, 245, 1) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 150ms ease;
  display: none;

  position: fixed;
  top: 0;
  z-index: 11;

  .sidebar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .logo {
      font-size: 1.5rem;
      font-weight: bold;
    }
    .close-sidebar-icon {
      margin-left: auto;
      cursor: pointer;
    }
  }
  .sidebar__nav {
    .sidebar__ul {
      display: flex;
      flex-flow: column wrap;
      gap: 2rem;

      .sidebar__link {
        font-size: 2.25rem;
        cursor: pointer;
      }
    }
  }

  .btn-container {
    display: grid;
    gap: 1rem;

    button {
      padding: 1rem;
      border-style: none;
      background-color: transparent;
      cursor: pointer;
      transition: background 200ms ease-in-out;

      &.log-in {
        font-weight: bold;
      }
      &.sing-up {
        color: #e2e8f0;
        border-radius: 0.5rem;
        background-color: #363636;

        &:is(:hover, :focus) {
          background-color: #1c1c1c;
          color: #fff;
        }
      }
    }
  }
}

.hero-section-bg {
  background: rgb(253, 211, 208);
  background: radial-gradient(
    circle,
    rgba(253, 211, 208, 1) 0%,
    rgba(245, 245, 245, 1) 100%
  );

  .hero-container {
    min-height: 100dvh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    padding-block: 4lh;
  }
  .left-side {
    flex: 2;
    display: flex;
    flex-direction: column;

    .intro-title-container {
      display: grid;
      gap: 2rem;
    }
    .subtitle-hero {
      font-size: clamp(2rem, 8vw, 3rem);
      font-weight: 400;
    }
  }

  .avatars-and-text {
    display: flex;
    align-items: center;
    gap: 1rem;

    img {
      width: 100%;
      max-width: 7.5rem;
      aspect-ratio: 9 / 16;
      object-fit: contain;
    }
    .avatar-text {
      width: min(32rem, 100%);
    }
  }

  .stats {
    width: min(42rem, 100%);
    display: flex;
    gap: 1rem;
    justify-content: space-between;

    .stats-numbers {
      width: 100%;
      display: flex;
      gap: 1rem;
      align-items: center;

      @media (width <= 768px) {
        flex-direction: column;
      }
      .stats-number {
        font-size: 2.625rem;
        font-weight: 700;
        white-space: nowrap;
      }
      .stats-text {
        line-height: 1.4;
        font-weight: 400;
      }
    }
    .stats-decor {
      width: 100%;
      max-width: 15px;
      aspect-ratio: 9 / 16;
      object-fit: contain;
    }
  }

  .right-side {
    flex: 1;
    width: min(42rem, 100%);
    aspect-ratio: 1;
    object-fit: cover;
    mask-image: url("/assets/img/yoga-form6.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }
}

.classes-container {
  background: rgb(253, 211, 208);
  background: radial-gradient(
    circle,
    rgba(253, 211, 208, 1) 0%,
    rgba(217, 217, 217, 1) 100%
  );
}

.intro-our-classes {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  justify-items: center;
  align-items: center;
  gap: 2rem;
  padding-block: 2lh;
}

.left-intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  height: min(36rem, 100%);

  .left-intro-subtitle {
    font-family: "Inter", sans-serif;
  }
}

.middle-intro {
  width: min(52rem, 100%);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  mask-image: url("/assets/img/yoga-form5.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.right-intro {
  height: min(36rem, 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 1rem;

  .right-intro-list {
    margin-top: 4rem;
    list-style: none;
    display: flex;
    flex-flow: column wrap;
    gap: 1rem;

    .list-item {
      display: flex;
      align-items: center;
      gap: 0.875rem;
      font-weight: 300;

      .item-icon {
        width: 100%;
        max-width: 24px;
      }
    }
  }
}

.our-classes-section {
  min-height: 100dvh;
  display: grid;
  align-items: center;
  gap: 1rem;
  padding-block: 2lh;

  .our-classes-title {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;

    .our-classes-text {
      display: grid;
      gap: 1rem;
      flex: 2;
    }

    .title-classes {
      font-family: "Inter", sans-serif;
    }
    .text-classes {
      width: min(50rem, 100%);
    }

    .classes-img {
      width: 100%;
      max-width: 22rem;
      aspect-ratio: 1;
      object-fit: cover;
      mask-image: url("/assets/img/yoga-form6.svg");
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;

      @media (width <= 1640px) {
        width: 100%;
        margin-inline: auto;
      }
    }
  }

  .our-classes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1rem;

    .card-container {
      min-height: 22.25rem;
      display: flex;
      flex-flow: column wrap;
      justify-content: space-between;
      border-radius: 1rem;
      background-color: #fffbeb;
      padding: 1rem;
      margin-top: 1rem;

      &.other-bg {
        background-color: #e2e8f0;
      }

      .images {
        width: fit-content;
        height: 44px;
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .card-img {
          width: 100%;
          max-width: 100px;
          aspect-ratio: 16 / 9;
          object-fit: contain;
        }
      }

      .card-text-content {
        display: grid;
        gap: 2rem;

        .card-heading {
          font-size: 1.75rem;
          font-weight: bold;
        }

        .card-description {
          font-size: 1rem;
        }
      }

      .card-btn-primary {
        width: 100%;
        padding: 1rem 0.5rem;
        border-radius: 0.5rem;
        border: none;
        background-color: #e2e8f0;
        font-family: "Inter", sans-serif, system-ui, -apple-system,
          BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
          "Open Sans", "Helvetica Neue", sans-serif;
        font-size: 1rem;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        transition: background 200ms ease-in-out;

        &:hover {
          background-color: #ffffff;
        }

        &.btn-secondary-color {
          background-color: #ffffff;
          &:hover {
            background-color: #fffbeb;
          }
        }
      }
    }
  }
}

.testimonials {
  margin: 3rem auto 0 auto;
  min-height: 40rem;
  overflow: clip;

  .testimonial-headings {
    display: grid;
    justify-content: center;
    gap: 1rem;

    .testimonial-heading {
      font-family: "Inter", sans-serif;
      text-align: center;
    }
    .testimonial-sub-heading {
      text-align: center;
    }
  }

  .testimonial-section {
    display: inline-flex;
    gap: 1rem;
    margin-top: 3rem;

    @media (width <= 640px) {
      &.testimonial-section {
        mask-image: none;
      }
    }

    .box00 {
      width: 22rem;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 1rem;
      padding: 1rem;
      border-radius: 0.5rem;
      background-color: rgba(241, 241, 237, 0.5);

      .testimonial-avatar {
        width: 100%;
        max-width: 5.25rem;
        object-fit: cover;
        aspect-ratio: 1;
        border: 2px solid snow;
        border-radius: 50%;
      }

      .testimonial-content {
        height: fit-content;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 0.875rem;

        .rate {
          width: 100%;
          max-width: 8rem;
        }

        .testimonial-description {
          font-size: 1rem;
          font-weight: 300;
        }
        .testimonial-author {
          font-size: 1.125rem;
        }
      }
    }
  }
}
.testimonial-container {
  display: flex;
  gap: 1rem;
}

.testimonial-container {
  animation: loopText 35s infinite linear;
}

@keyframes loopText {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}
.more-classes {
  width: fit-content;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.5rem auto 0 auto;
  text-decoration: underline;
  transition: all 120ms ease;

  &:hover {
    font-weight: bold;
  }
}
.workshops-bg {
  background-image: linear-gradient(
    174.2deg,
    rgba(255, 244, 228, 1) 7.1%,
    rgba(240, 246, 238, 1) 67.4%
  );

  .workshops-container {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    align-items: center;
    gap: 3rem;
    padding-block: 3lh;

    .workshop-left-side {
      display: flex;
      flex-flow: column wrap;

      video {
        width: 100%;
        max-height: auto;
        aspect-ratio: 1;
        object-fit: cover;
        mask-image: url("/assets/img/yoga-form6.svg");
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
      }
    }

    .workshop-right-side {
      display: flex;
      flex-flow: column wrap;
      gap: 2rem;

      .sub-heading-container {
        display: grid;
        gap: 1rem;
      }

      .workshop-description {
        display: grid;
        gap: 1rem;
      }

      .workshop-stats {
        width: min(36rem, 100%);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        .workshop-numbers {
          width: 100%;
          display: flex;
          flex-direction: row;
          gap: 1rem;
          align-items: center;

          .workshop-number {
            font-size: clamp(2rem, 1.2188rem + 2.5vw, 2.625rem);
            font-weight: 700;
            white-space: nowrap;
          }
        }
      }
    }
  }
}

.academy-professors-container {
  background: rgb(254, 233, 231);
  background: radial-gradient(
    circle,
    rgb(214, 196, 194) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  padding-block: 4lh;
}

.our-academy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
  align-items: center;
  gap: 3rem;
  padding-block: 2lh;

  .academy-left-side {
    min-height: 32rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 1rem;

    .intro-title {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .academy-intro-description {
      display: grid;
      gap: 1rem;
    }
  }

  .academy-right-side {
    display: flex;
    flex-direction: column;
    align-items: center;

    .academy-img {
      width: min(42rem, 100%);
      aspect-ratio: 4 / 5;
      object-fit: cover;
      mask-image: url("/assets/img/yoga-form5.svg");
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
    }
  }
}

.our-team {
  min-height: 48rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
  align-items: center;
  gap: 3rem;
  padding-block: 2lh;

  .team-left-side {
    min-height: 32rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 1rem;

    .our-team-intro {
      display: grid;
      gap: 1.5rem;

      .our-team-title {
        font-family: "Inter", sans-serif;
        font-size: clamp(1.625rem, 1.1563rem + 1.5vw, 2rem);
        font-weight: 500;
      }
    }

    .avatars-team {
      width: min(32rem, 100%);
      display: flex;
      gap: 1rem;
      align-items: center;

      .avatars-team-text {
        display: grid;
        gap: 0.5rem;
      }
    }

    .our-team-description {
      display: grid;
      gap: 1rem;
    }
  }

  .team-right-side {
    display: flex;
    flex-direction: column;
    align-items: center;

    video {
      width: 100%;
      max-width: 40rem;
      aspect-ratio: 1;
      object-fit: cover;
      mask-image: url("/assets/img/yoga-form6.svg");
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
    }
  }
}

.our-professors {
  min-height: 80dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 2lh;

  .professors-heading {
    font-family: "Inter", sans-serif;
    font-size: clamp(1.625rem, 1.1563rem + 1.5vw, 2rem);
    font-weight: bold;
    text-align: center;
    margin-bottom: 2.5rem;

    @media (width <= 768px) {
      &.professors-heading {
        text-align: center;
      }
    }
  }

  .professors-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;

    .card-professor {
      display: flex;
      gap: 1rem;
      padding: 1rem;
      border-radius: 0.5rem;

      .professor-avatar {
        max-width: 8rem;
        aspect-ratio: 1;
        object-fit: contain;
      }

      .professor-description {
        display: grid;
        gap: 0.5rem;

        .professor-name {
          font-weight: bold;
        }
        .professor-specialty {
          font-size: 1.125rem;
          font-weight: 500;
        }
        .professor-experience {
          font-size: 1rem;
          font-weight: 400;
        }
      }
      @media (width <= 768px) {
        &.card-professor {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          text-align: center;
        }
      }
    }
  }
}

.faqs-section {
  background: #fbf4f4;
  background: radial-gradient(
    circle,
    rgba(251, 244, 244, 1) 0%,
    rgba(208, 213, 213, 1) 100%
  );
}

.faqs-container {
  min-height: 100dvh;
  display: grid;
  align-items: center;
  gap: 1.5rem;
  padding-block: 2lh;

  .faqs-heading {
    text-align: center;
  }

  .faqs-content {
    display: grid;
    gap: 2rem;

    .faqs-right-side {
      display: flex;
      flex-flow: column wrap;
      gap: 1rem;

      .faqs-divider {
        width: 100%;
        border: 1px solid rgba(0, 0, 0, 0.25);
      }

      details[open] svg {
        transform: rotate(-180deg);
      }

      summary {
        display: grid;
        grid-template-columns: 1fr 24px;
        gap: 0.5rem;
        font-family: "Inter", sans-serif;
        font-size: 1.125rem;
        font-weight: 500;
        line-height: 1.6;
        text-wrap: stable;
        list-style: none;
        cursor: pointer;
      }

      summary::-webkit-details-marker {
        display: none;
      }

      p {
        width: min(54rem, 100%);
        font-size: 1rem;
        line-height: 1.6;
        margin-top: 0.5rem;
      }

      .separator {
        margin: 1rem 0;
        border: 1px solid rgba(40, 40, 40, 0.1);
      }

      small {
        font-style: italic;
        line-height: 1.6;
      }
    }
  }
}

.contact {
  background-image: linear-gradient(
    174.2deg,
    rgba(255, 244, 228, 1) 7.1%,
    rgba(240, 246, 238, 1) 67.4%
  );

  .contact-content {
    min-height: 100dvh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-block: 2lh;
  }

  .contact-left-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4rem;

    .contact-headings {
      display: grid;
      gap: 1rem;
    }

    .contact-links-container {
      display: grid;
      gap: 1rem;

      p {
        font-weight: 300;
        line-height: 1.6;
        text-decoration: none;

        a {
          font-weight: bold;
        }
      }
    }

    .newsletter-group {
      display: flex;
      flex-direction: column;
      gap: 0.875rem;

      p {
        width: min(30rem, 100%);
        font-size: 0.875rem;
        font-weight: 300;
      }

      .input-group {
        width: fit-content;
        display: flex;
        align-items: center;

        @media (width <= 768px) {
          &.input-group {
            width: 100%;
            display: grid;
            gap: 0.875rem;
          }
        }

        .input {
          width: fit-content;
          min-height: 50px;
          padding: 0 1rem;
          font-family: "Inter", sans-serif;
          font-size: 1rem;
          color: #282828;
          border: 1px solid #1c1c1c;
          border-radius: 6px 0 0 6px;
          background-color: rgb(196, 196, 196);

          &:focus,
          &:focus-visible {
            border-color: #3898ec;
            outline: none;
          }
          &::placeholder {
            color: rgba(28, 28, 28, 0.5);
          }

          @media (width <= 768px) {
            &.input {
              width: 100%;
              border-radius: 6px;
            }
          }
        }

        .button-submit {
          font-size: 1rem;
          width: fit-content;
          min-height: 50px;
          padding: 0.5em 1em;
          border: none;
          border-radius: 0 6px 6px 0;
          background-color: #1c1c1c;
          color: #fff;
          cursor: pointer;
          transition: background 0.3s ease-in-out;

          &:hover {
            background-color: #222222;
          }

          @media (width <= 768px) {
            &.button-submit {
              width: 100%;
              border-radius: 6px;
            }
          }
        }
      }
    }
  }
  .womans {
    flex: 1;
    width: min(32rem, 100%);
    aspect-ratio: 1;
    object-fit: cover;
    mask-image: url("/assets/img/yoga-form7.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
  }
}
.social-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.social-content {
  display: flex;
  gap: 1rem;
}

footer {
  padding: 3rem 0;
  background-color: #cdcdcd;

  .footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
    color: #282828;

    .brand {
      display: grid;

      h3 {
        font-family: "Poppins";
        font-size: 2rem;
        letter-spacing: 1px;
      }
      p {
        font-size: 1rem;
      }
      address {
        margin-top: 8px;
        font-family: "Poppins";
        font-size: 0.875rem;
        font-style: normal;
        font-weight: bold;
        line-height: 1.6;
        text-wrap: balance;
      }
    }
    .company {
      display: grid;
      gap: 1rem;

      p {
        font-size: 1rem;
        font-weight: bold;
        text-transform: uppercase;
      }
    }
    .help {
      display: grid;
      gap: 1rem;

      p {
        font-size: 1rem;
        font-weight: bold;
        text-transform: uppercase;
      }
    }
    .payment {
      display: grid;
      gap: 1rem;

      p {
        font-size: 1rem;
        font-weight: bold;
        text-transform: uppercase;
      }

      .brand-payment {
        display: grid;
        gap: 1rem;

        @media (width <= 768px) {
          &.brand-payment {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
          }
        }
        @media (width <= 768px) {
          & img {
            width: 100%;
            max-width: 9.5rem;
            aspect-ratio: 16 / 9;
            object-fit: contain;
          }
        }
      }
    }
  }
}

.horizontal-divider {
  width: min(1440px, 100% - 4rem);
  margin-inline: auto;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

.copyright {
  width: min(1440px, 100% - 4rem);
  margin-inline: auto;
  display: grid;
  align-items: center;
  margin-top: 1rem;

  p {
    font-size: 0.875rem;
    font-weight: 300;
    text-align: center;

    a {
      font-weight: bold;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }
}
& ul {
  display: grid;
  gap: 1rem;
}
& a {
  font-weight: 400;
}

.modal {
  display: none;
}

.modal.open {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100dvw;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.7);
}

.login {
  width: min(36rem, 100% - 2rem);
  min-height: fit-content;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  gap: 2rem;
  border-radius: 1rem;
  padding: 2rem;
  background: rgb(253, 211, 208);
  background: radial-gradient(
    circle,
    rgba(253, 211, 208, 1) 0%,
    rgba(217, 217, 217, 1) 100%
  );
  font-family: "Inter", sans-serif;
  position: fixed;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;

  @media (width <= 768px) {
    & p {
      display: none;
    }
  }

  .close-login-icon {
    position: absolute;
    top: 2%;
    right: 4%;
    z-index: 10;
    cursor: pointer;
  }

  fieldset {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    border: none;
  }

  h2 {
    font-size: clamp(1.625rem, 1.1563rem + 1.5vw, 2rem);
    text-wrap: balance;
    margin-top: 1rem;
  }

  label {
    font-size: 1rem;
    font-weight: 500;
  }

  input {
    border: 1px solid #1c1c1c;
    background-color: transparent;
  }

  .icon-input-container {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    padding: 0.875rem 0.5rem;
    border-radius: 0.5rem;
    background-color: transparent;

    input {
      width: 100%;
      position: absolute;
      left: 0;
      padding: 1rem 1rem 1rem 2.5rem;
      background-color: transparent;
      border-radius: 0.5rem;
      font-size: 1rem;

      &:focus {
        outline: 2px solid #2d79f3;
      }

      &::placeholder {
        font-size: 0.874rem;
        color: rgba(28, 28, 28, 0.6);
      }
    }
  }

  .remember-pass {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;

    .checkbox {
      width: 16px;
      height: 16px;
    }

    .checkbox:focus {
      outline: 3px solid #2d79f3;
    }
  }

  .login-btn-container {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;

    .submit-btn {
      padding: 1rem 2rem;
      border-style: none;
      border-radius: 0.5rem;
      color: #d9d9d9;
      background-color: #1c1c1c;
      cursor: pointer;
      transition: 0.2s ease-in-out;

      &.submit-btn:is(:hover, :focus) {
        border: 1px solid #2d79f3;
      }
    }

    .btn {
      width: 100%;
      height: 50px;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 500;
      gap: 10px;
      border: 1px solid #ededef;
      background-color: white;
      cursor: pointer;
      transition: 0.2s ease-in-out;
    }

    .btn:hover {
      border: 1px solid #2d79f3;
    }
  }
}

.dev-web {
  font-size: 1rem;
}

.dropdown.open {
  position: relative;
  border-radius: 0.5rem;
}

.dropdown.open .dropdown-menu {
  display: flex;
  flex-direction: column;
  height: fit-content;
}

.dropdown-menu {
  height: 0;
  position: absolute;
  top: 3.25rem;
  left: 0;
  z-index: 5;
  overflow: hidden;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 200ms ease-in-out;

  @media (width < 649px) {
    width: 100%;
  }
}

.dropdown__item {
  background-color: rgba(255, 182, 193, 0.5);

  &:hover {
    border-radius: 0.25rem;
    background-color: rgba(255, 255, 255, 0.5);
  }

  @media (width < 640px) {
    padding: 1rem 0;
  }
}

.dropdown__link {
  font-size: 4.5rem;
  line-height: 1.4;
  text-wrap: stable;
  text-align: left;
  padding: 1rem;

  @media (width < 640px) {
    font-size: 2rem;
  }
}

.button-to-top {
  position: fixed;
  bottom: 2%;
  right: 3%;
  z-index: 2;
  padding: 1rem;
  background-color: transparent;
  border-style: none;
  cursor: pointer;
  transition: transform 150ms ease;
}

.button-to-top:hover {
  transform: scale(1.2);
}

.icon-upward {
  fill: #e2e8f0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-radius: 50%;
}

.yoga-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 2lh;

  h2 {
    margin-right: auto;
  }
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}
.yoga-md {
  flex: 1;
  width: min(46rem, 100%);
  aspect-ratio: 1;
  object-fit: cover;
  mask-image: url("/assets/img/yoga-form7.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.yoga-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 1rem;
}

.primary-btn {
  font-family: "Inter", sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
  color: #fff;
  width: fit-content;
  padding: 1rem 2rem;
  margin: 1.125rem 0;
  border-radius: 0.5rem;
  background-color: #1c1c1c;
  cursor: pointer;
  transition: background 200ms ease-in-out;

  &:is(:hover, :focus) {
    background-color: #363636;
    color: #fff;
  }
}
.website-link {
  font-size: 1rem;
}