:root {
    --gold: #c5a059;
    --dark-gold: #9e7e43;
    --white: #ffffff;
    --text: #333333;
    --bg-light: #fdfaf5;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text);
    background-color: var(--bg-light);
    margin: 0;
    overflow-x: hidden;
}

/* Hero Section */
.hero-section {
    background: url('images/hero-bg.jpg') center/cover no-repeat;
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    color: var(--white);
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
}

.couple-names {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(3rem, 10vw, 6rem);
    margin: 20px 0;
    color: var(--gold);
}

.wedding-date { font-family: 'Cinzel', serif; font-size: 1.5rem; letter-spacing: 3px; }

/* Countdown Boxes */
.time-box {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid var(--gold);
    padding: 15px;
    border-radius: 8px;
    min-width: 70px;
    backdrop-filter: blur(5px);
}
.time-box span { display: block; font-size: 1.8rem; font-weight: 700; }
.time-box small { font-size: 0.7rem; text-transform: uppercase; }

/* Invitation Card */
.invite-card {
    background: var(--white);
    max-width: 700px;
    margin: -50px auto 0;
    position: relative;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    z-index: 10;
}
.invite-header { font-size: 1.4rem; }
.invite-header span { font-weight: 600; color: var(--gold); }
.mini-names { font-family: 'Great Vibes', cursive; color: var(--gold); }

/* Infinite Auto-Scroll Gallery */
.gallery-wrapper { overflow: hidden; background: #fff; }
.gallery-track {
    display: flex;
    width: calc(250px * 20); /* Adjust based on img count */
    animation: scroll 35s linear infinite;
}
.gallery-item { width: 250px; padding: 10px; flex-shrink: 0; }
.gallery-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    transition: 0.3s;
}
.gallery-item img:hover { transform: scale(1.05); }

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 10)); }
}

/* Events */
.section-title { font-family: 'Cinzel', serif; margin-bottom: 30px; position: relative; padding-bottom: 10px; }
.section-title::after {
    content: ''; width: 60px; height: 2px; background: var(--gold);
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
}

.event-card {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #eee;
    transition: 0.3s;
}
.event-card h3 { font-family: 'Cinzel', serif; font-size: 1.2rem; color: var(--gold); }
.event-card:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.event-card.highlight { border: 1px solid var(--gold); background: #fffaf0; }

/* Family Carousel */
.family-item img {
    width: 140px !important;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 15px;
    border: 3px solid var(--gold);
}
.family-item h5 { font-size: 1rem; margin-bottom: 2px; }
.family-item span { color: var(--dark-gold); font-size: 0.8rem; font-weight: 600; }

/* Buttons & Links */
.btn-gold {
    background: var(--gold);
    color: white;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: 0.3s;
}
.btn-gold:hover { background: var(--dark-gold); color: white; }