.sign-up-for-free-hero-section {
  .signup-hero-bg-img {
    padding-bottom: 99px !important;
    background-position-y: -215px;
    padding-top: 161px !important;


    @media (max-width: 1280.99px) {
      background-position: center;
    }

    .signup-hero-title {
      max-width: 1424px;
      padding-bottom: 0;
    }
  }
}

.our-stroy-section {
  padding: 0 8px;
  position: relative;

  @media (max-width: 991.99px) {
    padding: 0 16px;
  }

  .story-ellispe {
    right: 40%;
    bottom: 35%;
    width: 384px;
    height: 384px;
    position: absolute;
    pointer-events: none;
    background-color: rgba(242, 74, 74);
    border-radius: 50%;
    filter: blur(260px);

    @media (max-width: 991.99px) {
      width: 250px;
      height: 250px;
    }
  }

  .our-stroy-container {
    max-width: 1620px;
    margin: 0 auto;
    padding: 82px 0 82px 0;

    @media (max-width: 767.99px) {
      padding: 60px 0 60px 0;
    }

    @media (max-width: 567.99px) {
      padding: 48px 0 48px 0;
    }

    .pt-100 {
      padding-top: 77px;

      @media (max-width: 991.99px) {
        padding-top: 77px;
      }

      @media (max-width: 767.99px) {
        padding-top: 60px;
      }

      @media (max-width: 567.99px) {
        padding-top: 48px;
      }
    }

    .our-story-wrapper {
      gap: 61px;

      @media (max-width: 1299.99px) {
        gap: 40px;
      }

      @media (max-width: 991.99px) {
        gap: 20px;
      }

      @media (max-width: 767.99px) {
        gap: 16px;
      }

      .left-content {
        max-width: 885px;

        @media (max-width: 1550.99px) {
          max-width: 605px;
        }

        @media (max-width: 1024.99px) {
          max-width: 900px;
          margin: 0 auto;
        }

        .our-p {
          margin-top: 33px;

          @media (max-width: 1023.99px) {
            margin-top: 20px;
            text-align: center;

          }

          @media (max-width: 1023.99px) {
            line-height: 140% !important;

          }
        }
      }

      &:nth-child(1) {
        .right-content {
          padding: 0 30px 30px 0;
          background: linear-gradient(312.33deg, #F24A4A 0.81%, rgba(140, 43, 43, 0) 41.76%);
        }
      }

      &:nth-child(2) {
        .right-content {
          padding: 0 0 30px 30px;
          background: linear-gradient(42.33deg, #F24A4A 0.81%, rgba(140, 43, 43, 0) 41.76%);
          
        }
      }

      .right-content {
        border-radius: 15px;
        .story-slider-wrapper {
          max-width: 676px;
          overflow: hidden;
          border-radius: 20px;
          position: relative;
        }

        .story-slider {
          display: flex;
          transition: transform 0.5s ease-in-out;
        }

        .our-stroy-img {
          border-radius: 20px;
          object-fit: cover;
          min-width: 100%;
          max-width: 676px;
          height: 649px;

          @media (max-width: 991.99px) {
            height: 450px;
          }

          @media (max-width: 767.99px) {
            height: 450px;
          }

          @media (max-width: 567.99px) {
            height: auto;
          }
        }
      }
    }
  }
}

.year-box {
  max-width: 170px;
  border-radius: 15px;
  display: flex;
  padding: 16px;
  align-items: center;
  justify-content: center;
  background-color: #F24A4ACC;

  @media (max-width: 767.99px) {
    padding: 12px;
  }

  .year-text {
    font-size: 38px;
    line-height: var(--leading-100);

    @media (max-width: 991.99px) {
      font-size: 28px;
    }

    @media (max-width: 767.99px) {
      font-size: 20px;
    }

    @media (max-width: 576.99px) {
      font-size: 18px;
    }
  }
}

.story-ellispe1 {
  right: 25%;
  top: -5%;
  width: 384px;
  height: 384px;
  position: absolute;
  pointer-events: none;
  background-color: rgba(242, 74, 74);
  border-radius: 50%;
  filter: blur(260px);

  @media (max-width: 991.99px) {
    width: 250px;
    height: 250px;
  }
}


.story-ellispe2 {
  left: 32%;
  top: -7%;
  width: 384px;
  height: 384px;
  position: absolute;
  pointer-events: none;
  background-color: rgba(242, 74, 74);
  border-radius: 50%;
  filter: blur(260px);

  @media (max-width: 991.99px) {
    width: 250px;
    height: 250px;
  }
}

.story-ellispe3 {
  right: 0;
  top: 8%;
  width: 384px;
  height: 384px;
  position: absolute;
  pointer-events: none;
  background-color: rgba(242, 74, 74);
  border-radius: 50%;
  filter: blur(260px);

  @media (max-width: 991.99px) {
    width: 250px;
    height: 250px;
  }
}