/* ==========================================================
   TrueVitaHub Hero Responsive
========================================================== */

/* ---------- Large Laptop ---------- */

@media (max-width:1200px){

    .tvh-hero-grid{
        gap:50px;
    }

    .tvh-title{
        font-size:56px;
    }

}

/* ---------- Tablet ---------- */

@media (max-width:1024px){

    .tvh-hero{
        padding:80px 0;
    }

    .tvh-hero-grid{
        grid-template-columns:1fr;
        gap:70px;
        text-align:center;
    }

    .tvh-description{
        margin:0 auto 40px;
    }

    .tvh-search-form{
        max-width:700px;
        margin:0 auto 40px;
    }

    .tvh-hero-buttons{
        justify-content:center;
    }

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

    .tvh-hero-visual{
        min-height:550px;
        margin:auto;
        max-width:700px;
    }

}

/* ---------- Mobile ---------- */

@media (max-width:768px){

    .tvh-hero{

        padding:60px 0;

    }

    .tvh-title{

        font-size:40px;

    }

    .tvh-description{

        font-size:17px;

    }

    .tvh-search-form{

        flex-direction:column;

        border-radius:18px;

    }

    .tvh-search-form input{

        width:100%;

        padding:18px;

    }

    .tvh-search-form button{

        width:100%;

        border-radius:0 0 18px 18px;

    }

    .tvh-hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .tvh-btn-primary,
    .tvh-btn-secondary{

        width:100%;
        max-width:320px;

    }

    .tvh-stats{

        grid-template-columns:1fr 1fr;

        gap:25px;

    }

}

/* ---------- Small Mobile ---------- */

@media (max-width:480px){

    .tvh-title{

        font-size:34px;

    }

    .tvh-description{

        font-size:16px;

    }

    .tvh-badge{

        font-size:12px;

    }

    .tvh-stat h3{

        font-size:28px;

    }

    .tvh-stat span{

        font-size:13px;

    }

    .tvh-card{

        width:100%;

        position:relative;

        left:auto;
        right:auto;
        top:auto;
        bottom:auto;

        margin-bottom:20px;

    }

    .card-1,
    .card-2,
    .card-3{

        position:relative;

    }

    .tvh-hero-visual{

        min-height:auto;

    }

}