/* Ensure responsiveness for all elements */
* {
    max-width: 100%;
}

/* Responsive Banner */
@media (max-width: 1024px) {
    .banner-content {
        flex-direction: column; /* Stack image and text on smaller screens */
        text-align: center;
    }

    .banner-img {
        width: 100px; /* Reduce size on smaller screens */
    }

    .Hcolor {
        font-size: 2.5em; /* Adjust heading size */
    }
}

/* Responsive Three Columns */
@media (max-width: 1024px) {
    .three-columns {
        flex-wrap: wrap; /* Allows columns to wrap into multiple lines */
        justify-content: center;
    }

    .three-columns .column {
        flex: 1 1 45%; /* Adjusts column width to 45% */
        min-width: 300px; /* Prevents columns from becoming too small */
    }
}

@media (max-width: 768px) {
    .three-columns {
        flex-direction: column; /* Stack columns vertically */
    }

    .three-columns .column {
        width: 100%; /* Full width for smaller screens */
    }
}

/* Responsive Navigation */
@media (max-width: 768px) {
    .top-nav {
        text-align: center;
    }

    .main-nav ul {
        flex-direction: column;
        text-align: center;
    }

    .main-nav ul li {
        margin: 10px 0;
    }
}

/* Responsive Footer */
@media (max-width: 768px) {
    footer {
        font-size: 1.2em;
        padding: 10px;
    }
}