/* ===========================
   PROGRAM CARD BASE STYLE
   =========================== */

.program-card {
  position: relative;
  width: 100%;
  height: 350px; /* adjust */
  overflow: hidden;
  border-radius: 12px;
}

/* Full width background image */
.program-card img {
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Blue shadow overlay */
.program-card .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%; /* how far the shadow spreads */
  height: 100%;
  background: linear-gradient(
    to right,
    #002744 0%,
    rgba(0, 39, 68, 1) 60%,
    transparent 100%
  );
  z-index: 2;
}

/* Text on top of image */
.program-card .content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  height: 100%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  width: 29%;
}
.minutes {
  top: 48%;
  left: 15px;
  font-size: 14px;
}

/* Program inner image */
.programe-img img {
  border-radius: 8px !important;
  width: 100%;
}

.line-programe_inner{
  height: 1px;
  width: 100%;
  background-color:#FFFFFF;
  opacity: 0.1;
}

/* ===========================
   TAG IMAGE RESPONSIVE SIZES
   =========================== */

@media (min-width: 992px) {
  .tag-img {
    height: 200px; /* adjust to your preferred size */
    overflow: hidden;
    border-radius: 8px;
  }

  .tag-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

@media (max-width: 765px) {
  .tag-img {
    height: 90px; /* adjust to your preferred size */
    overflow: hidden;
    border-radius: 8px;
  }

  .tag-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  
/* Blue shadow overlay */
.program-card .overlay {
  bottom: 0 !important;
  width: 100%; 
  height: 70%;
  top: auto;
  background: linear-gradient(
    to top,
    #002744 0%,
    rgba(0, 39, 68, 0.96) 70%,
    transparent 100%
  );
  z-index: 2;
}
.program-card .content {
  top: 25%;
  width: 100%;
}


}