/*--------------------------------------------------------------
# Funfact
--------------------------------------------------------------*/
    .funfact__inner {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 30px;
    }

    @media (min-width: 768px) {
      .funfact__inner {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1200px) {
      .funfact__inner {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .funfact {
      background-color: transparent;
      padding-block: 80px;
    }

    .funfact.content-grid > .funfact__inner {
      grid-column: content;
      width: 100%;
    }

    .funfact__item {
      position: relative;
      text-align: center;
      padding: 0px 30px 38px;
    }

    @media (min-width: 992px) and (max-width: 1199px) {
      .funfact__item {
        padding-left: 25px;
        padding-right: 25px;
      }
    }

    .funfact__item__shape {
      width: 100%;
      height: calc(100% - 36px);
      position: relative;
      position: absolute;
      left: 0px;
      bottom: 0px;
      overflow: hidden;
      border-radius: 0px 0px 500px 500px;
      background-color: var(--findox-white3, #ecf5f4);
    }

    .funfact__item__shape::after {
      content: "";
      width: 100%;
      height: 0%;
      position: absolute;
      left: 0px;
      bottom: 0px;
      background-color: var(--findox-base, #2478a9);
      transition: all 500ms ease;
    }

    .funfact__item:hover .funfact__item__shape::after {
      height: 100%;
    }

    .funfact__item__content {
      position: relative;
      z-index: 1;
    }

    .funfact__item__icon-box {
      width: 74px;
      height: 74px;
      position: relative;
      margin: 0px auto 20px;
    }

    .funfact__item__icon-box::before,
    .funfact__item__icon-box::after {
      content: "";
      width: 0px;
      height: 0px;
      position: absolute;
      top: 0px;
      border-style: solid;
      transition: all 500ms ease;
    }

    .funfact__item__icon-box::before {
      left: -36px;
      border-width: 0 0 36px 36px;
      border-color: transparent transparent var(--findox-primary, #e17416) transparent;
    }

    .funfact__item__icon-box::after {
      right: -36px;
      border-width: 36px 0 0 36px;
      border-color: transparent transparent transparent var(--findox-primary, #e17416);
    }

    .funfact__item:hover .funfact__item__icon-box::before {
      border-color: transparent transparent var(--findox-base, #2478a9) transparent;
    }

    .funfact__item:hover .funfact__item__icon-box::after {
      border-color: transparent transparent transparent var(--findox-base, #2478a9);
    }

    .funfact__item__icon {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      font-size: 38px;
      color: var(--findox-white, #ffffff);
      overflow: hidden;
      background-color: var(--findox-base, #2478a9);
      border-radius: 0px 0px 50px 50px;
      transition: all 500ms ease;
    }

    .funfact__item__icon::after {
      content: "";
      width: 100%;
      height: 0%;
      position: absolute;
      left: 0px;
      bottom: 0px;
      z-index: -1;
     background: linear-gradient(135deg, #e17416 0, #f97809 100%);
      transition: all 500ms ease;
    }

    .funfact__item__icon svg {
      width: 1em;
      height: 1em;
      fill: currentColor;
    }

    .funfact__item:hover .funfact__item__icon {
      color: var(--findox-white, #fff);
    }

    .funfact__item:hover .funfact__item__icon::after {
      height: 100%;
      top: 0px;
    }

    .funfact__item__count {
      margin-bottom: 8px;
      font-size: 20px;
      font-weight: 700;
      line-height: 1;
      color: var(--findox-black5, #222222);
      transition: all 500ms ease;
    }

    @media (min-width: 576px) and (max-width: 767px) {
      .funfact__item__count {
        font-size: 40px;
      }
    }

    @media (min-width: 992px) and (max-width: 1199px) {
      .funfact__item__count {
        font-size: 40px;
      }
    }

    .funfact__item__title {
      margin: 0px;
      transition: all 500ms ease;
    }

    .funfact__item:hover .funfact__item__count,
    .funfact__item:hover .funfact__item__title {
      color: var(--findox-white, #ffffff);
    }

    .funfact--two {
      position: relative;
    }

    .funfact--two .funfact__bg {
      width: 100%;
      height: calc(100% + 339px);
      position: absolute;
      left: 0px;
      bottom: 0px;
      background-repeat: no-repeat;
      background-position: top center;
      background-size: cover;
    }

    .values-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .values-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: #444;
    transition: color 500ms ease;
  }

  .funfact__item:hover .values-list li {
    color: var(--findox-white);
  }

  .values-list li svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: var(--findox-primary);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    transition: stroke 500ms ease;
  }

  .funfact__item:hover .values-list li svg {
    stroke: var(--findox-white);
  }

    @media (max-width: 991px) {
      .funfact--two .funfact__bg {
        height: calc(100% + 300px);
      }
    }

    @media (max-width: 575px) {
      .funfact--two .funfact__bg {
        height: calc(100% + 250px);
      }
    }

    .funfact--two .funfact__inner {
      position: relative;
      z-index: 1;
    }

    .funfact--two .funfact__item {
      display: grid;
      grid-gap: 18px;
      align-items: center;
      grid-template-columns: 74px auto;
      padding: 48px 35px 48px 0px;
      height: 200px;
      overflow: hidden;
          overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    transition: .3s;
    }

    .funfact--two .funfact__item__shape {
      height: 100%;
      border-radius: 15px;
      background-color: #ffffffba;
      background-image: url(../assets/images/shapes/dots.png);
      background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    

    }

    .funfact--two .funfact__item__shape::after {
      content: "";
      width: 0%;
      height: 100%;
      top: 0px;
      right: 0px;
      left: auto;
      bottom: auto;

      
    }

    .funfact--two .funfact__item:hover .funfact__item__shape::after {
      width: 100%;
      left: 0px;
    }

    .funfact--two .funfact__item__icon-box {
      margin: 0px;
      z-index: 1;
    }

    .funfact--two .funfact__item__icon-box::before {
      top: -36px;
      left: 0px;
      border-width: 36px 0 0 36px;
      border-color: transparent transparent transparent var(--findox-primary, #e17416);
    }

    .funfact--two .funfact__item__icon-box::after {
      top: auto;
      right: auto;
      left: 0px;
      bottom: -36px;
      border-width: 36px 36px 0 0;
      border-color: var(--findox-primary, #e17416) transparent transparent transparent;
    }

    .funfact--two .funfact__item:hover .funfact__item__icon-box::before {
      border-color: transparent transparent transparent var(--findox-white, #ffffff);
    }

    .funfact--two .funfact__item:hover .funfact__item__icon-box::after {
      border-color: var(--findox-white, #ffffff) transparent transparent transparent;
    }

    .funfact--two .funfact__item__icon {
      border-radius: 0px 50px 50px 0px;
    }

    .funfact--two .funfact__item__icon::after {
      content: "";
      width: 0%;
      height: 100%;
      top: 0px;
      right: 0px;
      left: auto;
      bottom: auto;
    }

    .funfact--two .funfact__item:hover .funfact__item__icon::after {
      width: 100%;
      left: 0px;
    }

    .funfact--two .funfact__item__content {
      text-align: left;
    }

    .funfact--two .funfact__item__count {
      margin-bottom: 5px;
      font-size: 20px;
    }