body {
	 top: var(--header-height);
	 background-color: white;	
   }
   
   h1 {
  display: block; /* Вказує, що елемент має відображатися як блоковий (займає всю ширину батьківського контейнера) */
  color: #000007; /* Встановлює колір тексту на білий (hex-код #fff) */
  font-size: 2rem; /* Встановлює розмір шрифту на 24 пікселі */
  text-align: center; /* Вирівнює текст по центру горизонтально */
  margin-top: 20px; /* Додає зовнішній відступ зверху в 20 пікселів */
  margin-bottom: 20px; /* Додає зовнішній відступ знизу в 20 пікселів */
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5); /* Біла тінь з прозорістю */
}
 
	
  .photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Автоматична кількість колонок */
  gap: 20px; /* Відстань між елементами */
  padding: 20px;
  justify-items: center;
}

.service-card {
  text-decoration: none; /* Прибирає підкреслення посилань */
  color: inherit; /* Успадковує колір тексту */
  display: block; /* Робить посилання блоковим елементом */
  height: 100%; /* Заповнює всю висоту батьківського контейнера */
}

.photo-item {
	border: 2px solid #ccc; /* Рамка навколо блоку */
    border-radius: 10px; /* Закруглені кути */
    text-align: center; /* Центрування зображення та тексту */
	width: 300px;
    height: 400px;
    box-sizing: border-box; /* Щоб padding не збільшував розміри */
    transition: all 0.3s ease; /* Плавні анімації при наведенні */
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}

.photo-item:hover {
  border-color: #3399ff;
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.photo-item img {
  border-radius: 8px;
 
}

 h2 {
  font-size: 1.5rem;
  margin-top: 10px;
  color: #333;
  font-weight: 500;
}

 
@media (max-width: 768px), (max-device-width: 768px) {
body {
	 top: 6rem;
	 background-color: white;	
   }
   
h2 {
	font-size: 2.5rem; /* Розмір шрифту */
  }	
}


