.jh-solid-box {
    background-color: #D90000;
    margin: 1em 0;
    padding: 30px;
    min-height: 300px;
    display: block;
border-radius: 15px 0px 15px 0px;
    );
}

.jh-solid-box2 {
    background-color: #D90000;
    margin: 1em 0;
    padding: 30px;
    min-height: 300px;
    display: block;
border-radius: 15px 0px 15px 0px;
    );
}

.jh-solid-box3 {
    background-color: rgba (0,0,0,0.0);
border: solid 1px #D90000;
    margin: 1em 0;
    padding: 30px;
    min-height: 300px;
    display: block;
   border-radius: 15px 0px 15px 0px;
    );
}

.jh-solid-box4 {background-color: #F5F5F5; margin: 1em 0; padding:30px; min-height:0px; display:block; border-radius: 15px 0px 15px 0px;}

.jh-solid-box5 {background-color: #D90101; margin: 1em 0; padding:30px; min-height:0px; display:block; border-radius: 15px 0px 15px 0px;}

.jh-hover-box {
  /* Dark theme baseline for black backgrounds */
  background-color: #1a1a1a; /* Dark charcoal color so it stands out on pure black */
  color: #ffffff; /* Ensures text is visible */
  border: 1px solid #2d2d2d; /* Subtle baseline border */
  
  padding: 30px; 
  min-height: 0px; 
  display: block;
  margin-bottom: 20px; 
border-radius: 15px 0px 15px 0px;
  /* Your original transition animations */
  -moz-transition: all .35s ease-in;
  -o-transition: all .35s ease-in;
  -webkit-transition: all .35s ease-in;
  transition: all .35s ease-in;
}

/* The Hover State Trigger */
.jh-hover-box:hover { 
  background-color: #000000; /* Darkens the box background slightly on hover */
  border-color: #D90101; /* Changes the border to your exact red highlight */
  
  /* Adds a premium glowing red shadow under the box */
  box-shadow: 0 10px 30px rgba(217, 1, 1, 0.25); 
  
  /* Optional: gives it a subtle vertical lift on hover */
  transform: translateY(-5px); 
}