body, html { 
margin: 0; 
padding: 0; 
height: 100%; 
font-family: 'Segoe UI', sans-serif; 
color: #fff; 
background: url('campus-background.jpg') no-repeat center center/cover; 
} 

.overlay { 
background: rgba(0, 0, 0, 0.5); 
height: 100%; 
display: flex; 
justify-content: center; 
align-items: center; 
text-align: center; 
} 

.content { 
max-width: 600px; 
padding: 2rem; 
} 

h1 { 
font-size: 3rem; 
margin-bottom: 1rem; 
} 

p { 
font-size: 1.25rem; 
margin-bottom: 2rem; 
} 

.button-group { 
display: flex; 
justify-content: center; 
gap: 1.5rem; 
flex-wrap: wrap; 
} 

.btn { 
padding: 1rem 2rem; 
font-size: 1.1rem; 
border: none; 
border-radius: 8px; 
text-decoration: none; 
background-color: #3498db; 
color: #fff; 
transition: background 0.3s, transform 0.3s; 
opacity: 0; 
transform: translateY(20px); 
} 

.btn:hover { 
background-color: #2980b9; 
transform: translateY(-2px); 
} 

.fade-btn.visible { 
opacity: 1; 
transform: translateY(0); 
} 

.delay-1 { 
transition-delay: 0.3s; 
} 
.delay-2 { 
transition-delay: 0.6s; 
} 

.scroll-fade { 
opacity: 0; 
transform: translateY(20px); 
transition: opacity 0.8s ease-out, transform 0.8s ease-out; 
} 

.scroll-fade.visible { 
opacity: 1; 
transform: translateY(0); 
}