@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-BoldItalic.eot');
    src: local('Geist-BoldItalic'), local('Geist-BoldItalic'),
        url('../fonts/Geist-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-BoldItalic.woff2') format('woff2'),
        url('../fonts/Geist-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-MediumItalic.eot');
    src: local('Geist-MediumItalic'), local('Geist-MediumItalic'),
        url('../fonts/Geist-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-MediumItalic.woff2') format('woff2'),
        url('../fonts/Geist-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-ThinItalic.eot');
    src: local('Geist-ThinItalic'), local('Geist-ThinItalic'),
        url('../fonts/Geist-ThinItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-ThinItalic.woff2') format('woff2'),
        url('../fonts/Geist-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Regular.eot');
    src: local('Geist-Regular'), local('Geist-Regular'),
        url('../fonts/Geist-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-Regular.woff2') format('woff2'),
        url('../fonts/Geist-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Black.eot');
    src: local('Geist-Black'), local('Geist-Black'),
        url('../fonts/Geist-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-Black.woff2') format('woff2'),
        url('../fonts/Geist-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-BlackItalic.eot');
    src: local('Geist-BlackItalic'), local('Geist-BlackItalic'),
        url('../fonts/Geist-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-BlackItalic.woff2') format('woff2'),
        url('../fonts/Geist-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Light.eot');
    src: local('Geist-Light'), local('Geist-Light'),
        url('../fonts/Geist-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-Light.woff2') format('woff2'),
        url('../fonts/Geist-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-SemiBold.eot');
    src: local('Geist-SemiBold'), local('Geist-SemiBold'),
        url('../fonts/Geist-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-SemiBold.woff2') format('woff2'),
        url('../fonts/Geist-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-ExtraBoldItalic.eot');
    src: local('Geist-ExtraBoldItalic'), local('Geist-ExtraBoldItalic'),
        url('../fonts/Geist-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-ExtraBoldItalic.woff2') format('woff2'),
        url('../fonts/Geist-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Bold.eot');
    src: local('Geist-Bold'), local('Geist-Bold'),
        url('../fonts/Geist-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-Bold.woff2') format('woff2'),
        url('../fonts/Geist-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-ExtraLightItalic.eot');
    src: local('Geist-ExtraLightItalic'), local('Geist-ExtraLightItalic'),
        url('../fonts/Geist-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-ExtraLightItalic.woff2') format('woff2'),
        url('../fonts/Geist-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-ExtraLight.eot');
    src: local('Geist-ExtraLight'), local('Geist-ExtraLight'),
        url('../fonts/Geist-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-ExtraLight.woff2') format('woff2'),
        url('../fonts/Geist-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-ExtraBold.eot');
    src: local('Geist-ExtraBold'), local('Geist-ExtraBold'),
        url('../fonts/Geist-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-ExtraBold.woff2') format('woff2'),
        url('../fonts/Geist-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Thin.eot');
    src: local('Geist-Thin'), local('Geist-Thin'),
        url('../fonts/Geist-Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-Thin.woff2') format('woff2'),
        url('../fonts/Geist-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-LightItalic.eot');
    src: local('Geist-LightItalic'), local('Geist-LightItalic'),
        url('../fonts/Geist-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-LightItalic.woff2') format('woff2'),
        url('../fonts/Geist-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Italic.eot');
    src: local('Geist-Italic'), local('Geist-Italic'),
        url('../fonts/Geist-Italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-Italic.woff2') format('woff2'),
        url('../fonts/Geist-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-SemiBoldItalic.eot');
    src: local('Geist-SemiBoldItalic'), local('Geist-SemiBoldItalic'),
        url('../fonts/Geist-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-SemiBoldItalic.woff2') format('woff2'),
        url('../fonts/Geist-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Medium.eot');
    src: local('Geist-Medium'), local('Geist-Medium'),
        url('../fonts/Geist-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-Medium.woff2') format('woff2'),
        url('../fonts/Geist-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

html {
  scrollbar-gutter: stable;
}

* {
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;

}

:hover {
  transition: 0.3s;
}

body {
  font-family: 'Geist';
  font-style: normal;
  font-optical-sizing: auto;
  font-weight: 400;
  margin: 0 auto; 
  color: #fff;
  font-size: 15px;
  line-height: 1.8;
  background: #010101;
}

img {
  max-width: 100%;
  transition: 0.3s;
}

input:focus {
  
  outline:none;
}

textarea:focus {
  outline: none;
}

textarea {
  font: inherit;
  border: none;
}

input {
  font: inherit;
  border: none;
}

button {
  transition: 0.3s;
  font: inherit;
  padding: 0;
  cursor: pointer;
  border: none;
  background: none;
}

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

a:hover {
  transition: 0.3s;
}

button:hover {
  transition: 0.3s;
}

svg {
  transition: 0.3s;
}

b {
  font-weight: inherit;
}

p {

}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-family: inherit;
  font-size: inherit;
}

ul, ol {
  list-style: none;
}

.clear {clear:both;}

.container {
  padding: 0 40px;
  max-width: 1680px;
  margin: 0 auto;
}

/*header*/

header {
  padding: 35px 0;
  background: #010101;
  position: relative;
  z-index: 11;
}

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

.header__logo a {
  display: flex;
}

.header__nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 60px;
}

.header__nav ul li {
  display: flex;
}

.header__nav__link {
  font-size: 15px;
  line-height: 1.8;
  color: #fff;
  display: inline-block;
}

.header__nav__link:hover {
  opacity: 0.6;
}

.header__tg {
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 1.8;
  color: #fff;
}

.header__tg img {
  margin: 0 13px 0 0;
}

.header__burger button {
  display: flex;
}

.header__burger {
  display: none;
}

.open__burger {
  position: absolute;
  top: 61px;
  left: 0;
  right: 0;
  height: auto;
  z-index: 11;
  background: #010101;
  border-radius: 0 0 16px 16px;
  padding: 24px 0;
  display: none;
}

.open__burger__visibility {
  display: block;
}

.burger__nav {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  gap: 24px;
}

.burger__nav li {
  width: 100%;
}

.burger__btn {
  margin: 30px 0 0 0;
}

.open__body {
  overflow: hidden;
}

.open__body:before {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  left: 0;
  height: 100%;
  bottom: 0;
  background: #0000004D;
  backdrop-filter: blur(2px);
}

.header__burger button img + img {
  display: none;
}

.header__burger.header__burger__open button img {
  display: none;
}

.header__burger.header__burger__open button img + img {
  display: block;
}

/*work*/

.work {
  margin: 77px 0 120px 0;
  overflow: hidden;
}

.global__text {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

h1, h2 {
  font-weight: 700;
  font-size: 60px;
  line-height: 1.1;
  margin: 0;
}

h1 span, h2 span {
  opacity: 0.4;
}

.global__text p {
  margin: 40px 0 0 0;
  opacity: 0.6;
}

.work__center {
  display: flex;
  justify-content: center;
  margin: 48px 0 0 0;
}

.work__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 208px;
  height: 48px;
  background: #fff;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.8;
  color: #060606;
}

.work__link img {
  margin: 0 6px 0 0;
}

.work__link:hover {
  opacity: 0.6;
}

.work__img {
  display: flex;
  margin: -117px -49px 0 -49px;
  justify-content: center;
}

.work__img img + img {
  display: none;
}

.work__wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.work__block {
  width: 33.333333%;
  padding: 20px 10px 0 10px;
}

.work__block:nth-of-type(4) {
  width: 66.66666666%;
}

.work__block:nth-of-type(4) .work__card {
  padding: 30px 60px;
}

.work__card {
  background: #0A0A0A;
  border-radius: 16px;
  padding: 0 32px 48px 32px;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.work__card__img {
  display: flex;
  height: 317px;
  margin: 0 -20px 0 -80px;
}

.work__card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work__card__img img + img {
  display: none;
}

.work__card__mobile__light {
  display: none;
}

.work__card h3 {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  margin: 60px 0 0 0;
}

.work__card h3 span {
  color: #717171;
}

.work__card p {
  color: #717171;
  max-width: 343px;
  margin: 24px 0 0 0;
}

.work__flex {
  height: 100%;
  display: flex;
  align-items: center;
}

.work__card__absolute {
  margin: 0;
  position: absolute;
  right: 40px;
  bottom: 0;
}

.work__block:nth-of-type(4) .work__card__img {
    width: 580px;
    height: 328px;
    margin: 10px -70px 0px 0;
}

.work__block:nth-of-type(4) .work__card h3 {
  margin: 0;
  max-width: 458px;
}

.work__block:nth-of-type(5) .work__card h3 {
  margin: 0;
}

.work__block:nth-of-type(5) .work__card {
  padding: 32px 32px 40px 32px;
}

.work__card__mr {
  margin: 80px 0 0 0;
}

.work__block:nth-of-type(5) .work__card p {
  margin: 20px 0 0 0;
}

/*solution*/

.solution {
  margin: 120px 0 90px 0;
}

.solution .global__text p {
  max-width: 551px;
  margin: 40px auto 0 auto;
}

.solution__card {
  background: url(../images/solution__card.png) 50% 50% no-repeat;
  background-size: cover;
  height: 817px;
  margin: 50px 0 0 0;
}



/*mainBlog*/

.mainBlog {
  margin: 90px 0 120px 0;
}

.mainBlog .global__text p {
  max-width: 551px;
  margin: 40px auto 0 auto;
}

.mainBlog__wrap {
  display: flex;
  margin: 40px -10px 0 -10px;
}

.mainBlog__block {
  width: 33.333333333%;
  padding: 20px 10px 0 10px;
}

.mainBlog__card {
  background: #0A0A0A;
  border-radius: 16px;
  height: 100%;
  overflow: hidden;
  padding: 0 0 32px 0;
}

.mainBlog__flex {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  align-content: space-between;
}

.mainBlog__top {
  width: 100%;
}

.mainBlog__img {
  display: flex;
  height: 300px;
  border-radius: 16px;
  overflow: hidden;
}

.mainBlog__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mainBlog__pd {
  padding: 32px 32px 0 32px;
}

.mainBlog__card ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 8px;
}

.mainBlog__card ul li {
  display: flex;
  border: 1px solid #fff;
  border-radius: 100px;
  opacity: 0.5;
}

.mainBlog__card data {
  display: inline-block;
  padding: 5px 9px;
  font-size: 12px;
  line-height: 1.4;
}

.mainBlog__card span {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 12px;
  line-height: 1.4;
}

.mainBlog__card span img {
  margin: 0 4px 0 0;
}

.mainBlog__card h3 {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  margin: 16px 0 0 0;
  max-width: 401px;
}

.mainBlog__card p {
  opacity: 0.6;
  margin: 24px 0 0 0;
}

.mainBlog__bottom {
  width: 100%;
  padding: 32px 32px 0 32px;
}

.mainBlog__card a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 148px;
  height: 48px;
  background: #fff;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  color: #060606;
}

.mainBlog__card a:hover {
  opacity: 0.5;
}

/*reviews*/

.reviews {
  margin: 120px 0;
}

.reviews__wrap {
  display: flex;
  margin: 60px 0 0 0;
}

.reviews__block {
  width: 50%;
  margin: 0 20px 0 0;
}

.reviews__block:last-child {
  margin: 0;
}

.reviews__mr {
  margin: 0 0 20px 0;
}

.reviews__mr:last-child {
  margin: 0;
}

.reviews__card {
  padding: 32px 32px;
  background: #0A0A0A;
  border-radius: 16px;
}

.reviews__stars {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.reviews__stars li {
  display: flex;
}

.reviews__card h3 {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  margin: 27px 0 0 0;
}

.reviews__card p {
  color: #717171;
  margin: 24px 0 0 0;
}

.reviews__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 60px 0 0 0;
}

.reviews__name a {
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 1.8;
  color: #fff;
  text-decoration: underline;
}

.reviews__name a img {
  margin: 0 12px 0 0;
}

.reviews__name a:hover {
  text-decoration: none;
}

.reviews__data data {
  display: inline-block;
  padding: 5px 9px;
  border: 1px solid #FFFFFF;
  border-radius: 100px;
  opacity: 0.5;
  font-size: 12px;
  line-height: 1.4;
}

/*faq*/

.faq {
  margin: 120px 0;
}

.faq__inner {
  max-width: 1056px;
  margin: 60px auto 0 auto;
}

.faq__accordion {
  margin: 0 0 20px 0;
  padding: 32px 24px;
  background: #0A0A0A;
  border-radius: 16px;
}

.faq__accordion:last-child {
  margin: 0;
}

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

.faq__accordion__head h3 {
  width: 95%;
  padding: 0 10px 0 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  margin: 0;
}

.faq__accordion__head span {
  width: 24px;
  height: 24px;
  position: relative;
  display: flex;
}

.faq__accordion__head span:before, .faq__accordion__head span:after {
  position: absolute;
  content: '';
  height: 2px;
  width: 24px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  transition: 0.3s;
}

.faq__accordion__head span:after {
  transform: translateY(-50%) rotate(90deg);
}

.faq__accordion__content {
  display: none;
}

.faq__accordion__content p {
  margin: 20px 0 0 0;
  color: #717171;
  max-width: 628px;
}

.faq__accordion.active .faq__accordion__content {
  display: block;
}

.faq__accordion.active .faq__accordion__head span {
  opacity: 0.5;
}

.faq__accordion.active .faq__accordion__head span:after {
  transform: translateY(-50%) rotate(0deg);
}

/*banner*/

.banner {
  margin: 120px 0;
}

.banner__border {
  background: #0A0A0A url(../images/banner__border.png) 100% 100% no-repeat;
  border-radius: 16px;
  padding: 88px 80px 95px 80px;
}

.banner p {
  color: #717171;
  margin: 48px 0 53px 0;
}

.banner a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 361px;
  height: 48px;
  background: #fff;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  color: #060606;
}

.banner a:hover {
  opacity: 0.5;
}

/*footer*/

footer {
  margin: 120px 0 0 0;
  padding: 0 0 80px 0;
}

.footer__logo {
  display: flex;
}

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

footer p {
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.3;
  margin: 0;
}

.footer__nav {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 60px;
}

.footer__nav li {
  display: flex;
}

.footer__nav li a {
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 1.8;
  color: #fff;
}

.footer__nav li a:hover {
  opacity: 0.6;
}

.footer__nav li a img {
  margin: 0 13px 0 0;
}

.footer__dok {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  gap: 40px;
}

.footer__dok li {
  display: flex;
}

.footer__dok li a {
  display: inline-block;
  font-size: 12px;
  line-height: 1.4;
  color: #FFFFFF;
  opacity: 0.3;
}

.footer__dok li a:hover {
  text-decoration: underline;
}

.footer__dok__mb {
  display: none;
}

/*blog*/

.blog {
  margin: 77px 0 120px 0;
}

.blog .global__text p {
  max-width: 551px;
  margin: 40px auto 0 auto;
}

.blog__wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 40px -10px 0 -10px;
}

.blog__block {
  width: 33.333333%;
  padding: 20px 10px 0 10px;
}

/*article*/

.article__banner {
  border-radius: 16px;
  overflow: hidden;
  height: 500px;
  display: flex;
}

.article__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article__width {
  max-width: 1000px;
  margin: 60px 0 0 0;
}

.article data {
    display: inline-block;
    padding: 5px 9px;
    border: 1px solid #FFFFFF;
    border-radius: 100px;
    opacity: 0.5;
    font-size: 12px;
    line-height: 1.4;
    margin: 0 0 40px 0;
}

.article h1 {
  margin: 0 0 40px 0;
}

.article p {
  color: #717171;
  margin: 0 0 60px 0;
}

.article h3 {
  font-weight: 800;
  font-size: 32px;
  line-height: 1.1;
  margin: 0 0 32px 0;
}

.article ul {
  padding: 0 0 0 20px;
  margin: 0 0 60px 0;
}

.article ul li {
  margin: 0 0 32px 0;
  color: #717171;
  list-style: disc;
}

.article ul li:last-child {
  margin: 0;
}

.article__img {
  display: flex;
  max-width: 807px;
  margin: 0 0 60px 0;
}

.article__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 8px;
}

.article__list li {
  display: flex;
  margin: 0 !important;
  list-style: none !important;
}

.article__list span {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid #fff;
  border-radius: 100px;
  opacity: 0.5;
}

.article__list span img {
  margin: 0 4px 0 0;
}

.article__list a {
  display: flex;
  align-items: center;
  padding: 5px 9px;
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 100px;
  opacity: 0.5;
}

.article__list a img {
  margin: 0 4px 0 0;
}

.article__list a:hover {
  opacity: 1;
}