/* Contact Page Custom Styles */

/* General Section Styling */
.contact-section-bg {
  background: linear-gradient(120deg, #b2f1e6 0%, #fff6c1 50%, #ffd1e6 100%);
  padding: 40px 0 60px 0;
  position: relative;
}
.contact-section-bg::after {
  display: none !important;
}
.contact-section-bg > * {
  position: relative;
  z-index: 1;
}

/* Clean, modern card style for contact form, matching teaching-value-card */
.contact-form-card {
  background: var(--light, #f8f9fa);
  border-radius: 24px;
  border: 2.5px solid var(--primary, #20bfa9);
  box-shadow: 0 4px 18px rgba(0,57,79,0.10);
  padding: 40px 32px 32px 32px;
  margin-bottom: 32px;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.18s;
}
.contact-form-card:hover {
  box-shadow: 0 8px 32px rgba(0,57,79,0.16);
  border-color: var(--accent, #f77ca2);
  transform: translateY(-4px) scale(1.02);
  z-index: 2;
}

.contact-form .form-control,
.contact-form select.form-control {
  border-radius: 16px;
  border: 2px solid var(--primary, #20bfa9);
  min-height: 48px;
  font-size: 1.08rem;
  box-shadow: 0 2px 8px rgba(0,57,79,0.04);
  transition: border-color 0.18s, box-shadow 0.18s;
  margin-bottom: 18px;
  background: #fff;
}
.contact-form .form-control:focus,
.contact-form select.form-control:focus {
  border-color: var(--accent, #f77ca2);
  box-shadow: 0 4px 18px rgba(247,124,162,0.13);
  outline: none;
}

.contact-form select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  padding-right: 2.5rem;
}

.contact-btn-animated {
  background: #fff9e1 !important;
  color: #00394f !important;
  border: 2px solid #20bfa9 !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s !important;
  box-shadow: 0 2px 8px rgba(32,191,169,0.1) !important;
}
.contact-btn-animated:hover, .contact-btn-animated:focus {
  background: #fff9e1 !important;
  border-color: #f77ca2 !important;
  color: #f77ca2 !important;
  box-shadow: 0 4px 16px rgba(247,124,162,0.2) !important;
}

@media (max-width: 767px) {
  .contact-form-card {
    padding: 24px 8px;
    border-radius: 14px;
  }
}

/* Remove previous badge and animation styles */
.contact-emoji-badge, .contact-anim, .contact-anim-1, .contact-anim-2, .contact-anim-3, .contact-anim-4, .contact-anim-5, .contact-anim-6, .contact-anim-7, .contact-anim-8 {
  display: none !important;
}
.floating-label-group label,
.floating-label-group input:focus + label,
.floating-label-group input:not(:placeholder-shown) + label,
.floating-label-group textarea:focus + label,
.floating-label-group textarea:not(:placeholder-shown) + label,
.floating-label-group select:focus + label,
.floating-label-group select:not([value=""]) + label {
  display: none !important;
}

/* Section Title Styling */
.contact-section-title {
  font-family: 'Handlee', cursive;
  color: #00897b;
  font-size: 2.2rem;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.contact-section-subtitle {
  color: #26a69a;
  font-size: 1.1rem;
  margin-bottom: 24px;
  font-weight: 500;
}

/* --- Unique French Touch Contact Form Enhancements --- */

/* Animated Bonjour Script */
.contact-bonjour-script {
  font-family: 'Handlee', cursive;
  font-size: 2.3rem;
  color: #b85a8c;
  margin-bottom: 0.5rem;
  animation: bonjour-fadein 1.2s cubic-bezier(.68,-0.55,.27,1.55) 0.2s both;
  letter-spacing: 2px;
}
@keyframes bonjour-fadein {
  0% { opacity: 0; transform: translateY(-30px) scale(0.8) rotate(-8deg); }
  60% { opacity: 1; transform: translateY(8px) scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* Tricolore underline (unique for contact) */
.contact-tricolore-underline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  margin: 0 auto 18px auto;
  height: 10px;
}
.tricolore-bar {
  display: inline-block;
  width: 36px;
  height: 8px;
  border-radius: 4px;
  animation: tricolore-slidein 0.7s cubic-bezier(.68,-0.55,.27,1.55) both;
}
.tricolore-blue { background: #0055a4; animation-delay: 0.1s; }
.tricolore-white { background: #fff; animation-delay: 0.25s; }
.tricolore-red { background: #ef4135; animation-delay: 0.4s; }
@keyframes tricolore-slidein {
  0% { opacity: 0; transform: scaleX(0.2) translateY(20px); }
  80% { opacity: 1; transform: scaleX(1.1) translateY(-2px); }
  100% { opacity: 1; transform: scaleX(1) translateY(0); }
}

/* Floating label effect */
.floating-label-group {
  position: relative;
  margin-bottom: 22px;
}
.floating-label-group label {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #b85a8c;
  font-family: 'Handlee', cursive;
  font-size: 1.08rem;
  pointer-events: none;
  background: #fff;
  padding: 0 6px;
  transition: 0.22s cubic-bezier(.68,-0.55,.27,1.55);
  opacity: 0.85;
}
.floating-label-group input:focus + label,
.floating-label-group input:not(:placeholder-shown) + label,
.floating-label-group textarea:focus + label,
.floating-label-group textarea:not(:placeholder-shown) + label,
.floating-label-group select:focus + label,
.floating-label-group select:not([value=""]) + label {
  top: -12px;
  left: 12px;
  font-size: 0.98rem;
  color: #0055a4;
  background: #fff6fa;
  opacity: 1;
  padding: 0 8px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(184,90,140,0.07);
}
.floating-label-group input,
.floating-label-group textarea,
.floating-label-group select {
  background: #fff;
  border: 2px solid #e0f7fa;
  border-radius: 16px;
  min-height: 48px;
  font-size: 1.08rem;
  transition: border-color 0.22s, box-shadow 0.22s;
  box-shadow: 0 2px 12px rgba(32,191,169,0.04);
  padding-left: 18px;
  padding-right: 18px;
}
.floating-label-group input:focus,
.floating-label-group textarea:focus,
.floating-label-group select:focus {
  border-color: #b85a8c;
  box-shadow: 0 4px 18px rgba(184,90,140,0.13);
  outline: none;
}

/* Unique select styling */
.floating-label-group select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: linear-gradient(90deg, #fff6fa 60%, #e0f7fa 100%);
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 1.2em;
  padding-right: 2.5rem;
}

/* Animated form card */
.contact-form-card {
  animation: contact-card-fadein 1.1s cubic-bezier(.68,-0.55,.27,1.55) 0.3s both;
  border: 2.5px solid #b85a8c;
  box-shadow: 0 8px 32px rgba(32,191,169,0.10), 0 2px 12px rgba(184,90,140,0.08);
}
@keyframes contact-card-fadein {
  0% { opacity: 0; transform: translateY(40px) scale(0.97); }
  80% { opacity: 1; transform: translateY(-6px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Animated button with ripple and tricolore border */
.contact-btn-animated {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #0055a4 0%, #fff 50%, #ef4135 100%);
  color: #fff;
  border: 2.5px solid #b85a8c;
  border-radius: 25px;
  font-family: 'Nunito', sans-serif;
  font-size: 1.13rem;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(32,191,169,0.10);
  transition: background 0.22s, box-shadow 0.22s, color 0.22s;
}
.contact-btn-animated:hover, .contact-btn-animated:focus {
  background: linear-gradient(90deg, #ef4135 0%, #fff 50%, #0055a4 100%);
  color: #b85a8c;
  box-shadow: 0 6px 24px rgba(184,90,140,0.18);
}
.contact-btn-animated:active::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  background: rgba(32,191,169,0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: btn-ripple 0.5s linear;
  z-index: 1;
}
@keyframes btn-ripple {
  0% { width: 0; height: 0; opacity: 0.5; }
  80% { width: 180px; height: 180px; opacity: 0.18; }
  100% { width: 240px; height: 240px; opacity: 0; }
}

/* Emoji badge above the form, inspired by teaching-values.css */
.contact-emoji-badge {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #f77ca2 60%, #ffe066 100%);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 4px 18px rgba(0,57,79,0.13);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.3rem;
  margin: -36px auto 18px auto;
  position: relative;
  z-index: 3;
  animation: badge-pop 0.8s cubic-bezier(.68,-0.55,.27,1.55) 0.2s both;
}
@keyframes badge-pop {
  0% { opacity: 0; transform: scale(0.5) translateY(-30px); }
  70% { opacity: 1; transform: scale(1.15) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Staggered animation for form fields */
.contact-anim {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  animation: contact-fadein 0.7s cubic-bezier(.68,-0.55,.27,1.55) forwards;
}
.contact-anim-1 { animation-delay: 0.15s; }
.contact-anim-2 { animation-delay: 0.25s; }
.contact-anim-3 { animation-delay: 0.35s; }
.contact-anim-4 { animation-delay: 0.45s; }
.contact-anim-5 { animation-delay: 0.55s; }
.contact-anim-6 { animation-delay: 0.65s; }
.contact-anim-7 { animation-delay: 0.75s; }
.contact-anim-8 { animation-delay: 0.85s; }
@keyframes contact-fadein {
  0% { opacity: 0; transform: translateY(30px) scale(0.98); }
  80% { opacity: 1; transform: translateY(-4px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Contact page only: section title background matches background yellow and has a border */
.contact-section-bg .section-title span {
  background: #fff6c1 !important;
  border: 2px solid #20bfa9;
  border-radius: 8px;
  padding: 0 12px;
  display: inline-block;
} 

/* Make select placeholder text match input/textarea placeholder style */
.contact-form select.form-control:invalid,
.contact-form select.form-control option[disabled][selected] {
  color: #888;
  font-weight: 400;
  font-family: inherit;
  opacity: 1;
}