@media (max-width: 822px) {

     header {
      flex-direction: column;
      padding-bottom: 10px;
     }
    .dropbtn {
        font-size: 14px;
        padding: 0 3px;
    }

    .dropdown {
        margin: 0 5px;
    }
    
    .image-left {
    width: 90%;
    float: none;
    display: block;
    margin: 20px auto;
    }

    .image-right {
    width: 90%;
    float: none;
    display: block;
    margin: 20px auto;
    }


    .menu5-dropdown .dropdown-content {
        right: 0; /* Align dropdown with the right edge of its button */
        left: auto; /* Override the default left alignment */
    }

    .menu4-dropdown .dropdown-content {
        right: 0; /* Align dropdown with the right edge of its button */
        left: auto; /* Override the default left alignment */
    }
    .content, .content p {
        font-size: 20px !important;
    }


    .menu5-dropdown .dropbtn,
    .menu3-dropdown .dropbtn,
    .menu4-dropdown .dropbtn,
    .menu2-dropdown .dropbtn,
    .menu1-dropdown .dropbtn {
        padding: 0 5px; /* Increase horizontal space */
    }
}