/*==================================================
RESPONSIVE STYLESHEET
N-Printing Platform
==================================================*/


/*==================================================
Large Devices (1200px and below)
==================================================*/

@media (max-width:1200px){

    .hero h1,
    .quote-hero h1,
    .services-hero h1,
    .portfolio-hero h1,
    .equipment-hero h1,
    .contact-hero h1,
    .industries-hero h1,
    .privacy-hero h1,
    .terms-hero h1{

        font-size:48px;

    }

}


/*==================================================
Laptops (992px and below)
==================================================*/

@media (max-width:991.98px){

    section{

        padding:70px 0;

    }

    .navbar{

        padding:12px 0;

    }

    .logo{

        height:60px;

    }

    .navbar-nav{

        margin-top:20px;

    }

    .navbar-nav .nav-link{

        margin:10px 0;

    }

    .hero,
    .quote-hero,
    .services-hero,
    .portfolio-hero,
    .equipment-hero,
    .contact-hero,
    .industries-hero,
    .privacy-hero,
    .terms-hero{

        text-align:center;

        padding:100px 0 80px;

    }

    .hero-image{

        margin-top:50px;

    }

    .section-title{

        font-size:36px;

    }

    .product-card img,
    .equipment-card img,
    .service-card img{

        height:220px;

    }

    .office-info{

        margin-top:40px;

    }

}


/*==================================================
Tablets (768px and below)
==================================================*/

@media (max-width:767.98px){

    .hero h1,
    .quote-hero h1,
    .services-hero h1,
    .portfolio-hero h1,
    .equipment-hero h1,
    .contact-hero h1,
    .industries-hero h1,
    .privacy-hero h1,
    .terms-hero h1{

        font-size:40px;

    }

    .section-title{

        font-size:32px;

    }

    .wizard-progress{

        flex-wrap:wrap;

        gap:20px;

    }

    .wizard-progress::before{

        display:none;

    }

    .wizard-step{

        flex:0 0 calc(50% - 10px);

    }

    .portfolio-grid{

        grid-template-columns:1fr;

    }

    .industry-grid{

        grid-template-columns:1fr;

    }

    .contact-form,
    .office-info,
    .privacy-card,
    .terms-card,
    .quote-card{

        padding:30px;

    }

}


/*==================================================
Mobile Devices (576px and below)
==================================================*/

@media (max-width:575.98px){

    section{

        padding:60px 0;

    }

    .hero h1,
    .quote-hero h1,
    .services-hero h1,
    .portfolio-hero h1,
    .equipment-hero h1,
    .contact-hero h1,
    .industries-hero h1,
    .privacy-hero h1,
    .terms-hero h1{

        font-size:32px;

    }

    .hero p{

        font-size:16px;

    }

    .section-title{

        font-size:28px;

    }

    .hero-buttons{

        display:flex;

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

        margin-right:0;

    }

    .btn{

        width:100%;

        padding:14px 20px;

    }

    .service-card,
    .equipment-card,
    .feature-box,
    .testimonial-card,
    .contact-box{

        padding:25px;

    }

    .product-card img,
    .equipment-card img,
    .service-card img,
    .portfolio-item img{

        height:200px;

    }

    .wizard-actions{

        flex-direction:column;

        gap:15px;

    }

    .wizard-actions .btn{

        width:100%;

    }

    .error-code{

        font-size:6rem;

    }

    .error-title{

        font-size:2rem;

    }

    .quick-links ul{

        flex-direction:column;

        align-items:center;

    }

    .contact-social{

        justify-content:center;

    }

    .whatsapp-btn{

        width:55px;

        height:55px;

        font-size:26px;

    }

    #backToTop{

        width:45px;

        height:45px;

        bottom:90px;

    }

}


/*==================================================
Extra Small Devices (400px and below)
==================================================*/

@media (max-width:399.98px){

    .hero h1,
    .quote-hero h1,
    .services-hero h1,
    .portfolio-hero h1,
    .equipment-hero h1,
    .contact-hero h1,
    .industries-hero h1,
    .privacy-hero h1,
    .terms-hero h1{

        font-size:28px;

    }

    .section-title{

        font-size:24px;

    }

    .hero-tag{

        font-size:12px;

        padding:6px 14px;

    }

    .wizard-step{

        flex:0 0 100%;

    }

    .wizard-step-title{

        font-size:.8rem;

    }

}