/* MyWadah.css - Style all font awesome icons */
:root{--bg:#0f172a;--card:#0b1220;--accent:#06b6d4;--muted:#94a3b8;--glass: rgba(255,255,255,0.04)}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans',Arial;color:#e6eef6;background:linear-gradient(180deg,#061025 0%, #071226 100%)}
.app{min-height:100vh;display:flex;flex-direction:column;padding-bottom:74px}
header{padding:18px 16px}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:46px;height:46px;border-radius:10px;background:var(--glass);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent)}
h1{font-size:20px;margin:0}
p.lead{margin:8px 0 0;color:var(--muted);font-size:14px}

main{flex:1;padding:12px 16px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:14px;border-radius:14px;box-shadow:0 6px 18px rgba(2,6,23,0.6);}
.hero{display:flex;flex-direction:column;gap:10px}
.hero h2{margin:0;font-size:18px}
.cta{display:flex;gap:8px;margin-top:8px}
.btn{flex:1;padding:10px 12px;border-radius:10px;border:0;background:var(--accent);color:#042029;font-weight:600}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

section{margin-top:14px}
.section-title{font-size:13px;color:var(--muted);margin-bottom:8px}
.list{display:grid;gap:8px}
.item{padding:12px;border-radius:10px;background:var(--card);display:flex;align-items:center;gap:12px}

/* Bottom navigation */
nav.bottom-nav{position:fixed;left:0;right:0;bottom:12px;margin:0 auto;max-width:480px;padding:8px 10px;background:rgba(10,12,18,0.6);backdrop-filter:blur(8px);border-radius:16px;display:flex;justify-content:space-between;gap:6px;z-index:60}
.nav-btn{flex:1;padding:8px 6px;border-radius:10px;text-align:center;color:var(--muted);font-size:12px;background:transparent;border:0}
.nav-btn.active{color:var(--accent);background:linear-gradient(180deg, rgba(6,182,212,0.08), rgba(6,182,212,0.03))}
.nav-btn svg{display:block;margin:0 auto 4px;height:20px;width:20px}

/* Login modal */
.modal{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:16px;pointer-events:none}
.modal .sheet{width:100%;max-width:480px;background:linear-gradient(180deg,#071226,#041027);border-radius:14px;padding:16px;pointer-events:auto;box-shadow:0 -10px 30px rgba(2,6,23,0.7)}
.hidden{display:none}

@media(min-width:540px){.app{padding-bottom:84px}nav.bottom-nav{bottom:18px}}

.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-pinterest {
  background: #cb2027;
  color: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background: #00aff0;
  color: white;
}

.fa-android {
  background: #a4c639;
  color: white;
}

.fa-dribbble {
  background: #ea4c89;
  color: white;
}

.fa-vimeo {
  background: #45bbff;
  color: white;
}

.fa-tumblr {
  background: #2c4762;
  color: white;
}

.fa-vine {
  background: #00b489;
  color: white;
}

.fa-foursquare {
  background: #45bbff;
  color: white;
}

.fa-stumbleupon {
  background: #eb4924;
  color: white;
}

.fa-flickr {
  background: #f40083;
  color: white;
}

.fa-yahoo {
  background: #430297;
  color: white;
}

.fa-soundcloud {
  background: #ff5500;
  color: white;
}

.fa-reddit {
  background: #ff5700;
  color: white;
}

.fa-rss {
  background: #ff6600;
  color: white;
}

/* Style for the caption */
.caption-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    padding: 10px 0; /* Adjust as needed */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Style for the caption text */
.caption-text {
    color: #ffffff;
    margin: 0;
}

/* Style for grid pictures */
.grid-container {
      display: grid;
      grid-template-columns: repeat(4, minmax(200px, 1fr));
      grid-gap: 5px;
      /*justify-content: center;*/
      justify-items: center;
      align-items: center;
}

.grid-container2 {
      display: grid;
      grid-template-columns: repeat(2, minmax(200px, 1fr));
      grid-gap: 5px;
      /*justify-content: center;*/
      justify-items: center;
      align-items: center;
}

.grid-item {
      border: 1px solid #ccc;
      padding: 5px;
      display: block;
      justify-content: center; /* Center content horizontally */
      align-items: center; /* Center content vertically */
      text-align: center;
}

.grid-item img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 0 auto; 
}

.highlight {
    background-color: #e9f08c; /* kuning lembut, boleh tukar ikut selera */
}

.slideshow-container {
    position: relative;
    max-width: 100%;
    margin: auto;
}

.slide {
    display: none;
    text-align: center;
}

.controls {
    display: flex;         /* Use Flexbox */
    justify-content: center; /* Center items horizontally */
    align-items: center;     /* Align items vertically */
    margin-top: 10px;
    gap: 10px; /* Space between buttons */
}

.controls button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #007BFF; /* Blue button */
    color: white;
    border-radius: 5px;
}

.controls button:hover {
    background-color: #0056b3; /* Darker blue */
}

.slide img {
  width: 100%;
  height: auto;
}

.fade {
  animation-name: fade;
  animation-duration: 2s;
}

.input {
    width: 100%;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

#data-container {
  text-align: center;
}

h3 {
  background-color: #80ced6;
}

h2 {
  background-color: #FFFFFF;
}
body,h1,h2,h3,h4,h5,h6 {font-family: "Karma", sans-serif}.w3-bar-block .w3-bar-item {padding:5px}.mySlides {display:none;}

.scrolling-text-container {
  width: 2000px; /* Adjust width as needed */
  overflow: hidden;
}

.scrolling-text {
  white-space: nowrap;
  animation: scroll-left 20s linear infinite; /* Adjust speed as needed */
}

.center {
margin-left: auto;
margin-right: auto;
}

.highlight {
    background-color: greenyellow;
}

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

  100% {
    transform: translateX(-100%);
  }

table {
    width: 100%;
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}
.button {
    background-color: #04AA6D;
    border: none;
    color: white;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}