/* Start:/local/templates/kleef/css/vendor/swiper-bundle.min.css?176251373618454*/ /** * 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/templates/kleef/css/style.css?176493080975452*/ /* Graphik LCG Font Faces */ @font-face { font-family: 'Graphik LCG'; src: url('/local/templates/kleef/css/fonts/GraphikLCG-Thin.eot'); src: local('Graphik LCG Thin'), local('GraphikLCG-Thin'), url('/local/templates/kleef/css/fonts/GraphikLCG-Thin.eot?#iefix') format('embedded-opentype'), url('/local/templates/kleef/css/fonts/GraphikLCG-Thin.woff2') format('woff2'), url('/local/templates/kleef/css/fonts/GraphikLCG-Thin.woff') format('woff'), url('/local/templates/kleef/css/fonts/GraphikLCG-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; } @font-face { font-family: 'Graphik LCG'; src: url('/local/templates/kleef/css/fonts/GraphikLCG-Extralight.eot'); src: local('Graphik LCG Extralight'), local('GraphikLCG-Extralight'), url('/local/templates/kleef/css/fonts/GraphikLCG-Extralight.eot?#iefix') format('embedded-opentype'), url('/local/templates/kleef/css/fonts/GraphikLCG-Extralight.woff2') format('woff2'), url('/local/templates/kleef/css/fonts/GraphikLCG-Extralight.woff') format('woff'), url('/local/templates/kleef/css/fonts/GraphikLCG-Extralight.ttf') format('truetype'); font-weight: 200; font-style: normal; } @font-face { font-family: 'Graphik LCG'; src: url('/local/templates/kleef/css/fonts/GraphikLCG-Light.eot'); src: local('Graphik LCG Light'), local('GraphikLCG-Light'), url('/local/templates/kleef/css/fonts/GraphikLCG-Light.eot?#iefix') format('embedded-opentype'), url('/local/templates/kleef/css/fonts/GraphikLCG-Light.woff2') format('woff2'), url('/local/templates/kleef/css/fonts/GraphikLCG-Light.woff') format('woff'), url('/local/templates/kleef/css/fonts/GraphikLCG-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Graphik LCG'; src: url('/local/templates/kleef/css/fonts/GraphikLCG-Regular.eot'); src: local('Graphik LCG Regular'), local('GraphikLCG-Regular'), url('/local/templates/kleef/css/fonts/GraphikLCG-Regular.eot?#iefix') format('embedded-opentype'), url('/local/templates/kleef/css/fonts/GraphikLCG-Regular.woff2') format('woff2'), url('/local/templates/kleef/css/fonts/GraphikLCG-Regular.woff') format('woff'), url('/local/templates/kleef/css/fonts/GraphikLCG-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Graphik LCG'; src: url('/local/templates/kleef/css/fonts/GraphikLCG-Medium.eot'); src: local('Graphik LCG Medium'), local('GraphikLCG-Medium'), url('/local/templates/kleef/css/fonts/GraphikLCG-Medium.eot?#iefix') format('embedded-opentype'), url('/local/templates/kleef/css/fonts/GraphikLCG-Medium.woff2') format('woff2'), url('/local/templates/kleef/css/fonts/GraphikLCG-Medium.woff') format('woff'), url('/local/templates/kleef/css/fonts/GraphikLCG-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Graphik LCG'; src: url('/local/templates/kleef/css/fonts/GraphikLCG-Semibold.eot'); src: local('Graphik LCG Semibold'), local('GraphikLCG-Semibold'), url('/local/templates/kleef/css/fonts/GraphikLCG-Semibold.eot?#iefix') format('embedded-opentype'), url('/local/templates/kleef/css/fonts/GraphikLCG-Semibold.woff2') format('woff2'), url('/local/templates/kleef/css/fonts/GraphikLCG-Semibold.woff') format('woff'), url('/local/templates/kleef/css/fonts/GraphikLCG-Semibold.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Graphik LCG'; src: url('/local/templates/kleef/css/fonts/GraphikLCG-Bold.eot'); src: local('Graphik LCG Bold'), local('GraphikLCG-Bold'), url('/local/templates/kleef/css/fonts/GraphikLCG-Bold.eot?#iefix') format('embedded-opentype'), url('/local/templates/kleef/css/fonts/GraphikLCG-Bold.woff2') format('woff2'), url('/local/templates/kleef/css/fonts/GraphikLCG-Bold.woff') format('woff'), url('/local/templates/kleef/css/fonts/GraphikLCG-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Graphik LCG'; src: url('/local/templates/kleef/css/fonts/GraphikLCG-Black.eot'); src: local('Graphik LCG Black'), local('GraphikLCG-Black'), url('/local/templates/kleef/css/fonts/GraphikLCG-Black.eot?#iefix') format('embedded-opentype'), url('/local/templates/kleef/css/fonts/GraphikLCG-Black.woff2') format('woff2'), url('/local/templates/kleef/css/fonts/GraphikLCG-Black.woff') format('woff'), url('/local/templates/kleef/css/fonts/GraphikLCG-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; } @font-face { font-family: 'Graphik LCG'; src: url('/local/templates/kleef/css/fonts/GraphikLCG-ThinItalic.eot'); src: local('Graphik LCG Thin Italic'), local('GraphikLCG-ThinItalic'), url('/local/templates/kleef/css/fonts/GraphikLCG-ThinItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/kleef/css/fonts/GraphikLCG-ThinItalic.woff2') format('woff2'), url('/local/templates/kleef/css/fonts/GraphikLCG-ThinItalic.woff') format('woff'), url('/local/templates/kleef/css/fonts/GraphikLCG-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; } @font-face { font-family: 'Graphik LCG'; src: url('/local/templates/kleef/css/fonts/GraphikLCG-ExtralightItalic.eot'); src: local('Graphik LCG Extralight Italic'), local('GraphikLCG-ExtralightItalic'), url('/local/templates/kleef/css/fonts/GraphikLCG-ExtralightItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/kleef/css/fonts/GraphikLCG-ExtralightItalic.woff2') format('woff2'), url('/local/templates/kleef/css/fonts/GraphikLCG-ExtralightItalic.woff') format('woff'), url('/local/templates/kleef/css/fonts/GraphikLCG-ExtralightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; } @font-face { font-family: 'Graphik LCG'; src: url('/local/templates/kleef/css/fonts/GraphikLCG-LightItalic.eot'); src: local('Graphik LCG Light Italic'), local('GraphikLCG-LightItalic'), url('/local/templates/kleef/css/fonts/GraphikLCG-LightItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/kleef/css/fonts/GraphikLCG-LightItalic.woff2') format('woff2'), url('/local/templates/kleef/css/fonts/GraphikLCG-LightItalic.woff') format('woff'), url('/local/templates/kleef/css/fonts/GraphikLCG-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Graphik LCG'; src: url('/local/templates/kleef/css/fonts/GraphikLCG-RegularItalic.eot'); src: local('Graphik LCG Regular Italic'), local('GraphikLCG-RegularItalic'), url('/local/templates/kleef/css/fonts/GraphikLCG-RegularItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/kleef/css/fonts/GraphikLCG-RegularItalic.woff2') format('woff2'), url('/local/templates/kleef/css/fonts/GraphikLCG-RegularItalic.woff') format('woff'), url('/local/templates/kleef/css/fonts/GraphikLCG-RegularItalic.ttf') format('truetype'); font-weight: 400; font-style: italic; } @font-face { font-family: 'Graphik LCG'; src: url('/local/templates/kleef/css/fonts/GraphikLCG-MediumItalic.eot'); src: local('Graphik LCG Medium Italic'), local('GraphikLCG-MediumItalic'), url('/local/templates/kleef/css/fonts/GraphikLCG-MediumItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/kleef/css/fonts/GraphikLCG-MediumItalic.woff2') format('woff2'), url('/local/templates/kleef/css/fonts/GraphikLCG-MediumItalic.woff') format('woff'), url('/local/templates/kleef/css/fonts/GraphikLCG-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; } @font-face { font-family: 'Graphik LCG'; src: url('/local/templates/kleef/css/fonts/GraphikLCG-SemiboldItalic.eot'); src: local('Graphik LCG Semibold Italic'), local('GraphikLCG-SemiboldItalic'), url('/local/templates/kleef/css/fonts/GraphikLCG-SemiboldItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/kleef/css/fonts/GraphikLCG-SemiboldItalic.woff2') format('woff2'), url('/local/templates/kleef/css/fonts/GraphikLCG-SemiboldItalic.woff') format('woff'), url('/local/templates/kleef/css/fonts/GraphikLCG-SemiboldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; } @font-face { font-family: 'Graphik LCG'; src: url('/local/templates/kleef/css/fonts/GraphikLCG-BoldItalic.eot'); src: local('Graphik LCG Bold Italic'), local('GraphikLCG-BoldItalic'), url('/local/templates/kleef/css/fonts/GraphikLCG-BoldItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/kleef/css/fonts/GraphikLCG-BoldItalic.woff2') format('woff2'), url('/local/templates/kleef/css/fonts/GraphikLCG-BoldItalic.woff') format('woff'), url('/local/templates/kleef/css/fonts/GraphikLCG-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; } @font-face { font-family: 'Graphik LCG'; src: url('/local/templates/kleef/css/fonts/GraphikLCG-BlackItalic.eot'); src: local('Graphik LCG Black Italic'), local('GraphikLCG-BlackItalic'), url('/local/templates/kleef/css/fonts/GraphikLCG-BlackItalic.eot?#iefix') format('embedded-opentype'), url('/local/templates/kleef/css/fonts/GraphikLCG-BlackItalic.woff2') format('woff2'), url('/local/templates/kleef/css/fonts/GraphikLCG-BlackItalic.woff') format('woff'), url('/local/templates/kleef/css/fonts/GraphikLCG-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; } /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Graphik LCG', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; color: #212737; line-height: 1.6; background-color: #FFFFFF; } /* Header Styles */ .header { background-color: #F7FAFF; width: 100%; } .header-top { position: relative; width: 100%; max-width: 1331px; height: 121px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .header-left { display: flex; align-items: center; gap: 36px; } .header-logo { display: flex; align-items: center; } .header-logo img { width: 189px; height: 52px; display: block; } .header-tagline { font-family: 'Graphik LCG', sans-serif; font-weight: 300; font-size: 14px; line-height: 1.357em; letter-spacing: 0.02em; color: #7C8793; text-align: left; margin: 0; padding: 0; } .header-tagline p { margin: 0; padding: 0; } .header-contacts { display: flex; align-items: center; gap: 31px; } .contact-item { display: flex; align-items: center; gap: 10px; } .contact-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: 1; } .contact-icon img { width: 100%; height: 100%; display: block; } .contact-text { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 14px; line-height: 1em; color: #34363A; white-space: nowrap; } .phone-num{ font-size: 18px; } .contact-link { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 14px; line-height: 1em; color: #5F99E5; text-decoration: none; white-space: nowrap; } .contact-link:hover { text-decoration: underline; } .search-icon { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .search-icon img { width: 100%; height: 100%; } /* Navigation Menu */ .menu { background-color: #FFFFFF; width: 100%; } .menu-container { max-width: 1331px; margin: 0 auto; padding: 11.5px 0px; display: flex; align-items: center; gap: 24px; width: 100%; position: relative; } .catalog-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 24px; background-color: #E13023; border: none; border-radius: 14px; color: #FFFFFF; font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 14px; line-height: 1em; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background-color 0.3s; } .catalog-btn:hover { background-color: #C0261A; } .menu-icon { width: 5px; height: 19px; } /* Выпадающее меню каталога */ .catalog-menu-dropdown { position: absolute; top: 100%; left: 0; z-index: 1000; margin-top: 11.5px; width: auto; min-width: 700px; max-width: 1331px; background-color: #FFFFFF; border-radius: 14px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); overflow: hidden; } .catalog-menu-content { padding: 24px; display: flex; gap: 24px; max-height: 80vh; overflow-y: auto; } .catalog-menu-content .categories-list { flex: 1; min-width: 300px; } .catalog-menu-content .categories-banner { flex-shrink: 0; width: 316px; } @media (max-width: 1200px) { .catalog-menu-dropdown { min-width: auto; width: 100%; left: 0; right: 0; } .catalog-menu-content { flex-direction: column; } .catalog-menu-content .categories-banner { width: 100%; } } @media (max-width: 768px) { .catalog-menu-dropdown { left: -20px; right: -20px; width: calc(100vw - 40px); max-width: calc(100vw - 40px); border-radius: 0; } } .menu-items { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 1; width: 100%; } .menu-link { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 16px; line-height: 1em; color: #5F99E5; text-decoration: none; transition: color 0.3s; flex: 1; text-align: center; white-space: nowrap; } .menu-link:hover { color: #4A7BC4; } /* Hero Section */ .hero { background-color: #FFFFFF; padding: 0; width: 100%; overflow: hidden; } .hero-wrapper { width: 100%; display: flex; justify-content: center; padding: 0; } .hero-container { display: flex; width: 100%; margin: 0 auto; gap: 16px; padding: 0; } .hero-swiper { width: 100%; height: 512px; border-radius: 16px; overflow: visible; position: relative; } .hero-swiper .swiper-wrapper { width: 100%; height: 100%; min-height: 512px; } .hero-swiper .swiper-slide { width: calc(100% - 120px); height: 100%; position: relative; } .hero-block { border-radius: 16px; } .hero-main { width: 100%; height: 100%; min-height: 512px; background: linear-gradient(135deg, #6474EF 0%, rgba(100, 116, 239, 0.8) 100%); position: relative; overflow: hidden; box-sizing: border-box; display: flex; gap: 30px; } .hero-main.hero-pink { background: linear-gradient(135deg, #F24176 0%, rgba(242, 65, 118, 0.8) 100%); } .hero-main.hero-green { background: linear-gradient(135deg, #70BF75 0%, rgba(112, 191, 117, 0.8) 100%); } .hero-side-1 { width: 80px; height: 512px; background-color: #70BF75; } .hero-side-2 { width: 80px; height: 512px; background-color: #F24176; } .hero-content { z-index: 2; position: relative; display: flex; justify-content: space-evenly; flex-direction: column; padding-left: 60px; } .hero-title { font-family: 'Graphik LCG', sans-serif; font-weight: 300; font-size: 54px; line-height: 1em; letter-spacing: 0.02em; color: #FFFFFF; margin-bottom: 46px; } .hero-btn { padding: 18px 24px; background: rgba(255, 255, 255, 0.14); border: 1px solid #FFFFFF; border-radius: 16px; color: #FFFFFF; font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 16px; line-height: 1em; letter-spacing: 0.04em; cursor: pointer; transition: all 0.3s; } .hero-btn:hover { background: rgba(255, 255, 255, 0.25); } .decoration-circle { position: absolute; border-radius: 50%; filter: blur(400px); } .circle-1 { width: 305px; height: 305px; background-color: #95CCFF; top: 109px; right: 866px; } .circle-2 { width: 258px; height: 69px; background-color: #172252; filter: blur(3px); top: 376px; right: 795px; } .circle-3 { width: 189px; height: 80px; background-color: #172252; filter: blur(3px); top: 376px; right: 1010px; } .circle-4 { width: 252px; height: 69px; background: linear-gradient(135deg, rgba(23, 34, 82, 1) 0%, rgba(51, 75, 184, 0) 100%); filter: blur(14px); top: 386px; right: 1019px; } .hero-images { width: 50%; display: flex; flex-direction: row; justify-content: space-evenly; } .hero-images > img { width: auto; height: 80%; object-fit: cover; margin: auto 0px; } /* Swiper Pagination Styles */ .hero-pagination { position: absolute; bottom: 20px !important; /* left: 679px !important; */ width: 100% !important; z-index: 10; display: flex; justify-content: center; gap: 3px; } .hero-pagination .swiper-pagination-bullet { width: 37px; height: 2px; background: rgba(255, 255, 255, 0.5); border-radius: 0; opacity: 1; margin: 0 !important; transition: all 0.3s; } .hero-pagination .swiper-pagination-bullet-active { background: #FFFFFF !important; width: 37px; height: 2px; } /* Categories Section */ .categories { padding: 82px 0; background-color: #FFFFFF; width: 100%; } .categories-container { margin: 0 auto; padding: 0; width: 100%; display: flex; justify-content: space-between; } .categories-header { width: 33.33%; display: flex; flex-direction: column; gap: 21px; } .section-title { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 42px; line-height: 1.52em; letter-spacing: 0.02em; color: #212737; margin: 0; } .categories-header .section-title { margin-bottom: 0; } .section-description { font-family: 'Graphik LCG', sans-serif; font-weight: 300; font-size: 16px; line-height: 1.625em; color: #000000; margin: 0; height: 156px; } .view-all-btn { padding: 16px 24px; border: 1px solid #5793FB; border-radius: 16px; background-color: transparent; color: #5793FB; font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 14px; line-height: 1em; letter-spacing: 0.04em; cursor: pointer; transition: all 0.3s; text-decoration: none; } .view-all-btn:hover { background-color: #5793FB; color: #FFFFFF; } .categories-grid { display: flex; flex-direction: column; gap: 8px; width: 65%; } .categories-row { display: flex; gap: 10px; width: 100%; } .category-card { background-color: #F6F6F6; border-radius: 26px; padding: 32px; display: flex; flex-direction: column; gap: 21px; flex: 1; } .category-card-1 { border-radius: 26px 26px 0px 26px; } .category-card-2 { border-radius: 26px 26px 26px 0px; } .category-card-3 { border-radius: 26px 0px 26px 26px; } .category-card-4 { border-radius: 0px 26px 26px 26px; } .category-icon { width: 79px; height: 79px; } .category-icon img { width: 100%; height: 100%; } .category-title { font-family: 'Graphik LCG', sans-serif; font-weight: 500; font-size: 22px; line-height: 1em; color: #000000; } .category-links { list-style: none; display: flex; flex-direction: column; gap: 16px; width: fit-content; } .category-links-full { width: 100%; } .category-links a { font-family: 'Graphik LCG', sans-serif; font-weight: 500; font-size: 14px; line-height: 1.86em; color: #5F99E5; text-decoration: none; transition: color 0.3s; white-space: nowrap; } .category-links-full a { white-space: normal; } .category-links a:hover { color: #4A7BC4; } /* Advantages Section */ .advantages { padding: 49px 0; background-color: #F6F6F6; } .advantages .section-title { margin-bottom: 49px; } .advantages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .advantage-card { background-color: #FFFFFF; border-radius: 16px; padding: 47px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } .advantage-icon { width: 89px; height: 89px; margin-bottom: 10px; } .advantage-icon img { width: 100%; height: 100%; } .advantage-title { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.04em; } .advantage-description { font-family: 'Graphik LCG', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5em; color: #161D34; } /* Products Section */ .products { padding: 61px 0; background-color: #FFFFFF; } .products-container { margin: 0 auto; position: relative; } .products .section-title { margin-bottom: 49px; margin-left: 0; } .products-swiper-wrapper { position: relative; width: 100%; } .products-swiper { width: 100%; overflow: hidden; position: relative; } .products-swiper .swiper-slide { height: auto; display: flex; } .product-item { background-color: #FFFFFF; border: 1px solid #E8F0F6; padding: 16px; display: flex; flex-direction: column; gap: 10px; width: 100%; height: 100%; } .product-image { width: 100%; height: 259px; overflow: hidden; text-align: center; } .product-image img { width: auto; height: 100%; object-fit: cover; } .product-info { padding: 25px 8px; display: flex; flex-direction: column; gap: 10px; } .product-title { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 23px; line-height: 1.04em; color: #1F212E; } .product-description { font-family: 'Graphik LCG', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.29em; color: #81889B; padding: 4px 0; } .product-btn { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border: 1px solid #5793FB; border-radius: 16px; background-color: transparent; color: #5793FB; font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 14px; line-height: 1em; letter-spacing: 0.04em; cursor: pointer; transition: all 0.3s; } .product-btn:hover { background-color: #5793FB; color: #FFFFFF; } .arrow { font-size: 16px; } /* Products Swiper Navigation */ .products-button-prev, .products-button-next { width: 52px !important; height: 52px !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 10 !important; cursor: pointer; margin-top: 0 !important; } .products-button-prev{ background-image: url(/local/templates/kleef/css/../images/strelka_l.png); background-size: contain; background-repeat: no-repeat; background-position: center; width: 52px; height: 52px; border: none; left: -25px; } .products-button-next{ background-image: url(/local/templates/kleef/css/../images/strelka_p.png); background-size: contain; background-repeat: no-repeat; background-position: center; width: 52px; height: 52px; border: none; right: -25px; } .news-swiper>.swiper-wrapper { height: 355px; } .about-container { padding: 80px 0; } .swiper-wrapper{ height: auto !important; } @media (max-width: 1400px) and (min-width: 768px) { .header-top { padding: 0 30px; } .menu-container { padding: 11.5px 30px; } .hero-swiper .swiper-wrapper { min-height: 300px; } .section-container { padding: 80px 30px; } } .products-button-prev::after, .products-button-next::after { content: ''; } .products-button-prev.swiper-button-disabled, .products-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .products-pagination-wrapper { display: flex; justify-content: center; align-items: center; margin-top: 40px; } .products-pagination { position: relative !important; display: flex; justify-content: center; align-items: center; gap: 6px; width: auto !important; } .products-pagination .swiper-pagination-bullet { width: 6px; height: 6px; background-color: #D9D9D9; opacity: 1; margin: 0 !important; } .products-pagination .swiper-pagination-bullet-active { width: 11px; height: 11px; background-color: #E13023; } .pagination-arrow { width: 52px; height: 52px; border: none; background-color: transparent; font-size: 24px; color: #5F99E5; cursor: pointer; transition: color 0.3s; } .pagination-arrow:hover { color: #4A7BC4; } .pagination-dots { display: flex; gap: 10px; } .pagination-dots .dot { width: 11px; height: 11px; border-radius: 50%; background-color: #D9D9D9; cursor: pointer; transition: background-color 0.3s; } .pagination-dots .dot.active { background-color: #5F99E5; } /* Contact Form Section */ .contact-form-section { padding: 71px 0; /* background-color: #32333A; */ background-image: url(/local/templates/kleef/css/../images/FORM.png); background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; overflow: hidden; } .form-wrapper { max-width: 1324px; margin: 0 auto; } .form-header { margin-bottom: 24px; } .contact-form{ background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.43); border-radius: 26px; backdrop-filter: blur(34px); padding: 16px; } .contact-form-section .section-title { color: #FFFFFF; margin-bottom: 24px; } .form-description { font-family: 'Graphik LCG', sans-serif; font-weight: 300; font-size: 18px; line-height: 1.78em; color: #FFFFFF; max-width: 456px; } .contact-form { display: flex; gap: 24px; align-items: stretch; } .form-input { flex: 1; padding: 18px 16px; border: 2px solid #FFFFFF; border-radius: 18px; background-color: transparent; color: #FFFFFF; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 18px; line-height: 1.21em; } .form-input::placeholder { color: #FFFFFF; } .form-submit { flex: 1; padding: 18px 24px; background-color: #E13023; border: none; border-radius: 12px; color: #FFFFFF; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.21em; cursor: pointer; transition: background-color 0.3s; } .form-submit:hover { background-color: #C0261A; } /* News Section */ .news { background-color: #FFFFFF; } .news-container { padding: 80px 0; position: relative; } .news .section-title { margin-bottom: 100px; } .news-swiper-container { position: relative; } .news-swiper-wrapper { position: relative; width: 100%; } .news-swiper { width: 100%; overflow: hidden; position: relative; margin: 0; } .news-swiper .swiper-slide { height: auto; display: flex; } .news-item { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; } .news-image { width: 100%; height: 355px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; } .news-date { position: absolute; top: 20px; left: 19px; background-color: #303030; border-left: 3px solid #E13023; border-radius: 3px; padding: 6px 8px; } .news-date span { font-family: 'Graphik LCG', sans-serif; font-weight: 500; font-size: 12px; line-height: 1.5em; color: #FFFFFF; } .news-content { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(28, 30, 37, 0.83) 100%); padding: 35px 26px; display: flex; flex-direction: column; gap: 9px; position: absolute; bottom: 0; left: 0; right: 0; } .news-title { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 20px; line-height: 1em; color: #FFFFFF; } .news-description { font-family: 'Graphik LCG', sans-serif; font-weight: 300; font-size: 12px; line-height: 1.4em; color: #FFFFFF; max-width: 297px; } .news-link { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 14px; line-height: 1.5em; color: #FFFFFF; text-decoration: none; transition: opacity 0.3s; } .news-link:hover { opacity: 0.8; } /* News Swiper Navigation */ /* .news-button-prev, .news-button-next { width: 52px !important; height: 52px !important; background-color: #E13023 !important; border-radius: 50% !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 10 !important; cursor: pointer; margin-top: 0 !important; } .news-button-prev { left: -78px !important; right: auto !important; } .news-button-next { left: auto !important; right: -78px !important; } */ .news-button-prev, .news-button-next { width: 52px !important; height: 52px !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 10 !important; cursor: pointer; margin-top: 0 !important; } .news-button-prev{ background-image: url(/local/templates/kleef/css/../images/strelka_l.png); background-size: contain; background-repeat: no-repeat; background-position: center; width: 52px; height: 52px; border: none; left: -25px; } .news-button-next{ background-image: url(/local/templates/kleef/css/../images/strelka_p.png); background-size: contain; background-repeat: no-repeat; background-position: center; width: 52px; height: 52px; border: none; right: -25px; } .news-button-prev.swiper-button-disabled, .news-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .news-button-prev::after, .news-button-next::after { content: ''; position: absolute; } /* .news-button-prev::after { border-width: 6px 9.61px 6px 0; border-color: transparent #FFFFFF transparent transparent; margin-left: -2px; } .news-button-next::after { border-width: 6px 0 6px 9.2px; border-color: transparent transparent transparent #FFFFFF; margin-left: 2px; } */ .news-pagination-wrapper { display: flex; justify-content: center; align-items: center; margin-top: 40px; width: 100%; } .news-pagination { position: relative !important; display: flex; justify-content: center; align-items: center; gap: 6px; width: auto !important; } .news-pagination .swiper-pagination-bullet { width: 6px; height: 6px; background-color: #D9D9D9; opacity: 1; margin: 0 !important; } .news-pagination .swiper-pagination-bullet-active { width: 11px; height: 11px; background-color: #E13023; } /* About Section */ .about { background-color: #FFFFFF; position: relative; } .about-content { display: flex; align-items: center; gap: 60px; } .about-text { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; } .about-title { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 42px; line-height: 1.52em; letter-spacing: 0.02em; color: #212737; margin-bottom: 40px; } .about-description p { font-family: 'Graphik LCG', sans-serif; font-weight: 400; font-size: 18px; line-height: 29px; color: #2B4472; padding-right: 30px; } .about-image { flex: 1; max-width: 600px; } .about-image img { width: auto; height: 100%; object-fit: cover; position: absolute; top: 0; right: 0; max-height: 684px; } /* Footer */ .footer { background-color: #F8F8FA; padding: 52px 0 50px; color: #30353B; min-height: 416px; position: relative; } /* Categories Section */ .footer-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 40px; width: 100%; } .footer-category-column { display: flex; flex-direction: column; gap: 16px; } .footer-category-title { font-family: 'Graphik LCG', sans-serif; font-weight: 500; font-size: 19px; line-height: 1em; color: #30353B; margin: 0; } .footer-category-line { width: 25px; height: 3px; background-color: #DE2921; border-radius: 4px; } .footer-category-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .footer-category-links li { margin: 0; } .footer-category-links a { font-family: 'Graphik LCG', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.86em; color: #5793FB; text-decoration: none; transition: color 0.3s; display: block; } .footer-category-column:first-child .footer-category-links a, .footer-category-column:last-child .footer-category-links a { max-width: 233px; } .footer-category-links a:hover { color: #4A7BC4; } /* Middle Section */ .footer-logo-img { width: 148px; height: 41px; object-fit: contain; } .footer-contact-item { display: flex; align-items: center; gap: 10px; } .footer-contact-icon { width: 14px; height: 14px; flex-shrink: 0; } .footer-contact-item span, .footer-contact-item a { font-family: 'Graphik LCG', sans-serif; font-weight: 500; font-size: 14px; line-height: 1em; color: #34363A; text-decoration: none; } .footer-contact-item a:last-child { font-weight: 600; } .footer-contact-item a:hover { color: #5793FB; } /* Bottom Section */ .footer-bottom { display: flex; justify-content: center; align-items: center; position: relative; padding-top: 0; min-height: 50px; } .footer-wrapper { display: flex; flex-direction: row; justify-content: space-between; width: 100%; padding-top: 40px; border-top: 2px solid #E2E2E2; } .footer-copyright { margin: 0; } .footer-contact-section { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; } nav.footer-nav { flex: 1; padding: 15px 40px 0; display: flex; gap: 40px; flex-direction: row; justify-content: center; } .footer-nav-link { font-family: 'Graphik LCG', sans-serif; font-weight: 400; font-size: 14px; line-height: 1em; color: #5793FB; text-decoration: none; transition: color 0.3s; } .footer-nav-link:hover { color: #4A7BC4; } .footer-copyright { font-family: 'Graphik LCG', sans-serif; font-weight: 400; font-size: 12px; line-height: 2.17em; color: #6C7784; margin-top: 20px; } .footer-container { max-width: 1331px; margin: 0 auto; position: relative; } .footer-bottom-mobile{ display: none; } /* Responsive Design */ @media (max-width: 1600px) { .container { padding: 0 50px; } .header-top { max-width: 1331px; } .header-left { left: 50px; } .header-contacts { left: auto; right: 50px; } /* .menu-container { padding: 11.5px 50px; } */ .hero-wrapper { width: 100%; } .hero-container { max-width: 100%; padding: 0 16px; flex-wrap: wrap; } .hero-swiper { width: 100%; order: 2; } .hero-side-1, .hero-side-2 { display: none; } .hero-main { width: 100%; } } @media (max-width: 1200px) { .categories-container { height: auto; gap: 15px; } .categories-header { position: static; left: auto; top: auto; width: 100%; max-width: 297px; margin-bottom: 40px; } .categories-grid { position: static; left: auto; top: auto; width: 100%; } .advantages-grid { grid-template-columns: repeat(2, 1fr); } .products-list { grid-template-columns: repeat(2, 1fr); } .news-list { grid-template-columns: repeat(2, 1fr); } .about-image img { top: auto; bottom: 100px; max-height: 510px; } } @media (max-width: 1024px) { .footer-categories { grid-template-columns: repeat(2, 1fr); gap: 30px; } .footer-middle { flex-direction: column; align-items: flex-start; } .footer-divider { width: 100%; } .hero-title { font-size: 30px; line-height: 30px; } } @media (max-width: 960px) { .categories-container { flex-direction: column; gap: 15px; } .categories-header { width: 100%; max-width: 100%; } } @media (max-width: 768px) { .container { padding: 0 20px; } .header-top { height: auto; min-height: 121px; flex-direction: column; gap: 20px; padding: 20px; position: relative; } .header-left { position: static; transform: none; flex-direction: row; align-items: flex-start; gap: 15px; width: 100%; justify-content: space-between; } .header-logo { top: 0; } .header-contacts { position: static; transform: none; flex-wrap: wrap; justify-content: center; gap: 15px; width: 100%; } .menu-container { flex-direction: column; padding: 20px; } .menu-items { flex-direction: column; width: 100%; } .hero-wrapper { width: 100%; } .hero-container { flex-direction: column; padding: 0; gap: 10px; } .hero-swiper { width: 100%; height: auto; min-height: 400px; } .hero-main { width: 100%; height: auto; min-height: 400px; } .hero-side-1, .hero-side-2 { display: none; } .hero-title { font-size: 24px; } .hero-images > img { height: 50%; } .categories-container { height: auto; } .categories-header { position: static; left: auto; top: auto; width: 100%; max-width: 100%; margin-bottom: 30px; } .section-description { height: auto; } .categories-grid { position: static; left: auto; top: auto; width: 100%; } .category-card { border-radius: 26px !important; } .advantages-grid, .products-list, .news-list { grid-template-columns: 1fr; } .contact-form { flex-direction: column; } .section-title { font-size: 32px; } /* About Section Responsive */ .about-container { padding: 0 20px; } .about-content { flex-direction: column; gap: 40px; } .about-title { font-size: 32px; margin-bottom: 30px; } .about-text { order: 2; } .about-image { max-width: 100%; margin-right: -50px; order: 1; } .about-image img{ width: 100%; height: auto; object-fit: cover; position: relative; top: 0; right: 0; max-height: 100%; } /* Footer Responsive */ .footer-container { padding: 0 20px; } .footer { padding: 40px 0 20px; } .footer-nav { flex-wrap: wrap; gap: 20px; } .categories-row { display: flex; flex-direction: column; } .products-button-next{ right: -5px; } .products-button-prev{ left: -5px; } .news-button-next{ right: -5px; } .news-button-prev{ left: -5px; } .section-container { padding: 60px 20px; } .advantages { padding: 0px 0; } .footer-wrapper { display: flex ; flex-direction: column; justify-content: space-between; width: 100%; gap: 20px; padding-top: 40px; border-top: 2px solid #E2E2E2; text-align: center; } .footer-copyright { display: none; } .footer-contact-section { align-items: center; } .footer-bottom-mobile{ display: block; } .footer-copyright-mobile{ padding-top: 20px; text-align: center; font-size: 12px; color: #6C7784; } nav.footer-nav { gap: 10px; padding-top: 0; } .header-tagline { font-size: 12px; line-height: 12px; } } @media (max-width: 576px) { .hero-images { display: none; } .hero-content { padding-left: 20px; padding-right: 20px; } .products-button-prev { left: 20px; } .products-button-next { right: 20px; } .news-button-prev { left: 20px; } .news-button-next { right: 20px; } .footer-categories { grid-template-columns: 1fr; gap: 30px; } } @media (max-width: 480px) { .footer-categories { grid-template-columns: repeat(1, 1fr); gap: 20px; } } .section-container { max-width: 1331px; margin: 0 auto; } a.about-btn { padding: 16px; border: 1px solid #5793FB; color: #5793FB; margin-top: 60px; text-decoration: none; border-radius: 16px; font-weight: 600; } .about-btn-wrapper { padding-top: 30px; } /* Стили для блока Heading после header */ /* Breadcrumbs */ .breadcrumbs { width: 100%; } .breadcrumb-item { display: flex; flex-direction: row; align-items: center; gap: 10px; } .breadcrumb-arrow { width: 11.5px; height: 11.83px; display: block; } .breadcrumb-link { font-family: 'Graphik LCG', sans-serif; font-weight: 300; font-size: 12px; line-height: 2.1666666666666665em; color: #000000; text-decoration: none; } /* Заголовок секции */ .section-title-catalog { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 42px; line-height: 1.5238095238095237em; letter-spacing: 0.02em; color: #212737; margin: 0; padding: 0; } /* Описание секции */ .section-description-catalog { font-family: 'Graphik LCG', sans-serif; font-weight: 300; font-size: 16px; line-height: 1.625em; color: #000000; margin: 0; padding: 0; padding-top: 20px; } /* Блок популярных запросов */ .fastlinks { display: flex; flex-direction: column; gap: 16px; width: 100%; padding-top: 24px; } .fastlinks-title { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.625em; color: #000000; margin: 0; padding: 0; } .fastlinks-container { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; } .fastlink-item { display: inline-flex; justify-content: center; align-items: center; padding: 10px; border: 1px solid #5F99E5; border-radius: 8px; font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 14px; line-height: 1em; color: #5F99E5; text-decoration: none; transition: all 0.3s ease; white-space: nowrap; } .fastlink-item:hover { background-color: #5F99E5; color: #ffffff; } /* Адаптивность для мобильных устройств */ @media (max-width: 768px) { .section-title-catalog { font-size: 32px; } .section-description { font-size: 14px; } } @media (max-width: 480px) { .section-title-catalog { font-size: 28px; } .breadcrumb-item { flex-wrap: wrap; } } /* Стили для блока категорий */ .categories-sidebar { max-width: 316px; display: flex; flex-direction: column; gap: 16px; } .categories-list { display: flex; flex-direction: column; gap: 16px; } .category-item { display: flex; flex-direction: column; } .category-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background-color: #F4F6F8; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; } .category-header:hover { opacity: 0.9; } .category-title { font-family: 'Graphik LCG', sans-serif; font-weight: 500; font-size: 18px; line-height: 1em; color: #000000; } .category-arrow { width: 8px; height: 4px; transition: transform 0.3s ease; } .category-header[aria-expanded="true"] .category-arrow { transform: rotate(180deg); } .category-links { display: flex; flex-direction: column; gap: 16px; padding: 8px 16px; } .category-link { font-family: 'Graphik LCG', sans-serif; font-weight: 500; font-size: 14px; line-height: 1.8571428571428572em; color: #5F99E5; text-decoration: none; transition: color 0.3s ease; } .category-link:hover { color: #1A2D45; } /* Баннер */ .categories-banner { margin-top: 16px; } .banner-content { position: relative; width: auto; height: 400px; background-color: #F4F6F8; border-radius: 12px; overflow: hidden; } .banner-image { position: absolute; right: 0; bottom: 0; max-width: 144px; max-height: 178px; object-fit: cover; } .banner-text { position: relative; z-index: 1; padding: 36px 32px; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; } .banner-label { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 21px; line-height: 1.2380952380952381em; color: #E13023; margin-bottom: 8px; } .banner-title { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 21px; line-height: 1.1428571428571428em; color: #1A2D45; margin: 0 0 16px 0; } .banner-description { font-family: 'Graphik LCG', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.2857142857142858em; color: #81889B; margin: 0 0 24px 0; } .banner-button { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 24px; background-color: #E13023; border: 1px solid #FFFFFF; border-radius: 16px; text-decoration: none; max-width: 259px; transition: all 0.3s ease; margin-top: auto; } .banner-button:hover { background-color: #c0281d; } .banner-button span { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 14px; line-height: 1em; letter-spacing: 0.04em; color: #FFFFFF; } .banner-button img { width: 8.17px; height: 16px; } /* Каталог товаров */ .catalog-content { max-width: 958px; } .products-grid { display: flex; flex-direction: column; } .products-grid .row { display: flex; flex-wrap: wrap; margin: 0; justify-content: flex-end; } .product-col { box-sizing: border-box; /* padding: 0 8px; margin-bottom: 16px; */ } .product-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; background-color: #FFFFFF; border: 1px solid #E8F0F6; height: 100%; transition: all 0.3s ease; } .product-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .product-image { width: 100%; height: 259px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .product-image img { max-width: 100%; max-height: 100%; object-fit: contain; } .product-info { display: flex; flex-direction: column; gap: 10px; padding: 8px; flex: 1; } .product-title { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 23px; line-height: 1.0434782608695652em; color: #1F212E; margin: 0; } .product-description { font-family: 'Graphik LCG', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.2857142857142858em; color: #81889B; margin: 0; padding: 4px 0; flex: 1; } .product-button { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 24px; border: 1px solid #5F99E5; border-radius: 16px; text-decoration: none; transition: all 0.3s ease; margin-top: auto; } .product-button:hover { background-color: #5F99E5; } .product-button:hover span { color: #FFFFFF; } .product-button span { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 14px; line-height: 1em; letter-spacing: 0.04em; color: #5F99E5; transition: color 0.3s ease; } .product-button img { width: 8.17px; height: 16px; transition: filter 0.3s ease; } .product-button:hover img { filter: brightness(0) invert(1); } /* Пагинация */ .pagination-wrapper { width: 100%; height: 40px; } .pagination { display: flex; flex-direction: row; align-items: stretch; gap: 0; border: 1px solid #E8F0F6; border-radius: 0; margin: 0; padding: 0; width: 100%; } .pagination-arrow { display: flex; align-items: center; justify-content: center; padding: 8px; border-right: 1px solid #E8F0F6; text-decoration: none; transition: all 0.3s ease; height: 40px; box-sizing: border-box; margin: 0; flex-shrink: 0; flex: 1 1 0; } .pagination-arrow img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .pagination-number { display: flex; align-items: center; justify-content: center; padding: 8px; border-right: 1px solid #E8F0F6; text-decoration: none; transition: all 0.3s ease; height: 40px; box-sizing: border-box; margin: 0; flex: 1 1 0; } .pagination-number { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.5em; color: #5F99E5; border: none; } .pagination-number.active { background-color: #E13023; color: #FFFFFF; border-right: 1px solid #E13023; } .pagination-number:hover:not(.active) { background-color: #F4F6F8; } .pagination-arrow { border: none; border-right: 1px solid #E8F0F6; } .pagination-arrow:hover { background-color: #F4F6F6; } /* SEO текст */ .seo-text { padding: 32px 0; } .seo-title { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 24px; line-height: 2.6666666666666665em; letter-spacing: 0.02em; color: #212737; margin: 0 0 24px 0; } .seo-content { font-family: 'Graphik LCG', sans-serif; font-weight: 300; font-size: 18px; line-height: 1.6111111111111112em; color: #2B4472; margin: 0 0 16px 0; } .seo-content:last-child { margin-bottom: 0; } /* Адаптивность для блока категорий */ @media (max-width: 992px) { .categories-sidebar { margin-bottom: 32px; } .banner-content { width: 100%; } .catalog-content { max-width: 100%; } } @media (max-width: 768px) { .product-card { margin-bottom: 16px; } .pagination { flex-wrap: wrap; } .pagination-arrow { height: 40px; flex-shrink: 0; } .pagination-number { flex: 1 1 0; min-width: 40px; } } @media (max-width: 576px) { .banner-text { padding: 24px 20px; } .banner-button { width: 100%; } .product-image { height: 200px; } } .row-categories-block{ justify-content: space-between; flex-wrap: nowrap; } .categories-block { margin-top: 48px; } @media (max-width: 1024px) { .categories-sidebar { margin-right: 0px; padding-right: 20px; } .category-links a { white-space: normal; } .header-contacts { gap: 10px; } } .breadcrumbs{ max-width: 1331px; margin: 0 auto; } @media (max-width: 1400px) and (min-width: 768px) { .breadcrumbs { padding: 0px 30px; } } @media (max-width: 768px) { .breadcrumbs { padding: 0px 20px; } } .section-container-description-catalog{ padding-bottom: 0px; } /* Адаптивность товаров */ /* По умолчанию (>= 1024px): 3 товара в строке */ .product-col { flex: 0 0 calc(33.333% ); } /* Менее 1024px: 2 товара в строке */ @media (max-width: 1023px) { .product-col { flex: 0 0 calc(50%); } } /* Менее 786px: сайдбар сверху, товары по 3 в строке */ @media (max-width: 785px) { .row-categories-block { flex-direction: column; flex-wrap: wrap; } .categories-sidebar { width: 100%; max-width: 100%; margin-right: 0; margin-bottom: 32px; order: -1; } .catalog-content { width: 100%; max-width: 100%; } .product-col { flex: 0 0 calc(33.333%); } } /* Менее 576px: товары по 1 в строке */ @media (max-width: 575px) { .product-col { flex: 0 0 calc(100%); } } .pagination>a { border: solid 1px #E8F0F6; } /* Item Info Section */ .item-info-section { padding: 32px 0; width: 100%; } .item-info-container { display: flex; flex-direction: row; align-items: stretch; gap: 24px; border-radius: 0; } /* Left Column */ .item-info-left { display: flex; flex-direction: column; gap: 24px; padding: 32px; background-color: #F4F6F8; border-radius: 16px; flex: 1 1 0; } .item-image-wrapper { width: 260px; height: 260px; border-radius: 12px; background-color: #FFFFFF; display: flex; align-items: center; justify-content: center; overflow: hidden; } .item-image { width: 100%; height: 100%; object-fit: contain; } .item-title { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 32px; line-height: 0.75em; color: #1F212E; margin: 0; } .item-description { font-family: 'Graphik LCG', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5em; color: #81889B; margin: 0; } .item-buttons { display: flex; flex-direction: row; gap: 10px; align-self: stretch; } .item-btn { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 24px; border: 1px solid #5793FB; border-radius: 16px; text-decoration: none; transition: all 0.3s ease; height: 48px; box-sizing: border-box; } .item-btn-primary { flex: 1 1 0; } .item-btn-messenger { flex: 0 0 auto; } .item-btn span { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 14px; line-height: 1em; letter-spacing: 0.04em; color: #5793FB; white-space: nowrap; } .item-btn img { width: auto; height: auto; flex-shrink: 0; } .item-btn-primary img { width: 8.17px; height: 16px; } .item-btn-messenger img { width: 24px; height: 24px; } .item-btn:hover { background-color: #5793FB; } .item-btn:hover span { color: #FFFFFF; } /* .item-btn:hover img { filter: brightness(0) invert(1); } */ /* Right Column */ .item-info-right { display: flex; flex-direction: column; gap: 24px; padding: 0 24px; flex: 1 1 0; } .info-block { display: flex; flex-direction: column; gap: 16px; } .info-block-title { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.3333333333333333em; color: #1F212E; margin: 0; } .info-text { font-family: 'Graphik LCG', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.7142857142857142em; color: #81889B; margin: 0; max-width: 654px; } .info-divider { width: 100%; height: 1px; border: none; border-top: 1px dashed #CFD8E0; margin: 0; } /* Specifications Table */ .specs-table { display: flex; flex-direction: column; gap: 0; } .spec-row { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 0; min-height: 37px; border-top: 1px dashed #CFD8E0; } .spec-label { font-family: 'Graphik LCG', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.7142857142857142em; color: #81889B; width: 220px; flex-shrink: 0; } .spec-value { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 14px; line-height: 1.7142857142857142em; color: #1A2D45; flex: 1 1 0; } /* .spec-divider { width: 100%; height: 1px; border: none; border-top: 1px dashed #CFD8E0; margin: 0; } */ /* Properties List */ .properties-list { display: flex; flex-direction: column; gap: 4px; } .property-item { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; } .property-marker { width: 6px; height: 6px; border-radius: 50%; background-color: #E13023; flex-shrink: 0; } .property-text { font-family: 'Graphik LCG', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.7142857142857142em; color: #81889B; } /* Адаптивность для Item Info Section */ @media (max-width: 1200px) { .item-info-container { padding: 32px 60px; } } @media (max-width: 992px) { .item-info-container { flex-direction: column; padding: 32px 40px; } .item-info-left { width: 100%; } .item-image-wrapper { width: 100%; max-width: 260px; margin: 0 auto; } .item-info-right { padding: 0; } } @media (max-width: 768px) { .item-info-container { padding: 24px 20px; gap: 20px; } .item-info-left { padding: 24px; } .item-title { font-size: 24px; } .item-buttons { flex-wrap: wrap; } .item-btn-messenger { flex: 1 1 0; min-width: calc(50% - 5px); } .spec-row { flex-direction: column; align-items: flex-start; gap: 8px; } .spec-label { width: 100%; } } section.item-info-section { border-top: 1px solid #E8F0F6; } .breadcrumbs { padding-bottom: 32px; padding-top: 21.5px; } /* Item Info Description Section */ .item-info-description-section { padding: 48px 0; width: 100%; border-top: 1px solid #E8F0F6; } .item-info-description-container { display: flex; flex-direction: row; align-items: stretch; gap: 24px; padding: 48px 0px; } /* Left Column - Documentation */ .item-info-description-right { display: flex; flex-direction: column; gap: 24px; padding: 32px; background-color: #F4F6F8; border-radius: 16px; width: 348px; flex-shrink: 0; } .documentation-block { display: flex; flex-direction: column; gap: 16px; } .documentation-title { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.3333333333333333em; color: #1F212E; margin: 0; } .documentation-buttons { display: flex; flex-direction: column; gap: 10px; align-self: stretch; } .documentation-btn { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 16px; border: 1px solid #E13023; border-radius: 8px; text-decoration: none; transition: all 0.3s ease; height: auto; box-sizing: border-box; } .documentation-btn img { width: 16px; height: 16px; flex-shrink: 0; } .documentation-btn span { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 12px; line-height: 1em; letter-spacing: 0.04em; color: #1A2D45; } .documentation-btn:hover { background-color: #E13023; } .documentation-btn:hover span { color: #FFFFFF; } .documentation-btn:hover img { filter: brightness(0) invert(1); } /* Right Column - Content */ .item-info-description-left { display: flex; flex-direction: column; gap: 32px; flex: 1 1 0; } .content-block { display: flex; flex-direction: column; gap: 24px; } .content-title { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 24px; line-height: 1em; color: #1F212E; margin: 0; } .content-text { font-family: 'Graphik LCG', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5em; color: #1A2D45; margin: 0; } /* Parameters Table */ .parameters-table { display: flex; flex-direction: column; gap: 16px; padding: 32px 0; } .parameter-row { display: flex; flex-direction: row; align-items: center; gap: 10px; } .parameter-row-full { align-items: flex-start; } .parameter-label { font-family: 'Graphik LCG', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.7142857142857142em; color: #81889B; width: 220px; flex-shrink: 0; } .parameter-value { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 14px; line-height: 1.7142857142857142em; color: #1A2D45; flex: 1 1 0; } /* Legal Notice */ .legal-notice { display: flex; flex-direction: row; justify-content: stretch; align-items: stretch; gap: 10px; padding: 32px; border: 1px solid #ECCEAC; border-radius: 0; } .legal-text { font-family: 'Graphik LCG', sans-serif; font-weight: 400; font-size: 12px; line-height: 1.5833333333333333em; color: #1A2D45; margin: 0; } /* Адаптивность для Item Info Description Section */ @media (max-width: 1200px) { .item-info-description-container { padding: 48px 60px; } } @media (max-width: 992px) { .item-info-description-container { flex-direction: column; padding: 48px 40px; } .item-info-description-right { width: 100%; } } @media (max-width: 768px) { .item-info-description-section { padding: 32px 0; } .item-info-description-container { padding: 32px 20px; gap: 20px; } .item-info-description-right { padding: 24px; } .content-title { font-size: 20px; } .parameter-row { flex-direction: column; align-items: flex-start; gap: 8px; } .parameter-label { width: 100%; } .legal-notice { padding: 24px; } } .parameter-row { min-height: 37px; border-top: 1px dashed #CFD8E0; align-items: flex-end; } /* Heading Section Styles */ .heading-section { width: 100%; padding-top: 48px; padding-bottom: 48px; } .heading-container { display: flex; flex-direction: column; align-self: stretch; gap: 24px; max-width: 1332px; margin: 0 auto; } .heading-frame { display: flex; flex-direction: column; align-self: stretch; gap: 48px; } /* Heading Block */ .heading-block { display: flex; flex-direction: column; gap: 24px; width: 100%; } .heading-title { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 32px; line-height: 2em; letter-spacing: 0.02em; color: #212737; margin: 0; } .heading-text-large { font-family: 'Graphik LCG', sans-serif; font-weight: 300; font-size: 18px; line-height: 1.4444444444444444em; color: #000000; margin: 0; max-width: 1332px; } .heading-text-columns { display: flex; flex-direction: row; justify-content: stretch; align-items: stretch; gap: 32px; width: 100%; } .heading-text-medium { font-family: 'Graphik LCG', sans-serif; font-weight: 300; font-size: 16px; line-height: 1.875em; color: #000000; margin: 0; flex: 1 1 0; } /* Heading Divider */ .heading-divider { width: 100%; height: 1px; border: none; border-top: 1px dashed #CFD8E0; margin: 0; } /* Heading Block with Image */ .heading-block-image { display: flex; flex-direction: row; align-items: center; align-self: stretch; gap: 48px; } .heading-block-content { display: flex; flex-direction: column; gap: 32px; flex: 1 1 0; } .heading-title-small { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 32px; line-height: 2em; letter-spacing: 0.02em; color: #212737; margin: 0; } .heading-image-wrapper { width: 576px; height: 402px; flex-shrink: 0; background-color: #F4F6F8; border-radius: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .heading-image { width: 100%; height: 100%; object-fit: contain; } .heading-block-image-reverse { flex-direction: row-reverse; } /*baner company*/ .company-banner-section{ max-width: 1475px; } .company-banner-content { display: flex; align-items: stretch; min-height: 300px; /* подберите под макет */ border-radius: 20px; overflow: hidden; /* чтобы всё обрезалось по радиусу */ background-color: #2c2f3a; /* общий фон слева */ } /* левая часть с текстом */ .company-banner-ellipse-inner { position: relative; flex: 0 0 50%; padding: 60px 0px 60px 80px; color: #fff; z-index: 1; display: flex ; } .company-banner-text{ z-index: 2; position: relative; display: flex; flex-direction: column; justify-content: space-evenly; } /* полукруг */ .company-banner-ellipse-inner::after { content: ""; position: absolute; top: 50%; right: -15%; transform: translateY(-50%); width: 100%; height: 150%; background-color: #2c2f3a; border-radius: 50%; } .company-banner-ellipse-inner::before { content: ""; position: absolute; top: 50%; right: -19%; transform: translateY(-50%); width: 100%; height: 150%; border-radius: 50%; border: solid; opacity: 0.5; } /* правая часть с фотографией */ .company-banner-bg { flex: 1; } /* адаптивность для баннера компании */ /* Адаптивность для Heading Section */ @media (max-width: 1400px) { .heading-section { padding-top: 48px; padding-bottom: 48px; } } @media (max-width: 1200px) { .heading-section { padding-top: 48px; padding-bottom: 48px; } .heading-image-wrapper { width: 400px; height: 280px; } } @media (max-width: 992px) { .heading-text-columns { flex-direction: column; gap: 24px; } .heading-block-image { flex-direction: column; gap: 32px; } .heading-block-image-reverse { flex-direction: column; } .heading-image-wrapper { width: 100%; height: auto; min-height: 280px; } } @media (max-width: 768px) { .heading-section { padding-top: 32px; padding-bottom: 32px; } .heading-frame { gap: 32px; } .heading-title, .heading-title-small { font-size: 24px; line-height: 1.5em; } .heading-text-large { font-size: 16px; } .heading-text-medium { font-size: 14px; } .heading-block { gap: 16px; } .heading-block-content { gap: 20px; } .company-banner-ellipse-inner { flex: 0 0 100%; padding: 60px 40px 60px 40px; } .company-banner-bg { display: none; } } /* News Section Styles */ .news-container-page { display: flex; flex-direction: column; gap: 8px; } .news-list { display: flex; flex-direction: column; gap: 8px; width: 100%; } /* Main News Item */ .news-item-main { display: flex; flex-direction: row; justify-content: stretch; align-items: stretch; gap: 10px; height: 355px; background-color: #F4F6F8; border-radius: 0; } .news-item-content { flex: 1; display: flex; align-items: center; padding: 35px 72px; } .news-info { display: flex; flex-direction: column; gap: 16px; width: 100%; } .news-date-badge { display: inline-flex; align-items: center; width: 118px; height: 30px; padding: 0 10px; background-color: #FFFFFF; border-left: 3px solid #E13023; border-radius: 3px; } .news-date-badge span { font-family: 'Graphik LCG', sans-serif; font-weight: 500; font-size: 12px; line-height: 1.5em; color: #1A2D45; } .news-title-main { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 32px; line-height: 1em; color: #1A2D45; margin: 0; } .news-description-main { font-family: 'Graphik LCG', sans-serif; font-weight: 300; font-size: 16px; line-height: 1.4em; color: #1A2D45; margin: 0; } .news-button { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; padding: 16px 24px; border: 1px solid #5F99E5; border-radius: 16px; text-decoration: none; width: fit-content; transition: all 0.3s ease; } .news-button span { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 14px; line-height: 1em; letter-spacing: 0.04em; color: #5F99E5; } .news-button img { width: 8.17px; height: 16px; } .news-button:hover { background-color: #5F99E5; } .news-button:hover span { color: #FFFFFF; } .news-button:hover img { filter: brightness(0) invert(1); } .news-image-main { flex: 1; height: 100%; overflow: hidden; } .news-image-main img { width: 100%; height: 100%; object-fit: cover; } /* News Row */ .news-row { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; flex-wrap: wrap; align-content: center; } /* Small News Items */ .news-item-small { height: 355px; position: relative; border-radius: 0; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; width: 32.9%; } .news-bg-1 { background-image: url('/local/templates/kleef/css/../images/news-image-1.png'); background-color: #8A8A8A; } .news-bg-2 { background-image: url('/local/templates/kleef/css/../images/news-image-2.png'); background-color: #8A8A8A; } .news-bg-3 { background-image: url('/local/templates/kleef/css/../images/news-image-3.png'); background-color: #8A8A8A; } .news-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 35px 26px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(28, 30, 37, 0.83) 100%); border-radius: 5px; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; height: 100%; } .news-date-badge-small { position: absolute; top: 20px; left: 19px; display: inline-flex; align-items: center; width: 108px; height: 30px; padding: 0 5px; background-color: #303030; border-left: 3px solid #E13023; border-radius: 3px; } .news-date-badge-small span { font-family: 'Graphik LCG', sans-serif; font-weight: 500; font-size: 12px; line-height: 1.5em; color: #FFFFFF; } .news-title-small { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 20px; line-height: 1em; color: #FFFFFF; margin: 0; } .news-description-small { font-family: 'Graphik LCG', sans-serif; font-weight: 300; font-size: 12px; line-height: 1.4em; color: #FFFFFF; margin: 0; max-width: 297px; } .news-link-small { font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 14px; line-height: 1.5em; color: #FFFFFF; text-decoration: none; transition: opacity 0.3s ease; } .news-link-small:hover { opacity: 0.8; } /* News Pagination */ .news-pagination { padding: 24px 0; width: 100%; } .news-pagination .pagination-wrapper { display: flex; flex-direction: row; justify-content: stretch; align-items: stretch; gap: -1px; border: 1px solid #E8F0F6; border-radius: 0; max-width: 1332px; } .news-pagination .pagination-arrow { display: flex; align-items: center; justify-content: center; padding: 8px; border-right: 1px solid #E8F0F6; text-decoration: none; transition: all 0.3s ease; height: auto; box-sizing: border-box; flex: 1 1 0; } .news-pagination .pagination-arrow img { width: 8.17px; height: 16px; max-width: 100%; max-height: 100%; object-fit: contain; } .news-pagination .pagination-number { display: flex; align-items: center; justify-content: center; padding: 8px; border-right: 1px solid #E8F0F6; text-decoration: none; transition: all 0.3s ease; height: auto; box-sizing: border-box; flex: 1 1 0; font-family: 'Graphik LCG', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.5em; color: #5F99E5; } .news-pagination .pagination-number.active { background-color: #E13023; color: #FFFFFF; border-right: 1px solid #E13023; } .news-pagination .pagination-number:hover:not(.active) { background-color: #F4F6F8; } .news-pagination .pagination-arrow:hover { background-color: #F4F6F6; } /* Адаптивность для News Section */ @media (max-width: 1200px) { .news-item-content { padding: 35px 40px; } .news-image-main { height: 300px; } .news-row { flex-wrap: wrap; } .news-item-small { flex: 0 1 calc(50% - 4px); min-width: 300px; max-width: calc(50% - 4px); } } @media (max-width: 1400px) and (min-width: 768px) { .news-container-page { margin-top: -80px; } } @media (max-width: 992px) { .news-item-main { height: auto; } .news-item-content { padding: 30px 30px; } .news-title-main { font-size: 24px; } .news-item-small { flex: 1 1 100%; height: 300px; } .news-pagination .pagination-wrapper { flex-wrap: wrap; } } @media (max-width: 768px) { .news-item-content { padding: 24px 20px; } .news-title-main { font-size: 20px; } .news-description-main { font-size: 14px; } .news-button { padding: 12px 20px; } .news-image-main { height: 250px; } .news-item-small { height: 280px; } .news-title-small { font-size: 18px; } .news-description-small { font-size: 11px; } .news-pagination .pagination-number, .news-pagination .pagination-arrow { min-width: 40px; padding: 8px 4px; } } .news-container-page{ padding-top: 40px; } @media (min-width: 1024px){ .catalog-content { padding-left: 58px ! Important; } } /* End */ /* /local/templates/kleef/css/vendor/swiper-bundle.min.css?176251373618454 */ /* /local/templates/kleef/css/style.css?176493080975452 */