body {
    background-color: #fff;
}

/* Start Button 001 customization */

a.stylizedButton.buttonStyle001 {
  border: 2px solid #0080FF;
  border-radius: 30px;
}

a.buttonStyle001, a:link.buttonStyle001 {
  padding: 14px 20px;
  min-width:70px;
  background:#0080FF;
  font-family:'Ubuntu','Arial',sans-serif;
  font-size: 16px;
}

a.buttonStyle001:hover, a:link.buttonStyle001:hover {
  background: #191414;
  border: 2px solid #191414;
}

a.buttonStyle001:active, a:link.buttonStyle001:active {
  background: #191414;
  border: 2px solid #191414;
}

@media screen and (max-width: 767px) {
  html:not([class*="WaPlaceHolder"]) a.buttonStyle001 {
  border-width: 2px;
  font-size: 15px;
  }
}

/* End button 001 end */

/* Start Button 007 customization */
a.stylizedButton.buttonStyle007 {
  border: 2px solid #191414;
  border-radius: 30px;
}

a.buttonStyle007, a:link.buttonStyle007 {
  padding: 14px 20px;
  min-width:70px;
  background: transparent;
}

@media screen and (max-width: 767px) {
  html:not([class*="WaPlaceHolder"]) a.buttonStyle007 {
    padding: 14px 20px;
  }
}
/* END BUTTON 007 END */

/* ==========================================================================
   DESKTOP OVERRIDES (Above 767px - Perfectly Balanced Columns)
   ========================================================================= */
@media (min-width: 768px) {
  
  /* 1. Equalize both images to match heights perfectly */
  #id_eU4k5TK img, 
  #id_r9zpr2d img {
    width: 100% !important;
    max-width: 100% !important;
    height: 300px !important;       
    object-fit: cover !important;   
    display: block !important;
  }

  /* 2. FORCE THE TABLE ROW TO ACT AS A RESPONSIBL FLUID GRID CONTAINER */
  tr[data-componentid="za81A2I_row"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Forces 2 perfectly equal fluid columns */
    align-items: stretch !important; /* Dynamically stretches both columns to match exactly */
  }

  /* Hide Wild Apricot's native blank middle separator column since grid handles spacing */
  tr[data-componentid="za81A2I_row"] > td.WaLayoutSeparator {
    display: none !important;
  }

  /* 3. Convert both column grid units into individual flexbox columns */
  #id_AMQOoK1, 
  #id_MVBIHc1,
  #id_ERlmeqI,
  #id_ovUpxzI,
  #id_ERlmeqI > div,
  #id_ovUpxzI > div {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Forces inner items to grow into the stretched box */
    width: auto !important; /* Overrides the hardcoded 50% attributes */
  }

  /* 4. Push the "Learn More" button gadgets to the absolute bottom line */
  #id_LKPEGsX,
  #id_vMzNKnk {
    margin-top: auto !important; /* Absorbs the remaining vertical space */
    padding-top: 25px !important;   
  }
}

/* ==========================================================================
   MOBILE OVERRIDES (Below 767px - Smooth Proportional Resizing)
   ========================================================================== */
@media (max-width: 767px) {
  
  /* IMAGE 1: Background Image Container */
  #id_ybWcxXD {
    background-size: contain !important;
    height: auto !important;
    min-height: 200px !important;
    aspect-ratio: 16 / 9 !important;
  }
  #id_ybWcxXD .gadgetStyleBody {
    height: auto !important;
  }

  /* IMAGES 2, 3, 4, & 5: Grouped HTML <img> Tags (Naturally Resizing) */
  /* Added #id_eU4k5TK (the left column image) into your mobile layouts list */
  #id_sdJhM2B, 
  #id_rRPDNxk,
  #id_r9zpr2d,
  #id_eU4k5TK {
    width: 100% !important;
  }

  /* Force all inline image elements to scale down and center proportionally together */
  #id_sdJhM2B img, 
  #id_rRPDNxk img,
  #id_r9zpr2d img,
  #id_eU4k5TK img {
    width: 100% !important;        
    max-width: 100% !important;    
    height: auto !important;       
    display: block !important;
    margin-left: auto !important;  
    margin-right: auto !important;
  }

}