/* =========================
   LARGE TABLETS (1024px)
========================= */

@media(max-width:1024px){

    h1{
        font-size:50px;
    }

    h2{
        font-size:38px;
    }

    .hero-grid,
    .about-grid{
        grid-template-columns:1fr;
        gap:60px;
    }

    .hero-left{
        text-align:center;
        order:2;
    }

    .hero-left p{
        margin:auto;
        margin-top:25px;
        margin-bottom:35px;
    }

    .hero-right{
        order:1;
    }

    .floating-products{
        height:500px;
        max-width:500px;
        margin:auto;
    }

    .floating-products img{
        width:140px;
    }

    .strip-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .signature-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .why-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .process-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }

}


/* =========================
   TABLETS (768px)
========================= */

@media(max-width:768px){

    .container{
        width:92%;
    }

    h1{
        font-size:40px;
        line-height:1.2;
    }

    h2{
        font-size:32px;
    }

    p{
        font-size:15px;
    }

    .navbar{
        padding:18px 0;
    }

    .nav-container{
        flex-direction:column;
        gap:20px;
    }

    .nav-links{
        flex-wrap:wrap;
        gap:18px;
        justify-content:center;
    }

    .logo img{
        width:145px;
    }

    .hero{
        padding:70px 0;
    }

    .hero-buttons{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:15px;
    }

    .secondary-btn{
        margin-left:0;
    }

    .primary-btn,
    .secondary-btn{
        width:230px;
        text-align:center;
    }

    /* floating product stack simplified */

    .floating-products{
        height:auto;
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:20px;
        position:static;
    }

    .floating-products img{
        position:static;
        width:100%;
        max-width:170px;
        margin:auto;
    }

    .about-section,
    .signature-products,
    .why-section,
    .export-section,
    .process-section,
    .cta-section{
        padding:75px 0;
    }

    .about-points{
        grid-template-columns:1fr;
    }

    .signature-grid{
        grid-template-columns:1fr;
    }

    .why-grid{
        grid-template-columns:1fr;
    }

    .process-grid{
        grid-template-columns:1fr;
    }

    .export-box{
        padding:55px 30px;
        border-radius:22px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    footer img{
        margin:auto;
        margin-bottom:20px;
    }

}


/* =========================
   MOBILE DEVICES (480px)
========================= */

@media(max-width:480px){

    h1{
        font-size:32px;
    }

    h2{
        font-size:26px;
    }

    h3{
        font-size:20px;
    }

    p{
        font-size:14px;
    }

    .nav-links{
        flex-direction:column;
        gap:12px;
    }

    .nav-btn{
        padding:12px 22px;
        font-size:14px;
    }

    .hero{
        padding:50px 0;
    }

    .quality-strip{
        padding:25px 0;
    }

    .strip-grid{
        grid-template-columns:1fr;
        gap:15px;
        font-size:14px;
    }

    .floating-products{
        grid-template-columns:1fr;
    }

    .floating-products img{
        max-width:180px;
    }

    .product-card{
        padding:20px;
    }

    .about-points div{
        padding:15px;
    }

    .why-grid div,
    .process-grid div{
        padding:25px;
    }

    .export-box{
        padding:40px 20px;
    }

    .cta-section{
        padding:60px 0;
    }

    footer{
        padding:50px 0;
    }

}