/* Contact-specific only – all global moved out */
.contact-container { max-width: 800px; margin: 0 auto; padding: 40px 20px; display: flex; flex-direction: column; gap: 40px; }
.contact-info { flex: 1; min-width: 300px; }
.contact-form { flex: 1; min-width: 300px; }
.contact-form input, .contact-form textarea { width: 100%; margin-bottom: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 8px; }
.contact-form textarea { height: 150px; resize: vertical; }
.contact-buttons { display: flex; gap: 20px; }
.contact-buttons button { flex: 1; padding: 12px; border-radius: 22px; cursor: pointer; }
.cancel-btn { background: #ddd; color: #333; border: none; }
.submit-btn { background: linear-gradient(135deg, #36d1dc, #5b86e5); color: white; border: none; }
.contact-info h2, .contact-form h2 {
  text-align: left;
}
.contact-info iframe {
  display: block;
  margin: 0 auto;
}
/* Contact-specific navbar tweaks for white bg contrast */
.navbar {
  background: white; /* Make navbar solid white for better separation from content */
}
.nav-links .nav-link-item {
  color: black; /* Already in global, but reinforce for consistency */
}
.nav-btn-outline {
  background: linear-gradient(90deg, #36d1dc 0%, #5b86e5 100%); /* Solid gradient for Get Started */
  color: white !important;
  border: none;
}
.nav-btn-outline:hover {
  box-shadow: 0 5px 20px rgba(91, 134, 229, 0.4); /* Shadow on hover */
}
.nav-btn {
  border: 2px solid #2d9be4; /* Outline blue for Log In */
  color: #2d9be4 !important; /* Blue text, override global !important */
  background: transparent;
}
.nav-btn:hover {
  background: linear-gradient(90deg, #36d1dc 0%, #5b86e5 100%);
  color: white !important;
  border-color: transparent; /* Hide border on hover for clean gradient */
}
.nav-btn svg {
  color: #2d9be4; /* Ensure arrow matches blue */
}
.nav-btn:hover svg {
  color: white; /* Arrow white on hover */
}