body, html { height: 100%; font-family: 'Arial', sans-serif; }
	.hero-image { 
		background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://source.unsplash.com/random/1920x1080?coding');
		height: 40%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
	}
	.hero-text { 
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
	}
	.w3-bar .w3-bar-item { transition: background-color 0.3s; }
	.w3-bar .w3-bar-item:hover { background-color: #f1f1f1; }
	.card-hover:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.2); }