@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,700;1,700&display=swap");

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

.center {
  width: 104%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("Design/Background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.base_center {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top {
  width: 100%;
  max-width: 1850px;
  height: 1200px;
  background-image: url("Design/Top.png");
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;

  display: flex;
  justify-content: center;

  padding: 0 5%; /* Отступы по бокам */
  box-sizing: border-box; /* Учитываем отступы внутри ширины элемента */

  filter: drop-shadow(-10px 15px 20px rgba(0, 0, 0, 0.3));
}

.top_grid {
  width: 1350px;
  max-width: 100vw;
  height: 40%;

  display: grid;
  grid-template-columns: 0.6fr 2fr 0.3fr 0.3fr 0px 2fr 3.5fr;
  grid-template-rows: 20px 60px 20px 20px 20px 1fr 1fr;
}

/* Для экранов шириной от 1000px до 1200px */
@media (max-width: 1200px) and (min-width: 1000px) {
  .top_grid {
    grid-template-columns: 0.6fr 1.2fr 0.3fr 0.3fr 10px 10px 3fr;
    grid-template-rows: 20px 60px 20px 20px 20px 1fr 1fr;
  }
}
.we-are-working-with {
  grid-column: 1 / span 2; /* Позиционирование в grid */
  grid-row: 6 / span 2;
  font-family: Nunito;
  margin-left: 5%;
  font-size: 24px; /* Размер текста */
  font-weight: bold; /* Жирный текст */
  color: #6e6e6e; /* Серый цвет текста */
  letter-spacing: 2px; /* Межбуквенный интервал */
  text-transform: uppercase; /* Заглавные буквы */
  white-space: nowrap;
}

.logo {
  grid-column: 1 / span 1;
  grid-row: 2 / span2;
  background-image: url("Design/Logo_LackyTech.png");
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
}

.numb_1 {
  grid-column: 2 / span 1;
  grid-row: 2;
  text-align: center;
  font-family: Nunito;
  color: #54780d;
  letter-spacing: 0;
  word-spacing: 0;
  stroke-width: 0;
  text-decoration: none;
  font-size: 24px; /* по умолчанию для экранов более 1920px */
}

/* Для экранов с max-width: 1400px */
@media (max-width: 1400px) {
  .numb_1 {
    font-size: 20px;
  }
}

/* Для экранов с max-width: 1300px */
@media (max-width: 1300px) {
  .numb_1 {
    font-size: 18px;
  }
}

.numb_2 {
  grid-column: 2 / span 1;
  grid-row: 2; /* по умолчанию для больших экранов */
  margin-top: 8%;
  text-align: center;
  font-family: Nunito;
  color: #54780d;
  letter-spacing: 0;
  word-spacing: 0;
  font-size: 24px; /* размер текста будет зависеть от ширины экрана */
  stroke-width: 0;
  text-decoration: none;
}
/* Для экранов с max-width: 1400px */
@media (max-width: 1400px) {
  .numb_2 {
    font-size: 20px;
  }
}

/* Для экранов с max-width: 1300px */
@media (max-width: 1300px) {
  .numb_2 {
    font-size: 18px;
  }
}
@media (max-width: 900px) {
  .numb_2,
  .numb_1 {
    font-size: 16px;
  }
}
@media (max-width: 741px) {
  .numb_2,
  .numb_1 {
    font-size: 10px;
  }
}

.whatsapp {
  position: relative;
  grid-column: 3 / span 1;
  grid-row: 2 / span 2;

  display: flex;
  justify-content: center;
}

.whatsapp-img {
  width: auto;
  height: 60%;
}

.context-menu {
  width: 200px;
  height: 70px;

  position: absolute;
  top: 100%;
  left: 50%;
  display: none;
  background-color: #c0e280;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding: 10px;
  z-index: 10;
}

.context-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.context-menu ul li {
  padding: 8px 16px;
}

.context-menu ul li a {
  text-decoration: none;
  font-family: Nunito;
  color: #333;
}

.image-container:hover .context-menu {
  display: block;
}

.telegramm {
  grid-column: 4 / span 1;
  grid-row: 2 / span 2;

  display: flex;
  justify-content: center;
}

.telegramm-img {
  width: auto;
  height: 60%; /* по умолчанию для небольших экранов */
  margin-left: 15%;
}

.telephone_number_block {
  grid-column: 1 / span 3;
  grid-row: 2 / span 2;

  margin-left: 20px;
  text-align: left;
  font-family: Nunito;
  color: #54780d;
  letter-spacing: 0;
  word-spacing: 0;
  font-size: 20pt;
  stroke-width: 0;
  text-decoration: none;
}
.work_time {
  text-align: center;
  grid-column: 6;
  grid-row: 1;
  margin-top: 2%;
  font-family: Nunito;
  color: #54780d;
  letter-spacing: 0;
  word-spacing: 0;
  font-size: clamp(14px, 2vw, 24px);
  text-decoration: none;
}
@media (max-width: 1200px) and (min-width: 1000px) {
  .work_time {
    grid-column: 2 / span 3;
    grid-row: 3 / span 2;
    margin-bottom: 3%;
    margin-left: 10%;

    font-family: Nunito;
    color: #54780d;
    letter-spacing: 0;
    word-spacing: 0;
    font-size: clamp(14px, 2vw, 24px);
    stroke-width: 0;
    text-decoration: none;
  }
}
/* Для экранов шириной до 480px (например, для очень маленьких устройств) */
@media (max-width: 480px) {
  .info_work {
    grid-column: 4 / span 3; /* или другое значение, если нужно */
  }
}

.working-hours {
  font-weight: bold;
}

@media (max-width: 480px) {
  .working-hours {
    font-size: 12px;
  }
}
.address {
  margin-top: 3%;

  grid-column: 7 / span 3;
  grid-row: 2 / span 2;
  margin-left: 5%;
  font-size: clamp(14px, 21px, 24px);
  font-family: Nunito;
  color: #54780d;
  text-decoration: none;
}

@media (max-width: 400px) {
  .address {
    font-size: clamp(13px, 2vw, 24px);
  }
}
@media (max-width: 350px) {
  .address {
    font-size: clamp(12px, 2vw, 24px);
  }
}
.hiblack_inc-img {
  grid-column: 1 / span 2; /* по умолчанию для больших экранов */
  grid-row: 6 / span 1; /* по умолчанию для больших экранов */
  height: 60%; /* для больших экранов */
  margin-top: 10%;
}

.revcol-img {
  grid-column: 1 / span 2; /* по умолчанию для больших экранов */
  grid-row: 7 / span 1; /* по умолчанию для больших экранов */
  height: 60%; /* для больших экранов */
}

/* Для экранов шириной до 768px (например, для мобильных устройств) */
@media (max-width: 768px) and (max-height: 1000px) {
  .hiblack_inc-img {
    grid-row: 6 / span 1; /* для маленьких экранов */
    grid-column: 1 / span 2;
    width: 90%;
    margin-top: 10%;
  }
  .we-are-working-with {
    grid-column: 1 / span 2; /* Позиционирование в grid */
    grid-row: 6 / span 2;
    font-family: Nunito;
    font-size: 15px; /* Размер текста */
    margin-top: -2%;
    font-weight: bold; /* Жирный текст */
    color: #6e6e6e; /* Серый цвет текста */
    letter-spacing: 2px; /* Межбуквенный интервал */
    text-transform: uppercase; /* Заглавные буквы */
  }
  .revcol-img {
    grid-row: 7 / span 1; /* для маленьких экранов */
    grid-column: 1 / span 2;
    width: 90%;
    margin-top: 10%;
  }
  .address {
    margin-top: 10%;
    grid-column: 2 / span 3;
    grid-row: 4 / span 2;
    font-size: clamp(12px, 2vw, 24px);
    font-family: Nunito;
    text-align: center;
    color: #54780d;
    text-decoration: none;
    white-space: nowrap;
  }
  .working-hours {
    font-size: 10px;
    margin-left: 1%;
  }
  .work_time {
    grid-column: 2;
    grid-row: 4;
    margin-top: -8%;
    font-family: Nunito;
    color: #54780d;
    font-size: clamp(14px, 2vw, 24px);
    white-space: nowrap;
  }
  .telegramm-img {
    height: 70%; /* для больших экранов */
  }
  .context-menu ul li a {
    font-size: 11px;
  }
  .context-menu {
    width: 140px;
    height: 70px;
  }
  .whatsapp-img {
    height: 70%; /* для больших экранов */
  }
  .numb_1 {
    font-size: 10px;
    grid-row: 2;
  }
  .numb_2 {
    font-size: 10px;
    grid-row: 3;
    margin-top: 0;
  }
  .top_grid {
    grid-template-columns: 1fr 2fr 0.3fr 0.3fr 0px 0px 2fr; /* для маленьких экранов второй столбец будет 1.5fr */
    grid-template-rows: 10px 20px 20px 20px 30px 70px 1fr 1fr;
  }
  .top {
    width: 100%;
    max-width: 1250px;
    max-height: 600px;
    background-size: 100% 100%;
    background-image: url("Design/Top (Mobile).png");
    margin-bottom: -40%;
  }
  .center {
    width: 104%;
  }
}

.kartridge {
  grid-column: 6 / span 2;
  grid-row: 6 / span 2;
  background-image: url("Design/Kartridge.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Для экранов шириной до 768px (например, для мобильных устройств) */
@media (max-width: 950px) {
  .we-are-working-with {
    grid-column: 1 / span 2; /* Позиционирование в grid */
    grid-row: 6 / span 2;
    font-family: Nunito;
    margin-top: -2%;
    font-weight: bold; /* Жирный текст */
    color: #6e6e6e; /* Серый цвет текста */
    letter-spacing: 2px; /* Межбуквенный интервал */
    text-transform: uppercase; /* Заглавные буквы */
  }
  .kartridge {
    grid-column: 5 / span 1; /* для маленьких экранов */
    grid-row: 6 / 9; /* для маленьких экранов */
    background-image: url();
  }
}

.block1 {
  height: auto;

  background-image: url("Design/Block_1.png");
  background-size: 100% 100%;
  background-position: right;
  background-repeat: no-repeat;

  width: 60%; /* Для больших экранов */
}

/* Для экранов шириной до 768px (например, для мобильных устройств) */

@media (max-width: 1050px) {
  .block1 {
    width: 95%; /* Для маленьких экранов */
  }
}

.block1_grid {
  width: 100%; /* Для больших экранов */
  height: 80%;

  margin-top: 4%;
  margin-left: 4%;
  margin-bottom: 4%;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3fr 60px 1fr;
}

@media (max-width: 768px) {
  .block1_grid {
    width: 60%; /* Для маленьких экранов */
    grid-template-rows: 2fr 5px 1fr;
  }
  .block1 {
    width: 100%; /* Для маленьких экранов */
    background-size: contain;
    z-index: 10;
  }
}
.window_1 {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;

  background-image: url("Design/Block_1_Window_1.png");
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
}

.window_2 {
  grid-column: 1 / span 1;
  grid-row: 3 / span 1;

  background-image: url("Design/Block_1_Window_2.png");
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;

  display: flex;
  justify-content: left;
  align-items: center;
}

.exel-img {
  height: 70px; /* Для больших экранов */
  width: 70px; /* Для больших экранов */
  margin-left: 20px;
}

/* Для экранов шириной до 768px (например, для мобильных устройств) */
@media (max-width: 768px) {
  .exel-img {
    height: 40px; /* Для маленьких экранов */
    width: 40px; /* Для маленьких экранов */
    margin-left: 10px;
  }
}

/* Стили для текста времени */
.working-hours-on-paint {
  position: absolute; /* Абсолютное позиционирование внутри родителя */
  top: 29%; /* Положение от верхнего края родителя */
  left: 65%; /* Центровка по горизонтали */
  transform: translate(-50%, -50%); /* Смещение для точной центрировки */
  color: black; /* Цвет текста */
  background-color: #f5ffe4; /* Фон */
  padding: 2px 2px;
  border-radius: 8px;
  font-size: clamp(12px, 1.8vw, 30px);
  font-family: Nunito;

  text-align: center;
  z-index: 10; /* Поверх картинки */
  user-select: none;
}
@media (max-width: 1700px) {
  .working-hours-on-paint {
    top: 31%; /* Регулируем вертикальное положение */
    left: 66%; /* Регулируем горизонтальное положение */
  }
}
@media (max-width: 1600px) {
  .working-hours-on-paint {
    top: 33%; /* Регулируем вертикальное положение */
    left: 66%; /* Регулируем горизонтальное положение */
  }
}
@media (max-width: 1500px) {
  .working-hours-on-paint {
    top: 34%; /* Регулируем вертикальное положение */
    left: 66%; /* Регулируем горизонтальное положение */
  }
}
/* Для экранов шириной до 1200px */
@media (max-width: 1400px) {
  .working-hours-on-paint {
    top: 35%; /* Регулируем вертикальное положение */
    left: 66%; /* Регулируем горизонтальное положение */
  }
}

/* Для экранов шириной до 992px */

@media (max-width: 1300px) {
  .working-hours-on-paint {
    top: 36%; /* Регулируем вертикальное положение */
    left: 66%; /* Регулируем горизонтальное положение */
  }
}
@media (max-width: 1250px) {
  .working-hours-on-paint {
    top: 36%; /* Регулируем вертикальное положение */
    left: 66%; /* Регулируем горизонтальное положение */
  }
}
@media (max-width: 1200px) {
  .working-hours-on-paint {
    top: 37%; /* Регулируем вертикальное положение */
    left: 66%; /* Регулируем горизонтальное положение */
  }
}
@media (max-width: 1150px) {
  .working-hours-on-paint {
    top: 38%; /* Регулируем вертикальное положение */
    left: 66%; /* Регулируем горизонтальное положение */
  }
}
@media (max-width: 1100px) {
  .working-hours-on-paint {
    top: 38%; /* Регулируем вертикальное положение */
    left: 67%; /* Регулируем горизонтальное положение */
  }
}
@media (max-width: 1030px) {
  .working-hours-on-paint {
    top: 39%; /* Регулируем вертикальное положение */
    left: 67%; /* Центрируем горизонтально */
  }
}
@media (max-width: 980px) {
  .working-hours-on-paint {
    top: 39%; /* Регулируем вертикальное положение */
    left: 67%; /* Центрируем горизонтально */
  }
}
@media (max-width: 940px) {
  .working-hours-on-paint {
    top: 39.5%; /* Регулируем вертикальное положение */
    left: 67%; /* Центрируем горизонтально */
  }
}
@media (max-width: 920px) {
  .working-hours-on-paint {
    top: 40%; /* Регулируем вертикальное положение */
    left: 67%; /* Центрируем горизонтально */
  }
}
@media (max-width: 853px) {
  .working-hours-on-paint {
    top: 40.5%; /* Регулируем вертикальное положение */
    left: 67%; /* Центрируем горизонтально */
  }
}
@media (max-width: 830px) {
  .working-hours-on-paint {
    top: 40.5%; /* Регулируем вертикальное положение */
    left: 69%; /* Центрируем горизонтально */
    font-size: 18px; /* Уменьшаем размер шрифта */
  }
}
/* Для экранов шириной до 768px */
@media (max-width: 768px) {
  .working-hours-on-paint {
    top: 23%; /* Регулируем вертикальное положение */
    left: 69%; /* Центрируем горизонтально */
    font-size: 20px; /* Уменьшаем размер шрифта */
  }
}
@media (max-width: 650px) {
  .working-hours-on-paint {
    top: 24%; /* Регулируем вертикальное положение */
    left: 67%; /* Центрируем горизонтально */
    font-size: 18px; /* Уменьшаем размер шрифта */
  }
}
@media (max-width: 600px) {
  .working-hours-on-paint {
    top: 28%; /* Регулируем вертикальное положение */
    left: 67%; /* Центрируем горизонтально */
    font-size: 15px; /* Уменьшаем размер шрифта */
  }
}
/* Для экранов шириной до 576px */
@media (max-width: 576px) {
  .working-hours-on-paint {
    top: 29%; /* Регулируем вертикальное положение */
    left: 67%; /* Центрируем горизонтально */
    font-size: 15px; /* Уменьшаем размер шрифта */
  }
}
@media (max-width: 541px) {
  .we-are-working-with {
    grid-column: 1 / span 2; /* Позиционирование в grid */
    grid-row: 6 / span 2;
    font-family: Nunito;
    margin-top: 2%;
    font-weight: bold; /* Жирный текст */
    color: #6e6e6e; /* Серый цвет текста */
    letter-spacing: 2px; /* Межбуквенный интервал */
    text-transform: uppercase; /* Заглавные буквы */
  }
  .working-hours-on-paint {
    top: 29%; /* Регулируем вертикальное положение */
    left: 67%; /* Центрируем горизонтально */
    font-size: 15px; /* Уменьшаем размер шрифта */
  }
}
@media (max-width: 500px) {
  .working-hours-on-paint {
    top: 32%; /* Регулируем вертикальное положение */
    left: 67%; /* Центрируем горизонтально */
    font-size: 13px; /* Уменьшаем размер шрифта */
  }
}
@media (max-width: 450px) {
  .working-hours-on-paint {
    top: 33%; /* Регулируем вертикальное положение */
    left: 68%; /* Центрируем горизонтально */
    font-size: 13px; /* Уменьшаем размер шрифта */
  }
}
@media (max-width: 414px) {
  .working-hours-on-paint {
    top: 33%; /* Регулируем вертикальное положение */
    left: 69%; /* Центрируем горизонтально */
    font-size: 13px; /* Уменьшаем размер шрифта */
  }
}
@media (max-width: 412px) {
  .working-hours-on-paint {
    top: 33%; /* Регулируем вертикальное положение */
    left: 68%; /* Центрируем горизонтально */
    font-size: 13px; /* Уменьшаем размер шрифта */
  }
}
@media (max-width: 400px) {
  .working-hours-on-paint {
    top: 35%; /* Регулируем вертикальное положение */
    left: 69%; /* Центрируем горизонтально */
    font-size: 12px; /* Уменьшаем размер шрифта */
  }
}
@media (max-width: 361px) {
  .working-hours-on-paint {
    top: 35%; /* Регулируем вертикальное положение */
    left: 69%; /* Центрируем горизонтально */
    font-size: 12px; /* Уменьшаем размер шрифта */
  }
}
@media (max-width: 350px) {
  .working-hours-on-paint {
    top: 36%; /* Регулируем вертикальное положение */
    left: 69%; /* Центрируем горизонтально */
    font-size: 11px; /* Уменьшаем размер шрифта */
  }
}
/* Убедитесь, что .block2 позиционируется как относительный контейнер */
.block2 {
  position: relative; /* Добавляем относительное позиционирование */
  width: 60%;
  max-width: 90vw;
  height: 700px;
  background-image: url("Design/Block_2.png");
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;

  filter: drop-shadow(-10px 15px 20px rgba(0, 0, 0, 0.3));
}

@media (max-width: 768px) {
  .block2 {
    height: 300px;

    width: 100%;
  }
}

.map_wrapper {
  position: relative;
  width: 60%;
  height: 600px;
  margin-bottom: 40px;
}
@media (max-width: 768px) {
  .map_wrapper {
    height: 450px;

    width: 96%;
  }
}
.location-title {
  font-family: Nunito;
  font-size: 25pt;
  color: #535353;
  text-align: center; /* Центрируем текст по горизонтали */
  margin: 0; /* Убираем стандартные отступы */
}

.parent-container {
  display: flex;
  justify-content: center; /* Центрирует по горизонтали */
  align-items: center; /* Центрирует по вертикали */
  height: 100vh; /* Высота родительского контейнера на весь экран */
}

.bottom {
  width: 104%;
  height: 384px;

  background-image: url("Design/Bottom.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  justify-content: center;
}

.base_bottom {
  width: 1850px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.bottom_grid {
  width: 70%;
  max-width: 100vw;
  height: 99%;

  display: grid;
  grid-template-columns: 3fr 40px 40px 2fr 3% 20%;
  grid-template-rows: 30% 7% 7% 10% 20% 1fr;
}

.number_1 {
  grid-column: 6 / span 1;
  grid-row: 2 / span 1;

  text-align: center;
  vertical-align: bottom;
  font-family: Nunito;
  color: #f2f2f2;
  letter-spacing: 0;
  word-spacing: 0;
  font-size: 11pt;
  stroke-width: 0;
  text-decoration: none;
}
.email {
  grid-column: 6 / span 1;
  grid-row: 4 / span 1;

  /* Центрирование блока в ячейке грида */
  justify-self: center;
  align-self: center;

  text-align: center;
  font-family: Nunito;
  color: #f2f2f2;
  letter-spacing: 0;
  word-spacing: 0;
  font-size: 11pt;
  stroke-width: 0;
  text-decoration: none;
}

.number_2 {
  grid-column: 6 / span 1;
  grid-row: 3 / span 1;

  text-align: center;
  vertical-align: bottom;
  font-family: Nunito;
  color: #f2f2f2;
  letter-spacing: 0;
  word-spacing: 0;
  font-size: 11pt;
  stroke-width: 0;
  text-decoration: none;
}

.address_bot {
  grid-column: 6 / span 1;
  grid-row: 5 / span 1;

  text-align: center;
  vertical-align: bottom;
  font-family: Nunito;
  color: #f2f2f2;
  letter-spacing: 0;
  word-spacing: 0;
  font-size: 11pt;
  stroke-width: 0;
  text-decoration: none;
}
@media (max-width: 768px) {
  .bottom_grid {
    width: 95%;
    grid-template-columns: 2fr 30px 30px 0fr 0% 2fr;
    grid-template-rows: 30% 7% 7% 10% 20% 1fr;
  }
}

@media (max-width: 768px) {
  .address_bot {
    font-size: 10pt;
  }
}
@media (max-width: 830px) {
  .bottom_grid {
    width: 95%;
    grid-template-columns: 2fr 30px 30px 0fr 0% 2fr;
    grid-template-rows: 30% 7% 7% 10% 20% 1fr;
  }
}
@media (max-width: 1050px) {
  .bottom_grid {
    width: 95%;
    grid-template-columns: 2fr 30px 30px 0fr 0% 2fr;
    grid-template-rows: 30% 7% 7% 10% 25% 1fr;
  }
}
@media (max-width: 400px) {
  .number_1,
  .number_2 {
    font-size: 9pt;
  }
}
@media (max-width: 350px) {
  .bottom_grid {
    width: 95%;
    grid-template-columns: 2fr 30px 30px 0fr 0% 2fr;
    grid-template-rows: 30% 7% 7% 10% 35% 1fr;
  }
  .number_1,
  .number_2 {
    font-size: 9pt;
  }
}
.line_left {
  grid-column: 1 / span 1;
  grid-row: 6 / span 1;

  background-image: url("Design/Line_Left.png");
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
}

.line_right {
  grid-column: 4 / span 3;
  grid-row: 6 / span 1;

  background-image: url("Design/Line_Right.png");
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
}

.whatsapp_2 {
  grid-column: 2 / span 1;
  grid-row: 6 / span 1;

  display: flex;
  justify-content: center;
}

.whatsapp-img_2 {
  width: 25px;
  height: 25px;

  margin-top: 10px;
}

.telegramm_2 {
  grid-column: 3 / span 1;
  grid-row: 6 / span 1;

  display: flex;
  justify-content: center;
}

.telegramm-img_2 {
  width: 25px;
  height: 25px;

  margin-top: 10px;
}