.app-container {
  .offer-slider {
    background-color: #191325;
    margin-top: -1px;

    .slider-nav {
      display: flex;
      width: 100%;
      margin: auto;
      width: 100%;
      max-width: 992px;
      margin-top: 32px;
      align-items: center;
      gap: 32px;
      .slider-dots {
        width: 100%;
        height: 4px;
        background: linear-gradient(
          198deg,
          #7b4fff 0,
          #e5c64f 53%,
          #c8ff50 100%
        );
        border-radius: 360px;
        display: flex;
        .slider-dot {
          background-color: #3b3645;
          width: 100%;
          height: 100%;
          transition: 0.6s;
          &.active {
            opacity: 0;
          }
        }
      }
      .slider-nav__buttons {
        display: flex;
        align-items: center;
        gap: 8px;
        .slider-arrow {
          border: 1px solid #3c3646;
          background-color: transparent;
          border-radius: 50%;
          width: 48px;
          height: 48px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: 0.3s;
          @media (min-width: 1024px) {
            &:hover {
              background-color: #3c3646;
            }
          }
        }
      }
    }
    .offer-slider__header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 64px;
      max-width: 992px;
      margin: auto;
      margin-bottom: 48px;

      @media (max-width: 1000px) {
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
      }
      .offer-slider__header-wrapper {
        width: 584px;
        min-width: 584px;
        @media (max-width: 900px) {
          min-width: 0;
          flex-direction: column;
          width: 100%;
        }
        p {
          margin-bottom: 0;
        }
      }
      .offer-slider__header-right {
        p {
          margin-bottom: 0;
        }
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: white;
        margin-bottom: 8px;
      }
      p,
      ul li {
        color: #ffffffbf;
      }
      span.subheader {
        color: rgba(255, 255, 255, 0.5);
        svg {
          path {
            fill: rgba(255, 255, 255, 0.5);
          }
        }
      }
    }
    .offer-slider__container {
      position: relative;
      z-index: 2;
      max-width: 1400px;
      padding: 48px 100px;
      width: 100%;
      margin: auto;

      @media (max-width: 1400px) {
        padding: 48px 50px;
      }
      @media (max-width: 1000px) {
        padding: 32px 16px;
      }
    }
    .offer-slider__items {
      display: flex;
      gap: 16px;
      transition: 0.3s;
    }

    .offer-slider__item {
      width: calc(25% - 11px);
      min-width: calc(25% - 11px);
      padding: 32px;
      text-decoration: none;
      min-height: 400px;
      position: relative;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      @media (max-width: 900px) {
        padding: 24px;
      }
      .offer-slider__item-text {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        p {
          width: 100%;
        }
      }
      span.arrow {
        display: flex;
        margin-top: 16px;
      }
      @media (max-width: 900px) {
        min-width: calc(50% - 8px);
        width: calc(50% - 8px);
      }
      @media (max-width: 600px) {
        min-width: 100%;
        width: 100%;
      }
      @media (max-width: 600px) {
        width: 100%;
        min-height: 0;
        gap: 48px;
      }
      @media (min-width: 1024px) {
        &:hover {
          .offer-slider__item-icon {
            height: 120px;
            width: 120px;
          }
          &::after {
            opacity: 1;
          }
          &::before {
            background-color: #191325;
          }
          svg {
            path {
              &:nth-child(2) {
                fill: #ff924f;
              }
            }
          }
        }
      }

      &::after {
        content: "";
        background: linear-gradient(
          198deg,
          #c8ff50 0,
          #e5c64f 53%,
          #7b4fff 100%
        );
        position: absolute;
        left: -1px;
        top: -1px;
        width: calc(100% + 2px);
        height: calc(100% + 2px);
        z-index: 0;
        opacity: 0;
        transition: 0.4s;
      }
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #251f30;
        z-index: 1;
        transition: 0.4s;
      }
      .offer-slider__item-text {
        z-index: 2;
      }
      p.title {
        color: #ffffff;
        font-weight: 600;
        font-size: 28px;
        line-height: 1.2;
        margin-bottom: 16px;

        font-family: var(--mainfont);
        @media (max-width: 1000px) {
          font-size: 20px;
        }
      }
      p.desc {
        font-size: 16px;
        font-weight: 300;
        margin-bottom: 0;
        color: rgba(255, 255, 255, 0.75);
        position: relative;
        z-index: 1;
      }
      svg {
        z-index: 1;
        path {
          transition: 0.4s;
        }
      }
    }
  }
}