*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

* {
  margin: 0;
}

:root {
  /* BREAKPOINTS
  tablet: 800px;
  mobile: 560px; */

  /* COLORS */
  --primary-color: #00aeef;
  --primary-color-hsl: hsl(196, 100%, 47%);
  --secondary-color: #000000;
  --tertiary-color: #d93e2b;
  /* FONT SIZE */
  --title-big: 3rem;
  --title-medium: 2rem;
  --title-small: 1rem;
  --headline-big: 1.5rem;
  --headline-medium: 1rem;
  --headline-small: 1rem;
}
.btn-wrapper {
  z-index: 19;
}
.btn {
  all: unset;
  cursor: pointer;
  display: block;
  text-align: center;
  padding: 1em 2em;
  border-radius: 100px;
  font-weight: 600;
  font-family: inherit;
  /* transition: all 0.2s ease; */
  position: relative;
  color: white;
  text-transform: uppercase;
  background-color: #00aeef;
  /* .hero-button:hover {
    transform: scale(1.5px);
  } */
}
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.btn::before,
.btn::after {
  content: "";
  position: absolute;
  background-color: inherit;
  border-radius: inherit;
  z-index: -1;
  inset: -2px;
  padding: 3px;
  background-image: conic-gradient(
    from var(--angle) at 50% 50%,
    transparent 0%,
    transparent 33%,
    var(--tertiary-color) 50%,
    transparent 66%
  );
  animation: rotate 4s infinite linear;
}

@keyframes rotate {
  0% {
    --angle: 0deg;
  }
  100% {
    --angle: 360deg;
  }
}

#above-the-fold {
  #header {
    display: flex;

    align-items: center;
    justify-content: space-between;
    height: 15vh;
    max-width: 1300px;
    width: calc(100% - 10vw);
    margin: 0 auto;
    @media (max-width: 800px) {
      height: 10vh;
    }
    .logo-link {
      @media (max-width: 560px) {
        margin: 0 auto;
      }
      .header-logo {
        width: 350px;
        height: auto;
        @media (max-width: 800px) {
          width: 300px;
        }
      }
    }
    .hero-btn {
      @media (max-width: 560px) {
        display: none;
      }
    }
  }

  #hero {
    background-color: black;
    margin-bottom: 2rem;

    .hero-wrapper {
      /* height: 85vh; */
      padding: 4rem 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* gap: 1rem; */
      max-width: 1300px;
      width: calc(100% - 10vw);
      margin: 0 auto;
      @media (max-width: 1000px) {
        flex-direction: column;

        height: auto;
        padding: 1rem 0;
        gap: 2rem;
      }
      @media (max-width: 800px) {
      }
      .hero-left-side-wrapper {
        /* flex-basis: 50%; */
        display: flex;
        align-items: center;
        justify-content: center;
        .hero-left-side {
          /* width: 40vw; */
          /* aspect-ratio: 1/1; */
          gap: 1.5rem;
          max-width: 600px;
          color: white;
          display: flex;
          flex-direction: column;
          align-items: left;
          justify-content: center;
          @media (max-width: 1000px) {
            justify-content: center;
            align-items: center;
            text-align: center;
          }
          .dream-outcome {
            font-size: var(--title-big);
            color: var(--primary-color);
            @media (max-width: 800px) {
              font-size: var(--title-medium);
            }
            @media (max-width: 560px) {
              font-size: var(--title-small);
            }
          }
          .bullet-points {
            font-size: var(--headline-big);
            @media (max-width: 800px) {
              font-size: var(--headline-medium);
            }
            @media (max-width: 560px) {
              font-size: var(--headline-small);
            }
            .bullet-points-p {
              display: flex;
              align-items: center;
              justify-content: left;
              gap: 1rem;
              @media (max-width: 800px) {
                gap: 0.5rem;
              }
            }
          }

          .btn-wrapper {
            @media (max-width: 560px) {
              width: 90vw;
              display: flex;
              align-items: center;
              justify-content: center;
              .hero-button {
                width: 100%;
              }
            }
          }
        }
      }
      .hero-right-side-wrapper {
        /* flex-basis: 50%; */
        display: flex;
        align-items: center;
        justify-content: center;
        .hero-right-side {
          width: 40vw;
          max-width: 600px;
          aspect-ratio: 1.2;
          /* height: 60vh; */
          background-color: white;
          border-radius: 5px;
          @media (max-width: 1000px) {
            width: 90vw;
            /* height: 80vw; */
          }
          .hero-right-side-image {
            border: solid var(--primary-color) 3px;
            border-radius: 5px;
            height: 100%;
            background-image: url(images/kreatin.png);
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
          }
        }
      }
    }
  }
}

#main-pain-point {
  margin-bottom: 2rem;
  text-align: center;
  .main-pain-point-wrapper {
    width: 50vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;

    @media (max-width: 800px) {
      width: 70vw;
    }
    @media (max-width: 560px) {
      width: 90vw;
    }
    .main-pain-point-headline {
      font-size: 2rem;
    }
    .main-pain-point-text {
      padding: 0 2rem;
    }
    .main-pain-point-button {
      /* border: 2px solid var(--primary-color); */
      background-color: black;
      color: white;
      @media (max-width: 560px) {
        width: 80vw;
      }
    }
  }
}

#social-proof-section {
  margin-bottom: 2rem;
  background-color: black;
  padding: 2rem 0;
  .social-proof-wrapper {
    max-width: 1440px;
    width: calc(100% - 10vw);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    .social-proof-quotes {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;

      @media (max-width: 1000px) {
        flex-direction: column;
      }
      .social-proof-quotes-img {
        width: 100%;
        flex-basis: 33%;
      }
      .social-proof-quotes-card {
        /* border: 2px solid var(--primary-color); */
        /* height: 400px; */
        /* aspect-ratio: 1; */
        /* width: 400px; */
        flex-basis: 33%;

        background-image: url(images/hubermanQuote.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
    .btn-wrapper {
      .social-proof-button {
        margin: 0 auto;
        @media (max-width: 560px) {
          width: 80vw;
        }
      }
    }
  }
}

#value-and-benefit {
  .value-and-benefit-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    .value-and-benefit-card {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4rem;
      margin-bottom: 2rem;
      @media (max-width: 1000px) {
        flex-direction: column;
        gap: 1rem;
      }
      .value-and-benefit-card-img {
        flex-basis: 40%;
        img {
          width: 100%;
          border-radius: 5px;
          border: 1px solid var(--tertiary-color);
        }
      }
      .value-and-benefit-text {
        /* width: 500px; */
        flex-basis: 40%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        @media (max-width: 1000px) {
          width: 90vw;
          align-items: center;
          justify-content: center;
        }
      }

      .value-and-benefit-text-headline {
        font-size: 2rem;
        @media (max-width: 1000px) {
          text-align: center;
        }
      }
      .value-and-benefit-text-p {
        @media (max-width: 1000px) {
          text-align: center;
        }
      }
      .btn {
        @media (max-width: 560px) {
          width: 80vw;
        }
      }
    }
    .switch {
      flex-direction: row-reverse;
      @media (max-width: 1000px) {
        flex-direction: column;
      }
    }
  }
}
#footer {
  background-color: black;
  .footer-wrapper {
    height: 15vh;
    max-width: 1300px;
margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    @media (max-width: 560px) {
      padding: 2rem 0;
      flex-direction: column;
      height: auto;
      gap: 1rem;
    }
    .footer-left-side {
      flex-basis: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      .footer-logo {
        height: 30px;
      }
    }
    .footer-right-side {
      flex-basis: 50%;
      color: #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}