@font-face {
   font-family: 'Inter';
   src: url('../fonts/Inter-Bold.woff2') format('woff2');
   font-weight: bold;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Inter';
   src: url('../fonts/Inter-Black.woff2') format('woff2');
   font-weight: 900;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Inter';
   src: url('../fonts/Inter-ExtraBold.woff2') format('woff2');
   font-weight: bold;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Inter';
   src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
   font-weight: 600;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Inter';
   src: url('../fonts/Inter-Medium.woff2') format('woff2');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}


/* ------------------------------- 
Specification
------------------------------- */
body {
   font-family: 'Inter', sans-serif;
   color: #000;
   font-size: 16px;
   margin: 0;
   padding: 0;
}

body.overflow-hidden {
   overflow: hidden;
}

body, html {
   height: 100%;
}

div, p, form, input, a, span, button, textarea, input {
   box-sizing: border-box;
}

ul, li {
   display: block;
   padding: 0;
   margin: 0;
}

p {
   margin: 0;
   font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
   margin: 0;
}

a, a:hover, a:active {
   text-decoration: none;
}

a, button, input {
   transition: all 0.5s ease;
}

input {
   font-family: inherit;
   border-radius: 0;
   -webkit-appearance: button;
}

input, input:hover, input:focus, input:active,
button, button:hover, button:focus, button:active,
textarea, textarea:hover, textarea:focus, textarea:active {
   outline: none;
}

textarea {
   outline: none;
   resize: none;
   font-family: inherit;
   border: none;
   display: block;
}

main {
   flex: 1 1 auto;
}

.wrapper {
   min-height: 100%;
   display: flex;
   flex-direction: column;
}

.container {
   margin: 0 auto;
   max-width: 1280px;
   padding-left: 40px;
   padding-right: 40px;
}

/*
* Buttons
*/
.btn-wrapper button {
   font-family: inherit;
   cursor: pointer;
   border: none;
}

.btn-primary {
   border-radius: 5px;
   background-color: #CEFE26;
   padding: 16px 32px;
   color: #000;
   font-size: 16px;
   font-weight: 600;
   line-height: 150%;
   text-align: center;
}

.btn-primary:hover {
   color: #CEFE26;
   background-color: #000;
}


/*
* Classes
*/
@media only screen and (max-width: 992px) {
   .d-tablet-none {
      display: none;
   }
}

@media only screen and (min-width: 993px) {
   .d-tablet-block {
      display: none;
   }
}

.section-label {
   margin-bottom: 12px;
   color: #A0A0A0;
   font-size: 24px;
   font-weight: 700;
   line-height: 150%;
}

.section-title {
   font-size: 64px;
   line-height: 140%;
}

/* ------------------------------- 
Menu mobile button
------------------------------- */
.header .container {
   max-width: 1440px;
}

.header-btn-menu {
   width: 24px;
   height: 24px;
   cursor: pointer !important;
   padding: 0 !important;
   transition: all 0.5s ease;
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: relative;
   background-color: transparent;
   padding: 0 2px;
}

.header-btn-menu span {
   width: 24px;
   height: 2px;
   background-color: #000000;
   transition: all .5s ease;
   border-radius: 10px;
   display: inline-block;
   margin: 2px 0;
}

.header-btn-menu.active span {
   position: absolute;
}

.header-btn-menu.active span:first-child {
   transform: rotate(45deg);
   top: 12px;
}

.header-btn-menu.active span:nth-child(2) {
   opacity: 0;
}

.header-btn-menu.active span:nth-child(3) {
   transform: rotate(-45deg);
   top: 12px;
}

.header-mobile {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 9;
   transition: all 0.5s ease;
   background-color: rgb(255 255 255 / 92%);
   transform: translateY(100%);
   opacity: 0;
}

.header-mobile.active {
   transform: translateY(0%);
   opacity: 1;
}

.header-mobile__wrapper {
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

/* ------------------------------- 
Header section START
------------------------------- */
.header {
   padding: 20px 0;
   background-color: #ffffff;
}

.header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
   z-index: 10;
}

.header-logotype {
   max-width: 130px;
   display: block;
}

.header-logotype img {
   width: 100%;
   display: block;
}

.header-right {
   display: flex;
   align-items: center;
   column-gap: 60px;
}

.header-nav ul {
   display: flex;
   align-items: center;
   column-gap: 60px;
}

.header-nav ul li a {
   font-weight: 600;
   line-height: 150%;
   color: #000;
}

.header-btn {
   padding: 12px 20px;
}

/* ------------------------------- 
Hero section START
------------------------------- */
.hero {
   padding: 110px 0;
   position: relative;
   z-index: 1;
}

.hero .container {
   max-width: 1440px;
}

.hero-inner {
   position: relative;
}

.hero-block__social {
   position: absolute;
   bottom: 0;
   right: 0;
   z-index: 1;
}

.hero-video {
   position: absolute;
   width: 74%;
   height: 100%;
   z-index: 1;
   right: 0;
   top: 0;
   bottom: 0;
}

.hero-video:before {
   content: '';
   position: absolute;
   width: 80%;
   height: 100%;
   background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(73, 143, 232, 0) 100%);
   top: 0;
   bottom: 0;
   left: -2px;
   z-index: 3;
}

.hero-video video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 2;
   filter: grayscale(100%);
   transition: filter 0.3s ease;
}

@media only screen and (min-width: 993px) {
   .hero-video:hover video {
      filter: grayscale(0);
   }
}

.hero-block {
   position: relative;
   z-index: 2;
   max-width: 684px;
}

.hero-block__content {
   margin-bottom: 40px;
}

.hero-block__content h1 {
   font-size: 80px;
   font-weight: 700;
   line-height: 140%;
   margin-bottom: 16px;
}

.hero-block__content p {
   font-size: 20px;
   font-weight: 500;
   line-height: 150%;
   max-width: 580px;
}

.hero-block__btn {
   display: inline-block;
}

/* ------------------------------- 
Benefits section START
------------------------------- */
.benefits {
   padding: 60px 0px;
   background-color: #CEFE26;
}

.benefits .container {
   max-width: 1440px;
}

.benefits-inner {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   margin: auto;
   gap: 64px 100px;
}

.benefits-item {
   max-width: 150px;
   width: 100%;
   text-align: center;
}

.benefits-item__icon {
   width: 48px;
   height: 48px;
   margin: 0 auto 20px;
}

.benefits-item__icon img {
   width: 100%;
}

.benefits-item__description {
   font-size: 20px;
   line-height: 150%;
}

.benefits-item__description p {
   font-weight: 700;
}

/* ------------------------------- 
Benefits section START
------------------------------- */
.about {
   padding-top: 120px;
}

.about-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 50px;
}

.about-content {
   max-width: 580px;
   width: 100%;
}

.about-content__title {
   margin-bottom: 32px;
}

.about-content__description {
   margin-bottom: 40px;
}

.about-content__description p {
   line-height: 150%;
   font-weight: 500;
}

.about-content__description p:not(:last-child) {
   margin-bottom: 24px;
}

.about-image {
   max-width: 560px;
   position: relative;
   width: 60%;
}

.about-image img {
   width: 100%;
}

.about-image-element {
   width: 77px;
   height: 77px;
   position: absolute;
}

.about-image-element-1 {
   top: -10px;
   left: -10px;
   border-top: 5px solid #CEFE26;
   border-left: 5px solid #CEFE26;
}

.about-image-element-2 {
   top: -10px;
   right: -10px;
   border-top: 5px solid #CEFE26;
   border-right: 5px solid #CEFE26;
}

.about-image-element-3 {
   border-bottom: 5px solid #CEFE26;
   border-left: 5px solid #CEFE26;
   left: -10px;
   bottom: -5px;
}

.about-image-element-4 {
   bottom: -5px;
   right: -10px;
   border-right: 5px solid #CEFE26;
   border-bottom: 5px solid #CEFE26;
}

/* ------------------------------- 
Services section START
------------------------------- */
.services {
   padding: 200px 0 150px;
}

.services-label {
   text-align: center;
}

.services-title {
   margin-bottom: 64px;
   text-align: center;
}

.services-list {
   display: flex;
   flex-wrap: wrap;
   gap: 40px;
}

.service-item {
   max-width: calc(50% - 22px);
   width: 100%;
   background-color: #F5F5F5;
   padding: 48px 0px 20px 48px;
}

.service-item__top {
   margin-bottom: 34px;
   display: flex;
   align-items: flex-end;
   gap: 4px;
}

.service-item__title {
   transform: rotate(-90deg);
   font-size: 32px;
   line-height: 120%;
   text-transform: uppercase;
   writing-mode: vertical-rl;
   transform: rotate(180deg);
   max-width: 76px;
   max-height: 261px;
}

.service-item__image img {
   width: 100%;
   display: block;
   height: 250px;
   object-fit: cover;
   filter: grayscale(100%);
   transition: all 0.5s ease;
}

.service-item:hover .service-item__image img {
   filter: grayscale(0%);
}

.service-item__description {
   max-width: 508px;
}

.service-item__description p {
   font-weight: 500;
   line-height: 150%;
}

/* ------------------------------- 
Footer section START
------------------------------- */
.footer {
   background-color: #CEFE26;
   padding: 40px 0 60px;
}

.footer .container {
   max-width: 1440px;
}

.footer-inner {
   display: flex;
   justify-content: space-between;
   gap: 64px 136px;
}

.footer-text {
   font-size: 100px;
   font-weight: 900;
   line-height: 140%;
   writing-mode: vertical-rl;
   transform: rotate(180deg);
   max-height: 444px;
   max-width: 280px;
}

.footer-content {
   max-width: 784px;
   width: 100%;
   padding-top: 120px;
}

.footer-top {
   margin-bottom: 120px;
}

.footer-menu ul {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
}

.footer-menu ul li a {
   font-size: 24px;
   font-weight: 800;
   line-height: 150%;
   color: #000000;
}

.footer-bottom {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 48px;
}

.footer-bottom__contacts {
   max-width: 270px;
   font-weight: 600;
}

.footer-bottom__address {
   margin-bottom: 33px;
   color: #000;
   line-height: 150%;
   display: inline-block;
}

.footer-bottom__copyright {
   line-height: 150%;
}

.social-list {
   display: flex;
   flex-direction: column;
   gap: 30px;
}

.social-list a {
   width: 24px;
   height: 24px;
   display: block;
}

.social-list a img {
   width: 100%;
   height: 100%;
}