:root {
  --primary-color: #242424;
  --secondary-color: #515151;
  --accent-color: #004e64;
}

.pas-main-banner {
  margin-top: 140px;

  @media (max-width: 1024px) {
    margin-top: 100px;
  }

  @media (max-width: 640px) {
    margin-top: 80px;
  }

  .pas-main-slides {
    background: url('/wp-content/themes/pas/pasv2/images/pages/contact-centre/pas-cc-banner.png')
      center center / cover no-repeat;

    @media (max-width: 1024px) {
      background: #e7fff2
        url('/wp-content/themes/pas/pasv2/images/pages/contact-centre/banner-v2/pas-cc-ipad.png') -3rem
        center / 100% no-repeat;
    }

    @media (max-width: 820px) {
      background-size: 105%;
      background-position: 160% center;
    }

    @media (max-width: 600px) {
      --line: 200px;

      background:
        linear-gradient(
          to bottom,
          transparent 0,
          transparent var(--line),
          #d6e4e6 var(--line),
          #d6e4e6 100%
        ),
        url('/wp-content/themes/pas/pasv2/images/pages/contact-centre/banner-v2/pas-cc-mobile.png')
          no-repeat center top;
      background-size:
        100% 100%,
        100% auto;
    }

    .pas-banner-caption {
      @media (max-width: 600px) {
        width: 100%;
        margin-block-start: 200px;
        text-align: center;
      }
    }

    h1 {
      color: var(--accent-color);
      font-size: 45px;
      line-height: 1;
      margin-block: 0 12px;

      @media (max-width: 1024px) {
        font-size: 36px;
      }

      @media (max-width: 640px) {
        font-size: 28px;
      }
    }

    p {
      font-weight: 500;
      font-size: 18px;
      line-height: 30px;
      color: var(--primary-color);

      @media (max-width: 640px) {
        font-size: 16px;
        line-height: 26px;
      }

      .global-slash {
        font-size: 18px;
        line-height: 30px;

        @media (max-width: 640px) {
          font-size: 16px;
          line-height: 26px;
        }
      }
    }
  }
}

.global-section {
  padding-block: 120px;

  @media (max-width: 1024px) {
    padding-block: 80px;
  }

  @media (max-width: 640px) {
    padding-block: 60px;
  }

  ~ .global-section {
    padding-block-start: 30px;

    &.section-2 .flex-row:first-child {
      margin-block-end: 150px;

      @media (max-width: 1024px) {
        margin-block-end: 80px;
      }

      @media (max-width: 640px) {
        margin-block-end: 50px;
      }
    }
  }
}

.section-3 {
  .global-header {
    text-align: center;
    margin-inline: auto;
    width: min(34ch, 100%);
  }

  .flex-row {
    justify-content: center;
    gap: 60px;

    @media (max-width: 1024px) {
      gap: 30px;
    }

    @media (max-width: 768px) {
      flex-direction: column;
      align-items: center;
    }

    .flex-50 {
      flex: 0 1 620px;
      background-color: #f3f7f8;
      border-radius: 20px;
      padding: 50px;
      padding-block-start: 42px;
      justify-content: unset;

      @media (max-width: 1024px) {
        padding: 35px;
        padding-block-start: 30px;
      }

      @media (max-width: 768px) {
        flex: 1 1 100%;
        width: 60%;
      }

      @media (max-width: 600px) {
        width: 75%;
      }

      @media (max-width: 480px) {
        padding: 24px;
        border-radius: 14px;
        width: 100%;
      }

      .gradient-box-1 {
        --url: url('/wp-content/themes/pas/pasv2/images/pages/contact-centre/outbound-call.svg');
      }

      .gradient-box-2 {
        --url: url('/wp-content/themes/pas/pasv2/images/pages/contact-centre/management-solutions.svg');
      }
      .gradient-p-title {
        position: relative;
        color: var(--accent-color);

        font-size: 24px;
        font-weight: 600;
        display: flex;
        align-items: flex-start;

        @media (max-width: 600px) {
          font-size: 20px;
        }

        @media (max-width: 820px) {
          text-align: start;
        }

        &::before {
          content: '';
          width: 33px;
          height: 30px;
          background-size: 33px 30px;
          background-repeat: no-repeat;
          background-image: var(--url);
          display: block;
          margin-inline-end: 17px;
          margin-block-start: 8px;

          @media (max-width: 600px) {
            width: 26px;
            height: 24px;
            background-size: 26px 24px;
            margin-block-start: 4px;
          }
        }
      }

      .gradient-sub-p {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 7px;
        font-size: 18px;
        color: var(--secondary-color);
        font-weight: 400;
        margin-block-end: 10px;

        @media (max-width: 600px) {
          font-size: 16px;
          text-align: start;
        }

        &::before {
          content: '';
          background-image: url('/wp-content/themes/pas/pasv2/images/pages/contact-centre/checkmark.svg');
          background-repeat: no-repeat;
          background-size: 24px 24px;
          width: 24px;
          height: 24px;
          display: inline-block;
          flex: 0 0 24px;
        }

        img {
          display: none;
        }
      }
    }
  }
}

.section-4 {
  .global-header {
    width: min(34ch, 100%);
    margin-inline: auto;
    margin-block-end: 60px;

    @media (max-width: 640px) {
      margin-block-end: 40px;
    }
  }

  .flex-33 {
    padding-inline: 49.5px;

    @media (max-width: 1024px) {
      padding-inline: 24px;
      padding-block: 40px;
    }

    &:first-of-type {
      padding-inline-start: 0;
      border-right: 3px solid #ececec;

      @media (max-width: 768px) {
        border-right: none;
        border-bottom: 3px solid #ececec;
        padding-block-start: 0;
      }
    }
    &:last-of-type {
      padding-inline-end: 0;
      border-left: 3px solid #ececec;

      @media (max-width: 768px) {
        border-left: none;
        padding-block-end: 0;
        border-top: 3px solid #ececec;
      }
    }

    @media (max-width: 768px) {
      flex: 1 1 100%;
      width: 100%;
      padding-inline: 0;
    }

    .flex-hold {
      text-align: center;

      .feature-bpo-title {
        color: var(--accent-color);
        font-weight: 600;
        font-size: 24px;
        line-height: 32px;
        text-wrap: pretty;

        @media (max-width: 480px) {
          font-size: 20px;
          line-height: 28px;
        }
      }

      .feature-bpo-content {
        color: var(--secondary-color);
      }
    }
  }
}

.section-5 {
  background-image: url(/wp-content/themes/pas/pasv2/images/pages/homepage/v2/lastCTAbackground.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding-block: 80px !important;

  @media (max-width: 640px) {
    padding-block: 50px !important;
  }

  .cta {
    margin-inline: auto;
    background-color: #005866;
    background-image: url(/wp-content/themes/pas/pasv2/images/pages/contact-centre/last-cta-section.png);
    background-repeat: no-repeat;
    background-position: right center;
    border-radius: 30px;
    padding: 50px 100px;

    @media (max-width: 1024px) {
      padding: 40px 50px;
    }

    @media (max-width: 768px) {
      background-image: none;
    }

    @media (max-width: 480px) {
      padding: 30px 24px;
      border-radius: 20px;
    }

    .cta-hold {
      width: 50%;

      @media (max-width: 768px) {
        width: 100%;
      }

      .cta-text-1 {
        color: #00e1a9;
        font-weight: 700;
        font-size: 23px;
        line-height: 28px;
        margin-block-end: 15px;

        @media (max-width: 480px) {
          font-size: 19px;
          line-height: 24px;
        }
      }

      .cta-text-2 {
        color: #ffffff;
        font-weight: 700;
        font-size: 23px;
        line-height: 28px;
        margin-block-end: 40px;

        @media (max-width: 480px) {
          font-size: 19px;
          line-height: 24px;
          margin-block-end: 28px;
        }
      }

      .global-button {
        all: unset;
        cursor: pointer;
        background-color: #ffffff;
        border-radius: 3px;
        padding: 13px 33px;
        font-size: 16px;
        color: var(--accent-color);
        font-weight: 500;

        &:hover span::after {
          margin-left: 10px;
        }

        @media (max-width: 820px) {
          margin-inline: auto;
          width: fit-content;
          display: block;
        }

        span::after {
          all: unset;
          content: '>';
          color: var(--accent-color);
          font-weight: 600;
          font-size: inherit;
          margin-left: 5px;
          transition: margin-left 350ms ease-in-out;
        }
      }
    }
  }
}

@media (max-width: 1300px) {
  .__appendImage {
    img {
      width: 420px;
      object-fit: contain;
      aspect-ratio: 4 / 3;
      margin-inline: auto;
    }
  }

  .section-1 {
    .flex-row {
      align-items: center;
    }
  }

  .section-1,
  .section-3 {
    .__appendImage img {
      scale: 1.5;
    }
  }
}

@media (max-width: 820px) {
  .flex-hold {
    text-align: center;

    .__appendImageHere {
      + img {
        width: 480px;
        object-fit: contain;
        aspect-ratio: 4 / 3;
        margin-inline: auto;
      }
    }
  }
}

@media (max-width: 620px) {
  .flex-50 {
    flex: 0 0 100%;

    .flex-hold {
      text-align: center;

      .__appendImageHere {
        + img {
          width: 100%;
          object-fit: contain;
          aspect-ratio: 4 / 3;
          margin-inline: auto;
        }
      }
    }
  }
}

.form-section {
  background-color: #f3f7f8;
  padding-block: 120px;

  &.__hide-form {
    display: none;
  }

  .form-div {
    margin-inline: auto;
    width: 100%;
    max-width: 48rem;
    border-radius: 1.5rem;
    background-color: #ffffff;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);

    .form-headline {
      margin-bottom: 2rem;
      font-size: 1.5rem;
      line-height: 1.375;
      font-weight: 700;
      color: #0f172a;
    }

    .material-row-2 {
      display: grid;
      grid-template-columns: repeat(1, minmax(0, 1fr));
      column-gap: 1.5rem;
      row-gap: 1.25rem;
    }

    .material-group {
      position: relative;

      .material-input {
        width: 100%;
        border-radius: 0.25rem;
        border: 1px solid #e2e8f0;
        background-color: #f8fafc;
        box-sizing: border-box;
        padding: 1rem 0.925rem;
        font-size: 0.875rem;
        color: #0f172a;
        outline: none;
        transition:
          border-color 150ms,
          background-color 150ms,
          box-shadow 150ms;
      }

      .material-input::placeholder {
        color: transparent;
      }

      .material-input:focus {
        border-color: #1bcda1;
        background-color: #ffffff;
        box-shadow: 0 0 0 2px rgba(27, 205, 161, 0.2);
      }

      textarea.material-input {
        min-height: 112px;
        resize: none;
        padding-top: 1.5rem;
      }

      select.material-input {
        cursor: pointer;
        appearance: none;
        background-repeat: no-repeat;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-position: right 1rem center;
        background-size: 16px;
        padding-right: 2.5rem;
      }

      .__material-label {
        pointer-events: none;
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.875rem;
        color: #94a3b8;
        background-color: #f8fafc;
        transition: all 150ms;
      }

      &.__material-focus-in .__material-label {
        top: -0.5rem;
        transform: translateY(0);
        font-size: 0.75rem;
        font-weight: 500;
        color: #0f9c7d;
        background-color: #f8fafc;
      }

      .material-error-label {
        display: none;
        margin-top: 0.375rem;
        font-size: 0.75rem;
        font-weight: 500;
        color: #ef4444;
      }

      &.__is_empty .material-error-label,
      &.__is_emailblank .material-error-label {
        display: block;
      }

      &.__is_empty .material-input,
      &.__is_emailblank .material-input {
        border-color: #f87171;
        background-color: rgba(254, 242, 242, 0.5);
      }
    }

    .submit {
      margin-top: 0.5rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
      border-radius: 0.75rem;
      background-color: #1bcda1;
      padding: 0.875rem 2rem;
      font-size: 0.875rem;
      font-weight: 600;
      color: #ffffff;
      transition: background-color 150ms;
      text-decoration: none;
    }

    .submit:hover {
      background-color: #17b88f;
    }
  }
}

@media (min-width: 640px) {
  .form-section .form-div {
    padding: 3rem;
  }

  .form-section .form-div .form-headline {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .form-section .form-div .material-row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-section .form-div .material-group.half-input {
    grid-column: span 1 / span 1;
  }

  .form-section .form-div .material-group.full-input,
  .form-section .form-div .material-group.custom-textarea {
    grid-column: span 2 / span 2;
  }

  .form-section .form-div .submit {
    grid-column: span 2 / span 2;
    width: fit-content;
  }
}