App.css

body {
  padding-top: 56px;
}

.left-aligned {
  margin-left: auto;
}

.bg-dark {
  background-color: #343a40 !important;
}

.bg-hero {
  background-color: #45b06cff;
}

.bg-rice_yellow {
  background-color: rgb(245, 245, 220);
}

.bg-miami {
  background-image: url('/src/asset/miami.jpg'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */
}

/* CALLOUT */
.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #e9ecef;
  border-left-width: 0.25rem;
  border-radius: 0.25rem;
}

.bd-callout h4 {
  margin-bottom: 0.25rem;
}

.bd-callout p:last-child {
  margin-bottom: 0;
}

.bd-callout code {
  border-radius: 0.25rem;
}

.bd-callout + .bd-callout {
  margin-top: -0.25rem;
}

.bd-callout-info {
  border-left-color: #5bc0de;
}

.bd-callout-warning {
  border-left-color: #f0ad4e;
}

.bd-callout-danger {
  border-left-color: #d9534f;
}

/* footer */
footer a {
  color: white;
  font-weight: bold;
  text-decoration: none;
}

footer a:hover {
  color: white;
  text-decoration: underline;
}

/* navbar */
.custom-dropdown-menu {
  /* navbar folder的设置 */
  /* background-color: #1b1a1a;  //自定义背景色 */
  color: #030303;  /* 自定义文字颜色 */
}

.custom-dropdown-menu.dropdown-item {
  /* navbar folder 展开时字体颜色与背景 */
  /* background-color: #4d4949; */
  color: #000000;  /* 自定义每个菜单项的文字颜色 */
}

.custom-dropdown-menu.dropdown-item:hover {
  background-color: #e4dfb4;  /* 鼠标悬停时的背景色 */
  color: #39d197;  /* 鼠标悬停时的文字颜色 */
}

/* header */
.bg-miami {
  background-image: url('/src/asset/img/miami.jpg'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */
}


.custom-header-home {
  width: 100vw;
  height: 100vh;
  background-image: url('/src/asset/img/miami.jpg'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */
}

.custom-header-team {
  width: 100vw;
  height: 100vh;
  background-image: url('https://img0.baidu.com/it/u=3144851616,2583845916&fm=253&fmt=auto&app=138&f=JPEG?w=462&h=500'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */
}

.promotion-video {
  height: 30vh; /* 设置高度为视口高度的80% */
  border: none; 
  border-radius: 30px; /* 圆角效果 */
}

.responsive-img {
  width: 100%; /* 图片宽度自适应容器 */
  height: auto; /* 保持图片纵横比 */
  display: block; /* 去掉图片下方的空隙 */
}

.full-height-element {
  height: 100vh; /* 设置元素的高度为视口高度的 100% */
}

/* 以下几个是team member响应式卡片 */
.card-container {
  max-width: 300px;
  margin: auto;
  height: 500px;
}

.card {
  transition: transform 0.2s;
}

.card-img-top {
  width: 300px;
  height: 400px;
}

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

.row-custom-height-card {
  height: 300px; /* 你可以根据需要调整高度 */
}

.row-custom-height-card-space {
  height: 100px; /* 你可以根据需要调整高度 */
}

/* wet-lab,dry-lab用的内容框框 */
.rounded-border {
  border: 2px solid #f7a901; /* 设置边框的宽度和颜色 */
  border-radius: 10px; /* 设置圆角半径 */
  margin-bottom: 100px;
}


/* 文本居中 */
.center-text {
  text-align: center; /* 将文本水平居中 */
}

/* 文本开头有缩进，起到空格作用 */
.indent {
  text-indent: 20px; /* 设置首行缩进 20px */
}