@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        gap: 15px;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 10px;
    }

    .hero-section h2 {
        font-size: 32px;
    }

    .tips-content {
        flex-direction: column;
    }

    .footer-cols {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
}