@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=PT+Sans:wght@400;700&display=swap');
:root {
    --dark-side:#1B1B1B;
	--txt-color: #333; 
	--orange-color: #f98809;
	--alt-color: #3F4651;
	--blue-color: #3D68FE;
	--my-blue-color:#428BEA;
	--white-color: #ffffff;
	--gray-color: #F5F7F7;
	--gray-b-color:#808080;
 	 --gray-dark: #babbc1;
 	 --red: #FF0033;
	}
  
body { font-family: 'Montserrat', sans-serif; margin: 0; padding: 0; color:var(--dark-side); font-size: 16px;}
 h1, h2, h3 {font-family: 'Montserrat', sans-serif; font-weight: 700; color:var(--dark-side);}
 .gray {background: #F5F7F7;}
a {color: var(--gray-color); border-bottom: 1px solid var(--my-blue-color);}
a:hover {color: var(--blue-color); border-bottom: 1px solid transparent;}
section h2::after {display: block; content: ''; width:128px; height: 4px; border-radius: 2px; background: var(--my-blue-color); margin-bottom: .5em;}
.btn {background:var(--my-blue-color); padding: .5em 2em;}
.btn:hover {background: var(--blue-color);}
span {color: var(--my-blue-color);}
.red {color:var(--red);}
.sity_tel {display: block;}
section h2 {text-align: left;}
.header {background: #F6F6F6;}
header .wr {padding: .5em 0; display: flex; flex-direction: row; align-items: center;justify-content: space-between;}
.header .logo {width: 190px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap:.5em;}
.logotipe {display: flex; flex-direction: column; align-items: center; justify-content: space-between;}
.header .logo_name {font-family: 'Montserrat', Helvetica, Arial, sans-serif;font-size: 1em; margin-bottom: .1em;}
.header .description {font-family: 'Montserrat', Helvetica, Arial, sans-serif;font-size: .4em; color:var(--gray-b-color); font-weight: normal;}
.header .contact {display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap:4em;}
.header .adress p{font-family: 'Montserrat', Helvetica, Arial, sans-serif;color:var(--gray-b-color); font-weight: normal; font-size: .8em; line-height: 1.4;}
.header .adress img {float: left; width: 32px; margin-right: .5em;}
.header p {line-height: 1; margin: 0; padding: 0;}
.header .header_city {font-size: 0.8em; color: var(--gray-color); margin-bottom: .5em;}
.header .phone {display: flex; flex-direction: column; padding: .5em 0;}
.header .phone a {font-size: 1.2em; font-weight: 700; color:var(--my-blue-color); text-decoration: none; border-bottom: none; line-height: 1.1; margin-bottom: 0em;}
.header .mail a {font-size: 0.8em; color: color:var(--dark-side); border-bottom: 1px solid var(--my-blue-color); }
.header .mail a:hover {color: var(--my-blue-color);}
.header .hours {color:var(--gray-b-color); font-weight: normal; font-size: .8em; margin-bottom: .3em;}
main {padding-top: 40px;}
#hero {background: url(../img/bg.webp) no-repeat center center; background-size: cover; color: var(--white-color);  position: relative;}
#hero .wr {padding: 5rem 0; display: flex; flex-direction: row; align-items: center; justify-content: center; z-index: 2; position: relative;}
#hero .box:first-child {width: 65%;}
#hero .box:last-child {width: 30%;}
#hero h1 {font-size: 3em; color: var(--white-color); text-align: left; padding-bottom: 3rem; line-height: 1.2;}
#hero p {font-size: 1.6em; margin: 0 auto; line-height: 1.3; text-align: left; padding-bottom: 4rem;}
#hero ul {padding-bottom: 3rem;}
#hero img {width: 16px; float: left; margin-right: .5em;}
#hero span {color: var(--red);}
#hero .btn {background: var(--my-blue-color); font-size: 1.4em; padding: .5em 2em;}
#triggers .box {padding: 1em; text-align: center;}
#triggers img {width: 64px; margin: 1em auto;}
.price tr, .price td, .price tbody, .price th, .price tr:hover {border: none; background: transparent;}
.price td {padding: .8em  0; text-align: left;}
.price td:last-child {font-weight: 700;}
.price tr, .price tr:hover {border-bottom: 1px solid var(--gray-b-color);}
#about .about_img {width: 90%; margin: 0 auto; z-index: 1; border-radius: 12px;}
#about p {font-size: 1em;}
#about .btn {padding: 1em 4em;}
#about .box {position: relative;}
#best .box {padding: 1.5em; display: flex; flex-direction: column; align-items: start; }
#case img {border-radius: 1em;}

.problems .block {border-radius: 5px; padding: 2rem; box-shadow: 0px 0px 50px 0px rgba(34, 60, 80, 0.3); margin-bottom: 1rem;}
.problems h3 {color: var(--my-blue-color); margin-bottom: .2em;}
.problems .three {align-items: center; margin-bottom: 2em;}
.cta_problems {text-align: center; }
.cta_problems h2 {text-align: center; color: var(--my-blue-color);}
.cta_problems h2::after {display: none;}
.cta_problems p {font-size: 1.2em;}
.cta_problems .btn {padding: 1em 3em;}
.otzyvy {background:#E1E5E7;}
.otzyvy img {border-radius: 5px; }
.otzyvy a {border-bottom: none;}
.otzyvy .five {overflow-x: auto;  overflow-y: hidden; gap: 16px; padding-bottom: 16px; grid-template-columns: repeat(22, 1fr);  scrollbar-color: var(--my-blue-color) #ecf0f1; scrollbar-width: thin; }
.otzyvy .five::-webkit-scrollbar-track {background:transparent;}
.otzyvy .five a {width: 280px;}


#utp a {color:var(--my-blue-color); text-decoration: none; border-bottom: none;}
#utp p img {width: 1.5em; float: left; margin-right: .5em;}
#photos {padding: 1rem 0; background: #F6F6F6;}
#photos img {border-radius: 12px;}
#taxi {background: #F6F6F6; padding-bottom: 1rem;}
#taxi p {font-size: 1em;}
#taxi b {padding-top: 2em;}
.box  p {font-size: .9em; line-height: 1.4;}
.box .title {font-weight: 700; margin-bottom: .7em; font-family: 'Fira Sans', sans-serif; line-height: 1.3; font-size: 1.2em;}
footer {background: var(--white-color); color: var(--dark-side); padding-top: 2rem;}
footer .wr {border-top: 1px solid var(--gray-dark);}
footer .header_city {font-size: 1.2em; font-weight: 700; margin: 1em 0;  color: var(--dark-side);}
footer .copy {padding: 1em 0; border-top: 1px solid var(--gray-dark); font-size: .9em;}
footer .box p {line-height: 1.8;  color: var(--dark-side);}
footer .box a, footer .box a:hover {color: var(--dark-side); border-bottom: none; text-decoration: none;}
.shadow {position: absolute; top:0; left:0; right:0; bottom:0; background: rgba(0, 0, 0, 0.5); z-index: 1;}
.accordion label:hover { background: var(--gray-color); transition: .5s;}
.accordion input:checked + label { background:var(--gray-color); transition: .5s;}
.accordion label::before {color: var(--my-blue-color);}
.mob_phone {display: none;}

.b-popup{ width:100%; min-height:100%;background-color: rgba(0,0,0,0.5);overflow:hidden; position:fixed;top:0px; z-index: 100;}
.b-popup .b-popup-content{margin:40px auto 0px auto; width:50%; max-width: 420px;; height: 440px; position: relative;padding:24px;background-color: #fff;color:#000;border-radius:5px;box-shadow: 0px 0px 10px #000;}
.close {position:absolute; top:10px; right:16px; color:#1B1B1B; text-decoration: none; border-bottom: none;}
.close:hover {color:#000; border-bottom: none;}
.b-popup h3 {margin-bottom: 1em; font-family: 'Montserrat',Helvetica,Arial,sans-serif;}
.form__input{clear:both; width: 100%; padding: 8px 16px; box-sizing: border-box; border-radius: 2px; border:1px solid #6F7781;}
.form__input:focus, .form__input:active{border:1px solid var(--my-blue-color)!important;}
.form__label{clear:both; width: 100%; padding: 4px 0; box-sizing: border-box; display: block; margin-bottom: 0.8em; color:#6F7781; font-size:0.8em}
.form textarea {clear:both; width: 100%; padding: 6px; box-sizing: border-box; display: block; margin-bottom: 0.1em; color:#6F7781;}
.form textarea:focus, form textarea:active{border:1px solid var(--my-blue-color)!important;}
.b-popup .btn {margin: 5px auto 15px; display: inline-block; background: var(--my-blue-color); color:#fff; padding: 10px 24px; text-align: center; border-radius: 5px; border:none; cursor: pointer; font-size: 1.2em; line-height: 1.5em; text-decoration: none;}
.b-popup .btn:hover {background:#4366F3;}





@media screen and (max-width:680px){
body {font-size:14px;}
main {padding-top: 40px;}
#hero .wr {padding: 3rem 0;}
.header .logo {width:160px;}
.header .logo img {max-width: 48px;}
header .logo {font-size: 1.5em;}
.header .contact  {display: none;}
.header .mail a {display: none;}
.header .phone a {font-size: 1em;}
.header .phone {display: none;}
.header .adress {display: none;}
.sity_tel {display: none;}
#hero .wr {padding: 6rem 0;}
#hero h1 {font-size: 1.5em;}
#hero p {font-size: 1.3em; width: 95%;}
#hero .btn {}
#about .kotel {width: 120px;}
#about .about_img {width: 100%;}
section h2 {font-size: 1.4em;}
.box p {font-size: 1em;}
.price td {font-size: 1em;}
.price td:first-child {padding-right: .5em;}
.price td:last-child {width:30%; font-weight: normal; text-align: right;}
#about .about_img {margin-bottom: 1em;}
#about .btn {display: block; max-width: 100%; min-width: 320px;}
#plus .four {overflow-x: auto; overflow-y: hidden; grid-template-columns: repeat(4, 1fr);}
#plus .box {width: 240px;}
#best .five {overflow-x: auto; overflow-y: hidden; grid-template-columns: repeat(5, 1fr);}
#best .box {width: 240px;}
#case .five {overflow-x: auto; overflow-y: hidden; grid-template-columns: repeat(10, 1fr);}
#case .box {width: 240px;}
#otzyvy .two {overflow-x: auto; overflow-y: hidden; grid-template-columns: repeat(4, 1fr);}
#otzyvy .box {width: 320px; flex-direction: column; gap:1em; padding: 1em;}
#triggers .five {overflow-x: auto; overflow-y: hidden; grid-template-columns: repeat(5, 1fr);}
#triggers .box {width: 240px;}
#otzyvy .persone {width: 100%;}
.accordion label {line-height: 1.2; padding: 1rem;}
#photos img:last-child {display: none;}
#photos .five {overflow-x: auto; overflow-y: hidden; grid-template-columns: repeat(5, 1fr);}
#photos img {max-width: 320px;}
.mob_phone {display: block;position: fixed; bottom:10px; left:0; right:0; height: 60px; z-index: 100;}
.mob_phone .wr {display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap:1em;}
.mob_phone .phone {background: var(--my-blue-color); display: block; border-bottom: none; width: 86%;text-align: center; font-size: 1.2em; padding: .8em; border-radius: 8px;}
.mob_phone .phone:hover {color:var(--white-color);}
.mob_phone .max_go {color: var(--my-blue-color); border-bottom: none; display: block; text-align: center; width: 52px; font-size: 3.5em; line-height: 1em; text-decoration: none;}
.b-popup .b-popup-content{ margin:40px auto 0px auto;width:100%; max-width:100%;}
#hero .box:first-child {width: 100%; text-align: center;}
#hero .box:last-child {display: none;}
#hero h1 {text-align: center; font-size: 2.2em;}
#hero p {text-align: center;}
.problems img {display: none;}
 }