* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
    scroll-behavior: smooth;
}

/* Animated Background */
body {
    background: linear-gradient(-45deg, #FFF8F0, #FDE2E4, #E3F2FD, #FFF8F0);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Section Spacing */
section {
    padding: 100px 0;
}

/* NAVBAR */
nav {
    background: linear-gradient(90deg, #FF6B35, #E63946);
    padding: 15px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-size: 26px;
    font-weight: bold;
    color: white;
    flex: 1;
}

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

.search-box input {
    width: 450px;
    padding: 12px 25px;
    border-radius: 30px;
    border: none;
    outline: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    flex: 1;
    justify-content: flex-end;
    align-items: center;
}

nav a {
    color: white;
    text-decoration: none;
}

.cart-btn {
    background: white;
    color: #E63946;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
}

/* HERO */
.banner {
    height: 500px;
    background: url("https://images.unsplash.com/photo-1504674900247-0877df9cc836") center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.banner-text {
    background: rgba(255, 255, 255, 0.15);
    padding: 30px;
    border-radius: 20px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    text-align: center;
}

.hero-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 30px;
    background: #FF6B35;
    color: white;
    text-decoration: none;
    border-radius: 25px;
}

/* FOOD */
.food-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.food-card {
    width: 260px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: 0.4s;
}

.food-card:hover {
    transform: translateY(-10px);
}

.food-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.food-card h3, .price {
    padding: 10px 15px;
}

.price {
    color: #E63946;
    font-weight: bold;
}

.food-card button {
    margin: 10px 15px 20px;
    padding: 10px;
    width: 85%;
    border: none;
    border-radius: 20px;
    background: #FF6B35;
    color: white;
    cursor: pointer;
}

/* OFFERS */
.offers {
    background: linear-gradient(to right, #FFE0B2, #FFCCBC);
    text-align: center;
}

.offers h2 {
    margin-bottom: 80px; /* Increased spacing */
}

.offer-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.offer-card {
    width: 220px;
    background: white;
    padding: 15px;
    border-radius: 15px;
    transition: 0.4s;
}

.offer-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
}

.old {
    text-decoration: line-through;
    color: red;
}

/* FOOTER */
footer {
    background: #3A2E2A;
    color: white;
    padding: 60px 80px 20px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    gap: 50px;
}

.footer-col {
    flex: 1;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul a {
    color: white;
    text-decoration: none;
}

.footer-col input,
.footer-col textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: none;
}

.footer-col button {
    padding: 10px 20px;
    border-radius: 20px;
    border: none;
    background: #FF6B35;
    color: white;
    cursor: pointer;
}

.footer-bottom {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
    font-size: 14px;
}

/* Fade Animation */
.fade-in {
    animation: fadeInUp 1.2s ease;
}

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