/* Card Container */
.card-flip {
  background-color: transparent;
  width: 100%;
  height: 300px; /* Fixed height for animation */
  perspective: 1000px;
}

/* 3D Inner Container */
.card-inner {
  position: relative;
  width: 100%;
  height: 300px;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Flip Effect on Hover */
.card-flip:hover .card-inner {
  transform: rotateY(180deg);
}

/* Front & Back Common Styles */
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 300px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 0px solid #ddd;
  border-radius: 8px;
  text-align: center;
}

/* Back Styling */
.card-back {
  background-color: white;
  color: #3D516A;
  transform: rotateY(180deg);
}
.card-back a {
  background-color: #3D516A;
  color: white;
  vertical-align: middle;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  font-size: larger;
  border-radius: 5px;
  padding: 10px;
 
}

.card-back a:hover{
  background-color: #cccccc;
  color: black;
  vertical-align: middle;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  font-size: larger;
  border-radius: 5px;
 
}

.card-front-title {
    background-color:#3D516A;
 /* position: absolute;*/ /* Позиционируем относительно контейнера */
 /* top: 30%;         /* Центрируем по вертикали */
 /* left: 50%;        /* Центрируем по горизонтали */
 /* transform: translate(0%, -30%); /* Точное центрирование */
  color: white;     /* Цвет текста */
  font-size: 18px;  /* Размер шрифта */
  text-align: center; /* Выравнивание текста внутри блока */
  vertical-align: middle;
  width: 100%;      /* Занимаем всю ширину контейнера */
  /* Добавляем тень для читаемости */
  text-shadow: 2px 2px 4px #000000;
  height: 60px;
    border-radius: 8px;
  
}
.card-front-title-padding {
    background-color:#3D516A;
 /* position: absolute;*/ /* Позиционируем относительно контейнера */
 /* top: 30%;         /* Центрируем по вертикали */
 /* left: 50%;        /* Центрируем по горизонтали */
 /* transform: translate(0%, -30%); /* Точное центрирование */
  color: white;     /* Цвет текста */
  font-size: 18px;  /* Размер шрифта */
  text-align: center; /* Выравнивание текста внутри блока */
  padding-top: 15px;
  width: 100%;      /* Занимаем всю ширину контейнера */
  /* Добавляем тень для читаемости */
  text-shadow: 2px 2px 4px #000000;
  min-height: 60px;
    border-radius: 8px;
    align-items: center;

  
}
.main-bottom-1{ padding:40px;}