html, body { margin: 0; padding: 0; height: 100%; overflow-x: hidden; font-family: 'Roboto', sans-serif; color: #ffffff; } .section { display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #0d0e2e, #2c0e4f); position: relative; overflow: hidden; } .nav { position: fixed; top: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1000; display: flex; justify-content: space-between; padding: 10px 20px; box-sizing: border-box; } .nav a { color: #fff; text-decoration: none; font-size: 16px; transition: all 0.3s ease; } .nav a:hover { transform: scale(1.1); text-shadow: 0 0 10px #ff00ff; } .content-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 20px; border-radius: 10px; max-width: 800px; text-align: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); transition: all 0.3s ease; } .content-card:hover { transform: translateY(-10px); box-shadow: 0 0 30px rgba(128, 0, 128, 0.8); } h1, h2, h3 { font-family: 'Montserrat', sans-serif; font-weight: bold; text-shadow: 0 0 5px #00ffff; } @media (max-width: 768px) { .content-card { padding: 15px; font-size: 14px; } } .particle { position: absolute; width: 10px; height: 10px; background: #00ffff; border-radius: 50%; animation: moveParticle 10s linear infinite; } @keyframes moveParticle { 0% { transform: translateX(-100%) translateY(0); } 100% { transform: translateX(100vw) translateY(100vh); } } .scroll-indicator { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; } .scroll-dot { width: 8px; height: 8px; background: #fff; margin: 5px 0; border-radius: 50%; transition: all 0.3s ease; } .scroll-dot.active { background: #00ffff; transform: scale(1.5); } footer { background: #000; padding: 20px; text-align: center; position: relative; } footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(13,14,46,0.8), rgba(44,14,79,0.8)); mix-blend-mode: overlay; } footer a { color: #00ffff; text-decoration: none; margin: 0 10px; } footer a:hover { text-shadow: 0 0 10px #00ffff; } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 20px; } .gallery img { width: 100%; height: auto; object-fit: cover; border-radius: 10px; transition: all 0.3s ease; } .gallery img:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); } .hidden-menu { position: fixed; bottom: -200px; left: 0; width: 100%; background: #000; padding: 20px; transition: all 0.3s ease; z-index: 999; } .hidden-menu.show { bottom: 0; } .hidden-menu a { display: block; color: #fff; text-decoration: none; padding: 10px 0; } .hidden-menu a:hover { background: #00ffff; color: #000; } .btn { background: linear-gradient(135deg, #00ffff, #ff00ff); color: #000; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: all 0.3s ease; } .btn:hover { transform: scale(1.1); box-shadow: 0 0 20px rgba(0, 255, 255, 0.8); } .animation-fade-in { opacity: 0; transform: translateY(20px); transition: all 0.5s ease; } .animation-fade-in.show { opacity: 1; transform: translateY(0); } .case-study { position: relative; overflow: hidden; } .case-study img { width: 100%; height: auto; display: block; transition: all 0.3s ease; } .case-study::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: all 0.3s ease; } .case-study:hover::before { opacity: 1; } .case-study .info { position: absolute; bottom: -50px; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7); color: #fff; padding: 10px; transition: all 0.3s ease; } .case-study:hover .info { bottom: 0; } @media (min-width: 1200px) { .gallery { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 480px) { .nav { flex-direction: column; } }