/* Remove default page margin that creates the grey strip */
html, body {
  margin: 0;
  padding: 0;
}
header {
  margin: 0;
}
/* Make sure hero has no grey background */
.event-hero {
  position: relative;
  height: 75vh;
  overflow: hidden;
  background-color: transparent; /* important */
}
.gallery-img {
    width:100%;
    height:250px;
    object-fit:cover;
    border-radius:15px;
    cursor:pointer;
    transition:0.3s;
}


.gallery-img:hover {
    transform:scale(1.05);
}
/* Image fills hero fully - absolutely positioned (like .event-overlay
   below) so it's pinned to all four edges of .event-hero regardless of
   normal block-flow height quirks, instead of relying on height:100%
   alone (which left grey gaps above/below the image). */
.img-overlay {
  position: absolute;
  inset: 0;
}

.img-overlay,
.img-overlay img {
  width: 100%;
  height: 100%;
}

.img-overlay img {
  object-fit: cover;
  display: block;
}

/* Dark overlay over the image */
.event-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
}

/* Remove grey line above footer */
footer {
  border-top: none;
}

/* HERO TEXT */
.event-category {
  color: #CCEFBA;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
}
.event-title {
  color: white;
  font-size: 64px;
  font-weight: 700;
  margin: 15px 0;
}

.event-date {
  color: white;
  font-size: 20px;
}

.event-details {
  padding: 80px 0;
}

.event-details h2 {
  margin-bottom: 20px;
}

.event-details p {
  line-height: 1.8;
  margin-bottom: 20px;
}

.event-info {
  background: #f8f9fa;
  padding: 30px;
  border-radius: 12px;
  position: sticky;
  top: 100px;
}

.event-info h4 {
  margin-bottom: 20px;
}

.event-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.event-info li {
  margin-bottom: 20px;
}

.gallery-section {
  margin-top: 70px;
}

.gallery-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 10px;

  transition: .3s;
  cursor: pointer;
}

.gallery-img:hover {
  transform: scale(1.04);
}

footer {
  border-top: 1px solid #eee;
  margin-top: 60px;
}

@media(max-width:768px){

  .event-title{
    font-size:40px;
  }

  .event-hero{
    height:50vh;
  }

  .gallery-img{
    height:180px;
  }

}