.clase_personalizada {
    background-color: #004a46 !important;
    color: white;
    text-align: justify;
  }

  .clase_personalizada:hover {
    background-color: #ffbb33 !important;
    color: #004a46;
    text-align: justify;
    transform: scale(1.1);
  }

  .clase_personalizada .class_neme {
    color: white;
  }

  .parrafo-dinamico {
    font-size: 16px;
    color: #f7c32e;
    transition: transform 0.3s ease-in-out;
  }

  .parrafo-dinamico:hover {
    transform: scale(1.1);
    color: #f7c32e;
  }

  .card-dinamico:hover {
    transform: scale(1.1);
  }

  .containere {
    position: relative;
  }

  .zindexe {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    /* Fondo semi-transparente para mayor legibilidad */
    padding: 10px;
  }

  .borde_radius_10px {
    border-radius: 15px;
  }
  /*------------------------botones----------------------------*/
  
  .btn_bg__primary1 {
    background-color: #004a46;
    color: white;
  }

  .btn_bg__primary1:hover {
    background-color: #D5A104;
    color: white;
  }


  .btn_bg__primary {
    background-color: #004a46;
    color: white;
    transition: transform 0.3s ease-in-out;
  }

  .btn_bg__primary:hover {
    background-color: #D5A104;
    color: white;
    transform: scale(1.1);
  }

  .btn_bg__primary_01 {
    background-color: #D5A104;
    color: white;
    transition: transform 0.3s ease-in-out;
  }

  .btn_bg__primary_01:hover {
    background-color: #004a46;
    color: white;
    transform: scale(1.1);
  }

  .btn_bg__secondary {
    color: white;
    background-color: #103c64;
    transition: transform 0.3s ease-in-out;
  }

  .btn_bg__secondary:hover {
    color: white;
    background-color: #D5A104;
    transform: scale(1.1);
  }

  .btn_bg__third {
    color: white;
    background-color: #D5A104;
    transition: transform 0.3s ease-in-out;
  }

  .btn_bg__third:hover {
    color: white;
    background-color: #103C64;
    transform: scale(1.1);
  }

  .btn_bg__cuarto {
    color: white;
    background-color: #103C64;
    transition: transform 0.3s ease-in-out;
  }

  .btn_bg__cuarto:hover {
    color: white;
    background-color: #b2b1b1;
    transform: scale(1.1);
  }
  /**-------------------*/
  .badge_bg_prymary_mod {
    color: white;
    background-color: #103C64;
    transition: transform 0.3s ease-in-out;
  }

  .btn_bg_amar_plo {
    color: white;
    background-color: #D5A104;

  }

  .btn_bg_amar_plo:hover {
    color: white;
    background-color: #85878a;

  }

  /*------------------------texto----------------------------*/

  .text_color_warning {
    color: #D5A104;
    /*background-color: #ffbb33;*/
    transition: transform 0.3s ease-in-out;
  }

  .text_color_warning:hover {
    color: #ffbb33;
    background-color: #004a46;
    transform: scale(1.1);
  }

  /*------------------------background card----------------------------*/

  .bg-light_primary {
    --bs-bg-opacity: 1;
    background-color: #004946 !important;
   /* transition: transform 0.3s ease-in-out;*/
  }
  .bg-light_primary:hover {
    --bs-bg-opacity: 1;
    background-color: #b2b2b1 !important;
    /*transform: scale(1.1);*/
  }

  .bg-light_primary h6{
    color: white;
    font-size: 13px!important;
  }
  /**/
  .bg-light_secondary {
      --bs-bg-opacity: 1;
      background-color: #103C64 !important;
      /*transition: transform 0.3s ease-in-out;*/
  }
  .bg-light_secondary:hover {
      --bs-bg-opacity: 1;
      background-color: #b2b2b1 !important;
     /* transform: scale(1.1);*/
  }

  .bg-light_secondary h6{
      color: white;
      font-size: 13px!important;
  }
  .bg-light_secondary span{
      color: white;
      /*font-size: 13px!important;*/
      font-size: 10px;
  }
  

  /**/
  .bg-light_primary_simple {
    --bs-bg-opacity: 1;
    background-color: #103c64 !important;
  }
  .bg-light_third_simple {
    --bs-bg-opacity: 1;
    background-color: #b2b1b1 !important;
    /*transition: transform 0.3s ease-in-out;*/
}
  .bg-light_third {
      --bs-bg-opacity: 1;
      background-color: #b2b1b17a !important;
      /*transition: transform 0.3s ease-in-out;*/
  }
  .bg-light_third:hover {
      --bs-bg-opacity: 1;
      background-color: #D5A104 !important;
      /*transform: scale(1.1);*/
  }

  .bg-light_third h6{
      color: #004a46;
      font-size: 15px!important;
  }
/*-------*/
  /*------------------------secciones----------------------------*/

  .section_update {
    padding-top: 0.5rem;
    padding-bottom: 1.5rem;
  }
  /*------------------------noticias----------------------------*/
  .title_noticias {
    font-size: 15px;
    text-align: center;
  }
  .body_noticias {
    font-size: 13px;
    text-align: center;
  }

  /*----------------------nosotros-----------------------------*/

  .nosotros {
    color: white;
   /* font-size: 13px!important; h2 p ul li*/
  }

  .nosotros h2 {
    color: white;
  }

  .nosotros p {
    color: white;
    font-size: 16px!important;
  }

  /* Estilos para la página para nav segun la pagina */
  .class_bg_x_pg_white {
      background-color: white; /* Color de fondo */
  }


  @media (min-width: 1200px) {

  }

  /* Estilos para pantallas menores a 1200px */
  @media (max-width: 1200px) {

  }

  /* ======================================================
  stylos para el staf medico 
  =========================================================*/

  .contenedor_staf_m {
    max-height: 350px; /* Altura máxima del div */
    overflow: auto; /* Hace que aparezca una barra de desplazamiento cuando el contenido excede la altura */
    border: 1px solid #ccc; /* Solo para mostrar el borde del div */
    padding: 10px; /* Solo para dar espacio alrededor del contenido */
  }
  /* Para navegadores Webkit (Google Chrome, Safari, etc.) */
  .contenedor_staf_m::-webkit-scrollbar {
    width: 12px; /* Ancho de la barra de desplazamiento */
  }

  .contenedor_staf_m::-webkit-scrollbar-thumb {
    background-color: #103c64; /* Color del "thumb" (la parte móvil de la barra) */
  }

  /* Para navegadores basados en Gecko (Firefox) */
  .contenedor_staf_m {
    scrollbar-color: #103c64 #f0f0f0; /* Color del "thumb" y del track */
  }

  .colorText label{
    font-size: 12px;
  }

  .colorText span{
    font-size: 12px!important;
    padding-top: 5px;
  }



  /*CSS PARA EL DIV DEL VERSICULO */

  #div_vers {
    padding: 3px 10px !important;
    border: #103c64  5px double !important;
    border-top-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
  }

  #div_vers  strong {
    
    color: #004a46;
  }
  
  /*CSS PARA EL DIV DEL VERSICULO */

  #div_vers {
    padding: 3px 10px !important;
    border: #103c64  5px double !important;
    border-top-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
  }

  #div_vers  strong {
    
    color: #004a46;
  }
   
   /***:::::::::::::::::::::::: CSS PARA LOS SLIDES :::::::::::::::::::*/

    
   .slider-container {
    position: relative;
    width: 100%;
    /*max-width: 600px;*/
    margin: auto;
    overflow: hidden;
    border-radius: 15px;
  }

  .slider {
    display: flex;
    transition: transform 0.5s ease;
  }

  .slide {
   width: 100%; /* Cada diapositiva toma el 100% del ancho del contenedor */
   height: auto;
   flex-shrink: 0; /* Evita que las diapositivas se reduzcan de tamaño */
  }

  .slide img {
    width: 100%;
    height: auto;
  }

  .btn_prev_next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 24px;
    padding: 10px;
    cursor: pointer;
  }

  .prev {
    left: 0;
  }

  .next {
    right: 0;
  }

  .btn-zoom {
     display: inline-block;
     text-decoration: none;
     color: #fff; /* Color del texto */
     background-color: #103c64; /* Color de fondo */
     padding: 10px 20px;
     font-size: 20px;
     font-weight: bold;
     border-radius: 5px;
     animation: zoomInOut 2s infinite ease-in-out; /* Aplicamos la animación */
   }

   /* Definición de la animación */
   @keyframes zoomInOut {
     0% {
       transform: scale(1); /* Tamaño normal al inicio */
     }
     50% {
       transform: scale(1.1); /* Zoom al 10% más grande */
     }
     100% {
       transform: scale(1); /* Regresa al tamaño normal */
     }
   }
    

 /**ESTILOS PARA SLIDES DE SALUD E SOPORTE ESPIRITUAL*/

   .flip-card {
    background-color: transparent;
    width: 100%;
    height: 270px;
    perspective: 1000px;
  }

  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }

  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    height: 270px;
    padding: 5px;
    border-radius: 1em;
    backface-visibility: hidden;
  }

  .flip-card-front {
    background-color: #f8f8f8;
    border: 4px solid #f8f8f8;
  }

  .profile-image {
    background-color: transparent;
    border: none;
    margin-top: 15px;
    border-radius: 5em;
    width: 100%;
    height: 100%;
    /*margin-left: 50px;*/
  }

  .pfp {
    border-radius: 20em;
    fill: #f8f8f8;
  }

  .name {
    margin-top: 15px;
    font-size: 16px;
    color: black;
    font-weight: bold;
  }

  .flip-card-back {
    background-color: #f8f8f8;
    border: 4px solid #f8f8f8;
    transform: rotateY(180deg);
    padding: 11px;
  }

  .description {
    margin-top: 10px;
    font-size: 14px;
    letter-spacing: 1px;
    color: black
  }

  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  
  /*stylos de los valores*/

.buttonv {
  height: 50px;
  width: 200px;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 2px solid #103c64;
  overflow: hidden;
  border-radius: 30px;
  transition: all 0.5s ease-in-out;

}

.btnn-txt {
  z-index: 1;
  letter-spacing: 2px;

}

.type1::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.5s ease-in-out;
  background-color: #103c64;
  border-radius: 30px;
  visibility: hidden;
  height: 10px;
  width: 10px;
  z-index: -1;
}

.buttonv:hover {
  box-shadow: 1px 1px 200px #103c64;
  color: #fff;
  border: none;

}

.type1:hover::after {
  visibility: visible;
  transform: scale(100) translateX(2px);
}