/* =========================================
   CLASSIC LUXURY WEDDING INVITATION
   WARM IVORY / CHAMPAGNE / ANTIQUE GOLD
========================================= */


/* =========================================
   VARIABLES
========================================= */

:root {

    --ivory: #f7f1e6;
    --ivory-light: #fbf8f2;
    --ivory-dark: #e9dfcf;

    --champagne: #ded0b9;
    --champagne-dark: #d3c2a7;

    --gold: #b28a4a;
    --gold-light: #d4bd91;
    --gold-dark: #795b31;

    --brown: #5b4b39;
    --brown-light: #857762;

    --white: #fffdf8;

    /* ===== SECTION BACKGROUNDS ===== */

    --names-bg:
        rgba(232, 222, 205, 0.82);

    /* SAVE THE DATE + LOVE STORY */
    --story-bg:
        rgba(239, 231, 217, 0.84);

    /* COUNTDOWN */
    --date-bg:
        rgba(225, 213, 193, 0.84);

    --location-bg:
        rgba(228, 217, 198, 0.84);

    --notes-bg:
        rgba(235, 225, 209, 0.86);

    --closing-bg:
        rgba(221, 209, 190, 0.88);

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

    --text:
        #554737;

    --text-light:
        #82735f;
}


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

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

html {
    scroll-behavior: smooth;
}

body {

    background:
        var(--ivory);

    color:
        var(--text);

    font-family:
        "Noto Serif Arabic",
        serif;

    font-weight: 400;

    overflow-x: hidden;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


/* =========================================
   BACKGROUND IMAGE
========================================= */

.background-image {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background-image:
        url("background.jpg");

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

    z-index:
        -10;
}

.background-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        rgba(247, 241, 230, 0.66);

    backdrop-filter:
        blur(1.5px);
}


/* =========================================
   VIDEO OVERLAY
========================================= */

.video-overlay {

    position: fixed;

    inset: 0;

    z-index:
        -9;

    pointer-events:
        none;

    background:
        rgba(247, 241, 230, 0.62);

    backdrop-filter:
        blur(1px);
}


/* =========================================================
   =========================================================
   LUXURY CLOSED ENVELOPE
   =========================================================
   ========================================================= */


/* =========================================
   ENVELOPE SCREEN
========================================= */

.envelope-screen {

    position: fixed;

    inset: 0;

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 252, 245, 0.97),
            rgba(226, 215, 196, 0.97)
        );

    backdrop-filter:
        blur(8px);

    transition:
        opacity 1.2s ease,
        visibility 1.2s ease;
}

.envelope-screen.hidden {

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;
}


/* =========================================
   ENVELOPE CONTAINER
========================================= */

.envelope-container {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        42px;
}


/* =========================================
   ENVELOPE
========================================= */

.envelope {

    position:
        relative;

    width:
        380px;

    height:
        250px;

    perspective:
        1200px;

    background:
        linear-gradient(
            145deg,
            #f5ecdd 0%,
            #eee1cd 45%,
            #dfcdb0 100%
        );

    border:
        1px solid
        rgba(157, 117, 58, .58);

    border-radius:
        4px;

    box-shadow:

        0 35px 65px
        rgba(74, 52, 27, .22),

        0 10px 25px
        rgba(74, 52, 27, .14),

        inset 0 0 0 1px
        rgba(255,255,255,.48);

    overflow:
        visible;
}


/* =========================================
   ENVELOPE BACK
========================================= */

.envelope-back {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        linear-gradient(
            145deg,
            #f7eee0,
            #eadbc3
        );

    border-radius:
        4px;

    overflow:
        hidden;
}


/* =========================================
   PAPER LIGHT
========================================= */

.envelope-back::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:

        radial-gradient(
            circle at 20% 15%,
            rgba(255,255,255,.45),
            transparent 32%
        ),

        radial-gradient(
            circle at 85% 85%,
            rgba(145,108,58,.08),
            transparent 35%
        );

    pointer-events:
        none;
}


/* =========================================
   FRONT LOWER FOLD
========================================= */

.envelope::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        0;

    height:
        0;

    border-left:
        190px solid transparent;

    border-right:
        190px solid transparent;

    border-bottom:
        135px solid rgba(211,195,169,.96);

    z-index:
        3;

    filter:
        drop-shadow(
            0 -1px 0
            rgba(255,255,255,.28)
        );
}


/* =========================================
   CLOSED TOP FLAP
========================================= */

.flap {

    position:
        absolute;

    top:
        -1px;

    left:
        -1px;

    width:
        0;

    height:
        0;

    border-left:
        190px solid transparent;

    border-right:
        190px solid transparent;

    border-top:
        138px solid #f3e8d7;

    z-index:
        5;

    transform:
        none !important;

    transform-origin:
        top;

    filter:
        drop-shadow(
            0 2px 3px
            rgba(91,67,35,.14)
        );
}


/* =========================================
   FLAP GOLD DETAIL
========================================= */

.flap::after {

    content:
        "";

    position:
        absolute;

    left:
        -180px;

    top:
        -132px;

    width:
        360px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(178,138,74,.58),
            transparent
        );

    pointer-events:
        none;
}


/* =========================================
   HIDDEN LETTER
========================================= */

.letter {

    position:
        absolute;

    width:
        88%;

    height:
        88%;

    left:
        6%;

    top:
        6%;

    z-index:
        0;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        none !important;
}


/* =========================================
   ENVELOPE DECORATIVE BORDER
========================================= */

.envelope::after {

    content:
        "";

    position:
        absolute;

    inset:
        12px;

    z-index:
        7;

    border:
        1px solid
        rgba(178,138,74,.38);

    border-radius:
        2px;

    pointer-events:
        none;
}


/* =========================================
   WAX SEAL
========================================= */

.seal {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

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

    width:
        72px;

    height:
        72px;

    z-index:
        10;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    border-radius:
        50%;

    color:
        #fffaf0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        16px;

    font-weight:
        500;

    letter-spacing:
        1px;

    background:
        radial-gradient(
            circle at 30% 25%,
            #e4ca91 0%,
            #c6a15d 34%,
            #9b7136 72%,
            #765226 100%
        );

    border:
        3px solid
        #ead9b6;

    box-shadow:

        0 6px 14px
        rgba(73,48,20,.30),

        0 0 0 2px
        rgba(178,138,74,.22),

        inset 2px 2px 4px
        rgba(255,255,255,.25),

        inset -3px -4px 6px
        rgba(70,42,15,.23);

    transition:
        opacity .5s ease;
}


/* =========================================
   INNER SEAL RING
========================================= */

.seal::before {

    content:
        "";

    position:
        absolute;

    inset:
        7px;

    border:
        1px solid
        rgba(255,248,225,.55);

    border-radius:
        50%;
}


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

.open-button {

    position:
        relative;

    background:
        rgba(255,253,248,.25);

    border:
        none;

    border-bottom:
        1px solid
        rgba(178,138,74,.7);

    color:
        var(--gold-dark);

    padding:
        9px 18px;

    font-family:
        "Noto Serif Arabic",
        serif;

    font-size:
        13px;

    font-weight:
        400;

    cursor:
        pointer;

    transition:
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.open-button:hover {

    color:
        var(--gold);

    border-color:
        var(--gold);

    transform:
        translateY(-2px);
}


/* =========================================
   CLOSED STATE
========================================= */

.envelope.open .flap {

    transform:
        none !important;
}

.envelope.open .letter {

    transform:
        none !important;
}

.envelope.open .seal {

    opacity:
        0;
}


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

.invitation {

    position:
        relative;

    min-height:
        100vh;

    background:
        rgba(247,241,230,.38);

    text-align:
        center;

    padding-bottom:
        100px;

    overflow:
        hidden;
}


/* =========================================
   SOFT LIGHT
========================================= */

.invitation::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(255,255,255,.35),
            transparent 35%
        ),

        radial-gradient(
            circle at 80% 70%,
            rgba(178,138,74,.08),
            transparent 35%
        );

    pointer-events:
        none;
}


/* =========================================
   SIDE LINES
========================================= */

.side-line {

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    width:
        1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--gold-light) 15%,
            var(--gold-light) 85%,
            transparent
        );

    opacity:
        .55;
}

.side-line-right {
    right:
        35px;
}

.side-line-left {
    left:
        35px;
}


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

.hero {

    max-width:
        850px;

    margin:
        70px auto 0;

    padding:
        85px 30px 45px;

    background:
        var(--names-bg);

    border:
        1px solid
        rgba(178,138,74,.32);

    border-bottom:
        none;

    border-radius:
        4px 4px 0 0;

    box-shadow:
        0 15px 45px
        rgba(90,70,40,.07);
}


/* =========================================
   INTRO
========================================= */

.intro-small {

    font-family:
        "Cormorant Garamond",
        serif;

    color:
        var(--gold-dark);

    font-size:
        12px;

    font-weight:
        500;

    letter-spacing:
        2.8px;

    margin-bottom:
        10px;
}

.intro-arabic {

    font-family:
        "Noto Serif Arabic",
        serif;

    color:
        var(--text-light);

    font-size:
        14px;

    font-weight:
        300;

    margin-bottom:
        28px;
}


/* =========================================
   NAMES
========================================= */

.names {
    margin-top:
        10px;
}

.names h1 {

    font-family:
        "Cormorant Infant",
        serif;

    font-size:
        clamp(50px, 8vw, 78px);

    font-weight:
        400;

    letter-spacing:
        1px;

    line-height:
        1;

    color:
        var(--gold-dark);

    text-transform:
        uppercase;

    text-shadow:
        0 1px 0
        rgba(255,255,255,.35);
}

.names span {

    display:
        block;

    font-family:
        "Cormorant Infant",
        serif;

    font-size:
        28px;

    font-weight:
        300;

    color:
        var(--gold);

    line-height:
        1;

    margin:
        12px 0;
}


/* =========================================
   INVITATION TEXT
========================================= */

.invitation-text {

    margin-top:
        34px;

    font-family:
        "Noto Serif Arabic",
        serif;

    color:
        var(--text-light);

    font-size:
        14px;

    font-weight:
        300;

    line-height:
        2;
}


/* =====================================================
   FAMILIES
===================================================== */

.families {

    max-width:
        850px;

    margin:
        0 auto;

    padding:
        35px 35px 45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        55px;

    background:
        var(--names-bg);

    border:
        1px solid
        rgba(178,138,74,.32);

    border-top:
        none;

    border-radius:
        0 0 4px 4px;

    box-shadow:
        0 15px 45px
        rgba(90,70,40,.07);
}

.family {
    flex:
        1;
}

.family span {

    display:
        block;

    font-family:
        "Noto Serif Arabic",
        serif;

    font-size:
        11px;

    font-weight:
        400;

    color:
        var(--gold-dark);

    margin-bottom:
        12px;
}

.family h2 {

    font-family:
        "Noto Serif Arabic",
        serif;

    font-size:
        19px;

    font-weight:
        400;

    color:
        var(--brown);
}

.family-divider {

    color:
        var(--gold);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        22px;
}


/* =====================================================
   SAVE THE DATE
   نفس لون OUR LOVE STORY
===================================================== */

.date-section {

    max-width:
        850px;

    margin:
        75px auto 0;

    padding:
        75px 30px 55px;

    background:
        var(--story-bg);

    border:
        1px solid
        rgba(178,138,74,.32);

    border-radius:
        4px;

    box-shadow:
        0 15px 45px
        rgba(90,70,40,.07);
}


/* =========================================
   DATE LABEL
========================================= */

.date-label {

    font-family:
        "Cormorant Garamond",
        serif;

    color:
        var(--gold-dark);

    font-size:
        13px;

    font-weight:
        500;

    letter-spacing:
        3.5px;

    margin-bottom:
        35px;
}


/* =========================================
   DATE
========================================= */

.date {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        30px;
}

.date span {

    display:
        block;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        14px;

    font-weight:
        500;

    letter-spacing:
        2px;

    color:
        var(--brown);
}

.date small {

    display:
        block;

    font-family:
        "Cormorant Garamond",
        serif;

    color:
        var(--gold-dark);

    font-size:
        13px;

    margin-top:
        5px;

    letter-spacing:
        2px;
}

.date-number {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        90px;

    font-weight:
        300;

    line-height:
        .8;

    color:
        var(--gold-dark);
}

.gold-line {

    width:
        70px;

    height:
        1px;

    background:
        var(--gold);

    margin:
        35px auto 18px;
}

.date-arabic {

    font-family:
        "Noto Serif Arabic",
        serif;

    font-size:
        13px;

    font-weight:
        300;

    color:
        var(--brown);
}


/* =====================================================
   COUNTDOWN
   منفصل عن التاريخ
===================================================== */

.countdown-section {

    max-width:
        850px;

    margin:
        30px auto 0;

    padding:
        55px 30px 60px;

    background:
        var(--date-bg);

    border:
        1px solid
        rgba(178,138,74,.32);

    border-radius:
        4px;

    box-shadow:
        0 15px 45px
        rgba(90,70,40,.07);
}


/* =========================================
   SECTION LABEL
========================================= */

.section-label {

    font-family:
        "Cormorant Garamond",
        serif;

    color:
        var(--gold-dark);

    font-size:
        12px;

    font-weight:
        500;

    letter-spacing:
        3px;

    margin-bottom:
        8px;
}


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

.countdown-section h2 {

    font-family:
        "Noto Serif Arabic",
        serif;

    font-size:
        24px;

    font-weight:
        400;

    color:
        var(--gold-dark);

    margin-bottom:
        40px;
}


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

.countdown {

    display:
        flex;

    justify-content:
        center;

    gap:
        55px;

    direction:
        ltr;
}

.time {

    min-width:
        70px;
}

.time span {

    display:
        block;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        45px;

    font-weight:
        400;

    color:
        var(--gold-dark);
}

.time small {

    display:
        block;

    font-family:
        "Noto Serif Arabic",
        serif;

    font-size:
        10px;

    font-weight:
        300;

    color:
        var(--brown-light);

    margin-top:
        5px;
}


/* =====================================================
   LOVE STORY
===================================================== */

.love-story {

    max-width:
        700px;

    margin:
        45px auto 30px;

    padding:
        80px 30px;

    text-align:
        center;

    background:
        var(--story-bg);

    border:
        1px solid
        rgba(178,138,74,.28);

    box-shadow:
        0 15px 45px
        rgba(90,70,40,.07);
}

.love-story-line {

    width:
        45px;

    height:
        1px;

    background:
        var(--gold);

    margin:
        0 auto 28px;
}

.love-story-label {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        12px;

    font-weight:
        500;

    letter-spacing:
        3px;

    color:
        var(--gold-dark);

    margin-bottom:
        25px;
}

.love-story-title {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        30px;

    font-weight:
        400;

    line-height:
        1.35;

    letter-spacing:
        .5px;

    color:
        var(--gold-dark);

    margin:
        0 auto;
}

.love-story-symbol {

    color:
        var(--gold);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        18px;

    margin:
        28px 0;
}

.love-story-arabic {

    font-family:
        "Noto Serif Arabic",
        serif;

    font-size:
        15px;

    font-weight:
        300;

    line-height:
        2.2;

    color:
        var(--brown);

    margin-bottom:
        20px;
}

.love-story-invitation {

    font-family:
        "Noto Serif Arabic",
        serif;

    font-size:
        13px;

    font-weight:
        300;

    line-height:
        2.1;

    color:
        var(--text-light);
}


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

.location-section {

    max-width:
        900px;

    margin:
        100px auto;

    padding:
        80px 25px;

    background:
        var(--location-bg);

    border-top:
        1px solid
        rgba(178,138,74,.35);

    border-bottom:
        1px solid
        rgba(178,138,74,.35);

    box-shadow:
        0 15px 45px
        rgba(90,70,40,.06);
}

.venue-name {

    font-family:
        "Noto Serif Arabic",
        serif;

    font-size:
        34px;

    font-weight:
        400;

    color:
        var(--gold-dark);

    margin:
        15px 0 55px;
}

.venue-grid {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        70px;

    margin-bottom:
        55px;
}

.venue {

    width:
        250px;
}

.venue-for {

    font-family:
        "Cormorant Garamond",
        serif;

    color:
        var(--gold-dark);

    font-size:
        12px;

    font-weight:
        500;

    letter-spacing:
        2.5px;
}

.venue h3 {

    font-family:
        "Noto Serif Arabic",
        serif;

    font-size:
        26px;

    font-weight:
        400;

    color:
        var(--brown);

    margin:
        10px 0;
}

.venue p {

    font-family:
        "Noto Serif Arabic",
        serif;

    font-size:
        12px;

    font-weight:
        300;

    color:
        var(--text-light);
}

.venue-center {

    color:
        var(--gold);

    font-size:
        20px;
}


/* =========================================
   LOCATION BUTTON
========================================= */

.location-button {

    display:
        inline-block;

    text-decoration:
        none;

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

    color:
        var(--gold-dark);

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

    padding:
        13px 30px;

    font-family:
        "Noto Serif Arabic",
        serif;

    font-size:
        12px;

    font-weight:
        400;

    transition:
        background .35s ease,
        color .35s ease;
}

.location-button:hover {

    background:
        var(--gold);

    color:
        white;
}


/* =====================================================
   NOTES
===================================================== */

.notes-section {

    max-width:
        750px;

    margin:
        80px auto;

    padding:
        50px 25px;

    text-align:
        center;

    background:
        var(--notes-bg);

    border:
        1px solid
        rgba(178,138,74,.25);

    box-shadow:
        0 15px 45px
        rgba(90,70,40,.05);
}

.notes-title {

    font-family:
        "Noto Serif Arabic",
        serif;

    color:
        var(--gold-dark);

    font-size:
        28px;

    font-weight:
        400;

    margin-top:
        15px;
}

.notes-list {
    margin-top:
        30px;
}

.note {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    margin-bottom:
        25px;
}

.note-icon {

    width:
        7px;

    height:
        7px;

    flex-shrink:
        0;

    background:
        var(--gold);

    transform:
        rotate(45deg);
}

.note p {

    font-family:
        "Noto Serif Arabic",
        serif;

    font-size:
        13px;

    font-weight:
        300;

    line-height:
        2;

    color:
        var(--brown);

    max-width:
        650px;
}


/* =====================================================
   CLOSING
===================================================== */

.closing {

    padding:
        110px 20px 80px;

    background:
        var(--closing-bg);

    border-top:
        1px solid
        rgba(178,138,74,.35);
}

.closing-line {

    width:
        50px;

    height:
        1px;

    background:
        var(--gold);

    margin:
        0 auto 30px;
}

.closing-small {

    font-family:
        "Cormorant Garamond",
        serif;

    color:
        var(--gold-dark);

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        2.5px;

    margin-bottom:
        25px;
}

.closing h2 {

    font-family:
        "Noto Serif Arabic",
        serif;

    color:
        var(--gold-dark);

    font-size:
        28px;

    font-weight:
        400;

    line-height:
        2;

    margin-bottom:
        25px;
}

.closing-names {

    font-family:
        "Cormorant Garamond",
        serif;

    color:
        var(--gold-dark);

    font-size:
        28px;

    font-weight:
        400;

    letter-spacing:
        2px;
}

.closing-date {

    font-family:
        "Cormorant Garamond",
        serif;

    color:
        var(--brown-light);

    font-size:
        12px;

    letter-spacing:
        2px;

    margin-top:
        10px;
}


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

@media (max-width: 600px) {


    /* =====================================
       ENVELOPE
    ===================================== */

    .envelope-container {

        gap:
            35px;
    }

    .envelope {

        width:
            330px;

        height:
            218px;
    }

    .envelope::before {

        border-left-width:
            165px;

        border-right-width:
            165px;

        border-bottom-width:
            118px;
    }

    .flap {

        border-left-width:
            165px;

        border-right-width:
            165px;

        border-top-width:
            120px;
    }

    .envelope::after {

        inset:
            10px;
    }

    .seal {

        width:
            65px;

        height:
            65px;

        font-size:
            15px;
    }


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

    .hero {

        max-width:
            calc(100% - 30px);

        margin:
            45px auto 0;

        padding:
            70px 18px 35px;

        border-radius:
            4px 4px 0 0;

        border-bottom:
            none;
    }

    .names h1 {

        font-size:
            63px;

        letter-spacing:
            2px;

        line-height:
            .9;
    }

    .names span {

        font-size:
            32px;

        margin:
            16px 0;
    }

    .intro-small {

        font-size:
            10px;

        letter-spacing:
            2px;
    }

    .intro-arabic {

        font-size:
            13px;
    }

    .invitation-text {

        font-size:
            13px;
    }


    /* =====================================
       FAMILIES
    ===================================== */

    .families {

        max-width:
            calc(100% - 30px);

        gap:
            20px;

        padding:
            28px 15px 35px;

        border-radius:
            0 0 4px 4px;

        border-top:
            none;
    }

    .family h2 {

        font-size:
            16px;
    }


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

    .date-section {

        max-width:
            calc(100% - 30px);

        margin:
            55px auto 0;

        padding:
            60px 15px 45px;

        border-radius:
            4px;

        background:
            var(--story-bg);
    }

    .date {

        gap:
            20px;
    }

    .date-number {

        font-size:
            72px;
    }


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

    .countdown-section {

        max-width:
            calc(100% - 30px);

        margin:
            25px auto 0;

        padding:
            45px 12px;

        border-radius:
            4px;

        background:
            var(--date-bg);
    }

    .countdown {

        gap:
            20px;
    }

    .time {

        min-width:
            55px;
    }

    .time span {

        font-size:
            35px;
    }


    /* =====================================
       LOVE STORY
    ===================================== */

    .love-story {

        margin:
            35px 20px 20px;

        padding:
            60px 15px;
    }

    .love-story-title {

        font-size:
            25px;

        line-height:
            1.4;
    }

    .love-story-label {

        font-size:
            11px;

        letter-spacing:
            2.5px;
    }

    .love-story-arabic {

        font-size:
            13px;

        line-height:
            2.2;
    }

    .love-story-invitation {

        font-size:
            12px;
    }


    /* =====================================
       SIDE LINES
    ===================================== */

    .side-line-right {

        right:
            15px;
    }

    .side-line-left {

        left:
            15px;
    }


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

    .location-section {

        margin:
            70px 20px;

        padding:
            60px 15px;
    }

    .venue-name {

        font-size:
            28px;

        margin-bottom:
            45px;
    }

    .venue-grid {

        gap:
            20px;
    }

    .venue {

        width:
            140px;
    }

    .venue h3 {

        font-size:
            20px;
    }


    /* =====================================
       NOTES
    ===================================== */

    .notes-section {

        padding:
            40px 20px;
    }

    .notes-title {

        font-size:
            24px;
    }

    .note p {

        font-size:
            12px;
    }


    /* =====================================
       CLOSING
    ===================================== */

    .closing {

        padding:
            90px 20px 70px;
    }

    .closing h2 {

        font-size:
            24px;
    }

    .closing-names {

        font-size:
            24px;
    }
}


/* =====================================================
   VERY SMALL PHONES
===================================================== */

@media (max-width: 380px) {

    .envelope {

        width:
            300px;

        height:
            198px;
    }

    .envelope::before {

        border-left-width:
            150px;

        border-right-width:
            150px;

        border-bottom-width:
            108px;
    }

    .flap {

        border-left-width:
            150px;

        border-right-width:
            150px;

        border-top-width:
            110px;
    }

    .seal {

        width:
            60px;

        height:
            60px;
    }

    .names h1 {

        font-size:
            54px;
    }

    .names span {

        font-size:
            28px;
    }

    .countdown {

        gap:
            12px;
    }

    .time span {

        font-size:
            31px;
    }

    .venue {

        width:
            125px;
    }

    .venue h3 {

        font-size:
            18px;
    }
}


/* =====================================================
   REDUCE MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }

    .background-video {
        animation:
            none;
    }

    *,
    *::before,
    *::after {
        transition-duration:
            0.01ms !important;
    }
}