body{margin:0;background:#0b0b0b;color:#fff;font-family:system-ui}
body { background:#f8f9fa; }
    .tm-hero {
      height: 250px;
      background: linear-gradient(135deg,#0d6efd,#6610f2);
      color: #fff;
      text-align: center;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .gallery img {
      width:100%;
      border-radius:10px;
      transition:0.3s;
    }
    .gallery img:hover {
      transform: scale(1.05);
    }
    footer {
      background:#eee;
      padding:20px;
      text-align:center;
      margin-top:40px;
    }

.navbar{background:#000;padding:10px}
.navbar-brand{color:#00ffcc;font-weight:700}


.hero{height:55vh;background:url('img/hero.jpg') center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.hero .overlay{background:rgba(0,0,0,.65);padding:40px;border-radius:12px;text-align:center;width:90%;max-width:600px}
.hero input{margin-top:15px}


.gallery{padding:20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}


.card{background:#111;border-radius:10px;overflow:hidden;position:relative}
.card img{width:100%;height:220px;object-fit:cover;transition:.4s}
.card:hover img{transform:scale(1.12)}


.time{position:absolute;bottom:5px;left:5px;font-size:11px;background:rgba(0,0,0,.6);padding:3px 7px;border-radius:6px}


footer{text-align:center;padding:15px;color:#aaa}
.card:hover img { transform:scale(1.1); transition:.3s }

 @media (max-width: 1200px) {
      .gallery { column-count: 3; }
    }

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

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