/* Mobile Header Styles */
@media (max-width: 768px) {
    .header {
        padding-top: 80px;
        min-height: auto;
        padding-bottom: 40px;
    }

    .header-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
        padding: 0 20px;
    }

    .header-text h1 {
        font-size: clamp(2rem, 8vw, 3rem);
        margin-bottom: 10px;
        white-space: normal;
        border: none;
        width: 100%;
        animation: none;
    }

    .header-text .profession {
        font-size: clamp(1.2rem, 4vw, 1.8rem);
        margin-bottom: 20px;
    }

    .cta-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .cta-button {
        width: 100%;
        max-width: 250px;
        justify-content: center;
        height: 45px;
    }

    .header-social-icons {
        justify-content: center;
        gap: 15px;
    }

    .header-social-icons a {
        width: 45px;
        height: 45px;
    }

    .header-image {
        max-width: 280px;
        margin: 0 auto;
        order: -1;
    }

    .header-image img {
        width: 100%;
        height: auto;
        border-radius: 15px;
    }

    /* Mobile Animation Overrides */
    .header-text h1,
    .header-text .profession,
    .cta-container,
    .header-image {
        opacity: 1;
        transform: none;
        animation: mobileHeaderFade 0.8s ease-out forwards;
    }
}

/* Mobile-specific animations */
@keyframes mobileHeaderFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile-specific hover states */
@media (hover: none) {
    .header-text h1:hover,
    .header-text .profession:hover {
        transform: none;
        text-shadow: none;
    }

    .cta-button:hover {
        transform: none;
        background: #1dbf73;
        color: #fff;
    }

    .header-social-icons a:hover {
        transform: none;
        background: #1dbf73;
    }
}