/* new navbar kontainer*/
/* ===============================
   BASE
   =============================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Ссылки и кнопка dropdown black */
.navbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #0f0f0f;
  border-radius: 50px 20px;
}

/* Ссылки и кнопка dropdown white */
.navbar a,
.dropbtn {
  color: #faf5f5; 
  padding: 14px 20px;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  transition: background 0.3s;
  border-radius:10px 10px 10px 10px;

   
 text-shadow: 
 0 0 5px #b3e0ff,   /* Легкое голубое свечение */
 0 0 18px #b3e0ff,  /* Среднее голубое свечение */
 0 0 16px #b3e0ff;  /* Сильное голубое свечение */
}

.navbar a:hover,
.dropbtn:hover {
  background-color:#057a05;
  border-radius:10px 10px 10px 10px;
}

/* ===============================
   DROPDOWN
   =============================== */

.dropdown {
  position: relative;
  z-index: 1000; /* чтобы dropdown был поверх всего */
}

.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  display: flex;
  flex-direction: column;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;

  background: #212120;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
  z-index: 2000; /* выше других элементов */
  border-radius:10px 10px 10px 10px;
}

.dropdown-content a {
  padding: 12px 16px;
  color: #faf5f5;
  text-align: left;
  border-radius: 4px;
  margin: 2px 0;
  transition: background 0.3s;
  border-radius:10px 10px 10px 10px;
}

.dropdown-content a:hover {
  background: #4b8511;
  border-radius:10px 10px 10px 10px;
}

/* ===============================
   DESKTOP — HOVER
   =============================== */

@media (min-width: 700px) {
  .dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ===============================
   MOBILE & TABLET
   =============================== */

@media (max-width: 700px) {
  .navbar {
    flex-direction: column;
    align-items: stretch;
  }

  .dropdown {
    width: auto;
  }

  .dropdown-content {
    position: absolute; /* absolute, чтобы не растягивать весь экран */
    top: 100%;
    left: 0;
    width: auto;
    background: #f0b907;
    box-shadow: 0 8px 16px rgba(0,0,0,.3);
    transform: none;
  }

  .dropdown-content a {
    margin: 4px 12px;
    text-align: center;
  }

  /* открытие по клику */
  .dropdown:focus-within .dropdown-content {
    display: flex;
    opacity: 1;
    visibility: visible;
  }
}

/* ===============================
   LARGE SCREENS
   =============================== */

@media (min-width: 1200px) {
  .navbar {
    max-width: 1200px;
    margin: auto;
  }
}





/*новый*/


*/
/*позвонить*/

.moving-button {
    padding: 15px 30px;
    font-size: 25px;
    color: white;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    top: 200px; /* Позиция сверху */
    right: 30px; /* Начальная позиция справа */
    
}



/* фото холод резина*/
.imgFridge {
    width: 200px;
    height: 200px;
}

/* блок ссылк текст */
/* Общие стили для контейнера */
  .contPage {
    display: flex;
    flex-wrap: wrap; /* Разрешаем оборачивание элементов в строки */
    gap: 20px; /* Отступы между блоками */
    margin: 20px; /* Отступы вокруг контейнера */
    justify-content: center; /* Центрируем блоки */
  }

  /* Стили для каждого блока */
  .contItem {
    width: 100%; /* По умолчанию блоки занимают всю ширину */
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрируем контент */
    gap: 10px;
    background-color: #f9f9f9;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .DryerK {
    width: 100%; /* Изображения растягиваются на 100% ширины родительского элемента */
    border-radius: 8px;
    object-fit: cover;
    height: auto;
  }

  /* Кнопка с ссылкой */
  .contButton {
    font-size: 20px;
    padding: 10px 20px;
    background-color: black;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 10px 0;
  }

  .contButton a {
    text-decoration: none;
    color: white;
  }

  .contButton:hover {
    background-color: #0056b3;
  }

  /* Описание под кнопкой */
  .contDescription {
    font-size: 16px;
    line-height: 1.5;
    color: #555;
    text-align: center;
    word-wrap: break-word; /* Перенос слов, если они не помещаются */
  }

  /* Адаптивность для разных экранов */
  @media (min-width: 768px) {
    .contItem {
      width: 48%; /* Два блока в ряд для экранов от 768px */
    }
  }

  @media (min-width: 1200px) {
    .contItem {
      width: 30%; /* Три блока в ряд для экранов от 1200px */
    }
  }

  /* Адаптивность для мобильных телефонов (до 480px) */
  @media (max-width: 480px) {
    .contItem {
      width: 100%; /* На мобильных устройствах блоки занимают всю ширину */
      padding: 10px; /* Меньше отступов для мобильных */
    }

    .contButton {
      font-size: 18px; /* Уменьшаем размер шрифта на мобильных */
      padding: 8px 15px; /* Меньше отступов на кнопках */
    }

    .contDescription {
      font-size: 14px; /* Уменьшаем шрифт в описании для мобильных */
      padding: 0 10px; /* Увеличиваем отступы для текста */
    }

    .DryerK {
      height: 200px; /* Ограничиваем высоту изображений для мобильных устройств */
    }
  }
/* блок ссылк текст */


/*прилип номер*/
.stick {
    position: sticky; /* прилип к верх */
    top: 80px;  /* прилип к верх */
    
}

a {
  transition: transform 0.3s ease; /*  увеличение */
}

a:hover {
  transform: scale(1.2); /* увелич ссылку в 20% */
}