/****************  CSS 02 ********************/


:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box
}


.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
    transform: translate3d(0px, 0, 0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}


.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 700px
}



.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 700px
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide {
    transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

@media (max-width: 767px) {  
  
  
    .ContainerCard > h2 {
    
     position: absolute;
     width:65%;
    padding: 15px 45px 10px 11px ;
    top: 85.8%; /* Centra verticalmente */
    left: 30%; /* Centra horizontalmente */
    transform: translate(-50%,-50%); /* Ajuste para centrar completamente */
    color: #ffffff; /* Elige un color que contraste con la imagen */
    border-radius: 0 1px 0 15px;
    /*background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para mayor legibilidad */
  
    border-radius: 5px;
    text-align: left;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 25px; /* Ajusta el tamaño del texto según sea necesario */
     
      
   }