:root{

    --primary:#6A1233;
    --primary-dark:#4C0C24;

    --cream:#F8F3EE;

    --gold:#E8D8C3;

    --text:#3E2B2B;

}
body{

    background:var(--cream);

    color:var(--text);

    font-family:Poppins;

}
.hero{

    min-height:780px;

    display:flex;

    align-items:center;

    justify-content:center;

}
.invitation-card{

    width:100%;

    max-width:640px;

    margin:auto;

    background-color:#fffdfb;
    background-image:url("../assets/images/background/paper-texture.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    border-radius:18px;

    padding:90px 60px 70px;

    box-shadow:0 12px 40px rgba(0,0,0,.08);

    position:relative;
    overflow:hidden;
    isolation:isolate;

}

.invitation-content{
    position:relative;
    z-index:5;
}

.invitation-header{

    margin-bottom:40px;

}
.monogram{

    width:150px;

    height:150px;

    margin:auto;

    border:1px solid rgba(91,42,54,.2);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:GreatVibes;

    font-size:100px;

    color:var(--primary);

}
.family-intro{

    margin-top:25px;

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:.85rem;

    color:var(--primary);

}


@font-face{
    font-family:GreatVibes;
    src:url("../assets/fonts/GreatVibes-Regular.ttf");
}

@font-face{
    font-family:Playfair;
    src:url("../assets/fonts/PlayfairDisplay-VariableFont_wght.ttf");
}

@font-face{
    font-family:Poppins;
    src:url("../assets/fonts/Poppins-Regular.ttf");
}

/* ======================================
   Invitation Header
====================================== */

.invitation-header{

    margin-bottom:35px;

}

.invitation-monogram{

    font-family:GreatVibes;

    font-size:70px;

    color:var(--primary);

    line-height:1;

}

.invitation-family-intro{

    margin-top:10px;

    font-size:.8rem;

    letter-spacing:5px;

    color:var(--primary);

}

.invitation-we{

    margin-top:5px;

    font-size:.75rem;

    letter-spacing:3px;

    color:#777;

}
/* ======================================
   Couple
====================================== */

.invitation-couple{

    margin-top:35px;

}

.bride{

    font-family:GreatVibes;

    color:var(--primary);

    font-size:4.3rem;

    line-height:1;

    font-weight:normal;

}

.groom{

    font-family:GreatVibes;

    color:var(--primary);

    font-size:4.7rem;

    line-height:1;

    font-weight:normal;

}

.and{

    margin:10px 0;

    font-family:Playfair;

    font-style:italic;

    font-size:1.3rem;

    color:var(--primary);

}
/* ======================================
   Message
====================================== */

.invitation-message{

    margin-top:40px;

}

.invitation-message p{

    margin-bottom:8px;

    font-size:.85rem;

    letter-spacing:2px;

    color:#5b4a4a;

}
/* ======================================
   Wedding Details
====================================== */

.ornament{

    margin:25px 0;

    font-size:22px;

    color:var(--primary);

}

.invitation-details{

    margin-top:30px;

}

.event-date{

    font-family:Playfair;

    font-size:1.35rem;

    font-weight:600;

    color:var(--primary);

    letter-spacing:1px;

}

.event-time{

    margin-top:10px;

    font-size:.9rem;

    letter-spacing:2px;

    color:#555;

}

.divider{

    width:90px;

    height:1px;

    background:#D8C8B5;

    margin:25px auto;

}

.venue-name{

    font-family:Playfair;

    font-size:1.2rem;

    color:var(--primary);

    margin-bottom:8px;

}

.venue-address{

    font-size:.9rem;

    color:#666;

}

.reception-text{

    font-style:italic;

    color:#666;

}

/* ========================================
   FLORAL DECORATIONS
======================================== */

.floral{
    position:absolute;
    pointer-events:none;
    user-select:none;
    z-index:1;
}

.floral-top-left{
    top:-10px;
    left:-10px;

    width:150px;
    height:auto;
}

.floral-top-right{
    top:0;
    right:10px;

    width:150px;
    height:auto;
}

.church-bottom-left{
    position:absolute;

    bottom:-40px;
    left:-20px;

    width:150px;
    height:auto;

    z-index:1;

    pointer-events:none;
    user-select:none;
}

.floral-bottom-right{
    bottom:-15px;
    right: 10px;

    width:150px;
    height:auto;
}

.floral-top-center{
    top:-120px;
    left:50%;

    width:250px;
    height:auto;

    transform:translateX(-50%);
}

/* ========================================
   FLORAL DIVIDER
======================================== */

.floral-divider{
    position:relative;
    z-index:5;

    width:140px;
    height:35px;

    margin:20px auto 22px;

    overflow:hidden;
}

.floral-divider img{
    position:absolute;

    width:140px;
    height:auto;

    left:50%;
    top:50%;

    transform:translate(-50%, -50%);
}

/* ========================================
   MONOGRAM WREATH
======================================== */

.monogram-wrapper{
    position:relative;

    width:150px;
    height:130px;

    margin:0 auto 10px;

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:5;
}

.monogram-wreath{
    position:absolute;

    width:150px;
    height:auto;

    top:20%;
    left:60%;

    transform:translate(-50%, -50%);

    pointer-events:none;
    user-select:none;
}

.monogram-wrapper .monogram{
    position:relative;
    z-index:2;

    margin:0;
}

/* ========================================
   OPEN INVITATION BUTTON
======================================== */

.invitation-action{
    position:relative;
    z-index:5;

    margin-top:35px;

    text-align:center;
}

.open-invitation-btn{
    display:inline-block;
    text-decoration:none;
    min-width:240px;

    padding:14px 28px;

    border:1px solid var(--primary);
    border-radius:6px;

    background:var(--primary);
    color:#fff;

    font-family:Playfair;
    font-size:13px;
    font-weight:500;

    letter-spacing:2px;

    cursor:pointer;

    box-shadow:0 6px 18px rgba(76,12,36,.15);

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.open-invitation-btn:hover{
    background:var(--primary-dark);

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(76,12,36,.22);
}

.open-invitation-btn:active{
    transform:translateY(0);
}

.btn-heart{
    display:inline-block;

    margin-left:8px;

    font-family:serif;
    font-size:17px;

    vertical-align:-1px;
}

.rsvp-hint{
    margin:12px 0 0;

    font-family:Poppins;
    font-size:10px;

    letter-spacing:1px;

    color:rgba(62,43,43,.65);
}

.open-invitation-btn.disabled{
    opacity:.55;
    cursor:not-allowed;
    pointer-events:none;
}