/* =========================================
   ESAR DIGITAL
   Responsive Styles
   ========================================= */


/* ---------- Tablet ---------- */

@media (max-width: 991px) {

    :root {
        --section-padding: 80px;
    }

    .site-header__inner {
        min-height: 70px;
    }

    .site-footer__inner {
        flex-direction: column;
    }

}


/* ---------- Mobile ---------- */

@media (max-width: 767px) {

    :root {
        --section-padding: 60px;
    }


    .container {
        width: min(
            calc(100% - 30px),
            var(--container-width)
        );
    }


    /* ---------- Topbar ---------- */

    .topbar__inner {
        min-height: 30px;

        justify-content: center;
    }


    .topbar__message {
        display: none;
    }


    .topbar__contact {
        width: 100%;

        justify-content: center;

        gap: 18px;
    }


    .topbar__item {
        font-size: 11px;
    }


    /* ---------- Header ---------- */

    .site-header__inner {
        height: 64px;
    }


    .site-header__logo .custom-logo {
        width: 120px;
    }


    .site-navigation {
        display: none;
    }


    .site-header__cta {
        display: none;
    }

}