body {
  background-color: whitesmoke;
}

header {
  background: #233a52;

}

.text-color {
  color: white;
}

.text-dark {
  color: #233a52;
}

.maindoctor {
  background-image: url('css/images/main.svg')
}

.card {
  width: 100%;
  aspect-ratio: 10/8;
  perspective: 1000px;
  cursor: pointer;
  padding: 4%;
  overflow: hidden;
  border-radius: 1rem;
  border: none;
  background: transparent;
  box-shadow: none;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s ease-in-out;
  align-items: center;
  box-sizing: border-box;
  display: flex;
}

.card.is-flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  color: #f2f6f7;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

}

.card-back {
  transform: rotateY(180deg);
}

.howItWorks1 {
  display: flex;
  flex-direction: column;
  height: 100%; 
  padding: 16px; 
  box-sizing: border-box;
  color: #A82E5A;
  text-align: center;
  align-items: center;
}
.description {
  color: #A82E5A;
  text-align: center;
  align-items: center;
  text-align: center;
  padding: 16px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.card-inner:hover {
  transform: scale(1.05);
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }

  50% {
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0.9;
  }
}

.image-section,
.title-section {
  height: 50%;
  max-height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.howItWorks {
  color: #A82E5A;
  text-align: center;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 1;
  transform: scale(1);
  transition: transform 0.3s ease-in-out, opacity 0.5s ease-in-out;
  animation: none;
  box-sizing: border-box;
  overflow: hidden;
  height: 100%; /* Карточка занимает всю высоту ячейки сетки */
  min-height: 200px; /* Минимальная высота для предсказуемого разделения */
}

.image-section, .title-section {
  height: 50%; /* Фиксируем высоту 50% от родителя */
  max-height: 50%; /* Ограничиваем максимальную высоту */
  display: flex;
  justify-content: center; /* Центрирование по горизонтали */
  overflow: hidden; /* Предотвращаем переполнение */
}

.image-section {
  align-items: center; /* Изображение центрируется по вертикали */
}

.title-section {
  align-items: flex-start; /* Заголовок выравнивается по верхнему краю */
  text-align: center;
  overflow: hidden;
}

.image-section img {
  margin: 0; /* Убираем лишние отступы у изображения */
}

.title-section h2 {
  margin: 0;
  line-height: 1.5;
  max-height: 100%; /* Ограничиваем текст внутри контейнера */
  overflow: hidden;
}