@charset "UTF-8";

:root {
--main-bg-color: #f1f1f1;
--main-dark-color: #1a1a1a;
--second-dark-color: #323232;
--main-green-color: #00a3a0;
--light-green-color: #f6f9f9;
--main-gray-color: #ebebeb;
--second-gray-color: #848484;
--third-gray-color: #5c5c5c;
--four-gray-color: #bfbfbf;
--five-gray-color: #bab9b9;
--six-gray-color: #e8e7e7;
--main-blue-color: #0ba0bc;
--second-blue-color: #09cdbf;
--white-color: #fff;
--light-color: #f0f0f0;
--light-second-color: #fafafa;
--light-third-color: #f5f8f8;
--bg-light-color: #f6f9f9;
--bg-light-sec-color: #fdfdfc;
--bg-blue-light-color: #f5f9f9;
--bg-hover-color: #ecfffd;
}
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
width: 100%;
margin: 0 auto;
}
body {
margin: 0 auto;
font-family: "Inter Tight", Verdana, Arial, sans-serif;
background-color: var(--main-bg-color);
overflow-x: hidden;
font-weight: 500;
position: relative;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
body::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 900;
background-color: var(--main-bg-color);
transition: opacity 0.3s ease-in;
pointer-events: none;
}
body.loading::after {
opacity: 0;
}
body.loaded::after {
display: none;
}
main {
display: block;
flex-grow: 1;
width: 100%;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: normal;
}
hr {
box-sizing: content-box; height: 0; overflow: visible; }
::-webkit-file-upload-button {
cursor: pointer;
}
pre {
font-family: monospace, monospace; font-size: 1em; }
p {
margin: 0;
}
a {
background-color: transparent;
text-decoration: none;
transition: color 0.2s ease-in;
box-sizing: border-box;
outline: none;
}
a:active {
color: inherit;
}
* {
box-sizing: border-box;
}
svg {
fill: currentColor;
}
ul, ol {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul li, ol li {
list-style: none;
}
abbr[title] {
border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong {
font-weight: bolder;
}
code, kbd, samp {
font-family: monospace, monospace; font-size: 1em; }
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
display: block;
border-style: none;
}
img.lazy {
opacity: 0;
transition: all 0.3s ease;
}
img.lazy[data-ll-status=loaded] {
opacity: 1;
}
img.swiper-lazy {
opacity: 0;
}
img.swiper-lazy.swiper-lazy-loaded {
opacity: 1;
}
button, input, optgroup, select, textarea {
font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; box-sizing: border-box;
}
button, input { overflow: visible;
background-color: transparent;
border: none;
box-sizing: border-box;
}
input:focus {
outline: none;
}
button, select { text-transform: none;
cursor: pointer;
padding: 0;
}
form {
box-sizing: border-box;
}
div {
box-sizing: border-box;
}
button, [type=button], [type=reset], [type=submit] {
-webkit-appearance: button;
}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
outline: 1px dotted buttonText;
}
fieldset {
padding: 0;
border: none;
}
legend {
box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type=checkbox], [type=radio] {
box-sizing: border-box; padding: 0; }
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
height: auto;
}
[type=search] {
-webkit-appearance: textfield; outline-offset: -2px; }
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit; }
details {
display: block;
}
summary {
display: list-item;
}
template {
display: none;
}
[hidden] {
display: none !important;
}
input[hidden] {
display: block !important;
opacity: 0;
pointer-events: none;
height: 0;
}
input:-webkit-autofill {
transition: background-color 5000s ease-in-out 0s;
-webkit-text-fill-color: #9a9a9a !important;
}
textarea:-webkit-autofill {
transition: background-color 5000s ease-in-out 0s;
-webkit-text-fill-color: #9a9a9a !important;
}
* {
-webkit-tap-highlight-color: transparent;
}
*::-webkit-search-cancel-button {
display: none;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
transform-origin: center;
transition: background-color 0.2s ease, border-color 0.2s ease, background-position 0.2s ease;
}
.button__text {
position: relative;
z-index: 3;
}
.button__icon {
display: flex;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
position: relative;
z-index: 3;
flex-shrink: 0;
}
.button__icon svg {
width: 100%;
height: 100%;
}
.button__icon--sec {
margin: 0 0 0 0.625rem;
}
.button__icon--auto {
margin: 0 -0.5rem 0 0;
}
.button__icon--auto-2 {
margin: 0 0 0 -1rem;
}
.button__icon--auto-3 {
margin: 0 0 0 -0.5rem;
}
.button--small {
height: 2rem;
font: 400 0.875rem/1.2 "Inter Tight", Verdana, Arial, sans-serif;
padding: 0.25rem 0.5rem;
border-radius: 0.5rem;
gap: 0.5rem;
border: 0.0625rem solid transparent;
}
.button--small:has(.button__icon) {
padding: 0.25rem 0.9375rem;
}
.button--default {
height: 2.5rem;
font: 400 1rem/1.2 "Inter Tight", Verdana, Arial, sans-serif;
padding: 0.25rem 1.0625rem;
border-radius: 0.5rem;
gap: 0.5rem;
border: 0.0625rem solid transparent;
}
.button--default:has(.button__icon) {
padding: 0.25rem 0.9375rem;
}
.button--default-sec {
height: 2.75rem;
font: 400 1rem/1.2 "Inter Tight", Verdana, Arial, sans-serif;
padding: 0.25rem 1.5625rem;
border-radius: 0.5rem;
gap: 0.5rem;
border: 0.0625rem solid transparent;
}
.button--default-sec:has(.button__icon) {
padding: 0.25rem 0.9375rem;
}
.button--default-sec:has(.button__icon--sec) {
padding: 0.25rem 0.9375rem 0.25rem 1.5rem;
}
.button--h48 {
height: 3rem;
}
.button--dark {
background-color: var(--main-dark-color);
color: var(--white-color);
}
.button--dark::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: calc(100% + 0.1875rem);
height: calc(100% + 0.1875rem);
transform: translate(-50%, -50%);
background: linear-gradient(125deg, var(--main-blue-color), var(--second-blue-color));
opacity: 0;
transition: opacity 0.15s ease-in;
border-radius: inherit;
}
.desktop-device .button--dark:hover::after {
opacity: 1;
}
.button--dark.in-cart::after {
opacity: 1;
}
.button--white {
color: var(--main-dark-color);
border-color: var(--main-gray-color);
background-color: var(--white-white);
font-weight: 500;
}
.button--white::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
width: calc(100% + 0.1875rem);
height: calc(100% + 0.1875rem);
transform: translate(-50%, -50%);
background-color: transparent;
background-image: linear-gradient(125deg, var(--main-blue-color), var(--second-blue-color));
opacity: 0;
transition: opacity 0.15s ease-in;
border-radius: inherit;
}
.button--white::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: 100%;
height: calc(100% + 0.0625rem);
transform: translate(-50%, -50%);
background-color: var(--white-color);
opacity: 1;
transition: opacity 0.15s ease-in;
border-radius: inherit;
}
.desktop-device .button--white:hover .button__icon {
color: var(--main-blue-color);
}
.desktop-device .button--white:hover .button__text {
color: transparent;
background-image: linear-gradient(125deg, var(--main-blue-color), var(--second-blue-color));
background-clip: text;
-webkit-background-clip: text;
}
.desktop-device .button--white:hover::after {
opacity: 1;
}
.button--white.button--border-gradient {
border-color: transparent;
}
.button--white.button--border-gradient::after {
opacity: 1;
}
.button--white.button--border-gradient.js-add-service .button__icon svg:nth-child(2) {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
opacity: 0;
}
.button--white.button--border-gradient.in-cart .button__text {
color: transparent;
background-image: linear-gradient(125deg, var(--main-blue-color), var(--second-blue-color));
background-clip: text;
-webkit-background-clip: text;
}
.button--white.button--border-gradient.in-cart .button__icon svg:nth-child(2) {
opacity: 1;
}
.button--white.button--border-gradient.in-cart .button__icon svg:nth-child(1) {
opacity: 0;
}
.button--white-sec {
border-color: var(--main-gray-color);
background-color: var(--white-white);
font-weight: 500;
}
.button--white-sec .button__text {
color: transparent;
background-image: linear-gradient(125deg, var(--main-blue-color), var(--second-blue-color));
background-clip: text;
-webkit-background-clip: text;
}
.button--white-sec::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
width: calc(100% + 0.1875rem);
height: calc(100% + 0.1875rem);
transform: translate(-50%, -50%);
background-color: transparent;
background-image: linear-gradient(125deg, var(--main-blue-color), var(--second-blue-color));
opacity: 0;
transition: opacity 0.15s ease-in;
border-radius: inherit;
}
.button--white-sec::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: 100%;
height: calc(100% + 0.0625rem);
transform: translate(-50%, -50%);
background-color: #f8f8f8;
opacity: 1;
transition: opacity 0.15s ease-in;
border-radius: inherit;
}
.desktop-device .button--white-sec:hover .button__icon {
color: var(--main-blue-color);
}
.desktop-device .button--white-sec:hover .button__text {
color: #ffffff;
}
.desktop-device .button--white-sec:hover::after {
opacity: 1;
}
.desktop-device .button--white-sec:hover::before {
opacity: 0;
}
.button--white-sec.button--border-gradient {
border-color: transparent;
}
.button--white-sec.button--border-gradient::after {
opacity: 1;
}
.swiper-btn {
display: flex;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
color: var(--main-dark-color);
transition: color 0.15s ease-in;
}
@media (min-width: 768px) {
.swiper-btn {
width: 2rem;
height: 2rem;
}
}
.swiper-btn svg {
width: 100%;
height: 100%;
}
.swiper-btn--type-2 {
background-color: var(--white-color);
border-radius: 0.5rem;
width: 2.75rem;
height: 2.75rem;
}
.swiper-btn--type-2 svg {
width: 2rem;
height: 2rem;
}
.swiper-btn.swiper-lock {
color: var(--main-gray-color);
pointer-events: none;
}
.swiper-btn.swiper-button-lock {
display: none;
}
.desktop-device .swiper-btn:hover {
color: var(--main-blue-color);
}
.icon-btn {
display: flex;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
position: relative;
}
.icon-btn[type=button]::after {
content: "";
position: absolute;
width: 180%;
height: 180%;
top: 50%;
left: 50%;
z-index: 1;
transform: translate(-50%, -50%);
}
.icon-btn svg, .icon-btn img {
width: 100%;
height: 100%;
transition: transform 0.15s ease-in;
}
.icon-btn--sec svg, .icon-btn--sec img {
width: 1.5rem;
height: 1.5rem;
}
.icon-btn--th {
width: 1.5rem;
height: 1.5rem;
}
.icon-btn--sm {
width: 1.25rem;
height: 1.25rem;
}
.icon-btn--dark {
color: var(--main-dark-color);
}
.icon-btn--dark[type=button]:hover {
color: var(--main-green-color);
}
.icon-btn--remove {
width: 1.25rem;
height: 1.25rem;
background-color: var(--white-color);
color: var(--second-gray-color);
border: 0.0625rem solid var(--main-gray-color);
border-radius: 100%;
transition: color 0.15s ease-in;
}
.icon-btn--remove svg {
width: 0.5rem;
height: 0.5rem;
}
.icon-btn--remove:hover {
color: orange;
}
.icon-btn--remove-big {
width: 1.75rem;
height: 1.75rem;
background-color: var(--white-color);
color: var(--second-gray-color);
border: 0.0625rem solid var(--main-gray-color);
border-radius: 100%;
transition: color 0.15s ease-in;
}
.icon-btn--remove-big svg {
width: 0.625rem;
height: 0.625rem;
}
.icon-btn--remove-big:hover {
color: orange;
}
.icon-btn--bg-white {
border-radius: 0.5rem;
background-color: var(--color-white);
box-shadow: 0 0 1rem rgba(181, 181, 181, 0.19);
}
.icon-btn--bg-light {
border-radius: 0.5rem;
background-color: var(--light-second-color);
}
.icon-btn.js-toggle-btn {
position: relative;
}
.icon-btn.js-toggle-btn svg:nth-child(2) {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
transform: scale(0);
}
.icon-btn.js-toggle-btn.show svg:nth-child(1) {
transform: scale(0);
}
.icon-btn.js-toggle-btn.show svg:nth-child(2) {
transform: scale(1);
}
.title--big {
font: 500 2rem/1.3 "Inter Tight", Verdana, Arial, sans-serif;
}
@media (min-width: 744px) {
.title--big {
font-size: 3rem;
}
}
@media (min-width: 1366px) {
.title--big {
font-size: 3.375rem;
}
}
.title--big .title__images {
display: inline;
}
.title--big .title__images .title-img {
display: inline;
transform: translateY(0.22em);
margin: 0 -1.8125rem 0 0.25rem;
}
.title--big .title__images .title-img:last-child {
margin-right: 0;
}
@media (max-width: 743px) {
.title--big .title__images {
display: none;
}
}
.title--big .title__images--mob {
display: inline;
}
@media (min-width: 744px) {
.title--big .title__images--mob {
display: none;
}
}
.title--big .title__images--mob .title-img {
transform: translateY(0.26em);
margin: 0 -1.1875rem 0 0;
}
.title--big-sec {
font: 500 2rem/1.3 "Inter Tight", Verdana, Arial, sans-serif;
}
@media (min-width: 744px) {
.title--big-sec {
font-size: 3.375rem;
}
}
.title--big-th {
font: 500 2rem/1.3 "Inter Tight", Verdana, Arial, sans-serif;
}
@media (min-width: 390px) {
.title--big-th {
font-size: 2.25rem;
}
}
@media (min-width: 744px) {
.title--big-th {
font-size: 3rem;
}
}
@media (min-width: 1366px) {
.title--big-th {
font-size: 3.375rem;
}
}
.title--big-four {
font: 500 2.25rem/1.3 "Inter Tight", Verdana, Arial, sans-serif;
}
@media (min-width: 744px) {
.title--big-four {
font-size: 3.375rem;
}
}
.title--medium {
font: 500 1.5rem/1.3 "Inter Tight", Verdana, Arial, sans-serif;
}
@media (min-width: 744px) {
.title--medium {
font-size: 2rem;
}
}
.title--medium-sec {
font: 500 1.75rem/1.3 "Inter Tight", Verdana, Arial, sans-serif;
}
@media (min-width: 744px) {
.title--medium-sec {
font-size: 2rem;
}
}
.title--medium-th {
font: 500 2rem/1.3 "Inter Tight", Verdana, Arial, sans-serif;
}
@media (min-width: 744px) {
.title--medium-th {
font-size: 1.75rem;
}
}
@media (min-width: 1024px) {
.title--medium-th {
font-size: 2.5rem;
}
}
.title--medium-four {
font: 500 1.75rem/1.3 "Inter Tight", Verdana, Arial, sans-serif;
}
@media (min-width: 1024px) {
.title--medium-four {
font-size: 2rem;
}
}
.title--medium-five {
font: 500 2rem/1.3 "Inter Tight", Verdana, Arial, sans-serif;
}
.title--default {
font: 500 1.5rem/1.4 "Inter Tight", Verdana, Arial, sans-serif;
}
.title--default-sec {
font: 500 1.125rem/1.4 "Inter Tight", Verdana, Arial, sans-serif;
}
@media (min-width: 744px) {
.title--default-sec {
font-size: 1.5rem;
}
}
.title--small {
font: 600 1.25rem/1.4 "Inter Tight", Verdana, Arial, sans-serif;
}
.title--small-sec {
font: 600 1.125rem/1.4 "Inter Tight", Verdana, Arial, sans-serif;
}
@media (min-width: 744px) {
.title--small-sec {
font-size: 1.25rem;
}
}
.title--dark {
color: var(--main-dark-color);
}
.title--light {
font-weight: 500;
}
.title-img {
width: 2.5rem;
height: 2.5rem;
border: 0.25rem solid var(--light-third-color);
border-radius: 100%;
}
@media (min-width: 744px) {
.title-img {
width: 3.375rem;
height: 3.375rem;
}
}
.simple-text strong {
font-weight: 600;
}
.simple-text--medium {
font: 400 1rem/1.2 "Inter Tight", Verdana, Arial, sans-serif;
}
@media (min-width: 744px) {
.simple-text--medium {
font-size: 1.125rem;
}
}
.simple-text--medium-sec {
font: 400 1.125rem/1.2 "Inter Tight", Verdana, Arial, sans-serif;
}
.simple-text--default {
font: 400 1rem/1.2 "Inter Tight", Verdana, Arial, sans-serif;
}
.simple-text--default-sec {
font: 400 0.875rem/1.2 "Inter Tight", Verdana, Arial, sans-serif;
}
@media (min-width: 744px) {
.simple-text--default-sec {
font-size: 1rem;
}
}
.simple-text--small {
font: 400 0.875rem/1.2 "Inter Tight", Verdana, Arial, sans-serif;
}
.simple-text--mini {
font: 400 0.75rem/1.3 "Inter Tight", Verdana, Arial, sans-serif;
}
.simple-text--lh13 {
line-height: 1.3;
}
.simple-text--lh14 {
line-height: 1.4;
}
.simple-text--lh15 {
line-height: 1.5;
}
.simple-text--bold {
font-weight: 600;
}
.simple-text--bolder {
font-weight: bold;
}
.simple-text--gray {
color: var(--second-gray-color);
}
.simple-text--gray-sec {
color: var(--four-gray-color);
}
.simple-text--dark {
color: var(--main-dark-color);
}
.simple-text--dark-sec {
color: var(--second-dark-color);
}
.simple-text--ttu {
text-transform: uppercase;
}
.section {
position: relative;
z-index: 1;
}
.section__bg {
display: block;
position: absolute;
left: 0;
z-index: 0;
width: 100%;
pointer-events: none;
}
.section__bg img {
width: 100%;
height: auto;
}
.section--inner-blog {
padding: 1.0625rem 0;
margin: 0 0 5.9375rem;
}
@media (min-width: 744px) {
.section--inner-blog {
margin: 0 0 11.71875vw;
}
}
@media (min-width: 1440px) {
.section--inner-blog {
margin: 0 0 14.0625rem;
}
}
.section--hero-service {
padding: 2.5rem 0 6.1875rem;
position: relative;
}
@media (min-width: 744px) {
.section--hero-service {
padding: 1.9375rem 0 5rem;
}
}
@media (min-width: 1200px) {
.section--hero-service {
padding: 3.8125rem 0 5rem;
}
}
.section--hero-service .section__bg {
top: -6.5rem;
right: 0;
bottom: 0;
height: auto;
}
.section--hero-service .section__bg img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.section--hero-service .section__bg::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
height: min(50%, 20rem);
background: linear-gradient(to bottom, transparent, var(--main-bg-color));
pointer-events: none;
}
@media (min-width: 1441px) {
.section--hero-service .section__bg {
top: -10.625vw;
}
}
.section--approach {
border-radius: 2.5rem;
overflow: hidden;
padding: 0 0 9rem;
margin: 0 0 6.25rem;
background-repeat: no-repeat;
}
@media (min-width: 744px) {
.section--approach {
padding: 5rem 0 11.5625rem;
margin: 0 0 5.9375rem;
}
}
@media (min-width: 1024px) {
.section--approach {
border-radius: 3.75rem;
padding: 5rem 0;
margin: 0 0 9.875rem;
background-image: none !important;
}
}
.section--approach .section__bg {
bottom: 0;
}
.section--portfolio-block {
margin: 0 0 6.25rem;
overflow-x: hidden;
}
@media (min-width: 744px) {
.section--portfolio-block {
margin: 0 0 5.9375rem;
}
}
@media (min-width: 1024px) {
.section--portfolio-block {
margin: 0 0 8.625rem;
}
}
.section--trust-block {
position: relative;
}
.section--trust-block .section__bg {
width: 100%;
height: 210%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.section--trust-block .section__bg img {
height: 100%;
}
@media (min-width: 744px) {
.section--trust-block .section__bg {
width: 100%;
height: auto;
transform: translateX(-50%);
top: -18.75rem;
}
.section--trust-block .section__bg img {
height: auto;
}
}
.section--scroll-services {
margin: 0 0 6.1875rem;
}
@media (min-width: 744px) {
.section--scroll-services {
margin: 0 0 3.75rem;
}
}
@media (min-width: 1024px) {
.section--scroll-services {
margin: 0 0 7.5rem;
}
}
.section--running-string {
padding: 3.125rem 0;
overflow-x: hidden;
}
.section--running-home {
margin: 1.75rem 0 2.9375rem;
}
@media (min-width: 992px) {
.section--running-home {
margin: 0 0 6rem;
}
}
.section--banner-board {
margin: 0 0 6.375rem;
}
@media (min-width: 992px) {
.section--banner-board {
margin: 0 0 9.9375rem;
}
}
.section--home-articles {
margin: 0 0 6.875rem;
}
@media (min-width: 744px) {
.section--home-articles {
margin: 0 0 11.25rem;
}
}
@media (min-width: 1200px) {
.section--home-articles {
margin: 0 0 16.25rem;
}
}
@media (max-width: 1023px) {
.section--home-articles .blog-card:nth-child(n+3) {
display: none;
}
}
.section--team-block {
margin: 0 0 6.375rem;
}
@media (min-width: 992px) {
.section--team-block {
margin: 0 0 9.9375rem;
}
}
.section--catalog-top {
margin: 0 0 -9.125rem;
}
@media (min-width: 744px) {
.section--catalog-top {
margin: 0 0 -6.375rem;
}
}
.section--catalog-block {
border-radius: 1.5rem 1.5rem 0 0;
background-color: #fdfdfc;
}
@media (min-width: 744px) {
.section--catalog-block {
border-radius: 3.75rem 3.75rem 0 0;
}
}
.section--offer-hero {
background-color: #f8f8f8;
margin: 0 0 -1.625rem;
}
@media (min-width: 744px) {
.section--offer-hero {
margin: 0 0 -3.4375rem;
}
}
@media (max-width: 574px) {
.section--offer-hero .breadcrumbs {
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
pointer-events: none;
}
}
.section--offer-block {
background-color: var(--main-bg-color);
border-radius: 1.5rem 1.5rem 0 0;
z-index: 3;
}
@media (min-width: 744px) {
.section--offer-block {
border-radius: 3.75rem 3.75rem 0 0;
}
}
@media (max-width: 1199px) {
.section--offer-block {
overflow-x: hidden;
}
}
.section--seo-block {
padding: 3.625rem 0;
margin: 0 0 5.125rem;
}
@media (min-width: 744px) {
.section--seo-block {
margin: 0 0 4.5rem;
}
}
.section--consult {
--consult-from: var(--main-bg-color);
padding: 4rem 0 0;
background-color: var(--white-color);
background-image: linear-gradient(180deg, var(--consult-from) 0, var(--white-color) 20rem);
}
@media (min-width: 744px) {
.section--consult {
padding: 6rem 0 0;
background-image: linear-gradient(180deg, var(--consult-from) 0, var(--white-color) 25rem);
}
}
.section--consult .consult-block {
position: relative;
z-index: 1;
background-color: transparent;
}
.section .js-catalog-seo-block .section--seo-block {
margin-bottom: 0;
}
.section .js-catalog-seo-block:empty + .section--consult {
--consult-from: var(--bg-light-sec-color);
}
.section .js-catalog-seo-block:not(:empty) + .section--consult {
--consult-from: var(--main-bg-color);
}
.section--home-articles + .section--consult {
margin-top: -6.875rem;
padding-top: 10.875rem;
}
@media (min-width: 744px) {
.section--home-articles + .section--consult {
margin-top: -11.25rem;
padding-top: 17.25rem;
}
}
@media (min-width: 1200px) {
.section--home-articles + .section--consult {
margin-top: -16.25rem;
padding-top: 22.25rem;
}
}
.section--blog-list + .section--consult {
margin-top: -7rem;
padding-top: 11rem;
}
@media (min-width: 744px) {
.section--blog-list + .section--consult {
margin-top: -9.0625rem;
padding-top: 15.0625rem;
}
}
@media (min-width: 744px) {
.section--consult-sec {
border-radius: 3.75rem 3.75rem 0 0;
background-color: #fdfdfd;
}
}
.section--blog-list {
padding: 1.9375rem 0 7rem;
position: initial;
}
@media (min-width: 744px) {
.section--blog-list {
padding: 2.375rem 0 9.0625rem;
}
}
.section--blog-list .section__bg {
position: absolute;
top: 0;
right: 0;
left: initial;
z-index: 1;
width: auto;
}
.section--blog-list .section__bg img {
width: auto;
height: auto;
max-width: 100%;
}
.section--404 {
padding: 6rem 0 8rem;
position: relative;
min-height: 60vh;
display: flex;
align-items: center;
}
.section--404 .section__bg {
position: absolute;
top: 0;
right: 0;
left: initial;
z-index: 1;
width: auto;
pointer-events: none;
}
.section--404 .section__bg img {
width: auto;
height: auto;
max-width: 100%;
}
.section--light-gradient {
background: linear-gradient(to bottom, #fdfdfc, var(--main-bg-color));
}
.section--white-bg {
background-color: var(--white-color);
}
.section--bg-light {
background-color: var(--bg-light-sec-color);
}
@media (min-width: 744px) {
.section--gray-bg-tablet {
background-color: var(--light-second-color);
}
}
.link {
display: inline-flex;
align-items: center;
gap: 0.1875rem;
backface-visibility: hidden;
transform: translateZ(0);
transition: color 0.1s linear;
}
.link:has(.link__icon--middle) {
gap: 0;
}
.link__icon {
display: flex;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
transition: transform 0.15s ease-in;
position: relative;
}
.link__icon--middle {
width: 2rem;
height: 2rem;
}
.link__icon--medium {
width: 1.25rem;
height: 1.25rem;
}
.link__icon--small {
width: 1rem;
height: 1rem;
}
.link__icon--hidden {
display: none;
}
.active .link__icon--hidden {
display: flex;
}
.link__icon--double > *:nth-child(2) {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
transform: translate(-50%, -50%);
width: auto;
height: auto;
max-width: 100%;
opacity: 0;
}
.active .link__icon--double > *:nth-child(1) {
opacity: 0;
}
.active .link__icon--double > *:nth-child(2) {
opacity: 1;
}
.link__icon svg, .link__icon img {
width: 100%;
height: 100%;
}
.link--default {
font: 400 1rem/1.2 "Inter Tight", Verdana, Arial, sans-serif;
}
.link--default:has(.link__icon--small) {
gap: 0.3125rem;
}
.link--medium {
font: 400 1.125rem/1.2 "Inter Tight", Verdana, Arial, sans-serif;
}
.link--big {
font: 400 1.25rem/1.2 "Inter Tight", Verdana, Arial, sans-serif;
}
.link--big-sec {
font: 400 1rem/1.2 "Inter Tight", Verdana, Arial, sans-serif;
}
@media (min-width: 744px) {
.link--big-sec {
font-size: 1.25rem;
}
}
.link--wild {
border-radius: 0.5rem;
gap: 0.4375rem;
padding: 0.75rem;
}
.link--small {
font: 400 0.875rem/1.2 "Inter Tight", Verdana, Arial, sans-serif;
}
.link--bg-light-hover {
color: var(--main-dark-color);
}
.desktop-device .link--bg-light-hover:hover {
background-color: var(--bg-light-color);
}
.link--rounded {
gap: 0.4375rem;
border-radius: 1rem;
padding: 0.3125rem 0.75rem;
}
.link--rounded-sec {
min-width: 4.875rem;
gap: 0.4375rem;
border-radius: 1.5rem;
padding: 0.5625rem 1rem;
}
.link--bg-light {
background-color: var(--bg-light-color);
border: 0.0625rem solid var(--main-gray-color);
color: var(--main-dark-color);
}
.desktop-device .link--bg-light:hover {
background-color: var(--main-dark-color);
color: var(--white-color);
border-color: transparent;
}
.desktop-device .link--bg-light:hover .border-svg-sec {
opacity: 0;
}
.link--bg-light.is-animated {
background-color: #e7fafa;
}
.link--bg-light.active {
background-color: var(--main-dark-color);
color: var(--white-color);
border-color: transparent;
}
.link--bg-light-sec {
background-color: var(--light-second-color);
color: var(--main-dark-color);
}
.desktop-device .link--bg-light-sec:hover {
background-color: var(--main-dark-color);
color: var(--white-color);
}
.link--bg-light-sec.active {
background-color: var(--main-dark-color);
color: var(--white-color);
}
.link--hidden-icon .link__icon {
opacity: 0;
margin-right: -1.5625rem;
transition: margin-right 0.15s ease-in, opacity 0.15s ease-in;
}
.link--hidden-icon:hover .link__icon {
opacity: 1;
margin-right: 0;
}
.link--dark {
color: var(--main-dark-color);
}
.desktop-device .link--dark:hover {
color: var(--main-green-color);
}
.link--green {
color: var(--main-green-color);
}
.link--green .link__text {
position: relative;
}
.link--green .link__text span {
transition: opacity 0.2s ease;
}
.link--green .link__text::after {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
color: transparent;
background-image: linear-gradient(125deg, var(--main-blue-color), var(--second-blue-color));
background-clip: text;
-webkit-background-clip: text;
opacity: 0;
transition: opacity 0.2s ease;
}
.desktop-device .link--green:hover .link__icon {
color: #09CDBF;
}
.desktop-device .link--green:hover .link__text span {
opacity: 0;
}
.desktop-device .link--green:hover .link__text::after {
opacity: 1;
}
.link--toggle .link__text::after {
display: none;
}
.desktop-device .link--toggle:hover .link__text span {
opacity: 1;
}
.link--bold {
font-weight: 600;
}
.link--lh14 {
line-height: 1.4;
}
.link--ttu {
text-transform: uppercase;
}
.link:hover .link__icon--arrow {
transform: scaleY(-1);
}
.soc-link {
display: flex;
justify-content: center;
align-items: center;
width: 2.5rem;
height: 2.5rem;
}
.soc-link--dark {
color: var(--main-dark-color);
}
.soc-link--dark:hover {
color: var(--main-green-color);
}
.d-flex-center {
display: flex;
align-items: center;
}
.d-flex-column {
display: flex;
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-between {
justify-content: space-between;
}
.flex-end {
justify-content: flex-end;
}
.items-center {
justify-content: center;
align-items: center;
}
.items-start {
align-items: flex-start;
}
.shrink-0 {
flex-shrink: 0;
}
.text-center {
text-align: center;
}
.gap-9 {
gap: 0.5625rem;
}
.gap-10 {
gap: 0.625rem;
}
.gap-16 {
gap: 1rem;
}
.gap-22 {
gap: 1.375rem;
}
.gap-25 {
gap: 1.5625rem;
}
.mt-auto {
margin-top: auto;
}
.w-full {
width: 100%;
}
.def-bg {
background-color: var(--white-color);
border: 0.0625rem solid var(--main-gray-color);
}
.def-bg--opacity {
background-color: rgba(255, 255, 255, 0.9);
}
.def-bg--opacity-sec {
background-color: rgba(255, 255, 255, 0.5);
}
.def-bg--gray {
background-color: var(--light-second-color);
}
.def-bg--shadow {
border-color: transparent;
box-shadow: 0 0.5rem 2.8125rem 0.125rem rgba(169, 169, 169, 0.07);
}
.br-16 {
border-radius: 1rem;
}
.br-32 {
border-radius: 2rem;
}
.text-ellipsis {
display: block;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(3.125rem);
padding: 1.5rem 0;
border-bottom: 0.0625rem solid transparent;
transition: background-color 0.15s ease-in;
}
.header.is-sticky {
background-color: var(--white-color);
border-color: var(--main-gray-color);
}
.header.is-hide {
opacity: 0;
pointer-events: none;
}
.header__body {
display: flex;
align-items: center;
gap: 1rem;
}
@media (min-width: 768px) {
.header__body {
gap: 1.875rem;
}
}
@media (min-width: 1320px) {
.header__body {
gap: 2.5rem;
}
}
.header__right {
display: flex;
align-items: center;
gap: 1.375rem;
margin: 0 0 0 auto;
}
@media (min-width: 640px) {
.header__right {
gap: 0.9375rem;
}
}
@media (min-width: 1200px) {
.header__right .icon-btn {
display: none;
}
}
@media (max-width: 639px) {
.header__right .def-dropdown {
display: none;
}
.header__right .button--dark {
display: none;
}
}
.header-menu {
display: none;
align-items: center;
gap: 2.5rem;
}
@media (min-width: 1200px) {
.header-menu {
display: flex;
}
}
@media (min-width: 1320px) {
.header-menu {
gap: 3.375rem;
}
}
.def-dropdown {
position: relative;
}
.def-dropdown .drop-menu::after {
content: "";
position: absolute;
width: 100%;
height: 1.4375rem;
bottom: 100%;
left: 0;
z-index: 1;
}
.def-dropdown:hover .drop-menu {
display: block;
}
.def-dropdown:hover .link--dark {
color: var(--main-green-color);
}
.def-dropdown:hover .link__icon {
transform: scaleY(-1);
}
.drop-menu {
width: 100vw;
position: absolute;
top: calc(100% + 1rem);
z-index: 1;
background-color: var(--white-color);
border: 0.0625rem solid #ebebeb;
box-shadow: 0 0.5rem 2.8125rem rgba(149, 146, 146, 0.2);
display: none;
}
.drop-menu__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.25rem 0.875rem;
}
.drop-menu__bottom {
border-top: 0.0625rem solid var(--main-gray-color);
margin: 0.3125rem 0 0;
padding: 0.75rem 0 0 0.875rem;
}
.drop-menu__bottom .link__icon {
margin: 0 0 0 0.5rem;
}
.drop-menu--menu {
max-width: 29.75rem;
left: -1.5rem;
padding: 0.75rem 0.6875rem 0.6875rem;
border-radius: 1rem;
}
.drop-menu--lang {
max-width: 5rem;
left: 50%;
transform: translateX(-50%);
padding: 0.25rem;
border-radius: 0.5rem;
}
.drop-menu--lang .link {
width: 100%;
}
.logo--string {
max-width: initial;
}
.logo--header {
display: block;
width: 100%;
max-width: 4rem;
transition: all 0.15s ease-in;
}
@media (min-width: 640px) {
.logo--header {
max-width: 5rem;
}
}
@media (min-width: 992px) {
.logo--header {
margin: 0 1.875rem 0 0;
}
}
@media (min-width: 1320px) {
.logo--header {
max-width: 6.125rem;
margin: 0 2.5rem 0 0;
}
.is-sticky .logo--header {
max-width: 4.5rem;
}
}
.logo--header img {
width: 100%;
height: auto;
}
.footer {
position: relative;
z-index: 1;
background-color: var(--white-color);
padding: 1.625rem 0;
}
@media (min-width: 744px) {
.footer {
padding: 2.125rem 0;
}
}
.footer__body {
display: flex;
align-items: center;
flex-direction: column;
gap: 0.9375rem;
}
@media (min-width: 744px) {
.footer__body {
flex-direction: row;
gap: 1.875rem;
}
}
.footer__body > .link {
order: -1;
}
@media (min-width: 744px) {
.footer__body > .link {
margin-left: auto;
order: initial;
}
}
@media (min-width: 1024px) {
.footer__body > .simple-text {
align-self: flex-end;
}
}
@media (max-width: 743px) {
.footer__body > .simple-text {
order: 4;
font-size: 0.875rem;
margin: 1rem 0 0;
}
}
.footer__soc {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.mobile-menu {
position: fixed;
left: 0;
top: 5.5rem;
width: 100%;
height: calc(100% - 5.5rem);
padding: 0 1rem;
z-index: 20;
background-color: var(--white-color);
display: none;
}
.mobile-menu.show {
display: block;
}
.mobile-menu__body {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 100%;
padding: 1.9375rem 0 0;
border-top: 0.0625rem solid var(--main-gray-color);
}
.mobile-menu__top {
padding: 0 0.75rem;
flex-shrink: 0;
}
.mobile-menu__list {
display: flex;
flex-direction: column;
gap: 0.6875rem;
margin: 1.8125rem 0 0;
padding: 0 0 1.25rem;
width: 100%;
overflow: auto;
}
.mobile-menu__bottom {
position: sticky;
bottom: 0;
width: calc(100% + 2rem);
display: flex;
justify-content: center;
margin: auto 0 0 -1rem;
padding: 1.4375rem 1.75rem;
border-top: 0.0625rem solid var(--main-gray-color);
flex-shrink: 0;
}
.mobile-menu__bottom .button {
width: 100%;
max-width: 24.375rem;
}
@media (min-width: 640px) {
.mobile-menu {
top: 5.9375rem;
height: calc(100% - 5.9375rem);
}
}
.menu-acc .link {
width: 100%;
}
.menu-acc.active > .link--dark {
color: var(--main-green-color);
}
.menu-acc.active > .link--dark .link__icon {
transform: scaleY(-1);
}
.menu-acc__list {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.3125rem 0 0.125rem;
}
.menu-acc__hidden {
max-height: 0;
overflow: hidden;
}
.breadcrumbs {
display: flex;
align-items: center;
overflow: hidden;
min-width: 0;
}
.breadcrumbs li:has(span.breadcrumbs__link) {
width: 100%;
min-width: 0;
overflow: hidden;
}
.breadcrumbs__link {
display: block;
font: 400 0.875rem/1.2 "Inter Tight", Verdana, Arial, sans-serif;
color: var(--main-dark-color);
white-space: nowrap;
}
.breadcrumbs__link:not([href]) {
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.breadcrumbs__link[href] {
display: flex;
align-items: center;
color: var(--second-gray-color);
flex-shrink: 0;
}
.breadcrumbs__link[href]::after {
content: "/";
font: inherit;
margin: 0 0.25rem;
}
.breadcrumbs__link[href]:hover {
color: var(--main-dark-color);
}
.breadcrumbs li {
list-style: none;
}
.consult-block {
position: relative;
overflow: hidden;
}
.consult-block__img {
display: block;
position: relative;
width: 100%;
height: 23.125rem;
}
@media (min-width: 640px) {
.consult-block__img {
height: auto;
aspect-ratio: 744/532;
}
}
@media (min-width: 1440px) {
.consult-block__img {
aspect-ratio: 1425/555;
}
}
.consult-block__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.consult-block__logo {
display: block;
width: 98%;
max-width: 83.75rem;
position: absolute;
bottom: -0.3125rem;
left: 50%;
z-index: 1;
transform: translateX(-50%);
}
@media (min-width: 640px) {
.consult-block__logo {
bottom: -1rem;
}
}
.consult-block__logo img {
width: 100%;
height: auto;
}
.consult-block .default-board {
position: absolute;
top: 1.5rem;
left: 50%;
z-index: 2;
transform: translateX(-50%);
width: 92%;
max-width: 43.75rem;
margin: 0 auto;
}
@media (min-width: 744px) {
.consult-block .default-board {
top: 2.5rem;
}
}
.consult-block .default-board .simple-text {
max-width: 36.375rem;
margin: 0 auto;
}
.consult-site {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 2.125rem;
justify-content: space-between;
padding: 2.4375rem 0 0;
margin: 0 0 -6.9375rem;
position: relative;
z-index: 2;
}
@media (min-width: 744px) {
.consult-site {
flex-direction: row;
align-items: flex-start;
gap: 2.5rem;
margin: 0 0 -18.9375rem;
}
}
@media (min-width: 1280px) {
.consult-site {
gap: 8.25rem;
justify-content: flex-start;
}
}
@media (min-width: 1440px) {
.consult-site {
margin: 0 0 -9.125rem;
}
}
.consult-site > .title {
width: 100%;
max-width: 41.75rem;
margin: 3.625rem 0 0;
}
@media (max-width: 743px) {
.consult-site > .title {
text-align: center;
margin: 2.4375rem 0 0;
}
}
@media (min-width: 744px) {
.consult-site .consult-form {
width: 23.75rem;
}
}
@media (min-width: 1280px) {
.consult-site .consult-form {
width: 27.375rem;
}
}
.consult-form {
width: 100%;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 2rem;
position: relative;
}
.consult-form.success-form > *:not(.form-sended) {
opacity: 0;
}
.consult-form__item {
gap: 0.75rem;
}
.consult-form .input-item {
padding: 0.125rem 0 0;
}
@media (max-width: 743px) {
.consult-form .button {
margin: 0.375rem 0 0;
}
}
.consult-block--sec .consult-form .button {
margin: 0.3125rem 0 0;
}
.consult-form__hidden {
max-height: 0;
overflow: hidden;
margin: -0.75rem 0 0;
}
.active .consult-form__hidden {
margin: 0;
}
.consult-form--modal {
gap: 1.5625rem;
}
@media (max-width: 743px) {
.consult-form--modal .consult-form__list {
gap: 1.0625rem;
}
}
.default-board {
padding: 1.3125rem 1.4375rem;
border-radius: 1rem;
}
.default-board__top {
display: flex;
flex-direction: column;
gap: 0.625rem;
margin: 0 0 1.5625rem;
}
.default-board__buttons {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.default-board--type-2 {
padding: 0;
text-align: center;
}
@media (min-width: 575px) {
.default-board--type-2 .default-board__buttons {
flex-direction: row;
justify-content: center;
}
}
.default-board--type-2 .default-board__top {
gap: 0.9375rem;
margin: 0 0 2.125rem;
}
.default-board--type-2 .simple-text {
padding-right: 0;
}
@media (max-width: 1023px) {
.default-board--type-3 {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
gap: 1.25rem;
padding: 0;
background-color: transparent;
border: none;
width: 100%;
}
.default-board--type-3 > * {
width: 100%;
}
}
@media (max-width: 1023px) and (min-width: 744px) and (max-width: 1023px) {
.default-board--type-3 > * {
max-width: 19.5rem;
}
}
@media (max-width: 640px) {
.default-board--type-3 {
flex-direction: column;
text-align: center;
gap: 2.5rem;
}
}
.default-board--type-3 .default-board__top {
max-width: 19rem;
gap: 1rem;
margin: 0;
}
@media (min-width: 744px) and (max-width: 1023px) {
.default-board--type-3 .default-board__top {
max-width: 19.5rem;
gap: 0.625rem;
}
}
@media (min-width: 1024px) {
.default-board--type-3 .default-board__top {
margin: 0 0 2.5625rem;
gap: 1rem;
}
}
.default-board--type-4 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
max-width: 64.1875rem;
padding: 0.9375rem 1.5rem;
margin: 0 auto;
}
.default-board--type-4 .default-board__buttons {
flex-shrink: 0;
}
@media (min-width: 1024px) {
.default-board--type-4 .default-board__buttons {
flex-direction: row;
justify-content: center;
}
}
.default-board--type-4 .default-board__top {
margin: 0;
gap: 0.3125rem;
}
.default-board--type-5 {
display: flex;
align-items: center;
flex-direction: column;
gap: 2.5rem;
padding: 1.5625rem 0;
border-top: 0.0625rem solid rgba(26, 26, 26, 0.1);
margin: 0 auto;
}
@media (min-width: 744px) {
.default-board--type-5 {
flex-direction: row;
gap: 2.25rem;
}
}
.default-board--type-5 .default-board__buttons {
flex-shrink: 0;
}
@media (min-width: 1024px) {
.default-board--type-5 .default-board__buttons {
flex-direction: row;
justify-content: center;
}
}
@media (max-width: 743px) {
.default-board--type-5 .default-board__buttons {
width: 100%;
}
}
.default-board--type-5 .default-board__top {
margin: 0;
gap: 0.5rem;
max-width: 26.625rem;
}
@media (max-width: 743px) {
.default-board--type-5 .default-board__top {
text-align: center;
}
}
.badge {
font: 400 0.875rem/1.2 "Inter Tight", Verdana, Arial, sans-serif;
height: 1.5625rem;
padding: 0 0.5625rem;
border: 0.0625rem solid var(--light-color);
border-radius: 1rem;
background-color: var(--white-color);
color: var(--second-gray-color);
}
.badge--simple {
border: transparent;
background-color: transparent;
padding: 0;
}
.badge--type-2 {
gap: 0.375rem;
background-color: #f4f4f4;
color: var(--main-dark-color);
border: 0.0625rem solid var(--main-gray-color);
border-radius: 6.25rem;
height: 2rem;
padding: 0 0.8125rem 0 0.375rem;
}
.badge--type-3 {
gap: 0.25rem;
background-color: var(--white-color);
color: var(--main-dark-color);
font: 400 1rem/1.2 "Inter Tight", Verdana, Arial, sans-serif;
border: 0.0625rem solid var(--light-color);
border-radius: 1rem;
height: 1.8125rem;
padding: 0 0.6875rem;
}
.badge--type-3 img {
flex-shrink: 0;
}
.badge--big {
font-size: 1.03125rem;
height: 2.1875rem;
padding: 0 0.6875rem;
}
@media (min-width: 1024px) {
.badge--big {
font-size: 1.125rem;
}
}
.badge--gray {
color: var(--six-gray-color);
}
.badge--green-bg {
border: transparent;
background-color: #ecfff5;
color: #32d37f;
}
.badge--blue-bg {
border: transparent;
background-color: #f2fcfd;
color: #00c9d2;
}
.badge--purple-bg {
border: transparent;
background-color: #fbf5ff;
color: #bf70ff;
}
.badge--orange-bg {
border: transparent;
background-color: #fff8ef;
color: #ff9e1f;
}
.badge--red-bg {
border: transparent;
background-color: #fff3f2;
color: #ff5446;
}
.dot {
width: 0.25rem;
height: 0.25rem;
flex-shrink: 0;
border-radius: 100%;
}
.dot--dark {
background-color: var(--second-dark-color);
}
.service-card {
display: flex;
flex-direction: column;
padding: 1.0625rem 1rem 0.8125rem;
border-radius: 1.25rem;
background-color: var(--light-second-color);
border: 0.0625rem solid var(--main-gray-color);
}
.service-card > .link {
margin: 0.25rem 0 0.5rem;
}
.service-card > .simple-text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.service-card > .simple-text--small, .service-card > .simple-text--default {
margin: 0 0 1rem;
}
.service-card > .simple-text--small {
min-height: 2.3125rem;
}
.service-card > .simple-text--default {
min-height: 2.625rem;
}
.service-card__bottom {
padding: 1.0625rem 0 0;
}
.service-card__bottom--sec {
gap: 1.375rem 0.5625rem;
padding: 1.0625rem 0 0.125rem;
}
.service-card--sec {
width: 100%;
padding: 1.25rem 1.25rem 1rem;
}
.service-card--sec > .link {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 3.5rem;
margin: 0.25rem 0 0.625rem;
}
.loader-block {
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
background-color: rgba(255, 255, 255, 0.99);
border: 0.0625rem solid var(--main-gray-color);
border-radius: inherit;
display: none;
}
.is-pending .loader-block {
display: flex;
}
.loader-block.show {
display: flex;
}
.loader-block__circle {
width: 2.5rem;
height: 2.5rem;
z-index: 1;
border: 0.25rem solid var(--main-blue-color);
border-bottom-color: transparent;
border-radius: 50%;
animation: loaderRotate 1s linear infinite;
}
@keyframes loaderRotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.service-form {
position: relative;
padding: 0.75rem 0 0;
border-radius: 1rem;
}
.service-form__bottom {
margin: -0.25rem 0 0;
}
.is-pending .service-form__body, .success-form .service-form__body {
opacity: 0;
pointer-events: none;
}
.form-sended {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: #fff;
background: linear-gradient(to right, rgba(27, 187, 219, 0.08), rgba(11, 210, 196, 0.08));
border-radius: 1rem;
padding: 1rem;
display: none;
}
.is-pending .form-sended {
display: flex;
}
.success-form .form-sended {
display: flex;
}
.form-sended .simple-text {
max-width: 28.875rem;
margin: 0 auto;
}
.input-item {
position: relative;
width: 100%;
}
.input-item .simple-text {
margin: 0 0 0.125rem;
display: block;
}
.input-item__body {
position: relative;
}
.input-item__label {
position: absolute;
top: 50%;
left: 1rem;
right: 0.625rem;
z-index: 1;
transform: translateY(-50%);
font: 400 1rem/1 "Inter Tight", Verdana, Arial, sans-serif;
color: var(--five-gray-color);
transition: all 0.2s linear;
cursor: text;
}
.is-focused .input-item__label {
font-size: 0.875rem;
top: 0.9375rem;
}
.input-item__input {
width: 100%;
height: 2.6875rem;
border: 1px solid var(--main-gray-color);
background-color: var(--white-color);
font: 400 1rem/1 "Inter Tight", Verdana, Arial, sans-serif;
color: var(--main-dark-color);
padding: 0 1.0625rem;
transition: border-color 0.2s linear;
border-radius: 0.5rem;
-webkit-appearance: none;
appearance: none;
}
.input-item__input:-webkit-autofill {
transition: background-color 5000s ease-in-out 0s;
-webkit-text-fill-color: var(--main-dark-color) !important;
}
.js-input-label .input-item__input {
padding: 0.9375rem 1.0625rem 0;
}
.field-error .input-item__input {
border-color: red;
}
.input-item__input::placeholder {
font: inherit;
color: var(--five-gray-color);
transition: opacity 0.2s linear;
}
.input-item__input:hover {
border-color: var(--main-blue-color);
}
.input-item__input:focus::placeholder {
opacity: 0.2;
}
.input-item__input::-webkit-calendar-picker-indicator {
transform: translateY(-6px);
}
.input-item__input::-webkit-datetime-edit {
opacity: 0;
}
.is-focused .input-item__input::-webkit-datetime-edit {
opacity: 1;
}
.input-item__textarea {
width: 100%;
height: 7.9375rem;
border: 1px solid var(--main-gray-color);
background-color: var(--white-color);
font: 400 1rem/1 "Inter Tight", Verdana, Arial, sans-serif;
color: var(--main-dark-color);
padding: 0.6875rem 1.0625rem 0 1.0625rem;
transition: border-color 0.2s linear;
border-radius: 0.5rem;
-webkit-appearance: none;
appearance: none;
resize: none;
}
.field-error .input-item__textarea {
border-color: red;
}
.input-item__textarea::placeholder {
font: inherit;
color: var(--five-gray-color);
transition: opacity 0.2s linear;
}
.input-item__textarea:hover {
border-color: var(--main-blue-color);
}
.input-item__textarea:focus {
outline: none;
}
.input-item__textarea:focus::placeholder {
opacity: 0.2;
}
.input-item__icon-wrap {
position: relative;
}
.input-item__icon-wrap .input-item__input {
padding-left: 2.8125rem;
}
.input-item__icon-wrap .icon-btn {
position: absolute;
top: 50%;
left: 0.8125rem;
z-index: 1;
transform: translateY(-50%);
}
.uniq-checkbox {
position: relative;
}
.uniq-checkbox input {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.uniq-checkbox input:checked ~ .uniq-checkbox__body {
background-color: #000;
color: var(--white-color);
}
.uniq-checkbox input:checked ~ .uniq-checkbox__body .icon-btn {
display: flex;
}
.uniq-checkbox input:checked ~ .uniq-checkbox__body .icon-btn img {
opacity: 0;
}
.uniq-checkbox input:checked ~ .uniq-checkbox__body .icon-btn svg {
opacity: 1;
}
.uniq-checkbox input:hover ~ .uniq-checkbox__body {
background-color: #000;
color: var(--white-color);
}
.uniq-checkbox .icon-btn {
position: relative;
}
.uniq-checkbox .icon-btn svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
width: auto;
height: auto;
max-width: 100%;
opacity: 0;
}
.uniq-checkbox__body {
display: flex;
align-items: center;
font: 400 1rem/1.2 "Inter Tight", Verdana, Arial, sans-serif;
gap: 0.5rem;
border-radius: 0.5rem;
padding: 0.6875rem;
min-height: 2.8125rem;
border: 0.0625rem solid var(--light-second-color);
background-color: var(--bg-blue-light-color);
transition: background-color 0.15s ease-in;
}
.uniq-checkbox--hidden-icon .icon-btn {
display: none;
}
.simple-checker {
display: flex;
align-items: center;
}
.simple-checker__body {
position: relative;
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.simple-checker__body.field-error {
outline: 1px solid #f00;
outline-offset: 0.25rem;
}
.simple-checker__body input {
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.simple-checker__body input:hover ~ .simple-checker__icon {
border-color: var(--main-dark-color);
}
.simple-checker__body input:checked ~ .simple-checker__icon {
border-color: var(--main-dark-color);
background-color: var(--main-dark-color);
}
.simple-checker__body input:checked ~ .simple-checker__icon::after {
opacity: 1;
transform: scale(1);
}
.simple-checker__icon {
display: flex;
justify-content: center;
align-items: center;
width: 1.125rem;
height: 1.125rem;
border-radius: 0.1875rem;
border: 0.1875rem solid var(--main-gray-color);
transition: border-color 0.2s linear, background-color 0.2s linear;
position: relative;
flex-shrink: 0;
}
.simple-checker__icon::after {
content: "";
width: 100%;
height: 100%;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDExIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zLjQ4OTg1IDQuOTc5MTdMOC4wNzMxOCAwLjM5NTgzM0M4LjMzNzA3IDAuMTMxOTQ0IDguNjQyNjMgMCA4Ljk4OTg1IDBDOS4zMzcwNyAwIDkuNjQyNjMgMC4xMzE5NDQgOS45MDY1MiAwLjM5NTgzM0MxMC4xNzA0IDAuNjU5NzIyIDEwLjMwMjQgMC45Njg3NSAxMC4zMDI0IDEuMzIyOTJDMTAuMzAyNCAxLjY3NzA4IDEwLjE3MDQgMS45ODYxMSA5LjkwNjUyIDIuMjVMNC40MjczNSA3Ljc1QzQuMTYzNDYgOC4wMTM4OSAzLjg1MDk2IDguMTQ1ODMgMy40ODk4NSA4LjE0NTgzQzMuMTI4NzQgOC4xNDU4MyAyLjgxNjI0IDguMDEzODkgMi41NTIzNSA3Ljc1TDAuMzg1Njg0IDUuNTgzMzNDMC4xMjE3OTUgNS4zMTk0NSAtMC4wMDY2NzczNSA1LjAxMDQyIDAuMDAwMjY3MDk0IDQuNjU2MjVDMC4wMDcyMTE1NCA0LjMwMjA4IDAuMTQyNjI4IDMuOTkzMDYgMC40MDY1MTcgMy43MjkxN0MwLjY3MDQwNiAzLjQ2NTI4IDAuOTc5NDM0IDMuMzMzMzMgMS4zMzM2IDMuMzMzMzNDMS42ODc3NyAzLjMzMzMzIDEuOTk2NzkgMy40NjUyOCAyLjI2MDY4IDMuNzI5MTdMMy40ODk4NSA0Ljk3OTE3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
background-size: 0.625rem 5rem;
background-position: center;
background-repeat: no-repeat;
transform: scale(0);
opacity: 0;
transition: transform 0.2s linear, opacity 0.2s linear;
}
.simple-checker__name {
display: block;
width: 100%;
font: 400 1rem/1.15 "Inter Tight", Verdana, Arial, sans-serif;
color: var(--main-dark-color);
text-align: left;
}
.simple-checker__name:has(a) {
line-height: 1.3;
}
.simple-checker a {
display: inline;
font: inherit;
color: #1a141f;
position: relative;
z-index: 3;
border-bottom: 1px solid;
transition: border-color 0.2s linear;
}
.simple-checker a:hover {
border-color: transparent;
}
.simple-checker a:hover {
color: #4e342e;
}
.radio-type {
position: relative;
}
.radio-type input {
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.radio-type input:checked ~ .radio-type__body .radio-type__checker {
border-color: var(--main-green-color);
}
.radio-type input:checked ~ .radio-type__body .radio-type__checker::after {
transform: translate(-50%, -50%) scale(1);
}
.radio-type__body {
display: flex;
align-items: center;
gap: 0.625rem;
}
.radio-type__checker {
display: flex;
justify-content: center;
align-items: center;
width: 1.375rem;
height: 1.375rem;
border-radius: 100%;
border: 0.1875rem solid var(--four-gray-color);
position: relative;
flex-shrink: 0;
}
.radio-type__checker::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
transform: translate(-50%, -50%) scale(0);
width: 0.625rem;
height: 0.625rem;
background-color: var(--main-green-color);
border-radius: 100%;
transition: transform 0.2s linear;
}
.radio-type__icon {
display: flex;
justify-content: center;
align-items: center;
width: 1.25rem;
height: 1.25rem;
}
.radio-type__icon img {
width: 100%;
height: 100%;
}
.radio-type__title {
font: 400 1rem/1 "Inter Tight", Verdana, Arial, sans-serif;
color: var(--main-dark-color);
}
.radio-type.field-error .radio-type__checker {
border-color: var(--color-red);
}
.default-ul {
gap: 0.75rem;
}
@media (min-width: 1024px) {
.default-ul {
gap: 1.5625rem;
}
}
@media (max-width: 743px) {
.default-ul img {
width: 1.125rem;
height: 1.125rem;
}
}
.default-ul--sec {
gap: 0.75rem;
align-items: center;
}
.default-ul--sec img {
width: 0.875rem;
height: 0.875rem;
}
.default-ul--simple {
gap: 0.8125rem;
}
@media (min-width: 744px) {
.default-ul--simple {
gap: 0.6875rem;
}
}
.default-ul--simple .simple-text {
position: relative;
padding: 0 0 0 0.75rem;
}
.default-ul--simple .simple-text::after {
content: "";
display: block;
position: absolute;
top: 0.45em;
left: 0;
z-index: 1;
width: 0.25rem;
height: 0.25rem;
border-radius: 100%;
background-color: var(--main-green-color);
}
.modal__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.2);
backface-visibility: hidden;
transform: translateZ(0);
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
}
.modal__overlay:has(.popup-block--right) {
justify-content: flex-end;
}
.modal__overlay:has(.popup-block--bottom) {
align-items: flex-end;
}
.modal__overlay:has(.popup-block--top) {
align-items: flex-start;
}
@media (max-width: 1023px) {
.modal__overlay:has(.popup-block--size-1) {
align-items: flex-start;
}
}
.modal__container {
max-height: 92vh;
overflow-y: auto;
box-sizing: border-box;
}
.modal__header {
display: flex;
justify-content: space-between;
align-items: center;
}
.modal__title {
margin-top: 0;
margin-bottom: 0;
font-weight: 600;
font-size: 1.25rem;
line-height: 1.25;
color: #00449e;
box-sizing: border-box;
}
.modal__close {
background: transparent;
border: 0;
}
.modal__header .modal__close:before {
content: "✕";
}
.modal__content {
margin-top: 2rem;
margin-bottom: 2rem;
line-height: 1.5;
color: rgba(0, 0, 0, 0.8);
}
.modal__btn {
font-size: 0.875rem;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: #e6e6e6;
color: rgba(0, 0, 0, 0.8);
border-radius: 0.25rem;
border-style: none;
border-width: 0;
cursor: pointer;
-webkit-appearance: button;
text-transform: none;
overflow: visible;
line-height: 1.15;
margin: 0;
will-change: transform;
-moz-osx-font-smoothing: grayscale;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
transition: -webkit-transform 0.25s ease-out;
transition: transform 0.25s ease-out;
transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}
.modal__btn:focus, .modal__btn:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.modal__btn-primary {
background-color: #00449e;
color: #fff;
} @keyframes mmslideInRight {
from {
transform: translateX(10%);
}
to {
transform: translateX(0);
}
}
@keyframes mmslideOutRight {
from {
transform: translateX(0);
}
to {
transform: translateX(10%);
}
}
@keyframes mmfadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes mmfadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes mmslideIn {
from {
transform: translateY(15%);
}
to {
transform: translateY(0);
}
}
@keyframes mmslideOut {
from {
transform: translateY(0);
}
to {
transform: translateY(-10%);
}
}
.micromodal-slide {
display: none;
}
.micromodal-slide.is-open {
display: block;
}
.micromodal-slide[aria-hidden=false] .modal__overlay {
animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide[aria-hidden=false] .modal__container {
animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide[aria-hidden=true] .modal__overlay {
animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide[aria-hidden=true] .modal__container {
animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
} .micromodal-slide:has(.popup-block--right)[aria-hidden=false] .modal__container {
animation: mmslideInRight 0.3s cubic-bezier(0, 0, 0.2, 1);
} .micromodal-slide:has(.popup-block--right)[aria-hidden=true] .modal__container {
animation: mmslideOutRight 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
will-change: transform;
}
.popup-block {
width: calc(100% - 2rem);
overflow: auto;
pointer-events: all;
max-width: 48rem;
}
.popup-block__body {
padding: 0 1.5rem 1.25rem;
}
.popup-block__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.625rem;
margin: 0 0 1.625rem;
}
.popup-block--light {
background-color: var(--light-second-color);
}
.popup-block--white {
background-color: var(--white-color);
}
.popup-block--right {
display: flex;
flex-direction: column;
}
.popup-block--size-1 {
max-width: 70.25rem;
padding: 1.5rem 0.75rem;
height: 100vh;
}
@media (min-width: 744px) {
.popup-block--size-1 {
padding: 1.1875rem 2rem;
}
}
@media (min-width: 1024px) {
.popup-block--size-1 {
border-radius: 2rem;
}
}
@media (max-width: 1023px) {
.popup-block--size-1 {
width: 100%;
max-height: 100vh;
}
}
.popup-block--size-2 {
max-width: 32.1875rem;
border-radius: 1.5rem;
padding: 1.5625rem 1.4375rem;
}
@media (min-width: 744px) {
.popup-block--size-2 {
padding: 2.0625rem 1.9375rem;
}
}
.popup-block--size-3 {
width: 100%;
padding: 0;
height: 100%;
max-height: 100vh;
}
@media (min-width: 640px) {
.popup-block--size-3 {
max-width: 37.1875rem;
border-radius: 1.5rem 0 0 1.5rem;
}
}
.popup-block--size-3 .popup-block__top {
position: sticky;
z-index: 3;
background-color: var(--white-color);
top: 0;
padding: 1.5625rem 1rem;
margin: 0;
}
@media (min-width: 640px) {
.popup-block--size-3 .popup-block__top {
padding: 2.8125rem 1.875rem 1.25rem 2.75rem;
margin: 0 0 1.25rem;
border-radius: 1.5rem 0 0 0;
}
}
.popup-block--size-3.has-items .popup-block__top {
padding: 1.5625rem 1rem;
margin: 0;
}
@media (min-width: 640px) {
.popup-block--size-3.has-items .popup-block__top {
padding: 2.5rem 2.6875rem 1.75rem 2rem;
}
}
.popup-block--size-3.has-items .popup-block__top .title {
font-size: 1.75rem;
}
.popup-block--ov {
overflow: initial;
}
.popup-block::-webkit-scrollbar-track {
border-radius: 20px;
background-color: transparent;
width: 4px;
height: 4px;
}
.popup-block::-webkit-scrollbar {
width: 4px;
height: 4px;
background-color: transparent;
}
@media (max-width: 719px) {
.popup-block::-webkit-scrollbar {
display: none;
}
}
.popup-block::-webkit-scrollbar-thumb {
border-radius: 20px;
width: 2px;
height: 2px;
background-color: var(--main-green-color);
}
.project-append {
padding: 0 0.9375rem 2rem;
flex: 1;
}
.has-items .project-append {
padding: 0 1rem;
}
@media (min-width: 640px) {
.project-append {
padding: 0 2.6875rem 2rem;
}
.has-items .project-append {
padding: 0 2.5rem 0 2rem;
}
}
.empty-project {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2.5rem;
height: 100%;
}
.has-items .empty-project {
display: none;
}
.empty-project__list {
gap: 2.75rem;
position: relative;
}
.empty-project__list::after {
content: "";
position: absolute;
top: 0;
left: 0.96875rem;
z-index: 1;
width: 0.125rem;
height: 100%;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMiIgaGVpZ2h0PSIxMTgiIHZpZXdCb3g9IjAgMCAyIDExOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGxpbmUgeDE9IjEiIHkxPSIxIiB4Mj0iMS4wMDAwMSIgeTI9IjExNyIgc3Ryb2tlPSJ1cmwoI3BhaW50MF9saW5lYXJfOTc0Nl8yMDEzNikiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtZGFzaGFycmF5PSIzIDQiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl85NzQ2XzIwMTM2IiB4MT0iLTEuNDczMzQiIHkxPSItNS44MzUxNiIgeDI9Ii00LjcyNjg4IiB5Mj0iLTUuNzU5NyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBvZmZzZXQ9IjAuMDMyNTY3OSIgc3RvcC1jb2xvcj0iIzFCQkJEQiIvPgo8c3RvcCBvZmZzZXQ9IjAuNjkxMjUzIiBzdG9wLWNvbG9yPSIjMEJEMkM0Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==);
background-repeat: repeat;
}
.project-step {
display: flex;
align-items: flex-start;
gap: 0.8125rem;
position: relative;
z-index: 2;
}
.project-step__numb {
display: flex;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
border-radius: 0.375rem;
font: 500 0.875rem/1 "Inter Tight", Verdana, Arial, sans-serif;
color: var(--main-dark-color);
background-color: #ddf5f9;
flex-shrink: 0;
}
.project-step__text {
font: 400 1rem/2 "Inter Tight", Verdana, Arial, sans-serif;
}
@media (min-width: 640px) {
.project-step__text {
font-size: 1.125rem;
line-height: 1.7;
}
}
.projects-modal {
display: none;
position: relative;
}
.has-items .projects-modal {
display: block;
}
.projects-modal.is-pending > *:not(.form-sended), .projects-modal.success-form > *:not(.form-sended) {
opacity: 0;
pointer-events: none;
}
.projects-modal .form-sended {
z-index: 10;
}
.projects-modal__list {
margin: 0.9375rem 0 0;
gap: 0.9375rem;
}
.projects-item {
display: flex;
flex-direction: column;
border-radius: 1.25rem;
background-color: var(--light-second-color);
border: 0.0625rem solid var(--main-gray-color);
padding: 1.3125rem 1.25rem 1.125rem;
position: relative;
}
.projects-item .link--big {
margin: 0 0 1.125rem;
}
.projects-item .icon-btn {
position: absolute;
top: -0.5rem;
right: -0.5rem;
z-index: 1;
}
.additional-options {
border-top: 0.0625rem solid var(--main-gray-color);
margin: 0.9375rem 0 0;
padding: 1rem 0 0;
}
.additional-options__list {
margin: 0.5rem 0 0;
gap: 0.5625rem;
}
@media (min-width: 640px) {
.additional-options__list {
gap: 0.6875rem;
}
}
.additional-option {
position: relative;
background-color: rgba(255, 255, 255, 0.9);
border: 0.0625rem solid var(--light-color);
border-radius: 0.5rem;
padding: 0.375rem 0.75rem;
}
.additional-option .icon-btn {
position: absolute;
top: -0.3125rem;
right: -0.375rem;
z-index: 1;
}
.additional-option__text {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.25rem;
font: 400 0.875rem/1.4 "Inter Tight", Verdana, Arial, sans-serif;
color: var(--main-dark-color);
}
.additional-option__text span {
color: var(--second-gray-color);
}
.detail-form {
margin: 1.5625rem 0 0;
}
.detail-form__body {
gap: 1.125rem;
margin: 1.5625rem 0 0;
}
.bottom-cart {
position: sticky;
bottom: 0;
z-index: 3;
background-color: var(--white-color);
width: calc(100% + 4.5rem);
margin: 1.25rem 0 0 -2rem;
padding: 0 2.6875rem 2rem 2rem;
box-shadow: 0 -0.5rem 2.84375rem rgba(169, 169, 169, 0.1);
}
.bottom-cart__body {
padding: 0.9375rem 0 0;
gap: 2rem;
border-top: 0.0625rem solid var(--main-gray-color);
}
.bottom-cart .cart-itm {
padding: 0.5625rem 1rem 0;
}
.porfolio-inner {
height: 100%;
overflow: auto;
overflow-x: hidden;
}
.porfolio-inner::-webkit-scrollbar-track {
border-radius: 20px;
background-color: transparent;
width: 4px;
height: 4px;
}
.porfolio-inner::-webkit-scrollbar {
width: 4px;
height: 4px;
background-color: transparent;
}
@media (max-width: 719px) {
.porfolio-inner::-webkit-scrollbar {
display: none;
}
}
.porfolio-inner::-webkit-scrollbar-thumb {
border-radius: 20px;
width: 2px;
height: 2px;
background-color: var(--main-green-color);
}
.porfolio-inner > .icon-btn {
margin-left: auto;
position: sticky;
z-index: 3;
top: 0;
}
.porfolio-inner__body {
padding: 1.3125rem 0 0;
}
@media (min-width: 744px) {
.porfolio-inner__body {
padding: 0.5625rem 0 0;
}
}
.porfolio-inner__hero {
display: block;
width: 100%;
margin: 0 0 1.625rem;
}
@media (min-width: 744px) {
.porfolio-inner__hero {
margin: 0 0 2.625rem;
}
}
.porfolio-inner__hero img {
width: 100%;
height: auto;
aspect-ratio: 358/146;
border-radius: 1rem;
}
@media (min-width: 744px) {
.porfolio-inner__hero img {
aspect-ratio: 1060/426;
border-radius: 2rem;
}
}
.porfolio-inner__gallery {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
margin: 2rem 0 1.25rem;
}
.porfolio-inner__gallery img {
height: auto;
}
.porfolio-inner__gallery img:nth-child(1) {
width: 100%;
aspect-ratio: 1060/596;
}
.porfolio-inner__gallery img:nth-child(2) {
width: calc(61% - 0.625rem);
aspect-ratio: 639/357;
}
.porfolio-inner__gallery img:nth-child(3) {
width: calc(39% - 0.625rem);
aspect-ratio: 408/357;
}
.porfolio-inner__gallery img:nth-child(4), .porfolio-inner__gallery img:nth-child(5) {
width: calc(17% - 0.833125rem);
aspect-ratio: 170/386;
}
.porfolio-inner__gallery img:nth-child(6) {
width: calc(66% - 0.833125rem);
aspect-ratio: 687/386;
}
.porfolio-text {
display: flex;
flex-direction: column;
gap: 1rem;
}
.porfolio-text__top > .simple-text:first-child {
gap: 0.6875rem;
}
@media (max-width: 743px) {
.porfolio-text__top {
flex-direction: column-reverse;
align-items: flex-start;
}
}
.porfolio-text > .title {
margin: -0.4375rem 0 -0.1875rem;
}
.porfolio-text .quest-board {
margin: 0.4375rem 0 0;
}
.porfolio-text .desigion-board {
margin: 0.4375rem 0 0;
}
@media (min-width: 744px) {
.porfolio-text .desigion-board {
margin: 0.625rem 0 0;
}
}
.quest-board {
display: flex;
align-items: flex-start;
gap: 0.5rem;
background-color: var(--main-bg-color);
padding: 1rem 0.75rem;
border-radius: 0.75rem;
}
.quest-board .icon-btn {
flex-shrink: 0;
}
.quest-board__body {
margin: -0.25rem 0 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.desigion-board {
border-radius: 0.75rem;
padding: 0.0625rem;
position: relative;
}
.desigion-board::after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background: linear-gradient(125deg, var(--main-blue-color), var(--second-blue-color));
transition: opacity 0.15s ease-in;
border-radius: inherit;
}
.desigion-board__body {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 1rem 0.75rem;
width: 100%;
background-color: #edfafc;
position: relative;
z-index: 2;
border-radius: inherit;
}
.desigion-board__right {
margin: -0.25rem 0 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.desigion-board__dots {
gap: 0.5rem;
}
.desigion-board__dots span + span {
display: flex;
align-items: center;
gap: 0.5rem;
}
.desigion-board__dots span + span::before {
content: "";
width: 0.25rem;
height: 0.25rem;
flex-shrink: 0;
border-radius: 100%;
background-color: var(--main-green-color);
}
.desigion-board__double {
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: space-between;
gap: 1.25rem;
margin: 1rem 0 0;
padding: 0 0.875rem 0 0;
}
@media (min-width: 640px) {
.desigion-board__double {
flex-direction: row;
}
}
.desigion-board__col {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.desigion-board__col .default-ul {
gap: 0.5rem;
}
.container {
width: 100%;
max-width: 89.5rem;
margin: 0 auto;
padding: 0 1rem;
}
@media (min-width: 744px) {
.container {
padding: 0 2.5rem;
}
}
@font-face {
font-family: "Inter Tight";
src: url(//wop-lab.company/wp-content/themes/woplab3_theme/fonts/InterTight-Bold.woff2) format("woff2"), url(//wop-lab.company/wp-content/themes/woplab3_theme/fonts/InterTight-Bold.woff) format("woff");
font-weight: bold;
font-style: normal;
font-display: optional;
}
@font-face {
font-family: "Inter Tight";
src: url(//wop-lab.company/wp-content/themes/woplab3_theme/fonts/InterTight-Black.woff2) format("woff2"), url(//wop-lab.company/wp-content/themes/woplab3_theme/fonts/InterTight-Black.woff) format("woff");
font-weight: 900;
font-style: normal;
font-display: optional;
}
@font-face {
font-family: "Inter Tight";
src: url(//wop-lab.company/wp-content/themes/woplab3_theme/fonts/InterTight-ExtraBold.woff2) format("woff2"), url(//wop-lab.company/wp-content/themes/woplab3_theme/fonts/InterTight-ExtraBold.woff) format("woff");
font-weight: bold;
font-style: normal;
font-display: optional;
}
@font-face {
font-family: "Inter Tight";
src: url(//wop-lab.company/wp-content/themes/woplab3_theme/fonts/InterTight-ExtraLight.woff2) format("woff2"), url(//wop-lab.company/wp-content/themes/woplab3_theme/fonts/InterTight-ExtraLight.woff) format("woff");
font-weight: 200;
font-style: normal;
font-display: optional;
}
@font-face {
font-family: "Inter Tight";
src: url(//wop-lab.company/wp-content/themes/woplab3_theme/fonts/InterTight-Light.woff2) format("woff2"), url(//wop-lab.company/wp-content/themes/woplab3_theme/fonts/InterTight-Light.woff) format("woff");
font-weight: 300;
font-style: normal;
font-display: optional;
}
@font-face {
font-family: "Inter Tight";
src: url(//wop-lab.company/wp-content/themes/woplab3_theme/fonts/InterTight-Medium.woff2) format("woff2"), url(//wop-lab.company/wp-content/themes/woplab3_theme/fonts/InterTight-Medium.woff) format("woff");
font-weight: 500;
font-style: normal;
font-display: optional;
}
@font-face {
font-family: "Inter Tight";
src: url(//wop-lab.company/wp-content/themes/woplab3_theme/fonts/InterTight-Regular.woff2) format("woff2"), url(//wop-lab.company/wp-content/themes/woplab3_theme/fonts/InterTight-Regular.woff) format("woff");
font-weight: normal;
font-style: normal;
font-display: optional;
}
@font-face {
font-family: "Inter Tight";
src: url(//wop-lab.company/wp-content/themes/woplab3_theme/fonts/InterTight-SemiBold.woff2) format("woff2"), url(//wop-lab.company/wp-content/themes/woplab3_theme/fonts/InterTight-SemiBold.woff) format("woff");
font-weight: 600;
font-style: normal;
font-display: optional;
}
@font-face {
font-family: "Inter Tight";
src: url(//wop-lab.company/wp-content/themes/woplab3_theme/fonts/InterTight-Thin.woff2) format("woff2"), url(//wop-lab.company/wp-content/themes/woplab3_theme/fonts/InterTight-Thin.woff) format("woff");
font-weight: 100;
font-style: normal;
font-display: optional;
}