body{
    font-family: "mrs-eaves-xl-serif", serif;
    font-weight: 400;
    font-style: normal;
    font-size:1.2em;
    line-height: 1.5em;
    color: #3E4855;
}
button{font-family: "mrs-eaves-xl-serif", serif;}
.image-rounded{border-radius: 12px;}
.is-royal-orchard { color: #5F6D59; }
.has-background-royal-orchard { background-color: #5F6D59; }
.is-starless-night { color: #3E4855; }
.has-background-starless-night { background-color: #3E4855; }
.is-eucalyptus { color: #88927E; }
.has-background-eucalyptus { background-color: #88927E; }
.is-gallery-white { color: #EAEBE4; }
.has-background-gallery-white { background-color: #EAEBE4; }


.navbar-link {
    color: #EAEBE4;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.logo {
    font-family: "latienne-pro", serif;
    font-weight: 700;
    font-style: italic;
    color: #EAEBE4;
}
.hero{
    background-image: url("../img/hero-background.jpg");
    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center center;
}
.icon-tabler{height:1.8em;width:1.8em;}
a.navbar-item:hover{color:#5F6D59;
}
a.navbar-item:active{color: #88927E;}
a.navbar-item:visited{color: #5F6D59;}
.buttons .button{transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;}
.buttons .button:hover{
    color: #EAEBE4;
    background-color: #88927E;
}
.button.is-large{transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;}
.button.is-large:hover{
    color: #EAEBE4;
    background-color: #88927E;
}
.button.is-large:active{
    color: #EAEBE4;
    background-color: #88927E;
}
.fade-up {
    opacity: 0; /* Start hidden */
    transform: translateY(50px); /* Start slightly below */
    visibility: hidden; /* Prevent flickering */
}

.navbar-menu{display: inherit;}
@media screen and (max-width: 1024px) { /* Adjust for tablets and below */
    .navbar {
        position: fixed; /* Keeps navbar fixed at the top */
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10;
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); /* Adds depth */
    }

    .hero {
        margin-top: 56px; /* Push hero down to prevent overlap */
    }

    .navbar-menu {
        position: absolute;
        top: 100%; /* Ensures the menu appears right below the navbar */
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        display: none; /* Initially hidden */
    }
    .hero{margin-top:80px;}
}