main#solutions-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: -25rem;
      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;
      align-items: center;
      justify-content: space-between;
      margin-top: calc(var(--header-height) + 5.625rem);
      padding-bottom: 7.5rem;
      z-index: 1;

      .hero-section-top-content {
        width: 50%;

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

        .hero-section-description {
          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-set-logo {
        display: flex;
        margin-right: 3.75rem;

        img {
          object-fit: cover;
          width: 100%;
        } /* .hero-section-bottom-graph img */
      } /* .hero-section-bottom-graph */
    } /* .hero-section-wrapper */
  } /* .hero-section-container */

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

    .methodology-section-wrapper {
      .section-title-container {
        .section-title-wrapper {
          .section-description {
            width: 90%;
          } /* .section-description */
        } /* .section-title-wrapper */
      } /* .section-title-container */

      .methodology-section-two-card-container {
        margin-top: 3.75rem;

        .methodology-section-two-card-wrapper {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          column-gap: 2.5rem;

          .methodology-card-container {
            border-radius: 1.5rem;

            .methodology-card-wrapper {
              padding: 1.875rem;

              .methodology-card-title {
                display: flex;
                align-items: center;
                column-gap: 1.25rem;
              } /* .methodology-card-title */

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

                p {
                  color: rgba(130, 130, 130, 1);
                } /* .methodology-card-description p */
              } /* .methodology-card-description */
            } /* .methodology-card-container */
          } /* .methodology-card-container */
        } /* .methodology-section-two-card-wrapper */

        .methodology-section-cta-wrapper {
          display: none;
          /* Change it to display: flex; while adding whitepaper functionality */
          margin-top: 3.75rem;
        } /* .methodology-section-cta-wrapper */
      } /* .methodology-section-two-card-container */
    } /* .methodology-section-wrapper */
  } /* .methodology-section-container */

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

    .engine-section-wrapper {
      .engine-section-tree-graph-container {
        margin-top: 5rem;

        .engine-section-tree-graph-wrapper {
          display: flex;
          column-gap: 3.75rem;

          .tree-graph-input {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;

            h4 {
              color: rgba(31, 72, 152, 1);
            } /* .tree-graph-input h4 */
          } /* .tree-graph-input */

          .tree-graph {
            display: flex;

            img {
              object-fit: cover;
              width: 100%;
            } /* .tree-graph img */
          } /* .tree-graph */

          .tree-graph-output {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;

            p {
              color: rgba(31, 72, 152, 1);
            } /* .tree-graph-input p */
          } /* .tree-graph-output */
        } /* .engine-section-tree-graph-wrapper */
      } /* .engine-section-tree-graph-container */
    } /* .engine-section-wrapper */
  } /* .engine-section-container */

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

    .bond-ranking-section-wrapper {
      .bond-ranking-section-highlights-container {
        margin-top: 5.625rem;

        .bond-ranking-section-highlights-wrapper {
          .bond-ranking-section-highlights-title {
            text-align: center;
          } /* .bond-ranking-section-highlights-title */

          .bond-ranking-section-highlight-card {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            column-gap: 1.875rem;
            margin-top: 1.25rem;

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

              .highlight-card-wrapper {
                padding: 1.875rem 1.25rem;
                text-align: center;

                h1 {
                  color: rgba(209, 166, 23, 1);
                } /* .highlight-card-wrapper h1 */
              } /* .highlight-card-wrapper */
            } /* .highlight-card-container */
          } /* .bond-ranking-section-highlight-card */
        } /* .bond-ranking-section-highlights-wrapper */
      } /* .bond-ranking-section-highlights-container */
    } /* .bond-ranking-section-wrapper */
  } /* .bond-ranking-section-container */

  .bond-ranking-image-section-container {
    margin-bottom: 7.5rem;
    margin-top: 7.5rem;

    .bond-ranking-image-section-wrapper {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 3.75rem;

      &.flipped {
        direction: rtl;
        text-align: left;
      } /* .bond-ranking-image-section-wrapper.flipped */

      .section-title-container {
        direction: ltr;

        .section-title-wrapper {
          ul {
            margin-top: 0.25rem;

            li {
              color: rgba(130, 130, 130, 1);
            } /* .section-title-wrapper ul li */
          } /* .section-title-wrapper ul */
        } /* .section-title-wrapper */
      } /* .section-title-container */

      .bond-ranking-media-container {
        padding: 2.5rem 1.875rem;
        border-radius: 1.5rem;
        background-color: rgba(251, 250, 250, 1);

        .bond-ranking-media-wrapper {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          width: 100%;

          img {
            object-fit: contain;
          } /* .bond-ranking-media-wrapper img */
        } /* .bond-ranking-media-wrapper */
      } /* .bond-ranking-media-container */
    } /* .bond-ranking-image-section-wrapper */
  } /* .bond-ranking-image-section-container */

  .issuance-cta-section-container {
    padding-bottom: 3.75rem;
    padding-top: 3.75rem;
    background-image: url("../assets/images/yellow-bg-arrows.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    .issuance-cta-section-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      row-gap: 2.5rem;

      .booking {
        border-color: white;
        color: rgba(0, 0, 0, 1);

        &:hover {
          background-color: rgba(251, 250, 250, 1);
        } /* .booking:hover */
      } /* .booking */
    } /* .issuance-cta-section-wrapper */
  } /* .issuance-cta-section-container */
} /* main#solutions-page */

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

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

      .hero-section-wrapper {
        flex-direction: column;
        row-gap: 4rem;

        .hero-section-top-content {
          text-align: center;
          width: 100%;

          .hero-section-title {
          } /* .hero-section-title */

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

        .hero-section-set-logo {
          margin-right: 0;

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

    .methodology-section-container {
      .methodology-section-wrapper {
        .section-title-container {
          .section-title-wrapper {
            .section-description {
            } /* .section-description */
          } /* .section-title-wrapper */
        } /* .section-title-container */

        .methodology-section-two-card-container {
          .methodology-section-two-card-wrapper {
            .methodology-card-container {
              .methodology-card-wrapper {
                .methodology-card-title {
                } /* .methodology-card-title */

                .methodology-card-description {
                  p {
                  } /* .methodology-card-description p */
                } /* .methodology-card-description */
              } /* .methodology-card-container */
            } /* .methodology-card-container */
          } /* .methodology-section-two-card-wrapper */

          .methodology-section-cta-wrapper {
          } /* .methodology-section-cta-wrapper */
        } /* .methodology-section-two-card-container */
      } /* .methodology-section-wrapper */
    } /* .methodology-section-container */

    .engine-section-container {
      .engine-section-wrapper {
        .engine-section-tree-graph-container {
          .engine-section-tree-graph-wrapper {
            column-gap: 2rem;

            .tree-graph-input {
              h4 {
                white-space: nowrap;
              } /* .tree-graph-input h4 */
            } /* .tree-graph-input */

            .tree-graph {
              img {
              } /* .tree-graph img */
            } /* .tree-graph */

            .tree-graph-output {
              p {
                white-space: nowrap;
              } /* .tree-graph-input p */
            } /* .tree-graph-output */
          } /* .engine-section-tree-graph-wrapper */
        } /* .engine-section-tree-graph-container */
      } /* .engine-section-wrapper */
    } /* .engine-section-container */

    .bond-ranking-section-container {
      .bond-ranking-section-wrapper {
        .bond-ranking-section-highlights-container {
          .bond-ranking-section-highlights-wrapper {
            .bond-ranking-section-highlights-title {
            } /* .bond-ranking-section-highlights-title */

            .bond-ranking-section-highlight-card {
              .highlight-card-container {
                .highlight-card-wrapper {
                  h1 {
                  } /* .highlight-card-wrapper h1 */
                } /* .highlight-card-wrapper */
              } /* .highlight-card-container */
            } /* .bond-ranking-section-highlight-card */
          } /* .bond-ranking-section-highlights-wrapper */
        } /* .bond-ranking-section-highlights-container */
      } /* .bond-ranking-section-wrapper */
    } /* .bond-ranking-section-container */

    .bond-ranking-image-section-container {
      .bond-ranking-image-section-wrapper {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 3.75rem;

        &.flipped {
        } /* .bond-ranking-image-section-wrapper.flipped */

        .bond-ranking-media-container {
          .bond-ranking-media-wrapper {
            img {
            } /* .bond-ranking-media-wrapper img */
          } /* .bond-ranking-media-wrapper */
        } /* .bond-ranking-media-container */
      } /* .bond-ranking-image-section-wrapper */
    } /* .bond-ranking-image-section-container */

    .issuance-cta-section-container {
      .issuance-cta-section-wrapper {
        text-align: center;

        .booking {
          &:hover {
          } /* .booking:hover */
        } /* .booking */
      } /* .issuance-cta-section-wrapper */
    } /* .issuance-cta-section-container */
  } /* main#solutions-page */
}

/* mobile breakpoint */
@media (max-width: 640px) {
  main#solutions-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-set-logo {
          img {
          } /* .hero-section-bottom-graph img */
        } /* .hero-section-bottom-graph */
      } /* .hero-section-wrapper */
    } /* .hero-section-container */

    .methodology-section-container {
      .methodology-section-wrapper {
        .section-title-container {
          .section-title-wrapper {
            .section-description {
            } /* .section-description */
          } /* .section-title-wrapper */
        } /* .section-title-container */

        .methodology-section-two-card-container {
          .methodology-section-two-card-wrapper {
            grid-template-columns: repeat(1, 1fr);

            .methodology-card-container {
              .methodology-card-wrapper {
                .methodology-card-title {
                } /* .methodology-card-title */

                .methodology-card-description {
                  p {
                  } /* .methodology-card-description p */
                } /* .methodology-card-description */
              } /* .methodology-card-container */
            } /* .methodology-card-container */
          } /* .methodology-section-two-card-wrapper */

          .methodology-section-cta-wrapper {
          } /* .methodology-section-cta-wrapper */
        } /* .methodology-section-two-card-container */
      } /* .methodology-section-wrapper */
    } /* .methodology-section-container */

    .engine-section-container {
      .engine-section-wrapper {
        .engine-section-tree-graph-container {
          .engine-section-tree-graph-wrapper {
            flex-direction: column;
            align-items: center;
            row-gap: 8rem;

            .tree-graph-input {
              flex-direction: row;
              flex-wrap: wrap;
              column-gap: 2.8rem;
              row-gap: 1.8rem;

              h4 {
              } /* .tree-graph-input h4 */
            } /* .tree-graph-input */

            .tree-graph {
              img {
                rotate: 90deg;
              } /* .tree-graph img */
            } /* .tree-graph */

            .tree-graph-output {
              align-items: center;
              row-gap: 1.8rem;

              p {
              } /* .tree-graph-input p */
            } /* .tree-graph-output */
          } /* .engine-section-tree-graph-wrapper */
        } /* .engine-section-tree-graph-container */
      } /* .engine-section-wrapper */
    } /* .engine-section-container */

    .bond-ranking-section-container {
      .bond-ranking-section-wrapper {
        .bond-ranking-section-highlights-container {
          .bond-ranking-section-highlights-wrapper {
            .bond-ranking-section-highlights-title {
            } /* .bond-ranking-section-highlights-title */

            .bond-ranking-section-highlight-card {
              grid-template-columns: repeat(1, 1fr);
              row-gap: 2rem;

              .highlight-card-container {
                .highlight-card-wrapper {
                  h1 {
                  } /* .highlight-card-wrapper h1 */
                } /* .highlight-card-wrapper */
              } /* .highlight-card-container */
            } /* .bond-ranking-section-highlight-card */
          } /* .bond-ranking-section-highlights-wrapper */
        } /* .bond-ranking-section-highlights-container */
      } /* .bond-ranking-section-wrapper */
    } /* .bond-ranking-section-container */

    .bond-ranking-image-section-container {
      .bond-ranking-image-section-wrapper {
        &.flipped {
        } /* .bond-ranking-image-section-wrapper.flipped */

        .bond-ranking-media-container {
          .bond-ranking-media-wrapper {
            img {
              width: 100%;
            } /* .bond-ranking-media-wrapper img */
          } /* .bond-ranking-media-wrapper */
        } /* .bond-ranking-media-container */
      } /* .bond-ranking-image-section-wrapper */
    } /* .bond-ranking-image-section-container */

    .issuance-cta-section-container {
      .issuance-cta-section-wrapper {
        .booking {
          &:hover {
          } /* .booking:hover */
        } /* .booking */
      } /* .issuance-cta-section-wrapper */
    } /* .issuance-cta-section-container */
  } /* main#solutions-page */
}