/* =====================================================
   FIXXX - RESPONSIVE DESIGN
   responsive.css
===================================================== */



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


@media (max-width: 1100px) {


    .hero-grid {

        grid-template-columns:
        1fr;


        gap:
        60px;


        text-align:center;

    }



    .hero-content p {

        margin-left:auto;
        margin-right:auto;

    }



    .hero-actions {

        justify-content:center;

    }



    .hero-product {

        max-width:
        750px;


        margin:auto;

    }



    .services-grid {

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

    }



    .stats-grid {

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

    }



    .why-grid {

        grid-template-columns:
        1fr;


    }



    .why-content {

        text-align:center;

    }



    .benefits {

        max-width:
        500px;


        margin:
        35px auto 0;

    }



    .tech-grid {

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

    }



    .reference-grid {

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

    }



    .contact-box {

        grid-template-columns:
        1fr;

    }


}






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


@media (max-width: 850px) {



    .navigation {


        height:auto;


        padding:
        20px 0;


    }




    .menu {


        gap:
        20px;


        flex-wrap:
        wrap;


        justify-content:center;


    }



    .nav-button {


        display:none;


    }



    .hero {


        padding-top:
        150px;


    }



    h1 {


        letter-spacing:
        -2px;


    }




    .dashboard {


        min-height:
        320px;


    }




    .dashboard-sidebar {


        width:
        55px;


    }



    .dashboard-content {


        padding:
        25px;


    }




    .about-card {


        padding:
        35px;


    }




    .services-grid {


        grid-template-columns:
        1fr;


    }




    .timeline-list::before {


        left:
        25px;


    }




    .timeline-item {


        gap:
        25px;


    }




}








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


@media (max-width: 600px) {



    .container {


        width:
        92%;


    }




    /* HEADER */


    .navigation {


        flex-direction:
        column;


        gap:
        20px;


    }




    .logo img {


        width:
        150px;


    }





    .menu {


        width:
        100%;


        font-size:
        .9rem;


        gap:
        15px;


    }






    /* HERO */


    .hero {


        min-height:
        auto;


        padding-bottom:
        80px;


    }



    .badge {


        font-size:
        .75rem;


    }




    h1 {


        font-size:
        2.8rem;


        line-height:
        1.1;


    }



    .hero-content p {


        font-size:
        1rem;


    }





    .hero-actions {


        flex-direction:
        column;


        width:
        100%;


    }




    .button {


        width:
        100%;


    }






    /* DASHBOARD */


    .glass-window {


        padding:
        15px;


    }



    .dashboard {


        flex-direction:
        column;


    }




    .dashboard-sidebar {


        width:
        100%;


        display:flex;


        gap:
        10px;


        padding:
        15px;


    }




    .sidebar-item {


        flex:1;


        margin:
        0;


    }




    .dashboard-cards {


        grid-template-columns:
        1fr;


    }




    .chart {


        height:
        70px;


    }







    /* STATS */


    .stats-grid {


        grid-template-columns:
        1fr;


    }



    .stat strong {


        font-size:
        2.5rem;


    }







    /* SECTIONS */


    section {


        padding:
        80px 0;


    }



    .section-heading {


        margin-bottom:
        45px;


    }



    .section-heading h2 {


        font-size:
        2rem;


    }






    /* ABOUT */


    .about-card {


        padding:
        25px;


    }




    .about-card p {


        font-size:
        1rem;


    }






    /* TECHNOLOGY */


    .tech-grid {


        grid-template-columns:
        1fr;


    }



    .technology-window {


        padding:
        20px;


    }







    /* TIMELINE */


    .timeline-item {


        flex-direction:
        column;


        margin-left:
        20px;


    }




    .timeline-list::before {


        display:none;


    }




    .timeline-number {


        width:
        55px;


        height:
        55px;


        min-width:
        55px;


    }







    /* REFERENCES */


    .reference-grid {


        grid-template-columns:
        1fr;


    }







    /* FAQ */


    .faq-item button {


        padding:
        20px;


        font-size:
        1rem;


    }







    /* CONTACT */


    .contact-box {


        padding:
        30px 20px;


    }




    .contact-box h2 {


        font-size:
        2rem;


    }




}








/* =====================
   SMALL PHONES
===================== */


@media (max-width: 380px) {



    h1 {


        font-size:
        2.4rem;


    }



    .logo {


        font-size:
        1.5rem;


    }



    .menu {


        font-size:
        .8rem;


    }



    .hero-product {


        transform:
        scale(.95);


    }



}