/* small devices */
@media screen and (min-width:567px )
{
    .data form input{
        width: calc(100% - 130px);
    }
    .data form button{
        width: 120px;
    }
    .sm-100{
        width: 100%;
    }
    .sm-50{
        width: 50%;
    }
    .sm-33{
        width: 33.333%;
    }
    .sm-25{
        width: 25%;
    }
    .sm-20{
        width: 20%;
    }
}


/* medium devices */
@media screen and (min-width:768px )
{
    .contact{
        width: calc(50% - 10px);
    }
    .staff-profiles{
        margin-right:  5%;
        margin-left:  5%;
        justify-content: start;
    }
    .footer{
        flex-direction: row;
        flex-wrap: wrap;
    }
    .mealify{
        /* position: relative; */
        order: -1;
        width: 50%;
    }
    .get-in-touch{
        order: 0;
        width: 50%;
    }
    .subscribe{
        order: 1;
        width: 100%;
    }
    .md-100{
        width: 100%;
    }
    .md-50{
        width: 50%;
    }
    .md-33{
        width: 33.333%;
    }
    .md-25{
        width: 25%;
    }
    .md-20{
        width: 20%;
    }
}


/* large devices */
@media screen and (min-width:992px )
{
    .form{
        .name,.email{
            width: calc(50% - 10px);
        }
    }
    .hero{
        order: 1;
    }
    .home{
        justify-content: space-between;
        height: calc(100vh - 86px);
    }
    .info{
        text-align: start;
    }
    .btn-group{
        flex-wrap: nowrap;
        column-gap: 30px ;
        justify-content: start;
    }


    .l-100{
        width: 100%;
    }
    .l-40{
        width: 40%;
    }
    .l-45{
        width: 45%;
    }
    .l-33{
        width: 33.333%;
    }
    .l-25{
        width: 25%;
    }
    .l-20{
        width: 20%;
    }
}


/* xlarge devices */
@media screen and (min-width:1200px )
{
    .mealify{
        /* position: relative; */
        order: -1;
        width: 25%;
    }
    .get-in-touch{
        order: 1;
        width: 25%;
    }
    .subscribe{
        order: 0;
        width: 50%;
    }
    .links ul{
        visibility: visible;
    }
    .xl-100{
        width: 100%;
    }
    .xl-50{
        width: 50%;
    }
    .xl-33{
        width: 33.333%;
    }
    .xl-25{
        width: 25%;
    }
    .xl-20{
        width: 20%;
    }
}


/* xxlarge devices */
@media screen and (min-width:1400px )
{
    .xxl-100{
        width: 100%;
    }
    .xxl-50{
        width: 50%;
    }
    .xxl-33{
        width: 33.333%;
    }
    .xxl-25{
        width: 25%;
    }
    .xxl-20{
        width: 20%;
    }
}