body { 
    background-color: #f8f9fa; font-family: 'Poppins', sans-serif; } 
    .logo { max-height: 120px; } 
    
    .dial { width: 110px; height: 110px; border-radius: 50%; border: 6px solid #28a745; 
    
         display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.3rem; margin: 0 auto; background-color: #d4edda; color: #155724; cursor: pointer; transition: all 0.3s ease-in-out; 
        
    } 
    
    .dial.off { border-color: #dc3545; background-color: #f8d7da; color: #721c24; } 
    
    .dial.on { animation: glow 1.5s infinite alternate; } @keyframes glow { from { box-shadow: 0 0 5px #28a745, 0 0 10px #28a745; } 
    
    to { box-shadow: 0 0 25px #28a745, 0 0 40px #28a745; } } footer { background-color: #212529; color: #ccc; padding: 40px 20px; margin-top: 40px; } 
    
    footer a { color: #17a2b8; text-decoration: none; } footer a:hover { text-decoration: underline; } footer .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    
    gap: 20px; text-align: center; } canvas { background: #fff; border-radius: 8px; padding: 8px; } 

    footer img {
  max-width: 100px;     /* or 120px if you want slightly bigger */
  height: auto;
  display: block;
  margin: 0 auto 10px;
  object-fit: contain;
}