body {
  font-family: 'Noto Sans', sans-serif;
}

.gradient-blue-text {
  font-size: 3rem;
  font-weight: bold;
  background: linear-gradient(90deg, #385492, #babbbe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.publication-title {
  font-size: 5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem; 
}

.footer .icon-link {
  font-size: 25px;
  color: #000;
}

.link-block a {
  margin-top: 5px;
  margin-bottom: 5px;
}

.dnerf {
  font-variant: small-caps;
}

.newrobot {
  color: #1b9e77
}

.newenv {
  color: #d95f02
}

.newobjective {
  color: #7570b3
}

.newgoal {
  color: #e6ab02
}

.vint {
  color: #1b9e77
}

.baseline {
  color: #d95f02
}

.oraltalk {
  color: #ff0000;
  font-weight: bold;
}

.teaser .hero-body {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.teaser {
  font-family: 'Google Sans', sans-serif;
  margin-top: 0;
  margin-bottom: 0;
}


.publication-banner {
  max-height: parent;

}

.publication-banner video {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  object-fit: fit;
}

.publication-header .hero-body {}

.publication-title {
  font-family: 'Google Sans', sans-serif;
}

.publication-authors {
  font-family: 'Google Sans', sans-serif;
}

.publication-venue {
  color: #555;
  width: fit-content;
  font-weight: bold;
  margin: 0 auto;
  /* Center horizontally */
  text-align: center;
  /* Center text within the element */
}

.publication-awards {
  color: #ff3860;
  width: fit-content;
  font-weight: bolder;
}

.publication-authors {}

.publication-authors a {
  color: hsl(204, 86%, 53%) !important;
}

.publication-authors a:hover {
  text-decoration: underline;
}

.no-bold {
  font-weight: normal;
}

.author-block {
  display: inline-block;
}

.publication-banner img {}

.publication-authors {
  /*color: #4286f4;*/
}

.publication-video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;

  overflow: hidden;
  border-radius: 10px !important;
}

.publication-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.publication-body img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.results-carousel {
  width: auto;
  margin: 0 auto;
}

/* Style each carousel item */
.results-carousel .item {
    margin: 5px;
    overflow: hidden;
    border: 1px solid #bbb;
    border-radius: 10px;
    padding: 0;
    font-size: 0; /* Ensure no text affects the layout */
    display: flex;
    justify-content: center; /* Horizontally center the content inside each item */
    align-items: center; /* Vertically center the content inside each item */
}

.sub-results-carousel {
  width: 100%;
  margin: 0 auto;
  /* left: -10%; */
  perspective: 1500px; /* 添加透视效果 */
  position: relative;
  /* height: 700px; */
}

/* Style each carousel item */
.sub-results-carousel .item {
    margin: 5px;
    overflow: hidden;
    border: 1px solid #bbb;
    border-radius: 10px;
    padding: 0;
    font-size: 0;
    display: flex;
    justify-content: center; /* Horizontally center the content inside each item */
    align-items: center; /* Vertically center the content inside each item */
    background-color: #000;
}

.sub-results-carousel .item video {
  height: 400px; 
  width: auto; 
  /* box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid #bbb;
  border-radius: 10px; */
}

/* Style each carousel item */
.sub-results-carousel .item_b {
    margin: 5px;
    overflow: hidden;
    border: 1px solid #bbb;
    border-radius: 10px;
    padding: 0;
    font-size: 0;
    display: flex;
    justify-content: center; /* Horizontally center the content inside each item */
    align-items: center; /* Vertically center the content inside each item */
    background-color: #000;
}

.sub-results-carousel .item_b video {
  height: 300px; 
  width: auto; 
  /* box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid #bbb;
  border-radius: 10px; */
}

/* 对非中心项目应用立体效果、折叠和缩小 */
.sub-results-carousel .slick-slide:not(.slick-center) {
    width: 50%; /* 让非中心幻灯片占用一半的宽度 */
    transform: scale(0.7) rotateY(20deg) translateZ(-60px); /* 3D旋转与缩放，添加深度 */
    transition: transform 1s ease, width 1s ease, box-shadow 0.5s ease; /* 平滑过渡效果 */
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2), 0px 15px 20px rgba(0, 0, 0, 0.15);
    opacity: 0.3; /* 调整透明度，使其不那么显眼 */
}


/* 对居中的项目去除虚化效果，并恢复正常大小 */
.sub-results-carousel .slick-center {
    width: 100%; /* 恢复居中项目为全宽 */
    transform: scale(1) rotateY(0deg) translateZ(0px); /* 恢复正常大小并去除旋转 */
    opacity: 1;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    transition: transform 1s ease, width 1s ease, box-shadow 0.5s ease, opacity 0.3s ease; /* 平滑过渡效果 */
}

/* 居中幻灯片的视觉增强 */
.sub-results-carousel .slick-center .item {
    max-width: 100%; /* 保证居中项不会被额外缩放 */
    transform: scale(1.2); /* 微微放大中心项，增加聚焦感 */
    transition: transform 0.3s ease; /* 平滑过渡效果 */
}

.sub-results-carousel1 {
  width: 100%;
  margin: 0 auto;
  /* left: -25%; */
  perspective: 1500px; /* 添加透视效果 */
  position: relative;
  /* height: 700px; */
}

/* Style each carousel item */
.sub-results-carousel1 .item {
    margin: 5px;
    overflow: hidden;
    /* border: 1px solid #bbb;
    border-radius: 10px; */
    /* padding: 0; */
    /* font-size: 0; Ensure no text affects the layout */
    display: flex;
    justify-content: center; /* Horizontally center the content inside each item */
    align-items: center; /* Vertically center the content inside each item */
    background-color: transparent; /* 确保背景透明 */
}

.sub-results-carousel1 .item video {
  /* height: 700px;  */
  width: auto; 
  object-fit: contain; 
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  /* border: 1px solid #bbb;
  border-radius: 10px; */
}
/* 对非中心项目应用立体效果、折叠和缩小 */
.sub-results-carousel1 .slick-slide:not(.slick-center) {
    width: 50%; /* 让非中心幻灯片占用一半的宽度 */
    transform: scale(0.7) rotateY(20deg) translateZ(-60px); /* 3D旋转与缩放，添加深度 */
    transition: transform 1s ease, width 1s ease, box-shadow 0.5s ease; /* 平滑过渡效果 */
    /* box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2), 0px 15px 20px rgba(0, 0, 0, 0.15); 为非中心项添加立体阴影 */
    opacity: 0.3; /* 调整透明度，使其不那么显眼 */
}


/* 对居中的项目去除虚化效果，并恢复正常大小 */
.sub-results-carousel1 .slick-center {
    width: 100%; /* 恢复居中项目为全宽 */
    transform: scale(1) rotateY(0deg) translateZ(0px); /* 恢复正常大小并去除旋转 */
    opacity: 1;
    /* box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); 给中心项添加光晕效果 */
    transition: transform 1s ease, width 1s ease, box-shadow 0.5s ease, opacity 0.3s ease; /* 平滑过渡效果 */
}

/* 居中幻灯片的视觉增强 */
.sub-results-carousel1 .slick-center .item {
    max-width: 100%; /* 保证居中项不会被额外缩放 */
    transform: scale(1.2); /* 微微放大中心项，增加聚焦感 */
    transition: transform 0.3s ease; /* 平滑过渡效果 */
}


.videos-flex {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}

.videos-flex>video {
  margin: 0.2rem;
  min-width: 200px;
  max-width: 300px;
}



.std-videos-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
    margin: 0 auto;
    position: relative;
}

.std-videos-container .item {
    margin: 5px;
    overflow: hidden;
    border: 1px solid #bbb;
    border-radius: 10px;
    padding: 0;
    font-size: 0;
}

.std-videos-container video {
    width: 100%; /* Make video take up full width of its container */
    height: auto;
}

figure.image {
  height: 128px; /* 设置 figure 的固定高度 */
  width: auto; /* 宽度自适应 */
}

figure.image img {
  height: 100%; /* 设置 img 的高度为 figure 的 100% */
  width: auto; /* 宽度自适应 */
}

/* .highlight-center {
  text-align: center;
  font-weight: bold;
  font-size: 25px;
  background: #fffae6;
  padding: 6px;
  border-radius: 6px;
} */

.highlight-center {
  text-align: left;
  font-weight: bold;
  font-size: 25px;
  background: #fffae6;
  padding: 6px;
  border-radius: 6px;
  background-clip: text;
  color: transparent;
  background-image: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #1dd1a1, #48dbfb, #feca57,  #ff6b6b);
  background-size: 300% 100%;
  animation: gradientMove 5s infinite linear;
}

@keyframes gradientMove {
  0%   { background-position: 100% 0%; }
  /* 50%   { background-position: 50% 100%; } */
  100% { background-position: 0% 100%; }
}