Spaces:
Running
Running
/* Contact Us Page Styles */ | |
/* Navigation Links */ | |
.nav-link-about { | |
position: relative; | |
padding-bottom: 5px; | |
} | |
.nav-link-about::after { | |
content: ''; | |
position: absolute; | |
width: 0; | |
height: 2px; | |
bottom: 0; | |
left: 0; | |
background-color: #2563eb; /* blue-600 */ | |
transition: width 0.3s ease; | |
} | |
.nav-link-about:hover::after { | |
width: 100%; | |
} | |
/* Contact Information Icons */ | |
.contact-icon { | |
transition: transform 0.3s ease; | |
} | |
.contact-icon:hover { | |
transform: scale(1.1); | |
} | |
/* Form Elements */ | |
input:focus, textarea:focus { | |
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); | |
} | |
button[type="submit"] { | |
transition: transform 0.3s ease, background-color 0.3s ease; | |
} | |
button[type="submit"]:hover { | |
transform: translateY(-2px); | |
} | |
button[type="submit"]:active { | |
transform: translateY(0); | |
} | |
/* FAQ Cards */ | |
.faq-card { | |
transition: transform 0.3s ease, box-shadow 0.3s ease; | |
} | |
.faq-card:hover { | |
transform: translateY(-5px); | |
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
} | |
/* Social Media Icons */ | |
.social-icon { | |
transition: transform 0.3s ease, background-color 0.3s ease; | |
} | |
.social-icon:hover { | |
transform: rotate(15deg); | |
} | |
/* Map Container */ | |
.map-container { | |
transition: box-shadow 0.3s ease; | |
} | |
.map-container:hover { | |
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
} | |
/* Responsive Adjustments */ | |
@media (max-width: 768px) { | |
.contact-section { | |
flex-direction: column; | |
} | |
.contact-info, .contact-form { | |
width: 100%; | |
} | |
.faq-grid { | |
grid-template-columns: 1fr; | |
} | |
} | |
/* Footer Newsletter Form */ | |
.newsletter-form { | |
transition: transform 0.3s ease; | |
} | |
.newsletter-form:focus-within { | |
transform: scale(1.02); | |
} | |
/* Quick Links Animation */ | |
.quick-link { | |
transition: transform 0.3s ease, color 0.3s ease; | |
} | |
.quick-link:hover { | |
transform: translateX(5px); | |
} |