/* GENERAL */

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	/*--accent: #ff9e1f;*/
	--accent: #FF4000;
	--accent-hover: #FF8000;
}

html { scroll-behavior: smooth; }

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: "Roboto", sans-serif;
}

ul, li {
	list-style-type: none;
}

a {
	color: #fff;
	text-decoration: none;
}

a:hover {
	color: var(--accent);
}

body {
	background-color: #333;
	color: #fff;
	font-size: 16px;
}

main {
	padding-top: 50px;
}

.accented {
	color: var(--accent);
}

.block {
	padding: 100px 0;
}

.block-title {
	font-size: 24px;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 40px;
}

.block-desc {
	font-size: 24px;
	font-weight: 500;
	text-align: center;
	margin: 0 auto 75px auto;
}

.bg-cover {
	padding: 100px 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
}

.bg-cover-strong {
	padding: 100px 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
}

.bg-cover-gray {
	padding: 100px 0;
	width: 100%;
	height: 100%;
	background-color: rgba(50, 50, 50, 0.9);
}



/* pop-up */

.pop-up {
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.7);
	justify-content:center;
	align-items:center;
	z-index: 100;
}



/* points-list */

.points-list {
	display: flex;
	gap: 50px 0;
}

.point {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}

.point-splitter {
	height: 4px;
	width: 40px;
	border-radius: 2px;
	background-color: var(--accent);
	margin-top: 30px;
	margin-bottom: 25px;
}

.point-icon i {
	font-size: 48px;
}

.point-title {
	width: 175px;
	text-align: center;
}



/* form */

.form-wrap {
	padding: 50px;
	border: 3px solid #FFF;
	border-radius: 8px;
	background-color: rgba(0, 0, 0, 0.5);
}

.pop-up .form-wrap {
	max-width: 500px;
	margin: 0 10px;
	background-color: rgba(0, 0, 0, 0.9);
}

.pop-up .form {
	flex-direction: column;
}

.form-content {
	margin-bottom: 40px;
	text-align: center;
}

.form-title {
	font-size: 32px;
	font-weight: 500;
}

.form-desc {
	font-size: 20px;
	font-weight: 500;
}

.form {
	display: flex;
	gap: 25px 25px;
	align-items: center;
}

.form label {
	min-height: 40px;
	flex: 0 0 49%;
	position: relative;
}

.form.vertical label {
	flex: 0 0 100%;
}

.form input {
	border: 2px solid #FFF;
	border-radius: 8px;
	background-color: #222;
	outline: none;
	color: #FFF;
	padding: 15px;
	width: 100%;
}

.form select {
	border: 2px solid #FFF;
	border-radius: 8px;
	background-color: #222;
	outline: none;
	min-height: 40px;
	flex: 0 0 49%;
	color: #FFF;
	padding: 15px;
	width: 100%;
}

.form input:active, .form input:focus, .form select:active, .form select:focus, .form textarea:active, .form textarea:focus {
	border-color: var(--accent);
}

.form input::placeholder, .form textarea::placeholder {
	color: #FFF;
}

.form input:active::placeholder, .form input:focus::placeholder, .form textarea:active::placeholder, .form textarea:focus::placeholder {
	color: transparent;
}

.form label.required::before {
	content: "*";
	color: var(--accent);
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
}

.form button {
	background-color: var(--accent);
	cursor: pointer;
	border-radius: 20px;
	border: none;
	color: #FFF;
	min-height: 50px;
	font-size: 20px;
	font-weight: 400;
	transition: .3s;
	padding: 0 15px;
	width: 300px;
}

.form button:hover {
	background-color: var(--accent-hover);
}

.form button:disabled {
	background-color: green;
	cursor: default;
}

.form button:disabled:hover {
	background-color: green;
	cursor: default;
}

.form textarea {
	border: 2px solid #FFF;
	border-radius: 8px;
	background-color: #222;
	outline: none;
	min-height: 40px;
	flex: 1;
	color: #FFF;
	padding: 15px;
	resize: none;
}

.form-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
}

.form-message {
	width: 100%;
	display: none;
}





/* HEADER */

.header {
	background-color: #111;
	text-transform: uppercase;
	font-weight: 500;
	position: fixed;
	width: 100%;
	z-index: 2;
}

.header-menu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	align-items: stretch;
}

.header-menu li {
	flex: 1;
}

.header-menu a {
	display: flex;
	width: 100%;
	height: 100%;
	height: 50px;
	align-items: center;
	justify-content: center;
	transition: .3s;
}

.header-menu a:hover {
	background-color: #333;
}

.mobile-nav {
	display: none;
}

.menu-button i.hidden {
	display: none;
}





/* HAT */

.hat {
	background-image: url(../img/hat-bg-reversed.jpg);
	background-size: cover;
	background-position: center 60%;
}

.hat .container {
	z-index: 1;
}

.hat-contacts {
	display: flex;
	gap: 20px;
	margin-bottom: 30px;
}

.hat-logo {
	width: 300px;
}

.hat-logo img {
	max-width: 100%;
}

.hat-contacts-left {
	font-size: 20px;
}

.hat-contacts-right {
	display: flex;
	flex-direction: column;
}

.hat-contacts-cover {
	display: flex;
	gap: 20px;
	flex: 1;
	background-color: rgba(0, 0, 0, 0.7);
	padding: 15px;
	justify-content: space-between;
}

.hat-address {
	margin-bottom: 10px;
}

.hat-email {
	margin-bottom: 10px;
	font-size: 20px;
	text-align: right;
	
}

.hat-phone {
	flex: 1;
	text-align: right;
}

.hat-phone-number {
	font-size: 24px;
}

.hat-callback {
	text-decoration: underline;
	font-size: 14px;
	cursor: pointer;
}

.hat-callback:hover {
	color: var(--accent);
}

.hat-content {
	background-color: rgba(0, 0, 0, 0.7);
	padding: 30px;
	position: relative;
	margin-right: 200px;
}

.hat-title {
	font-size: 56px;
	margin-bottom: 20px;
}

.hat-context-text {
	flex: 1;
}

.hat-points {
	font-size: 24px;
}

.hat-points li {
	display: flex;
}

.hat-points li i {
	margin-right: 10px;
	color: green;
}

.hat-getprice {
	background-color: #000;
	width: 400px;
	height: 125px;
	position: absolute;
	right: -200px;
	bottom: 0;
	padding: 15px;
	text-align: center;
	font-size: 20px;
}

.hat .button {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	width: 250px;
	height: 60px;
	background-color: var(--accent);
	border: 3px solid #FFF;
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: .3s;
}

.hat .button:hover {
	background-color: var(--accent-hover);
}




/* ADVANTAGES */

.advantages {
	background-color: #222;
}





/* SERVICES */

.services {
	background-image: url(../img/services-bg.jpg);
	background-position: center;
	background-size: cover;
}

.services-list {
	display: flex;
	flex-wrap: wrap;
}

.serv {
	width: 33.333%;
}

.serv-inner {
	margin: 15px;
}

.serv-img {
	overflow: hidden;
	position: relative;
	height: 250px;
}

.serv-img img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translate(-50%, -50%);
}

.serv-title {
	background-color: #222;
	padding: 15px;
}

.serv-title p {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #ddd;
	text-transform: uppercase;
	padding: 20px;
}





/* INSURANCE */

.insurance {
	background-image: url(../img/insurance-bg.jpg);
	background-position: center;
	background-size: cover;
}

.insurance .point-title {
	font-size: 20px;
	font-weight: 500;
}

.insurance .points-list {
	margin-bottom: 75px;
}





/* REASONS */

.reasons {
	background-color: #222;
}

.reasons .block-desc {
	max-width: 400px;
}

.reasons .points-list {
	flex-wrap: wrap;
	gap: 50px 0;
	justify-content: center;
}

.reasons .point {
	align-items: flex-start;
	min-width: 25%;
	max-width: 25%;
	padding: 0 20px 0;
}

.reasons .point-icon {
	margin-bottom: 20px;
	color: var(--accent);
}

.reasons .point-title {
	font-size: 20px;
	margin-bottom: 20px;
	text-align: left;
}





/* ESTIMATE */

.estimate {
	background-image: url(../img/getprice-bg.jpg);
	background-size: cover;
	background-position: center 70%;
	
}

.estimate.block {
	padding: 150px 0;
}

.estimate-body {
	display: flex;
}

.estimate-content {
	flex: 1;
	background-color: rgba(0, 0, 0, 0.2);
	padding: 20px 30px;
}

.estimate-title {
	font-size: 36px;
	margin-bottom: 20px;
	max-width: 400px;
}

.estimate-desc {
	font-size: 20px;
	max-width: 400px;
}

.estimate .form-wrap {
	background-color: rgba(0, 0, 0, 0.2);
	margin: -30px 0 -20px 0;
	width: 400px;
	padding: 35px 20px;
}

.estimate .form-title {
	font-size: 24px;
}

.estimate input, .estimate button {
	width: 100%;
	flex: unset;
}

.estimate button {
	margin-top: 40px;
}

.estimate .form {
	flex-direction: column;
}




/* COMPARISON */

.comparison {
	background-color: #222;
}

.comparison-content {
	position: relative;
	border: 5px solid var(--accent);
	padding: 100px;
}

.comparison-content::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	background-color: #222;
	width: 300px;
	height: 20px;
}

.comparison .block-title {
	margin: 0;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
}

.splide__slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: orange;
	position: relative;
	height: 700px;
}

.splide__pagination {
	bottom: -40px !important;
}

.splide__arrow--prev {
	left: -50px !important;
}

.splide__arrow--next {
	right: -50px !important;
}

.car-img {
  position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translate(-50%, -50%);
}




/* PRICE */

.price {
	background-color: #FFF;
	color: #000;
}

.price table {
  border-collapse: collapse;
  width: 100%;
}

.price th, .price td {
  padding: 8px;
  text-align: left;
}

.price th {
  font-weight: bold;
}

.price td {
	border-top: 1px solid #bbb;
}

.price td::last-of-type {
	border-bottom: 1px solid #bbb;
}

.price-table {
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.price-table::-webkit-scrollbar {
  height: 8px;
}

.price-table::-webkit-scrollbar-thumb {
  background: var(--accent);
}

.price-table::-webkit-scrollbar-track {
  background: #f1f1f1;
}





/* CONTACTS */

.contacts {
	background-image: url(../img/contacts-bg.jpg);
	background-position: center top;
	background-size: cover;
	
}

.contacts.block {
	padding-bottom: 0;
}

.contacts .bg-cover {
	padding-bottom: 10px;
}
.contacts-body {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 50px;
}

.contacts-content {
	display: flex;
	flex-direction: column;
}

.contacts-map {
	position: relative;
	width: 700px;
}

.contacts-map iframe {
	width: 100%;
}

.contacts-map::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 5px;
	transform: translate(10px, 10px);
	background-color: var(--accent);
	z-index: -1;
}

.contacts-block {
	margin-bottom: 10px;
}

.contacts-title {
	font-size: 20px;
	font-weight: 500;
}

.contacts .form-wrap {
	margin-bottom: 40px;
}

.credits {
	display: flex;
	gap: 20px;
}

.credits-policy a {
	color: var(--accent);
	text-decoration: underline;
}

.credits-logo, .credits-phone {
	flex: 1;
}

.credits-logo img {
	max-width: 100%;
}

.credits-policy {
	flex: 2;
}

.dev-credits {
	text-align: center;
	padding: 20px;
}





/* MEDIA */

@media (max-width: 991px) {
	.form {
		flex-direction: column;
	}

	.form label {
		flex: 0 0 100%;
	}

	.points-list {
		flex-wrap: wrap;
	}

	.point {
		width: 50%;
		flex: unset;
	}

	.hat-contacts-cover {
		flex-direction: column;
	}

	.serv {
		width: 50%;
	}

	.reasons .point {
		min-width: 33.333%;
		max-width: 33.333%;
	}

	.contacts-body {
		flex-direction: column;
		align-items: stretch;
	}

	.contacts-content {
		align-items: center;
		text-align: center;
		margin-bottom: 15px;
	}

	.contacts-address {
		margin-bottom: 20px;
	}

	.contacts-map {
		width: 100%;
	}
}

@media (max-width: 1199px) {
	.splide__slide {
		height: 500px;
	}
}

@media (max-width: 991px) {
	.splide__slide {
		height: 400px;
	}
}

@media (max-width: 767px) {
	.splide__slide {
		height: 300px;
	}

	.block, .bg-cover, .bg-cover-gray, .bg-cover-strong {
		padding: 30px 0;
	}

	nav {
		display: none;
		position: relative;
		width: 300px;
		background-color: #111;
		padding: 0 10px;
	}

	nav.visible {
		display: flex;
		position: absolute;
		left: 0;
		top: 50px;
		z-index: 1;
	}

	.header-menu {
		flex-direction: column;
	}

	.mobile-nav {
		display: flex;
		height: 50px;
		align-items: center;
		justify-content: space-between;
	}

	.menu-button {
		font-size: 24px;
		padding: 0 10px;
	}

	.mobile-phone {
		text-align: right;
	}

	.hat-contacts {
		flex-direction: column;
	}

	.hat .bg-cover {
		padding: 20px 0 100px;
	}

	.hat-content {
		margin-right: 0;
		padding-bottom: 75px;
	}

	.hat-phone {
		display: none;
	}

	.hat-getprice {
		right: unset;
		left: 50%;
		top: 100%;
		transform: translate(-50%, -50%);
		height: 80px;
		width: 100%;
	}

	.form {
		flex-direction: column;
		gap: 15px;
	}

	.form input, .form button {
		width: 100%;
	}

	.form button {
		max-width: 300px;
	}

	.estimate-body {
		flex-direction: column;
	}

	.estimate-content {
		display: flex;
		flex-direction: column;
		text-align: center;
		align-items: center;
	}

	.estimate .form-wrap {
		width: 100%;
		margin: 0;
	}

	.estimate button {
		margin-top: 0;
	}

	.price table {
		min-width: 740px;
	}

	.price .container {
		overflow-y: scroll;
	}

	.reasons .point {
		min-width: 50%;
		max-width: 50%;
	}

	.comparison-content {
		padding: 40px;
	}

	.splide__pagination {
		bottom: -27px !important;
	}

	.splide__arrow--prev {
		left: -33px !important;
	}

	.splide__arrow--next {
		right: -33px !important;
	}
}

@media (max-width: 500px) {
	.reasons .point {
		min-width: 100%;
		max-width: 100%;
	}

	.point {
		width: 100%;
	}

	.serv {
		width: 100%;
	}

	.credits {
		flex-direction: column;
	}
}