/* ----------------------------------------------
   CSS 分区说明: 方便后续抽取为 style.css
     1. 全局变量与重置
     2. 头部区域
     3. 首屏 Hero
     4. 公司简介 Intro
     5. 制造能力 Manufacturing
     6. 全球市场 Global Map (整合动态地图样式)
     7. 核心优势 Advantages
     8. 统计数据 Stats
     9. 行动呼吁 CTA
    10. 页脚 Footer
    11. 响应式适配
    12. 动态物流地图专用样式 (保证嵌入后美观不冲突)
----------------------------------------------- */

/* ---------- 1. 全局变量与重置 ---------- */
:root {
  --brand: #739abc;
  --dark: #1f2d3d;
  --text: #5c6773;
  --light-bg: #f5f7fa;
  --border: #e9eef3;
}

html,
body {
  overflow-x: hidden;
}

body {
  font-family: "Poppins", sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.7;
  font-size: 14px;
}

h1,
h2,
h3,
h4 {
  color: var(--dark);
  font-weight: 700;
  letter-spacing: -0.5px;
}

a {
  transition: 0.3s;
}

section {
  padding: 50px 0;
  position: relative;
}

.section-title {
  margin-bottom: 60px;
}

.section-title h2 {
  font-size: 42px;
  margin-bottom: 18px;
}

.section-title p {
  max-width: 700px;
  margin: auto;
  color: #6f7b88;
  font-size: 16px;
}

/* ---------- 2. 头部区域 (保留原版布局) ---------- */
.header-inner .row {
  margin-right: 0;
  margin-left: 32px;
}

.mobile-nav {
  margin-top: 10px;
}

.nav-col {
  padding-right: 0;
}

/* ---------- 3. 首屏 Hero 区域 ---------- */
.about-hero {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(rgba(18, 30, 42, 0.76), rgba(59, 97, 135, 0.78)),
  /* 说明: 背景图为工厂或品牌形象图，可根据实际替换路径 */
}

.about-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, #7e9db9, transparent 100%);
  
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.hero-subtitle {
  color: #333333;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 24px;
  display: inline-block;
}

.hero-title {
  font-size: 68px;
  line-height: 1.08;
  color: #fff;
  margin-bottom: 30px;
  font-weight: 800;
}

.hero-desc {
  color: #666666;
  font-size: 20px;
  line-height: 1.9;
  max-width: 640px;
  margin-bottom: 0px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 32px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid transparent;
}

.hero-btn:hover {
  background: #5f87ab;
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- 3b. Hero 右侧视觉区 ---------- */
.hero-visual {
  position: relative;
  padding-top: 100px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* 产品展示图容器 */
.hero-product-showcase {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.hero-product-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform: scale(1.02);
  transition: transform 0.5s ease;
}

.hero-product-showcase:hover .hero-product-img {
  transform: scale(1.06);
}

/* 光晕装饰 */
.hero-product-glow {
  position: absolute;
  top: -20%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(115, 154, 188, 0.30), transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}

/* 数据卡片网格 */
.hero-stats-grid {
  display: flex;
  gap: 14px;
  width: 100%;
}

.hero-stat-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 18px 12px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.hero-stat-number {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 4px;
}

.hero-stat-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #6f7b88;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 信任徽章行 */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: #F8F8F8;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  color: #333333;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.hero-badge i {
  color: var(--brand);
  font-size: 11px;
}

/* ---------- 4. 公司简介区域 ---------- */
.intro-image {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.intro-content {
  padding-left: 30px;
}

.intro-content h2 {
  font-size: 46px;
  line-height: 1.2;
  margin-bottom: 25px;
}

.intro-content p {
  margin-bottom: 20px;
  color: #687482;
}

.intro-highlight {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.intro-badge {
  padding: 12px 20px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--dark);
  font-weight: 500;
}

.intro-badge i {
  color: var(--brand);
  margin-right: 8px;
}


/* ---------- 5. 制造能力卡片 ---------- */
.manufacturing-section {
  background: var(--light-bg);
  padding-top: 30px;
  padding-bottom: 30px;
}

.manufacturing-section .section-title {
  margin-bottom: 30px;
}

.manufacturing-card {
  background: #fff;
  border: 1px solid var(--border);
  padding: 45px 35px;
  border-radius: 10px;
  height: 100%;
  transition: 0.3s;
}

.manufacturing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(115, 154, 188, 0.4);
}

.manufacturing-icon {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: rgba(115, 154, 188, 0.1);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin-bottom: 28px;
}

.manufacturing-card h3 {
  font-size: 24px;
  margin-bottom: 18px;
}

/* ---------- 6. 全球市场区域 (动态地图嵌入样式) ---------- */
.global-market {
  background: #fff;
  text-align: center;
}

/* 动态地图卡片样式 (嵌入优雅并与品牌融合) */
.dynamic-global-map {
  margin-top: 30px;
  width: 100%;
}

/* 地图卡片容器 — 继承原卡片高级感 */
.embedded-map-card {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 6px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.2s ease;
}

.map-header {
  padding: 20px 28px 12px 28px;
  border-bottom: 1px solid #eef2f6;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}

.title-section h1 {
  font-size: 1.6rem;
  font-weight: 600;
  color: #2b3b4c;
  margin: 0;
}

.title-section .sub {
  font-size: 0.85rem;
  color: #7e8c9e;
  margin-top: 6px;
  display: flex;
  gap: 12px;
}

.badge {
  background: #eef2f7;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  color: #4d6f8f;
}

.stats {
  display: flex;
  gap: 24px;
  font-size: 0.85rem;
  color: #4a5b6e;
}

.stats span {
  font-weight: 700;
  color: #4d6f8f;
  font-size: 1rem;
}

#logistics-map {
  width: 100%;
  height: 620px;
  background: #ffffff;
}

.map-footer {
  padding: 14px 28px 22px;
  border-top: 1px solid #eef2f6;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.75rem;
  color: #7b8a9b;
}

.legend {
  display: flex;
  gap: 20px;
}

.legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
}

.legend-dashed {
  display: inline-block;
  width: 28px;
  height: 2px;
  background: repeating-linear-gradient(90deg, #739abc, #739abc 4px, transparent 4px, transparent 8px);
  margin-right: 6px;
}

/* 响应式针对地图卡片微调 */
@media (max-width: 768px) {
  .embedded-map-card {
    border-radius: 16px;
  }
  .map-header {
    padding: 16px 20px 8px 20px;
  }
  .title-section h1 {
    font-size: 1.2rem;
  }
  #logistics-map {
    height: 450px;
  }
  .stats {
    font-size: 0.75rem;
    gap: 16px;
  }
  .legend {
    gap: 12px;
  }
  .map-footer {
    padding: 10px 20px 16px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ---------- 7. 核心优势卡片 ---------- */
.advantages-section {
  background: var(--light-bg);
}

.advantage-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 42px 35px;
  height: 100%;
  transition: 0.3s;
}

.advantage-box:hover {
  transform: translateY(-4px);
  border-color: rgba(115, 154, 188, 0.4);
}

.advantage-icon {
  color: var(--brand);
  font-size: 40px;
  margin-bottom: 24px;
}

.advantage-box h3 {
  font-size: 24px;
  margin-bottom: 18px;
}

/* ---------- 8. 统计数据区域 ---------- */
.stats-section {
  /* background: linear-gradient(135deg, #1c2d3d, #23384d); */
  /* background: linear-gradient(135deg, #1f2d3d, #739abc); */
  background: radial-gradient(circle at top, #739abc, transparent 100%);
  color: #fff;
  text-align: center;
}

.stats-item {
  padding: 20px;
}

.stats-number {
  display: block;
  font-size: 58px;
  line-height: 1;
  margin-bottom: 14px;
  color: #fff;
  font-weight: 800;
}

.stats-label {
  color: rgba(255, 255, 255, 0.76);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
}

/* ---------- 9. CTA 行动呼吁 ---------- */
.cta-section {
  text-align: center;
  background: #fff;
}

.cta-section h2 {
  font-size: 52px;
  margin-bottom: 20px;
}

.cta-section p {
  max-width: 700px;
  margin: auto;
  margin-bottom: 40px;
  font-size: 17px;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}

.btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 15px 30px;
  background: var(--brand);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
}

.btn-main:hover {
  background: #5f87ab;
  color: #fff;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 15px 30px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--dark);
  background: #fff;
}

.btn-outline:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* ---------- 10. 页脚区域 ---------- */
.footer-top .row {
  padding-bottom: 30px;
}

.footer-hr {
  border-top: 0.1px solid #ddd;
}

.footer-link-item {
  line-height: 1.1em;
}

/* ---------- 11. 响应式适配 ---------- */
@media (max-width: 991px) {
  section {
    padding: 80px 0;
  }

  .hero-title {
    font-size: 52px;
  }

  .hero-visual {
    margin-top: 0px;
  }

  .hero-stats-grid {
    max-width: 100%;
  }

  .hero-product-showcase {
    max-width: 100%;
  }

  .hero-badges {
    max-width: 100%;
  }

  .intro-content {
    padding-left: 0;
    margin-top: 40px;
  }

  .section-title h2 {
    font-size: 36px;
  }

  .cta-section h2 {
    font-size: 40px;
  }
}

.section-title
 {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
    padding: -1px 234px;
}

@media (max-width: 767px) {
  section {
    padding: 70px 0;
  }

  .about-hero {
    min-height: 640px;
  }

  .hero-title {
    font-size: 40px;
  }

  .hero-desc {
    font-size: 16px;
  }

  .section-title h2 {
    font-size: 32px;
  }

  .intro-content h2 {
    font-size: 36px;
  }

  .stats-number {
    font-size: 42px;
  }

  .cta-section h2 {
    font-size: 34px;
  }
  
}
/* ---------- 13. 技术研发与工艺流程 (Technology & Process) ---------- */

/* 分支流程区域 */
.branch-section {
  padding: 60px 0;
  background: #fff;
}

/* 分支卡片 - 样式完全复刻制造能力卡片的高级感 */
.branch-card {
  background: #fff;
  border: 1px solid var(--border);
  padding: 40px 30px;
  border-radius: 10px; /* 保持与整体风格一致的 10px 圆角 */
  height: 100%;
  transition: 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
}

.branch-card:hover {
  transform: translateY(-4px);
  border-color: rgba(115, 154, 188, 0.4); /* 契合品牌色的悬停边框 */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.branch-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

/* 图标容器 - 采用品牌色 10% 透明度的柔和底色 */
.branch-icon-wrap {
  width: 56px;
  height: 56px;
  background: rgba(115, 154, 188, 0.1);
  color: var(--brand);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-right: 15px;
}

.branch-card h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--dark);
  margin: 0;
}

/* 图片占位容器 */
.branch-img-placeholder {
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 100%;
  height: 200px;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6f7b88;
  font-size: 13px;
  overflow: hidden;
}

.branch-img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.branch-card:hover .branch-img-placeholder img {
  transform: scale(1.04);
}

/* 极简内嵌步骤列表 */
.step-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.step-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
}

.step-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.step-number {
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
  min-width: 24px;
}

.step-text-wrap {
  flex: 1;
}

.step-name {
  font-weight: 600;
  color: var(--dark);
  font-size: 15px;
  display: block;
  margin-bottom: 4px;
}

.step-desc {
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
}

/* 流程交汇过渡点 */
.merge-point {
  text-align: center;
  padding: 20px 0 50px;
  background: #fff;
}

.merge-line {
  width: 2px;
  height: 50px;
  background: linear-gradient(to bottom, transparent, var(--border));
  margin: 0 auto;
}

.merge-icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--brand);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  margin-bottom: 15px;
}

.merge-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--dark);
}

/* 主时间轴主干区域 */
.main-line-section {
  padding: 60px 0 80px;
  background: var(--light-bg); /* 切换为浅色背景，突出主流程 */
  border-top: 1px solid var(--border);
}

.timeline {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

/* 轴线 */
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
  transform: translateX(-50%);
}

.timeline-item {
  display: flex;
  align-items: center;
  margin-bottom: 70px;
  position: relative;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-item .step-img,
.timeline-item .step-content {
  width: 50%;
}

/* 左右交错布局调整 */
.timeline-item.left .step-img {
  order: 1;
  padding-right: 50px;
  text-align: right;
}

.timeline-item.left .step-content {
  order: 2;
  padding-left: 50px;
}

.timeline-item.right .step-img {
  order: 2;
  padding-left: 50px;
  text-align: left;
}

.timeline-item.right .step-content {
  order: 1;
  text-align: right;
  padding-right: 50px;
}

/* 时间轴核心触点 */
.timeline-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  background: var(--brand);
  border: 3px solid var(--light-bg);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0 0 0 4px rgba(115, 154, 188, 0.15);
  transition: 0.3s ease;
}

.timeline-item:hover .timeline-dot {
  box-shadow: 0 0 0 8px rgba(115, 154, 188, 0.25);
  background: var(--dark);
}

.step-content .step-num {
  font-size: 12px;
  color: var(--brand);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 6px;
}

.step-content h4 {
  font-size: 22px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 12px;
}

.step-content p {
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

/* 时间轴内的图片容器 */
.img-placeholder {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6f7b88;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.02);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.timeline-item:hover .img-placeholder {
  transform: scale(1.02);
}

/* ---------- 响应式适配微调 (同步原有系统的断点) ---------- */
@media (max-width: 991px) {
  .timeline-item.left .step-img, 
  .timeline-item.right .step-img { padding: 0 30px; }
  
  .timeline-item.left .step-content, 
  .timeline-item.right .step-content { padding: 0 30px; }
  
  .step-content h4 { font-size: 20px; }
}

@media (max-width: 767px) {
  .timeline::before {
    left: 20px;
  }
  
  .timeline-item {
    flex-direction: column !important;
    align-items: flex-start;
    margin-bottom: 50px;
  }
  
  .timeline-item .step-img,
  .timeline-item .step-content {
    width: 100%;
    padding-left: 50px !important;
    padding-right: 0 !important;
    text-align: left !important;
  }
  
  .timeline-item .step-img {
    margin-bottom: 15px;
  }
  
  .timeline-dot {
    left: 20px;
    top: 10px;
    transform: translate(-50%, 0);
  }
  
  .branch-card {
    margin-bottom: 24px;
  }
  
  .merge-line {
    height: 40px;
  }
}

/* --- 现代化制造卡片样式 --- */

/* 1. 卡片整体容器 */
.pro-manufacturing-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0; /* 增加精致的边框 */
    border-radius: 12px; /* 卡片整体的大圆角 */
    overflow: hidden; /* 核心：确保内部元素（图片）不会超出卡片的圆角范围 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* 增加微妙的阴影，提升层次感 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 鼠标悬停动画 */
    height: 100%; /* 确保在Bootstrap网格中卡片高度一致 */
    display: flex;
    flex-direction: column; /* 垂直排布 */
}

/* 鼠标悬停时的效果 */
.pro-manufacturing-card:hover {
    transform: translateY(-5px); /* 向上轻微浮动 */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

/* 2. 图片专用容器：核心修改 */
.m-card-image-box {
    width: 100%;
    /* 在这里控制图片下方与字体的距离 */
    margin-bottom: 25px; /* 精确控制图片和H3标题之间的距离 */
    
    /* 额外的圆角控制（如果图片不占满全宽，可以开启这里，并在卡片上移除overflow: hidden） */
    /* border-radius: 12px 12px 0 0; */
    /* overflow: hidden; */
}

.m-card-image-box img {
    /* 如果图片需要填充整个顶部，使用下面两行 */
    width: 100%;
    object-fit: cover; /* 保持图片比例 */
    /* 如果卡片开启了overflow: hidden，图片顶部会自动获得圆角 */
}

/* 3. 文字内容专用容器 */
.m-card-content-box {
    /* 控制文字与卡片边缘的距离，实现优雅的内间距 */
    padding: 0 25px 25px 25px; /* 上0，右25，下25，左25 (上间距已被image-box的margin-bottom占据) */
    flex-grow: 1; /* 确保文字内容区域拉伸，撑开卡片高度 */
    display: flex;
    flex-direction: column;
}

/* 4. 标题样式 */
.m-card-title {
    font-size: 1.5rem; /* 调整字体大小 */
    font-weight: 600;
    color: #333;
    /* 精确控制标题与下方段落的距离 */
    margin-top: 0; /* 清除Bootstrap可能存在的顶部默认边距 */
    margin-bottom: 12px; /* 标题与段落之间的间距 */
}

/* 5. 段落文字样式 */
.m-card-text {
    font-size: 1rem;
    color: #666;
    line-height: 1.6; /* 改善可读性 */
    margin-bottom: 0; /* 清除默认下边距 */
}
/* 适配 about 页面的 header 动画（因为 JS 添加的是 header-sticky 类） */
.header.header-sticky .header-inner {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.4s ease;
  animation: fadeInDown 0.5s both 0.1s;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}