/*==================================================
PAD PRINTS & DESIGNS
RESPONSIVE.CSS
==================================================*/


/*==================================
LARGE LAPTOPS
==================================*/

@media (max-width:1200px){

    .container{

        width:min(94%,var(--container));

    }

}


/*==================================
TABLETS
==================================*/

@media (max-width:1024px){

    section{

        padding:90px 0;

    }

    .navigation{

        display:none;

    }

    .nav-actions{

        display:none;

    }

    .mobile-toggle{

        display:block;

    }

    .hero{

        min-height:700px;

    }

    .hero-content{

        max-width:100%;

    }

    .hero-content h1{

        font-size:4rem;

    }

    .trust-grid{

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

    }

    .services-grid{

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

    }

    .products-grid{

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

    }

    .portfolio-grid{

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

    }

    .portfolio-large,

    .portfolio-wide,

    .portfolio-tall{

        grid-column:span 1;

        grid-row:span 1;

        min-height:360px;

    }

    .feature-grid,

    .about-grid,

    .contact-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .feature-section.reverse .feature-grid{

        direction:ltr;

    }

    .comparison-grid{

        grid-template-columns:1fr;

    }

    .client-grid{

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

    }

    .footer-grid{

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

    }

}


/*==================================
MOBILE
==================================*/

@media (max-width:768px){

    section{

        padding:75px 0;

    }

    .navbar{

        height:78px;

    }

    .logo img{

        width:150px;

    }

    .hero{

        min-height:620px;

        text-align:center;

    }

    .hero-content{

        display:none;

    }

    .hero-content span{

        font-size:.85rem;

    }

    .hero-content h1{

        font-size:2.9rem;

    }

    .hero-content p{

        font-size:.98rem;

    }

    .hero-buttons{

        justify-content:center;

    }

    .section-header{

        margin-bottom:50px;

    }

    .section-header h2{

        font-size:2.2rem;

    }

    .services-grid,

    .products-grid,

    .portfolio-grid,

    .trust-grid,

    .client-grid{

        grid-template-columns:1fr;

    }

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

    .hero-content{
        padding:0 10px;
    }

    .hero-content h1{
        font-size:2.4rem;
        line-height:1.15;
        word-break:break-word;
    }

    .hero-content p{
        font-size:.95rem;
    }


    .portfolio-item{

        min-height:280px;

    }

    .comparison-card{

        grid-template-columns:1fr;

    }

    .comparison-image img{

        aspect-ratio:16/10;

    }

    .feature-content h2{

        font-size:2.2rem;

    }

    .cta-box{

        padding:60px 30px;

    }

    .cta-box h2{

        font-size:2.2rem;

    }

    .contact-map iframe{

        min-height:360px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .footer{

        text-align:center;

    }

}


/*==================================
SMALL MOBILE
==================================*/

@media (max-width:480px){

    .container{

        width:92%;

    }

    .hero{

        min-height:560px;

    }

    .hero-content h1{

        font-size:2rem;

        line-height:1.15;

    }

    .hero-content p{

        font-size:.92rem;

    }

    .btn{

        width:100%;

        padding:15px 24px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .service-body{

        padding:24px;

    }

    .product-overlay{

        padding:22px;

    }

    .portfolio-overlay{

        padding:22px;

    }

    .feature-content h2{

        font-size:2rem;

    }

    .feature-list{

        gap:14px;

    }

    .contact-item{

        align-items:flex-start;

    }

    .contact-item i{

        width:50px;

        height:50px;

        font-size:1rem;

    }

    .cta-box{

        border-radius:20px;

        padding:50px 24px;

    }

}

/*==================================
FLOATING MESSENGER
==================================*/

@media (max-width:768px){

    .pad-floating-chat{

        right:15px;
        bottom:85px;

    }

    .pad-floating-chat__button{

        width:55px;
        height:55px;

    }

    .pad-floating-chat__button img{

        width:32px;
        height:32px;

    }

}