html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  max-width: 100%;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'IBM Plex Mono', monospace;
  font-family: 'Poppins', sans-serif;
  color: #000;
  position: relative;
}

a {
  text-decoration: none;
  transition: 0.3s;
  color: inherit;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

button {
  padding: 0;
  outline: none;
  background: none;
  border: none;
}

input:focus {
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
  margin: 0;
  font-weight: normal;
}

h1,
h2,
h3 {
  font-weight: bold;
}

img {
  display: block;
  max-width: 100%;
}

::-webkit-scrollbar {
  width: 8px;
  /* ширина для вертикального скролла */
  height: 8px;
  /* высота для горизонтального скролла */
  background-color: #9867FF;
}

/* ползунок скроллбара */
::-webkit-scrollbar-thumb {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 1px 1px 10px #9867FF;
}

.flex {
  display: flex;
}

.flex.row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.flex.col {
  flex-direction: column;
}

.flex.justify-start {
  justify-content: flex-start;
}

.flex.align-center {
  align-items: center;
}

.flex.align-start {
  align-items: flex-start;
}

.flex.gap {
  gap: 40px;
}

.main_button {
  background: #9867FF;
  color: #fff;
  border: 2px solid #9867FF;
  border-radius: 32px;
  padding: 6px 34px;
  font-weight: 600;
  font-size: 20px;
  line-height: 140%;
  cursor: pointer;
  transition: 0.3s ease-in-out color, background 0.3s ease-in-out;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.main_button:hover {
  background: #fff;
  color: #9867FF;
}

.title {
  max-width: 450px;
  font-weight: 700;
  font-size: 36px;
  line-height: 140%;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.small_title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 48px;
    line-height: 140%;
    color: #9867FF;
}

.subtitle {
  max-width: 450px;
  font-weight: 300;
  font-size: 18px;
  line-height: 140%;
  margin-bottom: 59px;
} 

@media screen and (max-width: 1280px) {
  .title {
    font-size: 24px;
    /* text-align: right; */
}
  .subtitle {
      font-size: 26px;
      /* text-align: right; */
  }
}

@media screen and (max-width: 1024px) {
  .title {
      font-size: 24px;
      margin-bottom: 12px;
  }

  .small_title {
    margin-bottom: 24px;
  }

  .subtitle {
      font-size: 14px;
  }
}

.wrapper {
  max-width: 1262px;
  margin: 0 auto;
  padding: 0 40px;
}

@media screen and (max-width: 1280px) {
  .flex.gap {
    gap: 18px;
  }
}

@media screen and (max-width: 1024px) {
  .wrap {
    flex-wrap: wrap;
  }

  .main_button {
    padding: 10px 28px;
    font-size: 14px;
  }

  .wrapper {
    padding: 0 20px;
  }
}

.bg {
  background-image: url('../img/bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.bg_2 {
  background-image: url('../img/bg_2.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* @media screen and (max-width: 624px) {
  .bg {
    background-image: url('../img/mob_bg.png');
  }

  .bg_2 {
    background-image: url('../img/mob_bg_2.png');
  }
} */