@media (max-width:768px) {

    /* =================================================================================== */
    /* Header Section */
    /* =================================================================================== */

    .top-navbar-container {
        padding: .75rem 1rem;
    }

    .logo-container img {
        max-width: 90px;
    }

    .button-container a {
        font-size: .725rem;
        padding: .5rem 1.5rem;
    }

    .sub-bottom-navbar {
        display: block;
    }

    .bottom-navbar-container {
        position:relative;
    }

    .bottom-menu-toggle {
        display: block;
    }

    .sub-bottom-navbar{
        display: block;
        max-height: 0;
        overflow: hidden;
        opacity: .0;
        transform: translateY(-4px);
        padding: 0;
        transition: max-height .3s ease, opacity .2s ease, transform .2s ease, padding .2s ease;
    }

    .sub-bottom-navbar.is-open{
        padding: .5rem 0;
        max-height: 100vh;
        opacity: 1;
        transform: translateY(0);
        overflow: auto;
    }

    .sub-bottom-navbar a{
        margin: .5rem .75rem;
        padding: .5rem 1rem;
    }

    /* =================================================================================== */
    /* End of Header Section */
    /* =================================================================================== */

    /* =================================================================================== */
    /* Main Section */
    /* =================================================================================== */

    main {
        padding: 1rem;
    }

    .sub-title-main h3 {
        font-size: 1rem;
    }

    .grid-main-section {
        display: flex;
        flex-direction: column;
    }

    .pagination-main-post{ gap:.5rem; }
    .pagination-main-post .page-indicator{
        min-width:5.25rem;
        font-weight:700;
    }
    .pagination-main-post .page-btn{
        min-width:2rem; height:2rem; padding:0 .5rem;
    }

    .main-section-four {
        display: block;
    }

    .post-title-container a {
        margin: 0 auto;
    }

    .single-post-article {
        margin-bottom: 1.5rem;
    }
    
}

@media (prefers-reduced-motion:reduce){
    .sub-bottom-navbar {
        transition: none;
    }
}