/* Tablet */

@media (max-width: 992px) {

        /* header */

        header{
            justify-content: end;
        }

        

        .navbar-list {
            position: absolute;
            top: 50px;
            right: 5%;
            width: 90%;
            flex-direction: column;
            background-color: var(--nav-bg);
            border-top: 0px;
            border-radius: 0 0 15px 15px;
            align-items: flex-start;
            padding: 45px 30px;
            gap: 25px;
            z-index: 2;
            display: none;
            justify-content: center;
            border-top: none;
        }

        .menu-label {
            display: flex;
            order: 2;
            cursor: pointer;
        }
    
        .menu-label img {
            height: 30px;
            width: 30px;
        }

        #menu-toggle:checked + .navbar-list {
            display: flex;
        }

    /* hero */
        #hero{
            gap: 10px;
        }

        #hero img{
            display: none;
        }

        .hero-info{
            width: 500px;
        }

        .hero-info h1{
            font-size: 40px;
            text-align: center;
        }

        .hero-info p{
            text-align: center;
            font-size: 20px;
        }

        .btn{
            justify-content: center;
        }


}

/* Movil */

@media (max-width: 576px){
    /* hero */
    .btn button{
        justify-content: center;
        padding: 2px;
        width: 120px;
        height: 40px;
        text-align: center;

    }

    .btn a{
        font-size: 15px;
    }

    .hero-info h1{
        font-size: 20px;
    }

    .hero-info p{
        font-size: 15px;
    }

    .hero-info{
        width: 300px;
    }
    
    
    /* about */

    #about p{
        width: 290px;
    }

    .about-card{
        height: 300px;
    }

    .about-card img{
        width: 100px;
    }

    .about-card p{
        font-size: 15px;
    }

    /* cars */
    .card{
        width: 250px;
    }

    .card img{
        width: 200px;
    }

    /* Contact */
    .card button:hover{
        width: 200px;
    }

    .contact-container{
        width: 200px;
        gap: 20px;
    }

    .contact-container h2{
        text-align: center;
        font-size: 30px;
    }


    .form-container{
        margin-top: 15px;
        flex-wrap: wrap;
    }

    textarea{
        flex-wrap: wrap;
        width: 200px;
        height: 100px;
    }

    .map-info h2{
        text-align: center;
        font-size: 20px;
    }

    .map-info img{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 250px;
    }

    iframe{
        width: 250px;
        height: 200px;
    }

    /* Footer */

    footer img{
        width: 40px;
    }

    .footer-info a{
        font-size: 7px;
    }



/* Login */

    .container{
        padding-top: 100px;
        width: 300px;
        justify-content: center;
        align-items: center;
        padding-bottom: 40px;
    }
    .google-btn span,
    .twitter-btn span{
        display: none;
    }

    .separador{
        width: 90%;
    }

    .input-container form{
        flex-wrap: wrap;
        flex-direction: column;
    }

    .form-container input{
        width: 230px;
        font-size: 16px;
    }

    .form-container button{
        font-size: 15px;
        width: 240px;
        height: 50px;
    }
}