/*********************************************************************************

	Template Name: Template Full Name Here
	Description: A perfect template to build beautiful and unique medical websites. It comes with nice and clean design.
	Version: 1.0

	Note: This is custom css.

**********************************************************************************/

#infobox3 {
    margin: auto;
    position: relative;
    top: -25px;
    height: 58px;
    width: 100%;
    text-align: center;
    background-color: black;
}

/* ==========================================================================
   Banners uniformes: mismo tamaño en Home (hero) y en todas las secciones.
   Se usa min-height (con height:auto) para que el contenido nunca se recorte
   y todos los banners midan igual en cada breakpoint. Contenido centrado.
   ========================================================================== */
.hero-item,
.breadcaump-area,
.brook-breadcaump-area {
    height: auto !important;
    min-height: 420px !important;
}
.breadcaump-area,
.brook-breadcaump-area {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero-item,
    .breadcaump-area,
    .brook-breadcaump-area { min-height: 400px !important; }
}
@media only screen and (max-width: 991px) {
    .hero-item,
    .breadcaump-area,
    .brook-breadcaump-area { min-height: 460px !important; }
}

/* ==========================================================================
   Tarjetas de servicio del Home: legibilidad en hover.
   El tema solo pone en blanco .content h5 y .content p; nuestros títulos son
   <h2> y usamos bullets <ul><li>, que quedaban negros sobre el fondo oscuro.
   ========================================================================== */
.single-svg-icon-box:hover .content h2,
.single-svg-icon-box:hover .content ul,
.single-svg-icon-box:hover .content li,
.single-svg-icon-box:hover .content li strong {
    color: #fff !important;
}

/* ==========================================================================
   Tarjetas del blog (listado). Componente propio, autocontenido, de altura
   uniforme (flex) — no depende de la tarjeta del tema para evitar conflictos.
   ========================================================================== */
.v2c-blog-card {
    background: #fff;
    display: block;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 12px 30px -14px rgba(0,0,0,.15);
}
.v2c-blog-thumb { display: block; overflow: hidden; }
.v2c-blog-thumb img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.v2c-blog-card:hover .v2c-blog-thumb img { transform: scale(1.05); }
.v2c-blog-body { padding: 26px 28px 30px; }
.v2c-blog-meta { font-size: 13px; color: #8a8a8a; margin-bottom: 10px; }
.v2c-blog-card h4 { font-size: 19px; line-height: 1.4; margin: 0 0 12px; }
.v2c-blog-card h4 a { color: #06454F; }
.v2c-blog-card p { color: #666; margin: 0; font-size: 15px; line-height: 1.6; }