.contact-wrapper {
  width: 100%;

  .user__contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .user__contact__icons {
      display: flex;
      align-items: baseline;
      gap: 2.5rem;

      .user__contact--icon-text {
        height: 1.5rem;
        width: 1.5rem;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .phone {
        border: none;
        background: none;
        padding: 0;
      }

      .primary-telephone,
      .secondary-telephone,
      .primary-whatsappno,
      .primary-email,
      .secondary-telephone-icon {
        display: none;
      }
    }

    .user__contact__icon-call_container {
      display: flex;
      justify-content: space-between;
      padding: 1.75rem 1rem 1rem;
      clip-path: polygon(72% 12px, 75% 0, 100% 0, 100% 100%, 0 100%, 0 12px);
      background: var(--gradient-4);

      .primary-telephone,
      .secondary-telephone {
        display: block;
      }

      a {
        color: var(--dark-grey-shade-9);
        font-size: var(--fs-12px);
        font-weight: 400;
        line-height: 1.25rem;
        height: 1.25rem;
      }

      .separator {
        background-color: var(--tertiary-black);
        height: 0.875rem;
        width: 0.0625rem;
        margin: 0;
      }
    }
  }

  .contact_wrp {
    .footer-text-medium-xs {
      font-size: var(--body-m-nexa, var(--body-xs-arena));
      font-weight: var(--fw-500);
      line-height: var(--lh-20px-nexa, var(--lh-20px-arena));
    }
  }
}

@media (width >=768px) {
  .user__dropdown {
    .user__contact {
      .user__contact-title {
        padding-top: 1rem;
      }
    }
  }

  .contact-wrapper {
    .user__contact {
      gap: 1rem;

      .user__contact__icons {
        gap: 3rem;

        .user__contact--icon-text {
          img {
            width: 20px;
            height: 20px;
          }
        }

        .phone,
        .whatsapp,
        .email {
          display: flex;
          width: auto;
          height: auto;
          align-items: center;
          gap: 8px;
          color: var(--primary-main-color);
          font-size: var(--fs-16px);
          font-weight: 400;
        }

        .btn-wrap {
          display: flex;
          gap: 3rem;
          flex-shrink: 0;

          .user__contact--icon-text {
            margin-right: inherit !important;

            &:first-child {
              margin-right: -1.5rem;
            }
          }
        }

        .primary-telephone,
        .secondary-telephone,
        .primary-whatsappno,
        .primary-email,
        .secondary-telephone-icon {
          display: flex;
        }
      }

      .user__contact__icon-call_container {
        display: none;

        a {
          font-size: var(--fs-12px);
          line-height: 1rem;
        }

        .separator {
          height: 1rem;
        }
      }
    }
  }
}

@media (width >=1200px) {
  .contact-wrapper {
    .user__contact {
      gap: 1.5rem;

      .user__contact__icon-call_container {
        a {
          font-size: var(--fs-14px);
          line-height: 1.25rem;
        }
      }
    }
  }
}



body.arena {
  .contact_wrp {
    .footer-text-medium-xs {
      font-weight: var(--fw-600);
    }
  }

  .contact-wrapper .user__contact {
    gap: 8px;
  }
}