.hover-brown {
	transition-property: background-color, color;
	transition-duration: 100ms;
	cursor: pointer;
}
@media (pointer: fine) {
  .hover-brown:hover {
    background-color: #77472f;
	color: #F3F0EB;
  }
  .hover-brown {
    transition-duration: 300ms;
  }
}

.hover-deep-blue {
	transition-property: background-color, color;
	transition-duration: 100ms;
	cursor: pointer;
	background-color: #E2DED5; 
	color: #77472f;
}

@media (pointer: fine) {
  .hover-deep-blue:hover {
    background-color: #232532;
	  color: #F3F0EB;
  }
  .hover-deep-blue {
    transition-duration: 300ms;
  }
}

.hover-deep-blue:active,
.hover-brown:active  {
  background-color: #ff4807;
	color: #F3F0EB;
}

.hover-orange {
	transition-property: background-color, color;
	transition-duration: 100ms;
	cursor: pointer;
	background-color: #ff4807; 
}
.hover-orange-text {
  transition-property: color;
	transition-duration: 100ms;
	cursor: pointer;
}

@media (pointer: fine) {
  .hover-orange:hover {
    background-color: #77472F;
  }

  .hover-orange-text:hover {
    color: #77472F;
  }
  .hover-orange,
  .hover-orange-text {
    transition-duration: 300ms;
  }
}
.hover-orange:active {
  background-color: #232532;
}
.hover-orange-text:active {
  color: #232532;
}

.hover-dop2-text {
  transition-property: color;
	transition-duration: 100ms;
	cursor: pointer;
}

@media (pointer: fine) {
  .hover-dop2-tex:hover {
	  color: #b46f3f;
  }
  .hover-dop2-text {
    transition-duration: 300ms;
  }
}
.hover-dop2-text:active {
	color: #ff4807;
}

.hover-dop2 {
  transition-property: background-color;
	transition-duration: 100ms;
	cursor: pointer;
}

@media (pointer: fine) {
  .hover-dop:hover {
	  background-color: #b46f3f;
  }
  .hover-dop2 {
    transition-duration: 300ms;
  }
}
.hover-dop2:active {
	background-color: #ff4807;
}

.hover-dop1 {
  transition-property: background-color;
	transition-duration: 100ms;
	cursor: pointer;
}
@media (pointer: fine) {
  .hover-dop1:hover {
	  background-color: #77472f;
  }
  .hover-dop1 {
    transition-duration: 300ms;
  }
}
.hover-dop1:active {
	background-color: #232532;
}

/* Floating messenger / scroll buttons */
.floating-buttons {
	position: fixed;
	z-index: 70;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	pointer-events: none;
}

.floating-btn {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 9999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	pointer-events: auto;
	border: 2px solid rgba(255, 255, 255, 0.55);
	box-shadow:
		0 8px 20px rgba(35, 37, 50, 0.18),
		0 2px 6px rgba(35, 37, 50, 0.12);
	transition:
		transform 200ms ease-out,
		box-shadow 200ms ease-out,
		opacity 250ms ease-out;
	overflow: hidden;
}

.floating-btn img,
.floating-btn svg {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}

.floating-btn--top {
	background: #b46f3f;
	color: #f3f0eb;
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px) scale(0.92);
}

.floating-btn--top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

.floating-btn--wa {
	background: #25d366;
}

.floating-btn--tg {
	background: #2aabee;
}

.floating-btn--avito {
	background: #ffffff;
}

@media (min-width: 768px) {
	.floating-buttons {
		gap: 0.75rem;
	}

	.floating-btn {
		width: 3.5rem;
		height: 3.5rem;
	}

	.floating-btn img,
	.floating-btn svg {
		width: 1.5rem;
		height: 1.5rem;
	}
}

@media (pointer: fine) {
	.floating-btn:hover {
		transform: translateY(-2px) scale(1.06);
		box-shadow:
			0 12px 24px rgba(35, 37, 50, 0.22),
			0 4px 10px rgba(35, 37, 50, 0.14);
	}

	.floating-btn--top.is-visible:hover {
		transform: translateY(-2px) scale(1.06);
	}
}

/* === Custom backgrounds for front page === */

/* Hero section background (mobile only) */
.hero-bg {
  background-image: url("../images/home_page/bg_hero.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}

/* About left column background (mobile only) */
.about-part1-bg {
  background-image: url("../images/home_page/part1.svg");
  background-repeat: no-repeat;
  background-position: right bottom;
}

/* About right block: part2 on mobile, map on md+ */
.about-part2-bg {
  background-image: url("../images/home_page/part2.svg");
  background-repeat: no-repeat;
  background-position: left center;
}

@media (min-width: 768px) {
  /* На планшете/десктопе скрываем мобильные фоны hero и левой колонки */
  .hero-bg {
    background-image: none;
  }

  .about-part1-bg {
    background-image: none;
  }

  .about-part2-bg {
    background-image: url("../images/home_page/russia_map.svg");
    background-size: 100% 84%;
    background-position: right top;
  }
}

/* Advantages section background */
.advantages-bg {
  /* как было в Tailwind: фоновая подложка под весь блок, в т.ч. на мобайле */
  background-image: url("../images/home_page/lines2.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
}

/* Внутренняя правая колонка: фон только на больших экранах,
   чтобы не дублировать картинку и не мешать мобильной верстке */
.advantages-bg-inner {
  background-image: none;
}

@media (min-width: 1280px) {
  .advantages-bg {
    /* на очень широких экранах фон оставляем только внутри правого блока */
    background-image: none;
  }

  .advantages-bg-inner {
    background-image: url("../images/home_page/lines2.svg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
  }
}

/* Home decorations. Paths are relative to this file, not to dist/output.css. */
@media (min-width: 1440px) {
  .home-lines {
    background-image: url("../images/home_page/lines.svg");
  }
}

@media (min-width: 1024px) {
  .home-lines3 {
    background-image: url("../images/home_page/lines3.svg");
  }
}

/* Order section backgrounds: mobile on section, desktop on inner container */
.order-bg-mobile {
  background-image: url("../images/home_page/order_bg.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

@media (min-width: 1024px) {
  .order-bg-mobile {
    background-image: none;
  }

  .order-bg-desktop {
    background-image: url("../images/home_page/order_bg.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
  }
}