.quote {
  background-color: var(--dark-bg);
  padding-block: 75px;
  margin-block: 50px; }
  .quote.reverse .wrapper {
    flex-direction: row-reverse; }
    .quote.reverse .wrapper .text-group .text {
      flex-direction: row-reverse; }
      .quote.reverse .wrapper .text-group .text h2,
      .quote.reverse .wrapper .text-group .text h2 > p {
        text-align: right; }
    .quote.reverse .wrapper .text-group .buttons {
      justify-content: flex-end; }
    .quote.reverse .wrapper .specialist {
      align-items: flex-start; }
  .quote.no-margin-bottom {
    margin-bottom: 0px !important; }
  .quote .wrapper {
    display: flex;
    align-items: center; }
    .quote .wrapper .text-group {
      width: 60%; }
      .quote .wrapper .text-group .text {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 50px; }
        .quote .wrapper .text-group .text h2,
        .quote .wrapper .text-group .text h2 > p {
          font-size: 50rem;
          color: var(--secondary-text);
          font-style: italic;
          font-weight: 400;
          display: inline-block; }
      .quote .wrapper .text-group .buttons {
        justify-content: flex-start; }
        .quote .wrapper .text-group .buttons .btn {
          margin: 0; }
    .quote .wrapper .specialist {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      width: 40%; }
      .quote .wrapper .specialist figure {
        max-width: 200px; }
        .quote .wrapper .specialist figure img {
          width: 100%;
          aspect-ratio: 1;
          border: 5px solid #fff;
          border-radius: 50%; }
      .quote .wrapper .specialist h3 {
        color: var(--secondary-text);
        font-weight: 700;
        font-size: 35rem;
        margin-top: 25px;
        margin-bottom: 10px; }
      .quote .wrapper .specialist p {
        color: var(--element1-color); }

@media (max-width: 575.5px) {
  .quote .wrapper, .quote.reverse .wrapper {
    flex-direction: column;
    gap: 50px; }
    .quote .wrapper .text-group, .quote.reverse .wrapper .text-group {
      width: 100%; }
      .quote .wrapper .text-group .text, .quote.reverse .wrapper .text-group .text {
        align-items: center;
        flex-direction: column-reverse;
        gap: unset; }
        .quote .wrapper .text-group .text h2,
        .quote .wrapper .text-group .text h2 > p, .quote.reverse .wrapper .text-group .text h2,
        .quote.reverse .wrapper .text-group .text h2 > p {
          text-align: center;
          font-size: 30rem;
          margin-block: 25px; }
        .quote .wrapper .text-group .text img, .quote.reverse .wrapper .text-group .text img {
          max-width: 40px; }
      .quote .wrapper .text-group .buttons, .quote.reverse .wrapper .text-group .buttons {
        margin: 0;
        justify-content: center; }
    .quote .wrapper .specialist, .quote.reverse .wrapper .specialist {
      width: 100%;
      align-items: center; }
      .quote .wrapper .specialist h3, .quote.reverse .wrapper .specialist h3 {
        margin-top: 10px;
        font-size: 22rem; }
      .quote .wrapper .specialist figure, .quote.reverse .wrapper .specialist figure {
        max-width: 100px; } }
@media (min-width: 576px) and (max-width: 767.5px) {
  .quote .wrapper, .quote.reverse .wrapper {
    flex-direction: column;
    gap: 50px; }
    .quote .wrapper .text-group, .quote.reverse .wrapper .text-group {
      width: 100%; }
      .quote .wrapper .text-group .text, .quote.reverse .wrapper .text-group .text {
        align-items: center;
        flex-direction: column-reverse;
        gap: 10px; }
        .quote .wrapper .text-group .text h2,
        .quote .wrapper .text-group .text h2 > p, .quote.reverse .wrapper .text-group .text h2,
        .quote.reverse .wrapper .text-group .text h2 > p {
          text-align: center;
          font-size: 35rem; }
        .quote .wrapper .text-group .text img, .quote.reverse .wrapper .text-group .text img {
          max-width: 50px; }
      .quote .wrapper .text-group .buttons, .quote.reverse .wrapper .text-group .buttons {
        margin: 0;
        justify-content: center; }
    .quote .wrapper .specialist, .quote.reverse .wrapper .specialist {
      width: 100%;
      align-items: center; }
      .quote .wrapper .specialist h3, .quote.reverse .wrapper .specialist h3 {
        margin-top: 10px; }
      .quote .wrapper .specialist figure, .quote.reverse .wrapper .specialist figure {
        max-width: 125px; } }
@media (min-width: 768px) and (max-width: 991.5px) {
  .quote .wrapper, .quote.reverse .wrapper {
    flex-direction: column;
    gap: 50px; }
    .quote .wrapper .text-group, .quote.reverse .wrapper .text-group {
      width: 100%; }
      .quote .wrapper .text-group .text, .quote.reverse .wrapper .text-group .text {
        align-items: center;
        flex-direction: column-reverse;
        gap: 10px; }
        .quote .wrapper .text-group .text h2,
        .quote .wrapper .text-group .text h2 > p, .quote.reverse .wrapper .text-group .text h2,
        .quote.reverse .wrapper .text-group .text h2 > p {
          text-align: center;
          font-size: 40rem; }
        .quote .wrapper .text-group .text img, .quote.reverse .wrapper .text-group .text img {
          max-width: 50px; }
      .quote .wrapper .text-group .buttons, .quote.reverse .wrapper .text-group .buttons {
        margin: 0;
        justify-content: center; }
    .quote .wrapper .specialist, .quote.reverse .wrapper .specialist {
      width: 100%;
      align-items: center; }
      .quote .wrapper .specialist h3, .quote.reverse .wrapper .specialist h3 {
        margin-top: 10px; }
      .quote .wrapper .specialist figure, .quote.reverse .wrapper .specialist figure {
        max-width: 150px; } }

/*# sourceMappingURL=quote.css.map */
