/* Header Social Media Icons - Beautiful styling with different backgrounds */

.header-social a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  margin: 0 0.25rem !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Header-specific background colors - black with white icons, colored on hover */
.header-social a[href*="instagram"] {
  background: #000 !important;
  color: white !important;
}

.header-social a[href*="facebook"] {
  background: #000 !important;
  color: white !important;
}

.header-social a[href*="youtube"] {
  background: #000 !important;
  color: white !important;
}

.header-social a[href*="twitter"] {
  background: #000 !important;
  color: white !important;
}

.header-social a[href*="instagram"]:hover {
  background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d, #f56040, #f77737, #fcaf45, #ffdc80) !important;
  color: white !important;
  transform: translateY(-2px) scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
}

.header-social a[href*="facebook"]:hover {
  background: #1877F2 !important;
  color: white !important;
  transform: translateY(-2px) scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
}

.header-social a[href*="youtube"]:hover {
  background: #FF0000 !important;
  color: white !important;
  transform: translateY(-2px) scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
}

.header-social a[href*="twitter"]:hover {
  background: #1DA1F2 !important;
  color: white !important;
  transform: translateY(-2px) scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
}

.header-social a .social-icon {
  width: 18px !important;
  height: 18px !important;
  background-size: 18px 18px !important;
}

/* Mobile social icons in menu */
.mobile-social a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  margin: 0 0.5rem !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Mobile social - same as header style */
.mobile-social a[href*="instagram"] {
  background: #000 !important;
  color: white !important;
}

.mobile-social a[href*="facebook"] {
  background: #000 !important;
  color: white !important;
}

.mobile-social a[href*="youtube"] {
  background: #000 !important;
  color: white !important;
}

.mobile-social a[href*="twitter"] {
  background: #000 !important;
  color: white !important;
}

.mobile-social a[href*="instagram"]:hover {
  background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d, #f56040, #f77737, #fcaf45, #ffdc80) !important;
  color: white !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
}

.mobile-social a[href*="facebook"]:hover {
  background: #1877F2 !important;
  color: white !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
}

.mobile-social a[href*="youtube"]:hover {
  background: #FF0000 !important;
  color: white !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
}

.mobile-social a[href*="twitter"]:hover {
  background: #1DA1F2 !important;
  color: white !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
}

.mobile-social a .social-icon {
  width: 22px !important;
  height: 22px !important;
  background-size: 22px 22px !important;
}

/* Ensure consistent spacing in header */
.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.header-social {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Mobile menu social container */
.mobile-social {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 1rem 0 !important;
  margin-top: 1rem !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}