/* CSS placeholder */
body, html {
  margin: 0;
  padding: 0;
}

  body {font-family: 'Roboto', sans-serif;}
    h1,h2,h3,h4,h5 {font-family: 'Montserrat', sans-serif;}
    
    /* Theme colors */
    :root {
        --primary-color: #1E3A8A; /* Blue */
        --accent-color: #D32F2F; /* Red */
    }

    /* Navbar */

nav {
  background-color: #ffffff !important; /* white background */
}

nav .nav-link, nav .navbar-brand {
  color: #000 !important; /* black text for contrast */
}

nav .nav-link:hover {
  color: #007bff !important; /* optional hover color */
}

    .navbar {background-color: var(--primary-color);}
    .navbar-brand img {height:50px; margin-right:10px;}

    /* Hero */
    .hero {
        background: linear-gradient(rgba(30,58,138,0.7), rgba(30,58,138,0.7)), url('church-hero.jpg') no-repeat center center;
        background-size: cover;
        color: #fff;
        padding: 120px 0;
        text-align: center;
    }

    /* Buttons */
    .btn-custom {background-color: var(--primary-color); color:#fff;}
    .btn-custom:hover {background-color:#0F2A70;}

    /* Sections */
    section {padding:80px 0;}
    .bg-light {background:#f9f9f9;}

    /* Cards */
    .card:hover {transform: translateY(-10px); transition:0.3s;}

    /* Icons */
    .icon {color: var(--primary-color); margin-right:8px;}

    /* Footer */
    footer {background:var(--primary-color); color:#fff; padding:20px 0;}

    /* Live Banner */
    #live-banner {
        background: var(--accent-color);
        color:#fff;
        z-index:1050;
        min-width:250px;
        display:flex;
        flex-direction:column;
        align-items:center;
        padding:15px;
        border-radius:8px;
        box-shadow:0 4px 8px rgba(0,0,0,0.3);
    }

.hero-img {
  height: 85vh;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 90, 0.6);
  z-index: 1;
}

.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}

@media (max-width: 768px) {
  .hero-img {
    height: 60vh;
  }
}
#home, .hero {
  margin: 0;
  padding: 0;
}