.main-heading{
    color: white;
    margin-bottom: 3% !important;
}
.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 40px;
    grid-row-gap: 30px;
    }
    
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 1 / 3 / 2 / 4; }
.div4 { grid-area: 1 / 4 / 2 / 5; }
.div5 { grid-area: 2 / 1 / 3 / 2; }
.div6 { grid-area: 2 / 2 / 3 / 3; }
.div7 { grid-area: 2 / 3 / 3 / 4; }
.div8 { grid-area: 2 / 4 / 3 / 5; }

.img-captio{
    color: white !important;
    
}
.full-width{
  width: 100% !important;
}   
.img-captio:hover{
    color: #e7032c !important;
    cursor: pointer;
    
}   
.heading2{
    color: white !important;
    margin-top: 5%;
}

.image-hover-effect{
    width: 100%;
    -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}
.div1:hover .image-hover-effect {
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
  }
.div2:hover .image-hover-effect {
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
  }
.div3:hover .image-hover-effect {
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
  }
.div4:hover .image-hover-effect {
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
  }
.div5:hover .image-hover-effect {
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
  }
.div6:hover .image-hover-effect {
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
  }
.div7:hover .image-hover-effect {
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
  }
.div8:hover .image-hover-effect {
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
  }


@media (max-width:786px) {
    .parent{
        display: unset !important;
    }
    .image-hover-effect{
        width: 100% !important;
    }
    .image-hover-effect{
      margin-top: 3%;
  }
  }