/* === 1. Body and Background === */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;

  background-image: url("background.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;

  overflow-x: hidden;
}

/* === 2. Sticky Header === */
#sticky-header {
  position: relative;
  width: 100%;
  background: transparent;
  text-align: center;
  padding-bottom: 30px;
}

/* === 3. Border Image === */
.border-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1; /* behind logo and info */
  height: auto;
  display: block;
  object-fit: contain;
}

/* === 4. Video Fade Logo === */
.video-logo-container {
  margin-top: 10px;
}

.logo-video {
  width: 220px;
  max-width: 80%;
  height: auto;
  display: inline-block;
}

/* === 5. Info and Logo === */
.info-wrapper {
  position: fixed;
  top: 95px; /* adjust as needed */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10; /* above border and logo */
}

.info-img {
  width: 60%;
  max-width: 700px;
  height: auto;
  display: inline-block;
}

.logo-wrapper {
  position: fixed;
  top: 0; /* align with border top */
  right: 92px; /* align logo near right edge */
  z-index: 5; /* above border, below info */
  pointer-events: none;
}

.masjid-logo {
  max-height: 130px; /* fits nicely over border */
  height: auto;
  width: auto;
  display: block;
}