/* Responsive CSS */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container {
        width: 90%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .container {
        width: 80%;
    }

    #boxes .box {
        width: 45%;
        margin-bottom: 20px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container {
        width: 70%;
    }

    #boxes .box {
        width: 30%;
        margin-bottom: 0;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        width: 60%;
    }
}

/* Specific adjustments for smaller screens */
@media (max-width: 767px) {
    header #branding,
    header nav {
        float: none;
        text-align: center;
    }

    header nav li {
        float: none;
        display: block;
        text-align: center;
    }

    #showcase h1 {
        font-size: 3em;
    }

    #showcase p {
        font-size: 1.5em;
    }

    #car-search h1 {
        float: none;
        text-align: center;
    }

    #car-search form {
        margin-top: 20px;
    }

    #boxes .box {
        width: 100%;
        margin-bottom: 20px;
    }
}