* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Quicksand", sans-serif;
  scroll-behavior: smooth;
}
ul,
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: black;
}
img {
  max-width: 100%;
}
i {
  margin-right: 8px;
}
input,
textarea,
fieldset,
input:focus,
input:focus-visible {
  background: transparent;
  border: none;
  outline: none;
}
textarea {
  min-height: 200px;
  max-height: 400px;
  max-width: 900px;
  min-width: 100%;
  width: 100%;
}
body {
  background: linear-gradient(180deg, #fed954, #fff 50%);
  height: 100%;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 64px;
  .logo-img {
    width: 148px;
    img {
      width: 100%;
    }
  }
  nav ul {
    display: flex;
    align-items: center;
    gap: 3rem;
    li a {
      font-weight: 500;
      font-size: 16px;
    }
  }
}
/* buttons */
.primary-btn {
  padding: 0 20px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: #fd4a9c;
  color: #fff;
  border-radius: 25px;
  border: 1.5px solid #b2346e;
  font-size: 16px;
  .button-icon {
    width: 18px;
    height: 18px;
    img {
      max-width: 100%;
      object-fit: cover;
    }
  }
}
.secondary-btn {
  padding: 0 20px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: #fe6f06;
  color: #fff;
  border-radius: 25px;
  border: 1.5px solid #b24e04;
  font-size: 16px;
  margin: 40px auto 0;
  .button-icon {
    width: 18px;
    height: 18px;
    img {
      max-width: 100%;
      object-fit: cover;
    }
  }
}
.one-of-btn {
  padding: 0 20px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: #b9d8d0;
  color: #fff;
  border-radius: 25px;
  border: 1.5px solid #99b2ac;
  font-size: 16px;
  .button-icon {
    width: 18px;
    height: 18px;
    img {
      max-width: 100%;
      object-fit: cover;
    }
  }
}

main {
  max-width: 1440px;
  width: 100%;
  margin: auto;
  padding: 68px 120px;
  .hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
    h1 {
      font-size: 64px;
    }
    span {
      font-size: 24px;
    }
  }
  .sketches-section {
    padding-top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    flex-wrap: wrap;
    .sketch-row {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: start;
      .sketch-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 48px;
        .sketch {
          width: 300px;
          height: 300px;
          border-radius: 50%;
          border: 4px solid #fd4a9c;
          overflow: hidden;
          img {
            height: 100%;
            min-width: 100%;
            object-fit: contain;
          }
        }
        p {
          font-size: 24px;
          font-weight: 500;
          text-align: center;
        }
      }
    }
  }
  .features-section {
    padding: 120px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    h2 {
      font-size: 36px;
      font-weight: 700;
      padding-top: 49px;
      padding-bottom: 32px;
      text-align: center;
    }
    .features-row {
      display: flex;
      justify-content: space-between;
      max-width: 1152px;
      width: 100%;
      padding: 0 64px;
      .preview-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        h3 {
          font-size: 24px;
          font-weight: 600;
          text-align: center;
          padding-top: 24px;
        }
        .preview-img {
          width: 240px;
        }
      }
    }
  }
  .team-section {
    height: 662px;
    h2 {
      font-size: 36px;
      font-weight: 700;
      text-align: center;
      padding-bottom: 48px;
    }
    .team-img {
      position: relative;
      width: 1088px;
      margin: auto;
      .section {
        position: absolute;
        h4 {
          font-size: 24px;
          font-weight: 600;
        }
        p {
          font-size: 22px;
          font-weight: 500;
          margin-bottom: 4px;
        }
        span {
          font-size: 18px;
          font-weight: 500;
          display: block;
        }
        &.namit {
          background-image: url("images/namit.png");
          height: 262px;
          width: 461px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        &.alex {
          background-image: url("images/alex.png");
          height: 338px;
          width: 493px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          left: 372px;
          top: 14px;
        }
        &.hengameh {
          background-image: url("images/hengameh.png");
          height: 457px;
          width: 415px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          right: 24px;
          top: 136px;
        }
        &.raheem {
          background-image: url("images/raheem.png");
          height: 327px;
          width: 392px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          left: -7px;
          top: 213px;
        }
        &.tejvir {
          background-image: url("images/tejvir.png");
          height: 417px;
          width: 293px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          left: 373px;
          top: 200px;
        }
      }
      .teammate-info {
        position: absolute;
        &.namit {
          top: 42px;
          left: 214px;
          width: 183px;
        }
        &.alex {
          left: 102.1px;
          top: 50.4px;
        }
        &.hengameh {
          left: initial;
          right: 23px;
          top: 91px;
          width: 193px;
          h4,
          p,
          span a {
            color: white;
          }
        }
        &.raheem {
          left: 206px;
          right: initial;
          top: 84px;
          width: 193px;
        }
        &.tejvir {
          left: 45px;
          top: 30px;
          width: 193px;
        }
      }
    }
  }
}
footer {
  .contact-section {
    padding: 48px;
    margin-bottom: 64px;
    h2 {
      font-size: 36px;
      font-weight: 700;
      text-align: center;
      padding-bottom: 56px;
    }
    form {
      max-width: 900px;
      width: 100%;
      margin: 0 auto;
      fieldset {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
        label {
          font-size: 16px;
          font-weight: 500;
          .required {
            color: red;
          }
        }
        input,
        textarea {
          background-color: #f1f1f1;
          border-radius: 6px;
          font-size: 18px;
          padding: 16px;
        }
      }
    }
  }
  .footer-nav {
    display: flex;
    align-items: center;
    gap: 80px;
    padding: 32px 64px 64px 64px;
    .logo-img {
      width: 148px;
    }
    nav ul {
      display: flex;
      align-items: center;
      gap: 32px;
      a {
        font-size: 20px;
        font-weight: 400;
      }
    }
  }
}
.team-section-mobile {
  display: none;
}
@media only screen and (max-width: 768px) {
  header {
    flex-direction: column;
    gap: 64px;
    padding: 24px;
    .logo-img {
      width: 209px;
    }
    nav ul li {
      display: none !important;
    }
  }
  main {
    padding: 32px 24px;
    .hero-section {
      h1 {
        font-size: 44px;
      }
      span {
        font-size: 18px;
      }
    }
    .sketches-section {
      .sketch-row {
        flex-direction: column;
        gap: 164px;
        .sketch-text {
          width: 100%;
          .sketch {
            max-width: 240px;
            width: 100%;
            height: 100%;
            aspect-ratio: 1;
          }
        }
      }
    }
    .features-section {
      padding: 32px;
      .features-row {
        flex-direction: column;
      }
    }
    .team-section {
      display: none;
    }
    .team-section-mobile {
      display: flex;
      flex-direction: column;
      h2 {
        font-size: 36px;
        font-weight: 700;
        text-align: center;
        padding-bottom: 48px;
      }
      .mobile-teamcard {
        aspect-ratio: 327 / 120;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        overflow: hidden;
        .team-image {
          position: relative;
          aspect-ratio: 327 / 120;
          img {
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: -1px;
            right: -5px;
          }
        }
        &.namit {
          background-image: url("./images/mobile-pink.png");
        }
        &.alex {
          background-image: url("./images/mobile-yellow.png");
          margin-top: -20px;
        }
        &.hengameh {
          background-image: url("./images/mobile-darkblue.png");
          margin-top: -20px;
          .team-text {
            color: white;
            span a,
            span i {
              color: white;
            }
          }
        }
        &.tejvir {
          background-image: url("./images/mobile-teal.png");
          margin-top: -20px;
        }
        &.raheem {
          background-image: url("./images/mobile-orange.png");
          margin-top: -20px;
        }
        &.odd {
          .team-text {
            top: 22%;
            left: 12%;
          }
        }
        &.even {
          .team-text {
            top: 25%;
            right: 12%;
          }
        }
        .team-text {
          position: absolute;
          span {
            display: block;
          }
        }
      }
    }
  }
  footer {
    padding: 24px;
    .contact-section {
      padding: 0;
    }
    .footer-nav {
      flex-direction: column;
      padding: 0;
    }
  }
}

@media only screen and (max-width: 600px) {
  .team-section-mobile {
    .mobile-teamcard {
      p,
      span a {
        font-size: 12px !important;
      }
      span {
        height: 15px;
        a {
          line-height: 80%%;
        }
      }
    }
  }
}