/* Styles for the HTML and body */
html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px; /* Margin bottom equal to the height of the footer */
    padding-top: 80px; /* Adjust this value according to the height of your fixed header */
}

/* Styles for the footer */
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px; /* Set the fixed height of the footer */
}

/* Extra padding for hero section on smaller screens */
@media (max-width: 991.98px) {
    .jumbotron {
        padding-top: 120px; /* Adjust this value according to the height of your fixed header on mobile devices */
    }
}

/* (previous CSS code) */

/* Padding for sections */
section {
    padding-bottom: 2rem;
}

/* Cyber-themed card styling */
.cyber-card {
    background-color: #222;
    color: #fff;
    border: none;
}

.cyber-card:hover {
    background-color: #333;
    text-decoration: none;
}

/* Cyber-themed icon styling */
.cyber-icon {
    font-size: 3rem;
    display: block;
    text-align: center;
    margin-bottom: 1rem;
}

.icon-shield::before {
    content: '\1F6E1'; /* Unicode shield character */
}

.icon-target::before {
    content: '\1F3AF'; /* Unicode target character */
}

.icon-cloud::before {
    content: '\2601'; /* Unicode cloud character */
}

/* Mobile responsiveness */
@media (max-width: 767.98px) {
    .cyber-card {
        margin-bottom: 1.5rem;
    }

    .cyber-icon {
        font-size: 2rem;
    }
}

.contact-us {
    background-color: #f0f0f0;
}