/*==================================================
Responsive CSS
Theme : JB Theme
==================================================*/


/*======================================
1200px
======================================*/

@media (max-width:1200px){

    .container{

        width:min(100% - 32px,1100px);

    }

    .global-menu{

        gap:28px;

    }

    .section-heading__title{

        font-size:2.2rem;

    }

}


/*======================================
992px
Tablet
======================================*/

@media (max-width:992px){

    section{

        padding:80px 0;

    }

    .section-heading{

        margin-bottom:50px;

    }

    .section-heading__title{

        font-size:2rem;

    }

    .header-top{

        display:none;

    }

    .header-main .container{

        min-height:80px;

    }

    .global-nav{

        display:none;

    }

    .hamburger{

        display:flex;

    }

    .hero{

        min-height:85vh;

        padding:150px 0 80px;

    }

    .hero__title{

        font-size:3rem;

    }

    .hero__buttons{

        gap:15px;

    }

    .reason__grid{

        grid-template-columns:repeat(2,1fr);

    }

    .products__grid{

        grid-template-columns:repeat(2,1fr);

    }

    .makers__logos{

        grid-template-columns:repeat(4,1fr);

    }

    .makers__info{

        flex-direction:column;

        text-align:center;

        gap:25px;

    }

    .achievements__grid{

        grid-template-columns:repeat(2,1fr);

    }

    .about__wrapper{

        grid-template-columns:1fr;

        gap:50px;

    }

    .about__content{

        text-align:center;

    }

    .about__features{

        display:inline-block;

        text-align:left;

    }

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

        gap:40px;

    }

}


/*======================================
768px
Mobile
======================================*/

@media (max-width:768px){

    body{

        font-size:15px;

    }

    section{

        padding:70px 0;

    }

    .section-heading__title{

        font-size:1.8rem;

    }

    .section-heading__lead{

        font-size:.95rem;

    }

    .hero{

        min-height:100vh;

        padding:130px 0 70px;

    }

    .hero__content{

        text-align:center;

        margin:auto;

    }

    .hero__title{

        font-size:2.5rem;

        line-height:1.3;

    }

    .hero__text{

        font-size:1rem;

    }

    .hero__buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero .btn{

        width:100%;

        max-width:320px;

    }

    .reason__grid{

        grid-template-columns:1fr;

    }

    .products__grid{

        grid-template-columns:1fr;

    }

    .makers__logos{

        grid-template-columns:repeat(3,1fr);

        gap:16px;

    }

    .makers__item{

        min-height:90px;

        padding:15px;

    }

    .makers__count strong{

        font-size:3rem;

    }

    .achievements__grid{

        grid-template-columns:1fr;

    }

    .about__catch{

        font-size:1.8rem;

    }

    .about__content::before{

        display:none;

    }

    .news-card a{

        grid-template-columns:1fr;

        gap:18px;

        padding:22px;

    }

    .news-card__arrow{

        display:none;

    }

    .contact-cta{

        padding:90px 0;

    }

    .contact-cta__title{

        font-size:2rem;

    }

    .contact-cta__buttons{

        flex-direction:column;

        align-items:center;

    }

    .btn--tel,

    .btn--primary{

        width:100%;

        max-width:340px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-bottom .container{

        flex-direction:column;

        gap:20px;

    }

    .footer-bottom-menu{

        flex-wrap:wrap;

        justify-content:center;

    }

}


/*======================================
576px
Small Mobile
======================================*/

@media (max-width:576px){

    .container{

        width:min(100% - 24px,100%);

    }

    .logo img{

        max-height:48px;

    }

    .hero__title{

        font-size:2rem;

    }

    .hero__sub{

        font-size:.85rem;

    }

    .section-heading__en{

        font-size:.8rem;

    }

    .section-heading__title{

        font-size:1.6rem;

    }

    .reason-card{

        padding:30px 22px;

    }

    .product-card__body{

        padding:22px;

    }

    .achievement-card__body{

        padding:22px;

    }

    .makers__logos{

        grid-template-columns:repeat(2,1fr);

    }

    .makers__item img{

        max-width:100px;

    }

    .about__catch{

        font-size:1.5rem;

    }

    .contact-cta__title{

        font-size:1.6rem;

    }

    .contact-cta__text{

        font-size:.95rem;

    }

    .footer-top{

        padding:60px 0 40px;

    }

    .page-top{

        right:15px;

        bottom:15px;

        width:48px;

        height:48px;

    }

}


/*======================================
Hover Device
======================================*/

@media (hover:none){

    .btn:hover,

    .product-card:hover,

    .achievement-card:hover,

    .makers__item:hover,

    .news-card:hover{

        transform:none;

        box-shadow:none;

    }

}

@media (max-width:992px){

    .single-post__wrapper{

        grid-template-columns:1fr;

    }

    .sidebar{

        position:static;

        margin-top:50px;

    }

}

@media (max-width:768px){

    .post-navigation{

        flex-direction:column;

        text-align:center;

    }

    .post-navigation__prev,
    .post-navigation__next{

        text-align:center;

    }

}

@media (max-width:992px){

    .archive__wrapper{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .archive-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

.error404-number{

    font-size:5rem;

}

.error404-box h2{

    font-size:1.6rem;

}

.error-links__grid{

    grid-template-columns:1fr;

}

.error404-buttons{

    flex-direction:column;

    align-items:center;

}

.error404-buttons .btn{

    width:100%;

    max-width:320px;

}

}

@media (max-width:768px){

.page-hero__lead{

    font-size:.9rem;

}

.archive-empty h2{

    font-size:1.5rem;

}

}

@media (max-width:768px){

.search-field{

    height:54px;

    font-size:.95rem;

    padding:0 60px 0 20px;

}

.search-submit{

    width:42px;

    height:42px;

}

}

@media (max-width:768px){

.comment-body{

    flex-direction:column;

}

.comments-title{

    font-size:1.6rem;

}

.comment-form .submit{

    width:100%;

}

}