.social-media-icons-container {
    display: flex;
    flex-direction: row; /* 水平布局 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 30px; /* 将间距从 15px 增大到 30px */
    justify-content: flex-start; /* 左对齐项目/行 */
    align-items: center; /* 垂直居中项目 */
    align-self: flex-start; /* Add this for left alignment if parent is flex column centering items */
    color: #CCCCCC; 
}
.social-email-icon {
    max-width: 30px; /* 限制最大宽度 */
}
.social-media-icons-container a {
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    text-decoration: none; 
    color: inherit; 
    flex-shrink: 0; 
    position: relative; /* 需要用于内部弹出框的定位 */
}
.social-media-icons-container img.social-icon {
    height: 18px; /* 缩小到原来的75% */
    width: auto;
    max-width: 100%; /* 确保 logo 不会溢出其容器 */
    vertical-align: middle;
    transition: filter 0.3s ease; /* 保留滤镜过渡效果 */
    flex-shrink: 0; 
    filter: grayscale(100%) brightness(1.5); /* 保留默认滤镜 */
}
/* 小红书的 logo 进一步缩小 */
.social-media-icons-container a[href*="xiaohongshu"] img.social-icon {
    height: 14px; /* 进一步缩小 */
}
.social-media-icons-container a span {
    white-space: nowrap; 
    color: white; /* 保持文字白色 */
}
.social-media-icons-container a:hover img.social-icon {
        filter: none; /* 保留悬停效果 */
}
.social-media-icons-container .qr-code-popup {
    display: none;
    position: absolute; 
    width: 180px; /* 保持固定宽度 */
    height: 180px; /* 保持固定高度 */
    /* 定位在父 <a> 标签上方居中 */
    bottom: 100%; 
    left: 50%;    
    transform: translateX(-50%); 
    margin-bottom: 5px; /* 图标/文字上方的间距 */
    padding: 10px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 20;
    /* 移除 width 和 height，让其由内容决定 */
}
/* 使用 CSS 在悬停时显示 QR 码 */
@media (min-width: 769px) { 
    .social-media-icons-container a.has-qr:hover .qr-code-popup {
        display: block;
    }
}
/* 在移动端完全隐藏 QR 码弹出框 - 保留 */
@media (max-width: 768px) { 
    .social-media-icons-container .qr-code-popup {
        display: none !important; /* 强制在移动端隐藏 */
    }
}

/* New CSS for contact info header */
.contact-info-header {
    text-align: left;
    margin-bottom: 20px; /* Space before social icons */
    color: white;
    align-self: flex-start; /* Add this for left alignment if parent is flex column centering items */        
}
.contact-info-header p {
    margin: 0 0 8px 0; /* Space between lines */
    padding: 0;
    line-height: 1.4;                     
}
.contact-info-header .contact-title-text {
    font-size: 16px; /* Adjusted font size */
    font-weight: bold; /* Bold title */
}

.contact-info-header .email-text a {
    color: white;
    text-decoration: none;
}
.contact-info-header .email-text a:hover {
    text-decoration: underline;
}