:root {
  --prime: #3CB5F6;
  --prime-hover: #2b9fdc;
  --second: #F63C3C;
  --white: #F3F3F3;
  --grey: #898989;
  --black: #515151;
  --lightBlue: #E3F5FF;
  --borderGrey: #E2E2E2;
  --backYellow: #FFC837;

  --color-danger: #f63c3c;
  --color-danger-hover: #d92d2d;
  --color-success: #168962;
  --color-tel: #385987;
  --color-text-main: #0f172a;
  --color-text-muted: #64748b;
  --color-bg-secondary: #f1f5f9;
  --btn-secondary-bg: #e2e8f0;
  --btn-secondary-hover: #cbd5e1;
  --table-bg-even: rgba(0,0,0,0.03);

  --font-roboto: 'Roboto', sans-serif;
  --font-roboto-bold: 'RobotoBold', monospace;
  --font-title: 'Oswald', sans-serif;

  --font-line: 130%;
  --font-line-120: 120%;
  --font-150-line: 150%;
  --font-small-size: 14px;
  --font-content-size: 16px;
  --font-object-title-size: 20px;
  --font-part-title-size: 32px;
  --font-title-big-size: 42px;

  --font-regular-weight: 400;
  --font-title-weight: 500;
  --font-title-transform: uppercase;

  --10px: 10px;
  --20px: 20px;
  --30px: 30px;
  --40px: 40px;
}

/* ================= BASE style ================= */

@font-face {
  font-family: 'Oswald';
  src: url("Oswald-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  src: url("Roboto.woff2") format("woff2");
}

@font-face {
  font-family: 'RobotoBold';
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  src: url("RobotoBold.woff2") format("woff2");
}

HTML {
  color: var(--black);
  font-size: var(--font-content-size);
  font-weight: normal;
  font-family: var(--font-roboto);
  line-height: 1.3;
}

BODY {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

strong, b, .bold {
  font-family: var(--font-roboto-bold);
}

h1, h2, h3, h4 {
  margin: 0;
}

ul {
  margin-top: 0;
  padding-left: 0;
}

ol li {
  line-height: 28px;
}

a.web {
  color: inherit;
  position: relative;
  text-decoration: none;
}

/* ================= FORM and INPUT ================= */

input, textarea, select {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--borderGrey);
  width: 100%;
  padding: 18px 20px;
  vertical-align: middle;
  border-radius: 4px;
}

input, textarea, .submit {
  appearance: none;
}

input[type="checkbox"] {
  margin: 3px 3px 3px 0;
  appearance: checkbox;
  box-sizing: border-box;
  max-width: 15px;
}

textarea {
  min-height: 150px;
}

/* ================= Tipografic ================= */

.allTitle {
  font-family: var(--font-title);
  font-weight: var(--font-title-weight);
  text-transform: var(--font-title-transform);
}

.objectTitle {
  font-family: var(--font-title);
  font-weight: var(--font-title-weight);
  text-transform: var(--font-title-transform);
  font-size: var(--font-object-title-size);
}

p.objectTitle {
  font-size: var(--font-content-size);
  line-height: var(--font-line);
  font-family: var(--font-roboto-bold);
  text-transform: none;
  order: 1;
}

.smallTitle {
  font-size: var(--font-content-size);
  line-height: var(--font-line);
}

.textSmall {
  font-family: var(--font-roboto);
  font-weight: var(--font-regular-weight);
  font-size: var(--font-small-size);
  color: var(--grey);
}

.bigTitle {
  font-family: var(--font-title);
  font-size: var(--font-title-big-size);
}

.contentTitle {
  font-family: var(--font-title);
  font-size: var(--font-part-title-size);
  line-height: var(--font-150-line);
  font-weight: var(--font-title-weight);
  text-transform: var(--font-title-transform);
  letter-spacing: 2px;
  margin-top: 0px;
  margin-bottom: var(--30px);
  text-align: left;
  position: relative;
}

.contentTitle:after, #pageTitle:after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: var(--second);
  top: 110%;
  left: 0;
  right: 0;
  margin-left: 20px;
  margin-right: auto;
  box-shadow: 20px 0px 0 var(--second), -20px 0px 0 var(--second);
}

/* ================= Utilits and layaout ================= */

.conteiner {
  margin: 0 auto;
  width: 100%;
  max-width: 1140px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .conteiner {
    /* На узких экранах экономим место, немного уменьшая отступы */
    padding-left: 15px;
    padding-right: 15px;
  }
}

.pd { padding-bottom: 60px; }
.mn { margin-bottom: 60px; }
.pd15 { padding-top: 15px; padding-bottom: 15px; }
.pd20 { padding-top: 20px; padding-bottom: 20px; }
.pd30 { padding-top: 30px; padding-bottom: 30px; }
.tb60 { padding-top: 60px; padding-bottom: 60px; }
.mid { padding-bottom: 30px; }
.small { padding-bottom: 15px; }

.green { color: var(--color-success); }
.blueText { color: var(--prime); }
.tabular-data {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-roboto-bold);
}

/* ================= TABLE ================= */

table {
  border-spacing: 0;
  width: 100%;
}

#content table {
  border: 1px solid var(--borderGrey);
}

#content tr.title {
  background-color: var(--prime);
  color: var(--white);
  text-transform: uppercase;
}

#content tr.title td {
  text-align: center;
}

#content thead {
  background-color: var(--table-bg-even);
}

tr.header {
  font-family: NeoSansMed;
}

tr.header td {
  border-right: 1px solid var(--borderGrey);
  border-bottom: 1px solid var(--borderGrey);
}

tr.header td:nth-child(1) {
  border-left: 1px solid var(--borderGrey);
}

#content tbody tr:nth-child(2n+2),
#content .tableRowEven {
  background-color: var(--table-bg-even);
}

#content td, #content th {
  padding: 16px;
}

#content .tableRow td {
  padding: 12px;
}

#content td:nth-child(1) { text-align: left; }
#content td:nth-child(3) { width: 120px; }

td.title { text-transform: uppercase; }

#content tr:hover:not(.header) {
  background-color: var(--prime) !important;
  color: #fff;
}

/* ================= BUTTON ================= */

.buttonSend.prime, .buttonSend.second {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 16px 32px;
  border-radius: 4px;
  font-family: var(--font-roboto-bold);
  font-size: var(--font-small-size);
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.buttonSend:hover {
  transform: translateY(-1px);
}

.buttonSend.prime {
  background-color: var(--prime);
  color: var(--white);
}

.buttonSend.prime:hover {
  background-color: var(--prime-hover);
  box-shadow: 0 6px 16px rgba(60, 181, 246, 0.3);
}

.buttonSend.second {
  background-color: var(--btn-secondary-bg);
  color: var(--color-text-muted);
}

.buttonSend.second:hover {
  background-color: var(--btn-secondary-hover);
  color: var(--color-text-main);
}

#global1 .buttonSend {
  background-color: var(--color-danger);
  color: var(--white);
  border: none;
  padding: 12px 24px;
  font-family: var(--font-roboto-bold);
  font-size: var(--font-small-size);
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.buttonSend.danger {
  background-color: var(--color-danger);
  color: var(--white);
}

#global1 .buttonSend:hover {
  background-color: var(--color-danger-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(246, 60, 60, 0.3);
}

/* ================= UL LI OL ================= */

.content ul:not(.breadcrumb, .mgroupList, .quiz-summary-list) {
  list-style-type: none;
  padding-left: 20px;
}

.content ul:not(.breadcrumb, .mgroupList) li {
  position: relative;
  padding-left: 10px;
}

.content ul:not(.breadcrumb, .mgroupList, .quiz-summary-list) li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--second);
  margin-right: 8px;
  vertical-align: middle;
}

.content ol:not(.breadcrumb, .mgroupList) {
  counter-reset: myCounter;
  list-style: none;
  padding-left: 20px;
}

.content ol:not(.breadcrumb, .mgroupList) li::before {
  counter-increment: myCounter;
  content: counter(myCounter);
  margin-right: 8px;
  font-weight: bold;
  color: var(--second);
}

ul.subsubitems li {
  line-height: 1;
  margin-bottom: 12px;
}

/* ================= Specific element ================= */

#siteLogotype { border-radius: 0; }
#LogotypeBlock { line-height: 0; align-self: center; }

.tel {
  color: var(--color-tel);
  text-decoration: none;
  padding-left: 0px;
  font-size: 20px;
}

.objectNote a { text-decoration: none; }

.mail {
  font-family: RobotoCond;
  text-transform: uppercase;
  font-size: var(--font-small-size);
}

.zvonoktitle {
  margin: 0;
  font-family: var(--font-roboto-bold);
  padding-bottom: 16px;
}

#content .object.record-item { margin-bottom: 30px; }

#siteTitle {
  color: var(--black);
  margin: 0;
  line-height: var(--font-line-120);
  font-family: var(--font-title);
  font-size: var(--font-title-big-size);
}

#div5 { background: var(--prime); }
#div19 { background: var(--white); }

/* ================= Навигация, кнопка и поиск (#div6) ================= */

#div6 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px; /* Безопасное расстояние между блоками */
  position: relative;
}

#global0 { 
  flex-grow: 1; /* Заставляет меню занять всё доступное пространство, отталкивая кнопки вправо */
}

#global1 {
  margin: 0;
  text-align: left;
  flex-shrink: 0; /* Запрещаем кнопке сжиматься */
}

#global2 {
  text-align: right;
  flex-shrink: 0; /* Запрещаем иконке поиска сжиматься */
}

/* Запрещаем перенос текста в пунктах меню */
.main-nav .nav-link,
.main-nav .nav-text {
  white-space: nowrap;
}

#div132 {
  background-image: url(shapka.jpg);
  background-position: top center;
  background-repeat: no-repeat;
}

#div133 {
  background-image: url(back_auto.png);
  background-position: calc(50vw + 20px) top;
  background-repeat: no-repeat;
}

#div7 {
  background-image: url(auto_header.png);
  background-repeat: no-repeat;
  background-position: calc(50vw - 30px) center;
}

#div9.pd {
  background-image: url(back_middle_01.jpg);
  background-position: bottom center;
  background-repeat: no-repeat;
  padding-bottom: 100px;
}

#div11.pd {
  background-image: url(back_middle_02.jpg);
  background-position: top center;
  background-repeat: no-repeat;
}

.preim {
  font-size: var(--font-content-size);
  line-height: 1;
  background-image: url(star.svg);
  background-position: top left;
  background-repeat: no-repeat;
  padding-left: 45px;
  background-size: 28px;
  color: var(--color-text-muted);
}

#div150, #div151, #div152, #div153, #div154, #div222 {
  max-width: 50%;
}

#div8 > div:not(:last-child) {
  margin-bottom: var(--30px);
  font-size: var(--font-content-size);
}

#div153 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 20px;
  max-width: calc(2 * 280px + 20px);
}

#div153 a {
  min-width: 280px;
  max-width: 300px;
  width: 100%;
  text-align: center;
}

.slogan {
  margin-top: var(--10px);
  display: inline-block;
}

.subtitleTop {
  text-transform: var(--font-title-transform);
  font-family: var(--font-roboto-bold);
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

.subtitleBottom {
  color: var(--color-text-muted);
  display: inline-block;
}

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

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contacts-wrapper {
  display: flex;
  gap: 40px;
}

.contact-text {
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

/* ================= Адаптив первого экрана (Hero-блок) ================= */

@media (max-width: 767px) {
  /* 1. Снимаем ограничение в 50% ширины, отдаем тексту всё пространство */
  #div150, 
  #div151, 
  #div222, 
  #div153, 
  #div154 {
    max-width: 100% !important;
  }

  /* 2. Кнопки: выстраиваем вертикально друг под другом */
  #div153 {
    display: flex !important; /* Перебиваем десктопный grid */
    flex-direction: column;
    gap: 16px;
  }
  
  /* Растягиваем кнопки на 100% ширины */
  #div153 a {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100%;
  }
  
  /* 3. Отключаем фоновые картинки у оберток на мобильных, 
        чтобы текст не наслаивался на графику */
  #div7, #div133 {
    background-image: none !important;
  }

  /* 3. Отключаем фоновые картинки у оберток на мобильных, 
        чтобы текст не наслаивался на графику */
  /* 4. Кастомный блок с картинками между заголовком и слоганом */
  #div222::before {
    content: '';
    display: block;
    
    /* Вырываемся из контейнера только с правой стороны */
    width: calc(100% + 15px);
    margin-right: -15px;
    
    /* Пропорции и ограничение по высоте */
    max-height: 400px;
    aspect-ratio: 859 / 908; 
    
    margin-bottom: 20px;
    
    background-image: url('auto_header.png'), url('back_auto.png');
    background-position: right 0px center, right center;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, contain; 
  }
}

/* =============== Setka Caregorii (.t1) ===================== */

div#content1 {
  margin-top: 100px;
}

/* 1. Мобильная сетка по умолчанию (1 колонка) */
.t1 .contentBody {
  display: grid;
  gap: 20px;
  justify-content: center;
  grid-template-columns: 1fr;
}

.t1 .contentBody .object {
  box-sizing: border-box;
  background: var(--lightBlue);
}

.t1 .contentBody .object:nth-child(5n) .objectTitle {
  margin-top: var(--30px);
  margin-bottom: 0px;
}

.t1 .divImg {
  margin-left: auto;
}

.t1 .prise {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.t1 .prise .priseRub::before {
  content: '';
  display: block;
  height: 3px;
  background: currentColor;
  width: 100%;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* 2. Планшеты и десктопы: Оригинальная ассиметричная 2-колоночная плитка */
@media (min-width: 900px) {
  .t1 .contentBody {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
  }
  
  .t1 .contentBody .object:nth-child(1),
  .t1 .contentBody .object:nth-child(4),
  .t1 .contentBody .object:nth-child(6),
  .t1 .contentBody .object:nth-child(9) {
    height: fit-content;
    background: var(--lightBlue);
  }

  .t1 .contentBody .object:nth-child(2),
  .t1 .contentBody .object:nth-child(3),
  .t1 .contentBody .object:nth-child(7),
  .t1 .contentBody .object:nth-child(8) {
    height: fit-content;
    background: var(--white);
  }

  /* 4 элемента сверху (перекрестная раскладка как на макете) */
  .t1 .contentBody .object:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .t1 .contentBody .object:nth-child(2) { grid-column: 2; grid-row: 1; }
  .t1 .contentBody .object:nth-child(3) { grid-column: 1; grid-row: 3; }
  .t1 .contentBody .object:nth-child(4) { grid-column: 2; grid-row: 2 / span 2; }
  
  /* 5-й элемент (баннер) разрывает поток на всю ширину */
  .t1 .contentBody .object:nth-child(5) { 
    grid-column: 1 / -1; 
    grid-row: 4; 
    background: var(--lightBlue);
  }
  
  /* 4 элемента снизу */
  .t1 .contentBody .object:nth-child(6) { grid-column: 1; grid-row: 5 / span 2; }
  .t1 .contentBody .object:nth-child(7) { grid-column: 2; grid-row: 5; }
  .t1 .contentBody .object:nth-child(8) { grid-column: 1; grid-row: 7; }
  .t1 .contentBody .object:nth-child(9) { grid-column: 2; grid-row: 6 / span 2; }
}


/* ================= Block .t1001 ================= */

.content.conteiner.texthover.t1001 {
  background: var(--white);
}

.content.t1001 ul li {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  padding: 0;
  margin: 0;
  line-height: var(--font-150-line);
}

.content.t1001 ul li::before {
  content: '';
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  vertical-align: middle;
  background-image: url("check.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
}

.content.t1001 .objectTitle {
  display: flex;
  align-items: center;
  gap: 2px;
}

.content.t1001 .objectTitle::before {
  content: '';
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  margin-right: 8px;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
}

.content.t1001 .contentBody .object:nth-child(1) .objectTitle::before { background-image: url("cicle_1.svg"); }
.content.t1001 .contentBody .object:nth-child(2) .objectTitle::before { background-image: url("cicle_2.svg"); }
.content.t1001 .contentBody .object:nth-child(3) .objectTitle::before { background-image: url("cicle_3.svg"); }
.content.t1001 .contentBody .object:nth-child(4) .objectTitle::before { background-image: url("cicle_4.svg"); }

#div15 {
  padding-top: 120px;
  padding-bottom: 170px;
}

.object.center {
  border: 1px solid var(--borderGrey);
  border-radius: 4px;
}

.part100001 .main-nav {
  border-bottom: none;
}

.menufooter, .mscallback, .breadcrumbs {
  font-family: inherit;
}

#div23.pd20 {
  color: var(--white);
  background: var(--prime);
  font-size: var(--font-small-size);
}

.accordion .objectTitleTxt {
  color: inherit;
}

/* ================= Адаптив Шапки (Логотип и Контакты) ================= */

/* Мобильная версия (ширина до 767px) */
@media (max-width: 767px) {
  #div4 {
    flex-direction: column !important; /* Разворачиваем блок вертикально */
    align-items: flex-start !important; /* Выравниваем логотип и контакты по левому краю */
    gap: 24px; /* Отступ между логотипом и списком контактов */
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .contacts-wrapper {
    flex-direction: column; /* Выстраиваем контакты в столбик */
    align-items: flex-start; /* Иконки выстраиваются в ровную вертикальную линию */
    gap: 16px; /* Компактный отступ между самими контактами */
  }
}

/* Планшеты и небольшие ноутбуки (от 768px до 1150px) 
   Чтобы 3 контакта и логотип не слипались на средних экранах */
@media (min-width: 768px) and (max-width: 1150px) {
  #div4 {
    flex-wrap: wrap; /* Позволяем перенос, если места не хватает */
    justify-content: center;
    gap: 20px;
  }
  
  .contacts-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Уменьшаем базовый отступ (был 40px) для планшетов */
  }
}