@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");

body {
  font-family: 'Open Sans', arial, sans-serif;
  color: #494d55;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-width: 1200px;
}

p {
  margin-bottom: 5px;
  line-height: 1.5;
}


/* ======= header Section ======= */
.navbar-brand .highlight {
    font-weight: 800;
    font-size: 25px;
    color: #505050;
}

.navbar-brand .highlight:hover {
    color: #FF6347;
}

.navbar ul li a {
    font-weight: 600;
    font-size: 18px;
    color: #505050;
}

.navbar ul li a.active {
    color: #FF6347 !important;
}

  .nav-item {
    list-style: none;
    padding: 0 15px;
  }
  .nav-item a {
    text-decoration: none;
    display: block;
    padding: 10px;
    transition: color 0.3s ease;
  }
  /* .nav-item a:hover {
    background-color: #ddd;
    color: #FF6347;
  }*/
  .nav-item::after {
    content: '';
    display: block;
    background-color: #FF6347;
    height: 5px;
    width: 0;
    transition: width 0.3s ease;
  }
  .nav-item:hover::after {
    width: 100%;
  }

.nav-item .dropdown-menu .dropdown-item:hover {
    background-color: rgba(255,99,71, 0.2);
  }

.navbar-collapse ul {
    margin-left: auto;
}


/* ======= Hero Section ======= */

.hero-section {
  min-height: 560px;
  position: relative;
}

.background-div {
  width: 100%; /* 可以根据需要调整宽度 */
  height: 560px; /* 可以根据需要调整高度 */
  background-image: url('../images/hero-1.jpg'); /* 替换为你的图片URL */
  background-size: cover; /* 背景图片覆盖整个div */
  background-position: center center; /* 背景图片居中显示 */
  display: flex;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  z-index: -1; /* 确保背景层在文字层之下 */
 }

.transparent-overlay {
   width: 100%;
   height: 560px;
   background-color: rgba(0, 0, 0, 0.3); /* 黑色半透明背景，alpha值为0.5，可以根据需要调整 */
   position: absolute;
   top: 0;
   left: 0;
}

.item-content-inner {
    max-width: 800px;
    padding-top: 120px;
    z-index: 1; /* 确保文字层在最上面 */
}

.item-content-inner .heading {
  font-family: 'Open Sans', arial, sans-serif;
  font-size: 50px;
  line-height: 1.4;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 15px;
  color: white; /* 文本颜色，根据背景色调整 */
  text-align: center;
}

.item-content-inner .heading1 {
  font-family: 'Open Sans', arial, sans-serif;
  font-size: 90px;
}

.item-content-inner .intro {
  font-family: 'Open Sans', arial, sans-serif;
  font-size: 20px;
  color: white; /* 文本颜色，根据背景色调整 */
}





/* ======= honeycomb Section ======= */
* {
    margin: 0;
    padding: 0;
}
.grid {
    background: rgba(123, 158, 158, 0.2);
}


#hexGrid {
  display: flex;
  flex-wrap: wrap;
  width: 70%;
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  list-style-type: none;
  padding-top: 1%;
  padding-bottom: 4%;
  padding-right: 3%;
}

.hex {
  position: relative;
  visibility:hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
  transition: all 0.5s;
  backface-visibility: hidden;
  will-change: transform;
  transition: all 0.5s;
}

.hex::after{
  content:'';
  display:block;
  padding-bottom: 86.602%;  /* =  100 / tan(60) * 1.5 */
}

.hexIn{
  position: absolute;
  width:96%;
  padding-bottom: 110.851%; /* =  width / sin(60) */
  margin: 2%;
  overflow: hidden;
  visibility: hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
  -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
      -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
          transform: rotate3d(0,0,1,-60deg) skewY(30deg);
    transition: all 0.5s;
}

.hexIn * {
  position: absolute;
  visibility: visible;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}

.hexLink {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
        -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
            transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}


/*** HEX CONTENT ***/
.hex img {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
}

.hex h1, .hex p {
  width: 100%;
  padding: 2%;
  box-sizing:border-box;
  opacity: 1;
  color: black; /* 初始文字颜色 */
  transition: color 0.3s ease; /* 平滑过渡效果 */
  font-family: 'Montserrat';
}


#demo1 {
  text-align: center;
  bottom: 8%;
  padding-top:90%;
  font-size: 1.2em;
  z-index: 1;
  /* text-transform: uppercase; */
  font-weight: 700;
}

#demo2 {
bottom: 2%;
text-align: center;
text-transform: capitalize;
font-size: 0.8em;
font-weight: 500;
}

.img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background-color: white;
}

.img img {
padding: 20%;
}

.img:before, .img:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  opacity: 0;
  transition: opacity 0.5s;
}

.img:before {
  /*background: rgba(22, 103, 137, 0.3)*/
  background: white;
}
.img:after {
  /*background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.5), transparent);*/
  /*background: linear-gradient(to top, transparent, rgba(255,250,240, 0.5), transparent);*/
  background-color: rgba(135,206,250, 0.5);
}


/*** HOVER EFFECT  ***/
.hexLink:hover h1, .hexLink:focus h1,
.hexLink:hover p, .hexLink:focus p{
opacity:1;
transition: 0.8s;
color: black; /* 鼠标悬停时文字颜色 */
}

.hexLink:hover h1, .hexLink:focus h1{
font-size: 5em;
font-weight: 700;
}

.hexIn:hover .img:before,
.hexIn:hover .img:after,
.hexIn:hover .hexLink {
  opacity: 1;
}

.hex:hover {
  transform: scale(1.1); /* 将div放大到原来的1.1倍 */
  z-index: 10; /* 增加z-index值，使div悬浮于其他元素上方 */
}


/*** HEXAGON SIZING AND EVEN ROW INDENTATION ***/
/* <- 6-5  hexagons per row */
  .hex {
    width: 16.666%; /* 一个六边形的宽度 = 100 / 6 */
  }
  .hex:nth-child(11n+7){ /* first hexagon of even rows */
    margin-left:8.333%;  /* 偶数行最左边六边形的左margin等于六边形宽度的一半 = width of .hex / 2  to indent even rows */
  }
/* 6个一行或者5个一行。第一行6个，第二行5个，第三行6个，第四行5个，以此类推 */
/* .hex:nth-child(11n+7)  这里的数字是这样计算的：6+5=11， 6+1=7 */



/* ======= dbname Section ======= */
.dbname {
    height: 88px;
    width: 100%;
    margin-top: 0px;
    text-align: center;
    background-color: rgb(255,250,240);
}

.dbname h2 {
    line-height: 88px;
    font-size: 56px;
    font-weight: 600;
    font-family: Courier New, Courier, monospace;
}



/* ======= testimonial Section ======= */
.py-5 {
padding-top:3rem !important;
padding-bottom:3rem !important;
}

.carousel-div {
padding-top:0;
padding-bottom:0;
}

.testimonial-carousel {
height:250px;
}
.testimonial-carousel .carousel-cell {
width:480px;
margin-right:2rem;
height:100%;
}
.testimonial-carousel .carousel-cell .item-inner {
height:90%;
border:1px solid #efefef;
background:#fff;
padding:2rem;
}
.testimonial-carousel .carousel-cell .source-profile {
width:80px;
height:80px;
}
.testimonial-carousel .carousel-cell .source-info {
font-size:0.875rem;
}
.testimonial-carousel .flickity-button {
background:rgba(33,43,53,0.6);
}
.testimonial-carousel .flickity-button:hover {
background:#232d38;
}
.testimonial-carousel .flickity-button:focus {
box-shadow:none;
}
.testimonial-carousel .flickity-prev-next-button {
width:40px;
height:40px;
border-radius:50%;
}
.testimonial-carousel .flickity-prev-next-button .flickity-button-icon {
fill:white;
width:50%;
}

.shadow {
box-shadow:0 0.5rem 1rem rgba(0,0,0,0.15) !important
}
.rounded {
border-radius:var(--bs-border-radius) !important
}

.mb-2 {
margin-bottom:.5rem !important
}
.mb-3 {
margin-bottom:1rem !important
}

.text-primary {
color:rgba(71, 176, 223, 1) !important;
}


/* ======= footer Section ======= */
.footer {
    text-align: center;
    padding-bottom: 1rem
}

.copyright {
    font-size: 12px;
}

.footer-links a {
    text-decoration: none;
  }
  


/* ======= species html ======= */
.species-img {
background-color: white;
}

.species-img img {
width:70px;
height:70px;
}

.species-img:hover {
  transform: scale(1.5); /* 将div放大到原来的1.1倍 */
  z-index: 10; /* 增加z-index值，使div悬浮于其他元素上方 */
  transition: 0.5s;
}



/* ======= genes html ======= */
.gray-border {
    border: 1px solid #D3D3D3;     /* 灰色边框 */
    border-radius: 10px;        /* 圆角 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加轻微的阴影 */
    padding: 10px;              /* 内边距 */
 }

.square-container {
  display: flex; /* 使用flex布局 */
  position: relative; /* 用于定位图片 */
  width: 50%; /* 容器宽度，是外层div块的50% */
  height: 0; /* 高度设置为0 */
  padding-top: 50%; /* 高度是宽度的50%，保持正方形 */
  overflow: hidden; /* 隐藏溢出容器的内容 */
  border: 1px solid #D3D3D3; /* 边框宽度、样式和颜色 */
}

.square-container img {
  position: absolute; /* 绝对定位 */
  top: 50%; /* 定位到容器的50%位置 */
  left: 50%; /* 定位到容器的50%位置 */
  transform: translate(-50%, -50%); /* 将图片移动到容器的中心 */
  max-width: 100%; /* 图片最大宽度不超过容器宽度 */
  height: auto; /* 图片高度自动调整，保持宽高比 */
}

.italic-word {
  font-style: italic;
}

.statis-circle {
    display: inline-block;
    width: 42px;
    height: 42px;
    -webkit-border-radius: 21px;
    border-radius: 21px;
    text-align: center;
    font-size: 16px;
    line-height: 38px;
    border: 2px solid #000;
}