body {
margin: 0;
font-family: Calibri, sans-serif;
color: #00231c;
background-color: #BDD4DA;
}

a {
text-decoration: none;
color: #00231C;
}

header {
background-color: #014038;
color: white;
padding: 1rem;
}

.header-container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}

.branding {
display: flex;
align-items: center;
gap: 1rem;
}

.logo img {
height: 50px;
}

nav ul {
list-style: none;
display: flex;
gap: 1rem;
padding: 0;
margin: 0;
}

nav a {
color: white;
font-weight: bold;
}

.cart-button-nav {
margin-left: 10rem;
}

.cart-button-nav button {
background-color: #F7F7F7;
color: #00231c;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
}

.cart-modal {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
}

.cart-modal.hidden {
display: none;
}

.cart-modal-content {
background-color: #fff;
padding: 2rem;
border-radius: 10px;
width: 90%;
max-width: 500px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
text-align: center;
position: relative;
}

.cart-modal-close-btn {
position: absolute;
right: 1rem;
top: 1rem;
font-size: 1.5rem;
cursor: pointer;
color: #444;
}

.hero {
text-align: center;
padding: 3rem 1rem;
background-color: #96BAA0;
}

.hero a {
display: inline-block;
background-color: #F0C06D;
padding: 0.75rem 1.5rem;
margin-top: 1rem;
border-radius: 6px;
color: #00231C;
font-weight: bold;
}