.navbar{
  z-index: 100;
  position: fixed;
  width: 100%;
  height: auto;
  background-color: rgba(0, 0, 0, 0.9);
}
.nav-logo{
  width: 150px;
  height: auto;
  margin-top: 0px;
  margin-bottom: 0px;
}
.main-container-shadow{
  /* change the opacity and size of the container convering the pages */
  padding: 10px;
  background-color: rgba(0,0,0,0.5);
  background-clip: content-box;
}
.go-back-button{
  position: static;
  height: 25px;
  width: 30px;
}
.main-title h2{
  font-weight: bolder;
}
.filtering span{
  border: 1.5px solid white !important;
  padding: 10px !important;
  margin-right: 5px;
}
.filtering span.active{
  background-color: #03345f;
  color: white !important;
  border: 1.5px solid #03345f !important;
}
.case-study-grid-container{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin: 0px 8%;
  column-gap: 15%;
}
.case-study-grid-item{
  margin-bottom: 10%;
}
.case-study-grid-item h3{
  font-size: 1.4rem;
}
.case-study-grid-item p{
  font-size: 0.7rem;
  line-height: 0.8rem;
}
.case-study-images-grid-container {
  margin-top: 5%;
  display: grid;
  grid-template-columns: repeat(11, [col] auto);
  column-gap: 1%; 
  justify-content: center;
}
.ItemsList{
  position: static;
  width: 40px;
}
.ItemsList p{
  position: relative;
  text-align: center;
  font-weight: bold;
  font-size: 0.7rem;
}
.ItemsList p::after {
  content: "";
  position: absolute;
  top: 24px;
  width: 2px;
  height: 30px;
  background: #fff;
  left: 0px;
  right: 0px;
  margin: auto;
}
.ItemsList .imageContainer {
  margin-top: 38px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  width: 100%;
  background-position: left !important;
  height: 200px;
}
.ItemsList.firstItem{
  width: 150px;
}
.ItemsList.firstItem div{
  border: 2px solid white ;
  border-radius: 5px;
}
.showcase-container{
  background-color: #4e224e; 
  padding-top: 8%; 
  margin-top: 2%; 
  padding-bottom: 8%;
}
.showcase-large{
  display: grid;
}
.showcase-mobile{
  display: none !important;
}
.showcase-item{
  text-align: center;
  text-align: -webkit-center;
  max-width: 240px;
  max-height: 290px;
}
.showcase-image-box{
  width: 95%;
}
@media screen and (max-width: 768px){

  /* Override the original overlay */
  .portfolio-two .item-img-overlay {
    position: absolute;
    top: auto;
    left: 0px;
    right: 0px;
    bottom: 0px;
    color: #ffffff;
    opacity: 1;
    -webkit-transition: all 0s;
    transition: all 0s;
    z-index: 2;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  .overlay-info{
    padding-top: 5px;
  }
  .showcase-large{
    display: none;
  }
  .showcase-mobile{
    display: block !important;
  }
}