@layer components {
  .cmp-main-heading--other-pages {
    margin-top: clamp(4rem, 10vw, 9rem);
    text-align: center;
  }

  .cmp-main-btn--pages {
    margin-top: clamp(2rem, 7vw, 4rem);
  }

  .cmp-svg-pages-decoration {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--clr-blue-200);
    height: clamp(12rem, 18vw, 18rem);
    margin-bottom: clamp(1rem, 8vw, 8rem);
    z-index: 10;
  }

  .cmp-svg-pages-decoration__svg {
    position: absolute;
    display: block;
    width: 100%;
    height: auto;
    top: 100%;
    fill: var(--clr-blue-200);
    /* transform: scaleY(-1); */
    backface-visibility: hidden;
  }
}

@layer base {
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      *** PAGE 2 / SECTION-ONE / ABOUT ***       \\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .pg2-s1-who {
    padding-top: var(--padd-60-100);
  }

  .who-text-image-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;

    @media (width > 62.5rem) {
      flex-direction: row;
    }
  }

  .who-text-block {
    @media (width > 62.5rem) {
      max-width: 48%;
    }
  }

  .cmp-main-text--pg2-s1 {
    margin-top: 1rem;
  }

  .who-image-block {
    position: relative;
  }

  .who-image-block__first-image {
    width: 85%;
    height: auto;
    margin-left: auto;
    border-radius: 2.5em;
    box-shadow: 0 0 1rem var(--clr-gray-200);
  }

  .who-image-block__second-image-container {
    position: absolute;
    width: 45%;
    bottom: 1.87rem;
    left: 0.62rem;
  }

  .who-image-block__second-image {
    height: auto;
    object-fit: cover;
    border-radius: 0.75rem;
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      *** PAGE 2 / SECTION-TWO / PORTFOLIO ***       \\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .cmp-topper-heading--pg2-s2 {
    font-size: clamp(0.75rem, 2vw, 1.75rem);
  }

  .cmp-topper-heading--pg2-s2::after {
    position: relative;
    content: "";
    display: block;
    margin-inline: auto;
    background: var(--clr-gray-100);
    height: 1px;
    width: 19em;
    margin-top: 0.25rem;
    opacity: 0.3;
    z-index: 999;
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      *** PAGE 2 / SECTION-THREE / TESTIMONIALS ***       \\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .pg1-s6-testimonials--pg2-s3 {
    position: relative;
    padding-top: var(--padd-60-100);
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      *** PAGE 3 / SECTION-ONE / SERVICES ***       \\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .pg3-s1-services {
    padding-block: var(--padd-60-100);
  }

  .services-box-flex {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 1rem;

    @media (width > 62.5rem) {
      flex-direction: row;
    }
  }

  .services-box__text {
    @media (width > 62.5rem) {
      max-width: 48%;
    }
  }

  .services-page-sub-heading {
    position: relative;
    display: inline-block;
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.25rem;
    line-height: 1.4em;
    text-decoration: underline;
    text-decoration-color: var(--clr-blue-100);
    text-underline-offset: 0.28em;

    &::after {
      content: "";
      position: absolute;
      background: var(--clr-blue-100);
      left: 0;
      bottom: 0;
      height: 2px;
      width: 0;
      box-decoration-break: clone;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 3s ease-in;
      /* prettier-ignore */
      transition-timing-function: linear(0, 0.007 1.4%, 0.029 2.9%, 0.117 6.2%, 0.231 9.3%, 0.61 18.6%, 0.716 21.6%, 0.803 24.4%, 0.875 27.2%, 0.934 30%, 0.981 32.9%, 1.017 35.9%, 1.054 41.4%, 1.064 47.8%, 1.005 76.2%, 1);

      @media (width > 31.25rem) {
        width: 100%; /* Only show moving underline on bigger screens */
      }
    }

    &.in-view::after {
      transform: scaleX(1);
    }

    @media (width > 31.25rem) {
      text-decoration: unset;
      line-height: 1.1em;
    }
  }

  .services-page-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;

    strong {
      display: inline-block;
      margin-bottom: 0.25rem;
      transition: color 0.5s;
    }
  }

  .services-box__rocket-svg {
    position: relative;
    margin-inline: auto;

    svg {
      width: 4rem;
      position: absolute;
      left: 7rem;
      animation: rocketFloat-S 40s ease-in-out infinite;
      transform-origin: center;

      @media (width > 62.5rem) {
        position: relative;
        width: 15rem;
        left: 0;
        animation: rocketFloat-L 45s ease-in-out infinite;
      }

      @media (prefers-reduced-motion: reduce) {
        animation: none;
        transform: rotate(-45deg);
      }
    }

    @media (width > 62.5rem) {
      margin-inline: unset;
      margin-left: auto;
    }
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      *** PAGE 3 / SECTION-TWO / MISSION ***       \\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .pg1-s2-mission--pg3-s2 {
    background-color: var(--bg-primary-blue);
    padding-block: var(--padd-60-100);
  }

  .cmp-topper-heading--pg3-s2,
  .cmp-sub-heading--pg3-s2,
  .cmp-main-text--pg3-s2,
  .text-block--pg3-s2,
  .text-block-text--pg3-s2,
  .cards-text {
    color: var(--text-body-white);
  }

  .decorative-side-svg {
    fill: var(--clr-blue-150);
  }

  .services-card--pg3-s2 {
    background-color: var(--clr-lighter-white);

    .services-card__svg-box {
      background-color: var(--clr-lighter-white);
      box-shadow: -8px 8px 30px #000000a5;
    }

    .cards-text--pg3-s2 {
      color: #000;
    }

    &:hover {
      background-color: var(--clr-blue-200);

      .services-card__svg-box {
        background-color: var(--clr-blue-150);
      }

      svg {
        fill: var(--clr-lighter-white);
      }
    }
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      *** PAGE 3 / SECTION-THREE / APPROACH ***       \\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .pg1-s1-approach--pg3-s3 {
    padding-top: var(--padd-60-100);
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      *** PAGE 4 / SECTION-ONE / PRICING ***       \\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .pg4-s1-pricing {
    position: relative;
    padding-block: var(--padd-60-100);
  }

  .cmp-topper-heading--pg4-s1::before {
    height: 0px;
    margin-bottom: 0;
  }

  .cmp-main-text--pg4-s1 {
    max-width: 65ch;
    margin-top: 0.5rem;

    strong:last-of-type {
      text-decoration: underline;
      text-underline-offset: 0.25em;
    }

    span {
      text-decoration: underline wavy;
      text-decoration-color: var(--clr-blue-100);
      text-decoration-thickness: 0.05rem;
      text-underline-offset: 0.1em;
    }
  }

  .pricing-page-svg-decoration {
    display: none;
    position: absolute;
    height: auto;
    top: 9.37rem;
    fill: #00000039;
    animation: autoRun 50s ease-in-out infinite;

    @media (width > 62.5rem) {
      display: unset;
      width: 20rem;
      right: 0rem;
    }

    @media (width > 75rem) {
      width: 25rem;
    }
  }

  .pricing-card-container--pg4-s1 {
    animation: none;
    animation-range: entry 0% cover 0%;
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      *** PAGE 5 / SECTION-ONE / CONTACT ***       \\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .pg5-s1-contact {
    padding-block: var(--padd-60-100);
    text-align: center;

    @media (width > 47.5rem) {
      text-align: unset;
    }
  }

  .decorative-side-svg--pg5-s1 {
    fill: var(--clr-blue-200);
    top: 12.5rem;
    right: -12.5rem;
    z-index: 999;
  }

  .cmp-sub-heading--pg5-s1 {
    margin-inline: auto;

    @media (width > 47.5rem) {
      margin-inline: unset;
    }
  }

  .main-text--pg5-s1 {
    max-width: 65ch;
  }

  .contact-page-contact-box {
    margin-top: 3rem;
  }

  .contact-page-contact-box__list-flex {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    width: fit-content;
    margin-top: 2rem;
    list-style: none;
    text-align: left;

    svg {
      fill: var(--clr-dark-theme-100);
      width: 2rem;
      transition: 0.5s ease-in-out;
    }

    h3 {
      font-size: 1.35rem;
      margin-bottom: 1rem;
      text-transform: uppercase;
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }

    a {
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }

    &:hover svg {
      transform: scale(2.25);
      transition: transform 0.5s ease-in-out fill 0.5s;
    }
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      *** TERMS OF USE / PRIVACY POLICY ***       \\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  #terms-page,
  #privacy-page {
    padding-block: clamp(1.5rem, 8vw, 2.5rem);
  }

  .terms-privacy-pages-flex {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;

    @media (width > 62.5rem) {
    }
  }

  .terms-privacy-section {
    max-width: 70ch;
  }

  .cmp-sub-heading--terms-privacy {
    font-size: 2rem;
  }

  .cmp-main-text--terms-privacy-nav__list {
    list-style: decimal;
    margin-left: 1.5rem;

    li {
      font-size: 1rem;
      margin-top: 0.5rem;
    }
  }

  .terms-privacy-list {
    margin-block: 0.75rem;
    margin-left: 1rem;

    li {
      margin-block: 0.5rem;
    }
  }
}

@layer animations {
  @keyframes rocketFloat-L {
    0% {
      transform: translateY(35rem) rotate(-45deg);
    }
    40% {
      transform: translateY(-140rem) rotate(-45deg);
    }
    50% {
      transform: translateY(-140rem) rotate(135deg);
    }
    90% {
      transform: translateY(35rem) rotate(135deg);
    }
    100% {
      transform: translateY(35rem) rotate(-45deg);
    }
  }

  @keyframes rocketFloat-S {
    0% {
      transform: translateY(10rem) rotate(-45deg);
    }
    100% {
      transform: translateY(-300rem) rotate(-45deg);
    }
  }
}