:root {
  --white: #fff;
  --company-red: #e93325;
  --black: #000;
  --light-red: #ffa583;
  --timeline-gradient: rgba(233, 51, 37, 1) 0%, rgba(233, 51, 37, 1) 50%,
    rgba(233, 51, 37, 0) 100%;
}

/* * {
  background-color: #fff;
} */

*::before,
*::after {
  color: #fff;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Button Changes */

.button {
  background-color: var(--company-red);
}

.button:hover {
  background-color: #000;
}

/* Contact section */

.contact__section {
  display: flex;
  flex-wrap: wrap;
  max-width: 2000px;
  margin: 40px auto;
  padding: 0 5%;
  gap: 40px;
}

.contact__map {
  flex: 1 1 60%;
  min-height: 60vh;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.contact__info {
  flex: 1 1 35%;
  color: var(--black);
  font-size: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.contact__info h2 {
  color: var(--company-red);
  font-size: 2rem;
  margin-bottom: 10px;
}

.contact__info a {
  color: var(--company-red);
  text-decoration: none;
}

.contact__info a:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .contact__section {
    flex-direction: column;
  }

  .contact__map, .contact__info {
    flex: 1 1 100%;
  }
}

/* Mobile-first fixes for the map */
@media screen and (max-width: 768px) {
  .contact__map {
    min-height: 300px; /* More reasonable mobile height */
    height: 60vw; /* Better aspect ratio for mobile */
    width: 100%;
    order: -1; /* Ensure map appears first on mobile */
    margin-bottom: 20px;
  }

  /* Fix for iframe touch interaction */
  .contact__map iframe {
    pointer-events: auto; /* Ensure touch events work */
    -webkit-overflow-scrolling: touch; /* Better iOS scrolling */
  }
}

/* Additional small-screen optimization */
@media screen and (max-width: 480px) {
  .contact__map {
    height: 70vw; /* Taller aspect ratio for very small screens */
    min-height: 250px;
    border-radius: 8px; /* Smaller radius for mobile */
  }
  
  .contact__info {
    font-size: 1rem; /* Better text sizing for mobile */
  }
}