@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{background:var(--mainColor)}:root{font-family:Poppins,sans-sertif,Urbanist;line-height:1.5;font-weight:400;--buttonColor:#007bff;--mainColor:#ccc;--textColor:#fff;--heading:#333;--borderColor:#343a40;--headerColor:#03045e;--cardColor:#fff;--Dark-mainColor:#415a77;--Dark-textColor:#e0e1dd;--Dark-buttoncolor:#8da9c4;--Dark-cardColor:#778da9;--Dark-headerColor:#1b263b}html{font-size:62.5%}.navbar{padding:12px 20px;box-shadow:#0000000d 0 6px 24px,#00000014 0 0 0 1px;display:flex;justify-content:space-around;align-items:center;background:var(--headerColor);color:var(--textColor)}.fotter{background-color:var(--headerColor);display:flex;align-items:center;gap:2rem;font-size:1.6rem;color:var(--textColor);padding:12px 20px;justify-content:center}.logo img{width:25%}.search{display:flex;justify-content:center;margin-bottom:2rem;flex-wrap:wrap}.search input{width:30rem;padding:1rem;border:none;border-radius:5px 0 0 5px;font-size:1.6rem;outline:none}.search button{padding:10px 15px;border:none;background:#e85d04;color:var(--textColor);border-radius:0 5px 5px 0;cursor:pointer;font-size:1.6rem;transition:all ease .5s}.search button:hover{opacity:.8}.search button:active{color:red}#mode i,.fotter i{margin-right:2rem;padding:1.5rem;font-size:1.6rem;border-radius:.8rem;background:#fff3;border:1px solid rgba(255,255,255,.3);transition:transform .3s ease-in-out}#mode i:hover,.fotter i:hover{transform:scale(1.1)}.fotter i{color:#fff}.container{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;margin:0 auto;padding:9.6rem 2.4rem}.card{background:var(--cardColor);border-radius:1.2rem;box-shadow:0 4px 8px #0000001a;overflow:hidden;width:100%;max-width:300px;text-align:center;padding:1.5rem;transition:transform .3s ease-in-out}.card:hover{transform:translateY(-5px)}.imageContainer{width:100%;height:18rem;overflow:hidden;border-radius:.8rem;display:flex;justify-content:center;align-items:center}.projectImage{width:100%;height:100%;object-fit:cover}.img{height:50rem;width:50rem}.name{font-size:1.9rem;font-weight:700;margin:10px 0;color:#333}.cuisine,.category{font-size:1.4rem;color:#666;padding:0 10px;text-align:justify}.btnn{display:inline-block;background:var(--buttonColor);color:var(--textColor);text-decoration:none;padding:8px 12px;border-radius:.5rem;font-size:1.3rem;margin:.5rem;transition:background .3s ease}.btnn:hover{background:#0056b3}.recipe-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:50%;max-width:60rem;max-height:70vh;width:90%;background:var(--cardColor);padding:2rem;border-radius:1rem;box-shadow:0 4px 8px #0000001a;overflow-y:auto;z-index:1000}.modal-content{position:relative;padding:1rem}.close-btn{position:absolute;top:1rem;right:1.5rem;font-size:2rem;cursor:pointer;color:#e85d04}.ingredients-list{padding-left:20px}.ingredients-list li{margin-bottom:5px}.dark-mode .navbar,.dark-mode .fotter{background-color:var(--Dark-headerColor)}.dark-mode .container{color:var(--Dark-textColor)}.dark-mode{background:var(--Dark-mainColor)}.dark-mode .card{background:var(--Dark-cardColor);color:#fff;box-shadow:0 4px 6px #ffffff1a}.dark-mode .search i{color:#0ff}.dark-mode .name{color:var(--textColor)}.dark-mode .cuisine,.dark-mode .category{color:var(--Dark-textColor)}.dark-mode .recipe-modal{background:var(--Dark-cardColor)}.dark-mode .btnn{background:var(--Dark-mainColor)}@media (max-width: 1024px){.container{padding:6rem 2rem}.navbar{flex-direction:column;text-align:center;padding:10px}.search input{width:25rem}}@media (max-width: 768px){html{font-size:55%}.container{padding:4rem 1.5rem}.navbar{flex-direction:column;padding:8px}.search input{width:18rem}.search button{padding:.8rem .12rem}.fotter{gap:.5rem}.logo img{width:25%}.recipe-modal{width:95%;max-height:85vh;padding:15px}.close-btn{font-size:18px;top:8px;right:10px}}@media (max-width: 480px){html{font-size:50%}.navbar{padding:6px}.search input,.search button{font-size:1.4rem}.fotter{padding:10px}.logo img{width:20%}#mode i,.fotter i{padding:1rem;font-size:1.4rem}}