.masonry3 {
    column-count: 2;
    column-gap: 16px;
    padding: 16px;
  }

  .card3 {
    background: white;
    margin-bottom: 16px;
    display: inline-block;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .card3:hover {
    transform: scale(1.02);
  }

  .card3 img {
    width: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  .card3-content {
    padding: 20px;
  }

  .card3 h4 {
    margin: 0 0 8px;
  }

.overlay3 {
position: fixed;
top: 0;
left: 0;
width: 100vw;  /* Full width */
height: 100vh; /* Full height */
background: rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999999;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease;
overflow: auto;
}

.overlay3.active {
visibility: visible;
opacity: 1;
}

/* Overlay content container */
.overlay3-content {
position: relative;
width: 100%;    /* Full width */
height: 100%;   /* Full height */
background: #fff;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
overflow: auto;

}

.overlay3-title {
font-size: 14px;
color: white;
background-color: rgba(0, 0, 0, 0.6);
padding: 5px 15px;
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%);
z-index: 10000;
border-radius: 6px;
}

.overlay3-content iframe,
.overlay3-content video,
.overlay3-content img {
width: 100%;
height: 100%;
object-fit: contain;
border: none;
border-radius: 0;
}

.close-btn3 {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 40px;
background: #026fce;
color: white;
padding: 8px 8px;
border-radius: 6px;
cursor: pointer;
z-index: 10000; /* Ensure it's on top of overlay */
border: none;
line-height: .7;
}

.close-btn3:hover {
background-color: #017fee;
}


#contentContainer {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
}

#contentContainer img {
  max-width: none;
  height: auto;
  display: block;
}

  @media (max-width: 768px) {
    .masonry3 {
      column-count: 1;
    }
  }