/* ====== Mobile Header (hamburger) ====== */
.header-mobile{display:none;}
@media (max-width:768px){
  .header-section.header-desktop{display:none;}
  .header-mobile{display:block;}

  .jamb-header {
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
    padding:10px 15px;
  }
  .jamb-header-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .jamb-logo img {
    width:60px;
    height:auto;
    display:block;
  }
  .jamb-hamburger {
    font-size:24px;
    cursor:pointer;
  }
  .jamb-menu {
    display:none;
    width:100%;
    margin-top:10px;
  }
  .jamb-menu-list {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
  }
  .jamb-menu-list li a {
    text-decoration:none;
    color:#081126;
    font-weight:600;
    padding:8px 10px;
    display:block;
    width:100%;
    text-align:center;
  }
  .jamb-menu-list li a:hover,
  .jamb-menu-list li.active a {
    background:#ff4b2b;
    color:#fff;
  }
  .jamb-live-dot {
    width:24px;
    height:24px;
    margin-left:4px;
  }
  .jamb-btn {
    display:block;
    width:100%;
    background:#ff4b2b;
    color:#fff;
    padding:10px;
    border-radius:6px;
    text-decoration:none;
    font-weight:600;
    text-align:center;
    margin-top:10px;
  }
}

/* ====== Gallery Cards ====== */
body {
  font-family: Arial, sans-serif;
  margin:0;
  background:#f8fafc;
}
.gallery-container {
  max-width:1200px;
  margin:40px auto;
  padding:0 20px;
}
.gallery-container h1 {
  text-align:center;
  margin-bottom:30px;
  color:#081126;
}
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}
.gallery-card {
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  transition:transform .2s, box-shadow .2s;
}
.gallery-card:hover {
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
}
.gallery-card img {
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
}
.gallery-content {
  padding:15px;
  text-align:center;
}
.gallery-title {
  font-size:16px;
  font-weight:600;
  color:#081126;
  margin-bottom:10px;
}
.gallery-btn {
  display:inline-block;
  padding:8px 14px;
  background:#ff4b2b;
  color:#fff;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  transition:background .2s;
}
.gallery-card:hover .gallery-btn {
  background:#e6391a;
}
@media(max-width:480px){
  .gallery-card img{height:120px;}
  .gallery-title{font-size:15px;}
}



/* Container & grid */
.gallery-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
}
.gallery-container h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 30px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 25px;
}

/* Card style */
.gallery-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  /* animated gradient border */
  padding: 2px;
  background: linear-gradient(45deg, #ff4b2b, #ff416c, #2bffb2, #4b7bff);
  background-size: 400% 400%;
  animation: borderAnim 8s ease infinite;
  box-shadow: 0 6px 15px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}
.gallery-card:hover {
  transform: translateY(-6px);
}

/* inner box */
.gallery-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 13px 13px 0 0;
}

.gallery-content {
  background: #fff;
  padding: 15px;
  border-radius: 0 0 13px 13px;
}
.gallery-title {
  font-size: 1rem;
  font-weight: 600;
  color: #081126;
  margin-bottom: 6px;
}
.gallery-btn {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 500;
  color: #ff4b2b;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid #ff4b2b;
  transition: all 0.25s;
}
.gallery-card:hover .gallery-btn {
  background: #ff4b2b;
  color: #fff;
}

/* animated border keyframes */
@keyframes borderAnim {
  0% {background-position:0% 50%}
  50% {background-position:100% 50%}
  100% {background-position:0% 50%}
}

/* Responsive */
@media (max-width:600px){
  .gallery-card img{height:150px}
  .gallery-title{font-size:0.95rem}
}