body{
  margin:0;
  padding-top:70px;
  background:#0b0b0b;
  color:#ddd;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

    .container {
      max-width: 1000px;
      margin: auto;
      padding: 50px 20px;
    }

    h1 {
      color: #fff;
      font-size: 36px;
      text-align: center;
      margin-bottom: 50px;
    }

    h2 {
      color: #44a194;
      font-size: 24px;
      margin: 40px 0 20px;
    }

    img {
      width: 100%;
      max-width: 700px;
      display: block;
      margin: 20px auto;
      border: 2px solid #222;
    }

    iframe {
      display: block;
      margin: 30px auto;
      max-width: 100%;
      border: none;
    }

    p {
      font-size: 16px;
      line-height: 1.7;
      text-align: center;
    }

    footer {
      text-align: center;
      font-size: 14px;
      color: #666;
      padding: 40px 10px 20px;
      border-top: 1px solid #222;
      margin-top: 80px;
    }

    /* =====Drawer================================================ */
      *{
    box-sizing:border-box;
    }

    /* ===== HEADER ===== */
    .dn-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:70px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 40px;
    background:#000;
    color:#fff;
    z-index:1000;
    }

.dn-logo a{
  font-weight:bold;
  font-size:18px;
  color:#fff;
  letter-spacing:1px;
  transition:0.3s;
}

.dn-logo a:hover{
  color:#44a194;
}


    /* ===== HAMBURGER ===== */
    .dn-menu-btn{
    width:30px;
    height:22px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    cursor:pointer;
    }

    .dn-menu-btn span{
    height:3px;
    background:#fff;
    border-radius:2px;
    transition:0.3s;
    }

    /* ===== OVERLAY ===== */
    .dn-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:rgba(0,0,0,0.6);
    opacity:0;
    visibility:hidden;
    transition:0.4s;
    z-index:2000;
    }

    .dn-overlay.active{
    opacity:1;
    visibility:visible;
    }

    /* ===== DRAWER ===== */
    .dn-drawer{
    position:fixed;
    top:0;
    right:0;
    width:280px;
    height:100vh;
    background:#111;
    transform:translateX(100%);
    transition:0.5s cubic-bezier(0.16,1,0.3,1);
    z-index:3000;
    padding:70px 30px 30px;
    }

    .dn-drawer.active{
    transform:translateX(0);
    }

    /* ===== CLOSE BUTTON ===== */
    .dn-close{
    position:absolute;
    top:20px;
    right:20px;
    width:25px;
    height:25px;
    cursor:pointer;
    }

    .dn-close::before,
    .dn-close::after{
    content:"";
    position:absolute;
    width:100%;
    height:3px;
    background:#fff;
    top:50%;
    left:0;
    }

    .dn-close::before{
    transform:rotate(45deg);
    }

    .dn-close::after{
    transform:rotate(-45deg);
    }

    /* ===== MENU ===== */
    .dn-drawer ul{
    list-style:none;
    padding:0;
    margin:0;
    }

    .dn-drawer li{
    opacity:0;
    transform:translateX(25px);
    transition:all 0.5s cubic-bezier(0.16,1,0.3,1);
    margin-bottom:20px;
    }

    .dn-drawer.active li{
    opacity:1;
    transform:translateX(0);
    }

    /* STAGGER */
    .dn-drawer.active li:nth-child(1){transition-delay:0.1s;}
    .dn-drawer.active li:nth-child(2){transition-delay:0.2s;}
    .dn-drawer.active li:nth-child(3){transition-delay:0.3s;}
    .dn-drawer.active li:nth-child(4){transition-delay:0.4s;}
    .dn-drawer.active li:nth-child(5){transition-delay:0.5s;}
    .dn-drawer.active li:nth-child(6){transition-delay:0.6s;}
    .dn-drawer.active li:nth-child(7){transition-delay:0.7s;}

    .dn-drawer a{
    color:#fff;
    text-decoration:none;
    font-size:16px;
    }

    .dn-drawer a:hover{
    color:#44a194;
    }

    /* ===== CONTENT ===== */
    .dn-container{
    max-width:900px;
    margin:auto;
    padding:40px 20px;
    }
    /* =========================================================== */

    .media-container {
  max-width:1200px;
  margin:auto;
  padding:80px 20px;
}

.hero {
  position: relative;
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  background: url('/assets/images/tale-of-space.png') center/cover no-repeat;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.95));
}

.hero h1 {
  position: relative;
  font-size: 70px;
  letter-spacing: 3px;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 0 25px rgba(68,161,148,0.6);
  margin-bottom: 20px;
    animation: fadeUp 1.2s ease forwards;
  opacity: 0;
  transform: translateY(30px);
}

.hero p {
  position: relative;
  max-width: 700px;
  font-size: 20px;
  color: #bbb;
  line-height: 1.6;
    animation: fadeUp 1.4s ease forwards;
  opacity: 0;
  transform: translateY(30px);
}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.video-wrapper {
  position:relative;
  padding-bottom:56.25%;
  height:0;
  margin-top:40px;
}

.video-wrapper iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius:12px;
}
main{
  padding-top:120px;
  max-width:1300px;
  margin:auto;
  padding-left:40px;
  padding-right:40px;
}

.media-title{
  font-size:48px;
  margin-bottom:60px;
  letter-spacing:2px;
}
/* ===== MAIN SCREEN ===== */

.display-wrapper{
  background:#0c0c0c;
  border-radius:20px;
  padding:20px;
  box-shadow:0 40px 100px rgba(0,0,0,0.8);
  position:relative;
}

.main-screen{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:16px;
  position:relative;
}

.main-screen img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.5s ease;
}

/* subtle glow */
.display-wrapper::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:22px;
  background:linear-gradient(45deg,#44a194,transparent,#44a194);
  opacity:0.05;
  z-index:-1;
}

/* ===== THUMBNAILS ===== */

.thumb-strip{
  display:flex;
  gap:15px;
  margin-top:25px;
  overflow-x:auto;
  padding-bottom:10px;
}

.thumb-strip::-webkit-scrollbar{
  height:6px;
}

.thumb-strip::-webkit-scrollbar-thumb{
  background:#222;
  border-radius:10px;
}

.thumb{
  width:140px;
  aspect-ratio:16/9;
  border-radius:8px;
  object-fit:cover;
  cursor:pointer;
  opacity:0.5;
  transition:0.3s;
  border:2px solid transparent;
}

.thumb:hover{
  opacity:1;
}

.thumb.active{
  opacity:1;
  border-color:#44a194;
}

/* ===== FULLSCREEN VIEWER ===== */

.viewer{
  position:fixed;
  inset:0;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:0.4s;
  z-index:9999;
}

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

.viewer img{
  max-width:90%;
  max-height:90vh;
  border-radius:20px;
  transform: scale(0.95);
  transition: 0.3s ease;
}

.viewer.active img {
  transform: scale(1);
}

.video-placeholder{
  width:100%;
  height:500px;
  background:#111;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1px solid #1a1a1a;
}

.play-icon{
  font-size:60px;
  color:#44a194;
  margin-bottom:20px;
}

.video-placeholder p{
  color:#888;
  font-size:18px;
}

/* ================= MOBILE FIX ================= */

@media (max-width: 992px) {

  main {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero {
    height: 60vh;
    padding: 20px;
  }

  .hero h1 {
    font-size: 38px;
    letter-spacing: 1px;
  }

  .hero p {
    font-size: 16px;
  }

  .media-title {
    font-size: 30px;
    text-align: center;
    margin-bottom: 40px;
  }

  .video-placeholder {
    height: 280px;
  }

  .thumb {
    width: 100px;
  }

}


/* Extra Small Devices */
@media (max-width: 576px) {

  body {
    padding-top: 60px;
  }

  .dn-header {
    padding: 0 20px;
  }

  .hero {
    height: 50vh;
  }

  .hero h1 {
    font-size: 28px;
  }

  .hero p {
    font-size: 14px;
  }

  .media-title {
    font-size: 24px;
  }

  .video-placeholder {
    height: 220px;
  }

  .thumb {
    width: 85px;
  }

  .display-wrapper {
    padding: 12px;
  }

}