/* =====================================
   TABLET
===================================== */

@media (max-width:1024px){

    .services-grid,
    .stats,
    .brand-grid,
    .contact-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .main-nav ul{
        gap:30px;
    }

    .main-nav li{
        min-width:180px;
    }

}

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

@media (max-width:768px){

    .top-bar{
        flex-direction:column;
        gap:20px;
        padding:20px;
    }

    .logo img{
        height:70px;
    }

    .social-icons{
        gap:15px;
    }

    .social-icons a{
        width:45px;
        height:45px;
    }

    .social-icons img{
        width:28px;
        height:28px;
    }

    /* MENU */

    .main-nav{
        padding:15px;
    }

    .main-nav ul{
        flex-direction:column;
        gap:15px;
    }

    .main-nav li{
        width:100%;
        min-width:auto;
    }

    .main-nav a{
        height:110px;
        font-size:20px;
    }

    .main-nav a img{
        width:45px;
        height:45px;
        margin-bottom:10px;
    }

    /* HERO */

    .hero{
        height:550px;
    }

    .hero-content{
        padding:25px;
        text-align:center;
    }

    .hero h1{
        font-size:42px;
        line-height:1.2;
    }

    .hero p{
        font-size:18px;
        max-width:100%;
    }

    .hero-location{
        font-size:18px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
        max-width:280px;
        text-align:center;
    }

    /* SEKCE */

    section{
        padding:60px 20px;
    }

    .section-title h2{
        font-size:34px;
    }

    .section-title p{
        font-size:18px;
    }

    /* GRIDY */

    .services-grid,
    .stats,
    .brand-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    /* KARTY */

    .service-card,
    .stat,
    .contact-card{
        padding:25px;
    }

    .service-card h3{
        font-size:24px;
    }

    .service-card p{
        font-size:17px;
    }

    .stat h3{
        font-size:42px;
    }

    .stat p{
        font-size:18px;
    }

    /* O NÁS */

    .about-text h2{
        font-size:34px;
    }

    .about-text p{
        font-size:18px;
    }

    /* FOOTER */

    .footer-container{
        grid-template-columns:1fr;
        gap:40px;
        padding:40px 25px;
        text-align:center;
    }

    .footer-column h3{
        font-size:26px;
        margin-bottom:15px;
    }

    .footer-column p,
    .footer-column li,
    .footer-column a{
        font-size:18px;
        line-height:1.8;
        
    }
a{
    text-decoration:none;
    color:inherit;
}
    .footer-column ul{
        padding:0;
        text-decoration:none;
    }

    .footer-bottom p{
        font-size:14px;
        
    }

    /* ŠIPKY */

    .slider-btn{
        width:45px;
        height:45px;
        font-size:28px;
    }

}

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

@media (max-width:480px){

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

    .section-title h2{
        font-size:28px;
    }

    .service-card img{
        width:80px;
        height:80px;
    }

}



























/* ===================================== OSTATN9 FORM,SERVIS,PRODEJ
   TABLET
===================================== */

@media (max-width:1024px){

    .contact-container,
    .products-grid,
    .steps-grid,
    .brands-grid{
        grid-template-columns:1fr 1fr;
    }

    .page-hero-content,
    .hero-content{
        padding-left:60px;
        padding-right:60px;
    }

}

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

@media (max-width:768px){

    /* MENU */

    .main-nav ul{
        flex-direction:column;
        gap:20px;
        padding:20px;
    }

    .main-nav li{
        width:100%;
        min-width:auto;
    }

    .main-nav a{
        height:130px;
        font-size:20px;
    }

    .main-nav a img{
        width:50px;
        height:50px;
    }

    /* TOP BAR */

    .top-bar{
        flex-direction:column;
        gap:20px;
        padding:20px;
    }

    .logo img{
        max-width:220px;
    }

    /* HERO */

    .page-hero,
    .contact-hero,
    .hero{
        height:auto;
        min-height:500px;
    }

    .page-hero-content,
    .hero-content,
    .contact-hero-content{

        padding:40px 25px;
        text-align:center;
    }

    .page-hero h1,
    .contact-hero h1,
    .hero h1{
        font-size:42px;
        line-height:1.2;
    }

    .page-hero p,
    .contact-hero p,
    .hero p{
        font-size:18px;
        max-width:100%;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .btn-primary,
    .btn-secondary,
    .hero-btn{
        width:100%;
        max-width:300px;
    }

    /* SEKCE */

    section{
        padding:60px 20px;
    }

    .section-title h2{
        font-size:34px;
    }

    .section-title p{
        font-size:18px;
    }

    /* GRIDY */

    .products-grid,
    .steps-grid,
    .brands-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .product-card,
    .step-box,
    .brand-box{
        padding:30px 20px;
    }

    .product-card h3{
        font-size:24px;
    }

    .product-card p{
        font-size:17px;
    }

    /* KONTAKT */

    .contact-section{
        padding:60px 15px;
    }

    .contact-container{
        display:flex;
        flex-direction:column;
        gap:30px;
    }

    .contact-info,
    .contact-form{
        padding:25px;
    }

    .contact-info h2,
    .contact-form h2{
        font-size:30px;
    }

    .contact-form input,
    .contact-form textarea{
        font-size:16px;
        padding:15px;
    }

    .contact-form button{
        width:100%;
    }

    .contact-map{
        display:none;
    }

    /* CTA */

    .cta-section{
        padding:70px 20px;
    }

    .cta-section h2{
        font-size:32px;
    }

    .cta-section p{
        font-size:18px;
    }

    .cta-btn{
        width:100%;
        max-width:300px;
    }

    /* FOOTER */

    .footer-container{
        display:flex;
        flex-direction:column;
        gap:40px;

        text-align:center;

        padding:40px 20px;
    }

    .footer-column{
        width:100%;
    }

    .footer-column h3{
        font-size:28px;
        margin-bottom:15px;
    }

    .footer-column p,
    .footer-column li,
    .footer-column a{
        font-size:18px;
        line-height:1.8;
    }

    .footer-column ul{
        list-style:none;
        padding:0;
        margin:0;
    }

    .footer-bottom{
        padding:20px;
    }

    .footer-bottom p{
        font-size:14px;
    }

    /* ŠIPKY SLIDERU */

    .slider-btn{
        width:45px;
        height:45px;
        font-size:28px;
    }

}

/* =====================================
   MALÉ MOBILY
===================================== */

@media (max-width:480px){

    .page-hero h1,
    .contact-hero h1,
    .hero h1{
        font-size:34px;
    }

    .section-title h2{
        font-size:28px;
    }

    .product-card img{
        width:100px;
        height:100px;
    }

    .product-card h3{
        font-size:22px;
    }

    .step-box span{
        font-size:42px;
    }

}/* =====================================
   CTA MOBIL
===================================== */

@media(max-width:768px){

    .cta-section{

        padding:70px 20px;
    }

    .cta-section h2{

        font-size:34px;

        line-height:1.3;
    }

    .cta-section p{

        font-size:18px;

        margin-bottom:30px;
    }

    .cta-btn{

        width:100%;
        max-width:300px;

        height:60px;

        font-size:18px;
    }
}

@media(max-width:480px){

    .cta-section h2{

        font-size:28px;
    }

    .cta-section p{

        font-size:16px;
    }
}