/* ******************************************* */
/*-------------- HEADER ---------------------*/
/* ******************************************* */

.header{
  display:flex;
  justify-content:space-around;
  align-items: center;
  /* background-color: #CBDCEB; */
  

  /* Because we want header to be sticky later */
  height:9.6rem;
  padding: 5rem;
}

.nav_logo{
  height:9rem;
  
}

/* *********************************** */
/* ---------- NAVIGATION ------------- */
/* *********************************** */

.main-nav-list{
  list-style:none;
  display:flex;
  align-items:center;
  gap:1.8rem;
}

.main-nav-link:link,
.main-nav-link:visited{
  display:inline-block;
  text-decoration: none;
  color:#121010;
  font-weight:500;
  font-size:1.3rem;
  transition:all 0.3s;

}

.main-nav-link:hover,
.main-nav-link:active{
   color:#3959b0;
}


/* ******************************************* */
/*-------------- CAROUSEL ---------------------*/
/* ******************************************* */
.section--carousel{
  background-color:#7889B9;

  width:100vw;
  height:25rem;

  /* new added */
  display:flex;
  align-items:center;
  justify-content:center;
}

.carousel{
  /* max-width:80rem; */
  width:80%;
  height:100%;
  /* height:35rem; */
  /* margin: 0 auto; */
  
  position:relative;
  overflow: hidden; 

}

/* new added */
.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height:100%;
  

  display: flex;
  align-items: center;
  justify-content: center;

  /* THIS creates the animation! */
  transition: transform 1s;
}

.rollingNews{
  display: flex;
  align-items:center;
  justify-content:center;

  gap:6.4rem;
  padding:5.8rem 6.8rem 5.8rem 6.8rem;
}

.carousel-img{
  /* height:40rem; */
  width:50%;
  border-radius:8px;
  box-shadow: 0 12px 24px rgba(0, 0, 0,0.25);
}

.news-title{
  font-size: 1.5rem;
  margin-bottom:1.2rem;
  color:#0C1737;
}

.news-intro{
  font-size:1.0rem;
  line-height: 1.5;
  color:#0C1737;
}

/*carousel-button*/
.btn{
  background-color: fff;
  border:none;
  height:3rem;
  width:3rem;
  border-radius: 50%;
  position:absolute;
  box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.2);
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content: center;

}

.btn-right{
  /*in relation to parent element*/
  right:0;
  top:50%;
  transform: translate(-50%, -50%);
}

.btn-left{
  /*in relation to parent element*/
  left:0;
  top:50%;

  transform: translate(50%, -50%);
}

.btn-icon{
  height:5.4rem;
  right:5.4rem;
  stroke:#1E3A8A;
  fill:#A5B0D0;
}

.dots{
  position:absolute;
  left:50%;
  bottom:10%;
  transform: translate(-50%,32px);

  display: flex;
  gap:1.2rem;
}

.dot{
  height:1.2rem;
  width:1.2rem;
  /* background-color: #555; */
  border:2px solid #A5B0D0;
  border-radius: 50%;
  cursor:pointer;
  transition: all 0.5s;
}

.dot--fill{
  background-color: #1E3A8A;
}




/* ************************************** */
/* ***************SECTION-NEWS*********************** */
/* ************************************** */
.section--news{
  padding:5.0rem 0rem;
  background-color: #E9EBF3;
}

.accordion--news{
  width:60rem; 
  /* margin:10rem, 10rem; */
  padding-left:11rem;
}

.news--year{
  font-size:1.5rem;
  color:#4d6bbd;
  grid-column:1;
}

.pub-icon--news{
  width:2rem;
  height:2rem;
  color:#4d6bbd;
  grid-column:3;
}

.hidden-box--news ul{
  color:#333;
  margin-left:2rem;

  display:flex;
  flex-direction:column;
  gap:0.8rem;
}

.hidden-box--news{
  grid-column:1/4;
  display:none;
}

.item--news{
  box-shadow:0 0 3.2rem rgba(0, 0, 0, 0.1);
  padding:2.4rem;

  display:grid;
  grid-template-columns: auto 1fr auto;
  column-gap:2.4rem;
  row-gap:3.2rem;
  align-items:center;
}

/* OPEN STATE */
.open--news{
  border-top:0.4rem solid #1E3A8A;
}

.open--news .hidden-box--news{
  display:block;
}

.open--news .news--year,
.open--news .pub-icon--news
{
  color:#1E3A8A;
}



/* ********************************** */
/* **************RESEARCH FIELD****************** */
/* ******************************** */
/* REUSABLE GRID */
.section--field{
  padding: 3rem 0;
  background-color: #E9EBF3;
}

.section--field div div{
  padding:60px 0;
  /* background-color: #A5B0D0; */
}


.field-image-box{
  display:flex;
  align-items:center;
  justify-content: cneter;
}

.field-intro{
  font-size:1.0rem;
  line-height:1.5;
  padding-left: 1.0rem;
}

.research-img{
  width:100%;
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0, 0, 0,0.25);
}

.research-intro-img{
  width:80%;
  border-radius: 50;
}

.research-intro{
  font-size:1.1rem;
  line-height: 1.6;
}

.heading-resource-intro{
  font-size:1.2rem;
  padding-bottom:1.0rem;
  padding-top:1.0rem;
}

.heading-resource-field{
  font-size:1.2rem;
  line-height: 1.2;
  padding-bottom: 1.0rem;
}

.selected-paper{
  font-size:1.1rem;
  padding-bottom:0.8rem;
}

/* ************************************** */
/* ***************SECTION-EQUIPMENT*********************** */
/* ************************************** */

.section--equipments{
  padding:5.0rem 0;
  background-color: #E9EBF3;
}

/* *****equipment--combine******* */
.equipment-combine-container{
  box-shadow: 0 2.4rem 4.8rem rgba(0,0,0,0.2);
  border-radius:11px;
  overflow:hidden;
  
  margin:2.5rem;
}

.equip-combine-img{
  width:100%;
}

.equipment-combine-content{
  margin:1rem 1rem;
}

.equipment-combine-title{
  font-size: 1.4rem;
  color:#333;
  font-weight: 400;
  margin-bottom:1.0rem;
  margin-top:1.2rem;
}

.equipment-combine-intro{
  font-size:1.2rem;
  line-height:1.5;
}

/* ******equipment*********** */
.equipment-title{
  font-size: 1.4rem;
  color:#333;
  font-weight: 400;
  margin-bottom:1.0rem;
  margin-top:1.2rem;
}

.equipment-intro{
  font-size:1.2rem;
  line-height:1.5;
  
}


.equipment-detail{
  list-style-type: '-';
  padding-left: 1rem;
  margin-left: 0.5rem;
}

.equip-img{
  width:100%;
}

.equipment-container{
  box-shadow: 0 2.4rem 4.8rem rgba(0,0,0,0.2);
  border-radius:11px;
  overflow:hidden;
  
  margin:2.5rem;
}

.equipment-content{
  margin:1rem 1rem;
}

/* ************************************** */
/* ***************SECTION-MEMBERS*********************** */
/* ************************************** */
.section--members{
  /* margin: 1rem 5rem; */
  padding:5.0rem 0rem;
  background-color: #E9EBF3;
}
 
.member-title{
  font-size:1.6rem;
  font-weight: 600;
  color:#1E3A8A;
  padding-left:6rem;
  /* margin-top: 8rem; */
}

.member-title:not(:first-child){
  margin-top: 8rem;
}

.member{
  margin: 4rem 6rem ;
  display: flex;
  align-items:start;
  gap:6.4rem;
}

.member-img{
  width:12rem;
  border-radius: 8px;
}

.member-name{
  font-size:1.3rem;
  margin-bottom:1.8rem;
}

.member-intro{
  font-size:1.2rem;
  line-height:1.2;
}

.intro-attributes{
  list-style-type: none;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.intro-attribute{
  font-size:1.1rem;
  display:flex;
  align-items:start;
  gap:1.6rem;
}

.intro-education{
  list-style: none;
}

/* learn more hiddern box */

.learnMore{
  display:grid;
  grid-template-columns:  1rem auto auto;
  grid-template-rows: 1rem auto;
  column-gap:1.78rem;
  row-gap:1.0rem;
  align-items:center;
}

.icon_sparkles{
  grid-column:1;
  grid-row:1;
}

.learnMore--title{
  font-size:1.1rem;
  grid-column:2;
  grid-row:1;
}

.learnMore-icon{
  width:1rem;
  height:1rem;
  color:#acacae;
  grid-column:3;
  grid-row:1;
  
}

.learnMore--hidden-box{
  grid-row:2;
  grid-column:2/4;
  display:none;
  font-size:1.0rem;
}

/* open state */
.open-learnMore .learnMore--hidden-box{
  display:block;
  line-height:1.5;
  /* max-height: 50rem; */
}

.open-learnMore .learnMore--title,
.open-learnMore .learnMore-icon
{
  color:#1E3A8A;
}


/* ************************************** */
/* ***************SECTION-PUBLICATIONS*********************** */
/* ************************************** */
.section--publications{
  padding:8.0rem 0;
  background-color: #E9EBF3;
}

.accordion{
  width:60rem; 
  
  padding-left:10rem;
}


.year{
  font-size:1.5rem;
  color:#4d6bbd;
  grid-column:1;
}

.pub-icon{
  width:2rem;
  height:2rem;
  color:#4d6bbd;
  grid-column:3;
}

.hidden-box ul{
  color:#333;
  margin-left:2rem;

  display:flex;
  flex-direction:column;
  gap:0.8rem;
}

.hidden-box{
  grid-column:1/4;
  display:none;
}

.item{
  box-shadow:0 0 3.2rem rgba(0, 0, 0, 0.1);
  padding:2.4rem;
  margin: 0rem auto;

  display:grid;
  grid-template-columns: auto 1fr auto;
  column-gap:2.4rem;
  row-gap:3.2rem;
  align-items:center;
}

.pubList{
  margin:1rem 0 1rem 1.8rem;
}

/* OPEN STATE */
.open{
  border-top:0.4rem solid #1E3A8A;
}

.open .hidden-box{
  display:block;
}

.open .year,
.open .pub-icon
{
  color:#1E3A8A;
}


/* ************************************** */
/* ***************RESOURCES*********************** */
/* ************************************** */
.section--resources{
  padding:4.0rem 0;
  background-color: #E9EBF3;
}

.book-name{
  font-size:0.9rem;
  line-height:1.5;
}

.book-img{
  width:100%;
}

.book-container{
  box-shadow: 0 2.4rem 4.8rem rgba(0,0,0,0.2);
  border-radius:11px;
  overflow:hidden;
  
  margin:1.5rem;
}

.book-content{
  margin:1rem 1rem;
}

/* ***************software resource******************** */
.resource-class{
  font-size: 1.4rem;
  font-weight:500;
  padding-top:3rem;
  padding-bottom:3rem;
}

.software-resource-class{
  padding-bottom:1.2rem;
  padding-left:1.5rem;
}

.software-resource{
  font-size:1.2rem;
}

.resource-item{
  font-size:1.0rem;
  line-height: 1.5;
  margin-left:2.5rem;
}

/* .resource-link{
  margin-left:1rem;
} */

.resource-link:link,
.resource-link:visited{
  /* text-decoration: none; */
  color:#4d6bbd;
}

.resource-link:hover,
.resource-link:active{
  color:#142e74;
}

/* ************************************** */
/* ***************GALLERY*********************** */
/* ************************************** */
.section--gallery{
  padding:1.5rem 0 0.0rem 0;
  background-color: #E9EBF3;
}

.activity{
  width:70rem;
  height:40rem;
  display:flex;
  flex-direction: column;
  align-items: center;
  
  margin:4rem auto;
} 

.activity-name{
  font-size:1.2rem;
  line-height:1.5;
 
}

/* *************With Carousel_260108******************** */
.carousel_260120{
  width: 100%;
  height:70%;
  /* margin:0 auto;   */
  position: relative;  
  overflow:hidden;
} 

.slide_260120{  
  position:absolute;
  width: 100%; 

  display:flex;
  align-items: center;
  justify-content: center;
  
}

.rolling_img_260120{
  display: flex;
  align-items:center;

  justify-content: center;
}

.img_260120{
  width: 70%;
  height:70%; 
  transform:scale(1.0);

  /* THIS creates the animation! */
  transition: transform 1s;
} 

.btn_260120{
  background-color: transparent; 
  border:none;
  height:4rem;
  width:4rem;
  border-radius: 50%;

  position:absolute;
  cursor:pointer;  

  display:flex;
  align-items:center;
  justify-content: center;
}

.btn_left_260120{
  left:20%;
  top:50%;

  transform:translate(-50%,-50%);
}

.btn_right_260120{
  right:20%;
  top:50%;

  transform:translate(50%,-50%);
}

.btn_icon_260120{
  height:2.4rem;
  width:2.4rem;
  color:#1E3A8A;
}

.dots_260120{
  position:absolute;
  left:50%;
  bottom:5%;
  transform:translate(-50%, 1.5rem);

  display:flex;
  gap:1rem;
}

.dot_260120{
  height:10px;
  width:10px;
  border-radius:50%;
  background-color: #1E3A8A;
  border:1px solid #7889B9;
  cursor:pointer;  
  
}

.dot_fill_260120{
  background-color:#0C1737
}

.activity-content_260120{
  margin:2rem 2.5rem 0rem 2.5rem;

  display:flex;
  flex-direction: column;
  align-items: center;
} 


/* *************With Carousel_260117******************** */
.carousel_260117{
  width: 100%;
  height:70%;
  /* margin:0 auto;   */
  position: relative;  
  overflow:hidden;
} 

.slide_260117{  
  position:absolute;
  width: 100%; 

  display:flex;
  align-items: center;
  justify-content: center;
  
}

.rolling_img_260117{
  display: flex;
  align-items:center;

  justify-content: center;
}

.img_260117{
  width: 50%;
  /* height:100%;  */
  transform:scale(1.0);

  /* THIS creates the animation! */
  transition: transform 1s;
} 

.btn_260117{
  background-color: transparent; 
  border:none;
  height:4rem;
  width:4rem;
  border-radius: 50%;

  position:absolute;
  cursor:pointer;  

  display:flex;
  align-items:center;
  justify-content: center;
}

.btn_left_260117{
  left:20%;
  top:50%;

  transform:translate(-50%,-50%);
}

.btn_right_260117{
  right:20%;
  top:50%;

  transform:translate(50%,-50%);
}

.btn_icon_260117{
  height:2.4rem;
  width:2.4rem;
  color:#1E3A8A;
}

.dots_260117{
  position:absolute;
  left:50%;
  bottom:5%;
  transform:translate(-50%, 1.5rem);

  display:flex;
  gap:1rem;
}

.dot_260117{
  height:10px;
  width:10px;
  border-radius:50%;
  background-color: #1E3A8A;
  border:1px solid #7889B9;
  cursor:pointer;  
  
}

.dot_fill_260117{
  background-color:#0C1737
}

.activity-content_260117{
  margin:2rem 2.5rem 0rem 2.5rem;
} 

/* *************With Carousel_260108******************** */
.carousel_260108{
  width: 100%;
  height:70%;
  /* margin:0 auto;   */
  position: relative;  
  overflow:hidden;
} 

.slide_260108{  
  position:absolute;
  width: 100%; 

  display:flex;
  align-items: center;
  justify-content: center;
  
}

.rolling_img_260108{
  display: flex;
  align-items:center;

  justify-content: center;
}

.img_260108{
  width: 30%;
  height:30%; 
  transform:scale(1.0);

  /* THIS creates the animation! */
  transition: transform 1s;
} 

.btn_260108{
  background-color: transparent; 
  border:none;
  height:4rem;
  width:4rem;
  border-radius: 50%;

  position:absolute;
  cursor:pointer;  

  display:flex;
  align-items:center;
  justify-content: center;
}

.btn_left_260108{
  left:20%;
  top:50%;

  transform:translate(-50%,-50%);
}

.btn_right_260108{
  right:20%;
  top:50%;

  transform:translate(50%,-50%);
}

.btn_icon_260108{
  height:2.4rem;
  width:2.4rem;
  color:#1E3A8A;
}

.dots_260108{
  position:absolute;
  left:50%;
  bottom:5%;
  transform:translate(-50%, 1.5rem);

  display:flex;
  gap:1rem;
}

.dot_260108{
  height:10px;
  width:10px;
  border-radius:50%;
  background-color: #1E3A8A;
  border:1px solid #7889B9;
  cursor:pointer;  
  
}

.dot_fill_260108{
  background-color:#0C1737
}

.activity-content_260108{
  margin:2rem 2.5rem 0rem 2.5rem;
} 

/* *************With Carousel_251125******************** */
.carousel_251125{
  width: 100%;
  height:70%;
  /* margin:0 auto;   */
  position: relative;  
  overflow:hidden;
} 

.slide_251125{  
  position:absolute;
  width: 100%; 

  display:flex;
  align-items: center;
  justify-content: center;
  
}

.rolling_img_251125{
  display: flex;
  align-items:center;

  justify-content: center;
}

.img_251125{
  width: 50%;
  /* height:100%;  */
  transform:scale(1.0);

  /* THIS creates the animation! */
  transition: transform 1s;
} 

.btn_251125{
  background-color: transparent; 
  border:none;
  height:4rem;
  width:4rem;
  border-radius: 50%;

  position:absolute;
  cursor:pointer;  

  display:flex;
  align-items:center;
  justify-content: center;
}

.btn_left_251125{
  left:20%;
  top:50%;

  transform:translate(-50%,-50%);
}

.btn_right_251125{
  right:20%;
  top:50%;

  transform:translate(50%,-50%);
}

.btn_icon_251125{
  height:2.4rem;
  width:2.4rem;
  color:#1E3A8A;
}

.dots_251125{
  position:absolute;
  left:50%;
  bottom:5%;
  transform:translate(-50%, 1.5rem);

  display:flex;
  gap:1rem;
}

.dot_251125{
  height:10px;
  width:10px;
  border-radius:50%;
  background-color: #1E3A8A;
  border:1px solid #7889B9;
  cursor:pointer;  
  
}

.dot_fill_251125{
  background-color:#0C1737
}

.activity-content_251125{
  margin:1.5rem 2.5rem 0rem 2.5rem;
} 

/* *************With Carousel_250910******************** */
.carousel_250910{
  width: 100%;
  height:75%;
  /* margin:0 auto;   */
  position: relative;  
  overflow:hidden;
} 

.slide_250910{  
  position:absolute;
  width: 100%; 

  display:flex;
  align-items: center;
  justify-content: center;
  
}

.rolling_img_250910{
  display: flex;
  align-items:center;

  justify-content: center;
}

.img_250910{
  width: 50%;
  /* height:50%;  */
  transform:scale(1.0);

  /* THIS creates the animation! */
  transition: transform 1s;
} 

.btn_250910{
  background-color: transparent; 
  border:none;
  height:4rem;
  width:4rem;
  border-radius: 50%;

  position:absolute;
  cursor:pointer;  

  display:flex;
  align-items:center;
  justify-content: center;
}

.btn_left_250910{
  left:20%;
  top:50%;

  transform:translate(-50%,-50%);
}

.btn_right_250910{
  right:20%;
  top:50%;

  transform:translate(50%,-50%);
}

.btn_icon_250910{
  height:2.4rem;
  width:2.4rem;
  color:#1E3A8A;
}

.dots_250910{
  position:absolute;
  left:50%;
  bottom:8%;
  transform:translate(-50%, 1.5rem);

  display:flex;
  gap:1rem;
}

.dot_250910{
  height:10px;
  width:10px;
  border-radius:50%;
  background-color: #1E3A8A;
  border:1px solid #7889B9;
  cursor:pointer;  
  
}

.dot_fill_250910{
  background-color:#0C1737
}

.activity-content_250910{
  margin:0rem 2.5rem 0rem 2.5rem;
} 

/* *************With Carousel_241101******************** */

.carousel_241101{
  width: 100%;
  height:48%;
  /* margin:0 auto;   */
  position: relative;  
  overflow:hidden;
} 

.slide_241101{  
  position:absolute;
  width: 100%; 

  display:flex;
  align-items: center;
  justify-content: center;
  
}

.rolling_img_241101{
  display: flex;
  align-items:center;

  justify-content: center;
}

.img_241101{
  width: 100%;
  /* height:100%;  */
  transform:scale(1.0);

  /* THIS creates the animation! */
  transition: transform 1s;
} 

.btn_241101{
  background-color: transparent; 
  border:none;
  height:4rem;
  width:4rem;
  border-radius: 50%;

  position:absolute;
  cursor:pointer;  

  display:flex;
  align-items:center;
  justify-content: center;
}

.btn_left_241101{
  left:20%;
  top:50%;

  transform:translate(-50%,-50%);
}

.btn_right_241101{
  right:20%;
  top:50%;

  transform:translate(50%,-50%);
}

.btn_icon_241101{
  height:2.4rem;
  width:2.4rem;
  color:#1E3A8A;
}

.dots_241101{
  position:absolute;
  left:50%;
  bottom:1%;
  transform:translate(-50%, 1.5rem);

  display:flex;
  gap:1rem;
}

.dot_241101{
  height:10px;
  width:10px;
  border-radius:50%;
  background-color: #1E3A8A;
  border:1px solid #7889B9;
  cursor:pointer;  
  
}

.dot_fill_241101{
  background-color:#0C1737
}

.activity-content_241101{
  margin:2rem 2.5rem 0rem 2.5rem;
} 





/* ************************************** */
/* ***************FOOTER*********************** */
/* ************************************** */

.footer{
  padding:4rem 0;
  border-top:1px solid #eee;
}

.footer-container{
  max-width: 80rem;
  padding:0 8rem;
  margin:0 auto;
}

.grid-footer{
  grid-template-columns:1fr 1fr;
}

.logo-col{
  display:flex;
  flex-direction:column;
}

.footer-logo{
  display:block;
  margin-bottom:1.0rem;
}

.logo{
  width:30%;
  height:90%
}

.social-links{
  list-style:none;
  display:flex;
  gap:1.0rem;
}

.social-icon{
  height:1.5rem;
  width:1.5rem;
}

.copyright{
  font-size:1.0rem;
  line-height:1.6;
  color:#888585;
  margin-top:auto;
}

.footer-heading{
  font-size:1.2rem;
  font-weight:500;
  margin-bottom:1rem;
  color:#888585;
}

.contacts{
  font-style:normal;
  font-size:1.0rem;
  line-height:1.3;
  color:#888585;
}

.footer-link:link,
.footer-link:visited{
  text-decoration:none;
  font-size:1.0rem;
  color:#888585;
  transition:all 0.3s;
}

.footer-link:hover,
.footer-link:active{
  color:#2c2c2c;
}