.gradient-title {
    font-size: 1rem;
    font-weight: bold;
    background: linear-gradient(90deg, #aaa, #ccc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.shadow-title {
    font-size: 3rem;
    color: #333;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

@keyframes color-change {
    0% { color: #ff7e5f; }
    50% { color: #feb47b; }
    100% { color: #ff7e5f; }
}

.animated-title {
    font-size: 1rem;
    font-weight: bold;
    animation: color-change 3s infinite;
}

.border-title {
    font-size: 3rem;
    font-weight: bold;
    color: #333;
    border: 4px solid transparent;
    padding: 10px;
    background: linear-gradient(90deg, #ff7e5f, #feb47b);
    background-clip: padding-box;
    position: relative;
    z-index: 1;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    from, to { border-color: transparent; }
    50% { border-color: black; }
}

.typewriter {
    font-size: 3rem;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid black;
    width: 0;
    animation: typing 3s steps(40, end), blink 0.5s step-end infinite;
}

.btn{
    color: #ccc; 
    font-weight: bold;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none;
}

.btn-custom {
    font-weight: bold;
    background-color: #333; /* Cor de fundo inicial */
    border: 1px solid #111; /* Borda inicial */
    color: #000; /* Cor do texto */
    outline: none; /* Remove o contorno inicial */
}

.btn-custom:hover {
    background-color: #bbb; /* Cor de fundo ao passar o mouse */
    border-color: #111;
    color: #000;
}

.btn-custom:focus {
    background-color: #333 !important;
    outline: none !important;
    box-shadow: none !important;
    border-color: #111 !important;
}

.btn-custom:active {
    background-color: #333; /* Cor igual à inicial */
    border-color: #111; /* Borda igual à inicial */
    color: #000; /* Cor do texto igual à inicial */
    outline: none; /* Remove o contorno azul padrão */
    box-shadow: none; /* Remove sombra de foco */
}

/* Responsividade */
@media (max-width: 600px){
.shadow-title {
    font-size: 2rem;
    color: #333;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.gradient-title {
    font-size: 0.5rem;
    font-weight: bold;
    background: linear-gradient(90deg, #aaa, #ccc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
}