/* Mobile Contact Card Layout Enhancements */

@media (max-width: 767px) {
  /* Create card-like appearance for mobile contact items */
  .contact-us-info2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  /* Make each contact item into a card */
  .contact-item {
    background: #ffffff;
    border-radius: 8px;
    padding: 12px 15px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 15px !important;
    transition: transform 0.2s ease;
  }
  
  .contact-item:hover,
  .contact-item:active {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }
  
  /* Adjust contact item spacing */
  .contact-icon-wrapper {
    margin-right: 15px;
  }
  
  .contact-text {
    padding-top: 12px;
  }
  
  /* Style the social icons container */
  .social-media-icons {
    background: rgba(0, 33, 71, 0.03);
    border-radius: 8px;
    padding: 15px 10px;
    margin-top: 10px;
  }
  
  /* Add subtle separator */
  .contact-info-list {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  /* Fix the contact card icon positioning */
  .contact-card-icon {
    margin: 15px 0;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  .contact-item {
    padding: 10px 12px !important;
  }
  
  .contact-text {
    padding-top: 10px;
  }
}