/* USER VARIABLES SECTION */

:root {
	--accent: #0000FF;
	--text: #fff;
	--regular-text: 16px;
	--lineheight: 1.65;
	--userfont: montserrat, sans-serif;
	--systemfont: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

/* BOOTSTRAP SETTINGS SECTION */

/* gutter 20px (10px + 10px). Comment this code for default gutter start at 1.5rem (24px) wide. */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { --bs-gutter-x: .625rem; }
.row, .row > * { --bs-gutter-x: 1.25rem; }

/* FONTS LOAD SECTION */

@font-face { src: url("../fonts/Montserrat-Light.woff2") format("woff2"); font-family: "montserrat"; font-weight: 300; font-style: normal; }
@font-face { src: url("../fonts/Montserrat-Regular.woff2") format("woff2"); font-family: "montserrat"; font-weight: 400; font-style: normal; }
@font-face { src: url("../fonts/Montserrat-Medium.woff2") format("woff2"); font-family: "montserrat"; font-weight: 500; font-style: normal; }
@font-face { src: url("../fonts/Montserrat-SemiBold.woff2") format("woff2"); font-family: "montserrat"; font-weight: 600; font-style: normal; }
@font-face { src: url("../fonts/Montserrat-Bold.woff2") format("woff2"); font-family: "montserrat"; font-weight: 700; font-style: normal; }
@font-face { src: url("../fonts/Montserrat-ExtraBold.woff2") format("woff2"); font-family: "montserrat"; font-weight: 800; font-style: normal; }

/* GENERAL CSS SETTINGS */

::placeholder { color: #BDBDBD; font-size: 18px;font-weight: 300;font-family: var(--userfont) }
::selection { background-color: var(--accent); color: #fff; }
input, textarea { outline: none; }
input:focus:required:invalid, textarea:focus:required:invalid { border-color: red; }
input:required:valid, textarea:required:valid { border-color: green; }

body {
	font-family: var(--userfont);
	font-size: var(--regular-text);
	line-height: var(--lineheight);
	color: var(--text);
	min-width: 320px;
	position: relative;
	overflow-x: hidden;
	background-color: #000;
	margin: 0;
}

/* USER STYLES */

.image {
	max-width: 100%;
	margin-bottom: var(--bs-gutter-x);
	border-radius: 4px;
}
a {
	color: var(--text);
	text-decoration: none;
}

.accent {
	color: var(--accent);
	font-weight: bold;
}
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}
.posrel {
	position: relative;
}
.container-auto {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 15px;
}
h1, h2, h3 {
	font-size: 40px;
	font-weight: 500;
	text-transform: uppercase;
}
h3 {
	line-height: 1.3;
	margin-bottom: 10px;
}
p {
	margin: 0;
	padding: 0;
}
.center {
	text-align: center;
}
.margine-block {
	display: none;
}
.topline, .footer {
	display: flex;
	gap: 15px;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
}
.footer {
	padding-top: 20px;
}
.menu {
	display: flex;
	gap: 30px;
	list-style-type: none;
	text-decoration: none;
	color: var(--text);
	font-weight: 600;
}
.menu li a, .mobile__list li a, .menu-footer li a {
	text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: all .3s;
}
.menu li a:hover, .mobile__list li a:hover, .menu-footer li a:hover, li.active a {
	color: var(--accent);
	background-size: 100% 2px;
}
.mobile-wrap {
	display: none;
}
.mobile__list {
	padding: 0;
	list-style-type: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.menu-footer {
	display: flex;
	gap: 30px;
	list-style-type: none;
	text-decoration: none;
	color: var(--text);
	font-weight: 600;
}

.topline__right {
	display: flex;
	gap: 30px;
}
.footer__right {
	display: flex;
	gap: 10px;
}
.topline__right .phone, .topline__right .entrance {
	display: flex;
	align-items: center;
	gap: 5px;
}
.logo-wrap {
	display: block;
	cursor: pointer;
}

/* .topline__right .phone::before {
	content: url(../images/tesla-phone.svg);
	margin-right: 10px;
	
} */
.first-screen {
	text-align: center;
	background-image: url(../images/first-screen2.png);
	background-size: cover;
	background-position: center;
	height: 700px;
	display: flex;
	flex-direction: column;
	gap: 25px;
}
.first-screen__h1 {
	margin-bottom: 15px;
}
.first-screen__descript {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.45;
}
.models {
	padding: 40px 0;
}
.models__descript {
	font-size: 20px;
	font-weight: 500;
	text-align: center;
	margin: auto;
	line-height: 1.45;
	width: 80%;
	margin-bottom: 45px;
}
.models__items {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 55px;
}
.models__item {
	width: calc(100%/4 - 55px/2);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.models__item img {
	width: 100%;
	transition: all .5s ease;
}
.models__item:hover img {
	transform: translateY(-10%);
}
/* .models__item:hover .models__item--name {
	transform: translateY(-10%);
} */
 .gallery-first{
	 padding: 40px 0;
 }
.gallery {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}
.gallery__item {
	width: calc(100%/2 - 20px/2);
	transition: all .5s ease;
}
.gallery__item:hover {
	transform: translateY(-10px);
}
.gallery__item:nth-child(odd) .gallery__descipt {
	margin: 0 0 15px 0;
}
.gallery__descipt {
	font-size: 18px;
	font-weight: 600;
}
.gallery__item img {
	width: 100%;
}
.services {
	padding: 20px 10px;
}
.advantages__h1 {
	font-weight: 700;
	font-size: 52px;
	text-align: center;
}
.service {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding: 30px 0;
}
.service__item {
	display: flex;
	gap: 15px;
	flex-basis: calc(100%/3 - 30px/2);
}
.service__item--img {
	flex: 0 0 60px;
}
.service__icon {
max-width: 100%;
}
.service__item-text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.service__item-text p{
	margin: 0;
}
.service__title {
	font-size: 18px;
	font-weight: 600;
}
.service__text {
	font-size: 16px;
	font-weight: 400;
}

.reviews--left {
	max-width: 790px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.reviews--resources {
	display: flex;
	gap: 20px;
	justify-content: center;
}
.revres__item {
	background: #434343;
	padding: 10px 20px;
	border-radius: 10px;
	display: flex;
	gap: 20px;
	transition: all .5s ease;
}
.revres__item:hover {
	transform: translateY(-10px);
	transform: rotate(2deg);
}
.revres--left {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.revres--left img{
	max-width: 170px;
}
.revres--text {
	font-size: 16px;
	font-weight: 400;
}
.revres--right {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.revres--numb {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
}
.revres--stars {
	display: flex;
	gap: 1px;
}
.star {
	width: 15px;
	height: 15px;
	display: block;
	background: #F7CE46;
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.reviews-screensh {
	display: flex;
	gap: 20px;
	padding: 40px 0;
}
.revscree__item img {
	width: 100%;
}
.reviews--right {
	position: absolute;
	bottom: 0;
	right: 0px;
}
.reviews--right-mobile {
	display: none;
}
.reviews--right img {
	max-width: 400px;
}
.section-form--flex {
	display: flex;
	justify-content: center;
}
.section-form--wrap {
	max-width: 700px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.contact-f {
	display: flex;
	flex-direction: column;
	width: 80%;
	max-width: 600px;
	padding: 40px 0;
}
.contact-f input {
	outline: none;
	background: inherit;
	height: 40px;
	margin-bottom: 20px;
	border: none;
	color: var(--text);
	font-size: 18px;
	font-weight: 400;
	font-family: var(--userfont);
	border-bottom: 1px solid #BDBDBD;
}
input[type="checkbox"] {
	appearance: none;
	margin: 0;
	padding: 0;
	height: 0;
	outline: none;
	border: none;
}
.contact-f__button {
	padding: 13px 80px;	
	margin: 20px auto 0;
	border-radius: 2px;
	background-color: var(--accent);
	outline: none;
	border: none;
	color: var(--text);
	font-size: 18px;
	font-weight: 500;
	font-family: var(--userfont);
	text-transform: uppercase;
	cursor: pointer;
	transition: all .5s ease;
}
.contact-f__button:hover {
	opacity: 0.8;
}
.checkbox-text {
	line-height: 1.3;
	font-size: 12px;
	font-weight: 300;
}
.checkbox-text a {
	text-decoration: underline;
}
.label {
	display: flex;
	justify-content: center;
	gap: 7px;
	padding: 9px 0;
}
.checkbox-square {
	display: block;
	width: 15px;
	height: 15px;
	border: 1px solid var(--text);
	border-radius: 3px;
	position: relative;
}
.checkbox-square::after {
content: '';
position: absolute;
left: 5px;
bottom: 5px;
width: 7px;
height: 14px;
border: 1px solid #3DBB2E;
border-width: 0 4px 4px 0;
transform: rotate(45deg);
opacity: 0;
}
input:checked ~ span::after {
	opacity: 1;
}
.messages {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
    justify-content: center;
}
.messages__item {
	padding: 5px 20px;
	border-radius: 2px;
	background: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	transition: all .5s ease;
}
.messages__item:hover {
	opacity: 0.8;
}
.viber {
	background: #7A70C0;
}
.whatsap {
	background: #3DBB2E;
}
.telegram {
	background: #3FC0FF;
}
.map {
	position: relative;
}
#map {
	margin-top: 40px;
}
.map-contact {
	position: absolute;
	top: 40%;
	transform: translateY(-40%);
	left: 20%;
	max-width: 340px;
	z-index: 9;
	background: #000;
	border-radius: 20px;
	padding: 0 30px 30px 30px;
}
.contact {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.contact__item {
	display: flex;
	gap: 10px;
}
.contact__icon {
	padding-top: 3px;
}
.icon-marker {
	margin-top: -40px;
    max-width: 50px;
}
.popupyandexmap {
	width: 300px;
    background: #000;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    position: relative;
    position: absolute;
    left: -10px;
    top: -30px;
}
.popup__close-yande {
	position: absolute;
    top: 10px;
    right: 10px;
	
}
/* burger */
#nav-icon1 {
	width: 20px;
  	height: 16px;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
  	position: relative;
  	margin: auto;
  	-webkit-transform: rotate(0deg);
  	-moz-transform: rotate(0deg);
  	-o-transform: rotate(0deg);
  	transform: rotate(0deg);
  	-webkit-transition: .5s ease-in-out;
  	-moz-transition: .5s ease-in-out;
  	-o-transition: .5s ease-in-out;
  	transition: .5s ease-in-out;
  	cursor: pointer;
}
#nav-icon1 span {
	display: block;
  	position: absolute;
  	height: 3px;
  	width: 100%;
  	background: var(--text);
  	border-radius: 9px;
  	opacity: 1;
  	left: 0;
  	-webkit-transform: rotate(0deg);
  	-moz-transform: rotate(0deg);
  	-o-transform: rotate(0deg);
  	transform: rotate(0deg);
  	-webkit-transition: .25s ease-in-out;
  	-moz-transition: .25s ease-in-out;
  	-o-transition: .25s ease-in-out;
  	transition: .25s ease-in-out;
}
#nav-icon1 span:nth-child(1) {
  top: 0px;
}

#nav-icon1 span:nth-child(2) {
  top: 6px;
}

#nav-icon1 span:nth-child(3) {
  top: 12px;
}

#nav-icon1.open span:nth-child(1) {
  top: 6px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#nav-icon1.open span:nth-child(3) {
  top: 6px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

/* END burger */

.all {
	transition: .7s ease;
}
.all.active {
	filter: blur(20px);
	--webkit-filter: blur(20px);
	pointer-events: none;
	user-select: none;
}
#popup {
	position: fixed;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 440px;
	min-width: 320px;
	padding: 30px;
	box-shadow: 0 5px 30px rgba(0,0,0,.30);
	background: rgb(1, 1, 1);
	visibility: hidden;
	opacity: 0;
	transition: .5s ease;
	display: flex;
	flex-direction: column;
	gap: 20px;
	border-radius: 5px;
	border: 1px solid var(--text);
	z-index: 99;
}
#popup.active {
	visibility: visible;
	top: 50%;
	opacity: 1;
	transition: .5s ease;
}
.popup__h3 {
	font-size: 20px;
	text-align: center;
}
.popup__h3.success {
	color: #3DBB2E;
}
.popup__h3.err {
	color: red;
}
.cross-wrap {
	position: absolute;
	top: 5px;
	right: 10px;
	transition: .5s ease;
}


.cross-wrap:hover {
	transform: rotate(45deg);
}
 
/* about-us */

.breadcrumbs {
	margin-top: 15px;
}
.breadcrumbs span {
	color: rgba(79, 79, 79, 1);

}
.breadcrumbs a {
	color: rgba(189, 189, 189, 1);

}
.center.mt {
	margin-top: 5px;
	margin-bottom: 15px;
}
.about-us__wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.about-us__item {
	width: calc(100%/2 - 10px);
}
.about-us__item p {
	margin-bottom: 7px;
	font-size: 18px;
	font-weight: 300;
}
.about-us__item img {
	width: 100%;
}
/* END about-us */
/*  contact */
.contact-map {
	width: 100%;
	margin-bottom: 35px;
}
.contact-text {
	max-width: 850px;
	margin: 0 auto 30px auto;
	text-align: center;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.35;
}
.cont-title {
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 20px;
}
.cont-phone a {
	font-size: 20px;
	font-weight: 600;
}

/* END contact*/
.h {
	height: 1000px;
}

.scroll-marq {
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	overflow: hidden;
	padding: 5px 0;
	background-color: #4fbb4f;
	color: #fff;
	font-size: 25px;
	display: flex;
	width: 100%;
}
.scroll-marq div {
	white-space: nowrap;
	animation: scroll-marq 30s linear infinite;
}
@keyframes scroll-marq {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(-100%);
	}
}
@media (max-width : 992px) {
	.scroll-marq {
		display: none;
	}
	}