body { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; } /* Hero Section Styles */ .hero-section { position: relative; height: 100vh; background: linear-gradient(to right, #4f46e5, #7c3aed); color: white; display: flex; align-items: center; justify-content: center; text-align: center; } .hero-overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.4); } .hero-content { position: relative; z-index: 10; max-width: 1200px; padding: 0 2rem; width: 100%; } .hero-title { font-size: 3.5rem; font-weight: 700; margin-bottom: 1.5rem; line-height: 1.2; } .hero-subtitle { font-size: 1.5rem; margin-bottom: 2rem; max-width: 800px; margin-left: auto; margin-right: auto; } .hero-button { display: inline-flex; align-items: center; background-color: #f59e0b; color: #1f2937; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; transition: background-color 0.3s ease; } .hero-button:hover { background-color: #e6900b; } /* Portfolio Section Enhancements */ #portfolio img { transition: transform 0.5s ease; } #portfolio a { transition: all 0.3s ease; } #portfolio a:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); } /* Responsive adjustments */ @media (max-width: 768px) { .hero-title { font-size: 2.5rem; } .hero-subtitle { font-size: 1.25rem; } } @media (max-width: 480px) { .hero-title { font-size: 2rem; } .hero-subtitle { font-size: 1rem; } }