

.block_ghs-faqs {

  background: var(--trust-navy);

  .container {
    display: flex;
    gap: var(--spacing_large);
    flex-direction: column;

    @media screen and (max-width: 767px) {
      flex-direction: column;

      .buttons-wrapper {
        flex-direction: column;
      }
    }


    .faq-block-left {
      flex: 2;
      h2, p {
        color: var(--natural-cotton);
      }

      h2 {
        font-size: var(--h3_clamp) !important;
      }

      .btn-clear {
        color: #fff;
        border: solid 1px #fff;

        transition: 0.3s ease;

        &:hover {
          background-color: var(--green-home);
        }
      }

      .buttons-wrapper {
        display: flex;
        gap: 16px;
      }
    }

    .faq-block-right {
      flex: 4;
      justify-content: center;
      .faq-inner {
        background: rgba(255,255,255,0.18);
        padding: 24px 48px;
        border-radius: var(--border_radius);

        &.active {
          i {
            transform: rotate(45deg);
            color: var(--solar-gold) !important;
          }
        }

        .faq-inner-top {
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          gap: 24px;

          &:hover {
            h3 {
              color: var(--leaf-green);
            }
          }
          h3 {
            transition: 0.3s ease;
            color: var(--natural-cotton);
            font-size: 25px;
            font-weight: 300;
            margin: auto 0;
          }

          i {
            height: fit-content;
            margin: auto 0;
            color: var(--leaf-green);
            font-size: 21px;
            transition: 0.3s ease;
          }
        }

        .faq-inner-bottom {
          margin-top: 12px;
          color: var(--natural-cotton);
        }
      }
    }
  }
}