* { margin: 0; padding: 0; box-sizing: border-box; }  :root { --primary: #FF6B35; --secondary: #4CAF50; --accent: #FF9F1C; --light: #F7F7F7; --dark: #333333; --text: #4A4A4A; --shadow: 0 4px 12px rgba(0,0,0,0.08); --transition: all 0.3s ease; }  body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--text); background-color: #fafafa; padding-bottom: 50px; }  h1, h2, h3, h4 { line-height: 1.2; margin-bottom: 1rem; font-weight: 700; }    h2 { font-size: 2rem; color: #2D5D7C; position: relative; padding-bottom: 0.5rem; }  h2:after { content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 4px; background: var(--accent); border-radius: 2px; }  h3 { font-size: 1.5rem; color: #2D5D7C; margin: 1.5rem 0 1rem; }  p { margin-bottom: 1rem; font-size: 1.2rem; opacity: 0.9; }  .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 3.1rem; margin-top:3rem; }     main { padding: 3rem 0; }  .intro { text-align: left; max-width: 1200px; margin: 2rem auto 3rem; padding: 0 2rem; }   .generator-container { background: white; border-radius: 16px; overflow: hidden; margin-bottom: 3rem; }  .generator-header { color: black; padding:2rem; text-align: left; }  .generator-body { padding: 2rem; }  .generator-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }  .control-group { display: flex; flex-direction: column; }  label { margin-bottom: 0.5rem; font-weight: 600; color: var(--dark); }  select { padding: 0.8rem; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; background-color: white; transition: var(--transition); }  select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2); }  .generate-btn { background: linear-gradient(to right, var(--primary), #E74C3C); color: white; border: none; padding: 1.2rem 2rem; font-size: 1.2rem; font-weight: 600; border-radius: 50px; cursor: pointer; display: block; margin: 0 auto; transition: var(--transition); box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3); width: 100%; max-width: 300px; }  .generate-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4); }  .generate-btn:active { transform: translateY(0); }  /* Results Section - Two Different Layouts */ .results-container { margin-top: 2rem; }   .food-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.5rem; display: none; }  .food-card { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: var(--shadow); transition: var(--transition); height: 100%; }  .food-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }  .food-card-title { font-size: 1.4rem; color: var(--dark); margin-bottom: 0.5rem; }  .food-card-description { color: var(--text); font-size: 1rem; }  .cooking-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1.5rem; display: none; } .faq-section{ padding:0 2rem; margin-top: 2rem; } .cooking-card { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: var(--shadow); transition: var(--transition); height: 100%; }  .cooking-card:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.1); }  .cooking-card-title { font-size: 1.6rem; color: var(--primary); margin-bottom: 0.8rem; }  .generator-section{ padding: 0 2rem; }  .cooking-card-description { margin-bottom: 1.2rem; font-size: 1.1rem; }  .recipe-steps { text-align: left; }  .recipe-steps h3 { font-size: 1.3rem; margin-bottom: 0.8rem; color: var(--dark); }  .step { display: flex; margin-bottom: 0.8rem; }  .step-number { background: var(--primary); color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 8px; flex-shrink: 0; font-weight: bold; font-size: 0.85rem; }    .feature-icon { font-size: 2.5rem; color: var(--primary); margin-bottom: 1rem; }  /* FAQ Section */ .faq-container { margin: 2rem auto; }  .faq-item { background: white; border-radius: 10px; margin-bottom: 1rem; overflow: hidden; box-shadow: var(--shadow); }  .faq-question { padding: 1.2rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }  .faq-answer { padding: 0 1.2rem; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }  .faq-item.active .faq-answer { padding: 0 1.2rem 1.2rem; max-height: 500px; }  .faq-toggle { font-size: 1.5rem; }  /* Call to Action */ .cta-section { color: black; border-radius: 16px; padding: 3rem; text-align: center; margin: 3rem 0; }  .cta-title { font-size: 2.2rem; margin-bottom: 1.5rem; } .cta-btn { background: #2D5D7C; color: white; border: none; padding: 1rem 2rem; font-size: 1.2rem; font-weight: 600; border-radius: 50px; cursor: pointer; transition: var(--transition); display: inline-block; text-decoration: none; }  .cta-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.2); }   footer { text-align: center; color: var(--text); padding: 2rem 0; margin-top: 2rem; border-top: 1px solid #eee; }    @media (max-width: 768px) { h1 { font-size: 2.2rem; }  h2 { font-size: 1.8rem; } .intro{ padding: 0; margin: 1rem auto 1rem; } .container{ padding: 0 1rem; }  .mypd{ padding: 0 1rem; }  .faq-section{ padding: 0 1rem; } .generator-section{ padding: 1rem 0; margin-top: 0rem; } .generator-body { padding: 1.5rem; }  .generator-controls { grid-template-columns: 1fr; }  .food-grid { grid-template-columns: 1fr; }  .cooking-layout { grid-template-columns: 1fr; } }  /* Animation for the spinning effect */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } he .spinning { animation: spin 0.6s linear; }   .pulse { animation: pulse 2s infinite; }  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(255, 107, 53, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); } }   .food-grid, .cooking-layout { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }  .food-grid.active, .cooking-layout.active { opacity: 1; pointer-events: all; }