/* Responsive CSS for max-width 720px and 480px */
@media (max-width: 720px) {

    .hazardous-header {
        height: 50vh;
        padding: 20px;
        margin-top: 30px;
    }
    
    .hazardous-header h1 {
        font-size: 2rem;
    }
    
    .hazardous-header p {
        font-size: 1.2rem;
    }
    
    .hazardous-section {
        padding: 15px 20px;
    }
    
    .hazardous-description h2 {
        font-size: 1.5rem;
    }
    
    .hazardous-description p {
        font-size: 1rem;
    }
    
    .challenges-benefits {
        flex-direction: column;
        gap: 15px;
    }
    
    .challenges-section, .benefits-section {
        flex: 1;
    }
    
    .side-content {
        padding: 15px;
    }
}