body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Roboto', 'Helvetica', sans-serif; background: linear-gradient(to bottom, #1B263B, #F7FAFC); color: #333; overflow-x: hidden; } header { position: fixed; top: 0; left: 0; width: 100%; background: rgba(27, 38, 59, 0.9); z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } header nav a { color: #fff; text-decoration: none; margin: 0 15px; font-size: 16px; transition: color 0.3s ease, transform 0.3s ease; } header nav a:hover { color: #FF9A00; transform: scale(1.1); } .hero-section { position: relative; height: 100vh; background: url('https://images.gptkong.com/demo/sample1.png') no-repeat center center/cover, linear-gradient(to bottom, #1B263B, #34C759); display: flex; justify-content: center; align-items: center; color: #fff; text-align: center; overflow: hidden; } .hero-section h1 { font-size: 48px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; animation: fadeIn 2s ease-in-out; } .hero-section p { font-size: 20px; margin-top: 20px; max-width: 600px; line-height: 1.6; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .parallax { background-image: url('https://images.gptkong.com/demo/sample2.png'); height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; } .content-section { padding: 60px 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; background: #F7FAFC; } .card { background: #fff; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 20px; text-align: center; flex: 1 1 calc(33.333% - 40px); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-10px); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15); } .card img { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; margin-bottom: 15px; } .cta-button { display: inline-block; padding: 12px 24px; background: #FF9A00; color: #fff; text-decoration: none; border-radius: 5px; font-size: 16px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .cta-button:hover { transform: scale(1.1); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); } footer { background: #1B263B; color: #fff; padding: 40px 20px; text-align: center; } footer a { color: #FF9A00; text-decoration: none; margin: 0 10px; } footer a:hover { text-decoration: underline; } @media (max-width: 1200px) { .card { flex: 1 1 calc(50% - 40px); } } @media (max-width: 768px) { .card { flex: 1 1 100%; } .hero-section h1 { font-size: 36px; } .hero-section p { font-size: 18px; } } @media (max-width: 480px) { header nav a { font-size: 14px; margin: 0 10px; } }