/* Button Styles */
.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s;
    margin: 0 0.5rem 1rem; /* Added bottom margin for stacking */
    font-size: 16px;
    letter-spacing: 2%;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -0.5rem; /* Compensate for button margins */
}

.btn-primary {
    background-color: var(--livro-cyan);
    color: white;
}

.btn-primary:hover {
    background-color: #065a76;
}

.btn-secondary {
    background-color: #DD1C1A; /* Liver red color */
    color: white;
}

.btn-secondary:hover {
    background-color: #f02220; /* Slightly lighter liver red for hover */
}

.btn-tertiary {
    background-color: var(--livro-cerulean);
    color: white;
}

.btn-tertiary:hover {
    background-color: #065a76;
}

/* Responsive styles for buttons */
@media (max-width: 768px) {
    .btn {
        display: block;
        width: 100%;
        margin: 0.5rem 0;
    }
    
    .hero-buttons {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}