/* Reset */ * { padding: 0; box-sizing: border-box; } body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background: #f9fafb; margin: 0; } :root { --primary-orange: #020180; --primary-red: #dc2626; --light-orange: #dcdcec; --light-red: #fef2f2; } /* Section1 Parallax/Animated Backgrounds */ .section1 { position: relative; min-height: 700px; overflow: hidden; width: 100vw; display: flex; flex-direction: column; justify-content: center; align-items: center; transform-style: preserve-3d; --bg-scale: 1; /* Default scale */ } .section1::before, .section1::after, .section1 div::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: forwards; animation-duration: 12s; animation-delay: 1s; transition: opacity 0.5s ease-in-out, transform 0.6s cubic-bezier(0.5, 3, 0.5, 2); z-index: -1; will-change: transform; transform: scale(var(--bg-scale)); } /* ... (rest of your background and animation code stays unchanged) ... */ /* Content styles */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center; } /* Modal Card */ .modal-content { background: white; padding: 40px; border-radius: 16px; text-align: center; width: 600px; max-width: 90%; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal-content h2 { margin-bottom: 30px; font-size: 24px; font-weight: 700; color: #222; } /* Role Options */ .role-container { display: flex; justify-content: space-around; gap: 30px; } .role-card { background: #f8f9fc; padding: 20px; border-radius: 12px; text-align: center; width: 220px; transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; } .role-card:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .role-card img { width: 80px; margin-bottom: 15px; } .role-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 12px; color: #0a2d82; } /* Add this to your CSS file or inside