/* Logo size adjustments for iPhones and small devices */
@media (min-width: 320px) and (max-width: 480px) {
    .group svg {
        max-width: 600px !important;
        height: 60px !important;
    }

    .group svg text {
        font-size: 36px !important;
    }
}

@media (max-width: 375px) {
    .group svg {
        max-width: 450px !important;
        height: 48px !important;
    }

    .group svg text {
        font-size: 32px !important;
    }
}

@media (max-width: 320px) {
    .group svg {
        max-width: 380px !important;
        height: 40px !important;
    }

    .group svg text {
        font-size: 28px !important;
    }
}

/* Responsive styles moved from main.css for better organization. Use Tailwind utility classes in your HTML for most responsiveness. */

@media (max-width: 900px) {
    main {
        padding: 0.5rem;
    }

    .logo-title {
        flex-direction: column;
        gap: 0.5rem;
    }

    .company-info h1 {
        font-size: 1.5rem;
    }

    .home-hero {
        min-height: 40vh;
    }
}

@media (max-width: 600px) {
    header {
        padding: 0.5rem 0.5rem;
    }

    .nav-tabs {
        flex-direction: column;
        gap: 0.5rem;
    }

    .logo {
        height: 40px;
        width: 40px;
    }

    main {
        margin: 1rem 0;
    }

    .hero-content h2 {
        font-size: 1.5rem;
    }
}