/*==========================================================
 Newbies Money AI Lab
 Version : 0.1.0 - Foundation
 File    : responsive.css
 Purpose : Responsive Design
==========================================================*/


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

@media (max-width:992px){

    .hero-grid{

        grid-template-columns:1fr;

        gap:50px;

        text-align:center;

    }

    .hero-content{

        align-items:center;

    }

    .hero p{

        max-width:700px;

    }

    .main-nav{

        display:none;

    }
    .mission-grid{
     grid-template-columns:repeat(2,1fr);

}


}


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

@media (max-width:768px){

    .site-header .container{

        min-height:72px;
        justify-content:center;
    }

    .site-header .btn{
       display:none;
    }

    .logo{

        font-size:1.3rem;
         text-align:center;
    }

    .hero{
        min-height:auto;

        padding-top:60px;
    }

    .hero-buttons{
        flex-direction:column;

        width:100%;
    }
.hero-value-card{
        margin-top:24px;
        width:100%;
        max-width:100%;
        margin-inline:auto;
    }
    .hero-buttons .btn{
        width:100%;
    }

    h1{
        font-size:2.6rem;
    }

    h2{
        font-size:2rem;
    }

    .card-body{

        padding:22px;
    }

    .studio-header h2{
        font-size:35px;
    }

    .studio-card{
        padding:28px;
    }

    .builder-header h2{
        font-size:35px;
    }

    .builder-box{
        padding:28px 22px;
    }
    .builder-context{

    flex-direction:column;

    align-items:flex-start;
    }
    .prompt-builder{
        padding-left:20px;
        padding-right:20px;
    }

    .projects-section{
        padding:60px 20px;
    }

    .dashboard-stats{
        padding:0 20px;
        gap:18px;
        justify-content:center;
    }

    .stat-card{
        padding:25px 15px;
    }
    #projectPickerList{

        flex-direction:column;

    }

    #projectPickerList .btn{

        width:100%;

        justify-content:center;

    }
    .strategy-meta{

        grid-template-columns:1fr;

    }

    .strategy-card{

        padding:24px;

    }
    /*================================================
 HERO MOBILE v1.7
================================================*/

.hero-section{

    padding:
    60px 24px;

}


.hero-wrapper{

    grid-template-columns:1fr;

}


.hero-content h1{

    font-size:clamp(
        2.8rem,
        12vw,
        4rem
    );

    line-height:1;

}

.hero-content p{
    font-size:.95rem;
    line-height:1.7;
}

.hero-actions{
    flex-direction:column;
    align-items:stretch;
}

.hero-btn{
    padding:
    16px 24px;
}

.hero-panel{
    margin-top:40px;
}
.mission-grid{

grid-template-columns:1fr;

}

.mission-card{

padding:var(--space-md);

}

}

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

@media (max-width:480px){

    .container{

        width:min(100% - 24px,var(--container));

    }

    h1{

        font-size:2.2rem;

    }

    .badge{

        font-size:.8rem;

    }

    .btn{

        padding:13px 20px;

    }

}