main#landing-page {
  .hero-section-container {
    position: relative;
    background-image: url("../assets/images/gradient-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      right: -3.75rem;
      top: 0;
      height: 100%;
      width: 31.25rem;
      background-image: url("../assets/images/logo-arc.svg");
      background-position: left;
      background-repeat: no-repeat;
      background-size: cover;
    } /* .hero-section-container::after */

    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: -22.5rem;
      top: 0;
      height: 100%;
      width: 31.25rem;
      background-image: url("../assets/images/logo-arc.svg");
      background-position: right;
      background-repeat: no-repeat;
      background-size: cover;
    } /* .hero-section-container::before */

    .hero-section-wrapper {
      --header-height: 7.875rem;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-top: calc(var(--header-height) + 5.625rem);
      z-index: 1;

      .hero-section-top-content {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        text-align: center;

        .hero-section-title {
          width: 66%;
          filter: drop-shadow(0rem 1.25rem 2.5rem rgba(0, 0, 0, 0.48));
        } /* .hero-section-title */

        .hero-section-description {
          width: 66%;
          margin-top: 2rem;
          color: rgba(255, 255, 255, 0.48);
          filter: drop-shadow(0rem 0.75rem 0.75rem rgba(0, 0, 0, 0.24));
        } /* .hero-section-description */
      } /* .hero-section-top-content */

      .hero-section-bottom-graph {
        display: flex;
        width: 100%;
        margin-top: 4.25rem;

        img {
          mix-blend-mode: soft-light;
          object-fit: cover;
          width: 100%;
          opacity: 0.5;
          transform: translateY(2px);
        } /* .hero-section-bottom-graph img */
      } /* .hero-section-bottom-graph */
    } /* .hero-section-wrapper */
  } /* .hero-section-container */

  .about-section-container {
    padding-bottom: 7.5rem;
    padding-top: 7.5rem;

    .about-section-wrapper {
      .about-section-description-container {
        display: flex;
        align-items: center;
        column-gap: 5rem;
        margin-top: 5rem;

        p {
          line-height: 1.75rem;
          color: rgba(130, 130, 130, 1);
        } /* .about-section-description-container p */
      } /* .about-section-description-container */
    } /* .about-section-wrapper */
  } /* .about-section-container */

  .our-story-section-container {
    padding-bottom: 7.5rem;
    padding-top: 7.5rem;

    .our-story-section-wrapper {
      .our-story-section-description-container {
        margin-top: 2.5rem;

        p {
          line-height: 1.75rem;
          color: rgba(130, 130, 130, 1);
        } /* .our-story-section-description-container p */
      } /* .our-story-section-description-container */
    } /* .our-story-section-wrapper */
  } /* .our-story-section-container */

  .solutions-section-container {
    padding-bottom: 7.5rem;
    padding-top: 7.5rem;

    .solutions-section-wrapper {
      .solutions-section-description-container {
        margin-top: 5rem;

        .solutions-section-description-wrapper {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          column-gap: 1.875rem;
          row-gap: 1.875rem;

          .solution-card-container {
            border-radius: 1.5rem;
            background-color: rgba(26, 63, 136, 1);

            .solution-card-wrapper {
              padding: 0 1.875rem 1.875rem;

              .solution-card-tag {
                width: fit-content;
                padding: 0.5rem 1.25rem;
                border-radius: 6.1875rem;
                background-color: rgba(209, 166, 23, 1);
                translate: 0 -50%;

                p {
                  letter-spacing: 0.04375rem;
                  text-transform: uppercase;
                  color: rgba(0, 0, 0, 1);
                } /* .solution-card-tag p */
              } /* .solution-card-tag */

              .solution-card-title {
                display: flex;
                align-items: center;
                column-gap: 1.25rem;
                margin-top: 0.625rem;
              } /* .solution-card-title */

              .solution-card-description {
                margin-top: 1.5rem;

                p {
                  color: rgba(255, 255, 255, 0.48);
                } /* .solution-card-description p */
              } /* .solution-card-description */
            } /* .solution-card-wrapper */
          } /* .solution-card-container */
        } /* .solutions-section-description-wrapper */
      } /* .solutions-section-description-container */

      .section-cta-wrapper-mobile {
        display: none;
      } /* .section-cta-wrapper-mobile */
    } /* .solutions-section-wrapper */
  } /* .solutions-section-container */

  .team-section-container {
    padding-bottom: 7.5rem;
    padding-top: 7.5rem;

    .team-section-wrapper {
      .team-section-people-container {
        margin-top: 3.75rem;

        .team-section-people-wrapper {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          column-gap: 1.25rem;
          row-gap: 1.25rem;

          .team-card-container {
            .team-card-wrapper {
              .team-card-profile {
                position: relative;
                display: flex;
                border-radius: 1.5rem;
                overflow: hidden;

                .profile-picture {
                  aspect-ratio: 1.3;
                  object-fit: cover;
                  width: 100%;
                  filter: grayscale(1);
                  transition: filter 0.5s ease;

                  &:hover {
                    /* filter: grayscale(0); */
                    /* Uncomment filter property to give hover effect */
                  } /* .profile-picture:hover */
                } /* .profile-picture */

                .team-card-social {
                  position: absolute;
                  display: flex;
                  bottom: 1.25rem;
                  right: 1.25rem;
                  transition: scale 0.5s ease;

                  &:hover {
                    scale: 1.1;
                  } /* .team-card-social:hover */
                } /* .team-card-social */
              } /* .team-card-profile */

              .team-card-name {
                margin-top: 1.25rem;
                padding-right: 1.25rem;

                h5 {
                  margin-bottom: 0.5rem;
                } /* .team-card-name h5 */

                p {
                  letter-spacing: 0.1.5rem;
                  color: rgba(130, 130, 130, 1);
                } /* .team-card-name p */
              } /* .team-card-name */
            } /* .team-card-wrapper */
          } /* .team-card-container */
        } /* .team-section-people-wrapper */
      } /* .team-section-people-container */
    } /* .team-section-wrapper */
  } /* .team-section-container */

  .blogs-section-container {
    padding-bottom: 7.5rem;
    padding-top: 7.5rem;

    .blogs-section-wrapper {
      .blogs-section-insights-container {
        margin-top: 3.75rem;

        .blogs-section-insights-wrapper {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: repeat(2, 1fr);
          column-gap: 2.5rem;
          row-gap: 2.5rem;

          .blog-card-container {
            padding: 1.875rem;
            border-radius: 1.5rem;

            &:first-child {
              grid-row: 1 / 3;
            } /* .blog-card-container:first-child */

            &.horizontal {
              .blog-card-wrapper {
                flex-direction: row;
                height: 100%;

                .blog-card-thumbnail {
                  width: 53%;
                  margin-bottom: 0;
                  margin-right: 1.5rem;

                  img {
                    aspect-ratio: auto;
                  } /* .horizontal .blog-card-thumbnail img */
                } /* .horizontal .blog-card-thumbnail */

                .blog-card-description {
                  width: 47%;

                  .blog-card-tag-date {
                    margin-top: 0;
                  } /* .horizontal .blog-card-tag-date */

                  .blog-card-tag-title {
                    margin-top: 0.75rem;
                  } /* .horizontal .blog-card-tag-title */

                  .blog-card-tag-cta {
                    margin-top: 1rem;
                  } /* .horizontal .blog-card-tag-cta */
                } /* .horizontal .blog-card-description */
              } /* .horizontal.blog-card-wrapper */
            } /* .blog-card-container.horizontal */

            .blog-card-wrapper {
              display: flex;
              flex-direction: column;
              height: 100%;

              .blog-card-thumbnail {
                display: flex;
                margin-bottom: 1.5rem;
                border-radius: 1rem;
                overflow: hidden;

                img {
                  object-fit: cover;
                  aspect-ratio: 1.66;
                  width: 100%;
                } /* .blog-card-thumbnail img  */
              } /* .blog-card-thumbnail */

              .blog-card-description {
                .blog-card-tag-date {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;

                  .tag {
                    padding: 0.5rem 1rem;
                    text-transform: uppercase;
                    border-radius: 6.1875rem;
                    background-color: rgba(209, 166, 23, 0.12);
                    color: rgba(209, 166, 23, 1);
                  } /* .tag */

                  .date {
                    color: rgba(130, 130, 130, 1);
                  } /* .date */
                } /* .blog-card-tag-date */

                .blog-card-tag-title {
                  margin-top: 1.25rem;

                  h5 {
                    display: -webkit-box;
                    line-height: 1.875rem;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                  } /* .blog-card-tag-title h5 */
                } /* .blog-card-tag-title */

                .blog-card-tag-cta {
                  display: flex;
                  margin-top: 1.875rem;

                  .tertiary-button {
                    p {
                      color: rgba(31, 72, 152, 1);
                    } /* .tertiary-button p */
                  } /* .tertiary-button */
                } /* .blog-card-tag-cta */
              } /* .blog-card-description */
            } /* .blog-card-wrapper */
          } /* .blog-card-container */
        } /* .blogs-section-insights-wrapper */
      } /* .blogs-section-insights-container */
    } /* .blogs-section-wrapper */

    .section-cta-wrapper-mobile {
      display: none;
    } /* .section-cta-wrapper-mobile */
  } /* .blogs-section-container */

  .partners-section-container {
    padding-bottom: 7.5rem;
    padding-top: 7.5rem;

    .partners-section-wrapper {
      .partners-section-logo-container {
        margin-top: 3.75rem;

        .partners-section-logo-wrapper {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          column-gap: 8.75rem;
          row-gap: 2.5rem;

          .partner-logo-container {
            display: flex;

            img {
              object-fit: contain;
              width: 100%;
              mix-blend-mode: luminosity;
              opacity: 0.24;
              transition: opacity 0.5s ease;

              &:hover {
                mix-blend-mode: unset;
                opacity: 1;
              } /* .partner-logo-container img:hover */
            } /* .partner-logo-container img */
          } /* .partner-logo-container */
        } /* .partners-section-logo-wrapper */
      } /* .partners-section-logo-container */
    } /* .partners-section-wrapper */
  } /* .partners-section-container */
} /* main#landing-page */

/* tablet breakpoint */
@media (max-width: 1024px) {
  main#landing-page {
    .hero-section-container {
      &::after {
      } /* .hero-section-container::after */

      &::before {
      } /* .hero-section-container::before */

      .hero-section-wrapper {
        .hero-section-top-content {
          .hero-section-title {
          } /* .hero-section-title */

          .hero-section-description {
          } /* .hero-section-description */
        } /* .hero-section-top-content */

        .hero-section-bottom-graph {
          img {
          } /* .hero-section-bottom-graph img */
        } /* .hero-section-bottom-graph */
      } /* .hero-section-wrapper */
    } /* .hero-section-container */

    .about-section-container {
      .about-section-wrapper {
        .about-section-description-container {
          p {
          } /* .about-section-description-container p */
        } /* .about-section-description-container */
      } /* .about-section-wrapper */
    } /* .about-section-container */

    .our-story-section-container {
      .our-story-section-wrapper {
        .our-story-section-description-container {
          p {
          } /* .our-story-section-description-container p */
        } /* .our-story-section-description-container */
      } /* .our-story-section-wrapper */
    } /* .our-story-section-container */

    .solutions-section-container {
      .solutions-section-wrapper {
        .solutions-section-description-container {
          .solutions-section-description-wrapper {
            grid-template-columns: repeat(2, 1fr);

            .solution-card-container {
              .solution-card-wrapper {
                .solution-card-tag {
                  p {
                  } /* .solution-card-tag p */
                } /* .solution-card-tag */

                .solution-card-title {
                } /* .solution-card-title */

                .solution-card-description {
                  p {
                  } /* .solution-card-description p */
                } /* .solution-card-description */
              } /* .solution-card-wrapper */
            } /* .solution-card-container */
          } /* .solutions-section-description-wrapper */
        } /* .solutions-section-description-container */
      } /* .solutions-section-wrapper */
    } /* .solutions-section-container */

    .team-section-container {
      .team-section-wrapper {
        .team-section-people-container {
          .team-section-people-wrapper {
            grid-template-columns: repeat(2, 1fr);

            .team-card-container {
              .team-card-wrapper {
                .team-card-profile {
                  .profile-picture {
                    &:hover {
                    } /* .profile-picture:hover */
                  } /* .profile-picture */

                  .team-card-social {
                    &:hover {
                    } /* .team-card-social:hover */
                  } /* .team-card-social */
                } /* .team-card-profile */

                .team-card-name {
                  h5 {
                  } /* .team-card-name h5 */

                  p {
                  } /* .team-card-name p */
                } /* .team-card-name */
              } /* .team-card-wrapper */
            } /* .team-card-container */
          } /* .team-section-people-wrapper */
        } /* .team-section-people-container */
      } /* .team-section-wrapper */
    } /* .team-section-container */

    .blogs-section-container {
      .blogs-section-wrapper {
        .blogs-section-insights-container {
          .blogs-section-insights-wrapper {
            .blog-card-container {
              &:first-child {
              } /* .blog-card-container:first-child */

              &.horizontal {
                .blog-card-wrapper {
                  .blog-card-thumbnail {
                    img {
                    } /* .horizontal .blog-card-thumbnail img */
                  } /* .horizontal .blog-card-thumbnail */

                  .blog-card-description {
                    .blog-card-tag-date {
                    } /* .horizontal .blog-card-tag-date */

                    .blog-card-tag-title {
                    } /* .horizontal .blog-card-tag-title */

                    .blog-card-tag-cta {
                    } /* .horizontal .blog-card-tag-cta */
                  } /* .horizontal .blog-card-description */
                } /* .horizontal.blog-card-wrapper */
              } /* .blog-card-container.horizontal */

              .blog-card-wrapper {
                .blog-card-thumbnail {
                  img {
                  } /* .blog-card-thumbnail img  */
                } /* .blog-card-thumbnail */

                .blog-card-description {
                  .blog-card-tag-date {
                    .tag {
                    } /* .tag */

                    .date {
                    } /* .date */
                  } /* .blog-card-tag-date */

                  .blog-card-tag-title {
                    h5 {
                    } /* .blog-card-tag-title h5 */
                  } /* .blog-card-tag-title */

                  .blog-card-tag-cta {
                    .tertiary-button {
                      p {
                      } /* .tertiary-button p */
                    } /* .tertiary-button */
                  } /* .blog-card-tag-cta */
                } /* .blog-card-description */
              } /* .blog-card-wrapper */
            } /* .blog-card-container */
          } /* .blogs-section-insights-wrapper */
        } /* .blogs-section-insights-container */
      } /* .blogs-section-wrapper */
    } /* .blogs-section-container */

    .partners-section-container {
      .partners-section-wrapper {
        .partners-section-logo-container {
          .partners-section-logo-wrapper {
            grid-template-columns: repeat(4, 1fr);
            column-gap: 6rem;

            .partner-logo-container {
              img {
                &:hover {
                } /* .partner-logo-container img:hover */
              } /* .partner-logo-container img */
            } /* .partner-logo-container */
          } /* .partners-section-logo-wrapper */
        } /* .partners-section-logo-container */
      } /* .partners-section-wrapper */
    } /* .partners-section-container */
  } /* main#landing-page */
}

/* mobile breakpoint */
@media (max-width: 640px) {
  main#landing-page {
    .hero-section-container {
      &::after {
      } /* .hero-section-container::after */

      &::before {
      } /* .hero-section-container::before */

      .hero-section-wrapper {
        .hero-section-top-content {
          .hero-section-title {
            width: 100%;
          } /* .hero-section-title */

          .hero-section-description {
            width: 100%;
          } /* .hero-section-description */
        } /* .hero-section-top-content */

        .hero-section-bottom-graph {
          img {
            transform: translate(-50%, 2px);
            width: 200%;
          } /* .hero-section-bottom-graph img */
        } /* .hero-section-bottom-graph */
      } /* .hero-section-wrapper */
    } /* .hero-section-container */

    .about-section-container {
      .about-section-wrapper {
        .about-section-description-container {
          flex-direction: column;
          align-items: normal;
          row-gap: 2.5rem;

          img {
            width: 40%;
          } /* .about-section-description-container img */

          p {
          } /* .about-section-description-container p */
        } /* .about-section-description-container */
      } /* .about-section-wrapper */
    } /* .about-section-container */

    .our-story-section-container {
      .our-story-section-wrapper {
        .our-story-section-description-container {
          p {
          } /* .our-story-section-description-container p */
        } /* .our-story-section-description-container */
      } /* .our-story-section-wrapper */
    } /* .our-story-section-container */

    .solutions-section-container {
      .solutions-section-wrapper {
        .section-title-container {
          .section-cta-wrapper {
            display: none;
          } /* .section-cta-wrapper */
        } /* .section-title-container */

        .solutions-section-description-container {
          .solutions-section-description-wrapper {
            grid-template-columns: repeat(1, 1fr);
            row-gap: 2.75rem;

            .solution-card-container {
              .solution-card-wrapper {
                .solution-card-tag {
                  p {
                  } /* .solution-card-tag p */
                } /* .solution-card-tag */

                .solution-card-title {
                } /* .solution-card-title */

                .solution-card-description {
                  p {
                  } /* .solution-card-description p */
                } /* .solution-card-description */
              } /* .solution-card-wrapper */
            } /* .solution-card-container */
          } /* .solutions-section-description-wrapper */
        } /* .solutions-section-description-container */

        .section-cta-wrapper-mobile {
          display: flex;
          margin-top: 3.75rem;
        } /* .section-cta-wrapper-mobile */
      } /* .solutions-section-wrapper */
    } /* .solutions-section-container */

    .team-section-container {
      .team-section-wrapper {
        .team-section-people-container {
          .team-section-people-wrapper {
            grid-template-columns: repeat(1, 1fr);

            .team-card-container {
              .team-card-wrapper {
                .team-card-profile {
                  .profile-picture {
                    &:hover {
                    } /* .profile-picture:hover */
                  } /* .profile-picture */

                  .team-card-social {
                    &:hover {
                    } /* .team-card-social:hover */
                  } /* .team-card-social */
                } /* .team-card-profile */

                .team-card-name {
                  h5 {
                    font-size: 2rem;
                  } /* .team-card-name h5 */

                  p {
                    font-size: 1.2rem;
                  } /* .team-card-name p */
                } /* .team-card-name */
              } /* .team-card-wrapper */
            } /* .team-card-container */
          } /* .team-section-people-wrapper */
        } /* .team-section-people-container */
      } /* .team-section-wrapper */
    } /* .team-section-container */

    .blogs-section-container {
      .blogs-section-wrapper {
        .section-title-container {
          .section-cta-wrapper {
            display: none;
          } /* .section-cta-wrapper */
        } /* .section-title-container */

        .blogs-section-insights-container {
          .blogs-section-insights-wrapper {
            grid-template-columns: repeat(1, 1fr);

            .blog-card-container {
              &:first-child {
              } /* .blog-card-container:first-child */

              &.horizontal {
                .blog-card-wrapper {
                  flex-direction: column;

                  .blog-card-thumbnail {
                    width: 100%;
                    margin-bottom: 1.5rem;
                    margin-right: 0;

                    img {
                    } /* .horizontal .blog-card-thumbnail img */
                  } /* .horizontal .blog-card-thumbnail */

                  .blog-card-description {
                    width: 100%;

                    .blog-card-tag-date {
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    } /* .horizontal .blog-card-tag-date */

                    .blog-card-tag-title {
                      margin-top: 1.25rem;
                    } /* .horizontal .blog-card-tag-title */

                    .blog-card-tag-cta {
                      display: flex;
                      margin-top: 1.875rem;
                    } /* .horizontal .blog-card-tag-cta */
                  } /* .horizontal .blog-card-description */
                } /* .horizontal.blog-card-wrapper */
              } /* .blog-card-container.horizontal */

              .blog-card-wrapper {
                .blog-card-thumbnail {
                  img {
                  } /* .blog-card-thumbnail img  */
                } /* .blog-card-thumbnail */

                .blog-card-description {
                  .blog-card-tag-date {
                    .tag {
                    } /* .tag */

                    .date {
                    } /* .date */
                  } /* .blog-card-tag-date */

                  .blog-card-tag-title {
                    h5 {
                      font-size: 1.8rem;
                    } /* .blog-card-tag-title h5 */
                  } /* .blog-card-tag-title */

                  .blog-card-tag-cta {
                    .tertiary-button {
                      p {
                      } /* .tertiary-button p */
                    } /* .tertiary-button */
                  } /* .blog-card-tag-cta */
                } /* .blog-card-description */
              } /* .blog-card-wrapper */
            } /* .blog-card-container */
          } /* .blogs-section-insights-wrapper */
        } /* .blogs-section-insights-container */
      } /* .blogs-section-wrapper */

      .section-cta-wrapper-mobile {
        display: flex;
        margin-top: 3.75rem;
      } /* .section-cta-wrapper-mobile */
    } /* .blogs-section-container */

    .partners-section-container {
      .partners-section-wrapper {
        .partners-section-logo-container {
          .partners-section-logo-wrapper {
            grid-template-columns: repeat(2, 1fr);

            .partner-logo-container {
              img {
                &:hover {
                } /* .partner-logo-container img:hover */
              } /* .partner-logo-container img */
            } /* .partner-logo-container */
          } /* .partners-section-logo-wrapper */
        } /* .partners-section-logo-container */
      } /* .partners-section-wrapper */
    } /* .partners-section-container */
  } /* main#landing-page */
}