/* --- Colors --- */ :root { --grey: #f5f5f5; --text: #000000; --text_80: rgba(0, 0, 0, 0.8); --blue: #5E7CE2; --yellow: #FEB921; } /* --- Fonts --- */ @font-face { font-display: swap; font-family: 'Manrope'; font-style: normal; font-weight: 300; src: url('../fonts/manrope-v20-latin-300.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Manrope'; font-style: normal; font-weight: 400; src: url('../fonts/manrope-v20-latin-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Manrope'; font-style: normal; font-weight: 500; src: url('../fonts/manrope-v20-latin-500.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Manrope'; font-style: normal; font-weight: 600; src: url('../fonts/manrope-v20-latin-600.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Manrope'; font-style: normal; font-weight: 700; src: url('../fonts/manrope-v20-latin-700.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Manrope'; font-style: normal; font-weight: 800; src: url('../fonts/manrope-v20-latin-800.woff2') format('woff2'); } /* --- Normalize --- */ html {line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;} body {margin: 0;} article, aside, footer, header, nav, section {display: block;} figcaption, figure, main {display: block;} figure {margin: 1em 40px;} hr {box-sizing: content-box; height: 0; overflow: visible;} pre {font-family: monospace, monospace; font-size: 1em;} a {background-color: transparent; -webkit-text-decoration-skip: objects; outline: none;} abbr[title] {border-bottom: none; text-decoration: underline; text-decoration: underline dotted;} b, strong {font-weight: 700;} code, kbd, samp {font-family: monospace, monospace; font-size: 1em;} dfn {font-style: italic;} mark {background-color: #ff0; color: #000;} small {font-size: 80%;} sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} sub {bottom: -.25em;} sup {top: -.5em;} audio, video {display: inline-block;} audio:not([controls]) {display: none; height: 0;} img {border-style: none; height: auto;} svg:not(:root) {overflow: hidden;} button, input, optgroup, select, textarea {font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0;} button, input {overflow: visible;} button, select {text-transform: none;} [type=reset], [type=submit], button, html [type=button] {-webkit-appearance: button;} [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {border-style: none; padding: 0;} [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {outline: 1px dotted ButtonText;} fieldset {padding: .35em .75em .625em;} legend {box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal;} progress {display: inline-block; 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-cancel-button, [type=search]::-webkit-search-decoration {-webkit-appearance: none;} ::-webkit-file-upload-button {-webkit-appearance: button; font: inherit;} details, menu {display: block;} summary {display: list-item;} canvas {display: inline-block;} template {display: none;} [hidden] {display: none;} /* --- Reset --- */ html, body {box-sizing: border-box; min-width: 320px; min-height: 100%;} *, *:before, *:after {box-sizing: inherit;} span, h1, h2, h3, h4, h5, h6, p, a, label {vertical-align: baseline;} img, object, embed {max-width: 100%;} @media (prefers-reduced-motion: reduce) { html {scroll-behavior: auto;} } /* --- Fonts --- */ html, body, input, textarea, select, button {font: 400 16px/1.5 'Manrope', sans-serif;} h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {margin: .4em 0; font-weight: 600; line-height: 1.2;} h1, .h1 {font-size: 72px; letter-spacing: -0.05em;} h2, .h2 {font-size: 64px; letter-spacing: -0.05em;} h3, .h3 {font-size: 48px; letter-spacing: -0.03em;} h4, .h4 {font-size: 40px; letter-spacing: -0.03em;} h5, .h5 {font-size: 32px; letter-spacing: -0.02em;} h6, .h6 {font-size: 26px; letter-spacing: -0.02em;} @media (max-width: 1200px) { h1, .h1 {font-size: 64px;} h2, .h2 {font-size: 48px;} h3, .h3 {font-size: 40px;} h4, .h4 {font-size: 32px;} h5, .h5 {font-size: 24px;} h6, .h6 {font-size: 20px;} } @media (max-width: 900px) { h1, .h1 {font-size: 48px;} h2, .h2 {font-size: 40px;} h3, .h3 {font-size: 32px;} h4, .h4 {font-size: 26px;} h5, .h5 {font-size: 22px;} h6, .h6 {font-size: 20px;} } @media (max-width: 767px) { h1, .h1 {font-size: 40px;} h2, .h2 {font-size: 32px;} h3, .h3 {font-size: 26px;} h4, .h4 {font-size: 22px;} h5, .h5 {font-size: 20px;} h6, .h6 {font-size: 18px;} } /* --- Global --- */ body {background: var(--grey); color: var(--text); -ms-overflow-style: scrollbar;} input[type="text"], input[type="tel"], input[type="number"], input[type="email"], textarea {height: 64px; font-size: 16px; border: none; padding: 0 24px; box-sizing: border-box; width: 100%; color: var(--text); -webkit-appearance: none; appearance: none; border-radius: 20px; outline: none; text-overflow: ellipsis;} input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none;} input[type="number"] {-moz-appearance: textfield; appearance: textfield;} textarea {display: block; height: auto; padding: 8px 24px; resize: vertical;} textarea {display: block; height: auto; padding: 24px; resize: vertical;} select {height: 64px; font-size: 16px; border: none; padding: 0 24px; box-sizing: border-box; width: 100%; color: var(--text); border-radius: 20px; outline: none;} input.error, textarea.error, select.error {border: 1px solid #F40C44;} input.error ~ input {border: 1px solid #F40C44;} input.error ~ input::placeholder {color: #F40C44;} table {width: 100%; border-collapse: collapse;} table td {padding: 3px 15px; border: 1px solid #ddd;} label {display: block;} .site-wrapper {padding-top: 120px; overflow: clip;} .wrapper {max-width: 1920px; margin: 0 auto; padding: 0 40px;} .text-uppercase {text-transform: uppercase;} form label.error {display: block; font-size: 12px; font-weight: 400; color: #fff; background: #F40C44; border-radius: 8px; padding: 1px 10px; margin-top: 8px;} form .form-notice {display: none; background: #59bf59; margin-top: 10px; color: #fff; padding: 20px 20px; font-size: 14px; border-radius: 12px;} form.error .form-notice {display: block; background: #F40C44; color: #fff;} form.success .form-notice {display: block;} form .form-notice:empty {display: none;} form.awaiting > * {opacity: 0.2; pointer-events: none;} form.awaiting:after {content: ''; display: block; width: 90px; padding: 8px; aspect-ratio: 1; border-radius: 50%; background: #00F5D4; -webkit-mask: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box; mask: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box; -webkit-mask-composite: source-out; mask-composite: subtract; animation: formawaitingfx 1s infinite linear; opacity: 1 !important; position: absolute; top: 50%; left: 50%; margin: -45px 0 0 -45px;} .file-upload-container .file-upload {position: relative; display: block;} .file-upload-container .file-upload input {position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; z-index: 2; cursor: pointer; -webkit-appearance: none; appearance: none; text-indent: -999px;} .file-upload-container .file-upload .load {margin: 0; font-weight: 600; height: 64px; line-height: 1.3; width: 100%; color: var(--text);font-size: 16px; font-weight: 600; border-radius: 20px; border: 2px dashed rgba(0, 0, 0, 0.2); background:#FFF; padding:0 32px; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center;} .file-upload-container .file-upload .load svg {width: 24px; height: 24px; margin-right: 7px;} .file-upload-container .file-upload .load:focus {border: 2px solid #F5A231} .file-upload-container .file-upload .load.error {border: 2px solid #EA4335} .file-upload-container .file-upload:hover .load, .file-upload-container .file-upload:focus .load {background: #f5f9fc;} .file-upload-container .file-upload:active .load {background: #EDF3F9;} @keyframes formawaitingfx {to{transform: rotate(1turn)}} .grecaptcha-badge {visibility: hidden !important; pointer-events: none !important;} @media (max-width: 1200px) { .wrapper {padding: 0 30px;} } @media (max-width: 767px) { .site-wrapper {padding-top: 100px;} .wrapper {padding: 0 15px;} .hidden-xs {display: none !important;} .file-upload-container .file-upload .load {height: 64px; padding:0 24px;} } /* --- Buttons --- */ .button {-moz-appearance: none; -webkit-appearance: none; appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; line-height: 1.2; display: flex; gap: 10px; justify-content: center; align-items: center; cursor: pointer; outline: none; position: relative; text-decoration: none; -webkit-transition: all 0.4s; transition: all 0.4s; color: #fff; background: var(--blue); border: 2px solid var(--blue); text-align: center; font-weight: 500; border-radius: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-style: normal; padding: 14px 20px; font-size: 14px;} .button:hover {color: #fff; background: var(--yellow); border-color: var(--yellow); text-decoration: none;} .button:active {color: #fff; -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.35); -moz-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.35); box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.35); text-decoration: none; -webkit-transition: all 0s; transition: all 0s;} .button span {display: block;} .button i {font-style: normal;} .button svg {display: block; height: 16px; width: auto;} .button-big {font-size: 17px; border-radius: 35px; padding: 20px 20px;} .button-empty {color: var(--text); background: #fff; font-weight: 600; border: 2px solid var(--blue);} .button-empty:hover {color: #fff; background: #fff; background: var(--yellow); border-color: var(--yellow);} .button-empty:active {color: #fff;} .button.loading {opacity: 0.7; pointer-events: none; color: transparent; -webkit-transition: all 0s; transition: all 0s;} .button.loading > * {opacity: 0.2;} .button.loading:after {content: ''; display: block; width: 40px; padding: 5px; aspect-ratio: 1; border-radius: 50%; background: #00F5D4; -webkit-mask: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box; mask: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box; -webkit-mask-composite: source-out; mask-composite: subtract; animation: formawaitingfx 1s infinite linear; opacity: 1 !important; position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -20px;} /* --- Header --- */ .header {position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: transparent; -webkit-transition: background 0.2s, -webkit-box-shadow 0.4s; transition: background 0.2s, box-shadow 0.4s; box-shadow: none; border-bottom: 1px solid transparent;} .header .inner {display: flex; padding: 22px 0; gap: 20px; -webkit-transition: padding 0.4s; transition: padding 0.4s;} .header .right {display: flex; flex-grow: 1; justify-content: flex-end; align-items: center; gap: 10px; position: relative; z-index: 200;} .scrolled .header {box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); border-bottom-color: #c4c4c4; background: #fff;} .scrolled .header .inner {padding: 14px 0;} .header .logo {display: block; width: 72px; min-width: 72px; text-decoration: none; margin-right: 35px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative; z-index: 200;} .header .logo img {width: 100%; display: block; height: auto; -webkit-transition: opacity 0.2s; transition: opacity 0.2s;} .header .logo img:last-child {position: absolute; top: 0; left: 0; opacity: 0;} .template-page-home .header {border-bottom-color: rgba(255, 255, 255, 0.2);} .template-page-home .header .logo img:first-child {opacity: 0;} .template-page-home .header .logo img:last-child {opacity: 1;} .template-page-home.scrolled .header .logo img:first-child {opacity: 1;} .template-page-home.scrolled .header .logo img:last-child {opacity: 0;} .header .buttons {display: flex; gap: 15px; align-items: center;} .header .buttons .button {min-width: 160px;} .header .main-nav-container {display: flex; align-items: center; justify-content: center;} .header .main-nav {display: flex; align-items: center; justify-content: space-around; gap: 30px; margin: 0; padding: 0; width: 100%;} .header .main-nav li {display: block; position: relative;} .header .main-nav a {display: block; color: var(--text); font-size: 16px; font-weight: 600; white-space: nowrap; -webkit-transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s; text-decoration: none; position: relative; padding: 2px 7px; border-radius: 4px;} .header .main-nav .active a {color: var(--blue);} .header .main-nav > li:hover > a {background: var(--blue); color: #fff;} .template-page-home:not(.scrolled) .header .main-nav a {color: #fff;} .header .submenu {padding-top: 10px; position: absolute; top: 99%; left: 0; z-index: 20; opacity: 0; pointer-events: none; -webkit-transform-origin: 10% 0; transform-origin: 10% 0; -webkit-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all .2s cubic-bezier(0.5,0,0,1.25), opacity .15s ease-out; transition: all .2s cubic-bezier(0.5,0,0,1.25), opacity .15s ease-out;} .header .submenu ul {display: block; background: #fff; padding: 4px; margin: 0; column-count: 2; column-gap: 4px; border-radius: 8px; width: 300px; text-align: left; box-shadow: 0px 4px 24px rgba(35, 17, 107, 0.1); position: relative;} .header .submenu ul:after {content: ''; display: block; height: 7px; width: 7px; margin-left: 10px; pointer-events: none; position: absolute; top: -15px; border: 8px solid transparent; border-bottom: 8px solid #fff; left: 20px;} .header .submenu ul li {margin: 0; break-inside: avoid; padding: 2px 0;} .header .submenu ul li a {color: var(--text) !important; font-weight: 400; background: var(--grey); border-radius: 8px; font-size: 14px; padding: 8px 15px; overflow: hidden; text-overflow: ellipsis; white-space: normal;} .header .submenu ul li:hover a, .header .submenu ul li.active a {background: var(--blue); color: #fff !important;} .header .main-nav > li:hover .submenu {opacity: 1; pointer-events: all; -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0);} .header .languages {margin: 0; padding: 3px; border: 1px solid #c4c4c4; border-radius: 13px; line-height: 1; position: relative; text-transform: uppercase;} .header .languages i {content: ''; display: block; background: #c4c4c4; position: absolute; top: 3px; left: 3px; right: 3px; height: 20px; border-radius: 13px; pointer-events: none; -webkit-transition: top 0.2s; transition: top 0.2s;} .header .language {position: relative; z-index: 2;} .header .language a {display: block; color: var(--text); -webkit-transition: all 0.2s; transition: all 0.2s; text-decoration: none; font-weight: 700; font-size: 14px; padding: 3px 10px; border-radius: 13px; min-width: 42px; text-align: center; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);} .header .language.active:nth-child(1) ~ i, .header .language:nth-child(1):hover ~ i {top: 3px;} .header .language.active:nth-child(2) ~ i, .header .language:nth-child(2):hover ~ i {top: 23px;} .template-page-home:not(.scrolled) .header .languages {border-color: rgba(255, 255, 255, 0.2);} .template-page-home:not(.scrolled) .header .languages i {background: rgba(255, 255, 255, 0.2);} .template-page-home:not(.scrolled) .header .language a {color: rgba(255, 255, 255, 0.6);} .template-page-home:not(.scrolled) .header .language:hover a, .template-page-home:not(.scrolled) .header .language.active a {color: rgba(255, 255, 255, 1);} .header .telephone {display: flex; align-items: center; border: 1px solid var(--blue); padding: 3px; border-radius: 27px; text-decoration: none; -webkit-transition: all 0.2s; transition: all 0.2s; color: var(--text); white-space: nowrap; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);} .header .telephone i {display: block; background: var(--blue); color: #fff; padding: 13px; border-radius: 50%;} .header .telephone i svg {display: block; width: 15px; height: 15px;} .header .telephone span {display: block; font-weight: 700; padding: 0 15px 0 7px;} .header .telephone:hover {background: var(--blue); color: #fff;} @keyframes telephone-shaking { 0% { transform: skewY(-15deg); } 5% { transform: skewY(15deg); } 10% { transform: skewY(-15deg); } 15% { transform: skewY(15deg); } 20% { transform: skewY(0deg); } 100% { transform: skewY(0deg); } } .header .telephone:hover i svg {animation: telephone-shaking 0.75s linear infinite;} .template-page-home:not(.scrolled) .header .telephone {color: #fff; border-color: rgba(255, 255, 255, 0.2);} .template-page-home:not(.scrolled) .header .telephone i {background: rgba(255, 255, 255, 0.2); color: #fff;} .template-page-home:not(.scrolled) .header .telephone:hover {background: rgba(255, 255, 255, 0.2); color: #fff;} .menu-toggle {display: none; color: var(--blue); padding: 16px; border: 1px solid #c4c4c4; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;} .menu-toggle svg {display: block; width: 16px; height: 16px; -webkit-transition: all 0.2s; transition: all 0.2s;} .menu-toggle svg:last-child {position: absolute; top: 16px; left: 16px; opacity: 0;} .template-page-home:not(.scrolled) .menu-toggle {color: #fff; border-color: rgba(255, 255, 255, 0.2);} @media (max-width: 1400px) { .header .inner {padding: 14px 0;} .header .main-nav {gap: 20px;} } @media (max-width: 1200px) { .menu-toggle {display: block;} .menu-toggle img {width: 20px;} .header .main-nav-container {position: fixed; z-index: 199; top: 0; right: 0; left: 0; height: 100%; opacity: 0; visibility: hidden; transform: translateY(-30px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; background: #fff; box-shadow: 0 24px 80px rgba(0, 0, 0, .4); padding: 82px 0 120px;} .header .main-nav {display: flex; flex-direction: column; padding: 20px 0; border: none; border-radius: 0; font-size: 30px; text-align: center; letter-spacing: -0.04em; overflow: auto; gap: 0; height: 100%; justify-content: space-between;} .header .main-nav:after {position: absolute; content: ''; display: block; border-top: 1px solid rgba(0, 0, 0, 0.2); left: 0; right: 0; height: 1px; top: 81px;} .header .main-nav li {display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 10px 0;} .header .main-nav a {padding: 0 8px; font-size: 30px;} .header .main-nav .submenu-arrow {border: 1px solid var(--blue); border-radius: 8px; padding: 11px; position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); bottom: -2px;} .header .main-nav .submenu-arrow:after {content: ''; border-bottom: 1px solid var(--text); border-right: 1px solid var(--text); display: block; height: 6px; width: 6px; pointer-events: none; position: relative; -webkit-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out; position: absolute; top: 50%; left: 50%; margin: -4px 0 0 -4px;} .header .main-nav > li:hover > a, .header .main-nav > li > a:hover {background: #fff; color: var(--text) !important;} .header .languages {display: flex; z-index: 200; border-color: rgba(0, 0, 0, 0.2); position: fixed; bottom: 30px; left: -9999px; opacity: 0; -webkit-transition: opacity 0.2s ease 0s, left 0s linear 0.2s; transition: opacity 0.2s ease 0s, left 0s linear 0.2s; background: #fff; padding: 3px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 64px; margin-left: -52px;} .header .languages i {background: rgba(0, 0, 0, 0.2); top: 3px; left: 3px; right: auto; height: 48px; width: 48px; border-radius: 50%; -webkit-transition: left 0.2s; transition: left 0.2s;} .header .language a {color: var(--text); font-size: 14px; padding: 0; border-radius: 50%; width: 48px; height: 48px; line-height: 48px; text-align: center;} .header .language.active:nth-child(1) ~ i, .header .language:nth-child(1):hover ~ i {top: 3px; left: 3px;} .header .language.active:nth-child(2) ~ i, .header .language:nth-child(2):hover ~ i {top: 3px; left: 51px;} .header .submenu {padding: 0 0 10px; position: relative; top: auto; left: auto; opacity: 1; pointer-events: all; -webkit-transform: none; transform: none; width: 100%; display: none; max-width: 220px;} .header .submenu ul {column-count: 1; column-gap: 4px; width: 100%; text-align: left; box-shadow: none;} .header .submenu ul:after {content: none;} .header .submenu ul li a {color: var(--text) !important; font-weight: 400; background: var(--grey); border-radius: 8px; font-size: 14px; padding: 8px 15px; letter-spacing: 0; width: 100%; text-align: center;} .header .submenu ul li:hover a, .header .submenu ul li.active a {background: var(--blue); color: #fff !important;} .header .main-nav > li:hover .submenu {opacity: 1; pointer-events: all; -webkit-transform: none; transform: none;} .header .main-nav .submenu-active .submenu-arrow:after {-webkit-transform: rotate(225deg); transform: rotate(225deg);} .header .main-nav .submenu-active .submenu {display: block;} } @media (max-width: 992px) { .header .telephone span {display: none;} } @media (max-width: 767px) { .header {border-bottom-width: 1px;} .header .inner {padding: 14px 0;} .scrolled .header .inner {padding: 8px 0;} .header .logo {width: 68px; min-width: 68px; margin-right: 0;} .header .right {gap: 5px;} .header .buttons .button {min-width: 110px;} .header .main-nav-container {padding: 66px 0 120px;} .header .main-nav:after {top: 65px;} } @media (max-width: 1200px) and (max-height: 600px) { .header .main-nav-container {padding: 66px 0 120px;} .header .main-nav a {font-size: 24px;} } @media (max-width: 1200px) and (max-height: 450px) { .header .main-nav-container {padding: 66px 0 20px;} .header .submenu {max-width: 160px;} .header .submenu ul li a {font-size: 12px; padding: 6px 15px;} .header .main-nav a {font-size: 18px;} .header .languages {display: none;} } /* --- Header (menu opened) --- */ .menu-opened .header, .menu-opened:not(.scrolled) .header {background: var(--text); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); border-bottom-color: #c4c4c4; background: #fff;} .menu-opened .header .main-nav-container, .menu-opened:not(.scrolled) .header .main-nav-container {opacity: 1; visibility: visible; transform: none;} .menu-opened .header .inner, .menu-opened:not(.scrolled) .header .inner {padding: 14px 0;} .menu-opened .header .logo img:first-child, .menu-opened:not(.scrolled) .header .logo img:first-child {opacity: 1;} .menu-opened .header .logo img:last-child, .menu-opened:not(.scrolled) .header .logo img:last-child {opacity: 0;} .menu-opened .header .telephone, .menu-opened:not(.scrolled) .header .telephone {color: var(--blue); border-color: var(--blue);} .menu-opened .header .telephone i, .menu-opened:not(.scrolled) .header .telephone i {background: var(--blue); color: #fff;} .menu-opened .header .telephone:hover, .menu-opened:not(.scrolled) .header .telephone:hover {background: var(--blue); color: #fff;} .menu-opened .menu-toggle svg:first-child, .menu-opened:not(.scrolled) .menu-toggle svg:first-child {opacity: 0;} .menu-opened .menu-toggle svg:last-child, .menu-opened:not(.scrolled) .menu-toggle svg:last-child {opacity: 1;} .menu-opened .menu-toggle, .menu-opened:not(.scrolled) .menu-toggle {color: var(--text); border-color: rgba(0, 0, 0, .4);} .menu-opened .header .main-nav a, .menu-opened:not(.scrolled) .header .main-nav a {border: none; color: var(--text);} .menu-opened .header .main-nav > li > a, .menu-opened:not(.scrolled) .header .main-nav > li > a {color: var(--text);} .menu-opened .header .main-nav > li > a:hover, .menu-opened:not(.scrolled) .header .main-nav > li > a:hover {color: #fff;} .menu-opened .header .languages {left: 50%; opacity: 1; -webkit-transition: opacity 0.2s ease 0.2s, left 0s linear 0.2s; transition: opacity 0.2s ease 0.2s, left 0s linear 0.2s;} .menu-opened .header .languages, .menu-opened:not(.scrolled) .header .languages {border-color: rgba(0, 0, 0, 0.2);} .menu-opened .header .languages i, .menu-opened:not(.scrolled) .header .languages i {background: rgba(0, 0, 0, 0.2);} .menu-opened .header .language a, .menu-opened:not(.scrolled) .header .language a {color: var(--text);} .menu-opened .header .language:hover a, .menu-opened .header .language.active a, .menu-opened:not(.scrolled) .header .language:hover a, .menu-opened:not(.scrolled) .header .language.active a {color: var(--text);} @media (max-width: 767px) { .menu-opened .header .inner, .menu-opened:not(.scrolled) .header .inner {padding: 8px 0;} } /* --- Breadcrumbs --- */ .breadcrumbs {margin: 0; padding: 0; display: block; font-size: 14px; position: relative; z-index: 5;} .breadcrumbs li {display: inline-block; list-style: none; margin-right: 3px;} .breadcrumbs li a {display: block; text-decoration: none; border-radius: 16px; border: 1px solid #fff; padding: 1px 7px; color: var(--text); max-width: 500px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .breadcrumbs li a.active {background: #fff;} @media (max-width: 900px) { .breadcrumbs li a {max-width: 300px;} } @media (max-width: 767px) { .breadcrumbs {margin: 0 0 -20px;} } /* --- Images gallery --- */ .images-gallery {display: flex; gap: 9px;} .images-gallery .image {flex-basis: calc(33.33% - 6px); width: calc(33.33% - 6px);} .images-gallery .image .img {padding-bottom: 127%; position: relative;} .images-gallery .image .img img {display: block; width: 100%; height: 100%; border-radius: 28px; position: absolute; top: 0; left: 0; object-fit: cover;} .images-gallery .image .img .label {font-weight: 700; font-size: 17px; margin: 0; background: #fff; padding: 4px 16px; border-radius: 20px; text-transform: uppercase; position: absolute; bottom: 8px; left: 8px;} @media (max-width: 1200px) { .images-gallery {overflow: auto; border-radius: 28px;} .images-gallery .image {flex-basis: 280px; width: 280px; flex-shrink: 0;} } /* --- Images gallery (alt) --- */ .images-gallery-alt {display: flex; gap: 8px;} .images-gallery-alt .image {flex-basis: calc(50% - 4px); width: calc(50% - 4px);} .images-gallery-alt .image .img {padding-bottom: 107%; position: relative;} .images-gallery-alt .image .img img {display: block; width: 100%; height: 100%; border-radius: 28px; position: absolute; top: 0; left: 0; object-fit: cover;} .images-gallery-alt .image .img .label {font-weight: 700; font-size: 17px; margin: 0; background: #fff; padding: 4px 16px; border-radius: 20px; text-transform: uppercase; position: absolute; bottom: 8px; left: 8px;} /* --- Trust --- */ .trust {display: flex; align-items: center; gap: 5px;} .trust img {display: block; height: auto; position: relative;} .trust .icon-guarantee {width: 102px; margin-right: 15px;} .trust .icon-rating {width: 126px; margin-right: 15px;} .trust .icon-years {width: 96px;} .trust .icon-year {width: 96px;} .trust .icon-year + .icon-year {margin-left: -30px;} @media (max-width: 767px) { .trust .icon-guarantee {width: 70px; margin-right: 5px;} .trust .icon-rating {width: 86px; margin-right: 5px;} .trust .icon-years {width: 66px;} .trust .icon-year {width: 66px;} .trust .icon-year + .icon-year {margin-left: -30px;} } /* --- Small form --- */ .small-form {background: #fff; position: relative; padding: 4px; color: #fff; border-radius: 32px; text-align: left; max-width: 450px;} .small-form .img {display: block; position: relative; border-radius: 28px; overflow: hidden;} .small-form .img:after {content: ''; position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0) 40%);} .small-form .img img {display: block; width: 100%; height: 280px; object-fit: cover;} .small-form .img p {margin: 0; position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 24px; font-size: 24px; font-weight: 500; z-index: 2;} .small-form p {font-weight: 600; font-size: 20px; margin: 0; padding: 7px 0 13px;} .small-form-row {display: flex; gap: 5px; margin-top: 4px;} .small-form-input {position: relative; flex-grow: 1;} .small-form input {border-radius: 100px; background: var(--grey);} .small-form label.error {display: none !important;} .small-form button {-moz-appearance: none; -webkit-appearance: none; appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; line-height: 1; display: block; cursor: pointer; outline: none; position: relative; text-decoration: none; -webkit-transition: all 0.2s; transition: all 0.2s; color: #fff; background: var(--blue); border: 2px solid var(--blue); text-align: center; font-weight: 500; border-radius: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-style: normal; font-size: 14px; padding: 12px; width: 64px; height: 64px; flex-shrink: 0;} .small-form button:hover {background: #fff; color: var(--blue);} .small-form button svg {display: block; width: 32px; height: 32px; margin: 0 auto;} @media (max-width: 1100px) { .small-form {max-width: 100%;} .small-form .img img {height: 380px;} } @media (max-width: 767px) { .small-form .img img {height: 280px;} } /* --- Big form --- */ .big-form-row {display: flex; gap: 8px; flex-wrap: wrap;} .big-form-col {flex-basis: calc(50% - 4px); width: calc(50% - 4px);} .big-form-col-full {flex-basis: 100%; width: 100%;} .big-form input[type="text"], .big-form input[type="email"], .big-form input[type="tel"], .big-form input[type="number"] {height: 72px; padding: 0 32px;} .big-form textarea {height: 160px; padding: 28px 32px;} .big-form-submit {padding-top: 16px;} .big-form-submit .button {display: block; width: 100%;} @media (max-width: 767px) { .big-form-row {gap: 12px;} .big-form-col {flex-basis: 100%; width: 100%;} .big-form input[type="text"], .big-form input[type="email"], .big-form input[type="tel"], .big-form input[type="number"] {padding: 0 24px;} } /* --- Hero section --- */ .section-hero {position: relative; overflow: clip visible; padding: 95px 0 110px; margin-top: -125px; text-align: center; color: #fff; height: calc(100vh + 70px); max-height: 1300px; display: flex; flex-direction: column; justify-content: space-between; letter-spacing: -0.02em;} .section-hero .bg {position: absolute; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%;} .section-hero .bg img {position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;} .section-hero .bg:after {content: ''; background: rgba(0,0,0,0.4); position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;} .section-hero .heading {position: relative; width: 100%; line-height: 1; display: flex; align-items: flex-end;} .section-hero .title {display: block; font-weight: 700; margin: 0; padding: 0; font-size: 280px; letter-spacing: -0.07em; padding-right: 40px; line-height: 1;} .section-hero .text {display: flex; align-items: center; top: -15px; position: relative;} .section-hero .text .description {font-size: 70px; font-weight: 600; line-height: 1.1; padding-right: 40px; top: -5px; position: relative; margin: 0;} .section-hero .text .info {font-size: 20px; line-height: 1.5; border-left: 1px solid rgba(255, 255, 255, 0.2); padding: 20px 40px; text-align: left; max-width: 430px;} .section-hero .bottom {position: relative; width: 100%; line-height: 1; display: flex; justify-content: space-between;} .section-hero .small-form-hero {background: rgba(255, 255, 255, 0.2); min-height: 112px; position: relative; padding: 3px 3px 3px 105px; color: #fff; border-radius: 32px; text-align: left;} .section-hero .small-form-hero img {display: block; border-radius: 30px; width: 93px; height: calc(100% - 8px); object-fit: cover; position: absolute; top: 4px; left: 4px; bottom: 4px; } .section-hero .small-form-hero p {font-weight: 600; font-size: 20px; margin: 0; padding: 7px 0 13px;} .section-hero .small-form-hero-row {display: flex; gap: 5px;} .section-hero .small-form-hero-input {position: relative;} .section-hero .small-form-hero input {border-radius: 100px; min-width: 280px;} .section-hero .small-form-hero label.error {display: none !important;} .section-hero .small-form-hero button {-moz-appearance: none; -webkit-appearance: none; appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; line-height: 1; display: block; cursor: pointer; outline: none; position: relative; text-decoration: none; -webkit-transition: all 0.2s; transition: all 0.2s; color: #fff; background: var(--blue); border: 2px solid var(--blue); text-align: center; font-weight: 500; border-radius: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-style: normal; font-size: 14px; padding: 12px; width: 64px; height: 64px;} .section-hero .small-form-hero button:hover {background: #fff; color: var(--blue);} .section-hero .small-form-hero button svg {display: block; width: 32px; height: 32px; margin: 0 auto;} .section-hero + div {position: relative; margin-top: -65px; border-radius: 65px 65px 0 0;} @media (max-width: 1800px) { .section-hero {padding-top: 110px;} .section-hero .title {font-size: 230px;} .section-hero .text .description {top: 2px;} .section-hero .text .info {font-size: 18px;} } @media (max-width: 1600px) { .section-hero .title {font-size: 210px;} .section-hero .text .description {font-size: 72px; top: -3px; letter-spacing: -0.06em;} .section-hero .text .info {font-size: 15px; padding: 15px 5px 15px 35px; max-width: 300px;} } @media (max-width: 1390px) { .section-hero .title {font-size: 180px;} .section-hero .text .description {font-size: 54px;} .section-hero .text .info {font-size: 15px; padding: 15px 5px 15px 35px; max-width: 300px;} } @media (max-width: 1200px) { .section-hero {height: auto;} .section-hero .heading {align-items: center; flex-direction: column;} .section-hero .title {font-size: 185px; margin-bottom: 40px;} .section-hero .text .description {font-size: 50px; font-weight: 500; letter-spacing: -0.04em;} .section-hero .text .info {padding: 10px 0 10px 40px; max-width: 300px;} .section-hero .bottom {align-items: center; flex-direction: column; margin-top: 30px;} .section-hero .trust {margin-top: 150px;} } @media (max-width: 767px) { .section-hero {padding: 135px 0 55px; height: calc(100vh + 32px); max-height: 1000px;} .section-hero .title {font-size: 114px; margin-bottom: 30px; padding: 0; position: relative; left: -4px;} .section-hero .text {top: auto; flex-direction: column; text-align: center;} .section-hero .text .description {font-size: 24px; font-weight: 600; letter-spacing: -0.01em; top: auto; padding: 0;} .section-hero .text .description br {display: none;} .section-hero .text .info {font-size: 16px; border: none; padding: 18px 0; margin-top: 23px; text-align: center; border-top: 1px solid; border-image: linear-gradient( to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) ) 1; max-width: 380px;} .section-hero .small-form-hero {min-height: 84px; padding: 3px 3px 3px 67px; border-radius: 23px; width: 100%; max-width: 358px;} .section-hero .small-form-hero img {width: 55px; border-radius: 20px;} .section-hero .small-form-hero-input {flex-grow: 1;} .section-hero .small-form-hero input {min-width: 10px; height: 48px; font-size: 14px;} .section-hero .small-form-hero button {padding: 6px; width: 48px; height: 48px;} .section-hero .small-form-hero p {font-size: 16px; padding: 7px 0 8px;} .section-hero .trust {margin-top: 20px;} .section-hero + div {margin-top: -32px; border-radius: 32px 32px 0 0;} } @media (max-width: 359px) { .section-hero .title {font-size: 90px;} } /* --- Hero section (animated) --- */ .section-hero .title, .section-hero .text .description, .section-hero .text .info {opacity: 0; transform: translateY(30px); -webkit-transition: opacity 0.2s, transform 0.4s; transition: opacity 0.2s, transform 0.4s;} .section-hero .text .description {transition-delay: 0.2s;} .section-hero .text .info {transition-delay: 0.4s;} .animated.section-hero .title, .animated.section-hero .text .description, .animated.section-hero .text .info {opacity: 1; transform: none;} /* --- Side title section --- */ .section-with-sidetitle {background: var(--grey); padding: 100px 0; overflow: clip visible; letter-spacing: -0.02em;} .section-with-sidetitle .section-columns {display: flex;} .section-with-sidetitle .sidetitle {flex-basis: 33%; width: 33%; padding-top: 8px;} .section-with-sidetitle .sidetitle p {margin: 0; padding: 0 0 0 30px; font-size: 20px; font-weight: 700; text-transform: uppercase; position: sticky; top: 100px;} .section-with-sidetitle .sidetitle p:before {content: ''; position: absolute; margin-top: 7px; top: 4px; left: 4px; width: 8px; height: 8px; background: #000; border-radius: 50%;} .section-with-sidetitle .sidetitle p:after {content: ''; position: absolute; margin-top: 7px; top: 0; left: 0; width: 16px; height: 16px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 50%;} .section-with-sidetitle .content {flex-basis: 67%; width: 67%;} .section-with-sidetitle .content h1:first-child, .section-with-sidetitle .content h2:first-child, .section-with-sidetitle .content h3:first-child, .section-with-sidetitle .content h4:first-child {margin: 0 0 27px;} @media (max-width: 1600px) { .section-with-sidetitle {padding: 60px 0;} .section-with-sidetitle .sidetitle {flex-basis: 26%; width: 26%;} .section-with-sidetitle .content {flex-basis: 74%; width: 74%;} } @media (max-width: 1200px) { .section-with-sidetitle .sidetitle p {font-size: 14px; padding: 0 0 0 25px;} .section-with-sidetitle .sidetitle p:before, .section-with-sidetitle .sidetitle p:after {margin-top: 3px;} } @media (max-width: 767px) { .section-with-sidetitle {padding: 40px 0;} .section-with-sidetitle .section-columns {flex-direction: column; gap: 35px;} .section-with-sidetitle .sidetitle {flex-basis: auto; width: 100%;} .section-with-sidetitle .sidetitle p {position: relative; top: auto;} .section-with-sidetitle .content {flex-basis: auto; width: 100%;} } /* --- Guarantee section --- */ .section-guarantee .guarantee-content {display: flex; margin-top: 40px;} .section-guarantee .guarantee-content .left {display: flex; gap: 75px; font-weight: 600; font-size: 24px; flex-basis: 64%; width: 64%; padding-right: 80px; line-height: 1.35;} .section-guarantee .guarantee-content .left .image {max-width: 107px; flex-shrink: 0;} .section-guarantee .guarantee-content .left .image img {display: block; width: 100%; height: auto;} .section-guarantee .guarantee-content .left p {margin: 0;} .section-guarantee .guarantee-content .left p + p {margin-top: 20px;} .section-guarantee .guarantee-content .right {flex-basis: 35%; width: 35%; font-size: 14px; color: var(--text_80);} .section-guarantee .guarantee-content .right p {margin: 0;} .section-guarantee .guarantee-content .right p + p {margin-top: 20px;} .section-guarantee .guarantee-content .right .button {margin-top: 25px; display: inline-block; min-width: 121px;} @media (max-width: 1600px) { .section-guarantee {padding-top: 140px;} .section-guarantee .guarantee-content {flex-direction: column; gap: 45px;} .section-guarantee .guarantee-content .left {flex-basis: auto; width: 100%; padding-right: 0;} .section-guarantee .guarantee-content .left .image {max-width: 65px;} .section-guarantee .guarantee-content .right {flex-basis: auto; width: 100%; display: flex; gap: 75px; align-items: center;} .section-guarantee .guarantee-content .right .button {margin-top: 0; display: block; min-width: 121px;} } @media (max-width: 1200px) { .section-guarantee {padding-top: 100px;} .section-guarantee .guarantee-content {gap: 35px;} .section-guarantee .guarantee-content .left {gap: 32px; font-size: 20px;} .section-guarantee .guarantee-content .left .image {max-width: 100px;} .section-guarantee .guarantee-content .right {gap: 50px; align-items: flex-start;} } @media (max-width: 767px) { .section-guarantee {padding-top: 40px;} .section-guarantee .h2 {max-width: 320px;} .section-guarantee .guarantee-content {margin-top: 25px; gap: 25px;} .section-guarantee .guarantee-content .left {flex-direction: row-reverse; font-size: 16px; font-weight: 700; line-height: 1.5;} .section-guarantee .guarantee-content .left .image {max-width: 80px;} .section-guarantee .guarantee-content .right {flex-direction: column; gap: 25px; align-items: flex-start;} } /* --- Guarantee section (animated) --- */ .section-guarantee .h2, .section-guarantee .guarantee-content {opacity: 0; transform: translateY(30px); -webkit-transition: opacity 0.2s, transform 0.4s; transition: opacity 0.2s, transform 0.4s;} .section-guarantee .guarantee-content {transition-delay: 0.2s;} .animated.section-guarantee .h2, .animated.section-guarantee .guarantee-content {opacity: 1; transform: none;} /* --- Services featured section --- */ .section-services-featured .services-featured-content {display: flex; gap: 60px; align-items: center;} .section-services-featured .services-featured-content .left {color: var(--text_80);} .section-services-featured .services-featured-content .left p {margin: 0;} .section-services-featured .services-featured-content .left p + p {margin-top: 20px;} .section-services-featured .services-featured-content .right .button {min-width: 290px;} .section-services-featured .services-featured-spoilers {display: flex; gap: 8px; flex-direction: column; margin-top: 60px;} .service-item-spoiler {padding: 8px; border-radius: 32px; background: #fff;} .service-item-spoiler .description {display: flex; justify-content: space-between; align-items: center; position: relative;} .service-item-spoiler .description .icon {display: block; text-decoration: none; color: var(--text); border: 1px solid var(--grey); border-radius: 28px; width: 48px; height: 80px; position: relative; background: var(--grey); -webkit-transition: all 0.2s; transition: all 0.2s; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);} .service-item-spoiler .description .icon:hover {border-color: var(--text);} .service-item-spoiler .description .icon svg {display: block; width: 12px; height: 12px; position: absolute; top: 50%; left: 50%; margin: -6px 0 0 -6px; -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: transform 0.2s; transition: transform 0.2s;} .service-item-spoiler .description .annotation {flex-basis: calc(100% - 180px - 48px); width: calc(100% - 180px - 48px); display: flex; align-items: center; margin: 0; flex-grow: 1; color: var(--text_80); padding: 15px 30px 15px 20px;} .service-item-spoiler .description .annotation .h6 {margin: 0; padding: 0 30px 0 0; flex-basis: 50%; width: 50%;} .service-item-spoiler .description .annotation p {max-width: 390px; margin: 0; padding: 0; flex-basis: 50%; width: 50%;} .service-item-spoiler .buttons {flex-basis: 180px; width: 180px; display: flex; justify-content: flex-end; padding-right: 15px;} .service-item-spoiler .button {min-width: 160px; padding-left: 10px; padding-right: 10px;} .service-item-spoiler .hidden-content {margin-top: 10px; display: none;} .service-item-spoiler.active .description .icon {border-color: var(--text); background: #fff;} .service-item-spoiler.active .description .icon:hover {background: var(--grey);} .service-item-spoiler.active .description .icon svg {-webkit-transform: rotate(0deg); transform: rotate(0deg);} @media (max-width: 1200px) { .section-services-featured .services-featured-content {flex-direction: column; gap: 30px; align-items: flex-start;} .section-services-featured .services-featured-spoilers {margin-top: 50px;} .service-item-spoiler .description .annotation {flex-direction: column; gap: 7px; padding: 0 30px 0 20px; align-items: flex-start;} .service-item-spoiler .description .annotation .h6 {margin: 0; padding: 0; flex-basis: auto; width: 100%; font-weight: 700;} .service-item-spoiler .description .annotation p {max-width: 390px; flex-basis: auto; width: 100%; font-size: 14px;} } @media (max-width: 767px) { .section-services-featured .services-featured-spoilers {margin-top: 30px;} .service-item-spoiler .description {flex-direction: column; align-items: flex-start; padding: 8px; gap: 11px;} .service-item-spoiler .description .icon {width: 48px; height: 48px; position: absolute; top: 0; right: 0;} .service-item-spoiler .description .annotation {flex-basis: 100%; width: 100%; padding: 0 60px 0 0;} .service-item-spoiler .description .annotation .h6 {flex-basis: 100%; width: 100%;} .service-item-spoiler .description .annotation p {max-width: 390px; flex-basis: 100%; width: 100%;} .service-item-spoiler .buttons {flex-basis: auto; width: auto;} } /* --- Services featured section (animated) --- */ .section-services-featured .h2, .section-services-featured .services-featured-content, .section-services-featured .services-featured-spoilers {opacity: 0; transform: translateY(30px); -webkit-transition: opacity 0.2s, transform 0.4s; transition: opacity 0.2s, transform 0.4s;} .section-services-featured .services-featured-content {transition-delay: 0.2s;} .section-services-featured .services-featured-spoilers {transition-delay: 0.4s;} .animated.section-services-featured .h2, .animated.section-services-featured .services-featured-content, .animated.section-services-featured .services-featured-spoilers {opacity: 1; transform: none;} /* --- Why us section --- */ .section-why-us .why-us-content {display: flex; gap: 60px; align-items: flex-start;} .section-why-us .why-us-content .left {color: var(--text_80);} .section-why-us .why-us-content .left p {margin: 0;} .section-why-us .why-us-content .left p + p {margin-top: 20px;} .section-why-us .why-us-content .right .button {min-width: 290px;} .section-why-us .why-us-blocks {display: flex; gap: 8px; margin-top: 52px;} .section-why-us .why-us-blocks .left {flex-basis: calc(50% - 4px); width: calc(50% - 4px);} .section-why-us .why-us-blocks .right {flex-basis: calc(50% - 4px); width: calc(50% - 4px); padding-top: 64px;} .section-why-us .why-us-blocks .block {background: #fff; border-radius: 32px; margin-top: 8px; position: relative; display: flex; width: 100%; overflow: hidden; top: 0; -webkit-transition: box-shadow 0.4s, top 0.2s; transition: box-shadow 0.4s, top 0.2s;} .section-why-us .why-us-blocks .block-card {min-height: 314px; overflow: visible; -webkit-mask: linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0);} .section-why-us .why-us-blocks .block:hover {box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); top: -3px;} .section-why-us .why-us-blocks .block .text {padding: 26px 32px 24px; flex-grow: 1; display: flex; flex-direction: column; gap: 8px; justify-content: space-between; position: relative; z-index: 2;} .section-why-us .why-us-blocks .block .text .h3 {font-size: 20px; text-transform: uppercase; font-weight: 700; margin: 0 0 0.4em;} .section-why-us .why-us-blocks .block .text p {margin: 0; padding: 0;} .section-why-us .why-us-blocks .block .text .counter {font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -0.05em;} .section-why-us .why-us-blocks .block .img {max-width: 39%; padding-right: 8px;} .section-why-us .why-us-blocks .block .img img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: left;} .section-why-us .why-us-blocks .block .img img.mob {display: none;} .section-why-us .why-us-blocks .block .img-alt {padding: 8px; position: relative; width: 40%;} .section-why-us .why-us-blocks .block .img-alt .img-alt-container {position: relative; padding-bottom: 130%;} .section-why-us .why-us-blocks .block .img-alt .img-alt-container img {position: absolute; display: block; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; border-radius: 28px; z-index: 2;} .section-why-us .why-us-blocks .block .img-alt .img-alt-container:before {content: ''; display: block; position: absolute; top: 11px; bottom: 11px; left: -14px; right: 14px; background: rgba(0, 0, 0, 0.06); border-radius: 28px;} .section-why-us .why-us-blocks .block .img-alt .img-alt-container:after {content: ''; display: block; position: absolute; top: 28px; bottom: 28px; left: -26px; right: 26px; background: rgba(0, 0, 0, 0.03); border-radius: 28px;} .section-why-us .why-us-blocks .block .bg {position: absolute; display: block; top: -1px; right: -1px; bottom: -1px; left: -1px;} .section-why-us .why-us-blocks .block .bg img {display: block; width: 100%; height: 100%; object-fit: cover;} .section-why-us .why-us-blocks .block .bg:before {content: ''; position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);} .section-why-us .why-us-blocks .block .review {width: 54%; flex-basis: 54%; font-size: 20px; padding: 26px 32px 24px 0;} .section-why-us .why-us-blocks .block .review p {margin: 0; padding: 0;} .section-why-us .why-us-blocks .block .review .author {font-size: 16px; display: flex; justify-content: space-between; align-items: center; gap: 15px; font-weight: 700; padding: 20px 0;} .section-why-us .why-us-blocks .block .review .author p {margin: 0; padding: 0; color: rgba(0,0,0,0.8);} .section-why-us .why-us-blocks .block .review .author svg {display: block; width: 90px; height: 18px;} .section-why-us .why-us-blocks .block .review .bottom {font-size: 14px; color: rgba(0,0,0,0.8); position: relative; border-top: 1px solid; border-image: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%) 1; padding: 40px 90px 0 0; text-transform: uppercase; font-weight: 700; margin-top: 20px;} .section-why-us .why-us-blocks .block .review .bottom p {margin: 0; padding: 0;} .section-why-us .why-us-blocks .block .review .bottom svg {display: block; width: 74px; height: 74px; position: absolute; top: 30px; right: 8px;} @media (max-width: 1600px) { .section-why-us .why-us-content .right .button {min-width: 210px;} .section-why-us .why-us-blocks .block .review {font-size: 16px;} .section-why-us .why-us-blocks .block .review .bottom svg {right: -37px;} } @media (max-width: 1200px) { .section-why-us .why-us-content {flex-direction: column; gap: 30px; align-items: flex-start;} .section-why-us .why-us-blocks {margin-top: 50px;} .section-why-us .why-us-blocks .block {flex-direction: column;} .section-why-us .why-us-blocks .block-alt {flex-direction: row;} .section-why-us .why-us-blocks .block .text {padding: 24px;} .section-why-us .why-us-blocks .block .img {max-width: 100%; padding: 0 0 24px 24px;} .section-why-us .why-us-blocks .block .img img {width: auto; height: 145px; max-width: 200%;} .section-why-us .why-us-blocks .block .img img.reg {display: none;} .section-why-us .why-us-blocks .block .img img.mob {display: block;} .section-why-us .why-us-blocks .block .bg img {object-position: left;} .section-why-us .why-us-blocks .block .bg:before {background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.4) 100%);} .section-why-us .why-us-blocks .block .img-alt {width: 48%;} .section-why-us .why-us-blocks .block .img-alt .img-alt-container:before {top: 7px; bottom: 7px; left: -8px; right: 8px;} .section-why-us .why-us-blocks .block .img-alt .img-alt-container:after {top: 17px; bottom: 17px; left: -16px; right: 16px;} .section-why-us .why-us-blocks .block .review {width: 100%; flex-basis: auto; padding: 0 24px 20px;} .section-why-us .why-us-blocks .block .review .author {padding: 20px 0;} .section-why-us .why-us-blocks .block .review .bottom {padding: 20px 50px 0 0; margin-top: 0;} .section-why-us .why-us-blocks .block .review .bottom svg {right: -25px; top: 10px;} } @media (max-width: 767px) { .section-why-us .why-us-blocks {margin-top: 30px;} } @media (max-width: 600px) { .section-why-us .why-us-blocks {flex-direction: column;} .section-why-us .why-us-blocks .left {flex-basis: auto; width: 100%;} .section-why-us .why-us-blocks .right {flex-basis: auto; width: 100%; padding-top: 0;} .section-why-us .why-us-blocks .block .text .counter {font-size: 50px;} .section-why-us .why-us-blocks .block .img {padding: 0 24px 24px 24px;} .section-why-us .why-us-blocks .block .img img {height: auto; width: 100%;} .section-why-us .why-us-blocks .block .review .bottom svg {right: -3px; top: 8px;} .section-why-us .why-us-blocks .block-card {min-height: 224px;} } /* --- How section --- */ .section-how {padding-bottom: 65px;} .section-how .how-content {display: flex; gap: 60px; align-items: flex-start;} .section-how .how-content .left {color: var(--text_80);} .section-how .how-content .left p {margin: 0;} .section-how .how-content .left p + p {margin-top: 20px;} .section-how .how-content .right .button {min-width: 290px;} .section-how .how-blocks {display: flex; gap: 8px; margin-top: 65px; flex-wrap: wrap;} .section-how .how-blocks .block {position: relative; background: #fff; border-radius: 32px; flex-basis: calc(25% - 6px); width: calc(25% - 6px); padding: 6px 7px; display: flex; flex-direction: column; justify-content: space-between; top: 0; -webkit-transition: box-shadow 0.4s, top 0.2s; transition: box-shadow 0.4s, top 0.2s;} .section-how .how-blocks .block:nth-child(2n) {flex-direction: column-reverse;} .section-how .how-blocks .block:hover {box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); top: -3px;} .section-how .how-blocks .block .img {position: relative; padding-bottom: 62%; width: 100%;} .section-how .how-blocks .block .img img {display: block; position: absolute; width: 100%; height: 100%; object-fit: cover; border-radius: 28px;} .section-how .how-blocks .block .text {position: relative; width: 100%; overflow: hidden; padding: 34px 26px 20px;} .section-how .how-blocks .block .text .h3 {font-size: 20px; text-transform: uppercase; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 15px;} .section-how .how-blocks .block .text p {margin: 0; padding: 0;} @media (max-width: 1200px) { .section-how .how-content {flex-direction: column; gap: 25px;} .section-how .how-content .right .button {min-width: 210px;} .section-how .how-blocks {gap: 8px;} .section-how .how-blocks .block {flex-basis: calc(50% - 4px); width: calc(50% - 4px);} } @media (max-width: 767px) { .section-how {padding-bottom: 40px;} .section-how .how-blocks .block {flex-basis: auto; width: 100%;} .section-how .how-blocks .block:nth-child(2n) {flex-direction: column;} .section-how .how-blocks .block .text {padding: 28px 24px 20px;} } /* --- Examples section --- */ .section-examples {position: relative; z-index: 2; padding-bottom: 65px; border-radius: 0 0 65px 65px;} .section-examples .examples-content {display: flex; gap: 60px; align-items: flex-start;} .section-examples .examples-content .left {color: var(--text_80);} .section-examples .examples-content .left p {margin: 0;} .section-examples .examples-content .left p + p {margin-top: 20px;} .section-examples .examples-content .right .button {min-width: 180px;} @media (max-width: 1200px) { .section-examples .examples-content {flex-direction: column; gap: 25px;} } @media (max-width: 767px) { .section-examples {border-radius: 0 0 32px 32px;} } /* --- Examples items --- */ .example-items {margin-top: -65px;} .example-wrapper {max-width: 1920px; margin: 0 auto; min-height: calc(100vh - 70px); max-height: 1000px;} .example-item {background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 10px; position: relative;} .example-item:first-child {padding-top: 75px;} .example-item:last-child {padding-bottom: 75px;} .example-item .example-content {background: #fff; padding: 40px; border-radius: 32px; max-width: 500px; /*position: sticky; top: 88px;*/} .example-item .example-content .h5 {margin: 0 0 40px; padding: 0; font-size: 32px;} .example-item .example-content p {margin: 0; padding: 0;} .example-item .example-infos {display: flex; flex-wrap: wrap; margin-top: 15px; gap: 0 20px;} .example-item .example-info {flex-basis: calc(50% - 10px); width: calc(50% - 10px); margin-top: 20px;} .example-item .example-info p {margin: 0; padding: 0; font-size: 14px; font-weight: 700; text-transform: uppercase; color: rgba(0, 0, 0, 0.6);} .example-item .example-info strong {display: block; font-size: 32px; font-weight: 600; letter-spacing: -0.03em;} .example-item .example-info small {font-size: 20px; font-weight: 700; letter-spacing: -0.02em;} .example-item .example-buttons {margin-top: 35px;} .example-items + div {margin-top: -65px;} @media (max-width: 767px) { .example-items {margin-top: -32px;} .example-items + div {margin-top: -32px;} .example-wrapper {min-height: 10px; max-height: none;} .example-item {padding: 200px 8px 8px;} .example-item .example-content {background: rgba(255,255,255,0.86); padding: 20px;} .example-item .example-content .h5 {margin: 0 0 20px;} .example-item .example-buttons {margin-top: 20px;} } /* --- About section --- */ .section-about {position: relative; z-index: 2; padding-top: 165px; border-radius: 65px 65px 0 0; background: #fff;} .section-about .about-content {display: flex; gap: 60px; align-items: flex-start;} .section-about .about-content .left {color: var(--text_80);} .section-about .about-content .left p {margin: 0;} .section-about .about-content .left p + p {margin-top: 20px;} .section-about .about-content .right .button {min-width: 165px;} .section-about .team-cards {display: flex; flex-wrap: wrap; margin: 60px -4px;} .section-about .team-card {flex-basis: 16.66%; width: 16.66%; padding: 4px;} .section-about .team-card .card {background: var(--grey); border-radius: 32px; padding: 4px; -webkit-transition: box-shadow 0.4s, top 0.2s; transition: box-shadow 0.4s, top 0.2s; top: 0; position: relative;} .section-about .team-card .card:hover {box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); top: -3px;} .section-about .team-card .img {padding-bottom: 141%; position: relative;} .section-about .team-card .img img {display: block; width: 100%; height: 100%; border-radius: 28px; position: absolute; left: 0; top: 0; object-fit: cover;} .section-about .team-card .text {padding: 18px 24px 16px;} .section-about .team-card .text .h6 {font-size: 20px; font-weight: 700; margin: 0 0 3px; padding: 0;} .section-about .team-card .text p {font-size: 14px; font-weight: 700; color: rgba(0, 0, 0, 0.6); text-transform: uppercase; margin: 0; padding: 0;} @media (max-width: 1600px) { .section-about {padding-top: 145px;} } @media (max-width: 1200px) { .section-about .about-content {flex-direction: column; gap: 25px;} .section-about {padding-top: 115px;} .section-about .team-cards {overflow: auto; flex-wrap: nowrap; margin: 60px -34px 0; padding: 0 30px;} .section-about .team-card {flex-basis: 217px; width: 217px; flex-shrink: 0;} .section-about .team-card .card:hover {box-shadow: none; top: 0;} .section-about .team-card .img {padding-bottom: 190%;} } @media (max-width: 767px) { .section-about {margin-top: -32px; border-radius: 32px 32px 0 0; padding-top: 40px;} .section-about .team-cards {margin: 60px -19px 0; padding: 0 15px;} .section-about .team-card .img {padding-bottom: 141%;} } /* --- Partners section --- */ .section-partners {position: relative; z-index: 2; background: #fff; padding-bottom: 165px; border-radius: 0 0 65px 65px;} .section-partners .partners-content {display: flex; gap: 60px;} .section-partners .partners-content p {margin: 0;} .section-partners .partners-content p + p {margin-top: 20px;} .section-partners .partners-content .left {color: var(--text_80); flex-basis: calc(50% - 30px); width: calc(50% - 30px);} .section-partners .partners-content .right {color: var(--text_80); flex-basis: calc(50% - 30px); width: calc(50% - 30px);} .section-partners .buttons {padding-top: 45px;} .section-partners .buttons .button {display: inline-block; min-width: 165px;} .section-partners .partners-cards {display: flex; flex-wrap: wrap; margin: 40px -4px;} .section-partners .partners-card {flex-basis: 33%; width: 33%; padding: 4px; top: 0; position: relative; -webkit-transition: top 0.2s; transition: top 0.2s;} .section-partners .partners-card:hover {top: -3px;} .section-partners .partners-card .img {border-radius: 32px; background: var(--grey); padding: 48px;} .section-partners .partners-card .img img {display: block; width: 230px; height: 77px; object-fit: contain; margin: 0 auto;} .section-partners + div {margin-top: -65px; padding-top: 230px;} @media (max-width: 1600px) { .section-partners {padding-bottom: 125px;} .section-partners + div {padding-top: 180px;} } @media (max-width: 1200px) { .section-partners {padding-bottom: 105px;} .section-partners .partners-content {flex-direction: column; gap: 15px;} .section-partners .partners-content .left {flex-basis: auto; width: 100%;} .section-partners .partners-content .right {flex-basis: auto; width: 100%;} .section-partners .buttons {padding-top: 35px;} .section-partners .partners-cards {margin-top: 50px;} .section-partners .partners-card .img {padding: 48px 26px;} } @media (max-width: 767px) { .section-partners {padding-bottom: 30px; border-radius: 0 0 32px 32px;} .section-partners + div {padding-top: 110px;} .section-partners .partners-card {flex-basis: 50%; width: 50%;} .section-partners .partners-card .img {padding: 16px 30px;} } @media (max-width: 450px) { .section-partners .buttons .button {display: block; min-width: 10px;} } /* --- Tariffs section --- */ .section-tariffs .tariffs-content {display: flex; gap: 80px;} .section-tariffs .tariffs-content p {margin: 0;} .section-tariffs .tariffs-content p + p {margin-top: 20px;} .section-tariffs .tariffs-content .left {color: var(--text_80); flex-basis: calc(50% - 40px); width: calc(50% - 40px);} .section-tariffs .tariffs-content .right {color: var(--text_80); flex-basis: calc(50% - 40px); width: calc(50% - 40px);} .section-tariffs .tariffs-cards {margin-top: 70px;} .section-tariffs .tariffs-card {padding: 8px; margin-top: 8px; position: relative; top: 0; -webkit-transition: box-shadow 0.4s, top 0.2s; transition: box-shadow 0.4s, top 0.2s; display: flex; background: #fff; border-radius: 32px;} .section-tariffs .tariffs-card:hover {box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); top: -3px;} .section-tariffs .tariffs-card .img {border-radius: 28px; position: relative; padding: 24px; background-repeat: no-repeat; background-position: center center; background-size: cover; overflow: visible; -webkit-mask: linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0); width: 220px; flex-shrink: 0;} .section-tariffs .tariffs-card .img img {display: block; width: 230px; height: 77px; object-fit: contain; margin: 0 auto;} .section-tariffs .tariffs-card .img:before {content: ''; position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 70%);} .section-tariffs .tariffs-card .img p {position: relative; color: rgba(0, 0, 0, 0.6); margin: 0; padding: 0; font-size: 14px;} .section-tariffs .tariffs-card .img p strong {display: block; font-size: 32px; font-weight: 600; color: #000; line-height: 1; padding: 3px 0;} .section-tariffs .tariffs-card .img p strong small {font-size: 16px; font-weight: 700;} .section-tariffs .tariffs-card .text {flex-grow: 1; width: calc(100% - 220px);} .section-tariffs .tariffs-card .heading {display: flex; padding: 32px 32px 36px; gap: 20px; justify-content: space-between;} .section-tariffs .tariffs-card .heading .info {} .section-tariffs .tariffs-card .heading .h5 {margin: 0 0 4px; padding: 0;} .section-tariffs .tariffs-card .heading p {margin: 0; padding: 0;} .section-tariffs .tariffs-card .hr {margin: 0 32px; padding: 0; display: block; border-top: 1px solid rgba(0, 0, 0, 0.08);} .section-tariffs .tariffs-card .buttons {} .section-tariffs .tariffs-card .button {min-width: 210px;} .section-tariffs .tariffs-card .list {padding: 32px 32px 30px; font-weight: 700; display: flex; flex-wrap: wrap;} .section-tariffs .tariffs-card .list p {margin: 0; padding: 8px 0 8px 34px; position: relative; min-width: 50%;} .section-tariffs .tariffs-card .list p:before {content: ''; display: block; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='4' fill='%23F5F5F5'/%3E%3Cpath d='M16.7676 8.63463C16.4582 8.32482 15.9558 8.32501 15.646 8.63463L10.5979 13.683L8.35419 11.4393C8.04438 11.1295 7.54217 11.1295 7.23236 11.4393C6.92255 11.7491 6.92255 12.2513 7.23236 12.5611L10.0368 15.3656C10.1916 15.5204 10.3946 15.598 10.5977 15.598C10.8007 15.598 11.0039 15.5206 11.1587 15.3656L16.7676 9.75644C17.0775 9.44684 17.0775 8.94443 16.7676 8.63463Z' fill='%232F2F2F'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; top: 8px; left: 0;} .section-tariffs + .section-video {margin-top: -65px; padding-top: 230px;} @media (max-width: 1600px) { .section-tariffs .tariffs-cards {margin-top: 55px;} } @media (max-width: 1200px) { .section-tariffs .tariffs-card .heading {padding: 15px 12px 20px;} .section-tariffs .tariffs-card .heading .h5 {font-size: 32px; margin: 0 0 17px;} .section-tariffs .tariffs-card .hr {margin: 0 12px;} .section-tariffs .tariffs-card .list {padding: 12px;} .section-tariffs .tariffs-card .buttons {position: absolute; bottom: 8px; left: 8px;} .section-tariffs .tariffs-card .button {min-width: 220px;} } @media (max-width: 767px) { .section-tariffs + .section-video {margin-top: 0; padding-top: 0;} .section-tariffs .tariffs-content {flex-direction: column; gap: 20px;} .section-tariffs .tariffs-content .left {flex-basis: auto; width: 100%;} .section-tariffs .tariffs-content .right {flex-basis: auto; width: 100%;} .section-tariffs .tariffs-card {flex-direction: column-reverse;} .section-tariffs .tariffs-card .img {width: 100%; padding: 24px 24px 95px; text-align: center;} .section-tariffs .tariffs-card .img:before {background: linear-gradient(180deg, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0.3) 100%);} .section-tariffs .tariffs-card .text {width: 100%;} .section-tariffs .tariffs-card .buttons {position: absolute; bottom: 8px; left: 8px; padding: 14px; right: 8px;} } /* --- Video container --- */ .video-container {position: relative; padding-bottom: 51%; height: 0;} .video-container img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; object-fit: cover; border-radius: 32px;} .video-container iframe, .video-container object, .video-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; border: none; overflow: hidden; border-radius: 32px;} .video-container .play {position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; color: var(--blue); -webkit-transition: all 0.3s; transition: all 0.3s;} .video-container .play:hover {color: var(--yellow);} .video-container .play svg {display: block; width: 100%; height: auto;} @media (max-width: 1200px) { .video-container {padding-bottom: 56.25%;} } @media (max-width: 767px) { .video-container .play {width: 70px; height: 70px; margin: -35px 0 0 -35px;} } /* --- Video section --- */ .section-video .video-content {display: flex; gap: 60px; align-items: flex-start;} .section-video .video-content .left {color: var(--text_80);} .section-video .video-content .left p {margin: 0;} .section-video .video-content .left p + p {margin-top: 20px;} .section-video .video-content .right .button {min-width: 270px;} .section-video .video-container {margin-top: 70px;} @media (max-width: 1200px) { .section-video .video-content {gap: 30px; flex-direction: column;} .section-video .video-container {margin-top: 55px;} } @media (max-width: 767px) { .section-video .video-content {flex-direction: column; gap: 40px;} .section-video .video-content .left {flex-basis: auto; width: 100%;} .section-video .video-content .right {flex-basis: auto; width: 100%;} .section-video .video-content .right .button {display: inline-block;} } /* --- Quote section --- */ .section-quote {background: var(--grey); padding: 100px 0;} .section-quote .columns {display: flex; gap: 8px;} .section-quote .columns .left {flex-basis: calc(33.33% - 4px); width: calc(33.33% - 4px); background: #fff; border-radius: 32px; padding: 48px; display: flex; gap: 15px; justify-content: space-between; flex-direction: column;} .section-quote .columns .left .sidetitle p {margin: 0; padding: 0 0 0 30px; font-size: 20px; font-weight: 700; text-transform: uppercase; position: sticky; top: 100px;} .section-quote .columns .left .sidetitle p:before {content: ''; position: absolute; margin-top: 7px; top: 4px; left: 4px; width: 8px; height: 8px; background: #000; border-radius: 50%;} .section-quote .columns .left .sidetitle p:after {content: ''; position: absolute; margin-top: 7px; top: 0; left: 0; width: 16px; height: 16px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 50%;} .section-quote .columns .right {flex-basis: calc(66.66% - 4px); width: calc(66.66% - 4px);} .section-quote .columns .right img {display: block; width: 100%; height: 650px; object-fit: cover; border-radius: 32px;} .section-quote .quote-form .small-form {max-width: 100%;} .section-quote .quote-form .small-form .img {display: none !important;} .section-quote .quote-form-description {font-size: 14px; margin: 15px 0 0; padding: 0;} @media (max-width: 1500px) { .section-quote .columns .left {flex-basis: calc(45% - 4px); width: calc(45% - 4px);} .section-quote .columns .right {flex-basis: calc(55% - 4px); width: calc(55% - 4px);} } @media (max-width: 1200px) { .section-quote {padding: 0 0 20px;} .section-quote .columns {flex-direction: column; gap: 8px;} .section-quote .columns .left {flex-basis: auto; width: 100%;} .section-quote .columns .left .h2 br {display: none;} .section-quote .columns .left .sidetitle p {font-size: 14px; padding: 0 0 0 25px;} .section-quote .columns .left .sidetitle p:before, .section-quote .columns .left .sidetitle p:after {margin-top: 3px;} .section-quote .columns .right {flex-basis: auto; width: 100%;} .section-quote .columns .right img {height: 306px;} } @media (max-width: 767px) { .section-quote .columns .left {padding: 32px 24px;} .section-quote .columns .right img {height: 220px;} } /* --- Reviews section --- */ .section-reviews {position: relative; z-index: 2;} .section-reviews .reviews-content {display: flex; gap: 100px; align-items: flex-start;} .section-reviews .reviews-content .left {color: var(--text_80);} .section-reviews .reviews-content .left p {margin: 0;} .section-reviews .reviews-content .left p + p {margin-top: 20px;} .section-reviews .reviews-content .right .button {min-width: 200px;} .section-reviews .review-cards {display: flex; flex-wrap: wrap; margin: 60px -4px 0;} .section-reviews .review-card {flex-basis: 25%; width: 25%; padding: 4px;} .section-reviews .review-card .card {background: var(--grey); border-radius: 32px; -webkit-transition: box-shadow 0.4s, top 0.2s; transition: box-shadow 0.4s, top 0.2s; top: 0; position: relative; overflow: hidden;} .section-reviews .review-card .card:hover {box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); top: -3px;} .section-reviews .review-card .img {padding-bottom: 133%; position: relative; border-radius: 32px;} .section-reviews .review-card .img img {display: block; width: 100%; height: 100%; border-radius: 28px; position: absolute; left: 0; top: 0; object-fit: cover;} .section-reviews .review-card .img:after {content: ''; position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0) 40%);} .section-reviews .review-card .text {padding: 32px; position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 20px; justify-content: space-between; z-index: 2;} .section-reviews .review-card .text p {font-size: 24px; font-weight: 600; color: #fff; margin: 0; padding: 0;} .section-reviews .review-card .text svg {display: flex; width: 120px; height: 24px; flex-shrink: 0;} @media (max-width: 1600px) { } @media (max-width: 1200px) { .section-reviews .reviews-content {flex-direction: column; gap: 35px;} .section-reviews .review-cards {overflow: auto; flex-wrap: nowrap; margin: 60px -34px 0; padding: 0 30px;} .section-reviews .review-card {flex-basis: 317px; width: 317px; flex-shrink: 0;} .section-reviews .review-card .card:hover {box-shadow: none; top: 0;} .section-reviews .review-card .img {padding-bottom: 150%;} } @media (max-width: 767px) { .section-reviews .review-cards {margin: 60px -19px 0; padding: 0 15px;} .section-reviews .review-card .img {padding-bottom: 141%;} } /* --- Blog preview item --- */ .blog-preview {padding: 4px;} .blog-preview .card {position: relative; background: #fff; border-radius: 32px; display: flex; flex-direction: column; top: 0; -webkit-transition: box-shadow 0.4s, top 0.2s; transition: box-shadow 0.4s, top 0.2s; text-decoration: none; color: var(--text); height: 100%;} .blog-preview .card:hover {box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); top: -3px;} .blog-preview .img {position: relative; padding-bottom: 80%; width: 100%;} .blog-preview .img img {display: block; position: absolute; width: 100%; height: 100%; object-fit: cover; border-radius: 32px;} .blog-preview .text {position: relative; width: 100%; overflow: hidden; padding: 26px 26px 20px;} .blog-preview .text .date {display: block; color: rgba(0, 0, 0, 0.3); font-size: 14px; margin: 0 0 15px;} .blog-preview .text .h6 {font-size: 24px; margin: 0 0 15px;} .blog-preview .text p {margin: 0; padding: 0;} .blog-preview:first-child .img {padding-bottom: 0; height: 100%; min-height: 400px;} .blog-preview:first-child .img:after {content: ''; position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50%); border-radius: 32px;} .blog-preview:first-child .text {position: absolute; color: #fff; z-index: 2; bottom: 0; left: 0; right: 0; padding: 32px;} .blog-preview:first-child .text .date {font-size: 17px; color: rgba(255, 255, 255, 0.7);} .blog-preview:first-child .text .h6 {font-size: 32px; margin: 0;} .blog-preview:first-child .text p {display: none;} @media (max-width: 1500px) { .blog-preview .text {padding: 24px 24px 20px;} } @media (max-width: 1200px) { .blog-preview:first-child .img {padding-bottom: 52%;} .blog-preview:hover {box-shadow: none; top: 0;} } @media (max-width: 767px) { .blog-preview .text {padding: 28px 24px 20px;} .blog-preview:first-child .img {padding-bottom: 100%;} } /* --- Insights section --- */ .section-insights {position: relative; z-index: 2;} .section-insights .insights-content {display: flex; gap: 80px; align-items: flex-start;} .section-insights .insights-content .left {color: var(--text_80);} .section-insights .insights-content .left p {margin: 0;} .section-insights .insights-content .left p + p {margin-top: 20px;} .section-insights .insights-content .right .button {min-width: 180px;} .section-insights .insights-previews {display: flex; margin: 65px -4px 0; flex-wrap: wrap;} .section-insights .blog-preview {flex-basis: 22.33%; width: 22.33%;} .section-insights .blog-preview:first-child {flex-basis: 33%; width: 33%;} @media (max-width: 1500px) { .section-insights .blog-preview:nth-child(n) {flex-basis: 33%; width: 33%;} .section-insights .blog-preview:nth-child(n+4) {display: none;} } @media (max-width: 1200px) { .section-insights .insights-content {flex-direction: column; gap: 35px;} .section-insights .blog-preview:nth-child(n) {display: block; flex-basis: 33%; width: 33%;} .section-insights .blog-preview:nth-child(4n+1) {flex-basis: auto; width: 100%;} } @media (max-width: 767px) { .section-insights {padding-bottom: 40px;} .section-insights .blog-preview {flex-basis: auto; width: 100%;} .section-insights .blog-preview:nth-child(n) {flex-basis: auto; width: 100%;} } /* --- Certificates section --- */ .section-certificates .certificates-content {display: flex; gap: 80px;} .section-certificates .certificates-content p {margin: 0;} .section-certificates .certificates-content p + p {margin-top: 20px;} .section-certificates .certificates-content .left {color: var(--text_80); flex-basis: calc(50% - 40px); width: calc(50% - 40px);} .section-certificates .certificates-content .right {color: var(--text_80); flex-basis: calc(50% - 40px); width: calc(50% - 40px);} .section-certificates .certificates-cards {margin: 65px -4px 0 33%; display: flex; flex-wrap: wrap;} .section-certificates .certificates-card {width: 20%; flex-basis: 20%; padding: 4px;} .section-certificates .certificates-card .card {border-radius: 32px; -webkit-transition: box-shadow 0.4s, top 0.2s; transition: box-shadow 0.4s, top 0.2s; top: 0; position: relative; overflow: hidden;} .section-certificates .certificates-card .card:hover {box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); top: -3px;} .section-certificates .certificates-card .img {padding-bottom: 140%; position: relative; border-radius: 32px;} .section-certificates .certificates-card .img img {display: block; width: 100%; height: 100%; border-radius: 32px; position: absolute; left: 0; top: 0; object-fit: cover;} @media (max-width: 1600px) { .section-certificates .certificates-cards {margin: 55px -4px 0 26%;} } @media (max-width: 1200px) { .section-certificates .certificates-cards {margin: 55px -4px 0 -4px;} } @media (max-width: 767px) { .section-certificates .certificates-content {flex-direction: column; gap: 20px;} .section-certificates .certificates-content .left {flex-basis: auto; width: 100%;} .section-certificates .certificates-content .right {flex-basis: auto; width: 100%;} .section-certificates .certificates-cards {overflow: auto; flex-wrap: nowrap; margin-top: 30px;} .section-certificates .certificates-card {width: 110px; flex-basis: auto; flex-shrink: 0;} .section-certificates .certificates-card .card {border-radius: 7px;} .section-certificates .certificates-card .img {border-radius: 7px;} .section-certificates .certificates-card .img img {border-radius: 7px;} } /* --- FAQ section --- */ .section-faq .faq-spoilers {display: flex; gap: 8px; flex-direction: column; margin-top: 60px;} .faq-item-spoiler {border-radius: 32px; background: #fff; padding-right: 78px; position: relative;} .faq-item-spoiler p {margin: 0; padding: 0;} .faq-item-spoiler .question {display: flex; justify-content: space-between; align-items: center; font-size: 24px; font-weight: 600; color: var(--text); text-decoration: none; padding: 24px 32px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);} .faq-item-spoiler .icon {display: block; text-decoration: none; color: var(--text); border: 1px solid var(--grey); border-radius: 28px; width: 70px; height: auto; position: absolute; background: var(--grey); -webkit-transition: all 0.2s; transition: all 0.2s; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); top: 8px; right: 8px; bottom: 8px;} .faq-item-spoiler .icon:hover {border-color: var(--text);} .faq-item-spoiler .icon svg {display: block; width: 16px; height: 16px; position: absolute; top: 50%; left: 50%; margin: -8px 0 0 -8px; -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: transform 0.2s; transition: transform 0.2s;} .faq-item-spoiler .hidden-content {display: none; padding: 0 32px 32px; font-size: 20px; color: var(--text_80);} .faq-item-spoiler.active .icon {border-color: var(--text); background: #fff;} .faq-item-spoiler.active .icon:hover {background: var(--grey);} .faq-item-spoiler.active .icon svg {-webkit-transform: rotate(0deg); transform: rotate(0deg);} @media (max-width: 1200px) { .section-faq .faq-spoilers {margin-top: 50px;} } @media (max-width: 767px) { .section-faq .faq-spoilers {margin-top: 30px;} .faq-item-spoiler {padding-right: 68px;} .faq-item-spoiler .question {font-size: 20px; font-weight: 500; padding: 24px;} .faq-item-spoiler .icon {width: 60px; border-radius: 24px;} .faq-item-spoiler .hidden-content {padding: 0 24px 24px; font-size: 18px;} } /* --- Help section --- */ .section-help {position: relative;} .section-help:before, .section-help:after {content: ''; display: block; position: absolute; z-index: 3; height: 65px; background: var(--grey); left: 0; right: 0;} .section-help:before {border-radius: 0 0 65px 65px; top: 0;} .section-help:after {border-radius: 65px 65px 0 0; bottom: 0;} .section-help .section-columns {margin: 20px 0 10px;} .section-help .bg {position: absolute; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%;} .section-help .bg img {position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;} .section-help .bg:after {content: ''; background: rgba(0,0,0,0.4); position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;} .section-help .sidetitle {color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; position: relative;} .section-help .sidetitle p {position: relative; top: auto;} .section-help .sidetitle p:before {background: #fff;} .section-help .sidetitle p:after {border: 1px solid rgba(255, 255, 255, 0.2);} .section-help .content .help-form {position: relative; background: rgba(0,0,0,0.2); border-radius: 32px; padding: 48px; max-width: 720px; margin-left: auto; color: #fff;} .section-help .content .help-form .h2 {margin: 0 0 0.6em; padding: 0;} .section-help .review {font-size: 24px; font-weight: 500; max-width: 450px; line-height: 1.35;} .section-help .review .author {font-size: 16px; display: flex; justify-content: space-between; align-items: center; gap: 15px; font-weight: 700; padding: 25px 0 0; border-top: 1px solid; border-image: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%) 1; margin-top: 23px;} .section-help .review .author svg {display: block; width: 90px; height: 18px;} @media (max-width: 1600px) { .section-help .section-columns {margin: 40px 0;} } @media (max-width: 1200px) { .section-help + .site-footer {padding-top: 32px;} .section-help .section-columns {flex-direction: column-reverse;} .section-help .content {flex-basis: auto; width: 100%;} .section-help .content .help-form {max-width: 100%;} .section-help .sidetitle {flex-basis: auto; width: 100%;} .section-help .sidetitle p {display: none;} .section-help .review {font-size: 20px; font-weight: 400; max-width: 350px; line-height: 1.5; margin: 30px 0 0;} } @media (max-width: 767px) { .section-help + .site-footer {padding-top: 0;} .section-help:before {border-radius: 0 0 32px 32px;} .section-help:after {border-radius: 32px 32px 0 0;} .section-help .content .help-form {padding: 28px 20px; max-width: 100%;} .section-help .content .help-form .h2 {margin-bottom: 25px;} .section-help .review {max-width: 100%; margin: 30px 0 20px;} } /* --- Footer --- */ .site-footer {padding: 64px 0 20px; background: var(--grey); font-size: 14px; overflow: hidden; position: relative; margin-top: -1px;} .site-footer .row {display: flex; gap: 20px;} .site-footer .row .col {flex-grow: 1; max-width: 30%;} .site-footer .row .col .logo {display: block; width: 96px;} .site-footer .row .col .logo img {display: block; width: 100%; height: auto;} .site-footer .row .col .description {color: rgba(0, 0, 0, 0.6); margin: 25px 0 0; max-width: 340px;} .site-footer .row .col .org-number {color: rgba(0, 0, 0, 0.6); margin: 20px 0 0; max-width: 340px;} .site-footer .row .col .title {text-transform: uppercase; color: rgba(0, 0, 0, 0.6); font-weight: 700; padding: 0; margin: 0 0 20px;} .site-footer .row .col ul {margin: 0; padding: 0; column-count: 2; column-gap: 20px;} .site-footer .row .col ul li {display: block; break-inside: avoid; padding: 6px 0;} .site-footer .row .col ul li a {display: block; color: var(--text); text-decoration: none; -webkit-transition: all 0.3s; transition: all 0.3s;} .site-footer .row .col ul li a:hover {color: var(--blue);} .site-footer .row .col ul.nav-huge li a {font-size: 20px; font-weight: 700;} .site-footer .row .col:last-child {min-width: 416px;} .site-footer .contacts-row {display: flex; gap: 4px;} .site-footer .contacts-col {display: flex; gap: 4px; flex-direction: column;} .site-footer .contacts-col:first-child {flex-basis: 45%; width: 45%; flex-shrink: 0;} .site-footer .contacts-col:last-child {flex-grow: 1;} .site-footer .contact-item {background: #fff; border-radius: 8px; display: flex; gap: 8px; padding: 2px 10px 2px 2px; align-items: center; line-height: 1.5;} .site-footer .contact-item .icon {background: var(--grey); width: 32px; min-height: 32px; align-self: stretch; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center;} .site-footer .contact-item .icon svg {display: block;} .site-footer .contact-item a {text-decoration: none; color: var(--text); -webkit-transition: all 0.3s; transition: all 0.3s;} .site-footer .contact-item a:hover {color: var(--blue);} .site-footer .contact-item strong {font-weight: 700;} .site-footer .contact-item .label-address {padding: 4px 0;} .site-footer .contact-map {position: relative; width: 100%; height: 100%;} .site-footer .contact-map img {position: absolute; display: block; width: 100%; height: 100%; border-radius: 8px; object-fit: cover;} .site-footer .contact-map .location {position: absolute; bottom: 4px; left: 4px; border-radius: 8px; background: rgba(255, 255, 255, 0.8); padding: 8px 12px;} .site-footer .logo-huge {display: block; width: 100%; height: auto; margin: 90px 0 100px;} .site-footer .bottom-row {color: rgba(0, 0, 0, 0.6); display: flex; gap: 20px; font-size: 14px; justify-content: space-between; align-items: center;} .site-footer .bottom-row p {margin: 0; padding: 0;} .site-footer .bottom-col .copyright {margin: 0; padding: 0;} .site-footer .bottom-nav {margin: 0; padding: 0; display: flex; gap: 30px;} .site-footer .bottom-nav li {display: block; padding: 6px 0;} .site-footer .bottom-nav li a {display: block; color: var(--text); text-decoration: none; -webkit-transition: all 0.3s; transition: all 0.3s;} .site-footer .bottom-nav li a:hover {color: var(--blue);} .site-footer .bottom-col .logo-powered {display: block; width: 100px; height: auto; margin-top: 13px;} .site-footer .bottom-right {display: flex; gap: 40px; align-items: center;} .site-footer .soc-links {margin: 0; padding: 0; display: flex; gap: 8px;} .site-footer .soc-links li {display: block;} .site-footer .soc-links li a {background: #fff; width: 48px; height: 48px; border-radius: 8px; position: relative; display: block; color: var(--text); -webkit-transition: all 0.3s; transition: all 0.3s;} .site-footer .soc-links li a:hover {background: var(--blue); color: #fff;} .site-footer .soc-links li a svg {display: block; position: absolute; top: 50%; left: 50%;} .site-footer .soc-links li a svg.link-f {width: 10px; height: 18px; margin: -9px 0 0 -5px;} .site-footer .soc-links li a svg.link-t {width: 21px; height: 17px; margin: -9px 0 0 -10px;} .site-footer .soc-links li a svg.link-i {width: 22px; height: 22px; margin: -11px 0 0 -11px;} @media (max-width: 1600px) { .site-footer .row .col .description, .site-footer .row .col .org-number {max-width: 270px;} .site-footer .row .col ul.nav-huge li a {font-size: 16px;} } @media (max-width: 1200px) { .site-footer .row {flex-wrap: wrap;} .site-footer .row .col {flex-grow: 0; flex-basis: calc(50% - 10px); width: calc(50% - 10px); margin-bottom: 25px; max-width: 100%;} .site-footer .row .col:last-child {min-width: 10px;} .site-footer .row .col .description {max-width: 340px;} .site-footer .logo-huge {margin: 60px 0 80px;} } @media (max-width: 767px) { .site-footer .row .col:first-child, .site-footer .row .col:last-child {flex-basis: 100%; width: 100%;} .site-footer .row .col .description, .site-footer .row .col .org-number {max-width: 100%;} .site-footer .logo-huge {margin: 20px 0 60px;} .site-footer .bottom-row {flex-direction: column; padding-bottom: 10px;} .site-footer .bottom-right {flex-direction: column; gap: 20px;} } @media (max-width: 570px) { .site-footer .row .col:nth-child(n) {flex-basis: 100%; width: 100%;} .site-footer .logo-huge {margin: 5px 0 40px;} .site-footer .row .col ul {max-width: 100%;} .site-footer .contact-map {height: 160px;} .site-footer .contacts-row {flex-direction: column;} .site-footer .contacts-col:first-child {flex-basis: 100%; width: 100%;} } /* --- Gallery section --- */ .section-gallery .gallery-content {display: flex; gap: 60px; align-items: flex-start;} .section-gallery .gallery-content .left {color: var(--text_80); flex-grow:1;} .section-gallery .gallery-content .left p {margin: 0;} .section-gallery .gallery-content .left p + p {margin-top: 20px;} .section-gallery .gallery-content .right {flex-shrink: 0;} .section-gallery .gallery-content .right .trust .icon-guarantee {width: 115px; margin-right: 25px;} .section-gallery .gallery-content .right .trust .icon-rating {width: 142px; margin-right: 15px;} .section-gallery .gallery-content .right .trust .icon-years {width: 115px;} .section-gallery .gallery-content .right .trust .icon-year {width: 115px;} .section-gallery .gallery-content .right .trust {justify-content: flex-end;} .section-gallery .gallery-content .right .trust .icon-year, .section-gallery .gallery-content .right .trust .icon-year + .icon-year {margin-left: -60px;} .section-gallery .gallery-images {display: flex; margin: 65px -4px; flex-wrap: wrap;} .section-gallery .gallery-image {position: relative; flex-basis: 33.33%; width: 33.33%; padding: 4px;} .section-gallery .gallery-image .img {position: relative; padding-bottom: 107%; height: 100%;} .section-gallery .gallery-image .img img {position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; border-radius: 32px; top: 0; -webkit-transition: box-shadow 0.4s, top 0.2s; transition: box-shadow 0.4s, top 0.2s;} .section-gallery .gallery-image .img:hover img {box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); top: -3px;} .section-gallery .gallery-image:nth-child(2) {flex-basis: 66.66%; width: 66.66%;} .section-gallery .gallery-image:nth-child(2) .img {padding-bottom: 54%;} @media (max-width: 1800px) { .section-gallery .gallery-content .right .trust .icon-guarantee {width: 102px; margin-right: 15px;} .section-gallery .gallery-content .right .trust .icon-rating {width: 126px;} .section-gallery .gallery-content .right .trust .icon-years {width: 96px;} .section-gallery .gallery-content .right .trust .icon-year {width: 96px;} } @media (max-width: 1600px) { .section-gallery .gallery-content .right .trust .icon-guarantee {margin-right: 5px;} .section-gallery .gallery-content .right .trust .icon-rating {margin-right: 5px;} } @media (max-width: 1200px) { .section-gallery .gallery-content {flex-direction: column; gap: 20px;} .section-gallery .gallery-content .right {width: 100%;} .section-gallery .gallery-content .right .trust {justify-content: space-between;} .section-gallery .gallery-content .right .trust .icon-guarantee {width: 115px; margin-right: 25px;} .section-gallery .gallery-content .right .trust .icon-rating {width: 142px; margin-right: 15px;} .section-gallery .gallery-content .right .trust .icon-years {width: 115px;} .section-gallery .gallery-content .right .trust .icon-year {width: 115px;} .section-gallery .gallery-content .right .trust .icon-year, .section-gallery .gallery-content .right .trust .icon-year + .icon-year {margin-left: -21%;} } @media (max-width: 767px) { .section-gallery .gallery-content .right .trust .icon-guarantee {width: 76px; margin-right: 15px;} .section-gallery .gallery-content .right .trust .icon-rating {width: 95px; margin-right: 15px;} .section-gallery .gallery-content .right .trust .icon-years {width: 77px;} .section-gallery .gallery-content .right .trust .icon-year {width: 77px;} .section-gallery .gallery-content .right .trust .icon-year, .section-gallery .gallery-content .right .trust .icon-year + .icon-year {margin-left: -60px;} .section-gallery .gallery-images {margin: 35px -2px;} .section-gallery .gallery-image {padding: 2px;} .section-gallery .gallery-image .img img {border-radius: 16px;} } /* --- Service section --- */ .section-service {background: var(--grey); padding: 100px 0 50px; overflow: clip visible; letter-spacing: -0.02em;} .section-service .section-columns {display: flex;} .section-service .left {flex-basis: 33%; width: 33%; padding: 8px 50px 0 0;} .section-service .right {flex-basis: 67%; width: 67%;} .section-service .right > h1:first-child, .section-service .right > h2:first-child, .section-service .right > h3:first-child {margin-top: 5px;} .section-service .service-description {margin-bottom: 40px; column-count: 2; column-gap: 80px;} .section-service .service-description p {break-inside: avoid; margin: 0; padding: 8px 0;} .section-service .service-description h1:first-child, .section-service .service-description h2:first-child, .section-service .service-description h3:first-child, .section-service .service-description h4:first-child {margin: 0 0 27px;} .section-service .service-image {margin: 40px 0;} .section-service .service-image img {display: block; width: 100%; height: auto; border-radius: 32px; max-height: 800px; object-fit: cover;} .section-service .range-columns {display: flex; gap: 40px; margin: 50px 0 80px;} .section-service .range-left {flex-basis: calc(50% - 20px); width: calc(50% - 20px); font-weight: 700; font-size: 17px; text-transform: uppercase;} .section-service .range-left p {margin: 0;} .section-service .range-right {flex-basis: calc(50% - 20px); width: calc(50% - 20px);} .section-service .range-right p {margin: 0;} .section-service .range-right ul {padding: 20px 0 0; margin: 0; font-weight: 700; display: flex; flex-wrap: wrap;} .section-service .range-right ul li {display: block; margin: 0; padding: 8px 0 8px 34px; position: relative; min-width: 50%;} .section-service .range-right ul li:before {content: ''; display: block; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='4' fill='%23ffffff'/%3E%3Cpath d='M16.7676 8.63463C16.4582 8.32482 15.9558 8.32501 15.646 8.63463L10.5979 13.683L8.35419 11.4393C8.04438 11.1295 7.54217 11.1295 7.23236 11.4393C6.92255 11.7491 6.92255 12.2513 7.23236 12.5611L10.0368 15.3656C10.1916 15.5204 10.3946 15.598 10.5977 15.598C10.8007 15.598 11.0039 15.5206 11.1587 15.3656L16.7676 9.75644C17.0775 9.44684 17.0775 8.94443 16.7676 8.63463Z' fill='%232F2F2F'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; top: 8px; left: 0;} .section-service .before-after {margin: 50px 0;} .section-service .before-after .h4 {margin: 0 0 40px;} .section-service .before-after .annotation {margin: 30px 0;} .section-service .service-video {margin: 90px 0 40px;} .section-service .service-video .h4 {margin: 0 0 40px;} .section-service .service-video .annotation {margin: 40px 0; column-count: 2; column-gap: 40px;} .section-service .service-video p {break-inside: avoid; margin: 0;} @media (max-width: 1600px) { .section-service {padding: 60px 0;} .section-service .left {flex-basis: 27%; width: 27%;} .section-service .right {flex-basis: 73%; width: 73%;} .section-service .service-image img {max-height: 550px;} } @media (max-width: 1200px) { .section-service .service-description {column-count: 1; margin-top: 30px;} .section-service .range-columns {flex-direction: column; gap: 10px;} .section-service .range-left, .section-service .range-right {flex-basis: auto; width: 100%;} } @media (max-width: 1100px) { .section-service .section-columns {flex-direction: column-reverse; gap: 35px;} .section-service .left, .section-service .right {flex-basis: auto; width: 100%; padding: 0;} } @media (max-width: 767px) { .section-service {padding: 40px 0;} .section-service .section-columns {gap: 10px;} .section-service .service-video {margin: 40px 0 20px;} .section-service .service-video .annotation {column-count: 1; margin: 20px 0;} .section-service .service-video p {margin: 0.7em 0;} .section-service .range-columns {margin: 40px 0;} .section-service .range-right ul {flex-direction: column;} .section-service .service-image img {max-height: 400px;} } /* --- Project --- */ .project-item {position: relative; background: #fff; border-radius: 32px; flex-basis: calc(33.33% - 6px); width: calc(33.33% - 6px); display: flex; flex-direction: column; justify-content: space-between; top: 0; -webkit-transition: box-shadow 0.4s, top 0.2s; transition: box-shadow 0.4s, top 0.2s; text-decoration: none; color: var(--text);} .project-item:hover {box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); top: -3px;} .project-item .img {position: relative; padding-bottom: 100%; width: 100%;} .project-item .img:after {content: ''; position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50%); border-radius: 32px;} .project-item .img img {display: block; position: absolute; width: 100%; height: 100%; object-fit: cover; border-radius: 32px;} .project-item .h6 {position: absolute; font-size: 24px; font-weight: 500; margin: 0; color: #fff; z-index: 2; bottom: 0; left: 0; right: 0; padding: 48px; line-height: 1.35;} @media (max-width: 1600px) { .project-item .img {padding-bottom: 120%;} .project-item .h6 {padding: 32px;} } @media (max-width: 1200px) { .project-item .img {padding-bottom: 140%;} .project-item:hover {box-shadow: none; top: 0;} .project-item .h6 {padding: 28px; font-size: 20px;} } @media (max-width: 890px) { .project-item {flex-basis: auto; width: 100%;} .project-item .img {padding-bottom: 60%;} } @media (max-width: 600px) { .project-item .img {padding-bottom: 80%;} } /* --- Results section --- */ .section-results .results-content {display: flex; gap: 60px; align-items: flex-start;} .section-results .results-content .left {color: var(--text_80);} .section-results .results-content .left p {margin: 0;} .section-results .results-content .left p + p {margin-top: 20px;} .section-results .results-content .right .button {min-width: 180px;} .section-results .project-items {display: flex; gap: 9px; margin-top: 50px; flex-wrap: wrap;} @media (max-width: 1600px) { .section-results .results-content .right .button {min-width: 210px;} } @media (max-width: 1200px) { .section-results .results-content {flex-direction: column; gap: 30px; align-items: flex-start;} } @media (max-width: 890px) { .section-results .project-items {flex-direction: column; } } /* --- Services section --- */ .section-services .services-content {display: flex; gap: 60px; align-items: center;} .section-services .services-content .left {color: var(--text_80); flex-basis: calc(50% - 30px); width: calc(50% - 30px);} .section-services .services-content .left p {margin: 0;} .section-services .services-content .left p + p {margin-top: 20px;} .section-services .services-content .right {flex-basis: calc(50% - 30px); width: calc(50% - 30px);} .section-services .services-items {display: flex; gap: 8px; flex-direction: column; margin-top: 50px;} .section-services .project-items {display: flex; gap: 9px; margin-top: 50px; flex-wrap: wrap;} .service-item-preview {padding: 8px; border-radius: 32px; background: #fff; display: flex;} .service-item-preview .description {position: relative; display: flex; flex-direction: column; justify-content: space-between; flex-basis: 33%; width: 33%; padding: 24px 60px 24px 24px; font-size: 20px; gap: 25px;} .service-item-preview .description .h3 {margin: 0 0 30px; padding: 0;} .service-item-preview .description p {max-width: 420px; margin: 0; padding: 0;} .service-item-preview .description p + p {margin-top: 10px;} .service-item-preview .description .button {min-width: 210px; padding-left: 10px; padding-right: 10px; display: inline-block;} .service-item-preview .images-gallery {flex-basis: 67%; width: 67%;} .service-item-preview .image-roof-type {flex-basis: 67%; width: 67%;} .service-item-preview .image-roof-type img {display: block; width: 100%; height: 400px; object-fit: cover; border-radius: 28px;} @media (max-width: 1600px) { .service-item-preview .description {font-size: 18px;} .service-item-preview .description .h3 {font-size: 35px;} .service-item-preview .images-gallery .image .img {padding-bottom: 150%;} } @media (max-width: 1200px) { .section-services {padding-bottom: 30px;} .service-item-preview {flex-direction: column; gap: 10px;} .service-item-preview .description {padding: 24px; flex-basis: auto; width: 100%;} .service-item-preview .images-gallery {flex-basis: auto; width: 100%;} .service-item-preview .images-gallery .image {flex-basis: calc(33.33% - 6px); width: calc(33.33% - 6px);} .service-item-preview .image-roof-type {flex-basis: auto; width: 100%;} } @media (max-width: 890px) { .section-services .project-items {flex-direction: column; margin-top: 30px;} .service-item-preview .image-roof-type img {height: 300px;} } @media (max-width: 767px) { .section-services {padding-bottom: 10px;} .section-services .services-content {flex-direction: column; gap: 0;} .section-services .services-content .left {flex-basis: auto; width: 100%;} .section-services .services-content .right {flex-basis: auto; width: 100%;} .section-services .services-items {margin-top: 30px;} .service-item-preview .description {padding: 18px; font-size: 17px;} .service-item-preview .description .h3 {font-size: 32px;} .service-item-preview .images-gallery .image {flex-basis: 280px; width: 280px;} .service-item-preview .image-roof-type img {height: 270px;} } @media (max-width: 500px) { .service-item-preview .image-roof-type img {height: 200px;} } /* --- Services section (animated) --- */ .section-services .h2, .section-services .sidetitle, .section-services .services-content, .section-services .services-items {opacity: 0; transform: translateY(30px); -webkit-transition: opacity 0.2s, transform 0.4s; transition: opacity 0.2s, transform 0.4s;} .section-services .services-content {transition-delay: 0.2s;} .section-services .services-items {transition-delay: 0.4s;} .animated.section-services .h2, .animated.section-services .sidetitle, .animated.section-services .services-content, .animated.section-services .services-items {opacity: 1; transform: none;} /* --- Case --- */ .case-description {margin-bottom: 20px; column-count: 2; column-gap: 80px;} .case-description p {break-inside: avoid; margin: 0; padding: 8px 0;} .case-description h1:first-child, .case-description h2:first-child, .case-description h3:first-child, .case-description h4:first-child {margin: 0 0 27px;} .case-details {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px;} .case-details-info {background: #fff; border-radius: 16px; padding: 16px 24px; flex-grow: 1;} .case-details-info p {margin: 0; padding: 0; font-size: 14px; font-weight: 700; text-transform: uppercase; color: rgba(0, 0, 0, 0.6);} .case-details-info strong {display: block; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; margin-top: 10px;} .case-details-info small {font-size: 20px; font-weight: 700; letter-spacing: -0.02em;} .case-image {margin: 10px 0;} .case-image img {display: block; width: 100%; height: auto; border-radius: 32px; max-height: 800px; object-fit: cover;} .case-video-block {margin-top: 8px;} .case-content {margin-top: 40px;} .case-content .h2, .case-content .h3, .case-content .h4, .case-content .h5 {margin-top: 0.7em;} @media (max-width: 1600px) { .case-image img {max-height: 550px;} } @media (max-width: 1200px) { .case-description {column-count: 1; margin-top: 30px;} } @media (max-width: 767px) { .case-details {margin-top: 30px;} .case-details-info {min-width: calc(50% - 4px);} .case-image img {max-height: 400px;} } /* --- Blog section --- */ .section-blog .blog-content {column-count: 2; column-gap: 80px; color: var(--text_80);} .section-blog .blog-content p {break-inside: avoid; margin: 0; padding: 8px 0;} .section-blog .blog-previews {display: flex; margin: 65px -4px 0; flex-wrap: wrap;} .section-blog .blog-preview {flex-basis: 25%; width: 25%;} .section-blog .blog-preview:first-child {flex-basis: 50%; width: 50%;} @media (max-width: 1200px) { .section-blog .blog-content {column-count: 1; margin-top: 30px;} .section-blog .blog-preview {flex-basis: 50%; width: 50%;} .section-blog .blog-preview:first-child {flex-basis: 100%; width: 100%;} } @media (max-width: 767px) { .section-blog {padding-bottom: 40px;} .section-blog .blog-preview {flex-basis: auto; width: 100%;} .section-blog .blog-preview:nth-child(n) {flex-basis: 100%; width: 100%;} } /* --- Pagination --- */ .pagination {display: flex; padding: 80px 0 0; margin: 0 -5px; overflow: hidden; justify-content: center;} .pagination a {background: transparent; height: 72px; line-height: 72px; min-width: 72px; display: flex; align-items: center; text-align: center; text-decoration: none; color: var(--text); margin: 0 3px; border: 1px solid rgba(0, 0, 0, 0.2); font-size: 17px; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; border-radius: 36px; font-weight: 700; justify-content: center;} .pagination a:hover, .pagination a.active {background: #fff; border-color: #000;} .pagination a.prev {margin-right: 60px;} .pagination a.next {margin-left: 60px;} .pagination a svg {display: block; width: 9px; height: 14px; position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -4px;} .pagination a .phint {display: none;} @media (max-width: 767px) { .pagination {margin: 0 -2px;} .pagination a {border-width: 1px; height: 45px; min-width: 45px; line-height: 45px; margin: 0 2px; font-size: 14px;} .pagination a.prev {margin-right: 15px;} .pagination a.next {margin-left: 15px;} } @media (max-width: 500px) { .pagination {padding-top: 40px;} .pagination a:not(.active):not(.prev):not(.next) {display: none;} .pagination a.prev, .pagination a.next {flex-grow: 1;} .pagination a .phint {display: block; text-transform: uppercase;} .pagination a svg {display: block; width: 7px; height: 12px; position: relative; top: auto; left: auto; margin: 0;} .pagination a.prev svg {margin-right: 8px;} .pagination a.next svg {margin-left: 8px;} } /* --- Article section --- */ .section-article {background: var(--grey); padding: 100px 0 50px; overflow: clip visible; letter-spacing: -0.02em;} .section-article .section-columns {display: flex;} .section-article .left {flex-basis: 33%; width: 33%; padding: 8px 50px 0 0;} .section-article .right {flex-basis: 67%; width: 67%;} .section-article .right > h1:first-child, .section-article .right > h2:first-child, .section-article .right > h3:first-child {margin-top: 5px;} .section-article .article-title .date {display: block; color: rgba(0, 0, 0, 0.4); font-size: 17px; margin: 5px 0 22px; padding: 0; font-weight: 700;} .section-article .article-title .h2 {margin: 0 0 25px;} .section-article .article-image {margin: 40px 0;} .section-article .article-image img {display: block; width: 100%; height: auto; border-radius: 32px; max-height: 800px; object-fit: cover;} .section-article .article-content .h2, .section-article .article-content .h3, .section-article .article-content .h4, .section-article .article-content .h5 {margin-top: 1.3em;} @media (max-width: 1600px) { .section-article {padding: 60px 0;} .section-article .left {flex-basis: 27%; width: 27%;} .section-article .right {flex-basis: 73%; width: 73%;} .section-article .article-image img {max-height: 550px;} } @media (max-width: 1100px) { .section-article .section-columns {flex-direction: column-reverse; gap: 35px;} .section-article .left, .section-article .right {flex-basis: auto; width: 100%; padding: 0;} } @media (max-width: 767px) { .section-article {padding: 40px 0;} .section-article .section-columns {gap: 10px;} .section-article .article-image img {max-height: 400px;} } /* --- Contact section --- */ .section-contact .contact-content {display: flex; gap: 80px;} .section-contact .contact-content p {margin: 0;} .section-contact .contact-content p + p {margin-top: 20px;} .section-contact .contact-content .left {color: var(--text_80); flex-basis: calc(50% - 40px); width: calc(50% - 40px);} .section-contact .contact-content .right {color: var(--text_80); flex-basis: calc(50% - 40px); width: calc(50% - 40px);} .section-contact .contact-form {padding-top: 50px;} .section-contact .contact-form textarea {height: 230px;} .section-contact .contact-form .big-form-submit .button {max-width: 50%; margin-left: auto;} .section-contact .contacts-row {display: flex; font-size: 20px; gap: 4px; flex-wrap: wrap; margin-top: 64px;} .section-contact .contact-item {background: #fff; border-radius: 8px; display: flex; gap: 12px; padding: 2px 10px 2px 2px; align-items: center; line-height: 1.5; flex-basis: calc(50% - 2px); width: calc(50% - 2px);} .section-contact .contact-item .icon {background: var(--grey); width: 48px; min-height: 48px; align-self: stretch; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center;} .section-contact .contact-item .icon svg {display: block;} .section-contact .contact-item a {text-decoration: none; color: var(--text); -webkit-transition: all 0.3s; transition: all 0.3s;} .section-contact .contact-item a:hover {color: var(--blue);} .section-contact .contact-item strong {font-weight: 700;} .section-contact .contact-item .label-address {padding: 10px 20px; font-size: 18px;} .section-contact .contact-map {position: relative; height: 340px; position: relative; overflow: hidden; background: #fff; border-radius: 8px; margin-top: 4px;} .section-contact .contact-map iframe {display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; border: none; border-radius: 8px;} .section-contact + .section-help {display: none !important;} @media (max-width: 1200px) { .section-contact .contacts-row {font-size: 18px;} .section-contact .contact-item .label-address {font-size: 16px;} } @media (max-width: 767px) { .section-contact .contact-content {flex-direction: column; gap: 20px;} .section-contact .contact-content .left {flex-basis: auto; width: 100%;} .section-contact .contact-content .right {flex-basis: auto; width: 100%;} } @media (max-width: 570px) { .section-contact .contacts-row {flex-direction: column;} .section-contact .contact-form .big-form-submit .button {max-width: 100%;} .section-contact .contact-item {flex-basis: auto; width: 100%;} } /* --- Page section --- */ .section-page {background: var(--grey); padding: 100px 0 50px; overflow: clip visible; letter-spacing: -0.02em;} .section-page .section-columns {display: flex;} .section-page .left {flex-basis: 33%; width: 33%; padding: 8px 50px 0 0;} .section-page .right {flex-basis: 67%; width: 67%;} .section-page .right > h1:first-child, .section-page .right > h2:first-child, .section-page .right > h3:first-child {margin-top: 5px;} .section-page .page-content .h1, .section-page .page-content .h2, .section-page .page-content .h3, .section-page .page-content .h4, .section-page .page-content .h5 {margin-top: 1.3em;} .section-page .page-content .h1:first-child, .section-page .page-content .h2:first-child, .section-page .page-content .h3:first-child, .section-page .page-content .h4:first-child, .section-page .page-content .h5:first-child {margin-top: 0;} @media (max-width: 1600px) { .section-page {padding: 60px 0;} .section-page .left {flex-basis: 27%; width: 27%;} .section-page .right {flex-basis: 73%; width: 73%;} } @media (max-width: 1100px) { .section-page .section-columns {flex-direction: column-reverse; gap: 35px;} .section-page .left, .section-page .right {flex-basis: auto; width: 100%; padding: 0;} } @media (max-width: 767px) { .section-page {padding: 40px 0;} .section-page .section-columns {gap: 10px;} } /* --- Offer section --- */ .section-offer {background: var(--grey); padding: 100px 0; overflow: clip visible; letter-spacing: -0.02em;} .section-offer .columns {display: flex;} .section-offer .left {flex-basis: 33%; width: 33%; padding-top: 8px; padding-right: 30px;} .section-offer .left .process {max-width: 450px;} .section-offer .left .process .img {border-radius: 20px; position: relative; overflow: visible; -webkit-mask: linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0); flex-shrink: 0; background: #fff;} .section-offer .left .process .img:nth-child(n+2) {margin-top: 8px;} .section-offer .left .process .img img {display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;} .section-offer .left .process .img:after {content: ''; position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(0deg, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 70%);} .section-offer .left .process .img .label {padding: 8px; position: relative; z-index: 2; font-weight: 600; font-size: 24px; display: flex; overflow: hidden; text-overflow: ellipsis; align-items: center; line-height: 1.2;} .section-offer .left .process .img .label strong {min-width: 64px; height: 64px; line-height: 64px; border: 2px solid var(--text); background: #fff; border-radius: 16px; color: var(--text); text-align: center; font-size: 16px;} .section-offer .left .process .img .label p {margin: 0; padding: 5px 16px;} .section-offer .right {flex-basis: 67%; width: 67%;} .section-offer .right .h2 {margin: 0 0 40px;} .section-offer .offer-form {display: none;} .section-offer .offer-form-columns {display: flex; gap: 8px;} .section-offer .offer-form .form-left {flex-basis: calc(61% - 4px); width: calc(61% - 4px); background: #fff; padding: 48px; border-radius: 32px;} .section-offer .offer-form .form-right {flex-basis: calc(39% - 4px); width: calc(39% - 4px); background: #fff; border-radius: 32px; position: relative; overflow: clip visible;} .section-offer .offer-form .roof-map {overflow: hidden; border-radius: 24px; height: 100%;} .section-offer .offer-form .roof-map iframe {width: 100%; height: 100%; border: none;} .section-offer .offer-form .roof-map .map {width: 100%; height: 100%; border: none;} .section-offer .offer-form .offer-annotation {margin: 30px 0; font-size: 14px; color: rgba(0, 0, 0, 0.8);} .section-offer .offer-form input[type="text"], .section-offer .offer-form input[type="email"], .section-offer .offer-form input[type="tel"], .section-offer .offer-form input[type="number"], .section-offer .offer-form select {background: var(--grey);} .section-offer .offer-form select {-webkit-appearance: none; -moz-appearance: none; appearance: none; font-weight: 600;} .section-offer .offer-form .form-select {position: relative;} .section-offer .offer-form .form-select svg {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); fill: #000; pointer-events: none; -webkit-transition: all 0.2s; transition: all 0.2s; pointer-events: none;} .section-offer .offer-form textarea {height: 160px; background: var(--grey);} .section-offer .offer-form .offer-form-row {display: flex; gap: 8px; flex-wrap: wrap;} .section-offer .offer-form .offer-form-col {flex-basis: calc(50% - 4px); width: calc(50% - 4px);} .section-offer .offer-form .offer-form-col-full {flex-basis: 100%; width: 100%;} .section-offer .offer-form .offer-form-submit {display: flex; flex-basis: 100%; width: 100%; padding-top: 20px; gap: 8px;} .section-offer .offer-form .offer-form-submit .button {display: block; width: 100%; flex-grow: 1;} .section-offer .offer-form .form-checksquares {display: flex; background: var(--grey); border-radius: 20px; padding: 0 2px;} .section-offer .offer-form .form-checksquares-item {padding: 4px 2px; flex-grow: 1;} .section-offer .offer-form .form-checksquares-item label {position: relative; display: block; text-align: center; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);} .section-offer .offer-form .form-checksquares-item label span {display: block; color: var(--text); background: transparent; font-weight: 600; font-size: 14px; border-radius: 16px; padding: 12px 10px; cursor: pointer; -webkit-transition: all 0.2s; transition: all 0.2s; text-transform: uppercase; letter-spacing: 0;} .section-offer .offer-form .form-checksquares-item label input {position: absolute; visibility: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);} .section-offer .offer-form .form-checksquares-item label:hover span {background: rgba(0, 0, 0, 0.2);} .section-offer .offer-form .form-checksquares-item label input:checked + span {background: var(--text); color: #fff;} .section-offer .offer-form .form-checksquares-item label input.error + span {background: #E92434; color: #fff;} .section-offer .offer-form .demo-map {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;} .section-offer .offer-form .offer-form-information {background: #fff; padding: 48px; border-radius: 32px;} .section-offer .offer-form .offer-form-information .info {display: flex; font-size: 14px; margin: 0 0 35px; align-items: center;} .section-offer .offer-form .offer-form-information .info p {margin: 0;} .section-offer .offer-form .offer-form-information .info-left {flex-basis: 40%; width: 40%; padding-right: 40px;} .section-offer .offer-form .offer-form-information .info-right {flex-basis: 60%; width: 60%; color: rgba(0, 0, 0, 0.8);} .section-offer .offer-form .offer-form-information .offer-form-submit {padding-top: 0;} .section-offer .offer-form .offer-label {display: block; font-size: 14px; font-weight: 700; text-transform: uppercase; margin: 0 0 10px;} .section-offer .offer-form .form-checkimages {margin: 30px 0;} .section-offer .offer-form .form-checkimages .offer-label {font-size: 17px;} .section-offer .offer-form .form-checkimages-items {display: flex; margin: 0 -4px;} .section-offer .offer-form .form-checkimages-item {padding: 4px; flex-grow: 1;} .section-offer .offer-form .form-checkimages-item label {position: relative; display: block; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); height: 100%;} .section-offer .offer-form .form-checkimages-item label span {display: flex; justify-content: space-between; flex-direction: column; color: var(--text); font-size: 16px; border-radius: 16px; padding: 12px 10px; cursor: pointer; -webkit-transition: all 0.2s; transition: all 0.2s; border: 3px solid var(--grey); padding: 25px 10px 10px; background: var(--grey); border-radius: 20px; height: 100%;} .section-offer .offer-form .form-checkimages-item label span img {display: block; height: 135px; width: auto; margin: 0 auto; object-fit: contain;} .section-offer .offer-form .form-checkimages-item label span i {display: block; font-style: normal; padding: 23px 58px 7px 13px;} .section-offer .offer-form .form-checkimages-item label span:before {content: ''; display: block; position: absolute; bottom: 8px; right: 8px; background-color: #fff; border-radius: 16px; width: 48px; height: 48px; background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 24.3846L21.4211 29L31 19' stroke-width='2' stroke-linecap='round' stroke='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center center; background-size: contain;} .section-offer .offer-form .form-checkimages-item label input {position: absolute; visibility: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);} .section-offer .offer-form .form-checkimages-item label:hover span {border-color: rgba(0, 0, 0, 0.2);} .section-offer .offer-form .form-checkimages-item label input:checked + span {background: #fff; border-color: var(--text);} .section-offer .offer-form .form-checkimages-item label input:checked + span:before {background-color: var(--text);} .section-offer .offer-form .form-checkimages-item label input.error + span {border-color: #E92434;} .section-offer .offer-form .form-checkimages-3cols .form-checkimages-items {flex-wrap: wrap;} .section-offer .offer-form .form-checkimages-3cols .form-checkimages-item {flex-basis: 33.33%; width: 33.33%;} .section-offer .offer-form .offer-fields-columns {display: flex; margin: 20px -5px; align-items: flex-end;} .section-offer .offer-form .offer-fields-column {flex-basis: 33.33%; width: 33.33%; padding: 0 5px 10px;} .section-offer .offer-form .offer-fields-column-number {flex-basis: 144px; width: 144px; padding: 0 5px 10px;} .section-offer .offer-form .offer-fields-column-select {flex-basis: calc(50% - 144px); width: calc(50% - 144px); padding: 0 5px 10px;} .section-offer .offer-form .offer-fields-column-file {flex-basis: calc(50% - 144px); width: calc(50% - 144px); padding: 0 5px 10px;} .section-offer .offer-form .form-checkboxes {display: flex; background: var(--grey); border-radius: 20px; padding: 0 4px;} .section-offer .offer-form .form-checkboxes-item {padding: 8px 4px; flex-grow: 1;} .section-offer .offer-form .form-checkboxes-item label {position: relative; display: block; text-align: center; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);} .section-offer .offer-form .form-checkboxes-item label span {display: block; color: var(--text); background: transparent; font-weight: 600; font-size: 15px; border-radius: 16px; padding: 13px 10px 12px; cursor: pointer; -webkit-transition: all 0.2s; transition: all 0.2s; letter-spacing: 0; min-height: 48px;} .section-offer .offer-form .form-checkboxes-item label input {position: absolute; visibility: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);} .section-offer .offer-form .form-checkboxes-item label:hover span {background: rgba(0, 0, 0, 0.2);} .section-offer .offer-form .form-checkboxes-item label input:checked + span {background: var(--text); color: #fff;} .section-offer .offer-form .form-checkboxes-item label input.error + span {background: #E92434; color: #fff;} .section-offer .offer-form .offer-form-before-submit {margin: 30px 0; font-size: 14px; color: rgba(0, 0, 0, 0.8);} .section-offer .offer-form .increase-buttons {background: var(--grey); border-radius: 20px; display: flex; justify-content: space-between; align-items: center; -webkit-transition: all 0.3s; transition: all 0.3s;} .section-offer .offer-form .increase-buttons a {display: block; text-decoration: none; border-radius: 40px; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; color: var(--text);} .section-offer .offer-form .increase-buttons a:hover {opacity: 0.8;} .section-offer .offer-form .increase-buttons a:active {opacity: 1; -webkit-transition: opacity 0s; transition: opacity 0s;} .section-offer .offer-form .increase-buttons a svg {width: 32px; height: 100%; display: block;} .section-offer .offer-form .increase-buttons input {font-weight: 600; position: relative; text-align: center; border: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; outline: none; background: #fff; border-radius: 20px; width: calc(100% - 64px); height: 58px; margin: 2px; padding: 0 3px;} .offer-form-error {display: none; background: #F40C44; margin-top: 10px; color: #fff; padding: 20px 20px; font-size: 14px; border-radius: 12px; width: 100%;} @media (max-width: 1600px) { .section-offer {padding: 60px 0;} .section-offer .left {flex-basis: 26%; width: 26%;} .section-offer .right {flex-basis: 74%; width: 74%;} .section-offer .offer-form .form-left {flex-basis: calc(56% - 4px); width: calc(56% - 4px);} .section-offer .offer-form .form-right {flex-basis: calc(44% - 4px); width: calc(44% - 4px);} .section-offer .left .process .img .label {font-size: 21px;} .section-offer .offer-form .form-checkimages-item label span img {height: 97px;} .section-offer .offer-form .form-checkimages-item label span:before {width: 42px; height: 42px;} .section-offer .offer-form .form-checkimages-item label span i {padding: 23px 52px 6px 10px;} .section-offer .offer-form .offer-form-information .info-left {flex-basis: 45%; width: 45%; padding-right: 30px;} .section-offer .offer-form .offer-form-information .info-right {flex-basis: 55%; width: 55%;} .section-offer .offer-form .offer-label .br {display: block;} } @media (max-width: 1200px) { .section-offer .columns {display: block;} .section-offer .left {flex-basis: auto; width: 100%; display: none;} .section-offer .right {flex-basis: auto; width: 100%} .section-offer .offer-form .form-left {padding: 32px;} .section-offer .offer-form .offer-form-information {padding: 32px;} .section-offer .offer-form .offer-form-information .info-left .h4 {font-size: 32px;} } @media (max-width: 890px) { .section-offer .offer-form .offer-form-information .info-left {flex-basis: 50%; width: 50%; padding-right: 20px;} .section-offer .offer-form .offer-form-information .info-right {flex-basis: 50%; width: 50%;} .section-offer .offer-form .form-checkimages-items {flex-wrap: wrap;} .section-offer .offer-form .form-checkimages-item {flex-grow: 0; flex-basis: 50%; width: 50%;} .section-offer .offer-form .form-checkimages-3cols .form-checkimages-item {flex-basis: 50%; width: 50%;} .section-offer .offer-form .offer-fields-columns {flex-wrap: wrap; gap: 20px 0;} .section-offer .offer-form .offer-fields-column {flex-basis: 50%; width: 50%;} .section-offer .offer-form .offer-label .br {display: none;} .section-offer .offer-form .offer-fields-column-select {flex-basis: calc(100% - 288px); width: calc(100% - 288px);} .section-offer .offer-form .offer-fields-column-file {flex-basis: 100%; width: 100%;} } @media (max-width: 767px) { .section-offer {padding: 40px 0;} .section-offer .columns {flex-direction: column; gap: 35px;} .section-offer .left {flex-basis: auto; width: 100%;} .section-offer .right {flex-basis: auto; width: 100%;} .section-offer .offer-form-columns {flex-direction: column;} .section-offer .offer-form .offer-form-row {gap: 12px;} .section-offer .offer-form .offer-form-col {flex-basis: 100%; width: 100%;} .section-offer .offer-form input[type="text"], .section-offer .offer-form input[type="email"], .section-offer .offer-form input[type="tel"], .section-offer .offer-form input[type="number"] {padding: 0 24px;} .section-offer .offer-form {flex-direction: column;} .section-offer .offer-form .form-left {flex-basis: auto; width: 100%;} .section-offer .offer-form .form-right {flex-basis: auto; width: 100%; height: 295px;} .section-offer .offer-form .form-left {padding: 24px;} .section-offer .offer-form .offer-form-submit {padding-top: 10px;} .section-offer .offer-form .offer-form-information {padding: 24px;} .section-offer .offer-form .offer-form-information .info {flex-direction: column; gap: 15px;} .section-offer .offer-form .offer-form-information .info-left {flex-basis: auto; width: 100%; padding-right: 0;} .section-offer .offer-form .offer-form-information .info-right {flex-basis: auto; width: 100%;} .section-offer .offer-form .form-checkimages-item label span i {padding: 30px 52px 6px 4px;} .section-offer .offer-form .offer-fields-column {flex-basis: 100%; width: 100%;} .section-offer .offer-form .offer-fields-column-select {flex-basis: 100%; width: 100%;} .section-offer .offer-form .offer-fields-column-number {flex-basis: 50%; width: 50%;} .section-offer .offer-form .offer-annotation {margin: 30px 10px;} } @media (max-width: 550px) { .section-offer .offer-form .offer-form-information {padding: 24px 18px;} .section-offer .offer-form .offer-form-information .offer-form-submit {flex-direction: column;} } /* --- Offer section steps --- */ [data-step="1"] .left .process .img:nth-child(1), [data-step="2"] .left .process .img:nth-child(2) {background: none;} [data-step="1"] .left .process .img:nth-child(1) img, [data-step="2"] .left .process .img:nth-child(2) img {display: block;} [data-step="1"] .left .process .img:nth-child(1), [data-step="2"] .left .process .img:nth-child(2) {padding-top: 35.5%;} [data-step="1"] .left .process .img:nth-child(1) .label strong, [data-step="2"] .left .process .img:nth-child(2) .label strong {color: #fff; background: var(--text);} [data-step="1"] [data-fields-step="1"], [data-step="2"] [data-fields-step="2"] {display: block;} /* --- Offer success --- */ .section-success {background: var(--grey); padding: 60px 0; overflow: clip visible; letter-spacing: -0.02em; text-align: center;} .section-success .images-gallery {gap: 9px; margin-top: 40px;} .section-success .images-gallery .image {flex-basis: calc(25% - 7px); width: calc(25% - 7px);} @media (max-width: 767px) { .section-success .images-gallery {flex-wrap: wrap; gap: 8px; margin-top: 20px;} .section-success .images-gallery .image {flex-basis: calc(50% - 4px); width: calc(50% - 4px);} } /* --- Google address autocomplete --- */ .google-address-field {position: relative;} .google-address-field:focus-within {z-index: 50;} .google-address-suggestions {position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1000; max-height: 320px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 8px; color: var(--text); background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 20px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18); text-align: left; -webkit-overflow-scrolling: touch;} .google-address-suggestions[hidden] {display: none;} .google-address-field .google-address-suggestions .google-address-suggestion {all: unset; display: block; width: 100%; box-sizing: border-box; padding: 12px 16px; color: var(--text); background: transparent; border-radius: 12px; font: 400 14px/1.4 'Manrope', sans-serif; text-align: left; white-space: normal; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;} .google-address-field .google-address-suggestions .google-address-suggestion:hover, .google-address-field .google-address-suggestions .google-address-suggestion:focus, .google-address-field .google-address-suggestions .google-address-suggestion.active {color: var(--text); background: rgba(94, 124, 226, 0.12);} .google-address-suggestions::-webkit-scrollbar {width: 8px;} .google-address-suggestions::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.2); border: 2px solid #fff; border-radius: 8px;} @media (max-width: 767px) { .google-address-suggestions {top: calc(100% + 6px); max-height: 280px; padding: 6px; border-radius: 16px;} .google-address-field .google-address-suggestions .google-address-suggestion {padding: 11px 12px; font-size: 14px;} }