@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&family=Montserrat:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

body {
    background-color: #6A0E29; /* Deep Red Background */
    font-family: 'Montserrat', sans-serif;
    color: #333333; /* Dark text for readability on cream */
}

.content-bg {
    background-color: #FFFCEF; /* Ivory Cream */
}

.background-container {
    background-image: url('/static/wedding_background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.login-background-container {
    background-image: url('/static/wedding_background.jpg');
    background-size: cover;
    background-position: center;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.blurred {
    filter: blur(8px);
    -webkit-filter: blur(8px);
}

h1, h2, h3, h4, h5, h6, .font-serif {
    font-family: 'Cormorant Garamond', serif;
}

.swiper-button-next, .swiper-button-prev {
    color: #6A0E29 !important;
}

.font-vietnamese {
    font-family: 'Noto Sans', sans-serif;
}

/* Animation for login page */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
}

.animation-delay-300 {
    animation-delay: 300ms;
}

.animation-delay-600 {
    animation-delay: 600ms;
}