body { margin: 0; font-family: 'Inter', sans-serif; background: #f5f7fa; color: #333; } header { background: #004080; color: white; padding: 2rem 1rem; text-align: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } header h1 { margin: 0; font-size: 2.5rem; animation: fadeInDown 1s ease-out; } header p { margin-top: 0.5rem; font-size: 1.2rem; opacity: 0.9; } main { max-width: 900px; margin: 2rem auto; padding: 0 1rem; text-align: center; } iframe { width: 100%; height: 600px; border: none; border-radius: 12px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } iframe:hover { transform: scale(1.01); } .accordion { margin-top: 2rem; text-align: left; } .accordion-item { background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); margin-bottom: 1rem; overflow: hidden; } .accordion-header { padding: 1rem; cursor: pointer; background: #eaf0f8; font-weight: bold; transition: background 0.3s; } .accordion-header:hover { background: #d6e4f0; } .accordion-content { max-height: 0; overflow: hidden; padding: 0 1rem; background: #f9fbfd; transition: max-height 0.4s ease; } .accordion-content p { margin: 1rem 0; } .accordion-item.active .accordion-content { max-height: 200px; } footer { margin-top: 3rem; text-align: center; padding: 1.5rem; background: #004080; color: white; font-size: 0.9rem; } @media (max-width: 600px) { iframe { height: 500px; } header h1 { font-size: 2rem; } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }