body {font-family: 'Roboto', sans-serif;color:#555555;font-size:1.2rem;} .container-bottom-a {grid-column: full-start/full-end!important;} .breadcrumb {background-color: #00000000; font-size:15px} .icon-location:before { padding-right: 10px;} h1 {font-size: 2em; font-weight: 700; line-height: 1.3em; color: #077632; margin: 20px 15px 35px 0; text-transform: uppercase;text-align:center;} h2, .h2 {font-size: 1.3em; line-height: 1.15em; border-left: 6px solid #86b603; margin: 30px; padding-left: 20px;font-weight: 600;} h3, .h3 {font-size: 1.7rem;font-weight: 600;margin-bottom: 15px;} .primary {color: #077632;} /*gren*/ .secondary {color: #C6ED06;} /*light green*/ .ternary {color: #86b603;} .dark-red{color:#D12023;} /*krasnyi*/ .grand {font-size: 1.3rem; text-transform: uppercase;font-weight: 600; text-align:center; margin: 30px 15px;} .quote{display: block; border-top: 8px solid #077632; padding: 20px 40px; margin: 40px auto 30px; width: 80%; color: #077632; border-radius: 6px; font-size: 20px; line-height: 32px; box-shadow: 0 10px 10px -10px #8c8b8b inset; background: #cecece1a;} ul {padding-left: 4rem;} li::marker{color:#C6ED06;} a:not([class]) {text-decoration: none;color:#077632;} .btn-trans{border:2px solid #C6ED06; color: #C6ED06;padding:10px 25px;border-radius:10px; cursor: pointer;margin-top:30px;transition: all 0.4s;} .btn-trans:hover{border:2px solid #fff; color: #fff} .btn-black{border:2px solid #555; color: #555;padding:10px 25px;border-radius:10px; cursor: pointer;margin: 30px 15px;transition: all 0.4s;} .btn-black:hover{border:2px solid #077632; color: #077632} .btn-gren {background: linear-gradient(to bottom, #009846, #02AD52, #006E36); color: #ffffff; text-decoration: none; padding: 10px 50px; border-radius: 5px; display: inline-block; text-align: center; align-self: center; transition: transform 0.2s, filter 0.2s; cursor: pointer; border: none;} .btn-gren:hover {filter: brightness(1.1);color: #ffffff;} .btn-gren:active {transform: scale(0.95);} .container-header{background-color:#fff;background-image:none;border-top: 6px solid #077632;box-shadow: 0 5px 5px #ddd;} .container-header .mod-menu {color: inherit; align-content: space-around;} /*zayavka*/ .zayavka{margin:20px 0;padding: 0 15px; border: 2px solid #077632;border-radius: 12px;} #mod-custom120,#mod-custom125{display: flex;flex-direction:row;align-items: center; gap:30px;justify-content: space-between;} .z-title{text-transform:uppercase;font-size:26px;font-weight:600} .z-text{} .zayavka .btn-trans{ margin-top:0;} .mob-tel {display: inline-block; padding-left: 20px; padding-bottom: 20px; font-size: 15px; font-weight: normal;} .mob-tel .btn-trans{margin-top:20px;} .contact-form .control-group #jform_captcha-lbl, .contact-form #jform_captcha { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important;} /*topbar*/ .container-header .grid-child.topbar{flex-wrap: wrap;justify-content: space-between;color:#555555;font-size: 20px;padding: .2em; align-items: center;} .container-topbar{background-color:#EBECEC;border-bottom: 2px solid #D9DADA} .container-topbar .tel-topbar a:hover{color:#077632;} /*navbar*/ .nav > li > a {display: block; color: #555; text-transform: uppercase; font-size: 18px; font-weight: 600; padding: 25px 20px; transition: all 0.5s ease;} .metismenu,.metismenu .metismenu-item>button { text-transform: uppercase; font-weight: 600; transition: all 0.5s ease;} .navbar .metismenu > li.current.active > a { color: #077632; border-bottom: 5px solid #077632;transition: all 0.5s ease;} .collapse.show .metismenu-item.active.deeper.parent button,.collapse.show button.metismenu-item.deeper.parent,.metismenu.mod-menu .metismenu-item.active>a,.metismenu.mod-menu .metismenu-item.current>a {color: #077632;} /*=*/ .container-header .navbar-toggler{color:#555;font-size: 1.8rem;} /*menu-mobil*/ .offcanvas.collapse.show{padding-top:30px;background:#077632;color:#fff;overflow-x: hidden;} .offcanvas.collapse.show li.current.active > a,.offcanvas.collapse .mm-collapse > li.current.active > a,.offcanvas.collapse.show li.current > a{color:#86b603;text-decoration:none;} .offcanvas.collapse .mm-collapse,.container-header .metismenu>li.level-1>ul{border-radius:6px; max-width:220px;} .offcanvas.collapse .mm-collapse li a,.container-header .metismenu>li.level-1>ul li a {text-transform:initial;font-weight:500; white-space: normal;} .collapse.show .metismenu-item.active.deeper.parent button,.collapse.show button.metismenu-item.deeper.parent {color: #86b603} .metismenu > li.current > a, .metismenu > .current > a:hover, .metismenu > .current > a:focus { color: #077632; border-bottom: 5px solid #077632;} /*sidebar*/ .grid-child.container-sidebar-right .sidebar-right{margin-top: 100px; min-height: 20px; padding: 30px; margin-bottom: 20px; border: 2px solid #077632; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; position: sticky; top: 20px;} .sidebar-right .mod-list > li > a {padding: 8px 0;border-bottom: 2px dotted #a9a9a9;} .sidebar-right .mod-list > li > a:hover,.sidebar-right .mod-list > .current > a {border-bottom: 2px dotted #077632; color: #077632;text-decoration: none;transition: all 0.5s ease;} .sidebar-title {text-transform: uppercase;color: #077632;font-size: 26px;font-weight: 700;padding-bottom: 15px;padding-left: 15px;} /*languages*/ .mod-languages .btn-secondary{ background:#fff0;border:none;padding:0} .dropdown-menu {--dropdown-min-width: 5rem;} /*gl-1*/ .container-banner .banner-overlay{height:100%} .container-banner .banner-overlay .overlay{padding: 80px 20px 60px;} .overlay .container{padding:0} .gl h1 {font-size:107px;color:#C6ED06; line-height: 1; padding-bottom: 55px;} .gl h1 span{font-size:42px;color:#fff} .gl h2 {font-size:42px; color: #FECC00;padding: 60px 15px 30px;border-left: none; margin: 0; font-weight: 700;} .advant {list-style: none; padding: 0; margin: 20px 0; display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between;} .advant li { display: flex; align-items: flex-start; flex: 1 1 200px; font-size: 16px; color: #ffffff; line-height: 1.4; text-align: left;} .advant li::before { content: ""; display: inline-block; width: 40px; height: 40px; margin-right: 15px; background-size: contain; background-repeat: no-repeat; flex-shrink: 0;} .advant li:nth-child(1)::before {background-image: url('/images/headers/icon-1.png');} .advant li:nth-child(2)::before {background-image: url('/images/headers/icon-2.png');} .advant li:nth-child(3)::before {background-image: url('/images/headers/icon-3.png');} .advant li:nth-child(4)::before {background-image: url('/images/headers/icon-4.png');} .advant li:nth-child(5)::before {background-image: url('/images/headers/icon-5.png');} .advant li:nth-child(6)::before {background-image: url('/images/headers/icon-6.png');} /*bl-2*/ .grey{background-image:url(/images/headers/f1.png);padding: 60px 15px;} .content-row {display: flex; flex-wrap: wrap; gap: 40px; align-items: center;} .image-block, .text-block {flex: 1 1 400px; max-width: 100%;text-align: center;} .image-block img {width: 100%; height: auto; display: block; object-fit: cover;} .text-content {position: relative;display: flex;flex-direction: column; text-align:left; padding: 40px;z-index: 2;} .text-content::before {content: "";position: absolute;top: 0; left: 0; right: 0; bottom: 0; background-image: url(/images/utepleniesten-f2.png); background-repeat: no-repeat;background-position: center;background-size: contain;z-index: 1;} /*bl-3*/ .services-container{text-align:center;margin-bottom:40px} .services-container h3.title {font-size:40px;font-weight:400;padding-bottom:20px} .services-container p {font-size:1.5rem;max-width:1200px;margin:0 auto} .services-flex {display: flex;flex-wrap: wrap;gap: 40px;justify-content: center;} .service-card {position: relative; width:400px; background: linear-gradient(to bottom, #009846, #02AD52, #006E36); border-radius: 15px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; overflow: hidden; transition: background-color 0.3s ease;} .slogan{font-size:1.7rem;margin:40px 15px;font-weight: 600;} .service-card a{text-shadow: 0 2px 4px #333;transition: all 0.5s ease;} /*bl-4*/ .specialists-section .container{display: flex;flex-direction: column;align-items: center;} .specialists-section .services-flex {display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 40px; width: 100%; margin-bottom: 50px;} .specialists-section .title,.econom-section .title{font-size:2.5rem;line-height:1.5;text-align:center} .service-item {display: flex; flex-direction: row; align-items: flex-start; gap: 15px;} .service-text {font-size: 1.5rem; line-height: 1.3; font-weight: 500; text-transform: uppercase;} .service-icon {font-size: 40px; margin-bottom: 15px;z-index: 2;} .service-card h3 {z-index: 2; font-size: 1.5rem;line-height: 1.5;} .service-card h3 a {text-decoration: none; color: #fff;} .hover-img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover; opacity: 0; transition: opacity 0.5s ease; z-index: 1;} .service-card:hover {background-color: transparent;} .service-card:hover .hover-img {opacity: 1;} .service-card:hover h3 a, .service-card:hover .service-icon {color: #fff;} /*meta*/ .meta-section{background: linear-gradient(to bottom, #009846, #02AD52, #006E36);color:#fff; padding:60px 15px;text-align:center} .meta-section .meta-item .service-text{font-size:66px;color:#C6ED06;} .meta-section .services-flex{justify-content:space-around} .meta-item .service-icon {text-align:center} .meta-item ul{font-size:28px;max-width:600px;font-weight:500;text-align:left} .meta-section p {font-size:26px; } .meta-section .btn-trans{margin:} /*econom*/ .econom-section{text-align:center;} .econom-section .econom-flex {display:flex;flex-direction: row;justify-content: center;gap:40px;} .econom-item{flex: 1 1 400px; } .econom-item.block-right img{margin:60px 0 60px;} .econom-text{font-size: 30px;font-weight:500;} .econom-item.block-right{position:relative; z-index:2;} .econom-item.block-right::before{content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;background-image: url(/images/utepleniesten-f6.png);background-repeat: no-repeat;background-position: center;background-size: contain;opacity: 0.8;z-index: 1;} .block-right .econom-text{position:relative; z-index:2;} /*news*/ .vstup{display: block ;text-align:center;max-width:900px;margin:30px auto;font-weight:800;border-bottom:2px solid #077632;border-top:2px solid #077632;padding:20px 15px} .blog-items .item-content .vstup{text-align:left; max-width:unset;margin: unset;font-weight: unset; border-bottom: none;border-top: none;padding: 20px 15px;} /*video*/ .itemid-108 h1,.itemid-114 h1,.itemid-112 h1,.itemid-106 h1,.itemid-150 h1 {text-align:center;border-bottom:2px dotted #ccc;padding-bottom: 15px;} .video-container{text-align:center} .video-container h3{margin-bottom:35px;} .video-content{text-align:center} .video-title {border-bottom:2px dotted #ccc;padding:20px 15px;margin:25px auto;max-width:800px;} .video-container.tiktok{display: flex;flex-wrap: wrap;justify-content: center;} .itemid-108 h3,.itemid-114 h3 {text-align:center;margin:35px 15px} /*foto*/ .pg-categories-items-box{justify-content:center;margin-top:50px; gap: 40px;} .pg-category-desc{text-align:center;font-weight:700;font-size:22px;margin-bottom:20px} .pg-categories-desc {display:none} /*contact*/ .contact-section{padding: 60px 15px 40px;text-align: center;} .contact-section .title {font-size:38px} .contact-section .text-block p{text-align:left} /*modal .modal-body,.contentpane.component{padding:0 1rem} .com-contact__container h2, .com-contact.contact h2,.com-contact__form.contact-form legend,#jform_spacer-lbl {display:none} h5.modal-title {color:#fff} .modal-header{border-bottom:none} .com-contact.contact .page-header h1{margin-top:0;}*/ /*footer*/ .footer .grid-child{justify-content: space-evenly; padding: 1.5rem .5em;} .container-footer.footer{background: linear-gradient(to bottom, #009846, #02AD52, #006E36);color:#fff;} .footer {background:none; margin-top: 0;} #mod-custom118,#mod-custom124 {display:flex;align-items: center;font-size: 15px;gap: 40px;} .footer-img {min-width:200px} .footer-text {text-align: center;} /*debug*/ .debug-block{background-color:#32353D;text-align:center;color:#838383;padding:10px 15px;font-size:14px} @media (max-width: 1000px) { .content-row,.econom-section .econom-flex {flex-direction: column; /* Стек блоков в колонку */} .image-block {order: 0; /* Можно поменять местами картинку и текст на мобиле */} } @media screen and (max-width: 1400px){ .gl h1 {font-size:80px;} .gl h1 span,.gl h2{font-size:38px;} } @media screen and (max-width: 1200px){ .gl h1 {font-size:70px;} .gl h1 span,.gl h2{font-size:32px;} } @media screen and (min-width: 991px){ .mob-tel {display: none;} } @media screen and (max-width: 991px){ .container-sidebar-right{display:none} .offcanvas {--offcanvas-width: 250px;} .gl h1{padding-bottom: 0;} h1 {font-size: 1.5em;} h2 {font-size: 1.2em;} .content-row{gap:0} .contact-section .content-row {gap: 40px;} .text-content{padding:20px 0} .quote{font-size: 18px;width: 90%;} } @media (max-width: 768px) { .grey,.meta-section,.contact-section {padding: 40px 15px;} .specialists-section .services-flex {flex-direction: column; align-items: flex-start; padding-left: 10%;width: auto;} .specialists-section .title {font-size: 28px;} .tel-topbar{display:none} #mod-custom120{flex-direction:column;text-align:center} .econom-item.block-right img {width:70%} .econom-section .econom-flex{gap:0} .econom-item {flex: 1;} } @media screen and (max-width: 600px){ .gl h1 {font-size: 60px;} .gl h1 span{font-size:28px;} .services-container p {font-size: 1.3rem;} .services-flex {gap: 10px;} .slogan,.video-title {font-size: 1.5rem;} .meta-section .meta-item .service-text {font-size: 56px;} .meta-section p {font-size:22px} .meta-item ul,.econom-text {font-size: 24px;} .econom-item.block-right img {width:60%} .image-block, .text-block {flex: 1;} .contact-section .btn-black{margin: 20px 15px;} #mod-custom118{flex-wrap:wrap;justify-content:center;} } @media screen and (max-width: 480px){ .gl h1 {font-size: 50px;} h1 {font-size: 1.3em;} h2 {font-size: 1.1em;} .text-content{padding:20px 0} .service-text {font-size: 1.3rem;} .meta-section p {font-size:20px} .meta-item ul, .econom-text {font-size: 22px;} .specialists-section .title, .econom-section .title {font-size: 2rem;} .contact-section {padding: 40px 15px 20px;} } /*anim*/ h1 {animation: fadeIn; /* referring directly to the animation's @keyframe declaration */ animation-duration: 2s; /* don't forget to set a duration! */ } @keyframes { from { opacity: 0; transform: translate3d(-100%,0,0) } to { opacity: 1; transform: none } } .fadeInRight, .fadeInLeft {transform: translateY(5%);transition: all 2s;opacity: 0;} .active.fadeInRight, .active.fadeInLeft {opacity: 1;transform: translateY(0);}