/* =====================================================
MOBILE FIRST
Projeto: Captação de Leads WhatsApp
Arquivo: responsividade.css
===================================================== */

/* ==========================================
Smartphones Pequenos
========================================== */

@media screen and (max-width: 480px){
    
    body{
        padding:12px;
    }
    
    .container{
        padding:20px 15px;
        border-radius:10px;
    }
    
    h1{
        font-size:1.5rem;
        line-height:1.3;
        margin-bottom:20px;
    }
    
    label{
        font-size:0.95rem;
    }
    
    input{
        height:50px;
        font-size:16px;
    }
    
    .btn{
        width:100%;
        height:54px;
        font-size:1rem;
    }
    
    .autocomplete-list{
        max-height:180px;
    }
    
    .autocomplete-item{
        padding:14px;
        font-size:15px;
    }
    
    #mensagem{
        font-size:14px;
        line-height:1.4;
    }
    
}

/* ==========================================
Smartphones Grandes
========================================== */

@media screen and (min-width: 481px) and (max-width: 767px){
    
    .container{
        padding:25px;
    }
    
    h1{
        font-size:1.8rem;
    }
    
    .btn{
        height:56px;
    }
    
}

/* ==========================================
Tablets
========================================== */

@media screen and (min-width: 768px){
    
    .container{
        max-width:700px;
    }
    
    h1{
        font-size:2rem;
    }
    
}

/* ==========================================
Notebooks
========================================== */

@media screen and (min-width: 1024px){
    
    .container{
        max-width:800px;
    }
    
    h1{
        font-size:2.2rem;
    }
    
    .btn{
        transition:.3s ease;
    }
    
    .btn:hover{
        transform:translateY(-2px);
    }
    
}

/* ==========================================
Monitores Grandes
========================================== */

@media screen and (min-width: 1440px){
    
    .container{
        max-width:900px;
    }
    
    body{
        padding:40px;
    }
    
}