/* ===================== Tablet & below (<=1024px) ===================== */
@media (max-width:1024px){
    :root{--side:5vw;}

    .main{
        grid-template-columns:1fr;
        grid-template-areas:
            "tag"
            "title"
            "para"
            "btn"
            "img"
            "boxes";
        padding-top:110px;
    }
    .main-pic_rightside{justify-self:center;max-width:420px;margin-top:20px;}
    .main-btn{justify-self:start;}

    .ourprinter,.improve,.about,.Contactus{
        grid-template-columns:1fr;
    }
    .ourprinter{grid-template-areas:"pic" "heading" "para" "link" "btn";}
    .improve{grid-template-areas:"heading" "pic" "text" "link" "btn";}
    .about{grid-template-areas:"pic" "heading" "tagline" "para" "link" "btn" "boxes";}
    .Contactus{grid-template-columns:1fr;}
    .contact-pic,.contact-h1_heading,.contact-p1,.contact-p2,.contact-p3,.contact-p4,.contact-link,.contact-btn{
        grid-column:1;
        grid-row:auto;
    }

    .ourprinter-pic,.improve-pic,.about-pic,.contact-pic{
        max-width:480px;margin:0 auto;justify-self:center;
    }
    .ourprinter-h1_heading,.ourptinter-paragraph,
    .improve-h1_heading,.pre-space,
    .about-h1_heading,.about-paragraph,
    .contact-h1_heading{max-width:100%;}

    .contact-p1,.contact-p2,.contact-p3,.contact-p4,.contact-link{max-width:100%;}
}

/* ===================== Mobile (<=768px) ===================== */
@media (max-width:768px){
    :root{--side:6vw;}

    header{height:76px;}
    .logo{width:56px;}
    ul{width:280px;padding:100px 30px 30px;}

    .main{padding-top:100px;padding-bottom:50px;}
    .mainh1-heading{font-size:clamp(28px,7vw,36px);}
    .main-btn,.ourprinter-btn,.improve-btn,.about-btn{width:100%;text-align:center;justify-self:stretch;}
    .main_container{margin-top:36px;}

    .OurWay,.team,.Testimonials{padding-top:60px;padding-bottom:60px;}

    /* Our way: give each year block a visible card so it doesn't read as one wall of text */
    .container2{grid-template-columns:1fr;gap:22px;text-align:center;}
    .container2-ourway_box1,.container2-ourway_box2,.container2-ourway_box3,.container2-ourway_box4{
        min-height:auto;
        background:rgba(255,255,255,.06);
        border-left:4px solid var(--accent);
        border-radius:16px;
        padding:28px 24px;
    }
    .container2 [class*="_circle"]{margin-left:auto;margin-right:auto;}
    .container2 p{margin-left:0 !important;}

    /* Team: one card per row, no cramped side-by-side squeeze */
    .team-container1,.team-container2{grid-template-columns:1fr;gap:24px;}
    .team-container1_box1,.team-container1_box2,.team-container2_box3,.team-container2_box4{
        grid-template-columns:90px 1fr;
    }
    .team-container1box1_pic,.team-container1box2_pic{width:80px;height:80px;}

    /* Testimonials: one card per row on mobile */
    .container1-testimonials,.container2-testimonials,.container3-testimonials{
        grid-template-columns:1fr;
        gap:26px;
        margin-top:30px;
    }
    .testimonial-bo1,.testimonial-bo2,.testimonial-bo3,.testimonial-bo4,.testimonial-bo5,.testimonial-bo6{
        text-align:center;
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .ourprinter,.improve,.about,.Contactus,.Bethefirst,.main,.OurWay,.team,.Testimonials,.footer{
        padding-left:var(--side);
        padding-right:var(--side);
    }

    .FORM{padding:36px 24px;}
    .form-btn{align-self:stretch;text-align:center;}

    .contact-btn{width:100%;text-align:center;justify-self:stretch;}

    .footer-paragraph,.footerlink{padding-left:0;}
}

/* ===================== Small mobile (<=480px) ===================== */
@media (max-width:480px){
    ul{width:100%;max-width:100%;}
    .mainh4-Top{letter-spacing:1px;}
    .main_container-box1,.main_container-box2,.main_container-box3,.main_container-box4{padding:32px 22px;}
    .team-container1_box1,.team-container1_box2,.team-container2_box3,.team-container2_box4{
        grid-template-columns:1fr;
        text-align:center;
    }
    .team-container1box1_pic,.team-container1box2_pic{
        grid-column:1;grid-row:auto;margin:0 auto;
    }
    .teamcontainer1-p1,.teamcontainer1b2-p1,.teamcontainer1-h4,.teamcontainer1b2-h4,.teamcontainer1-p2,.teamcontainer1b2-p2{
        grid-column:1;
    }
    .teambox1-social_icons,.teambox2-social_icons{justify-content:center;}
    .container1-testimonial_box1pic{width:80px;height:80px;border-width:6px;}
    .form-heading_h1{font-size:26px;}
    .form-paragraph{font-size:16px;}
}