/* --- Navbar (Gray Style) --- */
.navbar-gradient {
    background: linear-gradient(to right, #6c757d, #343a40); /* light gray → dark gray */
}

.navbar-gradient .nav-link {
    color: #f8f9fa !important;
    font-weight: 500;
    transition: color .3s ease-in-out;
}

.navbar-gradient .nav-link:hover {
    color: #ffc107 !important; /* subtle golden hover */
}

/* --- Logo Styling --- */
.navbar-brand img {
    height: 40px;
    margin-right: 8px;
}

.navbar-brand {
    font-weight: 600;
    color: #f8f9fa !important;
}

/* --- Navbar Toggler --- */
.navbar-toggler {
    border: none;
}

.navbar-toggler-icon {
    filter: invert(100%);
}

/* --- Card Styling (Gray Tones) --- */
.card {
    border: none;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: transform .3s ease, box-shadow .3s ease;
    border-left: 5px solid #6c757d; /* gray accent */
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,.15);
}

/* --- Primary Button (Dark Gray) --- */
.btn-primary {
    background: linear-gradient(135deg, #343a40, #6c757d);
    border: none;
    border-radius: 25px;
    font-weight: bold;
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #6c757d, #343a40);
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(0,0,0,.2);
}

/* --- Secondary Button (Light Gray) --- */
.btn-secondary {
    background: linear-gradient(135deg, #adb5bd, #6c757d);
    border: none;
    border-radius: 25px;
    font-weight: bold;
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #6c757d, #adb5bd);
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(0,0,0,.2);
}