html {
    height: 100%;
}

body {
    background-color: #f5f0e1;
    font-family: 'Cinzel', serif;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    color: #333;
    /* Parchment Texture Background */
    background-image: url('/images/parchment.jpg');
    background-size: cover;
    background-attachment: fixed; /* Keeps it static while scrolling */
}

.container {
    flex: 1 0 auto;
}

/* Candle Glow Header */
.candle-header {
    background-size: cover;
    background-position: center;
    padding: 150px 0; /* Space for the candle glow */
    text-align: center;
    color: #fff; /* White text over dark candle background */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Readable contrast */
}

h1 {
    color: #5a3e1b;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Prayer Card Styling */
.prayer-card {
    background-image: url('/images/parchmentold.jpg');
    background-size: cover;
    background-color: #fff8e1;
    border: 1px solid #eeece6;
    border-radius: 5px;
    transition: transform 0.2s;
}

.prayer-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.card-title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* text-shadow: #d4a017; */
    text-decoration: double;
    color: #ffffff;
    font-weight: 700;
    display: flex;
    align-items: center; /* Aligns cross and title */
}

/* Icon-Style Cross */
.prayer-icon {
    width: 20px; /* Small size next to title */
    height: 20px;
    margin-right: 8px; /* Space between cross and text */
}

.card-text {
    font-size: 1.1rem;
    color: #000000;
    font-weight: 800;
}

.navbar-dark {
    background-color: #2f2f2f;
}
.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}
.navbar-brand, .nav-link {
    color: #d4a017 !important;
}

/* Footer with Dome Silhouette */
.footer {
    flex-shrink: 0;
    background-color: #2f2f2f;
    background-size: cover;
    background-position: center;
    border-top: 1px solid #d4a017;
    position: relative;
}

.footer p {
    color: #d4a017;
    position: relative;
    z-index: 1; /* Ensures text is above background image */
}