body { background-color: #f8f9fa; }
.quote-card {
    cursor: pointer;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(20px);
}
.quote-card.visible {
    opacity: 1;
    transform: translateY(0);
}
.card { padding: 15px; border-radius: 10px; }
.card:hover {
    transform: translateY(-5px);
    opacity: 0.9;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.navbar-nav .nav-link {margin-right: 20px; }
.navbar-nav .nav-link:hover { color: white; }
.scroll-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #343a40;
    color: white;
    padding: 15px;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    font-size: 24px;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
.scroll-top:hover {
    background-color: #555;
    color: #fff;
    transform: scale(1.1);
}

body.dark-mode { background-color: #121212; color: white; }
body.dark-mode header, body.dark-mode footer { background-color: #1f1f1f; }
body.dark-mode .navbar-light .navbar-nav .nav-link { color: white; }
body.dark-mode .scroll-top { background-color: #1f1f1f; color: #fff; }
body.dark-mode .scroll-top:hover { background-color: #333; color: #fff; }

.bg-teal { background-color: #20c997 !important; }
.bg-orange { background-color: #fd7e14 !important; }
.bg-pink { background-color: #d63384 !important; }
.bg-indigo { background-color: #6610f2 !important; }
.bg-lime { background-color: #84cc16 !important; }
.bg-cyan { background-color: #17a2b8 !important; }
.bg-brown { background-color: #795548 !important; }
.bg-gold { background-color: #ffd700 !important; }
.bg-maroon { background-color: #800000 !important; }