@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@700&display=swap');

:root {
    --amber: #d97706;
}

.tail-container {
    font-family: 'Inter', system_ui, sans-serif;
}

.heading-font {
    font-family: 'Playfair Display', sans-serif;
}

.hero-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url('https://source.unsplash.com/random/1920x1080/?church,worship');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.nav-link {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover {
    transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.section {
    opacity: 0;
    transform: translateY(40px);
    transition: all 800ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.section.visible {
    opacity: 1;
    transform: translateY(0);
}

.modal {
    animation: modalPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalPop {
    0% { opacity: 0; transform: scale(0.7); }
    100% { opacity: 1; transform: scale(1); }
}

/* Hide scrollbar but keep functionality */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.card {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp .6s forwards;
}

.card:nth-child(2){animation-delay:.1s;}
.card:nth-child(3){animation-delay:.2s;}
.card:nth-child(4){animation-delay:.3s;}

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