@charset "UTF-8"; .splide__container { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } .splide__list { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: -ms-flexbox; display: -webkit-box; display: flex; height: 100%; margin: 0 !important; padding: 0 !important; } .splide.is-initialized:not(.is-active) .splide__list { display: block; } .splide__pagination { -ms-flex-align: center; -webkit-box-align: center; align-items: center; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; margin: 0; pointer-events: none; } .splide__pagination li { display: inline-block; line-height: 1; list-style-type: none; margin: 0; pointer-events: auto; } .splide:not(.is-overflow) .splide__pagination { display: none; } .splide__progress__bar { width: 0; } .splide { position: relative; visibility: hidden; } .splide.is-initialized, .splide.is-rendered { visibility: visible; } .splide__slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; list-style-type: none !important; margin: 0; position: relative; } .splide__slide img { vertical-align: bottom; } .splide__spinner { -webkit-animation: splide-loading 1s linear infinite; animation: splide-loading 1s linear infinite; border: 2px solid #999; border-left-color: transparent; border-radius: 50%; bottom: 0; contain: strict; display: inline-block; height: 20px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 20px; } .splide__sr { clip: rect(0 0 0 0); border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause { display: none; } .splide__toggle.is-active .splide__toggle__pause { display: inline; } .splide__track { overflow: hidden; position: relative; z-index: 0; } @-webkit-keyframes splide-loading { 0% { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } @keyframes splide-loading { 0% { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } .splide__track--draggable { -webkit-touch-callout: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none; } .splide__track--fade > .splide__list > .splide__slide { margin: 0 !important; opacity: 0; z-index: 0; } .splide__track--fade > .splide__list > .splide__slide.is-active { opacity: 1; z-index: 1; } .splide--rtl { direction: rtl; } .splide__track--ttb > .splide__list { display: block; } .splide__arrow { -ms-flex-align: center; -webkit-box-align: center; align-items: center; background: #ccc; border: 0; border-radius: 50%; cursor: pointer; display: -ms-flexbox; display: -webkit-box; display: flex; height: 2em; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; opacity: 0.7; padding: 0; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 2em; z-index: 1; } .splide__arrow svg { fill: #000; height: 1.2em; width: 1.2em; } .splide__arrow:hover:not(:disabled) { opacity: 0.9; } .splide__arrow:disabled { opacity: 0.3; } .splide__arrow:focus-visible { outline: 3px solid #0bf; outline-offset: 3px; } .splide__arrow--prev { left: 1em; } .splide__arrow--prev svg { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } .splide__arrow--next { right: 1em; } .splide.is-focus-in .splide__arrow:focus { outline: 3px solid #0bf; outline-offset: 3px; } .splide__pagination { bottom: 0.5em; left: 0; padding: 0 1em; position: absolute; right: 0; z-index: 1; } .splide__pagination__page { background: #ccc; border: 0; border-radius: 50%; display: inline-block; height: 8px; margin: 3px; opacity: 0.7; padding: 0; position: relative; -webkit-transition: -webkit-transform 0.2s linear; transition: -webkit-transform 0.2s linear; -o-transition: transform 0.2s linear; transition: transform 0.2s linear; transition: transform 0.2s linear, -webkit-transform 0.2s linear; width: 8px; } .splide__pagination__page.is-active { background: #fff; -webkit-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4); z-index: 1; } .splide__pagination__page:hover { cursor: pointer; opacity: 0.9; } .splide__pagination__page:focus-visible { outline: 3px solid #0bf; outline-offset: 3px; } .splide.is-focus-in .splide__pagination__page:focus { outline: 3px solid #0bf; outline-offset: 3px; } .splide__progress__bar { background: #ccc; height: 3px; } .splide__slide { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .splide__slide:focus { outline: 0; } @supports (outline-offset: -3px) { .splide__slide:focus-visible { outline: 3px solid #0bf; outline-offset: -3px; } } @media screen and (-ms-high-contrast: none) { .splide__slide:focus-visible { border: 3px solid #0bf; } } @supports (outline-offset: -3px) { .splide.is-focus-in .splide__slide:focus { outline: 3px solid #0bf; outline-offset: -3px; } } @media screen and (-ms-high-contrast: none) { .splide.is-focus-in .splide__slide:focus { border: 3px solid #0bf; } .splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus { border-color: #0bf; } } .splide__toggle { cursor: pointer; } .splide__toggle:focus-visible { outline: 3px solid #0bf; outline-offset: 3px; } .splide.is-focus-in .splide__toggle:focus { outline: 3px solid #0bf; outline-offset: 3px; } .splide__track--nav > .splide__list > .splide__slide { border: 3px solid transparent; cursor: pointer; } .splide__track--nav > .splide__list > .splide__slide.is-active { border: 3px solid #000; } .splide__arrows--rtl .splide__arrow--prev { left: auto; right: 1em; } .splide__arrows--rtl .splide__arrow--prev svg { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .splide__arrows--rtl .splide__arrow--next { left: 1em; right: auto; } .splide__arrows--rtl .splide__arrow--next svg { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } .splide__arrows--ttb .splide__arrow { left: 50%; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); } .splide__arrows--ttb .splide__arrow--prev { top: 1em; } .splide__arrows--ttb .splide__arrow--prev svg { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .splide__arrows--ttb .splide__arrow--next { bottom: 1em; top: auto; } .splide__arrows--ttb .splide__arrow--next svg { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .splide__pagination--ttb { bottom: 0; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; left: auto; padding: 1em 0; right: 0.5em; top: 0; } :root { --header-h: clamp(40px, 1.8814rem + 3.0928vi, 70px); --max-container: 1290px; --p-i: 20px; --ff-prim: "Montserrat", system-ui, sans-serif; --fz-base: clamp(15px, 0.9169rem + 0.1031vi, 16px); --fz-s: 14px; --fw-l: 300; --fw-r: 400; --fw-m: 500; --fw-b: 700; --lh-base: clamp(1.25rem, calc(1.17rem + 0.41vw), 1.50rem); --lh-s: 1.4; --clr-accent: #20A85A; --clr-hover: #8BD5AB; --clr-pressed: #0A8840; --clr-bg: #fff; --clr-bg-2: #DCEAE2; --clr-bg-3: #F6FBF8; --clr-bg-footer: #124126; --clr-text: #072C17; --clr-text-2: #6C8778; --clr-text-input: #BFBFBF; --clr-border: #DFDFDF; --clr-err: #FB5353; --clr-white: #fff; --clr-water: hsl(186 84% 85% / 1); --tr: .3s ease-in-out; --br: 45px; } *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, li, button { margin: 0; } ul, ol { padding: 0; list-style: none; } html { scroll-behavior: smooth; } body { min-height: 100vh; text-rendering: optimizeSpeed; } a { text-decoration: none; } a:not([class]) { -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } img { width: 100%; display: block; -o-object-fit: cover; object-fit: cover; } input, button, textarea, select { font: inherit; } input:focus, button:focus, textarea:focus, select:focus { outline: none !important; } button { padding: 0; margin: 0; border: none; background-color: transparent; cursor: pointer; } button, a, label > input[type=checkbox], [role=button] { cursor: pointer; } @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { -webkit-animation-duration: 0.01ms !important; animation-duration: 0.01ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; -webkit-transition-duration: 0.01ms !important; -o-transition-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @font-face { font-family: "Montserrat"; src: url("../fonts/MontserratLight.woff2") format("woff2"); font-weight: 300; font-display: swap; font-style: normal; } @font-face { font-family: "Montserrat"; src: url("../fonts/MontserratRegular.woff2") format("woff2"); font-weight: 400; font-display: swap; font-style: normal; } @font-face { font-family: "Montserrat"; src: url("../fonts/MontserratMedium.woff2") format("woff2"); font-weight: 500; font-display: swap; font-style: normal; } @font-face { font-family: "Montserrat"; src: url("../fonts/MontserratBold.woff2") format("woff2"); font-weight: 700; font-display: swap; font-style: normal; } @font-face { font-family: "Font BearLogics Awesome"; src: url("../fonts/bearlogics-awesome.woff2") format("woff2"); font-weight: 400; font-display: swap; font-style: normal; } h1, h2, h3 { font-weight: var(--fw-r); text-transform: uppercase; } h1, .h1 { font-size: clamp(23px, 1.0045rem + 2.1649vi, 44px); line-height: 1.3; } h2, .h2 { -webkit-margin-after: 10px; margin-block-end: 10px; font-size: clamp(22px, 1.0863rem + 1.4433vi, 36px); line-height: 1.3; text-transform: uppercase; } h2 span, .h2 span { color: var(--clr-accent); } h3, .h3 { font-size: clamp(18px, 1.025rem + 0.5vi, 26px); line-height: 1.4; text-transform: uppercase; } h4, .h4 { font-size: clamp(18px, 1.0838rem + 0.2062vi, 20px); font-weight: var(--fw-m); line-height: 1.5; text-transform: uppercase; } h5, .h5 { font-size: clamp(16px, 0.9588rem + 0.2062vi, 18px); font-weight: var(--fw-m); line-height: 1.5; text-transform: uppercase; } .subtitle { -webkit-margin-after: 20px; margin-block-end: 20px; font-size: clamp(16px, 0.95rem + 0.25vi, 20px); line-height: 1.4; } .ba-icon-73:before { content: "\e073"; font-size: clamp(22px, 1.1688rem + 1.0309vi, 32px); } .ba-icon-1:before { content: "\e001"; } .ba-icon-2:before { content: "\e002"; } .ba-icon-3:before { content: "\e003"; } .ba-icon-4:before { content: "\e004"; } .ba-icon-5:before { content: "\e005"; } .ba-icon-6:before { content: "\e006"; } .ba-icon-7:before { content: "\e007"; } .ba-icon-8:before { content: "\e008"; } .ba-icon-9:before { content: "\e009"; } .ba-icon-10:before { content: "\e010"; } .ba-icon-11:before { content: "\e011"; } .ba-icon-12:before { content: "\e012"; } .ba-icon-13:before { content: "\e013"; } .ba-icon-14:before { content: "\e014"; } .ba-icon-15:before { content: "\e015"; } .ba-icon-16:before { content: "\e016"; } .ba-icon-17:before { content: "\e017"; } .ba-icon-18:before { content: "\e018"; } .ba-icon-19:before { content: "\e019"; } .ba-icon-20:before { content: "\e020"; } .ba-icon-21:before { content: "\e021"; } .ba-icon-22:before { content: "\e022"; } .ba-icon-23:before { content: "\e023"; } .ba-icon-24:before { content: "\e024"; } .ba-icon-25:before { content: "\e025"; } .ba-icon-26:before { content: "\e026"; } .ba-icon-27:before { content: "\e027"; } .ba-icon-28:before { content: "\e028"; } .ba-icon-29:before { content: "\e029"; } .ba-icon-30:before { content: "\e030"; } .ba-icon-31:before { content: "\e031"; } .ba-icon-32:before { content: "\e032"; } .ba-icon-33:before { content: "\e033"; } .ba-icon-34:before { content: "\e034"; } .ba-icon-35:before { content: "\e035"; } .ba-icon-36:before { content: "\e036"; } .ba-icon-37:before { content: "\e037"; } .ba-icon-38:before { content: "\e038"; } .ba-icon-39:before { content: "\e039"; } .ba-icon-40:before { content: "\e040"; } .ba-icon-41:before { content: "\e041"; } .ba-icon-42:before { content: "\e042"; } .ba-icon-43:before { content: "\e043"; } .ba-icon-44:before { content: "\e044"; } .ba-icon-45:before { content: "\e045"; } .ba-icon-46:before { content: "\e046"; } .ba-icon-47:before { content: "\e047"; } .ba-icon-48:before { content: "\e048"; } .ba-icon-49:before { content: "\e049"; } .ba-icon-50:before { content: "\e050"; } .ba-icon-51:before { content: "\e051"; } .ba-icon-52:before { content: "\e052"; } .ba-icon-53:before { content: "\e053"; } .ba-icon-54:before { content: "\e054"; } .ba-icon-55:before { content: "\e055"; } .ba-icon-56:before { content: "\e056"; } .ba-icon-57:before { content: "\e057"; } .ba-icon-58:before { content: "\e058"; } .ba-icon-59:before { content: "\e059"; } .ba-icon-60:before { content: "\e060"; } .ba-icon-61:before { content: "\e061"; } .ba-icon-62:before { content: "\e062"; } .ba-icon-63:before { content: "\e063"; } .ba-icon-64:before { content: "\e064"; } .ba-icon-65:before { content: "\e065"; } .ba-icon-66:before { content: "\e066"; } .ba-icon-67:before { content: "\e067"; } .ba-icon-68:before { content: "\e068"; } .ba-icon-69:before { content: "\e069"; } .ba-icon-70:before { content: "\e070"; } .ba-icon-71:before { content: "\e071"; } .ba-icon-72:before { content: "\e072"; } .ba-icon-73:before { content: "\e073"; } .ba-icon-74:before { content: "\e074"; } .ba-icon-75:before { content: "\e075"; } .ba-icon-76:before { content: "\e076"; } .ba-icon-77:before { content: "\e077"; } .ba-icon-78:before { content: "\e078"; } .ba-icon-79:before { content: "\e079"; } .ba-icon-80:before { content: "\e080"; } .ba-icon-81:before { content: "\e081"; } .ba-icon-82:before { content: "\e082"; } .ba-icon-83:before { content: "\e083"; } .ba-icon-84:before { content: "\e084"; } .ba-icon-85:before { content: "\e085"; } .ba-icon-86:before { content: "\e086"; } .ba-icon-87:before { content: "\e087"; } .ba-icon-88:before { content: "\e088"; } .ba-icon-89:before { content: "\e089"; } .ba-icon-90:before { content: "\e090"; } .ba-icon-91:before { content: "\e091"; } .ba-icon-92:before { content: "\e092"; } .ba-icon-93:before { content: "\e093"; } .ba-icon-94:before { content: "\e094"; } .ba-icon-95:before { content: "\e095"; } .ba-icon-96:before { content: "\e096"; } .ba-icon-97:before { content: "\e097"; } .ba-icon-98:before { content: "\e098"; } .ba-icon-99:before { content: "\e099"; } .ba-icon-100:before { content: "\e100"; } .ba-icon-101:before { content: "\e101"; } .ba-icon-102:before { content: "\e102"; } .ba-icon-103:before { content: "\e103"; } .ba-icon-104:before { content: "\e104"; } .ba-icon-105:before { content: "\e105"; } .ba-icon-106:before { content: "\e106"; } .ba-icon-107:before { content: "\e107"; } .ba-icon-108:before { content: "\e108"; } .ba-icon-109:before { content: "\e109"; } .ba-icon-110:before { content: "\e110"; } .ba-icon-111:before { content: "\e111"; } .ba-icon-112:before { content: "\e112"; } .ba-icon-113:before { content: "\e113"; } .ba-icon-114:before { content: "\e114"; } .ba-icon-115:before { content: "\e115"; } .ba-icon-116:before { content: "\e116"; } .ba-icon-117:before { content: "\e117"; } .ba-icon-118:before { content: "\e118"; } .ba-icon-119:before { content: "\e119"; } .ba-icon-120:before { content: "\e120"; } .ba-icon-121:before { content: "\e121"; } .ba-icon-122:before { content: "\e122"; } .ba-icon-123:before { content: "\e123"; } .ba-icon-124:before { content: "\e124"; } .ba-icon-125:before { content: "\e125"; } .ba-icon-126:before { content: "\e126"; } .ba-icon-127:before { content: "\e127"; } .ba-icon-128:before { content: "\e128"; } .ba-icon-129:before { content: "\e139"; } .ba-icon-130:before { content: "\e130"; } .ba-icon-131:before { content: "\e131"; } .ba-icon-132:before { content: "\e132"; } .ba-icon-133:before { content: "\e133"; } .ba-icon-134:before { content: "\e134"; } .ba-icon-135:before { content: "\e135"; } .ba-icon-136:before { content: "\e136"; } .ba-icon-137:before { content: "\e137"; } .ba-icon-138:before { content: "\e138"; } .ba-icon-139:before { content: "\e139"; } .ba-icon-140:before { content: "\e140"; } .ba-icon-141:before { content: "\e141"; } .ba-icon-142:before { content: "\e142"; } .ba-icon-143:before { content: "\e143"; } .ba-icon-144:before { content: "\e144"; } .ba-icon-145:before { content: "\e145"; } .ba-icon-146:before { content: "\e146"; } .ba-icon-147:before { content: "\e147"; } .ba-icon-148:before { content: "\e148"; } .ba-icon-149:before { content: "\e149"; } .ba-icon-150:before { content: "\e150"; } body { font-family: var(--ff-prim); font-size: var(--fz-base); font-weight: var(--fw-r); line-height: var(--lh-base); color: var(--clr-text); background-color: var(--clr-bg-3); } main { -webkit-margin-before: calc(clamp(40px, 1.2629rem + 6.1856vi, 100px) + var(--header-h)); margin-block-start: calc(clamp(40px, 1.2629rem + 6.1856vi, 100px) + var(--header-h)); position: relative; z-index: 1; } .main-case { -webkit-margin-before: calc(40px + var(--header-h)); margin-block-start: calc(40px + var(--header-h)); } .main-home { -webkit-margin-before: unset; margin-block-start: unset; } .container_ { display: -ms-grid; display: grid; -ms-grid-columns: [full-start] 1fr var(--p-i) [content-start] minmax(0px, 1290px) [content-end] var(--p-i) 1fr [full-end]; grid-template-columns: [full-start] 1fr var(--p-i) [content-start] minmax(0px, 1290px) [content-end] var(--p-i) 1fr [full-end]; } .container_ > .full { grid-column: full; } .container_ > * { grid-column: content; } .auto-grid { --min-w: 250px; --max-w: 1fr; --c-g: 1.25rem; --r-g: 1.25rem; display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--min-w), 100%), var(--max-w))); -webkit-column-gap: var(--c-g); -moz-column-gap: var(--c-g); column-gap: var(--c-g); row-gap: var(--r-g); } section { -webkit-margin-after: clamp(60px, 3.25rem + 2.5vi, 100px); margin-block-end: clamp(60px, 3.25rem + 2.5vi, 100px); } .page-title { -webkit-margin-after: 20px; margin-block-end: 20px; } .p-0 { padding: 0 0 0 0; } .m-0 { margin: 0; } .mi { margin-inline: var(--mi); } .mbe-5 { -webkit-margin-after: 5px; margin-block-end: 5px; } .mbe-20 { -webkit-margin-after: 20px; margin-block-end: 20px; } .mbe-30 { -webkit-margin-after: clamp(20px, 1.0438rem + 1.0309vi, 30px); margin-block-end: clamp(20px, 1.0438rem + 1.0309vi, 30px); } .mbe-40 { -webkit-margin-after: clamp(20px, 0.8376rem + 2.0619vi, 40px); margin-block-end: clamp(20px, 0.8376rem + 2.0619vi, 40px); } .mbe-50 { -webkit-margin-after: clamp(20px, 0.6314rem + 3.0928vi, 50px); margin-block-end: clamp(20px, 0.6314rem + 3.0928vi, 50px); } .mbe-60 { -webkit-margin-after: clamp(30px, 1.2564rem + 3.0928vi, 60px); margin-block-end: clamp(30px, 1.2564rem + 3.0928vi, 60px); } .mbe-80 { -webkit-margin-after: clamp(40px, 1.6753rem + 4.1237vi, 80px); margin-block-end: clamp(40px, 1.6753rem + 4.1237vi, 80px); } .mbe-100 { -webkit-margin-after: clamp(40px, 1.2629rem + 6.1856vi, 100px); margin-block-end: clamp(40px, 1.2629rem + 6.1856vi, 100px); } .clr-accent { color: var(--clr-accent); } .bg-white { background-color: var(--clr-bg) !important; } .uc { text-transform: uppercase; } .fixed { overflow-y: hidden; } .visually-hidden { position: fixed; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .ba { font-family: "Font BearLogics Awesome"; font-size: 22px; font-style: normal; font-weight: 400; color: currentColor; } .more-block { display: -ms-grid; display: grid; -webkit-margin-after: 80px; margin-block-end: 80px; } .more-block .btn { -ms-grid-column-align: center; justify-self: center; } @-webkit-keyframes arrow-btn { 100% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes arrow-btn { 100% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @-webkit-keyframes arrow-btn-svg { 100% { -webkit-transform: translateX(10px) rotate(180deg); transform: translateX(10px) rotate(180deg); } } @keyframes arrow-btn-svg { 100% { -webkit-transform: translateX(10px) rotate(180deg); transform: translateX(10px) rotate(180deg); } } .sl-overlay { background-color: #000; } .btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 10px; block-size: clamp(45px, 2.5032rem + 1.5464vi, 60px); padding-inline: clamp(20px, 1.0438rem + 1.0309vi, 30px); font-size: clamp(12px, 0.6675rem + 0.4124vi, 16px); line-height: 1; text-transform: uppercase; border-radius: 100vw; } .btn--light { color: var(--clr-accent); background-color: var(--clr-white); } .btn--dark, .wpcf7-submit { color: var(--clr-white); background-color: var(--clr-accent); } .btn--ghost { color: var(--clr-accent); border: 1px solid var(--clr-accent); } .btn--light, .btn--dark, .wpcf7-submit, .btn--ghost { -webkit-transition: color var(--tr), background-color var(--tr); -o-transition: color var(--tr), background-color var(--tr); transition: color var(--tr), background-color var(--tr); } .btn--light:hover, .btn--dark:hover, .wpcf7-submit:hover, .btn--ghost:hover { color: var(--clr-white); background-color: #8BD5AB; } .btn--ghost:hover { border-color: #8BD5AB; } .btn--light:active, .btn--dark:active, .wpcf7-submit:active { color: var(--clr-accent); background-color: #8BD5AB; } .btn:disabled { background-color: lightgray; } .btn-lightbox { --s: clamp(40px, 2.0876rem + 2.0619vi, 60px); display: -ms-grid; display: grid; place-items: center; inline-size: var(--s); block-size: var(--s); background-color: var(--clr-hover); border: 1px solid var(--clr-white); border-radius: 100vw; -webkit-transition: background-color var(--tr); -o-transition: background-color var(--tr); transition: background-color var(--tr); } .btn-lightbox i { color: var(--clr-white); font-size: clamp(24px, 1.3351rem + 0.8247vi, 32px); } @media (hover: hover) { .btn-lightbox:hover { background-color: var(--clr-accent); } } .form-group label { display: none; } .form-group--file { position: relative; display: -ms-grid; display: grid; place-items: center; padding: 25px 10px; border: 2px dashed var(--clr-border); border-radius: 10px; pointer-events: none; } .form-group--file .subtitle { -webkit-margin-after: 8px; margin-block-end: 8px; } .form-group--file label { position: relative; z-index: 1; display: block; pointer-events: none; } .form-group--file-text { position: relative; z-index: 1; -webkit-margin-after: 5px; margin-block-end: 5px; font-size: 14px; color: var(--clr-accent); text-align: center; pointer-events: none; } .form-group--file-counter { position: absolute; inset-inline-end: 15px; inset-block-end: 11px; font-size: 12px; } .form-group--file .input { position: absolute; z-index: 0; inset: 0; pointer-events: auto; opacity: 0; cursor: pointer; } .input:not([type=checkbox]), .textarea { inline-size: 100%; padding: 10px 20px; background-color: transparent; border: 1px solid var(--clr-border); border-radius: 10px; } .input:not([type=checkbox])::-webkit-input-placeholder, .textarea::-webkit-input-placeholder { color: var(--clr-text-2); } .input:not([type=checkbox])::-moz-placeholder, .textarea::-moz-placeholder { color: var(--clr-text-2); } .input:not([type=checkbox]):-ms-input-placeholder, .textarea:-ms-input-placeholder { color: var(--clr-text-2); } .input:not([type=checkbox])::-ms-input-placeholder, .textarea::-ms-input-placeholder { color: var(--clr-text-2); } .input:not([type=checkbox])::placeholder, .textarea::placeholder { color: var(--clr-text-2); } .input:not([type=checkbox]):focus-visible, .textarea:focus-visible { outline: none; border: 1px solid var(--clr-accent); } .input:not([type=checkbox]):focus-visible::-webkit-input-placeholder, .textarea:focus-visible::-webkit-input-placeholder { color: transparent; } .input:not([type=checkbox]):focus-visible::-moz-placeholder, .textarea:focus-visible::-moz-placeholder { color: transparent; } .input:not([type=checkbox]):focus-visible:-ms-input-placeholder, .textarea:focus-visible:-ms-input-placeholder { color: transparent; } .input:not([type=checkbox]):focus-visible::-ms-input-placeholder, .textarea:focus-visible::-ms-input-placeholder { color: transparent; } .input:not([type=checkbox]):focus-visible::placeholder, .textarea:focus-visible::placeholder { color: transparent; } .textarea { min-block-size: 180px; } .checkbox { -ms-flex-item-align: start; -ms-grid-row-align: start; align-self: start; position: relative; inline-size: 30px; block-size: 30px; background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: 5px; } .checkbox input { position: absolute; inset: 0; margin: 0; border: none; outline: none; cursor: pointer; opacity: 0; } .checkbox:has([type=checkbox]:checked)::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); inline-size: 15px; block-size: 10px; background-image: url("data:image/svg+xml,%3Csvg width='15' height='10' viewBox='0 0 15 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.1251 10.0001C4.95944 9.99785 4.80061 9.93376 4.67979 9.82041L0.304786 5.44541C0.205121 5.32398 0.154189 5.16981 0.161895 5.0129C0.169602 4.856 0.235396 4.70756 0.34648 4.59648C0.457564 4.4854 0.605996 4.4196 0.762903 4.4119C0.919811 4.40419 1.07398 4.45512 1.19541 4.55479L5.1251 8.49229L13.4298 0.179786C13.5512 0.0801216 13.7054 0.0291889 13.8623 0.0368952C14.0192 0.0446015 14.1676 0.110396 14.2787 0.22148C14.3898 0.332564 14.4556 0.480996 14.4633 0.637904C14.471 0.794811 14.4201 0.948976 14.3204 1.07041L5.57041 9.82041C5.44958 9.93376 5.29075 9.99785 5.1251 10.0001Z' fill='%2320A85A'/%3E%3C/svg%3E%0A"); pointer-events: none; } .wpcf7 { -ms-grid-column: 1; -ms-grid-column-span: 8; grid-column: 1/span 8; -webkit-margin-after: 20px; margin-block-end: 20px; } .wpcf7-form { --gap: 20px; inline-size: 100%; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px var(--gap); } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap input, .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap select, .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap textarea { inline-size: 100%; padding: 10px 20px; background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: 10px; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap select { block-size: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap input::-webkit-input-placeholder, .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap textarea::-webkit-input-placeholder { color: #BFBFBF; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap input::-moz-placeholder, .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap textarea::-moz-placeholder { color: #BFBFBF; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap input:-ms-input-placeholder, .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap textarea:-ms-input-placeholder { color: #BFBFBF; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap input::-ms-input-placeholder, .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap textarea::-ms-input-placeholder { color: #BFBFBF; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap input::placeholder, .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap textarea::placeholder { color: #BFBFBF; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap input:focus-visible, .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap textarea:focus-visible { border-color: var(--clr-accent); } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap input:focus-visible::-webkit-input-placeholder, .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap textarea:focus-visible::-webkit-input-placeholder { color: transparent; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap input:focus-visible::-moz-placeholder, .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap textarea:focus-visible::-moz-placeholder { color: transparent; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap input:focus-visible:-ms-input-placeholder, .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap textarea:focus-visible:-ms-input-placeholder { color: transparent; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap input:focus-visible::-ms-input-placeholder, .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap textarea:focus-visible::-ms-input-placeholder { color: transparent; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap input:focus-visible::placeholder, .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap textarea:focus-visible::placeholder { color: transparent; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap:has(textarea), .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap:has(label) { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap:nth-child(-n+6) { -ms-flex-preferred-size: calc(50% - var(--gap) / 2); flex-basis: calc(50% - var(--gap) / 2); } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap .wpcf7-quiz-label { display: none; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .form-btm-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 20px; inline-size: 100%; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .form-btm-wrap span.wpcf7-spinner { display: none; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .form-btm-wrap [data-name=acceptance] span label { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .form-btm-wrap [data-name=acceptance] span label input { -ms-flex-negative: 0; flex-shrink: 0; inline-size: 30px; block-size: 30px; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .form-btm-wrap [data-name=acceptance] span label span { max-inline-size: 420px; font-size: 16px; line-height: 1.25; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .form-btm-wrap [data-name=acceptance] span label span a { color: var(--clr-accent); -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } @media (hover: hover) { .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .form-btm-wrap [data-name=acceptance] span label span a:hover { color: var(--clr-hover); } } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .form-btm-wrap .wpcf7-submit { border: none; } @media (max-width: 640px) { .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap { -ms-flex-preferred-size: unset; flex-basis: unset; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .wpcf7-form-control-wrap:nth-child(-n+6) { -ms-flex-preferred-size: unset; flex-basis: unset; inline-size: 100%; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .form-btm-wrap { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .form-btm-wrap .wpcf7-submit { -ms-flex-item-align: start; -ms-grid-row-align: start; align-self: start; } } @media (max-width: 429px) { .wpcf7-form .uacf7-form-7 > .uacf7-form-7 .form-btm-wrap [data-name=acceptance] span label { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .vacancy__form-wrap { -ms-flex-item-align: start; -ms-grid-row-align: start; align-self: start; padding: clamp(20px, 0.8376rem + 2.0619vi, 40px) clamp(20px, 0.8376rem + 2.0619vi, 40px) 20px; background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: clamp(20px, 0.7345rem + 2.5773vi, 45px); -webkit-box-shadow: 0 0 20px hsla(0, 0%, 0%, 0.07); box-shadow: 0 0 20px hsla(0, 0%, 0%, 0.07); } .vacancy__form-wrap > .wpcf7 { -webkit-margin-after: 0; margin-block-end: 0; } .vacancy__form-wrap .vacancy__form-title { -webkit-margin-after: clamp(15px, 0.6282rem + 1.5464vi, 30px); margin-block-end: clamp(15px, 0.6282rem + 1.5464vi, 30px); } .vacancy__form-wrap .vacancy_form__ .wpcf7 .wpcf7-form .uacf7-form-840 { display: -ms-grid; display: grid; gap: 10px; } .vacancy__form-wrap .wpcf7-form-control-wrap input, .vacancy__form-wrap .wpcf7-form-control-wrap textarea { inline-size: 100%; padding: 10px 20px; background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: 10px; } .vacancy__form-wrap .wpcf7-form-control-wrap input::-webkit-input-placeholder, .vacancy__form-wrap .wpcf7-form-control-wrap textarea::-webkit-input-placeholder { color: #6C8778; } .vacancy__form-wrap .wpcf7-form-control-wrap input::-moz-placeholder, .vacancy__form-wrap .wpcf7-form-control-wrap textarea::-moz-placeholder { color: #6C8778; } .vacancy__form-wrap .wpcf7-form-control-wrap input:-ms-input-placeholder, .vacancy__form-wrap .wpcf7-form-control-wrap textarea:-ms-input-placeholder { color: #6C8778; } .vacancy__form-wrap .wpcf7-form-control-wrap input::-ms-input-placeholder, .vacancy__form-wrap .wpcf7-form-control-wrap textarea::-ms-input-placeholder { color: #6C8778; } .vacancy__form-wrap .wpcf7-form-control-wrap input::placeholder, .vacancy__form-wrap .wpcf7-form-control-wrap textarea::placeholder { color: #6C8778; } .vacancy__form-wrap .wpcf7-form-control-wrap input:focus-visible, .vacancy__form-wrap .wpcf7-form-control-wrap textarea:focus-visible { border-color: var(--clr-accent); } .vacancy__form-wrap .wpcf7-form-control-wrap input:focus-visible::-webkit-input-placeholder, .vacancy__form-wrap .wpcf7-form-control-wrap textarea:focus-visible::-webkit-input-placeholder { color: transparent; } .vacancy__form-wrap .wpcf7-form-control-wrap input:focus-visible::-moz-placeholder, .vacancy__form-wrap .wpcf7-form-control-wrap textarea:focus-visible::-moz-placeholder { color: transparent; } .vacancy__form-wrap .wpcf7-form-control-wrap input:focus-visible:-ms-input-placeholder, .vacancy__form-wrap .wpcf7-form-control-wrap textarea:focus-visible:-ms-input-placeholder { color: transparent; } .vacancy__form-wrap .wpcf7-form-control-wrap input:focus-visible::-ms-input-placeholder, .vacancy__form-wrap .wpcf7-form-control-wrap textarea:focus-visible::-ms-input-placeholder { color: transparent; } .vacancy__form-wrap .wpcf7-form-control-wrap input:focus-visible::placeholder, .vacancy__form-wrap .wpcf7-form-control-wrap textarea:focus-visible::placeholder { color: transparent; } .vacancy__form-wrap .codedropz-upload-handler .cd-upload-btn { color: var(--clr-accent); -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } @media (hover: hover) { .vacancy__form-wrap .codedropz-upload-handler .cd-upload-btn:hover { color: var(--clr-hover); } } .vacancy__form-wrap .wpcf7-submit { -ms-grid-column-align: center; justify-self: center; border: none; } .ac-container { display: -ms-grid; display: grid; gap: 10px 0; } .ac-container .ac-trigger { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 5px; inline-size: 100%; padding: clamp(15px, 0.7519rem + 0.9278vi, 24px) clamp(15px, 0.6282rem + 1.5464vi, 30px); color: var(--clr-text); background-color: var(--clr-white); font-size: 1.25rem; border: 1px solid var(--clr-border); border-radius: 20px; cursor: pointer; } .ac-container .ac-trigger > :nth-child(1) { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; text-align: left; } .ac-container .ac-trigger::after { content: ""; -ms-flex-negative: 0; flex-shrink: 0; inline-size: 24px; block-size: 24px; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 12.4791C9.88889 12.4791 9.78139 12.4583 9.6775 12.4166C9.57306 12.3749 9.48612 12.3194 9.41667 12.2499L5.58334 8.41659C5.43056 8.26381 5.35417 8.06936 5.35417 7.83325C5.35417 7.59714 5.43056 7.4027 5.58334 7.24992C5.73612 7.09714 5.93056 7.02075 6.16667 7.02075C6.40278 7.02075 6.59723 7.09714 6.75001 7.24992L10 10.4999L13.25 7.24992C13.4028 7.09714 13.5972 7.02075 13.8333 7.02075C14.0694 7.02075 14.2639 7.09714 14.4167 7.24992C14.5694 7.4027 14.6458 7.59714 14.6458 7.83325C14.6458 8.06936 14.5694 8.26381 14.4167 8.41659L10.5833 12.2499C10.5 12.3333 10.4097 12.3921 10.3125 12.4266C10.2153 12.4616 10.1111 12.4791 10 12.4791Z' fill='%2320A85A'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; background-size: 120%; -webkit-transition: -webkit-transform var(--tr); transition: -webkit-transform var(--tr); -o-transition: transform var(--tr); transition: transform var(--tr); transition: transform var(--tr), -webkit-transform var(--tr); } .ac-container .ac-trigger.active::after { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .ac-container .ac-panel { display: -ms-grid; display: grid; -ms-grid-rows: 0fr; grid-template-rows: 0fr; padding-inline: 20px; -webkit-transition: grid-template-rows 0.3s ease-in-out, padding-block 0.3s ease-in-out; -o-transition: grid-template-rows 0.3s ease-in-out, padding-block 0.3s ease-in-out; transition: grid-template-rows 0.3s ease-in-out, padding-block 0.3s ease-in-out; transition: grid-template-rows 0.3s ease-in-out, padding-block 0.3s ease-in-out, -ms-grid-rows 0.3s ease-in-out; } .ac-container .ac-panel.expanded { -ms-grid-rows: 1fr; grid-template-rows: 1fr; padding-block: 20px; } .ac-container .ac-content { overflow: hidden; } .ac-container .ac-content > p + p { -webkit-margin-before: 15px; margin-block-start: 15px; } .header { position: fixed; z-index: 2; top: 0; inline-size: 100%; block-size: var(--header-h); background-color: hsla(0, 0%, 100%, 0.95); } .header__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; block-size: 100%; } .header__logo { -ms-flex-negative: 0; flex-shrink: 0; overflow: hidden; aspect-ratio: 2.1886/1; inline-size: clamp(50px, 1.7642rem + 6.8041vi, 116px); } .header__logo img { aspect-ratio: 2.1886/1; inline-size: 100%; } .header__nav { block-size: 100%; } .header__contacts { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0 22px; } .header__contacts-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 5px; color: var(--clr-accent); font-size: 14px; line-height: 1.5; -webkit-transition: opacity var(--tr); -o-transition: opacity var(--tr); transition: opacity var(--tr); } .header__contacts-btn svg { inline-size: 24px; block-size: 24px; } .header__contacts-btn.call svg { inline-size: 16px; } .header__contacts-btn:hover, .header__contacts-btn:focus-visible { opacity: 0.55; } .header__burger { display: none; } .header__burger svg { inline-size: 18px; block-size: 14px; } @media (max-width: 1000px) { .header__contacts-btn span { display: none; } } @media (max-width: 768px) { .header__nav { display: none; } .header__contacts { display: none; } .header__burger { display: block; } } .menu-prim { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0 40px; block-size: 100%; } .menu-prim__item { --duration: .3s; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; block-size: 100%; } .menu-prim__item svg { -ms-flex-negative: 0; flex-shrink: 0; inline-size: 20px; block-size: 20px; -webkit-transition: -webkit-transform var(--tr); transition: -webkit-transform var(--tr); -o-transition: transform var(--tr); transition: transform var(--tr); transition: transform var(--tr), -webkit-transform var(--tr); } .menu-prim__item:hover svg, .menu-prim__item:focus-visible svg { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .menu-prim__item:hover .menu-sub, .menu-prim__item:focus-visible .menu-sub { visibility: visible; opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity var(--duration) ease-in-out, visibility 0s linear 0s, -webkit-transform var(--duration) ease-in-out; transition: opacity var(--duration) ease-in-out, visibility 0s linear 0s, -webkit-transform var(--duration) ease-in-out; -o-transition: transform var(--duration) ease-in-out, opacity var(--duration) ease-in-out, visibility 0s linear 0s; transition: transform var(--duration) ease-in-out, opacity var(--duration) ease-in-out, visibility 0s linear 0s; transition: transform var(--duration) ease-in-out, opacity var(--duration) ease-in-out, visibility 0s linear 0s, -webkit-transform var(--duration) ease-in-out; } .menu-prim__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; block-size: 100%; color: #072C17; font-size: 14px; line-height: 17px; text-transform: uppercase; -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } .menu-prim__link:hover, .menu-prim__link:focus-visible { color: var(--clr-hover); } .menu-sub { position: absolute; z-index: 1; inset-inline-start: 0; inset-block-start: calc(var(--header-h) - 1px); padding-block: 10px; background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: 30px; visibility: hidden; opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); -webkit-transition: opacity var(--duration) ease-in-out, visibility 0s linear var(--duration), -webkit-transform var(--duration) ease-in-out; transition: opacity var(--duration) ease-in-out, visibility 0s linear var(--duration), -webkit-transform var(--duration) ease-in-out; -o-transition: transform var(--duration) ease-in-out, opacity var(--duration) ease-in-out, visibility 0s linear var(--duration); transition: transform var(--duration) ease-in-out, opacity var(--duration) ease-in-out, visibility 0s linear var(--duration); transition: transform var(--duration) ease-in-out, opacity var(--duration) ease-in-out, visibility 0s linear var(--duration), -webkit-transform var(--duration) ease-in-out; } .menu-sub__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; block-size: 40px; } .menu-sub__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; inline-size: -webkit-max-content; inline-size: -moz-max-content; inline-size: max-content; block-size: 100%; padding-inline: 30px; color: #072C17; -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } .menu-sub__link:hover, .menu-sub__link:focus-visible { color: var(--clr-hover); } .breadcrum { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 6px 0; -webkit-margin-after: 20px; margin-block-end: 20px; } .breadcrum__item { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0 5px; } .breadcrum__item:not(:last-child) { -webkit-margin-end: 5px; margin-inline-end: 5px; } .breadcrum__item:not(:last-child)::after { content: "/"; color: var(--clr-text-2); } .breadcrum__link { color: var(--clr-text-2); -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } @media (hover: hover) { .breadcrum__link:hover { color: var(--clr-accent); } } .breadcrum__idle { color: var(--clr-text-2); } .hero { overflow: hidden; position: relative; aspect-ratio: 1.781/1; width: 100%; -webkit-margin-after: 0; margin-block-end: 0; } .hero__desc { position: absolute; bottom: 6.3%; left: 0%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; aspect-ratio: 3.3333/1; gap: 1.5vw 0; width: 100%; pointer-events: none; } .hero__desc-title { -webkit-margin-start: 46%; margin-inline-start: 46%; -webkit-margin-before: 5%; margin-block-start: 5%; color: var(--clr-white); font-size: 2.3vw; font-weight: var(--fw-l); } .hero__desc-title span { font-weight: var(--fw-b); } .hero__desc-btn { -ms-flex-item-align: start; -ms-grid-row-align: start; align-self: start; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.7vw; -webkit-margin-start: 46%; margin-inline-start: 46%; padding: 0.75vw 1.25vw; color: var(--clr-accent); background-color: var(--clr-white); font-size: 0.85vw; line-height: 1; text-transform: uppercase; border-radius: 100vw; pointer-events: auto; -webkit-transition: color var(--tr), background-color var(--tr); -o-transition: color var(--tr), background-color var(--tr); transition: color var(--tr), background-color var(--tr); } .hero__desc-btn .ba.ba-icon-73:before { font-size: 2vw !important; line-height: 1; } .hero__desc-btn .ba { font-size: unset; } .hero__desc-btn:hover { color: var(--clr-white); background-color: var(--clr-hover); } .hero__desc-btn:active { color: var(--clr-accent); -webkit-transition: unset; -o-transition: unset; transition: unset; } .hero__nav { pointer-events: none; position: absolute; z-index: 1; bottom: 6.3%; left: 0%; aspect-ratio: 3.3333/1; width: 100%; } .hero__menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 14.5% 0 0 61.5%; block-size: 31%; } .hero__menu-link { pointer-events: auto; color: var(--clr-white); font-size: 0.8vw; -webkit-transition: opacity var(--tr); -o-transition: opacity var(--tr); transition: opacity var(--tr); } .hero__menu-link:hover { opacity: 0.75; } .hero .sky, .hero .front-left, .hero .front-left2, .hero .front-right, .hero .front-hill, .hero .front-water, .hero .middle, .hero .rear-hill, .hero .rear-trees2, .hero .rear-trees1, .hero .river, .hero .rear-mountains { position: absolute; pointer-events: none; } .hero .sky { top: 0; left: 0; width: 100%; } .hero .rear-mountains { bottom: 66.512%; left: 0; width: 100%; } .hero .river { bottom: 52.1335%; left: 0; width: 100%; } .hero .rear-trees1 { bottom: 65.77%; left: 0; width: 100%; } .hero .rear-trees2-wrap { position: absolute; bottom: 47%; right: 0; width: 22.5%; } .hero .rear-trees2-wrap .bear-gif { position: absolute; inset-inline-end: 0; inset-block-start: 47%; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); visibility: hidden; aspect-ratio: 10/9; inline-size: 14%; block-size: 13%; cursor: pointer; } .hero .rear-trees2-wrap .bear-gif.go { visibility: visible; -webkit-animation: bear 1.8s linear forwards; animation: bear 1.8s linear forwards; } .hero .rear-trees2-wrap .bear-talk { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; -webkit-transform: translate(-50%, -75%) scale(0); -ms-transform: translate(-50%, -75%) scale(0); transform: translate(-50%, -75%) scale(0); inline-size: clamp(125px, 0.7583rem + 14.6771vi, 200px); padding: 20px; color: var(--clr-white); background-color: var(--clr-hover); font-size: clamp(13px, 0.725rem + 0.4375vi, 20px); text-align: center; border-radius: clamp(30px, 1.625rem + 1.25vi, 50px); -webkit-transition: -webkit-transform var(--tr); transition: -webkit-transform var(--tr); -o-transition: transform var(--tr); transition: transform var(--tr); transition: transform var(--tr), -webkit-transform var(--tr); } .hero .rear-trees2-wrap .bear-talk.show { -webkit-transform: translate(-50%, -95%) scale(1); -ms-transform: translate(-50%, -95%) scale(1); transform: translate(-50%, -95%) scale(1); } @-webkit-keyframes bear { 100% { inset-inline-end: 18%; } } @keyframes bear { 100% { inset-inline-end: 18%; } } .hero .rear-trees2 { position: unset; -webkit-clip-path: polygon(22.81% 41.78%, 27.5% 48.47%, 32.9% 30.77%, 35.85% 42.12%, 41.31% 18.86%, 45.26% 38.57%, 48.43% 29.44%, 51.93% 53.15%, 58.06% 31.95%, 63.45% 41.05%, 67.62% 16.43%, 71.56% 39.98%, 77.74% 3.06%, 82.32% 20.68%, 89.33% 13.82%, 93.22% 30.38%, 100% 5.78%, 100% 63.33%, 36.03% 63.79%, -3.02% 63.02%, 0.03% 60.26%, 9.41% 56.54%, 12.76% 49.91%, 16.57% 54.85%); clip-path: polygon(22.81% 41.78%, 27.5% 48.47%, 32.9% 30.77%, 35.85% 42.12%, 41.31% 18.86%, 45.26% 38.57%, 48.43% 29.44%, 51.93% 53.15%, 58.06% 31.95%, 63.45% 41.05%, 67.62% 16.43%, 71.56% 39.98%, 77.74% 3.06%, 82.32% 20.68%, 89.33% 13.82%, 93.22% 30.38%, 100% 5.78%, 100% 63.33%, 36.03% 63.79%, -3.02% 63.02%, 0.03% 60.26%, 9.41% 56.54%, 12.76% 49.91%, 16.57% 54.85%); cursor: pointer; pointer-events: auto; } .hero .rear-hill { bottom: 38%; left: 0; width: 38.125%; } .hero .middle { bottom: 6.3%; left: 0; width: 100%; } .hero .front-water { bottom: 0%; left: 0; width: 100%; } .hero .front-hill { bottom: 9.53%; right: 0; width: 56.25%; } .hero .front-left, .hero .front-left2 { bottom: 0; left: 0; width: 42.552%; pointer-events: auto; } .hero .front-left:hover { opacity: 0; } .hero .front-left:hover ~ img.front-left2 { opacity: 1; } .hero .front-left2 { pointer-events: none; opacity: 0; } .hero .front-right { bottom: 0; right: 0; width: 41.7187%; } @media (max-width: 767px) { .hero { aspect-ratio: 0.7812/1; background-image: url("../img/parallax/hero-bg-768.webp"); background-repeat: no-repeat; background-position: left top; background-size: 100% 100%; } .hero img { display: none; } .hero__desc { gap: 2.5vw 0; bottom: 43%; } .hero__desc-title { -webkit-margin-start: 26%; margin-inline-start: 26%; font-size: 5vw; } .hero__desc-btn { gap: 1vw; -webkit-margin-start: 27%; margin-inline-start: 27%; padding: 2vw 3vw; font-size: 2vw; } .hero__desc-btn .ba.ba-icon-73:before { font-size: 3.5vw !important; } .hero__nav { bottom: 43%; } .hero__menu { gap: 1vw 0; margin: 15.5% 0 0 63.5%; } .hero__menu-link { font-size: 1.9vw; } } @media (max-width: 429px) { .hero__nav { display: none; } .hero__desc { bottom: 37%; } .hero__desc-title { -webkit-margin-start: 27%; margin-inline-start: 27%; font-size: 6.25vw; } .hero__desc-btn { -webkit-margin-start: 47%; margin-inline-start: 47%; font-size: 3vw; } .hero__desc-btn .ba.ba-icon-73:before { font-size: 4.5vw !important; } } .about-us { position: relative; block-size: clamp(820px, 17.9167rem + 44.4444vi, 860px); } .about-us__img { position: absolute; z-index: -1; } .about-us__img.water { inset-block-start: 0; block-size: 100%; } .about-us__img.ground { inset-block-end: 0; } .about-us__inner { position: relative; z-index: 0; -webkit-padding-before: clamp(30px, 1.4626rem + 2.0619vi, 50px); padding-block-start: clamp(30px, 1.4626rem + 2.0619vi, 50px); } .about-us__desc { max-inline-size: 450px; } .about-us__title { -webkit-margin-after: 10px; margin-block-end: 10px; } .about-us__text { -webkit-margin-after: 30px; margin-block-end: 30px; font-size: clamp(15px, 0.8344rem + 0.5155vi, 20px); line-height: 1.4; } .about-us__monitor { position: absolute; inset-inline-end: clamp(100px, 9.5833rem - 2.7778vi, 120px); inset-block-start: clamp(0rem, 20rem - 16.6667vi, 120px); } .about-us__monitor img { display: unset; width: clamp(228px, 6.8067rem + 37.2165vi, 589px); -o-object-fit: unset; object-fit: unset; -webkit-animation: monitor 6s ease-in-out infinite; animation: monitor 6s ease-in-out infinite; } .about-us__monitor::after { content: ""; position: absolute; inset: 80% 0 0 0; background-color: var(--clr-water); border-radius: 100vw; } @media (max-width: 1200px) { .about-us { block-size: clamp(692px, -3.2955rem + 72.7273vi, 820px); } .about-us__monitor { inset-inline-end: clamp(100px, -1.0227rem + 11.3636vi, 120px); inset-block-start: clamp(90px, -5.2841rem + 17.0455vi, 120px); } } @media (max-width: 1024px) { .about-us { block-size: clamp(654px, 33.75rem + 14.8438vi, 692px); } .about-us__monitor { inset-inline-end: clamp(100px, -1.0227rem + 11.3636vi, 120px); inset-block-start: clamp(90px, 28.125rem - 35.1562vi, 180px); } } @media (max-width: 768px) { .about-us { block-size: clamp(540px, 28.6607rem + 25.4464vi, 654px); } .about-us__desc { max-inline-size: unset; } .about-us__monitor { inset-inline-end: clamp(20px, -2.3214rem + 17.8571vi, 100px); inset-block-start: clamp(180px, 20.8929rem - 20.0893vi, 270px); } } @-webkit-keyframes monitor { 50% { -webkit-transform: translateY(clamp(-30px, -0.2126rem - 2.0619vi, -10px)) rotate(-5deg); transform: translateY(clamp(-30px, -0.2126rem - 2.0619vi, -10px)) rotate(-5deg); } 100% { -webkit-transform: translateY(0px) rotate(0); transform: translateY(0px) rotate(0); } } @keyframes monitor { 50% { -webkit-transform: translateY(clamp(-30px, -0.2126rem - 2.0619vi, -10px)) rotate(-5deg); transform: translateY(clamp(-30px, -0.2126rem - 2.0619vi, -10px)) rotate(-5deg); } 100% { -webkit-transform: translateY(0px) rotate(0); transform: translateY(0px) rotate(0); } } .about-block { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); -ms-grid-rows: -webkit-min-content -webkit-min-content -webkit-min-content -webkit-min-content; -ms-grid-rows: min-content min-content min-content min-content; grid-template-rows: -webkit-min-content -webkit-min-content -webkit-min-content -webkit-min-content; grid-template-rows: min-content min-content min-content min-content; gap: 0 20px; -webkit-margin-after: 40px; margin-block-end: 40px; } .about-block .breadcrum { -ms-grid-column: 1; -ms-grid-column-span: 6; grid-column: 1/span 6; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; } .about-block__title { -ms-grid-column: 1; -ms-grid-column-span: 6; grid-column: 1/span 6; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/span 1; } .about-block__desc { -ms-grid-column: 1; -ms-grid-column-span: 6; grid-column: 1/span 6; -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3/span 1; } .about-block__desc > * + * { -webkit-margin-before: 20px; margin-block-start: 20px; } .about-block__img { grid-column: 7/-1; -ms-grid-row: 1; -ms-grid-row-span: 4; grid-row: 1/span 4; aspect-ratio: 1.3947; } .about-block__img img { inline-size: 100%; } @media (max-width: 992px) { .about-block { display: block; } } .what-we-do__cards { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; gap: 20px; } .what-we-do__card { position: relative; padding: clamp(20px, 0.8376rem + 2.0619vi, 40px); background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: clamp(25px, 1.1501rem + 2.0619vi, 45px); } .what-we-do__card:nth-child(2) { -ms-flex-item-align: end; -ms-grid-row-align: end; align-self: end; } .what-we-do__card:nth-child(3) { -ms-flex-item-align: start; -ms-grid-row-align: start; align-self: start; } .what-we-do__card-title { position: relative; z-index: 1; -webkit-margin-after: 10px; margin-block-end: 10px; } .what-we-do__card-list { position: relative; z-index: 1; -webkit-margin-after: 20px; margin-block-end: 20px; font-size: clamp(13px, 0.7919rem + 0.1031vi, 14px); line-height: 24px; } .what-we-do__card-list a { color: var(--clr-text); -webkit-text-decoration-color: transparent; text-decoration-color: transparent; -webkit-text-decoration-line: underline; text-decoration-line: underline; text-underline-offset: 3px; -webkit-transition: -webkit-text-decoration-color var(--tr); transition: -webkit-text-decoration-color var(--tr); -o-transition: text-decoration-color var(--tr); transition: text-decoration-color var(--tr); transition: text-decoration-color var(--tr), -webkit-text-decoration-color var(--tr); } .what-we-do__card-list a:hover { color: var(--clr-accent); -webkit-text-decoration-color: var(--clr-accent); text-decoration-color: var(--clr-accent); } .what-we-do__card-list br { display: none; } .what-we-do__card-img { position: absolute; z-index: 0; inset-inline-end: 40px; inset-block-end: 0px; width: unset; } .what-we-do__card-img.developer { aspect-ratio: 1.0232/1; inline-size: clamp(145px, -1.88rem + 22.7969vi, 264px); inset-inline-end: clamp(10px, -2.1336rem + 5.7471vi, 40px); } .what-we-do__card-img.designer { aspect-ratio: 0.7248/1; inline-size: clamp(135px, -1.6774rem + 21.0728vi, 245px); inset-inline-end: clamp(-10px, -5.2227rem + 9.5785vi, 40px); } .what-we-do__card-img.automatika { aspect-ratio: 1.554/1; inline-size: clamp(170px, -5.467rem + 33.5249vi, 345px); inset-inline-end: clamp(10px, -2.1336rem + 5.7471vi, 40px); } .what-we-do__card-img.marketing { aspect-ratio: 0.9903/1; inline-size: clamp(135px, -7.4705rem + 33.1418vi, 308px); inset-inline-end: clamp(10px, -2.1336rem + 5.7471vi, 40px); } @media (max-width: 767px) { .what-we-do__cards { -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 20px 0; } .what-we-do__card { overflow: hidden; } .what-we-do__card-img.developer { inline-size: clamp(115px, 0.5208rem + 33.3333vi, 264px); inset-inline-end: clamp(10px, -0.2699rem + 4.4743vi, 30px); } .what-we-do__card-img.designer { inline-size: clamp(110px, 3.2956rem + 17.8971vi, 190px); inset-inline-end: clamp(10px, -0.2699rem + 4.4743vi, 30px); } .what-we-do__card-img.automatika { inline-size: clamp(150px, 0.6502rem + 43.6242vi, 345px); inset-inline-end: clamp(-10px, -2.4147rem + 8.9485vi, 30px); } .what-we-do__card-img.marketing { inline-size: clamp(110px, -1.9841rem + 44.2953vi, 308px); inset-inline-end: clamp(0px, -1.3423rem + 6.7114vi, 30px); } } @media (max-width: 429px) { .what-we-do__card-list br { display: inline; } } .our-cases__title { -webkit-margin-after: 18px; margin-block-end: 18px; } .our-cases__slider { --offset-m: clamp(-80px, -2.0909rem + -3.6082vi, -45px); --offset-p: 40px; overflow: hidden; margin-inline: -15px !important; } .our-cases__slider .splide__track { overflow: visible !important; padding-inline: 15px !important; -webkit-padding-before: var(--offset-p); padding-block-start: var(--offset-p); } .our-cases__slider .splide__arrows { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 10px; -webkit-margin-before: clamp(20px, 1.0438rem + 1.0309vi, 30px); margin-block-start: clamp(20px, 1.0438rem + 1.0309vi, 30px); padding-inline: 15px !important; } .our-cases__slide { display: block; block-size: 100%; padding: 40px; background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: clamp(25px, 1.1501rem + 2.0619vi, 45px); -webkit-transition: -webkit-box-shadow var(--tr); transition: -webkit-box-shadow var(--tr); -o-transition: box-shadow var(--tr); transition: box-shadow var(--tr); transition: box-shadow var(--tr), -webkit-box-shadow var(--tr); } .our-cases__slide-top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; gap: 0 20px; -webkit-margin-before: var(--offset-m); margin-block-start: var(--offset-m); -webkit-margin-after: clamp(15px, 0.018rem + 1.9157vi, 25px); margin-block-end: clamp(15px, 0.018rem + 1.9157vi, 25px); } .our-cases__slide-img { aspect-ratio: 1; max-inline-size: clamp(90px, 4.3879rem + 6.1856vi, 150px); } .our-cases__slide-img img { block-size: 100%; } .our-cases__slide-logo { aspect-ratio: 2.1506; } .our-cases__slide-btm { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; gap: 0 clamp(10px, -0.2945rem + 1.9157vi, 20px); } .our-cases__slide-title { grid-column: 1/-1; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; -webkit-margin-after: 15px; margin-block-end: 15px; color: var(--clr-text); -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } .our-cases__slide-list { -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2; -ms-grid-row: 2; -ms-grid-row-span: 2; grid-row: 2/span 2; } .our-cases__slide-list li { color: #6C8778; font-size: 14px; } .our-cases__slide-list li.disabled { color: lightgray; text-decoration: line-through; } .our-cases__slide-duration { grid-column: 2/-1; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/span 1; color: #6C8778; font-size: 14px; } .our-cases__slide-btn { -ms-grid-row-align: end; align-self: end; grid-column: 2/-1; -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3/span 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 10px; block-size: 30px; color: var(--clr-accent); } .our-cases__slide-btn span { font-size: 14px; line-height: 1.3; text-transform: uppercase; opacity: 0; -webkit-transition: opacity var(--tr); -o-transition: opacity var(--tr); transition: opacity var(--tr); } @media (max-width: 1400px) { .our-cases__slide-btn span > span { display: none; } } .our-cases__slide-btn svg { inline-size: 20px; block-size: 30px; fill: var(--clr-accent); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .our-cases__slide:hover { -webkit-box-shadow: 0 0 20px hsla(146, 86%, 19%, 0.1); box-shadow: 0 0 20px hsla(146, 86%, 19%, 0.1); } .our-cases__slide:hover .our-cases__slide-title { color: var(--clr-accent); } .our-cases__slide:hover .our-cases__slide-btn span { opacity: 1; } .our-cases__slide:hover .our-cases__slide-btn svg { -webkit-animation: arrow-btn-svg 0.6s ease-in-out infinite alternate; animation: arrow-btn-svg 0.6s ease-in-out infinite alternate; } @media (max-width: 1200px) { .our-cases__slide { padding: clamp(30px, -1.7614rem + 5.6818vi, 40px); } } @media (max-width: 1023px) { .our-cases__slide { padding: clamp(20px, -0.6324rem + 3.9216vi, 30px); } } .our-cases__btn { -webkit-margin-start: 10px; margin-inline-start: 10px; } .splide__arrow { position: unset; display: -ms-inline-grid; display: inline-grid; place-items: center; opacity: unset; aspect-ratio: 1; width: clamp(45px, 2.5032rem + 1.5464vi, 60px); height: unset; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); background-color: transparent; border: 1px solid var(--clr-accent); border-radius: 100vw; -webkit-transition: background-color var(--tr); -o-transition: background-color var(--tr); transition: background-color var(--tr); } .splide__arrow svg { fill: var(--clr-accent); -webkit-transition: fill var(--tr); -o-transition: fill var(--tr); transition: fill var(--tr); } .splide__arrow:hover { background-color: var(--clr-hover); } .splide__arrow:hover svg { fill: var(--clr-white); } .splide__arrow:active { background-color: var(--clr-accent); -webkit-transition: unset; -o-transition: unset; transition: unset; } .splide__arrow:active svg { fill: var(--clr-white); -webkit-transition: unset; -o-transition: unset; transition: unset; } .about-company__inner { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); grid-auto-rows: auto; gap: 0 20px; } .about-company__title { -ms-grid-row-align: start; align-self: start; -ms-grid-column: 1; -ms-grid-column-span: 5; grid-column: 1/span 5; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; -webkit-margin-after: 20px; margin-block-end: 20px; } .about-company__desc { -ms-grid-column: 1; -ms-grid-column-span: 5; grid-column: 1/span 5; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/span 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .about-company__desc p { font-size: clamp(15px, 0.8344rem + 0.5155vi, 20px); line-height: 1.4; } .about-company__desc p:last-of-type { -webkit-margin-after: 20px; margin-block-end: 20px; } .about-company__desc .btn { -ms-flex-item-align: start; -ms-grid-row-align: start; align-self: start; -webkit-margin-before: auto; margin-block-start: auto; } .about-company__desc > * + * { -webkit-margin-before: 20px; margin-block-start: 20px; } .about-company__img img { width: unset; } .about-company__list { grid-column: 6/-1; -ms-grid-row: 1; -ms-grid-row-span: 3; grid-row: 1/span 3; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-auto-rows: -webkit-min-content; grid-auto-rows: min-content; gap: 20px; } .about-company__list-item { text-align: center; } .about-company__list-item:first-child { grid-column: 1/-1; } .about-company__list-number { color: var(--clr-accent); font-size: clamp(40px, 1.8814rem + 3.0928vi, 70px); line-height: 1.2; } .about-company__list-text { font-size: clamp(13px, 0.7919rem + 0.1031vi, 14px); line-height: 1.5; } .about-company__btn { -ms-grid-column: 1; -ms-grid-column-span: 5; grid-column: 1/span 5; -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3/span 1; -ms-grid-column-align: start; justify-self: start; -ms-grid-row-align: end; align-self: end; display: none; } @media (max-width: 991px) { .about-company__img img { width: 100%; } .about-company__list { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 0.0289rem + 2.9806vi, 30px); -webkit-padding-start: 20px; padding-inline-start: 20px; } .about-company__list-item:first-child { -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/span 1; -ms-grid-row-align: center; align-self: center; } } @media (max-width: 767px) { .about-company__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); grid-auto-rows: auto; gap: 0 20px; } .about-company__desc { -webkit-margin-after: clamp(20px, 0.8026rem + 2.2371vi, 30px); margin-block-end: clamp(20px, 0.8026rem + 2.2371vi, 30px); } .about-company__desc .btn { display: none; } .about-company__desc p:last-of-type { -webkit-margin-after: unset; margin-block-end: unset; } .about-company__list { -webkit-margin-after: 30px; margin-block-end: 30px; -webkit-padding-start: unset; padding-inline-start: unset; } .about-company__btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } } .our-principles__title { -webkit-margin-after: 20px; margin-block-end: 20px; } .our-principles__item { padding: clamp(20px, 1.0438rem + 1.0309vi, 30px); background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: 45px; -webkit-box-shadow: 0 0 20px hsla(146, 86%, 19%, 0.1); box-shadow: 0 0 20px hsla(146, 86%, 19%, 0.1); } .we-say-truth { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); gap: 0 20px; font-size: clamp(16px, 0.9381rem + 0.3093vi, 19px); } .we-say-truth__title { -ms-grid-column: 1; -ms-grid-column-span: 6; grid-column: 1/span 6; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; -webkit-margin-after: clamp(20px, 1.0438rem + 1.0309vi, 30px); margin-block-end: clamp(20px, 1.0438rem + 1.0309vi, 30px); } .we-say-truth__desc { -ms-grid-column: 1; -ms-grid-column-span: 6; grid-column: 1/span 6; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/span 1; } .we-say-truth__desc .btn { -webkit-margin-before: 30px; margin-block-start: 30px; } .we-say-truth__list { grid-column: 7/-1; -ms-grid-row: 1; -ms-grid-row-span: 3; grid-row: 1/span 3; } .we-say-truth__list.auto-grid { --min-w: 190px; } .we-say-truth__list-number { -webkit-margin-after: 12px; margin-block-end: 12px; color: var(--clr-accent); font-size: clamp(40px, 1.6753rem + 4.1237vi, 80px); line-height: 1; } .we-say-truth__btn { display: none; } @media (max-width: 1300px) { .we-say-truth { display: block; } .we-say-truth__desc { -webkit-margin-after: 30px; margin-block-end: 30px; } .we-say-truth__desc .btn { display: none; } .we-say-truth__list { -webkit-margin-after: 30px; margin-block-end: 30px; } .we-say-truth__list.auto-grid { --min-w: clamp(200px, 3.4774rem + 18.797vi, 300px); } .we-say-truth__btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } } @media (max-width: 768px) { .we-say-truth__list-number, .we-say-truth__list-text { text-align: center; } .we-say-truth__list.auto-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .testimonials__title { -webkit-margin-after: 30px; margin-block-end: 30px; } .testim-slider { --w: clamp(20px, 1.0438rem + 1.0309vi, 30px); } .testim-slider .splide__track { -webkit-margin-after: clamp(20px, 1.0438rem + 1.0309vi, 30px); margin-block-end: clamp(20px, 1.0438rem + 1.0309vi, 30px); } .testim-slider__slide { position: relative; block-size: 100%; padding: var(--w); background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: var(--w); } .testim-slider__slide-title-block { -webkit-margin-after: 16px; margin-block-end: 16px; } .testim-slider__slide-name { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 10px; -webkit-margin-after: 5px; margin-block-end: 5px; font-size: 20px; font-weight: var(--fw-m); } .testim-slider__slide-name i { color: var(--clr-accent); } .testim-slider__slide-status { color: var(--clr-text-2); } .testim-slider__slide-desc { position: relative; overflow: hidden; max-block-size: 113px; cursor: pointer; -webkit-transition: max-block-size var(--tr); -o-transition: max-block-size var(--tr); transition: max-block-size var(--tr); } .testim-slider__slide-desc > * + * { -webkit-margin-before: 20px; margin-block-start: 20px; } .testim-slider__slide-desc::after { content: ""; position: absolute; inset: 10% 0 0 0; background: -webkit-gradient(linear, left bottom, left top, from(rgb(255, 255, 255)), to(rgba(255, 255, 255, 0))); background: -o-linear-gradient(bottom, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%); } .testim-slider__slide-desc.active { max-block-size: 500px; } .testim-slider__slide-desc.active::after { display: none; } .testim-slider__slide-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 4px; position: absolute; inset-inline-end: var(--w); inset-block-start: var(--w); color: var(--clr-accent); font-size: 12px; line-height: 17px; text-transform: uppercase; } @media (hover: hover) { .testim-slider__slide-btn:hover i { -webkit-animation: arrow-btn 0.6s ease-in-out infinite alternate; animation: arrow-btn 0.6s ease-in-out infinite alternate; } } @media (max-width: 550px) { .testim-slider__slide-btn { position: static; -webkit-margin-before: 20px; margin-block-start: 20px; } } .testim-slider__arrows { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 10px; } .testim-slider__arrows .testim__btn { -webkit-margin-end: 10px; margin-inline-end: 10px; } .our-team { overflow: hidden; aspect-ratio: 1.6623; background-image: url("../img/misc/bonfire.webp"); background-repeat: no-repeat; background-size: 100%; } .our-team__inner { -webkit-padding-start: clamp(60px, 2.1324rem + 4.7059vi, 100px); padding-inline-start: clamp(60px, 2.1324rem + 4.7059vi, 100px); -webkit-padding-before: clamp(50px, 1.8155rem + 3.8095vi, 90px); padding-block-start: clamp(50px, 1.8155rem + 3.8095vi, 90px); } .our-team__title { -webkit-margin-after: 20px; margin-block-end: 20px; color: var(--clr-white); } .our-team__btns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } @media (max-width: 550px) { .our-team { background-size: 130%; background-position: center; } .our-team__inner { -webkit-padding-start: unset; padding-inline-start: unset; -webkit-padding-before: 30px; padding-block-start: 30px; } } @media (max-width: 429px) { .our-team { aspect-ratio: 1/0.9; background-size: 200%; background-position: left 25% center; } .our-team__inner { -webkit-padding-start: unset; padding-inline-start: unset; -webkit-padding-before: 20px; padding-block-start: 20px; } .our-team__btns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } } .team-block { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); gap: 20px; -webkit-margin-after: clamp(40px, 1.6753rem + 4.1237vi, 80px); margin-block-end: clamp(40px, 1.6753rem + 4.1237vi, 80px); } .team-block__desc { -ms-grid-column: 1; -ms-grid-column-span: 6; grid-column: 1/span 6; } .team-block__desc-title { -webkit-margin-after: clamp(20px, 1.0438rem + 1.0309vi, 30px); margin-block-end: clamp(20px, 1.0438rem + 1.0309vi, 30px); } .team-block__desc-subtitle { color: var(--clr-accent); } .team-block__desc-text { max-inline-size: 526px; -webkit-margin-after: 12px; margin-block-end: 12px; } .team-block__desc-text > * + * { -webkit-margin-before: 20px; margin-block-start: 20px; } .team-block__persons { --m: 30px; grid-column: 7/-1; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; gap: calc(var(--m) + 20px) 20px; -webkit-padding-before: var(--m); padding-block-start: var(--m); } .team-block__person { -ms-flex-item-align: start; -ms-grid-row-align: start; align-self: start; position: relative; padding: 0 30px 20px 30px; background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: 45px; } .team-block__person-img { aspect-ratio: 1.4016; inline-size: 171px; -webkit-margin-before: calc(-1 * var(--m)); margin-block-start: calc(-1 * var(--m)); -webkit-margin-after: 20px; margin-block-end: 20px; } .team-block__person-name { -webkit-margin-after: 10px; margin-block-end: 10px; } .team-block__person-position { font-size: 14px; } .team-block__person-btn { position: absolute; inset-inline-end: var(--m); inset-block-start: var(--m); color: var(--clr-accent); } @media (hover: hover) { .team-block__person-btn:hover { -webkit-animation: arrow-btn 0.6s ease-in-out infinite alternate; animation: arrow-btn 0.6s ease-in-out infinite alternate; } } .team-block:last-child { -webkit-margin-after: clamp(40px, 1.2629rem + 6.1856vi, 100px); margin-block-end: clamp(40px, 1.2629rem + 6.1856vi, 100px); } @media (max-width: 1280px) { .team-block { display: block; } .team-block__desc { -webkit-margin-after: 20px; margin-block-end: 20px; } .team-block__persons { --min-w: 250px; --max-w: 1fr; --c-g: 1.25rem; --r-g: 40px; display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--min-w), 100%), var(--max-w))); -webkit-column-gap: var(--c-g); -moz-column-gap: var(--c-g); column-gap: var(--c-g); row-gap: var(--r-g); } } .our-values { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); gap: 0 20px; -webkit-padding-after: clamp(0rem, -2.0619rem + 10.3093vi, 100px); padding-block-end: clamp(0rem, -2.0619rem + 10.3093vi, 100px); } .our-values__title { -ms-grid-column: 1; -ms-grid-column-span: 6; grid-column: 1/span 6; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; -webkit-margin-after: clamp(20px, 0.6727rem + 2.8866vi, 48px); margin-block-end: clamp(20px, 0.6727rem + 2.8866vi, 48px); } .our-values__list { -ms-grid-column: 1; -ms-grid-column-span: 6; grid-column: 1/span 6; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/span 1; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; gap: 20px; -webkit-margin-after: 24px; margin-block-end: 24px; } .our-values__list-item-title { -webkit-margin-after: 10px; margin-block-end: 10px; } .our-values__img { grid-column: 7/-1; -ms-grid-row: 1; -ms-grid-row-span: 4; grid-row: 1/span 4; aspect-ratio: 1.4906; } .our-values__btn { -ms-grid-column-align: start; justify-self: start; -ms-grid-column: 1; -ms-grid-column-span: 6; grid-column: 1/span 6; -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3/span 1; } @media (max-width: 1024px) { .our-values { display: block; } } @media (max-width: 640px) { .our-values__list { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .vacancies-block { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); gap: 0 20px; } .vacancies-block .breadcrum { -ms-grid-column: 1; -ms-grid-column-span: 5; grid-column: 1/span 5; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; } .vacancies-block__title { -ms-grid-column: 1; -ms-grid-column-span: 5; grid-column: 1/span 5; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/span 1; -webkit-margin-after: 20px; margin-block-end: 20px; } .vacancies-block__desc { -ms-grid-column: 1; -ms-grid-column-span: 5; grid-column: 1/span 5; -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3/span 1; -webkit-margin-after: 34px; margin-block-end: 34px; } .vacancies-block__desc > * + * { -webkit-margin-before: 20px; margin-block-start: 20px; } .vacancies-block__img { grid-column: 6/-1; -ms-grid-row: 1; -ms-grid-row-span: 4; grid-row: 1/span 4; } .vacancies-block__btn { -ms-grid-column: 1; -ms-grid-column-span: 5; grid-column: 1/span 5; -ms-grid-row: 4; -ms-grid-row-span: 1; grid-row: 4/span 1; -ms-grid-column-align: start; justify-self: start; } .vacancies-block__links { grid-column: 1/-1; -ms-grid-row: 5; -ms-grid-row-span: 1; grid-row: 5/span 1; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); gap: 20px; -webkit-margin-before: clamp(40px, 1.6304rem + 4.3478vi, 80px); margin-block-start: clamp(40px, 1.6304rem + 4.3478vi, 80px); } .vacancies-block__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: clamp(20px, 1.0438rem + 1.0309vi, 30px) clamp(20px, 0.8376rem + 2.0619vi, 40px); color: var(--clr-text); background-color: var(--clr-white); line-height: 1; border: 1px solid var(--clr-border); border-radius: clamp(20px, 1.0438rem + 1.0309vi, 30px); -webkit-box-shadow: 0 0 15px hsla(0, 0%, 0%, 0.1); box-shadow: 0 0 15px hsla(0, 0%, 0%, 0.1); -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } .vacancies-block__link i { color: var(--clr-accent); font-size: 40px; line-height: 1; } @media (hover: hover) { .vacancies-block__link:hover { color: var(--clr-accent); } .vacancies-block__link:hover i { -webkit-animation: arrow-btn 0.6s infinite alternate; animation: arrow-btn 0.6s infinite alternate; } } @media (max-width: 1024px) { .vacancies-block__links { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } @media (max-width: 992px) { .vacancies-block { display: block; } .vacancies-block__img { -webkit-margin-after: 20px; margin-block-end: 20px; } } .vacancy { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); gap: 0 20px; -webkit-padding-after: clamp(0rem, -4.1237rem + 20.6186vi, 200px); padding-block-end: clamp(0rem, -4.1237rem + 20.6186vi, 200px); } .vacancy__desc { -ms-grid-column: 1; -ms-grid-column-span: 6; grid-column: 1/span 6; } .vacancy__desc > p:nth-of-type(1) { max-inline-size: 634px; font-size: clamp(16px, 0.95rem + 0.25vi, 20px); line-height: 1.35; } .vacancy__desc h1 { -webkit-margin-after: 10px; margin-block-end: 10px; } .vacancy__desc > * + * { -webkit-margin-before: 20px; margin-block-start: 20px; } .vacancy__desc h2 { color: var(--clr-accent); } .vacancy__desc ul { -webkit-margin-start: 20px; margin-inline-start: 20px; -webkit-margin-after: clamp(20px, 1.0438rem + 1.0309vi, 30px); margin-block-end: clamp(20px, 1.0438rem + 1.0309vi, 30px); list-style: disc; } .vacancy__form-wrap { grid-column: 7/-1; -ms-grid-column-align: end; justify-self: end; max-inline-size: 526px; inline-size: 100%; } @media (max-width: 1024px) { .vacancy { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .vacancy__desc { grid-column: 1/-1; } .vacancy__form-wrap { grid-column: 1/-1; -ms-grid-column-align: unset; justify-self: unset; max-inline-size: 635px; } } @media (max-width: 390px) { .vacancy { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .vacancy__form-btm { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .steps { --w: 30px; --pad: 20px; position: relative; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); gap: 100px 20px; counter-reset: steps; } .steps__item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0 10px; max-inline-size: 308px; inline-size: 100%; block-size: 148px; padding: var(--pad); background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: clamp(20px, 1.0438rem + 1.0309vi, 30px); -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.07); box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.07); } .steps__item-img { -ms-flex-item-align: start; -ms-grid-row-align: start; align-self: start; -ms-flex-negative: 0; flex-shrink: 0; aspect-ratio: 0.6122; inline-size: 60px; } .steps__item-img img { inline-size: 100%; block-size: 100%; } .steps__item-title { font-size: 20px; } .steps__item-text { color: #9BB7A7; font-size: 12px; line-height: 1.25; } .steps__item:nth-child(even) { -ms-grid-column-align: end; justify-self: end; } .steps__item:nth-child(1), .steps__item:nth-child(3), .steps__item:nth-child(5) { -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; } .steps__item:nth-child(2), .steps__item:nth-child(4), .steps__item:nth-child(6) { -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/span 1; } .steps__item::before { content: ""; position: absolute; z-index: -1; inset-inline-start: calc(var(--pad) + var(--w) / 2); inset-block-start: 130px; inline-size: 2px; block-size: 60px; background-color: var(--clr-border); } .steps__item::after { counter-increment: steps; content: counter(steps); position: absolute; inset-block-start: 182px; display: -ms-grid; display: grid; place-items: center; inline-size: var(--w); block-size: var(--w); background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: 100vw; } .steps__item:nth-child(2)::after, .steps__item:nth-child(4)::after, .steps__item:nth-child(6)::after { inset-inline-start: 50%; inset-block-start: -65px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .steps__item:nth-child(2)::before, .steps__item:nth-child(4)::before, .steps__item:nth-child(6)::before { inset-inline-start: 50%; inset-block-start: -55px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .steps::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); inline-size: 100%; block-size: 2px; background-color: var(--clr-border); } .steps::after { content: ""; position: absolute; inset-inline-end: 0; inset-block-start: 125px; inline-size: 48px; block-size: 78px; background-image: url("../img/misc/flag.webp"); } @media (max-width: 1024px) { .steps { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); gap: 60px 20px; -webkit-margin-before: 30px; margin-block-start: 30px; } .steps__item { -ms-grid-column-align: start; justify-self: start; max-inline-size: unset; } .steps__item-text-wrap { display: -ms-grid; display: grid; -ms-flex-line-pack: center; align-content: center; } .steps__item-title { -webkit-margin-after: 10px; margin-block-end: 10px; } .steps__item:nth-child(1), .steps__item:nth-child(3), .steps__item:nth-child(5) { grid-row: unset; } .steps__item:nth-child(2), .steps__item:nth-child(4), .steps__item:nth-child(6) { grid-row: unset; } .steps__item::before { inset-inline-start: 50%; inset-block-start: -35px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .steps__item::after { inset-inline-start: 50%; inset-block-start: -45px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .steps__item:nth-child(2)::after, .steps__item:nth-child(4)::after, .steps__item:nth-child(6)::after { inset-inline-start: 50%; inset-block-start: -45px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .steps__item:nth-child(2)::before, .steps__item:nth-child(4)::before, .steps__item:nth-child(6)::before { inset-inline-start: 50%; inset-block-start: -35px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .steps::before { content: unset; } .steps::after { content: unset; } } @media (max-width: 768px) { .steps { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .steps__item { -ms-grid-column-align: center !important; justify-self: center !important; max-inline-size: 412px; } } .tabs-container { inline-size: 100%; } .tabs-container .tabs { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: clamp(10px, 0.4188rem + 1.0309vi, 20px); -webkit-margin-after: 20px; margin-block-end: 20px; } .tabs-container .tabs__item { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 10px 15px; color: var(--clr-white); background-color: var(--clr-hover); border-radius: 10px; -webkit-transition: background-color var(--tr); -o-transition: background-color var(--tr); transition: background-color var(--tr); } @media (hover: hover) { .tabs-container .tabs__item:hover { background-color: var(--clr-accent); } } .tabs-container .tabs__item.active { background-color: var(--clr-accent); } .tabs-container .panels__item { display: none; } .tabs-container .panels__item.active { --min-w: 180px; display: -ms-grid; display: grid; } .tabs-container .panels__item-logo { overflow: hidden; display: -ms-inline-grid; display: inline-grid; place-items: center; gap: 15px 0; padding: 20px; background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: clamp(20px, 0.7345rem + 2.5773vi, 45px); -webkit-box-shadow: 0 0 15px hsla(0, 0%, 0%, 0.07); box-shadow: 0 0 15px hsla(0, 0%, 0%, 0.07); } .tabs-container .panels__item-logo-img { inline-size: auto; block-size: 50px; } .tabs-container .panels__item-logo-img img { inline-size: auto; block-size: 100%; } .service { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); gap: 0 20px; } .service .breadcrum { -ms-grid-column: 1; -ms-grid-column-span: 6; grid-column: 1/span 6; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; } .service__title { -ms-grid-column: 1; -ms-grid-column-span: 6; grid-column: 1/span 6; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/span 1; } .service__subtitle { -ms-grid-column: 1; -ms-grid-column-span: 6; grid-column: 1/span 6; -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3/span 1; max-inline-size: 526px; } .service__btn { -ms-grid-column: 1; -ms-grid-column-span: 6; grid-column: 1/span 6; -ms-grid-row: 4; -ms-grid-row-span: 1; grid-row: 4/span 1; -ms-grid-column-align: start; justify-self: start; } .service__img { grid-column: 7/-1; -ms-grid-row: 1; -ms-grid-row-span: 5; grid-row: 1/span 5; } @media (max-width: 1024px) { .service { display: block; } .service__subtitle { max-inline-size: unset; } .service__btn { -webkit-margin-after: 20px; margin-block-end: 20px; } } .service-cards { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 1024px) { .service-cards { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .service-card { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[6]; grid-template-columns: repeat(6, 1fr); gap: 0 20px; padding: clamp(20px, 0.8376rem + 2.0619vi, 40px); background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: clamp(20px, 0.7345rem + 2.5773vi, 45px); -webkit-box-shadow: 0 0 15px hsla(0, 0%, 0%, 0.07); box-shadow: 0 0 15px hsla(0, 0%, 0%, 0.07); } .service-card__desc { -ms-grid-row-align: start; align-self: start; -ms-grid-column: 1; -ms-grid-column-span: 4; grid-column: 1/span 4; } .service-card__title { -webkit-margin-after: 10px; margin-block-end: 10px; font-weight: var(--fw-m); } .service-card__subtitle { color: #A1A1A1; } .service-card__list-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 12px; } .service-card__list-item::before { content: ""; -ms-flex-negative: 0; flex-shrink: 0; inline-size: 6px; block-size: 6px; background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='3' fill='%2320A85A'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; } .service-card__list > * + * { -webkit-margin-before: 6px; margin-block-start: 6px; } .service-card__extra { -ms-grid-row-align: start; align-self: start; grid-column: 5/-1; display: -ms-grid; display: grid; gap: 18px; } .service-card__btns { display: -ms-grid; display: grid; gap: 10px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .service-card__btn { block-size: 47px; font-size: 12px; } @media (max-width: 1024px) { .service-card { -ms-grid-column-align: center; justify-self: center; max-inline-size: 640px; } } @media (max-width: 550px) { .service-card { -ms-grid-column-align: center; justify-self: center; display: block; max-inline-size: 640px; } .service-card__desc { -webkit-margin-after: 20px; margin-block-end: 20px; } .service-card__img { display: -ms-grid; display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .service-card__img img { max-inline-size: 300px; } .service-card__btns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0 10px; } } .we-do-cards.auto-grid { --min-w: 310px; } .we-do-card { -webkit-perspective: 150rem; perspective: 150rem; position: relative; block-size: 175px; -webkit-box-shadow: none; box-shadow: none; background: none; } .we-do-card__side { -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0; height: 175px; border: 1px solid var(--clr-border); border-radius: 45px; -webkit-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; color: var(--clr-white); -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.07); box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.07); } .we-do-card__side.front { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; inline-size: 100%; padding: clamp(20px, 1.0438rem + 1.0309vi, 30px); color: var(--clr-text); background-color: var(--clr-white); } .we-do-card__side.back { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); display: -ms-grid; display: grid; place-items: center; gap: 10px 0; inline-size: 100%; padding: 20px clamp(20px, 1.0438rem + 1.0309vi, 30px); color: var(--clr-white); background-color: var(--clr-accent); } .we-do-card__img { -ms-flex-negative: 0; flex-shrink: 0; inline-size: 116px; } .we-do-card__desc { display: -ms-grid; display: grid; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px 0; } .we-do-card__title { font-weight: var(--fw-m); } .we-do-card__btn { block-size: 47px; color: var(--clr-white); font-size: 12px; border-color: var(--clr-white); } .we-do-card:hover .we-do-card__side.front { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .we-do-card:hover .we-do-card__side.back { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } @media (max-width: 429px) { .we-do-card__img { inline-size: 60px; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .we-do-card__title { -webkit-margin-after: unset; margin-block-end: unset; } } .you-get-cards.auto-grid { --min-w: 310px; gap: clamp(10px, 0.4188rem + 1.0309vi, 20px); } .you-get-card { --p: clamp(20px, 1.0438rem + 1.0309vi, 30px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 15px; padding: var(--p); background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: var(--p); -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.07); box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.07); -webkit-transition: -webkit-transform var(--tr); transition: -webkit-transform var(--tr); -o-transition: transform var(--tr); transition: transform var(--tr); transition: transform var(--tr), -webkit-transform var(--tr); } @media (hover: hover) { .you-get-card:hover { -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); } } .you-get-card__img { -ms-flex-negative: 0; flex-shrink: 0; } .you-get-card__img i { color: var(--clr-accent); font-size: 40px; line-height: 1; } .cases-title-block { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } .cases-title-block h1 { -webkit-margin-after: unset; margin-block-end: unset; } .cases-filter { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px 20px; color: var(--clr-accent); background-color: var(--clr-white); font-weight: var(--fw-m); border-radius: 10vw; } .cases-filter.subtitle { -webkit-margin-after: unset; margin-block-end: unset; } .case-cards.auto-grid { --min-w: 310px; --r-g: clamp(40px, 2.0876rem + 2.0619vi, 60px); } .case-card .our-cases__slide-top { -webkit-margin-before: clamp(-80px, -2.0909rem - 3.6082vi, -45px); margin-block-start: clamp(-80px, -2.0909rem - 3.6082vi, -45px); } .case-card.hide { display: none; } .other-cases { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); gap: 40px 20px; } @media (max-width: 768px) { .other-cases { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .price-cards { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); gap: 0 20px; -webkit-margin-before: 100px; margin-block-start: 100px; } .price-card { position: relative; padding: 50px clamp(20px, 1.0438rem + 1.0309vi, 30px) clamp(20px, 1.0438rem + 1.0309vi, 30px); background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: clamp(30px, 1.5657rem + 1.5464vi, 45px); } .price-card__top { display: -ms-grid; display: grid; justify-items: center; gap: 10px 0; -webkit-margin-after: 34px; margin-block-end: 34px; text-align: center; } .price-card__top-pretitle { font-size: 12px; color: #6C8778; } .price-card__top-title { color: var(--clr-accent); font-size: 26px; } .price-card__top-subtitle { max-inline-size: 259px; font-size: 12px; line-height: 1.25; color: #072C17; } .price-card__mid { -webkit-margin-after: 25px; margin-block-end: 25px; } .price-card__mid-intro { -webkit-margin-after: 8px; margin-block-end: 8px; font-size: 12px; color: #6C8778; } .price-card__mid-list { font-size: 14px; } .price-card__mid-list-item, .price-card__mid-list li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 10px; padding-block: 8px; -webkit-border-after: 1px solid #DCEAE2; border-block-end: 1px solid #DCEAE2; } .price-card__mid-list-item .unavailable, .price-card__mid-list li .unavailable { color: #8AA897; -webkit-text-decoration-line: line-through; text-decoration-line: line-through; } .price-card__btm { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } .price-card__btm-price { display: -ms-grid; display: grid; gap: 0; } .price-card__btm-price-old { -webkit-margin-after: 3px; margin-block-end: 3px; color: lightgray; -webkit-text-decoration-line: line-through; text-decoration-line: line-through; } .price-card__btm-price-old span { font-size: 18px; } .price-card__btm-price-num { color: var(--clr-accent); } .price-card__btm-price-num span { font-size: 22px; font-weight: var(--fw-b); } .price-card__btm-price-period { font-size: 12px; } .price-card__btm-btn { block-size: 47px; font-size: 12px; } .price-card:nth-child(1) .price-card__img { position: absolute; inset-inline-start: 50%; inset-block-start: 0; -webkit-transform: translate(-50%, -79%); -ms-transform: translate(-50%, -79%); transform: translate(-50%, -79%); inline-size: 99px; block-size: 85px; } .price-card:nth-child(2) .price-card__img { position: absolute; inset-inline-start: 52%; inset-block-start: 1.5%; -webkit-transform: translate(-50%, -60%) scale(0.85); -ms-transform: translate(-50%, -60%) scale(0.85); transform: translate(-50%, -60%) scale(0.85); inline-size: 151px; block-size: 156px; } .price-card:nth-child(3) .price-card__img { position: absolute; inset-inline-start: 50%; inset-block-start: 0; -webkit-transform: translate(-50%, -87%); -ms-transform: translate(-50%, -87%); transform: translate(-50%, -87%); inline-size: 199px; block-size: 171px; } @media (max-width: 1100px) { .price-cards { -ms-grid-columns: 1fr; grid-template-columns: 1fr; justify-items: center; gap: 100px 0; } .price-card { max-inline-size: 600px; inline-size: 100%; } .price-card:nth-child(2) { -webkit-margin-after: 50px; margin-block-end: 50px; } } @media (max-width: 360px) { .price-card__btm { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .data-info { position: relative; display: -ms-grid; display: grid; place-items: center; inline-size: 15px; block-size: 15px; margin: 0; padding: 0; color: var(--clr-accent); font-size: 11px; line-height: 1; border: 1px solid var(--clr-accent); border-radius: 100vw; cursor: pointer; -webkit-transition: color var(--tr), background-color var(--tr); -o-transition: color var(--tr), background-color var(--tr); transition: color var(--tr), background-color var(--tr); } @media (hover: hover) { .data-info:hover { color: var(--clr-white); background-color: var(--clr-accent); } } .data-info span { position: absolute; inset-inline-start: 0; inset-block-start: 0; -webkit-transform: translate(-100%, -100%); -ms-transform: translate(-100%, -100%); transform: translate(-100%, -100%); inline-size: 150px; padding: 10px; background-color: var(--clr-white); font-size: 13px; line-height: 1.5; border: 1px solid var(--clr-border); border-radius: 10px 10px 0 10px; -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.07); box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.07); display: none; } .data-info span.active { display: block; color: var(--clr-text); } .questions { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); gap: 0 20px; padding: clamp(20px, 0.8376rem + 2.0619vi, 40px); color: var(--clr-white); background-color: #0A8840; background-image: url("../img/misc/questions-bg.webp"); background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: clamp(20px, 0.7345rem + 2.5773vi, 45px); } .questions__title { -ms-grid-column: 1; -ms-grid-column-span: 8; grid-column: 1/span 8; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; -webkit-margin-after: 20px; margin-block-end: 20px; font-size: clamp(24px, 1.2526rem + 1.2371vi, 36px); line-height: 1.2; text-transform: uppercase; } .questions__text { -ms-grid-column: 1; -ms-grid-column-span: 8; grid-column: 1/span 8; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/span 1; max-inline-size: 596px; -webkit-margin-after: clamp(20px, 0.7345rem + 2.5773vi, 45px); margin-block-end: clamp(20px, 0.7345rem + 2.5773vi, 45px); } .questions__btn { -ms-grid-column: 1; -ms-grid-column-span: 8; grid-column: 1/span 8; -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3/span 1; -ms-grid-column-align: start; justify-self: start; -ms-grid-row-align: end; align-self: end; } .questions__img { grid-column: 9/-1; -ms-grid-row: 1; -ms-grid-row-span: 4; grid-row: 1/span 4; aspect-ratio: 1.1206; max-inline-size: 325px; -webkit-margin-after: -70px; margin-block-end: -70px; } @media (hover: hover) { .questions__img:hover img:nth-child(1) { display: block; } .questions__img:hover img:nth-child(2) { display: none; } } .questions__img img { inline-size: 100%; block-size: 100%; } .questions__img img:nth-child(1) { display: none; } @media (max-width: 700px) { .questions { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .questions__title { grid-column: 1/-1; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; } .questions__text { grid-column: 1/-1; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/span 1; } .questions__btn { grid-column: 1/-1; -ms-grid-row: 4; -ms-grid-row-span: 1; grid-row: 4/span 1; } .questions__img { -ms-grid-column-align: end; justify-self: end; grid-column: 1/-1; -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3/span 1; -webkit-margin-after: 20px; margin-block-end: 20px; } } .service-custom { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); gap: 0 20px; } .service-custom__desc { -ms-grid-column: 1; -ms-grid-column-span: 6; grid-column: 1/span 6; } .service-custom__title { -webkit-margin-after: 20px; margin-block-end: 20px; } .service-custom__subtitle { -webkit-margin-after: 10px; margin-block-end: 10px; font-weight: var(--fw-m); } .service-custom__list { -webkit-margin-after: 20px; margin-block-end: 20px; } .service-custom__btns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .service-custom__img { grid-column: 7/-1; } @media (max-width: 1024px) { .service-custom { display: block; } .service-custom__btns { -webkit-margin-after: 20px; margin-block-end: 20px; } .service-custom__img { display: -ms-grid; display: grid; place-items: center; } .service-custom__img img { max-inline-size: 635px; } } .contacts { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); gap: 60px 20px; -webkit-margin-after: 0; margin-block-end: 0; } .contacts__top { -ms-grid-column: 1; -ms-grid-column-span: 8; grid-column: 1/span 8; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; } .contacts__btm { -ms-grid-column: 1; -ms-grid-column-span: 8; grid-column: 1/span 8; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/span 1; } .contacts__img { grid-column: 9/-1; -ms-grid-row: 1; -ms-grid-row-span: 3; grid-row: 1/span 3; -ms-grid-column-align: end; justify-self: end; max-inline-size: 307px; } .contacts__list.auto-grid { --r-g: 40px; } .contacts__list-item { -ms-grid-row-align: start; align-self: start; display: -ms-grid; display: grid; gap: 5px; } .contacts__list-item-name { -webkit-margin-after: 5px; margin-block-end: 5px; font-weight: var(--fw-m); } .contacts__list-item a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; color: var(--clr-accent); -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } .contacts__list-item a .tel { font-size: 24px; } @media (hover: hover) { .contacts__list-item a:hover { color: var(--clr-hover); } } .contacts__list-item .socials { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; } .contacts__list-item .socials i { font-size: 28px; } @media (max-width: 1100px) { .contacts__img { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; max-inline-size: unset; } } @media (max-width: 824px) { .contacts { -webkit-margin-after: 40px; margin-block-end: 40px; } .contacts__top { -ms-grid-column: 1; -ms-grid-column-span: 5; grid-column: 1/span 5; } .contacts__btm { -ms-grid-column: 1; -ms-grid-column-span: 5; grid-column: 1/span 5; } .contacts__img { grid-column: 6/-1; -ms-grid-row: 1; -ms-grid-row-span: 2; grid-row: 1/span 2; } } @media (max-width: 600px) { .contacts { -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 30px 20px; -webkit-margin-after: 0; margin-block-end: 0; } .contacts__top { grid-column: 1/-1; } .contacts__btm { grid-column: 1/-1; } .contacts__img { grid-column: 1/-1; -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3/span 1; max-inline-size: 307px; -ms-grid-column-align: center; justify-self: center; } .contacts__list.auto-grid { --r-g: 30px; } } .contacts-form-wrap { display: flex; flex-direction:column; gap: 0 20px; -webkit-margin-after: clamp(40px, 1.4691rem + 5.1546vi, 90px); margin-block-end: clamp(40px, 1.4691rem + 5.1546vi, 90px); -webkit-margin-after: clamp(50px, 0.0322rem + 15.4639vi, 200px); margin-block-end: clamp(50px, 0.0322rem + 15.4639vi, 200px); -webkit-margin-after: clamp(50px, -2.442rem + 27.8351vi, 320px); margin-block-end: clamp(50px, -2.442rem + 27.8351vi, 320px); } .contacts-form-wrap__img { -ms-grid-row-align: start; align-self: start; overflow: hidden; grid-column: 9/-1; position: relative; color: var(--clr-text); border: 1px solid var(--clr-border); border-radius: 45px; -webkit-transition: color var(--tr), -webkit-box-shadow var(--tr); transition: color var(--tr), -webkit-box-shadow var(--tr); -o-transition: color var(--tr), box-shadow var(--tr); transition: color var(--tr), box-shadow var(--tr); transition: color var(--tr), box-shadow var(--tr), -webkit-box-shadow var(--tr); } @media (hover: hover) { .contacts-form-wrap__img:hover { color: var(--clr-accent); -webkit-box-shadow: 0 0 15px hsla(0, 0%, 0%, 0.07); box-shadow: 0 0 15px hsla(0, 0%, 0%, 0.07); } } .contacts-form-wrap__img-desc { position: absolute; inset-inline-start: 50%; inset-block-start: 30px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); display: -ms-grid; display: grid; justify-items: center; gap: 15px 0; inline-size: 100%; text-align: center; } .contacts-form-wrap__img-title { font-size: 26px; text-transform: uppercase; } .contacts-form-wrap__img-text { max-inline-size: 190px; } @media (max-width: 992px) { .contacts-form-wrap { display: block; } .contacts-form-wrap__img { display: block; max-inline-size: 417px; } .contacts-form { -webkit-margin-after: 30px; margin-block-end: 30px; } .contacts-form__top textarea { max-inline-size: unset; } } @media (max-width: 768px) { .contacts-form__btm { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .contacts-form__btm-btn { -ms-flex-item-align: start; -ms-grid-row-align: start; align-self: start; } } @media (max-width: 640px) { .contacts-form__top > *:not(:last-child) { -ms-flex-preferred-size: 100%; flex-basis: 100%; } } .why { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); gap: 0 20px; } .why__top { -ms-grid-column: 1; -ms-grid-column-span: 4; grid-column: 1/span 4; } .why__top-title { -webkit-margin-after: 20px; margin-block-end: 20px; font-size: clamp(18px, 0.9601rem + 0.8247vi, 26px); line-height: 1.3; } .why__top-list > * + * { -webkit-margin-before: 15px; margin-block-start: 15px; } .why__top-list-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .why__top-list-item::before { content: ""; inline-size: 6px; block-size: 6px; background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='3' fill='%2320A85A'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; } .why__btm { grid-column: 5/-1; } .why__btm-list-item { display: -ms-grid; display: grid; } .why__btm-list-item i { color: var(--clr-accent); font-size: 40px; line-height: 1; -webkit-margin-after: 10px; margin-block-end: 10px; } @media (max-width: 1024px) { .why { display: block; } .why__top-list { -webkit-margin-after: 20px; margin-block-end: 20px; } } .game { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); gap: 20px; padding: clamp(20px, 1.0438rem + 1.0309vi, 30px); color: var(--clr-white); background-color: var(--clr-accent); border-radius: clamp(20px, 0.7345rem + 2.5773vi, 45px); } .game__desc { -ms-grid-column: 1; -ms-grid-column-span: 4; grid-column: 1/span 4; -ms-grid-row-align: center; align-self: center; } .game__title { -webkit-margin-after: 20px; margin-block-end: 20px; font-size: clamp(24px, 1.2526rem + 1.2371vi, 36px); line-height: 1.3; text-transform: uppercase; } .game__item { grid-column: 5/-1; block-size: 251px; background-color: var(--clr-white); border-radius: clamp(16px, 0.7113rem + 1.4433vi, 30px); } @media (max-width: 992px) { .game { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .game__desc { grid-column: 1/-1; } .game__item { grid-column: 1/-1; } } .offline .runner-container { width: unset; } .news-block { position: relative; z-index: 0; display: -ms-grid; display: grid; } .news-block__title { -webkit-margin-after: 20px; margin-block-end: 20px; } .news-block__cards { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); gap: 0 20px; -webkit-margin-after: clamp(20px, 1.0438rem + 1.0309vi, 30px); margin-block-end: clamp(20px, 1.0438rem + 1.0309vi, 30px); } .news-block__btn { -ms-grid-column-align: end; justify-self: end; } .news-cards { -webkit-margin-after: 40px; margin-block-end: 40px; } .news-cards.auto-grid { --min-w: 310px; } .news-card { overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; color: var(--clr-text); background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: 45px; -webkit-transition: -webkit-box-shadow var(--tr); transition: -webkit-box-shadow var(--tr); -o-transition: box-shadow var(--tr); transition: box-shadow var(--tr); transition: box-shadow var(--tr), -webkit-box-shadow var(--tr); } .news-card.hide { display: none; } .news-card:hover { -webkit-box-shadow: 0 0 20px hsla(146, 86%, 19%, 0.1); box-shadow: 0 0 20px hsla(146, 86%, 19%, 0.1); } .news-card:hover .news-card__title { color: var(--clr-accent); } .news-card:hover .news-card__img img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .news-card__img { overflow: hidden; aspect-ratio: 1.9395/1; inline-size: 100%; } .news-card__img img { block-size: 100%; -webkit-transition: -webkit-transform var(--tr); transition: -webkit-transform var(--tr); -o-transition: transform var(--tr); transition: transform var(--tr); transition: transform var(--tr), -webkit-transform var(--tr); } .news-card__btm { padding: clamp(20px, 0.3305rem + 1.9157vi, 30px); } .news-card__extra { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 3px 20px; -webkit-margin-after: 10px; margin-block-end: 10px; color: #6C8778; font-size: 14px; line-height: 1.5; } .news-card__msg { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 5px; } .news-card__msg i { color: var(--clr-accent); font-size: 21px; } .news-card__title { -webkit-margin-after: 5px; margin-block-end: 5px; font-size: 20px; font-weight: var(--fw-m); line-height: 1.4; -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } @media (max-width: 768px) { .news-block__cards { overflow-x: scroll; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0 10px; margin-inline: -20px; padding-inline: 20px; } .news-block__cards::-webkit-scrollbar { height: 0px !important; } .news-block__cards::-webkit-scrollbar-track { background-color: transparent; } .news-block__cards::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 100vw; } .news-card { min-inline-size: 280px; } } .author { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); gap: 20px; } .author__img { -ms-grid-column: 1; -ms-grid-column-span: 3; grid-column: 1/span 3; aspect-ratio: 1; overflow: hidden; max-inline-size: 300px; border-radius: 100vw; } .author__share { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 13px; color: var(--clr-accent); -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } @media (hover: hover) { .author__share:hover { color: var(--clr-hover); } .author__share:hover svg { fill: var(--clr-hover); } } .author__share svg { inline-size: 20px; block-size: 20px; fill: var(--clr-accent); -webkit-transition: fill var(--tr); -o-transition: fill var(--tr); transition: fill var(--tr); } .author__desc { grid-column: 4/-1; -ms-grid-column-align: end; justify-self: end; -ms-grid-row-align: start; align-self: start; display: -ms-grid; display: grid; gap: 20px; max-inline-size: 853px; } .author__desc-title { -webkit-margin-after: 0; margin-block-end: 0; } .author__desc-text > * + * { -webkit-margin-before: 20px; margin-block-start: 20px; } @media (max-width: 640px) { .author { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .author__img { grid-column: 1/-1; } .author__desc { grid-column: 1/-1; } } .news-menu { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; block-size: 24px; } .news-menu .menu-item a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; inline-size: -webkit-max-content; inline-size: -moz-max-content; inline-size: max-content; color: var(--clr-text); -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } @media (hover: hover) { .news-menu .menu-item a:hover { color: var(--clr-accent); } } .news-menu .menu-item a i { color: var(--clr-accent); -webkit-transition: -webkit-transform var(--tr); transition: -webkit-transform var(--tr); -o-transition: transform var(--tr); transition: transform var(--tr); transition: transform var(--tr), -webkit-transform var(--tr); } .news-menu .menu-item a i.rotate { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .news-menu .menu-item__img { -ms-flex-negative: 0; flex-shrink: 0; inline-size: 30px; block-size: 30px; border: 1px solid var(--clr-border); border-radius: 100vw; } .news-menu .menu-item .sub-menu { position: absolute; inset-block-start: calc(100% + 10px); display: none; gap: 20px 0; padding: 25px; background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: 30px; } .news-menu .menu-item .sub-menu.active { display: -ms-grid; display: grid; } .news-title-block { position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px 40px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-margin-after: 40px; margin-block-end: 40px; } .news-filter { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px 5px; -webkit-margin-after: 16px; margin-block-end: 16px; } .news-filter__item { padding: 10px 15px; background-color: transparent; font-size: 14px; border: 1px solid var(--clr-border); border-radius: 100vw; -webkit-transition: background-color var(--tr), color var(--tr); -o-transition: background-color var(--tr), color var(--tr); transition: background-color var(--tr), color var(--tr); } .news-filter__item.active { color: var(--clr-white); background-color: var(--clr-accent); } .nsb__top { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); gap: 0 20px; } .nsb__top-img { overflow: hidden; -ms-grid-column: 1; -ms-grid-column-span: 8; grid-column: 1/span 8; aspect-ratio: 1.6533; border-radius: 45px; max-inline-size: 744px; } .nsb__top-info { grid-column: 9/-1; } .nsb__top-info .info__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 20px; -webkit-margin-after: 30px; margin-block-end: 30px; font-size: 14px; } .nsb__top-info .info__top a { color: var(--clr-accent); -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } @media (hover: hover) { .nsb__top-info .info__top a:hover { color: var(--clr-hover); } } .nsb__top-info .info__top li { list-style: none; } .nsb__top-info .info__top li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 5px; } .nsb__top-info .info__mid { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; -webkit-margin-after: 15px; margin-block-end: 15px; font-size: 14px; line-height: 1.25; } .nsb__top-info .info__mid-img { -ms-flex-negative: 0; flex-shrink: 0; overflow: hidden; aspect-ratio: 1; inline-size: 89px; block-size: 89px; border-radius: 100vw; } .nsb__top-info .info__mid-img img { block-size: 100%; } .nsb__top-info .info__mid-desc { display: -ms-grid; display: grid; gap: 2px; } .nsb__top-info .info__mid-desc-name a { color: var(--clr-accent); font-size: clamp(1.125rem, 1.0838rem + 0.2062vi, 1.25rem); -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } @media (hover: hover) { .nsb__top-info .info__mid-desc-name a:hover { color: var(--clr-hover); } } .nsb__top-info .info__about { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0 10px; color: var(--clr-accent); font-size: 14px; text-transform: uppercase; } @media (hover: hover) { .nsb__top-info .info__about:hover i { -webkit-animation: arrow-btn 0.6s infinite alternate; animation: arrow-btn 0.6s infinite alternate; } } .nsb__mid { -webkit-margin-after: 30px; margin-block-end: 30px; -webkit-padding-after: 30px; padding-block-end: 30px; -webkit-border-after: 1px solid var(--clr-border); border-block-end: 1px solid var(--clr-border); } .nsb__mid > * + * { -webkit-margin-before: 20px; margin-block-start: 20px; } .nsb__btm { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px 50px; } .nsb__btm .socials { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } .nsb__btm .socials a { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; color: var(--clr-accent); -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } .nsb__btm .socials a i { font-size: 32px; line-height: 1; } @media (hover: hover) { .nsb__btm .socials a:hover { color: var(--clr-hover); } } @media (max-width: 900px) { .nsb__top { display: block; } .nsb__top-img { -webkit-margin-after: 30px; margin-block-end: 30px; } } .ready-wrap { position: relative; z-index: 0; -webkit-margin-before: clamp(-600px, 0rem - 31.25vi, -100px); margin-block-start: clamp(-600px, 0rem - 31.25vi, -100px); -webkit-margin-after: unset; margin-block-end: unset; -webkit-padding-before: clamp(150px, 3.75rem + 28.125vi, 600px); padding-block-start: clamp(150px, 3.75rem + 28.125vi, 600px); background-image: url("../img/misc/ready-bg2.webp"), url("../img/misc/ready-bg1.webp"); background-repeat: no-repeat; background-position: left bottom clamp(-1100px, 13.75rem - 68.75vi, 0px), left top; background-size: 100% auto, 100% auto; } .ready { position: relative; z-index: 1; -webkit-transform: translateY(clamp(-20px, -2.125rem + 4.375vi, 50px)); -ms-transform: translateY(clamp(-20px, -2.125rem + 4.375vi, 50px)); transform: translateY(clamp(-20px, -2.125rem + 4.375vi, 50px)); } .ready__title { -webkit-margin-after: 10px; margin-block-end: 10px; -webkit-padding-before: 0px; padding-block-start: 0px; color: var(--clr-white); } .ready__subtitle { -webkit-margin-after: clamp(10px, 0.2126rem + 2.0619vi, 30px); margin-block-end: clamp(10px, 0.2126rem + 2.0619vi, 30px); color: var(--clr-white); } .ready br { display: none; } @media (max-width: 1024px) { .ready br { display: inline; } } .bear { --w: clamp(50px, 0.5rem + 13.125vi, 260px); --h: calc(var(--w) / 1.0441); position: absolute; z-index: 11; inset-inline-end: 11%; inset-block-end: 3%; inline-size: var(--w); background-color: var(--clr-bg-footer); } .bear__img { position: absolute; inset-block-start: calc(-1 * var(--h)); inline-size: var(--w); block-size: var(--h); } .bear__talk { position: absolute; inset-inline-start: 0; inset-block-start: calc(-1.15 * var(--h)); -webkit-transform: translate(-30%, calc(-100% - 20px)); -ms-transform: translate(-30%, calc(-100% - 20px)); transform: translate(-30%, calc(-100% - 20px)); inline-size: calc(var(--w) + clamp(0px, 6.875rem - 10vi, 50px)); padding: clamp(5px, 0.125rem + 0.9375vi, 20px) clamp(15px, 0.675rem + 1.3125vi, 36px); color: var(--clr-white); background-color: var(--clr-hover); font-size: clamp(13px, 0.725rem + 0.4375vi, 20px); border-radius: clamp(30px, 1.625rem + 1.25vi, 50px); } .bear::before { content: ""; position: absolute; inset-inline-end: 50%; inset-block-end: calc(1.04 * var(--h)); -webkit-transform: translateY(-75%); -ms-transform: translateY(-75%); transform: translateY(-75%); inline-size: 19px; block-size: 15px; background-color: var(--clr-hover); border-radius: 50%; } .bear::after { content: ""; position: absolute; inset-inline-end: 60%; inset-block-end: var(--h); -webkit-transform: translateY(-5%); -ms-transform: translateY(-5%); transform: translateY(-5%); inline-size: 11px; block-size: 9px; background-color: var(--clr-hover); border-radius: 50%; } @media (max-width: 600px) { .ready-wrap { background-position: left bottom clamp(-140px, 19.375rem - 75vi, 70px), left top; } .bear { position: relative; inset-inline-end: unset; inset-block-end: unset; display: -ms-grid; display: grid; inline-size: unset; block-size: unset; padding-block: 5px 20px; } .bear__img { inset-inline-end: 10%; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .bear__talk { -ms-grid-column-align: center; justify-self: center; position: static; inset-inline-start: unset; inset-block-start: unset; -webkit-transform: unset; -ms-transform: unset; transform: unset; inline-size: unset; color: var(--clr-text); text-align: center; } .bear::before { content: ""; inset-inline-end: 15%; inset-block-start: calc(-1 * var(--h)); inset-block-end: unset; -webkit-transform: translateY(-300%); -ms-transform: translateY(-300%); transform: translateY(-300%); } .bear::after { content: ""; inset-inline-end: 18%; inset-block-start: calc(-1 * var(--h)); inset-block-end: unset; -webkit-transform: translateY(-300%); -ms-transform: translateY(-300%); transform: translateY(-300%); } } .boloto { position: relative; z-index: 0; } .boloto img { width: unset; } .boloto .water { position: absolute; z-index: 0; inset-inline-start: 0; inset-block-end: 0; inline-size: 100%; } .boloto .msg1 { position: absolute; z-index: 6; inset-inline-start: 42%; inset-block-end: 45%; aspect-ratio: 1.1834/1; inline-size: clamp(25px, 0rem + 7.8125vi, 150px); -webkit-animation: msg1 5s ease-in-out infinite; animation: msg1 5s ease-in-out infinite; } .boloto .msg2 { position: absolute; z-index: 6; inset-inline-start: 54.5%; inset-block-end: 56%; aspect-ratio: 0.9049/1; inline-size: clamp(25px, 0rem + 7.8125vi, 150px); -webkit-animation: msg2 6s ease-in-out infinite; animation: msg2 6s ease-in-out infinite; } .boloto .msg3 { position: absolute; z-index: 6; inset-inline-start: 60%; inset-block-end: 20%; aspect-ratio: 1.1173/1; inline-size: clamp(25px, 0rem + 7.8125vi, 150px); -webkit-animation: msg3 6s ease-in-out infinite; animation: msg3 6s ease-in-out infinite; } .boloto .sharik3 { position: absolute; z-index: 6; inset-inline-start: 68%; inset-block-end: 60%; aspect-ratio: 1; inline-size: clamp(6px, -0.05rem + 2.125vi, 40px); -webkit-animation: sharik1 8s ease-in-out infinite; animation: sharik1 8s ease-in-out infinite; } .boloto .sharik2 { position: absolute; z-index: 6; inset-inline-start: 49.5%; inset-block-end: 78%; aspect-ratio: 1; inline-size: clamp(8px, -0.15rem + 3.25vi, 60px); -webkit-animation: sharik1 8s ease-in-out infinite; animation: sharik1 8s ease-in-out infinite; } .boloto .sharik1 { position: absolute; z-index: 6; inset-inline-start: 50%; inset-block-end: 75%; aspect-ratio: 1; inline-size: clamp(8px, -0.15rem + 3.25vi, 60px); -webkit-animation: sharik1 6s ease-in-out infinite; animation: sharik1 6s ease-in-out infinite; } .boloto .girl { position: absolute; z-index: 6; inset-inline-start: 50%; inset-block-end: 3%; aspect-ratio: 0.6842/1; inline-size: clamp(30px, -0.025rem + 9.5vi, 182px); } .boloto .torsher { position: absolute; z-index: 7; inset-inline-start: 30%; inset-block-end: 10%; aspect-ratio: 0.4504/1; inline-size: clamp(25px, 0rem + 7.8125vi, 150px); -webkit-animation: torsher 15s ease-in-out infinite; animation: torsher 15s ease-in-out infinite; } .boloto .water-patch { position: absolute; z-index: 8; inset-inline-start: 25%; inset-block-end: 10%; aspect-ratio: 18.4615/1; inline-size: 50%; -webkit-animation: water-patch 4s ease-in-out infinite; animation: water-patch 4s ease-in-out infinite; } .boloto .gorshok { position: absolute; z-index: 9; inset-inline-start: 44%; inset-block-end: 7%; aspect-ratio: 0.6802/1; inline-size: clamp(15px, -0.125rem + 5.3125vi, 100px); -webkit-animation: gorshok 10s ease-in-out infinite; animation: gorshok 10s ease-in-out infinite; } .boloto .kamysh { position: relative; z-index: 10; width: 100%; } @-webkit-keyframes water-patch { 50% { -webkit-transform: translateY(clamp(-10px, 0.125rem - 0.625vi, 0px)); transform: translateY(clamp(-10px, 0.125rem - 0.625vi, 0px)); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes water-patch { 50% { -webkit-transform: translateY(clamp(-10px, 0.125rem - 0.625vi, 0px)); transform: translateY(clamp(-10px, 0.125rem - 0.625vi, 0px)); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes torsher { 50% { -webkit-transform: rotate(25deg); transform: rotate(25deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes torsher { 50% { -webkit-transform: rotate(25deg); transform: rotate(25deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes gorshok { 50% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes gorshok { 50% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes msg1 { 50% { -webkit-transform: translate(clamp(-10px, 0.125rem - 0.625vi, 0px), clamp(-10px, 0.125rem - 0.625vi, 0px)); transform: translate(clamp(-10px, 0.125rem - 0.625vi, 0px), clamp(-10px, 0.125rem - 0.625vi, 0px)); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes msg1 { 50% { -webkit-transform: translate(clamp(-10px, 0.125rem - 0.625vi, 0px), clamp(-10px, 0.125rem - 0.625vi, 0px)); transform: translate(clamp(-10px, 0.125rem - 0.625vi, 0px), clamp(-10px, 0.125rem - 0.625vi, 0px)); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes msg2 { 50% { -webkit-transform: translate(clamp(0px, -0.125rem + 0.625vi, 10px), clamp(-10px, 0.125rem - 0.625vi, 0px)); transform: translate(clamp(0px, -0.125rem + 0.625vi, 10px), clamp(-10px, 0.125rem - 0.625vi, 0px)); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes msg2 { 50% { -webkit-transform: translate(clamp(0px, -0.125rem + 0.625vi, 10px), clamp(-10px, 0.125rem - 0.625vi, 0px)); transform: translate(clamp(0px, -0.125rem + 0.625vi, 10px), clamp(-10px, 0.125rem - 0.625vi, 0px)); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes msg3 { 50% { -webkit-transform: translateY(clamp(0px, -0.125rem + 0.625vi, 10px)); transform: translateY(clamp(0px, -0.125rem + 0.625vi, 10px)); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes msg3 { 50% { -webkit-transform: translateY(clamp(0px, -0.125rem + 0.625vi, 10px)); transform: translateY(clamp(0px, -0.125rem + 0.625vi, 10px)); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes sharik1 { 50% { -webkit-transform: translateY(clamp(-10px, 0.125rem - 0.625vi, 0px)); transform: translateY(clamp(-10px, 0.125rem - 0.625vi, 0px)); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes sharik1 { 50% { -webkit-transform: translateY(clamp(-10px, 0.125rem - 0.625vi, 0px)); transform: translateY(clamp(-10px, 0.125rem - 0.625vi, 0px)); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .footer { -webkit-margin-after: unset; margin-block-end: unset; -webkit-padding-before: 10px; padding-block-start: 10px; -webkit-padding-after: clamp(40px, 2.0876rem + 2.0619vi, 60px); padding-block-end: clamp(40px, 2.0876rem + 2.0619vi, 60px); color: var(--clr-white); background-color: var(--clr-bg-footer); } .footer__logo { display: block; aspect-ratio: 2.1111/1; inline-size: 114px; } .footer__logo img { inline-size: 100%; } .footer__menu-block { display: -ms-grid; display: grid; -ms-grid-columns: 4fr 2fr 3fr 3fr; grid-template-columns: 4fr 2fr 3fr 3fr; gap: 0 20px; padding-block: 0px 10px; } .footer__desc { display: -ms-grid; display: grid; } .footer__desc-link { display: block; color: var(--clr-white); font-size: 14px; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; -webkit-text-decoration-line: underline; text-decoration-line: underline; text-underline-offset: 3px; -webkit-transition: -webkit-text-decoration-color var(--tr); transition: -webkit-text-decoration-color var(--tr); -o-transition: text-decoration-color var(--tr); transition: text-decoration-color var(--tr); transition: text-decoration-color var(--tr), -webkit-text-decoration-color var(--tr); } .footer__desc-link:hover { color: var(--clr-hover); -webkit-text-decoration-color: var(--clr-hover); text-decoration-color: var(--clr-hover); } .footer__menu-item { -webkit-margin-after: 15px; margin-block-end: 15px; } .footer__menu-item:first-child { -webkit-margin-after: 23px; margin-block-end: 23px; } .footer__menu-item:first-child a { font-size: 12px; text-transform: uppercase; } .footer__menu-link { color: var(--clr-white); font-size: clamp(13px, 0.7919rem + 0.1031vi, 14px); -webkit-text-decoration-color: transparent; text-decoration-color: transparent; -webkit-text-decoration-line: underline; text-decoration-line: underline; text-underline-offset: 3px; -webkit-transition: color var(--tr), -webkit-text-decoration-color var(--tr); transition: color var(--tr), -webkit-text-decoration-color var(--tr); -o-transition: text-decoration-color var(--tr), color var(--tr); transition: text-decoration-color var(--tr), color var(--tr); transition: text-decoration-color var(--tr), color var(--tr), -webkit-text-decoration-color var(--tr); } .footer__menu-link:hover { color: var(--clr-hover); -webkit-text-decoration-color: var(--clr-hover); text-decoration-color: var(--clr-hover); } .footer__contacts { display: -ms-grid; display: grid; grid-auto-rows: -webkit-min-content; grid-auto-rows: min-content; gap: 22px 0; } .footer__contacts-item p { -webkit-margin-after: 5px; margin-block-end: 5px; font-size: 12px; } .footer__contacts-item a { color: var(--clr-white); font-size: 20px; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; -webkit-text-decoration-line: underline; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; -webkit-transition: -webkit-text-decoration-color var(--tr); transition: -webkit-text-decoration-color var(--tr); -o-transition: text-decoration-color var(--tr); transition: text-decoration-color var(--tr); transition: text-decoration-color var(--tr), -webkit-text-decoration-color var(--tr); } .footer__contacts-item a:hover { color: var(--clr-hover); -webkit-text-decoration-color: var(--clr-hover); text-decoration-color: var(--clr-hover); } .footer__contacts-item .socials { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0 20px; } .footer__contacts-item .socials a { display: -ms-grid; display: grid; place-items: center; font-size: 24px; text-decoration: none; -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } .footer__contacts-item .socials a:hover { color: var(--clr-hover); } .footer__btm { display: -ms-grid; display: grid; -ms-grid-columns: 4fr 2fr 3fr 3fr; grid-template-columns: 4fr 2fr 3fr 3fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 20px; -webkit-padding-before: 20px; padding-block-start: 20px; font-size: 12px; -webkit-border-before: 1px solid #6C8778; border-block-start: 1px solid #6C8778; } .footer__btm a { color: var(--clr-white); -webkit-text-decoration-color: transparent; text-decoration-color: transparent; -webkit-text-decoration-line: underline; text-decoration-line: underline; text-underline-offset: 3px; -webkit-transition: -webkit-text-decoration-color var(--tr); transition: -webkit-text-decoration-color var(--tr); -o-transition: text-decoration-color var(--tr); transition: text-decoration-color var(--tr); transition: text-decoration-color var(--tr), -webkit-text-decoration-color var(--tr); } .footer__btm a:hover { color: var(--clr-hover); -webkit-text-decoration-color: var(--clr-hover); text-decoration-color: var(--clr-hover); } .footer__btm-arda { -webkit-transition: opacity var(--tr); -o-transition: opacity var(--tr); transition: opacity var(--tr); } .footer__btm-arda img { aspect-ratio: 6.9318/1; inline-size: 305px; } .footer__btm-arda:hover { opacity: 0.67; } .footer__btm br { display: none; } @media (max-width: 1100px) { .footer__btm br { display: inline; } } @media (max-width: 992px) { .footer__btm { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .footer__btm-arda img { inline-size: clamp(190px, -0.9821rem + 26.7857vi, 250px); } } @media (max-width: 900px) { .footer__menu-block { -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); gap: 20px; -webkit-margin-after: 20px; margin-block-end: 20px; } .footer__desc { -ms-grid-column: 1; -ms-grid-column-span: 5; grid-column: 1/span 5; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; } .footer__menu.menu1 { -ms-grid-column: 6; -ms-grid-column-span: 3; grid-column: 6/span 3; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; } .footer__menu.menu2 { -ms-grid-column: 9; -ms-grid-column-span: 4; grid-column: 9/span 4; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; } .footer__contacts { grid-column: 1/-1; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/span 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media (max-width: 768px) { .footer__btm { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: unset; -ms-flex-pack: unset; justify-content: unset; gap: 20px 0; } .footer__btm br { display: none; } .footer__btm > * { -webkit-box-flex: 1; -ms-flex: 1 1 50%; flex: 1 1 50%; display: -webkit-box; display: -ms-flexbox; display: flex; } .footer__btm > *:nth-child(even) { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } } @media (max-width: 700px) { .footer__menu-block { -ms-grid-columns: 1fr; grid-template-columns: 1fr; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer__desc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-margin-after: 20px; margin-block-end: 20px; } .footer__menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer__menu-item:first-child { -webkit-margin-after: 15px; margin-block-end: 15px; } .footer__contacts { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; } .footer__btm { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: unset; -ms-flex-pack: unset; justify-content: unset; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px 0; text-align: center; } .footer__btm > * { -webkit-box-flex: 1; -ms-flex: 1 1 50%; flex: 1 1 50%; display: -webkit-box; display: -ms-flexbox; display: flex; } .footer__btm > *:nth-child(even) { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } } .mobile-wrap { --mobile-gap: 5px; --mobile-me: 13px; --content-h: 450px; --content-p: 30px; --content-gap: 30px; --logo-h: 29px; --btn-h: 36px; --close-h: 40px; max-width: calc(100% - 0px); inline-size: 485px; max-height: calc(100% - 0px); height: 100%; padding: 0; -webkit-margin-before: auto; margin-block-start: auto; -webkit-margin-after: 0px; margin-block-end: 0px; background-color: transparent; border: none; } .mobile-wrap.active { display: -ms-grid; display: grid; } .mobile { -ms-grid-row-align: end; align-self: end; display: -ms-grid; display: grid; -ms-grid-rows: 1fr -webkit-min-content; -ms-grid-rows: 1fr min-content; grid-template-rows: 1fr -webkit-min-content; grid-template-rows: 1fr min-content; gap: var(--mobile-gap) 0; inline-size: 100%; -webkit-margin-after: var(--mobile-me); margin-block-end: var(--mobile-me); padding-inline: 10px; } .mobile__content { display: -ms-grid; display: grid; -ms-grid-rows: -webkit-min-content 1fr -webkit-min-content; -ms-grid-rows: min-content 1fr min-content; grid-template-rows: -webkit-min-content 1fr -webkit-min-content; grid-template-rows: min-content 1fr min-content; gap: var(--content-gap) 0; block-size: calc(100vh - var(--close-h) - var(--mobile-gap) - var(--mobile-me)); max-block-size: var(--content-h); padding: var(--content-p); background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: 30px; } .mobile__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mobile__top-logo img { inline-size: 65px; block-size: var(--logo-h); } .mobile__top-logo:focus-visible { outline: none; } .mobile__top-contacts { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 20px; } .mobile__top-contacts .ba { color: var(--clr-accent); font-size: 24px; -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } .mobile__top-contacts .ba:hover { color: var(--clr-hover); } .mobile__top-contacts .ba:active { background-color: var(--clr-hover); } .mobile__menu { overflow-y: scroll; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .mobile__menu-item:not(:last-child) { -webkit-border-after: 1px solid var(--clr-accent); border-block-end: 1px solid var(--clr-accent); } .mobile__menu-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 10px; padding-block: 7px; color: var(--clr-text); font-size: 14px; -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } .mobile__menu-link .ba { color: var(--clr-accent); font-size: 26px; -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } .mobile__menu-link:hover { color: var(--clr-hover); } .mobile__menu-link:hover .ba { color: var(--clr-hover); } .mobile__menu-link:active { color: var(--clr-pressed); } .mobile__menu-link:active .ba { color: var(--clr-pressed); } .mobile__menu::-webkit-scrollbar { width: 4px; } .mobile__menu::-webkit-scrollbar-track { background-color: transparent; border-radius: 100vw; } .mobile__menu::-webkit-scrollbar-thumb { background-color: var(--clr-accent); border-radius: 100vw; } .mobile__btm { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0 10px; } .mobile__btm-btn { -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; display: -ms-grid; display: grid; place-items: center; padding-block: 10px; border: 1px solid var(--clr-accent); border-radius: 100vw; font-size: 14px; line-height: 1; text-transform: uppercase; -webkit-transition: color var(--tr), background-color var(--tr); -o-transition: color var(--tr), background-color var(--tr); transition: color var(--tr), background-color var(--tr); } .mobile__btm-btn:nth-child(1) { color: var(--clr-accent); background-color: var(--clr-white); } .mobile__btm-btn:nth-child(2) { color: var(--clr-white); background-color: var(--clr-accent); } .mobile__btm-btn:hover { color: var(--clr-pressed); background-color: var(--clr-hover); } .mobile__btm-btn:active { color: var(--clr-pressed); background-color: var(--clr-hover); } .mobile__close { -ms-grid-column-align: center; justify-self: center; display: -ms-grid; display: grid; place-items: center; inline-size: var(--close-h); block-size: var(--close-h); background-color: var(--clr-accent); border: 1px solid var(--clr-hover); border-radius: 100vw; -webkit-transition: background-color var(--tr); -o-transition: background-color var(--tr); transition: background-color var(--tr); } .mobile__close svg { -webkit-transform: translateX(1px); -ms-transform: translateX(1px); transform: translateX(1px); inline-size: 18px; block-size: 18px; fill: var(--clr-white); -webkit-transition: fill var(--tr); -o-transition: fill var(--tr); transition: fill var(--tr); } .mobile__close:hover { background-color: var(--clr-hover); } .mobile__close:hover svg { fill: var(--clr-pressed); } .mobile__close:active { background-color: var(--clr-hover); } .mobile__close:active svg { fill: var(--clr-accent); } .filters { --extra: 20px; --pis: 40px; --filters-h: calc(100vh - var(--header-h) - var(--extra) * 2); position: fixed; z-index: 1; inset-block-start: calc(var(--extra) + var(--header-h)); -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); inline-size: clamp(280px, 16.0567rem + 7.2165vi, 350px); block-size: var(--filters-h); -webkit-padding-after: 20px; padding-block-end: 20px; background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: 0 45px 45px 0; -webkit-box-shadow: 0 0 20px hsla(0, 0%, 0%, 0.1); box-shadow: 0 0 20px hsla(0, 0%, 0%, 0.1); -webkit-transition: -webkit-transform var(--tr); transition: -webkit-transform var(--tr); -o-transition: transform var(--tr); transition: transform var(--tr); transition: transform var(--tr), -webkit-transform var(--tr); } .filters.active { -webkit-transform: translate(0%); -ms-transform: translate(0%); transform: translate(0%); } .filters__blocks { overflow-y: auto; block-size: calc(var(--filters-h) - 120px); } .filters__blocks::-webkit-scrollbar { width: 6px; } .filters__blocks::-webkit-scrollbar-track { background-color: transparent; border-radius: 100vw; } .filters__blocks::-webkit-scrollbar-thumb { background-color: var(--clr-accent); border-radius: 100vw; } .filters__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-margin-after: 20px; margin-block-end: 20px; padding: 20px 20px 20px var(--pis); color: var(--clr-white); background-color: var(--clr-hover); font-size: clamp(21px, 1.1682rem + 0.7216vi, 28px); border-radius: 0 45px 45px 0; } .filters__title i { font-size: 32px; cursor: pointer; -webkit-transition: -webkit-transform var(--tr); transition: -webkit-transform var(--tr); -o-transition: transform var(--tr); transition: transform var(--tr); transition: transform var(--tr), -webkit-transform var(--tr); } @media (hover: hover) { .filters__title i:hover { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } } .filters__block { margin: 0 var(--pis) 20px; } .filters__block-title { -webkit-margin-after: 15px; margin-block-end: 15px; font-size: 20px; font-weight: var(--fw-m); text-transform: uppercase; cursor: pointer; -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } @media (hover: hover) { .filters__block-title:hover { color: var(--clr-accent); } } .filters__block-panel { overflow: hidden; display: -ms-grid; display: grid; gap: 10px 0; max-block-size: 180px; -webkit-transition: max-block-size 0.6s ease-in-out; -o-transition: max-block-size 0.6s ease-in-out; transition: max-block-size 0.6s ease-in-out; } .filters__block-panel.hide { max-block-size: 0; } .filters__block-panel-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 10px; cursor: pointer; } .filters__block-panel-item::before { content: ""; -ms-flex-negative: 0; flex-shrink: 0; inline-size: 17px; block-size: 17px; border: 2px solid var(--clr-border); border-radius: 100vw; } .filters__block-panel-item.active::before { border: 5px solid var(--clr-accent); } .filters__block-panel select { -webkit-appearance: none; cursor: pointer; } .partner-cards.auto-grid { --r-g: clamp(30px, 1.2564rem + 3.0928vi, 60px); -webkit-margin-after: clamp(100px, 2.1263rem + 20.6186vi, 300px); margin-block-end: clamp(100px, 2.1263rem + 20.6186vi, 300px); } .partner-card__img { aspect-ratio: 3.8375; -webkit-margin-after: 20px; margin-block-end: 20px; background-color: var(--clr-white); } .partner-card__img img { block-size: 100%; } .partner-card__title { -webkit-margin-after: 5px; margin-block-end: 5px; text-align: center; } .partner-card__text { font-size: 14px; text-align: center; } .case { display: -ms-grid; display: grid; -ms-grid-columns: 198px 1fr; grid-template-columns: 198px 1fr; gap: 0 20px; -webkit-margin-before: -80px; margin-block-start: -80px; -webkit-padding-before: 80px; padding-block-start: 80px; background-image: url("../img/misc/foots-page.webp"); background-repeat: no-repeat; background-position: right top; background-size: clamp(220px, 12.0799rem + 8.3505vi, 301px) auto; background-size: clamp(100px, 2.1057rem + 20.7216vi, 301px) auto; } .case__menu-block { position: sticky; inset-block-start: calc(var(--header-h) + 20px); -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/span 1; -ms-grid-row-align: start; align-self: start; } .case__menu { display: -ms-grid; display: grid; gap: 15px 0; -webkit-margin-after: 40px; margin-block-end: 40px; padding: 20px; background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: clamp(20px, 1.0438rem + 1.0309vi, 30px); } .case__menu-title { -webkit-margin-after: 0; margin-block-end: 0; font-weight: var(--fw-m); } .case__menu-text { font-size: 14px; } .case__menu-list { display: -ms-grid; display: grid; gap: 15px 0; font-size: 14px; } .case__menu-list-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 5px; color: var(--clr-text); -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } @media (hover: hover) { .case__menu-list-item:not(.disabled):hover { color: var(--clr-accent); } } .case__menu-list-item.disabled { color: var(--clr-bg-2); pointer-events: none; cursor: not-allowed; } .case__menu-list-item.disabled i { color: var(--clr-bg-2); } .case__menu-list-item i { color: var(--clr-accent); } .case__btn { display: -ms-grid; display: grid; justify-items: center; } .case__btn-img { position: relative; max-inline-size: 160px; -webkit-margin-after: -10px; margin-block-end: -10px; } .case__btn-img img:nth-child(2) { display: none; } .case__btn .btn { inline-size: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-inline: 0; font-size: 13px; } @media (hover: hover) { .case__btn:hover .case__btn-img img:nth-child(2) { display: block; } .case__btn:hover .case__btn-img img:nth-child(1) { display: none; } .case__btn:hover .btn { background-color: var(--clr-hover); } } .case__content { -ms-grid-column: 2; -ms-grid-column-span: 1; grid-column: 2/span 1; } .case__screens { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[10]; grid-template-columns: repeat(10, 1fr); gap: 20px; -webkit-margin-after: 60px; margin-block-end: 60px; } .case__screens-desctop { --bs: 7%; --be: 4%; --i: 1.5%; --scale-w: 2.51; --scale-h: 2.55; --zoom: .4; position: relative; -ms-grid-column: 1; -ms-grid-column-span: 8; grid-column: 1/span 8; aspect-ratio: 1.4648; background-image: url("../img/misc/desctop.webp"); background-repeat: no-repeat; background-size: 100%; background-position: center; } .case__screens-desctop .iframe-wrap { overflow: hidden; position: absolute; inset: var(--bs) var(--i) var(--be); inline-size: calc(100% - var(--i) * 2); block-size: calc(100% - var(--bs) - var(--be)); border-radius: 0 0 5px 5px; } .case__screens-desctop .iframe-wrap iframe { inline-size: calc(100% * var(--scale-w)); block-size: calc(100% * var(--scale-h)); zoom: var(--zoom); -moz-transform: scale(var(--zoom)); -moz-transform-origin: 0 0; -o-transform: scale(var(--zoom)); -o-transform-origin: 0 0; -webkit-transform: scale(var(--zoom)); -webkit-transform-origin: 0 0; } .case__screens-mobile { -ms-grid-row-align: start; align-self: start; grid-column: 9/-1; display: -ms-grid; display: grid; justify-items: center; } .case__screens-mobile-icon { aspect-ratio: 1; -webkit-margin-after: 5px; margin-block-end: 5px; } .case__screens-mobile-icon img { inline-size: 24px; block-size: 24px; } .case__screens-mobile-text { -webkit-margin-after: 20px; margin-block-end: 20px; font-size: 12px; line-height: 1.3; text-align: center; } .case__screens-mobile-phone { --bs: 7%; --be: 2%; --i: 1.5%; --scale-w: 1.99; --scale-h: 2.07; position: relative; aspect-ratio: 0.451; inline-size: 100%; background-image: url("../img/misc/mobile.webp"); background-repeat: no-repeat; background-size: 100%; background-position: center; } .case__screens-mobile-phone .iframe-wrap { overflow: hidden; position: absolute; inset: var(--bs) var(--i) var(--be); inline-size: calc(100% - var(--i) * 2); block-size: calc(100% - var(--bs) - var(--be)); border-radius: 0 0 5px 5px; } .case__screens-mobile-phone .iframe-wrap iframe { inline-size: calc(100% * var(--scale-w)); block-size: calc(100% * var(--scale-h)); zoom: 0.75; -moz-transform: scale(0.5); -moz-transform-origin: 0 0; -o-transform: scale(0.5); -o-transform-origin: 0 0; -webkit-transform: scale(0.5); -webkit-transform-origin: 0 0; } .case__intro { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[10]; grid-template-columns: repeat(10, 1fr); gap: 20px; } .case__intro-about { -ms-grid-column: 1; -ms-grid-column-span: 6; grid-column: 1/span 6; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px 60px; padding: clamp(15px, 0.6282rem + 1.5464vi, 30px); background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: clamp(20px, 1.0438rem + 1.0309vi, 30px); } .case__intro-about-imgs { -webkit-margin-before: -60px; margin-block-start: -60px; } .case__intro-about-imgs-pic { inline-size: 146px; } .case__intro-about-desc-title { -webkit-margin-after: 5px; margin-block-end: 5px; font-size: clamp(18px, 1.0013rem + 0.6186vi, 24px); font-weight: var(--fw-m); } .case__intro-about-desc-subtitle { -webkit-margin-after: 20px; margin-block-end: 20px; color: #6C8778; font-size: 14px; } .case__intro-about-desc-table td { padding: 0 clamp(10px, 0.4188rem + 1.0309vi, 20px) 10px 0; } .case__intro-about-desc-table td a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; color: var(--clr-accent); } .case__intro-about-desc-table td a i { -ms-flex-negative: 0; flex-shrink: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); font-size: 18px; } .case__intro-about-desc-table tr td:nth-child(1) { color: #6C8778; font-size: 14px; } .case__intro-results { grid-column: 7/-1; padding: clamp(15px, 0.6282rem + 1.5464vi, 30px); background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: clamp(20px, 1.0438rem + 1.0309vi, 30px); } .case__intro-results-title { -webkit-margin-after: 24px; margin-block-end: 24px; font-size: clamp(18px, 1.0013rem + 0.6186vi, 24px); font-weight: var(--fw-m); } .case__intro-results-table tr td:nth-child(1) { color: #6C8778; font-size: 14px; } .case__intro-results-table tr td:nth-child(3) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; color: var(--clr-accent); } .case__intro-results-table tr td:nth-child(3) i { -ms-flex-negative: 0; flex-shrink: 0; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); font-size: 14px; } .case__intro-results-table td, .case__intro-results-table th { padding: 0 clamp(10px, 0.4188rem + 1.0309vi, 20px) 10px 0; text-align: left; vertical-align: top; } .case__intro-promotion { grid-column: 7/-1; display: -ms-grid; display: grid; padding: clamp(15px, 0.6282rem + 1.5464vi, 30px); background-color: var(--clr-bg-2); background-image: url("../img/misc/promotion.webp"); background-repeat: no-repeat; background-size: cover; background-size: 115%; background-position: center; border: 1px solid var(--clr-border); border-radius: 30px; -webkit-transition: background-size var(--tr); -o-transition: background-size var(--tr); transition: background-size var(--tr); } .case__intro-promotion:hover { background-size: 120%; } .case__intro-promotion:hover .case__intro-promotion-btn span { opacity: 1; } .case__intro-promotion:hover .case__intro-promotion-btn i { -webkit-animation: arrow-btn 0.6s ease-in-out infinite alternate; animation: arrow-btn 0.6s ease-in-out infinite alternate; } .case__intro-promotion-desc { display: -ms-grid; display: grid; gap: 5px; max-inline-size: 143px; } .case__intro-promotion-title { color: var(--clr-accent); line-height: 1.2; } .case__intro-promotion-text { color: var(--clr-text); font-size: 14px; line-height: 1.25; } .case__intro-promotion-btn { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0 10px; color: var(--clr-accent); font-size: 12px; text-transform: uppercase; } .case__intro-promotion-btn span { opacity: 0; -webkit-transition: opacity var(--tr); -o-transition: opacity var(--tr); transition: opacity var(--tr); } .case__intro-promotion-btn i { display: block; } .case__dev { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); gap: 20px; -webkit-margin-before: calc(-1 * (var(--header-h) + 20px)); margin-block-start: calc(-1 * (var(--header-h) + 20px)); -webkit-padding-before: calc(var(--header-h) + 20px); padding-block-start: calc(var(--header-h) + 20px); } .case__dev-title-block { grid-column: 1/-1; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px 55px; -webkit-margin-after: 0; margin-block-end: 0; } .case__dev-title { grid-column: 1/-1; -webkit-margin-after: 0; margin-block-end: 0; } .case__dev-problem, .case__dev-solution, .case__dev-testim { padding: clamp(20px, 1.0438rem + 1.0309vi, 30px); background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: clamp(20px, 1.0438rem + 1.0309vi, 30px); } .case__dev-problem-title, .case__dev-solution-title, .case__dev-testim-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 5px; -webkit-margin-after: 10px; margin-block-end: 10px; font-weight: var(--fw-m); } .case__dev-problem-title i, .case__dev-solution-title i, .case__dev-testim-title i { color: var(--clr-accent); } .case__dev-problem-subtitle, .case__dev-solution-subtitle, .case__dev-testim-subtitle { -webkit-margin-after: 16px; margin-block-end: 16px; color: #6C8778; } .case__dev-problem-text > * + *, .case__dev-solution-text > * + *, .case__dev-testim-text > * + * { -webkit-margin-before: 20px; margin-block-start: 20px; } .case__dev-testim { grid-column: 1/-1; background-image: url("../img/misc/foots-testim.webp"); background-repeat: no-repeat; background-position: right top; background-size: clamp(110px, 5.7204rem + 5.7732vi, 166px) auto; } .case__design { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[10]; grid-template-columns: repeat(10, 1fr); gap: 20px; -webkit-margin-before: calc(-1 * (var(--header-h) + 20px)); margin-block-start: calc(-1 * (var(--header-h) + 20px)); -webkit-padding-before: calc(var(--header-h) + 20px); padding-block-start: calc(var(--header-h) + 20px); } .case__design-title-block { grid-column: 1/-1; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px 55px; -webkit-margin-after: 0px; margin-block-end: 0px; } .case__design-title { grid-column: 1/-1; -webkit-margin-after: 0; margin-block-end: 0; } .case__design-tablet { --bs: 4%; --be: 4%; --i: 2.5%; --scale-w: 1.335; --scale-h: 1.7; position: relative; -ms-grid-column: 1; -ms-grid-column-span: 7; grid-column: 1/span 7; aspect-ratio: 1.6932; background-image: url("../img/misc/tablet.webp"); background-repeat: no-repeat; background-size: 100%; background-position: center; } .case__design-tablet .iframe-wrap { overflow: hidden; position: absolute; inset: var(--bs) var(--i) var(--be); inline-size: calc(100% - var(--i) * 2); block-size: calc(100% - var(--bs) - var(--be)); border-radius: 10px; } .case__design-tablet .iframe-wrap iframe { inline-size: calc(100% * var(--scale-w)); block-size: calc(100% * var(--scale-h)); zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; -o-transform: scale(0.75); -o-transform-origin: 0 0; -webkit-transform: scale(0.75); -webkit-transform-origin: 0 0; } .case__design-tablet-img { position: absolute; inset-inline-end: 0; inset-block-end: 0; aspect-ratio: 0.2133; inline-size: clamp(34px, 1.2384rem + 4.433vi, 77px); -webkit-transform: rotate(-9deg); -ms-transform: rotate(-9deg); transform: rotate(-9deg); } .case__design-tablet-img img { inline-size: 100%; block-size: 100%; } .case__design-figma { -ms-grid-row-align: start; align-self: start; grid-column: 8/-1; display: -ms-grid; display: grid; justify-items: center; } .case__design-figma-icon { aspect-ratio: 1; inline-size: 24px; -webkit-margin-after: 5px; margin-block-end: 5px; } .case__design-figma-icon img { inline-size: 24px; block-size: 24px; } .case__design-figma-text { -webkit-margin-after: 25px; margin-block-end: 25px; text-align: center; } .case__design-figma-box { position: relative; aspect-ratio: 1.1123; inline-size: 100%; background-color: var(--clr-white); -webkit-box-shadow: 0 0 15px hsla(0, 0%, 0%, 0.07); box-shadow: 0 0 15px hsla(0, 0%, 0%, 0.07); } .case__design-figma-box .btn-lightbox { position: absolute; inset-inline-end: 20px; inset-block-end: 20px; } .case__promotion { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); gap: 0 20px; -webkit-margin-before: calc(-1 * (var(--header-h) + 20px)); margin-block-start: calc(-1 * (var(--header-h) + 20px)); -webkit-padding-before: calc(var(--header-h) + 20px); padding-block-start: calc(var(--header-h) + 20px); } .case__promotion-title-block { grid-column: 1/-1; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px 55px; } .case__promotion-title { -webkit-margin-after: 0; margin-block-end: 0; } .case__promotion-block { overflow: hidden; background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: clamp(20px, 1.0438rem + 1.0309vi, 30px); } .case__promotion-block-img { position: relative; aspect-ratio: 1.621; inline-size: 100%; } .case__promotion-block-img::after { content: ""; position: absolute; z-index: 0; inset: 0; -webkit-filter: grayscale(1); filter: grayscale(1); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .case__promotion-block-img img { block-size: 100%; } .case__promotion-block-img .btn-lightbox { position: absolute; z-index: 1; inset-inline-end: 20px; inset-block-end: 20px; } .case__promotion-block-btm { display: -ms-grid; display: grid; gap: 10px; padding: 20px; } .case__promotion-block-title { color: var(--clr-accent); font-size: 12px; } .case__automation { display: -ms-grid; display: grid; gap: 20px; -webkit-margin-before: calc(-1 * (var(--header-h) + 20px)); margin-block-start: calc(-1 * (var(--header-h) + 20px)); -webkit-padding-before: calc(var(--header-h) + 20px); padding-block-start: calc(var(--header-h) + 20px); } .case__automation-title-block { grid-column: 1/-1; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px 55px; -webkit-margin-after: 0px; margin-block-end: 0px; } .case__automation-title { -webkit-margin-after: 0; margin-block-end: 0; } .case__automation-desc { padding: clamp(20px, 1.0438rem + 1.0309vi, 30px); background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: clamp(20px, 1.0438rem + 1.0309vi, 30px); } .case__automation-desc > * + * { -webkit-margin-before: 20px; margin-block-start: 20px; } @media (max-width: 1280px) { .case { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .case__menu-block { grid-column: 1/-1; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/span 1; position: unset; inset-block-start: unset; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[10]; grid-template-columns: repeat(10, 1fr); gap: 0 20px; } .case__menu { -ms-grid-column: 1; -ms-grid-column-span: 4; grid-column: 1/span 4; } .case__btn { grid-column: 5/-1; -ms-grid-row-align: center; align-self: center; -ms-grid-column-align: start; justify-self: start; } .case__content { grid-column: 1/-1; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; } } @media (max-width: 1024px) { .case__intro { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .case__intro-about { grid-column: 1/-1; max-inline-size: 640px; inline-size: 100%; -ms-grid-column-align: center; justify-self: center; } .case__intro-results { grid-column: 1/-1; max-inline-size: 640px; inline-size: 100%; -ms-grid-column-align: center; justify-self: center; } .case__intro-promotion { grid-column: 1/-1; max-inline-size: 417px; -ms-grid-column-align: center; justify-self: center; max-inline-size: 417px; inline-size: 100%; } } @media (max-width: 992px) { .case__screens-desctop { -ms-grid-column: 1; -ms-grid-column-span: 9; grid-column: 1/span 9; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; } .case__screens-mobile { -ms-grid-row-align: center; align-self: center; grid-column: 9/-1; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; } .case__screens-mobile-icon { display: none; } .case__screens-mobile-text { display: none; } .case__design-tablet { -ms-grid-column: 2; -ms-grid-column-span: 8; grid-column: 2/span 8; } .case__design-figma { -ms-grid-column: 4; -ms-grid-column-span: 4; grid-column: 4/span 4; } } @media (max-width: 768px) { .case__screens-mobile { -ms-grid-row-align: center; align-self: center; grid-column: 1/-1; -ms-grid-column-align: end; justify-self: end; inline-size: 170px; } .case__dev > * { grid-column: 1/-1; } .case__intro-promotion-btn span { opacity: 1; } .case__design-tablet { grid-column: 1/-1; } .case__design-figma { -ms-grid-column: 3; -ms-grid-column-span: 6; grid-column: 3/span 6; } .case__promotion { -ms-grid-columns: 1fr; grid-template-columns: 1fr; justify-items: center; gap: 20px 0; } .case__promotion-title-block { -ms-grid-column-align: start; justify-self: start; -webkit-margin-after: 0; margin-block-end: 0; } .case__promotion-block { max-inline-size: 450px; inline-size: 100%; } } @media (max-width: 640px) { .case__screens-desctop { grid-column: 1/-1; } .case__screens-mobile { display: none; } } @media (max-width: 600px) { .case__menu-block { -ms-grid-columns: 212px 1fr; grid-template-columns: 212px 1fr; } .case__menu { -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/span 1; } .case__btn { grid-column: 2/-1; } .case__intro-about { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .case__intro-about-imgs { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px 40px; } } @media (max-width: 428px) { .case__menu-block { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .case__menu { grid-column: 1/-1; inline-size: unset; } .case__btn { grid-column: 1/-1; -ms-grid-column-align: center; justify-self: center; } .case__intro-about-imgs { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0; } .case__intro-promotion { background-position: right -63px center; } .case__design-figma { grid-column: 1/-1; } } @media (max-width: 360px) { .case__intro-about-desc-table td a { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: end; gap: 0px 0; } } .brif-block { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); gap: 0 20px; -webkit-margin-after: clamp(100px, 2.1263rem + 20.6186vi, 300px); margin-block-end: clamp(100px, 2.1263rem + 20.6186vi, 300px); } .brif-block__main { -ms-grid-column: 1; -ms-grid-column-span: 8; grid-column: 1/span 8; } .brif-block__main-bar { display: -ms-grid; display: grid; -webkit-margin-after: 20px; margin-block-end: 20px; } .brif-block__main-bar-num { -ms-grid-column-align: end; justify-self: end; } .brif-block__main-bar-strip { --w: 33.3333%; position: relative; inline-size: 100%; block-size: 5px; background-color: var(--clr-bg-2); } .brif-block__main-bar-strip::before { content: ""; position: absolute; inline-size: var(--w); block-size: 100%; background-color: var(--clr-accent); -webkit-transform: inline-size var(--tr); -ms-transform: inline-size var(--tr); transform: inline-size var(--tr); } .brif-block__main .wpcf7-form label:has(input[type=checkbox]) { padding: 0 !important; } .brif-block__main-form-item { display: -ms-grid; display: grid; gap: 24px 0; } .brif-block__main-form-item.hide { display: none; } .brif-block__main-form .wpcf7-acceptance label { font-size: 14px; line-height: 1.25; } .brif-block__main-form-agreement .h5 { -webkit-margin-after: 16px; margin-block-end: 16px; } .brif-block__main-form-agreement .h5 div { display: inline; } .brif-block__main-form-agreement.hide { display: none; } .brif-block__main-form-agreement .brif-input-group { -webkit-margin-after: 20px; margin-block-end: 20px; } .brif-block__main-form-agreement .brif-input-group:has(.brif-block__main-form-agreement-desc) { -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .brif-block__main-form-agreement-desc span { color: red; } .brif-block__main-form-agreement-desc a { color: var(--clr-accent); -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } @media (hover: hover) { .brif-block__main-form-agreement-desc a:hover { color: var(--clr-hover); } } .brif-block__main-form-agreement-check { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; } .brif-block__main-form-agreement-check label { position: relative; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; gap: 10px; } .brif-block__main-form-agreement-check label input[type=checkbox] { -ms-flex-negative: 0; flex-shrink: 0; inline-size: 20px; block-size: 20px; margin: 0; } .brif-block__main-form-agreement-check label input[type=checkbox]:checked { opacity: 0; } .brif-block__main-form-agreement-check label:has(input[type=checkbox]:checked)::before { content: "✓"; position: absolute; inset-inline-start: 0; inset-block-start: 0; display: -ms-grid; display: grid; place-items: center; inline-size: 20px; block-size: 20px; color: white; font-weight: 700; background-color: var(--clr-accent); border-radius: 4px; } .brif-block__main-form-agreement-check .wpcf7-list-item { display: inline-block; margin: 0; } .brif-block__main-form-btns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; -webkit-margin-before: 20px; margin-block-start: 20px; } .brif-block__main-form-btn { block-size: 47px; font-size: 12px; text-transform: uppercase; cursor: pointer; } .brif-block__main-form-btn.hide { display: none; } .brif-block__sidebar { grid-column: 9/-1; display: -ms-grid; display: grid; } .brif-block__desc { -ms-grid-column-align: end; justify-self: end; -ms-grid-row-align: start; align-self: start; display: -ms-grid; display: grid; gap: 20px; max-inline-size: 307px; inline-size: 100%; padding: clamp(20px, 1.0438rem + 1.0309vi, 30px); background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: clamp(20px, 0.7345rem + 2.5773vi, 45px); counter-reset: brif; } .brif-block__desc-item { font-size: 14px; } .brif-block__desc-item.active { color: var(--clr-accent); } .brif-block__desc-item::before { counter-increment: brif; content: counter(brif) " / "; } .brif-input-group { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; gap: 10px 40px; } @media (max-width: 480px) { .brif-input-group { -ms-flex-wrap: unset; flex-wrap: unset; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: unset; -ms-flex-pack: unset; justify-content: unset; -webkit-box-align: unset; -ms-flex-align: unset; align-items: unset; } } .brif-input-group:has(> span) { -webkit-box-align: start; -ms-flex-align: start; align-items: start; } @media (max-width: 480px) { .brif-input-group label, .brif-input-group > span, .brif-input-group > div { inline-size: unset; } } .brif-input-group > label > span { color: red; } .brif-input-group > span { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .brif-input-group > span label { --w: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; cursor: pointer; } .brif-input-group > span label input[type=radio] { inline-size: unset; margin: unset; inline-size: var(--w); block-size: var(--w); cursor: inherit; } .brif-input-group > span label input[type=radio]:checked { opacity: 0; } .brif-input-group > span label:has(input[type=radio]:checked) { position: relative; } .brif-input-group > span label:has(input[type=radio]:checked) input[type=radio] { position: absolute; } .brif-input-group > span label:has(input[type=radio]:checked)::before { content: ""; display: inline-block; inline-size: var(--w); block-size: var(--w); background-color: var(--clr-accent); border-radius: 100vw; } .brif-input-group .wpcf7-radio { display: -ms-grid; display: grid; } .brif-input-group:has(.b-design-beauty-style) > span:last-child { display: none; } .brif-input-group:has(.b-tech-pages-amount) > span:last-child { display: none; } .brif-input-group input[type=range] { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; color: transparent; background-color: transparent; border: none; cursor: pointer; } .brif-input-group input[type=range]::-webkit-slider-runnable-track { background: #8bd5ab; height: 8px; border-radius: 100vw; } .brif-input-group input[type=range]::-moz-range-track { background: #8bd5ab; height: 8px; border-radius: 100vw; } .brif-input-group input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -8px; background-color: var(--clr-accent); height: 24px; width: 24px; } .brif-input-group input[type=range]::-moz-range-thumb { border: none; border-radius: 0; background-color: var(--clr-accent); height: 24px; width: 24px; } .brif-input-group input[type=range]:focus { outline: none; } .brif-input-group input[type=range]:focus::-webkit-slider-thumb { border: 1px solid #8bd5ab; outline: 2px solid #8bd5ab; outline-offset: 0.125rem; } .brif-input-group input[type=range]:focus::-moz-range-thumb { border: 1px solid #8bd5ab; outline: 2px solid #8bd5ab; outline-offset: 0.125rem; } .brif-input-group select { -webkit-appearance: none; -moz-appearance: none; background: transparent; } .brif-input-group select:not([multiple]) { background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 12.4791C9.88889 12.4791 9.78139 12.4583 9.6775 12.4166C9.57306 12.3749 9.48612 12.3194 9.41667 12.2499L5.58334 8.41659C5.43056 8.26381 5.35417 8.06936 5.35417 7.83325C5.35417 7.59714 5.43056 7.4027 5.58334 7.24992C5.73612 7.09714 5.93056 7.02075 6.16667 7.02075C6.40278 7.02075 6.59723 7.09714 6.75001 7.24992L10 10.4999L13.25 7.24992C13.4028 7.09714 13.5972 7.02075 13.8333 7.02075C14.0694 7.02075 14.2639 7.09714 14.4167 7.24992C14.5694 7.4027 14.6458 7.59714 14.6458 7.83325C14.6458 8.06936 14.5694 8.26381 14.4167 8.41659L10.5833 12.2499C10.5 12.3333 10.4097 12.3921 10.3125 12.4266C10.2153 12.4616 10.1111 12.4791 10 12.4791Z' fill='%2320A85A'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 20px center; } .brif-input-group select[multiple] { overflow-y: scroll; } .brif-input-group select[multiple] option:not(:last-child) { -webkit-margin-after: 6px; margin-block-end: 6px; } .brif-input-group select[multiple]::-webkit-scrollbar { width: 6px; } .brif-input-group select[multiple]::-webkit-scrollbar-track { background-color: transparent; border-radius: 100vw; } .brif-input-group select[multiple]::-webkit-scrollbar-thumb { background-color: var(--clr-accent); border-radius: 100vw; } .brif-input-group input, .brif-input-group textarea, .brif-input-group select { inline-size: 100%; padding: 10px 20px; background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: 10px; } .brif-input-group input::-webkit-input-placeholder, .brif-input-group textarea::-webkit-input-placeholder, .brif-input-group select::-webkit-input-placeholder { color: #6C8778; } .brif-input-group input::-moz-placeholder, .brif-input-group textarea::-moz-placeholder, .brif-input-group select::-moz-placeholder { color: #6C8778; } .brif-input-group input:-ms-input-placeholder, .brif-input-group textarea:-ms-input-placeholder, .brif-input-group select:-ms-input-placeholder { color: #6C8778; } .brif-input-group input::-ms-input-placeholder, .brif-input-group textarea::-ms-input-placeholder, .brif-input-group select::-ms-input-placeholder { color: #6C8778; } .brif-input-group input::placeholder, .brif-input-group textarea::placeholder, .brif-input-group select::placeholder { color: #6C8778; } .brif-input-group input:focus-visible::-webkit-input-placeholder, .brif-input-group textarea:focus-visible::-webkit-input-placeholder, .brif-input-group select:focus-visible::-webkit-input-placeholder { color: transparent; } .brif-input-group input:focus-visible::-moz-placeholder, .brif-input-group textarea:focus-visible::-moz-placeholder, .brif-input-group select:focus-visible::-moz-placeholder { color: transparent; } .brif-input-group input:focus-visible:-ms-input-placeholder, .brif-input-group textarea:focus-visible:-ms-input-placeholder, .brif-input-group select:focus-visible:-ms-input-placeholder { color: transparent; } .brif-input-group input:focus-visible::-ms-input-placeholder, .brif-input-group textarea:focus-visible::-ms-input-placeholder, .brif-input-group select:focus-visible::-ms-input-placeholder { color: transparent; } .brif-input-group input:focus-visible::placeholder, .brif-input-group textarea:focus-visible::placeholder, .brif-input-group select:focus-visible::placeholder { color: transparent; } .brif-input-group input:focus-visible, .brif-input-group textarea:focus-visible, .brif-input-group select:focus-visible { outline: none; border: 1px solid var(--clr-accent); } .brif-input-group textarea { min-block-size: 140px; } @media (max-width: 480px) { .brif-input-group textarea { inline-size: 100%; } } .brif-input-group .wpcf7-quiz-label { display: none; } .brif-input-group.spam-check input[type=text] { background-color: var(--clr-white); } @media (max-width: 1100px) { .brif-block__main { grid-column: 1/-1; -webkit-margin-after: 20px; margin-block-end: 20px; } .brif-block__sidebar { grid-column: 1/-1; } .brif-block__desc { max-inline-size: unset; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .brif-block__desc { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } .brif-input-group { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .brif-input-group .brif-block__main-form-agreement-desc { inline-size: unset; } } @media (max-width: 480px) { .brif-block__desc { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .seo-text > * + * { -webkit-margin-before: 20px; margin-block-start: 20px; } .seo-text strong { font-weight: var(--fw-b); } .seo-text ul, .seo-text ol { -webkit-padding-start: 15px; padding-inline-start: 15px; } .seo-text ol { list-style-type: decimal; } .seo-text ul { list-style-type: disc; } .seo-text a { color: var(--clr-accent); -webkit-text-decoration-line: underline; text-decoration-line: underline; text-underline-offset: 3px; -webkit-transition: color var(--tr), -webkit-text-decoration-color var(--tr); transition: color var(--tr), -webkit-text-decoration-color var(--tr); -o-transition: text-decoration-color var(--tr), color var(--tr); transition: text-decoration-color var(--tr), color var(--tr); transition: text-decoration-color var(--tr), color var(--tr), -webkit-text-decoration-color var(--tr); } @media (hover: hover) { .seo-text a:hover { color: var(--clr-hover); -webkit-text-decoration-color: transparent; text-decoration-color: transparent; } } .seo-text blockquote { padding: clamp(20px, 1.0438rem + 1.0309vi, 30px); background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: clamp(20px, 1.0438rem + 1.0309vi, 30px); } .page-404 { display: -ms-grid; display: grid; gap: 20px 0; -webkit-margin-after: clamp(100px, 2.1263rem + 20.6186vi, 300px); margin-block-end: clamp(100px, 2.1263rem + 20.6186vi, 300px); } .page-404__btn { -ms-grid-column-align: center; justify-self: center; } .popup { max-width: 100%; padding: 5px; background-color: transparent; border: none; } .popup__inner { inline-size: 100%; padding: clamp(1.25rem, 0.6314rem + 3.0928vi, 3.125rem); background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: clamp(30px, 1.5657rem + 1.5464vi, 45px); } .popup input, .popup textarea { inline-size: 100%; padding: clamp(10px, 0.4188rem + 1.0309vi, 20px); font-size: 14px; border: 1px solid var(--clr-border); border-radius: 12px; } .popup input:focus-visible, .popup textarea:focus-visible { caret-color: var(--clr-accent); border-color: var(--clr-hover); outline: none; } .popup input::-webkit-input-placeholder, .popup textarea::-webkit-input-placeholder { color: var(--clr-text-input); } .popup input::-moz-placeholder, .popup textarea::-moz-placeholder { color: var(--clr-text-input); } .popup input:-ms-input-placeholder, .popup textarea:-ms-input-placeholder { color: var(--clr-text-input); } .popup input::-ms-input-placeholder, .popup textarea::-ms-input-placeholder { color: var(--clr-text-input); } .popup input::placeholder, .popup textarea::placeholder { color: var(--clr-text-input); } .popup input:focus-visible::-webkit-input-placeholder, .popup textarea:focus-visible::-webkit-input-placeholder { color: transparent; } .popup input:focus-visible::-moz-placeholder, .popup textarea:focus-visible::-moz-placeholder { color: transparent; } .popup input:focus-visible:-ms-input-placeholder, .popup textarea:focus-visible:-ms-input-placeholder { color: transparent; } .popup input:focus-visible::-ms-input-placeholder, .popup textarea:focus-visible::-ms-input-placeholder { color: transparent; } .popup input:focus-visible::placeholder, .popup textarea:focus-visible::placeholder { color: transparent; } .popup textarea { min-block-size: clamp(80px, 3.3505rem + 8.2474vi, 160px); } .popup .popup__submit { inline-size: -webkit-min-content; inline-size: -moz-min-content; inline-size: min-content; padding: clamp(15px, 0.8344rem + 0.5155vi, 20px) clamp(20px, 1.0438rem + 1.0309vi, 30px); color: var(--clr-white); background-color: var(--clr-accent); line-height: 1; border-radius: 100vw; text-transform: uppercase; -webkit-transition: color var(--tr), background-color var(--tr); -o-transition: color var(--tr), background-color var(--tr); transition: color var(--tr), background-color var(--tr); } .popup .popup__submit:disabled { background-color: var(--clr-border); cursor: not-allowed; } .popup .popup__submit:hover { color: var(--clr-pressed); background-color: var(--clr-hover); } .popup-close-btn { display: -ms-grid; display: grid; place-items: center; inline-size: clamp(30px, 1.6688rem + 1.0309vi, 40px); block-size: clamp(30px, 1.6688rem + 1.0309vi, 40px); -webkit-transition: -webkit-transform var(--tr); transition: -webkit-transform var(--tr); -o-transition: transform var(--tr); transition: transform var(--tr); transition: transform var(--tr), -webkit-transform var(--tr); } .popup-close-btn svg { inline-size: clamp(20px, 1.0851rem + 0.8247vi, 28px); block-size: clamp(20px, 1.0851rem + 0.8247vi, 28px); } .popup-close-btn:hover { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } dialog::-webkit-backdrop { background-color: hsla(250, 0%, 0%, 0.85); } dialog::backdrop { background-color: hsla(250, 0%, 0%, 0.85); } .popup:has(.write-us) { inline-size: 660px; } .write-us { display: -ms-grid; display: grid; -ms-grid-columns: 108px 1fr 40px; grid-template-columns: 108px 1fr 40px; gap: clamp(10px, 0.4188rem + 1.0309vi, 20px) 40px; } .write-us__title { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-margin-after: unset; margin-block-end: unset; line-height: 1; } .write-us__contacts { -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/span 1; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/span 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px 0; text-align: center; } .write-us__contacts a:hover .ba { color: var(--clr-hover); } .write-us__contacts .ba { color: var(--clr-accent); font-size: clamp(30px, 1.6688rem + 1.0309vi, 40px); line-height: 1; -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } .write-us__form { -ms-grid-column: 2; -ms-grid-column-span: 2; grid-column: 2/span 2; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/span 1; display: -ms-grid; display: grid; grid-auto-rows: -webkit-min-content; grid-auto-rows: min-content; gap: 10px 0; } .write-us__form .form-group label { display: none; } .write-us__form-bottom { -ms-flex-item-align: start; -ms-grid-row-align: start; align-self: start; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: start; gap: 10px; -webkit-padding-before: 10px; padding-block-start: 10px; } .write-us__form-bottom .popup__submit:hover:disabled { color: var(--clr-white); background-color: var(--clr-border); } .write-us__form-check { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0 12px; } .write-us__form-check:has(input:checked)::after { display: block; } .write-us__form-check input { -webkit-box-flex: 0; -ms-flex: 0 0; flex: 0 0; min-inline-size: 30px; block-size: 30px; margin: 0; border: none; opacity: 0; cursor: pointer; } .write-us__form-check label { font-size: 14px; line-height: 1.5; cursor: pointer; } .write-us__form-check a { color: var(--clr-accent); -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } .write-us__form-check a:hover { color: var(--clr-hover); } .write-us__form-check::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 30px; block-size: 30px; background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: 5px; cursor: pointer !important; pointer-events: none; } .write-us__form-check::after { content: ""; display: none; position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 30px; block-size: 30px; background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: 5px; background-image: url("data:image/svg+xml,%3Csvg width='15' height='10' viewBox='0 0 15 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.1251 10.0001C4.95944 9.99785 4.80061 9.93376 4.67979 9.82041L0.304786 5.44541C0.205121 5.32398 0.154189 5.16981 0.161895 5.0129C0.169602 4.856 0.235396 4.70756 0.34648 4.59648C0.457564 4.4854 0.605996 4.4196 0.762903 4.4119C0.919811 4.40419 1.07398 4.45512 1.19541 4.55479L5.1251 8.49229L13.4298 0.179786C13.5512 0.0801216 13.7054 0.0291889 13.8623 0.0368952C14.0192 0.0446015 14.1676 0.110396 14.2787 0.22148C14.3898 0.332564 14.4556 0.480996 14.4633 0.637904C14.471 0.794811 14.4201 0.948976 14.3204 1.07041L5.57041 9.82041C5.44958 9.93376 5.29075 9.99785 5.1251 10.0001Z' fill='%2320A85A'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center center; cursor: pointer !important; pointer-events: none; } .write-us__close { -ms-grid-column: 3; -ms-grid-column-span: 1; grid-column: 3/span 1; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; } .write-us.testim { -ms-grid-columns: 1fr 40px; grid-template-columns: 1fr 40px; } .write-us.testim .write-us__title { -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/span 1; } .write-us.testim .write-us__form { grid-column: 1/-1; } .write-us.testim .write-us__close { -ms-grid-column: 2; -ms-grid-column-span: 1; grid-column: 2/span 1; } .write-us.zakaz-service .zakaz-info { grid-column: 1/-1; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/span 1; display: -ms-grid; display: grid; gap: 5px; -webkit-margin-after: 5px; margin-block-end: 5px; font-size: clamp(16px, 0.9588rem + 0.2062vi, 18px); } .write-us.zakaz-service .write-us__contacts { -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3/span 1; } .write-us.zakaz-service .write-us__form { -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3/span 1; } .write-us.zakaz-service .write-us__form textarea { min-block-size: 80px; } @media (max-width: 640px) { .write-us__contacts { grid-column: 1/-1; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/span 1; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 0 20px; } .write-us__form { grid-column: 1/-1; -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3/span 1; } .write-us__form-bottom { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-padding-before: 10px; padding-block-start: 10px; } .write-us__form-check { max-inline-size: 250px; } } @media (max-width: 500px) { .write-us__contacts-title { -webkit-margin-end: auto; margin-inline-end: auto; text-align: left; } .write-us__form-bottom { -ms-flex-wrap: wrap; flex-wrap: wrap; } .write-us__form-check { max-inline-size: unset; } } .popup:has(.order-call) { inline-size: 660px; } .order-call { display: -ms-grid; display: grid; -ms-grid-columns: 1fr -webkit-min-content; -ms-grid-columns: 1fr min-content; grid-template-columns: 1fr -webkit-min-content; grid-template-columns: 1fr min-content; gap: 20px 0; inline-size: 100%; } .order-call__title { -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/span 1; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; } .order-call__form { grid-column: 1/-1; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/span 1; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 15px 10px; -webkit-margin-after: 10px; margin-block-end: 10px; } .order-call__form .form-group { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .order-call__form .form-group label { display: none; } .order-call__copy { grid-column: 1/-1; -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3/span 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px 10px; } .order-call__copy-tel.copied { color: var(--clr-accent); } .order-call__copy .ba { color: var(--clr-accent); font-size: 24px; -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); cursor: pointer; } .order-call__copy .ba:hover { color: var(--clr-hover); } .order-call__close { grid-column: 2/-1; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; } @media (max-width: 429px) { .order-call__form { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .order-call__copy { -ms-flex-wrap: wrap; flex-wrap: wrap; } .order-call__copy span:nth-child(1) { -ms-flex-preferred-size: 100%; flex-basis: 100%; } } .popup:has(.brif) { inline-size: 800px; } .brif { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 40px; grid-template-columns: 1fr 40px; gap: clamp(15px, 0.8344rem + 0.5155vi, 20px); } .brif__title { -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/span 1; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; } .brif__imgs { grid-column: 1/-1; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/span 1; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; gap: clamp(15px, 0.8344rem + 0.5155vi, 20px); } .brif__img { overflow: hidden; border-radius: 35px; -webkit-transition: -webkit-box-shadow var(--tr); transition: -webkit-box-shadow var(--tr); -o-transition: box-shadow var(--tr); transition: box-shadow var(--tr); transition: box-shadow var(--tr), -webkit-box-shadow var(--tr); } .brif__img:hover { -webkit-box-shadow: 0 0 20px hsla(146, 86%, 19%, 0.3); box-shadow: 0 0 20px hsla(146, 86%, 19%, 0.3); } .brif__contacts { grid-column: 1/-1; -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3/span 1; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: clamp(15px, 0.8344rem + 0.5155vi, 20px); } .brif__contacts-title { -ms-flex-preferred-size: 100%; flex-basis: 100%; -webkit-margin-after: 0; margin-block-end: 0; text-align: center; } .brif__contacts .ba { color: var(--clr-accent); font-size: clamp(30px, 1.6688rem + 1.0309vi, 40px); -webkit-transition: color var(--tr); -o-transition: color var(--tr); transition: color var(--tr); } .brif__contacts .ba:hover { color: var(--clr-hover); } .brif__close { -ms-grid-column: 2; -ms-grid-column-span: 1; grid-column: 2/span 1; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/span 1; } @media (max-width: 429px) { .brif__imgs { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .popup:has(.videoexp) { inline-size: 1200px; } .videoexp { position: relative; aspect-ratio: 1.7777; } .videoexp__content { overflow: hidden; block-size: 100%; border-radius: 10px; } .videoexp__placeholder { inline-size: 100%; block-size: 100%; display: -ms-grid; display: grid; place-items: center; color: white; background: -o-linear-gradient(135deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; font-size: 3vw; } .videoexp__placeholder p { display: -ms-grid; display: grid; place-items: center; gap: 3vw; } .videoexp__placeholder p span { font-weight: 700; letter-spacing: 3px; text-transform: uppercase; -webkit-animation: span 2s ease-in-out infinite; animation: span 2s ease-in-out infinite; } .videoexp__close { position: absolute; inset-inline-end: 10px; inset-block-start: 10px; } @-webkit-keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @-webkit-keyframes span { 50% { opacity: 0.25; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes span { 50% { opacity: 0.25; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .popup[data-popup-person] { overflow: visible; } .person { position: relative; display: -ms-grid; display: grid; gap: 0 20px; max-inline-size: 635px; } .person__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; gap: 0 20px; -webkit-margin-before: -80px; margin-block-start: -80px; -webkit-margin-after: 27px; margin-block-end: 27px; } .person__top-img { overflow: hidden; aspect-ratio: 1; max-inline-size: 148px; border-radius: 100vw; } .person__top-img img { block-size: 100%; } .person__top-list { -webkit-margin-after: 20px; margin-block-end: 20px; } .person__top-list-name { -webkit-margin-after: 4px; margin-block-end: 4px; } .person__mid { -webkit-margin-after: clamp(30px, 1.5863rem + 1.4433vi, 44px); margin-block-end: clamp(30px, 1.5863rem + 1.4433vi, 44px); } .person__btm { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px 20px; color: var(--clr-accent); } .person__close { position: absolute; inset-inline-end: 20px; inset-block-start: 20px; } .person__close i { font-size: 40px; } @media (max-width: 550px) { .person__top { -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-margin-before: unset; margin-block-start: unset; } .person__top-img { max-inline-size: 80px; } .person__top-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; block-size: 100%; -webkit-margin-after: 0px; margin-block-end: 0px; } } .bl-contact-form { display: grid; gap: 14px; width: 100%; } .bl-contact-form .input { width: 100%; min-height: 54px; padding: 16px 18px; border: 1px solid rgba(15, 15, 15, 0.14); border-radius: 18px; background: #e4e8e6; color: #111; font: inherit; font-size: 16px; line-height: 1.35; outline: none; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; } .bl-contact-form textarea.input { min-height: 130px; resize: vertical; } .bl-contact-form .input::placeholder { color: rgba(17, 17, 17, 0.45); } .bl-contact-form .input:hover { background: #fff; border-color: rgba(15, 15, 15, 0.26); } .bl-contact-form .input:focus { background: #fff; border-color: #111; box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.08); } .bl-contact-form__consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 2px; color: rgba(17, 17, 17, 0.72); font-size: 14px; line-height: 1.35; cursor: pointer; } .bl-contact-form__consent input { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 18px; accent-color: #111; } .bl-contact-form__consent a { color: #111; text-decoration: underline; text-underline-offset: 3px; } #callback-errors, #callback-success { display: none; padding: 14px 16px; border-radius: 16px; font-size: 14px; line-height: 1.4; } #callback-errors:not(:empty) { display: block; background: #fff1f1; color: #b42318; } #callback-success:not(:empty) { display: block; background: #effaf2; color: #18703c; } .bl-contact-form__submit { min-height: 56px; padding: 16px 24px; border: 0; border-radius: 999px; background: #20A85A; color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; } .bl-contact-form__submit:hover { background: #8BD5AB; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(17, 17, 17, 0.18); } .bl-contact-form__submit:active { transform: translateY(0); box-shadow: none; } @media (max-width: 640px) { .bl-contact-form { max-width: none; gap: 12px; } .bl-contact-form .input { min-height: 50px; padding: 14px 16px; border-radius: 16px; } .bl-contact-form__submit { width: 100%; } }