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

:root {
	--bg-color-first: #fff;
	--bg-color-second: #378bee;
	--bg-color-third: #51ee99;
	--bg-color-fourth: #484f55;
	--bg-color-fifth: #f0f7ff;
	--bg-color-sixth: #eeeff1;
	--bg-color-seventh: #ff4400;
	--bg-color-eighth: #f5f5f5;
	--text-color-first: #484f55;
	--text-color-second: #fff;
	--text-color-third: #22222233;
	--text-color-fourth: #1c2126;
	--text-color-fifth: #378bee;
	--text-color-sixth: #f0f0f0;
	--text-color-seventh: #51ee99;
	--font-size-xs: 0.55rem;
	--font-size-s: 0.75rem;
	--font-size-m: 1rem;
	--font-size-l: 1.5rem;
	--font-size-xl: 2rem;
	--font-size-xxl: 2.75rem;
	--box-shadow: 0px 3.48px 13.92px 0px #ededed;
}

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

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: 'wdth' 100;
	background-color: var(--bg-color-first);
	font-size: var(--font-size-m);
}

.location {
	padding: 0 5rem;
	margin-top: 0.6rem;
	color: var(--text-color-fourth);
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--font-size-s);
}

.header__menu {
	display: none;
}

.header__menu img {
	z-index: 99999;
}

header {
	padding: 0 5rem;
	margin-top: 1rem;
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
}

header > div {
	height: 3rem;
}

.header__logo img {
	max-width: 140px;
	max-height: 48px;
}

.footer__logo img {
	max-width: 150px;
	max-height: 50px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.header__logo {
	max-width: 140px;
	max-height: 48px;
	color: var(--text-color-second);
	background-color: var(--bg-color-second);
	padding: 0 1rem;
	border-radius: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	user-select: none;
}

.header__logo-img {
	height: 1.5rem;
	width: 1.5rem;
	background-color: var(--bg-color-first);
	border-radius: 0.4rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header__logo-text {
	font-size: var(--font-size-xs);
	display: flex;
	flex-direction: column;
}

.header__logo-text > span:last-child {
	font-style: italic;
	font-weight: 300;
}

.header__catalog {
	background-color: var(--bg-color-fourth);
	color: var(--text-color-second);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 1rem;
	font-size: var(--font-size-s);
	font-weight: 500;
	border-radius: 0.75rem;
	cursor: pointer;
	user-select: none;
}

.header__phone {
	background-color: var(--bg-color-fifth);
	color: var(--text-color-fifth);
	border-radius: 0.75rem;
	padding: 0 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--font-size-m);
	white-space: nowrap;
}

.header__phone_img {
	display: none;
}

.header__search {
	background-color: var(--bg-color-fourth);
	display: flex;
	border-radius: 0.75rem;
	align-items: center;
	overflow: hidden;
	border: var(--bg-color-fourth) solid 0.15rem;
	min-width: 15rem;
	max-width: 55%;
	width: 100%;
	font-size: var(--font-size-m);
}

.header__search > div:first-child {
	height: 100%;
	width: calc(100% - 3rem);
}

.header__search > div:last-child {
	height: 100%;
	width: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
}

.header__search input {
	all: unset;
	background-color: var(--bg-color-first);
	padding: 0 1rem;
	height: 100%;
	width: calc(100% - 2rem);
	border-radius: 0 0.75rem 0.75rem 0;
}

.header__orders {
	user-select: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: var(--font-size-s);
	color: var(--text-color-first);
}

.header__cart {
	user-select: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: var(--font-size-s);
	color: var(--text-color-first);
}

.header__sign-in {
	all: unset;
	border-radius: 0.75rem;
	padding: 0 1.75rem;
	background-color: var(--bg-color-sixth);
	color: var(--text-color-first);
	font-size: var(--font-size-m);
	font-weight: 500;
	cursor: pointer;
	user-select: none;
}

main {
	padding: 0 5rem;
}

.presentation {
	display: flex;
	align-items: center;
	margin-top: 3rem;
	gap: 3rem;
}

.presentation__buses {
	display: flex;
	gap: 1rem;
	font-size: var(--font-size-s);
}

.presentation__bus {
	background-color: var(--bg-color-third);
	color: var(--text-color-second);
	padding: 0.5rem 0.75rem;
	border-radius: 0.25rem;
}

.presentation__text {
	margin: 0;
	font-size: var(--font-size-xxl);
	color: var(--text-color-fifth);
	font-weight: 700;
	width: 55%;
}

.features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	margin-top: 2.5rem;
}

.features__item {
	box-shadow: var(--box-shadow);
	border-radius: 1.5rem;
	padding: 2rem 1rem;
	display: flex;
	gap: 1rem;
}

.features__item:last-child {
	background-color: var(--bg-color-third);
	color: var(--text-color-second);
}

.features__item:last-child .features__text {
	color: var(--text-color-second);
}

.features__item > div {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.features__number {
	color: var(--text-color-third);
	font-weight: 700;
	font-size: var(--font-size-xl);
}

.features__header {
	font-weight: 700;
	font-size: var(--font-size-l);
}

.features__text {
	margin: 0;
	font-size: var(--font-size-s);
	color: var(--text-color-first);
}

.features__phone {
	font-size: var(--font-size-l);
	line-height: 2.5rem;
}

.features__call {
	background: var(--bg-color-third) url(./images/app_whatsapp.svg) 95% 50%
		no-repeat;
	border-radius: 2rem;
	color: var(--text-color-second);
	padding: 0.75rem 2rem;
	width: 80%;
	min-width: 13rem;
	font-size: var(--font-size-m);
	margin-top: auto;
}

.features__button_statement {
	all: unset;
	background: url(./images/arrow-right_blue.svg) no-repeat 95% 50%;
	color: var(--text-color-fifth);
	border: solid var(--bg-color-second) 2px;
	padding: 0.75rem 2rem;
	width: 80%;
	min-width: 13rem;
	border-radius: 2rem;
	font-size: var(--font-size-m);
	margin-top: auto;
	box-sizing: border-box;
	user-select: none;
	cursor: pointer;
}

.features__item:last-child .features__button_statement {
	background: url(./images/arrow-right_green.svg) no-repeat 95% 50%;
	color: var(--text-color-seventh);
	border: none;
	background-color: var(--bg-color-first);
	/* font-weight: 700; */
}

.assortment {
	margin-top: 2.5rem;
}

.assortment__header {
	color: var(--text-color-first);
	font-size: var(--font-size-l);
	font-weight: 700;
}

.assortment__content {
	display: grid;
	gap: 2rem;
	grid-template-areas: 'parts discount discount';
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 22rem;
	margin-top: 1rem;
}

.assortment__parts {
	background: url(./images/engine.png) no-repeat 100% 100%;
	grid-area: parts;
	box-shadow: var(--box-shadow);
	border-radius: 2rem;
	padding: 2rem;
	overflow: hidden;
	color: var(--text-color-first);
	font-size: var(--font-size-m);
	display: flex;
	flex-direction: column;
}

.assortment__parts-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 40%;
	min-width: 7.25rem;
}

.assortment__parts-item {
	background: url(./images/arrow-right_grey.svg) no-repeat 0% 50%;
	padding-left: 1.25rem;
}

.assortment__details {
	margin-top: auto;
	user-select: none;
	cursor: pointer;
}

.assortment__discount {
	grid-area: discount;
	background: var(--bg-color-second) url(./images/glass.png) no-repeat 100% 100%;
	border-radius: 2rem;
	color: var(--text-color-second);
	padding: 2rem 3rem;
	font-size: var(--font-size-m);
}

.assortment__discount-info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	width: 100%;
}

.assortment__discount-info > div {
	display: flex;
	justify-content: space-between;
}

.assortment__discount-info p {
	font-size: var(--font-size-xl);
	font-weight: 700;
	width: 40%;
	margin: 0;
	margin-bottom: 2rem;
}

.assortment__discount-info .assortment__details {
	margin-top: 0;
}

.assortment__discount-display {
	background-color: var(--bg-color-third);
	padding: 1rem;
	height: auto;
	align-self: flex-start;
	border-radius: 2rem;
}

.opportunities {
	margin-top: 2.5rem;
}

.opportunities__header {
	font-size: var(--font-size-l);
	color: var(--text-color-first);
	font-weight: 700;
}

.opportunities__content {
	margin-top: 1.5rem;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: 13.5rem;
	grid-template-areas: 'origin speed everywhere entities entities entities';
}

.opportunities__origin {
	grid-area: origin;
}
.opportunities__speed {
	grid-area: speed;
}
.opportunities__everywhere {
	grid-area: everywhere;
}

.opportunities__item {
	box-shadow: var(--box-shadow);
	border-radius: 1.5rem;
	font-size: var(--font-size-m);
	color: var(--text-color-first);
	padding: 1rem;
	display: flex;
	flex-direction: column;
}

.opportunities__details {
	margin-top: auto;
	user-select: none;
	cursor: pointer;
}

.opportunities__entities {
	grid-area: entities;
	background-color: var(--bg-color-second);
	background-image: url(./images/bus.svg), url(./images/road.svg);
	background-repeat: no-repeat, no-repeat;
	background-position: 100% 100%, 0% 50%;
	border-radius: 1.5rem;
	padding: 2.25rem;
	color: var(--text-color-second);
}

.opportunities__entities-header {
	font-size: var(--font-size-l);
	font-weight: 500;
}

.opportunities__entities-list {
	display: flex;
	margin-top: 1.5rem;
	flex-direction: column;
	gap: 1.25rem;
}

footer {
	background: var(--bg-color-second) url(./images/road-2.svg) no-repeat 0% 0%;
	padding: 4rem 6rem;
	margin-top: 4rem;
	color: var(--text-color-second);
	font-size: var(--font-size-m);
}

.footer__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.5rem;
	justify-content: space-between;
	font-weight: 300;
}

.footer__grid > div:not(.footer__logo, .footer__contacts) {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.footer__grid > div:not(.footer__logo, .footer__contacts) > span:first-child {
	margin-bottom: 1rem;
	font-weight: 500;
}

.footer__grid
	> div:not(.footer__logo, .footer__contacts)
	> span:not(:first-child) {
	cursor: pointer;
}

.footer__contacts {
	background-color: var(--bg-color-first);
	padding: 2rem;
	border-radius: 1rem;
	color: var(--text-color-first);
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	font-weight: 400;
}

.footer__phone {
	font-size: var(--font-size-xl);
	font-weight: 300;
	color: #484f55;
}

.footer__contact {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.footer__contact-icons {
	display: flex;
	gap: 0.5rem;
}

.footer__button_statement {
	all: unset;
	background-color: var(--bg-color-second);
	color: var(--text-color-second);
	font-weight: 500;
	font-size: var(--font-size-s);
	padding: 0.5rem 0.75rem 0.5rem 1rem;
	border-radius: 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	user-select: none;
}

.footer__button_statement > img {
	background-color: var(--bg-color-first);
	padding: 0.3rem;
	border-radius: 0.75rem;
}

.footer__info_s {
	display: none;
}

.footer__info_m {
	display: flex;
	justify-content: space-between;
	margin-top: 5rem;
	font-size: var(--font-size-m);
	color: var(--text-color-sixth);
	gap: 0.5rem;
}

.footer__info_m > span:first-child {
	font-weight: 300;
}

.footer__info_m > span:last-child {
	font-weight: 300;
	text-decoration: underline;
}

input,
button {
	border-color: none;
	padding: 25px 20px;
	background-color: #f0f7ff;
	border: #378bee solid 1px;
	border-radius: 30px;
	/* color: #808080;
    opacity: 50%; */
	font-size: 20px;
}

.modal {
	display: none;
	position: fixed;
	z-index: 100;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.4);
	align-items: center;
	justify-content: center;
}

.modal-content {
	background-color: #fff;

	padding: 50px;
	font-size: 20px;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	color: #000;
	gap: 10px;
	border-radius: 30px;
	min-width: 500px;
}

.modal-try {
	font-size: 30px;
}

.modal-try-desc {
	font-size: 20px;
	color: #808080;
	margin-bottom: 30px;
	margin-top: 10px;
}

.modal-input-text {
	font-size: 15px;
	margin-top: 10px;
	margin-bottom: 5px;
}

.modal-input {
	border-radius: 10px;
}

.modal-btn {
	background-color: #378bee;
	color: #fff;
	margin-top: 20px;
	transition: 0.2s;
	user-select: none;
	border-radius: 10px;
}

.modal-btn:hover {
	background-color: #fff;
	color: #378bee;
}

@media (max-width: 590px) {
	.modal-content {
		background-color: #fff;
		/* margin: 14% auto;  */

		padding: 50px;
		/* width: 50%;  */
		font-size: 20px;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		color: #000;
		gap: 10px;
		border-radius: 30px;
		min-width: 400px;
	}
}

@media (max-width: 450px) {
	.modal-try {
		font-size: 20px;
	}
	.modal-try-desc {
		font-size: 15px;
		margin-bottom: 20px;
	}
	.modal-content {
		padding: 30px 25px;
		min-width: 300px;
	}
	.modal-btn {
		font-size: 15px;
		padding: 15px;
	}
	.modal-input {
		font-size: 15px;
	}
	input {
		padding: 15px;
	}
}

#modalForm {
	display: grid;
}





.hamburger {
    display: flex;
    position: fixed;
    z-index: 100;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0);
    flex-direction: row-reverse;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease; 
}

.hamburger.active {
    opacity: 1;
    background-color: rgba(0,0,0,0.4); 
    pointer-events: auto; 
}

.hamburger-menu {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: #fff;
    color: #000;
    padding: 80px 20px;
    transform: translateX(100%); 
    transition: transform 0.1s ease; 
}

.hamburger.active .hamburger-menu {
    transform: translateX(0); 
}

.hamburger-title{
    font-size: 24px;
    color: #000;
}

.hamburger-title:hover{
    color: #808080;
}

.hamburger-desc{
    font-size: 17px;
    color: #808080;
}

.hamburger-burger{
    position: fixed;
    top: 18px;
    right: 20px;
}

.header__phone2 {
	z-index: 999;
		background-color: var(--bg-color-fifth);
	color: var(--text-color-fifth);
	border-radius: 0.75rem;
	padding: 0 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--font-size-m);
	white-space: nowrap;
}


.header__phone-menu1 {
	margin-top: 20px;
}