.bg-third-section{
    background-color: #57B9C9
}

@media (max-width: 576px) {
  .bg-third-section .ratio {
    width: 200px !important;  /* shrink the circle wrapper */
  }
}

/* iPad / tablet only (portrait iPad Pro 1024px included) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* show 2 cards per row; the 3rd wraps (keeps mobile & desktop untouched) */
  .bg-third-section .row.row-cols-md-3 > * {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* tighten card padding a bit for tablet */
  .bg-third-section .col .h-100 {
    padding: 1.5rem !important; /* overrides p-4 only at this breakpoint */
  }

  /* scale down the circle image so three cards don't feel cramped when wrapping */
  .bg-third-section .ratio.rounded-circle[style*="width: 316px"] {
    width: 260px !important;   /* was 316px */
  }

  /* slight type tweaks for headings and subtext inside this section only */
  .bg-third-section h5.fs-3 { font-size: 1.5rem; }   /* ~24px */
  .bg-third-section .fs-4   { font-size: 1.125rem; } /* ~18px */

  /* ensure wrapped last card stays centered nicely */
  .bg-third-section .row.justify-content-center {
    justify-content: center !important;
  }
}
@media (max-width: 576px) {
  .support-card p {
    text-align: left !important;   /* stop justification */
    /* reset justification */
    word-spacing: normal !important;
    letter-spacing: normal !important;
    font-size: 1.2rem !important; 
    
  }

    .support-card {
      margin-left: .5rem;
      margin-right: .5rem;
    }
    
}
.no-hover {
    background-color: #23697f;
    color: white;
    transition: background-color 0.3s ease;
}

/* Hover effect */
.no-hover:hover {
    background-color: #54A0AD;
    color: white;
}

/* Prevent mobile tap from changing background */
.no-hover:active,
.no-hover:focus {
    background-color: #54A0AD !important;
    color: white !important;
    outline: none;
    box-shadow: none;
}