.navbar-brand img {
  width: 100px;
  height: 100px;
}

nav a {
  font-size: 30px;
}
/* .container {
  width: 100%;
  border: 1px solid red;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  background-image: url(../image/主页大字背景.pic.jpg);
} */
.bg {
  margin-top: 20%;
}

.container .w-25 {
}
@media (min-width: 576px) {
  .container,
  .container-sm {
    max-width: 100% !important;
    height: 444px;
    /* padding-top: 40px; */
  }
  .box .image-container {
    /* margin-top: 10px !important; */
  }
  .box img {
    height: 444px !important;
  }
  .w-25 img {
    width: 70%;
    margin-top: 10%;
  }
}
nav {
}
.w-25:hover {
  transform: scale(1.05);
  transition: 1s;
}
.box {
  position: relative;
  background-image: none;
}
.box {
  width: 100%;
  margin-top: 0px !important;
}
.container .box img {
  width: 100%;
}

.image-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(1px); /* 默认虚化 */
  transition: filter 0.3s ease; /* 添加过渡效果 */
}

.image-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  clip-path: circle(50% at 50% 50%); /* 中心区域不虚化 */
  z-index: 1;
  opacity: 0.6; /* 可根据需要调整透明度 */
}

.image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.5) 100%
  );
  pointer-events: none; /* 确保不干扰鼠标事件 */
}

.box2 {
  position: absolute;
  top: 10px;
  width: 75%;
  margin: auto;
  left: 10%;
  font-size: 35px;
  color: white;
}
.box2 p {
  text-shadow: 2px 2px 4px rgb(0, 0, 0); /* 文本阴影 */
}
body {
  background-color: black;
}
.box3 {
  background-color: #000 !important;
  color: white;

  /*   margin-top: 25.5%; */
}

.box4 {
  font-size: 25px;
}
.box4 p {
  height: 33px;
}
.fade-in {
  opacity: 0; /* 初始状态为透明 */
  animation: fadeIn 1.5s forwards; /* 动画效果 */
  animation-delay: 0.5s; /* 动画延迟 */
}

.highlight {
  color: red; /* 更换颜色，可以根据需要更改 */
  font-weight: bold; /* 加粗 */
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* 可添加淡出效果的类 */
.fade-out {
  opacity: 1;
  animation: fadeOut 1s forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}
.box5 {
  display: flex;
  background-image: none;
  background-color: #000;
  color: white;
}
.p1 {
  display: flex;
  flex-direction: column;
  text-align: left;
  justify-content: center;
  padding-left: 10% !important;
  margin: auto;
}
.p2 img {
  padding-top: 20px;
}
.box6 {
  display: flex;
  background-image: none;
  background-color: white;
}
.box6 {
  position: relative; /* 设置位置为相对 */
  text-align: center;
  background-size: cover; /* 使图像覆盖整个背景 */
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(https://static.igem.wiki/teams/5328/assets/image/image/662be02cdaea01e3054020935c44fb61-01.jpg);
  height: 100vh; /* 使容器高度为视口高度 */
}
.b2 {
  display: flex;
}
.box7 {
  display: flex;
  padding-top: 50px;
  color: white;
  background-image: none;
  background-color: #000;
  list-style: none;
}
.box8 {
  padding: 0 !important;
  background-image: none;
  background-color: #000;
}

.box8 video {
  width: 100%;
  height: 100%;
}

.nav-link {
  color: rgba(255, 255, 255, 0.55);
}
.image-container {
  position: relative;
  overflow: hidden;
  /* 防止模糊效果超出边界 */
}

.kb {
  display: block;
  width: 400px;
  /* 自定义图片宽度 */
  height: auto;
  filter: blur(0px);
  /* 确保图片本身不模糊 */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, transparent 42%, rgb(0, 0, 0) 50%);
  pointer-events: none;
  /* 使叠加层不干扰鼠标事件 */
  z-index: 1;
  /* 确保覆盖在图像上 */
}

.blur-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle,
    transparent 30%,
    rgb(0, 0, 0) 60%,
    rgb(0, 0, 0) 100%
  );
  filter: blur(20px);
  /* 设置边缘模糊程度 */
  z-index: 2;
  /* 确保这个图层在overlay层上 */
}

.vp-title {
  font-size: 27px;
  font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", STHeiti, "Microsoft YaHei", SimSun, sans-serif;

}

@font-face {
  font-family: red hat display;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://static.igem.wiki/teams/4657/wiki/assets/fonts/8vif7wur0m80wwyf0qcxzzyzuotk8rzqvrd-d1nybourqkez-eec.woff2)format('woff2');
  unicode-range: U+100-2AF, U+304, U+308, U+329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
  font-family: red hat display;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://static.igem.wiki/teams/4657/wiki/assets/fonts/8vif7wur0m80wwyf0qcxzzyzuotk8rzqvrd-d1nybourqk8z-a.woff2)format('woff2');
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
  font-family: red hat text;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://static.igem.wiki/teams/4657/wiki/assets/fonts/rrqcbohi-ic6b3yvszgbrmx6zi-cy1a6ok2ml7hwzr-qclvf.woff2)format('woff2');
  unicode-range: U+100-2AF, U+304, U+308, U+329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
  font-family: red hat text;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://static.igem.wiki/teams/4657/wiki/assets/fonts/rrqcbohi-ic6b3yvszgbrmx6zi-cy1a6ok2ml7hwzrhqca.woff2)format('woff2');
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}