/* Responsive */
@media only screen and (max-width: 1199px) {
    .header-additional {
        justify-content: space-between;
        border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
        margin-top: 5px;
        padding-top: 5px;
    }

    .header-additional .user-profile,
    .header-login {
        margin: 0;
        padding: 0.5rem 0;
        color: var(--primary-color);
    }
}

/* For screens up to 768px */
@media only screen and (max-width: 768px) {
    :root {
        --space: 60px;
    }

    /* Navbar and Flex */
    .left-nav {
        flex-grow: 1;
    }

    /* Contact Form */
    .contact-form {
        margin-top: 30px;
    }

    /* Footer */
    footer {
        text-align: center;
    }

    /* Search Form */
    #ajax-search-form {
        max-width: 175px;
        transition: max-width 0.7s ease;
        flex-grow: 1;
    }

    #ajax-search-form:focus-within {
        max-width: 100%;
    }

    .search-results-container {
        left: 5px !important;
        width: calc(100% - 10px) !important;
        top: calc(100% + 5px) !important;
    }

    /* Dark Mode Toggle */
    #dark-mode-toggle {
        padding: 0.5rem 0;
        margin-right: 15px;
    }

    /* Margin Adjustment */
    .mb-lg {
        margin: auto !important;
        margin-bottom: 20px !important;
    }

    .masonry-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    /* Footer Widgets */
    .footer-widgets h6 {
        margin-top: 30px;
    }

    .stepper {
        flex-direction: column;
    }
}

/* For screens up to 390px */
@media only screen and (max-width: 390px) {

    /* Search Form */
    #ajax-search-form {
        max-width: 120px;
    }

    .left-nav {
        width: calc(100% - 55px);
    }
}

/* For screens 768px and above */
@media only screen and (min-width: 768px) {

    /* Admin Bar Adjustments */
    body.admin-bar header {
        top: 32px;
    }

    body.admin-bar .sticky {
        top: calc(68px + 32px);
    }

    /* Search Form */
    #ajax-search-form {
        width: 238px;
        transition: width 0.7s ease;
        position: relative;
    }

    #ajax-search-form:focus-within {
        width: 272px;
    }
}