*{
  margin :0;
  Padding:0;
  Box-sizing:border-box;
  font-family: 'Poppins', sans-serif;

}

html, body {
  height: 100%;
  width: 100%;
}

nav1{
  display:flex;
  border:2px solid #cce6f5;
  background-color:#cce6f5;
  justify-content:space-around;
  position:sticky;
  top:0;
  z-index:100;
}






.home{
  margin-top:0px;
  margin-bottom:0px;
  margin-right:30px;
  margin-left:30px;
  padding-top:14px;
  padding-bottom:15px;
  padding-left:7px;
  padding-right:7px;
  color:#023E8A;
  border:1px solid #cce6f5;
  background-color:#cce6f5;
  font-size:24px;
  font-weight: bold;
  cursor:grab;
  

  
  
}

.home:hover{
  background-color:#ffffff;
  transition: 0.4s;
  opacity: 0.5;
}
.research{
  margin-top:0px;
  margin-bottom:0px;
  margin-right:15px;
  margin-left:14px;
  padding-top:14px;
  padding-bottom:15px;
  padding-left:7px;
  padding-right:7px;
  color:#023E8A;
  border:1px solid #cce6f5;
  background-color:#cce6f5;
  font-size:24px;
  font-weight: bold;
  cursor:grab;
  
  
  
}

.research:hover{
  background-color:#ffffff;
  transition: 0.4s;
  opacity: 0.5;
}

.publications{
  margin-top:0px;
  margin-bottom:0px;
  margin-right:15px;
  margin-left:14px;
  padding-top:14px;
  padding-bottom:15px;
  padding-left:7px;
  padding-right:7px;
  color:#023E8A;
  border:1px solid #cce6f5;
  background-color:#cce6f5;
  font-size:24px;
  font-weight: bold;
  cursor:grab;
  
  
}

.publications:hover{
  background-color:#ffffff;
  transition:0.4s;
  opacity: 0.5;
}

.team{
  margin-top:0px;
  margin-bottom:5px;
  margin-right:15px;
  margin-left:14px;
  padding-top:14px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right:5px;
  color:#023E8A;
  border:1px solid #cce6f5;
  background-color:#cce6f5;
  cursor:grab;
  font-weight: bold;
  font-size:24px;
  
}
  
.team:hover{
  background-color:#ffffff;
  transition:0.4s;
  opacity: 0.5;
}

.teaching{
  margin-top:0px;
  margin-bottom:0px;
  margin-right:15px;
  margin-left:14px;
  padding-top:14px;
  padding-bottom:15px;
  padding-left:7px;
  padding-right:7px;
  color:#023E8A ;
  border:1px solid #cce6f5;
  background-color:#cce6f5;
  font-size:24px;
  font-weight: bold;
  cursor:grab;
  

}

.teaching:hover{
  background-color:#ffffff;
  opacity: 0.5;
  transition:0.4s;
}


.row {
  display: flex;
  flex-wrap: wrap;
}

.col-md-3 {
        padding: 18px;

  display: flex;
}

.our-team {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 5px;
  text-align: center;
  border: 1px solid #8b8c89;
  box-sizing: border-box;
}

.container{
margin-top:0px;
padding-top: 10px;
}
 
.our-team{
    padding: 5px;
    border-radius: 15px;
    text-align: center;
   border:1px solid #8b8c89;
 
}
.our-team:hover{
transition: .5s;
  box-shadow: 0px 1px 5px 0px #d1d1d1;
}
.our-team .pic{
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 5px;
    margin-bottom: 25px;
    transition: all 0.5s ease 0s;
   border-radius: 50%;
}
.our-team:hover .pic{
    background: #8b8c89;
    border-radius: 50%;
}
.pic img{
    width: 100%;
    height: 215px;
    border-radius: 50%;
}
.our-team .title{
    display: block;
    padding-top:2px;
    font-size: 20px;
    font-weight: 600;
    color: #023E8A;
    text-transform: uppercase;
    
}
.our-team .post{
        padding: 5px;
    display: block;
    font-size: 15px;
    color: #8b8c89;
    text-transform: capitalize;
    
}

/*@media only screen and (max-width: 990px){
    .our-team{ margin-bottom: 30px; }
}*/

#piImg{
max-height: 150%;
padding-right:2%;
padding-bottom:0;
padding-left:2%;
padding-top:2%;
width: 22%;
float:left;
margin-bottom:0;
transition: all 0.5s ease 0s;
border-radius: 13%;
border-width: 2px;

}


#piText{
  text-align:left;
  padding-top:4%;
  padding-bottom:1%;
  padding-left:2%;
  display:block-inline;
  padding-right:2%;
  
}
#piTitle{
  text-align: center;
  padding-top:3%;
}
.theteam{
  text-align:center;
}
.students{
  text-align:center;
}
.teamTitles{
  padding-top: 40px;
  
  text-align: center;
}

/* --- Responsive Enhancements --- */
@media screen and (max-width: 768px) {
  nav, nav1 {
    flex-direction: column;
    align-items: center;
  }

  .home, .research, .publications, .team, .teaching {
    font-size: 18px;
    margin: 5px 0;
    width: 90%;
    box-sizing: border-box;
  }

  .pubTitle, .researchTitle, .teamTitles, .students, .teachTitle {
    font-size: 6vw;
    text-align: center;
    padding: 10px;
  }

  .gallery {
    max-width: 100%;
    width: 90%;
    height: auto;
    display: block;
    margin: 10px auto;
  }

  .gallery img {
    width: 100%;
    height: auto;
  }

  .desc {
    font-size: 4vw;
  }

  #piImg, .teachPic, .cloudImg, #research1Img, #research2Img, #research3Img, #research4Img {
    float: none;
    display: block;
    margin: 0 auto;
    width: 90% !important;
    height: auto !important;
  }

  #piText, .researchGen, #research1text, #research2text, #research3text, #research4text {
    padding: 10px;
    font-size: 4vw;
  }

  .row {
    flex-direction: column;
    align-items: center;
  }

  .col-md-3, .our-team {
    width: 90%;
    margin: 10px 0;
    padding: 10px;
  }

  .our-team .title {
    font-size: 4vw;
  }

  .teach {
    padding: 10px;
    font-size: 4vw;
  }
}


@media screen and (max-width: 768px) {
  .row {
    flex-direction: column;
    align-items: center;
  }

  .col-md-3, .col-sm-6 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
  }

  .our-team {
    width: 100% !important;
    box-sizing: border-box;
  }

  .pic img {
    width: 50%;
    height: auto;
    margin: 0 auto;
  }

  .our-team .title {
    font-size: 4vw;
  }
}


@media screen and (max-width: 768px) {
  #piImg {
    float: none !important;
    display: block;
    width: 80% !important;
    margin: 0 auto;
    padding: 10px;
  }

  #piText {
    float: none !important;
    text-align: left;
    padding: 10px;
    font-size: 4vw;
  }
}