/* Theme Name: SiteRussia Theme URI: siterussia.ru Description: Дизайн сайта разработанный компанией Site Russia Author: Wolf Author URI: siterussia.ru Version: 1.0 */ @font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-Bold.woff2') format('woff2'), url('fonts/Gilroy-Bold.woff') format('woff'), url('fonts/Gilroy-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: block; } @font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-Medium.woff2') format('woff2'), url('fonts/Gilroy-Medium.woff') format('woff'), url('fonts/Gilroy-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: block; } @font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-Regular.woff2') format('woff2'), url('fonts/Gilroy-Regular.woff') format('woff'), url('fonts/Gilroy-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: block; } /* iPhone 5 */ @media (max-width: 321px){ .modal .modal-dialog {width: 100%;padding: 60px 10px 10px 10px!important;} .modal .modal-dialog .button{width: 100%;padding: 20px!important;} h1{font-size: 25px!important;} } /* iPad */ @media (min-width: 768px){ .container {max-width: 720px;} .col-pl-2{grid-template-columns: repeat(2, 1fr);} .col-pl-3{grid-template-columns: repeat(3, 1fr);} } /* Все что меньше 921 + iPad вертикальный */ @media (max-width: 1024px) { .modal .modal-dialog{width: 100%;padding: 60px 20px 20px 20px;} .block{padding: 20px 0px;} h1{font-size: 35px;} h2{font-size: 26px!important;} .button{display: block!important;width: 100%;} .grid{gap: 20px;} .col-m-2{grid-template-columns: repeat(2, 1fr);} .head{display: none;} #mobile .container{display: grid;grid-auto-flow: column;align-items: center;justify-content: space-between;padding-top: 15px;padding-bottom: 15px;} #header{display: none!important;} #mmenu{padding: 0px!important;-webkit-overflow-scrolling: touch;background-color: white;border-radius: 0px;} #mmenu .modal-dialog {height: 100%;margin: 0;} #mmenu .modal-content {height: 100%;width: 100vw;border-radius: 0;} #mmenu .close{opacity: 1;} .modal{background-color: white!important;} #mmenu .cont{padding-top: 10px;font-size: 18px;display: grid;gap: 10px;} #mmenu .cont span{display: block;} #mmenu .cont .phone{display: block;font-weight: bold;font-size: 20px;} #mmenu .cont .time{color: gray;font-size: 15px;} #mmenu .cont .mail{color: var(--hovercolor);} #mmenu .cont .ad{font-size: 15px;} #mmenu .cont .cbutton{margin-top: 20px;display: block;} #mmenu .nav{display: inline-block;width: 100%;padding-top: 50px;list-style: none;margin-bottom: 20px;} #mmenu .nav>ul{padding: 0px;} #mmenu .nav>li{border-bottom: 1px solid #F8F8F8;padding: 10px 0px;list-style: none;} #mmenu .nav>li>a{text-transform: uppercase;font-weight: 500;} #mmenu .nav .sub-menu{padding-top: 10px;} #mmenu .nav .sub-menu>li{padding: 10px 0px;list-style: none;} #mmenu .nav ul.hide {display: none!important;} #mmenu .nav .menu-item-has-children {position: relative;} #mmenu .nav span.menu-closed:after {content: "";width: 50px;max-height: 50px;position: absolute;right: 0;top: 6px;bottom: 6px;background-image: url('images/marrow.svg');background-size: 12px 7px;background-position: center;background-repeat: no-repeat;transform-origin: center;transform: rotate(-90deg);-webkit-transition: transform 0.4s cubic-bezier(0, 0.5, 0.5, 1), opacity 0.3s cubic-bezier(0, 0.5, 0.5, 1);transition: transform 0.4s cubic-bezier(0, 0.5, 0.5, 1), opacity 0.3s cubic-bezier(0, 0.5, 0.5, 1);} #mmenu .nav span.menu-closed:before {content: "";position: absolute;right: 50px;top: 6px;bottom: 6px;border-left: 1px solid #F8F8F8;} #mmenu .nav span.menu-closed.menu-open:after{transform: rotate(0deg);opacity: 0.3;} #mmenu .nav span.menu-closed.menu-open:before{opacity: 0;} #price .table{padding: 0px!important;} #price .grid{gap: 0px!important;} #price .nav{flex-direction: row!important;flex-wrap: wrap;justify-content: center;} #price .nav .nav-link{width: 100%!important;padding: 15px!important;text-align: center;} #price .table{box-shadow: none!important;display: block;width: 100%;overflow-x: auto;-webkit-overflow-scrolling: touch;} #price td, #price th{min-width: 200px;} #footer{text-align: center;} } @media (min-width: 1025px) { #mobile{display: none!important;} h1{font-size:40px;margin-bottom: 20px;} .container {max-width: 960px;} .modal .modal-dialog{max-width: 500px;padding: 40px;position: absolute;right: 0;height: 100%;margin: 0;} .block{padding: 60px 0;} .block h2{font-size: 40px;} .grid{gap: 30px;} .col-pc-2{grid-template-columns: repeat(2, 1fr);} .col-pc-3{grid-template-columns: repeat(3, 1fr);} .col-pc-4{grid-template-columns: repeat(4, 1fr);} .col-pc-5{grid-template-columns: repeat(5, 1fr);} .col-pc-6{grid-template-columns: repeat(6, 1fr);} .col-pc-1-2{grid-template-columns: 1fr 2fr;} .col-pc-1-3{grid-template-columns: 1fr 3fr;} .col-pc-2-1{grid-template-columns: 2fr 1fr;} .col-pc-05-2{grid-template-columns: 0.5fr 2fr;} .col-pc-05-2-05{grid-template-columns: 0.5fr 2fr 0.5fr;} .col-pc-2-05{grid-template-columns: 2fr 0.5fr;} .span2{grid-column: span 2;} .span3{grid-column: span 3;} .nw{flex-wrap: nowrap !important;} .block .tline{padding-left: 150px;} .block .tline p, .block .tline ul{font-size: 20px;} .block .tline h2{max-width: 70%;} .block .tline .h2{margin-bottom: 40px;} .block .tline .h2 p{margin-top: 10px;margin-bottom: 0px;} .block .tline:before{content: url(images/tline.svg);left: -150px;top: 60px;position: relative;} #footer #menu-nashi-uslugi{display: grid;grid-template-columns: 1fr 1fr;} #list .item .bts{grid-column: span 2;} } @media (min-width: 1200px) { .container{max-width: 1400px;} } :root { --hovercolor: #60969B; --fonttitle: Ruberoid, Arial, Helvetica, sans-serif; } *, ::after, ::before {box-sizing: border-box;} .container{width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;} body {margin: 0;line-height: 1.5;font-family: 'Gilroy', sans-serif;color: white;background: #3A3A3A;} article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {display: block;} a{color: black;text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);outline: none;} img, svg{vertical-align: middle;} label {display: inline-block;margin-bottom: .5rem;} button, input, optgroup, select, textarea {margin: 0;font-family: inherit;font-size: inherit;line-height: inherit;background-color: white;} button:active, button:focus {outline: none;} /* Убираем обводку у кнопок */ button::-moz-focus-inner {border: 0;} p {margin-top: 0;} h1, h2, h3, h4, h5, h6 {margin-top: 0;font-weight: 500;line-height: 1.2;font-family: var(--fonttitle);} h2{font-size:32px;margin-bottom: 15px;} h3{font-size: 26px;margin-bottom: 15px;} /* Кнопка вверх */ .btn-back-top {opacity: 0;background: black;border-radius: 2px;cursor: pointer;display: block!important;width: 45px;height: 45px;position: fixed;left: 15px;bottom: 15px;transition: .5s;z-index: 1030;} .btn-back-top:hover{opacity: 1!important;} .btn-back-top:before {border-radius: 4px;border-color: #fff;border-style: solid;border-width: 5px 0 0 5px;content: "";width: 17px;height: 17px;position: absolute;top: 17px;left: 15px;transform: rotate(45deg);} /* Кнопка вотсап */ .whatsapp-button{position: fixed;right: 70px;bottom: 70px;background: #25D366;border-radius: 50%;width: 65px;height: 65px;z-index: 9999;display: flex;align-items: center;justify-content: center;box-shadow: 0px 0px 11px rgb(37 211 102);} .whatsapp-button:before, .whatsapp-button:after {content: " ";display: block;position: absolute;border: 50%;border: 1px solid #25D366;left: -20px;right: -20px;top: -20px;bottom: -20px;border-radius: 50%;animation: animate 1.5s linear infinite;opacity: 0;backface-visibility: hidden; } .whatsapp-button:after{animation-delay: .5s;} @keyframes animate{0%{transform: scale(0.5);opacity: 0;}50%{opacity: 1;}100%{transform: scale(1.2);opacity: 0;}} @media (max-width: 921px) {.whatsapp-button {bottom: 10px!important;left: 10px;}} /* Дата для мобильного */ input[type="date"]:before {color: lightgrey;content: attr(placeholder) !important;margin-right: 0.5em;} input[type="date"]:focus:before {content: '' !important;} .img-fluid {max-width: 100%;height: auto;} .aligncenter{display: block;margin: 5px auto 5px auto;} .alignright{float:right;padding-left: 10px;padding-bottom: 10px;} .table {width: 100%;margin-bottom: 1rem;border-collapse: collapse;} .table td, .table th {padding: .75rem;vertical-align: top;border-top: 1px solid var(--hovercolor)3;} .table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)} .p404{text-align: center;padding: 50px 0px;} .grid{display: grid;} .ac{align-items: center;} .flex{display: flex; flex-wrap: wrap;} .tline .st{color: var(--hovercolor);} /* Виджет мессенджеров */ .msg-widget{position:fixed;right:60px;bottom:60px;z-index:9999;} .msg-toggle{width:56px;height:56px;border-radius:50%;border:0;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(102,126,234,.4);transition:transform .3s;position:relative;} .msg-toggle:before,.msg-toggle:after{content:"";display:block;position:absolute;border:1px solid #667eea;left:-20px;right:-20px;top:-20px;bottom:-20px;border-radius:50%;animation:msg-pulse 1.5s linear infinite;opacity:0;backface-visibility:hidden;} .msg-toggle:after{animation-delay:.5s;} @keyframes msg-pulse{0%{transform:scale(0.5);opacity:0;}50%{opacity:1;}100%{transform:scale(1.2);opacity:0;}} .msg-toggle:hover{transform:scale(1.05);} .msg-toggle .msg-close{display:none;} .msg-widget.active .msg-toggle svg:first-child{display:none;} .msg-widget.active .msg-toggle .msg-close{display:block;} .msg-list{position:absolute;bottom:65px;right:0;display:flex;flex-direction:column;gap:10px;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s;} .msg-widget.active .msg-list{opacity:1;visibility:visible;transform:translateY(0);} .msg-item{display:block;transition:transform .3s;} .msg-item:hover{transform:scale(1.1);} .msg-item img{display:block;border-radius:50%;} .msg-phone{width:55px;height:55px;border-radius:50%;background:#ff6b6b;display:flex;align-items:center;justify-content:center;} .msg-email{width:55px;height:55px;border-radius:50%;background:#2196F3;display:flex;align-items:center;justify-content:center;} @media(max-width:768px){.msg-widget{right:15px;bottom:15px;}.msg-toggle{width:50px;height:50px;}.msg-item img,.msg-phone,.msg-email{width:48px;height:48px;}.msg-list{bottom:58px;}} .full{background-color: #fff;} .full a{color: black;} .full .modal-content{border: none;} .full .modal-dialog{max-width: 100%;position: relative;} .full .title{font-size: 30px;font-weight: 500;padding-bottom: 15px;} .full .st{font-size: 18px;padding-bottom: 10px;} .full .list{list-style: none;padding-left: 0px;padding-top: 15px;font-size: 18px;gap: 5px;} /* Табы */ .nav {display: flex;padding: 0;margin: 0;list-style: none;outline: none;} .nav-link:focus, .nav-link:hover {text-decoration: none;} .nav-link {display: block;} .tab-content>.tab-pane {display: none;} .tab-content>.active {display: block;} .fade {transition: opacity .15s linear;} .fade:not(.show) {opacity: 0;} /* Пролистывание на мобильном */ .scroll{flex-wrap: nowrap;overflow-x: auto;-webkit-overflow-scrolling: touch;white-space: nowrap;} .scroll::-webkit-scrollbar {height: 2px;-webkit-appearance: none;} .scroll::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);} .scroll::-webkit-scrollbar-thumb {background: #fd5354;} /* Гармошка */ .collapse:not(.show) {display: none;} .collapsing {position: relative;height: 0;overflow: hidden;transition: height .35s ease;} /* Модальное */ .modal {position: fixed;top: 0;left: 0;z-index: 1050;display: none;width: 100%;height: 100%;overflow: hidden;outline: 0;background-color: #00000060;} .modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll} /*Нужно что бы не прыгало */ .modal-open {overflow: hidden;} .modal-open .modal {overflow-x: hidden;overflow-y: auto;} .modal .modal-dialog{background-color: white;} .modal .close{cursor: pointer;position: absolute;top: 20px;right: 20px;} .modal .grid{gap: 20px;} .modal .title{font-size: 45px;line-height: 55px;font-weight: bold;} .modal .text{color: #545560;font-size: 20px;line-height: 35px;} .modal-dialog .cont{color: black !important;} .modal-dialog{color:black !important ;} /* Анимация при наведении на картинку */ .box {overflow:hidden;} .box img {-moz-transition: all 0.25s ease-out;-o-transition: all 0.25s ease-out;-webkit-transition: all 0.25s ease-out;transition: all 0.25s ease-out;} .box img:hover{-webkit-transform: scale(1.1);-moz-transform: scale(1.05);-o-transform: scale(1.05);transform: scale(1.05);} /* Хлебные */ .breadcrumbs {color: var(--hovercolor);font-size: 14px;padding-bottom: 10px;} .breadcrumbs a{color: #7F7F7F;border-bottom: 1px solid;} /* Форма связи */ .wpcf7{position: relative;} .wpcf7 .wpcf7-form{display: grid;gap: 20px;} .wpcf7 .wpcf7-not-valid-tip, .wpcf7 .screen-reader-response, .wpcf7 .wpcf7-form .ajax-loader, .wpcf7 .wpcf7-form .wpcf7-response-output{display: none;} .wpcf7 .wpcf7-form-control.wpcf7-not-valid{border-bottom: 1px solid red!important;} .wpcf7 .wpcf7-form.invalid .wpcf7-response-output{display: block;font-size: 14px;color: red;font-weight: 500;} .wpcf7 .wpcf7-form.sent .wpcf7-response-output{display: block;font-size: 14px;color: green;font-weight: 500;border: 2px solid green;padding: 10px;text-align: center;background-color: #00800005;} .wpcf7 .wpcf7-text, .wpcf7 .wpcf7-mask, .wpcf7 .wpcf7-textarea{border: none;border-bottom: 1px solid #54556020;padding: 10px;width: 100%;} .wpcf7 .wpcf7-form.submitting .ajax-loader {display: block;background-image: url(images/ajax-loader.gif);width: 24px;height: 24px;position: absolute;bottom: -25px;} .wpcf7 .poly{color: gray;font-size: 14px;} /* Другое */ .block h2{margin-bottom: 40px;} .ppage{min-height: 500px;padding-top: 20px;padding-bottom: 20px;} .phone{white-space: nowrap;} /* Модалки форм (Задать вопрос / Заявка) */ .lmodal .modal-dialog{display: flex;align-items: center;padding: 0!important;} .lmodal .grid{padding: 40px;} .lmodal .title{font-size: 32px;line-height: 1.2;font-weight: 700;color: #1a1a1a;} .lmodal .text{color: #666;font-size: 16px;line-height: 1.6;} .lmodal .desc{background: #f7f7f7;border-radius: 12px;padding: 24px;margin-top: 8px;} .lmodal .stitle2{font-size: 16px;color: var(--hovercolor);margin-bottom: 16px;font-weight: 600;} .lmodal .wpcf7-text,.lmodal .wpcf7-tel{background: #fff!important;border: 1px solid #e0e0e0!important;border-radius: 8px;padding: 14px 16px!important;font-size: 16px;width: 100%;margin-bottom: 8px;transition: .2s;} .lmodal .wpcf7-text:focus,.lmodal .wpcf7-tel:focus{border-color: var(--hovercolor)!important;box-shadow: 0 0 0 3px rgba(96,150,155,.15);outline: none;} .lmodal .wpcf7-submit{width: 100%;padding: 16px!important;font-size: 17px;border-radius: 10px;margin-top: 8px;} .lmodal .close svg line{stroke: #999!important;} .lmodal .close:hover svg line{stroke: #333!important;} @media(max-width:1024px){.lmodal .grid{padding: 24px;}.lmodal .title{font-size: 24px;}} /* Кнопка */ .button{display: inline-block;background: var(--hovercolor);color: white;text-align: center;border-radius: 4px;border: none;padding: 14px 35px;white-space: nowrap;font-weight: 500;cursor: pointer;} .button:hover{background-color: black;color: white!important;} .buttonw{display: inline-block;background: white;color: #333333;text-align: center;border-radius: 4px;padding: 14px 35px;white-space: nowrap;font-weight: 500;} .buttonw:hover{background-color: black;color: white;} .buttonwhite{display: inline-block;cursor: pointer;text-align: center;background: transparent;border: 1px solid var(--hovercolor);color: var(--hovercolor);border-radius: 4px;font-weight: bold;padding: 13px 25px;white-space: nowrap;} .buttonwhite:hover{background: black;border-color: black;color: white!important;} /* Анимация */ a, .owl-nav button path, .cbutton, .ezfc-btn{-webkit-transition: all 0.25s ease-out;transition: all 0.25s ease-out;text-decoration: none;} /*HOVER*/ a:hover, #footer a:hover{color: var(--hovercolor);} .text-center{text-align: center;} .flex-space{display: flex;align-items: center;justify-content: space-between;gap: 20px; flex-wrap: wrap;} #header .logo{flex-wrap: nowrap !important;} #header .grid{grid-template-columns: 1fr 2fr;gap: 20px;font-size: 14px;padding-top: 20px;padding-bottom: 20px;} #header .nav{gap: 20px;white-space: nowrap;} #header .menu-item-has-children:after{content: url(images/arr.svg);margin-left: 3px;position: relative;top: -2px;} #header .menu-item-has-children:hover .sub-menu{display: block;} #header .sub-menu a:hover{color: var(--hovercolor) !important;} #header .sub-menu{display: none;text-align: left; position: absolute;background: white;box-shadow: 0 10px 29px 0 rgba(0,0,0,.05);padding: 10px 0px;list-style: none;z-index: 10;} #header .sub-menu a{text-transform: none;} #header .logo .flex a img{width: 30px; height: 30px;} #header {text-align: center;background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000000 136.33%) !important;} #header .phone{font-size: 25px; color: white; border-bottom: 1px solid white;} #header .logo .flex{gap: 10px ; align-items: center;} #header .adwhite{color: var(--hovercolor);} #header .nav a{font-size: 20px; color: white !important; position: relative; padding: 20px 0 0 20px; display: inline-block;} #header .nav a:hover{color: var(--hovercolor) !important;} #header .bottom{border-top:1px solid white ;} #header .bottom {margin-top: 20px;} #header .btright{font-size: 20px; color: var(--hovercolor); font-weight: 600; } #header .sub-menu a{padding: 10px !important; color: black !important; display: block;} #header .bottom .current_page_item li>a{color: var(--hovercolor) !important;} #header .current-menu-item > a, #header .menu .current-menu-parent > a{color: var(--hovercolor)!important;} #mobile .mobiletel{ color: white; padding: 7px; border-radius: 10px; border: 1px solid white; display: inline-block; transition: 0.5s;} #mobile .mobiletel:hover{color: var(--hovercolor); border-color: var(--hovercolor);} #block1{font-size: 20px !important; overflow: hidden;} #block1 .bg1{position: absolute; top: 0; right: 0; overflow: hidden;} #block1 .bg2{position: absolute; bottom: 0; left: 0; transform: rotate(180deg); overflow: hidden;} #block1 .bg1 img,#block1 .bg2 img{scale: 1.1;} #block1 .boxcontent .img{padding: 55px;} #block1 .prem{padding: 10px; margin-bottom: 20px; border-radius: 5px; border: 1px solid white;} #block1 h1 {margin-bottom: 50px !important;} #block1 h1 span{ color: var(--hovercolor);} #block1 .plashka span{color: white !important; font-size: 25px;} #block1 .prem span{color: var(--hovercolor);} #block1 .flexp{flex-wrap: nowrap; margin-top: 50px; margin-bottom: 50px; gap: 20px;} #block1 .grid{align-items: center;} #block1 .stitle{padding: 15px; background-color: #313131;} #block1 .stitle p{margin: 0 !important;} #block1 .ad{opacity: 0.5; margin-bottom: 10px;} #block1 .soc {margin-bottom: 50px;} #block1 .soc img{width: 30px; height: 30px;} #block1 .soc .flex{gap: 10px; align-items: center;} #block1 .soc .phone{font-size: 20px; color: white;} #block1 .button{font-size: 20px; padding: 20px;} #block1 .bt1{background-color:#313131 ; border: 1px solid white;} #block1 .price{color: var(--hovercolor); display: inline-block; margin-top: 15px; border-bottom: 1px solid var(--hovercolor);} @media (max-width: 1024px) { .flexp{flex-direction: column; } #block1 .prem{font-size: 20px !important;} .flex{justify-content: center;} } .boxcontent {position: relative;} .boxcontent .img img {display: block;width: 100%;height: auto;clip-path: polygon(50px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50px);} /* Плашка в левом верхнем углу */ .plashka {min-width: 270px; z-index: 3; max-width: 270px; position: absolute;top: 10%;left: 0;background: linear-gradient(to bottom right, #1e1e1e, #2e2e2e);color: var(--hovercolor);padding: 30px 30px;font-weight: 500;font-size: 20px;text-transform: uppercase;clip-path: polygon(0 0,calc(100% - 40px) 0, 100% 40px,100% 100%, 0 100% );} @media (max-width: 1024px) { .plashka{top: 0; font-size: 16px !important; padding: 20px;} #block1 .plashka span{font-size: 20px !important;} #block1 .boxcontent .img {padding: 0 !important;} #block1 .bg1,#block1 .bg2{display: none;} } #block2{background: linear-gradient(to top, #C6C6C6 0%, #C6C6C6 49.9%, #3A3A3A 50%, #3A3A3A 100%);} #block2 .item{padding: 20px; text-align: center; font-size: 20px; color: black !important;display: grid; } #block2 .container{background-color: white;} #block2 .item img{margin-bottom: 20px; width: 80px !important; max-height: 110px;} #block2 .grid{gap: 0 !important; align-items: center;} #block2 .item4{transform: scaleY(1.2); background-color: var(--hovercolor); color: white !important;} #block2 .text2{opacity: 0.5; font-size: 16px !important;} @media (max-width: 1024px) { #block2 .item4{transform: scaleY(1) !important;} } #block3{background-color: #C6C6C6; position: relative; z-index: 1;} #block3::after{position: absolute; content: ""; width: 100%; height: 1px; top: 86px; z-index: 2; background-color: var(--hovercolor);} #block3 .image{padding: 40px; } #block3 .img{position: relative; overflow: hidden;} #block3 .bg1{position: absolute; bottom: 0; left: 0; width: 300px; height: 300px; transform: rotate(180deg);overflow: hidden; margin-left: -20px; margin-bottom: -10px;} #block3 .text strong{font-size: 25px;} #block3 .text strong span{color: var(--hovercolor);} #block3 .text{margin-top: 20px; color: black ; font-size: 20px;} #block3 h2{color: var(--hovercolor); position: relative; z-index: 4; background-color:#C6C6C6 ; display: inline-block; padding: 0 20px;} #block3 img{width:100%;} #block3 .grid{gap: 40px !important;} @media (max-width: 1024px) { #block3 .image{padding: 0 !important;} #block3 .bg1{display: none;} } #block4 .owl-nav{margin-top:20px; display:flex; gap:10px;} .marquee {overflow: hidden;background: #c4c4c4;color: black !important;white-space: nowrap;width: 100%;display: flex;align-items: center;} .marquee-track {display: inline-flex;white-space: nowrap;gap: 20px;padding: 30px 0;animation: scroll-marquee linear infinite;will-change: transform; font-size: 20px; align-items: center ;} .marquee-track span {font-weight: bold;font-size: 16px;color: var(--hovercolor);} @keyframes scroll-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } #block6 .items{padding: 30px; border: 1px solid var(--hovercolor); display: grid;} #block6 .item{text-align: center;} #block6 h2{color: var(--hovercolor); position: relative; z-index: 4; background-color:#3A3A3A; display: inline-block; padding: 0 20px;} #block6{ position: relative; z-index: 1;} #block6::after{position: absolute; content: ""; width: 100%; height: 1px; top: 86px; z-index: 2; background-color: var(--hovercolor);} #block6 .title{font-size:25px ; font-weight: 600; margin-bottom: 20px;} #block6 .img{margin-top: -90px; width: 115px; height: 115px;} #block6 .img img{width: 115px; height: 115px; background-color:#3A3A3A ;} #block6 .items:nth-last-child(-n+3) { margin-top: 60px; } @media (max-width: 1024px) { #block6 .item{margin-bottom: 40px;} #block6 .grid{margin-top: 30px;} } #block7{background: url('images/bgfon1.jpg' ) no-repeat center center / cover; padding-top: 300px; padding-bottom: 60px;} #block7 .desc{padding: 20px; background-color: #3a3a3abd; backdrop-filter: blur(3px);} #block7 .desc strong{color: var(--hovercolor); font-size: 22px;} #block8 h2{color: var(--hovercolor); position: relative; z-index: 4; background-color:#3A3A3A; display: inline-block; padding: 0 20px;} #block8{ position: relative; z-index: 1;} #block8::after{position: absolute; content: ""; width: 100%; height: 1px; top: 86px; z-index: 2; background-color: var(--hovercolor);} #block8{font-weight: 500;} #block8 .nav{display: inline-flex;flex-direction: column;gap: 10px;align-items: start;} #block8 .nav .nav-link{padding: 15px 30px;width: 100%; box-shadow: 0 10px 29px 0 rgba(0, 0, 0, .1); background-color: #313131; color: white ; transition: 0.5s;} #block8 .nav .nav-link.active{background: var(--hovercolor);} #block8 .table{ box-shadow: 0 10px 29px 0 rgba(0, 0, 0, .1);border-radius: 24px;padding: 20px;} #block8 table{width: 100%;border-collapse: separate;border-spacing: 0 6px} #block8 th{border: none;padding: 0px 10px 9px 10px;vertical-align: top;text-align: left;text-transform: uppercase;font-size: 12px;color: var(--hovercolor);letter-spacing: 0.12em;font-weight: 400;} #block8 td{border: none;padding: 15px 10px;vertical-align: top;background: #313131;} #block8 td:first-child{border-top-left-radius: 14px;border-bottom-left-radius: 14px;} #block8 td:last-child{border-top-right-radius: 14px;border-bottom-right-radius: 14px;} #block8 a.active{color: white;} #block8 .nav .nav-link:hover{background-color: var(--hovercolor);} @media (max-width: 1024px) { #block8 .table{padding:5px !important;} } #block9 {background-color: #c4c4c4; color: black ; font-size: 20px;} #block9 h2{font-size: 32px !important;} #block9 img{width: 130px; height: 130px;} #block9 .item{padding: 30px; position: relative; z-index: 1;} #block9 .bg1{position: absolute; bottom: 0; right: 0; transform: rotate(90deg);} #block9 span{color: var(--hovercolor);} #block9 a{padding: 20px; display: block; border: 2px solid var(--hovercolor); text-align: center; font-size: 20px; transition: 0.5s;} #block9 a:hover{background-color: var(--hovercolor); color: white !important;} #block10 .div2,#block10 .div1{grid-column: span 2; } #block10 .div5 img{height: 100%; object-fit: cover;} #block10 .grid{gap: 10px !important;} #block10 .div1{ position: relative; overflow: hidden;} #block10 .left{padding: 40px;} #block10 .bg1{position: absolute; top: 0; left: 0;transform: rotate(270deg); height: 300px; width: 300px; margin-left: -20px; margin-top: -20px;} #block10 .title{font-size: 30px; text-transform: uppercase; text-align: right; margin-bottom: 20px;} #block10 .title span{color: var(--hovercolor);} #block10 .stitle{text-align: right;} #block10 .desc{padding: 20px; background-color: #313131; margin-top: 20px;} #block10 input{background-color: #444444; border-radius: 15px;color: white !important;} #block10 .name{margin-bottom: 15px;} #block10 .stitle2{font-size: 20px; color: var(--hovercolor); margin-bottom: 15px;} #block10 .button{border: 1px solid var(--hovercolor); border-radius: 0 !important; padding: 20px; transition: 0.5s;} #block10 .button:hover{background-color: var(--hovercolor);} #block10 .soc img{width: 35px; height: 35px;} #block10 .soc .flex{gap: 5px;} #block10 .phone{font-size: 25px; color: white; border-bottom: 1px solid white;} #block11 h2{color: var(--hovercolor); position: relative; z-index: 4; background-color:#3A3A3A; display: inline-block; padding: 0 20px;} #block11{ position: relative; z-index: 1;} #block11::after{position: absolute; content: ""; width: 100%; height: 1px; top: 86px; z-index: 2; background-color: var(--hovercolor);} #block11 .item{padding: 30px;background-color: #313131; text-align: center;} #block11 img{margin-bottom: 15px; height: 150px;} #block11 a{color: white ; font-size: 20px !important; } @media (max-width: 1024px) { #block11 img{width: 70px; height: 70px !important;} #block11 h3{font-size: 16px !important;} } #block12 h2{color: var(--hovercolor); position: relative; z-index: 4; background-color:#3A3A3A; display: inline-block; padding: 0 20px;} #block12{ position: relative; z-index: 1;} #block12::after{position: absolute; content: ""; width: 100%; height: 1px; top: 86px; z-index: 2; background-color: var(--hovercolor);} #block12 .title{font-size: 20px; color: var(--hovercolor); text-transform: uppercase; margin-bottom: 15px;} #block12 .sale{font-size: 18px; text-transform: uppercase; color: white; margin-bottom: 15px;} #block12 .items{padding: 20px; background-color: #313131;} #block12 .text{opacity: 0.6;} #block12 .button{background-color: #3A3A3A; border: 1px solid var(--hovercolor); border-radius: 0 !important; margin-top: 10px; transition: 0.5s;} #block12 .button:hover{background-color: var(--hovercolor);} #block12 .conticon{position: relative; padding-left: 40px; padding-top: 40px;} #block12 .bg1{ position: absolute;top: 0;left: 0;transform: rotate(270deg);height: 250px;width: 250px;margin-left: -10px;margin-top: -20px;} #block13{font-size: 18px;} #block13 h2{color: var(--hovercolor); position: relative; z-index: 4; background-color:#3A3A3A; display: inline-block; padding: 0 20px;} #block13{ position: relative; z-index: 1;} #block13::after{position: absolute; content: ""; width: 100%; height: 1px; top: 86px; z-index: 2; background-color: var(--hovercolor);} #block13 .item{padding: 20px; background-color: #313131;} #block13 .title{font-size: 22px; font-weight: 600; margin-bottom: 20px;} #block13 .title span{color: var(--hovercolor);} #block13 .text{opacity: 0.6;} #block14 h2{color: var(--hovercolor); position: relative; z-index: 4; background-color:#3A3A3A; display: inline-block; padding: 0 20px;} #block14{ position: relative; z-index: 1;} #block14::after{position: absolute; content: ""; width: 100%; height: 1px; top: 86px; z-index: 2; background-color: var(--hovercolor);} #block14{font-size: 18px;} #block14 .grid{gap: 0;} #block14 .desc{padding: 25px !important; min-width:100%;} #block14 .text p,#block14 .text ul {opacity: 0.6;} #block14 img{max-height: 380px !important; width: 100%; object-fit: cover;} #block14 h3{opacity: 1 !important; color: var(--hovercolor);} #block14 img{border-radius: 20px;} #block14 .button{margin-top: 30px;} #block14 li::marker{color: var(--hovercolor);} @media (min-width: 992px) { #block14 .grid:nth-child(2n) .img{grid-column: 1;grid-row: 1;} } #block15{background: url('images/bgfon2.jpg' ) no-repeat center center / cover; padding-top: 300px; padding-bottom: 60px;} #block15 .desc{padding: 20px; background-color: #3a3a3abd; backdrop-filter: blur(3px);} #block15 .desc strong{color: var(--hovercolor); font-size: 22px;} #block16 h2,#block16 h1 {color: var(--hovercolor); position: relative; z-index: 4; background-color:#3A3A3A; display: inline-block; padding: 0 20px;} #block16{ position: relative; z-index: 1;} #block16::after{position: absolute; content: ""; width: 100%; height: 1px; top: 86px; z-index: 2; background-color: var(--hovercolor);} #block17 h2{color: var(--hovercolor); position: relative; z-index: 4; background-color:#3A3A3A; display: inline-block; padding: 0 20px;} #block17{ position: relative; z-index: 1;} #block17::after{position: absolute; content: ""; width: 100%; height: 1px; top: 86px; z-index: 2; background-color: var(--hovercolor);} #block17 .items .desc{padding: 20px; background-color: #313131;} #block17 .title{font-size: 20px; color: var(--hovercolor) ; margin-bottom: 15px;} #block17 .owl-dots{display: none;} #block17 .owl-nav{display: flex; gap: 15px; justify-content: center; margin-top: 20px;} #block17 .owl-nav svg{fill: var(--hovercolor); width: 40px; height: 40px;} #block18 {background-color: #c4c4c4; color: black ; font-size: 20px;} #block18 h2{font-size: 32px !important;} #block18 .bg1 img{width: 130px; height: 130px;} #block18 .flex{gap: 10px; flex-wrap: nowrap;} #block18 .soc .flex{flex-wrap: nowrap; gap: 10px;} #block18 .soc img{width: 40px; height: 40px;} #block18 .item{padding: 30px; position: relative; z-index: 1;} #block18 .bg1{position: absolute; bottom: 0; right: 0; transform: rotate(90deg);} #block18 span{color: var(--hovercolor);} #block18 .button{padding: 20px; display: block; border: 2px solid var(--hovercolor); color: var(--hovercolor); text-align: center; font-size: 20px; transition: 0.5s;background-color: transparent;} #block18 .button:hover{background-color: var(--hovercolor); color: white !important;} #block18 .grid{align-items: center;} #block18 .phone{ font-size: 25px;color: black;border-bottom: 1px solid black;} #block18 h2{font-size: 24px !important; margin-bottom: 10px !important;} #block19 h2{color: var(--hovercolor); position: relative; z-index: 4; background-color:#3A3A3A; display: inline-block; padding: 0 20px;} #block19{ position: relative; z-index: 1;} #block19::after{position: absolute; content: ""; width: 100%; height: 1px; top: 86px; z-index: 2; background-color: var(--hovercolor);} #block19 .bg1{ position: absolute;top: 0;left: 0;transform: rotate(270deg);height: 250px;width: 250px;margin-left: -10px;margin-top: -20px;} #block19 .item{padding-top: 40px; padding-left: 40px; position: relative;} #block20{background: url('images/bgfon3.jpg' ) no-repeat center center / cover; padding-top: 300px; padding-bottom: 60px;} #block20 .desc{padding: 20px; background-color: #3a3a3abd; backdrop-filter: blur(3px);} #block20 .desc strong{color: var(--hovercolor); font-size: 22px;} #block21 {padding: 0 !important; color: black !important;} #block21 h2{color: var(--hovercolor); position: relative; z-index: 4; background-color:#c4c4c4; display: inline-block; padding: 0 20px; } #block21{ position: relative; z-index: 1;} #block21::after{position: absolute; content: ""; width: 100%; height: 1px; top: 86px; z-index: 2; background-color: var(--hovercolor);} #block21 img{width: 100%;} #block21 .inner{background-color:#c4c4c4 ; padding-top: 60px;} #block21 .item{position: relative;} #block21 .bg1{position: absolute; bottom: 30%; right: 0; margin-right: -20px; transform: rotate(90deg); height: 200px; width: 200px;} #block21 .title{font-size: 26px; text-transform: uppercase; font-weight: 500;} #block21 .title span{color: var(--hovercolor);} #block21 .desc{padding: 30px;} #block21 .inner2{background-color: #313131; color: white; padding-bottom: 60px;} #block21 .items{padding: 30px; text-align: center;} #block21 .number{font-size: 50px; font-weight: 700;} #block21 .stext{font-size: 18px;} @media (max-width: 1024px) { #block21 .bg1{display: none !important;} } #block22{font-size: 18px;} #block22 h2{color: var(--hovercolor); position: relative; z-index: 4; background-color:#3A3A3A; display: inline-block; padding: 0 20px;} #block22{ position: relative; z-index: 1;} #block22::after{position: absolute; content: ""; width: 100%; height: 1px; top: 86px; z-index: 2; background-color: var(--hovercolor);} #block22 .img>img{width: 100%;} #block22 .title{font-size: 26px; text-transform: uppercase; font-weight: 500;} #block22 .title span{color: var(--hovercolor);} #block22 .bg1{position: absolute; bottom: 0; right: 0; margin-right: -20px; margin-bottom: -20px; transform: rotate(90deg); height: 300px; width: 300px;} #block22 .img{position: relative; padding-right: 40px; padding-bottom: 40px;} #block22 .grid{align-items: center;} #block22 .container{overflow:hidden;} #block23{background: url('images/about4.jpg') no-repeat center center / cover; text-align: center; position: relative; z-index: 1; font-size: 18px;} #block23::after{width: 100%; height: 100%; content: ""; position: absolute; top: 0; left: 0; z-index: 2; background-color: black; opacity: 0.6;} #block23 .container{position: relative; z-index: 3;} #block23 h2{text-transform: uppercase; margin-bottom: 20px !important;} #block23 h2 span{color: var(--hovercolor);} #block23 .flex{justify-content: center; gap: 10px; margin-bottom: 20px; margin-top: 20px;} #block23 .flex img{width: 40px; height: 40px;} #block23 .phone {font-size: 25px; color: white; border-bottom: 1px solid white;} #block23 .button{background-color: #313131; border: 1px solid var(--hovercolor);} #block23 .button:hover{background-color: var(--hovercolor);} #accordion .card{padding: 20px 40px 10px 40px;border: 1px solid var(--hovercolor);margin-bottom: 10px;font-size: 18px; border-radius: 10px;} #accordion .card .title{padding-bottom: 10px;display: flex;align-items: center;justify-content: space-between;gap: 10px;} #accordion .card .title:after {content:"\2014";font-size: 14px;line-height: 32px;border: 1px solid #E4E4E4;border-radius: 50%;width: 35px;min-width: 35px;height: 35px;text-align: center;} #accordion .card .title.collapsed:after {content: "+";font-size: 25px;} #accordion .card a{color: white; } #accordion .card a:hover{color: var(--hovercolor);} #accordion .card a:not(.collapsed){color: var(--hovercolor);} #accordion .text{opacity: 0.6;} .hidden-fields-container{display: none;} #contpage{margin-bottom: 20px;} #contpage .info{padding: 20px;background: #333333;} #contpage p{margin: 0px;} #contpage .item{font-size: 20px;padding-top: 15px;padding-bottom: 15px;} #contpage .item .title{color: #6C6C6C;font-size: 15px;} #contpage .item .phone{font-size: 25px;font-weight: bold; color: var(--hovercolor) !important;} #contpage .item a{color: black;} #contpage .item .mail{color: var(--hovercolor);} #otziv .card{padding: 20px; background-color: #333333; border-radius: 10px;} #otziv .flex{gap: 30px; font-size: 20px; font-weight: 600; margin-bottom: 10px;} footer{background-color:#333333 ; color: white !important;} footer a{color: white;} footer .logo{margin-bottom: 15px; display: inline-block;} footer .title{margin-bottom: 15px;} footer li{list-style: none !important;} footer ul{padding: 0 !important;} footer .center{text-align: center;} footer .widget-title{color: var(--hovercolor);} footer .time{opacity: 0.6;} footer .ad{opacity: 0.6; margin-top: 15px; margin-bottom: 15px;} footer .mail{margin-top: 15px; display: inline-block;} footer .soc{margin-top: 20px; } /* Выбор города в шапке */ #header .city{margin-top: 5px;} #header .city a{color: var(--hovercolor);font-size: 14px;display: inline-flex;align-items: center;gap: 4px;border-bottom: 1px dashed var(--hovercolor);transition: .2s;} #header .city a:hover{color: #fff;border-color: #fff;} #header .city svg{flex-shrink: 0;} #mobile .mobilecity{color: var(--hovercolor);font-size: 12px;display: inline-flex;align-items: center;gap: 3px;border-bottom: 1px dashed var(--hovercolor);transition: .2s;white-space: nowrap;max-width: 90px;overflow: hidden;text-overflow: ellipsis;} #mobile .mobilecity:hover{color: #fff;border-color: #fff;} /* Модалка выбора города */ #CityChoose{background: rgba(0,0,0,.75)!important;} #CityChoose .modal-dialog{background: #2a2a2a;max-width: 640px;margin: 80px auto;border-radius: 16px;padding: 0;height: auto;position: relative;right: auto;box-shadow: 0 20px 60px rgba(0,0,0,.5);} #CityChoose .modal-content{background: transparent;border: none;} #CityChoose .modal-body{padding: 0;} .city-close{position: absolute;top: 18px;right: 20px;z-index: 10;background: none;border: none;color: #777;font-size: 32px;line-height: 1;cursor: pointer;transition: .2s;padding: 0;width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;border-radius: 50%;} .city-close:hover{color: #fff;background: rgba(255,255,255,.1);} .city-modal-inner{padding: 36px 32px 28px;} .city-modal-head{margin-bottom: 20px;} .city-modal-title{font-size: 24px;font-weight: 600;color: #fff;display: flex;align-items: center;gap: 8px;} .city-modal-current{color: #777;font-size: 14px;margin-top: 6px;} .city-modal-current strong{color: var(--hovercolor);} .city-search-wrap{display: flex;align-items: center;gap: 10px;padding: 14px 18px;background: #333;border: 2px solid #555;border-radius: 12px;margin-bottom: 20px;transition: .2s;} .city-search-wrap:focus-within{border-color: var(--hovercolor);box-shadow: 0 0 0 4px rgba(96,150,155,.15);} .city-search-wrap svg{flex-shrink: 0;color: #666;} .city-search-wrap input{border: none;background: none;width: 100%;font-size: 17px;outline: none;color: #fff;} .city-search-wrap input::placeholder{color: #666;} .city-search-clear{background: none;border: none;color: #666;font-size: 24px;cursor: pointer;padding: 0 4px;line-height: 1;transition: .2s;} .city-search-clear:hover{color: #fff;} .city-section-label{color: #666;font-size: 12px;text-transform: uppercase;letter-spacing: .08em;margin-bottom: 12px;font-weight: 500;} .city-popular{display: flex;flex-wrap: wrap;gap: 8px;} .city-tag{display: inline-block;padding: 8px 16px;background: #383838;color: #ccc;border-radius: 8px;font-size: 14px;transition: .2s;border: 1px solid transparent;} .city-tag:hover{background: #444;color: var(--hovercolor);border-color: var(--hovercolor);} .city-tag.current{background: var(--hovercolor);color: #fff;font-weight: 500;} .city-results{max-height: 320px;overflow-y: auto;display: flex;flex-wrap: wrap;} .city-results::-webkit-scrollbar{width: 4px;} .city-results::-webkit-scrollbar-track{background: transparent;} .city-results::-webkit-scrollbar-thumb{background: #555;border-radius: 2px;} .city-result-item{display: block;width: 50%;padding: 10px 14px;color: #ccc;font-size: 15px;transition: .15s;border-radius: 6px;box-sizing: border-box;} .city-result-item:hover{background: #383838;color: var(--hovercolor);} .city-result-item.current{color: var(--hovercolor);font-weight: 600;} .city-no-results{text-align: center;padding: 30px;color: #777;font-size: 15px;} .city-no-results a{color: var(--hovercolor);border-bottom: 1px dashed var(--hovercolor);} .city-modal-footer{margin-top: 24px;padding-top: 16px;border-top: 1px solid #3a3a3a;text-align: center;} .city-modal-footer a{color: var(--hovercolor);font-weight: 500;font-size: 14px;transition: .2s;} .city-modal-footer a:hover{color: #fff;} @media(max-width:1024px){ #CityChoose .modal-dialog{margin: 0;border-radius: 0;height: 100%;max-width: 100%;} .city-modal-inner{padding: 50px 20px 20px;} .city-modal-title{font-size: 20px;} .city-result-item{width: 100%;padding: 10px 12px;} .city-results{max-height: 50vh;} .city-tag{padding: 7px 12px;font-size: 13px;} } /* Карта городов */ #citymap{margin-bottom: 40px;} .citymap-search{display: flex;align-items: center;gap: 10px;padding: 14px 20px;border: 2px solid #555;border-radius: 10px;background: #444;margin-bottom: 20px;transition: .2s;} .citymap-search:focus-within{border-color: var(--hovercolor);box-shadow: 0 0 0 3px rgba(96,150,155,.2);} .citymap-search svg{flex-shrink: 0;color: #999;} .citymap-search input{border: none;background: none;width: 100%;font-size: 16px;outline: none;color: #fff;} .citymap-search input::placeholder{color: #999;} #citySearchClear{background: none;border: none;color: #999;font-size: 24px;cursor: pointer;padding: 0 4px;line-height: 1;} #citySearchClear:hover{color: #fff;} .citymap-count{color: #999;font-size: 14px;margin-bottom: 20px;} #cityNoResults{text-align: center;padding: 40px;color: #999;font-size: 18px;} .citymap-group h3{color: var(--hovercolor);border-bottom: 1px solid #555;padding-bottom: 8px;margin-top: 30px;} .citymap-list ul{list-style: none;padding: 0;gap: 8px;} .citymap-list li a{color: #ccc;padding: 6px 0;display: block;transition: .2s;} .citymap-list li a:hover{color: var(--hovercolor);} .citymap-list li a.current{color: var(--hovercolor);font-weight: 600;} /*--- БЛОГ ---*/ .blog-grid{display: grid;grid-template-columns: repeat(3, 1fr);gap: 24px;} .blog-card{display: flex;flex-direction: column;background: #444;border-radius: 12px;overflow: hidden;transition: .3s;text-decoration: none;color: #fff;} .blog-card:hover{transform: translateY(-4px);box-shadow: 0 12px 32px rgba(0,0,0,.3);border-color: var(--hovercolor);} .blog-card__image{aspect-ratio: 16/10;overflow: hidden;} .blog-card__image img{width: 100%;height: 100%;object-fit: cover;transition: .4s;} .blog-card:hover .blog-card__image img{transform: scale(1.05);} .blog-card__body{padding: 16px 20px 20px;display: flex;flex-direction: column;flex: 1;} .blog-card__meta{display: flex;align-items: center;gap: 12px;font-size: 13px;color: #999;margin-bottom: 8px;} .blog-card__meta svg{vertical-align: -2px;margin-right: 2px;} .blog-card__title{font-size: 17px;font-weight: 600;line-height: 1.3;margin-bottom: 8px;} .blog-card__excerpt{font-size: 14px;color: #bbb;line-height: 1.5;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;} .blog-card__more{margin-top: auto;padding-top: 12px;color: var(--hovercolor);font-size: 14px;font-weight: 500;} /*--- СТАТЬЯ БЛОГА ---*/ .blog-article{} .blog-article h1{font-size: clamp(24px, 4vw, 32px);line-height: 1.3;margin-bottom: 12px;} .blog-article__meta{display: flex;align-items: center;gap: 16px;font-size: 14px;color: #999;margin-bottom: 24px;flex-wrap: wrap;} .blog-article__reading{display: inline-flex;align-items: center;gap: 4px;} .blog-article__cat{color: var(--hovercolor);text-decoration: none;border: 1px solid var(--hovercolor);border-radius: 20px;padding: 2px 12px;font-size: 13px;transition: .2s;} .blog-article__cat:hover{background: var(--hovercolor);color: #fff;} .blog-article__hero{margin-bottom: 24px;border-radius: 12px;overflow: hidden;} .blog-article__hero img{width: 100%;height: auto;display: block;} .blog-article__content{font-size: 16px;line-height: 1.8;color: #ddd;} .blog-article__content h2{font-size: 22px;font-weight: 700;margin: 32px 0 16px;padding-bottom: 8px;border-bottom: 2px solid var(--hovercolor);} .blog-article__content h3{font-size: 18px;font-weight: 600;margin: 24px 0 12px;} .blog-article__content p{margin-bottom: 16px;} .blog-article__content a{color: var(--hovercolor);text-decoration: underline;text-underline-offset: 3px;} .blog-article__content a:hover{text-decoration: none;} .blog-article__content ul,.blog-article__content ol{padding-left: 24px;margin-bottom: 16px;} .blog-article__content li{margin-bottom: 6px;} .blog-article__content img{max-width: 100%;height: auto;border-radius: 8px;margin: 16px 0;} .blog-article__content blockquote{border-left: 3px solid var(--hovercolor);padding: 12px 20px;margin: 20px 0;background: rgba(96,150,155,.1);border-radius: 0 8px 8px 0;font-style: italic;} /*--- ГАЛЕРЕЯ В СТАТЬЕ ---*/ .blog-gallery{display: grid;grid-template-columns: repeat(4, 1fr);gap: 8px;margin-top: 24px;} .blog-gallery__item{border-radius: 8px;overflow: hidden;aspect-ratio: 1;} .blog-gallery__item img{width: 100%;height: 100%;object-fit: cover;transition: .3s;} .blog-gallery__item:hover img{transform: scale(1.05);} /*--- БЛОК СТАТЕЙ НА СТРАНИЦАХ ---*/ #blog-latest{padding: 48px 0;} #blog-latest h2{text-align: center;margin-bottom: 24px;font-size: 26px;} /*--- ПОХОЖИЕ СТАТЬИ ---*/ .blog-related{margin-top: 48px;padding-top: 32px;border-top: 1px solid #555;} .blog-related h2{font-size: 22px;margin-bottom: 20px;} /*--- ПАГИНАЦИЯ ---*/ .nav-links{display: flex;justify-content: center;gap: 8px;margin-top: 32px;} .nav-links a,.nav-links span{display: inline-flex;align-items: center;justify-content: center;min-width: 40px;height: 40px;border-radius: 8px;font-size: 15px;text-decoration: none;transition: .2s;} .nav-links a{background: #444;color: #fff;} .nav-links a:hover{background: var(--hovercolor);} .nav-links .current{background: var(--hovercolor);color: #fff;font-weight: 600;} @media(max-width: 991px){ .blog-grid{grid-template-columns: repeat(2, 1fr);gap: 16px;} .blog-gallery{grid-template-columns: repeat(3, 1fr);} } @media(max-width: 575px){ .blog-grid{grid-template-columns: 1fr;gap: 14px;} .blog-gallery{grid-template-columns: repeat(2, 1fr);} .blog-article__content{font-size: 15px;} }