/* ========================================= HARDWARE PROJECTS ========================================= */ 
#hardware-projects { 
  width: min(1200px, 90%); 
  margin: 0 auto;          
  padding-top: 10px;       
  padding-bottom: 40px;    
} 

.section-title { 
  text-align: center; 
  font-size: 2rem; 
  margin-bottom: 20px;     
} 

.hardware-grid { 
  display: grid; 
  grid-template-columns: repeat(2, minmax(280px, 1fr)); 
  gap: 40px;               
  align-items: stretch;    
} 

.hardware-card { 
  display: flex;            
  flex-direction: column;   
  overflow: hidden; 
  border-radius: 24px; 
  
  /* ===== FIXED: DARKER GLASS BACKGROUND ===== */
  background: rgba(30, 30, 30, 0.65);     /* Changed to a deep charcoal with higher opacity */
  border: 1px solid rgba(255, 255, 255, 0.08); /* Darkened the border line so it blends subtly */
  
  backdrop-filter: blur(15px); 
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; 
  min-height: 280px;       
} 

.hardware-card:hover { 
  transform: translateY(-8px); 
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); /* Made the hover shadow darker too */
  
  /* ===== FIXED: DARKER HOVER STATE ===== */
  background: rgba(45, 45, 45, 0.75);     /* Becomes slightly lighter but stays dark on hover */
} 

.hardware-image { 
  width: 100%;             
  height: 260px;           
  padding: 24px 24px 0 24px; 
  box-sizing: border-box;           
  overflow: hidden; 
  display: flex;           
  justify-content: center;
  align-items: center;
  background: transparent;          
  flex-shrink: 0;          
} 

.hardware-image img { 
  display: block; 
  width: auto;                      
  height: auto;                     
  max-width: 100%;                  
  max-height: 100%;                 
  object-fit: contain;     
  border-radius: 14px;              
} 

.hardware-info {
  padding: 25px;           
  width: 100%;
  box-sizing: border-box;
  display: flex;           
  flex-direction: column;  
  flex-grow: 1;            
} 

.hardware-info h3 { 
  margin: 0 0 8px;         
  font-size: 1.4rem; 
} 

.hardware-info p { 
  opacity: 0.7; 
  line-height: 1.5;        
  margin-bottom: 15px;     
} 

.hardware-button { 
  display: inline-block; 
  margin-top: auto;        
  text-decoration: none; 
  align-self: flex-start;  
} 

/* MOBILE */ 
@media (max-width: 700px) { 
  #hardware-projects { 
    width: 92%; 
    margin-top: 30px;      
  } 
  .hardware-grid { 
    grid-template-columns: 1fr; 
    gap: 15px;             
  } 
  
  .hardware-card {
    min-height: 380px;     
  } 
  
  .hardware-image { 
    height: 180px;         
    padding: 15px 15px 0 15px;      
  } 
}