.background-card {
        position: relative;
        background-size: cover;
        background-position: center;
        height: 350px;
        display: flex;
        align-items: flex-end; 
        overflow: hidden;
        border-radius: 8px; 
    }
    .background-card h3 {
        color: white;
        font-size: 1.5em;
        margin: 0;
        padding: 20px;
        width: 100%;
        text-align: center;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    }
.help-card {
    display: block;
    text-decoration: none;
    border-radius: 14px;
    overflow: hidden;
    transition: 0.3s;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.25);
}

.help-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.25);
    background: rgba(255,255,255,0.18);
}

.help-inner {
    padding: 28px 15px;
    text-align: center;
}

.help-inner h5 {
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
    margin-top: 12px;
    letter-spacing: 0.3px;
}
.help-icon svg {
    width: 42px;
    height: 42px;
    stroke: #ffffff;
    opacity: 0.9;
}
.help-options{
    background-color:#A6122D;
    padding: 20px 20px;
    text-align:center;
}
@media (max-width: 768px) {
    .help-inner {
        padding: 22px 10px;
    }
    .help-inner h5 {
        font-size: 12px;
    }
    .help-icon svg {
        width: 36px;
        height: 36px;
    }
}
/* Contenedor de la sección (puedes mover esto a tu CSS global) */
.help-cards-section { padding: 40px 0; }
.help-cards-section .section-title { margin-bottom: 22px; }

/* ---- fila única centrada ---- */
.help-cards-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: nowrap;              /* 1 sola fila en desktop */
  overflow-x: auto;               /* si no cabe, permite scroll horizontal */
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

/* ocultar scrollbar fino (opcional) */
.help-cards-row::-webkit-scrollbar{ height:8px; }
.help-cards-row::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.12); border-radius:8px; }

/* Cada card tendrá ancho fijo relativo para que en desktop salgan 5 en una fila */
.help-card-v2 {
  flex: 0 0 18%;     /* 18% x 5 = 90% + gaps -> centrado */
  max-width: 18%;
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: transform .28s ease, box-shadow .28s ease;
  border: 1px solid #eee;
  box-sizing: border-box;
}

.help-card-v2:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(18,24,40,0.12);
}

.help-card-img img{
  width:100%;
  height: 210px;
  object-fit: cover;
  display:block;
}

.help-card-body{ padding: 16px; }

.help-card-body .category{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  color:#6c63ff;
  text-transform:uppercase;
  letter-spacing:0.6px;
}

.help-card-body h5{
  margin:8px 0 8px;
  font-size:16px;
  font-weight:700;
  line-height:1.12;
}

.help-card-body p{ margin:0 0 10px; color:#666; font-size:11px; }

.help-card-body .read-more{
  color:#3f37ff;
  font-weight:700;
  font-size:13px;
}

/* ---- Responsive: en pantallas medianas permitir 3 en fila ---- */
@media (max-width: 1200px) {
  .help-card-v2 { flex: 0 0 28%; max-width: 28%; }
}

/* en tablets móviles: 2 por fila (si no quieres scroll) */
@media (max-width: 768px) {
  .help-cards-row { flex-wrap: wrap; overflow-x: visible; }
  .help-card-v2 { flex: 0 0 48%; max-width:48%; }
  .help-card-img img { height:160px; }
}

/* móviles pequeños: 1 por fila */
@media (max-width: 480px) {
  .help-card-v2 { flex: 0 0 94%; max-width:94%; margin: 0 auto; }
  .help-card-img img { height:140px; }
}

/* FLECHAS SWIPER (Next / Prev) */
.myProjectsSwiper .swiper-button-next,
.myProjectsSwiper .swiper-button-prev {
    width: 45px;
    height: 45px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    color: #000 !important;
    font-weight: bold;
}

.myProjectsSwiper .swiper-button-next::after,
.myProjectsSwiper .swiper-button-prev::after {
    font-size: 20px !important;
    font-weight: bold;
    color: #000;
}

.myProjectsSwiper{
    padding-bottom: 20px !important; 
}

.myProjectsSwiper .swiper-pagination {
    bottom: -6px !important; 
}