@media (max-width: 768px) {
    h1 {
        font-size: 1.5em;
    }

    h2 {
        font-size: 1.2em;
    }

    .container {
        padding: 10px;
    }
}
@media (max-width: 1024px) {
    .bg-header {
        height: 20rem; /* Adjust the height for tablets */
    }
}

@media (max-width: 768px) {
    .bg-header {
        height: 15rem; /* Adjust the height for smaller mobile screens */
    }
}

@media (max-width: 426px) {
    .bg-header {
        height: 9rem; /* Further adjust the height for very small mobile screens */
    }
}

@media (max-width: 376px) {
    .bg-header {
        height: 8rem; /* Further adjust the height for very small mobile screens */
    }
}

@media (max-width: 321px) {
    .bg-header {
        height: 7rem; /* Further adjust the height for very small mobile screens */
    }
}