/* ===========================
   BUMBY GLOBAL STYLE
=========================== */



* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {


    background:

    var(--cream);


    color:

    var(--dark);


    font-family:

    var(--font-body);


    overflow-x:hidden;


}






img {


    max-width:100%;

    display:block;


}






a {


    text-decoration:none;

    color:inherit;


}







h1,h2,h3 {


    font-family:

    var(--font-title);


    font-weight:

    600;


}





section {


    width:100%;


}






/* HEADER */


.header {


    position:

    fixed;


    top:0;

    left:0;


    width:100%;


    padding:

    25px 6%;


    display:flex;


    justify-content:space-between;


    align-items:center;


    z-index:100;



}



.logo {


    font-family:

    var(--font-title);


    font-size:2.2rem;


    color:

    var(--purple);


}




.header-button {


    background:

    var(--pink);


    padding:

    12px 25px;


    border-radius:

    50px;


    color:white;


    transition:

    var(--transition-fast);


}



.header-button:hover {


    transform:

    translateY(-3px);


    box-shadow:

    var(--shadow-soft);


}






/* FOOTER */


footer {


    padding:

    50px 20px;


    text-align:center;


    color:

    var(--brown);


}



/* ===========================
   SCROLL ANIMATIONS
=========================== */


.content-section,
.menu-card {


    opacity:0;


    transform:

    translateY(40px);


    transition:

    opacity .8s ease,

    transform .8s cubic-bezier(.22,1,.36,1);


}



.visible {


    opacity:1;


    transform:

    translateY(0);


}




.faq-answer {


    max-height:0;


    overflow:hidden;


    transition:

    max-height .5s ease,

    padding .5s ease;


}



.faq-item.open .faq-answer {


    max-height:200px;


}