@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');

  body {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 400;
    margin: 0;
    background-color: #76a071; /* Цвет пустых полос по бокам */
  }

  .header-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
  }
  
  h2 {
    font-size: 70px;
    margin: 0;
  }

  .logo {
    display: block;
    display: block;
    border-radius: 10px;
  }

.container {
  max-width: 1500px; /* Ширина контента */
  margin: 0 auto;    /* Центрирует блок и создает пустые полосы */
  background-color: #7bc77b; /* Цвет основной части */
  min-height: 100vh; /* Растягивает блок до низа экрана */
  box-shadow: 0 0 100px rgba(0,0,0,0.1); /* тень по бокам */
  }


/* Контейнер для кнопок */
.main-menu {
  display: flex;            /* Выстраивает элементы в ряд */
  justify-content: center;   /* Центрирует меню */
  gap: 25px;                 /* Расстояние между кнопками */
  margin: 20px 0;  
  }

/* Стиль самих кнопок */
.nav-button {
  text-decoration: none;     /* Убирает подчеркивание ссылки */
  color: white;              
  background-color: #76a071; 
  padding: 10px 20px;        /* Внутренние отступы (высота и ширина) */
  border-radius: 10px;        /* Скругление углов */
  font-weight: bold;
  transition: 0.1s;          /* Плавность при наведении */
  }

/* Эффект при наведении курсора */
.nav-button:hover {
  background-color: #62855e;    
  transform: scale(1.05);    /* Кнопка чуть-чуть увеличивается */
  }

  .info-block {
  background-color: #648860; 
  color: #ffffff;            
  padding: 20px;             
  border-radius: 10px;       
  margin: 20px 0;            /* Отступы снаружи (сверху и снизу) */
  line-height: 1.6;          /* Межстрочный интервал для читаемости */
  
  /* Внутренняя тень для эффекта "вдавленности" */
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.25);
  
  /* Опционально: тонкая рамка, чтобы подчеркнуть границы */
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.info-bottom {
  text-align: center;
  font-size: 14px;
  padding-bottom: 5px;
}

.booking-form {
  text-align: center;
}

.pay-button {
  text-decoration: none;     
  color: white;              
  background-color: #76a071; 
  padding: 10px 20px;       
  border-radius: 10px;       
  font-weight: bold;
  transition: 0.1s;         
  margin-top: 20px;       
  width: 50%;            
  }

  /* Эффект при наведении курсора */
.pay-button:hover {
  background-color: #62855e;    
  transform: scale(1.05);    
  }

.payment {
  display: flex;
  flex-direction: column; /* Элементы в столбик */
  align-items: center;    /* Выравнивание элементов по горизонтальному центру */
  max-width: 400px;       /* Ограничение ширины формы */
  margin: 200 auto;         /* Центрирование самой формы на странице */
  gap: 10px;             
}

.payment label {
  width: 100%;            /* Чтобы текст лейбла мог центрироваться */
  text-align: center;     
  font-weight: bold;
}

.payment input {
  width: 80%;             
  padding: 10px;
  text-align: center;    
  border-radius: 5px;
  border: 1px solid #ccc;
}

.payment-button {
  text-decoration: none;     
  color: rgb(0, 0, 0);            
  background-color: #ebc700; 
  padding: 10px 20px;       
  border-radius: 10px;       
  font-weight: bold;
  transition: 0.1s;          
  margin-top: 20px;      
  width: 50%;            
  }

.payment-button:hover {
  background-color: #ffd900;
  transform: scale(1.05);
  }

.loading {
  padding-left: 45%;
}

.planet_gif {
  padding-left: 35%;
}

.tickets_icon {
  padding-left: 45%;
  padding-bottom: 20px;
}

.pay_icon {
  padding-left: 43.5%;
  padding-bottom: 30px;
}

.work-time_icon {
  padding-left: 42%;
  padding-bottom: 30px;
}

.smiling_icon {
  padding-left: 43%;
}

.mammal_icon {
  padding-left: 46%;
  padding-bottom: 30px;
}

.bird_icon {
  padding-left: 38%;
  padding-bottom: 30px;
}

.reptiles_icon {
  padding-left: 40%;
  padding-top: 15px;
  padding-bottom: 30px;
}

.primate_icon {
  padding-left: 40%;
  padding-bottom: 30px;
}

.red-panda_icon {
  padding-left: 40%;
}