*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(52, 63, 30);
}
body a {
    text-decoration: none;
}
.pageWrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* HEADER */
.homeHeader {
    width: 100%;
    background: rgb(227, 233, 216);
    color: rgb(52, 63, 30);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    border-bottom: 2px solid #d5d4d4;
    position: relative; /* needed for absolute nav on mobile */
}
.headerLogo {
    width: 150px;
}
.headerNav {
    display: flex;          /* hidden by default */
    flex-direction: row;    /* show in a row */
    justify-content: flex-end;
    align-items: center;
    gap: 25px;               /* spacing between links */
    background: none;
    box-shadow: none;
    border: none;
    padding: 0;
    position: static;
    width: auto;              /* space between links */
}

.headerNav a {
    padding: 10px 0;
    text-align: center;
    color: rgb(52, 63, 30);
    text-decoration: none;
}
.headerNav a:hover {
    color: rgb(116, 163, 9);
}

/* Cart + Hamburger icons */
.homeMyCart a {
    color: rgb(52, 63, 30);
}
.contactBttn {
    width: 250px;
    height: 50px;
    border: 2px rgb(92, 134, 7) solid;
    border-radius: 25px;
    color: rgb(52, 63, 30);
    background-color: rgb(227, 233, 216);
}
.contactBttn:hover, .contactBttn span:hover {
    border-color: rgb(112, 163, 9);
    color: rgb(112, 163, 9);
    cursor: pointer;
}
.menuNav {
    background-color: transparent;
    border: none;
    color: rgb(52, 63, 30);
    font-size: 1.5rem;
}
.menuNav:hover {
    color: rgb(112, 163, 9);
    cursor: pointer;
}
.menuNavContainer {
    margin-left: 40px;
}

@media (min-width: 768px) {
    .headerNav {
        display: flex;   /* always show on desktop */
        flex-direction: row;
        position: static;
        background: none;
        box-shadow: none;
        border: none;
        padding: 0;
        width: auto;
        justify-content: flex-end;
        gap: 20px;
    }
    
    .headerNav a {
        padding: 0;
        text-align: left;
    }

    .menuNavContainer {
        display: none; /* hide hamburger on desktop */
    }
}



/* FOOTER */
.homeFooter {
    margin-top: auto;
}
.bottomWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(253, 250, 241);
    padding: 50px;
    gap: 20px;
}
.bottomLogoCont, .bottomSubpages, .bottomIcons  {
    flex: 1;
    /*border: 1px dashed red;*/ 
}
.bottomLogoCont {
    display: flex; 
    flex-direction: column;
    align-items: center;
}
.bottomLogoCont img {
    width: 270px;
}
.bottomLogoCont p {
    font-size: 15px;
}
.bottomNav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.bottomNav a {
    padding: 5px;
    text-decoration: none;
    color: rgb(52, 63, 30);
}
.bottomNav a:hover {
    color: rgb(125, 168, 31);
}
.bottomIcons {
    text-align: center;
    align-self: flex-start;
    padding-top: 10px;
}
.bottomIcons i {
    padding: 10px;
    color: rgb(112, 163, 9);
    font-size: 24px;
}
.bottomIcons i:hover {
    color: rgb(52, 63, 30);
}

.copyright {
    background-color: rgb(227, 233, 216);
    border-top: 1px rgb(186, 192, 171) solid;
    padding: 25px;
}
.copyright p {
    font-size: 12px;
    color: rgb(52, 66, 36);
}