html {
scroll-behavior: smooth;
} #urlError, #nameError, #emailError,
#urlErrorBottom, #nameErrorBottom, #emailErrorBottom {
color: #ef4444;
font-size: 0.875rem;
margin-top: 0.25rem;
display: none;
animation: fadeIn 0.3s ease-out;
} input:focus {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
transition: all 0.2s ease;
}
input:invalid:not(:focus),
input.border-red-500 {
border-color: #ef4444 !important;
background-color: #fef2f2;
} input[type="checkbox"] {
transition: all 0.2s ease;
}
input[type="checkbox"]:checked {
background-color: #27a8e0;
border-color: #27a8e0;
} @keyframes fadeIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
} @keyframes spin {
to { transform: rotate(360deg); }
}
.animate-spin {
animation: spin 1s linear infinite;
} .bg-green-50 {
background-color: #f0fdf4;
}
.bg-green-100 {
background-color: #dcfce7;
}
.text-green-600 {
color: #16a34a;
}
.text-green-700 {
color: #15803d;
}
.text-green-800 {
color: #166534;
}
.border-green-200 {
border-color: #bbf7d0;
} @media (max-width: 768px) { custom-testimonial-card {
margin-bottom: 3rem;
width: 100%;
} .grid.md\\:grid-cols-3.gap-8 {
row-gap: 3rem;
display: flex;
flex-direction: column;
} .testimonial-card {
padding: 1.5rem;
margin-bottom: 2rem;
} .quote {
font-size: 1rem;
line-height: 1.5;
} .info h3 {
font-size: 1rem;
}
.info p {
font-size: 0.8rem;
} section.min-h-screen {
padding-top: 4rem;
padding-bottom: 4rem;
} .bg-white.p-8.rounded-xl.shadow-xl {
padding: 1.5rem;
} .lg\\:flex.items-center.gap-12 {
flex-direction: column;
gap: 2rem;
} .grid.md\\:grid-cols-3.gap-8 {
grid-template-columns: 1fr;
gap: 2rem;
} h1.text-4xl.sm\\:text-5xl.md\\:text-6xl {
font-size: 2.5rem;
line-height: 1.2;
}
p.text-xl {
font-size: 1.1rem;
} .max-w-7xl.mx-auto.px-4.sm\\:px-6.lg\\:px-8 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
} .cta-button:hover {
box-shadow: 0 20px 25px -5px rgba(0, 86, 179, 0.4);
transform: translateY(-3px);
} .feature-card:hover {
transform: translateY(-5px);
transition: all 0.3s ease;
} img {
filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
transition: all 0.3s ease;
}
img:hover {
filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.15));
} @keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(39, 168, 224, 0.6);
}
70% {
box-shadow: 0 0 0 15px rgba(39, 168, 224, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(39, 168, 224, 0);
}
}
.pulse {
animation: pulse 2s infinite;
} .cta-button-large {
padding: 1.2rem 3rem !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
border-width: 3px !important;
letter-spacing: 0.8px !important;
box-shadow: 0 8px 20px rgba(39, 168, 224, 0.3);
}
.cta-button-glow {
box-shadow: 0 0 25px rgba(39, 168, 224, 0.5);
}