/* =========================================================
   TABLET CSS - 561px až 980px
========================================================= */

@media (max-width: 768px) {
.footer-links {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .footer-social {
        width: 100%;
    }

    .footer-bottom {
        margin-top: 28px;
    }

    .footer-bottom img {
        width: 140px;
    }
}

@media (max-width: 900px) {
.demand-form-layout {
        grid-template-columns: 1fr;
    }

    .demand-form-head {
        position: relative;
        top: auto;
    }
}

@media (max-width: 980px) {
.hero-title {
        font-size: 46px;
        width: 100%;
        max-width: 560px;
    }

    .site-header {
        height: 82px;
        padding: 0 18px;
    }

    .logo img {
        width: 155px;
    }

    .nav-toggle {
        display: block;
    }

    .main-nav {
        position: absolute;
        top: 82px;
        left: 0;
        right: 0;
        background: #fff;
        display: none;
        flex-direction: column;
        gap: 0;
        padding: 12px 24px;
        box-shadow: 0 12px 25px rgba(0, 0, 0, .12);
    }

    .main-nav.open {
        display: flex;
    }

    .main-nav a {
        padding: 15px 0;
    }

    .nav-cta {
        width: 100%;
        text-align: center;
    }

    .hero {
        height: auto;
        min-height: 0;
        padding: 70px 0 30px;
    }

    .hero-bg {
        background:
            linear-gradient(
                90deg,
                rgba(7, 8, 9, .96) 0%,
                rgba(7, 8, 9, .82) 55%,
                rgba(7, 8, 9, .45) 100%
            ),
            url('../img/hero_bg.png') right center / auto 100% no-repeat;
    }

    .hero-grid {
        height: auto;
        grid-template-columns: 1fr;
    }

    .hero-visual {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        height: auto;
        margin-top: 24px;
    }

    .hero-visual img {
        position: relative;
        right: auto;
        bottom: auto;
        display: block;
        width: min(100%, 680px);
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    h2 {
        font-size: 36px;
    }

    .service-grid,
    .machine-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-grid,
    .cta-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .why article {
        border-left: 0;
        padding-left: 0;
    }

    .footer nav {
        flex-wrap: wrap;
    }

    .products-dark {
        padding-bottom: 60px;
    }

    .products-slider {
         min-height: 255px;
        overflow: hidden;
        margin-bottom: 28px;
    }

    .product-card {
        flex-basis: 150px;
        min-height: 195px;
    }

    .product-card img {
        width: 125px;
        height: 110px;
        object-fit: contain;
    }

    .products-dark .btn-outline {
        position: relative;
        z-index: 2;
        margin-top: 24px;
    }
}

@media (max-width: 900px) {
.about-company-grid {
        grid-template-columns: 1fr;
    }
}