/* Custom Modern Navigation Bar Styles */

#nav {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1000px;
    height: 3.5rem;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.25rem;
    z-index: 10000;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

/* Reduce Footer and Bottom Space */
footer.wrapper.style1>.inner {
    padding: 2rem 1rem 0.5rem 1rem;
}


.nav-home-link {
    text-decoration: none !important;
    border-bottom: none !important;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.nav-home-link:hover {
    transform: scale(1.1);
}

.nav-home-link .fa-church {
    color: #111;
    font-size: 1.25rem;
    /* Explicit size if needed */
}

.nav-logo {
    font-family: 'Gabriela', serif;
    font-weight: 300;
    font-size: 1.25rem;
    color: #111;
    letter-spacing: 0.02em;
}

.nav-links {
    display: flex;
    gap: 1.25rem;
    margin: 0;
}

.nav-links li {
    list-style: none;
}

.nav-links a {
    text-decoration: none;
    color: #000;
    font-size: 0.90rem;
    font-weight: 300;
    text-transform: capitalize;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.nav-links a:hover {
    color: #d2571e;
}

.nav-links a i:not(.nav-external-icon) {
    margin-right: 0.6rem;
    font-size: 0.95em;
    opacity: 0.7;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.nav-links a:hover i:not(.nav-external-icon) {
    opacity: 1;
    transform: translateY(-1px);
}

.nav-external-icon {
    font-size: 0.65rem;
    opacity: 0.5;
    margin-left: 0.35rem;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.nav-links a:hover .nav-external-icon {
    opacity: 1;
    transform: translate(1px, -1px);
}

.nav-toggle {
    display: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #333;
}

/* Mobile Logo Hidden by default on Desktop */
.nav-mobile-logo {
    display: none;
}

/* Responsive Styles */
@media screen and (max-width: 980px) {
    #nav {
        width: 95%;
        padding: 0 1.5rem;
    }

    .nav-links {
        position: absolute;
        top: 4rem;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow-y: auto;
        transition: max-height 0.3s ease;
        border-radius: 1.5rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    }

    .nav-links.active {
        max-height: 500px;
    }

    .nav-links li {
        width: 100%;
        text-align: center;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    .nav-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 1rem;
        font-size: 1rem;
    }

    .nav-toggle {
        display: block;
    }

    /* Mobile Logo Centering */
    .nav-mobile-logo {
        display: flex;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        align-items: center;
        z-index: 10001;
        pointer-events: none;
    }

    .nav-mobile-logo img {
        height: 2.8rem;
        width: auto;
        /* Slight color adjustment if needed to match theme */
        filter: brightness(0.9) contrast(1.1);
        opacity: 0.95;
    }
}



/* Adjust wrapper to account for fixed nav */
#wrapper {
    padding-top: 0;
    /* Since the first section is full screen banner, we don't necessarily need padding-top here if we want the banner behind the nav */
}

/* Social Links Section */
.social-links-container {
    margin: 2rem 0 4rem 0;
}

.social-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0;
    list-style: none;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1.5rem;
    border-radius: 3rem;
    text-decoration: none !important;
    font-family: 'Ubuntu', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    color: #333 !important;
}

.social-btn i {
    font-size: 1.1rem;
}

.social-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.social-btn.facebook:hover {
    color: #1877F2 !important;
    border-color: #1877F2;
}

.social-btn.instagram:hover {
    color: #E4405F !important;
    border-color: #E4405F;
}

.social-btn.youtube:hover {
    color: #FF0000 !important;
    border-color: #FF0000;
}

.social-btn.whatsapp:hover {
    color: #25D366 !important;
    border-color: #25D366;
}

/* Optional: if you want the first section to start below the nav */
/* body.is-preload #wrapper { margin-top: 0; } */

/* Quote Hero Section Redesign */
.quote-hero {
    position: relative;
    background-image: url('../../images/spiritual_quote_bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 1.5rem 1rem !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Glassy Overlay for the Quote Hero */
.quote-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    z-index: 1;
}

.quote-hero .inner {
    position: relative;
    z-index: 2;
    max-width: 900px !important;
    width: 100%;
}

.quote-content-wrapper {
    background: rgba(255, 255, 255, 0.7);
    padding: 1.25rem 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    position: relative;
}

.quote-icon {
    font-size: 1.25rem;
    color: rgba(210, 87, 30, 0.3);
    margin-bottom: 0.5rem;
    display: block;
}

/* Overriding DailyVerses.net styles for modern look */
.dailyVersesWrapper {
    margin: 0 !important;
}

.dailyVersesWrapper .dailyVerses[bibletext] {
    font-family: 'Gabriela', serif;
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    color: #1a1a1a !important;
    font-style: italic;
    margin-bottom: 0.25rem !important;
    font-weight: 300 !important;
}

.dailyVersesWrapper .dailyVerses[bibleverse] {
    margin-top: 1.5rem !important;
}

.dailyVersesWrapper .dailyVerses[bibleverse] a {
    font-family: 'Ubuntu', sans-serif;
    font-size: 0.9rem !important;
    color: #d2571e !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    text-decoration: none !important;
    border-bottom: 0 !important;
}

.dailyVersesWrapper .dailyVerses[bibleverse] a:hover {
    color: #b54718 !important;
}

/* Adjustments for Mobile Responsiveness */
@media screen and (max-width: 736px) {
    .quote-hero {
        padding: 5rem 1rem !important;
        background-attachment: scroll;
        background-position: center center;
    }

    .quote-content-wrapper {
        padding: 2rem 1.5rem;
    }


}

/* Modern Action Buttons in Spotlight sections */
.modern-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 2rem;
}

.modern-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4rem;
    text-decoration: none !important;
    color: #333 !important;
    font-family: 'Ubuntu', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.modern-action-btn i {
    font-size: 1.1rem;
    color: #d2571e;
}

.modern-action-btn.primary {
    background: #111;
    color: #fff !important;
    border-color: #111;
}

.modern-action-btn.primary i {
    color: #fff;
}

.external-icon {
    font-size: 0.75rem !important;
    opacity: 0.4;
    transition: all 0.3s ease;
    margin-left: -2px;
    /* Pull it slightly closer to the text */
}

.modern-action-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.8);
    border-color: #d2571e;
}

.modern-action-btn:hover .external-icon {
    opacity: 1;
    transform: translate(2px, -2px);
    color: #d2571e;
}

.modern-action-btn.primary:hover {
    background: #d2571e;
    border-color: #d2571e;
}

/* Ensure buttons stack nicely on mobile */
@media screen and (max-width: 480px) {
    .modern-actions {
        flex-direction: column;
    }

    .modern-action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Golden Glow Hero Section */
.hero-glow-container {
    position: relative;
    padding: 4rem 2rem !important;
    text-align: center;
    z-index: 2;
}

.hero-cross-glow {
    margin-bottom: 2.5rem;
    display: inline-block;
    position: relative;
}

.hero-cross-glow .fa-cross {
    font-size: 6.5rem !important;
    color: #FFFFFF !important;
    display: inline-block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
    animation: whiteCrossPulse 4s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

/* Radiant aura behind the cross */
.hero-cross-glow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: 1;
    animation: auraGlow 4s ease-in-out infinite alternate;
}

@keyframes whiteCrossPulse {
    from {
        transform: scale(1);
        filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
    }

    to {
        transform: scale(1.05);
        filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.8));
    }
}

@keyframes auraGlow {
    from {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(0.8);
    }

    to {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.4);
    }
}

.hero-glow-title {
    font-family: 'Gabriela', serif !important;
    font-size: 2.4rem !important;
    white-space: nowrap !important;
    font-weight: 300 !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.4 !important;
    padding-bottom: 0.2em !important;
    letter-spacing: -0.02em !important;

    /* White Gradient Text */
    background: linear-gradient(135deg, #FFFFFF 0%, #F0F0F0 50%, #E0E0E0 100%);
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #FFFFFF !important;
    /* Fallback */

    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    animation: shimmer 5s linear infinite;
    background-size: 200% auto;
}

@keyframes shimmer {
    to {
        background-position: 200% center;
    }
}

.hero-glow-subtitle {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 1.15rem !important;
    /* Slightly smaller for elegance */
    font-weight: 300 !important;
    color: #FFFFFF !important;
    text-transform: none !important;
    letter-spacing: 0.1em !important;
    margin-top: -0.75rem !important;
    /* Pull closer to title */
    margin-bottom: 2rem !important;
    opacity: 0.9;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.hero-glow-divider {
    width: 100px;
    height: 1px;
    background: linear-gradient(to right, transparent, #FFFFFF, transparent);
    margin: 0 auto 2.5rem auto;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.hero-glow-tagline {
    font-family: 'Gabriela', serif !important;
    font-size: 1.1rem !important;
    font-style: italic !important;
    color: rgba(255, 255, 255, 0.8) !important;
    letter-spacing: 0.05em !important;
}

/* Mobile Adjustments */
@media screen and (max-width: 736px) {
    .hero-glow-title {
        font-size: 1.7rem !important;
        white-space: normal !important;
        /* Allow wrap on mobile if absolutely necessary, but try to keep it small */
    }

    .hero-glow-subtitle {
        font-size: 0.95rem !important;
        letter-spacing: 0.1em !important;
    }

    .hero-cross-glow .fa-cross {
        font-size: 5rem !important;
        color: #FFFFFF !important;
    }
}

/* Enhanced Spiritual Feel */
.hero-glow-container {
    overflow: hidden;
    /* Contain rays and particles */
}

/* Divine Rays Effect */
.divine-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg at 50% 50%,
            transparent 0deg,
            rgba(255, 255, 255, 0.05) 10deg,
            transparent 20deg,
            rgba(255, 255, 255, 0.03) 40deg,
            transparent 50deg,
            rgba(255, 255, 255, 0.05) 90deg,
            transparent 110deg,
            rgba(255, 255, 255, 0.03) 150deg,
            transparent 180deg,
            rgba(255, 255, 255, 0.05) 210deg,
            transparent 230deg,
            rgba(255, 255, 255, 0.03) 270deg,
            transparent 290deg,
            rgba(255, 255, 255, 0.05) 320deg,
            transparent 360deg);
    z-index: 1;
    animation: rotateRays 60s linear infinite;
    pointer-events: none;
}

@keyframes rotateRays {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Spiritual Particles */
.spiritual-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.1) 1.5px, transparent 1.5px),
        radial-gradient(circle at 90% 60%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        radial-gradient(circle at 80% 40%, rgba(255, 255, 255, 0.1) 1.5px, transparent 1.5px);
    background-size: 100% 100%;
    animation: particlesFloat 20s linear infinite alternate;
}

@keyframes particlesFloat {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-20px);
    }
}

/* Ornate Divider */
.hero-glow-divider.ornate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 300px;
    margin: 0 auto 2.5rem auto;
    background: none;
    /* override previous simple line if needed */
    box-shadow: none;
}

.ornament-left,
.ornament-right {
    height: 1px;
    flex-grow: 1;
    background: linear-gradient(to var(--dir, right), transparent, #FFFFFF);
}

.ornament-left {
    --dir: right;
}

.ornament-right {
    --dir: left;
}

.hero-glow-divider.ornate i {
    color: #FFFFFF;
    font-size: 1.2rem;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
    filter: drop_shadow(0 0 5px rgba(255, 255, 255, 0.5));
    opacity: 0.8;
}

/* Specific styling for the large centerpiece cross */
.hero-glow-divider.ornate i.fa-cross {
    font-size: 3.5rem !important;
    opacity: 1 !important;
    color: #FFFFFF !important;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.6)) !important;
    animation: whiteCrossPulse 4s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate !important;
    margin: 1rem 0;
    /* Adjusted vertical room */
}

/* New position for the Dove Icon */
.hero-spiritual-conclusion {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    animation: fadeInReveal 3.5s ease-out forwards;
}

.hero-spiritual-conclusion i {
    color: #FFFFFF;
    font-size: 1.6rem;
    opacity: 0.6;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
    transition: opacity 0.5s ease;
}

.hero-spiritual-conclusion i:hover {
    opacity: 0.9;
}

/* Spiritual Tagline */
.hero-spiritual-tagline {
    font-family: 'Gabriela', serif !important;
    font-size: 1.2rem !important;
    font-style: italic !important;
    color: rgba(255, 255, 255, 0.9) !important;
    letter-spacing: 0.08em !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    margin-top: 1rem;
    animation: fadeInReveal 2s ease-out forwards;
}

@keyframes fadeInReveal {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 736px) {
    .hero-glow-divider.ornate {
        max-width: 200px;
        gap: 1rem;
    }

    .hero-glow-divider.ornate i.fa-cross {
        font-size: 2.5rem !important;
    }
}