:root{
	--pink: #e79796;
	--cream: #f8f1e6;
	--pale: #f4cfc7;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	background:var(--pink);
}

.menu-icon{
	display:flex;
	flex-direction:column;
	gap:4px;
	cursor:pointer;
}

.menu-icon span{
	width:25px;
	height:3px;
	background:#333;
	border-radius:2px;
}

.app{
	min-height:100vh;
	display:flex;
	flex-direction:column;
	align-items:center;
}

.top-strip{
	width:100%;
	height:92px;
	background:var(--cream);
	display:flex;
	align-items:center;
}

.logo{
	width:40px;
	height:40px;
	object-fit:cover;
	border-radius:50%;
	justify-content:center
}


.nav{
	width:100%;
	display:flex;
	justify-content:space-between; 
	align-items:center;
	padding:0 20px;
}


.nav-links { 
	text-decoration:none;
	color:#333; 
	font-weight:500;
	display:flex;
	gap:20px;
	align-items:center;
	font-size:14px;
}

.nav-links a{
	text-decoration:none;
	color:#333;
	font-weight:500;
}

.nav-links a:hover{
	opacity:0.7;
}


.pink-area{
	width:100%;
	padding:18px 20px 48px;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	align-items:center;
}

.cards{
	width:100%;
	display:flex;
	gap:16px;
	justify-content:space-between;
	margin-top:10px;
}

.card{
	background:var(--cream);
	flex:1 1 0;
	border-radius:8px;
	display:flex;
	align-items:flex-end;
	justify-content:center;
	padding-bottom:20px;
	flex-direction: column;   
	align-items: flex-start;  
	padding:20px;             
}

.card h3{
	margin:0 0 8px;
	font-size:16px;
}

.card p{
	margin:0;
	font-size:14px;
	line-height:1.4;
}

.card img{
	width:100%;
	height:80px;
	object-fit:cover;
	border-radius:6px;
	margin-bottom:10px;
}



.card-pill{
	width:78px;
	height:24px;
	background:var(--pale);
	border-radius:8px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.card-pill h3{
	margin:0;

}


.center-pill{
	width:150px;
	height:21px;
	background:var(--cream);
	border-radius:8px;
	margin:20px 0;
	display:flex;
	align-items:center;
	justify-content:center;
}

.large-card{
	width:90%;
	background:var(--pale);
	height:302px;
	border-radius:8px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding-bottom:40px;
	margin-top:18px;
	flex-direction: column; 
	padding:20px;             
}

.large-card img{
	width:100%;
	max-width:400px;
	height:150px;
	object-fit:cover;
	border-radius:6px;
	margin-bottom:10px;
}

.large-pill{
	width:150px;
	height:30px;
	background:var(--cream);
	border-radius:8px;

	display:flex;
	align-items:center;
	justify-content:center;
}

.large-pill h2{
	margin:0;
	font-size:14px;
}

.bottom-cta{
	width:65%;
	background:var(--cream);
	border-radius:8px;
	margin-top:36px;
	display:flex;
	flex-direction: column;   
	align-items:center;
	justify-content:center;
	padding:20px;
	text-align:center;
}

.bottom-cta img{
	width:100%;
	max-width:300px;
	height:120px;
	object-fit:cover;
	border-radius:6px;
	margin-bottom:10px;
}


.cta-pill{
	width:160px;
	height:20px;
	background:var(--pale);
	border-radius:12px;

	display:flex;
	align-items:center;
	justify-content:center;
}

.cta-pill h3{
	margin:0;
	font-size:14px;
}
@media (min-width:560px){
	.pink-area{padding-left:32px;padding-right:32px}
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}


.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
}

.column {
  float: left;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
}


.row:after {
  content: "";
  display: table;
  clear: both;
}


.menu-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr); 
  gap:20px;
  padding:20px;
}

.menu-item{
  background:var(--cream);
  padding:20px;
  border-radius:8px;
  text-align:center;
  color:#333;
}

.menu-card{
  background:var(--cream);
  padding:20px;
  border-radius:8px;
  text-align:center;
  color:#333;
}

.menu-item button{
  margin-top:10px;
  padding:8px 12px;
  border:none;
  border-radius:6px;
  background:#333;
  color:white;
  cursor:pointer;
}

.menu-item button:hover{
  opacity:0.8;
}

.section-title{
  width:100%;
  max-width:1000px;
  margin:30px 0 10px;
  font-size:20px;
  font-weight:600;
  color:#333;
}


@media screen and (max-width: 600px) {
  .column, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

@media (max-width: 600px){

.menu-icon{
	display:flex;
}

  .nav-links{
    display:none;
    flex-direction:column;
    position:absolute;
    top:92px;
	left;0
    right:0;
    background:var(--cream);
    width:100%;
    padding:20px;
	z-index:1000;
  }

  .nav-links.active{
    display:flex;
  }


  .cards{
    flex-direction:column;
  }


  .large-card{
    width:100%;
  }

 
  .bottom-cta{
    width:100%;
  }


  .menu-grid{
    grid-template-columns: 1fr;
  }

}