@media screen and (max-width: 576px) {

    header {
        margin-bottom: 50px;
    }
    nav {
        width: 93%;
        margin: auto;
        align-items: end;
    }
    .nav-link {
        display: none;
    }
    
    .hero {
        margin: 40px 0;
        flex-direction: column-reverse;
        gap: 30px;
    }

    .left-half {
        width: 93%;
        margin: 0 auto;


    }
    .left-half h1 {
        font-size: 27px;
        max-width: 70%;
    }

    .left-half p {
        font-size: 13px;
    }
    .right-half {
        width: 100%;
    }
    .right-half img{
        width: 100%;
    }

    /* our plants */
    main {
        width: 93%;
        margin: 0 auto;
    }
    .text-content h2 {
        font-size: 27px;
    }

    .text-content p {
        font-size: 12px;
    }
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .card p{
        font-size: 12px;
    }
    
    .card button {
        margin: 14px 0;
    }
    /* plant lovers */
    .plant-lovers {
        flex-direction: column;
        gap: 10px;
    }

    .left-side {
        width: 100%;
    }

    .left-side .store {
        max-width: 100%;
    }

    .left-side .badge {
        display: none;
    }

    .right-side h2 {
        width: 100%;
        font-size: 25px;
    }

    .right-side ul {
        padding-left: 20px;
        font-size: 11px;
    }

    /* deals */

    .text-container h2{
        font-size: 25px;
    }

    .text-container p {
        font-size: 14px;
        width: 100%;
    }

    .deal-container {
        height: 100%;
        margin-top: 30px;
        display: flex;
        flex-direction: column;
    }

    .bloom, .ana, .zabo {
        width: 100%;
        height: 200px;
    }

    .bloom .texts p, 
    .ana .texts p,
    .zabo .texts p {
        font-size: 22px;
    }


    .bloom .texts a, 
    .ana .texts a,
    .zabo .texts a {
        font-size: 14px;
    } 

    /* burnch */
    .burnch {
        height: 275px;
    }

    .burnch h1{
        font-size: 25px;
    }

    .input-container input, .input-container button {
        font-size: 14px;
        padding: 15px;
    }

    /* footer */
    footer {
        padding: 30px;
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    footer .info p{
        font-size: 16px;
    }

}