/* Force Price Box Height */

/* 1. Forces the columns inside this row to be equal height */
.pricing-row {
  display: flex;
  flex-wrap: wrap; 
}

/* 2. Forces the white pricing box to stretch and fill that equal height */
.pricing-row .pricing-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 3. Pushes the buttons to the very bottom of the card */
.pricing-row .pricing-item .btn {
  margin-top: auto; 
  align-self: center; /* This stops the stretching and centers the button */
}

/* Target screens smaller than 768px */
@media (max-width: 767px) {
  .thumbnail {
    width: 100%; 
    box-sizing: border-box; 
  }

  .thumbnail img {
    width: 100% !important; 
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto; 
  }

  /* 1. Force the Bootstrap row and columns to stack normally */
  .pricing-row {
    display: block !important;
  }
  
  .pricing-row > [class*="col-"] {
    width: 100% !important;
    display: block !important;
    margin-bottom: 30px !important;
    padding-left: 15px !important;  /* Restores default Bootstrap column padding */
    padding-right: 15px !important;
  }

  /* 2. Kill the bottom margin on the last item */
  .pricing-row > [class*="col-"]:last-child {
    margin-bottom: 0 !important;
  }

  /* 3. The Nuclear Override for the pricing items */
  .pricing-row .pricing-item,
  .pricing-row .highlighted-plan {
    width: 100% !important;
    max-width: none !important; /* Destroys any theme-imposed pixel limits */
    min-width: 100% !important; /* Forces it to stretch */
    box-sizing: border-box !important;
    
    /* Strips away absolute positioning tricks */
    position: static !important; 
    
    /* Strips away theme overlap margins */
    margin: 0 !important; 
    
    /* Strips away scale, zoom, or translation effects */
    transform: none !important; 
    
    /* Optional: prevents the WOW.js zoomIn animation from breaking mobile widths */
    animation-name: none !important; 
  }
}

/* Target screens 768px and larger (tablets and desktops) */
@media (min-width: 768px) {
  
  /* 1. Turn the row into a flex container */
  #contact .row {
    display: flex;
    flex-wrap: wrap; 
  }

  /* 2. Keep the columns acting vertically so widths are preserved */
  #contact .row > [class*="col-"] {
    display: flex; 
    flex-direction: column; /* This is the key to preserving your widths */
  }

  /* 3. Tell the contact box to grow vertically to fill the column */
  #contact .contact-box {
    flex-grow: 1; /* Stretches the height naturally */
    
    /* We remove width: 100% here so it respects its original sizing */
  }
}