p{
    font-size: 22px;
}

div.flower{
    position: absolute;
    max-width: 250px;
    width: 100%;
    opacity: 0.2;
}
    div.flower img{
        width: 100%;
        object-fit: contain;
    }
div.flower_top_right{
    top: 0px;
    right: 0;
}    
div.flower_top_left{
    top: 0px;
    left: 0; 
    transform: scaleX(-1);
}    
div.flower_bottom_left{
    bottom: 0;
    left: 0;
}   

div.header{
    position: absolute;
    width: 100%; 
    padding: 32px;
    background: transparent;
    top:0;
    left:0;
    z-index: 1;
}
div.menu_holder{
    width: 100%;
    justify-content: space-between;
    padding: 16px 0px;
    gap: 32px;
    font-size: 22px;
}

div.hero{
    position: relative;
    height: 100vh;
    background-image: url(../images/hero.jpg);
    background-size: cover;
    background-position: center;
}
    div.hero h1{
        color: var(--white);
        font-size: 11vw;
        font-family: var(--font-cursive);
    }
    div.hero span{
        font-family: var(--font-cursive);
    }

div.invite{
    color: var(--white);
}

div.invite_inner h2{
    margin-bottom: 32px;
    font-size: 48px
}
div.invite_inner p{
    margin-bottom: 8px;
}

    div.invite_left img{
        width: 100%;
        height: 450px;
        object-fit: cover;
    }

        .date_of_wedding{
            margin-top: 32px;
        }

div.story{
    position: relative;
    padding: 64px 0;
}
div.story_inner{
    gap: 64px;
}
div.story_left_img_holder{
    position: relative;
}
    div.story_left_img_holder::after{
        content: "";
        position: absolute;
        top: 20px;
        left: 20px;
        right: -20px;
        bottom: -20px;
        border: 2px solid var(--black);
        z-index: 0;
    }
    div.story_row{
        width: 100%;
        display: flex;
        align-items: center;
        gap: 32px;
        text-align: center;
    }
        div.story_text{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
            div.story_text_inner{
                max-width: 650px;
                padding: 0 16px;
                width: 100%;
            }
            div.story_text h2{
                font-size: 60px;
                font-family: var(--font-cursive);
                margin-bottom: 16px;
            }
            div.story_text p{
                margin-top: 16px;
            }
        div.story_img_1{
            max-width: 400px;
            height: 500px;
            width: 100%;
        }
            div.story_img_2{
                max-width: 500px;
                width: 100%;
                height: 350px;
            }
        div.story_img img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

div.story_left img{
    max-width: 450px;
    width: 100%;
    position: relative;
    z-index: 1;
}
div.story_right{
    text-align: center;
}
    div.story_right h2{
        font-size: 48px;
        margin-bottom: 32px;
    }

    div.story_right p{
        font-size: 18px;
        margin-top: 8px;
    }


div.info{
    background-color: var(--text-white);
}
    div.info_inner{
        gap: 32px;
    }
    div.info_left h2{
        font-size: 48px;
    }
    div.info_left{
        text-align: center;
    }
    div.info_right_list{
        width: max-content !important;
        gap: 32px;
        display: flex;
        flex-direction: column;
    }
        div.info_item h3{
            font-size: 32px;
            margin-bottom: 8px;
        }

div.slogan{
    position: relative;
    background-image: url(../images/temp3.jpg);
    filter: grayscale(1);
    background-size: cover;
    background-position: center;
}
    div.slogan h1{
        color: var(--white);
        font-size: 9vw;
        font-family: var(--font-cursive);
    }
    div.slogan span{
        font-family: var(--font-cursive);
    }

div.program{
    background-color: var(--primary);
    color: var(--white);
}
div.program_left{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
    div.program_inner{
        width: 100%;
        gap: 32px;
    }
    div.program_info_item{
        text-align: center;
    }
        div.program_info_item h2{
            font-size: 48px;
            font-family: var(--font-cursive);
        }
        div.program_colors{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 32px; 
            margin-top: 16px;  
        }
            div.program_color_item{
                width: 50px;
                height: 50px;
                border-radius: 100px;
            }
        div.program_info_divider{
            position: relative;
            margin: 0 auto;
            max-width: 200px;
            width: 100%;
            border-bottom: 2px solid var(--white);
            display: flex;
            justify-content: center;
            align-items: center;
        }
            div.program_info_divider i{
                transform: translateY(60%);
            }
    div.program_right{
        width: 100%;
        display: flex;
        justify-content: center;
    }
        div.program_list{
            width: max-content;
            display: flex;
            flex-direction: column;
            gap: 32px;
        }
        div.program_item{
            max-width: 300px;
            width: 100%;
            display: flex;
            align-items: center;
            gap: 32px;
        }
            div.program_icon{
                width: 80px;
            }
                div.program_icon img{
                    width: 80px;
                }
            div.program_text h4{
                margin-top: 8px;
                font-size: 28px;
            }
div.rsvp{
    background-image: url("../images/temp4.jpg");
    background-size: cover;
    background-position: center;
    filter: grayscale(1);
    min-height: 500px;
}
    div.rsvp_inner{
        max-width: 800px;
        width: 100%;
        /* border: 2px solid var(--black); */
        padding: 32px;
        background: transparent;
    }
        div.rsvp_inner h2{
            font-size: 72px;
            font-family: var(--font-cursive);
            letter-spacing: 6px;
        }
        div.btns{
            margin-top: 32px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 32px;
        }
div.rsvp_yes{
    display: none;
    background-color: var(--white);
    flex-direction: column;
    max-width: 800px;
    width: 100%;
    padding: 32px;
}
    div.rsvp_yes h2{
        text-align: center;
        margin-bottom: 32px;
    }
    div.rsvp_inner{
        background-color: var(--white);
    }
    #saveBtn{
        display: none;
    }

    div.step_buttons{
        margin-top: 32px;
    }
    .rsvp-section{
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }
        div.form_item{
            width: 100%;
            display: flex;
            flex-direction: column;
            margin-bottom: 16px;
        }
            div.form_item label{
                font-weight: bold;
            }
            div.form_item input, div.form_item select, div.form_item textarea{
                width: 100%;
                margin-top: 8px;
                padding: 8px 12px;
                border: 2px solid var(--black);
                font-family: var(--font-primary);
            }
    
div.masters{
    position: relative;
    background-color: #efefef60;
}
div.masters h2{
    width: 100%;
    text-align: center;
    font-size: 60px;
    font-family: var(--font-cursive);
}
    div.masters_inner{
        justify-content: space-between;
        padding: 0 16px;
        margin-top: 32px;
        gap: 32px;
        flex-wrap: wrap;
    }
        div.master_item{
            max-width: 250px;
            width: 100%;
            z-index: 9;
        }
            div.master_item img{
                width: 100%;
                height: 250px;
                border-radius: 1000px;
                object-fit: cover;
            }
            div.master_item p{
                font-size: 22px;
                text-align: center;
                margin-top: 16px;
            }
div.bottom{
    background-color: var(--primary);
    color: var(--white);
    padding: 16px;
}
    div.bottom a{
        color: var(--white);
    }

div.menu_holder_res{
    display: none;
    justify-content: flex-end;
}
    div.menu_holder_res i{
        font-size: 32px;
    }

div.res_menu{
    display: none;
    position: fixed;
    transform-origin: top;
    width: 100%;
    height: 100vh;
    padding: 32px;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    background-color: var(--black);
    color: var(--white);
    flex-direction: column;
}
    div.res_menu_icon{
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
        div.res_menu_icon i{
            font-size: 32px;
            color: var(--white);
        }
    div.res_menu_container{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 32px;
        flex-direction: column;
    }
        div.menu_item_res{
            font-size: 32px;
        }
            div.menu_item_res_title{
                font-size: 64px;
                font-family: var(--font-cursive);
                margin-top: 16px;
            }
                div.menu_item_res_title span{
                    font-size: 48px;
                    font-family: var(--font-cursive);
                }


                div.question_inner{
                    width: 100%;
                    max-width: 800px;
                }
                    div.question_top, div.question_bottom{
                        text-align: center;
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        align-items: center;
                    }
                        div.question_top h2, div.question_bottom h2{
                            font-family: var(--font-cursive);
                            font-size: 48px;
                        }
                        div.question_top p, div.question_bottom p{
                            max-width: 600px;
                        }
                    div.question_item_container{
                        margin-top: 32px;
                    }
                        div.question_item{
                            width: 100%;
                            padding: 16px;
                            border: 1px solid var(--black);
                            margin-bottom: 8px;
                        }
                            div.question_item_top{
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                            }
                                div.question_item_top i{
                                    cursor: pointer;
                                }
                            div.question_item_body{
                                display: none;
                                width: 100%;
                                margin-top: 16px;
                                color: var(--text-white);
                            }
                                div.question_item_body p{
                                    font-size: 16px;
                                }
                    div.question_bottom{
                        margin-top: 32px;
                    }
                        div.question_bottom button{
                            margin-top: 16px;
                        }

@media only screen and (max-width: 1200px) {
    div.hero h1{
        font-size: 15vw;
    }
    div.slogan h1{
        font-size: 15vw;
        text-align: center;
    }
}

@media only screen and (max-width: 970px) {
    div.menu_holder{
        display: none;
    }
    div.menu_holder_res{
        display: flex;
    }
}
@media only screen and (max-width: 760px) {
    div.program_inner {
        flex-direction: column-reverse;
        gap: 32px;
    }
}

@media only screen and (max-width: 700px) {
    div.invite_inner{
        flex-direction: column-reverse;
    }
    div.story_row:nth-child(2){
        flex-direction: column-reverse;
    }
    div.story_row:nth-child(3){
        flex-direction: column;
    }
    div.story_img_1, div.story_img_2{
        height: 300px;
        width: 100%;
        max-width: 100%;
    }
}
@media only screen and (max-width: 650px) {
    div.masters_inner{
        justify-content: center;
    }
}
@media only screen and (max-width: 562px) {
    div.flower_top_right{
        top: auto !important;
        bottom: 0;
    }
        div.flower_top_right img{
            transform: rotate(0deg) !important;
        }
}
@media only screen and (max-width: 550px) {
    div.program_inner {
        flex-direction: column-reverse;
        margin-top: 32px;
    }
    div.program_left{
        text-align: center;
    }
    div.program_item{
        font-size: 22px;
    }
}

@media only screen and (max-width: 500px) {
    div.btns{
        flex-direction: column;
    }
}

@media only screen and (max-width: 430px) {
}