:root {
            --gold: #D4AF37;
            --dark-green: #2F4F4F;
            --soft-white: #FFFDF0;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--soft-white);
            color: var(--dark-green);
            overflow-x: hidden;
            text-align: center;
        }

        /* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), 
                        url('https://images.unsplash.com/photo-1542042161784-26ab9e041e89?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            padding: 20px;
        }

        /* Wedding Card Section */
.card-display {
    padding: 1px 20px;
    background-color: var(--soft-white);
}

.image-container {
    max-width: 600px; /* Limits size on desktop to prevent it being too huge */
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: 10px;
    overflow: hidden;
    line-height: 0; /* Removes bottom gap under image */
}

.invitation-image {
    width: 100%;
    height: auto;
    display: block;
    /* Keeps high resolution images crisp */
    image-rendering: -webkit-optimize-contrast; 
}

@media (max-width: 600px) {
    .image-container {
        max-width: 100%; /* Allows it to take full width on phones */
    }
}

        h1 { font-family: 'Dancing Script', cursive; font-size: 5rem; margin-bottom: 10px; }
        h2 { font-family: 'Playfair Display', serif; font-size: 1.5rem; letter-spacing: 5px; text-transform: uppercase; }
        h3 { font-family: 'Dancing Script', cursive; font-size: 2rem; margin-bottom: 10px;}
        /* Countdown */
        #countdown {
            display: flex;
            gap: 20px;
            margin-top: 30px;
        }
        .time-box { background: rgba(255,255,255,0.2); padding: 15px; border-radius: 8px; min-width: 80px; backdrop-filter: blur(5px); }
        .time-box span { display: block; font-size: 2rem; font-weight: bold; }

        /* Details Section */
        .details { padding: 80px 20px; max-width: 800px; margin: auto; }
        .details h3 { font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--gold); margin-bottom: 20px; }
        
        /* RSVP Form */
        .rsvp-section { background: #f4f1ea; padding: 60px 20px; border-radius: 50px 50px 0 0; }
        form { max-width: 500px; margin: auto; display: flex; flex-direction: column; gap: 15px; }
        input, select, button { padding: 12px; border: 1px solid #ccc; border-radius: 5px; font-size: 1rem; }
        button { background: var(--gold); color: white; border: none; cursor: pointer; transition: 0.3s; font-weight: bold; }
        button:hover { background: #b8962d; transform: translateY(-2px); }

        /* Animations */
        .reveal { opacity: 0; transform: translateY(30px); transition: 1s all ease; }
        .reveal.active { opacity: 1; transform: translateY(0); }
        /* Add this to your CSS for the pulsing effect */
.pulse {
    animation: tick-pulse 1s infinite;
    border: 1px solid var(--gold);
}

@keyframes tick-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

        @media (max-width: 600px) {
            h1 { font-size: 3rem; }
            #countdown { gap: 10px; }
            .time-box { min-width: 60px; padding: 10px; }
        }