@import '../@theme/styles/themes';

@include nb-install-component() {

  $convex-bg: linear-gradient(to bottom, #f1f3f6 0, transparent 18%);
  $content-width: nb-theme(content-width);
  $max-width: 960px;

  ::ng-deep nb-layout-column {
    overflow-x: hidden;
  }

  .content-center {
    max-width: $content-width;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    padding-left: 15px;
    padding-right: 15px;
  }

  .hero-image {
    overflow: hidden;
    background-color: #3366ff;
    background-image: url('/assets/img/bg.svg');
    background-repeat: no-repeat;
    background-size: cover;
    .content-center {
      flex-direction: column;
    }
  }

  .concave {
    margin-bottom: -10px;
    margin-top: -5rem;
    margin-left: -20%;
    margin-right: -20%;
    fill: nb-theme(background-basic-color-2);

    @include media-breakpoint-up(md) {
      margin-top: -7rem;
    }

    @include media-breakpoint-up(lg) {
      margin-top: -8.5rem;
    }

    @include media-breakpoint-up(xl) {
      margin-top: -15rem;
    }
  }

  .features {
    background-color: nb-theme(background-basic-color-2);
    padding-top: 5rem;
    padding-bottom: 4rem;

    .content-center {
      max-width: $max-width;
      justify-content: center;
    }
  }

  .advantages {
    overflow: hidden;
    margin-bottom: 5rem;

    > .content-center {
      max-width: $max-width;
    }
  }

  .eva {
    background: radial-gradient(circle, #ffffff 0%, #ffffff 15.38%, #d7dfeb 100%);
    margin-bottom: 10rem;
    padding-top: 5rem;
    position: relative;
  }

  .eva-concave {
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    width: 100%;
    transform: rotateX(180deg);

    svg path {
      fill: nb-theme(background-basic-color-2);
    }
  }

  ngd-eva.content-center {
    padding-bottom: 5rem;
    flex-wrap: nowrap;
  }

  ngd-footer {
    max-width: $max-width;
    margin: 0 auto;
  }

  @include media-breakpoint-up(is) {
    ngd-hero {
      margin-top: 4rem;
    }
  }

  @include media-breakpoint-up(md) {
    ngd-hero {
      margin-top: 2rem;
    }

    .advantages {
      padding-bottom: 5.5rem;
    }

    .eva {
      padding-top: 10rem;
    }

    ngd-eva.content-center {
      padding-bottom: 10rem;
    }
  }

  @include media-breakpoint-up(xl) {
    .eva {
      padding-top: 15rem;
    }
  }
}