body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: url("masjid2.jpg") no-repeat center center fixed;
  background-size: cover;
  color: white;
}

/* ================= HEADER ================= */



/* ================= JADWAL SHOLAT ================= */
.countdown{
  position:absolute;           /* overlay */
  bottom:120px;                /* SESUAIKAN jarak ke box imsak */
  left:10px;                  /* sejajar kanan */
  background:rgba(0,0,0,.55);
  padding:10px 14px;
  border-radius:12px;
  font-size:1.1rem;
  font-weight:600;
  color:#ff4d4d;
  text-align:right;
  max-width:500px;
}

.jadwal {
  margin-top: auto;          /* INI KUNCINYA */
  display: flex;
  flex-direction: row;       /* 1 row */
  gap: 15px;
}

.box {
  flex: 1;               /* semua box sama lebar */
  text-align: center;
}

.box span {
  display: block;
  font-size: 18px;
  margin-bottom: 5px;
}

.box strong {
  font-size: 28px;
}

/* WARNA TIAP SHOLAT */
.imsak    { background: #607d8b; }
.subuh    { background: #2196f3; }
.dzuhur   { background: #4caf50; }
.ashar    { background: #ff9800; }
.maghrib  { background: #f44336; }
.isya     { background: #673ab7; }

/* tambah text berjalan */
.marquee {
  width: 100%;
  overflow: hidden;
  background: rgba(0,0,0,0.7);
  padding: 10px 0;
  border-radius: 8px;
}

.marquee span {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: marquee 15s linear infinite;
  font-size: 20px;
}

@keyframes marquee {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

/* ================= TAMBAHAN ================= */

.countdown {
  margin-top: 15px;
  text-align: center;
  font-size: 22px;
}

.footer-text {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #222;
  color: white;
  text-align: center;
  padding: 10px;
}