@font-face {
   font-family: 'GothamBold';
   src: url('./fonts/Gotham-Bold.otf') format('opentype');
   font-weight: bold;
   font-style: normal;
}

@font-face {
   font-family: 'GothamBlack';
   src: url('./fonts/Gotham-Black.otf') format('opentype');
}

.GothamBold{
   font-family: 'GothamBold', Arial, sans-serif !important;
}

.GothamBlack{
   font-family: 'GothamBlack', Arial, sans-serif !important;
}

.Arial{
   font-family: Arial, sans-serif !important;
}

html,body {
   height: 100%;
}
.text-black{
   color:#000 !important;
}
.bg-genio-amarillo {
   background-color: #ffe500 !important;
}

.radius-genio {
   border-radius: 20px !important;
}

/* Aplicar bordes redondeados solo al inicio y fin del grupo */
.input-group .form-control.radius-genio-start {
   border-top-left-radius: 20px !important;
   border-bottom-left-radius: 20px !important;
}

.input-group .input-group-text.radius-genio-end {
   border-top-right-radius: 20px !important;
   border-bottom-right-radius: 20px !important;
}

/* Asegúrate de que no haya superposición entre el input y el addon */
.input-group .form-control {
   border-right: 0;
   /* Evita bordes entre el input y el addon */
}

.input-group .input-group-text {
   border-left: 0;
   /* Evita bordes entre el addon y el input */
}
.bt-menu.active {
   background-color: #ffe500 !important;
   /* Cambia este color al que prefieras */
   color: #000000 !important;
   /* Ajusta el color del texto si es necesario */
   border-color: #000000 !important;
   /* Cambia el borde para que coincida */
}
.btn-genio-menu {
   border-radius: 0px !important;
}

/* Ajustar imágenes en botones para pantallas pequeñas */
.bt-menu img {
   width: 36px;
   /* Reducir el tamaño de las imágenes en móvil */
}

.bt-menu span {
   font-size: 12px;
   /* Reducir el tamaño de texto en móvil */
}

/* Para asegurar que los botones mantengan proporción */
@media (max-width: 576px) {
   .bt-menu {
      padding: 10px !important;
      /* Ajustar el relleno para pantallas pequeñas */
   }
}

.radius-normal{
   border-radius: 18px !important;
}

.radius-btn-top {
   border-top-left-radius: 20px !important;
   border-top-right-radius: 20px !important;
   border-bottom-left-radius: 0px !important;
   border-bottom-right-radius: 0px !important;
}

.radius-btn-start {
   border-top-left-radius: 20px !important;
   border-top-right-radius: 0px !important;
   border-bottom-left-radius: 0px !important;
   border-bottom-right-radius: 0px !important;
}

.radius-btn-end {
   border-top-left-radius: 0px !important;
   border-top-right-radius: 20px !important;
   border-bottom-left-radius: 0px !important;
   border-bottom-right-radius: 0px !important;
}

.radius-btn-bottom {
   border-top-left-radius: 0px !important;
   border-top-right-radius: 0px !important;
   border-bottom-left-radius: 20px !important;
   border-bottom-right-radius: 20px !important;
}

.btn-bg-amarillo-hover:hover {
   background-color: #ffe500 !important;
   color: #000000 !important;
}

.btn-bg-negro-hover {
   color: #ffffff !important;
   background-color: #000000 !important;
}

.btn-bg-negro-hover:hover {
   background-color: #0f0f0f !important;
}

/* Estilos para los menús desplegables */
.dropdown-menu {
   display: none;
   position: absolute;
   background-color: #fff;
   border: 1px solid #ddd;
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
   z-index: 1000;
   margin-top: 0px;
   padding: 10px 0;
   list-style: none;
   width: 200px;
}

.dropdown-menu li {
   padding: 5px 15px;
   cursor: pointer;
}

.dropdown-menu li:hover {
   background-color: #ffe500;
}

.nav-item:hover{
   background-color: rgba(0, 0, 0, 0.1) !important;
}

.dropdown:hover .dropdown-menu {
   display: block;
}

.btn-redondo {
   border-radius: 100px !important;
}

.btn-with-pointer {
   position: relative;
   display: inline-block;
}

.pointer-icon {
   position: absolute;
   bottom: -10px;
   /* Ajuste vertical, puedes modificar según la imagen y preferencia */
   right: -10px;
   /* Ajuste horizontal, ajusta para colocar mejor la imagen */
   width: 30px;
   /* Tamaño del ícono del puntero */
   height: 30px;
   /* Tamaño del ícono del puntero */
   z-index: 1;
   /* Asegura que el ícono quede sobre el botón */
}

.btn-semiredondo {
   border-radius: 13px !important;
}

.img-border-bottom {
   border-top-left-radius: 0px !important;
   border-top-right-radius: 0px !important;
   border-bottom-left-radius: 30px !important;
   border-bottom-right-radius: 30px !important;
}

.bg-rojo {
   background: linear-gradient(to bottom, #b71c1c, #ff0000, #b71c1c);
}

.bg-whatsapp {
   background-color: #02C404 !important;
}

.card-solid {
   border-radius: 0px !important;
}

.btn-amarillo {
   border-radius: 13px !important;
   background-color: #ffe500 !important;
   border-color: #000000 !important;
}

.btn-amarillo:hover {
   background-color: #ffe500 !important;
   color: #000000 !important;
}

.btn-negro {
   border-radius: 20px !important;
   background-color: #000000 !important;
   border-color: #000000 !important;
   color: #ffffff !important;
}

/*.btn-negro:hover{
   border-radius: 20px !important;
   background-color: #000000 !important;
   border-color:#000000!important;
   }*/
.boton-degradado-rojo {
   background: linear-gradient(to bottom, #b71c1c, #ff0000, #b71c1c);
}

/* Estilos del botón flotante */
.boton-flotante {
   position: fixed;
   bottom: 20px;
   right: 20px;
   background-color: #f7c600;
   /* Color amarillo */
   color: #000;
   border: none;
   border-radius: 50px;
   padding: 8px 25px;
   font-size: 16px;
   font-weight: bold;
   display: flex;
   align-items: center;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
   cursor: pointer;
   z-index: 999;
}

.boton-flotante img {
   width: 32px;
   height: 32px;
   margin-left: 10px;
}

/* Estilos de la burbuja de mensaje */
.burbuja-mensaje {
   position: fixed;
   bottom: 80px;
   /* Espaciado sobre el botón flotante */
   right: 20px;
   background-color: #ffffff;
   /* Mismo color que el botón */
   color: #000;
   padding: 8px;
   border-radius: 25px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
   font-size: 14px;
   display: flex;
   align-items: center;
   width: auto;
   z-index: 998;
}

.burbuja-mensaje img {
   width: 32px;
   height: 32px;
   margin-right: 10px;
}

.burbuja-mensaje::after {
   content: '';
   position: absolute;
   bottom: -10px;
   /* Debajo de la burbuja */
   right: 20px;
   /* Alineado con el borde derecho de la burbuja */
   width: 0;
   height: 0;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-top: 10px solid #ffffff;
   /* Mismo color que la burbuja */
}

/* Estilos para que la burbuja aparezca después de unos segundos */
.burbuja-mensaje.mostrar {
   animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
   0% {
      opacity: 0;
   }

   50% {
      opacity: 0.8;
   }

   100% {
      opacity: 1;
   }
}


.link-decore {
   text-decoration: none !important;
}

.link-gn {
   text-decoration: none !important;
   color:#000 !important;
}


.image-zoom {
   display: block;
   /* Asegura que la imagen sea tratada como bloque */
   width: 100%;
   /* Ajusta al contenedor */
   height: auto;
   /* Mantiene la proporción */
   transition: transform 0.3s ease-in-out;
   /* Transición suave para el efecto */
}

.image-zoom:hover {
   transform: scale(1.2);
   /* Escala la imagen al pasar el mouse */
   cursor: pointer;
   /* Cambia el cursor para indicar interactividad */
}

.slider-comments {
   margin: 0 auto;
   max-width: 1200px;
}

.comment-card {
   padding: 10px;
}

.cardc {
   height: 100% !important;
}
.card-title-coment{
   font-size: 13px;
}
.fecha_comentario{
   font-size: 10px;
}

.text-gray{
   color: #ececec !important;
}