#step1, #step2, #step3 {
  margin-bottom: 40px;
}

#step1 h2, #step2 h2, #step3 h2 {
  margin-bottom: 20px;
}

form label {
  display: block;
  margin-bottom: 10px;
}

form input[type="number"],
form select {
  padding: 5px;
}

form button[type="submit"] {
  padding: 8px 15px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}

#recommendations {
  background-color: #f5f5f5;
  padding: 20px;
}

#productList {
  font-size: 11px;
}

.grams-input {
  text-align: right;  /* Выравнивание текста по правому краю */
  width: 50px;  /* Ширина поля для ввода граммов */
  margin-left: 10px;  /* Отступ слева для создания промежутка между элементами */
}

form input[type="number"], form select {
  max-width: 100%;
}

.onlineservice{
    background-color: #fdc03c;
    padding: 10px;
    color: black;
}
.onlineservice h2{
    font-size: 99%;
}
.onlineservice h3{
    font-size: 99%;
}

.onlineservice {
  background-color: 	#79C3CD;
  padding: 20px;
  border-radius: 5px;
}

.onlineservice h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

.onlineservice label,
.onlineservice input[type="number"],
.onlineservice select {
  display: block;
  width: 100%;
  margin-top: 14px;
  box-sizing: border-box; /* Добавлено */
}

.onlineservice input[type="number"],
.onlineservice select {
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.onlineservice button[type="submit"] {
  margin-top: 14px;
  padding: 8px 15px;
  background-color: #333;
  border: none;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.onlineservice button[type="submit"]:hover {
  background-color: #555;
}
		  
#step2 {
  display: block;
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 5px;
}
		  
#step1 {
  display: block;
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 5px;
}

#step2 h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

#totalCalories {
  font-size: 18px;
  margin-bottom: 10px;
}

#categories {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

#productList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0;
  margin: 0;
  max-height: 480px;
  overflow-y: auto;
  column-gap: 20px; /* Добавлено */
}
		  
/* Медиа-запрос для мобильных устройств */
@media (max-width: 768px) {
  #productList {
    grid-template-columns: 1fr; /* Изменено на 1 колонку */
  }
}

#productList li {
  margin-bottom: 10px;
}

.grams-input {
  width: 60px;
  margin-left: 10px;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

#recalculateButton {
  display: block;
  margin-top: 14px;
  padding: 8px 15px;
  background-color: #333;
  border: none;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

#recalculateButton:hover {
  background-color: #555;
}

.item{
    margin-bottom: 48px;
}
@media screen and (max-width: 768px) {
    .marTop1 {
    font-size: 24px!important;
    line-height: 24px!important; /* Подберите нужный вам интерлиньяж */
    letter-spacing: 0.4px!important; /* Подберите нужное вам межбуквенное расстояние */
    }
}
@media screen and (max-width: 768px) {
    .secondh2 {
    font-size: 24px!important;
    line-height: 24px!important; /* Подберите нужный вам интерлиньяж */
    letter-spacing: 0.4px!important; /* Подберите нужное вам межбуквенное расстояние */
    }
}