:root {
	--bg: #24262c;
	--bg-accent: #fff;
	--text: #fff;
	--text-accent: #000;
	--text-gray: #373636;
	--accent: #F95A00;

	--accent-font: 'Michelin', sans-serif;
	--text-font: 'Roboto', sans-serif;
	--extra-font: 'Nissan Brand', sans-serif;
	--secondary-font: 'Lato', sans-serif;


	--skew: -30deg;
	--skew-2: -21deg;

	--z-1: 1;
	--z-2: 2;
	--z-3: 3;

	--outer-space: 70px;
	--inner-space: 50px;
}

* {
	box-sizing: border-box;
}

body {
	position: relative;

	margin: 0;
	padding: 0;

	background-color: var(--bg);
	color: var(--text);

	font-family: var(--text-font);

	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

button {
	cursor: pointer;
}

.overlay::before,
dialog::backdrop {
	content: '';
	position: fixed;
	inset: 0;
	z-index: var(--z-2);

	background: #0000009d;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0px 20px;
}

.title {
	font-family: var(--accent-font);
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;

	margin: 0;
}

.title--gradient {
	font-size: 36px;
	background: #F95A00;
  background: linear-gradient(to right, #73372C 0%, #EDA57D 19%, #9A4835 35%, #B65741 57%, #E18B6A 79%, #702B1D 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
	text-align: left;
}

.title--md {
	font-size: 20px;
}

.cards-grid-slider {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 45px;
}

.btn--accent,.wpcf7-submit {
	display: inline-flex;
	justify-content: center;
	align-items: center;

	position: relative;
	padding: 16px 26px;

	color: var(--text);

	z-index: var(--z-1);

	font-family: var(--accent-font);
	font-size: 20px;
	text-transform: uppercase;
	text-decoration: none;

	background: transparent;
	border: none;

}

.btn--accent:hover::before,.wpcf7-submit:hover::before {
	box-shadow: 0px 0px 55px var(--accent);
}

.btn--accent::before,.wpcf7-submit::before {
	content: '';
	background: linear-gradient(to right, #B5372F 0%, #FC5F07 55%, #F9B300 100%);
	box-shadow: 0px 0px 41px var(--accent);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--accent);
	transform: skew(var(--skew));
	z-index: -1;

	transition: 0.3s;

}

.paral {
	clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
	overflow: hidden;
}

.banner-bg-text {
	position: relative;
}

.banner-bg-text::before,
.banner-bg-text::after {
	-webkit-text-stroke: 0.5px var(--text);
	font-family: var(--accent-font);
	font-size: 96px;
	color: transparent;
	opacity: 0.5;
	letter-spacing: 7px;


	position: absolute;
}

.phone {
	color: var(--accent);

	font-family: var(--accent-font);
	font-size: 20px;
	text-decoration: none;
}

@media (max-width: 1260px) {
	.container {
		max-width: 1000px;
	}
}

@media (max-width: 1040px) {
	:root {
		--inner-space: 40px;
	}

	.title {
		margin: 0;
	}

	.container {
		max-width: 800px;
	}
}

@media (max-width: 840px) {
	.container {
		max-width: 600px;
	}

	.title {
		font-size: 20px;
		line-height: 160%;
	}

	.banner-bg-text::before,
	.banner-bg-text::after {
		font-size: 50px;
		letter-spacing: 1px;
		z-index: var(--z-1);
	}
}