/* 全局动画类 */
      .fade-in {
        opacity: 0;
        transform: translateY(20px);
        transition:
          opacity 0.6s ease,
          transform 0.6s ease;
      }

      .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
      }

      .scale-in {
        opacity: 0;
        transform: scale(0.95);
        transition:
          opacity 0.5s ease,
          transform 0.5s ease;
      }

      .scale-in.visible {
        opacity: 1;
        transform: scale(1);
      }

      .slide-in-left {
        opacity: 0;
        transform: translateX(-30px);
        transition:
          opacity 0.7s ease,
          transform 0.7s ease;
      }

      .slide-in-left.visible {
        opacity: 1;
        transform: translateX(0);
      }

      .slide-in-right {
        opacity: 0;
        transform: translateX(30px);
        transition:
          opacity 0.7s ease,
          transform 0.7s ease;
      }

      .slide-in-right.visible {
        opacity: 1;
        transform: translateX(0);
      }

      /* ===============================================
               2. Banner样式
               =============================================== */

      /* Banner容器 */
      .banner {
        position: relative;
        left: 0;

        width: 100%;

        height: 400px;

        background-color: #e8f0f5;

        background-image: url(https://img.js.design/assets/img/6575eee45970cabf8e2ca2b6.png);

        background-size: cover;
        background-position: right -423px bottom -470px;
        background-repeat: no-repeat;
        overflow: hidden;
      }

      /* Banner内容 */
      .banner-content {
        max-width: 1240px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }

      /* Banner文本 */
      .banner-text {
        flex: 1;
        max-width: 500px;
        text-align: left;
        /* background-color: rgba(255, 255, 255, 0.9); */
        padding: 40px;
        /* border-radius: 8px; */
        /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); */
      }

      .banner-tag {
        display: inline-block;
        padding: 4px 12px;
        background-color: #e6f0ff;
        color: #667eea;
        font-size: 14px;
        border-radius: 4px;
        margin-bottom: 20px;
      }

      .banner-title {
        font-size: 36px;
        font-weight: 700;
        color: #333;
        margin-bottom: 16px;
        line-height: 1.3;
      }

      .banner-subtitle {
        font-size: 18px;
        color: #666;
        margin-bottom: 16px;
      }

      .banner-desc {
        font-size: 14px;
        color: #999;
        margin-bottom: 32px;
      }

      /* Banner按钮 */
      .banner-buttons {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
      }

      .banner-btn {
        display: inline-block;
        padding: 12px 24px;
        text-decoration: none;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      .banner-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
      }

      .banner-btn:hover::before {
        left: 100%;
      }

      /* 主要按钮 */
      .banner-btn.primary {
        background-color: #667eea;
        color: #fff;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
      }

      .banner-btn.primary:hover {
        background-color: #5a6fdd;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
      }

      /* 次要按钮 */
      .banner-btn.secondary {
        background-color: #fff;
        color: #667eea;
        border: 1px solid #667eea;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
      }

      .banner-btn.secondary:hover {
        background-color: #f0f4f8;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.2);
      }

      /* Banner图片 */
      .banner-images {
        flex: 1;
        max-width: 600px;
      }

      .banner-images img {
        width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
      }

      /* ===============================================
               3. 响应式设计 - 导航栏与Banner
               =============================================== */

      /* 中等屏幕 */
      @media (max-width: 992px) {
        /* 导航栏调整 */
        .nav-menu {
          display: none;
        }
      }

      /* 小屏幕 */
      @media (max-width: 768px) {
        /* 导航栏调整 */
        .nav-left-logo {
          display: none;
        }

        /* 搜索框自适应撑满 */
        .user-actions {
          width: 100%;
          flex: 1;
          justify-content: flex-end;
        }

        .search-box {
          flex: 1;
          max-width: none;
        }

        .search-box input {
          width: 100%;
        }

        /* Banner调整 */
        .banner {
          padding: 60px 20px;
        }

        .banner-content {
          flex-direction: column;
          text-align: center;
        }

        .banner-text {
          max-width: 100%;
          text-align: center;
        }

        .banner-title {
          font-size: 28px;
        }

        .banner-buttons {
          justify-content: center;
        }

        .banner-images {
          max-width: 100%;
        }
      }

      /* 超小屏幕 */
      @media (max-width: 480px) {
        /* 导航栏调整 */
        .nav-container {
          padding: 0 10px;
        }

        /* Banner调整 */
        .banner {
          padding: 40px 10px;
        }

        .banner-text {
          padding: 20px;
        }

        .banner-title {
          font-size: 24px;
        }

        .banner-buttons {
          flex-direction: column;
          align-items: center;
        }

        .banner-btn {
          width: 100%;
          max-width: 200px;
          text-align: center;
        }
      }

      /* ===============================================
               4. 主内容区域样式
               =============================================== */

      /* 主内容容器 */
      .main-content {
        max-width: 1240px;
        margin: 0 auto;
        padding: 60px 20px 0;
      }

      /* 通用标题样式 */
      .section-title {
        font-size: 32px;
        font-weight: 600;
        color: #333;
        margin-bottom: 40px;
        text-align: center;
      }

      /* 主题市场 */
      .theme-market {
        margin-bottom: 80px;
      }

      .market-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(200px, 1fr));
        gap: 24px;
      }

      /* 大屏幕 */
      @media (min-width: 992px) and (max-width: 1199px) {
        .market-grid {
          grid-template-columns: repeat(4, minmax(180px, 1fr));
          gap: 20px;
        }
      }

      /* 中等屏幕 */
      @media (min-width: 769px) and (max-width: 991px) {
        .market-grid {
          grid-template-columns: repeat(4, minmax(180px, 1fr));
          gap: 16px;
        }
      }

      /* 小屏幕 */
      @media (max-width: 768px) {
        .market-grid {
          grid-template-columns: repeat(2, minmax(150px, 1fr));
          gap: 16px;
        }
      }

      /* 超小屏幕 */
      @media (max-width: 480px) {
        /* 确保主题市场容器有足够宽度 */
        .theme-market {
          width: 100%;
          overflow: hidden;
        }

        /* 强制两列布局 - 主题市场 */
        .market-grid {
          display: flex !important;
          flex-wrap: wrap !important;
          gap: 12px !important;
          margin: 0 !important;
          padding: 0 !important;
          width: 100% !important;
        }

        /* 每个卡片占50%宽度，减去间距 - 主题市场 */
        .market-grid .market-card {
          flex: 0 0 calc(50% - 6px) !important;
          max-width: calc(50% - 6px) !important;
          margin: 0 !important;
          padding: 0 !important;
          min-width: 0 !important;
          box-sizing: border-box !important;
        }

        .market-card {
          cursor: pointer ;
          transform: none !important;
          min-height: auto !important;
          height: auto !important;
        }

        .market-card-content {
          padding: 10px !important;
          height: 40px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
        }

        .market-card-content.no-image {
          height: 100px !important;
        }

        .market-card-title {
          font-size: 11px !important;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin: 0 !important;
          line-height: 1.2 !important;
        }

        .market-card-content.no-image .market-card-title {
          font-size: 14px !important;
        }

        .market-card-desc {
          font-size: 10px !important;
          margin-bottom: 6px !important;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          line-height: 1.2 !important;
        }

        .market-card-price {
          font-size: 11px !important;
          margin: 0 !important;
        }

        .market-card img {
          height: 100px !important;
          width: 100% !important;
          object-fit: contain !important;
          background-color: #f8f9fa !important;
        }

        /* 强制两列布局 - 最新主题 */
        .latest-grid {
          display: flex !important;
          flex-wrap: wrap !important;
          gap: 12px !important;
          margin: 0 !important;
          padding: 0 !important;
          width: 100% !important;
        }

        /* 每个卡片占50%宽度，减去间距 - 最新主题 */
        .latest-grid .latest-card {
          flex: 0 0 calc(50% - 6px) !important;
          max-width: calc(50% - 6px) !important;
          margin: 0 !important;
          padding: 0 !important;
          min-width: 0 !important;
          box-sizing: border-box !important;
        }

        .latest-card {
          cursor: pointer ;
          transform: none !important;
          min-height: auto !important;
          height: auto !important;
        }

        .latest-card-content {
          padding: 10px !important;
        }

        .latest-card-title {
          font-size: 11px !important;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin: 0 !important;
          line-height: 1.2 !important;
        }

        .latest-card-desc {
          font-size: 10px !important;
          margin-bottom: 6px !important;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          line-height: 1.2 !important;
        }

        .latest-card-price {
          font-size: 11px !important;
          margin: 0 !important;
        }

        .latest-card img {
          height: 100px !important;
          width: 100% !important;
          object-fit: cover !important;
        }
      }

      .market-card {
        cursor: pointer ;
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 280px;
      }

      .market-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #667eea, #764ba2);
        transform: scaleX(0);
        transition: transform 0.3s ease;
        z-index: 1;
      }

      .market-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      }

      .market-card:hover::before {
        transform: scaleX(1);
      }

      .market-card img {
        width: 100%;
        height: 200px;
        object-fit: contain;
        transition: transform 0.5s ease;
        flex-shrink: 0;
        background-color: #f8f9fa;
      }

      .market-card:hover img {
        transform: scale(1.05);
      }

      .market-card-content {
        padding: 16px;
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }

      .market-card-content.no-image {
        height: 200px;
        background-color: #f8f9fa;
        border: 2px dashed #e5e7eb;
      }

      .market-card-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin: 0;
        line-height: 1.4;
      }

      .market-card-content.no-image .market-card-title {
        color: #333;
        font-size: 18px;
      }

      .market-card-id {
        font-size: 12px;
        color: #999;
        margin: 0;
      }

      .market-card-desc {
        font-size: 14px;
        color: #666;
        margin-bottom: 16px;
      }

      .market-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
      }

      .market-card-users {
        font-size: 12px;
        color: #667eea;
        margin: 0;
      }

      .market-card-price {
        font-size: 16px;
        font-weight: 600;
        color: #667eea;
        margin: 0;
      }

      /* 最新主题卡片样式 */
      .latest-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(200px, 1fr));
        gap: 20px;
        margin-top: 24px;
      }

      .latest-card {
        cursor: pointer ;
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        position: relative;
      }

      .latest-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #667eea, #764ba2);
        transform: scaleX(0);
        transition: transform 0.3s ease;
        z-index: 1;
      }

      .latest-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      }

      .latest-card:hover::before {
        transform: scaleX(1);
      }

      .latest-card img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        transition: transform 0.5s ease;
      }

      .latest-card:hover img {
        transform: scale(1.05);
      }

      .latest-card-content {
        padding: 16px;
      }

      .latest-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 8px;
      }

      .latest-card-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin: 0;
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .latest-card-id {
        font-size: 12px;
        color: #999;
        margin: 0;
        min-width: 80px;
        text-align: right;
      }

      .latest-card-desc {
        font-size: 14px;
        color: #666;
        margin: 8px 0;
        line-height: 1.4;
      }

      .latest-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
      }

      .latest-card-users {
        font-size: 12px;
        color: #667eea;
        margin: 0;
      }

      .latest-card-price {
        font-size: 16px;
        font-weight: 600;
        color: #667eea;
        margin: 0;
      }

      /* 小屏幕 - 最新主题 */
      @media (max-width: 768px) {
        .latest-grid {
          grid-template-columns: repeat(2, minmax(150px, 1fr));
          gap: 16px;
        }
        
        .latest-card img {
          height: 160px;
        }
        
        .latest-card-content {
          padding: 12px;
        }
        
        .latest-card-title {
          font-size: 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .latest-card-id {
          font-size: 10px;
          min-width: 70px;
          text-align: right;
        }
        
        .latest-card-desc {
          font-size: 12px;
          margin: 6px 0;
        }
        
        .latest-card-users {
          font-size: 10px;
        }
        
        .latest-card-price {
          font-size: 14px;
        }
      }

      /* 最新主题 */
      .latest-themes {
        margin-bottom: 80px;
      }

      /* 打造行业领先平台 */
      .industry-platform {
        /* padding: 60px 20px; */
        border-radius: 16px;
        text-align: center;
      }

      .platform-title {
        font-size: 28px;
        font-weight: 600;
        color: #333;
        margin-bottom: 12px;
      }

      .platform-subtitle {
        font-size: 14px;
        color: #96a3b7;
        margin-bottom: 40px;
      }

      /* 核心优势 */
      .platform-advantages {
        background-color: #fff;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 40px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
      }

      .advantage-card {
        padding: 24px 16px;
        border-radius: 8px;
        text-align: center;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 200px;
      }

      .advantage-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
      }

      .advantage-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .advantage-icon img {
        width: 50px;
        height: 50px;
      }

      .advantage-title {
        font-size: 15px;
        font-weight: 600;
        color: #333;
        margin-bottom: 10px;
        line-height: 1.4;
      }

      .advantage-desc {
        font-size: 14px;
        color: #666;
        line-height: 1.5;
      }

      /* 响应式设计 - 平台优势 */
      @media (max-width: 768px) {
        .platform-advantages {
          grid-template-columns: repeat(2, 1fr);
          gap: 12px;
        }

        .advantage-card {
          padding: 16px 12px;
          min-height: 180px;
        }

        .advantage-icon {
          width: 50px;
          height: 50px;
          margin: 0 auto 12px;
        }

        .advantage-icon img {
          width: 40px;
          height: 40px;
        }

        .advantage-title {
          font-size: 13px;
          margin-bottom: 8px;
        }

        .advantage-desc {
          font-size: 12px;
          line-height: 1.3;
        }
      }

      @media (min-width: 769px) and (max-width: 991px) {
        .platform-advantages {
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
        }

        .advantage-card {
          padding: 20px 14px;
          min-height: 190px;
        }

        .advantage-icon {
          width: 55px;
          height: 55px;
          margin: 0 auto 14px;
        }

        .advantage-icon img {
          width: 45px;
          height: 45px;
        }

        .advantage-title {
          font-size: 14px;
        }

        .advantage-desc {
          font-size: 13px;
        }
      }

      /* 平台数据统计 */
      .platform-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        background-color: #fff;
        padding: 40px 20px;
        border-radius: 8px;
      }

      .stat-card {
        text-align: center;
        padding: 0 20px;
        position: relative;
      }

      .stat-card:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 20px;
        height: 40px;
        width: 1px;
        background-color: #e4e7ed;
      }

      .stat-number {
        font-size: 32px;
        font-weight: 700;
        color: #667eea;
        margin-bottom: 8px;
      }

      .stat-label {
        font-size: 14px;
        color: #96a3b7;
      }

      /* 数据展示 */
      .data-showcase {
        margin-bottom: 60px;
      }

      .data-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
      }

      .data-card {
        background-color: #fff;
        padding: 24px;
        border-radius: 12px;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 140px;
        flex-shrink: 0;
      }

      .data-number {
        font-size: 32px;
        font-weight: 700;
        color: #667eea;
        margin-bottom: 8px;
        line-height: 1.2;
        white-space: nowrap;
      }

      .data-label {
        font-size: 13px;
        color: #666;
        line-height: 1.4;
        white-space: nowrap;
      }

      /* 响应式设计 - 平台数据 */
      @media (max-width: 768px) {
        .data-grid {
          grid-template-columns: repeat(4, 1fr);
          gap: 8px;
        }

        .data-card {
          padding: 12px 8px;
          min-height: 80px;
        }

        .data-number {
          font-size: 16px;
          margin-bottom: 2px;
        }

        .data-label {
          font-size: 8px;
        }
      }

      @media (min-width: 769px) and (max-width: 991px) {
        .data-grid {
          grid-template-columns: repeat(4, 1fr);
          gap: 12px;
        }

        .data-card {
          padding: 16px 12px;
          min-height: 100px;
        }

        .data-number {
          font-size: 24px;
          margin-bottom: 4px;
        }

        .data-label {
          font-size: 11px;
        }
      }

      /* 最新帮助文档 */
      .latest-docs {
        margin-bottom: 80px;
      }

      .docs-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px;
      }

      .doc-card {
        background-color: #fff;
        padding: 24px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
      }

      .doc-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      }

      .doc-card-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 12px;
      }

      .doc-card-desc {
        font-size: 14px;
        color: #666;
        margin-bottom: 16px;
      }

      .doc-card-link {
        font-size: 14px;
        color: #667eea;
        text-decoration: none;
        transition: color 0.3s ease;
      }

      .doc-card-link:hover {
        color: #5a6fdd;
      }

      /* ===============================================
               7. 响应式设计
               =============================================== */

      /* 中等屏幕 */
      @media (max-width: 992px) {
        /* 导航栏调整 */
        .nav-menu {
          display: none;
        }

        /* 主题网格调整 */
        .market-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        /* 最新主题网格调整 */
        .themes-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        /* 平台数据统计调整 */
        .stat-card:not(:last-child)::after {
          display: none;
        }

        .footer-section {
          text-align: center;
        }
      }

      /* 小屏幕 */
      @media (max-width: 768px) {
        /* 导航栏调整 */
        .nav-left {
          order: 2;
          width: 100%;
          justify-content: space-between;
        }

        .logo {
          order: 1;
        }

        .nav-right {
          order: 3;
          width: 100%;
        }

        .nav-menu {
          width: 100%;
          justify-content: space-around;
          gap: 16px;
        }

        .nav-item {
          font-size: 14px;
        }

        /* Banner调整 */
        .banner {
          height: 300px;
        }

        .banner-title {
          font-size: 28px;
        }

        .banner-subtitle {
          font-size: 16px;
        }

        /* 主内容区域调整 */
        .section-title {
          font-size: 24px;
        }

        .industry-platform {
          /* padding: 40px 20px; */
        }

        .platform-title {
          font-size: 24px;
        }

        .data-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        /* 底部区域调整 */
        .footer {
          padding: 30px 20px 20px;
        }

        .footer-section-title {
          font-size: 14px;
          margin-bottom: 16px;
        }

        .footer-links a {
          font-size: 13px;
        }

        .footer-contact p {
          font-size: 13px;
        }

        /* 侧边悬浮联系按钮调整 */
        .floating-contact {
          right: 20px;
          bottom: 20px;
        }

        .floating-btn {
          padding: 10px 16px;
          font-size: 13px;
        }

        .btn-icon {
          font-size: 16px;
        }

        .contact-card {
          width: 240px;
        }
      }

      /* 超小屏幕 */
      @media (max-width: 480px) {
        /* 导航栏调整 */
        .nav-item {
          font-size: 12px;
        }

        /* 下拉菜单响应式调整 */
        .user-dropdown {
          width: 200px;
          right: -20px;
        }

        .balance-amount {
          font-size: 16px;
        }

        /* Banner调整 */
        .banner {
          height: 250px;
        }

        .banner-title {
          font-size: 24px;
        }

        /* 主内容区域调整 */
        .market-grid {
          grid-template-columns: 1fr;
        }

        .themes-grid {
          grid-template-columns: 1fr;
        }

        .data-grid {
          grid-template-columns: 1fr;
        }

        .footer {
          padding: 20px 15px 15px;
        }

        .footer-section-title {
          font-size: 14px;
          margin-bottom: 12px;
        }

        .footer-links {
          gap: 10px;
        }

        .footer-links a {
          font-size: 13px;
        }

        .footer-contact p {
          font-size: 13px;
        }

        /* 侧边悬浮联系按钮调整 */
        .floating-contact {
          right: 15px;
          bottom: 15px;
        }

        .floating-btn {
          padding: 8px 12px;
          font-size: 12px;
        }

        .btn-icon {
          font-size: 14px;
        }

        .contact-card {
          width: 220px;
        }

        .contact-card-header {
          padding: 12px 16px;
        }

        .contact-card-title {
          font-size: 14px;
        }

        .contact-card-body {
          padding: 16px;
        }

        .contact-item {
          padding: 8px 0;
        }

        .contact-icon,
        .contact-info {
          font-size: 13px;
        }

        .contact-card-footer {
          padding: 12px 16px;
        }

        .contact-note {
          font-size: 11px;
        }
      }