/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --primary-color: #ff6b4a;
    --secondary-color: #0a192f;
    --text-color: #333;
    --text-light: #666;
    --border-radius: 20px;
    --transition: all 0.3s ease;
    --bg-dark: #0a192f;
}
/* Form Elements */
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: #ff6b4a;
    box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.1);
}





.language-switcher {
    position: relative;
    display: inline-block;
}

.language-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: white;
    transition: background-color 0.2s;
}

.language-button:hover {
    background-color: rgba(75, 85, 99, 0.8);
}

.language-button:focus {
    outline: none;
}

.language-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 120px;
    background-color: #1f2937;
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 8px 0;
    z-index: 50;
    display: none;
}

.language-dropdown.show {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.language-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

.language-item:hover {
    background-color: rgba(75, 85, 99, 0.5);
}

.language-check {
    margin-left: 8px;
}

/* SVG图标样式 */
.globe-icon {
    width: 20px;
    height: 20px;
}

/* 桌面端样式 */
@media (min-width: 768px) {
    .language-switcher-mobile {
      display: none; /* 在桌面端隐藏移动版语言切换器 */
    }
  }
  
  /* 移动端样式 */
  @media (max-width: 767px) {
    .language-switcher {
      display: none; /* 在移动端隐藏桌面版语言切换器 */
    }
    
    .language-switcher-mobile {
      display: flex;
      align-items: center;
      position: absolute;
      right: 60px; /* 距离右侧边缘的距离，根据汉堡菜单的位置调整 */
      top: 50%; /* 垂直居中 */
      transform: translateY(-50%);
      z-index: 100;
    }
    
    .language-button {
      background: none;
      border: none;
      cursor: pointer;
      padding: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .globe-icon {
      width: 24px;
      height: 24px;
    }
    
    /* 移动端下拉菜单样式调整 - 修改为与PC端一致的深色样式 */
    #languageDropdownMobile {
      position: absolute;
      top: 100%;
      right: 0;
      min-width: 120px;
      background-color: #1f2937; /* 与PC端一致的深色背景 */
      border-radius: 6px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      padding: 8px 0;
      z-index: 1000;
      display: none; /* 默认隐藏 */
    }
    
    #languageDropdownMobile.show {
      display: block;
      animation: fadeIn 0.2s ease-out;
    }
    
    /* 移动端语言项样式 - 与PC端保持一致 */
    .language-switcher-mobile .language-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 16px;
      color: white; /* 文字颜色改为白色 */
      cursor: pointer;
      transition: background-color 0.2s;
      white-space: nowrap;
    }
    
    .language-switcher-mobile .language-item:hover {
      background-color: rgba(75, 85, 99, 0.5); /* 与PC端一致的悬停效果 */
    }
  }




/* Location Icon */
.icon-map-marker {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z'/%3E%3Ccircle cx='12' cy='9' r='3'/%3E%3C/svg%3E");
}

/* Phone Icon */
.icon-phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* Email Icon */
.icon-envelope {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}

/* Social Media Icons */
.icon-twitter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z'/%3E%3C/svg%3E");
}

.icon-facebook {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E");
}

.icon-linkedin {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'/%3E%3Crect x='2' y='9' width='4' height='12'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E");
}

.icon-telegram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E");
}

.icon-instagram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E");
}

.icon-whatsapp {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='currentColor' d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'%3E%3C/path%3E%3C/svg%3E");
}
.icon-github {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22'/%3E%3C/svg%3E");
}
/* 链接图标 */
.icon-link {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E");
}

/* 更详细的小红书图标 */
.icon-REDnote {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/%3E%3Cpath d='M8 7h5.5c1.38 0 2.5 1.12 2.5 2.5S14.88 12 13.5 12H8V7z'/%3E%3Cpath d='M11 12l4 5'/%3E%3Cpath d='M8 7v10'/%3E%3C/svg%3E");
}

/* 查看次数图标 - 眼睛 */
.icon-eye {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* 点赞图标 - 心形 */
.icon-heart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}

/* 搜索图标 */
.icon-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
}
.icon-tags {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMTQyLjkgMTQyLjljLTE3LjUgMTcuNS0zMC4xIDM4LTM3LjggNTkuOGMtNS45IDE2LjctMjQuMiAyNS40LTQwLjggMTkuNXMtMjUuNC0yNC4yLTE5LjUtNDAuOEM1NS42IDE1MC43IDczLjIgMTIyIDk3LjYgOTcuNmM4Ny4yLTg3LjIgMjI4LjMtODcuNSAzMTUuOC0xTDQ1NSA1NWM2LjktNi45IDE3LjItOC45IDI2LjItNS4yczE0LjggMTIuNSAxNC44IDIyLjJsMCAxMjhjMCAxMy4zLTEwLjcgMjQtMjQgMjRsLTguNCAwYzAgMCAwIDAgMCAwTDM0NCAyMjRjLTkuNyAwLTE4LjUtNS44LTIyLjItMTQuOHMtMS43LTE5LjMgNS4yLTI2LjJsNDEuMS00MS4xYy02Mi42LTYxLjUtMTYzLjEtNjEuMi0yMjUuMyAxek0xNiAzMTJjMC0xMy4zIDEwLjctMjQgMjQtMjRsNy42IDAgLjcgMEwxNjggMjg4YzkuNyAwIDE4LjUgNS44IDIyLjIgMTQuOHMxLjcgMTkuMy01LjIgMjYuMmwtNDEuMSA0MS4xYzYyLjYgNjEuNSAxNjMuMSA2MS4yIDIyNS4zLTFjMTcuNS0xNy41IDMwLjEtMzggMzcuOC01OS44YzUuOS0xNi43IDI0LjItMjUuNCA0MC44LTE5LjVzMjUuNCAyNC4yIDE5LjUgNDAuOGMtMTAuOCAzMC42LTI4LjQgNTkuMy01Mi45IDgzLjhjLTg3LjIgODcuMi0yMjguMyA4Ny41LTMxNS44IDFMNTcgNDU3Yy02LjkgNi45LTE3LjIgOC45LTI2LjIgNS4yUzE2IDQ0OS43IDE2IDQ0MGwwLTExOS42IDAtLjcgMC03LjZ6Ii8+PC9zdmc+");
    width: 20px;
    height: 20px;
    cursor: pointer;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

body h1,
h2,
h3 {
    font-family: Cardo;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Button Styles */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #ff6b4a;
    color: white;
    border: none;
}

.btn-secondary {
    background-color: transparent;
    color: white;
    border: 1px solid white;
}

.btn-outline {
    background-color: transparent;
    color: #ff6b4a;
    border: 1px solid #ff6b4a;
}

/* Header Styles */
.header {
    background-color: rgba(0, 0, 0, 0.9);
    padding: 20px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 40px;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

.mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: white;
    margin: 5px 0;
    transition: all 0.3s ease;
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

.main-nav a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500; /* 添加适当字重 */
    text-transform: capitalize; /* 确保大小写统一 */
    transition: color 0.3s ease;
    padding: 5px 0; /* 增加可点击区域 */
}

.main-nav a.active,.main-nav a:hover {
    color: #ff6b4a;
}

.header-buttons {
    display: flex;
    gap: 15px;
}

/* Button Styles 部分添加或修改 */
.btn-login {
    background-color: transparent;
    color: white;  /* 改为白色 */
    border: none;
    transition: color 0.3s ease;
}

.btn-login:hover {
    color: #ff6b4a;  /* 悬停时变为主题色 */
}

/* 默认状态 */
.header-buttons-mobile {
    display: none; /* PC端隐藏移动端按钮 */
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-buttons {
        display: none; /* 移动端隐藏PC端按钮 */
    }
    .header-buttons-mobile {
        display: flex; /* 移动端显示移动端按钮 */
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        text-align: center;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .header-content {
        position: relative;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.95);
        padding: 80px 40px;
        transition: right 0.3s ease;
    }

    .main-nav.active {
        right: 0;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 25px; /* 增加间距 */
    }

    .main-nav a {
        font-size: 18px;
        padding: 12px 0; /* 增加移动端可点击区域 */
    }

    .header-buttons {
        position: fixed;
        bottom: 40px;
        left: 0;
        width: 100%;
        justify-content: center;
        padding: 0 20px;
        gap: 20px;
    }

    /* 汉堡菜单动画 */
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }
}

/* Footer Styles */
.footer {
    background-color: #fff;
    padding: 60px 0;
    border-top: 1px solid #ff6b4a;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-brand img {
    max-width: 180px;
    height: auto;
}

.footer-brand .tagline {
    font-size: 1.2rem;
    color: #333;
    margin: 15px 0;
}

.footer-brand .footer-email {
    color: #333;
    text-decoration: underline;
    font-size: 1rem;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.link-column h4 {
    color: #333;
    font-size: 1.2rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.link-column ul {
    list-style: none;
}

.link-column ul li {
    margin-bottom: 12px;
}

.link-column a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.link-column a:hover {
    color: #ff6b4a;
}


/* 修改响应式布局，确保所有列都能显示 */
@media (max-width: 768px) {
    .footer {
        padding: 50px 0 30px;
    }

    .footer-links {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        width: 100%; /* 确保宽度充满容器 */
    }

    .link-column {
        text-align: left;
        display: block !important; /* 确保列始终显示 */
        opacity: 1 !important; /* 确保动画不会影响可见性 */
    }
    .link-column ul li a {
        font-size: 0.9rem;
        color: #666;
    }
}

@media (max-width: 576px) {
    .footer {
        padding: 40px 0 20px;
    }

    .footer-links {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .link-column {
        text-align: center;
        margin-bottom: 20px; /* 增加列间距 */
        display: block !important; /* 确保列始终显示 */
    }

    /* 确保所有链接列都显示 */
    .link-column:nth-child(1),
    .link-column:nth-child(2),
    .link-column:nth-child(3) {
        display: block !important;
        opacity: 1 !important;
    }

    .link-column h4 {
        font-size: 1rem;
        margin-bottom: 15px;
    }

    .link-column ul li {
        margin-bottom: 10px;
    }

    .link-column ul li a {
        font-size: 0.9rem;
        color: #666;
    }
}

/* 添加动画效果 */
.footer-brand, .link-column {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
}

.footer-brand {
    animation-delay: 0.2s;
}

.link-column:nth-child(1) {
    animation-delay: 0.3s;
}

.link-column:nth-child(2) {
    animation-delay: 0.4s;
}

.link-column:nth-child(3) {
    animation-delay: 0.5s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}