/* ===========================================
   ITFix s.r.o.
   mobile.css
===========================================*/


/* ===========================================
   NOTEBOOKY
=========================================== */

@media (max-width:1200px){

    .hero h1{
        font-size:48px;
    }

    section{
        padding:90px 6%;
    }

    nav{
        padding:0 6%;
    }

}


/* ===========================================
   TABLETY
=========================================== */

@media (max-width:992px){

    nav{
        height:75px;
    }

    nav ul{
        gap:20px;
    }

    .hero{
        text-align:center;
        justify-content:center;
    }

    .hero-text{
        max-width:100%;
    }

    .buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

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

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

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

}


/* ===========================================
   MOBIL
=========================================== */

@media (max-width:768px){

    nav{
        height:75px;
        padding:0 6%;

        display:flex;
        justify-content:space-between;
        align-items:center;

        flex-wrap:wrap;
    }


    /* HAMBURGER */

    .hamburger{
        display:block;
        cursor:pointer;
    }


    /* MENU */

    nav #menu{
        position:absolute;

        top:75px;
        left:0;

        width:100%;

        display:flex;

        flex-direction:column;
        align-items:center;

        gap:0;

        max-height:0;
        overflow:hidden;

        margin:0;
        padding:0;

        background:#10679d;

        backdrop-filter:blur(10px);

        border-radius:0 0 15px 15px;

        box-shadow:0 15px 30px rgba(0,0,0,.25);

        transition:
            max-height .4s ease,
            padding .4s ease;
    }


    /* OTEVŘENÉ MENU */

    nav #menu.open{
        max-height:500px;
        padding:12px 0;
    }


    /* POLOŽKY MENU */

    nav #menu li{
        display:block;

        width:100%;

        margin:0;
        padding:0;

        text-align:center;
    }


    /* ODKAZY */

    nav #menu li a{
        display:block;

        width:100%;

        padding:15px 20px;

        color:#fff;

        font-weight:500;

        text-align:center;
    }


    nav #menu li a:hover{
        background:rgba(255,255,255,.12);
        color:#fff;
    }


    /* HERO */

    .hero{
        text-align:center;
        justify-content:center;
    }

    .hero h1{
        font-size:36px;
    }

    .hero p{
        font-size:17px;
    }


    /* TLAČÍTKA */

    .buttons{
        justify-content:center;
        flex-wrap:wrap;
    }


    /* SEKCE */

    section{
        padding:80px 25px;
    }


    /* SLUŽBY */

    .cards{
        grid-template-columns:1fr;
    }

    .services{
        grid-template-columns:1fr;
    }


    /* VÝHODY */

    .features{
        grid-template-columns:1fr;
    }


    /* GALERIE */

    .gallery{
        grid-template-columns:1fr;
    }


    /* O SPOLEČNOSTI */

    .about{
        grid-template-columns:1fr;
    }

}


/* ===========================================
   MALÉ TELEFONY
=========================================== */

@media (max-width:480px){

    body{
        font-size:15px;
    }

    .hero{
        padding-top:210px;
    }

    .hero h1{
        font-size:28px;
    }

    .hero p{
        font-size:16px;
    }

    section{
        padding:70px 20px;
    }

    section h2{
        font-size:28px;
    }

    .card{
        padding:25px;
    }

    .service-card{
        padding:30px 20px;
    }

    .features div{
        padding:20px;
    }

    footer{
        padding:50px 20px;
    }

    footer img{
        width:140px;
    }

}


/* ===========================================
   DESKTOP
   769px A VÍCE
=========================================== */

@media (min-width:769px){

    .hamburger{
        display:none !important;
    }

    nav #menu{
        display:flex !important;

        position:static !important;

        flex-direction:row !important;
        align-items:center !important;

        width:auto !important;

        max-height:none !important;
        overflow:visible !important;

        margin:0 !important;
        padding:0 !important;

        gap:40px;

        background:transparent !important;

        border-radius:0 !important;
        box-shadow:none !important;
    }

    nav #menu li{
        display:block !important;

        width:auto !important;

        margin:0;
        padding:0;
    }

    nav #menu li a{
        display:block !important;

        width:auto !important;

        padding:0;

        color:#fff !important;

        font-weight:500;
    }

}


/* ===========================================
   VELKÉ MONITORY
=========================================== */

@media (min-width:1600px){

    .hero{
        max-width:1600px;
        margin:auto;
    }

    section{
        max-width:1600px;
        margin:auto;
    }

}

/* ===========================================
   DESKTOP NAVIGACE - FINÁLNÍ POJISTKA
=========================================== */

@media (min-width:769px){

    nav{
        flex-wrap:nowrap !important;
    }

    nav .hamburger{
        display:none !important;
    }

    nav #menu{
        display:flex !important;
        visibility:visible !important;
        opacity:1 !important;

        position:static !important;

        flex-direction:row !important;
        align-items:center !important;

        width:auto !important;
        height:auto !important;

        max-height:none !important;
        overflow:visible !important;

        margin:0 !important;
        padding:0 !important;

        gap:40px;

        background:transparent !important;

        transform:none !important;
        pointer-events:auto !important;
    }

    nav #menu li{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;

        width:auto !important;

        margin:0 !important;
        padding:0 !important;
    }

    nav #menu li a{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;

        width:auto !important;

        color:#fff !important;

        padding:10px 0 !important;

        pointer-events:auto !important;
    }
}