@import url('/styles/subscribe.css');

  .other-ways-contact {
    @media (width >= 992px) {
      background: var(--secondary-gray-30);
      padding: var(--space-50px) 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .ways-connect {
      width: 100%;
      background: var(--secondary-gray-30);
      margin-top: var(--space-20px);
      padding: var(--space-20px) 0;

      @media (width >= 768px) {
        background: var(--secondary-gray-10);
      }

      @media (width >= 992px) {
        width: 46.46%;
        min-height: 435px;
        border-radius: 0 0 10px 10px;
        margin: 0 0 0 var(--space-20px);
        padding: var(--space-40px) var(--space-50px) var(--space-10px);
      }

      .ways-connect__title :is(h1, h2, h3, h4, h5, h6) {
        margin: 0 0 var(--space-15px) var(--space-15px);
        font-size: var(--heading-font-17-mob-text-medium);
        color: var(--gray-deep);
        font-weight: var(--fw-700);
        line-height: var(--heading-lh-17-mob-text-normal);

        @media (width >= 768px) {
          margin: 0 0 var(--space-15px) var(--space-20px);
        }

        @media (width >= 1024px) {
          margin: 0 0 var(--space-15px);
          font-size: var(--heading-font-14-des);
        }
      }

      .ways-connect__faq {
        padding: var(--space-17px) var(--space-15px);
        background-color: var(--secondary-gray-10);
        border-bottom: var(--light-border-color) solid 1px;

        @media (width >= 768px) {
          padding: var(--space-17px) var(--space-20px);
        }

        @media (width >= 1024px) {
          padding: var(--space-32px) 0;
        }

        .accordion__item {
          .ways-connect__faqtitle {
            font-weight: var(--fw-700);
            display: flex;
            line-height: var(--subscription-lh-14-mob-text-normal);
            font-size: var(--heading-font-20-mob-text);
            color: var(--gray-deep);
            justify-content: space-between;
            align-items: center;
            cursor: pointer;

            .ways-connect__faqtitleTag {
              font-weight: var(--fw-700);
              line-height: var(--subscription-lh-14-mob-text-normal);
              font-size: var(--heading-font-20-mob-text);
              color: var(--gray-deep);
            }

            @media (width >= 1024px) {
              .ways-connect__faqtitleTag{
                font-size: var(--heading-font-16-des);
                line-height: var(--heading-lh-11-des-text-small);
              }
            }

            &::after {
              content: '';
              width: 10px;
              height: 15.45px;
              background-image: url('/icons/subscribe-right-arrow.png');
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center;
              transition: transform 0.3s ease;

              @media (width >= 1024px) {
                width: 11px;
                height: 17px;
              }
            }
          }

          .accordion__content {
            overflow: hidden;
            max-height: 0;
            transition:
              max-height 0.7s ease,
              padding 0.7s ease;

            .ways-connect__faqlist {
              ul {
                display: flex;
                flex-direction: column;
                gap: var(--space-10px);
                margin: var(--space-20px) 0 0;

                @media (width >= 1024px) {
                  gap: var(--space-15px);
                  margin: var(--space-25px) 0 0;
                }

                li a {
                  font-size: var(--heading-font-20-mob-text);
                  float: left;
                  line-height: var(--subscription-lh-14-mob-text-normal);
                  background: none;
                  font-weight: var(--fw-400);
                  color: var(--color-grey);
                  transition: 0.5s;
                  text-decoration: underline;

                  &:hover {
                    color: var(--color-orange-accent);
                    transition: 0.5s;
                    text-decoration: none;
                  }

                  @media (width >= 1024px) {
                    font-size: var(--subscription-font-2-desc);
                    line-height: var(--subscription-lh-3-desc-display);
                  }
                }
              }
            }
          }
        }

        details[open] .accordion__content {
          max-height: 1000px;
        }
      }

      .ways-connect__contacts {
        background: var(--secondary-gray-10);

        .ways-connect__contact {
          background: var(--secondary-gray-10);
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: var(--light-border-color) solid 1px;
          padding: var(--space-17px) var(--space-15px);

          @media (width >= 768px) {
            padding: var(--space-17px) var(--space-20px);
          }

          @media (width >= 1024px) {
            padding: var(--space-32px) 0;
          }

          .ways-connect__label {
            font-size: var(--heading-font-20-mob-text);
            margin: 0;
            color: var(--gray-deep);
            font-weight: var(--fw-700);
            line-height: var(--subscription-lh-14-mob-text-normal);

            @media (width >= 1024px) {
              font-size: var(--heading-font-16-des);
              line-height: var(--heading-lh-11-des-text-small);
            }
          }

          .ways-connect__value {
            line-height: var(--subscription-lh-14-mob-text-normal);

            @media (width >= 1024px) {
              line-height: var(--heading-lh-11-des-text-small);
            }

            .ways-connect__value-list {
              margin: 0;

              li {
                all: unset;

                .ways-connect__value-anchor {
                  font-weight: var(--fw-700);
                  color: var(--darker-color);
                  font-size: var(--body-font-size-xxs);

                  &:hover {
                    color: var(--color-orange-accent);
                    transition: 0.5s;
                    text-decoration: none;
                  }

                  @media (width >= 1024px) {
                    font-size: var(--heading-font-16-des);
                  }
                }
              }
            }
          }
        }
      }
    }
  }