/*======================================
6. Home-style-3
=======================================*/

/* 6.1 wpo-features-s2 */
.wpo-features-s2 {
  .features-wrap {
    .feature-item {
      padding: 44px 34px;
      background: rgba(215, 58, 62, 0.24); // #d73a3e3d
      border-radius: 20px;
      text-align: center;

      @media (max-width: 1199px) {
        padding: 44px 30px;
      }

      @media (max-width: 991px) {
        padding: 44px 24px;
        margin-bottom: 30px;
      }

      .icon {
        width: 130px;
        height: 130px;
        border: 1px solid $theme-primary-color;
        margin: auto;
        border-radius: 50%;
        margin-bottom: 30px;
        position: relative;

        // Flexbox center for image
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff; // optional — keeps circle filled

        .feature-img {
          width: 60px; // adjust as needed
          height: 60px;
          object-fit: contain;
          display: block;
        }
      }

      .feature-text {
        h2 {
          font-weight: 450;
          font-size: 30px;
          line-height: 38px;
          text-align: center;

          a {
            color: $dark-gray;
            text-decoration: none;

            &:hover {
              color: $theme-primary-color;
            }
          }
        }

        p {
          margin-bottom: 0;
        }
      }
    }
  }

 .features-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;  // same size as icon
  height: 100%;
  transform-origin: center center; // rotate around center
}

  .dots {
    width: 15px;
    height: 15px;
    background: $theme-primary-color-gradient;
    border-radius: 50%;
    left: 25px;
    top: 0;
    position: relative;
  }

  .features-content {
    h2 {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 15px;
      margin-top: 10px;
    }
  }

  .features-dot:nth-child(1) {
    transform: rotate(0deg);
    animation: features-dot_1 2s infinite linear;
    animation-play-state: paused;
  }

  .feature-item .features-wrapper:hover .features-dot:nth-child(1) {
    animation-play-state: running;
  }

  @keyframes features-dot_1 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes features-dot_2 {
    0% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(540deg);
    }
  }
}

/* 6.2 wpo-about-section-s3 */
.wpo-about-section-s3 {
  @media (max-width: 991px) {
    padding-top: 70px;
  }

  @media (max-width: 575px) {
    padding-top: 50px;
  }

  .wpo-about-wrap {
    .wpo-about-img {
      padding: 0;
      border: 0;
      margin-left: -80px;

      @media (max-width: 991px) {
        margin-left: 0;
      }

      .wpo-about-img-text {
        display: none;
      }
    }

    .wpo-about-text {
      @media (max-width: 991px) {
        margin-top: 30px;
      }
    }
  }
}

/* 6.3 wpo-fun-fact-section-s3 */
.funfact-wrap-sec {
  .funfact-video {
    display: none;
  }
}

.wpo-fun-fact-section-s3 {
  padding-bottom: 0;
  background: linear-gradient(90deg, #c12026 11.32%, #c12026 95.28%);
  position: relative;

  &:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: url(/images/particale.png) no-repeat center center;
    background-size: cover;
  }

  .wpo-fun-fact-wrap {
    .wpo-fun-fact-grids {
      padding: 80px 0 70px;

      @media (max-width: 1199px) {
        padding: 50px 0 40px;
      }

      .grid + .grid:before {
        background: $white;
      }
    }
  }
}

/* 6.4 wpo-campaign-area-s3 */
.wpo-campaign-area-s3 {
  margin: 0;

  .shape-left,
  .shape-right {
    display: none;
  }
}