/* Mobile-first responsive design */

/* Base mobile styles */
@media (max-width: 768px) {
    .navbar { /* Adjust navbar for mobile if needed, but the current .header styles are already quite responsive */
        width: 95%; /* Make it slightly wider on smaller screens to use available space */
        padding: 15px 20px; /* Slightly less padding */
    }

    .hero {
        padding: 5.5rem var(--spacing-md) 3rem; /* Adjusted padding-top for mobile navbar height */
        min-height: 100vh;
    }

    .hero-content {
        padding: 0 var(--spacing-sm);
    }

    .hero-title {
        font-size: clamp(2rem, 7vw, 3rem);
        line-height: 1.2; /* Added for mobile readability */
    }

    .hero-subtitle {
        font-size: 1rem;
        padding: 0 var(--spacing-md);
    }

    .cta-button,
    .about-cta {
        width: 100%;
        max-width: 280px;
        margin: var(--spacing-sm) auto;
        display: block;
    }

    .mobile-menu-toggle {
        width: 40px; /* Keep reasonable size */
        height: 40px;
    }

    .logo-text { /* Specific mobile adjustment for logo */
        font-size: 1.6rem; /* Adjust for mobile */
    }

    .logo-sub { /* Specific mobile adjustment for logo */
        font-size: 0.75rem;
        color: white; /* Changed to white */
    }

    .mobile-menu-toggle span {
        width: 24px;
        height: 2px; /* Revert to 2px for smaller toggle */
        background: white; /* Changed to white */
    }

    .mobile-menu {
        /* top: 83px; /* Adjusted to new mobile navbar height */ */
        /* max-height: calc(100vh - 83px); /* Adjusted */ */
    }

    .mobile-menu.active {
        transform: translateY(0);
    }

    .products,
    .industries,
    .about, /* About section on index.html */
    .contact {
        padding: 3rem var(--spacing-md);
    }

    .section-title {
        font-size: 2rem;
    }

    .product-grid,
    .industry-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .stats-grid { /* Stats grid on index.html about section */
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-label { /* Adjusted for mobile */
        font-size: 0.75rem;
    }

    .contact-info {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .contact-item {
        justify-content: flex-start;
        padding: 0 var(--spacing-md);
    }

    /* Mobile menu specific fix */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    /* Animation performance fix */
    .floating-element {
        animation: none !important;
    }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .industry-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .values-grid { /* On about.html */
        grid-template-columns: repeat(2, 1fr); /* Adjust for tablet */
    }
}

/* Desktop styles */
@media (min-width: 1025px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .industry-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Re-adding the about-specific grid layouts for clarity for about.html */
    .about.html .story-grid {
        grid-template-columns: 2fr 1fr;
    }
    .about.html .ceo-wrapper {
        grid-template-columns: 1fr 2fr;
    }
    .about.html .values-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .about.html .stats-section {
        grid-template-columns: repeat(3, 1fr);
    }
    .about.html .ceo-achievements {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Ultra-small screens (480px and below) */
@media (max-width: 480px) {
    .navbar {
        width: 98%; /* Even wider on ultra-small screens */
        padding: 12px 15px; /* Even less padding */
    }

    .logo-text {
        font-size: 1.4rem; /* Adjust for ultra-small */
    }

    .logo-sub {
        font-size: 0.65rem; /* Slightly smaller */
        color: white; /* Changed to white */
    }

    .mobile-menu-toggle {
        width: 36px; /* Smaller toggle button */
        height: 36px;
    }

    .mobile-menu-toggle span {
        width: 20px; /* Slightly shorter lines within the toggle */
        height: 2px;
        background: white; /* Changed to white */
    }

    .mobile-menu {
        /* top: 69px; /* Further adjustment for ultra-small screens */ */
        /* max-height: calc(100vh - 69px); /* Adjusted */ */
    }

    .hero {
        padding: 4.5rem var(--spacing-sm) 2rem; /* Adjusted padding-top for ultra-small navbar height */
    }

    .hero-title { /* Further adjustment for ultra-small */
        font-size: 1.75rem;
    }

    .hero-subtitle { /* Further adjustment for ultra-small */
        font-size: 0.875rem;
    }

    .product-card,
    .industry-card {
        padding: var(--spacing-lg);
    }

    .floating-element {
        animation: none !important;
    }
}

/* Touch-friendly improvements */
@media (hover: none) {
    .product-card:hover,
    .industry-card:hover,
    .stat-item:hover, /* From index.html about stats */
    .value-card:hover, /* From about.html */
    .achievement-card:hover { /* From about.html */
        transform: none;
    }

    .cta-button:active,
    .about-cta:active {
        transform: translateY(1px);
    }
}