/* Desktop styles for Work With Me section */
@media screen and (min-width: 769px) {
    :root {
        --text-primary: #ffffff;
        --text-secondary: #00ffff;
        --accent-cyan: #00ffff;
        --title-gradient: linear-gradient(45deg, #00ffff 10%, #ffffff 30%, #00ffff 50%, #ffffff 70%, #00ffff 90%);
    }

    /* Style for the contact section */
    .contact {
        padding: 60px 0;
    }

    /* Style for the contact form */
    .contact-form {
        background: rgba(1, 17, 29, 0.9);
        border-radius: 12px;
        padding: 40px;
        border: 3px solid var(--accent-cyan);
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
    }

    .contact-form h2 {
        color: var(--accent-cyan);
        margin-bottom: 20px;
        font-size: 32px;
        font-weight: bold;
    }

    /* Combined contact form input/textarea styles */
    .contact-form input,
    .contact-form textarea {
        width: 80%;
        padding: 15px;
        margin: 10px 0;
        border: 2px solid var(--accent-cyan);
        border-radius: 8px;
        font-size: 18px;
        font-weight: 700;
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-primary);
    }

    .contact-form input:focus,
    .contact-form textarea:focus {
        border-color: var(--accent-cyan);
        background: rgba(255, 255, 255, 0.2);
        outline: none;
    }

    .contact-form button {
        background: var(--accent-cyan);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 15px 25px;
        cursor: pointer;
        font-size: 20px;
        font-weight: 700;
        margin-top: 15px;
        width: 80%;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .contact-form button:hover {
        background: linear-gradient(45deg, #008080, var(--accent-cyan));
    }

    /* Remove duplicate transform property */
    .contact-form button:active {
        transform: none;
    }

    /* Styles for the Work With Me section */
    .work-with-me {
        background: linear-gradient(to bottom, #0a192f, #112240);
        background-image: 
            radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.1) 4px, transparent 4px),
            radial-gradient(circle at 30% 10%, rgba(255, 255, 255, 0.1) 6px, transparent 6px),
            radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.1) 3px, transparent 3px),
            radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.1) 5px, transparent 5px),
            radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.1) 4px, transparent 4px),
            radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.1) 6px, transparent 6px),
            radial-gradient(circle at 40% 50%, rgba(255, 255, 255, 0.1) 3px, transparent 3px),
            radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.1) 5px, transparent 5px),
            radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.1) 4px, transparent 4px),
            radial-gradient(circle at 10% 70%, rgba(255, 255, 255, 0.1) 5px, transparent 5px),
            radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.1) 4px, transparent 4px),
            radial-gradient(circle at 50% 70%, rgba(255, 255, 255, 0.1) 6px, transparent 6px),
            radial-gradient(circle at 70% 90%, rgba(255, 255, 255, 0.1) 3px, transparent 3px),
            radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.1) 5px, transparent 4px);
        background-size: 200px 200px;
        color: var(--text-primary);
        text-align: center;
        padding: 60px 0;
        animation: floatBubbles 15s linear infinite, moveBubbles 10s linear infinite;
    }

    .work-with-me-title {
        font-size: 6rem;
        font-weight: 700;
    }
    
    .work-with-me p {
        font-size: 1.2em;
    }
}

/* Animations */
@keyframes floatBubbles {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 200px 200px;
    }
}

@keyframes moveBubbles {
    0% {
        background-position: 10% 10%, 30% 20%, 50% 10%, 70% 20%, 90% 10%, 20% 40%, 40% 50%, 60% 40%, 80% 50%, 10% 70%, 30% 80%, 50% 70%, 70% 90%, 90% 80%;
    }
    50% {
        background-position: 20% 20%, 40% 10%, 60% 30%, 80% 20%, 100% 10%, 30% 50%, 50% 60%, 70% 50%, 90% 60%, 20% 80%, 40% 90%, 60% 80%, 80% 100%, 100% 90%;
    }
    100% {
        background-position: 10% 10%, 30% 20%, 50% 10%, 70% 20%, 90% 10%, 20% 40%, 40% 50%, 60% 40%, 80% 50%, 10% 70%, 30% 80%, 50% 70%, 70% 90%, 90% 80%;
    }
}