.project-block-three {
  position: relative
}
.project-block-three .inner-box {
  position: relative
}
.project-block-three .inner-box:hover .image img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1)
}
.project-block-three .inner-box:hover .overlay-box:before {
  left: 0;
  opacity: 1;
  visibility: visible
}
.project-block-three .inner-box:hover .image-box .icon {
  left: 0;
  opacity: 1;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  -webkit-transition-delay: 200ms;
  transition-delay: 200ms
}
.project-block-three .inner-box:hover .image-box .title {
  top: 0;
  opacity: 1;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  -webkit-transition-delay: 300ms;
  transition-delay: 300ms
}
.project-block-three .inner-box:hover .image-box .cat {
  top: 0;
  opacity: 1;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  -webkit-transition-delay: 400ms;
  transition-delay: 400ms
}
.project-block-three .image-box {
    position: relative;
    overflow: hidden;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    border: solid 9px #e4e4e4;
    padding: 2px;
}
.project-block-three .image-box .image {
  position: relative;
  margin-bottom: 0
}
.project-block-three .image-box .image img {
  width: 100%;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease
}
.project-block-three .image-box .overlay-box {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 40px 50px;
  z-index: 9;
  overflow: hidden
}
.project-block-three .image-box .overlay-box::before {
  position: absolute;
  left: -100%;
  top: 0;
  height: 150%;
  width: 160%;
  background-color: var(--theme-color2);
  content: "";
  -webkit-transform: rotate(46.7deg);
  transform: rotate(46.7deg);
  -webkit-transform-origin: top left;
  transform-origin: top left;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease
}
.project-block-three .image-box .overlay-box .icon {
  position: relative;
  display: block;
  left: -20px;
  height: 52px;
  width: 52px;
  border-radius: 50px;
  margin-bottom: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: var(--theme-color1);
  background-color: #fff;
  font-size: 18px;
  z-index: 2;
  opacity: 0;
  -webkit-transition: none;
  transition: none
}
.project-block-three .image-box .overlay-box .icon:hover {
  background-color: var(--theme-color1);
  color: var(--theme-color-light);
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms
}
.project-block-three .image-box .overlay-box .title {
  color: var(--theme-color-light);
  position: relative;
  display: block;
  margin-bottom: 2px;
  top: 10px;
  opacity: 0
}
.project-block-three .image-box .overlay-box .title:hover a {
  color: var(--theme-color1)
}
.project-block-three .image-box .overlay-box .cat {
  position: relative;
  font-size: 14px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--theme-color-light);
  top: 10px;
  opacity: 0
}
.overlay-box1{position: absolute;  padding-top: 50px !important;
    bottom: 0px;
    width: 100%;
    padding: 0px 20px;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0+0,0.83+100 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.95) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}

@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
.overlay-box1 h4{ font-size:17px }
.overlay-box1 h4 a{ margin-bottom:0px; color:#fff ;    display: flex;
    justify-content: space-between;}
    
    
.title a:hover{
  padding: 20px;
  background-color: #fff;
}