/* static/css/main.css - simple theme styling */
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #222;
  background:#fafafa;
}

.hero {
  background: linear-gradient(180deg,#ffffff 0%,#f5f7fb 100%);
  border-bottom:1px solid #e6e9ef;
  padding: 36px 0;
}
.hero-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.hero-left { max-width: 55%; }
.hero-left h1{
  font-size: 34px;
  margin-bottom:6px;
  color:#152238;
}
.lead{ color:#555; margin-bottom:12px;}

.donate-btn { background:#0b57a4; border-color:#0b57a4; color:#fff; }

.prayer-card {
  background:#fff;
  border-radius:6px;
  padding:14px;
  box-shadow: 0 2px 8px rgba(20,30,60,0.06);
  width:320px;
}
.prayer-card-title { margin:0 0 8px 0; font-size:16px; font-weight:700; }
.prayer-list { list-style:none; padding:0; margin:0; }
.prayer-list li { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed #efefef; }
.prayer-name{ font-weight:600; color:#333; }
.prayer-time{ color:#0b57a4; font-weight:700; }

.section-title { font-size:20px; margin-bottom:12px; color:#152238; }

.event-card, .sermon-card{
  background:#fff; padding:10px; border-radius:6px; margin-bottom:10px;
  display:flex; gap:12px; align-items:flex-start;
}
.event-thumb { width:84px; height:64px; object-fit:cover; border-radius:4px; }
.event-body h5 { margin:0; font-size:16px; }
.gallery-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }
.gallery-item img { width:100%; height:100px; object-fit:cover; border-radius:6px; }

.footer {
  background:  rgb(71, 67, 67); 
  color: #FFF;
  text-align: center;
  padding: 5px 20;
}
.l-box {
  padding: 0;
  opacity: 0.5; 
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.tableBorder b {
  color: #2BB673;
  font-size: 1.17em;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 400;
}

.flexslider {
    height: 500px;
    position: relative;
  }
  .hero-section {
    background-color: rgb(71, 67, 67); 
    background-image: url('/static/images/faizan-e-ghaus-e-azam-001.jpg'); 
    background-repeat: no-repeat; 
    background-size: cover;
  }
 .prayer-time-card {
    text-align: center;
    margin-top:150px;
 }
 .welcome-mosque{
  margin-top:170px;
  opacity: 0.5; 
 }
 h1 {
  text-transform: uppercase;
  font-weight: 800;
 }
 h2 {

 }

.prayerToday {
  background-color: #1c5c0c;
  color: white;
}
.rowOn, .rowOff {
  border-bottom: thin solid silver;
}
tr{
  display: table-row;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}
.navbar-menu {
  position: absolute;
  top: 0;
  background: none repeat scroll 0 0 rgba(190, 189, 189, 0.7);
  z-index: 10;
  }
  .navbar-menu a {
  text-decoration: none;
  color: #660d0d;
  font-weight: 400;
}

/* The container sets the viewport for the scrolling content */
        .marquee-container {
            width: 100%;
            overflow: hidden; /* Hides content outside the container width */
            background-color: #f1f1f1;
            padding: 10px 0;
            white-space: nowrap; /* Keeps all text on one line */
            box-sizing: border-box;
        }

        /* The actual content that moves */
        .marquee-content {
            display: inline-block;
            padding-left: 100%; /* Start the animation from outside the right edge */
            animation: marquee 15s linear infinite; /* Animation name, duration, timing, loop forever */
        }

        /* Define the animation keyframes */
        @keyframes marquee {
            0%   { transform: translate(0, 0); } /* Start position */
            100% { transform: translate(-100%, 0); } /* End position (move left by 100% of the content's width) */
        }

        /* Optional: Pause animation on hover */
        .marquee-container:hover .marquee-content {
            animation-play-state: paused;
        }


  /* --- Mobile Specific Styles START --- */
@media screen and (max-width: 600px) {
   .hero-section {
    background-color: rgb(71, 67, 67); 
  }
  .flexslider {
    height: 525px;
    position: relative;
  }
  .prayer-time-card {
    margin-top:210px;
  }
  
}
/* --- Mobile Specific Styles END --- */

/* responsive */
@media (max-width: 992px) {
  .hero-inner{flex-direction:column;}
  .hero-right { margin-top:16px; width:100%;}
  .hero-left{ max-width:100%;}
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .prayer-time-card {
    margin-top:180px;
  }
}
@media (max-width: 576px) {
  .gallery-grid{ grid-template-columns: 1fr; }
  .prayer-card{ 
    margin-top: 20px;
    width:100%;}
  .prayer-time-card {
    margin-top: 205px;
  }
  .footer {
    padding: 5px 20;
    font-size: 12px;
  }
}