/* =====================================================
   FALYS WEBSITE - RESPONSIVE DESIGN
   ===================================================== */



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


@media (max-width: 900px) {


    .navbar {

        width:92%;

    }



    .nav-links {

        gap:20px;

    }



    .hero {

        padding-top:60px;

    }



    .hero h1 {

        font-size:3.5rem;

    }




    .dashboard-body {


        grid-template-columns:

        repeat(2,1fr);


    }




    .feature-grid {


        grid-template-columns:

        1fr;


    }




    .section-title h2 {


        font-size:2.4rem;


    }



}







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


@media (max-width:600px) {



    .navbar {


        flex-direction:column;


        gap:25px;


    }




    .nav-links {


        flex-wrap:wrap;


        justify-content:center;


        gap:18px;


        font-size:.9rem;


    }




    .hero {


        min-height:auto;


        padding:

        50px 20px;


    }




    .hero h1 {


        font-size:

        2.7rem;


    }




    .hero-description {


        font-size:1rem;


    }





    .hero-buttons {


        flex-direction:column;


        width:100%;


    }




    .btn {


        width:100%;


    }






    .dashboard-preview {


        margin-top:50px;


    }




    .dashboard-body {


        grid-template-columns:

        1fr;


        padding:20px;


    }




    .stat-card h3 {


        font-size:1.7rem;


    }





    .section {


        margin:

        80px auto;


    }





    .section-title h2 {


        font-size:2rem;


    }






    .feature-card {


        padding:25px;


    }





    .flow-box {


        width:

        90%;


    }




    .detection-box {


        padding:35px 20px;


    }




    .pipeline {


        flex-direction:column;


    }




    .pipeline div {


        width:100%;


    }




    .cta h2 {


        font-size:2rem;


    }





    footer {


        flex-direction:column;


        gap:30px;


        text-align:center;


    }



}







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


@media (max-width:380px) {



    .hero h1 {


        font-size:2.3rem;


    }




    .logo {


        font-size:1.1rem;


    }


}