/* Start:/local/static/css/swiper-bundle.min.css?179259673618454*/ /** * Swiper 11.2.10 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2025 Vladimir Kharlampidi * * Released under the MIT License * * Released on: June 28, 2025 */ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} /* End */ /* Start:/local/static/css/style.css?1793258539145756*/ html { scrollbar-gutter: stable both-edges; scroll-behavior: smooth; scroll-padding-top: var(--header-height); background: var(--color-light); color: var(--color-dark); } :root { --font-family: "Inter", sans-serif; --second-family: "Tenor Sans", sans-serif; --accent-color-1: #b9824b; --accent-color-2: #007074; --accent-color-2-darker: #2b4637; --color-dark: #555555; --color-light: #fff; --header-height: 160px; } html * { padding: 0; margin: 0; box-sizing: border-box; font-family: var(--font-family); } a { text-decoration: none; color: inherit; display: block; } .center { text-align: center; } .mob { display: none !important; } .pc { display: flex !important; } .btn { white-space: nowrap; border-radius: 12px; padding: 20px 20px; width: 100%; height: 58px; background: var(--color-light); border: 1px solid var(--accent-color-1); color: var(--accent-color-1); font-weight: 500; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s; } .btn__arrow { flex-shrink: 0; object-fit: contain; } .btn-reverce { white-space: nowrap; border-radius: 12px; padding: 20px 20px; width: 100%; height: 58px; background: var(--accent-color-1); border: 1px solid; border-color: transparent; color: var(--color-light); font-weight: 500; font-size: 18px; line-height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s; } .container { max-width: 1520px; margin: 0 auto; padding: 0px 40px; } .header { position: fixed; height: auto; z-index: 9999; top: 0; background: var(--color-light); width: 100%; display: flex; flex-direction: column; .header__main { height: 104px; width: 100%; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; column-gap: 24px; border-bottom: 2px solid #f4f4f4; } .header__bottom { width: 100%; margin: 0 auto; background: var(--color-light); padding: 12px 0; display: flex; justify-content: center; border-bottom: 2px solid #f4f4f4; position: relative; } .header__hashtags { display: none; } .header__hashtag { white-space: nowrap; } .header__hashtags li a { font-size: 14px; font-weight: 500; color: var(--color-dark); text-decoration: none; display: flex; gap: 4px; transition: color 0.3s ease; } @media (hover: hover) { .header__hashtags li a:hover { color: var(--accent-color-2); } } .header__hashtags li a span { color: var(--accent-color-2); font-weight: 700; } .header__logo { width: 282px; height: auto; padding: 24px 0; img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } } .header__address { align-content: center; font-weight: 400; font-size: 14px; line-height: 140%; color: var(--accent-color-2-darker); text-decoration: none; white-space: nowrap; height: 100%; padding: 24px; border-left: 2px solid #f4f4f4; border-right: 2px solid #f4f4f4; } .btn, .header__messenger-link, .header__nav-messenger-link { border: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; aspect-ratio: 1 / 1; background: rgba(0, 112, 116, 0.1); img { width: 24px; height: 24px; display: block; flex-shrink: 0; -o-object-fit: contain; object-fit: contain; } } .header__actions { height: 100%; display: flex; align-items: center; justify-content: flex-end; column-gap: 24px; flex: 1 1 auto; } .header__messengers { width: 100%; display: flex; align-items: center; gap: 24px; } .header__cta { width: fit-content; white-space: nowrap; } .header__nav { width: 100%; position: static; display: block; padding: 0 24px; .header__menu { position: static; width: 100%; height: 100%; display: flex; flex-direction: row; align-items: center; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; flex-wrap: nowrap; justify-content: space-between; } .header__menu-title { display: none; } .header__menu > li { flex-shrink: 0; list-style: none; font-weight: 300; font-size: clamp(16px, 1vw, 18px); line-height: 120%; color: var(--accent-color-2-darker); position: static; cursor: pointer; height: 100%; display: flex; align-items: center; } .header__menu > li > a { display: flex; align-items: center; gap: 4px; padding: 8px 0; } .header__menu > li.has-submenu > a::after { content: "›"; display: block; -webkit-transform: rotate(90deg); transform: rotate(90deg); font-size: 24px; line-height: 18px; height: 18px; width: 18px; text-align: center; color: var(--accent-color-2); transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } @media (hover: hover) { .header__menu > li.has-submenu:hover > a::after { -webkit-transform: rotate(270deg); transform: rotate(270deg); } } } .header__submenu { display: none; list-style: none; position: absolute; background: #f7f7f7; padding: 0; border-radius: 0 0 16px 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); z-index: 100; width: 100%; margin: 0 auto; top: calc(100% + 2px); left: 0; right: 0; flex-direction: column; align-items: flex-start; min-height: 400px; } .header__submenu::before { content: ""; display: block; position: absolute; top: -20px; left: 0; right: 0; height: 20px; background: transparent; } .header__submenu.header__submenu--has-submenu { flex-direction: column; gap: 0; } @media (hover: hover) { .header__menu > li:hover > .header__submenu, .header__hashtags > li:hover > .header__submenu { display: flex; } } .header__submenu li { position: static; font-weight: 500; font-size: 16px; line-height: 140%; color: var(--color-dark); padding: 0; border-radius: 0; transition: background 0.2s; width: 300px; background: transparent; } .header__submenu li a { display: block; padding: 16px 24px; border-radius: 0; text-decoration: none; color: inherit; width: 100%; display: flex; justify-content: space-between; align-items: center; } @media (hover: hover) { .header__submenu li:hover { background: #fff; } .header__submenu li:hover > a { color: var(--accent-color-2); } } .header__submenu .has-submenu-level-2 > a::after { content: "›"; font-size: 18px; line-height: 1; color: #ccc; } .header__submenu-level-2 { position: absolute; top: 0; bottom: 0; left: 300px; right: 0; margin-left: 0; min-width: unset; display: none; flex-direction: row; flex-wrap: wrap; align-content: start; gap: 20px 40px; padding: 30px 40px; background: var(--color-light); border-radius: 0 0 16px 0; border-left: 1px solid #eaeaea; } @media (hover: hover) { .header__submenu li:hover > .header__submenu-level-2 { display: flex; } } .header__hashtags > li { position: relative; } .header__submenu-level-2 li { padding: 0; width: calc(50% - 20px); position: relative; list-style: disc; } .header__submenu-level-2 li::marker { color: var(--accent-color-2); } .header__submenu-level-2 li a { font-size: 14px; font-weight: 400; padding: 8px 0; } .header__submenu-level-2 li a:hover { background: transparent; text-decoration: underline; } .header__nav-extra { display: none; } .header__phone { height: 100%; padding: 24px; align-content: center; border-left: 2px solid #f4f4f4; border-right: 2px solid #f4f4f4; font-weight: 400; font-size: 14px; line-height: 140%; .phone { white-space: nowrap; font-weight: 600; font-size: 18px; line-height: 140%; color: var(--accent-color-2-darker); } } .header__phone-text { white-space: nowrap; font-weight: 400; font-size: 14px; line-height: 140%; } .header__whatsapp-wrapper { height: 100%; align-content: center; padding: 24px; margin-right: 24px; border-right: 2px solid #f4f4f4; border-left: 2px solid #f4f4f4; } .header__burger { display: none; } .header__menu a.active { color: var(--accent-color-2); } .header__main .header__nav { display: none; } } .breadcrumbs { .breadcrumbs__list { margin-top: calc(var(--header-height) + 16px); list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .breadcrumbs__item + .breadcrumbs__item::before { content: "/"; color: var(--color-dark); margin-right: 8px; } .breadcrumbs__link { display: inline-block; } .breadcrumbs__current { color: var(--accent-color-2-darker); } } .text-bg { padding: 24px; border-radius: 16px; background: rgba(255, 255, 255, 0.3); } .hero-service { margin-top: 32px; border-radius: 0; background: transparent; color: var(--accent-color-1); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 24px; .hero-service__title { font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); max-width: 830px; } .hero-service__divider { display: none; } .hero-service__text { font-weight: 400; font-size: 24px; line-height: 140%; max-width: 830px; padding: 0; border-radius: 0; background: transparent; } } .services__video { margin: 48px auto 0; max-width: 1440px; width: calc(100% - 80px); padding: 0; height: 600px; border-radius: 32px; overflow: hidden; .services__video-player { width: 100%; height: 100%; } } .welcome { margin: 120px auto 0; border-radius: 32px; color: var(--color-light); display: flex; flex-direction: column; align-items: center; gap: 48px; .welcome__title { font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); } .welcome__wrapper { background: var(--accent-color-1); width: 100%; border-radius: 24px; padding: 32px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: center; gap: 48px; } .welcome__content { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; } .welcome__text { font-weight: 500; font-size: 32px; line-height: 120%; text-transform: uppercase; text-align: left; max-width: 720px; } .welcome__btn.pc { display: flex; max-width: 328px; } .welcome__btn.mob { display: none; } .welcome__img { width: 320px; height: auto; aspect-ratio: 1 / 1; justify-self: end; } } .about-short { margin-top: 120px; margin-bottom: 120px; display: grid; grid-template-columns: 1fr 512px; grid-template-rows: auto 1fr; gap: 32px 64px; align-items: start; .about-short__title { grid-column: 1 / 2; font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); max-width: 710px; } .about-short__text { grid-column: 1 / 2; font-weight: 400; font-size: 24px; line-height: 140%; color: var(--color-dark); background: transparent; padding: 0; border-radius: 0; max-width: 600px; } .about-short__img { grid-column: 2 / 3; grid-row: 1 / 3; width: 100%; height: 280px; -o-object-fit: cover; object-fit: cover; border-radius: 24px; border: 1px solid #eaeaea; justify-self: end; } } .approach { margin-top: 120px; .approach__title { max-width: 860px; margin: 0 auto; font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); } .approach__title.center { text-align: center; } .approach__wrapper { margin-top: 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; } .approach__item { display: flex; align-items: flex-start; gap: 16px; } .approach__item img { margin-top: 4px; width: auto; height: 24px; display: block; flex-shrink: 0; } .approach__text { flex: 1; text-wrap: balance; font-weight: 400; font-size: 20px; line-height: 140%; color: var(--accent-color-1); } } .services-purpose { margin: 120px auto 0; max-width: 1440px; width: calc(100% - 80px); border-radius: 32px; overflow: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); .services-purpose__text { padding: 64px; font-weight: 400; font-size: 24px; line-height: 140%; color: var(--color-light); background: rgba(185, 130, 75, 0.7); } .services-purpose__img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } } .help-consult { margin: 120px auto 0; .help-consult__wrapper { background: rgba(211, 211, 211, 0.34); border-radius: 32px; padding: 32px; display: grid; grid-template-columns: 1fr 480px; gap: 32px; align-items: center; } .help-consult__content { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; } .help-consult__title { font-weight: 500; font-size: 32px; line-height: 120%; text-transform: uppercase; text-align: left; color: var(--accent-color-1); background: transparent; border-radius: 0; border: none; padding: 0; } .help-consult__text { width: 100%; font-weight: 400; font-size: 24px; line-height: 140%; color: var(--color-dark); background: transparent; border-radius: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; } .help-consult__btn { max-width: 312px; } .help-consult__img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 24px; border: 1px solid #eaeaea; } } .condition { margin: 120px auto 0; max-width: 1440px; width: calc(100% - 80px); padding: 64px; min-height: 520px; display: flex; flex-direction: column; gap: 48px; border-radius: 32px; background: linear-gradient(180deg, rgb(0 0 0 / 94%) -20%, rgb(0 0 0 / 0%) 140%), url(/local/static/images/actions-2.webp); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--color-light); .condition__title { font-weight: 500; font-size: 48px; line-height: 120%; text-transform: uppercase; text-align: center; } .condition__wrapper { max-width: 920px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; } .condition__text { font-weight: 300; font-size: 18px; line-height: 140%; text-align: center; } } .test-popup { margin-top: 120px; .test-popup__wrapper { background: rgba(211, 211, 211, 0.34); padding: 32px; border-radius: 32px; border: 1px solid var(--accent-color-1); display: grid; grid-template-columns: 1fr 480px; gap: 32px; align-items: center; .test-popup__content { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; } .test-popup__title { font-weight: 400; font-size: 48px; line-height: 100%; text-transform: uppercase; text-align: left; color: var(--accent-color-2-darker); max-width: 860px; span { display: block; font-size: 32px; color: var(--accent-color-1); margin-top: 8px; } } p { max-width: 860px; font-weight: 400; font-size: 24px; line-height: 140%; text-transform: none; color: var(--color-dark); } } .test-popup__btn { width: 430px; } .test-popup__img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 24px; border: 1px solid #eaeaea; } } .gallery { margin-top: 120px; display: flex; flex-direction: column; gap: 64px; .gallery__title { font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; text-align: left; color: var(--accent-color-2-darker); } .gallery__wrapper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: 100%; } .gallery-item__wrapper { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; padding: 24px; border-radius: 24px; border: 1px solid #eaeaea; } .gallery-item { border-radius: 16px; display: block; width: 100%; height: 280px; -o-object-fit: cover; object-fit: cover; } } .hero { padding-top: 166px; position: relative; overflow: hidden; height: clamp(746px, calc(100vh), 100vh); .hero__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .hero__bg-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; -webkit-transform: scale(1); transform: scale(1); transition: opacity 2s ease-in-out; } .hero__bg-item.active { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); transition: opacity 2s ease-in-out, -webkit-transform 8s linear; transition: opacity 2s ease-in-out, transform 8s linear; transition: opacity 2s ease-in-out, transform 8s linear, -webkit-transform 8s linear; } .hero__bg-item:nth-child(1) { background-image: linear-gradient( 0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0) 100% ), url(/local/static/images/hero-bg-1.webp); } .hero__bg-item:nth-child(2) { background-image: linear-gradient( 0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0) 100% ), url(/local/static/images/hero-bg-2.webp); } .hero__bg-item:nth-child(3) { background-image: url(/local/static/images/hero-bg-3.webp); } .hero__wraper { height: 100%; position: relative; z-index: 2; display: flex; gap: 96px; align-items: center; justify-content: center; align-content: center; color: var(--color-light); } .hero__content { display: flex; flex-direction: column; max-width: 800px; width: 100%; } .hero__text { font-weight: 500; font-size: 24px; line-height: 140%; } .hero__title { margin-top: 16px; font-family: var(--second-family); font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; } .hero__btn { margin-top: 64px; max-width: 328px; } .hero__benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .hero__benefit { display: flex; align-items: center; background: linear-gradient( 135deg, rgba(248, 248, 248, 0.25) 0%, rgba(255, 255, 255, 0.25) 100% ); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 12px; padding: 24px; min-height: 120px; font-weight: 500; font-size: 20px; line-height: 140%; } } .about-clinik { position: relative; z-index: 2; margin-top: 60px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; .about-clinik__content { display: flex; flex-direction: column; } .about-clinik__title { font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); } .about-clinik__text { margin-top: 24px; font-weight: 300; font-size: 24px; line-height: 140%; color: var(--color-dark); } .about-clinik__action { margin-top: 64px; display: flex; gap: 24px; align-items: center; } .about-clinik__btn { max-width: 312px; } .about-clinik__desc { font-weight: 400; font-size: 32px; line-height: 120%; } .about-clinik__video { margin-right: 61px; position: relative; display: flex; align-items: center; justify-content: center; .video-wrapper { position: relative; width: 600px; height: 600px; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 1px solid #eaeaea; overflow: hidden; } .video-player { -o-object-fit: cover; object-fit: cover; width: 480px; height: 480px; border-radius: 50%; } .video-player.contain { -o-object-fit: contain; object-fit: contain; border-radius: 0; } .video-play-btn { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 96px; height: 96px; background: none; border: none; cursor: pointer; z-index: 10; transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease; svg { width: 100%; height: 100%; display: block; -webkit-filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15)); filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15)); } @media (hover: hover) { &:hover { -webkit-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1); } } &.hidden { opacity: 0; pointer-events: none; } } } .about-clinik__plane { position: absolute; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 16px; height: auto; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05); background: linear-gradient( 135deg, rgba(248, 248, 248, 0.8) 0%, rgba(255, 255, 255, 0.8) 100% ); font-weight: 500; font-size: 18px; line-height: 140%; transition: opacity 0.3s ease, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease; opacity: 1; &.hidden { opacity: 0; } span { color: var(--accent-color-1); } img { height: 19px; width: auto; -o-object-fit: contain; object-fit: contain; flex-shrink: 0; } } .about-clinik__plane:nth-child(2) { top: 100px; left: 19px; max-width: 257px; } .about-clinik__plane:nth-child(3) { top: 94px; right: -61px; max-width: 337px; } .about-clinik__plane:nth-child(4) { bottom: 100px; left: 19px; max-width: 257px; } .about-clinik__plane:nth-child(5) { bottom: 95.5px; right: -61px; max-width: 337px; } } .story { position: relative; z-index: 1; background-color: var(--color-light); overflow: hidden; .story__wrapper { margin-top: 240px; display: grid; grid-template-columns: 600px 1fr; gap: 120px; padding-bottom: 120px; } .story__img { overflow: hidden; width: 100%; height: auto; border-radius: 24px 160px 24px 160px; } .story__img img { display: block; -o-object-fit: contain; object-fit: contain; width: 100%; } .story__content { display: flex; flex-direction: column; gap: 16px; .story__title { font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); } span { font-weight: 600; font-size: 32px; line-height: 120%; color: var(--accent-color-2); } .story__text { font-weight: 300; font-size: 32px; line-height: 140%; color: var(--accent-color-2-darker); } } .story__btn { margin-top: 16px; max-width: 243px; gap: 12px; } } .story.page { .story__wrapper { margin-top: 120px; padding-bottom: 0; } } .emergency { position: relative; z-index: 1; background-color: var(--color-light); border-radius: 0 0 64px 64px; overflow: hidden; .emergency__inner { background: url(/local/static/images/emergency.webp) center bottom / cover no-repeat; padding: 64px 40px; height: 1100px; border-radius: 64px; display: flex; flex-direction: column; justify-content: flex-end; gap: 48px; margin-bottom: 120px; } .emergency__title { font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; color: var(--color-light); } .emergency__footer { display: flex; flex-direction: column; gap: 24px; } .emergency__benefits { list-style: none; padding: 0; margin: 0; display: flex; gap: 16px; flex-wrap: wrap; } .emergency__benefit { flex: 1 1 180px; background: var(--accent-color-2); border-radius: 16px; padding: 24px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } .emergency__benefit-icon { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; } .emergency__benefit-title { font-weight: 400; font-size: 16px; line-height: 1.2; text-transform: uppercase; color: var(--color-light); } .emergency__cta { align-self: stretch; max-width: 100%; height: 80px; font-size: 20px; font-weight: 500; border-radius: 12px; background: var(--accent-color-2); color: var(--color-light); gap: 14px; text-decoration: none; } } @media (max-width: 1279px) { .emergency { border-radius: 0 0 24px 24px; padding-top: 24px; .emergency__inner { padding: 24px 16px; height: auto; min-height: 550px; background: linear-gradient( to bottom, var(--accent-color-2) 0px, transparent 200px ), url(/local/static/images/emergency.webp) center bottom / cover no-repeat; justify-content: space-between; border-radius: 24px; gap: 32px; margin-bottom: 24px; } .emergency__title { font-weight: 300; font-size: 24px; text-transform: uppercase; text-align: center; } .emergency__footer { gap: 16px; } .emergency__benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .emergency__benefit { flex: auto; padding: 8px; gap: 8px; } .emergency__benefit-icon { width: 32px; height: 32px; } .emergency__benefit-title { font-size: 12px; } .emergency__cta { border-radius: 8px; padding: 16px 20px; height: 48px; font-size: 16px; } } } .quiz { position: relative; margin-top: -84px; padding: 148px 0 0; height: 980px; background-image: url("/local/static/images/quize-bg.webp"); background-size: cover; background-position: center; overflow: hidden; color: var(--color-light); display: flex; flex-direction: column; align-items: center; .quiz__wrapper { max-width: 1100px; width: 100%; margin: 0 auto; background: linear-gradient( 0deg, rgba(248, 248, 248, 0.25) 0%, rgb(0 0 0 / 20%) 100% ); border-radius: 24px; padding: 32px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05); } .quiz__title { width: calc(100% + 64px); position: relative; left: -32px; top: -32px; font-family: var(--font-family); font-weight: 700; font-size: 32px; text-align: center; text-transform: uppercase; line-height: 120%; background: rgba(185, 130, 75, 0.9); padding: 24px; border-radius: 16px 16px 0 0; span { display: block; font-weight: 400; text-transform: none; } } .quiz__start { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 64px; } .quiz__question-container { margin: 0 auto; display: none; -webkit-animation: fadeIn 0.5s ease; animation: fadeIn 0.5s ease; } .quiz__question-text { padding: 0 0 32px; font-weight: 400; font-size: 32px; line-height: 120%; text-align: center; color: var(--color-light); min-height: 110px; } .quiz__options { display: flex; flex-direction: column; gap: 16px; } .quiz__option { background: var(--color-light); color: var(--color-dark); padding: 20px; border-radius: 12px; cursor: pointer; transition: all 0.2s; font-size: 18px; display: flex; align-items: center; justify-content: center; text-align: center; } .quiz__option.selected { background: var(--accent-color-1); color: var(--color-light); } .quiz__controls { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; position: relative; } .quiz__controls-container { display: flex; align-items: center; gap: 24px; } .quiz__progress { display: flex; align-items: center; gap: 12px; min-width: 300px; } .quiz__progress-text { font-weight: 400; font-size: 18px; white-space: nowrap; } .quiz__line { width: 100%; height: 1px; background: transparent; border-top: 1px dashed var(--color-light); flex: 1; } .quiz__btn, .quiz__start-btn { border: none; cursor: pointer; transition: all 0.3s; } .quiz__btn:disabled { cursor: not-allowed; opacity: 0.7; } .quiz__result { display: none; background: var(--color-light); border-radius: 24px; padding: 40px; color: var(--color-dark); text-align: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); -webkit-animation: fadeIn 0.5s ease; animation: fadeIn 0.5s ease; } .quiz__result-title { font-size: 28px; font-weight: 700; color: var(--accent-color-2-darker); margin-bottom: 16px; text-transform: uppercase; } .quiz__result-text { font-size: 18px; line-height: 120%; margin-bottom: 32px; } .quiz__result-btn { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; margin: 0 auto; } .quiz__about { margin-top: 40px; padding-top: 32px; border-top: 1px solid #eaeaea; text-align: left; } .quiz__about-title { font-size: 24px; margin-bottom: 16px; color: var(--color-dark); font-weight: 700; } .quiz__about-desc { margin-bottom: 24px; font-size: 16px; color: var(--color-dark); } .quiz__stats { display: grid; gap: 16px; list-style: none; padding: 0; } .quiz__stats li { position: relative; padding-left: 24px; font-size: 16px; line-height: 120%; } .quiz__stats li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background: var(--accent-color-1); border-radius: 50%; } .quiz__restart { display: block; margin: 32px auto 0; background: none; border: none; color: var(--color-dark); text-decoration: underline; cursor: pointer; font-size: 14px; transition: color 0.3s; } @media (hover: hover) { .quiz__restart:hover { color: var(--accent-color-1); } } } .steps { margin-top: -84px; padding: 64px 0; position: relative; z-index: 1; background-color: var(--color-light); border-radius: 64px; overflow: hidden; .steps__title { font-weight: 400; font-size: 44px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); text-align: center; } .steps__wrapper { margin-top: 64px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 76px; } .steps__item { display: flex; align-items: center; gap: 24px; p { font-weight: 500; font-size: 32px; line-height: 120%; color: var(--accent-color-1); } img { height: 38px; width: auto; -o-object-fit: contain; object-fit: contain; flex-shrink: 0; } } .steps__chains { height: 54px; padding: 0 17px; } .steps__container-1, .steps__container-2 { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } } .action { margin-top: -84px; padding: 204px 0; background-image: url("/local/static/images/action-bg-1.webp"); background-size: cover; background-position: center; overflow: hidden; color: var(--color-light); display: flex; flex-direction: column; .action__wrapper { width: 100%; display: flex; flex-direction: column; } .action__content { max-width: 990px; display: flex; flex-direction: column; gap: 16px; } .action__subtitle { font-weight: 500; font-size: 24px; line-height: 140%; } .action__title { font-weight: 500; font-size: 48px; line-height: 120%; text-transform: uppercase; } .action__btn-wrapper { margin-top: 64px; display: flex; gap: 24px; align-items: center; } .action__btn { width: 232px; border: none; gap: 12px; } .action__price { font-weight: 400; font-size: 32px; line-height: 120%; span { display: block; font-weight: 300; font-size: 18px; line-height: 120%; text-decoration: line-through; } } } .clinika { -webkit-user-select: none; -moz-user-select: none; user-select: none; margin-top: -84px; padding: 64px 0 0; position: relative; z-index: 1; background-color: var(--color-light); border-radius: 64px 64px 0 0; overflow: hidden; .clinika__wrapper { width: 100%; display: flex; flex-direction: column; } .clinika__cta { width: 100%; display: flex; align-items: center; justify-content: space-between; } .clinika__title { font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); } .clinika__buttons { display: flex; align-items: center; gap: 24px; } .clinika__btn { flex-shrink: 0; width: 232px; gap: 12px; } .clinika__content { margin-top: 64px; display: flex; flex-direction: column; gap: 24px; .clinika__text { font-weight: 400; font-size: 24px; line-height: 120%; color: var(--accent-color-1); } .clinika__list { list-style: none; font-weight: 400; font-size: 18px; line-height: 140%; } } .clinika__slider { margin-top: 48px; position: relative; width: 100%; .swiper-button-next, .swiper-button-prev { width: 64px; height: 64px; background-color: var(--color-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 10; cursor: pointer; transition: opacity 0.3s; &::after { display: none; } } .swiper-button-disabled { opacity: 0.5; cursor: not-allowed; } .swiper-button-prev { left: -32px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05); } .swiper-button-next { right: -32px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05); } .swiper-button-next svg, .swiper-button-prev svg { width: 24px; height: auto; -o-object-fit: contain; object-fit: contain; } } .clinika__cards { margin-top: 0; width: 100%; overflow: hidden; .swiper-wrapper { align-items: stretch; } .swiper-slide { display: flex; height: auto; } .swiper-button-next, .swiper-button-prev { width: 64px; height: 64px; background-color: var(--color-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 10; cursor: pointer; transition: opacity 0.3s; &::after { display: none; } } .swiper-button-disabled { opacity: 0.5; cursor: not-allowed; } .swiper-button-prev { left: 16px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05); } .swiper-button-next { right: 16px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05); } .swiper-button-next svg, .swiper-button-prev svg { width: 24px; height: auto; -o-object-fit: contain; object-fit: contain; } } .clinika__card { width: 332px; display: flex; flex-direction: column; gap: 16px; } .clinika__img { width: 100%; height: 240px; -o-object-fit: cover; object-fit: cover; border-radius: 16px; } .clinika__about { border-radius: 100px; padding: 6px 12px; font-weight: 600; font-size: 16px; line-height: 120%; color: var(--accent-color-1); background: rgba(185, 130, 75, 0.1); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } .clinika.page { border-radius: 0; margin-top: 0; padding: 120px 0 0 0; .clinika__wrapper { margin-top: 0; } } .services { margin-top: 32px; .services__title { font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); } .services__tabs { margin-top: 64px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .services__tab { border-radius: 8px; padding: 12px; height: 40px; background: rgba(185, 130, 75, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 16px; line-height: 100%; color: var(--accent-color-1); } .services__cards { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .services__card { padding: 24px; border-radius: 24px; border: 1px solid #eaeaea; min-height: 460px; display: grid; grid-template-columns: 1fr; gap: 24px; } .services__name { grid-column: 1 / 3; grid-row: 1 / 2; font-weight: 600; font-size: 32px; line-height: 120%; color: var(--accent-color-2-darker); } .services__info { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 24px; } .services__img { grid-row: 2 / 3; grid-column: 1 / 2; display: block; border-radius: 16px; height: 214px; width: 100%; -o-object-fit: cover; object-fit: cover; flex-shrink: 0; } .services__text { height: 214px; grid-row: 2 / 3; grid-column: 2 / 3; overflow-y: auto; padding-right: 12px; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 8px; font-weight: 300; font-size: 16px; line-height: 140%; scrollbar-width: thin; scrollbar-color: var(--accent-color-1) #eaeaea; } .services__text::-webkit-scrollbar { width: 4px; } .services__text::-webkit-scrollbar-track { background: #eaeaea; border-radius: 2px; } .services__text::-webkit-scrollbar-thumb { background: var(--accent-color-1); border-radius: 2px; } .services__text::-webkit-scrollbar-thumb:hover { background: var(--accent-color-1); } .services__price { font-weight: 500; font-size: 24px; line-height: 120%; color: var(--accent-color-1); } .services__actions { display: flex; align-items: center; justify-content: center; gap: 24px; } } .services.first-page { margin-top: 120px; @media (min-width: 1280px) { .services__cards.swiper { display: block; } .services__cards.swiper .swiper-wrapper { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 16px; width: 100%; box-sizing: border-box; -webkit-transform: none !important; transform: none !important; } .services__cards.swiper .swiper-slide { width: auto !important; margin-right: 0 !important; } } @media (max-width: 1279px) { .services__cards.swiper { overflow: visible; margin-top: 24px; display: block; } .services__cards.swiper .swiper-wrapper { display: flex; gap: 0; } .services__card { height: auto; min-height: 0; width: 264px; flex-shrink: 0; } .services__img { height: 164px; } } .services__wrapper { width: 100%; display: flex; flex-direction: column; .services__cta { display: flex; align-items: center; justify-content: space-between; .services__btn { width: 222px; gap: 12px; } } .services__btn-detals { width: calc(100% - 32px); margin: 24px 16px 0; gap: 12px; } } .services__btn-more { margin-top: 48px; border: none; margin: 48px auto 0 auto; font-weight: 600; font-size: 24px; line-height: 100%; text-decoration: underline; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; color: var(--accent-color-1); background: transparent; cursor: pointer; } } .specialists { -webkit-user-select: none; -moz-user-select: none; user-select: none; margin-top: 120px; display: flex; flex-direction: column; gap: 64px; .specialists__wrapper { width: 100%; display: flex; flex-direction: column; gap: 64px; } .specialists__slider { position: relative; width: 100%; .swiper-button-next, .swiper-button-prev { width: 64px; height: 64px; background-color: var(--color-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; top: 156px; z-index: 10; cursor: pointer; transition: opacity 0.3s; &::after { display: none; } } .swiper-button-disabled { opacity: 0.5; cursor: not-allowed; } .swiper-button-prev { left: -32px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05); } .swiper-button-next { right: -32px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05); } .swiper-button-next svg, .swiper-button-prev svg { width: 24px; height: auto; -o-object-fit: contain; object-fit: contain; } } .specialists__title { font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); } .specialists__swiper { width: 100%; .swiper-wrapper { align-items: stretch; } .swiper-slide { display: flex; } } .specialists__item { border-radius: 24px; border: 1px solid #eaeaea; overflow: hidden; width: 332px; height: auto; display: flex; flex-direction: column; gap: 24px; } .specialists-item__img { display: block; height: 332px; aspect-ratio: 1 / 1; -o-object-fit: cover; object-fit: cover; border-radius: 0 0 24px 24px; } .specialists-item__content { padding: 0 16px 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; flex: 1 1 auto; } .specialists-item__info { display: flex; flex-direction: column; gap: 12px; } .specialists-item__name { font-weight: 500; font-size: 24px; line-height: 120%; color: var(--accent-color-2-darker); } .specialists-item__position { font-weight: 300; font-size: 18px; line-height: 140%; color: var(--color-dark); } .specialists-item__experience { font-weight: 300; font-size: 18px; line-height: 120%; span { display: block; font-weight: 600; font-size: 24px; line-height: 120%; color: var(--accent-color-1); margin-bottom: 4px; } } .specialists__cta { display: flex; align-items: center; justify-content: space-between; } .specialists__more { width: 222px; gap: 12px; } .specialists__more svg, .specialists__more .btn__arrow { width: 9px; height: auto; -o-object-fit: contain; object-fit: contain; flex-shrink: 0; } } .specialists.first-page { padding-bottom: 120px; position: relative; z-index: 1; background-color: var(--color-light); border-radius: 0 0 64px 64px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05); overflow: hidden; } .specialists.page { margin-top: 32px; .specialists__swiper .swiper-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .specialists__item { width: 100%; } .specialists-item__img { width: 100%; height: auto; aspect-ratio: 1 / 1; } .specialists-item__bottom-wrapper { display: flex; flex-direction: column; gap: 24px; width: 100%; } .specialists-page__btn { margin-top: auto; } } @media (max-width: 1279px) { .specialists.page .specialistsshort__swiper .swiper-wrapper { grid-template-columns: 1fr; } } .faq { position: relative; margin-top: -84px; background: url(/local/static/images/faq-bg.webp) center center no-repeat; background-size: cover; padding: 204px 0 120px 0; height: 1264px; .faq__h2 { font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); } .faq__container { margin-top: 48px; display: flex; gap: 48px; align-items: flex-start; } .faq__list { flex: 1; display: flex; flex-direction: column; gap: 24px; width: 100%; } .faq__item { border: 1px solid #eaeaea; border-radius: 12px; overflow: hidden; transition: border-color 0.3s; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); background: rgba(255, 255, 255, 0.5); &.active { .faq__icon { -webkit-transform: rotate(360deg); transform: rotate(360deg); } .faq__answer { grid-template-rows: 1fr; } } } .faq__trigger { overflow: hidden; width: 100%; display: flex; justify-content: space-between; padding: 24px; background: none; border: none; text-align: left; cursor: pointer; font-weight: 600; font-size: 24px; line-height: 120%; color: var(--accent-color-2-darker); gap: 16px; } .faq__icon { width: 24px; height: 24px; flex-shrink: 0; -webkit-transform: rotate(270deg); transform: rotate(270deg); transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; -o-object-fit: contain; object-fit: contain; } .faq__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-out; } .faq__answer-content { overflow: hidden; p { padding: 0 24px 24px; color: var(--color-dark); font-weight: 300; font-size: 18px; line-height: 140%; } } .faq__contacts { width: 480px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; p { font-weight: 300; font-size: 24px; line-height: 140%; color: var(--color-dark); } .faq__phone { font-weight: 600; font-size: 32px; line-height: 140%; color: var(--accent-color-1); } } } .faq.page { margin-top: 32px; padding-top: 0; margin-bottom: -120px; } .reviews { margin-top: -84px; padding: 64px 0 0; position: relative; z-index: 1; background-color: var(--color-light); border-radius: 64px 64px 0 0; overflow: hidden; .reviews__cta { display: flex; align-items: center; justify-content: space-between; } .reviews__more { width: 222px; gap: 12px; } .reviews__title { font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); max-width: 710px; span { color: var(--accent-color-1); width: 100%; } } .reviews__slider { -webkit-user-select: none; -moz-user-select: none; user-select: none; position: relative; width: 100%; margin: 64px 0 120px; .swiper-button-next, .swiper-button-prev { width: 64px; height: 64px; background-color: var(--color-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 10; cursor: pointer; transition: opacity 0.3s; &::after { display: none; } } .swiper-button-disabled { opacity: 0.5; cursor: not-allowed; } .swiper-button-prev { left: -32px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05); } .swiper-button-next { right: -32px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05); } .swiper-button-next svg, .swiper-button-prev svg { width: 24px; height: auto; -o-object-fit: contain; object-fit: contain; } } .reviews__items { width: 100%; overflow: hidden; .swiper-wrapper { align-items: stretch; } } .reviews__item { border: 1px solid #eaeaea; border-radius: 24px; padding: 24px 32px; height: auto; display: flex; justify-content: space-between; flex-direction: column; width: 332px; } .reviews__item-header { display: flex; align-items: center; gap: 12px; } .reviews__item-avatar { width: 54px; height: 54px; padding: 4px; border-radius: 50%; background: #f8f8f8; overflow: hidden; display: flex; align-items: center; justify-content: center; } .reviews__item-avatar img { width: 100%; height: 100%; object-fit: contain; } .reviews__item-user { display: flex; flex-direction: column; gap: 6px; } .reviews__item-name { font-weight: 500; font-size: 24px; line-height: 120%; color: var(--accent-color-2-darker); } .reviews__item-date { font-weight: 400; font-size: 18px; line-height: 140%; color: #c9c9c9; } .reviews__item-text { font-weight: 300; font-size: 16px; line-height: 140%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; transition: height 0.3s ease; } .reviews__item-text--expanded { -webkit-line-clamp: unset; display: block; } .reviews__item-content { display: flex; flex-direction: column; gap: 12px; } .reviews__item-rating { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .reviews__item-rating-stars { display: flex; align-items: center; gap: 4px; margin-top: 12px; } .reviews__star { font-size: 20px; line-height: 1; } .reviews__star.filled { color: #fbca0e; } .reviews__star.empty { color: #eaeaea; } .reviews__item-readmore { background: transparent; border: none; font-weight: 600; font-size: 16px; line-height: 140%; text-decoration: underline; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; color: var(--accent-color-1); display: flex; align-items: center; gap: 12px; } } .reviews.page { margin-top: 0; border-radius: 0; padding-top: 32px; .reviews__cta { margin-bottom: 64px; } .reviews__more { display: none !important; } .reviews__container { width: 100%; } .reviews__list { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .reviews__item { width: auto; } @media (max-width: 1279px) { .reviews__list { grid-template-columns: 1fr; } } .reviews__pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; } .reviews__pagination-link { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none; font-weight: 500; font-size: 18px; line-height: 100%; transition: all 0.3s; cursor: pointer; } .reviews__pagination-link.active { background: var(--accent-color-1); cursor: default; color: var(--color-light); } .reviews__pagination-ellipsis { display: flex; align-items: flex-end; justify-content: center; width: 40px; height: 40px; padding-bottom: 6px; font-weight: 500; color: var(--text-color); cursor: default; } .reviews__pagination-arrow { display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; width: 40px; height: 40px; background: transparent; border: none; padding: 0; } .reviews__pagination-arrow svg { display: block; } .reviews__pagination-arrow path { transition: fill 0.3s ease; } .reviews__pagination-arrow.active path { fill: var(--accent-color-1); } .reviews__pagination-arrow.disabled path { fill: #eaeaea; } .reviews__pagination-arrow.disabled { cursor: default; pointer-events: none; } @media (hover: hover) { .reviews__pagination-link.active:hover { background: var(--accent-color-1); color: var(--color-light); } .reviews__pagination-link:hover { background: #eaeaea; } } } .reviews.clinik { padding-top: 120px; padding-bottom: 0; .reviews__wrapper { margin-top: 0; } } .news.page { margin-top: 0; border-radius: 0; padding-top: 32px; .news__cta { margin-bottom: 64px; align-items: flex-start; justify-content: space-between; flex-direction: column; } .news__more { display: none !important; } .news__container { width: 100%; } .news__list { margin-top: 64px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .news__item { width: auto; } @media (max-width: 1279px) { .news__list { margin-top: 48px; grid-template-columns: 1fr; } } .news__pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; } .news__pagination-link { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none; font-weight: 500; font-size: 18px; line-height: 100%; transition: all 0.3s; cursor: pointer; } .news__pagination-link.active { background: var(--accent-color-1); cursor: default; color: var(--color-light); } .news__pagination-ellipsis { display: flex; align-items: flex-end; justify-content: center; width: 40px; height: 40px; padding-bottom: 6px; font-weight: 500; color: var(--text-color); cursor: default; } .news__pagination-arrow { display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; width: 40px; height: 40px; background: transparent; border: none; padding: 0; } .news__pagination-arrow svg { display: block; } .news__pagination-arrow path { transition: fill 0.3s ease; } .news__pagination-arrow.active path { fill: var(--accent-color-1); } .news__pagination-arrow.disabled path { fill: #eaeaea; } .news__pagination-arrow.disabled { cursor: default; pointer-events: none; } @media (hover: hover) { .news__pagination-link.active:hover { background: var(--accent-color-1); color: var(--color-light); } .news__pagination-link:hover { background: #eaeaea; } } } .reviews-short { .reviews-short__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; } .reviews-short__item { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; flex-shrink: 0; } .reviews-short__company { display: block; height: 88px; width: 100%; -o-object-fit: contain; object-fit: contain; padding: 24px 12px; border: 1px solid #eaeaea; border-radius: 12px; } .reviews-short__score { border-radius: 8px; padding: 16px; block-size: 48px; display: flex; align-items: center; gap: 8px; background: rgba(185, 130, 75, 0.1); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; span { font-weight: 500; font-size: 16px; line-height: 140%; color: var(--accent-color-1); } } .reviews-short__score img { inline-size: 20px; block-size: 20px; } .reviews-short__more { width: calc(100% - 32px); margin: 0 auto; gap: 12px; } .reviews-short__more svg { width: 9px; height: auto; -o-object-fit: contain; object-fit: contain; flex-shrink: 0; } } .news { margin: 120px auto 0; display: flex; flex-direction: column; gap: 64px; width: 100%; .news__filters { display: flex; flex-direction: column; gap: 64px; margin-top: 64px; } .news__main-tabs { display: flex; gap: 16px; flex-wrap: wrap; } .news__main-tab { padding: 12px 24px; border-radius: 12px; background: transparent; border: 1px solid var(--accent-color-1); color: var(--accent-color-1); font-size: 18px; font-weight: 500; cursor: pointer; transition: all 0.3s; } .news__main-tab.active { background: var(--accent-color-1); color: var(--color-light); } .news__tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .news__tab { border-radius: 8px; padding: 12px; height: 40px; background: rgba(185, 130, 75, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 16px; line-height: 100%; color: var(--accent-color-1); } .news__anchors.services__tabs { margin-top: 0; display: none; } .news__cta { display: flex; align-items: center; justify-content: space-between; } .news__more { width: 222px; gap: 12px; } .news__btn-more { border: none; margin: -16px auto 0 auto; font-weight: 600; font-size: 24px; line-height: 100%; text-decoration: underline; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; color: var(--accent-color-1); background: transparent; cursor: pointer; display: none; } .news__title { font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); } .news__swiper { width: 100%; .swiper-wrapper { align-items: stretch; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .swiper-slide { display: flex; height: auto; } .swiper-pagination { margin: 16px auto 0; position: static; height: 12px; display: none; align-items: center; justify-content: center; .swiper-pagination-bullet { display: block; width: 12px; height: 12px; margin-top: 0; background: #eaeaea; opacity: 1; } .swiper-pagination-bullet-active { background: var(--accent-color-1); } } } .news__item { border-radius: 32px; padding: 24px; border: 1px solid #eaeaea; overflow: hidden; width: 100%; display: flex; flex-direction: column; gap: 24px; } .news-item__img { border-radius: 24px; display: block; height: 350px; width: 100%; -o-object-fit: cover; object-fit: cover; } .news-item__content { display: flex; flex-direction: column; gap: 48px; flex: 1 1 auto; } .news-item__title { font-weight: 500; font-size: 24px; line-height: 120%; color: var(--accent-color-2-darker); } .news-item__meta { margin-top: auto; display: flex; align-items: center; justify-content: flex-start; gap: 12px; } .news-item__date { white-space: nowrap; border-radius: 12px; padding: 16px; height: 56px; background: #f8f8f8; display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 16px; line-height: 140%; text-transform: uppercase; img { display: block; height: 24px; aspect-ratio: 1 / 1; -o-object-fit: contain; object-fit: contain; flex-shrink: 0; } } .news-item__views { white-space: nowrap; border-radius: 12px; padding: 16px; height: 56px; background: #f8f8f8; display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 16px; line-height: 140%; text-transform: uppercase; img { display: block; height: 24px; aspect-ratio: 1 / 1; -o-object-fit: contain; object-fit: contain; flex-shrink: 0; } } .news-item__readmore-container { display: flex; align-items: center; justify-content: flex-end; width: 100%; .news-item__readmore { font-weight: 600; font-size: 16px; line-height: 140%; text-decoration: underline; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; color: var(--accent-color-1); display: flex; align-items: center; gap: 12px; } } .news-item__more { margin: 0 auto; gap: 12px; } .news-item__more svg, .news-item__more .btn__arrow { width: 9px; height: auto; -o-object-fit: contain; object-fit: contain; flex-shrink: 0; } } .accent-banner.short { gap: 16px; } .accent-banner { margin-top: 120px; padding: 64px; max-width: 1440px; width: calc(100% - 80px); display: flex; flex-direction: column; align-items: flex-start; gap: 64px; color: var(--color-light); background: var(--accent-color-1) url("/local/static/images/accent-banner-img.webp") no-repeat center right / 327px 240px; border-radius: 32px; .accent-banner__content { max-width: 920px; display: flex; align-items: flex-start; flex-direction: column; gap: 16px; } .accent-banner__title { font-weight: 400; font-size: 32px; line-height: 120%; text-transform: uppercase; } .accent-banner__text { font-weight: 300; font-size: 24px; line-height: 140%; } .accent-banner__action-container { width: 100%; display: flex; gap: 24px; flex-direction: row-reverse; justify-content: flex-end; align-items: center; } .accent-banner__action { font-weight: 300; font-size: 32px; line-height: 120%; display: flex; gap: 4px; justify-content: center; flex-direction: column; align-items: center; span { display: block; font-weight: 200; font-size: 18px; line-height: 120%; } } .accent-banner__btn { display: flex; gap: 12px; max-width: 312px; } } .contacts { padding-bottom: 120px; .contacts__title { margin-top: 32px; font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); } .contacts__intro { margin-top: 64px; display: flex; flex-direction: column; gap: 32px; } .contacts__subtitle { font-weight: 400; font-size: 32px; line-height: 140%; color: var(--accent-color-2-darker); } .contacts__subtitle span:last-child { color: var(--accent-color-1); } .contacts__divider { height: 1px; background-color: #eaeaea; width: 100%; } .contacts__details { display: flex; gap: 80px; margin-top: 0; } .contacts__detail-item { display: flex; flex-direction: column; gap: 12px; } .contacts__label { font-weight: 400; font-size: 24px; line-height: 120%; color: var(--accent-color-2-darker); } .contacts__value { font-weight: 400; font-size: 20px; line-height: 140%; color: var(--accent-color-1); text-decoration: none; } .contacts__visual { margin-top: 64px; width: 100%; height: 480px; border-radius: 24px; overflow: hidden; } .contacts__map-img { width: 100%; height: 100%; object-fit: cover; } .contacts__directions { margin-top: 64px; display: flex; flex-direction: column; gap: 32px; } .contacts__directions-header { display: flex; justify-content: space-between; align-items: center; } .contacts__directions-title { font-weight: 600; font-size: 32px; line-height: 120%; color: var(--accent-color-1); } .contacts__route-btn { display: flex; gap: 12px; width: auto; } .contacts__routes { display: flex; flex-direction: column; gap: 24px; } .contacts__route { display: flex; flex-direction: column; gap: 8px; } .contacts__station { font-weight: 500; font-size: 24px; line-height: 140%; color: var(--accent-color-2-darker); } .contacts__desc { font-weight: 300; font-size: 18px; line-height: 140%; color: var(--accent-color-2-darker); max-width: 900px; } } .page-intro { margin-top: 32px; display: flex; flex-direction: column; gap: 64px; } .page-intro__title { font-family: var(--font-family); font-weight: 400; font-size: 48px; line-height: 1.2; text-transform: uppercase; color: var(--accent-color-2-darker); } .page-intro__tags { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .page-intro__tag { background: rgba(185, 130, 75, 0.1); border-radius: 8px; padding: 12px; font-family: var(--font-family); font-weight: 400; font-size: 16px; line-height: 1; color: var(--accent-color-1); text-decoration: none; transition: background 0.3s, color 0.3s; } .page-intro__tag:hover { background: var(--accent-color-1); color: var(--color-light); } .licenses { margin-top: 120px !important; display: flex; flex-direction: column; gap: 32px; } .licenses__header { display: flex; justify-content: space-between; align-items: center; height: 64px; } .licenses__title { font-family: var(--font-family); font-weight: 400; font-size: 48px; line-height: 1.2; text-transform: uppercase; color: var(--accent-color-2-darker); } .licenses__btn { display: flex; gap: 12px; width: 222px; } .licenses__btn:hover { background: #a06d3a; } .licenses__btn-text { font-family: var(--font-family); font-weight: 600; font-size: 18px; line-height: 1; color: var(--color-light); } .licenses__btn-icon { width: 24px; height: 24px; transform: rotate(90deg); display: flex; align-items: center; justify-content: center; } .licenses__number { font-family: var(--font-family); font-weight: 600; font-size: 32px; line-height: 1.4; color: #007074; } .licenses__list { display: flex; gap: 64px; } .licenses__item { flex: 1 0 0; position: relative; cursor: pointer; } .licenses__item:nth-child(1) { aspect-ratio: 733/934; } .licenses__item:nth-child(2) { aspect-ratio: 720/962; } .licenses__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .article { padding-top: 40px; } .article__title-h1 { font-family: var(--font-family); font-weight: 400; font-size: 24px; line-height: 1.2; text-transform: uppercase; color: var(--accent-color-2-darker); margin-bottom: 24px; } .article__container { display: flex; gap: 48px; align-items: flex-start; } .article__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 32px; } .article__aside { width: 400px; flex-shrink: 0; display: flex; flex-direction: column; gap: 32px; } .aside-block { border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 32px; } .aside-block--teal { background: var(--accent-color-2); } .aside-block--orange { background: var(--accent-color-1); } .aside-block__title { font-family: var(--font-family); font-weight: 500; font-size: 24px; line-height: 1.2; text-transform: uppercase; color: var(--color-light); margin-bottom: 16px; } .aside-list { display: flex; flex-direction: column; gap: 16px; } .aside-list__item { display: flex; align-items: center; gap: 16px; text-decoration: none; } .aside-list__icon { width: 20px; height: 20px; flex-shrink: 0; } .aside-list__icon img { width: 100%; height: 100%; object-fit: contain; } .aside-list__text { font-family: var(--font-family); font-weight: 300; font-size: 18px; line-height: 1.4; color: var(--color-light); } .aside-btn { border: none; display: flex; gap: 12px; color: var(--accent-color-2); } .aside-btn--orange { border: none; display: flex; gap: 12px; color: var(--accent-color-1); } .article__image-container { width: 100%; height: 524px; border-radius: 32.55px; overflow: hidden; position: relative; } .article__image { width: 100%; height: 100%; object-fit: cover; } .article__meta { display: flex; gap: 12px; } .article__meta-item { background: #f8f8f8; border-radius: 12px; height: 56px; display: flex; align-items: center; padding: 0 16px; gap: 8px; } .article__meta-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .article__meta-icon img { width: 100%; height: 100%; object-fit: contain; } .article__meta-text { font-family: var(--font-family); font-weight: 500; font-size: 16px; text-transform: uppercase; color: var(--color-dark); line-height: 1.4; } .article__toc { background: #f8f8f8; border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 16px; } .article__toc-title { font-family: var(--font-family); font-weight: 500; font-size: 24px; line-height: 1.4; color: var(--accent-color-2-darker); margin-bottom: 0; } .article__toc-list { display: flex; flex-direction: column; gap: 16px; } .article__toc-item { display: flex; align-items: center; gap: 12px; text-decoration: none; cursor: pointer; } .article__toc-icon { width: 20px; height: 20px; flex-shrink: 0; margin-bottom: 4px; } .article__toc-icon img { width: 100%; height: 100%; object-fit: contain; } .article__toc-link-wrapper { flex: 1; border-bottom: 1px dashed var(--color-dark); padding-bottom: 4px; transition: border-color 0.3s ease; } .article__toc-link { font-family: var(--font-family); font-weight: 400; font-size: 16px; line-height: 1.4; color: var(--color-dark); transition: color 0.3s ease; } .article__toc-item:hover .article__toc-link { color: var(--accent-color-1); } .article__section { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; scroll-margin-top: 180px; } .article__section-title { font-family: var(--font-family); font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--accent-color-2-darker); } .article__section-text { font-family: var(--font-family); font-weight: 400; font-size: 18px; line-height: 1.4; color: var(--color-dark); display: flex; flex-direction: column; gap: 16px; } .prices { padding-bottom: 120px; } .prices__title { margin-top: 32px; font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); } .prices__tabs { margin-top: 64px; display: flex; flex-wrap: wrap; gap: 12px; } .prices__tab { padding: 12px; background: rgba(185, 130, 75, 0.1); border-radius: 8px; color: var(--accent-color-1); font-weight: 400; font-size: 16px; line-height: 100%; cursor: pointer; transition: background 0.3s, color 0.3s; text-decoration: none; } .prices__tab:hover, .prices__tab.active { background: var(--accent-color-1); color: var(--color-light); } .prices__content { margin-top: 64px; display: flex; flex-direction: column; } .prices__section { border-top: 2px solid #eaeaea; padding-top: 48px; padding-bottom: 48px; cursor: pointer; } .prices__section-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; } .prices__section-info { flex: 1; display: flex; flex-direction: column; gap: 24px; } .prices__section-title { font-weight: 600; font-size: 32px; line-height: 120%; color: var(--accent-color-2-darker); } .prices__section-desc { font-weight: 300; font-size: 20px; line-height: 140%; color: var(--color-dark); } .prices__icon { width: 48px; height: 48px; background: #f8f8f8; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .prices__icon svg { width: 24px; height: 24px; transition: transform 0.3s ease; } .prices__icon.pc { background: transparent; } .prices__icon.pc svg { width: 48px; height: 48px; } .prices__icon.pc svg path { transition: fill 0.3s ease; } .prices__section.active .prices__icon.pc svg path[fill="#007074"] { fill: var(--accent-color-1); transition: fill 0.3s ease; } .prices__list-container { margin-top: 64px; display: none; gap: 64px; align-items: flex-start; } .prices__section.active .prices__list-container { display: flex; } .prices__section.active .prices__icon svg { transform: rotate(45deg); } .prices__toggle-text { font-weight: 300; font-size: 18px; line-height: 140%; color: var(--accent-color-1); text-decoration: underline; margin-top: 12px; display: block; } .prices__list { flex: 1; display: flex; flex-direction: column; width: 100%; } .prices__item { display: flex; justify-content: space-between; align-items: baseline; padding: 24px 0; border-bottom: 1px solid #eaeaea; gap: 24px; } .prices__item:last-child { border: none; } .prices__item:first-child { border-top: 1px solid #eaeaea; } .prices__item-name { font-weight: 300; font-size: 18px; line-height: 140%; color: var(--color-dark); flex: 1; } .prices__item-cost { font-weight: 500; font-size: 20px; line-height: 120%; color: var(--accent-color-2); white-space: nowrap; } .prices__promo { width: 480px; flex-shrink: 0; display: flex; flex-direction: column; gap: 32px; } .prices__promo-img { width: 100%; height: 320px; border-radius: 16px; overflow: hidden; } .prices__promo-img img { width: 100%; height: 100%; object-fit: cover; } .prices__promo-btn { width: 100%; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; background: rgba(0, 0, 0, 0.5); } .modal.is-open { display: flex; opacity: 1; } .modal__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; cursor: pointer; } .modal__content { position: relative; background: var(--color-light); border-radius: 12px; padding: 32px; max-width: 480px; width: 90%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); transform: translateY(20px); transition: transform 0.3s ease; } .modal.modal-quiz { z-index: 9999; height: 100%; background: rgba(0, 0, 0, 0.6); } .modal.modal-quiz .modal__content { display: flex; align-items: center; background: transparent; width: 100%; max-width: 800px; box-shadow: none; overflow: hidden; height: 100vh; overflow-y: auto; } .modal.modal-quiz .quiz { background-image: none; height: auto; margin-top: 0; padding-top: 0; } .modal.modal-quiz .quiz__wrapper { background: rgba(225, 225, 225, 0.2); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05); max-height: none; } .modal.modal-quiz .modal__close { top: 10px; right: 20px; color: var(--color-light); z-index: 10; } .modal.is-open .modal__content { transform: translateY(0); } .modal__close { position: absolute; top: 16px; right: 16px; font-size: 24px; color: var(--color-dark); text-decoration: none; cursor: pointer; } .modal__title { font-family: var(--font-family); font-weight: 600; font-size: 24px; color: var(--accent-color-2-darker); margin-bottom: 24px; text-align: center; } .modal__form { display: flex; flex-direction: column; gap: 16px; } .modal__field { display: flex; flex-direction: column; } .modal__label { font-size: 14px; color: var(--color-dark); margin-bottom: 8px; } .modal__input { padding: 12px; border: 1px solid var(--accent-color-1); border-radius: 8px; font-size: 16px; color: var(--color-dark); } .modal__checkbox-row { display: flex; align-items: center; gap: 8px; } .modal__checkbox { width: 16px; height: 16px; } .modal__checkbox-text { font-size: 12px; color: var(--color-dark); } .modal__actions { display: flex; justify-content: center; } @media (hover: hover) { .modal__btn:hover { background: var(--accent-color-1); color: var(--color-light); } } body.modal-open { overflow: hidden; } .footer { margin-top: 120px; position: relative; isolation: isolate; padding: 40px 0 32px; color: var(--color-light); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 48px; } .footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("/local/static/images/footer-bg.webp"); background-size: cover; background-position: bottom center; background-repeat: no-repeat; background-color: #11180f; } .footer__top { display: flex; justify-content: center; gap: 50px; align-items: center; position: relative; padding-bottom: 40px; width: 100%; } .footer__cta-item { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; } .footer__cta-text { font-weight: 600; font-size: 24px; line-height: 120%; } .footer__btn { height: 56px; border-radius: 100px; padding: 0 24px; background: var(--color-light); color: var(--accent-color-2); font-weight: 500; font-size: 16px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; } .footer__main { display: flex; flex-direction: row; align-items: flex-start; gap: 64px; width: 100%; } .footer__info { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; } .footer__logo { display: block; width: 282px; height: auto; } .footer__footer { width: 100%; display: flex; flex-direction: column; gap: 0; } .footer__addr-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding-bottom: 8px; border-bottom: 1px solid #eaeaea; } .footer__social { display: flex; gap: 12px; } .footer__social img { width: 40px; height: 40px; } .footer__addr { font-weight: 500; font-size: 18px; line-height: 140%; } .footer__navs { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; width: 100%; } .footer__nav[aria-label="Лечение зависимостей"] { display: flex; } .footer__nav-item { display: flex; flex-direction: column; } .footer__nav-row { display: flex; align-items: center; gap: 8px; } .footer__nav-row > a { flex: 1; } .footer__nav-toggle { flex-shrink: 0; width: 20px; height: 20px; padding: 0; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-light); opacity: 0.7; transition: opacity 0.2s; } .footer__nav-toggle::before { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.25s ease; } @media (hover: hover) { .footer__nav-toggle:hover { opacity: 1; } } .footer__nav-item.is-open > .footer__nav-row > .footer__nav-toggle::before { transform: rotate(225deg) translate(-2px, -2px); } .footer__nav-sublist { padding-left: 16px; max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; transform: translateY(-4px); transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease, transform 0.25s ease; } .footer__nav-item.is-open > .footer__nav-sublist { max-height: 600px; margin-top: 4px; opacity: 1; transform: translateY(0); display: flex; flex-direction: column; gap: 8px; } @media (prefers-reduced-motion: reduce) { .footer__nav-sublist, .footer__nav-toggle::before { transition: none; } } .footer__nav-sublist li a { font-size: 14px; opacity: 0.7; } .footer__nav-sublist li a:hover { opacity: 1; } .footer__nav { display: flex; flex-direction: column; gap: 12px; } .footer__nav-title { font-weight: 600; font-size: 18px; line-height: 120%; color: var(--color-light); } .footer__nav ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; } .footer__nav li a { font-weight: 400; font-size: 16px; line-height: 120%; color: var(--color-light); opacity: 0.8; text-decoration: none; transition: opacity 0.3s; } .footer__nav li a:hover { opacity: 1; text-decoration: underline; } .footer__bottom { padding-top: 24px; padding-bottom: 8px; display: flex; align-items: center; gap: 32px; list-style: none; width: 100%; } .footer__bottom li { font-weight: 400; font-size: 14px; line-height: 140%; color: var(--color-light); } .footer__bottom li:last-child { text-decoration: underline; margin-left: auto; } @media screen and (max-width: 1279px) { :root { --header-height: 74px; } .mob { display: flex !important; } .pc { display: none !important; } .swiper-button-next, .swiper-button-prev { display: none !important; } .text-bg { padding: 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.3); } .btn { border-radius: 8px; padding: 16px 20px; height: 48px; font-size: 16px; } .btn-reverce { border-radius: 8px; padding: 16px 20px; height: 48px; font-size: 16px; } .container { width: calc(100% - 32px); margin: 0 16px 0 16px; padding: 0; } .header { height: auto; padding: 16px 16px 0; .header__main { height: auto; border-bottom: none; padding: 0; } .header__logo { width: 176px; height: 35px; padding: 0; border: none; flex-shrink: 0; } .header__address { display: none; } .btn, .header__nav-messenger-link { border-radius: 6px; width: 40px; height: 40px; img { width: 20px; height: 20px; } } .header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .header__nav { position: fixed; left: -16px; right: 0; top: 74px; bottom: 0; background: var(--color-light); padding: 24px 16px; overflow-y: auto; z-index: 1; display: none; flex-direction: column; .header__menu { padding: 0; width: 100%; flex-direction: column; flex-wrap: nowrap; height: auto; gap: 0; } .header__menu-title { display: block; font-weight: 300; font-size: 24px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); list-style: none; margin-bottom: 16px; } .header__menu > li:first-child { border-top: 1px solid #eaeaea; } .header__menu > li { list-style: none; padding: 18px 0; border-bottom: 1px solid #eaeaea; font-weight: 500; font-size: 17px; line-height: 120%; color: var(--accent-color-2-darker); width: 100%; display: block; height: auto; transition: background-color 0.2s ease; } .header__menu > li:hover { background-color: rgba(0, 0, 0, 0.01); } .header__menu > li > a { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; } .header__menu > li.has-submenu { padding: 16px 0; } .header__menu > li.has-submenu > a::after { content: "›"; font-size: 24px; transform: rotate(0deg); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: var(--accent-color-2); display: block; width: auto; height: auto; line-height: 1; font-weight: 300; margin-left: 8px; } .header__menu > li.has-submenu.submenu-open > a::after { transform: rotate(90deg) scale(1.7) !important; } .header__submenu { display: none; list-style: none; position: static; box-shadow: none; padding: 0; background: transparent; border-radius: 0; min-width: 0; max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; opacity: 0; } .header__menu > li.has-submenu.submenu-open .header__submenu { display: flex; flex-direction: column; height: auto; min-height: fit-content; gap: 4px; padding: 12px 20px; background: rgba(0, 0, 0, 0.02); border-radius: 8px; margin: 8px 0; opacity: 1; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease 0.1s; } .header__submenu-level-2 { position: static; width: 100%; min-width: 0; padding: 8px 0 8px 16px; background: rgba(0, 0, 0, 0.03); border: none; box-shadow: none; display: none; flex-direction: column; gap: 2px; border-radius: 6px; margin: 4px 0; } .header__submenu li.has-submenu-level-2.submenu-open .header__submenu-level-2 { display: flex; } .header__submenu li { font-weight: 400; font-size: 15px; line-height: 140%; color: var(--color-dark); padding: 8px 0; border: none; width: 100%; position: relative; } .header__submenu li.has-submenu-level-2 { position: relative; } .header__submenu li.has-submenu-level-2 > a { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; cursor: pointer; transition: color 0.2s ease; } .header__submenu li.has-submenu-level-2 > a:hover { color: var(--accent-color-2); } .header__submenu li.has-submenu-level-2 > a::after { content: "›"; font-size: 20px; transform: rotate(0deg); transition: transform 0.3s ease; color: var(--accent-color-2); margin-left: 8px; font-weight: 300; } .header__submenu li.has-submenu-level-2.submenu-open > a::after { transform: rotate(90deg); } .header__submenu-level-2 li { list-style: none; width: 100%; padding: 6px 0 6px 12px; font-size: 14px; font-weight: 300; color: var(--color-gray-dark); position: relative; } .header__submenu-level-2 li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; background: var(--accent-color-2); border-radius: 50%; opacity: 0.6; } .header__submenu-level-2 li a { display: block; padding: 4px 0; transition: color 0.2s ease, padding-left 0.2s ease; } .header__submenu-level-2 li a:hover { color: var(--accent-color-2-darker); padding-left: 4px; } .header__nav-extra { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 24px; } .header__nav-phone { text-align: center; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--accent-color-2-darker); font-size: 14px; line-height: 140%; } .header__nav-phone-number { font-weight: 600; font-size: 18px; } .header__nav-messengers { display: flex; align-items: center; gap: 8px; } .header__nav-lang { display: flex; align-items: center; gap: 8px; } .header__lang { flex: 0 0 auto; padding: 8px 12px; border-radius: 999px; border: 1px solid #eaeaea; background: transparent; font-size: 14px; line-height: 1; color: var(--accent-color-2-darker); } .header__lang--active { background: var(--accent-color-2-darker); color: var(--color-light); border-color: var(--accent-color-2-darker); } .header__nav-cta { width: 100%; justify-content: center; } .header__nav-address { font-size: 14px; line-height: 140%; color: var(--color-dark); text-decoration: none; } } .header__burger { display: flex; } .header__burger img { width: 20px; height: 8px; } .header__cta, .header__address, .header__phone { display: none; } .header__bottom { z-index: 1; padding: 16px 0 0; justify-content: flex-start; margin: 0 -16px; width: calc(100% + 32px); } .header__hashtags { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: 0 16px 16px; gap: 8px; } .header__hashtags::-webkit-scrollbar { display: none; } } .menu-open, .menu-open body { overflow: hidden; } .menu-open .header__nav { display: flex; } .menu-open .header__burger img { width: 20px; height: 20px; } .hero { margin-top: 74px; padding: 32px 0 56px 0; height: auto; .hero__bg-item.active { -webkit-transform: scale(1.2); transform: scale(1.2); } .hero__bg-item:nth-child(1) { background-image: linear-gradient( 0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0) 100% ), url(/local/static/images/hero-bg-1.webp); } .hero__bg-item:nth-child(2) { background-image: linear-gradient( 0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0) 100% ), url(/local/static/images/hero-bg-2.webp); } .hero__bg-item:nth-child(3) { background-image: linear-gradient( 0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0) 100% ), url(/local/static/images/hero-bg-3.webp); } .hero__wraper { flex-direction: column; gap: 48px; } .hero__content { max-width: 100%; } .hero__text { font-weight: 300; font-size: 18px; text-transform: uppercase; } .hero__title { font-weight: 300; margin-top: 8px; font-size: 32px; max-width: 800px; } .hero__btn { margin-top: 0; max-width: 100%; border: none; } .hero__benefits { display: flex; width: 100%; flex-wrap: wrap; gap: 8px; } .hero__benefit { font-size: 16px; width: -webkit-min-content; width: -moz-min-content; width: min-content; display: flex; align-items: center; padding: 12px; min-height: 58px; } } .about-clinik { margin: 0; width: 100%; border-radius: 24px 24px 0 0; margin-top: -24px; padding: 0 16px; gap: 32px; background: var(--color-light); z-index: 1; grid-template-columns: 1fr; .about-clinik__title { display: none; } .about-clinik__action { margin-top: 24px; flex-direction: column; } .about-clinik__btn { max-width: 100%; } .about-clinik__desc { font-size: 22px; } .about-clinik__text { margin-top: 24px; font-size: 18px; } .about-clinik__video { margin-right: 0; .video-wrapper { width: 100%; max-width: 343px; height: 100%; max-height: 343px; aspect-ratio: 1 / 1; justify-content: flex-end; } .video-player { width: 180px; height: 180px; } .video-play-btn { width: 32px; height: 32px; -webkit-transform: translate(calc(-50% + 90px), -50%); transform: translate(calc(-50% + 80px), -50%); } } .about-clinik__plane { gap: 6px; border-radius: 0; padding: 0; height: auto; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; background: transparent; font-size: 11px; img { height: 36px; width: 36px; padding: 8px; border-radius: 7px; background: var(--color-light); -webkit-backdrop-filter: blur(4.679999828338623px); backdrop-filter: blur(4.679999828338623px); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05); background: linear-gradient( 135deg, rgba(248, 248, 248, 0.8) 0%, rgba(255, 255, 255, 0.8) 100% ); } } .about-clinik__plane:nth-child(2) { top: auto; bottom: 15px; left: 53px; max-width: 170px; } .about-clinik__plane:nth-child(3) { top: 5px; width: 100%; right: 120px; max-width: 176px; } .about-clinik__plane:nth-child(4) { bottom: 91px; left: -3px; max-width: 150px; } .about-clinik__plane:nth-child(5) { bottom: auto; top: 94px; right: auto; left: -11px; max-width: 178px; } } .about-clinik.page { margin-top: 0; } .story { .story__wrapper { margin-top: 48px; grid-template-columns: 1fr; gap: 24px; padding-bottom: 24px; } .story__img { border-radius: 12px 64px 12px 64px; } .story__content { gap: 12px; .story__title { font-weight: 300; font-size: 24px; text-transform: uppercase; } span { font-size: 22px; } .story__text { font-size: 22px; text-align: center; } } .story__title { font-weight: 300; font-size: 24px; text-transform: uppercase; text-align: center; } .story__btn { margin-top: 16px; max-width: 100%; gap: 12px; } } .story.page { .story__wrapper { margin-top: 48px; padding-bottom: 0; } } .quiz { margin-top: -24px; padding: 72px 0 72px 0; height: auto; .quiz__wrapper { max-width: calc(100% - 32px); border-radius: 12px; padding: 16px; } .quiz__title { width: calc(100% + 32px); left: -16px; top: -16px; font-size: 24px; padding: 16px; border-radius: 12px 12px 0 0; } .quiz__start { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 48px; } .quiz__question-text { padding: 0 0 24px; font-size: 20px; min-height: auto; } .quiz__options { gap: 8px; } .quiz__option { padding: 16px 20px; min-height: 48px; border-radius: 8px; font-size: 16px; } .quiz__controls { margin-top: 32px; grid-template-columns: 1fr; gap: 24px; } .quiz__controls-container { gap: 12px; } .quiz__progress { width: 100%; min-width: auto; } .quiz__progress-text { font-size: 18px; } .quiz__result { border-radius: 0; background: transparent; padding: 0; box-shadow: none; color: var(--color-light); } .quiz__result-title { font-size: 20px; color: var(--color-light); margin-bottom: 16px; } .quiz__result-text { font-size: 18px; } .quiz__result-btn { margin: 0 auto; max-width: 100%; } .quiz__about { margin-top: 32px; } .quiz__about-title { font-size: 20px; margin-bottom: 16px; color: var(--color-light); text-transform: uppercase; } .quiz__about-desc { margin-bottom: 24px; font-size: 16px; color: var(--color-light); } .quiz__restart { color: var(--color-light); font-size: 16px; } @media (hover: hover) { .quiz__restart:hover { color: var(--accent-color-1); } } } .steps { border-radius: 24px; margin-top: -24px; padding: 24px 0 24px 0; .steps__title { font-size: 24px; } .steps__wrapper { position: relative; margin-top: 24px; grid-template-columns: 1fr; gap: 24px; } .steps__wrapper::before { position: absolute; border-left: 2px dashed var(--accent-color-1); content: ""; display: block; width: 1px; height: 100%; left: 8px; } .steps__item { gap: 16px; p { font-size: 16px; } img { height: 32px; width: 21px; -o-object-fit: contain; object-fit: contain; background: var(--color-light); z-index: 1; } } .steps__chains { display: none; } .steps__container-1, .steps__container-2 { gap: 24px; } } .action { margin-top: -24px; padding: 72px 0 72px 0; background-image: url(/local/static/images/actions-1.webp); .action__wrapper { width: auto; } .action__content { max-width: 100%; gap: 12px; } .action__subtitle { font-weight: 300; font-size: 18px; text-align: center; } .action__subtitle:last-child { display: none; } .action__title { font-weight: 300; font-size: 32px; text-align: center; } .action__btn-wrapper { margin-top: 24px; flex-direction: column-reverse; } .action__btn { width: 100%; border: none; gap: 12px; } .action__price { padding: 12px; text-align: center; border-radius: 12px; width: 100%; background: linear-gradient( 135deg, rgba(248, 248, 248, 0.25) 0%, rgba(255, 255, 255, 0.25) 100% ); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-size: 22px; span { font-size: 16px; margin-top: 4px; } } } .clinika { border-radius: 24px; margin-top: -24px; padding: 24px 0 24px 0; .clinika__wrapper { width: auto; } .clinika__title { font-size: 24px; } .clinika__buttons { margin-top: 24px; flex-direction: column; gap: 12px; } .clinika__btn { flex-shrink: 0; width: 100%; gap: 12px; } .clinika__content { margin-top: 24px; gap: 12px; .clinika__text { font-size: 18px; } .clinika__list { font-size: 16px; } } .clinika__slider { width: calc(100% + 32px); margin: 24px -16px 0 -16px; } .clinika__card { width: 264px; gap: 12px; } .clinika__img { height: 192px; border-radius: 12px; } .clinika__about { border-radius: 100px; padding: 8px 12px; font-size: 14px; } .clinika__cards { padding: 0 16px; } } .clinika.page { margin-top: 0; padding: 48px 0 0 0; .clinika__wrapper { margin-top: 0; } } .hero-service { border-radius: 16px; margin-top: 20px; background: var(--accent-color-1); color: var(--color-light); padding: 16px; .hero-service__title { color: var(--color-light); text-wrap: balance; text-align: center; font-weight: 500; font-size: 24px; line-height: 120%; letter-spacing: -0.04em; text-transform: uppercase; } .hero-service__divider { display: block; margin: 0 auto; width: 100%; max-width: 194px; height: 1px; background: var(--color-light); } .hero-service__text { font-weight: 400; font-size: 18px; line-height: 120%; border-radius: 16px; background: rgba(255, 255, 255, 0.34); padding: 16px; } } .services__video { margin-top: 14px; height: 200px; border-radius: 16px; -o-object-fit: cover; object-fit: cover; overflow: hidden; .services__video-player { width: 100%; height: 100%; } } .welcome { margin-top: 14px; border-radius: 16px; background: var(--accent-color-1); color: var(--color-light); padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; .welcome__title { color: var(--color-light); font-weight: 500; font-size: 24px; line-height: 120%; text-transform: uppercase; text-align: center; } .welcome__wrapper { border-radius: 16px; background: rgba(255, 255, 255, 0.34); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; } .welcome__text { font-weight: 500; font-size: 15px; line-height: 120%; text-transform: uppercase; text-align: center; } .welcome__content { display: flex; flex-direction: column; align-items: center; gap: 12px; } .welcome__btn.pc { display: none; } .welcome__btn.mob { display: flex; width: 100%; } .welcome__img { width: 186px; aspect-ratio: 1 / 1; } } .about-short { margin-top: 48px; margin-bottom: 48px; display: flex; flex-direction: column; gap: 24px; .about-short__title { font-weight: 400; font-size: 24px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); } .about-short__text { padding: 16px; border-radius: 16px; font-weight: 400; font-size: 18px; line-height: 140%; color: var(--accent-color-1); background: rgba(201, 201, 201, 0.28); } } .reviews-short { display: flex; flex-direction: column; gap: 24px; .reviews-short__list { display: flex; flex-direction: row; gap: 12px; scroll-snap-type: x mandatory; overflow-x: auto; scrollbar-width: none; padding-inline: 16px; scroll-padding-inline: 16px; margin-inline: -16px; } .reviews-short__item { scroll-snap-align: start; width: 140px; gap: 8px; } .reviews-short__company { height: 44px; padding: 12px; border-radius: 8px; } .reviews-short__score { border-radius: 8px; padding: 12px; block-size: 36px; gap: 4px; span { font-size: 14px; } } .reviews-short__score img { inline-size: 13px; block-size: 13px; } .reviews-short__more { width: 100%; margin: 0 auto; gap: 12px; } .reviews-short__more svg { } } .approach { margin-top: 48px; .approach__title { font-weight: 400; font-size: 24px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); } .approach__wrapper { margin-top: 24px; display: flex; flex-direction: column; gap: 24px; } .approach__item { display: flex; align-items: flex-start; gap: 8px; } .approach__item img { margin-top: 4px; width: auto; height: 16px; display: block; flex-shrink: 0; } .approach__text { flex: 1; text-wrap: balance; border-radius: 16px; font-weight: 400; font-size: 18px; line-height: 140%; color: var(--accent-color-1); } } .services-purpose { display: flex; margin-top: 48px; width: 100%; flex-direction: column; border-radius: 0; .services-purpose__text { padding: 32px; font-weight: 400; font-size: 18px; line-height: 140%; color: var(--color-light); background: rgba(185, 130, 75, 0.7); } .services-purpose__img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; } } .help-consult { margin-top: 48px; .help-consult__wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: transparent; border: none; padding: 0; width: 100%; max-width: none; } .help-consult__content { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; } .help-consult__title { width: 100%; font-weight: 500; font-size: 24px; line-height: 120%; text-transform: uppercase; text-align: center; color: var(--accent-color-1); background: rgba(211, 211, 211, 0.34); border-radius: 16px; border: 1px solid var(--accent-color-1); padding: 16px 40px; } .help-consult__text { width: 100%; font-weight: 400; font-size: 16px; line-height: 140%; color: var(--accent-color-1); background: rgba(211, 211, 211, 0.34); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; } .help-consult__btn { width: 100%; max-width: none; } } .condition { margin: 0; margin-top: 48px; width: 100%; padding: 32px; min-height: 520px; display: flex; flex-direction: column; gap: 32px; background: linear-gradient( 180deg, rgb(0 0 0 / 94%) -20%, rgb(58 58 58 / 61%) 61%, rgb(0 0 0 / 0%) 140% ), url(/local/static/images/actions-2.webp); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--color-light); border-radius: 0; .condition__title { font-weight: 500; font-size: 22px; line-height: 120%; text-transform: uppercase; text-align: center; } .condition__wrapper { display: flex; flex-direction: column; align-items: center; gap: 24px; } .condition__text { font-weight: 300; font-size: 16px; line-height: 140%; text-align: center; } } .test-popup { margin-top: 48px; .test-popup__wrapper { padding: 16px; border-radius: 16px; border: 1px solid #eaeaea; background: transparent; display: flex; flex-direction: column; gap: 32px; align-items: center; .test-popup__content { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; } .test-popup__title { font-weight: 400; font-size: 24px; line-height: 120%; text-transform: uppercase; text-align: center; color: var(--accent-color-2-darker); max-width: none; span { display: block; font-size: 20px; color: inherit; margin-top: 0; } } p { font-weight: 400; font-size: 13px; line-height: 120%; text-transform: uppercase; color: inherit; text-align: center; } } .test-popup__btn { width: 100%; } } .gallery { margin-top: 48px; display: flex; flex-direction: column; gap: 24px; .gallery__title { font-weight: 400; font-size: 24px; line-height: 120%; text-transform: uppercase; text-align: center; color: var(--accent-color-2-darker); } .gallery__wrapper { display: grid; grid-template-columns: 1fr; gap: 16px; width: 100%; } .gallery-item__wrapper { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; padding: 16px; border-radius: 16px; border: 1px solid #eaeaea; } .gallery-item { border-radius: 12px; display: block; width: 100%; height: 180px; -o-object-fit: cover; object-fit: cover; } } .specialists { margin-top: 48px; gap: 24px; .specialists__wrapper { width: auto; gap: 24px; } .specialists__title { font-size: 24px; } .specialists__slider { position: relative; margin: 0 auto; width: calc(100% + 32px); margin: 0 -16px; } .specialists__swiper { padding: 0 16px; } .specialists__item { border-radius: 16px; width: 264px; gap: 12px; } .specialists-item__img { height: 264px; border-radius: 0; } .specialists-item__content { gap: 16px; } .specialists-item__info { gap: 8px; } .specialists-item__name { font-size: 18px; } .specialists-item__position { font-size: 16px; } .specialists-item__experience { font-size: 16px; span { font-size: 18px; } } .specialists__more { width: 100%; margin: 0 auto; } } .specialists.first-page { padding-bottom: 24px; border-radius: 0 0 24px 24px; } .specialists.page { margin-top: 24px; .specialists__swiper .swiper-wrapper { grid-template-columns: 1fr; } } .faq { margin: -24px 0 0; padding: 72px 0; height: auto; .faq__h2 { font-size: 24px; } .faq__container { margin-top: 24px; gap: 0; } .faq__list { display: none; } .faq__contacts { gap: 12px; width: 100%; p { font-size: 18px; } .faq__phone { font-size: 22px; } } .faq__more { margin-top: 12px; } } .faq.page { margin-top: 24px; margin-bottom: -48px; .faq__container { flex-direction: column; gap: 48px; } .faq__item { border-radius: 8px; } .faq__list { display: flex; gap: 12px; } .faq__question-text { font-size: 18px; } .faq__trigger { padding: 16px; font-size: 18px; gap: 12px; } .faq__icon { width: 16px; height: 16px; } .faq__answer-content { p { padding: 0 16px 16px; font-size: 16px; } } } .services { width: 100%; overflow: hidden; margin: 0; margin-top: 24px; .services__title { width: calc(100% - 32px); margin: 0 16px; font-size: 24px; line-height: 120%; } .services__tabs { margin-top: 16px; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: 16px; scroll-padding-inline: 16px; } .services__tab { white-space: nowrap; scroll-snap-align: start; padding: 8px; height: 32px; font-size: 14px; } .services__cards { width: calc(100% - 32px); margin: 0 16px; margin-top: 24px; grid-template-columns: 1fr; } .services__card { padding: 16px; border-radius: 12px; gap: 16px; height: auto; } .services__name { grid-row: 2 / 3; grid-column: 1 / 2; font-size: 22px; } .services__info { grid-template-columns: 1fr; grid-template-rows: auto; gap: 16px; } .services__img { grid-row: 1 / 2; grid-column: 1 / 2; border-radius: 12px; width: 100%; height: 224px; -o-object-fit: cover; object-fit: cover; } .services__text { height: 72px; grid-row: 3 / 4; grid-column: 1 / 2; gap: 12px; font-size: 14px; } .services__price { font-size: 18px; } .services__actions { margin-top: auto; justify-content: start; flex-direction: column; gap: 16px; } } .services.first-page { margin-top: 48px; } .news { margin: 48px auto 0; gap: 24px; max-width: 100%; .news__filters { width: 100%; gap: 16px; margin-top: 16px; } .news__tabs { flex-wrap: nowrap; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: 16px; scroll-padding-inline: 16px; margin-inline: -16px; } .news__tab { white-space: nowrap; scroll-snap-align: start; padding: 8px; height: 32px; font-size: 14px; } .news__title { font-size: 24px; } .news__swiper { width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px; .swiper-wrapper { display: flex; gap: 0; } .swiper-pagination { margin: 16px auto 0; position: static; height: 12px; display: flex; align-items: center; justify-content: center; .swiper-pagination-bullet { display: block; width: 12px; height: 12px; margin-top: 0; background: #eaeaea; opacity: 1; } .swiper-pagination-bullet-active { background: var(--accent-color-1); } } } .news__item { border-radius: 16px; padding: 16px; gap: 12px; } .news-item__img { border-radius: 12px; height: 180px; } .news-item__content { gap: 16px; } .news-item__title { font-size: 18px; } .news-item__meta { margin-top: auto; display: flex; align-items: center; justify-content: flex-start; gap: 12px; } .news-item__date { border-radius: 8px; padding: 12px; height: 44px; gap: 4px; font-size: 14px; img { height: 20px; } } .news-item__views { border-radius: 8px; padding: 12px; height: 44px; gap: 4px; font-size: 14px; img { height: 20px; } } .news-item__readmore-container { display: none; } .news__btn-more { display: none; } .news-item__more { margin: 0 auto; gap: 12px; } .news-item__more svg, .news-item__more .btn__arrow { width: 9px; height: auto; -o-object-fit: contain; object-fit: contain; flex-shrink: 0; } } .reviews { border-radius: 24px; margin-top: -24px; padding: 24px 0 24px 0; .reviews__title { font-size: 24px; max-width: 100%; } .reviews__item { border-radius: 12px; padding: 16px; width: 264px; } .reviews__item-name { font-size: 18px; } .reviews__item-header { align-items: center; gap: 8px; } .reviews__item-avatar { width: 32px; height: 32px; } .reviews__item-date { font-size: 16px; } .reviews__item-text { font-size: 14px; -webkit-line-clamp: 7; } .reviews__item-content { gap: 8px; } .reviews__item-rating { margin-top: 16px; gap: 8px; } .reviews__item-rating-stars { gap: 4px; margin-top: 8px; } .reviews__star { font-size: 16px; line-height: 1; } .reviews__item-readmore { font-size: 14px; gap: 0; svg { display: none; } } .reviews__slider { position: relative; margin: 24px -16px 24px -16px; width: calc(100% + 32px); } .reviews__items { padding: 0 16px; } } .reviews.page { padding-top: 24px; padding-bottom: 0; .reviews__cta { margin-bottom: 16px; } .reviews__pagination { margin-top: 24px; } .reviews__pagination-link { font-size: 16px; width: 32px; height: 32px; } .reviews__pagination-ellipsis { width: 32px; height: 32px; padding-bottom: 6px; } .reviews__pagination-arrow { width: 32px; height: 32px; } } .reviews.clinik { margin-top: 0; padding: 48px 0 0 0; .reviews__wrapper { margin-top: 0; } } .news.page { padding-top: 24px; .news__cta { margin-bottom: 16px; } .news__pagination { margin-top: 16px; } .news__pagination-link { font-size: 16px; width: 32px; height: 32px; } .news__pagination-ellipsis { width: 32px; height: 32px; padding-bottom: 6px; } .news__pagination-arrow { width: 32px; height: 32px; } } .accent-banner.short { gap: 16px; } .accent-banner { margin-top: 48px; padding: 16px; gap: 24px; border-radius: 16px; background: var(--accent-color-1); .accent-banner__content { max-width: 100%; gap: 12px; } .accent-banner__title { font-size: 22px; text-align: center; } .accent-banner__text { font-size: 18px; text-align: center; } .accent-banner__action-container { gap: 24px; flex-direction: column; justify-content: center; } .accent-banner__action { border-radius: 12px; padding: 16px; font-size: 22px; background: rgba(255, 255, 255, 0.3); text-align: center; span { font-size: 16px; } } .accent-banner__btn { height: 48px; max-width: 100%; } } .contacts { padding-bottom: 64px; .contacts__title { font-size: 24px; margin-top: 24px; } .contacts__intro { margin-top: 24px; gap: 16px; } .contacts__subtitle { font-size: 22px; line-height: 120%; } .contacts__details { flex-direction: column; gap: 24px; } .contacts__label { font-size: 20px; } .contacts__value { font-size: 18px; } .contacts__visual { margin-top: 24px; height: 400px; border-radius: 16px; } .contacts__directions { margin-top: 32px; gap: 32px; } .contacts__directions-header { flex-direction: column; align-items: flex-start; gap: 32px; } .contacts__directions-title { font-size: 22px; } .contacts__route-btn { width: 100%; } .contacts__routes { gap: 24px; } .contacts__station { font-size: 20px; } .contacts__desc { font-size: 16px; } } .page-intro { margin-top: 16px; margin-bottom: 0; gap: 16px; } .page-intro__title { font-size: 24px; } .page-intro__tags { flex-wrap: nowrap; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: 16px; scroll-padding-inline: 16px; margin-inline: -16px; } .page-intro__tags::-webkit-scrollbar { display: none; } .page-intro__tag { padding: 9px 8px; font-size: 14px; white-space: nowrap; flex-shrink: 0; scroll-snap-align: start; } .licenses { margin-top: 48px !important; gap: 16px; } .licenses__header { height: auto; flex-direction: column; align-items: flex-start; gap: 16px; } .licenses__title { font-size: 24px; width: 100%; } .licenses__btn { width: 100%; justify-content: center; padding: 14px 20px; border-radius: 8px; order: 3; } .licenses__btn-text { font-size: 16px; } .licenses__btn-icon { width: 20px; height: 20px; } .licenses__number { font-size: 22px; } .licenses__list { gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: 16px; scroll-padding-inline: 16px; margin-inline: -16px; width: calc(100% + 32px); margin-bottom: 32px; } .licenses__list::-webkit-scrollbar { display: none; } .licenses__item { flex: 0 0 264px; scroll-snap-align: center; } .licenses__item:nth-child(1) { height: 336px; } .licenses__item:nth-child(2) { height: 353px; } .article { padding-top: 24px; padding-bottom: 40px; } .article__container { flex-direction: column; gap: 32px; } .article__main { width: 100%; } .article__aside { display: none; } .article__title-h1 { font-size: 24px; margin-bottom: 16px; } .article__image-container { height: auto; aspect-ratio: 327 / 180; border-radius: 12px; margin-bottom: 0; } .article__meta { flex-wrap: wrap; } .article__meta-item { height: auto; padding: 12px; border-radius: 8px; } .article__meta-text { font-size: 14px; } .article__toc { padding: 12px; border-radius: 12px; } .article__toc-title { font-size: 20px; } .article__toc-item { gap: 8px; } .article__toc-icon { width: 16px; height: 16px; } .article__toc-link { font-size: 14px; } .article__section { gap: 12px; margin-top: 12px; } .article__section-title { font-size: 20px; } .article__section-text { font-size: 16px; } .prices { padding-bottom: 64px; } .prices__title { font-size: 24px; margin-top: 24px; } .prices__tabs { margin-top: 24px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } .prices__tabs::-webkit-scrollbar { display: none; } .prices__tab { white-space: nowrap; font-size: 14px; padding: 8px 12px; } .prices__content { margin-top: 24px; } .prices__section { padding-top: 24px; padding-bottom: 24px; border-top: 2px solid #eaeaea; } .prices__section-header { gap: 16px; align-items: center; cursor: pointer; } .prices__section-info { gap: 12px; } .prices__section-title { font-size: 22px; } .prices__section-desc { font-size: 18px; } .prices__section.active .prices__icon svg { transform: rotate(45deg); } .prices__list-container { margin-top: 24px; flex-direction: column; gap: 24px; display: none; } .prices__section.active .prices__list-container { display: flex; } .prices__list { width: 100%; } .prices__item { padding: 12px 0; gap: 12px; } .prices__item-name { font-size: 16px; } .prices__item-cost { font-size: 18px; } .prices__promo { width: 100%; display: none; } .prices__section.active .prices__promo { display: flex; } .prices__promo-img { height: 200px; } .prices__toggle-text { font-weight: 300; font-size: 18px; line-height: 140%; color: #007074; text-decoration: underline; margin-top: 12px; display: block; transition: color 0.3s ease; } .prices__section.active .prices__toggle-text { color: var(--accent-color-1); } .prices__toggle-text { display: none; } .modal__content { width: 100%; height: 100%; border-radius: 0; padding: 24px; max-width: none; } .modal.modal-quiz { height: 100%; } .modal.modal-quiz .quiz { padding: 0; width: 100%; height: 100%; } .modal.modal-quiz .quiz__title { top: -48px; padding-top: 48px; border-radius: 0; } .modal.modal-quiz .modal__content { width: 100vw; height: 100vh; max-width: none; max-height: none; border-radius: 0; padding: 0; margin: 0; box-shadow: none; overflow: auto; } .modal.modal-quiz .quiz__wrapper { height: 100%; width: 100%; margin: 0; padding: 48px 16px; max-height: none; max-width: none; overflow-y: auto; border-radius: 0; } .modal.modal-quiz .modal__close { position: fixed; top: 8px; right: 16px; z-index: 1000; } .footer { margin-top: 48px; padding: 32px 16px; gap: 0; align-items: stretch; } .footer__top { width: 100%; order: 1; flex-direction: column; align-items: center; gap: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding-bottom: 24px; margin: 0 0 24px; } .footer__cta-item { gap: 16px; align-items: center; } .footer__cta-text { font-size: 20px; font-weight: 600; text-align: center; } .footer__btn { height: 48px; padding: 0 32px; font-size: 16px; background: rgba(255, 255, 255, 0.9); } .footer__main { display: contents; } .footer__info { order: 2; align-items: center; gap: 16px; margin-bottom: 0; padding-bottom: 24px; width: 100%; } .footer__logo { width: 242px; height: auto; } .footer__footer { display: contents; } .footer__addr-row { order: 3; flex-direction: column-reverse; align-items: center; gap: 16px; margin-bottom: 0; padding-bottom: 24px; border-bottom: none; width: 100%; } .footer__social { gap: 12px; justify-content: center; } .footer__addr { font-size: 18px; text-align: center; line-height: 140%; } .footer__navs { order: 4; grid-template-columns: 1fr; gap: 0; margin-bottom: 24px; width: 100%; } .footer__nav[aria-label="Лечение зависимостей"] { display: flex; } .footer__nav { flex: 1; gap: 0; } .footer__nav-title { display: none; } .footer__nav ul { gap: 0; } .footer__nav > ul > li > a { display: flex; align-items: center; min-height: 46px; padding: 12px 0; font-size: 16px; line-height: 120%; opacity: 0.8; } .footer__nav-row { min-height: 46px; padding: 12px 0; } .footer__nav-toggle { width: 24px; height: 24px; } .footer__bottom { order: 5; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding-top: 24px; margin-top: 0; border-top: 1px solid rgba(255, 255, 255, 0.25); } .footer__bottom li:last-child { margin-left: 0; } .footer__bottom::before { display: none; } } .service-page-hero { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; } .service-page-hero__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; border: 1px solid #eaeaea; } .service-page-hero__title { font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); } .service-page-hero__subtitle { margin-top: 16px; font-weight: 400; font-size: 24px; line-height: 140%; color: var(--color-dark); } .service-page-hero__actions { margin-top: 24px; display: flex; gap: 12px; max-width: 680px; align-items: center; flex-wrap: wrap; } .service-page-hero__actions .btn, .service-page-hero__actions .btn-reverce { width: auto; } .service-page-usp { margin-top: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .service-page-usp__item { border: 1px solid #eaeaea; border-radius: 12px; padding: 16px; background: rgba(248, 248, 248, 0.6); font-weight: 600; font-size: 16px; transition: background 0.2s ease, box-shadow 0.2s ease; display: block; } @media (hover: hover) { .service-page-usp__item:hover { background: rgba(248, 248, 248, 0.9); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); } } .service-page-about { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .service-page-about, .service-page-when, .service-page-directions, .service-page-how, .service-page-format, .service-page-depts, .service-page-result, .service-page-family, .service-page-clinic { padding-top: 0; padding-bottom: 0; border-radius: 0; border: none; background: transparent; } .service-page-box { width: 100%; padding: 32px; border-radius: 32px; border: 1px solid #eaeaea; background: rgba(248, 248, 248, 0.55); box-sizing: border-box; } .service-page-about { display: block; } .service-page-about .service-page-box { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .service-page-when { display: block; } .service-page-when .service-page-box { display: flex; flex-direction: column; gap: 16px; } .service-page-directions { display: block; } .service-page-directions .service-page-box { display: flex; flex-direction: column; gap: 16px; } .service-page-how { display: block; } .service-page-how .service-page-box { display: flex; flex-direction: column; gap: 16px; } .service-page-format { display: block; } .service-page-format .service-page-box { display: flex; flex-direction: column; gap: 16px; } .service-page-depts { display: block; } .service-page-depts .service-page-box { display: flex; flex-direction: column; gap: 12px; } .service-page-result { display: block; } .service-page-result .service-page-box { display: flex; flex-direction: column; gap: 16px; } .service-page-family { display: block; } .service-page-family .service-page-box { display: block; } .service-page-clinic { display: block; } .service-page-clinic .service-page-box { display: flex; flex-direction: column; gap: 16px; } .service-page-about__text p, .service-page-directions__header p { max-width: 820px; } .service-page-about__card ul, .service-page-when__card ul, .service-page-format__left ul, .service-page-depts__grid ul, .service-page-result__grid ul, .service-page-family__grid ul, .service-page-card ul { list-style: disc; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; } .service-page-about__card li, .service-page-when__card li, .service-page-format__left li, .service-page-depts__grid li, .service-page-result__grid li, .service-page-family__grid li, .service-page-card li { font-size: 18px; line-height: 140%; } .service-page-about h2, .service-page-when h2, .service-page-directions h2, .service-page-how h2, .service-page-format h2, .service-page-depts h2, .service-page-lead h2, .service-page-result h2, .service-page-family h2, .service-page-clinic h2 { font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; color: var(--accent-color-2-darker); } .service-page-about__card { border: 1px solid #eaeaea; border-radius: 16px; padding: 24px; background: #fff; } .service-page-about__card p { font-size: 20px; line-height: 140%; } .service-page-when { margin-top: 64px; display: flex; flex-direction: column; gap: 16px; } .service-page-when__card { border: 1px solid #eaeaea; border-radius: 16px; padding: 24px; background: #fff; } .service-page-directions { margin-top: 64px; display: flex; flex-direction: column; gap: 16px; } .service-page-directions__header p { font-weight: 300; font-size: 18px; color: var(--accent-color-1); } .service-page-directions__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .service-page-card { padding: 24px; border: 1px solid #eaeaea; border-radius: 24px; display: flex; flex-direction: column; gap: 12px; background: #fff; transition: box-shadow 0.2s ease, transform 0.15s ease; } .service-page-card h3 { color: var(--accent-color-2-darker); font-size: 20px; } .service-page-card .btn { width: fit-content; } .service-page-family__actions .btn, .service-page-family__actions .btn-reverce { width: auto; } .service-page-how { margin-top: 64px; display: flex; flex-direction: column; gap: 16px; } .service-page-how__steps { display: grid; gap: 12px; list-style: none; padding: 0; } .service-page-how__steps li { display: flex; align-items: center; gap: 12px; font-size: 18px; padding: 14px 16px; border: 1px solid #eaeaea; border-radius: 16px; background: rgba(248, 248, 248, 0.6); } .service-page-how__steps li span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(0, 112, 116, 0.1); color: var(--accent-color-2-darker); font-weight: 700; } .service-page-format { margin-top: 64px; display: flex; flex-direction: column; gap: 16px; } .service-page-format__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .service-page-format__left { border: 1px solid #eaeaea; border-radius: 16px; padding: 24px; background: #fff; } .service-page-format__right { display: grid; gap: 16px; } .service-page-depts { margin-top: 64px; display: flex; flex-direction: column; gap: 12px; } .service-page-depts__desc { font-size: 18px; color: var(--color-dark); } .service-page-depts__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .service-page-lead { margin-top: 64px; } .service-page-lead__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border: 1px solid #eaeaea; border-radius: 24px; padding: 24px; background: rgba(248, 248, 248, 0.75); } .service-page-lead__form { display: flex; flex-direction: column; gap: 12px; } .service-page-result { margin-top: 64px; display: flex; flex-direction: column; gap: 16px; } .service-page-result__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .service-page-family { margin-top: 64px; } .service-page-family__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .service-page-family__grid > div:not(.service-page-family__actions) { display: flex; flex-direction: column; gap: 12px; } .service-page-family__actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid #eaeaea; border-radius: 16px; background: rgba(248, 248, 248, 0.6); } .service-page-family__note { font-size: 14px; color: var(--color-dark); opacity: 0.9; margin-top: 4px; } .service-page-family__actions .btn, .service-page-family__actions .btn-reverce { width: fit-content; align-self: flex-start; max-width: 312px; display: inline-flex; } .service-page-clinic { margin-top: 64px; display: flex; flex-direction: column; gap: 16px; } .service-page-clinic__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .service-page-clinic__chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .service-page-chip { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; justify-content: center; min-height: 92px; border-radius: 18px; padding: 16px 14px; font-size: 14px; line-height: 135%; color: var(--color-dark); background: #fff; border: 1px solid #eaeaea; transition: transform 0.15s ease, box-shadow 0.2s ease; } .service-page-chip b { display: block; font-size: 28px; line-height: 110%; color: var(--accent-color-2-darker); } @media (max-width: 1279px) { .service-page-clinic__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .service-page-clinic__chips { grid-template-columns: 1fr; } } .accent-banner__btn { width: auto; } @media (max-width: 1279px) { .service-page-hero { grid-template-columns: 1fr; gap: 16px; } .service-page-hero__title { font-size: 24px; } .service-page-hero__subtitle { font-size: 18px; } .service-page-hero__actions .btn, .service-page-hero__actions .btn-reverce { width: 100%; } .service-page-hero__content { padding: 16px; border-radius: 16px; } .service-page-usp { grid-template-columns: 1fr; } .service-page-about .service-page-box { grid-template-columns: 1fr; gap: 16px; } .service-page-about h2, .service-page-when h2, .service-page-directions h2, .service-page-how h2, .service-page-format h2, .service-page-depts h2, .service-page-lead h2, .service-page-result h2, .service-page-family h2, .service-page-clinic h2 { font-size: 24px; } .service-page-about, .service-page-when, .service-page-directions, .service-page-how, .service-page-format, .service-page-depts, .service-page-result, .service-page-family, .service-page-clinic { padding-top: 0; padding-bottom: 0; border-radius: 0; } .service-page-box { padding: 16px; border-radius: 16px; } .service-page-directions__grid { grid-template-columns: 1fr; } .service-page-format__grid { grid-template-columns: 1fr; } .service-page-depts__grid { grid-template-columns: 1fr; } .service-page-lead__wrap { grid-template-columns: 1fr; } .service-page-result__grid { grid-template-columns: 1fr; } .service-page-family__grid { grid-template-columns: 1fr; } .service-page-family__actions { align-items: stretch; } .service-page-family__actions .btn, .service-page-family__actions .btn-reverce { width: 100%; max-width: none; align-self: stretch; display: flex; } .service-page-clinic__grid { grid-template-columns: 1fr; } } .sp-clinic { margin-top: -84px; padding: 64px 0; position: relative; z-index: 1; background-color: var(--color-light); border-radius: 64px; overflow: hidden; } .sp-clinic__grid { display: grid; grid-template-columns: 55% 1fr; gap: 24px; align-items: stretch; margin-top: 32px; } .sp-clinic__photo { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.04); border: 1px solid rgba(43, 70, 55, 0.08); min-height: 380px; height: 100%; background: url("/local/static/images/clinika-4.webp") center / cover no-repeat #d8e0dd; display: flex; flex-direction: column; justify-content: flex-end; padding: 60px 24px; } .sp-clinic__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 268deg, rgba(128, 183, 185, 0.1) 28%, rgba(64, 148, 151, 0.55) 55%, rgba(32, 130, 133, 0.775) 69%, rgba(0, 112, 116, 1) 82% ); mix-blend-mode: multiply; opacity: 0.8; pointer-events: none; } .sp-clinic__stats { position: relative; z-index: 1; } .sp-clinic__stat-block { display: flex; flex-direction: column; gap: 2px; color: #fff; } .sp-clinic__stat-num { font-size: 52px; font-weight: 700; line-height: 1; color: #fff; } .sp-clinic__stat-label { font-size: 22px; font-weight: 400; color: #fff; line-height: 1.3; max-width: 350px; } .sp-clinic__stat-divider { height: 1px; background: rgba(255, 255, 255, 0.8); margin: 12px 0 24px; width: 200px; } .sp-clinic__card { background: #fff; border: 1px solid rgba(43, 70, 55, 0.08); border-radius: 24px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.04); overflow: hidden; padding: 24px; display: flex; flex-direction: column; } .sp-clinic__card-title { font-size: 24px; font-weight: 700; color: #2b4637; line-height: 1.25; margin-bottom: 16px; } .sp-clinic__card-desc { font-size: 18px; color: #555; line-height: 1.6; margin-bottom: 20px; } .sp-clinic__advantage { background: #f8faf9; border: 1px solid rgba(43, 70, 55, 0.08); border-radius: 18px; padding: 16px; margin-bottom: 12px; } .sp-clinic__advantage:last-child { margin-bottom: 0; } .sp-clinic__advantage-title { font-size: 20px; font-weight: 700; color: #2b4637; line-height: 1.3; margin-bottom: 8px; } .sp-clinic__advantage-text { font-size: 18px; color: #555; line-height: 1.55; } .sp-clinic__section-title { font-weight: 400; font-size: 48px; line-height: 1.2; color: #2b4637; text-transform: uppercase; margin-bottom: 20px; } .sp-clinic__section-subtitle { font-weight: 400; font-size: 18px; line-height: 1.6; color: #555; margin-bottom: 0; max-width: 800px; } @media (max-width: 1024px) { .sp-clinic__grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .sp-clinic { padding: 48px 0 0; margin-top: -24px; border-radius: 24px 24px 0 0; } .sp-clinic__grid { grid-template-columns: 1fr; } .sp-clinic__stat-num { font-size: 24px; } .sp-clinic__stat-label { font-size: 16px; } .sp-clinic__photo { padding: 16px; border-radius: 12px; } .sp-clinic__card { border-radius: 12px; padding: 16px; } .sp-clinic__card-title { font-size: 20px; } .sp-clinic__card-desc { font-size: 16px; } .sp-clinic__advantage-title { font-size: 18px; } .sp-clinic__advantage-text { font-size: 16px; } .sp-clinic__advantage { border-radius: 12px; } .sp-clinic__section-title { font-size: 24px; } .sp-clinic__section-subtitle { font-size: 16px; } } /* End */ /* Start:/local/static/css/new.css?17933515417488*/ .emergency-two { position: relative; z-index: 1; overflow: hidden; } .emergency-two { & .container { background: url(/local/static/css/../images/glavnayalead.png) center center / cover no-repeat; padding: 64px 40px; /*height: 600px;*/ aspect-ratio: 2.26; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; margin-bottom: 120px; } & h2 { font-weight: 400; font-size: 48px; line-height: 120%; text-transform: uppercase; color: var(--color-light); } & .emergency__cta { opacity: .9; background: #007074; border: 1px solid var(--color-light); font-size: 32px; } & svg { margin-left: .4em; transform: scale(1.4) translateY(.07em); } & .emergency__benefits { display: none; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1em; margin-bottom: 1em; } & .emergency__benefits li { display: block; background: #007074; border: 1px solid var(--color-light); opacity: .9; color: var(--color-light); font-size: 16px; text-align: center; border-radius: 12px; padding: 12px; text-transform: uppercase; } & .emergency__benefits img { width: 25%; height: auto; aspect-ratio: 1; margin-bottom: .5em; } } @media all and (max-width: 1279px) { .emergency-two { & .container { width: 100%; margin: 0 auto; padding: 32px 30px; } } } @media all and (max-width: 1024px) { .emergency-two { & .container { background: url(/local/static/css/../images/mobilelead.png) center center / cover no-repeat; } & .story-title { font-size: 3em; } & .container { padding: 24px 20px; } & .emergency__benefits { display: grid; } & .emergency__benefits img { width: 35%; } } } @media (min-width: 768px) { } @media (max-width: 768px) { .big-image-2 { aspect-ratio: 1 !important; } .emergency-two { & .emergency__benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4em; } & .story-title { font-size: 2em; } & .emergency__benefits img { width: 50%; } & .emergency__benefits li { font-size: 11px; font-weight: 500; } & .emergency__cta { font-size: 20px; } } } @media (max-width: 480px) { .emergency-two { & .container { padding: 16px 10px; } & .emergency__benefits img { width: 60%; } & .emergency__benefits li { border-radius: 6px; padding: 6px; } } } .modal__form .message { display: none; text-align: center; font-size: 1.2em; } .modal__form.success .success-m { display: block; } .modal__form.error .error-m { display: block; } .modal__form.success > *:not(.success-m) { display: none; } .modal__form.error > *:not(.error-m) { display: none; } /* @media all and (max-width: 1280px) { .emergency-two { display: none !important; } .emergency { display: block !important; } } @media all and (min-width: 1280px) { .emergency-two { display: block !important; } .emergency { display: none !important; } } */ .breadcrumbs__list li span { color: #909090 !important; } .sp-dept-card__desc ul { list-style: disc; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; } .sp-dept-card__desc li { font-size: 18px; color: #555; line-height: 1.45; } .faq__contacts p > a { font-weight: 600; font-size: 32px; line-height: 140%; color: var(--accent-color-1); white-space: nowrap; } .sp-result__big { justify-content: center !important; } .sp-result__layout { align-items: stretch !important; } .sp-depts_new .sp-depts__grid { grid-template-columns: 1fr !important; } .sp-depts_new .sp-dept-card__subt p { border: 2px solid #B9824B33; background: #B9824B1A; display: inline-block; margin-bottom: 1em; padding: .25em 1em; border-radius: 1em; font-weight: bold; font-size: .8em; } .sp-depts_new .card-1 { color: white; background: #007074; border-color: #007074; } .sp-depts_new .card-1 { & .sp-dept-card__desc, & .sp-dept-card__title { color: white; } & .sp-dept-card__subt p { border-color: rgba(255,255,255,.1); border-width: 1px; background: rgba(255,255,255,.1); } } @media all and (max-width: 768px) { .sp-how__img-wrap { display: block !important; } } .big-image-2 { background-size: cover; background-position: center center; background-repeat: no-repeat; } .second-level-sp .sp-result-card__text { padding-left: 60px; font-weight: 400; font-size: 1em; } .second-level-sp .sp-how__step { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; } @media screen and (max-width: 768px) { .header__nav .header__submenu { max-height: none !important; } .faq .faq__list, .faq__container { display: block !important; } .faq__item { margin-bottom: 1em; } .faq__question-text { font-size: 18px; } .faq__trigger { padding: 18px !important; } } .sp2-about__img-wrap { background-position: top center !important; } .modal-text { .modal__content { max-width: 640px; line-height: 1.75; } p { margin-bottom: 1rem; } ul { margin-left: 1rem; line-height: 1.5; } } .bottom-phone { position: fixed; display: block; background: url('/local/static/images/phone-circle.svg') center center no-repeat; background-size: contain; bottom: 100px; right: 26px; width: 73px; height: 73px; color: transparent; z-index: 10000; } @media all and (max-width: 768px) { .bottom-phone { bottom: 93px; right: 12px; } } .politics { list-style: none; margin-right: 2rem; font-size: 1.2em; a { text-decoration: underline; } li { margin-bottom: 1rem; } } .header__phone { border-right: none !important; } @media all and (max-width: 768px) { .sp-how__step-title { display: inline-block; max-width: 80%; } } @media all and (min-width: 768px) { .mobile-toggle { display: none; } .footer__nav-item.is-open > .footer__nav-sublist { margin-left: .75rem; font-size: .9em; } } @media all and (max-width: 768px) { .header__menu li.has-submenu { position: relative !important; } .header__menu > li.has-submenu > a::after { font-size: 30px !important; transform: scale(1.7) rotate(90deg) !important; } .faq .faq__more { display: none !important; } } .mobile-toggle { position: absolute; width: 4rem; height: 100%; right: -20px; top: 0; display: flex; } @media (min-aspect-ratio: 8/5) { .news-item__img { aspect-ratio: 1/2 !important; } } /* End */ /* Start:/local/templates/main/styles.css?17925967331659*/ .reviews__pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; } .reviews__pagination-link { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none; font-weight: 500; font-size: 18px; line-height: 100%; transition: all 0.3s; cursor: pointer; } .reviews__pagination-link.active { background: var(--accent-color-1); cursor: default; color: var(--color-light); } .reviews__pagination-ellipsis { display: flex; align-items: flex-end; justify-content: center; width: 40px; height: 40px; padding-bottom: 6px; font-weight: 500; color: var(--text-color); cursor: default; } .reviews__pagination-arrow { display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; width: 40px; height: 40px; background: transparent; border: none; padding: 0; } .reviews__pagination-arrow svg { display: block; } .reviews__pagination-arrow path { transition: fill 0.3s ease; } .reviews__pagination-arrow.active path { fill: var(--accent-color-1); } .reviews__pagination-arrow.disabled path { fill: #EAEAEA; } .reviews__pagination-arrow.disabled { cursor: default; pointer-events: none; } @media (hover: hover) { .reviews__pagination-link.active:hover { background: var(--accent-color-1); color: var(--color-light); } .reviews__pagination-link:hover { background: #EAEAEA; } } /* End */ /* /local/static/css/swiper-bundle.min.css?179259673618454 */ /* /local/static/css/style.css?1793258539145756 */ /* /local/static/css/new.css?17933515417488 */ /* /local/templates/main/styles.css?17925967331659 */