@font-face {
  font-display: swap;
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Poppins-Regular.woff2) format("woff2");
}
@font-face {
  font-display: swap;
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/Poppins-SemiBold.woff2) format("woff2");
}
@font-face {
  font-display: swap;
  font-family: Poppins;
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/Poppins-Bold.woff2) format("woff2");
}
* *,
*::before,
*::after {
  box-sizing: border-box;
}

p:empty {
  display: none;
}

ul[class],
ol[class] {
  padding: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

ul li,
ol li {
  margin: 0;
  padding: 0;
}

body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
}

ul, li {
  list-style-position: inside;
}

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

input,
button,
textarea,
select {
  font: inherit;
}

body {
  font-family: "Poppins";
  background: var(--bg);
}

button {
  outline: none;
  border: none;
  cursor: pointer;
  transition: all 0.5s;
}

a {
  text-decoration: none;
}

html.open {
  overflow: hidden;
}

.container {
  max-width: 1270px;
  padding: 0 20px;
  margin: 0 auto;
  width: 100%;
}

.container .container {
  padding: 0;
}

main {
  padding-bottom: 32px;
  padding-top: 32px;
}
.home main {
  padding-top: 0;
}
main.error {
  background: url(../images/error.webp) center center/cover no-repeat;
  padding: 120px 0;
}
@media screen and (min-width: 768px) {
  main.error {
    padding: 150px 0;
  }
}
main.error .error__container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
main h1,
main h2,
main h3,
main h4,
main h5,
main h5,
main ul,
main ol,
main blockquote {
  margin-bottom: 32px;
}
@media screen and (min-width: 768px) {
  main h1,
  main h2,
  main h3,
  main h4,
  main h5,
  main h5,
  main ul,
  main ol,
  main blockquote {
    margin-bottom: 40px;
  }
}
main h1 {
  font-size: 42px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  color: var(--title);
}
@media screen and (max-width: 767px) {
  main h1 {
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
  }
}
main h2 {
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  color: var(--title);
}
@media screen and (max-width: 767px) {
  main h2 {
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
  }
}
main h3 {
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
  color: var(--title);
}
@media screen and (max-width: 767px) {
  main h3 {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%;
  }
}
main h4 {
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
  color: var(--title);
}
@media screen and (max-width: 767px) {
  main h4 {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%;
  }
}
main h5 {
  color: var(--title);
}
main h1 span,
main h2 span,
main h3 span,
main h4 span,
main h5 span {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  font-weight: inherit;
  font-style: inherit;
}
main p {
  margin-bottom: 32px;
}
@media screen and (min-width: 768px) {
  main p {
    margin-bottom: 40px;
  }
}
main a {
  color: var(--primary);
  text-decoration: underline;
}
main blockquote {
  border-radius: 0 24px 24px 0;
  border-left: 6px solid var(--primary);
  background: var(--third);
  padding: 40px 48px 40px 42px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
@media screen and (max-width: 767.9px) {
  main blockquote {
    padding: 20px 32px 20px 26px;
    gap: 20px;
  }
}
main blockquote p {
  margin-bottom: 0;
  color: var(--title);
}
main blockquote ul, main blockquote ol {
  color: var(--title);
}
main blockquote .autor {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
main blockquote .autor span:nth-of-type(1) {
  color: var(--title);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}
@media screen and (min-width: 768px) {
  main blockquote .autor span:nth-of-type(1) {
    font-size: 20px;
    line-height: 125%;
  }
}
main blockquote .autor span:nth-last-of-type(1) {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 125%;
}
main p, main ul, main ol, main span {
  color: var(--text);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
}
@media screen and (min-width: 768px) {
  main p, main ul, main ol, main span {
    font-size: 16px;
    line-height: 180%;
  }
}
main ul, main ol,
main ul.wp-block-list, main ol.wp-block-list {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  main ul, main ol,
  main ul.wp-block-list, main ol.wp-block-list {
    margin-bottom: 32px;
  }
}
main ul li, main ol li,
main ul.wp-block-list li, main ol.wp-block-list li {
  padding-left: 36px;
  position: relative;
}
main ul li:before, main ol li:before,
main ul.wp-block-list li:before, main ol.wp-block-list li:before {
  content: "";
  width: 28px;
  height: 28px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
main ul:not([class]) li:before,
main ul.wp-block-list li:before {
  background: url(../images/list-arrow.svg) center center/19px no-repeat;
}
main ol:not([class]),
main ol.wp-block-list {
  counter-reset: counter;
}
main ol:not([class]) li,
main ol.wp-block-list li {
  counter-increment: counter;
}
main ol:not([class]) li:before,
main ol.wp-block-list li:before {
  background-color: var(--primary);
  border-radius: 50%;
  color: var(--bg);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
  display: flex;
  align-items: center;
  justify-content: center;
  content: counter(counter) "";
}
main table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 16px;
  margin-bottom: 40px;
  overflow: hidden;
}
main .wp-block-image .alignleft img {
  float: left;
  margin: 15px 15px 15px 0;
}
main .wp-block-image .aligncenter img {
  margin: 20px auto;
}
main .wp-block-image .alignright img {
  float: right;
  margin: 15px 0px 15px 15px;
}
main table thead th {
  background: var(--primary);
  color: var(--secondary);
  padding: 20px 24px;
  text-align: left;
  border-bottom: 1px solid var(--secondary);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
}
main table thead th:first-child {
  border-top-left-radius: 16px;
}
main table thead th:last-child {
  border-top-right-radius: 16px;
}
main table tbody tr {
  background: var(--third);
}
main table tbody td {
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 16px;
  color: var(--title);
}
main table tbody tr:last-child td {
  border-bottom: none;
}
main table tbody tr:hover {
  background: var(--secondary);
}

.scroll {
  overflow-x: auto;
}

.btn {
  padding: 15px 24px;
  border-radius: 14px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0.16px;
  border: 1px solid transparent;
  transition: 0.3s linear;
  text-decoration: none;
  text-align: center;
}
.btn.fill {
  background: var(--primary);
  color: var(--bg);
}
.btn.fill:hover {
  transform: scale(1.05);
}
.btn.bordered {
  border: 1px solid var(--title);
  color: var(--title);
  background: transparent;
}
.btn.bordered:hover {
  scale: 1.05;
  background: var(--title);
  color: var(--bg);
}

.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero ul, .hero ol, .hero blockquote, .hero p,
.advantages h1,
.advantages h2,
.advantages h3,
.advantages h4,
.advantages h5,
.advantages ul,
.advantages ol,
.advantages blockquote,
.advantages p,
.row__item__content h1,
.row__item__content h2,
.row__item__content h3,
.row__item__content h4,
.row__item__content h5,
.row__item__content ul,
.row__item__content ol,
.row__item__content blockquote,
.row__item__content p,
.faq h1,
.faq h2,
.faq h3,
.faq h4,
.faq h5,
.faq ul,
.faq ol,
.faq blockquote,
.faq p {
  margin-bottom: 0;
}

.socials {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.socials span {
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
  line-height: 115%;
  color: var(--title);
}
.socials__wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.socials__wrap a {
  background-color: var(--third);
  width: 40px;
  height: 40px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 8px;
  border-radius: 8px;
  transition: 0.3s linear;
}
.socials__wrap a svg path {
  transition: 0.3s linear;
}
.socials__wrap a:hover svg path {
  fill: var(--primary);
}

.mb-m {
  margin-bottom: 64px;
}
@media screen and (min-width: 768px) {
  .mb-m {
    margin-bottom: 100px;
  }
}

.btns {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

.bonus {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background-color: var(--secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--title);
}
@media screen and (min-width: 768px) {
  .bonus {
    font-size: 20px;
  }
}
.bonus__img {
  display: flex;
  max-width: 48px;
  max-height: 48px;
  width: 100%;
  height: 100%;
  padding: 9px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  background-color: var(--primary);
  border-radius: 9px;
}
@media screen and (min-width: 768px) {
  .bonus__img {
    max-width: 64px;
    max-height: 64px;
    padding: 12px;
  }
}
.bonus__img img, .bonus__img svg {
  max-width: 30px;
  max-height: 30px;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .bonus__img img, .bonus__img svg {
    max-width: 40px;
    max-height: 40px;
  }
}

.header {
  border-radius: 0 0 32px 32px;
  border-bottom: 3px solid var(--third);
  background: var(--secondary);
  padding: 20px 0;
}
@media screen and (min-width: 1024px) {
  .header {
    padding: 0;
  }
}
.header .logo {
  max-width: 160px;
  max-height: -moz-fit-content;
  max-height: fit-content;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 1024px) {
  .header .logo {
    max-width: 136px;
  }
}
.header .logo img {
  max-width: 160px;
  max-height: -moz-fit-content;
  max-height: fit-content;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 1024px) {
  .header .logo img {
    max-width: 136px;
  }
}
.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 1023px) {
  .header__container {
    flex-wrap: wrap;
    gap: 15px;
  }
}
.header__container > .header__btns {
  width: 100%;
  justify-content: space-between;
}
.header__container > .header__btns a {
  min-width: calc(50% - 10px);
}
@media screen and (min-width: 1023px) {
  .header__container > .header__btns {
    display: none;
  }
}
.header__wrap {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
@media screen and (min-width: 1024px) {
  .header__wrap {
    flex-direction: row;
    justify-content: space-between;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1239.9px) {
  .header__wrap {
    width: calc(100% - 156px);
    gap: 20px;
  }
}
@media screen and (min-width: 1240px) {
  .header__wrap {
    width: 85%;
    gap: 48px;
  }
}
@media screen and (max-width: 1023.9px) {
  .header__wrap {
    position: fixed;
    top: 161px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 161px);
    overflow: hidden;
    overflow-y: auto;
    transition: 0.3s linear;
    background-color: var(--bg);
    padding: 48px 20px 62px 20px;
    z-index: 50;
  }
  .open .header__wrap {
    left: 0;
  }
}
@media screen and (min-width: 1024px) {
  .header__wrap nav {
    margin: auto;
  }
}
.header__wrap ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media screen and (min-width: 1024px) {
  .header__wrap ul {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
}
.header__wrap ul li {
  position: relative;
  padding: 10px 0 0 0;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0.16px;
  color: var(--text);
  transition: 0.3s linear;
}
.header__wrap ul li:hover {
  color: var(--bg);
  background-color: var(--primary);
}
.header__wrap ul li.active {
  background-color: var(--primary);
  color: var(--bg);
}
.header__wrap ul li.active > a:after {
  transform: translateY(-50%) rotate(180deg);
  background-image: url(../images/arrow-down.svg);
}
.header__wrap ul li.active .sub-menu {
  z-index: 10;
  max-height: 5000px;
  transition: all 300ms linear;
  will-change: opacity, max-height, visibility;
  opacity: 1;
  visibility: visible;
  padding: 20px 0;
}
.header__wrap ul li:has(ul) > a {
  position: relative;
  padding-right: 17px;
}
.header__wrap ul li:has(ul) > a:after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 54%;
  right: 0;
  transform: translateY(-50%);
  background: url("../images/arrow-down-desk.svg") center center/cover no-repeat;
  transition: 0.3s linear;
}
@media screen and (min-width: 1024px) {
  .header__wrap ul li {
    padding: 35px 10px;
  }
  .header__wrap ul li:has(ul):hover {
    color: var(--bg);
    background-color: var(--primary);
  }
  .header__wrap ul li:has(ul):hover .sub-menu {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transform: translateY(0);
  }
  .header__wrap ul li:has(ul):hover a:after {
    background-image: url(../images/arrow-down.svg);
    transform: translateY(-50%) rotate(180deg);
  }
}
.header__wrap ul li a {
  color: inherit;
  display: inline-block;
  width: -moz-max-content;
  width: max-content;
  text-decoration: none;
  font: inherit;
  line-height: inherit;
}
@media screen and (max-width: 1023.9px) {
  .header__wrap ul li a {
    padding-left: 20px;
    margin-bottom: 10px;
  }
}
.header__wrap ul.sub-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--title);
  min-width: 140px;
  height: auto;
  gap: 8px;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
}
@media screen and (min-width: 1024px) {
  .header__wrap ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    visibility: hidden;
    opacity: 0;
    padding: 20px;
    transition: 0.3s linear;
    transform: translateY(45px);
    border: 1px solid var(--third);
  }
}
@media screen and (max-width: 1023.9px) {
  .header__wrap ul.sub-menu {
    transition: all 300ms linear;
    will-change: opacity, max-height, visibility;
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    will-change: opacity, max-height;
    transition: opacity 300ms linear, max-height 300ms linear, visibility 300ms linear, padding 300ms linear;
  }
  .header__wrap ul.sub-menu li a {
    margin-bottom: 0;
  }
}
.header__wrap ul.sub-menu li {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0.14px;
  color: var(--secondary);
  padding: 0;
  transition: 0.3s linear;
}
@media screen and (min-width: 1024px) {
  .header__wrap ul.sub-menu li:hover {
    color: var(--primary);
    background: transparent;
  }
}
.header__btns {
  gap: 8px;
}

.block-buttons {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 40px 0;
}
.block-buttons.left {
  justify-content: flex-start;
}
.block-buttons.center {
  justify-content: center;
}
.block-buttons.right {
  justify-content: flex-end;
}

.burger {
  border-radius: 10px;
  background-color: var(--primary);
  display: block;
  width: 48px;
  height: 48px;
  position: relative;
}
.burger:before, .burger:after {
  content: "";
  background-color: var(--bg);
  width: 22.5px;
  height: 2px;
  border-radius: 500px;
  position: absolute;
  left: 12px;
  transition: 0.3s linear;
}
.burger:before {
  top: 19px;
}
.burger:after {
  bottom: 19px;
}
.open .burger:before {
  transform: translate(1px, 4px) rotate(45deg);
}
.open .burger:after {
  transform: translate(1px, -4px) rotate(-45deg);
}
@media screen and (min-width: 1024px) {
  .burger {
    display: none;
  }
}

.hero {
  padding: 32px 0 0 0;
}
.hero__container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.hero__container.top-image {
  flex-direction: column-reverse;
}
.hero__container.bottom-image {
  flex-direction: column;
}
@media screen and (min-width: 1024px) {
  .hero__container.top-image, .hero__container.bottom-image {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 74px;
  }
}
.hero .bonus {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background-color: var(--secondary);
}
.hero .bonus p, .hero .bonus span {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--title);
}
@media screen and (min-width: 768px) {
  .hero .bonus p, .hero .bonus span {
    font-size: 20px;
  }
}
.hero .bonus__img {
  display: flex;
  max-width: 48px;
  max-height: 48px;
  width: 100%;
  height: 100%;
  padding: 9px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  background-color: var(--primary);
  border-radius: 9px;
}
@media screen and (min-width: 768px) {
  .hero .bonus__img {
    max-width: 64px;
    max-height: 64px;
    padding: 12px;
  }
}
.hero .bonus__img img, .hero .bonus__img svg {
  max-width: 30px;
  max-height: 30px;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .hero .bonus__img img, .hero .bonus__img svg {
    max-width: 40px;
    max-height: 40px;
  }
}
.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  color: var(--text);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}
@media screen and (min-width: 768px) {
  .hero__content {
    font-size: 16px;
  }
}
@media screen and (min-width: 1024px) {
  .hero__content {
    width: 48%;
  }
}
.hero__content h1 {
  color: var(--title);
}
.hero__content p {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}
@media screen and (min-width: 768px) {
  .hero__content p {
    font-size: 16px;
  }
}
.hero__content .btns {
  margin-top: 32px;
}
@media screen and (min-width: 768px) {
  .hero__content .btns {
    margin-top: 48px;
  }
}
.hero__image {
  border-radius: 28.2px;
  background: var(--third);
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .hero__image {
    border-radius: 48px;
  }
}
@media screen and (min-width: 1024px) {
  .hero__image {
    width: 45.5%;
  }
}
.hero__image img {
  z-index: 1;
  position: relative;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.5s;
}
.hero__image img:hover {
  transform: scale(1.1);
}
@media screen and (max-width: 768px) {
  .hero .btn {
    width: calc(50% - 7px);
  }
}

.toc {
  background: #0b1220;
  border-radius: 16px;
  overflow: hidden;
  margin: 24px 0;
}

.toc__toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--primary);
  color: var(--title);
  font-weight: 600;
  font-size: 16px;
  border: 0;
  cursor: pointer;
}

.toc__toggle span {
  color: var(--title);
}

.toc__icon {
  transition: transform 0.3s ease;
}

.toc.is-open .toc__icon {
  transform: rotate(180deg);
}

.toc__content {
  background: var(--third);
  padding: 0 20px;
  transition: all 0.5s;
  max-height: 0;
  overflow: hidden;
}

.toc.is-open .toc__content {
  padding: 20px;
  max-height: 300vh;
}

.toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 24px;
}

.toc__list a {
  color: var(--primary);
  text-decoration: none;
  font-size: 14px;
}

.toc__list a:hover {
  text-decoration: underline;
}

.toc__list .h1,
.toc__list .h2,
.toc__list .h3,
.toc__list .h4 {
  padding-left: 0;
}

@media (max-width: 768px) {
  .toc__list {
    grid-template-columns: 1fr;
  }
}
.advantages__container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media screen and (min-width: 768px) {
  .advantages__container {
    gap: 24px;
  }
}
.advantages p {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 170%;
}
@media screen and (min-width: 768px) {
  .advantages p {
    font-size: 18px;
    line-height: 180%;
  }
}
.advantages__items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 14px;
}
@media screen and (min-width: 768px) {
  .advantages__items {
    flex-direction: row;
  }
}
.advantages__item {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background-color: var(--third);
  border-radius: 32px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .advantages__item {
    gap: 34px;
    width: calc(50% - 10px);
  }
}
.advantages__item__title {
  padding: 8px;
  border-radius: 500px;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  color: var(--bg);
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 500px;
  border: 2px solid transparent;
}
@media screen and (min-width: 768px) {
  .advantages__item__title {
    padding: 12px;
    font-size: 20px;
    font-weight: 600;
    line-height: 125%;
  }
}
.advantages__item__title div {
  width: 28px;
  height: 28px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.advantages__item ul {
  padding: 0 18px 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
}
@media screen and (min-width: 768px) {
  .advantages__item ul {
    padding: 0 20px 32px 20px;
  }
}
.advantages__item ul li {
  position: relative;
  padding-left: 32px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}
@media screen and (min-width: 768px) {
  .advantages__item ul li {
    font-size: 16px;
  }
}
.advantages__item ul li:before {
  content: "";
  width: 20px;
  height: 20px;
  aspect-ratio: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.advantages-pos .advantages__item ul li:before:before {
  background-image: url(../images/pos-item.svg);
}
.advantages__item.advantages-pos .advantages__item__title {
  background-color: var(--primary);
}
.advantages__item.advantages-pos .advantages__item__title div {
  background-color: var(--bg);
}
.advantages__item.advantages-pos li:before {
  background-image: url(../images/pos-item.svg);
}
.advantages__item.advantages-neg .advantages__item__title {
  border-color: var(--third);
  background: var(--secondary);
  color: var(--title);
}
.advantages__item.advantages-neg .advantages__item__title div {
  background-color: var(--title);
}
.advantages__item.advantages-neg li::before {
  background-image: url(../images/neg-item.svg);
}

.row__container {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.row__item {
  display: flex;
  flex-direction: column-reverse;
  gap: 20px;
  margin-bottom: 64px;
}
@media screen and (min-width: 1024px) {
  .row__item {
    flex-direction: row;
  }
}
@media screen and (min-width: 1024px) {
  .row__item.right {
    flex-direction: row;
  }
}
@media screen and (min-width: 1024px) {
  .row__item.left {
    flex-direction: row-reverse;
  }
}
.row__item__content {
  width: 100%;
  padding: 24px 16px;
  border-radius: 20px;
  background-color: var(--third);
}
@media screen and (min-width: 1024px) {
  .row__item__content {
    padding: 48px 32px;
    border-radius: 32px;
  }
}
@media screen and (min-width: 1024px) {
  .row__item__content {
    min-width: calc(50% - 10px);
  }
}
.row__item__content img {
  max-width: 100%;
  width: 100%;
  margin-bottom: 40px;
  border-radius: 28px;
  -o-object-fit: cover;
     object-fit: cover;
  height: -moz-fit-content;
  height: fit-content;
}
@media screen and (min-width: 1024px) {
  .row__item__content img {
    max-width: 550px;
    width: 100%;
    border-radius: 48px;
  }
}
@media screen and (min-width: 1024px) {
  .row__item.left .row__item__content img {
    float: left;
    margin: 0 24px 16px 0;
  }
}
@media screen and (min-width: 1024px) {
  .row__item.right .row__item__content img {
    float: right;
    margin: 0 0 16px 24px;
  }
}
.row__item__content .btns.left {
  justify-content: flex-start;
}
.row__item__content .btns.center {
  justify-content: center;
}
.row__item__content .btns.right {
  justify-content: right;
}
.row__item__content .btn {
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (min-width: 768px) {
  .row__item__content .btn {
    padding: 14px 31px;
  }
}
.row__item__content .btns {
  margin-top: 32px;
}
.row__item__content h2, .row__item__content h3, .row__item__content h4, .row__item__content h5, .row__item__content ul, .row__item__content ol, .row__item__content ul {
  color: var(--title);
  margin-bottom: 14px;
}
@media screen and (min-width: 768px) {
  .row__item__content h2, .row__item__content h3, .row__item__content h4, .row__item__content h5, .row__item__content ul, .row__item__content ol, .row__item__content ul {
    margin-bottom: 24px;
  }
}
.row__item__content li p {
  margin-bottom: 0;
}
.row__item__content p {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  margin-bottom: 24px;
}
@media screen and (min-width: 768px) {
  .row__item__content p {
    font-size: 16px;
  }
}
.row__item-img {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 20px;
  background-color: var(--third);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .row__item-img {
    border-radius: 32px;
  }
}
@media screen and (min-width: 1024px) {
  .row__item-img {
    min-width: calc(50% - 10px);
  }
}
@media screen and (max-width: 1023.9px) {
  .row__item-img {
    aspect-ratio: 5/3;
  }
}
.row__item-img img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
  transition: all 0.5s;
}
.row__item-img img:hover {
  transform: scale(1.1);
}

.accord {
  display: flex;
  flex-direction: column;
}

.accord-item {
  max-width: 100%;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s linear;
}

.accord-item-top {
  max-width: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  transition: 0.3s linear;
}

.accord-item-bottom {
  margin-top: -37px;
  padding: 37px 20px 0 20px;
  transition: all 300ms linear;
  will-change: opacity, max-height, visibility;
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  will-change: opacity, max-height;
  transition: opacity 300ms linear, transform 300ms linear, max-height 300ms linear, visibility 300ms linear, padding 300ms linear;
}
@media screen and (min-width: 768px) {
  .accord-item-bottom {
    padding: 37px 32px 0px 32px;
  }
}

.icon-wrapper {
  position: relative;
  margin-left: auto;
}

.accord-item.active .accord-item-bottom {
  visibility: visible;
  opacity: 0;
  max-height: 5000px;
  overflow: visible;
  opacity: 1;
  padding: 50px 20px 20px 20px;
  margin-top: -36px;
  transition: opacity 300ms linear, max-height 300ms linear, visibility 300ms linear, padding 300ms linear;
}
@media screen and (min-width: 768px) {
  .accord-item.active .accord-item-bottom {
    padding: 62px 32px 32px 32px;
  }
}

.faq__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media screen and (min-width: 768px) {
  .faq__items {
    gap: 20px;
  }
}

.faq h2:not(.faq__item__top h2) {
  margin-bottom: 32px;
}
@media screen and (min-width: 768px) {
  .faq h2:not(.faq__item__top h2) {
    margin-bottom: 64px;
  }
}

.faq__item__top {
  padding: 12px 12px 12px 20px;
  border-radius: 500px;
  background-color: var(--third);
  color: var(--text);
  gap: 13px;
}
@media screen and (min-width: 768px) {
  .faq__item__top {
    padding: 20px 20px 20px 32px;
  }
}

.faq__item.active .faq__item__top p,
.faq__item.active .faq__item__top h2,
.faq__item.active .faq__item__top h3 {
  color: var(--secondary);
}

.faq__item.active .faq__item__top {
  background-color: var(--primary);
}

.faq__item.active .faq-icon-wrapper {
  background-color: var(--title);
  transform: rotate(45deg);
}

.faq__item__top * {
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  color: var(--text);
}
@media screen and (min-width: 768px) {
  .faq__item__top * {
    font-size: 20px;
  }
}

.faq-icon-wrapper {
  margin-left: auto;
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  background-color: var(--text);
  border-radius: 50%;
  transition: 0.3s linear;
}
@media screen and (min-width: 768px) {
  .faq-icon-wrapper {
    width: 48px;
    height: 48px;
  }
}

.faq-icon-wrapper:before,
.faq-icon-wrapper:after {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  border-radius: 500px;
  background-color: var(--third);
  transition: 0.3s linear;
}

.faq-icon-wrapper:before {
  top: 50%;
  left: 50%;
  transform: translate(-50%) rotate(90deg);
}

.faq-icon-wrapper:after {
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}

.faq__item-bottom {
  border-radius: 0 0 24px 24px;
  border: 1px solid var(--primary);
  border-top-color: transparent;
  background: var(--secondary);
}

.faq__item-bottom-wrap * {
  color: var(--title);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}
@media screen and (min-width: 768px) {
  .faq__item-bottom-wrap * {
    font-size: 18px;
  }
}

.footer {
  border-radius: 32px 32px 0 0;
  border-top: 3px solid var(--third);
  background: var(--secondary);
}
@media screen and (min-width: 768px) {
  .footer {
    border-radius: 48px 48px 0 0;
  }
}
.footer__container {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.footer__partners {
  display: flex;
  flex-wrap: wrap;
  padding: 32px 0;
  border-top: 2px solid var(--third);
  border-bottom: 2px solid var(--third);
  align-items: center;
  justify-content: center;
  gap: 32px;
}
@media screen and (min-width: 768px) {
  .footer__partners {
    gap: 48px;
  }
}
.footer__partners a {
  max-width: -moz-max-content;
  max-width: max-content;
  width: -moz-fit-content;
  width: fit-content;
}
.footer__partners img {
  max-width: 128px;
  width: 100%;
  height: 100%;
}
.footer__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 0 20px 0;
}
.footer__copy * {
  color: var(--text);
  text-align: center;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.13px;
}
.footer__copy .copy {
  color: var(--title);
  font-weight: 600;
}
.footer__top {
  display: flex;
  gap: 64px;
  padding-top: 64px;
  flex-direction: column;
}
@media screen and (min-width: 1024px) {
  .footer__top {
    justify-content: space-between;
    flex-direction: row;
  }
}
@media screen and (min-width: 768px) {
  .footer__top {
    padding-top: 120px;
  }
}
.footer__nav__wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
@media screen and (min-width: 1024px) {
  .footer__nav__wrap {
    width: 59%;
  }
}
@media screen and (min-width: 1024px) {
  .footer__nav__wrap {
    justify-content: space-between;
  }
}
.footer__nav__item {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: calc(50% - 16px);
}
.footer__nav__item__title {
  color: var(--title);
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
  line-height: 115%;
}
@media screen and (min-width: 1024px) {
  .footer__nav__item {
    width: calc(33.3333333333% - 41px);
  }
}
.footer__nav__item ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--text);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  list-style: none;
}
@media screen and (min-width: 768px) {
  .footer__nav__item ul {
    font-size: 16px;
  }
}
.footer__nav__item ul a {
  font: inherit;
  color: inherit;
  line-height: inherit;
  transition: 0.3s linear;
}
.footer__nav__item ul a:hover {
  color: var(--title);
}
.footer__info {
  text-align: left;
}
@media screen and (min-width: 1024px) {
  .footer__info {
    max-width: 256px;
  }
}
.footer__info .logo {
  max-width: 200px;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  margin-bottom: 12px;
  display: inline-block;
}
@media screen and (min-width: 768px) {
  .footer__info .logo {
    max-width: 210px;
  }
}
.footer__info .logo img {
  max-width: 100%;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
}
.footer__info p {
  color: var(--text);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.13px;
  margin-bottom: 32px;
}
.footer__info p strong {
  font-weight: 600;
}/*# sourceMappingURL=style.css.map */