/* ========================= */
/* Laptop */
/* ========================= */

@media(max-width:1400px){

    .david-container{

        grid-template-columns:320px 1fr 330px;

        gap:50px;

    }

    .voice-circle{

        width:360px;
        height:360px;

    }

}

/* ========================= */
/* Tablet */
/* ========================= */

@media(max-width:992px){

    body{

        overflow:auto;

    }

    .david-ai{

        height:auto;

        padding:40px 20px;

    }

    .david-container{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:35px;

    }

    .left-panel,
    .center-panel,
    .right-panel{

        width:100%;

        max-width:700px;

        text-align:center;

    }

    .left-panel{

        align-items:center;

    }

    .voice-circle{

        width:300px;

        height:300px;

    }

    .right-panel{

        height:320px;

    }

}

/* ========================= */
/* Mobile */
/* ========================= */

@media(max-width:600px){

    h1{

        font-size:48px;

    }

    .subtitle{

        font-size:22px;

    }

    .description{

        font-size:18px;

    }

    .voice-circle{

        width:260px;

        height:260px;

    }

    .buttons{

        flex-direction:column;

        width:100%;

    }

    .buttons button{

        width:100%;

    }

    .right-panel{

        height:300px;

    }

    #transcript{

        height:100%;

        font-size:15px;

    }

}