/* --- Responsive Styles for Mobile --- */
@media (max-width: 768px) {
    
    /* General Body & Layout */
    body {
        font-size: 14px;
    }

    .container {
        padding: 0 1rem;
    }

    h2.section-title {
        font-size: 1.5rem;
    }

    /* Header & Navigation */
    header {
        flex-direction: column;
        padding: 1rem;
    }

    header h1 {
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    nav ul li {
        margin: 0.5rem 0;
        width: 100%;
        text-align: center;
    }

    nav a {
        display: block;
        padding: 10px;
    }

    /* Hero Section */
    .hero-video {
        height: 50vh;
    }
    .hero-video-content h2 {
        font-size: 2rem;
    }
    .hero-video-content p {
        font-size: 1rem;
    }

    /* Grids & Flex Layouts */
    .product-grid,
    .tech-grid,
    .archive-grid {
        grid-template-columns: 1fr;
    }

    .about-section,
    .product-detail-container,
    .support-container {
        flex-direction: column;
    }
    
    .trust-points {
        flex-direction: column;
        gap: 2rem;
    }
    
    /* Specific Sections */
    .archive-controls {
        flex-direction: column;
    }

    .filter-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 10px;
    }

    .filter-buttons button {
        width: 100%;
    }

    .search-bar {
        width: 100%;
    }
    .search-bar input {
        width: 100%;
        box-sizing: border-box; /* Ensures padding doesn't add to width */
    }

    .floating-btn {
        bottom: 15px;
        right: 15px;
        padding: 12px 20px;
        font-size: 0.9rem;
    }
}