@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

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

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#4D1417;
    font-family:'Montserrat',sans-serif;
    overflow-x:hidden;
}

img{
    display:block;
    width:100%;
    height:auto;
}

button{
    border:none;
    background:none;
    cursor:pointer;
}

a{
    text-decoration:none;
}

.mobile-wrapper{
    width:390px;
    max-width:100%;
    margin:0 auto;
    background:#4D1417;
    overflow:hidden;
}

section{
    width:100%;
    position:relative;
}

/* ========================================
   SECTION PENGANTIN
======================================== */

.pengantin{
    width:100%;
    display:flex;
    justify-content:center;
    background:#D1A364;
}

.pengantin-layer{
    position:relative;
    width:390px;
    height:510px;
    margin:0 auto;
}

.pengantin-bunga{
    position:absolute;
    width:93%;
    top:34px;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
}

.pengantin-teks{
    position:absolute;
    width:80%;
    top:60px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
}


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

.cover{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:0;
}

.cover-layer{
    position:relative;
    width:390px;
    height:750px;
    margin:0 auto;
}

.frame{
    position:absolute;
    width:75%;
    top:45px;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
}

.cover-bunga{
    position:absolute;
    width:100%;
    top:0;
    left:50%;
    transform:translateX(-50%);
    z-index:4;
}

.cover-foto{
    position:absolute;
    width:60%;
    top:290px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
    display:block;
}

.cover-teks{
    position:absolute;
    width:35%;
    top:98px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
    display:block;
}

.cover-button{
    position:absolute;
    width:180px;
    left:50%;
    top:525px;
    transform:translateX(-50%);
    z-index:5;
    border:none;
    background:none;
    cursor:pointer;
    padding:0;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}

/* ========================================
   SECTION JADWAL
======================================== */

.jadwal{
    width:100%;
    display:flex;
    justify-content:center;
    background:#4D1417;
}

.jadwal-layer{
    position:relative;
    width:390px;
    height:510px;
    margin:0 auto;
}

.jadwal-garis{
    position:absolute;
    width:90%;
    top:45px;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
}

.jadwal-bunga{
    position:absolute;
    width:48%;
    top:35px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
}

.jadwal-akad{
    position:absolute;
    width:62%;
    top:130px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
}

.jadwal-ornament{
    position:absolute;
    width:50%;
    top:245px;
    left:50%;
    transform:translateX(-50%);
    z-index:4;
}

.jadwal-resepsi{
    position:absolute;
    width:62%;
    top:280px;
    left:50%;
    transform:translateX(-50%);
    z-index:5;
}

/* ========================================
   SECTION MAPS
======================================== */

.maps{
    width:100%;
    display:flex;
    justify-content:center;
    background:#4D1417;
}

.maps-layer{
    position:relative;
    width:390px;
    height:80px;
    margin:0 auto;
}

.maps-ornament{
    position:absolute;
    width:90%;
    top:33px;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
}

.maps-button{
    position:absolute;
    width:55%;
    top:22px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
}

/* ========================================
   SECTION AYAT SUCI
======================================== */

.ayat{
    width:100%;
    display:flex;
    justify-content:center;
    background:#4D1417;
}

.ayat-layer{
    position:relative;
    width:390px;
    height:355px;
    margin:0 auto;
}

.ayat-bunga{
    position:absolute;
    width:100%;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
}

.ayat-teks{
    position:absolute;
    width:80%;
    top:25px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
}


/* ========================================
   SECTION REKENING
======================================== */

.rekening{
    width:100%;
    display:flex;
    justify-content:center;
    background:#4D1417;
}

.rekening-layer{
    position:relative;
    width:390px;
    height:250px;
    margin:0 auto;
}

.rekening-garis{
    position:absolute;
    width:85%;
    top:35px;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
}

.rekening-ikon{
    position:absolute;
    width:13%;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
}

.rekening-content{
    position:absolute;
    width:100%;
    top:65px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.rekening-desc{
    width:78%;
    margin:0;

    text-align:center;

    font-family:'Montserrat',sans-serif;
    font-size:12px;
    line-height:1.45;

    color:#F7E6C5;
}

.rekening-bank{
    width:240px;
    margin-top:18px;
    padding:8px 12px;

    background:#D1A364;
    border-radius:6px;

    text-align:center;

    font-family:'Montserrat',sans-serif;
    font-size:14px;
    font-weight:700;
    color:#4D1417;
}

.rekening-number{
    width:240px;
    margin-top:10px;
    padding:7px 14px;

    background:#D1A364;
    border-radius:6px;

    text-align:center;

    font-family:'Montserrat',sans-serif;
    font-size:14px;
    font-weight:700;
    letter-spacing:1.5px;
    color:#4D1417;
}

/* ========================================
   SECTION PENUTUP
======================================== */

.penutup{
    width:100%;
    display:flex;
    justify-content:center;
    background:#4D1417;
}

.penutup-layer{
    position:relative;
    width:390px;
    height:180px;
    margin:0 auto;
}

.penutup-content{
    position:absolute;
    width:100%;
    top:5px;
    left:50%;
    transform:translateX(-50%);
    z-index:1;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.penutup-desc{
    width:88%;
    margin:0;

    text-align:center;

    font-family:'Montserrat',sans-serif;
    font-size:11px;
    line-height:1.6;
    font-weight:400;

    color:#F7E6C5;
}

.penutup-title{
    margin-top:18px;

    text-align:center;

    font-family:'Montserrat',sans-serif;
    font-size:12px;
    font-weight:600;
    line-height:1.4;

    color:#F7E6C5;
}

.penutup-nama{
    position:absolute;
    width:58%;
    top:105px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
}

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

.footer{
    width:100%;
    display:flex;
    justify-content:center;
    background:#4D1417;
}

.footer-layer{
    position:relative;
    width:390px;
    height:100px;
    margin:0 auto;
}

.footer-image{
    position:absolute;
    width:100%;
    top:0;
    left:50%;
    transform:translateX(-50%);
}