.carousel__box {
  position: absolute;
  height: 82%;
  top: 14%;
}

.box-info1, .box-info2, .box-info3 {
  position: absolute;    
  height: 100%;
  width: 24vw;
  left: 14vw;
  padding: 0.5vw;
  transition: all 0.5s ease-in-out;
}

.box-info1-content, .box-info2-content, .box-info3-content {
  background-color: var(--yellow);
  transition: all 0.5s ease-in-out;
  margin: 0;
  padding-right: 1vw;
  padding-left: 1vh;
  padding-top: 10%;
  opacity: 0;
  height: 130%;
  width: 100%;
  position: relative;
  user-select: text;
}
.box-info1-content {
  opacity: 1;
}
.box-info2-content, .box-info3-content {
  opacity: 0;
}

.box-info1 {
  z-index: 5;
}
.box-info2 {
  z-index: 4;
}
.box-info3 {
  z-index: 3;
}

.slide_butt1 {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 10;
  opacity: 1;
  background-color: rgba(0,0,0,0);
}

.slide_butt2 {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  padding: 0.5vw;
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 10;
  opacity: 1;
  background-color: rgba(0,0,0,0);
}

.slide_butt1 img, .slide_butt2 img {
  transition: transform 0.5s ease;  
  /* button img rotation smooth */
}

.button_rotate_on_activation img{
  transform: rotate(180deg);
}

.info_active1 {
  transform: translate(100%, 0%);
}

.opacity85 {
  background-color: var(--yellow85);
  opacity: 1;
}

.info_ready2 {
  transform: translate(100%, 0%);
}

.info_active2 {
  transform: translate(200%, 0%);
}

.expand-bttn-img {
  width: 3vw;
  aspect-ratio: 1/1;
  background-color: rgba(0,0,0,0);
}

.box-info1-content {
  padding-left: 8%;
  padding-right: 8%;
}
.box-info1-content h1 {
  overflow-wrap: anywhere;
  font-size: clamp(1rem, 0.6vw + 0.9rem, 2rem);
  font-weight: 700;
  margin: 0;
  padding: 0;
  color: var(--blue-bg);
}

.project-info {
  margin: 0;
  padding: 0vh 0.7vw 10vh 1.5vw;
  color: var(--blue-bg);
  max-height: 85%;
  position: relative;
}

.project-motto-text {
  font-weight: 400;
  font-size: clamp(1rem, 0.5vw + 0.5rem, 1.5rem);
}

.author-img {
  width: 14vh; /* Adjust the width of the picture as needed */
  height: 14vh; /* Adjust the height of the picture as needed */
  border-radius: 50%;
  margin-right: 1.5vw;
  margin-top: auto;
  margin-bottom: auto;
}

.author-text-div {
  flex: 1;
  margin-top: 1vh;
}

.author-name {
  font-size: clamp(0.8rem, 0.5vw + 0.5rem, 1.2rem);
  font-weight: 700;
  margin: 0;
  padding-bottom: 1vh;
}

.author-institute{
  font-weight: 400;
  font-size: clamp(0.6rem, 0.5vw + 0.3rem, 1.3rem);
}

.author-img-div {
  margin: 10% 0 0 0;
}

/* box 3 */

.project-info-text {
  font-size: clamp(0.6rem, 0.5vw + 0.4rem, 1.3rem);
  font-weight: 400;
  margin: 0;
  color: var(--blue-bg);
  max-height: calc(100% - 120px);
  position: relative;

}

.project-info-text-mobile-div { 
  /* the text of the article is visible in the second card only on mobile */
  display: none;
}


/* sldier */
.has-scrollbar1 {
  overflow-y: auto;
}
.has-scrollbar1::-webkit-scrollbar {
  width: 0.5vw;
}
.has-scrollbar1::-webkit-scrollbar-thumb {
  background: var(--blue-bg);
  border-radius: 1vh;
}
.has-scrollbar1::-webkit-scrollbar-thumb:hover {
  background: darkblue;
}