/* Fine-tuning on top of the fluid (clamp/flex/grid) system in style.css.
   The base styles already scale smoothly across sizes; these rules handle
   layout-order / spacing tweaks at specific breakpoints so everything
   stays perfectly centered and readable on every device. */

/* ---------- Tablets & small laptops ---------- */
@media (max-width: 992px){
    .main-container{
        justify-content: center;
        text-align: center;
    }
    .main-text{
        text-align: left;
        flex: 1 1 100%;
        max-width: 600px;
        margin-inline: auto;
    }
    .main-visual{
        flex: 1 1 100%;
        justify-content: center;
    }
    .about-container{
        justify-content: center;
    }
    .about-info{
        text-align: left;
        flex: 1 1 100%;
        max-width: 650px;
    }
    .about-boxes{
        flex: 1 1 100%;
        max-width: 500px;
        margin-inline: auto;
    }
    .about2-heading{
        text-align: center;
    }
}

/* ---------- Tablets (portrait) ---------- */
@media (max-width: 768px){
    ul{
        width: min(85vw, 300px);
    }
    .main-visual{
        gap: 1.5rem;
    }
    .main-features{
        align-items: flex-start;
    }
    .contact-container{
        text-align: left;
    }
    .contact-visual{
        order: -1;
        max-width: 260px;
        margin-inline: auto;
    }
    .contact-info{
        flex: 1 1 100%;
        margin-inline: auto;
    }
    .footer{
        text-align: center;
    }
}

/* ---------- Mobile phones ---------- */
@media (max-width: 560px){
    header{
        justify-content: flex-end;
    }
    ul{
        width: 82vw;
        padding-top: 5.5rem;
    }
    .main{
        padding-top: 2rem;
    }
    .main-visual{
        flex-direction: column;
    }
    .main-features{
        width: 100%;
    }
    .gol-item{
        justify-content: flex-start;
    }
    .about-boxes{
        max-width: 100%;
    }
    .box1,.box2,.box3,.box4,.box5,.box6,.box7{
        flex-wrap: wrap;
    }
    .maincontainer{
        gap: 1.4rem;
    }
    .about2-heading{
        text-align: center;
        font-size: clamp(1.6rem, 6vw, 2rem);
    }
    .containerabout2,.containerabout3{
        grid-template-columns: repeat(2, 1fr);
    }
    .free-container{
        text-align: left;
    }
    .footerp1,.footerp2{
        line-height: 1.6;
    }
}

/* ---------- Very small phones ---------- */
@media (max-width: 380px){
    ul{
        width: 90vw;
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
    .containerabout2,.containerabout3{
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
    }
    .about2b1pic1,.about2b1pic2,.about2b1pic3,.about2b1pic4,
    .about2b1pic5,.about2b1pic6,.about2b1pic7,.about2b1pic8{
        width: 120px;
        height: 120px;
    }
    .main-pic{
        width: 150px;
        height: 150px;
    }
}

/* ---------- NEW sections: tablets ---------- */
@media (max-width: 992px){
    .contact-container{
        justify-content: center;
    }
    .contact-form-wrap{
        flex: 1 1 100%;
        max-width: 600px;
        margin-inline: auto;
    }
}

/* ---------- NEW sections: tablets (portrait) ---------- */
@media (max-width: 768px){
    .portfolio-grid{
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    .testi-person{
        flex-direction: column;
        text-align: center;
    }
    .testi-name,.testi-role{
        text-align: center;
    }
    .stats-container{
        justify-content: center;
        gap: 2.5rem;
    }
}

/* ---------- NEW sections: mobile phones ---------- */
@media (max-width: 560px){
    .stats-container{
        flex-direction: column;
        gap: 2rem;
    }
    .portfolio-grid{
        grid-template-columns: 1fr;
    }
    .testi-controls{
        gap: 1rem;
    }
    .newsletter-form{
        flex-direction: column;
    }
    .newsletter-input,.newsletter-btn{
        width: 100%;
    }
    .faq-question{
        font-size: 0.95rem;
    }
}