/* ============================================
   FOODS
============================================ */

.foods{
    padding:100px 0;
    background:#f8f8f8;
}

.foods h2{
    text-align:center;
    font-size:40px;
    margin-bottom:60px;
    color:var(--dark);
    position:relative;
}

.foods h2::after{
    content:"";
    width:80px;
    height:4px;
    background:var(--secondary);
    display:block;
    margin:15px auto;
}

.food-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:35px;
}

.food-card{

    background:#fff;

    border-radius:15px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.4s;

    position:relative;

}

.food-card:hover{

    transform:translateY(-12px);

    box-shadow:0 18px 40px rgba(0,0,0,.18);

}

.food-card img{

    height:250px;

    object-fit:cover;

    transition:.5s;

}

.food-card:hover img{

    transform:scale(1.08);

}

.food-info{

    padding:25px;

}

.food-info h3{

    font-size:26px;

    margin-bottom:12px;

    color:#222;

}

.food-info p{

    color:#777;

    line-height:1.7;

    margin-bottom:20px;

}

.price{

    color:var(--primary);

    font-size:28px;

    font-weight:700;

    margin-bottom:20px;

}

.order-btn{

    display:inline-block;

    background:var(--primary);

    color:white;

    padding:14px 35px;

    border-radius:40px;

    transition:.4s;

}

.order-btn:hover{

    background:#5e0000;

}

.food-card::before{

    content:"HOT";

    position:absolute;

    top:20px;

    left:-40px;

    background:var(--secondary);

    color:#111;

    padding:8px 50px;

    transform:rotate(-45deg);

    font-size:12px;

    font-weight:bold;

/*FOR THE SEARCH SECTION*/

/* ============================================
   SEARCH
============================================ */

.search-section{

    margin-top:40px;

    padding:40px 0;

    background:white;

}

#searchFood{

    width:100%;

    padding:18px;

    border-radius:50px;

    border:2px solid #ddd;

    font-size:18px;

    transition:.3s;

}

#searchFood:focus{

    border-color:var(--primary);

    box-shadow:0 0 15px rgba(139,0,0,.2);

}

}