/* =========================
   Contact Section
========================= */

/* Form Controls */
.contact-section .form-control {
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid #ced4da;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box; /* prevents input from overflowing */
  max-width: 100%; /* ensures width does not exceed column */
}

body.dark-mode .contact-section .form-control {
  background-color: #1e1e1e;
  border: 1px solid #444;
  color: #f8f9fa;
}

.contact-section .form-control:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0.5rem 0;
}

/* Light mode (optional tweak, Bootstrap already handles this ok) */
.contact-form ::placeholder {
  color: rgba(0, 0, 0, 0.6);
  opacity: 1; /* make sure it's applied */
}

/* Dark mode */
body.dark-mode .contact-form input::placeholder,
body.dark-mode .contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.7); /* softer white */
  opacity: 1;
}

.contact-icon {
  font-size: 1.5rem; /* default ~1rem, so this makes it bigger */
}

/* Social Icons */
.contact-section .social-icon ion-icon {
  font-size: 1.8rem;
  vertical-align: middle;
  color: inherit;
  transition: transform 0.3s ease, color 0.3s ease, filter 0.3s ease;
}

.contact-section .social-icon:hover ion-icon {
  transform: scale(1.2);
  color: #0d6efd;
  filter: drop-shadow(0 0 6px rgba(13, 110, 253, 0.6));
}

.social-icons a {
  text-decoration: none !important; /* remove underline */
  color: inherit; /* keep icon color consistent */
}

.social-icons a:hover {
  color: #0d6efd; /* or your hover color */
}

/* Button */
.contact-section .btn-primary {
  border-radius: 0.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-section .btn-primary:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.4);
}

@media (max-width: 575.98px) {
  .contact-section .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 1rem; /* optional: reduce spacing for small screens */
  }

  .contact-section .col-12,
  .contact-section .col-md-6,
  .contact-section .col-md-7,
  .contact-section .col-md-5 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}