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

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

a {
  /* Убирает подчеркивание */
  text-decoration: none;

  /* Устанавливает цвет текста */
  color: inherit;
}

/**
  Убираем внешние отступы 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;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 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;
}

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

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

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

/**
  Плавный скролл
 */
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="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;
  }
}

/** подключение шрифтов**/

@font-face {
  font-family: "Public Sans";
  src: url(fonts/PublicSans-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url(fonts/PublicSans-Medium.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url(fonts/PublicSans-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/** объявление глобальных переменных**/

:root {
  --color-light-gray: #ededed;
  --color-dark-blue: #243647;
  --color-dark: #121a21;
  --color-white: #fafafa;
  --color-gray: #b3afaf;
  --color-background: rgb(52, 85, 182);

  --border-radius: 8px;

  --font-family-base: "Public Sans", sans-serif;

  --transition-duration: 0.2s;

  --max-width-container: 1380px;
}

body {
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: 14px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  text-transform: uppercase;
}

a,
button {
  transition-duration: var(--transition-duration);
}

@media (hover: hover) {
  a:hover {
    color: var(--color-gray);
  }
}

@media (hover: none) {
  a:active {
    color: black;
  }
}

/** стлизация header **/

header {
  display: block;
  margin: 0 auto;
  max-width: var(--max-width-container);
  padding-inline: 40px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 20px;
}

.header_menu-start {
  display: flex;
  column-gap: 1rem;
  align-items: center;
}

.header_logo img {
  width: 3rem;
  height: 3rem;
}

.header_menu-list {
  display: flex;
  column-gap: 2.25rem;
  font-weight: 500;
}

.header_menu-list a {
  text-decoration: none;
  text-transform: uppercase;
}

.header_menu-item {
  height: 80px;
  display: flex;
  align-items: center;
}

/** стилизация бургер меню**/

.burger-menu {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
}

.burger-menu span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--color-dark);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.burger-menu.active span:nth-child(1) {
  transform: translateY(10.5px) rotate(45deg);
}

.burger-menu.active span:nth-child(2) {
  opacity: 0;
}

.burger-menu.active span:nth-child(3) {
  transform: translateY(-10.5px) rotate(-45deg);
}

.header-end {
  color: rgb(52, 85, 182);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/*стилизация main*/

main {
  height: max-content;
  display: block;
  margin: 0 auto;
  max-width: var(--max-width-container);
  padding-inline: 40px;
}

.main-section {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 30px 0 30px 0;
}

.floor-title {
  text-align: center;
  margin-bottom: 40px;
}

.floor-navigation {
  display: flex;
  width: max-content;
  position: absolute;
  top: 45%;
  left: 25%;
  transform: translateX(-50%);
  width: clamp(150px, 40vw, 400px);
  z-index: 3;
}

.floor-buttons {
  width: 3rem;
  height: fit-content;
  background: var(--color-background);
  color: #a0a4ad;
  padding: 0.1428571429rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3571428571rem;
  overflow-y: scroll;
  scrollbar-width: none;
  position: relative;
  pointer-events: auto;
  left: 0;
  border-radius: 1.4285714286rem;
}

.floor-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--color-dark);
  font-size: 1.4rem;
  line-height: 1.4rem;
  font-weight: 500;
  padding: 0.5rem;
  text-align: center;
  z-index: 1;
}






/* стилизация footer*/

footer {
  background-color: var(--color-dark-blue);
}

.footer_content {
  display: block;
  margin: 0 auto;
  max-width: var(--max-width-container);
  padding-inline: 40px;
}

.footer_main-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
}

.footer-links_wrapper {
  margin-bottom: 12px;
}

.footer_links-title h3 {
  color: var(--color-white);
  font-weight: 700;
  margin: 12px 0 12px 0;
}

.footer_text {
  color: var(--color-gray);
  margin-top: 6px;
}

.footer_end {
  margin-top: 18px;
  margin-bottom: 12px;
}

.footer_copyright {
  padding-bottom: 12px;
}


/*1, 2, 3 этаж*/

.hos{
  padding: 4px;
}



.horizontally_cabinet {
  height: clamp(2rem, 6vw, 3rem);
}

.cabinet {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #dbeaff;
  outline: 1px solid rgb(52, 85, 182);
  color: rgb(52, 85, 182);
  font-size: clamp(12px, 2.5vw, 18px);
}

.Third_Floor-Container {
  display: flex;
  justify-content: center;
  font-weight: 400;
}

.Third_Floor-Content {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(11, 1fr);
  max-width: 800px;
  grid-template-areas:
    ". exit3-1 cab-302 cab-302 cab-302 cab-303 cab-303 cab-staff cab-304 exit3-2"
    ". corridor31 corridor32 corridor33 corridor34 corridor35 corridor36 corridor37 corridor38 corridor39"
    ". corridor395 wc-w-top3 cab-301 cab-300 cab-305 cab-305 cab-305 wc-m-top3 cab-318"
    "cab-316 corridor310 . . . . . . . cab-318"
    "cab-315 corridor311 . . . . . . . cab-320"
    "cab-314 corridor312 . . . . . . . cab-320"
    "cab-313 corridor313 . . . . . . . cab-319"
    "cab-312 corridor314 . . . . . . . cab-319"
    ". corridor315 wc-w-bot3 cab-310 cab-317 cab-323 cab-311 cab-322 wc-m-bot3 cab-319"
    ". corridor316 corridor317 corridor318 corridor319 corridor320 corridor321 corridor322 corridor323 corridor324"
    ". exit3-3 cab-309 cab-308 cab-308 cab-307 cab-307 cab-306 cab-306 exit3-4";
}

.corridor_right-border {
  border-right: 1px solid rgb(52, 85, 182);
}

.corridor_left-border {
  border-left: 1px solid rgb(52, 85, 182);
}

.exit img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.wc img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}





.Second_Floor-Container {
  display: flex;
  justify-content: center;
}

.Second_Floor-Content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(11, 1fr);
  max-width: 800px;
  grid-template-areas:
  ". exit2-1 cab-202 cab-202 cab-202 cab-203 cab-203 cab-203 cab-staff cab-204 exit2-2 ."
  ". corridor21 corridor22 corridor23 corridor24 corridor25 corridor26 corridor27 corridor28 corridor29 corridor29 ."
  ". corridor295 wc-w-top2 cab-201 cab-201 chill2-1 chill2-1 cab-205 cab-205 wc-m-top2 active_hall active_hall"
  "cab-216 corridor210 . . . . . . . . active_hall active_hall"
  "cab-215 corridor211 . . . . . . . . active_hall active_hall"
  "cab-214 corridor212 . . . . . . . . gym gym"
  "cab-213 corridor213 . . . . . . . . gym gym"
  "cab-212 corridor214 . . . . . . . . gym gym"
  ". corridor215 wc-w-bot2 cab-210 cab-210 chill2-2 chill2-2 cab-211 cab-211 wc-m-bot2 gym gym"
  ". corridor216 corridor217 corridor218 corridor219 corridor220 corridor221 corridor222 corridor223 corridor224 corridor224 ."
  ". exit2-3 cab-209 cab-209 cab-208 cab-208 cab-207 cab-207 cab-206 cab-206 exit2-4 .";

}

.Second_Floor-gym img{
  width: clamp(40px, 4vw, 70px);
  height: clamp(40px, 4vw, 70px);
}

.Second_Floor-active_hall img{
  width: clamp(40px, 4vw, 70px);
  height: clamp(40px, 4vw, 70px);
}

.chill_zone img{
  width: clamp(40px, 4vw, 70px);
  height: clamp(40px, 4vw, 70px);
}



.First_Floor-Container {
  display: block;
  overflow: auto; 
  position: relative;
  cursor: grab; 
  -webkit-overflow-scrolling: touch; 
}

.First_Floor-Container::-webkit-scrollbar {
  display: none;
}

.First_Floor-Content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(11, 1fr);
  width: 900px;
  min-height: 200px;
  padding: 10px;
  margin: 0 auto;
  grid-template-areas:
    "exit1-1 assistant-director1 assistant-director1 accounting assistant-director2 conference-room cab-staff_1-1 cab-104 exit1-2 . ."
    "corridor11 corridor13 corridor14 corridor15 corridor16 corridor17 corridor17 corridor18 corridor19 . ."
    "cab-staff_1-2 chancellery chancellery Chill_1-1 Chill_1-1 cab-105 cab-105 wc-m-top1 corridor110 fake_corridor1 fake_corridor1"
    ". . . . . . . . corridor111 dressing-room eat-room"
    ". . . . . . . . corridor112 dressing-room eat-room"
    ". . . . . . . . corridor113 dressing-room eat-room"
    ". . . . . . . . corridor114 dressing-room eat-room"
    ". . . . . . . . corridor115 corridor-to-eat eat-room"
    "hospital wc-w-bot1 cab-110 cab-117 cab-117 cab-111 cab-122 wc-m-bot1 corridor1165 fake_corridor2 fake_corridor2"
    "corridor116 corridor117 corridor118 corridor119 corridor120 corridor121 corridor122 corridor123 corridor124 . ."
    "exit1-3 cab-109 cab-109 cab-108 cab-107 cab-107 cab-106 cab-106 exit1-4 . .";
}

.eat-room img{
  width: clamp(30px, 4vw, 60px);
  height: clamp(30px, 4vw, 60px);
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.hospital img{
  width: clamp(30px, 4vw, 40px);
  height: clamp(30px, 4vw, 40px);
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.Chill_1-1 img{
  width: clamp(30px, 4vw, 50px);
  height: clamp(30px, 4vw, 50px);
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.Dressing_room{
  border-right: 1px solid rgb(52, 85, 182);
}

.corridor-to-eat{
  border-top: 1px solid rgb(52, 85, 182);
}


.dressing-room, .eat-room{
  background-color:#dbeaff;
  border-right: 1px solid rgb(52, 85, 182);
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(52, 85, 182);
  font-size: clamp(12px, 2vw, 16px);
  padding: 5px;
}

.First_Floor-cabinet{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #dbeaff;
  outline: 1px solid rgb(52, 85, 182);
  color: rgb(52, 85, 182);
  font-size: clamp(12px, 2vw, 16px);
  padding: 5px;
}

.fake_corridor1{
  border-bottom: 1px solid rgb(52, 85, 182) ;
}

.fake_corridor2{
  border-top: 1px solid rgb(52, 85, 182);
}



/* Верхний ряд */
.Third_Floor-302 {
  grid-area: cab-302;
}

.Third_Floor-303 {
  grid-area: cab-303;
}

.Third_Floor-staff {
  grid-area: cab-staff;
}

.Third_Floor-304 {
  grid-area: cab-304;
}

.Third_Floor-wc-w-top {
  grid-area: wc-w-top3;
}

.Third_Floor-301 {
  grid-area: cab-301;
}

.Third_Floor-300 {
  grid-area: cab-300;
}

.Third_Floor-305 {
  grid-area: cab-305;
}

.Third_Floor-wc-m-top {
  grid-area: wc-m-top3;
}

/* Вертикальные кабинеты (R4-R8) */
.Third_Floor-316 {
  grid-area: cab-316;
}
.Third_Floor-315 {
  grid-area: cab-315;
}
.Third_Floor-314 {
  grid-area: cab-314;
}
.Third_Floor-313 {
  grid-area: cab-313;
}
.Third_Floor-312 {
  grid-area: cab-312;
}

.Third_Floor-318 {
  grid-area: cab-318;
}
.Third_Floor-320 {
  grid-area: cab-320;
}
.Third_Floor-319 {
  grid-area: cab-319;
}

.Third_Floor-wc-w-bot {
  grid-area: wc-w-bot3;
}

.Third_Floor-310 {
  grid-area: cab-310;
}

.Third_Floor-317 {
  grid-area: cab-317;
}

.Third_Floor-323 {
  grid-area: cab-323;
}

.Third_Floor-311 {
  grid-area: cab-311;
}

.Third_Floor-322 {
  grid-area: cab-322;
}

.Third_Floor-wc-m-bot {
  grid-area: wc-m-bot3;
}

.Third_Floor-309 {
  grid-area: cab-309;
}

.Third_Floor-308 {
  grid-area: cab-308;
}

.Third_Floor-307 {
  grid-area: cab-307;
}

.Third_Floor-306 {
  grid-area: cab-306;
}

.Third_Floor-exit3-1 {
  grid-area: exit3-1;
}

.Third_Floor-exit3-2 {
  grid-area: exit3-2;
}
.Third_Floor-exit3-3 {
  grid-area: exit3-3;
}
.Third_Floor-exit3-4 {
  grid-area: exit3-4;
}

.corridor31 {
  grid-area: corridor31;
}
.corridor32 {
  grid-area: corridor32;
}
.corridor33 {
  grid-area: corridor33;
}
.corridor34 {
  grid-area: corridor34;
}
.corridor35 {
  grid-area: corridor35;
}
.corridor36 {
  grid-area: corridor36;
}
.corridor37 {
  grid-area: corridor37;
}
.corridor38 {
  grid-area: corridor38;
}
.corridor39 {
  grid-area: corridor39;
}
.corridor395 {
  grid-area: corridor395;
}
.corridor310 {
  grid-area: corridor310;
}
.corridor311 {
  grid-area: corridor311;
}
.corridor312 {
  grid-area: corridor312;
}
.corridor313 {
  grid-area: corridor313;
}
.corridor314 {
  grid-area: corridor314;
}
.corridor315 {
  grid-area: corridor315;
}
.corridor316 {
  grid-area: corridor316;
}
.corridor317 {
  grid-area: corridor317;
}
.corridor318 {
  grid-area: corridor318;
}
.corridor319 {
  grid-area: corridor319;
}
.corridor320 {
  grid-area: corridor320;
}
.corridor321 {
  grid-area: corridor321;
}
.corridor322 {
  grid-area: corridor322;
}
.corridor323 {
  grid-area: corridor323;
}
.corridor324 {
  grid-area: corridor324;
}


/* Верхний ряд */
.Second_Floor-202 {
  grid-area: cab-202;
}

.Second_Floor-203 {
  grid-area: cab-203;
}

.Second_Floor-staff {
  grid-area: cab-staff;
}

.Second_Floor-204 {
  grid-area: cab-204;
}

.Second_Floor-wc-w-top {
  grid-area: wc-w-top2;
}

.Second_Floor-201 {
  grid-area: cab-201;
}

.Chill_2-1 {
  grid-area: chill2-1;
}

.Second_Floor-205 {
  grid-area: cab-205;
}

.Second_Floor-wc-m-top {
  grid-area: wc-m-top2;
}

.Second_Floor-216 {
  grid-area: cab-216;
}
.Second_Floor-215 {
  grid-area: cab-215;
}
.Second_Floor-214 {
  grid-area: cab-214;
}
.Second_Floor-213 {
  grid-area: cab-213;
}
.Second_Floor-212 {
  grid-area: cab-212;
}

.Second_Floor-active_hall{
    grid-area: active_hall;
}

.Second_Floor-gym{
    grid-area: gym;
}

.Second_Floor-wc-w-bot {
  grid-area: wc-w-bot2;
}

.Second_Floor-210 {
  grid-area: cab-210;
}

.Second_Floor-217 {
  grid-area: cab-217;
}

.Second_Floor-223 {
  grid-area: cab-223;
}

.Second_Floor-211 {
  grid-area: cab-211;
}

.Chill_2-2 {
  grid-area: chill2-2;
}

.Second_Floor-wc-m-bot {
  grid-area: wc-m-bot2;
}

.Second_Floor-209 {
  grid-area: cab-209;
}

.Second_Floor-208 {
  grid-area: cab-208;
}

.Second_Floor-207 {
  grid-area: cab-207;
}

.Second_Floor-206 {
  grid-area: cab-206;
}

.Second_Floor-exit2-1 {
  grid-area: exit2-1;
}

.Second_Floor-exit2-2 {
  grid-area: exit2-2;
}
.Second_Floor-exit2-3 {
  grid-area: exit2-3;
}
.Second_Floor-exit2-4 {
  grid-area: exit2-4;
}

/* Коридоры */
.corridor21 {
  grid-area: corridor21;
}
.corridor22 {
  grid-area: corridor22;
}
.corridor23 {
  grid-area: corridor23;
}
.corridor24 {
  grid-area: corridor24;
}
.corridor25 {
  grid-area: corridor25;
}
.corridor26 {
  grid-area: corridor26;
}
.corridor27 {
  grid-area: corridor27;
}
.corridor28 {
  grid-area: corridor28;
}
.corridor29 {
  grid-area: corridor29;
}
.corridor295 {
  grid-area: corridor295;
}
.corridor210 {
  grid-area: corridor210;
}
.corridor211 {
  grid-area: corridor211;
}
.corridor212 {
  grid-area: corridor212;
}
.corridor213 {
  grid-area: corridor213;
}
.corridor214 {
  grid-area: corridor214;
}
.corridor215 {
  grid-area: corridor215;
}
.corridor216 {
  grid-area: corridor216;
}
.corridor217 {
  grid-area: corridor217;
}
.corridor218 {
  grid-area: corridor218;
}
.corridor219 {
  grid-area: corridor219;
}
.corridor220 {
  grid-area: corridor220;
}
.corridor221 {
  grid-area: corridor221;
}
.corridor222 {
  grid-area: corridor222;
}
.corridor223 {
  grid-area: corridor223;
}
.corridor224 {
  grid-area: corridor224;
}


/* Верхний ряд */
.First_Floor-exit1-1 { grid-area: exit1-1; }
.First_Floor-assistant-director1 { grid-area: assistant-director1; }
.First_Floor-accounting { grid-area: accounting; }
.First_floor-assistant-director2{ grid-area: assistant-director2;}
.First_Floor-conference-room{ grid-area: conference-room;}
.First_Floor-staff_1-1 { grid-area: cab-staff_1-1; }
.First_Floor-104 { grid-area: cab-104; }
.First_Floor-exit1-2 { grid-area: exit1-2; }

/* Верхний коридор */
.corridor11 { grid-area: corridor11; }
.corridor12 { grid-area: corridor12; }
.corridor13 { grid-area: corridor13; }
.corridor14 { grid-area: corridor14; }
.corridor15 { grid-area: corridor15; }
.corridor16 { grid-area: corridor16; }
.corridor17 { grid-area: corridor17; }
.corridor18 { grid-area: corridor18; }
.corridor19 { grid-area: corridor19; }

/* Левая вертикаль и верхние помещения */
.First_Floor-staff_1-2{ grid-area: cab-staff_1-2;}
.First_Floor-wc-w-top1 { grid-area: wc-w-top1; }
.First_Floor-chancellery{ grid-area: chancellery;}
.Chill_1-1{grid-area: Chill_1-1;}
.First_Floor-105 { grid-area: cab-105; }
.First_Floor-wc-m-top1 { grid-area: wc-m-top1; }
.First_Floor-118 { grid-area: cab-118; }
.First_Floor-120 { grid-area: cab-120; }
.First_Floor-119 { grid-area: cab-119; }



.corridor110 { grid-area: corridor110; }
.fake_corridor1{ grid-area: fake_corridor1;}
.corridor111 { grid-area: corridor111; }
.dressing-room{ grid-area: dressing-room;}
.eat-room{ grid-area: eat-room;}
.corridor112 { grid-area: corridor112; }
.corridor113 { grid-area: corridor113; }
.corridor114 { grid-area: corridor114; }
.corridor115 { grid-area: corridor115; }
.corridor-to-eat{ grid-area: corridor-to-eat;}



/* Нижний ряд */
.First_Floor-wc-w-bot1 { grid-area: wc-w-bot1; }
.First_Floor-110 { grid-area: cab-110; }
.First_Floor-stimul { grid-area: cab-117; }
.First_Floor-111 { grid-area: cab-111; }
.First_Floor-122 { grid-area: cab-122; }
.First_Floor-wc-m-bot1 { grid-area: wc-m-bot1; }
.corridor1165{ grid-area: corridor1165;}
.fake_corridor2{ grid-area: fake_corridor2;}

/* Нижний коридор */
.First_Floor-hospital { grid-area: hospital; }
.corridor116 { grid-area: corridor116; }
.corridor117 { grid-area: corridor117; }
.corridor118 { grid-area: corridor118; }
.corridor119 { grid-area: corridor119; }
.corridor120 { grid-area: corridor120; }
.corridor121 { grid-area: corridor121; }
.corridor122 { grid-area: corridor122; }
.corridor123 { grid-area: corridor123; }
.corridor124 { grid-area: corridor124; }

/* Нижняя линия с выходами */
.First_Floor-exit1-3 { grid-area: exit1-3; }
.First_Floor-109 { grid-area: cab-109; }
.First_Floor-108 { grid-area: cab-108; }
.First_Floor-107 { grid-area: cab-107; }
.First_Floor-106 { grid-area: cab-106; }
.First_Floor-exit1-4 { grid-area: exit1-4; }

.hidden {
  display: none;
}

.floor-btn.active {
  background:  #dbeaff;
}


/*Стилизация контактов*/

.contact_container h1{
  padding: 1.5rem 0 1.5rem 0;
  text-align: center;
}


.main_contact-card{
  border: 1px var(--color-dark-blue);
}

.contact_card{
  background-color: #bed3f1;
  margin-bottom: 2.5rem;
  border-radius: var(--border-radius);
  width: 520px;
  height: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
}
.contact_card h3{
  padding-top: 8px;
  padding-bottom: 4px;
}

.contact_list{
  display: flex;
  flex-direction: column;
}

.contact_item{
  display: flex;
  justify-content: center;
}


.write-me{
  margin-top: 1rem;
  width: 7rem;
  height: 3rem;
  background-color:  #dbeaff;
  border: 1px var(--color-dark-blue);
  border-radius: var(--border-radius);
}



@media (max-width: 666px) {
  header {
    padding-inline: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .burger-menu {
    display: flex;
    order: 3;
  }

  .header_menu-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-white);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    padding-top: 80px;
  }

  .header_menu-nav.active {
    transform: translateX(0);
  }

  .header_menu-list {
    flex-direction: column;
    column-gap: 0;
    row-gap: 0;
    align-items: flex-end;
  }

  .header_menu-item {
    width: 100%;
    height: auto;
    text-align: right;
    padding: 20px;
    border-bottom: 1px solid var(--color-light-gray);
  }

  .header_menu-item a {
    display: block;
    width: 100%;
    padding: 15px 20px;
    font-size: 18px;
  }

  .header_menu-end {
    order: 2;
  }

  .header_menu-start {
    order: 1;
  }

  body.menu-open {
    overflow: hidden;
  }

  .header_menu-end {
    margin-left: auto;
    margin-right: 14px;
  }

  .header-content {
    margin-top: 8px;
  }
}

@media (max-width: 750px) {
  .exit img {
  width: clamp(40px, 2vw, 50px);
  height: clamp(40px, 2vw, 50px);
  }

  .wc img {
    width: 40px;
    height: 40px;
}
}


@media (max-width: 560px) {
  .exit img {
  width: clamp(30px, 2vw, 50px);
  height: clamp(30px, 2vw, 50px);
  }

  .wc img {
    width: 30px;
    height: 30px;
}
}

@media (hover: hover) {
  .cabinet:hover {
    background-color: #bed3f1;
  }
}

@media (hover: none) {
  .cabinet:active {
    background-color: #dbeaff;
  }
}


@media (hover: hover) {
  .floor-btn:hover {
    background-color: #bed3f1;
  }
}

@media (hover: none) {
  a:active {
    color: black;
  }
}

/** адаптация main контента**/

@media (max-width: 1024px) {
  .floor-navigation {
    left: 21%;
  }
}

@media (max-width: 800px) {
  .floor-navigation {
    left: 25%;
  }
  .main-section {
    margin: 15px 0 30px 0;
  }
  .floor-title {
    margin-bottom: 20px;
  }
}

@media (max-width: 920px) {
  .floor-buttons {
    flex-direction: row;
    width: fit-content;
  }
  .floor-navigation {
    display: flex;
    width: max-content;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 3;
  }
  .floor-title{
    margin-top: 60px;
  }


}


@media (hover: hover) {
  .footer_text:hover {
    color: #bed3f1;
  }
}

@media (hover: none) {
  .footer_text:active {
    color: black;
  }
}

@media (max-width: 600px) {
  .First_Floor-Content {
  width: 700px;
  }
}

/*адаптация footer*/

@media (max-width: 666px) {
  .footer_main-content {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    row-gap: 6px;
  }
  .footer_links-title h3 {
    margin: 12px 0 3px 0;
  }
  
}


@media (hover: hover) {
  .cabinet:hover {
    background-color: #bed3f1;
  }
  .dressing-room:hover {
    background-color: #bed3f1;
  }
  .eat-room:hover {
    background-color: #bed3f1;
  }

}

@media (max-width: 750px) {
    .First_Floor-Container, 
    .Second_Floor-Container, 
    .Third_Floor-Container {
        overflow: hidden !important; 
        touch-action: none; 
        position: relative;
        padding: 2px;
    }

    /* Контент, который мы будем трансформировать */
    .floor-content {
        transition: transform 0.1s ease-out;
        transform-origin: 0 0; 
        will-change: transform;
    }
}

@media (hover: hover) {
  .write-me:hover {
    background-color:  rgb(118, 147, 235);
}
}

@media (hover: none) {
  .write-me:active {
    background-color: #dbeaff;
  }
}

@media (hover: hover) {
  .write-me a:hover {
    color: black;
  }
}

@media (hover: none) {
  .write-me a:active {
    color: black;
  }
}

@media (max-width: 666px) {
  .contact_card{
  width: 400px;
  }
}

@media (max-width: 350px) {
  .contact_card{
  height: 11rem;
  }
  .contact_card h3{
  padding-top: 8px;
  padding-bottom: 12px;
}
}