/* Contact Section */
.contact-container {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 800px;
  margin: var(--space-xxl) auto 0;
}

.contact-info {
  color: var(--white);
  text-align: center;
  margin-bottom: var(--space-xl);
}

.contact-info-item {
  display: inline-flex;
  margin: 0 var(--space-lg) var(--space-lg);
  align-items: center;
}

.contact-info-item i {
  font-size: 1.5rem;
  margin-right: var(--space-md);
  color: var(--accent-color);
}

.contact-info-item h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
}

.contact-info-item p {
  font-size: var(--small-size);
  opacity: 0.9;
}

.map-container {
  width: 100%;
  height: 400px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-xl);
  box-shadow: var(--shadow-lg);
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.contact-cta {
  text-align: center;
  padding: var(--space-xl) 0;
}

.contact-cta .btn {
  font-size: 1.2rem;
  padding: var(--space-lg) var(--space-xxl);
  background-color: var(--white);
  color: var(--primary-color);
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-md);
}

.contact-cta .btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  background-color: var(--accent-color);
  color: var(--white);
}

.contact-cta .btn i {
  margin-right: var(--space-md);
}

/* Background Icons */
.bg-icons {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.bg-icon {
  position: absolute;
  opacity: 0.08;
  color: #B8E3FF;
  transform: translateZ(0);
  transition: transform var(--transition-normal);
}

.bg-icon:nth-child(1) { top: 10%; left: 10%; font-size: 3rem; }
.bg-icon:nth-child(2) { top: 30%; right: 15%; font-size: 4rem; }
.bg-icon:nth-child(3) { top: 50%; left: 20%; font-size: 3.5rem; }
.bg-icon:nth-child(4) { top: 70%; right: 25%; font-size: 2.5rem; }
.bg-icon:nth-child(5) { top: 85%; left: 30%; font-size: 3rem; }

/* Responsive */
@media (max-width: 992px) {
  .contact-info-item {
    display: flex;
    margin-bottom: var(--space-md);
  }
}

@media (max-width: 768px) {
  .map-container {
    height: 300px;
  }
  
  .contact-cta .btn {
    font-size: 1rem;
    padding: var(--space-md) var(--space-xl);
  }
  
  .contact-info-item {
    flex-direction: column;
    text-align: center;
    margin: 0 0 var(--space-lg);
  }
  
  .contact-info-item i {
    margin: 0 0 var(--space-sm);
  }
}