Mega Menu / Button Hover Effect

.ns_btn_style_1 a {
  color: inherit;
  text-decoration: none;
}

.ns_btn_title {
  font-size: 36px;
  margin: 0 0 15px 0;
  font-family: inherit; /* uses theme font */
  font-weight: 600;
  line-height: 42px;
  color: #000;
}

.ns_btn_style_1 {
  background-color: #f8e5e5;
  border-radius: 10px;
  width: 100%; /* width to be changed as per preference */
  padding: 1em;
  position: relative;
  z-index: 1;
  overflow: hidden;
}


/* Using image curve effect */
.ns_btn_style_1::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(1.png); /* Image to be changed as per prefered color */
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    transition: top 500ms ease-in;
}


/* Gives background color to make up for the curve effect */
.ns_btn_style_1::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #eaa7a7;
    z-index: -1;
    transition: top 500ms ease-in;
}

/* Image Hover speed */
.ns_btn_style_1:hover::before {
  top: -100%;
}


/* background Hover speed */
.ns_btn_style_1:hover::after {
  top: -150%;
}

/* icon smooth animation */
.ns_btn_style_1 i {
  transition: padding-left 250ms linear;
}

/* icon on hover */
.ns_btn_style_1:hover i {
  padding-left:15px;
}

/* divides the box in 2 columns */
.ns_btn_style_1_grid {
    display: grid;
    grid-template-columns: 80% 20%;
    align-items: end;
  }


 .ns_btn_style_1_arrow i {
  font-size: 26px;
  line-height: 32px;
  color: #000;
 } 

 .ns_btn_style_1_subtitle {
  margin:0;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #000;
 }