* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: 'Georgia', serif; line-height: 1.7; color: #3a4a3a; background: linear-gradient(to bottom, #f5f8f0 0%, #e0e8d0 50%, #c8d8b8 100%);}
.container {max-width: 1200px; margin: 0 auto; padding: 0 20px;}
.navbar {background: linear-gradient(to right, #5a7a4a 0%, #4a6a3a 100%); padding: 1.3rem 0; box-shadow: 0 6px 22px rgba(90, 122, 74, 0.4); position: sticky; top: 0; z-index: 1000;}
.navbar .container {display: flex; justify-content: space-between; align-items: center;}
.logo h1 {color: white; font-size: 2.3rem; font-weight: 700;}
.nav-links {display: flex; list-style: none; gap: 2.3rem;}
.nav-links a {color: #e0e8d0; text-decoration: none; font-weight: 600; transition: all 0.3s;}
.nav-links a:hover {color: white;}
.hero {background: linear-gradient(135deg, #6a8a5a 0%, #5a7a4a 100%); color: white; padding: 115px 20px; text-align: center;}
.hero-content h2 {font-size: 3.2rem; margin-bottom: 1.3rem;}
.hero-content p {font-size: 1.25rem; margin-bottom: 2.3rem; max-width: 700px; margin-left: auto; margin-right: auto;}
.cta-button {display: inline-block; background: white; color: #4a6a3a; padding: 17px 48px; border-radius: 8px; text-decoration: none; font-weight: 700; transition: all 0.3s; border: 3px solid #c8d8b8;}
.cta-button:hover {transform: translateY(-6px);}
.recipes-section {padding: 85px 20px;}
.section-title {text-align: center; font-size: 3rem; margin-bottom: 3.5rem; color: #4a6a3a;}
.recipe-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2.5rem;}
.recipe-card {background: white; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 32px rgba(90, 122, 74, 0.2); transition: all 0.3s; border: 3px solid #c8d8b8; cursor: pointer;}
.recipe-card:hover {transform: translateY(-10px);}
.recipe-card img {width: 100%; height: 250px; object-fit: cover;}
.recipe-content {padding: 2rem;}
.recipe-content h3 {font-size: 1.5rem; margin-bottom: 0.7rem; color: #4a6a3a;}
.recipe-content p {color: #5a7a5a; margin-bottom: 1.2rem;}
.recipe-meta {display: flex; gap: 1.8rem; color: #5a7a4a; font-weight: 600;}
.view-recipe-btn {margin-top: 1.2rem; padding: 13px 32px; background: linear-gradient(to right, #6a8a5a 0%, #5a7a4a 100%); color: white; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; font-family: inherit;}
.recipe-details {max-height: 0; overflow: hidden; transition: max-height 0.5s; background: #f5f8f0; border-radius: 12px;}
.recipe-details.active {max-height: 2000px; padding: 2.5rem 2rem; margin-top: 1.2rem;}
.recipe-section {margin-bottom: 2rem;} .recipe-section:last-child {margin-bottom: 0;}
.recipe-section h4 {color: #4a6a3a; font-size: 1.3rem; margin-bottom: 1.2rem;}
.recipe-section ul, .recipe-section ol {padding-left: 1.8rem; color: #3a4a3a;}
.recipe-section li {margin-bottom: 0.8rem;}
footer {background: linear-gradient(to right, #5a7a4a 0%, #4a6a3a 100%); color: #e0e8d0; padding: 4rem 20px 2rem;}
.footer-content {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2.5rem; margin-bottom: 2.5rem;}
.footer-section h3, .footer-section h4 {margin-bottom: 1.2rem; color: white;}
.footer-section ul {list-style: none;} .footer-section ul li {margin-bottom: 0.7rem;}
.footer-section a {color: #c8d8b8; text-decoration: none;} .footer-section a:hover {color: white;}
.copyright {text-align: center; padding-top: 2.5rem; border-top: 2px solid rgba(224, 232, 208, 0.3);}
@media (max-width: 768px) {.navbar .container {flex-direction: column; gap: 1rem;} .nav-links {flex-wrap: wrap; justify-content: center; gap: 1rem;} .hero-content h2 {font-size: 2.2rem;} .recipe-grid {grid-template-columns: 1fr;}}