/* Common Button Styling */
button {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 1px;
    outline: none;
    color: white;
    display: inline-block;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Red Button */
.btn-red {
    background: linear-gradient(45deg, #ff4b5c, #d32f2f);
}
.btn-red:hover {
    background: linear-gradient(45deg, #d32f2f, #ff6b81);
    box-shadow: 0 5px 15px rgba(255, 75, 92, 0.5);
}

/* Orange Button */
.btn-orange {
    background: linear-gradient(45deg, #ff9800, #e65100);
}
.btn-orange:hover {
    background: linear-gradient(45deg, #2e7d32, #4caf50); /* Green Hover */
    box-shadow: 0 5px 15px rgba(46, 125, 50, 0.5);
}


/* Green Button */
.btn-green {
    background: linear-gradient(45deg, #28a745, #218838);
}
.btn-green:hover {
    background: linear-gradient(45deg, #218838, #34d058);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.5);
}

/* Blue Button */
.btn-blue {
    background: linear-gradient(45deg, #007bff, #0056b3);
}
.btn-blue:hover {
    background: linear-gradient(45deg, #0056b3, #00b4ff);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.5);
}

/* Yellow Button */
.btn-yellow {
    background: linear-gradient(45deg, #ffcc00, #e6b800);
    color: #333;
}
.btn-yellow:hover {
    background: linear-gradient(45deg, #e6b800, #ffd633);
    box-shadow: 0 5px 15px rgba(255, 204, 0, 0.5);
}

/* Purple Button */
.btn-purple {
    background: linear-gradient(45deg, #6f42c1, #563d7c);
}
.btn-purple:hover {
    background: linear-gradient(45deg, #563d7c, #8a63d2);
    box-shadow: 0 5px 15px rgba(111, 66, 193, 0.5);
}

/* Dark Button */
.btn-dark {
    background: linear-gradient(45deg, #343a40, #23272b);
}
.btn-dark:hover {
    background: linear-gradient(45deg, #23272b, #50575d);
    box-shadow: 0 5px 15px rgba(52, 58, 64, 0.5);
}

/* Light Button */
.btn-light {
    background: linear-gradient(45deg, #f8f9fa, #e2e6ea);
    color: #333;
}
.btn-light:hover {
    background: linear-gradient(45deg, #e2e6ea, #ffffff);
    box-shadow: 0 5px 15px rgba(248, 249, 250, 0.5);
}

.btn-blue-dark {
    background: linear-gradient(45deg, #3f6fad, #3d5d64e0);
    color: #ffffff;
    padding: 8px 8px;
    border-radius: 7px;
}
.btn-blue-dark:hover {
    background: linear-gradient(45deg, #ff9800, #e65100);
    box-shadow: 0 5px 15px rgba(248, 249, 250, 0.5);
}


/* other buttons set on nav bar */
.set-up-btn {
    position: absolute;
    top: 29px;
    right: 199px;
    border: none;
    cursor: pointer;
    border-radius: 7px;
    font-weight: bold;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    text-transform: capitalize;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    outline: none;
    padding: 7px;
}
/* Responsive */
@media (max-width: 768px) {
    button {
        font-size: 14px;
        padding: 10px 20px;
    }
}