.two-text.reverse .wrapper {
  flex-direction: row-reverse;
}
.two-text .text-inner {
  padding: 35px;
  height: 100%;
  border-radius: 20px;
}
.two-text .text {
  flex: 1 1 50%;
  padding: 0 15px;
}
.two-text .wrapper {
  justify-content: center;
  display: flex;
}
.two-text .wrapper .icon figure img {
  border-radius: var(--image-border-radius);
}
.two-text .wrapper .left h3 {
  color: var(--element1-title);
}
.two-text .wrapper .left h3 span {
  color: var(--element1-highlighted-title);
}
.two-text .wrapper .left .text-inner p, .two-text .wrapper .left .text-inner li, .two-text .wrapper .left .text-inner ul, .two-text .wrapper .left .text-inner ol {
  color: var(--element1-text);
}
.two-text .wrapper .left .text-inner p > a {
  color: var(--element1-link);
}
.two-text .wrapper .left .text-inner p > a:hover {
  color: var(--element1-link-hover);
}
.two-text .wrapper .left .buttons a, .two-text .wrapper .left .buttons button {
  border-width: var(--button-border-width);
  border-radius: var(--button-border-radius);
}
.two-text .wrapper .left .buttons .btn-primary {
  color: var(--element1-btn1-text);
  background-color: var(--element1-btn1-bg);
  border-color: var(--element1-btn1-border);
}
.two-text .wrapper .left .buttons .btn-primary:hover {
  color: var(--element1-btn1-text-hover) !important;
  background-color: var(--element1-btn1-bg-hover) !important;
  border-color: var(--element1-btn1-border-hover) !important;
}
.two-text .wrapper .left .buttons .btn-secondary {
  color: var(--element1-btn2-text);
  background-color: var(--element1-btn2-bg);
  border-color: var(--element1-btn2-border);
}
.two-text .wrapper .left .buttons .btn-secondary:hover {
  color: var(--element1-btn2-text-hover) !important;
  background-color: var(--element1-btn2-bg-hover) !important;
  border-color: var(--element1-btn2-border-hover) !important;
}
.two-text .wrapper .right h3 {
  color: var(--element2-title);
}
.two-text .wrapper .right h3 span {
  color: var(--element2-highlighted-title);
}
.two-text .wrapper .right .text-inner p, .two-text .wrapper .right .text-inner li, .two-text .wrapper .right .text-inner ul, .two-text .wrapper .right .text-inner ol {
  color: var(--element2-text);
}
.two-text .wrapper .right .text-inner p > a {
  color: var(--element2-link);
}
.two-text .wrapper .right .text-inner p > a:hover {
  color: var(--element2-link-hover);
}
.two-text .wrapper .right .buttons a, .two-text .wrapper .right .buttons button {
  border-width: var(--button-border-width);
  border-radius: var(--button-border-radius);
}
.two-text .wrapper .right .buttons .btn-primary {
  color: var(--element2-btn1-text);
  background-color: var(--element2-btn1-bg);
  border-color: var(--element2-btn1-border);
}
.two-text .wrapper .right .buttons .btn-primary:hover {
  color: var(--element2-btn1-text-hover) !important;
  background-color: var(--element2-btn1-bg-hover) !important;
  border-color: var(--element2-btn1-border-hover) !important;
}
.two-text .wrapper .right .buttons .btn-secondary {
  color: var(--element2-btn2-text);
  background-color: var(--element2-btn2-bg);
  border-color: var(--element2-btn2-border);
}
.two-text .wrapper .right .buttons .btn-secondary:hover {
  color: var(--element2-btn2-text-hover) !important;
  background-color: var(--element2-btn2-bg-hover) !important;
  border-color: var(--element2-btn2-border-hover) !important;
}

@media (max-width: 575.5px) {
  .two-text.reverse .wrapper {
    flex-direction: column;
  }
  .two-text .wrapper {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .two-text .text .text-inner {
    padding: 20px;
  }
  .two-text .text.text2 {
    margin-bottom: 0;
  }
  .two-text .text {
    flex: 1 1 100%;
    margin-bottom: 20px;
  }
}
@media (min-width: 576px) and (max-width: 767.5px) {
  .two-text.reverse .wrapper {
    flex-direction: column;
  }
  .two-text .wrapper {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .two-text .text.text2 {
    margin-bottom: 0;
  }
  .two-text .text {
    flex: 1 1 100%;
    margin-bottom: 20px;
  }
}
@media (min-width: 768px) and (max-width: 991.5px) {
  .two-text.reverse .wrapper {
    flex-direction: column;
  }
  .two-text .wrapper {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .two-text .text.text2 {
    margin-bottom: 0;
  }
  .two-text .text {
    flex: 1 1 100%;
    margin-bottom: 20px;
  }
}