@media (min-width: 1024px) {
        #projects .grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }
  .glow-text {
            text-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
        }
        .skill-pill {
            transition: all 0.2s ease;
        }
        .skill-pill:hover {
            transform: scale(1.05);
            background-color: rgba(59, 130, 246, 0.2);
        }
        .typewriter {
            overflow: hidden;
            border-right: .15em solid #3b82f6;
            white-space: nowrap;
            animation: 
                typing 3.5s steps(40, end),
                blink-caret .75s step-end infinite;
        }
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: #3b82f6; }
        }
        .language-dropdown {
            position: relative;
            display: inline-block;
        }
        .language-dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            background-color: #1a1a1a;
            min-width: 120px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            border-radius: 0.5rem;
            overflow: hidden;
        }
        .language-dropdown-content a {
            color: #e5e7eb;
            padding: 8px 12px;
            text-decoration: none;
            display: block;
            font-size: 0.875rem;
            transition: all 0.2s;
        }
        .language-dropdown-content a:hover {
            background-color: #3a3a3a;
            color: #3b82f6;
        }
        .language-dropdown:hover .language-dropdown-content {
            display: block;
        }
        .language-flag {
            width: 20px;
            height: 15px;
            margin-right: 8px;
            object-fit: cover;
            border-radius: 2px;
        }
        .tech-logo-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 80px;
        }
        .tech-logo {
            width: 40px; /* Aumentado de 32px para 40px */
            height: 40px; /* Aumentado de 32px para 40px */
            object-fit: contain;
        }
        .tech-name {
            font-size: 0.75rem;
            text-align: center;
            line-height: 1;
        }
        .learning-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            background-color: #3b82f6;
            color: white;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            font-weight: bold;
        }
        .techOrb {
            position: relative;
            width: 100%;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 50px 0;
        }

        #techOrbit {
            position: relative;
            width: 300px;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #imgtech {
            position: absolute;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            z-index: 2;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            object-fit: cover;
        }

        .tech-icon {
            position: absolute;
            width: 60px;
            height: 60px;
            padding: 5px;
            background: white;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        @keyframes orbit {
            0% {
                transform: rotate(0deg) translateX(120px) rotate(0deg);
            }
            100% {
                transform: rotate(360deg) translateX(120px) rotate(-360deg);
            }
        } 
 .glow-text {
            text-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
        }
        .skill-pill {
            transition: all 0.2s ease;
        }
        .skill-pill:hover {
            transform: scale(1.05);
            background-color: rgba(59, 130, 246, 0.2);
        }
        .typewriter {
            overflow: hidden;
            border-right: .15em solid #3b82f6;
            white-space: nowrap;
            animation: 
                typing 3.5s steps(40, end),
                blink-caret .75s step-end infinite;
        }
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: #3b82f6; }
        }
        .language-dropdown {
            position: relative;
            display: inline-block;
        }
        .language-dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            background-color: #1a1a1a;
            min-width: 120px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            border-radius: 0.5rem;
            overflow: hidden;
        }
        .language-dropdown-content a {
            color: #e5e7eb;
            padding: 8px 12px;
            text-decoration: none;
            display: block;
            font-size: 0.875rem;
            transition: all 0.2s;
        }
        .language-dropdown-content a:hover {
            background-color: #3a3a3a;
            color: #3b82f6;
        }
        .language-dropdown:hover .language-dropdown-content {
            display: block;
        }
        .language-flag {
            width: 20px;
            height: 15px;
            margin-right: 8px;
            object-fit: cover;
            border-radius: 2px;
        }
        .tech-logo-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 80px;
        }
        .tech-logo {
            width: 40px; /* Aumentado de 32px para 40px */
            height: 40px; /* Aumentado de 32px para 40px */
            object-fit: contain;
        }
        .tech-name {
            font-size: 0.75rem;
            text-align: center;
            line-height: 1;
        }
        .learning-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            background-color: #3b82f6;
            color: white;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            font-weight: bold;
        }

        /* ...cole aqui todo o conteúdo do seu <style> do index.html... */

        /* Exemplo: */
        body {
          background-color: #0a0a0a;
          color: #e5e7eb;
          font-family: 'Inter', sans-serif;
        }
        /* ...restante dos estilos... */


/* Classes para o tema escuro */
:root {
    --bg-dark: #0a0a0a;
    --text-light: #e5e7eb;
}

/* Tema claro (padrão) */
body {
    background-color: #ffffff;
    color: #1a1a1a;
    transition: background-color 0.3s, color 0.3s;
}

/* Tema escuro */
body.dark {
    background-color: var(--bg-dark);
    color: var(--text-light);
}

/* Ajustes específicos para o tema escuro */
.dark .bg-dark-800 {
    background-color: #1a1a1a;
}

.dark .bg-dark-700 {
    background-color: #2a2a2a;
}

.dark .text-gray-400 {
    color: #9ca3af;
}

/* Transições suaves */
.transition {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}