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


:root {
    --cream:#F8E7D2;
    --paper:#FFF9F0;
    --wine:#39141a;
    --red:#D94F4F;
    --pink:#F5B7B1;
    --green:#7B9E4B;
}


body {

    background:
    linear-gradient(
        135deg,
        #F8E7D2,
        #FFF4E8,
        #F5D1C8
    );

    font-family:"Poppins", sans-serif;

    color:var(--wine);

    overflow-x:hidden;

}



section {

    width:min(92%,1100px);

    margin:auto;

    padding:40px 0;

}



/* HERO */


.hero {

    min-height:70vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:80px 0 30px;

}



.title-logo {

    width:350px;

    max-width:80%;

    margin-bottom:30px;

}



.hero p {

    font-size:18px;

    color:var(--wine);

}



/* STORY */


.story-container {

    display:flex;

    gap:50px;

    background:rgba(255,255,255,0.65);

    padding:50px;

    border-radius:30px;

    align-items:flex-start;

    box-shadow:0 10px 30px rgba(57,20,26,.08);

    border:2px solid rgba(217,79,79,.2);

}



.story-text {

    width:65%;

}



.story-text h2 {

    font-size:35px;

    margin-bottom:25px;

    color:var(--wine);

}



.story-text p {

    line-height:1.8;

    margin-bottom:25px;

}



.quote {

    font-style:italic;

    border-left:3px solid var(--red);

    padding-left:20px;

}



/* RIGHT SIDE */


.interactive {

    width:35%;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:30px;

}



.small-logo {

    width:130px;

}



.love-box {

    width:100%;

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

    padding:30px;

    border-radius:25px;

    text-align:center;

    border:2px dashed var(--pink);

}



.love-box h2 {

    font-size:25px;

    color:var(--wine);

}



.rating {

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:25px;

}



.heart {

    background:transparent;

    border:none;

    font-size:38px;

    color:#d9b6b6;

    cursor:pointer;

    transition:.25s ease;

}



.heart:hover {

    transform:scale(1.2);

    color:var(--pink);

}



.heart.active {

    color:var(--red);

}





/* PEOPLE */


.people {

    text-align:center;

}



.people h2 {

    font-size:38px;

    margin-bottom:40px;

}



.people-container {

    display:flex;

    gap:25px;

}



.person-card {

    flex:1;

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

    padding:20px;

    border-radius:25px;

    border:2px solid rgba(57,20,26,.08);

}



.person-card img {

    width:100%;

    aspect-ratio:3/4;

    object-fit:cover;

    border-radius:20px;

}



.person-card h3 {

    margin-top:8px;

    font-size:22px;

}



.person-card p {

    font-size:16px;

}





/* MEMBER LIST */


.member-list-section {

    padding-top:10px;
    padding-bottom:10px;

}



.member-list-box {

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

    border:2px solid rgba(217,79,79,.15);

    border-radius:30px;

    padding:40px;

    text-align:center;

    box-shadow:0 10px 30px rgba(57,20,26,.05);

}



.member-list-box h2 {

    font-size:35px;

    margin-bottom:8px;

}



.member-list-description {

    font-size:14px;

    margin-bottom:30px;

    opacity:.75;

}



.member-grid {

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:12px;

}



.member-button {

    border:1.5px solid rgba(217,79,79,.22);

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

    color:var(--wine);

    font-family:"Poppins",sans-serif;

    font-size:14px;

    font-weight:600;

    padding:12px 10px;

    border-radius:14px;

    cursor:pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease;

}



.member-button:hover {

    transform:translateY(-2px);

    background:var(--paper);

    border-color:var(--pink);

}



.member-button:active {

    transform:scale(.97);

}





/* SWEETALERT */


.member-popup {

    border-radius:25px !important;

    background:var(--paper) !important;

    color:var(--wine) !important;

    padding:25px !important;

}



.member-popup-title {

    color:var(--wine) !important;

    font-family:"Poppins",sans-serif !important;

    font-size:26px !important;

    font-weight:700 !important;

}



.member-popup-html {

    color:var(--wine) !important;

    font-family:"Poppins",sans-serif !important;

    font-size:16px !important;

}



.member-username {

    display:inline-block;

    margin-top:5px;

    font-weight:600;

    color:var(--red);

}





/* BOX */


.box {

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

    padding:45px;

    border-radius:30px;

    margin-top:40px;

    border:2px solid rgba(217,79,79,.15);

}



.box h2 {

    text-align:center;

    font-size:35px;

    margin-bottom:25px;

}



li {

    margin-bottom:15px;

}





/* EXTENSION */


.extension {

    text-align:center;

}



.extension a {

    display:inline-block;

    margin-top:25px;

    padding:15px 40px;

    background:var(--wine);

    color:white;

    border-radius:50px;

    text-decoration:none;

    transition:.3s;

}



.extension a:hover {

    background:var(--red);

}






/* MOBILE */


@media (max-width:700px){


    .title-logo {

        width:170px;

    }



    .story-container {

        flex-direction:column;

        gap:25px;

        padding:20px;

        overflow-x:hidden;

    }



    .story-text {

        width:100%;

        min-width:0;

    }



    .story-text h2 {

        font-size:25px;

    }



    .story-text p {

        font-size:14px;

        line-height:1.6;

    }



    .interactive {

        width:100%;

        min-width:0;

        flex-direction:column;

    }



    .small-logo {

        width:90px;

    }



    .love-box {

        padding:15px;

    }



    .love-box h2 {

        font-size:20px;

    }



    .heart {

        font-size:30px;

    }



    /* FOTO BISA SWIPE */


    .people-container {

        display:flex;

        flex-wrap:nowrap;

        overflow-x:auto;

        gap:20px;

        padding-bottom:15px;

        scroll-snap-type:x mandatory;

        -webkit-overflow-scrolling:touch;

    }



    .person-card {

        flex:0 0 220px;

        scroll-snap-align:start;

    }



    .people-container::-webkit-scrollbar {

        display:none;

    }



    /* MEMBER LIST MOBILE */


    .member-list-box {

        padding:25px 15px;

        border-radius:25px;

    }



    .member-list-box h2 {

        font-size:27px;

    }



    .member-list-description {

        font-size:12px;

        margin-bottom:22px;

    }



    .member-grid {

        grid-template-columns:repeat(2,1fr);

        gap:9px;

    }



    .member-button {

        font-size:12px;

        padding:10px 6px;

        border-radius:12px;

    }



    .member-popup {

        width:85% !important;

        padding:20px !important;

    }



    .member-popup-title {

        font-size:22px !important;

    }



    .member-popup-html {

        font-size:14px !important;

    }



}