.clarity { background: #FAF6E2; padding:70px 0 130px; position: relative; }
.clarity .container { }
.clarity .title { max-width:900px; margin:0 auto; text-align:center; padding-bottom:25px; }
.clarity .title h2 { color: #1B2D34;text-align: center;font-family: Nunito;font-size: 37.32px;font-style: normal;font-weight: 800;line-height: 150%; /* 55.98px */ }
.clarity .title h2 span { color: #F89E25;font-family: Nunito;font-size: 37.32px;font-style: normal;font-weight: 800;line-height: 150%;}
.clarity .title h2 span {position: relative;display: inline-block;z-index: 1;}
.clarity .title h2 span::after {content: '';position: absolute;left: 0;bottom: -5px; /* adjust as needed */width: 100%;height: 0.7em; /* height of the underline image */background: url('https://49211645.fs1.hubspotusercontent-na1.net/hubfs/49211645/yellow-underline.svg') no-repeat center bottom;background-size: contain;z-index: -1;pointer-events: none;}

.clarity .cards { display:flex; flex-wrap:wrap; align-items:flex-start;}
.clarity .cards .cards-inner { width:calc(100% / 3 - 20px); margin:0 10px; text-align:center;}
.clarity .cards .cards-inner .card { padding:30px; border-radius: 16px;border: 2px solid rgba(27, 45, 52, 0.08);background: #FFF;}
.clarity .cards .cards-inner .card.card1 { padding:70px 30px;}
.clarity .cards .cards-inner .card.side { display:flex; flex-wrap:wrap; text-align:left; margin-bottom:10px;}
.clarity .cards .cards-inner .card.side .left { width:25%:}
.clarity .cards .cards-inner .card.side .right { width:75%; padding-left:15px;}

.clarity .cards .cards-inner .icon {padding-bottom:30px; }
.clarity .cards .cards-inner .icon img { width:48px; height:48px; object-fit:cover;}
.clarity .cards .cards-inner .card-title {color: #1B2D34;font-family: Nunito;font-size: 25.92px;font-style: normal;font-weight: 700;line-height: 120%; /* 31.104px */ }
.clarity .cards .cards-inner .card-content { padding-top:15px; color: #1B2D34;font-family: Montserrat;font-size: 16px;font-style: normal;font-weight: 500;line-height: 150%; /* 24px */}

.clarity .cards .cards-inner .card.side.card3 {margin-bottom:0;}
.clarity .cards .cards-inner .card.side.card5 {margin-bottom:0;}

.clarity .button-1 { margin-top:25px; text-align:center; width:100%;}
.clarity .button-1-dh { margin-top:25px; text-align:center; width:100%;}

.clarity .bottom-shape { width:100%; position:absolute; bottom:-1px;z-index:2;}
.clarity .bottom-shape img { width:100%; position:absolute; bottom:-1px;}

@media (max-width:1199px) {
  .clarity .cards .cards-inner .card.card1 { margin-bottom: 15px;}
  .clarity .cards .cards-inner .card.side.card3 {margin-bottom:15px;}
  .clarity .cards .cards-inner .card.side.card5 {margin-bottom:15px;}
  .clarity .cards .cards-inner .card.side {margin-bottom:15px;padding:35px 20px;}
  .clarity .cards .cards-inner .card.card1 {padding:35px 20px;}
}
@media (max-width:991px) {
  .clarity .cards .cards-inner { width:100%;}
  .clarity .cards .cards-inner .card.card1 { padding:20px;margin-bottom:15px;}
  .clarity .cards .cards-inner .card { padding:20px;}
  .clarity .cards .cards-inner .card.side.card3 {margin-bottom:15px;}
  .clarity .cards .cards-inner .card.side.card5 {margin-bottom:15px;}
  .clarity .cards .cards-inner .card.side .left { width:100%;}
  .clarity .cards .cards-inner .card.side .right { width:100%;}
  .clarity .cards .cards-inner .card.side { justify-content:center; text-align:center;}
  .clarity .title h2 { font-size:36px;}
  .clarity .title h2 span { font-size:36px;}
  .clarity .cards .cards-inner .card.side {padding:35px 20px;}
  .clarity .cards .cards-inner .card.card1 {padding:35px 20px;}
}