@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background-color:#daddab;
}

/* =============================== */
/* HEADER / BANNER                 */
/* =============================== */

header{
    position:relative;
    background:url("biryani-banner.jpeg") center/cover no-repeat;
    padding:120px 20px;
    text-align:center;
    color:white;
    width:100%;
}

header::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45);
    backdrop-filter: blur(3px);
}

header h1,
header .search{
    position:relative;
    z-index:2;
}

header h1{
    font-size:42px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:20px;
}

.tagline{
    top: 2px;
    margin-top:9px;
    font-size:16px;
    opacity:0.9;
}

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

.search{
    display:flex;
    justify-content:center;
}

.search input{
    padding:10px;
    border:none;
    width:40%;
    font-size:15px;
    outline:none;
    border-radius:10px 0 0 10px;
}

.search button{
    padding:10px 20px;
    background-color:#ff5722;
    border:none;
    width:10%;
    cursor:pointer;
    font-size:15px;
    color:#fff;
    font-weight:600;
    border-radius:0 10px 10px 0;
    transition:all 0.3s ease;
}

.search button:hover{
    background-color:#e64a19;
}

/* =============================== */
/* MEAL CARDS                      */
/* =============================== */

.meal-list{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
    margin:20px;
}

.meal-item{
    flex-basis:calc(25% - 20px);
    max-width:calc(25% - 20px);
    background:rgb(177, 185, 129);
    padding:15px;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    cursor:pointer;
    transition:all 0.25s ease;
}

.meal-item:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 35px rgba(0,0,0,0.12);
}

.meal-item img{
    width:100%;
    max-height:250px;
    object-fit:cover;
    border-radius:10px;
}

.meal-item h3{
    text-align:center;
    margin:10px 0;
    font-size:17px;
    font-weight:600;
}

.meal-item{
    animation:fadeIn 0.5s ease;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =============================== */
/* MODAL                           */
/* =============================== */

.modal-container{
    display:none;
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background-color:rgb(210, 216, 180);
    padding:20px;
    box-shadow:0 0 10px rgba(0,0,0,0.3);
    z-index:1000;
    max-width:90%;
    overflow:auto;
    border-radius:10px;
    scrollbar-color: red;
}



.modal-container .close-button{
    font-size:42px;
    background:none;
    border:none;
    cursor:pointer;
    color:#333;
    width:100%;
    text-align:right;
    margin-bottom:16px;
    transition:all 0.3s ease;
}

.modal-container .close-button:hover{
    color:#ff5722;
}

.meal-details-content{
    overflow-y:auto;
    max-height:70vh;
}

/* =============================== */
/* RECIPE DETAILS                  */
/* =============================== */

.recipe-title{
    font-size:22px;
    font-weight:600;
    text-align:center;
    margin-bottom:5px;
}

.recipe-category{
    font-size:18px;
    font-weight:600;
    text-align:center;
    margin-bottom:10px;
}

.recipe-instruct h3{
    font-size:18px;
    font-weight:600;
    margin-top:10px;
}

.recipe-instruct p{
    font-size:16px;
    margin-bottom:10px;
    text-align:justify;
    padding:18px;
}

.recipe-img img{
    max-width:50%;
    display:block;
    margin:0 auto 40px;
    border-radius:10px;
    border:1px solid #ccc;
    box-shadow:rgba(100,100,111,0.2) 0 7px 29px 0;
}

.recipe-video{
    text-align:center;
    margin-top:10px;
}

.recipe-video a{
    padding:10px 20px;
    background-color:#ff5722;
    border:none;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    font-size:16px;
    cursor:pointer;
    border-radius:10px;
    transition:all 0.3s ease;
}

.recipe-video a:hover{
    background-color:#e64a19;
}

footer{
    margin-top:40px;
    padding:20px;
    text-align:center;
    background:#333;
    color:white;
    font-size:14px;
}

/* =============================== */
/* RESPONSIVE                      */
/* =============================== */

@media screen and (width < 980px){

    .meal-item{
        flex-basis:calc(50% - 20px);
        max-width:calc(50% - 20px);
        margin:0;
    }

    .search input{
        width:80%;
    }

    .search button{
        width:20%;
    }
}

@media screen and (width < 540px){

    .meal-item{
        flex-basis:calc(100% - 20px);
        max-width:calc(100% - 20px);
    }

}

/* Custom Scrollbar */
::-webkit-scrollbar{
    width: 15px;

}

::-webkit-scrollbar-track{
    background: #daddab;
}

::-webkit-scrollbar-thumb{
    background: #a7aa7e;
    border-radius: 10px;
}