.callout { width: 100%; display: inline-block; overflow: hidden; height: 300px; padding: 112px 0; background: linear-gradient(to right, #673d88, #406894, #109da4); color: #fff; }
.callout .wrapper { width: 100%; display: inline-block; margin: 0; padding: 0; }
.callout .wrapper .inner { width: 100%; display: inline-block; margin: 0; padding: 0; }
.callout .wrapper .inner .callout-content { width: 100%; display: flex; justify-content: flex-start; align-items: baseline; padding-left: 24px; padding-right: 24px; align-items: center; }
.callout .wrapper .inner .callout-content .left { width: calc(100% - 13rem); padding-right: 32px; display: inline-block; margin: 0; }
.callout .wrapper .inner .callout-content .left p { font-size: 30px; margin-bottom: 0; }
.callout .wrapper .inner .callout-content .right { width: 210px; display: inline-block; margin: 0; padding: 0; text-align: right; }
/* .callout .wrapper .inner .callout-content .right a { padding: 17px 25.6px; border: .1rem solid #061c4c; border-radius: 6px; width: 170px; font-size: 16px; line-height: 0; background-color: #fff; border-color: #fff; color: #061c4c; text-decoration: none; }  */
.callout .wrapper .inner .callout-content .right a { cursor: pointer; user-select: none; display: inline-block; background: rgb(255, 255, 255); height: auto; transition: all .4s ease; text-shadow: none; width: auto; line-height: 1.5em; background-color: transparent; border: 1px solid #ffffff; border-radius: 5px; color: #ffffff; font-size: 13.4px; font-style: normal; font-weight: bold; letter-spacing: .05em; padding: 15px 23px; text-align: center; text-decoration: none !important; text-transform: uppercase; }
.callout .wrapper .inner .callout-content .right a:hover { background: rgb(255, 255, 255); color: #7a2682 !important; }

@media (max-width: 992px){
  .callout { height: 300px; padding: 70px 0; }
}

@media (max-width: 768px) {
  .callout { height: 300px; padding: 70px 0; }
  .callout .wrapper .inner .callout-content { flex-wrap: wrap; gap: 50px; }
  .callout .wrapper .inner .callout-content .left { width: 100%; padding-right: 0; display: inline-block; margin: 0; }
  .callout .wrapper .inner .callout-content .right { width 100%; }
}

@media (max-width: 576px){
  .dnd_area-row-6-padding { padding: 0 !important; }
  .dnd_area-row-5-padding { padding: 0 !important; }
  .callout { height: 300px; padding: 40px 0; }
  .callout .wrapper .inner .callout-content .left p { font-size: 22px; }
  .callout .wrapper .inner .callout-content .right { width 100%; text-align: left; }
  .callout .wrapper .inner .callout-content .right a { padding: 6px 20.5px; }
}