/* CSS Reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.required-placeholder::placeholder {
	color: gray; /* Цвет обычного плейсхолдера */
}


html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

body {
	line-height: 1.5;
	font-family: Arial, sans-serif;
}

header {
	position: fixed; /* Если хедер фиксированный */
	top: 0;
	left: 0;
	width: 100%;
	height: 80px; /* Укажите нужную высоту */
	z-index: 10; /* Хедер будет над основным контентом */
}

main {
	margin: 100px 0; /* Отступ для основного контента, равный высоте хедера */
	flex: 1; /* Растягиваем основной контент */
}

footer {
	background-color: #2c2c54;
	color: white;
	padding: 20px;
	text-align: center;
	margin-top: auto;
	width: 100%;
}

label,
button,
span,
input,
div {
	font-family: Montserrat, sans-serif;
}

p,
a,
h1,
h2,
h3,
h4,
h5,
h6 {
	color: #15004d;
	font-family: Montserrat, sans-serif;
	margin: 0;
}

a,
button {
	text-decoration: none; /* Убирает подчеркивание для ссылок */
}

a:active,
a:focus,
button:active,
button:focus {
	text-decoration: none; /* Убирает подчеркивание при нажатии и фокусе */
	outline: none; /* Убирает обводку, если нужно */
}

.main-container {
	max-width: 1400px;
}
.horizontal-container {
	display: flex;
	gap: 30px;
	margin-top: 30px;
}

.cta-section {
	display: flex;
	gap: 20px;
	justify-content: space-between;
}

.services .block-link,
.cta-section .block-link {
	width: 100%;
}

.block {
	background-color: #e9e8ff;
	width: 100%;
	border-radius: 30px;
	display: flex;
	flex-direction: column;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
	min-height: 300px; /* Минимальная высота блоков */
	overflow: hidden;
}

.block.large {
	max-width: 630px;
	height: 630px;
	position: relative;
	padding: 41px 43px;
	display: flex;
	justify-content: space-between;
}

.block.medium {
	width: 630px;
	height: 300px;
	position: relative;
	padding: 41px 30px;
	display: flex;
	justify-content: space-between;
}

.block.small {
	position: relative;
	padding: 29px 30px;
	display: flex;
	justify-content: space-between;
}

.contact {
	background-color: #3a00d4;
	color: white;
}

.contact .uppercase-text,
.contact .section-heading {
	color: white; /* Устанавливаем белый цвет для текста в .uppercase-text, если родитель имеет класс .contact */
}

.contact-link {
	color: white;
	text-decoration: none;
	font-size: 24px;
	display: inline-block;
}

.btn {
	display: flex; /* Используем Flexbox */
	justify-content: center; /* Центрируем по горизонтали */
	align-items: center;
	padding: 10px 20px;
	max-width: 300px;
	width: 100%;
	max-height: 60px;
	height: 100%;
	border-radius: 30px;
	text-decoration: none;
	z-index: 2;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
}

.btn-primary {
	border-color: #3a00d4; /* Новый цвет границы */
}

.btn-primary:hover {
	background-color: #2900a8; /* Цвет фона при наведении (немного темнее для эффекта) */
	border-color: #2900a8; /* Цвет границы при наведении */
	text-decoration: none;
}

/* Цвет при нажатии */
.btn-primary:active {
	background-color: #4b3199 !important; /* Ещё более тёмный синий */
	color: #ffffff; /* Цвет текста */
}

.package-img {
	max-width: 100%;
	height: auto;
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: 0;
}

.truck-img {
	max-width: 100%;
	height: auto;
	margin-top: 10px;
	position: absolute;
	right: 0;
	top: 0;
}

.mini-icon-img {
	max-width: 100%;
	height: auto;
	margin-top: 29px;
	margin-right: 31px;
	position: absolute;
	right: 0;
	top: 0;
}

.extra-section-heading {
	position: relative;
	font-size: 70px;
	font-weight: 700;
	text-align: left;
	color: #15004d;
	z-index: 2;
}

.section-heading {
	font-size: 42px;
	font-weight: 600;
	text-align: left;
	color: #15004d;
	z-index: 2;
}

:lang(ky) .section-heading {
	font-size: 32px;
}

:lang(kk) .section-heading {
	font-size: 34px;
}

.uppercase-text {
	display: block;
	width: 100%;
	max-width: 300px;
	position: relative;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 500;
	z-index: 2;
	text-decoration: none;
}

.block.small .uppercase-text.block-text {
	max-width: 190px;
}

.features-section {
	position: relative;
	margin-top: 140px;
}

.features-section .section-heading {
	margin-bottom: 40px;
}

.more-info {
	display: flex;
	flex-direction: column;
}

.more-info .uppercase-text img {
	margin-left: 10px;
	vertical-align: 0;
}

.features-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

.feature-item {
	background-color: #f8fafa;
	padding: 32px 45px;
	border-radius: 30px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.feature-item img {
	width: 50px;
	height: 50px;
}

.feature-icon {
	margin-right: 20px;
	margin-bottom: 18px;
}

.feature-content h3 {
	font-size: 18px;
	font-weight: 700;
	color: #15004d;
	margin-bottom: 9px;
	text-transform: uppercase;
}

.feature-content p {
	max-width: 480px;
	font-size: 16px;
	font-weight: 400;
}

.contact-form-content {
	z-index: 2;
}

.contact-form-content p {
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 35px;
}

.contact-form {
	z-index: 2;
}

.form-input {
	padding: 15px;
	max-width: 450px;
	width: 100%;
	border-radius: 30px;
	border: none;
	font-size: 16px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.form-image {
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: 0;
}

.form-image img {
	max-width: 100%;
	height: auto;
	border-radius: 20px;
}

/* Секция новостей */
.news-section {
	margin-top: 140px;
}

.news-section .section-heading {
	font-weight: 600;
	margin-bottom: 40px;
}

.news-slider {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.news-wrapper {
	display: flex;
	transition: transform 0.5s ease-in-out;
	will-change: transform;
}

.news-wrapper .news-item {
	flex: 0 0 100%;
	display: flex;
	align-items: stretch; /* Выравниваем по высоте */
	margin-bottom: 20px;
	border-radius: 10px;
	overflow: hidden; /* Обрезаем содержимое, выходящее за границы */
	justify-content: center;
}

.news-wrapper .news-image {
	flex: 3;
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 100%;
}

.news-wrapper .news-image img {
	width: 100%;
	height: 100%; /* Высота определяется автоматически */
	max-height: 300px;
}

.news-wrapper .news-content {
	flex: 2;
	padding: 20px;
	display: flex;
	flex-direction: column;
	margin-left: -48px;
	z-index: 0;
	max-width: 500px;
	padding-left: 80px;
	max-width: 100%;
	word-wrap: break-word;
	white-space: normal;
}

.news-wrapper .news-title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
	max-width: 360px;
}

.news-wrapper .news-description {
	font-size: 14px;
	color: #333;
	flex-grow: 1;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 5; /* Ограничиваем количество строк */
	-webkit-box-orient: vertical;
}

.news-wrapper .news-date {
	font-size: 12px;
	color: #999;
	margin-top: 10px;
}

.news-wrapper .news-arrow {
	text-align: right;
	margin-top: 10px;
}

.news-wrapper .news-arrow img {
	width: 16px;
	height: auto;
}

.news-page .news-link {
	display: block;
}

.news-link {
	display: inline-flex;
	text-decoration: none;
	min-width: 100%; /* Гарантирует, что новость будет занимать всю ширину контейнера */
}

.news-item {
	display: flex;
	min-width: 100%;
	box-sizing: border-box;
	padding: 0 14%;
	overflow: hidden;
}

.news-list .news-link .news-item {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.news-list .news-link .news-item:hover {
	transform: scale(1.05);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	z-index: 10;
}

.slider-btn-left {
	left: 10px;
}

.slider-btn-right {
	right: 10px;
}
/* Кнопки навигации */
.slider-btn {
	background-color: transparent;
	border: none;
	cursor: pointer;
	z-index: 2;
	padding: 10px;
}

.slider-btn-left {
	position: absolute;
	left: 0;
}

.slider-btn-right {
	position: absolute;
	right: 0;
}

.slider-btn-right img {
	transform: rotate(180deg);
}

.news-item.active {
	display: flex; /* Показываем активный слайд */
	opacity: 1;
	position: relative; /* Переключение слайда */
}

.news-item.hidden {
	opacity: 0; /* Скрываем неактивные слайды */
}

/* Изображение новости */
.news-image img {
	border-radius: 30px;
	width: 100%;
	height: auto;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Контент новости */
.news-content {
	position: relative;
	flex-grow: 1;
	max-width: 400px; /* Ширина контента */
	padding: 78px 80px 0 30px;
	width: 40%;
	border-radius: 30px;
	background-color: #f8fafa;
}

.news-title {
	text-transform: uppercase;
	max-width: 100%;
	font-size: 24px;
	font-weight: 600;
	color: #15004d;
	margin-bottom: 12px;
}

.news-description {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	max-width: 440px;
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 29px;
}

.news-date {
	font-size: 14px;
	margin-bottom: 10px;
}

/* Иконка стрелки */
.news-arrow {
	align-self: flex-end;
}

.news-arrow img {
	position: absolute;
	right: 27px;
	top: 32px;
	height: auto;
}

.news-full-view {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	background-color: #fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
}

.news-full-view .news-title {
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 20px;
	color: #333;
}

.news-full-view .news-date {
	font-size: 14px;
	color: #888;
	margin-bottom: 20px;
}

.news-full-view .news-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin-bottom: 20px;
}

.news-full-view .news-author {
	display: inline-block;
	font-size: 16px;
	margin-bottom: 20px;
	color: #666;
}

.news-full-view .news-content {
	font-size: 18px;
	width: 100%;
	max-width: 100%;
	line-height: 1.6;
	color: #555;
	margin-bottom: 20px;
}

.news-full-view .news-content a {
	color: #3a00d4; /* Устанавливаем нужный цвет для ссылок */
	text-decoration: none; /* Убираем подчеркивание, если оно не нужно */
}

.news-full-view .news-content a:hover {
	color: #2a00a5; /* Добавьте более тёмный цвет при наведении, если нужно */
	text-decoration: underline; /* Добавляем подчёркивание при наведении, если нужно */
}

.news-full-view .news-metadata {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #999;
	margin-top: 30px;
}

@media (max-width: 1260px) {
	.cta-section {
		align-items: center;
	}

	.form-image img {
		max-width: 97%;
	}
}

/* Медиа-запрос для планшетов (1024px) */
@media (max-width: 1024px) {
	.news-wrapper .news-content {
		margin-left: 0;
		padding: 30px;
		margin-top: -30px;
		z-index: -2;
		padding-top: 50px;
	}

	.history .history-image {
		width: 100%;
		flex-direction: column;
	}

	.about-company .history-image img {
		width: 100%; /* Изображение занимает всю ширину контейнера */
		height: auto; /* Высота автоматически подстраивается, чтобы сохранить пропорции */
		object-fit: cover; /* Обрезает изображение, чтобы заполнить контейнер, сохраняя пропорции */
		max-height: 400px; /* Ограничиваем максимальную высоту изображения */
		display: block; /* Убираем возможные отступы снизу */
	}

	.news-wrapper .news-item {
		align-items: center;
	}

	.faq-content .section-heading {
		font-size: 38px;
	}

	.faq-content .btn {
		width: auto;
	}

	.feature-item {
		height: 100%;
	}

	.personal-info-section {
		display: flex !important;
		flex-direction: column !important;
	}

	.desktop-version .col-4 {
		margin: 0;
		width: 50%;
	}

	.desktop-version .col-5 {
		margin: 0;
		width: 50%;
	}

	.desktop-version .col-3 {
		width: 100%; /* Заменяет col-3 на полную ширину */
		flex-basis: 100%; /* Становится полной ширины */
	}

	.desktop-version .col-9 {
		width: 100%; /* Заменяет col-9 на полную ширину */
		flex-basis: 100%; /* Становится полной ширины */
	}

	.news-item {
		flex-direction: column;
		align-items: center;
		text-align: left;
	}

	.news-image img {
		width: 100%;
		border-radius: 20px;
	}

	.news-content {
		padding: 30px 20px;
		width: 100%;
	}

	.news-arrow img {
		right: 26px;
		top: auto;
		bottom: 40px;
	}
}

/* Медиа-запрос для мобильных устройств (768px и меньше) */
@media (max-width: 768px) {
	.news-slider {
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}

	.news-section {
		margin-top: 100px;
	}

	.news-section .section-heading {
		font-size: 32px;
		font-weight: 600;
		margin-bottom: 30px;
	}

	.news-wrapper {
		display: flex;
		gap: 20px;
		scroll-snap-type: x mandatory;
		width: 100%;
	}

	.news-item {
		flex: 0 0 80%; /* Ширина карточек на мобильных */
		scroll-snap-align: start;
		padding: 0;
		min-width: auto;
	}

	/* Скрываем кнопки в мобильной версии */
	.slider-btn {
		display: none;
	}
}

/* Медиа-запрос для маленьких мобильных устройств (480px и меньше) */
@media (max-width: 480px) {
	.news-section {
		padding: 20px 0;
	}

	.news-title {
		font-size: 18px;
	}

	.news-description {
		font-size: 12px;
	}

	.news-date {
		font-size: 10px;
	}

	.news-arrow img {
		width: 20px;
	}
}

/* Секция FAQ */
.faq-section {
	position: relative;
	display: flex;
	margin-top: 141px;
	padding: 40px 45px;
	border: 2px solid #ffcc00; /* Желтая рамка */
	border-radius: 30px;
	background-color: #ffffff;
}

/* Контент FAQ слева */
.faq-content {
	width: 40%;
}

.faq-questions {
	width: 60%;
}

.faq-content .btn {
	margin-top: 45px;
}

.faq-content .section-heading {
	max-width: 300px;
}

.btn-primary {
	background-color: #3a00d4;
	color: white;
	padding: 15px 30px;
	border-radius: 30px;
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
}

.more-parcel-info {
	background-color: #3a00d4;
	color: white;
	border-radius: 30px;
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 10px;
}
/* Общий стиль для faq-item */
.faq-item {
	transition: height 0.3s ease;
}

/* Вопрос и кнопка в одной строке */
.faq-question-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Стиль для вопроса */
.faq-question {
	font-size: 16px;
	margin: 0;
}

/* Стиль для стрелки */
.arrow-icon {
	transition: transform 0.3s;
}

/* Поворот стрелки при активном состоянии */
.arrow-icon.rotated {
	transform: rotate(180deg);
}

/* Стиль для ответа */
.faq-section-wrapper .faq-answer {
	display: none;
	max-width: 100%;
}

.faq-section-wrapper .faq-item.expanded .faq-answer {
	display: block;
}

/* Линия между вопросами */
.faq-line {
	border: 1px solid #ffcc00;
	width: 100%;
	margin: 20px 0;
}

.faq-toggle {
	background-color: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
}

.faq-toggle:focus {
	outline: none; /* Убирает обводку при фокусе */
}

.faq-section-wrapper .arrow-icon {
	display: inline-block;
	transition: transform 0.3s ease;
}

.faq-section-wrapper .rotated {
	transform: rotate(180deg);
}

@media screen and (max-width: 1024px) {
	.block.large {
		max-width: 100%g;
	}
	
}

@media (max-width: 768px) {
	/* Отключаем фиксированные ширины для блоков */
	.block.large,
	.block.medium,
	.block.small {
		width: 100%;
		height: auto;
	}

	.block.small {
		height: 160px;
		min-height: auto;
		justify-content: space-between;
	}

	/* Ставим блоки друг под другом */
	.horizontal-container {
		display: flex;
		flex-direction: column;
		margin-top: 20px;
	}

	/* Центрируем текст и кнопки */
	.block .btn {
		position: static;
		width: 100%;
	}

	.block .extra-section-heading {
		margin-top: 16px;
	}

	.section-heading {
		font-size: 24px;
		margin-left: 0;
	}

	.medium .section-heading.cta-blocks-heading {
		font-size: 32px;
		max-width: 250px;
	}

	.small .section-heading.cta-blocks-heading {
		font-size: 32px;
	}

	.block {
		position: relative; /* Чтобы потомки с position: absolute были позиционированы относительно этого блока */
		width: 100%; /* Для примера */
	}

	.block.large .btn {
		width: 100%;
		max-width: 100%;
		padding: 14px 20px;
		height: 45px; /* Центрируем кнопку */
		margin-top: 100px;
		display: flex;
		align-content: center;
	}

	.truck-img {
		bottom: 0;
		top: auto;
	}

	.mini-icon-img {
		margin-top: 30px;
		margin-right: 26px;
	}

	.package-img {
		bottom: 40px;
	}

	.features-section {
		display: flex;
		flex-direction: column;
	}

	.features-section .section-heading {
		font-size: 32px;
		margin-bottom: 30px;
	}

	.features-section .uppercase-text {
		font-size: 18px;
		margin-top: 39px;
		text-align: end;
		max-width: 100%;
	}

	.contact-form .btn {
		max-width: 100%;
	}

	.more-info {
		bottom: -69px;
	}

	.features-container {
		display: grid; /* Устанавливаем display: grid для мобильных устройств */
		grid-template-columns: 1fr; /* Одна колонка для мобильных устройств */
		gap: 20px; /* Уменьшаем расстояние между элементами */
	}

	.feature-item {
		width: 100%; /* Делаем ширину 100% на мобильных устройствах */
		height: auto; /* Автоматическая высота */
	}

	/* Секцию с новостями делаем блочной */
	.news-slider {
		flex-direction: column;
		align-items: flex-start;
	}

	.contact-form-content .section-heading {
		font-size: 32px;
	}

	.contact-form-content p {
		margin-top: 16px;
	}

	.faq-section {
		flex-direction: column; /* Изменяем направление на колонку */
		padding: 20px;
		margin-top: 100px;
	}

	/* Контент слева (вопросы) будет сверху, а кнопка — снизу */
	.faq-content {
		width: 100%;
		margin-bottom: 20px; /* Добавляем отступ снизу */
		text-align: center; /* Центрируем текст */
	}

	.faq-content .section-heading {
		font-size: 32px;
	}

	.faq-content .btn {
		position: static; /* Убираем абсолютное позиционирование */
		margin: 20px auto; /* Центрируем кнопку */
		display: block;
		width: 100%;
	}

	.faq-questions {
		width: 100%; /* Ширина 100% */
	}

	.faq-item {
		flex-direction: row; /* Меняем направление на колонку */
		align-items: center; /* Центрируем элементы */
		text-align: left;
	}

	.faq-item p {
		font-size: 14px; /* Уменьшаем шрифт */
		margin-bottom: 10px;
	}

	.faq-item img {
		margin: 0; /* Убираем отступ */
		height: 31px;
		width: 31px;
		max-width: none;
	}

	.faq-line {
		width: 100%;
		margin: 10px 0;
	}

	.faq-link {
		margin-top: 10px;
	}
}

.auth-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	margin: 60px auto 180px;
}

.auth-form {
	background-color: #f8fafa;
	padding: 50px 80px 98px;
	border-radius: 20px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	text-align: left;
	max-width: 849px;
	width: 100%;
	height: 100%;
	position: relative;
}

.auth-form p {
	font-weight: 500;
	font-size: 24px;
	max-width: 500px;
	margin-bottom: 32px;
}

.input-field {
	margin-bottom: 15px;
}

.input-field input {
	width: 100%;
	padding: 12px 30px;
	border: none;
	border-radius: 30px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 16px;
	background: #fff;
	color: #15004d;
}

.google-auth button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 12px;
	border: 2px solid #ccccff;
	border-radius: 30px;
	background-color: white;
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: #15004d;
}

.google-auth button:focus {
	border-color: #5638df; /* Синяя обводка при нажатии */
	box-shadow: 0 0 5px rgba(86, 56, 223, 0.5); /* Дополнительное свечение */
	outline: none; /* Убираем стандартный фокус браузера */
}

.google-auth button img {
	object-fit: cover;
	margin-left: 7px;
	margin-right: 7px;
	width: 30px;
	transform: translateY(2px);
}

.auth-button button {
	width: 100%;
	padding: 12px;
	border: none;
	border-radius: 30px;
	background-color: #5638df;
	color: white;
	font-size: 16px;
	cursor: pointer;
}

.auth-button {
	display: flex;
	justify-content: end;
}

.register-link {
	display: inline;
	margin-top: 11px;
	color: #3a00d4;
	text-decoration: none;
}

.auth-footer {
	display: flex;
	justify-content: flex-end; /* Выровнять по правому краю */
	margin-top: 10px; /* Отступ сверху, чтобы отделить от других элементов */
}

.register-link:hover {
	text-decoration: underline;
}

@media (max-width: 767px) {
	.contact-form .btn {
		margin-top: 20px;
	}
}

@media (max-width: 768px) {
	.auth-container {
		margin: 0 0 30px;
	}

	.auth-form {
		padding: 30px 20px;
		max-width: 100%;
		max-height: none;
		height: auto;
		text-align: center;
	}

	.auth-form h2,
	.auth-form p {
		text-align: center;
		font-size: 18px;
	}

	.input-field,
	.google-auth,
	.auth-button {
		width: 100%;
		margin-bottom: 15px;
		justify-content: center;
	}

	.google-auth button {
		justify-content: center;
	}

	.register-link {
		position: static;
		margin: 20px auto 0;
		text-align: center;
		display: block;
	}

	.auth-form .section-heading {
		font-size: 32px;
	}
}

.personal-info-container {
	margin-bottom: 180px;
}

.sidebar {
	width: 100%;
	height: 100%;
	max-height: 450px;
	background-color: #e9e8ff; /* Светло-фиолетовый фон */
	padding: 32px 20px 36px;
	border-radius: 30px; /* Закругление углов */
	text-align: center;
	font-family: 'Arial', sans-serif; /* Шрифт */
	flex-shrink: 0;
}

.sidebar ul .logout-link {
	color: #ff4c4c; /* Яркий красный оттенок, вы можете заменить его нужным вам */
	font-weight: bold;
}

.sidebar ul .logout-link:hover {
	color: #d43f3f; /* Темный оттенок для эффекта наведения */
}

.sidebar ul li.active a {
	font-weight: 800;
	text-decoration: none; /* Убираем подчеркивание */
}

.sidebar ul {
	list-style: none;
	padding: 0;
}

.sidebar ul li {
	margin-bottom: 37px;
}

.sidebar ul li:last-child {
	margin-bottom: 0;
}

.sidebar ul li a {
	font-weight: 500;
	text-decoration: none;
	color: #2c2249; /* Цвет текста */
	font-size: 18px; /* Размер шрифта */
}

.sidebar ul li a:hover {
	color: #6c63ff; /* Цвет текста при наведении */
}

.sidebar ul .new-package-link {
	font-weight: bold;
	color: #3a00d4; /* Цвет для пункта "НОВАЯ ПОСЫЛКА" */
}

.sidebar h2 {
	font-size: 20px;
	font-weight: bold;
	color: #2c2249; /* Темный цвет для заголовка */
	margin-bottom: 30px; /* Отступ ниже заголовка */
}
.sidebar .active {
	font-weight: 700;
}

.desktop-version .row {
	margin-bottom: 30px;
}

.chat-detail-content,
.chat-content,
.branch-content,
.personal-info-content,
.my-packages-content,
.tracking-content {
	background-color: #e9e8ff;
	border-radius: 30px;
	height: 100%;
	width: 100%;
}

.chat-detail-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.chat-detail-content .message {
	margin: 10px 0;
	width: 80%;
	background-color: #fff;
	padding: 18px 40px 25px 35px;
	border-radius: 30px 30px 30px 0;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}

.chat-detail-content .chat-arrow {
	transform: rotate(90deg);
}

.chat-detail-content .chat-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #f8fafa;
	padding: 15px 20px;
	border-radius: 15px;
}

.chat-detail-content .chat-number {
	font-weight: 700;
	font-size: 24px;
}

.chat-detail-content .chat-client {
	font-weight: 400;
	font-size: 24px;
}

.chat-detail-content .chat-messages {
	padding: 15px 20px;
	border-radius: 15px;
}

.chat-detail-content .chat-message {
	background-color: #ffffff;
	padding: 15px;
	border-radius: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.chat-detail-content .message p {
	margin: 0;
	color: #aeaeae;
	font-size: 18px;
	font-weight: 500;
}

.chat-detail-content .message-time {
	font-weight: 400;
	font-size: 16px;
	color: #aeaeae;
}

.chat-detail-content .chat-input-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #f8fafa;
	padding: 15px 20px;
	border-radius: 30px;
	margin: 0 43px 35px;
}

.chat-detail-content .chat-input {
	border: none;
	outline: none;
	width: 100%;
	font-size: 16px;
	color: #aeaeae;
	background-color: transparent;
}

.chat-detail-content .chat-send-button {
	background-color: transparent;
	border: none;
	border-radius: 50%;
	padding: 10px 18px;
	cursor: pointer;
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 768px) {
	.chat-detail-content .chat-number {
		font-size: 16px;
	}

	.chat-detail-content .chat-client {
		font-size: 20px;
	}

	.chat-detail-content .message-time {
		bottom: 19px;
		right: 17px;
		position: absolute;
		margin: 0;
		padding-left: 10px; /* Отступ между текстом и временем */
	}

	.chat-detail-content .message p {
		margin: 0;
	}

	.chat-detail-content .message {
		padding: 18px 30px 40px;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: flex-end; /* Или center для вертикального выравнивания */
	}

	.chat-detail-content .chat-header {
		flex-direction: column;
		align-items: flex-center;
	}

	.chat-detail-content .chat-input-container img {
		min-width: 20px;
		min-height: 20px;
	}

	.chat-detail-content .chat-input {
		margin-left: 8px;
	}

	.chat-detail-content .chat-input-container {
		padding: 11px 23px;
		margin: 0;
		margin-top: 160px;
	}

	.chat-detail-content .chat-arrow {
		display: none;
	}

	.chat-detail-content .chat-send-button {
		padding: 0;
	}
}

.chat-content {
	padding: 20px;
}

.chat-content .chat-item {
	background-color: #ffffff;
	padding: 15px 20px;
	border-radius: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.chat-content .chat-info {
	width: 70%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.chat-content .chat-number {
	font-weight: 700;
	font-size: 24px;
}

.chat-content .chat-recipient {
	font-weight: 400;
	font-size: 24px;
}

.chat-content .chat-status {
	width: 15%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}

.chat-content .status-circle {
	background-color: #3a00d4;
	color: white;
	font-weight: 800;
	font-size: 20px;
	font-weight: bold;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.chat-content .chat-item:last-child {
	margin-bottom: 0;
}

/* Мобильная версия */
@media (max-width: 768px) {
	.chat-content {
		padding: 25px 25px 80px;
	}

	.chat-content .chat-item {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		padding: 25px 25px 35px;
		position: relative;
	}

	.chat-content .chat-info {
		display: flex;
		flex-direction: column;
	}

	.chat-content .status-circle {
		position: absolute;
		right: 10px;
		top: -10px;
	}

	.chat-content .chat-status {
		display: flex;
		margin-top: 10px;
		flex-direction: column;
	}

	.chat-content .chat-status img {
		transform: rotate(90deg);
	}
}

.branch-content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 50px;
}

.branch-content .address-content {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.branch-content .your-address {
	margin-bottom: 48px;
}

.branch-content h3 {
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	color: #000;
	margin-bottom: 15px;
}

.branch-content .pickup-address-list {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}

.branch-content .pickup-address {
	width: 75%;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	margin-top: 10px;
}

.branch-content p {
	font-size: 16px;
	color: #333;
}

.branch-content .arrow-button {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 15%;
}

.branch-content .arrow-btn {
	background-color: #6200ee;
	border: none;
	border-radius: 10px;
	padding: 15px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media (max-width: 768px) {
	.branch-content .pickup-address-list {
		display: flex;
		flex-direction: column;
	}

	.branch-content .pickup-address p {
		text-align: left;
	}

	.branch-content .pickup-address {
		display: flex;
		flex-direction: column;
	}

	.branch-content .arrow-button {
		align-self: flex-end;
		min-height: 60px;
		min-width: 60px;
	}

	.branch-content {
		display: flex;
		flex-direction: row;
		padding: 25px 25px 60px;
	}
}

.personal-info-content {
	width: 100%;
	max-width: 1000px;
	border-radius: 20px;
	padding: 30px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

.personal-info-content label.required::after {
	content: '*';
	color: #6200ee; /* Синий цвет для звездочки */
	margin-left: 3px;
	font-size: 18px;
	vertical-align: top;
}

.personal-info-content .form-section {
	border-radius: 20px;
}

.personal-info-content .section-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	background-color: white;
	padding-right: 10px;
	border-radius: 20px;
	margin-bottom: 44px;
}

.personal-info-content .section-number {
	background-color: #6200ee;
	color: white;
	font-size: 22px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.personal-info-content .uppercase-text {
	color: #393939;
	font-weight: 600;
	font-size: 18px;
}

.personal-info-content h3 {
	font-size: 18px;
	color: #6200ee;
	margin: 0;
}

.personal-info-content .section-content {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.personal-info-content .form-group {
	display: flex;
	flex-direction: column;
}

.personal-info-content label {
	font-size: 14px;
	color: #333;
	margin-bottom: 5px;
}

.personal-info-content input {
	width: 100%;
	padding: 10px;
	border: 2px solid #ddd;
	border-radius: 30px;
	font-size: 16px;
	color: #333;
	margin-bottom: 40px;
}

.personal-info-content input:focus {
	outline: none;
	border-color: #6200ee;
}

.personal-info-content .small-group {
	display: flex;
	gap: 15px;
}

/* Контейнер для кнопки "Сохранить пароль" */
.personal-info-content .save-password-container {
	grid-column: 2;
	display: flex;
	justify-content: flex-end; /* Размещаем кнопку справа */
	margin-bottom: 20px; /* Отступ снизу для правильного расстояния между кнопками */
}

/* Стиль для кнопки "Сохранить пароль" */
.personal-info-content .save-password {
	background-color: transparent;
	color: #6200ee;
	border: none;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	display: flex;
	align-items: center;
}

.personal-info-content .save-password img {
	margin-left: 14px;
	filter: invert(22%) sepia(85%) saturate(2714%) hue-rotate(244deg)
		brightness(91%) contrast(103%);
	/* Этот фильтр перекрасит изображение в цвет #3A00D4 */
}

/* Контейнер для кнопки "Оплатить" */
.personal-info-content .form-actions {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-start; /* Кнопка оплаты остается слева */
	align-items: center;
}

.personal-info-content .save-password:hover {
	text-decoration: underline;
}

/* Медиа-запросы для адаптивности */
@media (max-width: 768px) {
	.personal-info-content {
		grid-template-columns: 1fr;
	}

	.personal-info-content .save-password-container {
		grid-column: auto;
	}

	.personal-info-content .small-group {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.personal-info-content .form-actions {
		flex-direction: column;
		gap: 15px;
	}
}

.tracking-content {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 40px;
}

.tracking-content .search-input {
	width: 100%;
	max-width: 600px;
	height: 60px;
	padding: 15px 30px;
	border: none;
	border-radius: 30px; /* Закругление для всего поля */
	outline: none;
	background-color: #fff;
	margin-right: -120px; /* Сдвигаем правый край за кнопку */
}

.filter-bar {
	margin: 0 20px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 11px 0 11px;
	gap: 25px;
}

.mobile-version input:focus,
.my-packages-content input:focus {
	outline: none;
	border-color: #6200ee;
}

.my-packages-content .table-container {
	overflow-y: auto;
	overflow-x: auto;
}

.fixed-header thead {
	position: sticky;
	top: 0;
	background-color: #ffffff; /* Фон для заголовка */
	z-index: 1;
}

.fixed-header thead,
.fixed-header tbody {
	display: block;
	width: 100%;
}

.fixed-header th,
.fixed-header td {
	width: 150px; /* Пример фиксированной ширины */
}

.my-packages-content .search-input {
	border-color: #000;
	max-width: 250px;
	width: 100%;
	max-width: 250px;
}

.my-packages-content .filter-dropdown {
	border-color: #000;
}

.pagination .prev.disabled img,
.pagination .next.disabled img {
	display: none;
}

.filter-bar img {
	position: absolute;
	right: 15px; /* Иконка справа */
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none; /* Иконка не кликабельна */
}

.filter-bar .dropdown-container {
	max-width: 200px;
	width: 100%;
	position: relative;
}

.filter-dropdown {
	width: 100%;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 14px;
	padding: 10px 20px;
	position: relative;
	border-radius: 30px; /* Сделать края более округлыми */
	border: 2px solid #6c63ff; /* Границы с фиолетовым цветом */
	background-color: transparent; /* Светло-фиолетовый фон */
	color: #2c2249; /* Темный текст */
	font-size: 14px;
	cursor: pointer;
	outline: none; /* Убрать стандартные очертания при фокусе */
	appearance: none; /* Убрать стрелку по умолчанию */
}

.personal-info-content .filter-dropdown {
	background-color: #fff;
	border: 2px solid #ddd;
}

.search-input {
	padding: 10px 40px 10px 15px; /* Отступы для текста и места под иконку */
	border-radius: 30px; /* Сделать края более округлыми */
	border: 2px solid #6c63ff;
	background-color: transparent;
	/* Светло-фиолетовый фон */
	color: #2c2249; /* Цвет текста */
	font-size: 14px;
	width: 200px;
}

.search-container {
	max-width: 250px;
	width: 100%;
	position: relative;
}

.search-container img {
	position: absolute;
	right: 10px; /* Расположение иконки внутри поля */
	top: 50%;
	transform: translateY(-50%);
	width: 20px; /* Ширина иконки */
	height: auto;
	pointer-events: none; /* Иконка не кликабельна */
}

.table {
	width: 100%;
	border-collapse: collapse;
	background-color: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.table th,
.table td {
	padding: 15px;
	text-align: center;
	font-size: 14px;
	color: #333;
}

.table th {
	vertical-align: middle;
	background-color: #f5f5f5;
	color: #2c2249;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
}

.table td {
	vertical-align: middle;
	border-bottom: 1px solid #e7e1fa;
	font-family: 'Montserrat', sans-serif;
}

.table td:first-child,
.table td:nth-child(3),
.table td:nth-child(4) {
	font-weight: bold;
	color: #2c2249;
}

.table-actions {
	display: flex;
	justify-content: flex-end;
	padding: 71px 24px 31px;
}

.table-actions button {
	padding: 10px 10px;
	border: none;
	border-radius: 30px;
	font-size: 14px;
	cursor: pointer;
	margin-left: 10px;
}

.table-actions .btn {
	font-size: 18px;
}

.archive,
.delete {
	background-color: transparent;
	color: #aeaeae;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	color: #aeaeae;
	display: flex;
	align-items: center;
	justify-content: center; /* Если нужно центрировать иконки горизонтально */
	gap: 5px;
}

.desktop-version .flex-container {
	display: flex;
	align-items: flex-end; /* Выравнивание по вертикали к нижнему краю */
	justify-content: flex-end; /* Выравнивание по горизонтали к правому краю */
}

.desktop-version .row .section-heading {
	font-size: 36px;
	font-weight: 700;
	margin: 0;
}

.desktop-version .row h5 {
	margin: 0; /* Убрать любые отступы */
	font-weight: 700;
	font-size: 16px;
	text-align: end;
}

/* Стили по умолчанию для десктопной версии */
#mobile-version {
	display: none;
}

.mobile-version .timeline-location-wrapper {
	display: flex;
	gap: 17px;
}

.mobile-version .timeline-location {
	font-weight: 600;
	font-size: 12px;
	color: #707070;
}

.mobile-version .package-info .tracking-timeline p {
	font-weight: 500;
	margin: 0;
}

.mobile-version .timeline-event {
	justify-content: space-between;
	align-items: flex-start;
}

.mobile-version .timeline-event-content {
	width: 65%;
}

.mobile-version .timeline-line-wrapper {
	width: 20%;
	justify-content: flex-start;
}

.mobile-version .timeline-line::before {
	left: 49%;
	top: 18%;
	width: 3px;
}

.mobile-version .parcel-details,
.mobile-version .recipient-info {
	display: flex;
	gap: 40px;
	flex-direction: column;
}

.mobile-version .shipping-cost {
	margin-bottom: 60px;
}

.mobile-version hr {
	margin: 60px 0;
}

.mobile-version .timeline-line .progress-circle {
	width: 14px;
	height: 14px;
}

/* Медиазапрос для экранов шириной менее 1400px */
@media only screen and (max-width: 1400px) {
	.table th,
	.table td {
		padding: 8px;
		font-size: 14px;
	}

	.cta-blocks-group {
		width: 50%;
	}

	.block.small .uppercase-text.block-text {
		max-width: 170px;
	}

	.block.small,
	.block.medium {
		width: 100%;
	}

	.news-wrapper .news-image {
	}
}

/* Медиазапрос для экранов шириной менее 1265px */
@media only screen and (max-width: 1265px) {
	.sidebar ul li a {
		font-size: 16px;
	}

	.feature-item {
		height: 100%;
	}

	.sidebar ul li {
		margin-bottom: 30px;
	}

	.sidebar ul li:last-child {
		margin-bottom: 0;
	}

	/* Адаптация ширины контейнера */
	.personal-info-container {
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
		margin-bottom: 30px;
	}

	/* Боковая панель (если нужно скрыть или уменьшить её ширину) */
	.sidebar {
		margin: 0 10%;
		width: 80%; /* Уменьшаем ширину боковой панели */
		padding: 30px 10px;
	}

	/* Контейнер с таблицей */
	.my-packages-content {
		width: 100%;
	}

	/* Адаптируем фильтры */
	.filter-bar {
		justify-content: flex-end;
	}

	/* Таблица */
	.table th,
	.table td {
		padding: 5px;
		font-size: 11px;
	}

	/* Кнопки действий */
	.table-actions {
		display: flex;
		justify-content: space-between;
	}

	.table-actions button {
		flex: 1;
		margin-right: 10px;
	}

	.table-actions .btn {
		width: 100%;
	}
}

/* Для экранов еще меньшего размера */
@media only screen and (max-width: 1024px) {
	.sidebar {
		margin: 0;
		margin-bottom: 50px;
		width: 100%;
	}

	main {
		margin-bottom: 100px;
	}

	.my-packages-content {
		margin-top: 20px;
	}

	/* Корректируем таблицу под более узкие экраны */
	.table th,
	.table td {
		padding: 7px;
		font-size: 11px;
	}

	/* Для ещё меньших экранов */
	.table-actions button {
		margin-right: 5px;
	}

	/* Фильтр на всю ширину */
	.filter-dropdown,
	.search-input {
		width: 100%;
	}
}

/* Скрываем десктопную версию на мобильных устройствах */
@media only screen and (max-width: 768px) {
	#desktop-version {
		display: none;
	}

	/* Отображаем мобильную версию */
	#mobile-version {
		display: block;
	}

	.additional-info {
		height: 0;
		opacity: 0;
		overflow: hidden;
		transition: height 0.5s ease, opacity 0.5s ease;
	}

	.additional-info.show {
		opacity: 1;
	}

	.tracking-content {
		flex-direction: column;
		padding: 30px 25px 60px;
		height: 100%;
		width: 100%;
	}

	.tracking-content .search-input {
		margin-right: 0;
		margin-bottom: 30px;
		font-size: 16px;
	}

	.tracking-content .btn {
		max-width: none;
	}

	.package-info .status {
		margin-left: 20px;
		font-weight: 800;
		font-size: 18px;
		color: #3a00d4;
	}

	.tracking-timeline .timeline-date {
		align-content: center;
	}

	.timeline-location {
		font-weight: 600;
		font-size: 12px;
		color: #707070;
		margin-left: 17px;
	}

	.mobile-version .search-container {
		max-width: 100%;
	}

	.mobile-version .search-container .search-input {
		width: 100%;
	}

	.mobile-header {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 40px;
	}

	.mobile-header h5 {
		font-weight: 700;
		font-size: 16px;
	}

	.filter-dropdown,
	.search-input {
		padding: 10px 20px;
		border-radius: 30px;
		border: 1px solid #000;
		margin: 0;
	}

	.personal-info-content .filter-dropdown {
		background-color: #fff;
		border: 2px solid #ddd;
	}

	.personal-info-content .dropdown-container {
		display: block;
	}

	.filter-bar {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
	}

	.package-info {
		background-color: #f0f0ff; /* Светло-фиолетовый фон */
		border-radius: 15px;
		padding: 20px;
		width: 100%;
		font-family: Arial, sans-serif;
		margin-bottom: 30px;
	}

	/* Общие стили для контейнера */
	.package-selection div {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		font-family: 'Montserrat', sans-serif;
		font-size: 16px;
		color: #2e005f; /* Цвет текста */
	}

	/* Скрываем стандартные радио-кнопки */
	.package-selection input[type='radio'] {
		display: none;
	}

	/* Стили для label, чтобы радиокнопка была видна */
	.package-selection label {
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	/* Стили для кастомной радиокнопки */
	.package-selection label::before {
		content: '';
		display: inline-block;
		width: 20px;
		height: 20px;
		margin-right: 10px;
		border: 2px solid #6633ff;
		border-radius: 50%;
		background-color: transparent;
		transition: background-color 0.2s, border-color 0.2s;
		position: relative;
	}

	/* Внутренний кружок для состояния "checked" */
	.package-selection input[type='radio']:checked + label::before {
		background-color: #6633ff;
		border-color: #6633ff;
	}

	/* Внутренний заполненный кружок */
	.package-selection input[type='radio']:checked + label::before::after {
		content: '';
		position: absolute;
		width: 12px;
		height: 12px;
		background-color: #fff;
		border-radius: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* Эффект при наведении */
	.package-selection label:hover::before {
		border-color: #5a00e0;
	}

	.package-info label {
		font-family: 'Montserrat', sans-serif;
		font-weight: 700;
		font-size: 16px;
	}

	.package-info p {
		margin: 10px 0;
		color: #2b0d75;
		font-size: 16px;
	}

	.package-info p strong {
		font-weight: bold;
		color: #2b0d75;
	}

	.package-number p {
		font-weight: 600;
		font-size: 14px;
		margin-bottom: 0;
	}
	.package-number h3 {
		font-weight: 800;
		font-size: 24px;
		margin-bottom: 37px;
	}

	.package-info status {
		color: #3a00d4;
		font-weight: bold;
	}

	.package-info .status-info {
		margin-bottom: 48px;
	}

	/* Стили для мобильных кнопок */
	.mobile-actions {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
	}

	.secondary-buttons button {
		background-color: transparent;
		color: #6c757d;
		border: none;
		font-size: 14px;
		display: flex;
		align-items: center;
		gap: 5px;
		cursor: pointer;
	}

	.secondary-buttons button:hover {
		color: #2b0d75;
	}

	/* Кнопки "Архив" и "Печать" */
	.secondary-buttons {
		display: flex;
		margin-top: 25px;
		justify-content: space-between;
		width: 100%; /* Занимают всю ширину контейнера */
	}

	.archive,
	.print {
		padding: 10px;
		border-radius: 30px;
		font-family: 'Montserrat', sans-serif;
		font-weight: 500;
		font-size: 18px;
		text-transform: uppercase;
		color: #aeaeae;
	}

	.archive,
	.print {
		background-color: transparent;
		color: #2b0d75;
		width: 48%;
		border: 1px solid #2b0d75;
	}

	/* Основные стили для контейнера */
	.dropdown-container {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		margin: 0;
		max-width: 100%;
		position: relative;
		margin-bottom: 40px;
	}

	.filter-bar .dropdown-container {
		max-width: 100%;
	}

	.filter-bar .dropdown-container img {
		width: 17px;
		height: 9px;
		right: 25px;
	}

	.filter-bar .search-container img {
		right: 25px;
		cursor: pointer;
		pointer-events: all;
	}
}

/* Стили для кнопки выпадающего меню */
.dropdown-button {
	background-color: #f0f0ff;
	border: none;
	height: 70px;
	border-radius: 20px;
	padding: 10px 20px;
	font-size: 16px;
	color: #2b0d75;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%; /* Фиксированная ширина кнопки */
}

/* Стили для выпадающего меню */
.dropdown-content {
	display: none; /* По умолчанию скрыто */
	position: absolute;
	top: 100%; /* Позиционируем под кнопкой */
	left: 0;
	background-color: #f0f0ff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	padding: 10px;
	z-index: 5;
	min-width: 180px; /* Минимальная ширина совпадает с шириной кнопки */
}

.dropdown-content ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.dropdown-content ul li {
	padding: 10px;
}

.dropdown-content ul li a {
	text-decoration: none;
	color: #2b0d75;
	font-size: 16px;
	display: block;
}

.dropdown-content ul li a:hover {
	background-color: #e6e6ff; /* Изменение цвета при наведении */
	border-radius: 5px;
}

/* Активное состояние дропдауна */
.dropdown-content.show {
	display: block;
}

/* Стили для кнопки новой посылки */
.new-package-button {
	background-color: #f0f0ff;
	border: none;
	border-radius: 30%;
	width: 60px;
	height: 70px;
	font-size: 30px;
	color: #2b0d75;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

.new-package-button img {
	width: 30px;
	height: 30px;
}

/* Основные стили для модального окна */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный цвет */
	backdrop-filter: blur(5px); /* Размытие заднего фона */
	z-index: 1060; /* Модальное окно будет на переднем плане */
}

.modal-content {
	display: flex;
	flex-direction: row;
	background-color: #fff;
	margin: 5% 5%;
	border-radius: 30px;
	width: 100%;
	max-width: 90%;
}

.modal-left {
	background-color: #e9e8ff;
	padding: 39px 60px 60px 33px;
	max-width: 45%;
	border-radius: 30px;
	width: 100%;
}

.timeline-line-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center; /* Обеспечиваем выравнивание по верхней части */
	align-items: center;
	width: 2px;
	min-height: 100px; /* Высота линии между кружками */
}

.timeline-line::before {
	content: '';
	position: absolute;
	top: 55%; /* Чтобы линия начиналась чуть ниже кружка */
	left: 49%;
	width: 2px;
	height: calc(100% - 20px); /* Высота линии между кружками */
	background-color: #3a00d4;
}

.timeline-line .progress-circle {
	position: relative;
	width: 12px; /* Уменьшаем размер кружка */
	height: 12px; /* Уменьшаем размер кружка */
	background-color: #3a00d4;
	border-radius: 50%;
	margin-bottom: 10px; /* Минимальный отступ между кружком и линией */
}

.timeline-event.last-in-region .timeline-line::before {
	display: none; /* Убираем линию после последнего события */
}

.timeline-event {
	display: flex;
	align-items: center;
}

/* Макет модального окна  */

.modal-left .timeline-event-content {
	width: 60%;
}

.modal-left .timeline-line-wrapper {
	width: 20%;
}

.modal-left .timeline-location-wrapper {
	width: 20%;
}

.modal-left .parcel-status-content {
	display: flex;
	gap: 12px;
}

.modal-left .parcel-status-container {
	display: flex;
	justify-content: space-between;
	margin-right: 5%;
	margin-bottom: 27px;
}

.modal-left .region-container {
	margin-left: 60%;
}

.tracking-timeline h3 {
	font-weight: 800;
	font-size: 18px;
}

.timeline-header {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.modal-left .parcel-number {
	margin-bottom: 36px;
	font-weight: 800;
	font-size: 24px;
}

.modal-left h2 {
	font-weight: 800;
	font-size: 24px;
	font-weight: bold;
	margin: 0;
	margin-bottom: 36px;
}

.modal-left h4 {
	font-weight: 600;
	font-size: 14px;
	font-weight: bold;
	margin: 0;
	margin-bottom: 7px;
}

.timeline-date {
	font-size: 14px;
	font-weight: 600;
}

.modal-left .timeline-location {
	display: flex;
	justify-content: center;
	flex: 1;
	font-size: 14px;
	text-align: left;
}

.modal-right {
	flex: 1;
	padding: 40px;
	max-width: 55%;
}

.modal-right .recipient-info {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 40px;
	gap: 10px;
}

.modal-right .recipient-info div {
	width: 40%;
}

.modal-right .parcel-details {
	display: flex;
	flex-wrap: wrap;
	margin: 40px 0;
	gap: 10px;
}

.modal-right p {
	margin-bottom: 8px;
}

.modal-right .price-and-actions {
	margin-top: 40px;
}

.modal-right .parcel-details .parcel-value {
	width: 43%;
}

.modal-right .parcel-details .payment-type,
.modal-right .parcel-details .parcel-weight {
	width: 25%;
}

.modal .close {
	position: absolute;
	top: -15px;
	right: 20px;
	font-size: 72px;
	cursor: pointer;
	color: #3a00d4;
}

.modal-left h2 {
	margin: 0;
	font-size: 24px;
}

.modal-left .status {
	color: #3a00d4;
	font-size: 18px;
	font-weight: 800;
	margin-left: 22px;
}

.tracking-info {
	margin-bottom: 123px;
}

.modal-right .action-buttons {
	margin-top: 55px;
	display: flex;
	justify-content: space-between;
}

.modal-right .action-buttons div {
	width: 50%;
}

.modal-right .action-buttons .pay-button-container {
	margin-top: 40%;
	max-width: 300px;
}

.action-buttons .btn {
	width: 100%;
	border-radius: 30px;
}

.mobile-version .show-more {
	display: flex;
	flex-direction: column;
	margin-left: 25%;
	margin-bottom: 65px;
}

.show-more {
	text-decoration: none;
	color: #3a00d4;
	display: inline-block;
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
}

.show-more img {
	margin-left: 5px;
	vertical-align: 0;
}

.divider {
	border: none;
	border-bottom: 2px solid #3a00d4; /* Цвет линии */
	margin: 20px 0;
	opacity: 1;
}

.mobile-version .actions img {
	bottom: -5px;
	right: 68px;
	margin: 0;
}

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

/* Контейнер кнопки */
.btn.show-more {
	background-color: transparent;
	color: #6200ee;
	font-weight: 600;
	text-align: left;
	display: flex; /* Выровняем текст и стрелку по горизонтали */
	flex-direction: column;
	align-items: center; /* Центрируем по вертикали */
	padding: 0;
	position: relative;
	cursor: pointer;
}

/* Текст в кнопке */
.btn.show-more .text {
	white-space: nowrap; /* Не переносить текст */
	margin-right: 10px; /* Отступ между текстом и стрелкой */
}

/* Стрелка */
.btn.show-more img.arrow-icon {
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

/* Линия под текстом */
.btn.show-more .divider {
	position: relative;
	bottom: -2px; /* Линия расположена под текстом */
	left: 0;
	width: 100%; /* Линия на всю ширину кнопки */
	height: 2px;
	background-color: #3a00d4;
	margin: 0;
	max-width: 180px;
}

.btn.show-less {
	background-color: transparent;
	color: #6200ee;
	margin-top: 10px;
}

.about-company .stats {
	display: flex;
	gap: 30px; /* Пространство между блоками */
	margin-bottom: 140px;
}

.about-company .stat-block {
	background-color: transparent;
	padding: 20px;
	border-radius: 30px;
	width: 100%;
	text-align: left;
	border: 1px solid #ffd700; /* Цвет рамки */
}

.about-company .stat-block.large {
	width: 50%; /* Блок с большим количеством клиентов */
	padding: 35px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.about-company .right-stat-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 50%; /* Для двух блоков справа */
}

.about-company .stat-block.small {
	width: 100%; /* Для маленьких блоков */
}

.about-company .stat-block h2,
.about-company .stat-block span {
	font-weight: 800;
	color: #fc0;
}

.about-company .stat-block.large h2 {
	font-size: 110px;
}

.about-company .stat-block.small:nth-child(1) span {
	font-size: 80px;
}

.about-company .stat-block.small:nth-child(2) span {
	font-size: 60px;
}

.about-company .stat-block p {
	text-transform: lowercase;
	font-weight: 600;
	font-size: 44px;
}
.about-company .info-block {
	display: flex;
	margin-bottom: 140px;
	gap: 30px;
}

.about-company .block {
	width: 50%;
	height: 100%;
	padding: 55px 50px;
}

.about-company .info-block p {
	font-size: 16px;
	font-weight: 400;
}

.about-company .truck-image {
	height: inherit;
	background-color: #ffcc00;
	width: 50%;
	display: flex;
	justify-content: center;
	position: relative;
}

.about-company .truck-image img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	position: absolute;
	right: 0;
	top: 20px;
}

.about-company .history {
	margin-bottom: 140px;
}

.about-company .section-heading {
	font-weight: 600;
	font-size: 48px;
	margin-bottom: 40px;
}

.service-block .section-heading {
	margin-bottom: 0;
}

.about-company .history-image img {
	border-radius: 30px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-company .history-image {
	flex: 1;
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 100%;
}

.about-company .uppercase-text.block-text {
	margin: 0;
	text-align: start;
}

.contact-block {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: #ffda00;
	border-radius: 30px;
	padding: 50px;
	position: relative;
	z-index: 2;
	margin-top: 70px;
}

.about-company .services {
	margin-top: 100px;
	display: flex;
	justify-content: space-evenly;
	text-align: center;
	gap: 30px;
}

.about-company .service-block {
	display: flex;
	padding: 41px 35px 23px;
	justify-content: space-between;
	position: relative;
}

.about-company .service-block p {
	color: #333;
}

@media only screen and (max-width: 1400px) {
	.about-company .stat-block.large h2 {
		font-size: 100px;
	}
}

@media only screen and (max-width: 1265px) {
	.cta-section .block-link {
		width: 100%;
	}

	.section-heading {
		font-size: 34px;
	}

	.extra-section-heading {
		font-size: 53px;
	}

	.block.small .uppercase-text.block-text {
		max-width: 105px;
	}

	.horizontal-container {
		gap: 20px;
	}

	.about-company .stat-block.large h2 {
		font-size: 50px;
	}

	.about-company .stat-block.small:nth-child(1) span {
		font-size: 40px;
	}

	.about-company .stat-block.small:nth-child(2) span {
		font-size: 30px;
	}

	.about-company .stat-block p {
		text-transform: lowercase;
		font-weight: 600;
		font-size: 28px;
	}
}

@media only screen and (max-width: 1024px) {
	.cta-section {
		flex-direction: column;
		gap: 20px;
	}

	.block.small {
		max-width: 100%;
	}

	.block.small .uppercase-text.block-text {
		max-width: 65%;
	}

	.cta-section .block-link,
	.cta-section .cta-blocks-group {
		width: 100%;
	}

	.about-company .section-heading {
		font-size: 31px;
	}

	.about-company .uppercase-text.block-text {
		font-size: 12px;
	}
}

@media only screen and (max-width: 768px) {
	.about-company .truck-image img {
		top: -16%;
	}

	.extra-section-heading {
		font-size: 36px;
		max-width: 250px;
	}

	.about-company .news-item {
		flex: 0 0 100%;
	}

	.cta-blocks-group {
		width: 100%;
	}

	.block.small .uppercase-text.block-text {
		max-width: 90%;
	}

	.block.medium .uppercase-text.block-text {
		margin: 0;
		margin-bottom: 16px;
	}

	.about-company .news-slider {
		width: 100%;
	}

	.about-company .history-image {
		max-height: 300px;
	}

	.about-company .history-image img {
		height: 100%;
		max-height: 300px;
		max-width: 100%;
	}

	.about-company .stats,
	.about-company .info-block,
	.about-company .services {
		flex-direction: column;
		align-items: center;
	}

	.about-company .stat-block.large,
	.about-company .right-stat-container,
	.about-company .block {
		width: 100%;
	}

	.about-company .stat-block.small span,
	.about-company .stat-block.large h2 {
		font-size: 50px;
	}

	.about-company .stat-block p {
		font-size: 22px;
	}

	.about-company .uppercase-text.block-text {
		font-size: 16px;
	}

	.about-company .stats,
	.about-company .info-block,
	.about-company .history,
	.about-company .contact-block {
		margin-bottom: 30px;
	}

	.about-company .info-block {
		gap: 20px;
	}
}

@media only screen and (max-width: 500px) {
	.about-company .truck-image img {
		top: 0%;
	}
}

.career-page {
	margin-bottom: 180px;
}

.career-page .filters {
	display: flex;
	gap: 10px;
	margin-bottom: 80px;
}

.news-page .filter-btn.active,
.news-page .filter-btn,
.career-page .filter-btn.active,
.career-page .filter-btn {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 18px;
}

.career-page .filter-btn img {
	height: auto;
}

.career-page .filter-btn {
	background-color: transparent;
	padding: 10px 20px;
	border-radius: 30px;
	border: 1px solid #15004d;
	cursor: pointer;
	font-weight: bold;
}

.career-page .filter-btn.active {
	background-color: #15004d;
	color: white;
}

.career-page .vacancy-list {
	display: flex;
	flex-direction: column;
	gap: 25px;
	margin-bottom: 60px;
}

.career-page .vacancy-item {
	position: relative;
	display: flex;
	align-items: center;
	background-color: #f4f4f4;
	padding: 15px;
	border-radius: 30px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Легкая тень */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.career-page .vacancy-item:hover {
	transform: scale(1.05); /* Увеличение на 5% при наведении */
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Глубокая тень при наведении */
	cursor: pointer; /* Изменение курсора при наведении */
}

.career-page .vacancy-title {
	width: 40%;
	font-weight: bold;
}

.career-page .vacancy-location {
	color: gray;
}

.vacancy-detail-page {
	background-color: #fff;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
}

.vacancy-detail-page .vacancy-title {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 20px;
}

.vacancy-detail-page .vacancy-description {
	font-size: 18px;
	line-height: 1.6;
	margin-bottom: 20px;
}

.vacancy-detail-page .vacancy-location,
.vacancy-detail-page .vacancy-salary,
.vacancy-detail-page .vacancy-posted-at {
	font-size: 16px;
	margin-bottom: 10px;
}

.vacancy-detail-page .vacancy-salary strong,
.vacancy-detail-page .vacancy-posted-at strong {
	color: #333;
}

.pagination {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

.my-packages-content .pagination {
	margin-left: 25px;
}

.my-packages-content .page-btn {
	width: 40px;
	height: 40px;
}

.my-packages-content .page-btn img {
	width: 20px;
	height: 20px;
}

.page-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 60px;
	background-color: #f4f4f4;
	padding: 10px 15px;
	border-radius: 10px;
	border: none;
	cursor: pointer;
}

.page-btn:hover {
	background-color: #d3d3d3; /* Затемнённый цвет при наведении */
}

.pagination .active .page-btn:hover {
	background-color: #e6b800; /* Затемнение для активной кнопки */
}

.pagination .prev .page-btn:hover,
.pagination .next .page-btn:hover {
	background-color: #2d00a8;
}

.pagination .active .page-btn {
	background-color: #ffd700;
	color: white;
}

.page-btn.next img {
	width: 22px;
	height: 22px;
}

.pagination .prev .page-btn img {
	rotate: 180deg;
}

.pagination .prev .page-btn,
.pagination .next .page-btn {
	background-color: #3a00d4;
}

.vacancy-item img {
	position: absolute;
	right: 25px;
	top: 10px;
}

@media (max-width: 1024px) {
	.career-page .filters {
		margin-bottom: 30px;
	}

	.career-page {
		margin-bottom: 0;
	}
}

@media only screen and (max-width: 768px) {
	.career-page .filters {
		flex-direction: column;
		gap: 32px;
	}

	.career-page .vacancy-item {
		flex-direction: column;
		align-items: flex-start;
		padding: 25px;
	}

	.vacancy-item img {
		right: 20px;
		top: 20px;
	}

	.pagination {
		justify-content: flex-end;
	}
}

.news-page .filters {
	display: flex;
	gap: 10px;
	margin-bottom: 80px;
}

.news-page .filter-btn {
	background-color: transparent;
	padding: 10px 20px;
	border-radius: 30px;
	border: 1px solid #ffcc00;
	color: #ffcc00;
	cursor: pointer;
	font-weight: bold;
}

.news-page .filter-btn.active {
	background-color: #ffcc00;
	color: white;
}

.news-page .news-item {
	margin-bottom: 40px;
	position: relative;
	display: flex;
	align-items: center;
	background-color: #f4f4f4;
	padding: 55px 55px 55px 80px;
	border-radius: 30px;
}

.news-page .news-item img {
	width: 330px;
	height: 191px;
	border-radius: 30px;
}

.news-page .news-item .news-content {
	position: static;
	background-color: transparent;
	padding: 0;
	margin-left: 110px;
	max-width: 100%;
}

.news-page .news-text {
	margin-bottom: 70px;
}

.news-page .news-arrow img {
	width: 31px;
	height: 31px;
	border-radius: 0;
}

@media only screen and (max-width: 768px) {
	.news-page .filters {
		flex-direction: column;
		gap: 32px;
		margin-bottom: 30px;
	}

	.news-page {
		margin-bottom: 0;
	}

	.news-page .news-item img {
		width: 100%;
	}

	.news-page .news-list {
		margin-bottom: 0;
	}

	.news-page .news-arrow img {
		width: 31px;
		height: 31px;
		border-radius: 0;
		transform: rotate(90deg);
	}

	.news-page .news-item {
		padding: 0;
	}

	.news-page .news-item .news-content {
		padding: 25px 50px 45px 25px;
		margin: 0;
	}

	.news-page .news-date {
		font-size: 14px;
	}

	.news-page .pagination {
		justify-content: center;
	}
}

services-info {
	margin-bottom: 180px;
}

.services-info .services {
	margin-bottom: 80px;
}

.services-info .service-block {
	display: flex;
	padding: 41px 35px 23px;
	justify-content: space-between;
	position: relative;
}

.services-info .uppercase-text.block-text {
	margin: 0;
	text-align: start;
}

.services-info .block-wrapper {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.services-info .block {
	padding: 30px;
	gap: 20px;
	width: 95%;
	text-align: center;
}

.services-info .block h3 {
	color: #3a00d4;
	font-size: 20px;
	margin-top: 10px;
}

.services-info .block .upper-text {
	font-size: 12px;
	color: #8d8d8d;
	text-transform: uppercase;
}

.services-info .auth-section {
	margin-bottom: 140px;
}

.services-info .login-btn {
	text-align: center;
	display: block;
	width: 48%;
	padding: 10px 20px;
	background-color: white;
	color: #3a00d4;
	border: 1px solid #3a00d4;
	border-radius: 30px;
	font-weight: bold;
	cursor: pointer;
	text-transform: uppercase;
}

@media (max-width: 768px) {
	.services .block-link {
		width: 100%;
	}

	.services-info .block-wrapper {
		flex-direction: column;
		gap: 20px;
	}

	.services-info .services {
		margin-bottom: 30px;
	}

	.services-info .auth-section {
		margin-bottom: 30px;
	}

	.services-info .block {
		width: 100%;
		min-height: 220px;
		padding: 30px 25px;
	}

	.service-block .section-heading {
		font-size: 32px;
	}

	.services-info .login-btn {
		padding: 20px;
		width: 100%;
	}

	.services-info .uppercase-text.block-text {
		font-size: 14px;
		max-width: 190px;
	}

	.services-info .mini-icon-img {
		width: 35px;
		height: 35px;
	}
}

.contacts-info .departments {
	display: flex;
	justify-content: space-evenly;
	margin-bottom: 140px;
	gap: 30px;
}

.contacts-info .department-block {
	padding: 20px;
	min-height: 280px; /* Или установите нужную вам высоту */
	display: flex;
	flex-direction: column; /* Располагаем элементы вертикально */
	justify-content: space-between; /* Равномерное вертикальное распределение */
}

.contacts-info .departments .uppercase-text {
	margin-bottom: 29px;
}

.contacts-info .department-phone {
	font-weight: 700;
	font-size: 32px;
}

.contacts-info .department-email {
	font-weight: 700;
	font-size: 26px;
}

.contacts-info .department-working-hours {
	font-weight: 400;
	font-size: 16px;
}

.contacts-info .department-block p {
	margin: 0;
}

.contacts-info .official-data {
	display: flex;
	gap: 30px;
	margin-bottom: 40px;
}

.contacts-info .official-data .block {
	display: flex;
	justify-content: space-between;
	background-color: transparent;
	padding: 26px 29px 46px;
}

.contacts-info .official-data .block:nth-child(1) {
	border: 2px solid #ffcc00;
}

.contacts-info .official-data .block:nth-child(2) {
	background-color: #ffcc00;
}

.contacts-info .legal-details p,
.contacts-info .official-data p {
	margin: 0;
}

.contacts-info .company-details-title {
	font-weight: 400;
	font-size: 16px;
}

.contacts-info .company-details-description {
	font-weight: 700;
	font-size: 18px;
}

.contacts-info .legal-details {
	display: flex;
	margin-bottom: 140px;
	gap: 30px;
}

.contacts-info .legal-details .block {
	padding: 26px 10px 26px 29px;
	min-height: 120px;
}

@media (max-width: 768px) {
	.contacts-info .official-data,
	.contacts-info .legal-details,
	.contacts-info .departments {
		flex-direction: column;
		gap: 20px;
		margin-bottom: 30px;
	}

	.contacts-info .official-data-header p {
		display: none;
	}

	.contacts-info .section-heading {
		font-weight: 600;
		font-size: 32px;
	}

	.contacts-info .company-details-group {
		flex-direction: column;
		gap: 35px;
	}

	.contacts-info .company-details,
	.contacts-info .bank-details {
		gap: 35px;
	}
}

.track-package-block .btn {
	position: static;
	margin-left: -60px;
}

.track-package-block .section-heading {
	margin-bottom: 46px;
}

.track-form {
	display: flex;
	align-items: center;
	max-width: 100%;
}

.track-input {
	width: 80%;
	padding: 15px;
	border: none;
	border-radius: 30px;
	font-size: 16px;
	background-color: white;
}

.track-btn {
	background-color: #3a00d4; /* Цвет кнопки */
	color: white;
	border: none;
	padding: 15px 30px;
	border-radius: 30px;
	cursor: pointer;
	font-size: 16px;
}

.track-btn:hover {
	background-color: #2a00a0; /* Темнее при наведении */
}

@media (max-width: 768px) {
	.track-package-block .section-heading {
		font-size: 32px;
		text-align: center;
	}

	.track-package-block {
		margin: 0 0 30px;
	}

	.track-package-block .btn {
		margin-left: 0;
		max-width: 100%;
	}

	.track-input {
		width: 100%;
		margin-bottom: 20px;
	}

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

track-package-block {
	margin-bottom: 70px;
}

.tracking-results .tracking-info {
	display: flex;
	gap: 20px;
}

.tracking-results .block {
	padding: 24px 45px;
}

.track-package-block.block {
	position: relative;
	padding: 50px;
	margin-bottom: 30px;
}
.tracking-results .package-details,
.tracking-results .tracking-status {
	width: 50%;
}

.tracking-results .tracking-status .block:nth-child(1) {
	min-height: 124px;
	display: flex;
	justify-content: space-evenly;
}

.tracking-results .tracking-heading {
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
}

.tracking-results .tracking-status-text {
	font-weight: 700;
	font-size: 32px;
}

.tracking-results .tracking-progress {
	margin-top: 20px;
}

.tracking-results .progress-step {
	display: flex;
	margin-bottom: 15px;
	position: relative;
}

.tracking-results .progress-step:not(:last-child):after {
	content: '';
	position: absolute;
	margin: 3px 0;
	left: 12px; /* Позиционирует линию по центру круга (половина ширины изображения) */
	top: 25px; /* Начинает линию сразу под кругом */
	bottom: -15px; /* Линия продолжается за пределы текущего элемента, чтобы соединиться с следующим */
	width: 3px;
	background-color: #3a00d4; /* Или выберите любой другой цвет */
}

.tracking-results .progress-step img {
	position: absolute;
	width: 25px;
	height: 25px;
	margin-right: 10px;
}

.tracking-results .progress-step .tracking-step {
	margin-left: 40px;
	width: 70%;
}

.tracking-results .progress-step .step-title {
	font-weight: 600;
	font-size: 16px;
}

.tracking-results .progress-step .step-location {
	font-weight: 700;
	font-size: 18px;
}

.tracking-results .progress-step .step-date {
	width: 30%;
	font-weight: 400;
	font-size: 14px;
}

.tracking-results .package-number {
	font-weight: 700;
	font-size: 32px;
	margin-bottom: 60px;
}

.tracking-results .details-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

.tracking-results .detail-item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.tracking-results .detail-item .label {
	font-weight: 600;
	font-size: 16px;
}

.tracking-results .detail-item .value {
	font-weight: 700;
	font-size: 18px;
}

.tracking-results .text-with-icon {
	display: inline-flex;
	align-items: center; /* Центрируем текст и картинку по вертикали */
}

.tracking-results .text-with-icon img {
	margin-left: 5px; /* Добавляем отступ между текстом и картинкой */
}

.tracking-results .details-link {
	display: inline-block;
	margin-top: 20px;
	text-align: end;
	vertical-align: middle;
}

.tracking-results .details-link:hover {
	text-decoration: underline;
}

@media (max-width: 768px) {
	.tracking-results .progress-step .tracking-step {
		width: 100%;
	}

	.tracking-results .details-grid:first-of-type {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.tracking-results .package-number {
		margin-bottom: 10px;
	}

	.tracking-results .tracking-info {
		flex-direction: column;
	}

	.tracking-results .progress-step {
		flex-direction: column-reverse;
	}

	.tracking-results .progress-step .step-date {
		margin-left: 40px;
		width: 100%;
	}

	.tracking-results .progress-step img {
		top: 0;
	}

	.tracking-results .tracking-status-text {
		font-size: 20px;
	}

	.tracking-results .track-form {
		width: 100%;
	}

	.tracking-results .package-details,
	.tracking-results .tracking-status {
		width: 100%;
	}
}

.faq-info .block {
	position: relative;
	display: flex;
	padding: 50px 80px 27px 45px;
	flex-direction: row;
	background-color: transparent;
	border: 2px solid #ffcc00;
	gap: 20px;
	margin-bottom: 140px;
}

.faq-info .section-heading {
	font-size: 48px;
	margin-bottom: 30px;
}

.faq-info .faq-questions {
	width: 70%;
}

.faq-action-buttons {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
}

.faq-action-buttons .faq-filters {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.faq-action-buttons .block .btn {
	position: static;
	max-width: 100%;
}

.faq-filters .filter-button.all-questions {
	width: 100%;
}

.filter-button.active {
	background-color: #ffcc00;
	border: none;
}

.filter-button {
	background-color: transparent;
	border-color: #ffcc00;
	color: #ffcc00;
	width: 60%;
}

.faq-action-buttons .faq-ask-section {
	bottom: 61px;
}

.faq-action-buttons .faq-ask-section .section-heading {
	max-width: 304px;
	font-size: 24px;
	margin-bottom: 31px;
}

@media (max-width: 768px) {
	.faq-info .btn {
		max-width: 100%;
	}

	.faq-info .faq-filters {
		gap: 30px;
	}

	.faq-info .btn {
		margin: 0;
	}

	.faq-info .faq-filters .delivery,
	.faq-info .faq-filters .vacancies {
		width: 100%;
	}

	.faq-info .block {
		padding: 29px 24px;
	}

	.faq-info .section-heading {
		font-size: 28px;
	}

	.faq-info .block {
		flex-direction: column;
		margin-bottom: 30px;
	}

	.faq-info .faq-filters,
	.faq-info .faq-ask-section,
	.faq-info .faq-questions {
		width: 100%;
	}

	.faq-info .faq-ask-section .section-heading {
		text-align: center;
		max-width: 100%;
	}

	.faq-info .faq-ask-section {
		position: static;
		order: 3;
	}

	.faq-info .faq-item:nth-of-type(n + 6),
	.faq-info .faq-line:nth-of-type(n + 7) {
		display: none;
	}
}

.why-us-info .package.block,
.delivery-info .delivery.block {
	position: relative;
	margin-bottom: 140px;
	justify-content: space-between;
	padding: 40px 80px;
	overflow: hidden;
}

.why-us-info .delivery.block picture,
.delivery-info .delivery.block picture {
	position: absolute;
	right: 0;
	bottom: 0;
}

.delivery-info .feature-item {
	flex-direction: row;
	align-items: center;
	height: 100%;
	padding: 60px 40px;
}

.delivery-info .feature-item img {
	width: 100%;
}

.delivery-info .features-container {
	margin-bottom: 30px;
}

.delivery-info .create-parcel {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 140px;
}

.delivery-info .create-parcel .btn {
	width: 50%;
	max-width: 100%;
}

.why-us-info .services,
.delivery-info .services {
	display: flex;
	gap: 30px;
}

.about-company .block {
	width: 100%;
}

.why-us-info .services .block,
.delivery-info .services .block {
	justify-content: space-between;
	position: relative;
	padding: 40px;
	margin-top: 100px;
}

.why-us-info .uppercase-text.block-text,
.delivery-info .uppercase-text.block-text {
	margin: 0;
}

.why-us-info .section-heading.cta-blocks-heading,
.delivery-info .section-heading.cta-blocks-heading {
	position: static;
	margin: 0;
}

.delivery-info .delivery-section {
	position: relative;
}

.delivery-info .delivery-section .section-heading {
	margin-bottom: 30px;
}

.more-info {
	position: absolute;
	right: 0;
	top: 15px;
}

@media (max-width: 1024px) {
	.why-us-info .uppercase-text.block-text,
	.delivery-info .uppercase-text.block-text {
		max-width: 80%;
	}

	.delivery-info .feature-item img {
		width: 50px;
	}

	.why-us-info .services .block .section-heading,
	.delivery-info .services .block .section-heading {
		font-size: 40px;
	}

	.why-us-info .services .block,
	.delivery-info .services .block {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.why-us-info .services .block,
	.delivery-info .services .block {
		width: 100%;
	}

	.why-us-info .services .block,
	.delivery-info .services .block {
		margin-top: 0;
	}

	.delivery-info .services {
		flex-direction: column;
		margin: 30px 0 0;
	}

	.why-us-info .delivery.block,
	.delivery-info .delivery.block {
		margin-bottom: 30px;
		padding: 30px 25px;
		height: 321px;
		min-height: 100%;
		justify-content: flex-start;
	}

	.why-us-info.section-heading.cta-blocks-heading,
	.delivery-info .section-heading.cta-blocks-heading {
		font-size: 32px;
		margin-top: 16px;
	}

	.why-us-info .services .block .section-heading,
	.delivery-info .services .block .section-heading {
		font-size: 32px;
	}

	.delivery-info .feature-item {
		flex-direction: column;
		align-items: baseline;
	}

	.delivery-info .delivery-section {
		display: flex;
		flex-direction: column;
		margin-bottom: 30px;
	}

	.delivery-info .create-parcel .btn {
		width: 100%;
	}

	.delivery-info .create-parcel {
		margin-bottom: 30px;
	}

	.more-info {
		position: static;
		order: 3;
		display: flex;
		justify-content: end;
	}
}

.why-us-section {
	margin-bottom: 140px;
}

.why-us-section .why-us-header img {
	vertical-align: 0;
}

.why-us-section .why-us-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.why-us-section .news-content {
	width: 60%;
	margin-left: -40px;
	max-width: 100%;
	height: 100%;
	max-height: 250px;
	padding: 40px;
	padding-left: 120px;
	z-index: 1;
}

.why-us-section .news-content p {
	display: -webkit-box;
	-webkit-line-clamp: 4; /* количество строк */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.why-us-section .news-item {
	padding: 0 14%;
}

.why-us-section .history-image {
	flex: 2;
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 100%;
}

.why-us-section .history-image img {
	border-radius: 30px;
	width: 100%;
	height: 100%;
	max-height: 250px;
}

.why-us-section .why-us-header {
	margin-bottom: 40px;
}

.why-us-info .package.block picture {
	position: absolute;
	right: 0;
	bottom: 0;
}

.why-us-info .package.block {
	overflow: hidden;
}

.why-us-info .package.block img {
	height: 100%;
	max-height: 355px;
}

.why-us-info .block .btn {
	position: static;
}

@media (max-width: 1024px) {
	.why-us-section .news-slider {
		width: 100%;
	}

	.why-us-section .news-content {
		width: 100%;
		padding: 40px;
		margin-left: 0px;
	}

	.why-us-section .why-us-header {
		margin-bottom: 30px;
	}

	.why-us-section {
		margin-bottom: 30px;
	}
}

@media (max-width: 768px) {
	.why-us-section .news-content {
		width: 100%;
		padding: 55px 25px 25px;
		max-height: none;
		border-radius: 0 0 30px 30px;
		margin-top: -25px;
	}

	.why-us-info .package.block {
		min-height: 321px;
		padding: 25px;
		margin-bottom: 30px;
		justify-content: flex-start;
	}

	.why-us-info .package.block .block-text {
		margin-bottom: 16px;
	}

	.why-us-info .package.block .section-heading {
		margin-bottom: 100px;
		font-size: 36px;
	}

	.why-us-info .block .btn {
		max-width: 100%;
	}

	.why-us-info .services {
		flex-direction: column;
		margin: 30px 0 0;
	}

	.why-us-section .news-content p {
		-webkit-line-clamp: 8;
	}

	.why-us-info .package.block picture {
		bottom: 60px;
	}

	.why-us-info .uppercase-text.block-text {
		max-width: 100%;
	}

	.why-us-info .why-us-header .uppercase-text {
		display: none;
	}

	.why-us-info .why-us-header .section-heading {
		font-size: 32px;
	}
}

.counting-parcels-info .section-heading.cta-blocks-heading {
	position: static;
}

.counting-parcels-info .counting.block {
	position: relative;
	padding: 41px 80px;
	margin-bottom: 80px;
}

.counting-parcels-info .counting.block picture {
	position: absolute;
	right: 0;
	bottom: 0;
}

.counting-parcels-info .uppercase-text.block-text,
.counting-parcels-info .section-heading.cta-blocks-heading {
	margin: 0;
}

.counting-parcels-info .uppercase-text.block-text {
	margin-bottom: 74px;
}

.counting-parcels-info .delivery-cost {
	background-color: #f8fafa;
	padding: 55px 80px;
	text-align: left;
	margin-bottom: 40px;
	position: relative;
}

.counting-parcels-info .delivery-cost .section-heading {
	font-size: 24px;
	margin-bottom: 10px;
}

.counting-parcels-info .delivery-cost p {
	font-size: 16px;
	max-width: 70%;
}

.counting-parcels-info .delivery-form {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-top: 60px;
}

.counting-parcels-info .form-group {
	display: flex;
	margin-bottom: 20px;
}

.counting-parcels-info .form-group label {
	width: 20%;
	margin-right: 20px;
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 5px;
	color: #3a00d4;
	display: block;
}

.counting-parcels-info .select-wrapper select {
	width: 100%;
	max-width: 360px;
}

#delivery-method-container {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: opacity 0.5s ease, max-height 0.5s ease;
}

#delivery-method-container.d-flex {
	opacity: 1;
	max-height: 200px; /* Установите значение больше, чем высота содержимого */
}

.counting-parcels-info label {
	font-weight: bold;
	margin-bottom: 5px;
}

.counting-parcels-info .delivery-form input,
.counting-parcels-info .delivery-form select {
	padding: 10px;
	border: 2px solid #3a00d4;
	border-radius: 30px;
	text-align: center;
	font-size: 16px;
	width: 100%;
}

.counting-parcels-info .select-wrapper {
	display: flex;
	gap: 30px;
	position: relative;
	width: 70%;
	align-items: flex-start;
}

.counting-parcels-info input {
	width: 70%;
	max-width: 360px;
}

.counting-parcels-info button {
	padding: 19px 85px;
	color: white;
	border: none;
	cursor: pointer;
	font-size: 16px;
}

.counting-parcels-info button:hover {
	background-color: #3913df;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 2px solid #4b238d;
	border-radius: 30px;
	padding: 10px;
	font-size: 16px;
	color: #000;
	width: 100%;
	cursor: pointer;
}

.counting-parcels-info .select-container {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 360px;
}

.counting-parcels-info .select-container .dropdown-icon-v2 {
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	pointer-events: none;
	width: 16px;
	height: auto;
}

.counting-parcels-info .d-flex.justify-content-end {
	display: flex;
	justify-content: flex-end;
}

.counting-parcels-info .btn.btn-success,
.counting-parcels-info .btn.btn-primary {
	color: #fff;
	border: none;
	padding: 25px 85px;
	border-radius: 30px;
	cursor: pointer;
}

.counting-parcels-info .btn.btn-primary:hover {
	background-color: #3a00d4;
}

.counting-parcels-info .services .service-block {
	position: relative;
	padding: 41px 44px;
}

.counting-parcels-info .services {
	display: flex;
	justify-content: space-evenly;
	gap: 30px;
	margin-top: 100px;
}

.counting-parcels-info input {
	width: 100%;
}

@media (max-width: 768px) {
	.counting-parcels-info .delivery-cost {
		padding: 34px;
	}

	.counting-parcels-info .counting.block {
		min-height: 321px;
		padding: 30px 25px;
	}

	.counting-parcels-info input {
		max-width: 100%;
	}

	.counting-parcels-info .select-wrapper select {
		max-width: 100%;
	}

	.counting-parcels-info .form-group,
	.counting-parcels-info .select-wrapper {
		flex-direction: column;
	}

	.counting-parcels-info .delivery-form input,
	.counting-parcels-info .delivery-form select {
		text-align: left;
		padding-left: 25px;
	}

	.counting-parcels-info .form-group label {
		width: 100%;
		margin: 10px;
	}

	.counting-parcels-info .select-wrapper {
		width: 100%;
	}

	.counting-parcels-info .select-container {
		max-width: 100%;
	}

	.counting-parcels-info .services {
		flex-direction: column;
		margin: 30px 0 0;
	}

	.counting-parcels-info .uppercase-text.block-text {
		margin-bottom: 16px;
	}

	.counting-parcels-info .btn.btn-success,
	.counting-parcels-info .btn.btn-primary {
		max-width: 100%;
	}

	.counting-parcels-info .section-heading.cta-blocks-heading {
		font-size: 32px;
	}
}

.input-group
	> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
		.valid-feedback
	):not(.invalid-tooltip):not(.invalid-feedback) {
	display: flex;
}

.input-group
	> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
		.valid-feedback
	):not(.invalid-tooltip):not(.invalid-feedback)
	.btn {
	height: 40px;
	width: 180px;
}

.iframe-content {
	min-height: 900px;
	background-color: #e9e8ff;
	border-radius: 30px;
}

iframe {
	border-radius: 30px; /* Задайте нужный цвет фона */
}

.card-panel {
	background-color: #e9e8ff;
}

.hide {
	display: none;
}

@media (max-width: 1068px) {
	.iframe-content {
		height: 900px;
	}
}

.iti__flag-container {
	position: relative;
}

.iti__country-list {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	max-height: 300px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.has-error {
	color: red;
}

/* Контейнер с инпутом для телефона */
.phone-input-container {
	position: relative;
}

/* Dropdown-меню */
.iti__country-list {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 9999; /* Максимальный z-index для отображения поверх */
}

.iti__selected-flag {
	border-radius: 30px 0 0 30px;
}

@media (max-width: 990px) {
	.delivery-form .btn {
		max-width: 200px;
	}
}

.button-wrapper {
	position: relative;
	width: 100%;
	height: 50px; /* Высота контейнера, настроить по необходимости */
}

#calculate-button {
	position: absolute;
	right: 0;
	transition: right 0.5s ease;
}

#calculate-button.move-left {
	right: 315px; /* Сдвиг кнопки влево, настроить по ширине кнопки "Связаться" */
}

#whatsapp-btn {
	position: absolute;
	right: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
}

#whatsapp-btn.visible {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 767px) {
	/* Переопределяем стили для мобильных устройств */

	.button-wrapper {
		justify-content: center; /* Центрируем кнопки на мобильных устройствах */
		flex-direction: column; /* Располагаем кнопки вертикально */
		height: 100%;
	}

	#calculate-button {
		margin-right: 0; /* Сбрасываем отступы */
		width: 100%; /* Кнопка занимает всю ширину */
		transition: none; /* Убираем плавные переходы */
		position: static;
	}

	#calculate-button.move-left {
		margin-right: 0; /* Не сдвигаем кнопку на мобильных устройствах */
	}

	#whatsapp-btn {
		display: none; /* Изначально скрыта */
		position: static;
		width: 100%; /* Кнопка занимает всю ширину */
	}

	#whatsapp-btn.visible {
		display: flex; /* Показываем кнопку при добавлении класса "visible" */
	}

	#calculate-button,
	#whatsapp-btn {
		margin-bottom: 10px; /* Добавляем отступ между кнопками */
	}
}
.modal {
	z-index: 1055;
}

.modal-backdrop {
	z-index: 1050;
	pointer-events: none;
}

#emailModal .modal-content {
	flex-direction: column;
	z-index: 1060;
	position: relative; /* Добавьте это, чтобы z-index работал */
	pointer-events: auto;
}

#emailModal .close {
	top: -5px;
	right: 9px;
	background-color: transparent;
	border: 0;
	font-size: 32px;
}

#emailModal .btn {
	height: auto;
}

.modal-footer-centered {
	display: flex;
	justify-content: center;
	gap: 10px; /* расстояние между кнопками */
	padding: 1rem; /* отступы для стилизации */
}

.important-info {
	font-family: Arial, sans-serif;
	line-height: 1.6;
}

.important-info h1 {
	color: #333;
	font-size: 24px;
	margin-bottom: 10px;
}

.important-info h2 {
	color: #333;
	font-size: 20px;
	margin-top: 20px;
	margin-bottom: 10px;
}

.important-info p {
	margin: 10px 0;
}

.important-info ul {
	list-style-type: disc;
	margin-left: 20px;
}

.important-info ul li {
	margin-bottom: 5px;
}

.important-info a {
	color: #007bff;
	text-decoration: none;
}

.important-info a:hover {
	text-decoration: underline;
}

.contact-form-content .section-heading {
	font-size: 39px;
}

@media (max-width: 1400px) {
	.contact-form-content .section-heading {
		font-size: 32px;
	}
}

.form-image img {
	height: 264px;
}

@media (max-width: 1200px) {
	.form-image img {
		height: 262px;
	}

	.contact-form-content .section-heading {
		font-size: 28px;
	}

	.customer-info .info-block .sender-info,
	.customer-info .receiver-info-wrapper {
		gap: 15px;
	}
}

@media (max-width: 991px) {
	.form-image img {
		height: 319px;
	}
}

@media (max-width: 1024px) {
	.main-container {
		margin: 0;
	}

	.contacts-info .departments {
		gap: 20px;
		margin-bottom: 30px;
	}
}

@media (max-width: 768px) {
	.news-wrapper .news-item {
		flex: 0 0 100%;
		padding: 0;
	}

	.customer-info .info-block .sender-info,
	.customer-info .receiver-info-wrapper {
		gap: 0;
	}

	.main-container {
		margin: 0;
	}
	.features-section {
		margin-top: 30px;
	}

	.contact-block {
		margin: 30px 0 0px;
	}

	.news-section {
		margin-top: 30px;
	}

	.faq-section {
		margin-top: 30px;
	}

	.about-company .services {
		margin-bottom: 0;
	}

	.about-company .stats,
	.about-company .services {
		gap: 20px;
	}
}

.iti__country-list {
	top: 0;
}

.iti--separate-dial-code,
.iti--allow-dropdown {
	width: 100%;
}

.iti--container {
	max-height: 100%;
	max-width: 100%;
}

.service-container .search-box {
	margin: 0 20%;
	background-color: #f8fafa;
	padding: 50px 60px;
	display: flex;
	flex-direction: column;
	gap: 19px;
	border-radius: 30px;
}

.service-container .search-input {
	width: 100%;
	max-width: 100%;
	border: none;
	background-color: #fff;
	text-align: center;
	padding: 10px;
}

.service-container .btn-primary {
	width: 100%;
	max-width: 100%;
	padding: 10px;
}

.service-container h1{
	font-size: 48px;
}

.service-container p{
	font-size: 24px;
	max-width: 950px;
}


@media screen and (max-width: 768px) {
	.service-container .search-box {
		margin: 0;
		padding: 20px;
	}

	.service-container h1{
		font-size: 32px;
	}

	.service-container p{
		font-size: 14px;
		max-width: 950px;
	}
}

.recipients .header,
.customer-info .header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}

.recipients .icon,
.customer-info .icon{
	margin-right: 5px;
}

.recipients .btn-edit .icon {
	margin-top: 5px;
}

.recipients .header .icon {
	background-color: #ffcc00; /* Цвет иконки */
	-webkit-mask-image: url('../images/add-user-icon.svg');
	mask-image: url('../images/add-user-icon.svg');
	mask-repeat: no-repeat;
	mask-size: contain;
	display: inline-block;
	width: 20px;  /* Размер иконки */
	height: 20px;
	margin-right: 5px; /* Отступ от текста */
}

.delivery-content .btn {
	max-width: 440px;
}

.recipients-table .add-sender,
.customer-info .add-sender {
	background-color: #ffcc00;
}

.recipients-table .add-sender:hover,
.customer-info .add-sender:hover {
	background-color: #f0c300;
}

.delivery-content .recipients {
	margin-top: 120px;
}

.recipients .add-recipient {
	background-color: #3a00d4;
	color: #ffcc00;
}

.recipients .toggle-menu-icon:hover {
	opacity: 0.9;
}

.recipients .add-recipient:hover {
	background-color: #2900a8;
}

.customer-info .customer-info-wrapper {
	padding: 35px 65px;
	border-radius: 30px;
	background-color: #f8fafa;
}

.customer-info .info-block {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
}

.customer-info .info-block h3 {
	font-size: 36px;
	font-weight: 600;
	margin-bottom: 20px;
}

.customer-info .sender-info-block p,
.customer-info .receiver-info-block p {
	font-size: 21px;
	font-weight: 500;
	margin-bottom: 54px;
}

.customer-info .sender-info-block,
.customer-info .visit-date-block,
.customer-info .receiver-info,
.customer-info .coupon-block {
	width: 100%;
}

.customer-info .coupon-block p,
.customer-info .visit-date-wrapper p {
	margin-bottom: 17px;
}

.customer-info .coupon-block,
.customer-info .visit-date-wrapper {
	font-weight: 600;
}

.customer-info .info-block .sender-info,
.customer-info .receiver-info-wrapper {
	display: flex;
}


.customer-info .receiver-text {
	position: relative;
	padding-right: 40px; /* Добавляем немного места справа */
}

.customer-info .close-button {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%); /* Выравнивание по центру строки */
	background: none;
	border: none;
	cursor: pointer;
	font-size: 16px;
	color: #320063;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}


.customer-info .form-control {
	border-radius: 30px;
	border: none;
	background: #fff; /* Убираем стандартный фон */
	font-weight: 500;
	padding: 10px 25px;
}

.customer-info .coupon-block .form-control.coupon {
	max-width: 415px;
}

.customer-info .form-control.visit-date::-webkit-calendar-picker-indicator {
	display: none; /* Убирает стандартную иконку */
}

.customer-info .custom-calendar-icon-wrapper {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 450px;
}

.customer-info .form-control.visit-date {
	width: 100%;
	padding-right: 40px; /* Оставляем место для иконки */
}

.customer-info .custom-calendar-icon {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 13px;
	height: 13px;
	background: url('../images/calendar.svg') no-repeat center center;
	background-size: contain;
	cursor: pointer;
}

.customer-info .form-check-input.custom-checkbox {
	background-color: white; /* Фон чекбокса */
	border: 2px solid #452ce8; /* Цвет рамки */
	width: 20px;
	height: 20px;
}

.customer-info .form-check {
	display: flex;
	gap: 10px;
	margin-bottom: 50px;
	margin-top: 19px;
}

.customer-info .form-check-label {
	font-size: 18px;
}

.customer-info .form-check-input.custom-checkbox:checked {
	background-color: #452ce8; /* Новый цвет заливки */
	border-color: #452ce8; /* Цвет рамки */
}

.customer-info .form-check-input.custom-checkbox:focus {
	box-shadow: 0 0 0 0.25rem rgb(13 14 253 / 25%);
}

.customer-info .customer-info-wrapper .btn {
	max-width: 900px;
}

.recipients .actions {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 30px;
	margin-bottom: 75px;
	background-color: #f8fafa;
	border-radius: 30px;
	padding: 34px 65px;
	gap: 28px;
}

.recipients .actions p {
	font-size: 24px;
	font-weight: 600;
}

.recipients .actions .form-check-input.custom-radio {
	width: 18px;
	height: 18px;
	--bs-form-check-bg: #f3f3f3;
}

.recipients .actions .form-check-input.custom-radio:checked {
	background-color: #3a00d4;
	border-color: #3a00d4;
}

.recipients .actions .form-check-input.custom-radio:focus {
	box-shadow: 0 0 0 0.25rem rgb(13 14 253 / 25%);
}


/* Увеличенный отступ между радио-кнопкой и текстом */
.recipients .actions .form-check-label {
	margin-left: 5px;
}


.recipients .recipients-wrapper .table {
	flex-grow: 1; /* Таблица будет занимать всю доступную ширину */
}


.recipients .recipients-wrapper .table th {
	background-color: #fff;
}

.recipients .recipients-wrapper .table {
	box-shadow: none;
	width: 100%;
	max-width: 100%;
	border-collapse: separate; /* Убирает промежутки между ячейками */
	border-spacing: 0 10px;
}



.recipients .recipients-wrapper .table td,
.recipients .recipients-wrapper .table th {
	border: none;
	padding: 15px; /* Отступ внутри ячеек */
	text-align: left;
}

.recipients .recipients-wrapper .table tr td {
	background-color: #f8fafa !important;
	font-weight: 500;
}

.recipients .recipients-wrapper .table tr td:nth-child(2) {
	font-weight: 700;
	font-size: 21px;
}

/* Закругление углов у первой и последней ячеек в строке */
.recipients .recipients-wrapper .table tr td:first-child {
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
}

.recipients .recipients-wrapper .table tr td:last-child {
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
}

/* Общий контейнер */
.recipients .number-input-wrapper {
	display: flex;
	align-items: center;
	background-color: #f8fafa;
	border-radius: 8px;
	padding: 5px;
}

/* Поле ввода */
.recipients .package-count-input {
	width: 50px;
	height: 40px;
	border: none;
	text-align: center;
	font-size: 16px;
	background: white;
	outline: none;
	border-radius: 5px;
}

/* Контейнер кнопок */
.recipients .number-controls {
	display: flex;
	flex-direction: column;
	background-color: #2d0db1;
	border-radius: 5px;
	margin-left: 5px;
}

/* Кнопки */
.recipients .btn-number {
	width: 30px;
	height: 20px;
	color: white;
	font-size: 18px;
	border: none;
	cursor: pointer;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}

.recipients .btn-number:hover {
	background: rgba(255, 255, 255, 0.2);
}

.recipients-table .btn-primary {
	width: 100%;
	max-width: 100%;
	padding: 5px;
	text-transform: none;
	font-size: 16px;
	font-weight: 600;
}

@media (max-width: 1200px) {
	.recipients .btn-edit .icon {
		margin-right: 0;
	}

	.recipients-table .btn-primary {
		font-size: 12px;
	}
}

@media (max-width: 991px) {
	.recipients-table .btn-primary {
		text-indent: -9999px; /* Убирает текст за границы кнопки */
		white-space: nowrap; /* Предотвращает перенос текста */
		overflow: hidden;
	}
}

.recipients-table tr.details-tr {
	display: table-row;
	/* Либо вообще не указывать,
       ведь <tr> по умолчанию имеет display: table-row */
}

/* Если нужно прятать/показывать строку через класс .hidden: */
.recipients-table tr.details-tr.hidden {
	display: none !important;
}

/* 2) Для внутренних "строк" внутри <div class="details-content"> */
.recipients-table .details-line {
	display: flex;            /* теперь это чисто блочный flex-контейнер */
	align-items: baseline;
	margin-bottom: 5px;       /* Отступ между этими блоками */
}

.recipients-table .details-content {
	display: block; /* либо flex-direction: column, как вам удобнее */
	/* Или можно оставить flex/cоlumn,
       только не путать это с <tr>. */
	width: 100%;    /* чтобы тянулось на всю ширину ячейки */
	box-sizing: border-box;
	border-radius: 5px;
	font-size: 14px;
}

.recipients-table .details-row {
	display: flex;
	align-items: baseline; /* Выровнять текст */
	margin-bottom: 5px; /* Отступ между строками */

}

.recipients-table .details-label {
	width: 150px; /* Делаем шире для лучшего выравнивания */
	flex-shrink: 0; /* Заголовок не сжимается */
	text-align: left; /* Выровнять заголовки влево */
}

.recipients-table .details-value {
	flex-grow: 1; /* Растягивать текст на всю ширину */
}

.recipients .recipients-wrapper .table .details-tr td {
	background-color: #fff !important;
}

.modal-add-user,
.recipient-update-modal {
	position: fixed; /* Фиксированное положение */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* Центрирование */
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 43px 93px;
	background-color: #f8fafa;
	width: 80%; /* Уменьшение ширины, чтобы не выходило за границы */
	max-width: 1200px;
	max-height: 90vh; /* Ограничение по высоте */
	border-radius: 30px;
	overflow: hidden; /* Обрезка лишнего */
	box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
	margin:0;
}

.recipient-update-modal .form-group {
	width: 100%;
}

.recipient-update-modal .btn-primary {
	width: 120%;
	max-width: 120%;
}

.modal-add-user .form-grid .form-control {
	border-radius: 30px;
	height: 60px;
	border: none;
}

.modal-add-user .form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr; /* Две колонки */
	gap: 20px; /* Отступ между полями */
	align-items: end;
	overflow: auto;
	max-height: 70vh; /* Если контент не помещается, включаем прокрутку */
	padding: 4px;
}

.modal-add-user .form-grid .btn-primary {
	grid-column: 1 / -1; /* Кнопка занимает всю ширину сетки */
	justify-self: center; /* Центрируем кнопку горизонтально */
}

/* Для мобильных устройств: переключаем на 1 колонку */
@media (max-width: 768px) {
	.recipient-update-modal .edit-recipient-form {
		grid-template-columns: 1fr;
	}
}

.recipient-update-modal .edit-recipient-form {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* Три колонки */
	gap: 20px; /* Отступ между полями */
	align-items: end;
	max-height: 70vh; /* Если контент не помещается, включаем прокрутку */
	padding: 4px;
}

.edit-recipient-form .form-control {
	border-radius: 30px;
	border: none;
	padding: 16px 36px;
}

.modal-add-user .form-control {
	width: 100%; /* Растягиваем поля на всю ширину */
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 14px;
}

.modal-add-user .btn-primary {
	max-width: 100%;
	margin-top: 15px;
	padding: 15px;
	background-color: #4c1d95;
	color: white;
	border: none;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	text-transform: uppercase;
}

.modal-add-user .btn-primary:hover {
	background-color: #3b1178;
}


/* Ширина по умолчанию для desktop */
.col-toggle-menu {
	width: 50px;
}

.col-fullname {
	width: 360px;
}

@media screen and (max-width: 1400px) {
	.col-toggle-menu {
		width: 50px; /* Уменьшаем ширину */
	}

	.col-fullname {
		width: 300px; /* Уменьшаем ширину для имени */
	}
	
}

@media (max-width: 1024px) {
	.customer-info .info-block .sender-info,
	.customer-info .info-block .receiver-info-wrapper {
		flex-direction: column;
	}

	.customer-info .custom-calendar-icon-wrapper,
	.customer-info .coupon-block .form-control.coupon {
		max-width: 100%;
	}

	.customer-info .info-block .receiver-info-wrapper {
		margin-bottom: 20px;
	}

	.col-toggle-menu {
		width: 50px; /* Уменьшаем ширину */
	}

	.col-fullname {
		width: 200px; /* Уменьшаем ширину для имени */
	}
}

@media (max-width: 768px) {
	.col-toggle-menu {
		width: auto; /* Минимальная ширина */
	}

	.col-fullname {
		width: auto; /* Минимальная ширина для имени */
		font-weight: 700;
	}

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

	.recipients .add-recipient {
		max-width: 100%;
		justify-content: flex-start;
		text-align: left;
		padding: 10px 43px;
		line-height: 1;
		margin-bottom: 10px;
	}

	.customer-info .add-sender {
		max-width: 100%;
		margin-top: 25px;
	}

	.customer-info .info-block h3,
	.recipients .actions p {
		font-size: 21px;
	}

	.customer-info .sender-info-block p,
	.customer-info .receiver-info-block p,
	.customer-info .form-check-label,
	.recipients .actions .form-check-label {
		font-size: 18px;
	}

	.customer-info .btn.add-sender {
		justify-content: flex-start;
		text-align: left;
		padding: 10px 43px;
		line-height: 1;
	}

	.customer-info .icon {
		margin-right: 10px;
	}

	.recipients .actions .actions-wrapper {
		flex-direction: column;
	}

	.recipients .actions {
		padding: 38px 29px;
	}

	.recipient-details.show {
		max-height: 500px; /* Достаточно для контента */
		width: 100%;
		opacity: 1;
		transform: scaleY(1);
	}
	
	.arrow-icon {
		transition: transform 0.3s ease;
	}

	.customer-info .custom-calendar-icon {
		width: 17px;
		height: 17px;
	}
}

/* Десктопная версия (по умолчанию) */
.recipients-table .details-row {
	display: none; /* Скрываем строки с деталями */
}

/* Десктопная версия (по умолчанию) */
.recipients-table th,
.recipients-table td {
	display: table-cell;
}

@media (max-width: 768px) {
	/* Скрываем все столбцы по умолчанию */
	.recipients-table th,
	.recipients-table td {
		display: none;
	}

	/* Оставляем только нужные столбцы */
	.recipients-table .col-toggle-menu,
	.recipients-table .col-fullname,
	.recipients-table .action-column {
		display: table-cell;
	}


	/* Устанавливаем адаптивный макет */
	.recipients-table {
		table-layout: fixed;
	}

	/* Раскрываем строку с деталями только при необходимости */
	.details-row {
		display: none;
	}

	/* Показываем ячейки в этой строке */
	.details-row.open td {
		display: table-cell;
	}

	.details-row.open .col-toggle-menu {
		display: table-cell;
	}

	/* Уменьшаем размеры иконок и кнопок */
	.recipients-table .toggle-menu-icon {
		width: 35px;
	}

	.recipients-table .btn-edit {
		font-size: 12px;
		padding: 5px;
		width: 35px;
		height: 35px;
	}

	.recipients-table .details-tr {
		display: none !important;;
	}

	.details-content {
		display: block;
		width: 100%;
		background: #f9f9f9;
		border-radius: 5px;
		box-sizing: border-box;
	}

	.recipients .recipients-wrapper .table td {
		text-align: center;
	}

	.recipients .recipients-wrapper .table th {
		text-align: center;
	}

	.recipients .actions {
		margin-bottom: 15px;
	}

	.modal-add-user .form-grid {
		grid-template-columns: 1fr;
		padding: 6px;
	}

	.recipient-update-modal,
	.modal-add-user {
		padding: 20px;
	}

	.recipient-update-modal .edit-recipient-form {
		grid-template-columns: 1fr;
		overflow: auto;
}

.recipient-update-modal .form-group {
    width: 100%;
}

.modal-add-user h2,
.recipient-update-modal h2 {
    width: 75%;
}

.recipients .package-count-input {
    width: 100%;
}

.recipients-table .add-sender {
    max-width: 100%;
    margin-top: 5px;
    margin-bottom: 15px;
}

.details-row .details-content-wrapper {
    display: flex;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
}

.details-row .details-content-wrapper .details-label {
    font-weight: 300;
	font-size: 16px;
}

.details-row .details-content-wrapper .details-value {
    font-weight: 600;
	font-size: 16px;
}

.details-row .details-content-block {
    margin-bottom: 10px;
}

.details-content-block p {
    margin: 0;
    font-size: 14px;
}

.details-content-block strong {
    font-weight: bold;
    color: #000;
}

.recipients .recipients-wrapper .table tr td:nth-child(2) {
    font-size: 18px;
}

tr[data-key].open + tr.details-row.open {
    /* "подтягиваем" .details-row вверх на 15px,
       «убивая» общий отступ */
		margin-top: -15px;
	}

	tr.details-row.open {
		display: block;
		width: 100%;
		margin-top: -30px;
	}

	/* 1) Скрываем заголовок таблицы (th) — либо выборочно */
	.recipients-table thead {
		display: none;
	}

	/* 2) Скрываем все ячейки по умолчанию,
       а нужные столбцы будем «восстанавливать» через display: block; */
	.recipients-table tr,
	.recipients-table th,
	.recipients-table td {
		display: none; /* скрыты для упрощения */
	}

	/* 3) «Ломаем» каждую строку в "карточку" */
	.recipients-table tr[data-key] {
		display: flex;
		width: 100%;
		background-color: #fff;
		border-radius: 5px;
		box-sizing: border-box;
	}

	/* 4) Показываем нужные ячейки (которые хотим видеть в «шапке» карточки) — например, .col-toggle-menu, .col-fullname, .action-column */
	.recipients-table .col-toggle-menu,
	.recipients-table .col-fullname,
	.recipients-table .action-column {
		width: 100%; /* займёт всю ширину «карточки» */
		margin-bottom: 10px; /* отступ между элементами */
	}

	/* 5) Настройка раскрывающихся строк */
	.details-row {
		display: none; /* по умолчанию скрыты */
	}

	/* При клике раскрывается */
	.details-row.open {
		display: block;
		width: 100%;
		margin-top: -10px; /* при желании "прилепить" */
		background: #f9f9f9;
		border-radius: 0 0 30px 30px;
		box-sizing: border-box;
		padding: 15px;
	}

	/* Если внутри .details-row у вас тоже <td>, делаем их блочными */
	.details-row.open td {
		display: block;
		width: 100%;
		/* убираем margin-bottom по умолчанию, если нужно */
	}

	/* 6) Кнопка "Изменить" на мобильном (увеличить высоту) */
	.btn-edit {
		font-size: 16px;      /* покрупнее */
		padding: 10px 20px;   /* больше отступов = выше кнопка */
		line-height: 1.2;
		height: auto;         /* чтобы не было зафиксированной высоты */
	}

	.recipients-table .col-toggle-menu,
	.recipients-table .col-fullname,
	.recipients-table .action-column {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.recipient-update-modal .btn-primary {
		width: 100%;
		max-width: 100%;
	}

	.delivery-content .header .section-title {
		font-size: 32px;
		font-weight: 600;
	}

	.recipients .header:first-child  {
		align-items: flex-start;
		gap: 20px;
	}

	.recipients-table .number-input-header {
		text-align: left;
		font-size: 16px;
		font-weight: 600;
	}
}

/* Основные стили для затемнения фона */
.modal-overlay  {
	display: none; /* Скрываем модальное окно по умолчанию */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный фон */
	z-index: 1000; /* Размещаем окно поверх других элементов */
	justify-content: center; /* Горизонтальное выравнивание содержимого */
	align-items: center; /* Вертикальное выравнивание содержимого */
}

/* Стили для содержимого модального окна */
.modal-overlay .modal-content {
	display: flex;
	flex-direction: column;
	background: #fff; /* Белый фон модального окна */
	padding: 48px 110px;
	border-radius: 30px; /* Закругленные углы */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); /* Легкая тень */
	width: 90%; /* Ширина модального окна */
	max-width: 600px; /* Максимальная ширина */
	text-align: center; /* Центровка текста */
	z-index: 1010; /* Поверх overlay */
}

/* Стили для кнопки закрытия */
.modal-overlay .modal-close-button {
	position: absolute;
	top: 10px;
	right: 10px;
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
}

.modal-overlay .modal-close-button img {
	width: 20px;
	height: 20px;
}

.modal-overlay .modal-header {
	display: flex;
	flex-direction: column;
	margin-bottom: 45px;
	border: 0;
}

.modal-overlay .modal-header h2 {
	font-size: 27px;
}

.modal-overlay .modal-header p {
	font-size: 16px;
}

.modal-overlay .modal-body .label {
	font-size: 16px;
}

.modal-overlay .modal-header,
.modal-overlay .modal-body {
	padding: 0;
}

.modal-overlay .modal-body .value {
	font-size: 24px;
	font-weight: 600;
}


.modal .form-control:focus,
.delivery-content .form-control:focus {
	box-shadow: 0 0 0 0.25rem rgba(69, 15, 214, 0.35)
}


.reviews-page .reviews-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 51px;
}

.reviews-page .review-card {
	background: #f9f9f9;
	padding: 35px 38px 32px;
	border-radius: 30px;
	width: 100%;
	max-width: 630px;
}

.reviews-page .video-preview {
	position: relative;
	cursor: pointer;
}

.reviews-page .video-preview-wrapper::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(86, 0, 237, 0.6); /* Фиолетовый цвет */
	mix-blend-mode: multiply; /* Улучшает смешивание */
	pointer-events: none;
	border-radius: 20px;
}


.reviews-page .video-preview .video-preview-img {
	width: 100%;
	height: 300px;
	border-radius: 20px;
}

.reviews-page .play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px; /* Размер кнопки */
	height: 56px;
	border-radius: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.3s ease-in-out;
	box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}

.reviews-page .slogan {
	position: absolute;
	top: 24px;
	right: 19px;
	border-radius: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.3s ease-in-out;
}

.reviews-page .review-text blockquote {
	font-size: 18px;
	margin: 10px 0;
}

.reviews-page .review-author {
	font-weight: 600;
	font-size: 18px;
	line-height: 1;
	margin-top: 12px;
}

.reviews-page .review-geo {
	font-size: 14px;
}

.reviews-page .review-text blockquote {
	display: -webkit-box;
	-webkit-line-clamp: 2; /* Ограничиваем до 2 строк */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis; /* Добавляет "..." в конце */
	max-height: 3.2em; /* Высота примерно двух строк */
	line-height: 1.6em; /* Регулируем межстрочный интервал */
}

.video-modal {
	display: none; /* По умолчанию скрыто */
	position: fixed;
	z-index: 9999; /* Убедитесь, что это выше, чем шапка/меню */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8); /* Тёмный фон с прозрачностью */

	/* Горизонтальное и вертикальное центрирование */
	justify-content: center;
	align-items: center;
}

.video-modal-content {
	width: 80%;       /* Можно подогнать под нужный размер */
	max-width: 1000px;
	background-color: transparent; /* убираем белый фон, чтобы была только полупрозрачная подложка */
	border-radius: 0;              /* убираем скругления */
	padding: 0;                    /* убираем внутренние отступы */
	box-shadow: none;             /* убираем тень, если не нужна */
}

/* Кнопка закрытия: большой "X" в правом верхнем углу */
.video-close {
	position: absolute;
	top: 40px;
	right: 50px;
	font-size: 72px;
	color: #fff;         /* Белый цвет, чтобы выделялась на тёмном фоне */
	cursor: pointer;
}

/* Сам iframe с видео */
#video-frame {
	width: 100%;
	height: 56.25vw; /* Соотношение 16:9 при ширине 100vw. Можно ограничить max-height */
	max-height: 50vh;
}

.text-review .video-preview {
	display: none;
}

.text-review .review-content {
	display: block;
	margin-top: 19px;
}

.text-review .review-title {
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 10px;
}

.review-text {
	font-size: 16px;
	line-height: 1.5;
}

.text-review .review-text {
	display: flex;
	justify-content: space-between;
}


.video-review .review-title {
	font-size: 18px;
	font-weight: 600;
	margin: 15px 0;
}

.reviews-grid.text-reviews {
	background-color: #f8f9fa;
	width: 100vw; /* Растягиваем блок на всю ширину экрана */
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	padding: 60px 0;
	display: flex; /* Добавляем flex */
	justify-content: center; /* Центрируем содержимое */
	margin-bottom: -100px;
}

.review-card.text-review {
	background-color: #fff;
}

.reviews-grid.text-reviews .container {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

@media (max-width: 765px) {
	.reviews-grid.text-reviews .container,
	.reviews-page .reviews-grid {
		grid-template-columns: repeat(1, 1fr);
	}
}