/**
  Нормализация блочной модели
 */
*,
::before,
::after {
  box-sizing: border-box;
}

/**
  Убираем внутренние отступы слева тегам списков,
  у которых есть атрибут class
 */
:where(ul, ol):where([class]) {
  padding-left: 0;
}

/**
  Убираем внешние отступы body и двум другим тегам,
  у которых есть атрибут class
 */
body,
:where(blockquote, figure, fieldset):where([class]) {
  margin: 0;
}

/**
  Убираем внешние отступы вертикали нужным тегам,
  у которых есть атрибут class
 */
:where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol,
  dl
):where([class]) {
  margin-block: 0;
}

:where(dd[class]) {
  margin-left: 0;
}

:where(fieldset[class]) {
  padding: 0;
  border: none;
}

/**
  Убираем стандартный маркер маркированному списку,
  у которого есть атрибут class
 */
:where(ul[class]) {
  list-style: none;
}

:where(address[class]) {
  font-style: normal;
}

/**
  Обнуляем вертикальные внешние отступы параграфа,
  объявляем локальную переменную для внешнего отступа вниз,
  чтобы избежать взаимодействие с более сложным селектором
 */
p {
  --paragraphMarginBottom: 24px;

  margin-block: 0;
}

/**
  Внешний отступ вниз для параграфа без атрибута class,
  который расположен не последним среди своих соседних элементов
 */
p:where(:not([class]):not(:last-child)) {
  margin-bottom: var(--paragraphMarginBottom);
}


/**
  Упрощаем работу с изображениями и видео
 */
img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/**
  Наследуем свойства шрифт для полей ввода
 */
input,
textarea,
select,
button {
  font: inherit;
}

html {
  /**
    Пригодится в большинстве ситуаций
    (когда, например, нужно будет "прижать" футер к низу сайта)
   */
  height: 100%;
  /**
    Убираем скачок интерфейса по горизонтали
    при появлении / исчезновении скроллбара
   */
  scrollbar-gutter: stable;
   font-size: 16px;
}

/**
  Плавный скролл
 */
html {
  scroll-behavior: smooth;
}

body {
  /**
    Пригодится в большинстве ситуаций
    (когда, например, нужно будет "прижать" футер к низу сайта)
   */
  min-height: 100%;
  /**
    Унифицированный интерлиньяж
   */
  line-height: 1.5;
}

/**
  Нормализация высоты элемента ссылки при его инспектировании в DevTools
 */
a:where([class]) {
  display: inline-flex;
}

/**
  Курсор-рука при наведении на элемент
 */
button,
label {
  cursor: pointer;
}

/**
  Приводим к единому цвету svg-элементы
  (за исключением тех, у которых уже указан
  атрибут fill со значением 'none' или начинается с 'url')
 */
/*:where([fill]:not(
  [fill="var(--icon-color, none"],
  [fill^="url"]
)) {
  fill: currentColor;
}*/

/**
  Приводим к единому цвету svg-элементы
  (за исключением тех, у которых уже указан
  атрибут stroke со значением 'none')
 */
:where([stroke]:not(
  [stroke="none"],
  [stroke^="url"]
)) {
  stroke: currentColor;
}

/**
  Чиним баг задержки смены цвета при взаимодействии с svg-элементами
 */
svg * {
  transition-property: fill, stroke;
}

/**
  Приведение рамок таблиц в классический 'collapse' вид
 */
:where(table) {
  border-collapse: collapse;
  border-color: currentColor;
}

/**
  Удаляем все анимации и переходы для людей,
  которые предпочитают их не использовать
 */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}



body {
	font-family: Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #464C74;
	line-height: 20px;
	width: 100%;
}

h1, h2, h3, h4, h5, h6 {
	color: #262335;
}
/* default font size */
.fa {
	font-size: 14px;
}
/* Override the bootstrap defaults */
h1 {
	font-size: 33px;
}
h2 {
	font-size: 27px;
}
h3 {
	font-size: 21px;
}
h4 {
	font-size: 15px;
}
h5 {
	font-size: 12px;
}
h6 {
	font-size: 10.2px;
}
a {
	color: #23a1d1;
}
a:hover {
	text-decoration: none;
}
legend {
	font-size: 18px;
	padding: 7px 0px
}
label {
	font-size: 12px;
	font-weight: normal;
}
select.form-control, textarea.form-control, input[type="text"].form-control, input[type="password"].form-control, input[type="datetime"].form-control, input[type="datetime-local"].form-control, input[type="date"].form-control, input[type="month"].form-control, input[type="time"].form-control, input[type="week"].form-control, input[type="number"].form-control, input[type="email"].form-control, input[type="url"].form-control, input[type="search"].form-control, input[type="tel"].form-control, input[type="color"].form-control {
	font-size: 12px;
}
.input-group input, .input-group select, .input-group .dropdown-menu, .input-group .popover {
	font-size: 12px;
}
.input-group .input-group-addon {
	font-size: 12px;
	height: 30px;
}
/* Fix some bootstrap issues */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
	display: inline;
}

.nav-tabs {
	margin-bottom: 15px;
}
div.required .control-label:before {
	content: '* ';
	color: #F00;
	font-weight: bold;
}

/* logo */
#logo {
	margin: 0 0 10px 0;
}
/* search */
#search {
	margin-bottom: 10px;
}
#search .input-lg {
	height: 40px;
	line-height: 20px;
	padding: 0 10px;
}
#search .btn-lg {
	font-size: 15px;
	line-height: 18px;
	padding: 10px 35px;
	text-shadow: 0 1px 0 #FFF;
}
/* cart */
#cart {
	margin-bottom: 10px;
}
#cart > .btn {
	font-size: 12px;
	line-height: 18px;
	color: #FFF;
}
#cart.open > .btn {
	background-image: none;
	background-color: #FFFFFF;
	border: 1px solid #E6E6E6;
	color: #666;
	box-shadow: none;
	text-shadow: none;
}
#cart.open > .btn:hover {
	color: #444;
}
#cart .dropdown-menu {
	background: #eee;
	z-index: 1001;
}
#cart .dropdown-menu {
	min-width: 100%;
	overflow-y: auto;
	max-height: 800px;
	scrollbar-width: thin;
	overflow-x: hidden;
}
@media (max-width: 478px) {
	#cart .dropdown-menu {
		width: 100%;
	}
}
#cart .dropdown-menu table {
	margin-bottom: 10px;
}
#cart .dropdown-menu li > div {
	min-width: 427px;
	padding: 0 10px;
}
@media (max-width: 478px) {
	#cart .dropdown-menu li > div {
		min-width: 100%;
	}
}
#cart .dropdown-menu li p {
	margin: 20px 0;
}


/* content */
#content {
	min-height: 600px;
}

footer {
display: flex;
justify-content: center;
}

/* alert */
.alert {
	padding: 8px 14px 8px 14px;
}
/* breadcrumb */
.breadcrumb {
	margin: 0 0 20px 0;
	padding: 8px 0;
	border: 1px solid #ddd;
}
.breadcrumb i {
	font-size: 15px;
}
.breadcrumb > li {
	text-shadow: 0 1px 0 #FFF;
	padding: 0 20px;
	position: relative;
	white-space: nowrap;
}
.breadcrumb > li + li:before {
	content: '';
	padding: 0;
}
.breadcrumb > li:after {
	content: '';
	display: block;
	position: absolute;
	top: -3px;
	right: -5px;
	width: 26px;
	height: 26px;
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
html[dir=rtl] .breadcrumb > li::after {
  top: -3px;
  left: -5px;
  width: 26px;
  height: 26px;
  border-left: 1px solid #DDD;
  border-top: 1px solid #DDD;
  right: unset;
  border-right: unset;
  border-bottom:unset;

}
.pagination {
	margin: 0;
}
/* buttons */
.buttons {
	margin: 1em 0;
}
.btn {
	padding: 7.5px 12px;
	font-size: 12px;
	border: 1px solid #cccccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.btn-xs {
	font-size: 9px;
}
.btn-sm {
	font-size: 10.2px;
}
.btn-lg {
	padding: 10px 16px;
	font-size: 15px;
}
.btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover {
	font-size: 12px;
}
.btn-group > .btn-xs {
	font-size: 9px;
}
.btn-group > .btn-sm {
	font-size: 10.2px;
}
.btn-group > .btn-lg {
	font-size: 15px;
}
.btn-default {
	color: #777;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background-color: #e7e7e7;
	background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
	background-repeat: repeat-x;
	border-color: #dddddd #dddddd #b3b3b3 #b7b7b7;
}
.btn-primary {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
	background-color: #1f90bb;
	background-position: 0 -15px;
}
.btn-warning {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #faa732;
	background-image: linear-gradient(to bottom, #fbb450, #f89406);
	background-repeat: repeat-x;
	border-color: #f89406 #f89406 #ad6704;
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-danger {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #da4f49;
	background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
	background-repeat: repeat-x;
	border-color: #bd362f #bd362f #802420;
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-success {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #5bb75b;
	background-image: linear-gradient(to bottom, #62c462, #51a351);
	background-repeat: repeat-x;
	border-color: #51a351 #51a351 #387038;
}
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-info {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #df5c39;
	background-image: linear-gradient(to bottom, #e06342, #dc512c);
	background-repeat: repeat-x;
	border-color: #dc512c #dc512c #a2371a;
}
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
	background-image: none;
	background-color: #df5c39;
}
.btn-link {
	border-color: rgba(0, 0, 0, 0);
	cursor: pointer;
	color: #23A1D1;
	border-radius: 0;
}
.btn-link, .btn-link:active, .btn-link[disabled] {
	background-color: rgba(0, 0, 0, 0);
	background-image: none;
	box-shadow: none;
}
.btn-inverse {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #363636;
	background-image: linear-gradient(to bottom, #444444, #222222);
	background-repeat: repeat-x;
	border-color: #222222 #222222 #000000;
}
.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
	background-color: #222222;
	background-image: linear-gradient(to bottom, #333333, #111111);
}
/* list group */
.list-group a {
	border: 1px solid #DDDDDD;
	color: #888888;
	padding: 8px 12px;
}
.list-group a.active, .list-group a.active:hover, .list-group a:hover {
	color: #444444;
	background: #eeeeee;
	border: 1px solid #DDDDDD;
	text-shadow: 0 1px 0 #FFF;
}
/* carousel */
.carousel-caption {
	color: #FFFFFF;
	text-shadow: 0 1px 0 #000000;
}
.carousel-control .icon-prev:before {
	content: '\f053';
	font-family: FontAwesome;
}
.carousel-control .icon-next:before {
	content: '\f054';
	font-family: FontAwesome;
}
/* product list */
.product-thumb {
	border: 1px solid #ddd;
	margin-bottom: 20px;
	overflow: auto;
}
.product-thumb .image {
	text-align: center;
}
.product-thumb .image a {
	display: block;
}
.product-thumb .image a:hover {
	opacity: 0.8;
}
.product-thumb .image img {
	margin-left: auto;
	margin-right: auto;
}
.product-grid .product-thumb .image {
	float: none;
}
@media (min-width: 767px) {
.product-list .product-thumb .image {
	float: left;
	padding: 0 15px;
}
}
.product-thumb h4 {
	font-weight: bold;
}
.product-thumb .caption {
	padding: 0 20px;
	min-height: 180px;
}
.product-list .product-thumb .caption {
	margin-left: 230px;
}
@media (max-width: 1200px) {
.product-grid .product-thumb .caption {
	min-height: 210px;
	padding: 0 10px;
}
}
@media (max-width: 767px) {
.product-list .product-thumb .caption {
	min-height: 0;
	margin-left: 0;
	padding: 0 10px;
}
.product-grid .product-thumb .caption {
	min-height: 0;
}
}
.product-thumb .rating {
	padding-bottom: 10px;
}
.rating .fa-stack {
	font-size: 8px;
}
.rating .fa-star-o {
	color: #999;
	font-size: 15px;
}
.rating .fa-star {
	color: #FC0;
	font-size: 15px;
}
.rating .fa-star + .fa-star-o {
	color: #E69500;
}
h2.price {
	margin: 0;
}
.product-thumb .price {
	color: #444;
}
.product-thumb .price-new {
	font-weight: 600;
}
.product-thumb .price-old {
	color: #999;
	text-decoration: line-through;
	margin-left: 10px;
}
.product-thumb .price-tax {
	color: #999;
	font-size: 12px;
	display: block;
}
.product-thumb .button-group {
	border-top: 1px solid #ddd;
	background-color: #eee;
	overflow: auto;
}
.product-list .product-thumb .button-group {
	border-left: 1px solid #ddd;
}
@media (max-width: 768px) {
	.product-list .product-thumb .button-group {
		border-left: none;
	}
}
.product-thumb .button-group button {
	width: 60%;
	border: none;
	display: inline-block;
	float: left;
	background-color: #eee;
	color: #888;
	line-height: 38px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}
.product-thumb .button-group button + button {
	width: 20%;
	border-left: 1px solid #ddd;
}
.product-thumb .button-group button:hover {
	color: #444;
	background-color: #ddd;
	text-decoration: none;
	cursor: pointer;
}
@media (max-width: 1200px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
@media (max-width: 767px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
.thumbnails {
	overflow: auto;
	clear: both;
	list-style: none;
	padding: 0;
	margin: 0;
}
.thumbnails > li {
	margin-left: 20px;
}
.thumbnails {
	margin-left: -20px;
}
.thumbnails > img {
	width: 100%;
}
.image-additional a {
	margin-bottom: 20px;
	padding: 5px;
	display: block;
	border: 1px solid #ddd;
}
.image-additional {
	max-width: 78px;
}
.thumbnails .image-additional {
	float: left;
	margin-left: 20px;
}

@media (min-width: 1200px) {
	#content .col-lg-2:nth-child(6n+1),
	#content .col-lg-3:nth-child(4n+1),
	#content .col-lg-4:nth-child(3n+1),
	#content .col-lg-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	#content .col-md-2:nth-child(6n+1),
	#content .col-md-3:nth-child(4n+1),
	#content .col-md-4:nth-child(3n+1),
	#content .col-md-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	#content .col-sm-2:nth-child(6n+1),
	#content .col-sm-3:nth-child(4n+1),
	#content .col-sm-4:nth-child(3n+1),
	#content .col-sm-6:nth-child(2n+1) {
		clear:left;
	}
}

/* fixed colum left + content + right*/
@media (min-width: 768px) {
    #column-left  .product-layout .col-md-3 {
       width: 100%;
    }

	#column-left + #content .product-layout .col-md-3 {
       width: 50%;
    }

	#column-left + #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }

    #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }
}

/* fixed product layouts used in left and right columns */
#column-left .product-layout, #column-right .product-layout {
	width: 100%;
}

/* fixed mobile cart quantity input */
.input-group .form-control[name^=quantity] {
	min-width: 50px;
}

/* Missing focus and border color to overwrite bootstrap */
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
    background-image: none;
    background-color: #df5c39;
}

/* fix oclabs */
.alert-dismissable .close, .alert-dismissible .close {
	right: -1px;
}


/******************************/






/* --- Общие стили --- */
:root {
    --grad-start: #F7990B;
    --grad-end: #D77500;
    --logo-bg: #D77500; /* Фон логотипа, судя по всему, совпадает с концом градиента */
    --dark-bg: #3c3c4d;
    --text-light: #ffffff;
    --text-dark: #333333;
    --accent-color:#F7990B;




    /ЦВЕТА ОБСЕСС/
 
  --color-brand-primary: #df0b37;
  --color-brand-primary-hover: #ce1717;
  --color-brand-secondary: #b67b49;
  
  --color-danger: #b21313;
  --color-danger-hover: #bd1c1c;
  
  --color-primary: #00ad00;
  --color-primary-hover: #00b909;

  --color-success: #5bb75b;
  --color-success-gradient-start: #62c462;
  --color-success-gradient-end: #51a351;
  
  --color-warning: #faa732;
  --color-warning-gradient-start: #fbb450;
  --color-warning-gradient-end: #f89406;
  
  --color-info: #df5c39;
  --color-info-hover: #e56948;

  --color-inverse: #363636;
  --color-inverse-hover: #222;
  
  --color-default-bg: #e7e7e7;
  --color-default-bg-hover: #ebebeb;
  --color-default-text: #777;

  --color-text-dark: #000;
  --color-text-primary: #333;
  --color-text-light: #fff;
  --color-text-muted: #999;
  --color-text-muted-light: #ccc;
  --color-link: #23a1d1;
  
  --color-background-dark: #101010;
  --color-background-light: #fff;
  
  --color-border-dark: #23252c;
  --color-border-light: #ddd;

  --font-primary: 'PT Sans', sans-serif;
  --font-secondary: 'bebas_neuebold', sans-serif;
  --font-blog: 'CharterITCReg', sans-serif;

}




a { text-decoration: none; color: inherit; }
button { background: none; border: none; cursor: pointer; }

/* 1. Вся шапка теперь имеет сплошной, более светлый фон */
.site-header {

  background-image: linear-gradient(
    to right, 
    var(--accent-color) calc(43% - 600px), 
    #FDB548 calc(47% - 600px)
  );
  

}

.header-container {
    padding: 0 5px 0 0; 
    display: flex;
    /* Важно! Меняем на flex-start, чтобы блоки не растягивались по всей ширине */
    justify-content: flex-start; 
    align-items: center;
}
.header-container a{color:#262335;}
.logo-block{

}
/* 2. Градиент и скос применяются ТОЛЬКО к блоку с логотипом */
.logo-block .logo-link {
   height:55px;
    display: flex;
    align-items: center;
    padding: 5px 130px 5px 5px;
    box-sizing: border-box;
    background: linear-gradient(to right, var(--accent-color), #D77500);
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
}

.logo-link img {
  width: 41px;
  height: 45px;
}

/* СТИЛИ ДЛЯ НОВОЙ ЛИНИИ */
.logo-divider {
    width: 1px;
    height: 40px; /* Высота линии, подберите по макету */
    background-color:#fff ;
    /* Отступы от линии до логотипа и текста */
    margin: 0 15px; 
}

/* Стили для текста */
.logo-text {
    color: #fff; /* Белый цвет, как на скриншоте */
    font-size: 13px; /* Можно подобрать точнее */
    line-height: 1.2;
    text-transform: uppercase; /* Текст в верхнем регистре */
}

/* 4. Расставляем остальные блоки с правильными отступами */
.nav-block {
    margin-left: 30px; /* Отступ от логотипа */
}
.desktop-phones-block {
    margin-left: auto; /* Этот трюк прижмет телефоны и все что правее к правому краю */
      align-items: center; /* Выравнивает иконку и текст по вертикали */
  gap: 10px;
}

.social-block {
     margin-left: 20px;
}
.lang-block {
    margin-left: 20px;
}


.header-block {
    display: flex;
    align-items: center;
}

/* Блоки 2 и 5: Навигация и Язык */
#menu {
  margin-bottom: 0;
  border:0;
}
 #menu .dropdown:hover .dropdown-menu {
    display: block;
  }
#menu .nav > li > a {
  color: var(--color-text-light);
  background-color: transparent;
}

#menu .nav > li > a {
  position: relative; 
  z-index: 1; 
  overflow: hidden; 
  transition: color 0.3s ease-in-out;
}


#menu .nav > li > a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: translateX(-101%);
  transition: transform 0.3s ease-in-out;
  z-index: -1;
}


#menu .nav > li:hover > a {
  color: #000; 
}


#menu .nav > li:hover > a::before {
  transform: translateX(0); 
}


#menu .dropdown-inner a {
  position: relative; 
  transition: padding-left 0.3s ease-in-out;
}

#menu .dropdown-inner a::before {
  content:'\f105';font-family:FontAwesome; 
  position: absolute;
  left: 15px; 
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#menu .dropdown-inner a:hover {
  padding-left: 35px; 
  background-color: #f5f5f5;
  text-decoration:none;
  font-weight:600;
}

#menu .dropdown-inner a:hover::before {
  opacity: 1; 
}

#menu .nav > li > a:hover,
#menu .nav > li.open > a {
  background-color: rgba(0,0,0,0.1);
}
#menu .dropdown-menu {
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(-10px);
  padding: 0 0 5px 0;
  border:0;
}
#menu .navbar-nav > li.dropdown:hover > .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
}

#menu .dropdown-inner {
  display: table;
  padding:0;
}
#menu .dropdown-inner ul {
  display: table-cell;
}
#menu .dropdown-inner a {
  min-width: 220px;
  display: block;
  padding: 10px 20px;
  clear: both;
  line-height: 20px;
  color: var(--color-text-primary);
  font-size: 1rem;
}
#menu #category {
  padding-left: 15px;
  font-size: 16px;
  font-weight: 700;
  line-height: 40px;
  color: var(--color-text-light);
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
#menu .btn-navbar {
  font-size: 0.9375rem;
  font-stretch: expanded;
  padding: 2px 18px;
  float: left;
  color: var(--color-text-light);
  border-color: var(--color-text-light);
}
#menu .btn-navbar:hover,
#menu .btn-navbar:focus,
#menu .btn-navbar:active,
#menu .btn-navbar.disabled,
#menu .btn-navbar[disabled] {
  color: var(--color-text-light);
  background-color: var(--color-brand-secondary);
}
.dropdown-menu li>a:hover{background-color:transparent}



/* Блок 3: Телефоны */
.desktop-phones-block { display: flex;
  align-items: center;
  gap: 10px; }
.desktop-phones-block span { margin: 0 10px; }





/* Блок 4: Соцсети */

.social-block a {
  margin: 0 5px;
  line-height: 0; 
}

.social-icon {
  width: 27px;
  height: 27px;

}



.phone-wrapper {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Убирает возможный выход за границы */
}

.phone-icon {
  width: 18px;
  height: 18px;
  --icon-color: #D77500;
  margin: 0; /* Сброс возможных внешних отступов */
  padding: 0; /* Сброс внутренних отступов */
}


.mobile-close-block,
.mobile-phones-bar {
    display: none;
}





/* ======================================================= */
/* --- МЕДИА-ЗАПРОС: Стили для мобильных устройств --- */
/* ======================================================= */

@media (max-width: 991px) {

    .site-header {
        border: none;
    }
    .logo-block .logo-link{padding: 0 30px 0 5px;}
    .logo-text{font-size:10px;color:#fff;}
    .logo-divider{margin:0 5px;}
    .logo-block img { height: 40px; }


    /* СКРЫВАЕМ десктопные блоки 2, 3 и 5 */
    .nav-block,
    .desktop-phones-block,
    .lang-block {
        display: none;
    }

    /* ПОКАЗЫВАЕМ мобильные элементы */
    .mobile-close-block {
        display: flex;
    }

    .mobile-phones-bar {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--dark-bg);
        color: var(--text-light);
        padding: 12px;
         position: relative; /* Даём ему контекст для z-index */
  z-index: 10;
    }
    .mobile-phones-bar span { margin: 0 10px; }

    /* Стили для кнопки 'X' */
    .mobile-close-block button {
        background-color: white;
        color: #888;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        font-size: 24px;
        line-height: 36px;
        text-align: center;
        font-weight: bold;
    }
    
    /* Соцсети на мобильном */
    .social-block {
        margin-left: auto; 
        margin-right: 5px;
    }
}


.container{width: 100%;max-width: calc(1890px + (15px * 2)) }


/* Десктопная версия */
.banner {
  position: relative;
  width: 100%;
  padding-top: 36.46%; 
  background: url('../image/banner-desktop.jpg') no-repeat center/cover;
  overflow: hidden;

}

.banner-text-block {
  position: absolute;
  left: 14%;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
  /*padding: 2vw;*/
  box-sizing: border-box;
  color: #ffffff;
  z-index: 2;
  text-align: left;
}

.banner-text-block h1 {
    /*font-size: clamp(2em, 3.5vw, 3.5em);*/
    font-size: clamp(3rem, 2.5vw + 1rem, 4.5rem);
    margin: 0 0 clamp(0.7em, 1.5vw, 1em);
    font-weight: bold;
    color: #fff;
    position: relative;
}

.banner-text-block h1::after {
    content: "";
    position: absolute;
    bottom: -0.5vw;
    left: 0;
    width: 28%;
    height: 4px;
    background: linear-gradient(to right, var(--accent-color), #D77500);
}

.banner-text-block .title {
    font-size: clamp(1em, 1.5vw, 1.5em);
    margin: 0 0 clamp(0.75em, 1vw, 0.75em);
    line-height: 1.4;
}

/*.banner-text-block .title span + br + span {
    font-size: clamp(0.84375em, 1.5vw, 1.5em);
    color: #fff;
}
*/
.banner-text-block h2 {
    font-size: clamp(0.9375em, 2vw, 1.1em);
    margin: clamp(0.375em, 1vw, 0.75em) 0;
    font-weight: bold;
    color: var(--accent-color);
}

.banner-text-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.banner-text-block li {
    display: flex;
    align-items: flex-start;
    font-size: clamp(1em, 1.2vw, 1.1em);
    margin-bottom: clamp(0.8em, 0.5vw, 0.45em);
}

.check-wrapper {
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.check-icon {
    width: clamp(16px, 1.5vw, 24px);
    height: clamp(16px, 1.5vw, 24px);
    fill: #fff;
}


/* Мобильная адаптация */
@media (max-width: 768px) {
    .banner {
        position: relative;
        width: 100%;
        padding-top: 179.44%;
        height: auto;
        background: url('../image/banner-mobile.jpg') no-repeat center/cover;
        overflow: hidden;
        z-index: 5;
        margin-top:-44px;
    }

    .banner-text-block {
        position: absolute;
        top: 8%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 328px;
        height: auto;
        padding-top: 4vw;
        margin: 0;
        text-align: left;
    }
    
    .banner-text-block h1::after {
        width: 54%;
        bottom: -2.7vw;
    }

    
    .banner-text-block .title span + br + span {
        font-size: 0.9em;
        color: #fff;
    }
    
    .banner-text-block h2 {
        font-size: 1.125em;
    }
    .banner-break{display:block;}
    
    .check-icon {
        width: 20px;
        height: 20px;
    }
    
    .check-wrapper {
        margin-right: 8px;
    }
}


.text-title {
    font-size: clamp(1.5em, 2.5vw, 1.6875em);
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: clamp(0.75em, 2vw, 1.5em);
    color: #262335;
}


/* собственник о проблемах */
.owner-section {
    background: url('../image/owner.jpg') no-repeat bottom/cover;
    margin: 50px 0;
    position: relative;
}

.owner-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
}

.owner-block-1 {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.owner-text-content h2 {
    font-size: clamp(1.5em, 2.5vw, 1.6875em);
    font-weight: bold;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: clamp(0.75em, 2vw, 1.5em);
}

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

.big-title {
    margin: 0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(2em, 4.16vw, 5em);
    color: var(--accent-color);
}

.list-wrapper {
    list-style: none;
    padding: 0;
    margin: 0;
        flex-basis: 0;
        flex-grow: 1;
}
.owner-container .list-wrapper{
	flex-basis: unset;
        flex-grow: unset;
}
.list-wrapper li {
    display: flex;
    align-items: flex-start;

}
.list-text{    font-size: clamp(1em, 1.04vw, 1.25em);
    margin-bottom: clamp(0.5625em, 1vw, 0.75em);
    line-height: 1.4;}
.icon-wrapper {
    width: clamp(20px, 1.5vw, 24px);
    height: clamp(20px, 1.5vw, 24px);
    background-color: #FFEBCD;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
    padding: 2px;
    position: relative;
}

.check-tick {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(20px, 1.5vw, 24px);
    height: clamp(20px, 1.5vw, 24px);
    left: 70%;
    height: 14px;
    width: 20px;
}

.owner-block-2 {
    flex: 0 1 20%;
    max-width: 20%;
}

.owner-image-frame {
    position: relative;
    max-width: 100%;
    height: auto;
}

.owner-image-frame img {
    display: block;
    max-width: 100%;
    height: auto;
}

.owner-block-3 {
    flex: 1;
    margin-top: 20px;
    padding: 0 15px;
}

/* --- Медиа-запрос для планшетов (769px - 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
    .owner-block-2 {
        max-width: 30%;
    }
}

/* --- Медиа-запрос для мобильных устройств (до 768px) --- */
@media (max-width: 768px) {
    .owner-section {
        background: #FFFFFF;
        margin-bottom:10px;
    }
    .owner-container {
        flex-direction: column;
        align-items: center;
        gap: 0px;
    }
    .owner-block-1, .owner-block-2, .owner-block-3 {
        max-width: 100%;
        margin-bottom: 15px;
    }
    .owner-block-3 {
        margin-bottom: 0px;
    }
    .owner-container .list-wrapper {
        width: 100%;
    }
}

/* РЕШЕНИЕ ЕСТЬ */
.solution-section {
    background: url('../image/solution.jpg') no-repeat top/cover;
    position: relative;
}

.solution-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.solution-header-and-image-block {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-direction: row-reverse;
}

.solution-image-block {
    flex-basis: 640px;
}

.solution-image-wrapper img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.solution-text-content {
    flex-grow: 1;
}

.solution-subtitle {
    max-width: 680px;
    margin-top: 45px;
}

.solution-description {
    max-width: 900px;
    font-size: clamp(1.3125em, 2.5vw, 1.6875em);
    line-height: 1.2;
    color: #262335;
}

.lists-group-wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 768px) {
    .solution-section {
        background: #F4F8FB;
        padding: 40px 0;
    }
    .solution-container {
        gap: 20px;
    }
    .solution-text-content {
        padding: 0 15px;
    }
    .big-title {
        font-size: 32px;
    }
    .text-title {
        margin-top: 0px;
    }
    .solution-header-and-image-block {
        flex-direction: column;
        gap: 30px;
    }
    .solution-image-block {
        flex-basis: auto;
        width: 100%;
    }
    .lists-group-wrapper {
        flex-direction: column;
        gap: 0px;
    }
}


/* Основные стили для десктопа (по умолчанию) */
.facilities-section {
    background: url('../image/facilities.jpg') no-repeat center/cover;
    position: relative;
}

.facilities-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.facilities-columns-right {
    flex: 1;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-direction: row-reverse;
}

.facilities-column-1,
.facilities-column-2,
.facilities-column-3 {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.facilities-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.facilities-list li {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 53px;
    line-height: 1.4;
}

.list-number-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
/*    width: 40px;*/
    height: 40px;
    z-index: 1;
    margin-top: 5px;
}

.list-number-container::before {
    content: '';
    position: absolute;
    width: 29.56px;
    height: 75.31px;
    background-color: #EEF1F3;
    border-radius: 70.38px;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(30deg);
}

.list-number-container::after {
    content: '';
    position: absolute;
    width: 11.99px;
    height: 30.53px;
    background-color: #FFEBCD;
    border-radius: 70.38px;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(15px, 15px) rotate(30deg);
}

.list-number {
    position: relative;
    z-index: 3;
    font-size: 50px;
    font-weight: bold;
    color: #F8990F;
}


.facilities-image-block {
    position: relative;
    z-index: 2;
    width: 100%;
}


/* --- Медиа-запрос для мобильных устройств --- */
@media (max-width: 768px) {
    .facilities-container {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .facilities-columns-right {
        flex-direction: column;
    }
    .facilities-column-2,
    .facilities-column-3 {
        width: 100%;
        max-width: 100%;
    }
    .facilities-image-block {
        text-align: center;
    }
    .list-number-container::before {
        width: 20px;
        height: 50px;
        transform: translate(-50%, -50%) rotate(30deg);
    }
    .list-number-container::after {
        width: 8px;
        height: 20px;
        transform: translate(10px, 10px) rotate(30deg);
    }
    .list-number-container {
        width: 30px;
        height: 30px;
    }
    .list-number {
        font-size: 36px;
    }
}


/* --- Общие стили для секции --- */
.functionality {
   /* padding-block: 60px;*/
    background-color: #f6f6f6;
    text-align: center;
}
.functionality h2, .benefits-section h2 {
    font-size: clamp(1.5rem, 1.375rem + 0.625vw, 2.125rem);
    line-height: 1.3;
    font-weight:600;
    text-transform: uppercase;
    margin-bottom:30px;
}

.title {
    font-size: 1.875em;
    font-weight: bold;
    margin-bottom: 5px;
}

/* --- Стили для десктопа (Tabs) --- */
.tabs-nav-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.tabs-nav {
    display: flex;
    justify-content: center;
    position: relative;
}

.tab-button {
    background-color: transparent;
    border: none;
    padding: 15px 30px;
    cursor: pointer;
    font-weight: bold;
    color: #8286A1;
    transition: color 0.3s;
    position: relative;
    flex-grow: 1;
    text-align: center;
    text-transform: uppercase;
    flex: 1;
}

.tab-button::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #EBEBEB;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.tab-button.active {
    color: #262335;
}

.tab-button.active::after {
    background-color: #F8990F;
}

.tabs-content {
    text-align: left;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.tab-content-wrapper {
    display: flex;
    align-items: center;
    gap: 50px;
}
#functionality-block-2 .tab-content-wrapper, #functionality-block-4 .tab-content-wrapper{justify-content:center;}
#functionality-block-2 .lists-group-wrapper, #functionality-block-4 .lists-group-wrapper{width:auto;}
.flex-direction-row-reverse {
    flex-direction: row-reverse;
}

.image-block {
    flex-basis: auto;
    flex-shrink: 0;
    text-align: left;
}


/* --- Медиазапрос для мобильных устройств --- */
@media (max-width: 768px) {
    .tabs-nav-wrapper {
        display: none;
    }
    .tab-pane {
        display: block;
        margin-bottom: 40px;
    }
    .tab-content-wrapper {
        flex-direction: column;
        gap: 20px;
    }
    .flex-direction-row-reverse {
        flex-direction: column;
    }
}

/* Стили для tab-2: Описание и колонки */
.tab-list {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.tab-description {
    margin-bottom: 20px;
    line-height: 1.4;
    font-size: clamp(1em, 1.04vw, 1.25em);
}

.tab-columns {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.tab-columns .list-wrapper {
    flex-basis: 50%; /* убрать потому что дубль в .list-wrapper там эти колокни поровну выстраиваются */
    padding-left: 0; /* убрать потому что дубль в .list-wrapper там эти колокни поровну выстраиваются */
}

/* Медиазапрос для мобильных устройств */
@media (max-width: 768px) {
    .tab-list {
        flex-direction: column;
    }
    .tab-columns {
        flex-direction: column;
        gap: 0px;
    }
}


/* Стили для мобильных устройств (по умолчанию) */


/* Стили для десктопов */
@media (min-width: 769px) {


    .mobile-tab-title {
        display: none; /* Скрываем заголовок */
    }
}









/* ==================== СТИЛИ ДЛЯ ДЕСКТОПА ==================== */
/*.equipment-section {
    padding: 50px 0;
}*/
.equipment-grid {
    display: flex;
     align-items: stretch; 
}



.equipment-info {
	flex: 0 0 30%;
    background: url('../image/equipment-left.jpg') no-repeat center/cover;
    padding: 0 125px 0 0;
}
.equipment-info p {
    line-height: 1.6;
    color: #1a2a44;
    margin:0;
}

.equipment-options {
    flex: 1;
    background: url('../image/equipment.jpg') no-repeat center/cover;
    position: relative;
    z-index: 1;
}

.service-offer, .trial-period {
    display: flex;
    align-items: center;
    margin-top: 20px;
}
.service-offer .highlight{display:block;font-weight:600;}
/* Добавляем стили для обертки иконки */
.icon-wrapper-free {
    width: 66px; /* Размер круга */
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #FFEBCD; /* Цвет подложки */
    display: flex; /* Используем Flexbox для центрирования */
    justify-content: center;
}

/* Стили для самой иконки */
.icon-free {
    width: 46px; /* Увеличиваем размер SVG, чтобы она выходила за пределы круга */
    height: auto;
    position: relative;
    left: 15px; /* Смещаем иконку вверх, чтобы она выглядела как на макете */
    z-index: 2; /* Убедимся, что иконка находится поверх круга */
}

/* Обновляем стили для основного блока, чтобы выровнять текст */
.icon-text-block {
    display: flex;
    align-items: center;
    gap: 10px; /* Отступ между кругом и текстом */
}
.service-offer .icon-text-block {
    display: flex;
    align-items: center;
    gap: 15px;
}
/*.trial-period {
    justify-content: space-between;

}*/
.trial-period .text-block{margin:0 -16px 0 0;}
.gift-icon-wrapper {
   position: relative;
   z-index: 2;
}
.gift-icon{
	width: auto;
    height: 64px;

}
/* ИСПРАВЛЕНО: Стили для правой колонки с вариантами кафе */
.option {
    display: flex;
    align-items: center; /* Выравнивание элементов по вертикали */
    position: relative;
    flex-wrap: wrap; /* Разрешаем перенос элементов, чтобы .additional-info встал на новую строку */
    margin: 50px 0 50px -110px;
    gap:50px;
}

/* Новый контейнер для основного содержимого */
.option-main-content {
    align-items: center; /* Сохраняем выравнивание для дочерних элементов */
    flex: 1; 
}

.option:first-child {
    /*margin-top: 50px;*/
}
.option:last-child {
    /*margin-bottom: 0;*/
}

.cafe-image-wrapper{display:flex;}

.cafe-image {position:relative;z-index: 2;}




/* Оранжевый блок с названием */
.text-block {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
     margin-left: -20px;
}
.text-block h3 {
    margin: 0;
    font-size: 1.2em;
    line-height: 1.2;
    background: linear-gradient(270deg, #FFA51E 7%, var(--accent-color) 60%, #D77500 100%);
    
    
    color: #fff;
    padding: 15px 30px 15px 40px;
    border-top-right-radius: 50px; 
    border-bottom-right-radius: 50px;

}

.text-block p {
    margin: 0;
    font-size: 1.2em;
    line-height: 1.2;
    background: linear-gradient(90deg, #FFA51E 7%, var(--accent-color) 60%, #D77500 100%);
    color: #fff;
    padding: 15px 30px 15px 40px;
    border-top-left-radius: 50px; 
    border-bottom-left-radius: 50px;
    text-align: right;

}



/* Стили для знака равенства */
.equal-sign-wrapper {
    width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #FFEBCD;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.equal-sign {
    font-size: 2em;
}
/* Список оборудования */
.equipment-list-wrapper {
    display: flex;
/*    justify-content: flex-start;*/
    align-items: flex-start;
    gap: 20px;
    text-align: left;
    flex-wrap: wrap; /* Важно, чтобы иконки не переносились на новую строку на десктопе */
}
.equipment-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-align: center;
}
.equipment-plus {
    align-self: center; 

}
.equipment-item p {
    color: #fff;
    margin: 0;
}
.bracket {
    color: var(--accent-color); /* Используйте нужный вам цвет */
}
/* Круглая обводка для иконок */
.icon-circle-wrapper {
    position: relative; /* Для правильного позиционирования дочерних элементов */
    width: 109px; /* Размер круга */
    aspect-ratio: 1; /* Размер круга */
    border-radius: 50%;
    background-color: #fff; /* Белый фон круга */
    border: 5px solid #FFEBCD; /* Бежевый бордер */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
    
    /* Эти свойства центрируют картинку внутри круга */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible; /* Это позволяет изображению "вылезать" за пределы круга */
}

/* Изображение внутри круга 
.icon-circle-wrapper img {
    max-width: none; 
    max-height: none;
    width: 150px; 
    height: auto;
}*/

.plus-sign {
    background-color: rgba(70, 76, 116, 0.8);
    color: var(--accent-color);
    border-radius: 50%;
    width: 40px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
}




.additional-info {
    /* Стили для дополнительного текста */
    width: 100%; /* Занимает всю ширину, чтобы встать под иконками */
    margin-top: 15px;
    color: #8288B1;
}
/* ==================== АДАПТАЦИЯ (МОБИЛЬНАЯ ВЕРСИЯ) ==================== */
@media (max-width: 768px) {
    .equipment-grid {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
   
    .equipment-options {
        position: static;
        /*transform: none;*/
    }
    .option {
        width: 100%;
        flex-direction: column;
        margin-left: 0;
        gap:20px;
    }
    .option-main-content {
        padding-left: 0;
        width: 100%;
    }

    .section-title { font-size: 1.8em; margin-bottom: 20px; }
    .equipment-info { flex: 0 0 auto; padding: 20px; }
    .cafe-image-wrapper {
        margin-left: 0;
        margin-right: 0;
        position: static;
        transform: none;
    }
  
    .cafe-type-large .equipment-list-wrapper, .cafe-type-small .equipment-list-wrapper {justify-content:center;}
    .equipment-list-wrapper {
        /*margin-top: 15px;*/
    }
    .additional-info {
        margin-top: 15px;
    }
    .equipment-item {
        min-width: 129px;
    }
    .plus-sign {
        right: 0;
    }
    .text-block p{padding: 15px 25px 15px 0px;font-size:1em;}
}







/* анимация прикольная картинок


.cafe-image {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

.cafe-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.cafe-image::before,
.cafe-image::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 5px solid transparent;
  box-sizing: border-box;
  z-index: 1;
}

.cafe-image::before {
  border-top: 5px solid #f4a261; 
  border-right: 5px solid #f4a261;
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
  animation: rotate 10s linear infinite;
}

.cafe-image::after {
  border-top: 5px solid #1e90ff; 
  border-right: 5px solid #1e90ff;
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
  animation: rotate 15s linear infinite reverse;
}


@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


@media (max-width: 768px) {
  .cafe-image {
    width: 120px;
    height: 120px;
  }
  .cafe-image::before,
  .cafe-image::after {
    top: 3px;
    left: 3px;
    width: 114px;
   */



.cafe-image::before {
    content: '';
    position: absolute;
    top: -7px;
    left: -7px;
    width: calc(100%);
    height: calc(100%);
    border-width: 2px;
    border-radius: 50%;
    z-index: 1;

    background: linear-gradient(to right, var(--accent-color) 44%, #D77500 63%);
    
    /* Увеличение толщины рамки */
    mask: radial-gradient(circle, transparent 69%, #000 70%);
    -webkit-mask: radial-gradient(circle, transparent 69%, #000 70%);
}


/* ======================== СЕКЦИЯ "БЫСТРЫЙ СТАРТ" ======================== */
/*.quick-start-section {
    padding-block: 50px;
}*/

.quick-start-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.quick-start-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quick-start-text-block {
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('../image/quick-start-text.png') no-repeat center/cover;
    color: #fff;
    padding: 30px;
    position: relative;
    max-width: 1010px;
    width: 100%;
    aspect-ratio: 1010 / 324;
}

.quick-start-text-block p {
    position: relative;
    max-width: 718px;
    padding-left: 20px;
}

.quick-start-text-block p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background-color: #ff7f00;
}



.quick-start-steps-wrapper {
    padding-top: 50px;
}

.quick-start-steps-container {
    display: grid;
    grid-template-columns: 1fr 60px 1fr 60px 1fr 60px 1fr 60px; /* 8 колонок: 4 блока и 4 стрелки */
    gap: 0; /* Убираем gap, чтобы стрелки не растягивались */
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    align-items: center;
}

.step-item {
    display: flex;
    flex-direction: column;

}

.step-image-wrapper {
    position: relative;
    z-index: 2;
    max-width: 340px;
    padding-left:20px;
   
}

.step-number {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -10px;
}

.step-text-wrapper {
	display: flex;
	align-items: center;
    background-color: transparent;
    border-radius: 20px;
    box-shadow: 0px 0px 20px rgba(70, 76, 116, 0.08);
    padding-inline: 20px;
     margin-top: -65px;
/*    max-width: 380px;
    min-width: 380px;*/
    width: 100%;
    min-height: 250px;
}
.step-text-wrapper p{
	font-size: clamp(1.125rem, 0.641vw + 0.981rem, 1.75rem);
	text-transform: uppercase;
	line-height: 1.4;
}
.step-arrow-wrapper {
position: relative;
    bottom: -30px;
    right: 25px;
    z-index: 3;
}
.arrow-icon {
    width: 60px;
    height: 60px;
}


/* Позиционирование элементов в Grid */
/*.step-item:nth-child(1) { grid-column: 1; }
.step-arrow-wrapper:nth-child(2) { grid-column: 2; }
.step-item:nth-child(3) { grid-column: 3; }
.step-arrow-wrapper:nth-child(4) { grid-column: 4; }
.step-item:nth-child(5) { grid-column: 5; }
.step-arrow-wrapper:nth-child(6) { grid-column: 6; }
.step-item:nth-child(7) { grid-column: 7; }
.step-arrow-wrapper.last-arrow-wrapper:nth-child(8) { grid-column: 8; }*/

/* ======================== АДАПТАЦИЯ ======================== */
@media (max-width: 1024px) {
    .quick-start-steps-container {
        grid-template-columns: 1fr 60px 1fr 60px; /* 2 блока и 2 стрелки в ряд */
    }

    /*.step-item:nth-child(1) { grid-column: 1; }
    .step-arrow-wrapper:nth-child(2) { grid-column: 2; }
    .step-item:nth-child(3) { grid-column: 3; }
    .step-arrow-wrapper:nth-child(4) { grid-column: 4; }
    .step-item:nth-child(5) { grid-column: 1 / span 1; } 
    .step-arrow-wrapper:nth-child(6) { grid-column: 2 / span 1; }
    .step-item:nth-child(7) { grid-column: 3 / span 1; }
    .last-arrow-wrapper:nth-child(8) { grid-column: 4 / span 1; }*/

}
 
@media (max-width: 768px) {
	.quick-start-grid {grid-template-columns:1fr;}
	.quick-start-text-block {

    background: url('../image/quick-start-text-mob.png') no-repeat;

    padding: 20px;

    max-width: 344px;

    aspect-ratio: 1010 / 531;
}

.quick-start-section{
	padding: 0;
}

    .quick-start-steps-container {
        grid-template-columns: 1fr; /* 1 колонка */
        align-items: center;
    }

    .step-item { flex-direction:row; }
    /*.step-arrow-wrapper { grid-column: auto; }*/
.step-image-wrapper{padding-left: 0}
.step-text-wrapper{align-items: flex-start;padding-inline:0px;padding-left:12px;margin-top:60px;box-shadow:unset;min-height:unset;justify-content:unset;flex:1 }
    .step-number {top: 18px;right:-39px}

    /*.last-arrow-wrapper {
        margin-left: 0;
        margin-top: -40px;
    }*/

    .step-image-wrapper {
  width: 40vw; /* 40% от ширины экрана */

}

.step-arrow-wrapper{
	bottom:38px;
	right: 0px;
	width: 40vw; 
	height: 40px;
	text-align: center;

}
.arrow-icon{
	max-width: 40px;
	transform: rotate(90deg);
}
    
}







.benefits-section {
    position: relative; 
}

.benefits-main-title {
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    text-align: center;
    font-size: 2em;
    z-index: 2;
    margin-top: 40px; 
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.benefit-item {
    padding: 122px 61px 97px 61px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.benefits-item-1 {
    background: url('../image/benefits-1.jpg') no-repeat center/cover;
}

.benefits-item-2 {
    background: url('../image/benefits-2.jpg') no-repeat center/cover;
}

.benefits-item-3 {
    background: url('../image/benefits-3.jpg') no-repeat center/cover;
    color:#fff;
}

.benefit-subheader {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
    position: relative; 
    padding-left: 25px;
}

/* Линия через псевдоэлемент ::before */
.benefit-subheader::before {
    content: '';
    width: 5px;
    height: 106px; /* Высота равна высоте круга */
    background: linear-gradient(360deg, #D77500 0%, #F7990B 100%);
border-radius: 50px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

/* Rectangle 7 */








}

.benefit-icon-wrapper {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background-color: #FFEBCD;
    display: flex;
    justify-content: center;
    align-items: center;
}


.benefit-icon {
    width: auto;
    height:52px;
    position: relative;
    left: 15px;
    z-index: 2;
}

.benefit-item h3 {
    margin: 0;
    font-size: 1.2em;
    color: inherit;
}

@media (max-width: 768px) {

    .benefits-grid {
        grid-template-columns: 1fr;
    }
.benefit-item{padding: 25px 0;}
    .benefits-main-title {
        position: static;
        transform: none;
        margin-bottom: 20px;
    }
}


/* Общие стили для секции */
.trust-us-section {
    display: flex;
    position: relative;
    overflow: hidden;
    min-height: clamp(500px, 51.04vw, 980px);
    align-items: stretch;
   /* padding-top: 3em;
    padding-bottom: 3em;*/
}

/* --- */

/* Левый блок с фоном */
.left-block {
    position: relative;
    width: 48%;
    min-width: 467px; /* Добавлено: предотвращает сильное сжатие */
    background: url('../image/trust.jpg') no-repeat left center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
}


.left-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: clamp(1em, 2vw, 2em);
    padding-left: 0;
}

.trust-us-title {
    font-size: clamp(1.5rem, 4vw, 4.4rem);
    color: #fff;
}
.trust-us-title .highlight{display:block;}
/* --- */

/* Правый блок для иконок и текста */
.right-block {
    position: relative;
    width: 50%;
    display: flex;
   /* justify-content: flex-start;
    align-items: stretch;*/
    z-index: 2;
    padding-block:0.75em;
}

.trust-us-list-wrapper {
    width: 100%;
    padding-left: 2vw;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.trust-us-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: space-between;
    height: 100%;
}

.trust-us-item {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
 /*   flex-grow: 1;*/
}

/* Пунктирная линия */
/*.trust-us-list::before {
    content: '';
    position: absolute;
    top: 3vw;
    left: calc(3vw + 0.5em);
    width: 2px;
    height: calc(100% - 6vw);
    background-image: linear-gradient(to bottom, #ccc 50%, transparent 50%);
    background-size: 100% 10px;
    background-repeat: repeat-y;
    z-index: -1;
}
*/
.trust-us-item-inner {
    display: flex;
    align-items: center;
    gap: 2vw;
}

/* Стили для контейнера иконок */
.trust-us-icon-container {
    position: relative;
   /* width: clamp(3.75em, 4vw, 3.75em);
    height: clamp(3.75em, 4vw, 3.75em);*/
     width: clamp(2em, 4vw, 3.75em);
    height: clamp(2em, 4vw, 3.75em);

    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: linear-gradient(270deg, #FFFFFF 14.13%, #E4E9EC 105.24%);
    /*min-width: clamp(3.75em, 4vw, 3.75em);*/
    /*min-width: clamp(3.75em, 4vw, 3.75em);*/
     min-width:  clamp(2em, 4vw, 3.75em);
}

.trust-us-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(35deg, #FFFFFF 14.13%, #E4E9EC 105.24%);
    position: absolute;
    top: -9px;
    bottom: -9px;
    right: -9px;
    left: -9px;
    z-index: -1;
    border-radius: 50%;
}

.trust-us-icon {
    /*  width: clamp(1.75em, 3vw, 2.5em);
    height: clamp(1.75em, 3vw, 2.5em);*/
    width: 2.5rem;
    height: 100%;
}

/* Галочка */
.trust-us-check-icon {
    position: absolute;
    top: -0.5em;
    right: -0.5em;
    width: auto;
    height: clamp(1em, 2.5vw, 25px);
     max-width: 25px;
    max-height: 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}


/*.trust-us-check-icon {
    position: absolute;
    top: -0.5vw;
    right: -0.5vw;
    width: 2.5vw;
    height: 2.5vw;
    max-width: 25px;
    max-height: 25px;
    background-color: #ff7f00;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}*/


/* Текст элемента списка */
.trust-us-item p {
    margin: 0;
    font-size: clamp(1em, 1.2vw, 1.1em);
    line-height: 1.4;
}

/* Динамические отступы для создания дуги */
.trust-us-item:nth-child(1) { margin-left: -3.5vw; }
.trust-us-item:nth-child(2) { margin-left: -0.5vw; }
.trust-us-item:nth-child(3) { margin-left: 2vw; }
.trust-us-item:nth-child(4) { margin-left: 2.5vw; }
.trust-us-item:nth-child(5) { margin-left: 2vw; }
.trust-us-item:nth-child(6) { margin-left: -0.5vw; }
.trust-us-item:nth-child(7) { margin-left: -3.5vw; }

/* Стили для контейнера иконок с подложкой и галочкой */
/*.trust-us-icon-container {
    position: relative;
    width: 6vw;
    height: 6vw;
    max-width: 60px; 
    max-height: 60px; 
    display: flex;
    justify-content: center;
    align-items: center;
}*/


/*.trust-us-icon-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    background: linear-gradient(270deg, #FFFFFF 14.13%, #E4E9EC 105.24%);
border: 10px solid #FBFBFB;
}*/


@media (max-width: 768px) {
	.trust-us-title .highlight{display:inline-block;}
	.trust-us-section{flex-direction:column;}
    .left-block {
        background: none;
        width: auto;
        min-width: unset;
        text-align: center;
    }
    .right-block{width: 100%;}


    .trust-us-title {
        color: #262335;

    }
    
     .trust-us-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px 20px;
        /* Убираем justify-items, чтобы блоки не выравнивались по левому краю */
        align-items: flex-start;
    }

    /* Первый элемент списка на всю ширину */
    .trust-us-list .trust-us-item:first-child {
        grid-column: 1 / -1;
        width: auto;
        margin-left: 0 !important;
        margin-bottom: 30px;
        
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Все остальные элементы списка */
    .trust-us-list .trust-us-item {
        margin-left: 0 !important;
        width: auto;
        
        /* Ключевое изменение: возвращаем центрирование для всего блока */
        display: flex;
        flex-direction: column;
        align-items: center; /* Центрируем иконку и текст относительно друг друга */
    }

    .trust-us-item-inner {
        display: flex;
        flex-direction: column;
        /* Ключевое изменение: возвращаем центрирование для иконки и текста */
        align-items: center;
        gap: 10px;
    }
.trust-us-icon-container{
	width: 3.75rem;
	height: 3.75rem;
}
    /* А вот здесь мы делаем выравнивание для самого текста */
    .trust-us-item p {
        margin-top: 10px;
        margin-bottom: 0;
        line-height: 1.4;
        
        /* Ключевое изменение: выравниваем текст по левому краю */
        text-align: left;
    }


}










/* ======================== СЕКЦИЯ "СТОИМОСТЬ" ======================== */
.pricing-section {
margin-bottom: 60px;   
padding: 0 15px; /*удалить*/
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    text-transform: uppercase;
    margin: 0 0 10px 0;
    color: #333;
}

.section-header .section-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: #666;
    margin: 0;
}

.pricing-grid {
    display: flex;
    flex-wrap: wrap;
   /* grid-template-columns: repeat(3, 1fr);*/
    gap: 30px; 
    /*align-items: stretch; 
     justify-items: center; */
     justify-content: space-between;
}

.pricing-card {
    background-color: #fff;
    border-radius: 30px;
    padding: 30px 35px; /* Немного изменим паддинги */
    /* 1. Добавляем заметную тень, как на макете */
    box-shadow: 0px 0px 20px rgba(70, 76, 116, 0.08);
    position: relative; /* Обязательно для позиционирования псевдоэлементов и цены */
    border: 1px solid #EAEAEA;
    display: flex;
    flex-direction: column;
     position: relative; 
    min-height: 422px;
    min-width: 416px;
       max-width: 420px;
    
}



/* ИСПРАВЛЕННЫЙ БЛОК С ТОЧКАМИ */
.pricing-card::after {
    content: '';
    position: absolute;
    top: 30px;
    right: 25px;

    /* Задаем размеры блока для сетки 3x6 */
    width: 45px;  /* 3 колонки * 15px */
    height: 90px; /* 6 рядов * 15px */

    /* Рисуем точки с помощью радиального градиента и повторяем их */
    background-image: radial-gradient(#EAEAEA 2px, transparent 2px);
    background-size: 15px 15px;
    /* background-repeat: repeat; стоит по умолчанию, он создаст сетку */
}


.pricing-card::before {
            content: "";
            position: absolute; 
            z-index: -1;
            top: 30px;
		    bottom: 30px;
		    left: -30px;
		    right: -3px;

            transform: rotate(98deg); 


  border: 2px solid transparent;
  border-radius: 30px;
  background-image:
    linear-gradient(white, white), linear-gradient(88deg, #f7990b 43.75%, #d77500 63.02%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/*.pricing-card.is-featured {
    transform: scale(1.05);
    border: 2px solid var(--accent-color, #F8990F);
}*/

.card-header h3 {
    font-size: 1.5em;
    margin: 0 0 20px 0;
    text-transform: uppercase;
}

.price-block {
    background: linear-gradient(90deg, #F7990B 0%, #D77500 100%);
    color: #fff;
    border-radius: 50px;
    padding: 5px 25px;
    display: inline-flex;
    
    /* ВОТ ИЗМЕНЕНИЕ: выравниваем по нижней линии текста */
    align-items: baseline; 
    
    gap: 8px; /* Можно немного скорректировать отступ */
    margin-bottom: 30px;
    align-self: flex-start;
    margin-left: -50px;
}

.price-amount {
    font-size: 2.5em;
    font-weight: bold;
    line-height: 1; /* Убираем лишнюю высоту строки */
}

.price-period {
    font-size: 1em;
    line-height: 1; /* Убираем лишнюю высоту строки */
    margin-left: 0; /* Убираем старый отступ */
}

.features-list {
     list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1; 
}

.features-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 1em;
}

.feature-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.features-list .is-included {
    color: #333;
}

.features-list .is-included .feature-icon {
    color: #28a745; /* Зеленый цвет для галочки */
}

.features-list .is-excluded {
    color: #aaa;
    text-decoration: line-through;
}






.payment-banner {
    display: flex;
    max-width: 1920px;
    max-height:218px;
}


.payment-banner-seasonal {
    flex-basis: 55%;
    background: linear-gradient(90deg, #FFA51E 0%, #F7990B 65.63%, #D77500 102.58%);
    color: #fff;
    padding: 39px 8% 55px 70px;
    position: relative;
    margin-left: auto;
    z-index: 1; 
    gap: 20px;
 
    border-radius:  80px 0px 0px 0px;
}


.payment-banner h4 {
	margin:0 0 17px 0;
	color:#fff;
	text-transform: uppercase;
    font-size: 1.2em;
}


.payment-banner-contacts {
    flex-basis: 35%;
    background: linear-gradient(90.07deg, #343146 0.06%, #1E1C27 99.93%);
    color: #fff;
    padding: 39px 2% 0 3%;
    position: relative;
    z-index: 2; 
    margin-left: -70px; 
    border-radius: 80px 0 0 0;
}


   .seasonal-icon-wrapper {
    position: absolute;
  left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    flex-shrink: 0;
    border: 3px solid #333; 
}


.seasonal-icon {
    width: auto;
    height: 55px;
}



.seasonal-text p {
    margin: 0;
    line-height: 1.6;
}



/*.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 15px 20px;
}

.contact-list li {
    display: flex;
    align-items: center;
    gap: 10px; 
    margin-bottom: 0; 
}*/


/*.contact-list-flex-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}*/

.contact-column {
    list-style: none;
    padding: 0;
    margin: 0;
}



.contact-list {
    list-style: none;
    padding: 0;
        margin: 0;
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between; 
    overflow-wrap: anywhere;
}

.contact-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px; /* Вертикальный отступ между строками */
}

/* Чтобы сделать левую колонку шире, как на макете */
.contact-list li:nth-child(odd) { /* Выбираем нечетные элементы (1-й и 3-й) */
    width: 58%;
    }

.contact-list li:nth-child(even) { /* Выбираем четные элементы (2-й и 4-й) */
    width: 38%;
    }

.contact-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    --icon-color: var(--accent-color);
}







/* -- Адаптация -- */
@media (max-width: 991px) {
    .payment-banner {
        flex-direction: column;
    }
    .pricing-grid{
    	grid-template-columns:1fr;
    }
  .payment-banner-contacts{margin-left:0px}
    .payment-banner-seasonal {
    	margin-bottom: -70px;
        padding: 70px 25px 110px 25px;
        justify-content: center;
    }
    .seasonal-icon-wrapper {
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .seasonal-text {
        margin-left: 0;
    }
   
    

}



@media (max-width: 768px) {
	   .pricing-card {min-width: 330px;}
    .pricing-card::before {
    	
    	top: -3px;
    bottom: -3px;
    left: 8px;
    right: 18px;
    transform: rotate(6deg);
    }
	.contact-list{flex-direction:column;}
	.payment-banner-contacts .contact-list li{width:auto;}
	 .payment-banner-contacts {
        margin-left: 0;
        margin-top: -30px; /* Наезжаем снизу */
        padding-top: 50px;
        text-align: center;
    }
}