/*@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&display=swap');*/
@import url("./fonts/stylesheet.css");

:root {
    --index: calc(1vh + 1vw);

    --black: #000000;
    --white: #ffffff;
    --gray: #535353;
    --soft-light-gray: #ECECEC;
    --silver: #D1D1D1;
    --light-gray: #676767;

    --purple: #6147FF;
    --light-purple: #9F8FFF;
    --light-violet: #F3F1FF;
    --dark-purple: #070033;
    --purple-contrast: #4325FB;
    --deep-dark-purple: #04001C;

    --main: var(
    --light-violet);
    --accent: var(
    --light-purple);
    --accent-contrast: var(
    --purple);
    --accent-inactive: var(
    --light-violet);
    --layer-bg: var(
    --light-violet);
    --light-bg: var(
    --white);
    --title-color: var(
    --dark-purple);
    --text-main-color: var(
    --gray);
    --text-main-color-dark: var(
    --black);
    --description-color: var(
    --white);
    --description-color-accent: var(
    --light-purple);
    --nav-color: var(
    --dark-purple);
    --advantage-text-color: var(
    --gray);

    --main-font-size: 24px;
    --main-border-radius: 20px;
    --main-padding: 30px 32px;
    --padding-max: 32px;
    --padding-smaller: 24px 20px;
    --padding-smaller-square: 20px;
    --btn-radius: 42px;
    --section-padding: 80px 0;
    --button-padding: 15px;
    --advantage-radius: var(
    --main-border-radius);
    --advantage-padding: 24px 20px;
}

::placeholder,
button,
input,
textarea {
    font-family: Nunito Sans, sans-serif;
}

*,
:after,
:before {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box
}

:focus-visible,
a,
button,
input,
select,
textarea {
    outline: none;
}

html {
    font-size: var(--font-size, 16px);
    scroll-behavior: smooth
}

body,
html {
    overscroll-behavior: none
}

img:not([src]) {
    visibility: hidden
}
img {
  max-width: 100%;
  width: auto;
}
body {
    background-color: var(--bg, var(--layer-bg));
    font-family: Nunito Sans, sans-serif;
    color: var(--color, var(--text-main-color-dark));
    margin: 0;
    width: 100%
}

p,
h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    padding: 0
}

a {
    text-decoration: none
}

.container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding-inline: 20px;
}

section {
    padding: var(--section-padding);
}

.light-bg {
    background: var(--light-bg)
}

/* Entities  */

.btn {
    display: flex;
    padding: var(--padding, var(--button-padding));
    border: none;
    border-radius: var(--btn-radius, 42px);
    background: var(--bg, var(--accent));
    color: var(--color, var(--description-color));
    font-size: var(--font-size, 16px);
    font-style: normal;
    font-weight: 700;
    justify-content: center;
    transition: 250ms;
}
.btn:hover {
    cursor: pointer;
    scale: .98
}
.btn:disabled {
    opacity: 0.6;
}
.slider-buttons button:active, .btn:active {
    scale: .96
}
.callback-btn {
    --bg: var(--purple-contrast)
}

.primary-btn {
    --font-size: 28px;
    font-weight: 600;
}

.logo {
    display: flex;
    align-items: center;
    max-height: 100px;
    max-width: 200px;
    overflow: hidden;
}
.logo img {height: inherit;width: inherit;}

.logo__text {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size, 20px);
    font-weight: 700;
    line-height: 20px;
    color: var(--color, var(--title-color));
    text-transform: uppercase
}

.logo__subtext {
    font-size: 10px;
    text-transform: none;
    line-height: 4px;
}

.contact__item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color, var(--text-main-color));
}

.header .callback-btn,
.footer .callback-btn {
    text-transform: uppercase
}
.description {
    color: var(--gray);
    font-size: var(--font-size, 20px);
    font-style: normal;
    font-weight: 400
}

.description.mobile span {
    cursor: pointer;
    text-decoration: underline;
}

.description.mobile {
    display: none;
}

.phone.phone-mobile {
    display: none;
}

.option {
    display: flex;
    position: relative;
    border-radius: var(--advantage-radius);
    overflow: hidden;
    padding: var(--advantage-padding);
    background-color: var(--bg, var(--main));
    height: auto;
    color: var(--color, var(--description-color-accent));
    font-size: var(--font-size, 24px);
    font-weight: 500;
    gap: 16px;
    align-items: center;
    justify-content: center;
    line-height: 21px;
}

.option--oldprice {
    --color: var(--text-main-color)
}

.option--active,
.option--oldprice.option--active {
    --bg: var(--accent);
    --color: var(--description-color)
}

.video {
    position: relative;
    border-radius: var(--main-border-radius);
    display: flex;
    align-items: center;
    overflow: hidden;
}
.video::after {
	content: '';
	position: absolute;
	width: 100%;
	height:100%;
	top: 0;
	left: 0;
	background: url('/assets/components/img/advantages/youtube.svg');
	background-size: 15%;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 5;
	opacity: 0.85;
}
.video img {
	width: 100%;
}
.video__city-name {
	position: absolute;
	right: 10px;
	font-size: 36px;
	font-weight: 700;
	top: 43%;
	filter: drop-shadow(1px 1px 1px #fff);
	color:#4212ec;
	font-family: 'Blogger Sans'!important;
	text-transform: uppercase;
	
}
.video:first-child .video__city-name {
	top: 40%;
}
.video.ready::after, .video.ready .video__city-name{
	display: none
}
.video__city-phone {
	display: none;
	justify-content: center;
	position: absolute;
	font-size: 24px;
	font-weight: 700;
	bottom: 10%;
	color: #fff;
	width: 100%;
	filter: drop-shadow(1px 1px 2px #000);
}
.video.ready .video__city-phone {
	display: flex;
}
.video iframe {
    position: absolute;
    width:100%;
    height: 100%;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}

.section__title,
.section__subtitle {
    color: var(--color, var(--title-color));
    font-size: var(--font-size, 46px);
    --font-size: calc(var(--index) * 1.7);
    line-height: 100%
}

input[type="checkbox"], input[type="radio"] {
	cursor: pointer;
    transition: 250ms
}
input[type="input"],
input[type="text"],
input[type="tel"],
textarea,
select {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    resize: none;
    outline: none;
    border: none;
    color: var(--input-text-color);
    border-radius: var(--main-border-radius);
    font-size: var(--font-size, 18px);
    padding: var(--input-padding, 15px 30px);
    background: var(--bg, var(--soft-light-gray));
    transition: 250ms
}
select:hover, input:hover {
    border-color: var(--border-color, var(--accent));
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 3px var(--accent);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 3px var(--accent)
}
select:focus, input:focus {
    border-color: var(--border-color, var(--accent));
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px var(--accent);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px var(--accent)
}
select {
    background-image:
        linear-gradient(135deg, var(--accent) 50%, transparent 50%),
        linear-gradient(45deg, transparent 50%, var(--accent) 50%);
    background-repeat: no-repeat;
    background-position:
        calc(100% - 15px),
        calc(100% - 20px);
    background-size:
        5px 5px,
        5px 5px;
}
/* Slider */
.swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center
}

.swiper-pagination-bullet {
    width: 11px;
    height: 11px;
    line-height: 20px;
    transition: 0ms;
}

.swiper-pagination-bullet-active {
    background: var(--accent);
    width: 17px;
    height: 17px;
}
.swiper-container {
  position: relative;
  display: flex;
  overflow: hidden;
  justify-content: center;
  padding-block-end: 30px;
}
.sliders__swap-buttons {
    display: flex;
    justify-content: space-between
}

.slider-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}
.slider-buttons button:hover {cursor:pointer;scale:.99}
.slider-buttons .slider-button-prev,
.slider-buttons .slider-button-next {
    display: flex;
    gap: 24px;
    color: var(--color, var(--accent-contrast));
    border: none;
    background: transparent;
    font-size: var(--font-size, 24px);
    align-items: center;
    transition: all 250ms ease;
    margin-top: 10px;
}

.slider-buttons .slider-button-prev::before,
.slider-buttons .slider-button-next::after {
    content: '';
    background-image: url('../../img/entities/arrow.png');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    width: 30px;
    height: 30px;
    font-size: 32px;
    font-weight: 700
}

.slider-buttons .slider-button-next::after {
    transform: rotateZ(180deg)
}

.swiper-button-disabled {
    filter: grayscale(1);
}

.buttons-container {
    display: flex
}

/* Tabs  */

.tab__buttons,
.subtab__buttons {
    display: flex;
    gap: 20px;
}

.tab__button,
.subtab__button {
    font-weight: 600;
    width: 48%;
    background: var(--bg, var(--accent-inactive));
    color: var(--color, var(--text-main-color));
    transition: all 200ms ease-in-out
}

.tab__button.active,
.subtab__button.active {
    --bg: var(--accent);
    --color: var(--description-color);
}

.tab__button:hover,
.subtab__button:hover {
    background: var(--accent);
    color: #fff;
    opacity: 0.75;
}

.tab__button:focus,
.subtab__button:focus {
    background: var(--accent);
}

.tab__item,
.subtab__item {
    display: none !important;
}

.tab__item.active,
.subtab__item.active {
    display: flex !important;
    height: 438px;
}

/* header */
.header {
    background-color: var(--light-bg);
    border-bottom: 1px solid var(--silver);
    transition: all 200ms ease;
    position: sticky;
    top: 0;
    z-index: 100
}

.header__inner {
    display: grid;
    grid-template-columns: 15% 62% 20%;
    padding: 20px 0;
    align-items: center;
    justify-content: space-between;
}

.header__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

address.contacts {
    display: flex;
    font-size: var(--font-size, 16px);
    font-style: normal;
    width: 100%;
    gap: 10px;
    justify-content: space-between;
}

address.contacts a {
    color: inherit;
}

.heaader__buttons {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px
}

.header .callback-btn {
    --padding: 10px 50px;
}
.burger__button {
	border: none;
	background: transparent;
	padding: 10px;
}
.burger__button img{
    width: 25px;
    height: 25px;
}

.companies-list a  {
    padding: var(--padding,var(--button-padding));
    border: none;
    border-radius: var(--btn-radius,42px);
    font-weight: 600; 
    width: auto;
    background: var(--bg,var(--accent-inactive));
    color: var(--color,var(--text-main-color));
    transition: all 200ms ease-in-out;
    } 
    
.companies-list a:hover {
    --bg: var(--accent); 
    --color: var(--description-color);
    }

/* mobile */


.mobile-background-nav{position:fixed;top:0;display:flex;left: -100%;width: 60vw;z-index: -1;opacity: 0;height: 100vh;--color: var(--white);transition: all 400ms ease-in-out;}
.mobile-background-nav .hidemnu{content:"";background:rgba(0,0,0,.7);position:fixed;opacity: 0;width:0;top:0;left:0;padding:0;cursor:pointer;height:100vh;transition: width 700ms ease-in-out, opacity 700ms ease}
.mobile-background-nav.active .hidemnu { width: 100vw;opacity: 1}
.mobile-background-nav .mobile-inner {
	overflow: auto;
	position: relative;
	padding-inline-start: 20px;
	padding-block: 15px;
	background: var(--light-bg);
	--color: var(
	--text-color);
	width: 100%;
	overflow-x: hidden;
}
.mobile-inner .logo .accr-text{display: block;margin-block-start: 5px;}
.mobile-background-nav.active {
	left: 0;
	opacity: 1;
	z-index: 100;
}
.mobile-inner .nav {
	flex-direction: column;
	gap: 15px
}
.mobile-inner .nav__link {--font-size: 24px}
.mobile-inner {
	display: flex;
	grid-template-rows: 70px 87% 5%;
	flex-direction: column;
}
.mobile-menu-close {
	position: absolute;
	right: 3%;
	top: 1%;
	font-size: 20px;
	padding: 10px;
	color: var(--white);
	z-index: 2;
}
.working-hours-mobile{
    font-size: 8px;
    display: none;
}
.mobile__menu-head {
	display: flex;
	align-items: center;
}
.menu-list {
	display: flex;
	position: relative;
	margin-block: 30px;
}
.mobile__menu-head::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--accent-contrast);
	width: 100%;
	height: 70px;
	z-index: 1;
}
.mobile__menu-head p {
	margin: 0;
	color: var(--white);
	font-size: 32px;
	z-index: 5
}
.mobile-inner .telephone {
	display: flex;
	flex-direction: column;
	gap:10px;
}
/* Navigation  */
.nav {
    display: flex;
    gap: 2%;
    justify-content: space-between;
    width: 100%;
}

.nav__link {
    color: var(--color, var(--nav-color));
    font-size: var(--font-size, 20px);
    font-weight: 600;
    text-transform: uppercase;
    transition: all 300ms ease-in-out
}
.nav__link:hover {scale:.98}
.phone {
    display: inline-flex;
    color: var(--color, var(--text-main-color-dark));
    gap: 12px;
    font-size: var(--font-size, 24px);
    font-weight: 700;
    align-items: center
}

/* Intro */

.intro__inner {
    display: flex
}
.intro__description {
    display: flex;
    flex-direction: column;
    width: fit-content;
    gap: 36px
}

.intro h1 {
    color: var(--title-color);
    font-size: var(--font-size, calc(var(--index) * 2.6));
}

.intro__options {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(5, 1fr);
    margin-block-start:20px
}
.option--oldprice {
    align-items: baseline
}

.option--oldprice b {
    font-size: 48px;
    font-weight: 700;
    line-height: 48px;
}

.option--oldprice s {
    opacity: 0.8;
    font-size: 16px;
    position: absolute;
    bottom: 15%;
    left: 30%
}
/* Plashki */
.mobile-btn {
            display: flex;
            height: auto;
            background: transparent;
            position: fixed;
            bottom: 15%;
            z-index: 99;
            right: 0;
        }
        
        .btn-box {
            background: white;
            width: 100%;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-direction: column;
            border: solid 1px #9F8FFF;
        }
        
        .btn-box a {
            transition: .3s;
            width: 80px;
            height: auto;
            display: flex;
            juscify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 4px;
            padding: 10px 0;
            border-bottom: solid 1px #9F8FFF;
            
        }
        .btn-box a:nth-last-child(1){
             border-bottom: none;
        }
        
         .btn-box a img {
            margin-top: 8px;
            width: 40px;
            height: 40px;
         }
        
         .btn-box a p{
            font-size: 8px;
            font-size: 14px;
            line-height: 11px;
            letter-spacing: -0.02em;
            text-align: center;
            color: #000000;
            font-weight: 800;

         }
        .btn-box a:hover{
            transition: .3s;
            box-shadow: inset 0px 0px 10px 3px #9f8fff
         }

/* Advantages */

.advantages__top {
    margin-block-end: 60px;
}
.advantages__description--text{
 max-height: 0px;
 overflow: hidden;
 transition: .3s;
}
.advantages__description--text--visivle{
 max-height: 243px;
  transition: .3s;

}

.advantages__top .section__title {
    grid-area: first;
    position: relative;
    display: flex;
    gap: 30px;
    align-items: flex-start
}
.advantages__top .advantages__spoiler{
    align-items: center;
    cursor: pointer;
}
.advantages__spoiler:hover{
    transform: scale(0.99);
    text-shadow: 1px -1px 3px #ffffff;
}
    

.advantages__top .section__title::before {
    content: 'i';
    font-style: italic;
    font-family: monospace;
    background: var(--accent);
    border-radius: var(--main-border-radius);
    color: var(--main);
    padding: 20px
}

.advantages__bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.advantages__bottom-mobile {
    display: none;
    overflow: hidden;
    position: relative;
    --swiper-pagination-bottom: 0px;
    padding-block-end: 30px;
}
.advantage__item {
    display: flex;
    background: var(--bg, var(--light-bg));
    border-radius: var(--main-border-radius);
    padding: var(--advantage-padding);
    height: auto;
    gap: 16px;
    align-items: flex-start
}

.advantage__title {
    color: var(--accent);
    font-size: var(--font-size, 32px);
    font-weight: 700
}

.advantage__text {
    color: var(--advantage-text-color);
    --font-size: 20px;
}
.advantage__text p {font-size: var(--font-size)}
/* services */

.services,
.consultation {
    padding: 0px 0px;
    border-radius: 20px;
    background-color: #f3f1ff;
}
}

.services__item:nth-child(2n) {
    scroll-margin-block-start: 100px;
}
.services__item {
    scroll-margin-block-start: 160px;
    background-color: #fff;
    padding: 30px;
    margin-bottom: 50px;
    border-radius: 32px;
}
.services__item:nth-child(2n) .services__top {
    flex-direction: row-reverse;
}
.services__item .section__title {
    margin-block-end: 20px
}
.services__top {
    display: flex;
    justify-content: space-between;
}

.services__description {
    display: flex;
    flex-direction: column;
    width: 42%;
}
.description-water {
    opacity: 1;
    visibility: visible;
    height: auto;
}
.description-warm {
    opacity: 0;
    visibility: hidden;
    height: 0;
    transition: opacity 250ms ease;
}
.services__item:has(input.water-warm:checked) .description-water {
    opacity: 0;
    height: 0;
    visibility: hidden;
}
.services__item:has(input.water-warm:checked) .description-warm {
    opacity: 1;
    height: auto;
    visibility: visible;
}
.services__options-tabs .description-warm {
	padding: 0;
}
.services__item:has(input.water-warm:checked) .services__options-tabs .description-warm {
    padding: var(--advantage-padding)
}
.services__item:has(input.water-warm:checked) .services__options-tabs .description-water {
    padding: 0;
}
.services__entities {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 22%;
}
.services__entities .option--oldprice b {
    font-size: 60px;
    font-weight: 700
}
.services__entities .option--oldprice.option--active{
	--bg: #6147FF;
}
.services__sliders {
    display: flex;
    flex-direction: column;
    width: 33%;
}

.services .option--oldprice s {
    left: 40%
}

.services .callback-btn {
    display: flex;
    border-radius: var(--advantage-radius);
    padding: var(--advantage-padding);
    --font-size: 24px;
    justify-content: center;
}

.services__bottom {
    display: flex;
    justify-content: space-between;
}

.services__meters-slider {
    width: 60%;
    overflow: hidden;
}
.service__option--red {
    background: #f00;
    margin-top:10px;
    color: var(--white);
}
.meters__item .meters__inner {
    display: flex;
    padding: var(--padding-smaller);
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    background: var(--main);
    border-radius: var(--main-border-radius);
}
input.water-warm {
    width: 100%;
    height: 80px;
    position: relative;
    background: var(--bg, var(--main));
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    border-radius: 120px;
    display: flex;
    padding: 7px;
    font-size: 28px;
    font-weight: 600;
    align-items: center;
}

input.water-warm::before {
    content: 'Вода';
    background: var(--accent);
    color: var(--description-color);
    position: relative;
    display: flex;
    align-items: center;
    width: 50%;
    left: 0%;
    height: 100%;
    padding: 20px;
    border-radius: 120px;
    justify-content: center;
    transition: all 200ms ease;
}

input.water-warm:checked:before {
    content: 'Тепло';
    background: var(--accent);
    color: var(--description-color);
    left: 50%;
}

input.water-warm::after {
    content: 'Тепло';
    color: var(--text-main-color);
    position: absolute;
    display: flex;
    align-items: center;
    width: 50%;
    left: 50%;
    height: 100%;
    padding: 20px;
    border-radius: 120px;
    justify-content: center;
    transition: all 200ms ease
}

input.water-warm:checked:after {
    content: 'Вода';
    background: transparent;
    color: var(--text-main-color);
    left: 0%
}
.meters__item img {
    width: 45%;
}

.meters__description {
    text-align: center;
}

.meters__title {
    color: var(--color, var(--text-main-color-dark));
    font-weight: 700;
    font-size: var(--font-size, var(--main-font-size));
}

.meters__price {
    font-size: var(--font-size, 18px);
}

.meters__price span {
    font-size: var(--font-size, 24px);
    font-weight: 700;
}

.meters__link {
    --bg: transparent;
    border-radius: 16px;
    --color: var(--accent);
    border: 1px solid var(--accent);
    margin-top: 20px;
}

.services__links {
    width: 38%;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.services__link {
    display: flex;
    background: var(--bg, var(--main));
    padding: var(--main-padding);
    border-radius: var(--main-border-radius);
    color: var(--color, var(--title-color));
    font-size: var(--font-size, var(--main-font-size));
    font-weight: 600;
    position: relative;
    justify-content: space-between;
    align-items: center;
}

.services__link::after {
    content: '';
    background-image: url('../../img/entities/arrow.png');
    filter: brightness(0);
    transform: rotateZ(180deg);
    background-size: initial;
    background-position: center left;
    background-repeat: no-repeat;
    display: flex;
    height: 100%;
    width: 40%;
}

.services__slider {
    position: relative;
    overflow-x: clip;
    height: 100%;
    --swiper-pagination-bottom: -30px;
}
.service__includes {
    margin-block: 20px;
	background: var(--layer-bg);
	border-radius: var(--main-border-radius);
	padding: var(--main-border-radius);
}

.service__includes .includes__head {
	line-height: 17px;
}
.includes__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	padding: 0;
	margin-block-start: 25px;
}
.includes__item {
	font-size: 16px;
	line-height: 20px;
	list-style: none;
	position: relative;
	display: flex;
	gap: 20px;
}
.includes__item img {
    display: flex;
    height: 24px;
    aspect-ratio: 1;
    filter: grayscale(1);
}
/* works */
.works__item,
.masters__item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--main-border-radius);
}

.masters__item {
    background: var(--bg, var(--main));
    padding: 0px;
    display:flex!important;
    align-items: center!important;
    justify-content: center!important;
    width:90%;
}

.services__slider {
    margin-top: 20px;
}

.services__slider .works__item img,
.services__slider .masters__item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: var(--main-border-radius);
}
.services__slider .masters__item img {
    width: 100%;
    height: 100%;
}

.master__name {
    color: var(--color, var(--title-color));
    text-align: center;
    font-size: var(--font-size, calc(var(--index) * 0.8));
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.master__spec {
    color: var(--gray, #535353);
    text-align: center;
    font-size: var(--font-size, calc(var(--index) * 0.65));
    font-style: normal;
}

/* How we work scheme  */
.howitworks {
    counter-reset: num 0;
}

.howitworks .section__title {
    text-align: center;
}

.howitworks__inner {
    display: grid;
    position: relative;
    grid-template-areas:
        "A B C"
        "F E D";
    grid-template-columns: repeat(3, 1fr);
    margin-block-start: 20px;
    margin-inline-end: 40px;
}

.howitworks__item::before {
    display: flex;
    counter-increment: num;
    content: counter(num, decimal-leading-zero) " ";
    background: var(--accent);
    color: var(--description-color);
    padding: var(--padding, var(--padding-smaller-square));
    position: relative;
    border-radius: var(--main-border-radius);
    font-size: var(--font-size, 32px);
    z-index: 2;
    width: fit-content;
    align-items: center;
}

.howitworks__item::after{
    content: '';
    display: flex;
    position: absolute;
    width: 100%;
    height: 4px;
    top: 40px;
    z-index: 0;
    background: var(--silver);
}

.howitworks__item {
    position: relative;
    display: flex;
    flex-direction: column;
}

.howitworks__item:nth-child(1) {
    grid-area: A;
}

.howitworks__item:nth-child(2) {
    grid-area: B;
}

.howitworks__item:nth-child(3) {
    grid-area: C;
}

.howitworks__item:nth-child(4) {
    grid-area: D;
}

.howitworks__item:nth-child(5) {
    grid-area: E;
}
.howitworks__item.button {
    grid-area: F;
}
/* .howitworks__item.button::before {
    content: 'Оставить заявку';
    height: fit-content;
    font-weight: 600;
    --font-size: 32px;
    border-radius: var(--main-border-radius);
    padding: var(--padding, var(--button-padding));
    position: relative;
    width: 90%;
    justify-content: center;
} */
.get_callback_me {
    cursor: pointer;
    display: flex;
    counter-increment: num;
    content: counter(num, decimal-leading-zero) " ";
    background: var(--accent);
    color: var(--description-color);
    padding: var(--padding, var(--padding-smaller-square));
    position: absolute;
    border-radius: var(--main-border-radius);
    font-size: var(--font-size, 32px);
    z-index: 2;
    width: calc(100% - 50px);
    align-items: center;
    justify-content: center;
}

.howitworks .howitworks__connector-line {
    position: absolute;
    border-bottom-right-radius: 40px;
    border-top-right-radius: 40px;
    width: 10%;
    top: 40px;
    height: 275px;
    right: -40px;
    border-right: 4px solid var(--silver);
    border-top: 4px solid var(--silver);
    border-bottom: 4px solid var(--silver);
}


.howitworks__description {
    padding: var(--main-padding);
}

/* Map */

.maps .section__title {
    margin-bottom: 40px;
}

.map__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}

.map__top {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr 2fr;
    --padding: 16px 20px;

}

.map__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.maps__button {
    border-radius: var(--main-border-radius);
    justify-content: space-between;
    --font-size: 16px;
    text-transform: none;
}

.maps__button::after {
    content: '';
    background-image: url('../../img/entities/arrow.png');
    filter: brightness(0) invert(1);
    transform: rotateZ(180deg);
    background-size: contain;
    background-position: center left;
    background-repeat: no-repeat;
    display: flex;
    width: 25px;
    height: 25px;
}

.maps__input {
    --bg: var(--light-bg);
}

.city__item {
    display: flex;
    padding: var(--padding, 12px 20px);
    background: var(--bg, var(--light-bg));
    color: var(--color, var(--text-main-color));
    font-size: var(--font-size, 16px);
    border-radius: var(--main-border-radius);
    gap: 16px;
    width: auto;
    transition: all 250ms ease
}

.city__item:hover {
    cursor: pointer;
    --bg: var(--accent);
    --color: var(--description-color);
}

.city__item:hover img {
    transition: all 250ms ease;
    filter: invert(1);
}

.map__frame {
    border-radius: var(--main-border-radius);
    overflow: hidden;
}
.map__frame iframe {height: 100%}
.companies-list {
    display: none;
    flex-wrap: wrap;
    gap: 10px;
    background: var(--bg, var(--light-bg));
    border-radius: var(--main-border-radius);
    padding: var(--padding, var(--main-padding));
    min-width: 100%;
    min-height: auto;

}

    .companies-list {
        height: auto;
        position: relative;
        min-height: 100px;
        max-height: 200px ;
        padding: 20px 10px ;
        border-radius: 12px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .companies-list::-webkit-scrollbar {
          width: 20px;
          height: 90%;
    } 
    .companies-list::-webkit-scrollbar-track {
      background-color: #fff;
      width: 20px;
      height: 90%;
      -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
      -webkit-border-radius: 12px;
    }
    .companies-list::-webkit-scrollbar-thumb {
      background-color: #9F8FFF;
      width: 9px;
      height: 63px;
      border-radius: 12px;
    }
    
.companies-list.active {
    display: flex;
}

.companies-list a.active {
    --bg: var(--accent);
    --color: var(--description-color);
    pointer-events: none;
    cursor: default;
}


.company__table tbody {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
}

.company__caption,
.company__item {
    display: grid;
    width: 100%;
    grid-template-columns: 30% 20% 10% 40%;
    text-align: left;
}

.company__caption .company__text {
    color: var(--text-main-color);
    font-size: var(--font-size, 16px);
    font-weight: 400;
}

.company__item {
    grid-template-columns: 30% 20% 10% 30% 10%;
}

.company__item .company__text {
    color: var(--title-color);
    font-size: var(--font-size, 20px);
    font-weight: 400;
}

.company__button .btn {
    --padding: 8px 10px;
    width: 100%;
}

/* Consultation */
.consultation .container {
    position: relative;
}

.consultation__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 70%;
    gap: 40px;
}

.consultation .consultation__bg {
    position: absolute;
    bottom: -80px;
    right: 0;
    width: 33%;
}

.consultation .primary-btn {
    --padding: 20px 120px;
}
.consultation__phone {
	background: var(--accent-inactive);
	color: var(--text-main-color-dark);
	--padding: 12px 41px;
	flex-direction: column;
}
.howitworks__makeorder-text {
	text-align: center;
	color: var(--gray);
	font-size: 20px;
	font-weight: 600;
}
.howitworks_or {
    padding-right: 50px;
}
.howitworks__item.button {
	gap: 10px
}
.howitworks .consultation__phone {
	background: var(--white);
	border-radius: 20px;
	width: 90%;
}
.phone_services {
    border-radius: var(--advantage-radius);
    padding: 12px 31px;
}
.phone_services .number {
     font-size: 24px !important;
}
.howitworks .consultation__phone .number {gap: 10px;}
.consultation__phone .callus {
	color: var(--gray);
	font-size: 14px;
}
.consultation__phone .number{
	display: flex;
	gap: 2px;
	font-size: clamp(20px, calc(var(--index)*1.2), 32px);
	font-weight: 600;
	align-items: center;
}
/* Arshin */

.arshin__inner {
    position: relative;
    display: grid;
}

.arshin__form {
    background: var(--light-bg);
    width: 70%;
    padding: var(--padding, 80px 140px);
    justify-self: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: var(--main-border-radius);
    gap: 20px;
}

.arshin form {
    display: grid;
    gap: 20px;
    grid-template-areas: "A A B" "C C C";
}

.arshin form input {
    grid-area: A
}

.arshin form select {
    grid-area: B
}

.arshin form button {
    grid-area: C
}

.arshin .section__title {
    margin-bottom: 20px
}

.arshin__bg {
    position: absolute;
    bottom: 0;
    width: 30%;
}

/* Certificates */

.certificates__slider {
    overflow: hidden;
    margin-top: 20px;
}

.certificates__item {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    background: var(--bg, var(--light-bg));
    border-radius: var(--main-border-radius);
    padding: 0px;
    position: relative;
    gap: 0px;
}

.certificates__item img {
    width: 100%;
}

.certificates__description {
    align-self: flex-start;
}

.certificates__name {
    font-size: var(--font-size, 32px);
}

.certificates__date {
    color: var(--light-gray);
    font-size: var(--font-size, 20px);
}

/* Reviews */

.reviews__inner {
    display: grid;
    grid-template-columns: 29% 69%;
    justify-content: space-between;
}

.reviews__description {
    display: flex;
    gap: 32px;
    flex-direction: column;
}

.reviews__slider {
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.review__item {
    display: flex;
    flex-direction: column;
    height: auto;
    background: var(--bg, var(--light-bg));
    padding: var(--padding, var(--main-padding));
    border-radius: var(--main-border-radius);
    justify-content: space-between;
}

.review__title {
    color: var(--color, var(--accent));
    font-size: var(--font-size, 20px)
}

    .review__text {
            max-height: 160px;
            overflow-y: scroll;
            color: var(--color, var(--text-main-color));
            font-size: var(--font-size, 18px);
             overflow-y: scroll;
            overflow-x: hidden;
            height: auto;
            position: relative;
    }
    .review__text::-webkit-scrollbar {
          width: 9px;
          height: 90%;
    } 
    .review__text::-webkit-scrollbar-track {
          background-color: #fff;
          width: 0px;
         /*  height: 90%;
         -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
         -webkit-border-radius: 12px; */
    }
    .review__text::-webkit-scrollbar-thumb {
          background-color: #9F8FFF;
          width: 9px;
          height: 20px;
          border-radius: 12px;
    }



.review__date {
    color: var(--color, var(--text-main-color));
    font-size: var(--font-size, 14px)
}

/* Contacts */

.contacts__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.contacts__description,
.contacts__form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 44px;
}

.contacts address.contacts {
    flex-direction: column;
    --font-size: 20px;
    gap: 20px;
}

.contacts .contact__item,
.contacts .contact__item a {
    display: flex;
    gap: 34px;
}

.contacts .section__subtitle {
    --font-size: 32px;
}

.contacts .section__subtitle span {
    color: var(--accent);
}

.contacts form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contacts form select {
    --bg: var(--main)
}

.conf__text {
    color: var(--text-main-color);
    font-size: 14px;
}

/* footer */

.footer {
    background: var(--bg, var(--deep-dark-purple));
    padding: var(--padding, 60px 0);
    --color: var(--description-color);
}

.footer__inner {
    display: grid;
    grid-template-columns: repeat(4, 22%);
    justify-content: space-between;
}

.footer__nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer address.contacts {
    flex-direction: column;
    justify-content: flex-start;
}

.footer address img,
.footer .phone img {
    transition: all 250ms ease;
    filter: invert(1);
}

.footer__buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.footer .conf {
    padding-block: 60px 0;
    text-align: center;
}
.footer .conf__text {
    color: var(--white);
}
.popup {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    text-align: center;
    width: 100%;
    height: 100%;
    align-items: center;
}
.popup.active{
    opacity: 1;
    visibility: visible;
}
.popup__inner {
	position: relative;
	opacity: 0;
	vertical-align: middle;
	margin: 0 auto;
	text-align: left;
	background: var(--light-bg);
	padding: var(
	--padding-max);
	border-radius: var(
	--main-border-radius);
	min-width: clamp(25vw, calc(var(--index)*20), 50vw);
	transition: all 700ms ease-in-out
}
.popup.active .popup__inner {opacity: 1}
.popup__inner form {
	display: flex;
	flex-direction: column;
	gap: 15px;
	align-items: stretch;
}
.popup__inner input, .popup__inner textarea {
	width: 100%;
	max-width: 100%;
}
.popup .closebtn {
	padding: 10px;
	position: absolute;
	font-weight: 500;
	font-size: var(--font-size, 24px);
	display: block;
	color: var(--text-color);
	right: 10px;
	top: 10px;
	cursor: pointer;
}
.popup .closebtn:hover {
	opacity: .7;
	transform: scale(.9);
}
.popup .closebtn:active {
	transform: scale(.7)
}
body:has(.popup.active) { overflow: hidden}
.hidebg {content:""; background:rgba(0,0,0,.7);position:fixed;opacity: 0;width:0;top:0;left:0;padding:0;cursor:pointer;height:100vh;transition: width 700ms ease-in-out, opacity 700ms ease}
.popup.active .hidebg {width: 100%; opacity: 1}
.popup h3 {margin-block-end:20px}
/* options */
.flex {display: flex !important;}
.flex-col {flex-direction: column;}
.grid {display: grid;}
.grid-2r {grid-template-rows: 1fr 1fr}
.grid-2c {grid-template-columns: 1fr 1fr}
.grid-3c {grid-template-columns: repeat(3, 1fr)}
.space-between {justify-content: space-between}
.content-center {align-content: center}
.items-start {align-items: flex-start}
.items-end {align-items: flex-end}
.items-center {align-items: center}
.items-stretch {align-items: stretch}
.justify-start {justify-content: flex-start}
.justify-end {justify-content: flex-end}
.justify-center {justify-content: center}
.justify-between {justify-content: space-between}
.justify-around {justify-content: space-around}
.justify-evenly {justify-content: space-evenly}
.obj-cover {object-fit: cover}
.gap20 {gap: 20px;}
.w-auto {width: auto}
.w-fit {width: fit-content}
.w-full {width: 100%}
.w-screen {width: 100vw}
.h-auto {height: auto}
.h-fit {height: fit-content}
.h-full {height: 100%}
.h-screen {height: 100vh}
.for-mobile, .header__buttons-mobile {display: none;}
.thankyoupage {
    display: flex;
    gap: 16px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 75%;
    position: absolute;
    width: 100%;
    padding-inline: 40px;
}
.thankyoutitle {
    color: #000;
    font-size: 72px;
    font-weight: 600;
    text-align: center;
}
.thankyoutext {
    color: var(--gray);
    font-size: 32px;
    font-weight: 600;
    text-align: center;
}
.thankyousubtext {
    color: #B4B4B4;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
}

.intro__options .intro_price {
    height: 120px;
}

.intro_price > div > div >img{
    display:block!important;
}
.intro_price > div > div{
    line-height:17px;
}

.intro_price {
    display: flex;
    flex-direction: column;
    height: 140px;
    padding: 16px 0 14px 45px;
    gap: 10px;
}

.intro_price div:first-child {
    display: flex;
    font-size: 20px;
    width: 200px;
}

.intro_price div:nth-child(2) {
    width: 172px;
    height: 41px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.intro_price div:nth-child(2) div {
    width: 172px;
    height: 41px;
    display: flex;
    align-items: flex-end;
    color: #DBFF00;
    font-size: 24px;
    gap: 10px;
    justify-content: flex-start;
    line-height: 48px;                                        
}


.consultation_or-text{
    padding-top:22px;
    text-align: center;
    color: var(--gray);
    font-size: 20px;
    font-weight: 600;
}

.container-breadcrumb {
    margin: 20px auto;
    width: 85%;
}

.breadcrumb {
    padding: 0;
    margin-bottom: 0;
    list-style: none;
    background-color: transparent;
    border-radius: 0;
    font-size: .93em;
}

.breadcrumb>li {
    display: inline-block;
}

.breadcrumb>li a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.breadcrumb>li+li:before {
    padding: 0 5px;
    color: #ccc;
    content: "/\00a0";
}

.breadcrumb>.active {
    color: #777;
}

.policy {
    display: block;
    height: 500px;
    width: 500px;
    overflow-y: scroll;
}
    .grecaptcha-badge {
        visibility: hidden; 
    }
    
    
    
.checked_date_count {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 80px;
}
.checked_date_count span {
    color: #9F8FFF;
}
.checked_date_count__info {
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.subtitle_min {
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    }
.checked_date_count_type_count {
    background-color: #fff;
    width: 100%;
}
.checked_date_count_install_date {
    display: flex;
    justify-content: space-between;
}
.checked_year {
    width: 49%;
    background-color: #fff;
}
.checked_month {
    width: 49%;
    background-color: #fff;
}
.checked_date_instal_next_count {
}
.checked_date_count__img {
    width: 40%;
    font-size: 32px;
    font-weight: 600;
}