.video-content-wrapper {
  max-width: 1300px;
  margin: -40px auto 0;
  padding: 0;
  z-index: 9;
  position: relative;
}

/* Each video/content block */
.video-content-item {
  display: flex;
  width: 100%;
  max-width: 100%;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin: 0 auto 110px;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease;
}

.video-content-item.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.video-content-item:last-child {
  margin-bottom: 0;
}

/* Layout alternation */
.layout-left-video .video-content-media {
  order: 1;
}

.layout-left-video .video-content-text {
  order: 2;
}

.layout-right-video .video-content-media {
  order: 2;
}

.layout-right-video .video-content-text {
  order: 1;
  margin: 0;
}

/* Video area */
.video-content-media {
  position: relative;
}

.video-poster-link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 686px;
  height: 443px;
  /*border: 5px solid #FFF;*/
  background-size: cover;
  background-repeat: no-repeat;
  /*box-shadow: 0 0 3.051px 3.051px rgba(0, 0, 0, 0.08);*/
}

.poster-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 69px;
  height: 69px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.play-button svg {
  width: 69px;
  height: 69px;
}

.video-poster-link:hover .play-button {
  transform: translate(-50%, -50%) scale(1.1);
}

/* Text area */
.video-content-text {
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 0 0;
}

.video-content-text p,
.video-content-text h2,
.video-content-text h3 {
  color: #FFF;
}

.video-content-text h2 {
  margin-bottom: 30px;
}

.video-content-text h2::after {
  background: #FFCB1C;
}

.video-content-inner {
  font-size: 18px;
  line-height: 1.8;
  color: #333;
}

.video-content-inner p:last-child {
  margin-bottom: 0;
}

.btn-video-content {
  color: #FFF;
  text-align: center;
  font-family: "Open Sans";
  font-size: 24.911px;
  font-style: normal;
  font-weight: 400;
  line-height: 36.711px;
  letter-spacing: 0.747px;
  text-decoration: none;
  display: flex;
  border-radius: 0 6.556px 6.556px 0;
  background: #016F45;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.15s ease-in-out;
  padding: 6.556px 13.111px 6.556px 32.778px;
  justify-content: center;
  align-items: center;
  gap: 6.556px;
}

.btn-video-content span {
  z-index: 3;
  position: relative;
}

.btn-video-content:hover {
  text-decoration: none;
  color: #FFF;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.44);
}

.video-content-readmore-inner::before {
  z-index: 2;
  position: absolute;
  width: 59px;
  height: 59px;
  left: -30px;
  top: -3.5px;
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='59' viewBox='0 0 60 59' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='29.6667' cy='29.5' r='28.1889' fill='white' stroke='%23016F45' stroke-width='2.62222'/%3E%3Cg clip-path='url(%23clip0_364_1169)'%3E%3Cpath d='M19.1778 17.0444C17.3699 17.0444 15.9 18.5143 15.9 20.3222V35.0722C15.9 36.8801 17.3699 38.35 19.1778 38.35H24.0945V42.4472C24.0945 42.7596 24.2686 43.0413 24.5452 43.1796C24.8217 43.3179 25.1546 43.2871 25.4056 43.1028L31.7409 38.35H38.8445C40.6524 38.35 42.1222 36.8801 42.1222 35.0722V20.3222C42.1222 18.5143 40.6524 17.0444 38.8445 17.0444H19.1778Z' fill='%23016F45'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_364_1169'%3E%3Crect width='26.2222' height='26.2222' fill='white' transform='translate(15.9 17.0444)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.btn-video-content::after {
  content: "";
  position: absolute;
  top: -75px;
  left: -100%;
  width: 393px;
  height: 393px;
  background: #FFF;
  border-radius: 393.21px;
  transition: transform 0.15s ease-in-out;
  transform: translateX(-50%);
  z-index: 0;
}

.btn-video-content:hover::after {
  transform: translateX(60%);
}

.btn-video-content:hover {
  color: #212427;
}

@media (max-width: 1440px) {
  .video-poster-link {
    width: 570px;
    height: 370px;
  }
}

/* Responsive */
@media (max-width: 1240px) {
  .video-content-item {
    width: 100%;
    flex-direction: column;
  }
}

@media (max-width: 968px) {
  .video-content-text{
    padding: 30px 0 0!important;
  }
  .extra-overlay {
    bottom: -130px;
    top: -100px;
  }
  .video-content-item {
    flex-direction: column;
    gap: 0;
    margin-bottom: 50px;
  }

  .video-content-text {
    min-height: auto;
  }

  .layout-right-video .video-content-text,
  .layout-left-video .video-content-text {
    margin: 0;
  }

  .video-poster-link,
  .video-content-media {
    width: 100%;
  }

  .layout-left-video .video-content-media,
  .layout-right-video .video-content-media {
    order: 1;
  }

  .layout-left-video .video-content-text,
  .layout-right-video .video-content-text {
    order: 2;
    width: 100%;
    max-width: 100%;
    padding: 40px;
  }

  .video-content-inner {
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  .video-poster-link {
    height: 245px;
  }

  .play-button {
    width: 45px;
    height: 45px;
  }
}

.video-frame-wrapper {
  position: relative;
  width: 686px;
  height: 443px;
  border: 5px solid #FFF;
  overflow: hidden;
  box-shadow: 0 0 3.051px 3.051px rgba(0,0,0,0.08);
}

.video-frame-wrapper video,
.video-frame-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/*
===========================================================
🔥 Mobile Fix — Remove fixed height/width + keep video visible
===========================================================
*/
@media (max-width: 768px) {
  .video-frame-wrapper {
    width: 100% !important;
    height: auto !important;
    padding-top: 56.25%; /* Maintain 16:9 aspect ratio */
    position: relative;
  }

  .video-frame-wrapper video,
  .video-frame-wrapper iframe,
  .video-poster-link {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  .video-poster-link {
    border: none !important;
  }
}