.main {
 margin: 0 !important;
 padding: 180px 0 336px;
}
.number-selection {
 margin-top: 200px;
}
.background-img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 position: absolute;
 top: 0;
 left: 0;
}
.details {
 justify-content: flex-start;
}

.story {
 position: relative;
 z-index: 2;
 color: white;
 padding: 30px 0 !important;
}
.background-wrapper {
 position: relative;
 width: 100%;
 height: 370px;
 overflow: hidden;
}
.latest-post a {
 text-decoration: none;
}
.latest-post .card .info {
 height: auto;
}
.type-room.events .card {
 width: calc((100% - 32px) / 3) !important;
}
.card-body {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}
.simple-ship-container {
 position: relative;
 width: 170px;
 height: 55px;
 margin: 0 auto;
 background: transparent;
}

/* Смайлик корабля */
.moving-ship {
 position: absolute;
 top: 0;
 left: 0;
 font-size: 37px;
 line-height: 1;
 animation: shipSailing 4s infinite ease-in-out;
}

/* Блок с точками под корабликом */
.ship-dots {
 position: absolute;
 bottom: 5px;
 left: 0;
 width: 100%;
 text-align: center;
}

/* Сами точки */
.ship-dots > div {
 width: 10px;
 height: 10px;
 background-color: #0288d1; /* Красивый морской голубой цвет */
 border-radius: 50%;
 display: inline-block;
 margin: 0 4px;
 /* Анимация пульсации точек */
 animation: shipDotPulse 1.4s infinite ease-in-out both;
}

/* Задержка для эффекта бегущей волны у точек */
.ship-dots .dot1 {
 animation-delay: -0.32s;
}

.ship-dots .dot2 {
 animation-delay: -0.16s;
}

/* АНИМАЦИЯ: Пульсация точек */
@keyframes shipDotPulse {
 0%,
 80%,
 100% {
  transform: scale(0.4);
  opacity: 0.3;
 }
 40% {
  transform: scale(1.1);
  opacity: 1;
 }
}

/* АНИМАЦИЯ: Движение корабля туда-сюда с разворотом носа */
@keyframes shipSailing {
 0% {
  left: 0;
  transform: scaleX(1) translateY(0) rotate(0deg);
 }
 25% {
  transform: scaleX(1) translateY(-4px) rotate(3deg);
 }
 48% {
  transform: scaleX(1) translateY(0) rotate(0deg);
 }
 50% {
  left: calc(100% - 42px);
  transform: scaleX(-1) translateY(0) rotate(0deg);
 }
 75% {
  transform: scaleX(-1) translateY(-4px) rotate(-3deg);
 }
 98% {
  transform: scaleX(-1) translateY(0) rotate(0deg);
 }
 100% {
  left: 0;
  transform: scaleX(1) translateY(0) rotate(0deg);
 }
}

/* Плавное проявление новых карточек блога */
.blog-story-card {
 opacity: 0;
 transform: translateY(30px);
 animation: fadeInCardSlow 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes fadeInCardSlow {
 to {
  opacity: 1;
  transform: translateY(0);
 }
}
@media (max-width: 991px) {
 .latest-post {
  flex-direction: column;
 }
 .latest-post .card {
  width: 100%;
 }
 .history {
  flex-direction: column;
 }
 .popular {
  margin: 0;
 }
}
@media (max-width: 767px) {
 .bd {
  padding-top: 30px;
  padding-bottom: 30px;
 }
 .bg-nav {
  width: 100%;
 }
 .navbar > img {
  width: 110px;
 }
 .popular .card .info span {
  font-size: 16px;
  line-height: normal;
 }
 .popular .card {
  padding: 20px 0 20px;
 }
}