assets/style.css

/* Core Styling */
body {
    margin: 0;
    background-color: #08090c;
    color: #e2e8f0;
    font-family: 'Inter', sans-serif;
}

/* 3D Header/Footer with Deep Gradients */
.custom-header {
    background: linear-gradient(90deg, #08090c 0%, #0d1a17 50%, #08090c 100%) !important;
    border-bottom: 2px solid rgba(0, 210, 255, 0.3) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(20px);
}

.custom-footer {
    background: linear-gradient(90deg, #08090c 0%, #10211d 50%, #08090c 100%) !important;
    border-top: 2px solid rgba(0, 210, 255, 0.3) !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.9) !important;
    padding: 2rem 0 !important;
}

/* Navigation Links Styling */
.nav-link-custom {
    color: #94a3b8 !important;
    font-size: 1.1rem;
    padding: 12px 20px !important;
    margin: 0 5px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.nav-link-custom.active {
    background: rgba(0, 210, 255, 0.1) !important;
    border: 1px solid rgba(0, 210, 255, 0.3) !important;
    color: #00d2ff !important;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.2);
}

/* Full-Width Content Container */
.content-container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding: 3rem 4% !important; /* Side breathing room */
    margin: 0 !important;
}

/* Dashboard Cards (3D Glassmorphism) */
.saas-card {
    background: rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(15px);
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
    padding: 25px;
    transition: transform 0.3s ease;
}

.saas-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 210, 255, 0.3) !important;
}