/* Two card slide animation */
.sticky-section {
  position: relative;
  height: 594px;
  /* allow scroll */
  padding: 24px 0px;
}

/* Foreground sticky hexagon */
.sticky-hex {
  position: sticky;
  top: 100px;
  /* stays in place */
  z-index: 10;
}

/* Background moving hexagon */
.float-hex {
  position: absolute;
  top: 34px;
  z-index: 1;
}

.hex img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.move-diagonal {
  animation: diagMove 4s ease-in-out infinite alternate;
}
/* Hover Effect */
.support-card:hover {
    background: #00377C;      /* blue background */
    color: #fff;              /* make all text white */
    transition: 0.3s ease;
}
.support-card .img-container-wrapper img:nth-child(1){
  opacity: 1;
}
.support-card .img-container-wrapper img:nth-child(2){
  opacity: 0;
}
.support-card:hover .img-container-wrapper img:nth-child(2){
  opacity: 1;
}
.support-card:hover .img-container-wrapper img:nth-child(1){
  opacity: 0;
}
/* Make all text inside card white on hover */
.support-card:hover h4,
.support-card:hover p,
.support-card:hover a {
    color: #fff !important;
}

/* Change SVG arrow color to white */
.support-card:hover svg path {
    fill: #fff;
}

/* Bottom hex icon + line turn white */
.support-card:hover .straight-line {
    filter: brightness(0) invert(1);  /* turn white */
}

.support-card:hover .center-icon {
  transform: translateX(132px) rotate(90deg);
}
/* .support-card:hover .center-icon {
    filter: brightness(0) invert(1);  
} */

@keyframes diagMove {
  0% {
    transform: translate(40px, -25px);
  }

  100% {
    transform: translate(-35px, 20px);
  }
}

.navbar-nav .nav-item .nav-link:hover {
  font-weight: 700;
  transition: 0.4s ease;
}

/* .explore-our-work-wrapper .growth-card .card-line-img-wrapper .small-icon {
  right: 34px;
} */

/* .explore-our-work-wrapper .growth-card:hover .small-icon {
  right: 0px;
} */

@media only screen and (max-width: 600px) {
  .growth-card:hover .small-icon {
    transition: 0.4s ease;
    right: 0px;
  }

  .float-hex {
    top: 28px;
    margin-left: 8px;
  }

  .sticky-section .float-hex img {
    width: 90%;
    height: auto;
  }

  .sticky-section {
    height: auto;
    padding: 24px 22px;
    margin-top: 16px;
  }

  .move-diagonal {
    animation: topToBottom 4s ease-in-out infinite alternate;
  }

  @keyframes topToBottom {
    0% {
      transform: translateY(-20px);
      /* TOP */
    }

    100% {
      transform: translateY(30px);
      /* BOTTOM */
    }
  }

  .catalysing-img-wrapper .image-container:hover .catalysing-bg {
    width: 322px !important;
    height: 322px !important;
    left: 28px !important;
    top: -42px !important;
  }

}

/* end */

/* Advancing Inclusive Growth start */

.growth-card:hover {
  background: url(../images/blue-bg-hover.png) no-repeat;
  /*background-size: 100%;*/
  cursor: pointer;
  transition: 0.4s ease;
}

#urban-initiatives-page .growth-card:hover{
  background: url(../../assets/images/blue-bg-hover.png) no-repeat;
  /*background-size: 100%;*/
  cursor: pointer;
  transition: 0.4s ease;
}
.growth-card:hover h3,
.growth-card:hover p {
  color: #fff;
  transition: 0.4s ease;
}

.growth-card:hover .card-line-img-wrapper svg {
  fill: #fff;
  transition: 0.4s ease;
}

.growth-card:hover .card-line-img-wrapper path {
  stroke: #fff;
  transition: 0.4s ease;
}

.growth-card:hover .small-icon {
  transition: 0.4s ease;
  right: 0px;
}

.growth-card:hover .know-wrapper a {
  color: #fff;
  transition: 0.4s ease;
}

/* .growth-card:hover .know-wrapper svg {
  stroke: #fff;
  transition: 0.4s ease;
  opacity: 100%;
} */

.arrow-svg {
  cursor: pointer;
}

/* On hover, animate clipPath width */
.arrow-svg {
  cursor: pointer;
  stroke-width: 0;
  height: auto;
}

.arrow-svg path {
  /* stroke: transparent; */
  stroke-width: 0;
  transition: stroke-width 0.25s ease;
}

/* On hover, animate clipPath width */



.growth-card:hover .clipRect,
.growth-card:hover .clipRect1 {
  animation: fillClip 0.5s forwards;
  transition: 0.4s ease;
  color: #fff;

}

.growth-card:hover path {
  stroke-width: 2.2px;
  transition: 1s ease;

}

.blue-card:hover .clipRect {
  animation: fillClip 0.5s forwards;
  transition: 1s ease 0%;
  color: #fff;
  opacity: 100%;
}

.blue-card:hover path {
  stroke-width: 2.2px;
  transition: 1s ease;
  /* opacity: 0%; */

}

.opactiy-zero {
  opacity: 100% !important;
  transition: 0.1s ease;
}


@keyframes fillClip {
  from {
    width: 0;
  }

  to {
    width: 114px;
  }
}



/* Advancing Inclusive Growth end*/

.catalysing-img-wrapper .image-container:hover .catalysing-bg {
  width: 100%;
  height: auto;
  position: absolute;
  /*left: 140px;*/
  transform: rotate(72deg);
  /* top: -22px; */
  transition: 1s ease;
}
/* .catalysing-img-wrapper:hover .catalysing-bg{
  transform: rotate(45deg);
  cursor: pointer;
} */

/* News & Stories animation start */
.blue-card:hover .white-icon {
  top: 0px;
  transition: .5s ease;
}

.blue-card:hover .red-icon {
  top: 14px;
}

.blue-card {
  position: relative;

  cursor: pointer;
  z-index: 1;
}

/* Bottom Arrow - Fades out faster on hover */
.arrow-bottom {
  position: absolute;
  top: 52px;
  left: 0;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.blue-card:hover .arrow-bottom {
  opacity: 0;
}

/* Top Arrow - Grows from left to right with visible handle */
.arrow-top {
  position: absolute;
  top: 52px;
  left: 0;
  width: 114px;
  height: 16px;
  overflow: hidden;
}

.arrow-top svg {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.blue-card:hover .arrow-top svg {
  transform: translateX(0);
}

/* News & Stories animation end */