/* =========================================
   RESET
========================================= */

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


html,
body {

    width: 100%;

    margin: 0;
    padding: 0;

    background: #000;

    overflow-x: hidden;

}


body {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

}


img,
video,
canvas {

    display: block;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;

    vertical-align: top;

}



/* =========================================
   FIRST COVER
========================================= */

.cover-section {

    position: fixed;

    inset: 0;

    width: 100%;

    height: 100vh;
    height: 100svh;

    background: #000;

    display: flex;

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

    overflow: hidden;

    z-index: 1000;

}


.cover-image {

    width: 100%;
    height: 100%;

    object-fit: contain;

    background: transparent;

}


.cover-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: flex-end;

    padding-bottom: 8vh;

    pointer-events: none;

}


.open-button {

    pointer-events: auto;

    padding: 13px 28px;

    border:
        1px solid
        rgba(255,255,255,.85);

    border-radius: 30px;

    background:
        rgba(0,0,0,.35);

    color: #fff;

    font-size: 12px;

    letter-spacing: 3px;

    cursor: pointer;

}


.cover-section.hide-cover {

    animation:
        coverOut
        .8s
        ease
        forwards;

}


@keyframes coverOut {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        visibility: hidden;
    }

}



/* =========================================
   MAIN
========================================= */

.invitation {

    width: 100%;

    margin: 0;
    padding: 0;

    background: #000;

}


.hidden {

    visibility: hidden;

}



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

.video-section,
.video-save-date-section,
.video-venue-section,
.video-rsvp-section {

    position: relative;

    width: 100%;

    height: 100vh;
    min-height: 100vh;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    background: #000;

    line-height: 0;

    border: 0 !important;

}


.wedding-video {

    width: 100%;
    height: 100%;

    object-fit: cover;

    margin: 0 !important;
    padding: 0 !important;

    background: #000;

}



/* =========================================
   SPECIAL VIDEO BACKGROUND
========================================= */

.video-save-date-section
> .wedding-video,

.video-venue-section
> .wedding-video,

.video-rsvp-section
> .wedding-video {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 1;

}



/* =========================================
   SAVE THE DATE
========================================= */

.save-date-overlay {

    position: absolute;

    inset: 0;

    z-index: 10;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 15px;

    background: transparent;

    line-height: normal;

}


.save-date-content {

    width: 100%;

    max-width: 500px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: #526c55;

    text-shadow:
        0 2px 6px
        rgba(255,255,255,.75);

}



/* =========================================
   SAVE THE DATE TITLE
========================================= */

.save-date-title {

    width: 100%;

    color: #526c55;

    font-size: 36px;

    font-weight: normal;

    letter-spacing: 5px;

    line-height: 1.15;

    white-space: nowrap;

    text-align: center;

    margin-bottom: 25px;

    text-shadow:
        0 2px 5px
        rgba(255,255,255,.85);

}



/* =========================================
   SCRATCH CARD
========================================= */

.scratch-wrapper {

    position: relative;

    width:
        min(82vw, 360px);

    height: 135px;

    margin-bottom: 28px;

    overflow: hidden;

    border-radius: 9px;

    background: #edf1e7;

    border:
        1px solid
        rgba(92,116,92,.20);

    box-shadow:
        0 8px 25px
        rgba(62,82,62,.18);

    line-height: normal;

}


.scratch-content {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    background: #edf1e7;

    color: #3f5942;

    padding: 15px;

    z-index: 1;

    text-shadow: none;

}


.scratch-title {

    width: 100%;

    color: #668066;

    font-size: 12px;

    letter-spacing: 4px;

    line-height: 1.2;

    margin-bottom: 10px;

}


.wedding-date {

    width: 100%;

    color: #354b38;

    font-size: 25px;

    font-weight: bold;

    letter-spacing: 2px;

    line-height: 1.15;

    white-space: nowrap;

}


.wedding-day {

    color: #668066;

    font-size: 12px;

    letter-spacing: 4px;

    line-height: 1.2;

    margin-top: 8px;

}


#scratchCanvas {

    position: absolute;

    inset: 0;

    width: 100% !important;
    height: 100% !important;

    z-index: 5;

    cursor: pointer;

    touch-action: none;

}



/* =========================================
   COUNTDOWN
========================================= */

.countdown-title {

    width: 100%;

    color: #5a735c;

    font-size: 29px;

    font-weight: normal;

    letter-spacing: 5px;

    line-height: 1.1;

    text-align: center;

    margin-bottom: 15px;

    text-shadow:
        0 2px 5px
        rgba(255,255,255,.85);

}


.countdown {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 9px;

    line-height: normal;

}


.time-box {

    width: 70px;
    height: 70px;

    flex-shrink: 0;

    border:
        1px solid
        rgba(87,112,88,.45);

    border-radius: 6px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background:
        rgba(108,132,108,.68);

    padding: 7px 3px;

    line-height: normal;

}


.time-box span {

    display: block;

    width: 100%;

    color: #fff;

    font-size: 24px;

    line-height: 1;

    text-align: center;

    margin-bottom: 7px;

}


.time-box small {

    display: block;

    width: 100%;

    color: #fff;

    font-size: 8px;

    letter-spacing: 1px;

    line-height: 1;

    text-align: center;

}



/* =========================================
   VIDEO 08 VENUE
========================================= */

.venue-overlay {

    position: absolute;

    inset: 0;

    z-index: 10;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 15px;

    background: transparent;

    line-height: normal;

}


/*
==================================================
 VENUE POSITION SETTING

 SIRF YE VALUE CHANGE KARO

 55px = current
 80px = neeche
 30px = upar
 0px  = center

 Text + Map + Button
 sab ek saath move honge.
==================================================
*/

.venue-content {

    position: relative;

    width: 100%;

    max-width: 400px;

    transform:
        translateY(55px);

    text-align: center;

    color: #526c55;

    text-shadow:
        0 1px 3px
        rgba(255,255,255,.7);

}



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

.venue-heading {

    width: 100%;

    color: #526c55;

    font-size: 15px;

    font-weight: normal;

    letter-spacing: 3px;

    line-height: 1.3;

    margin-bottom: 5px;

    text-align: center;

}



/* =========================================
   MAP
========================================= */

.map-box {

    width: 60%;

    max-width: 240px;

    height: 130px;

    margin:
        20px
        auto
        0;

    overflow: hidden;

    border-radius: 9px;

    border:
        1px solid
        rgba(82,108,85,.55);

    background: #222;

    line-height: 0;

}


.map-box iframe {

    width: 100%;
    height: 100%;

    display: block;

    border: 0;

}



/* =========================================
   VIEW LOCATION
========================================= */

.location-button {

    display: inline-block;

    margin-top: 13px;

    padding: 10px 23px;

    border:
        1px solid
        #526c55;

    border-radius: 30px;

    background:
        rgba(255,255,255,.75);

    color: #526c55;

    text-decoration: none;

    font-size: 10px;

    letter-spacing: 2px;

    line-height: 1;

}



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

.rsvp-overlay {

    position: absolute;

    inset: 0;

    z-index: 10;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 15px;

    background: transparent;

    line-height: normal;

}


.rsvp-content {

    width: 90%;

    max-width: 340px;

    padding: 20px;

    border-radius: 12px;

    background:
        rgba(215,210,201,.88);

    color: #51483f;

    text-align: center;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.22);

    text-shadow: none;

}



/* ONLY ONE RSVP */

.rsvp-content h1 {

    font-size: 34px;

    font-weight: normal;

    letter-spacing: 3px;

    line-height: 1;

    margin-bottom: 6px;

}


.rsvp-subtitle {

    font-size: 8px;

    letter-spacing: 1.5px;

    margin-bottom: 12px;

    text-transform: uppercase;

}



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

.rsvp-input {

    display: block;

    width: 100%;

    height: 36px;

    margin:
        0
        0
        7px
        0;

    padding:
        0
        12px;

    border: 0;

    border-radius: 6px;

    outline: none;

    background: #fff;

    color: #51483f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 10px;

    letter-spacing: .5px;

    text-align: left;

}


.rsvp-input::placeholder {

    color: #777;

}


.rsvp-input option {

    color: #51483f;

    background: #fff;

}



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

.rsvp-button {

    width: 100%;

    height: 34px;

    margin-top: 2px;

    border: 0;

    border-radius: 20px;

    background: #fff;

    color: #51483f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 8px;

    font-weight: bold;

    letter-spacing: 1px;

    cursor: pointer;

}



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

.rsvp-footer {

    margin-top: 11px;

    font-size: 10px;

    font-style: italic;

    font-weight: bold;

    line-height: 1.2;

}



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

.music-button {

    position: fixed;

    right: 18px;

    bottom: 18px;

    width: 45px;
    height: 45px;

    border:
        1px solid
        rgba(255,255,255,.7);

    border-radius: 50%;

    background:
        rgba(0,0,0,.55);

    color: #fff;

    z-index: 999;

    font-size: 20px;

    cursor: pointer;

}


.music-button.hidden {

    display: none;

}



/* =========================================
   DESKTOP
========================================= */

@media (min-width:768px) {

    body {

        background: #111;

    }


    .cover-section,
    .invitation {

        width:
            min(100%,540px);

    }


    .cover-section {

        left: 50%;

        right: auto;

        transform:
            translateX(-50%);

    }


    .invitation {

        margin:
            0
            auto;

    }

}



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

@media (max-width:600px) {


    .save-date-title {

        font-size: 33px;

        letter-spacing: 5px;

    }


    .scratch-wrapper {

        width: 82vw;

        height: 135px;

    }


    .wedding-date {

        font-size: 23px;

        letter-spacing: 1.5px;

    }


    .countdown-title {

        font-size: 27px;

    }


    .time-box {

        width: 67px;

        height: 68px;

    }


    /* VENUE GROUP */

    .venue-content {

        transform:
            translateY(55px);

    }


    .venue-heading {

        font-size: 14px;

    }


    .map-box {

        width: 60%;

        height: 130px;

    }


    /* RSVP */

    .rsvp-content {

        max-width: 330px;

        padding: 18px;

    }


    .rsvp-content h1 {

        font-size: 32px;

    }

}



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

@media (max-width:380px) {


    .save-date-title {

        font-size: 29px;

        letter-spacing: 4px;

    }


    .scratch-wrapper {

        width: 86vw;

        height: 125px;

    }


    .wedding-date {

        font-size: 20px;

    }


    .countdown-title {

        font-size: 23px;

    }


    .countdown {

        gap: 5px;

    }


    .time-box {

        width: 61px;

        height: 62px;

    }


    .time-box span {

        font-size: 20px;

    }


    /* VENUE */

    .venue-content {

        transform:
            translateY(45px);

    }


    .map-box {

        width: 58%;

        height: 120px;

    }


    .venue-heading {

        font-size: 12px;

    }


    /* RSVP */

    .rsvp-content {

        max-width: 310px;

        padding: 15px;

    }


    .rsvp-content h1 {

        font-size: 30px;

    }


    .rsvp-input {

        height: 34px;

    }


    .rsvp-footer {

        font-size: 9px;

    }

}



/* =========================================
   LANDSCAPE
========================================= */

@media
(max-height:500px)
and (orientation:landscape) {


    .save-date-title {

        font-size: 24px;

        margin-bottom: 9px;

    }


    .scratch-wrapper {

        width: 300px;

        height: 80px;

        margin-bottom: 7px;

    }


    .wedding-date {

        font-size: 16px;

    }


    .countdown-title {

        font-size: 16px;

        margin-bottom: 5px;

    }


    .time-box {

        width: 52px;

        height: 43px;

    }


    .time-box span {

        font-size: 15px;

    }


    /* VENUE */

    .venue-content {

        transform:
            translateY(30px);

    }


    .map-box {

        width: 230px;

        height: 105px;

    }


    .venue-heading {

        font-size: 11px;

    }


    .location-button {

        margin-top: 7px;

        padding: 7px 18px;

    }


    /* RSVP */

    .rsvp-content {

        max-width: 300px;

        padding: 12px;

    }


    .rsvp-content h1 {

        font-size: 27px;

    }


    .rsvp-input {

        height: 28px;

        margin-bottom: 4px;

    }


    .rsvp-button {

        height: 27px;

    }


    .rsvp-footer {

        margin-top: 6px;

    }

}