body{
			font-size: 14pt;
		}
    /* Estilos opcionales para los colores del diseño */
    .navbar {
        background-color: #0DB7CB; /* Color de fondo del encabezado */
        font-size: 12pt;
    }
    .nav-link {
        color: #fff !important; /* Color de los enlaces */
    }
    .nav-link:hover {
	    color: #4460A0 !important; /* El color que quieras para el hover, por ejemplo, amarillo */
	    font-weight: bold; /* Pone el texto en negritas */
		}
	    .display-1 {
		    font-size: 5rem;
		    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para que el texto sea legible sobre la imagen */
		}
		.lead {
		    font-size: 1.5rem;
		    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
		}
		
		.imagen-borde {
		  border-radius: 20px; 
		}
		.imagen-borde10 {
		  border-radius: 10px; 
		}
		.division5 {
		  padding-top:5px; 
		}
		.division20 {
		  padding-top:20px; 
		}
		.iconSM {
		  width:32px;
		}
		.divTitulo {
		    background-color: #0DB7CB;
		    color: #FFF;
		    height: 45px;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    font-size: 18pt;
		    font-weight: bold;
		}
		.visible-div {
		  visibility: visible;
		  display: block;
		}
		.hidden-div {
		  visibility: hidden;
		  display: none;
		}
		.hidden {
			
		  	display: none;
		}
		img[data-target] {
		  cursor: pointer;
		}
		#scroll-to-top-btn {
		  position: fixed; /* Mantiene la imagen en una posición fija en la pantalla */
		  bottom: 20px;    /* A una distancia de 20px del borde inferior */
		  right: 20px;     /* A una distancia de 20px del borde derecho */
		  z-index: 1000;   /* Asegura que la imagen esté por encima de otros elementos */
		  display: none;   /* Oculta el botón por defecto */
		}

		#scroll-to-top-btn img {
		  width: 50px;     /* Define el tamaño de la imagen */
		  height: 50px;
		  border-radius: 50%; /* Opcional: para hacer la imagen circular */
		  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		}

		.main-content {
        flex: 1;
    }
    
    .custom-footer {
        background-color: #2C3E50;
        color: white;
        padding: 40px 0;
        width: 100%;
    }
    
    .footer-heading {
        font-weight: 600;
        margin-bottom: 20px;
        font-size: 1.2rem;
        position: relative;
        padding-bottom: 10px;
    }
    
    .footer-heading:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 2px;
        background-color: #18BC9C;
    }
    
    .footer-links a {
        color: #ECF0F1;
        text-decoration: none;
        display: block;
        margin-bottom: 10px;
        transition: all 0.3s ease;
    }
    
    .footer-links a:hover {
        color: #18BC9C;
        padding-left: 5px;
    }
    
    .contact-info p {
        margin-bottom: 15px;
        display: flex;
        align-items: flex-start;
    }
    
    .contact-info i {
        margin-right: 10px;
        margin-top: 5px;
        color: #9AE7E9;
    }
    
    .social-icons a {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
        color: white;
        margin-right: 10px;
        transition: all 0.3s ease;
    }
    
    .social-icons a:hover {
        background-color: #18BC9C;
        transform: translateY(-3px);
    }
    
    .copyright {
        background-color: rgba(0, 0, 0, 0.2);
        padding: 15px 0;
        text-align: center;
        margin-top: 30px;
        width: 100%;
    }

	
    .img-prod {
      width:100%; 
      max-width:250px; 
      max-height:250px;
    }
    .img-prod:hover {
        cursor: pointer;
    }
    
    .btn-outline {
      color: #b5b5b5;
      background-color: #ffffff;
      border-color: #b5b5b5;
      font-weight: bold;
      border-radius: 5px;
    }
    .manita {
      cursor: pointer;
    }