/* ===== ESTILOS PARA PÁGINA DE CONTACTO - CORREDORA DE SEGUROS DEL SUR ===== */

/* ==== VARIABLES GLOBALES ==== */
:root {
  /* Colores principales */
  --primary-color: #00a651; /* Verde más vibrante */
  --primary-dark: #008a43;
  --primary-light: #e6f7ed;
  --secondary-color: #0063a6; /* Azul corporativo */
  --secondary-dark: #004d80;
  --secondary-light: #e6f2f9;
  --accent-color: #f39c12; /* Naranja para acentos */
  --accent-dark: #d68910;
  --danger-color: #cc0000; /* Rojo para advertencias */
  --danger-dark: #aa0000;
  --danger-light: #fff8f8;
  
  /* Escala de grises */
  --dark-color: #212529;
  --text-color: #3a3a3a;
  --light-color: #ffffff;
  --gray-light: #f8f9fa;
  --gray-lighter: #f2f2f2;
  --gray-medium: #e9ecef;
  --gray-dark: #6c757d;
  
  /* Fuentes */
  --font-primary: 'Montserrat', sans-serif;
  --font-secondary: 'Poppins', sans-serif;
  
  /* Efectos */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.035);
  --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-focus: 0 0 0 4px rgba(0, 166, 81, 0.15);
  
  /* Bordes */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  
  /* Transiciones */
  --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ==== ESTILOS BASE ==== */
body.contacto-page {
  font-family: var(--font-secondary);
  color: var(--dark-color);
  background-color: var(--gray-light);
  background-image: linear-gradient(120deg, #f8f9fa 0%, #ffffff 100%);
  position: relative;
  overflow-x: hidden;
}

body.contacto-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544v2.83L25.456 30l-1.414 1.414L0 7.97v2.828L22.627 33.43l-1.414 1.414L0 13.4v2.83L19.8 35.858l-1.414 1.414L0 18.83v2.828L16.97 40.284l-1.414 1.414L0 24.258v2.83l13.5 13.5-1.414 1.414L0 29.67v2.83l10.672 10.67-1.414 1.415L0 35.1v2.83l7.842 7.843-1.414 1.414L0 40.53v2.83l5.014 5.013-1.414 1.414L0 45.957v2.83l2.184 2.183-1.414 1.414L0 51.385v2.83l28-28L0 54.414v2.83L60 2.544V0H32z' fill='%2328a745' fill-opacity='0.02' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* ==== HEADER DE CONTACTO ==== */
.contact-header {
  position: relative;
  text-align: center;
  padding: 140px 20px 100px;
  background: linear-gradient(135deg, rgba(0, 166, 81, 0.07) 0%, rgba(0, 99, 166, 0.05) 100%);
  overflow: hidden;
}

.contact-header::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200px;
  bottom: -100px;
  left: -50%;
  background-color: var(--light-color);
  border-radius: 50% 50% 0 0;
  z-index: 1;
}

/* Elementos decorativos flotantes */
.contact-header::after {
  content: "";
  position: absolute;
  top: 20%;
  right: 15%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at center, rgba(0, 166, 81, 0.15) 0%, rgba(0, 166, 81, 0) 70%);
  border-radius: 50%;
  animation: float 15s infinite ease-in-out;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-20px, 10px) scale(1.05); }
  50% { transform: translate(10px, -15px) scale(0.95); }
  75% { transform: translate(15px, 5px) scale(1.02); }
}

.contact-header .floating-element {
  position: absolute;
  top: 15%;
  left: 12%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle at center, rgba(0, 99, 166, 0.12) 0%, rgba(0, 99, 166, 0) 70%);
  border-radius: 50%;
  animation: float2 20s infinite ease-in-out;
}

@keyframes float2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(20px, 15px) scale(1.1); }
  66% { transform: translate(-15px, -10px) scale(0.9); }
}

.contact-header h1 {
  font-family: var(--font-primary);
  font-size: 3.8rem;
  font-weight: 800;
  margin-bottom: 35px;
  position: relative;
  display: inline-block;
  color: var(--dark-color);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  z-index: 2;
}

.contact-header h1::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 5px;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  border-radius: 3px;
  transition: width var(--transition-normal);
}

.contact-header h1:hover::after {
  width: 150px;
}

.contact-header h1 span {
  position: relative;
  display: inline-block;
}

.contact-header h1 span::before {
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M9.973 18h4.054c.132-1.202.745-2.194 1.74-3.277.113-.122.832-.867.917-.973a6 6 0 1 0-9.37-.002c.086.107.807.853.918.974.996 1.084 1.609 2.076 1.741 3.278zM14 20h-4v1h4v-1zm-8.246-5a8 8 0 1 1 12.49.002C17.624 15.774 16 17 16 18.5V21a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-2.5C8 17 6.375 15.774 5.754 15z' fill='rgba(0,166,81,0.2)'/%3E%3C/svg%3E");
  opacity: 0.6;
}

.contact-header p {
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--gray-dark);
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding: 0 20px;
  font-weight: 300;
}

/* ==== SECCIÓN PRINCIPAL DE CONTACTO ==== */
.contact-section {
  max-width: 1300px;
  margin: 60px auto 100px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  position: relative;
  z-index: 2;
}

/* Elemento decorativo */
.contact-section::before {
  content: "";
  position: absolute;
  top: -50px;
  left: -100px;
  width: 200px;
  height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M40,100 C40,70 70,40 100,40 C130,40 160,70 160,100 C160,130 130,160 100,160 C70,160 40,130 40,100 Z' fill='none' stroke='%2300a651' stroke-width='1' stroke-dasharray='12,8' opacity='0.2'/%3E%3C/svg%3E");
  z-index: -1;
  animation: rotate 50s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==== COLUMNA IZQUIERDA: FORMULARIO ==== */
.left-column {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.form-wrapper {
  background: var(--light-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
  height: 840px;
  transition: all var(--transition-bounce);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.form-wrapper:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--shadow-lg);
}

.form-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
  z-index: 10;
}

.form-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at bottom right, rgba(0, 166, 81, 0.07) 0%, rgba(0, 166, 81, 0) 70%);
  z-index: 1;
  pointer-events: none;
}

.form-wrapper iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  background-color: var(--light-color);
  position: relative;
  z-index: 2;
}

/* Loader para el formulario */
.loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--light-color);
  z-index: 5;
  transition: opacity var(--transition-normal);
  backdrop-filter: blur(5px);
}

.spinner {
  width: 80px;
  height: 80px;
  margin-bottom: 30px;
  position: relative;
}

.spinner::before,
.spinner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.spinner::before {
  border: 3px solid rgba(0, 166, 81, 0.1);
  border-top-color: var(--primary-color);
  border-left-color: var(--primary-color);
  animation: spin1 1.5s infinite ease-out;
}

.spinner::after {
  border: 3px solid rgba(0, 99, 166, 0.1);
  border-bottom-color: var(--secondary-color);
  border-right-color: var(--secondary-color);
  animation: spin2 1.5s infinite ease-in;
}

@keyframes spin1 {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes spin2 {
  0% { transform: rotate(0deg) scale(1.15); }
  50% { transform: rotate(180deg) scale(1); }
  100% { transform: rotate(360deg) scale(1.15); }
}

.loader p {
  color: var(--text-color);
  font-weight: 500;
  letter-spacing: 0.8px;
  font-size: 1.1rem;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Mensaje importante - Actualizado con botón de siniestro */
.important-message {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background-color: var(--danger-light);
  border: 1px solid rgba(204, 0, 0, 0.1);
  border-left: 5px solid var(--danger-color);
  padding: 24px 30px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: all var(--transition-normal);
}

.important-message:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(204, 0, 0, 0.1);
}

.important-icon {
  font-size: 1.5rem;
  color: var(--danger-color);
  margin-right: 15px;
  flex-shrink: 0;
}

.important-content {
  flex: 1;
}

.important-content p {
  margin: 0 0 15px 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--danger-color);
}

.important-button {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}

.siniestro-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--danger-color);
  color: white;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all var(--transition-bounce);
  box-shadow: 0 4px 10px rgba(204, 0, 0, 0.2);
}

.siniestro-button:hover {
  background-color: var(--danger-dark);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(204, 0, 0, 0.3);
}

.siniestro-button i {
  margin-right: 8px;
}

/* Tarjetas de contacto */
.contact-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

/* Estilos específicos para la tarjeta de WhatsApp */
.whatsapp-card {
  color: inherit;
  cursor: pointer;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background-color: var(--gray-light);
  border-radius: var(--radius-md);
  transition: all var(--transition-bounce);
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-left: 4px solid transparent;
}

.contact-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent 30%, rgba(0, 166, 81, 0.05) 100%);
  z-index: -1;
}

.contact-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: var(--shadow-md);
  border-left: 4px solid var(--primary-color);
}

.contact-card:nth-child(even) {
  border-right: 4px solid transparent;
  border-left: none;
}

.contact-card:nth-child(even):hover {
  border-right: 4px solid var(--secondary-color);
}

.contact-card:nth-child(even)::before {
  background: linear-gradient(120deg, transparent 30%, rgba(0, 99, 166, 0.05) 100%);
}

.contact-card .icon {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  background-color: var(--primary-light);
  color: var(--primary-color);
  border-radius: 16px;
  transition: all var(--transition-bounce);
  box-shadow: 0 4px 10px rgba(0, 166, 81, 0.1);
  position: relative;
  overflow: hidden;
}

.contact-card:nth-child(even) .icon {
  background-color: var(--secondary-light);
  color: var(--secondary-color);
  box-shadow: 0 4px 10px rgba(0, 99, 166, 0.1);
}

.contact-card .icon::after {
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
}

.contact-card:hover .icon {
  background-color: var(--primary-color);
  color: var(--light-color);
  transform: scale(1.1) rotate(5deg);
}

.contact-card:nth-child(even):hover .icon {
  background-color: var(--secondary-color);
  transform: scale(1.1) rotate(-5deg);
}

.contact-card .text-container {
  flex: 1;
}

.contact-card .text-container h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dark-color);
  transition: color var(--transition-fast);
}

.contact-card:hover .text-container h3 {
  color: var(--primary-color);
}

.contact-card:nth-child(even):hover .text-container h3 {
  color: var(--secondary-color);
}

.contact-card .text-container p {
  margin: 0;
  font-size: 1.05rem;
  color: var(--gray-dark);
  line-height: 1.5;
}

.contact-card .text-container a {
  color: var(--primary-color);
  text-decoration: none;
  transition: all var(--transition-fast);
  position: relative;
  font-weight: 500;
}

.contact-card:nth-child(even) .text-container a {
  color: var(--secondary-color);
}

.contact-card .text-container a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, var(--primary-color), var(--accent-color));
  transition: width var(--transition-normal);
}

.contact-card:nth-child(even) .text-container a::after {
  background: linear-gradient(to right, var(--secondary-color), var(--accent-color));
}

.contact-card .text-container a:hover {
  color: var(--accent-color);
}

.contact-card .text-container a:hover::after {
  width: 100%;
}

/* ==== SECCIÓN DEL MAPA ==== */
.map-section {
  max-width: 1300px;
  margin: 0 auto 120px;
  padding: 0 20px;
  position: relative;
}

.map-section::before {
  content: "";
  position: absolute;
  bottom: -40px;
  right: 10%;
  width: 200px;
  height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M20,100 C20,55 55,20 100,20 C145,20 180,55 180,100 C180,145 145,180 100,180 C55,180 20,145 20,100 Z' fill='none' stroke='%230063a6' stroke-width='1' stroke-dasharray='10,10' opacity='0.1'/%3E%3C/svg%3E");
  z-index: -1;
}

/* Contenedor principal para los dos mapas */
.maps-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  width: 100%;
}

.map-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-bounce);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.map-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
  z-index: 2;
}

.map-container::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent);
  z-index: 1;
  pointer-events: none;
}

.map-container:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--shadow-lg);
}

.map-container iframe {
  display: block;
  width: 100%;
  height: 500px;
  border: none;
  position: relative;
}

/* Decoración del mapa - Marca de posición */
.map-pin {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 10;
  width: 60px;
  height: 60px;
  pointer-events: none;
  opacity: 0;
  transition: all 0.5s ease;
}

.map-container:hover .map-pin {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: bounce 1.5s infinite;
}

/* Etiqueta de ubicación para cada mapa */
.map-location {
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: var(--light-color);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 3;
  border-left: 4px solid var(--primary-color);
  transition: all var(--transition-normal);
}

.map-container:hover .map-location {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.map-location h3 {
  margin: 0 0 5px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-color);
}

.map-location p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--gray-dark);
}

/* Diferenciación para el segundo mapa */
.map-container:nth-child(2)::before {
  background: linear-gradient(90deg, var(--secondary-color), var(--primary-color), var(--accent-color));
}

.map-container:nth-child(2) .map-location {
  border-left: 4px solid var(--secondary-color);
}

.map-container:nth-child(2) .map-pin path:last-child {
  fill: var(--secondary-color);
}

@keyframes bounce {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -60%) scale(1.1); }
}

/* ==== ANIMACIONES ==== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.contact-header {
  animation: fadeIn 1s ease-out forwards;
}

.left-column {
  animation: fadeInLeft 1s ease-out forwards;
  animation-delay: 0.3s;
  opacity: 0;
  animation-fill-mode: forwards;
}

.contact-info {
  animation: fadeInRight 1s ease-out forwards;
  animation-delay: 0.5s;
  opacity: 0;
  animation-fill-mode: forwards;
}

.map-section {
  animation: fadeInScale 1s ease-out forwards;
  animation-delay: 0.7s;
  opacity: 0;
  animation-fill-mode: forwards;
}

/* Animación del elemento flotante */
.floating-element {
  position: absolute;
  z-index: 1;
}

/* ==== MEJORAS VISUALES ADICIONALES ==== */

/* Efecto de enfoque en inputs del formulario (si el formulario lo permite) */
input:focus, 
textarea:focus, 
select:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-color: var(--primary-color);
}

/* Efectos de cursor */
.form-wrapper:hover,
.contact-card:hover,
.map-container:hover {
  cursor: pointer;
}

/* ==== RESPONSIVE ==== */
@media (max-width: 1300px) {
  .contact-section,
  .map-section {
    max-width: 90%;
  }
}

@media (max-width: 1100px) {
  .contact-section {
    grid-template-columns: 3fr 2fr;
  }
  
  .contact-header h1 {
    font-size: 3.2rem;
  }
  
  .contact-header {
    padding: 120px 20px 80px;
  }
}

@media (max-width: 992px) {
  .contact-section {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .contact-info {
    height: auto;
    min-height: 600px;
  }
  
  .contact-header h1 {
    font-size: 3rem;
  }
  
  .maps-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .form-wrapper {
    height: 700px;
  }
  
  .contact-header {
    padding: 100px 20px 60px;
  }
  
  .contact-header h1 {
    font-size: 2.6rem;
  }
  
  .contact-header p {
    font-size: 1.1rem;
  }
  
  .map-container iframe {
    height: 400px;
  }
  
  .map-location {
    padding: 10px 15px;
  }
}

@media (max-width: 576px) {
  .contact-header {
    padding: 80px 20px 40px;
  }
  
  .contact-header h1 {
    font-size: 2.2rem;
  }
  
  .form-wrapper {
    height: 650px;
  }
  
  .contact-card {
    flex-direction: column;
    text-align: center;
    padding: 25px 20px;
    gap: 15px;
  }
  
  .contact-card .icon {
    margin: 0 auto 5px;
  }
  
  .contact-info {
    padding: 35px 25px;
    min-height: auto;
  }
  
  .contact-info > p {
    padding-left: 0;
    border-left: none;
  }
  
  .important-message {
    flex-direction: column;
    text-align: center;
  }
  
  .important-icon {
    margin: 0 auto 10px;
  }
  
  .important-button {
    justify-content: center;
  }
  
  .map-location {
    padding: 8px 12px;
  }
  
  .map-location h3 {
    font-size: 1rem;
  }
  
  .map-location p {
    font-size: 0.8rem;
  }
  
  .maps-container {
    gap: 30px;
  }
}