#single_media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  max-height: 500px;
}
@media (max-width: 991px) {
  #single_media {
    height: 470px;
  }
}
#single_media.no_media {
  max-height: 400px;
  background: var(--group-color-main);
}
.magellan #single_media.no_media {
  background: var(--magellan-color-main);
}
.pacific #single_media.no_media {
  background: var(--pacific-color-main);
}
.mantanani #single_media.no_media {
  background: var(--mantanani-color-main);
}
.marina #single_media.no_media {
  background: var(--marina-color-main);
}
.klcc #single_media.no_media {
  background: var(--klcc-color-main);
}
@media (max-width: 991px) {
  #single_media.no_media {
    margin-inline: 30px;
    padding-inline: 0;
  }
}
#single_media.no_media .single_media_content::before {
  content: none;
}
#single_media.no_media .single_media_content .content_wrap {
  position: absolute;
  top: 50%;
  left: 100px;
  flex-direction: row;
  max-width: 800px;
}
@media (max-width: 991px) {
  #single_media.no_media .single_media_content .content_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    left: 30px;
  }
}
#single_media img {
  width: 100%;
  height: 100%;
  max-height: 500px;
  object-fit: cover;
}
#single_media .single_media_content {
  position: relative;
  height: 100%;
  display: block;
  min-height: 400px;
}
#single_media .single_media_content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0) 80%);
  pointer-events: none;
  z-index: 2;
}
#single_media .single_media_content .video_icon {
  position: absolute;
  background: url("../../../../scss/svg/play-icon.svg") no-repeat center center;
  background-size: contain;
  display: block;
  width: 55px;
  height: 55px;
  z-index: 5;
  left: 80%;
  top: 50%;
}
@media (max-width: 767px) {
  #single_media .single_media_content .video_icon {
    width: 40px;
    height: 40px;
    top: 40px;
    left: 50%;
    transform: translate(-50%, 50%);
  }
}
.group #single_media .single_media_content::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  max-width: 245px;
  opacity: 0.5;
  background: url("../../../../scss/patterns/group.svg") no-repeat top right;
  background-size: contain;
}
@media (max-width: 767px) {
  .group #single_media .single_media_content::after {
    height: 250px;
  }
}
.magellan #single_media .single_media_content::after {
  content: "";
  position: absolute;
  top: 0;
  right: 40px;
  width: -webkit-fill-available;
  height: 100%;
  opacity: 0.5;
  background-image: url("../../../../scss/patterns/magellan-white.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right top;
  pointer-events: none;
}
@media (max-width: 991px) {
  .magellan #single_media .single_media_content::after {
    right: 0;
  }
}
.marina #single_media .single_media_content::after {
  content: url("../../../../scss/patterns/marina.svg");
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  max-width: fit-content;
}
#single_media .content_wrap {
  position: absolute;
  top: 50%;
  left: 100px;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 460px;
}
#single_media .content_wrap .content_description {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (max-width: 991px) {
  #single_media .content_wrap .content_description {
    gap: 20px;
  }
}
@media (max-width: 991px) {
  #single_media .content_wrap {
    text-align: center;
    left: 30px;
    right: 30px;
    gap: 20px;
  }
}
@media (max-width: 991px) {
  #single_media .content_wrap .title {
    font-size: 24px;
  }
}
#single_media .content_wrap .title,
#single_media .content_wrap .subtitle,
#single_media .content_wrap .the_content p {
  color: #fff;
}
#single_media .content_wrap .btns_wrap {
  justify-content: flex-start;
}
@media (max-width: 991px) {
  #single_media .content_wrap .btns_wrap {
    display: flex;
    justify-content: center;
  }
}
#single_media .content_wrap .btns_wrap .btnCta {
  background: transparent;
  border: 1px solid #fff;
}
#single_media .content_wrap .btns_wrap .btnCta:hover {
  background: var(--highlight-color);
  border-color: var(--highlight-color);
}