/*====================================================
                TABLET
=====================================================*/

@media (max-width: 1024px){


    .hero-container{

        grid-template-columns:1fr;

        text-align:center;

    }


    .hero-content{

        margin:auto;

    }


    .hero p{

        margin-left:auto;

        margin-right:auto;

    }


    .hero-buttons{

        justify-content:center;

    }


    .hero-stats{

        justify-content:center;

    }


    .hero-image{

        margin-top:50px;

    }


}



/*====================================================
                CELULAR
=====================================================*/


@media (max-width:768px){


    
    .menu{

        display:none;
    }


    .btn-header{
        display:none;
    }

    .hero{
         min-height:auto;
        padding-top:100px;
        padding-bottom:60px;
    }


    .hero h1{
         font-size:32px;
        line-height:1.15;
    }


    .hero p{    
         font-size:15px;
        line-height:1.6;
        max-width:330px;
        margin:20px auto 0;
    }


    .hero-buttons{
        flex-direction:column;
        width:100%;
    }

    .btn-primary,
    .btn-outline{

        width:100%;
        justify-content:center;
    }

  .container{

        width:100%;
        padding:0 20px;

    }

    .hero-container{
        display:flex;
        flex-direction:column;
    }

    .hero-image{
        order:2;
    }

    .hero-content{
        order:1;
    }

    .hero-stats{

        flex-direction:column;

        gap:25px;

    }



    .stat strong{

        font-size:30px;

    }



    .hero-image img{

        max-width:350px;

    }

   .logo img{
        width:130px;
    }

    /* esconder cards para não poluir */

    .floating-card{

        display:none;

    }



}



/*====================================================
                CELULAR PEQUENO
=====================================================*/

@media (max-width:480px){


    .hero h1{

        font-size:32px;

    }


    .hero-tag{

        font-size:12px;

    }


    .hero-image img{

        max-width:300px;

    }


}