@font-face {
  font-family: 'Nunito';
  src: local('Nunito Light'), local('Nunito-Light'),
      url('../fonts/Nunito-Light/Nunito-Light.woff2') format('woff2'),
      url('../fonts/Nunito-Light/Nunito-Light.woff') format('woff'),
      url('../fonts/Nunito-Light/Nunito-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Nunito';
  src: local('Nunito Regular'), local('Nunito-Regular'),
      url('../fonts/Nunito-Regular/Nunito-Regular.woff2') format('woff2'),
      url('../fonts/Nunito-Regular/Nunito-Regular.woff') format('woff'),
      url('../fonts/Nunito-Regular/Nunito-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Nunito';
  src: local('Nunito Semi Bold'), local('Nunito-Semi-Bold'),
      url('../fonts/Nunito-SemiBold/Nunito-SemiBold.woff2') format('woff2'),
      url('../fonts/Nunito-SemiBold/Nunito-SemiBold.woff') format('woff'),
      url('../fonts/Nunito-SemiBold/Nunito-SemiBold.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Nunito';
  src: local('Nunito Bold'), local('Nunito-Bold'),
      url('../fonts/Nunito-Bold/Nunito-Bold.woff2') format('woff2'),
      url('../fonts/Nunito-Bold/Nunito-Bold.woff') format('woff'),
      url('../fonts/Nunito-Bold/Nunito-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

.anton-regular {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}


*::-webkit-input-placeholder {
  color: #666;
  opacity: 1;
}
*:-moz-placeholder {
  color: #666;
  opacity: 1;
}
*::-moz-placeholder {
  color: #666;
  opacity: 1;
}
*:-ms-input-placeholder {
  color: #666;
  opacity: 1;
}

body input:focus:required:invalid,
body textarea:focus:required:invalid {
  
}
body input:required:valid,
body textarea:required:valid {
  
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, tt, var, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

a {
  text-decoration: none;
}

strong {
  font-weight: 700;
}

:root {
  --color-white: #FFF;
  --color-primary: #963AF3;
  --color-primary-light: #D9A9FF;
  --color-secondary: #7268E1;
  --color-black: #191919;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-white);
  background-color: var(--color-black);
}

.wrapper {
  overflow: hidden;
}

.center {
  text-align: center;
}

.fs-22 {
  font-size: 22px;
}

.fs-36 {
  font-size: 36px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-60 {
  margin-bottom: 60px;
}

.color-secondary {
  color: var(--color-secondary);
}

.btn {
  display: inline-block;
  width: 387px;
  height: 58px;
  padding: 18px 130px 18px 20px;
  color: var(--color-white);
  background: url('../img/button.svg') no-repeat;
  background-size: contain;
  text-align: center;
}

.btn:hover {
  opacity: .9;
}

.header {
  background: url('../img/intro-bg.png') no-repeat;
  padding: 64px 0 128px;
  background-size: cover;
}

.topline {
  margin-bottom: 150px;
}

.intro__title {
  font-family: 'Anton', sans-serif;
  font-weight: 700;
  font-size: 57px;
  line-height: 1.2;
  margin-bottom: 30px;
}

.intro__desc {
  font-weight: 300;
  font-size: 22px;
  margin-bottom: 80px;
}

.section {
  position: relative;
  padding: 30px 0 67px;
  background-color: var(--color-black);
}

.section-title {
  font-size: 48px;
  color: var(--color-primary);
  margin-bottom: 30px;
  text-align: center;
  font-weight: 700;
}

.section-desc {
  font-weight: 700;
  text-align: center;
  max-width: 915px;
  margin: 0 auto 50px;
}

.section--approach {
  border-radius: 64px 64px 0 0;
  margin-top: -64px;
  z-index: 100;
}

.section--approach::after, .section--approach::before {
  content: '';
  position: absolute;
  z-index: 100;
  background-size: contain !important;
}

.section--approach::after {
  top: 0;
  left: 0;
  width: 885px;
  height: 748px;
  background: url('../img/approach-bg-1.png') no-repeat;
  transform: translateX(-65%);
}

.section--approach::before {
  bottom: 0;
  right: 0;
  width: 1122px;
  height: 537px;
  background: url('../img/approach-bg-2.png') no-repeat;
  transform: translateX(48%);
}

.approach-list {
  max-width: 746px;
  margin: 0 auto;
  text-align: center;
  list-style: none;
}

.approach-list li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 10px 0 10px 50px;
  border: 2px solid;
  border-radius: 25px;
  margin-bottom: 28px;
  font-size: 22px;
  font-weight: 300;
}

.approach-list li::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 50px;
  height: 50px;
  background: url('../img/icons/check.svg') no-repeat;
  transform: translateY(-50%);
}

.approach-list li:hover {
  color: var(--color-primary);
  border-color:  var(--color-primary);
}

.approach-list li:hover::after {
  background: url('../img/icons/check-hover.svg') no-repeat;
}

.services-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
}

.services-item {
  text-align: center;
  font-weight: 300;
  margin-bottom: 80px;
}

.services-item:hover .services-item__icon {
  border-color: var(--color-primary);
  box-shadow: 0px 0px 12.2px 0px var(--color-primary-light);
}

.services-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-white);
  border-radius: 15px;
  margin-bottom: 26px;
  width: 65px;
  height: 65px;
}

.case-item p {
  margin-bottom: 20px;
  font-weight: 300;
}

.case-item__screenshot {
  display: block;
  max-width: 100%;
  margin-bottom: 28px;
}

.case-item__name {
  color: var(--color-secondary);
  font-size: 22px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.case-item__desc {
  margin-bottom: 20px;
}

.get-plan {
  position: relative;
  padding: 40px 80px;
  background-color: var(--color-primary);
  border-radius: 25px;
  min-height: 428px;
}

.get-plan__glob img {
  position: absolute;
  top: 50%;
  right: -5%;
}

.get-plan__title {
  font-size: 57px;
  line-height: 1.2;
  font-weight: 700;
  font-family: 'Anton', sans-serif;
  margin-bottom: 20px;
}

.get-plan__desc {
  font-weight: 300;
  margin-bottom: 47px;
}

.get-plan__buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-outlined {
  display: inline-flex;
  align-items: center;
  color: var(--color-white);
  border: 1px solid;
  border-radius: 22px;
  padding: 9px 25px;
}

.btn-outlined--icon {
  gap: 20px;
}

.section--plan {
  margin: 50px 0 60px;
}

.footer {
  font-weight: 300;
  margin-bottom: 40px;
}

.footer__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.copyright {
  display: flex;
  align-items: center;
  gap: 20px;
}

.contacts {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.contacts__item {
  display: flex;
  color: var(--color-white);
  align-items: center;
  gap: 10px;
}

.owl-carousel {
  position: relative;
}

.owl-nav {
  position: absolute;
  top: 25%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.owl-prev span, .owl-next span {
  display: none;
}

.owl-prev, .owl-next {
  display: block;
  width: 38px;
  height: 38px;
  background: url('../img/icons/arrow-right.svg') var(--color-primary) no-repeat center !important;
  border-radius: 50%;
}

.owl-prev:hover, .owl-next:hover {
  opacity: .9;
}

.owl-prev {
  transform: rotate(-180deg);
}

.typed-cursor {
  font-weight: 300;
}