:root {
    --primary-blue: #0d6efd;
    --dark-blue: #0a2540;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    color: ghostwhite;
    background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url('/images/bg-construction-3.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Navbar */
.navbar {
    background-color: var(--dark-blue) !important;
}

/* Buttons */
.btn-primary {
    background-color: var(--primary-blue);
    border: none;
    transition: all 0.3s ease;
}

    .btn-primary:hover {
        background-color: #0b5ed7;
        transform: translateY(-1px);
    }

/* Cards */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    }

/* Footer */
footer {
    background-color: var(--dark-blue);
}

/* Layout */
main {
    flex: 1;
}

.main-bg {
    /*background: linear-gradient(rgba(10,37,64,0), rgba(10,37,64,0)), url('/images/bg.jpg') no-repeat center center fixed;*/
    background-color : ghostwhite;
    background-size: cover;
}

.view_Space {
    height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .view_Space main {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        scroll-behavior: smooth;
    }