:root{

    --maroon:#74152d;
    --deep:#420d1d;
    --gold:#c99a3d;
    --gold-light:#e8ca7b;

    --cream:#fff8e9;
    --ivory:#fffdf7;

    --text:#542638;
    --green:#315b43;

}


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


html{
    scroll-behavior:smooth;
}


body{

    font-family:
    'Cormorant Garamond',
    Georgia,
    serif;

    color:var(--deep);

    background:var(--cream);

    line-height:1.6;

}


a{
    color:inherit;
}


/* =========================
   MUSIC BUTTON
========================= */

.music-btn{

    position:fixed;

    right:25px;
    bottom:25px;

    width:50px;
    height:50px;

    border-radius:50%;

    border:1px solid var(--gold);

    background:var(--maroon);

    color:white;

    font-size:22px;

    cursor:pointer;

    z-index:1000;

    box-shadow:
    0 5px 20px rgba(0,0,0,.2);

    transition:.3s;

}


.music-btn:hover{

    transform:scale(1.08);

}


/* =========================
   HERO
========================= */

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    position:relative;

    overflow:hidden;

    background:

    radial-gradient(
        circle at 50% 20%,
        rgba(201,154,61,.18),
        transparent 30%
    ),

    linear-gradient(
        135deg,
        #fffaf0,
        #f5e6c8
    );

}


.hero:before{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    border:1px solid rgba(201,154,61,.3);

    border-radius:50%;

}


.hero:after{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    border:1px solid rgba(201,154,61,.15);

    border-radius:50%;

}


.hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

    padding:30px;

}


.om-symbol{

    font-family:serif;

    font-size:62px;

    color:var(--gold);

    margin-bottom:5px;

}


.sanskrit{

    font-family:
    'Noto Serif Kannada',
    serif;

    color:var(--maroon);

    font-size:18px;

    letter-spacing:2px;

    margin-bottom:22px;

}


.eyebrow{

    text-transform:uppercase;

    letter-spacing:4px;

    font-family:Poppins,Arial,sans-serif;

    font-size:11px;

    color:var(--maroon);

    font-weight:500;

}


.temple-line{

    color:var(--gold);

    letter-spacing:5px;

    margin:18px 0;

}


h1,
h2,
h3{

    font-weight:600;

}


.hero h1{

    font-size:
    clamp(65px,11vw,120px);

    line-height:.85;

    color:var(--maroon);

    margin:20px 0;

}


.hero h1 span{

    color:var(--gold);

    font-style:italic;

    font-weight:400;

}


.subtitle{

    font-size:20px;

    color:#795263;

}


.date{

    font-family:
    'Poppins',
    Arial,
    sans-serif;

    font-size:21px;

    font-weight:500;

    letter-spacing:2px;

    margin-top:25px;

}


.location{

    font-family:Poppins,Arial,sans-serif;

    font-size:13px;

    letter-spacing:2px;

    margin-top:5px;

    color:#806171;

}


.gold-line{

    width:80px;

    height:1px;

    background:var(--gold);

    margin:22px auto;

}


.invitation-text{

    max-width:550px;

    margin:auto;

    font-size:20px;

    color:#684253;

}


/* =========================
   PREMIUM BUTTON
========================= */

.premium-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:28px;

    padding:12px 24px;

    background:var(--maroon);

    color:white;

    text-decoration:none;

    border-radius:25px;

    font-family:Poppins,Arial,sans-serif;

    font-size:13px;

    letter-spacing:.5px;

    border:1px solid var(--maroon);

    transition:.3s;

}


.premium-btn:hover{

    background:var(--deep);

    transform:translateY(-3px);

    box-shadow:
    0 8px 25px rgba(66,13,29,.2);

}


.premium-btn span{

    font-size:18px;

}


/* =========================
   PETALS
========================= */

.petal{

    position:absolute;

    color:rgba(116,21,45,.22);

    font-size:25px;

    animation:floatPetal 7s infinite ease-in-out;

}


.petal1{
    left:12%;
    top:20%;
}


.petal2{
    right:15%;
    top:30%;
    animation-delay:2s;
}


.petal3{
    left:20%;
    bottom:20%;
    animation-delay:4s;
}


.petal4{
    right:22%;
    bottom:15%;
    animation-delay:1s;
}


@keyframes floatPetal{

    0%,100%{
        transform:translateY(0) rotate(0);
    }

    50%{
        transform:translateY(-30px) rotate(20deg);
    }

}


/* =========================
   SCROLL
========================= */

.scroll-indicator{

    position:absolute;

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

    font-family:Poppins,Arial,sans-serif;

    font-size:10px;

    letter-spacing:2px;

    color:#775366;

}


.scroll-indicator div{

    text-align:center;

    margin-top:5px;

    animation:bounce 1.5s infinite;

}


@keyframes bounce{

    50%{
        transform:translateY(6px);
    }

}


/* =========================
   NAVBAR
========================= */

.navbar{

    position:sticky;

    top:0;

    z-index:900;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 7%;

    background:rgba(255,253,247,.95);

    backdrop-filter:blur(10px);

    border-bottom:1px solid rgba(201,154,61,.3);

}


.nav-logo{

    font-size:28px;

    color:var(--maroon);

    text-decoration:none;

    font-weight:600;

}


.nav-links{

    display:flex;

    gap:28px;

}


.nav-links a{

    text-decoration:none;

    font-family:Poppins,Arial,sans-serif;

    font-size:11px;

    letter-spacing:1px;

    color:#603245;

    position:relative;

}


.nav-links a:after{

    content:"";

    position:absolute;

    bottom:-5px;

    left:0;

    width:0;

    height:1px;

    background:var(--gold);

    transition:.3s;

}


.nav-links a:hover:after,
.nav-links a.active:after{

    width:100%;

}


/* =========================
   PAGE HERO
========================= */

.page-hero{

    min-height:72vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:80px 20px;

    background:

    radial-gradient(
        circle at center,
        rgba(201,154,61,.16),
        transparent 40%
    ),

    linear-gradient(
        135deg,
        #fffaf0,
        #f3e4c6
    );

}


.page-content{

    max-width:700px;

}


.event-symbol{

    font-size:48px;

    margin-bottom:15px;

}


.page-content h1{

    font-size:
    clamp(55px,9vw,90px);

    color:var(--maroon);

    line-height:.9;

    margin:18px 0;

}


.ornament{

    color:var(--gold);

    letter-spacing:8px;

    margin:15px 0;

}


.event-date,
.event-time,
.big-date,
.big-time,
.venue-date{

    font-family:Poppins,Arial,sans-serif;

}


.event-date{

    font-size:18px;

    letter-spacing:2px;

    font-weight:500;

}


.event-time{

    font-size:15px;

    color:var(--green);

    margin-top:4px;

    letter-spacing:1px;

}


.page-content p{

    max-width:580px;

    margin:20px auto 0;

    font-size:20px;

    color:#694657;

}


/* =========================
   SECTIONS
========================= */

.luxury-section{

    padding:90px 20px;

    text-align:center;

    background:var(--ivory);

}


.section-heading{

    max-width:750px;

    margin:auto;

}


.section-heading h1,
.section-heading h2{

    font-size:
    clamp(42px,7vw,65px);

    color:var(--maroon);

    line-height:1;

    margin:12px 0;

}


.section-heading p{

    max-width:600px;

    margin:15px auto;

    font-size:19px;

    color:#694657;

}


/* =========================
   EVENT CARD
========================= */

.event-card-large{

    max-width:650px;

    margin:45px auto 0;

    padding:55px 40px;

    border:1px solid rgba(201,154,61,.5);

    background:#fffaf0;

    box-shadow:
    0 15px 50px rgba(74,30,40,.07);

}


.card-icon{

    font-size:42px;

}


.event-card-large h3{

    font-size:40px;

    color:var(--maroon);

    margin:10px 0;

}


.big-date{

    font-size:18px;

    letter-spacing:2px;

}


.big-time{

    color:var(--green);

    font-size:15px;

}


.card-divider{

    width:70px;

    height:1px;

    background:var(--gold);

    margin:25px auto;

}


.event-card-large p:last-child{

    max-width:500px;

    margin:auto;

    font-size:18px;

    color:#684253;

}


/* =========================
   MUHURTAM
========================= */

.muhurtham-card{

    max-width:750px;

    margin:45px auto 0;

    padding:60px 40px;

    background:

    linear-gradient(
        145deg,
        #fffaf0,
        #f7e9cb
    );

    border:1px solid rgba(201,154,61,.5);

}


.lamp{

    font-size:48px;

}


.sanskrit-big{

    font-size:24px;

    color:var(--maroon);

    margin:20px 0;

}


.muhurtham-card > p:not(.sanskrit-big){

    max-width:560px;

    margin:auto;

    font-size:19px;

}


.muhurtham-details{

    display:grid;

    grid-template-columns:1fr 1fr;

    margin-top:35px;

    gap:20px;

}


.muhurtham-details div{

    padding:20px;

    border-top:1px solid var(--gold);

}


.muhurtham-details span{

    display:block;

    font-family:Poppins,Arial,sans-serif;

    font-size:10px;

    letter-spacing:2px;

    color:#795263;

    margin-bottom:5px;

}


.muhurtham-details strong{

    font-family:Poppins,Arial,sans-serif;

    font-size:14px;

    font-weight:500;

}


/* =========================
   VENUE
========================= */

.venue-section{

    padding:90px 20px;

    text-align:center;

    background:#f4ead5;

}


.venue-card{

    max-width:650px;

    margin:40px auto 0;

    padding:50px 30px;

    background:#fffdf7;

    border:1px solid rgba(201,154,61,.5);

}


.venue-icon{

    font-size:42px;

}


.venue-card h3{

    font-size:38px;

    color:var(--maroon);

    margin:15px 0;

}


.venue-card p{

    font-size:18px;

    color:#684253;

}


.venue-date{

    margin-top:20px;

    font-size:14px;

    letter-spacing:1px;

    color:var(--green);

}


.map-btn{

    display:inline-block;

    margin-top:22px;

    padding:10px 22px;

    background:var(--maroon);

    color:white;

    text-decoration:none;

    border-radius:25px;

    font-family:Poppins,Arial,sans-serif;

    font-size:12px;

    transition:.3s;

}


.map-btn:hover{

    background:var(--deep);

    transform:translateY(-2px);

}


/* =========================
   FAMILY
========================= */

.family-section{

    padding:90px 20px;

    text-align:center;

    background:#f4ead5;

}


.family-grid{

    max-width:1000px;

    margin:50px auto 0;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

}


.family-card{

    padding:45px 25px;

    background:rgba(255,253,247,.85);

    border-top:2px solid var(--gold);

}


.family-icon{

    font-size:32px;

    color:var(--gold);

}


.family-card h2{

    color:var(--maroon);

    font-size:32px;

    margin:10px 0;

}


.family-card .gold-line{

    margin:18px auto;

}


.family-card p{

    font-size:20px;

}


.family-card span{

    display:block;

    margin-top:8px;

    font-style:italic;

    color:#795263;

}


/* =========================
   RSVP
========================= */

.rsvp-section{

    padding:100px 20px;

    text-align:center;

    background:var(--maroon);

    color:var(--cream);

}


.rsvp-section .eyebrow{

    color:var(--gold-light);

}


.rsvp-section h2{

    font-size:65px;

    color:var(--gold);

}


.rsvp-section p{

    max-width:550px;

    margin:15px auto;

    font-size:20px;

}


.rsvp-section .premium-btn{

    background:var(--cream);

    color:var(--maroon);

}


/* =========================
   NEXT
========================= */

.next-section{

    padding:80px 20px;

    text-align:center;

    background:var(--ivory);

}


.next-section p{

    font-size:20px;

    color:#684253;

}


/* =========================
   FOOTER
========================= */

footer{

    padding:55px 20px;

    text-align:center;

    background:var(--deep);

    color:var(--cream);

}


.footer-ornament{

    color:var(--gold);

    letter-spacing:8px;

}


footer h2{

    font-size:45px;

    color:var(--gold);

    margin:10px 0;

}


footer p{

    font-size:17px;

}


.final-footer{

    padding:90px 20px;

}


.om-footer{

    font-size:55px;

    color:var(--gold);

    margin:20px 0;

}


.final-footer h2{

    font-size:60px;

}


.final-footer h3{

    font-size:35px;

    color:var(--gold);

    margin-top:5px;

}


.footer-date{

    font-family:Poppins,Arial,sans-serif;

    font-size:12px;

    letter-spacing:1px;

    margin-top:15px;

}


.mangalyam{

    margin-top:30px;

    font-size:16px;

    opacity:.75;

}


/* =========================
   ANIMATION
========================= */

.reveal{

    opacity:0;

    transform:translateY(25px);

    animation:reveal .9s ease forwards;

}


@keyframes reveal{

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* =========================
   MOBILE
========================= */

@media(max-width:700px){

    .navbar{

        padding:12px 16px;

    }


    .nav-logo{

        font-size:23px;

    }


    .nav-links{

        gap:12px;

    }


    .nav-links a{

        font-size:8px;

    }


    .hero h1{

        font-size:62px;

    }


    .hero-content{

        padding:20px;

    }


    .invitation-text{

        font-size:17px;

    }


    .page-hero{

        min-height:65vh;

    }


    .family-grid{

        grid-template-columns:1fr 1fr;

        gap:10px;

    }


    .family-card{

        padding:30px 12px;

    }


    .family-card h2{

        font-size:24px;

    }


    .family-card p{

        font-size:16px;

    }


    .muhurtham-details{

        grid-template-columns:1fr;

    }


    .venue-card h3{

        font-size:30px;

    }


    .music-btn{

        right:15px;

        bottom:15px;

    }

}


@media(max-width:450px){

    .nav-links{

        gap:8px;

    }


    .nav-links a{

        font-size:7px;

        letter-spacing:0;

    }


    .hero h1{

        font-size:53px;

    }


    .date{

        font-size:17px;

    }


    .family-grid{

        gap:8px;

    }


    .family-card h2{

        font-size:20px;

    }

}