body {
    padding-top: 56px; /* Adjust for fixed navbar */
}

/* Custom styles for navbar background to ensure logo visibility */
.navbar-dark.bg-dark {
    background-color: #2c3e50 !important; /* A slightly lighter dark grey */
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
}

.parallax {
    /* The image used */
    background-image: url('../images/cloud_computing.jpg');

    /* Set a specific height */
    min-height: 80vh; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.parallax::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay */
}


.card {
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: fadeIn 1s ease-out;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
}

.navbar.scrolled {
    background-color: rgba(33, 37, 41, 0.95) !important;
    transition: background-color 0.3s ease-in-out;
}

.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}