.banner {
text-align: center;
animation: fadeIn 1.5s ease;
}


.banner h1 {
font-size: 2.5rem;
margin-bottom: 10px;
font-weight: 700;
}


.banner p {
font-size: 1.2rem;
line-height: 1.6;
max-width: 700px;
margin: auto;
opacity: 0;
animation: slideUp 1.2s ease forwards;
animation-delay: 0.5s;
}


.contact-box {
margin-top: 25px;
display: inline-block;
padding: 12px 25px;
border-radius: 8px;
background: white;
color: #0b3d91;
font-size: 1.1rem;
font-weight: 600;
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
transform: translateY(20px);
opacity: 0;
animation: slideUp 1s ease forwards;
animation-delay: 1s;
}


@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}


@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}


/* JS-triggered sparkle effect */
.sparkle {
position: absolute;
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
pointer-events: none;
animation: sparkleAnim 0.8s linear forwards;
}


@keyframes sparkleAnim {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(2.5); opacity: 0; }
}