.jh-solid-box {background-color: #EEEEEE; border-radius: 15px; margin: 1em 0; padding:30px; min-height:0px; display:block; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);}

.jh-solid-box2 {background-color: #FFFFFF; border-radius: 15px; margin: 1em 0; padding:30px; min-height:0px; display:block; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);}

@media only screen and (min-width: 800px) {
  .d0splitbackground {
    position: relative;
  }

  .d0splitbackground::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
      to left,
      rgba(3, 150, 183, 0) 0%,
      rgba(3, 150, 183, 0) 50%,
      rgba(3, 150, 183, 1) 50%,
      rgba(3, 150, 183, 1) 100%
    );
    pointer-events: none;
  }
}

/* 1. White Box - Default State */
.jh-hover-box {
  background-color: #FFFFFF !important; 
  border: solid 1px #EEEEEE !important; 
  border-radius: 15px !important;
  padding: 30px !important; 
  min-height: 30px !important; 
  display: block !important;
  margin-bottom: 20px !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.35s ease-in-out !important;
}

/* 1. White Box - Hover State */
.jh-hover-box:hover { 
  transform: scale(1.03) !important; 
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important; 
}

/* 2. Gray Box - Default State */
.jh-hover-box2 {
  background-color: #FFFFFF !important; 
  border: solid 1px #EEEEEE !important; 
  border-radius: 15px !important;
  padding: 30px !important; 
  min-height: 30px !important; 
  display: block !important;
  margin-bottom: 20px !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.35s ease-in-out !important;
}

/* 2. Gray Box - Hover State */
.jh-hover-box2:hover { 
  transform: scale(1.03) !important; 
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18) !important; 
}