body {
    min-height: 100vh; /* Use viewport height instead of percentage */
    color: #ffffff;
}

body,html{
    font-family: 'Noto Sans', sans-serif;
}

.pricing-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0px;
}

.pricing-card {
    border: 2px solid white;
    width: 300px;
    background-color: #333;
    background-color: #3A3245;
    background-color: #3A4661;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    overflow: hidden;
    margin: 10px;
}

.pricing-card h2 {
    background-color: #262626;
    background-color: #5B5561;
    background-color: #3A4661;
    color: #fff;
    padding: 20px;
    margin: 0;
    text-align: center;
}

.pricing-card .price {
    color: #FF6F59;
    color: #285AC7;
    color: #ccc;
    text-align: center;
    padding: 20px;
    margin: 0;
}

.pricing-card ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.pricing-card ul li {
    border-bottom: 1px solid #444;
    padding: 15px;
    color: #ccc;
}

.pricing-card ul li .check {
    color: #FF6F59;
}

#subscribeBtn,
.pricing-card button {
    width: 100%;
    padding: 20px;
    border: none;
    background-color: #FF6F59;
    background-color: #285AC7;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

#subscribeBtn:hover,
.pricing-card button:hover {
    background-color: #2b6cb0;
}

body, html {
    height: 100%; /* Ensure the full height is used */
    margin: 0;
    display: flex;
    flex-direction: column;
}


.pricing-container {
    flex-grow: 1; /* Allows the pricing container to fill the available space */
    display: flex;
    justify-content: center; /* Center horizontally */
    flex-wrap: wrap;
    align-items: center; /* Center vertically */
    padding: 20px;
    margin-top: -60px; /* Adjust this value to the height of your fixed header */
}

.pricing-card {
    background-color: #333;
    background-color: #3B5794;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    overflow: hidden;
    margin: 10px;
    /* Add transitions for smooth loading */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s forwards;
}

/* Rest of your styles... */

/* Animation to fade in and move up into place */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Adjust the main content area */
main {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Grow to take up all available space */
}

/* Use calc to adjust for the fixed header */
.pricing-container {
    height: calc(200%); /* Subtract the height of the fixed header */
    margin-top: 0; /* Remove the negative margin if using calc */
}

/* Existing styles... */

/* Ensure the announcement banner sticks to the bottom of the nav */
nav {
    grid-template-rows: auto 0px; /* Adjust 40px to match the height of your announcement banner */
}

/* Media query for small screens */
@media screen and (max-width: 768px) {
    .pricing-container {
        height: calc(125%);
        flex-direction: column; /* Stack cards vertically */
        align-items: center; /* Center cards horizontally */
        padding: 10px; /* Adjust padding for smaller screens */
    }

    .pricing-card {
        width: 100%; /* Make cards take full width */
        margin: 10px 0; /* Adjust margin for vertical stacking */
    }

    /* Adjust other elements as necessary for small screens */
}