.qcfd-container { margin: 0 auto; padding: 0px 8%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #333; background: linear-gradient(180deg, #f9fafc 0%, #f0f4f8 100%); border-radius: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); padding-bottom:40px; }  .qcfd-main-title { text-align: center; font-size: 2.5rem; margin: 40px 0 60px; color: #2c3e50; font-weight: 600; padding: 0 20px; }  .qcfd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; padding: 10px; }  .qcfd-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; }  .qcfd-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; }  .qcfd-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }  .qcfd-image { width: 100%; height: 220px; object-fit: cover; background-color: #f8f9fa; }  .qcfd-card-content { padding: 25px; }  .qcfd-card-title { font-size: 1.4rem; margin: 0 0 15px; color: #2c3e50; font-weight: 600; }  .qcfd-card-desc { font-size: 1rem; line-height: 1.6; color: #666; margin: 0; }  .qcfd-card.aerodynamic::before { background-color: #3498db; }  .qcfd-card.maritime::before { background-color: #2ecc71; }  .qcfd-card.civil::before { background-color: #f39c12; }  .qcfd-card.weather::before { background-color: #9b59b6; }  @media (max-width: 768px) { .qcfd-main-title { font-size: 2rem; margin: 30px 0 40px; }  .qcfd-grid { gap: 20px; }  .qcfd-card-content { padding: 20px; }  .qcfd-container { padding: 15px; margin: 10px; }  .qcfd-container { padding: 0px 5%; } }