.contact {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 0 4vw;
  margin: auto;
  min-height: 72vh;
  max-width: 1600px;

  & .heading {
    position: relative;
    padding: 0 1rem;

    & .title {
      font-size: 3.2rem;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    & .subtitle {
      margin-bottom: 3rem;
      font-size: 1.5rem;
      font-weight: 300;
      text-align: center;
      color: var(--color3);
    }

    & .splitterline {
      position: relative;
      left: 50%;
      width: 100%;
      height: 1px;
      transform: translateX(-50%);
      background-color: var(--color3);

      & .decoration {
        position: absolute;
        top: -50%;
        left: 50%;
        width: 1rem;
        height: 1.5rem;
        transform: translate(-50%, -50%);
        background-color: var(--obsidian);
        border-left: 1px solid var(--color3);
        border-right: 1px solid var(--color3);
      }
    }
  }

  & .info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0 1rem;
    margin-top: 3rem;

    & .introtxt {
      display: block;
      position: relative;
      margin-left: 2rem;
      font-size: 1rem;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: -2rem;
        width: 0;
        height: 100%;
        border-left: 1px solid var(--color3);
      }
    }

    & .block {
      & a {
        position: relative;
        color: var(--color3);
        transform-origin: bottom left;

        /* ---------- UNDERLINE ---------- */
        &::before {
          content: "";
          pointer-events: none;
          position: absolute;
          bottom: -0.2rem;
          left: 0;
          display: block;
          width: 110%;
          height: 1px;
          border-radius: 1rem;
          background-color: var(--color3);
          transform: scaleX(0);
          transform-origin: bottom left;
          transition: all 0.25s ease-out;
        }

        /* ---------- HOVER FX ---------- */
        &:hover {
          color: var(--color3);
          transform: scale(1.05);

          &::before {
            transform: scaleX(1);
          }
        }
      }
    }
  }

  & .socialstitle {
    margin-top: 8rem;
    font-size: 2rem;
    text-align: center;
  }

  & .socials {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 1.6rem;
    height: 2.5rem;
    margin-top: 2rem;
    filter: invert();

    & a {
      height: 100%;
      width: fit-content;

      & .social-icons {
        height: 2.5rem;
        transition: transform 0.25s ease-out;

        &:hover {
          transform: scale(1.15);
        }
      }
    }
  }
}

@media (min-width: 768px) {
  .contact {
    padding: 0 6vw;

    & .heading {
      padding: 0 4rem;
    }

    & .info {
      padding: 0 4rem;
    }
  }
}

@media (min-width: 1312px) {
  .contact {
    padding: 0 10rem;

    & .heading {
      padding: 0;

      & .title {
        font-size: 8rem;
      }
      & .subtitle {
        font-size: 2.6rem;
        margin-bottom: 6rem;
      }
    }
    & .info {
      flex-direction: row;
      gap: 0;
      justify-content: space-between;
      padding: 0;
      margin-top: 6rem;

      & .introtxt {
        max-width: calc(1 / 3 * 100%);
      }

      & .block {
        width: calc(1 / 3 * 100%);
        margin-left: 2rem;

        & h3 {
          font-size: 1.5rem;
          margin-bottom: 0.8rem;
        }
      }

      & .block:last-of-type {
        position: relative;

        /* &::after {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          width: 0;
          height: 100%;
          border-right: 1px solid var(--color3);
        } */
      }
    }
  }
}