.simple-card {
   display: flex;
   flex-direction: column;
   height: 95%;
   background: #ffffff;
   border: 1px solid #d3d3d3;
   border-radius: 8px;
   overflow: hidden;
   width: 100%;
   max-width: 480px;
   transition: transform 0.2s ease, box-shadow 0.2s ease;


}


@media (max-width: 768px) {
   .simple-card {
       height: auto;
   }
}


/* Hover effect */
.simple-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}


/* Image */
.simple-card .image-lightbox {
   height: 200px !important;
   overflow: hidden;
}


.simple-card img {
   width: 100% !important;
   height: 200px !important;
   object-fit: cover;
   display: block;
}


/* Content */
.simple-card .content {
   padding: 0.5rem 1rem;
   display: flex;
   flex-direction: column;
   gap: 12px;
}


/* Title */
.simple-card h3 {
   font-size: 1.25rem;
   margin: 0;
}


/* Body */
.simple-card p {
   font-size: 0.95rem;
   line-height: 1.5;
   margin: 0;
}


.simple-card h4 {
 font-size: 0.8rem;
 font-weight: 600;
 text-transform: uppercase;
 margin-top: 0px;
 padding-top: 0px;
 display: flex;
 align-items: center;
 gap: 0.25rem;
 color: var(--primary-brand);
}


/* -- Hero  BD will move in a rush--*/
.hero-banner {
 width: 100%;
 min-height: 350px;
 border-radius: 24px 24px 0 0;
 padding: 3rem;
 box-sizing: border-box;


 display: flex;
 align-items: flex-start;
 gap: 2rem;
 flex-wrap: wrap;


 background-size: cover;
 background-position: center;
}


/* LEFT CONTENT */
.hero-left {
 flex: 1;
 min-width: 280px;
 max-width: 500px;
}


/* RIGHT CALLOUT */
.hero-callout {
 width: 330px;
 max-width: 100%;
 background-color: rgba(247,247,247,.9);
 border: 2px solid var(--secondary-brand);
 border-top: 12px solid var(--secondary-brand);
 border-radius: 12px;
 padding: 1.75rem;
 box-sizing: border-box;
 box-shadow: 0 10px 25px rgba(0,0,0,0.15);
 position: relative;
}


@media (max-width: 1200px) {
 .hero-banner {
   padding: 2rem;
 }


 .hero-callout {
   width: 100%;
 }
}




@media (max-width: 600px) {
 .hero-banner {
   flex-direction: column;
   padding: 1.5rem;
 }


 .hero-left h1 {
   font-size: 2rem;
 }


 .hero-left p {
   font-size: 1rem;
 }


 .hero-callout {
   padding: 1.25rem;
 }
}


h4 {
   white-space: pre-wrap;
   font-size:  0.9rem !important;
   font-weight: 600;
   text-transform: uppercase;
   margin-top: 0px;
   padding-top: 0px;
   display: flex;
   align-items: center;
   gap: 0.25rem;
   color: var(--primary-brand);
}


h3 {
   margin-top: 0rem !important;
}