/* feature box */
.feature-box-main {
  padding: 60px;
  gap: 60px;
}
.feature-box-content h2 {
  font-size: 30px;
  margin-bottom: 20px;
  color: var(--white);
}
.feature-box-main div {
  flex: 0 calc(50% - 30px);
}
.feature-box-content p,
.feature-box-content ul {
  color: var(--white);
  font-size: 18px;
}
.feature-box-content p {
  margin-bottom: 20px;
  line-height: 24px;
}
.feature-box-content ul li {
  margin-bottom: 10px;
  position: relative;
  list-style: none;
  padding-left: 24px;
}
.feature-box-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'>\<path d='M8.2125 0V1.515C11.505 1.92 13.8375 4.9125 13.4325 8.205C13.0875 10.935 10.9425 13.1025 8.2125 13.425V14.925C12.3375 14.5125 15.3375 10.8525 14.925 6.7275C14.5875 3.165 11.76 0.3525 8.2125 0ZM6.7125 0.0225C5.25 0.165 3.855 0.7275 2.715 1.6725L3.7875 2.7825C4.6275 2.1075 5.64 1.6725 6.7125 1.5225V0.0225ZM1.6575 2.73C0.720333 3.86836 0.14332 5.25998 0 6.7275H1.5C1.6425 5.6625 2.0625 4.65 2.73 3.8025L1.6575 2.73ZM10.0875 4.8525L6.4275 8.5125L4.8375 6.9225L4.0425 7.7175L6.4275 10.1025L10.8825 5.6475L10.0875 4.8525ZM0.00749999 8.2275C0.1575 9.6975 0.735 11.085 1.665 12.225L2.73 11.1525C2.06763 10.3047 1.64539 9.29447 1.5075 8.2275H0.00749999ZM3.7875 12.255L2.715 13.2825C3.85123 14.2293 5.24202 14.819 6.7125 14.9775V13.4775C5.64553 13.3396 4.63527 12.9174 3.7875 12.255Z' fill='white' fill-opacity='0.7'/>\</svg>");
}
.feature-box-image img {
  border-radius: 20px;
}
.feature-box-main.row-reverse .feature-box-content h2,
.feature-box-main.row-reverse .feature-box-content p,
.feature-box-main.row-reverse .feature-box-content ul li {
  color: var(--text-color);
}
.feature-box-main.row-reverse .feature-box-content ul li::before {
  filter: brightness(0);
}
.feature-box-main.row-reverse .btn-secondary {
  color: var(--white);
  border: 1px solid var(--primary);
}
.feature-box-main.row-reverse .btn-secondary:hover {
  color: var(--primary);
}
.feature-box-main.row-reverse .btn-secondary::before {
  background: var(--primary);
}
@media (max-width: 767px) {
  /* feature box */
  .feature-box-main {
    flex-direction: column;
    padding: 60px 20px;
  }
  .feature-box-main div {
    flex: 0 100%;
    width: 100%;
  }
}
@media (max-width: 576px) {
  .featurebox-wrapper {
    flex-direction: column;
  }
}