* {margin: 0px; padding: 0px; box-sizing: border-box; outline: none; -webkit-locale: auto}
html, body {width: 100%}
body {font-size: 16px; padding-left: 40px; padding-right: 40px; font-family: "Inter", sans-serif; background-color: #000; color: #fff; line-height: 1.5;  -webkit-text-size-adjust: none; font-weight: 400}
.max {margin: 0px auto; width: 100%; max-width: 1350px; padding-left: 20px; padding-right: 20px}

a {color: inherit; text-decoration: none; outline: none; cursor: pointer; transition: 250ms}
h1, .h1-like, h2, .h2-like, h3, .h3-like {line-height: 1.3; font-weight: bold}
h1, .h1-like {font-size: 38px; margin: 0 0 var(--margin) 0}
h2, .h2-like {font-size: 32px; margin: var(--margin) 0 calc(var(--margin)/2) 0}
h3, .h3-like {font-size: 22px; margin: var(--margin) 0 calc(var(--margin)/2) 0}

b, strong, th {font-weight: bold}
ul {list-style-type: none}
img {object-fit: contain}
img, svg {height: auto; max-height: 100%; max-width: 100%; display: inline-block; vertical-align: middle}
iframe {width: 100%; border: none}
input, select, textarea, button {-webkit-appearance: none; -moz-appearance: none; font-size: inherit; color: inherit; border-radius: 0px; font-weight: inherit}
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=search] {display: block; width: 100%; border: 1px solid #000; padding: 0px 24px; background: var(--first); height: 50px; border-radius: 5px; transition: 250ms}
textarea {display: block; width: 100%; border: 1px solid #000; padding: 20px; resize: none; height: 100px; font-size: 15px; background: var(--first); border-radius: 5px; font-weight: 500; transition: 250ms}
input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus, textarea:focus, input[type=password]:focus, input[type=search]:focus {border-color: var(--active)}
.button {height: 50px; border: none; width: 220px; max-width: 100%}
.link {text-decoration: underline}

input[type=checkbox] {display: inline-block; vertical-align: middle; width: 16px !important; height: 16px; margin-right: 10px !important; position: relative; border:none; border: 1px solid #dadada; background: #fff}
input[type=checkbox]:checked {background: url("data:image/svg+xml,<svg viewBox='0 0 356.7 297.3' xmlns='http://www.w3.org/2000/svg'><polygon points='42.4,153 0,195.4 101.9,297.3 356.7,42.4 314.3,0 101.9,212.4'/></svg>") 50% 50% no-repeat; background-size: 9px; border-color: var(--active)}

input[type=radio] {display: inline-block; vertical-align: middle; width: 16px !important; height: 16px; margin-right: 10px !important; position: relative; border-radius: 50%; margin-left: 4px; border:none; border: 1px solid #dadada; background: #fff}
input[type=radio]:checked {background: #fff; border: 4px solid #FF3D00}

select, .form-list .SumoSelect>.CaptionCont {display: block; width: 100%; font-size: 15px; font-weight: 500; border: none; border: 2px solid transparent; padding: 0px 25px; background: #ebebeb url("data:image/svg+xml,<svg viewBox='11.4 7.1' width='11.4' height='7.1' xmlns='http://www.w3.org/2000/svg'><path d='M5,6.4l-5-5L1.4,0l4.3,4.3L10,0l1.4,1.4l-5,5L5.7,7.1L5,6.4z'/></svg>") no-repeat; background-position: right 25px center; border-radius: 5px; line-height: 46px; height: 50px !important; box-shadow: none !important; cursor: pointer; transition: border-color 250ms}

input[readonly], input[readonly]:focus {opacity: 0.5; border-color: #b3b3b3}

input.check:focus:invalid {border-bottom-color: #f10d48}
svg {fill: currentColor}
svg * {transition: fill 250ms}

table {width: 100% !important; border-collapse: collapse}
.table-wrapper {overflow-x: auto; margin: 0 -20px; padding: 0 20px}
::placeholder {color:#BEC0C2}
/* GLOBAL */


/* BASIC */
.ds {-webkit-user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none}
.flex {display: flex; flex-wrap: wrap}
.flex.column {flex-direction: column}
.flex.nowrap {flex-wrap: nowrap}
.flex.align-center {align-items: center}
.flex.center {justify-content: center}
.flex.space-between {justify-content: space-between}
.cover {background-position: 50% 50%; background-repeat: no-repeat; background-size: cover}
.contain {background-position: 50% 50%; background-repeat: no-repeat; background-size: contain}
.mobile-show {display: none}
.tablet-show {display: none}
.mobile-flex {display: none}
.section{padding-top: 120px; padding-bottom: 120px; border-radius: 50px}
.section-number{font-size: 14px}
.section-number.dark {color: #000000}
.section-number .number{border-radius: 16px 0 0 16px; margin-right: 1px; background: #eee; width: 32px;height: 32px}
.section-number .name{height: 32px; border-radius: 0 16px 16px 0; background: #eee; padding-left: 16px; padding-right: 16px}
.section-title{font-size: 34px; line-height: 1.3; font-weight: 700; letter-spacing: 1px; text-transform: uppercase}
/* BASIC */




/* HEADER */

header {position: fixed; top: 20px; left: 0; right: 0; z-index: 100}
header .left-part{gap: 50px; padding-left: 10px}
header .left-part ul{gap: 50px}
header .left-part ul a{transition: all 0.3s ease}
.header-wrapper {transition: all 0.3s ease; background: #FFFFFF55; border-radius: 80px; padding: 10px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px)}
.btn{transition: all 0.3s ease; cursor: pointer; border-radius: 40px; padding: 16px 32px; transition: all 0.3s ease; font-size: 20px}
.submit-application__btn{transition: all .3s ease; background: #8B00FF}
.header-wrapper.fixed {background: #55555555}

/* HEADER END */

/* FIRST SECTION */

.blur{background: radial-gradient(50% 50% at 50% 50%, rgba(151, 71, 255, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);height: 550px;width: calc(100% - 30px);position: absolute;top: -250px; z-index: -1}
.home .first-section {position: relative; flex-direction: column; gap: 60px; padding-bottom: 240px; padding-top: 16.6vw}
.home .first-section h1{text-align: center; text-transform: uppercase; font-size: 48px; line-height: 1.2; font-weight: 700}

/* FIRST SECTION END */

/* PROJECT SECTION */

.projects-section{background-color: #fff}
.projects-section .section-number{justify-content: center}
.projects-section .projects-slider{margin-top: 60px; margin-bottom: 60px}
.projects-slider .item {border-radius: 25px; background-color: #000; overflow: hidden}
.projects-slider .item .top-part {position: relative; aspect-ratio: 4/3}
.projects-slider .item .top-part img {position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover}

.projects-slider .item .bottom-part{padding: 30px}
.projects-slider .swiper-wrapper {align-items: center}
.projects-slider .item .title{margin-bottom: 16px; text-transform: uppercase;  font-size: 28px; font-weight: 700; line-height: 1.4}
.projects-slider .item .description{letter-spacing: 1px; font-size: 14px; line-height: 1.3; height: 3.9em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden}
.projects-slider .item .more-btn{transition: 250ms; width: max-content; margin-top: 60px; opacity: 0.3}
.projects-slider .item .more-btn svg{width: 24px;height: 24px;transition: all 0.3s ease; transform: rotate(180deg)}
.slider-max{position: relative; max-width: 1650px; margin: auto; padding-left: 10px; padding-right: 10px}
.projects-slider .swiper-slide-active .more-btn {background: linear-gradient(95.05deg, #00C4FF -2.65%, #8B00FF 97.24%); opacity: 1}
.projects-section {margin-bottom: 120px}
.projects-section .navigation-block{gap: 10px}
.projects-section .projects-slider-prev, .projects-section .projects-slider-next{transition: all 0.3s ease;margin: 0; position: static; display: flex; align-items: center; justify-content: center; width: 56px;height: 56px; border: 1px solid #000000; border-radius: 50%}
.projects-section .projects-slider-prev svg, .projects-section .projects-slider-next svg{transition: all 0.3s ease; width: 24px;height: 24px; color: #000}
.projects-section .swiper-button-next:after,.projects-section .swiper-button-prev:after{display: none}
.projects-section .projects-slider-next svg {transform: rotate(180deg)}
/* PROJECT SECTION END */

.static {padding-top: 120px; padding-bottom: 60px}
.static h1 {margin-bottom: 40px}
/* ABOUT SECTION */

.about-team__wrapper{position: relative}
.about-team__section .left-part{position: relative; z-index: 1}
.about-team__section.grid{display: grid; grid-template-columns: calc(50% - 60px) 50%; gap: 60px}
.about-team__section .right-part{border-radius: 30px; overflow: hidden}
.about-team__section .section-title{margin-bottom: 30px; margin-top: 7.3vw}
.about-team__wrapper .about-back{position: absolute; left: -10px; bottom: -100px}
.about-team__section .section-number .number, .about-team__section .section-number .name {background: #222}
/* ABOUT SECTION END */


/* WHY CHOOSE */
.why-choose{background-color: #fff; position: relative; z-index: 1; color: #000}
.why-choose .section-title{text-align: center; margin-top: 20px}
.why-choose__grid{display: grid; grid-template-columns: repeat(3, 1fr);gap: 20px; margin-top: 50px}
.why-choose__block {border-radius: 30px; color: #fff; padding: 20px; flex-direction: column; gap: 20px}
.why-choose__block .svg-block{width: 42px;height: 42px;border-radius: 50%; background-color: #fff}
.why-choose__block svg{width: 24px;height: 24px}
.why-choose__block .title{min-height: calc(1.4em * 2);font-size: 28px; font-weight: 700;line-height: 1.4;text-transform: uppercase; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical}
.why-choose__block:nth-child(1){background-color: #00C4FF}
.why-choose__block:nth-child(2){background-color: #000000}
.why-choose__block:nth-child(3){background-color: #8B00FF}

/* WHY CHOOSE END */


/* FORM SECTION */

.form-section.grid{display: grid; grid-template-columns: 1fr 1fr; gap: 40px}
.form-section .left-part{flex-direction: column; padding: 20px; background-image: url(images/form-section.jpg);background-position: center; background-repeat: no-repeat; background-size: cover;border-radius: 30px}
.form-section .left-part .above-title{font-size: 14px; letter-spacing: 1px}
.form-section .left-part .title{font-size: 28px; letter-spacing: 1px;text-transform: uppercase; font-weight: 700}
.form-section .left-part .title-block{flex-direction: column; gap: 30px;max-width: 318px}


/* FORM */
.form-list.flex li {width: 100%}
.form-list.flex li.wide {width: 100%}
.form-list li {position: relative; display: block}
.form-list input,.form-list button{height: 62px;border-radius: 40px;background: #FAF2ED33}
.form-list {flex-direction: column;gap: 20px}
form .button {cursor: pointer; transition: all 0.3s ease; height: 62px; margin-top: 20px; background-color: #fff; width: 100%; border-radius: 40px;color: #000; font-weight: 500}
.form-list .wpcf7-not-valid-tip {position: absolute; top: 20px; right: 25px; pointer-events: none}
.wpcf7-spinner {position: absolute; margin-top: -42px}

/* FORM */
.form-section .agreement{margin-top: 15px; font-size: 14px; opacity: .7; letter-spacing: 1px}
.form-section .agreement a{border-bottom: 1px solid; transition: all 0.3s ease}
/* FORM SECTION END */


/* PAGE PROJECT */
.project-page .first-section {padding-bottom: 100px; padding-top: 100px; gap: 20px}
.project-page .first-section h1 {margin-bottom: 30px; text-transform: uppercase; font-size: 48px; line-height: 1.2; font-weight: 700}
.project-page .first-section .left-part {max-width: 456px}
.project-page .first-section .left-part p{margin-bottom: 80px}
.project-page .first-section .left-part .book-block {gap: 30px}
.project-page .first-section .left-part .arrow{transition: all 0.3s ease; border: 1px solid #fff; border-radius: 50%;width: 54px;height: 54px}
.project-page .first-section .left-part .arrow svg{width: 24px;height: 24px;transform: rotate(180deg)}
.project-page .first-section .left-part .book-block img{max-width: 116px}
.project-page .first-section .right-part {max-width: 50%}
.project-page .first-section .left-part .arrow:hover {border-color: #00C4FF; color: #00C4FF}

.project-page .second-section{background-color: #fff; color: #000}
.project-page .second-section__wrapper.grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px}
.project-page .second-section__block.img-block{grid-column: span 2}
.project-page .second-section__block .title{font-size: 28px;font-weight: 700;letter-spacing: 0.03em;line-height: 1.4;text-transform: uppercase; margin-bottom: 20px}
.project-page .second-section__block.flex{flex-direction: column; gap: 60px}

.project-page .projects-section {background-color: #fff}
.project-page .projects-section .button-block{gap: 10px}
.project-page .projects-section .section-title__block{position: relative; color: #000}
.project-page .projects-section .project-page .second-section{color: #000;font-size: 40px;line-height: 1.3;font-weight: 700;text-transform: uppercase}
.product-wrapper{display: block; border-radius: 30px; padding: 20px;background-color: #000; color: #fff;transition: all 0.3s ease; cursor: pointer}
.product-wrapper .top-part{overflow: hidden; border-radius: 10px}
.product-wrapper .title{margin-top: 20px; margin-bottom: 20px; text-transform: uppercase; font-size: 28px;font-weight: 700;letter-spacing: 0.03em}
.swiper-button-next:after, .swiper-button-prev:after {display: none}
.projects-slider{margin-top: 50px}
.projects-slider-next svg{transform: rotate(180deg)}
.projects-slider-prev.swiper-button-prev, .projects-slider-next.swiper-button-next{transition: all .3s ease; position: static; width: 54px;height: 54px;border: 1px solid #000; border-radius: 50%}
.projects-slider-prev.swiper-button-prev svg, .projects-slider-next.swiper-button-next svg{transition: all .3s ease; width: 24px;height: 24px;color: #000}
/* PAGE PROJECT */


/* FOOTER */
footer {padding-bottom: 120px}
footer .top-part{padding-bottom: 60px}
footer .logo{gap: 20px}
footer .top-part .right-part{flex-direction: column; gap: 30px; align-items: end}
footer .top-part .right-part ul.flex{gap: 40px; text-transform: uppercase}
footer .top-part .right-part .btn{background-color: #fff; color: #000; font-weight: 500}
footer .top-part .right-part ul a{transition: all 0.3s ease}

footer .bottom-part{border-top: 1px solid #FFFFFF80; padding-top: 20px}
footer .bottom-part .social-media{gap: 14px}
footer .bottom-part .social-media a{transition: all 0.3s ease; width: 28px;height: 28px; background-color: #fff; border-radius: 50%}
footer .bottom-part .social-media a svg{color: #000}
footer .bottom-part .left-part.flex{gap: 20px}
footer .bottom-part .left-part a{border-bottom: 1px solid}
footer .belka {width: 30px; height: 30px; border-bottom: none !important; filter: brightness(0%) invert(1); opacity: 0.2}
/* FOOTER END */






@media (hover: hover){
  footer .belka:hover {opacity: 1; filter: unset}
footer .bottom-part .social-media a:hover{scale: 1.1}
.submit-application__btn:hover{background:  #00C4FF}
header .left-part ul a:hover{color: #00C4FF}
.projects-section .projects-slider-prev:hover svg, .projects-section .projects-slider-next:hover svg{color: #fff}
.projects-section .projects-slider-prev:hover , .projects-section .projects-slider-next:hover {background-color: #00C4FF; border: 1px solid #00C4FF}
footer .top-part .right-part .btn:hover, form .button:hover{background-color: #00C4FF; color: #fff}
.form-section .agreement a:hover{color: #00C4FF}
footer .top-part .right-part ul a:hover, footer .bottom-part .left-part a:hover{color: #00C4FF}
}

@media screen and (max-width: 1919px){
  body {font-size: 15px}
  .max {max-width: 1240px}
  .home .first-section img{height: 10.4vw}
  .home .first-section h1 {font-size: 34px}
  .home .first-section{padding-bottom: 12.5vw}
  .section {padding-top: 100px;padding-bottom: 100px;border-radius: 45px}
  .project-page .first-section h1{font-size: 36px}
  .project-page .second-section__block .title {font-size: 24px}
  .btn {padding: 13px 25px;font-size: 18px}
  .projects-slider .item .title {margin-bottom: 15px;font-size: 22px}
  .projects-slider .item .description {font-size: 13px}
  .section-title {font-size: 26px}
  .about-team__section .text{font-size: 15px}
  .why-choose__block .title {font-size: 22px}
  .why-choose__block  .text{font-size: 15px}
  .form-section .left-part .title {font-size: 25px}
  .projects-slider .item .more-btn {margin-top: 50px}
  footer .logo-img{height: 80px}
  footer .logo-text{height: 60px}
  .projects-section {margin-bottom: 100px}
  .home .first-section h1 {font-size: 36px}
  .projects-slider-prev.swiper-button-prev, .projects-slider-next.swiper-button-next {height: 40px; width: 40px}
  .projects-slider-prev.swiper-button-prev svg, .projects-slider-next.swiper-button-next svg {width: 16px; height: 16px}
}


@media screen and (max-width: 1440px){
  header .logo-block img{width: 100px}
  .btn {padding: 10px 23px;font-size: 16px}
  .section {padding-top: 80px;padding-bottom: 80px;border-radius: 40px}
  .projects-slider .item .bottom-part {padding: 20px}
  .projects-slider .item .title {margin-bottom: 15px;font-size: 18px}
  .projects-slider .item .description {font-size: 12px}
  .projects-slider .item .more-btn {margin-top: 40px;padding: 10px 21px;font-size: 16px; display: block}
  .section-title {font-size: 22px}
  .why-choose__block .title {font-size: 18px}
  .form-section .left-part .title {font-size: 20px}
  footer .logo-img {height: 60px}
  footer .logo-text {height: 45px}
  footer .top-part {padding-bottom: 40px;
	.projects-section {margin-bottom: 80px}
	footer {padding-bottom: 80px}
}



}

@media screen and (max-width: 1023px){
  .project-page .second-section__wrapper.grid{grid-template-columns: 100%}
  .project-page .second-section__block.img-block {grid-column: span 1}
  .section {padding-top: 40px; padding-bottom: 40px}
  header .left-part ul {gap: 30px}
  .projects-slider .swiper-slide-active{scale: 1}
  .projects-section .projects-slider {margin-top: 40px;margin-bottom: 40px;padding-top: 0px;padding-bottom: 0px}
  .projects-section {margin-bottom: 40px}
  .about-team__section.grid {grid-template-columns: calc(50% - 30px) 50%;gap: 30px}
  .section-title, .project-page .second-section__block .title {font-size: 18px}
  .why-choose__grid {grid-template-columns: 100%}
  .form-section .left-part .title {font-size: 17px}
  .btn {padding: 8px 17px;font-size: 14px}
  form .button {height: 52px}
  .form-list input, .form-list button {height: 52px}
  .form-list .placeholder {height: 52px; line-height: 52px}
  .home .first-section h1 {font-size: 24px}
  .project-page .first-section h1 {font-size: 28px}
  .project-page .first-section .left-part .arrow {width: 40px;height: 40px}
  .project-page .first-section .left-part .arrow svg{width: 20px;height: 20px}
  body {font-size: 14px} 
}

@media screen and (max-width: 767px){
  body {padding: 0; font-size: 13px}
  .max {padding: 0 20px}
  .mobile-hide {display: none !important}
  header {top: 10px; left: 10px; right: 10px}
  .header-wrapper {padding: 5px}
  header .logo-block img {width: 80px}
  .home .first-section h1 {font-size: 18px}
  .about-team__section.grid {grid-template-columns: 100%}
  .form-section.grid {grid-template-columns: 100%}
  .section {border-radius: 0}
  footer .bottom-part {gap: 20px; justify-content: center !important}
  .form-section .agreement {text-align: center; font-size: 12px}
  footer .logo {margin: 0 auto}
  .section-number .number {display: none}
  .section-number .name {background: transparent; opacity: 0.5; padding: 0}
  .home .first-section img {height: 30vw}
  .home .first-section {padding: 80px 0}
  .projects-slider .item .more-btn {font-size: 12px}
  .project-page .first-section .left-part {width: 100%; max-width: unset}
  .project-page .first-section .right-part {width: 100%; max-width: unset}
  .project-page .first-section .left-part .book-block img {max-width: 80px}
  .project-page .first-section .left-part .book-block {gap: 20px}
  .project-page .first-section {flex-wrap: wrap}
  footer {padding-bottom: 80px}
}