:root{
  --accent:#e63946;
  --accent-dark:#b91c1c;
  --dark:#1a1a1a;
  --muted:#666;
  --card:#ffffffdd;
  --bg:#04abf2; 
  font-family:'Cairo',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--dark);line-height:1.6}
a{text-decoration:none;color:inherit}

/* animations */
[data-animate]{opacity:0;transform:translateY(40px);transition:all 0.9s ease-out}
[data-animate].visible{opacity:1;transform:translateY(0)}

/* navbar */
.nav{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;background:#04abf2;box-shadow:0 2px 55px rgba(0,0,0,.06);position:sticky;top:0;z-index:50}

.brand{display:flex;align-items:center;gap:10px}

.brand img{width:132px;height:100px;border-radius:0%;object-fit:cover;border:0px solid }

.brand h1{font-size:20px;color: #fff }


.nav-links{display:flex;gap:50px}
.nav-links a{font-weight:600;transition:.3s; color:#fff}
.nav-links a:hover{color:#020000 }

/* button styles */
.btn-cta{
  background:var(--accent);
  color:#fff;
  padding:10px 18px;
  border-radius:8px;
  font-weight:700;
  transition:all .3s ease;
  display:inline-block;
}
.btn-cta:hover{
  background:var(--accent-dark);
  transform:scale(1.05);
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}

/* hero */
.hero{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;background:url('https://images.unsplash.com/photo-1600891963937-7631cf856c98?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;position:relative;color:#fff}
.hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.55)}
.hero-content{position:relative;max-width:800px;padding:20px}
.hero h2{font-size:42px;margin-bottom:10px}
.hero p{font-size:18px;color:#fff;margin-bottom:20px}
.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* sections */
.container{max-width:1150px;margin:0 auto;padding:50px 20px}
h2.section-title{text-align:center;font-size:28px;color:#fff;margin-bottom:10px}
p.section-sub{text-align:center;color:#fff ;margin-bottom:30px}

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

.card{background:#fff;padding:10px;border-radius:12px;box-shadow:0 4px 5px rgba(0,0,0,.08);transition:.3s}
.card:hover{transform:translateY(-5px)}

.menu-card img{width:80%;height:80%;object-fit:cover;border-radius:10px;margin-bottom:10px;}
.menu-card h3{margin-bottom:6px;color:var(--dark); text-align: center}


.price{color:var(--accent);font-weight:700}

/* about */
.about{display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.about img{flex:1 1 45%;border-radius:12px;object-fit:cover;max-height:360px}

.about-content{flex:1 1 45%; color: #fffbfb;}


/* contact */
.contact{display:grid;grid-template-columns:1fr 340px;gap:10px}
.input,textarea,select{width:100%;padding:12px;border-radius:8px;border:1px solid #ddd;font-size:15px;margin-top:6px}
.send{background:var(--accent);color:white;padding:12px 18px;border-radius:8px;border:none;font-weight:700;margin-top:10px;cursor:pointer;transition:.3s}
.send:hover{background:var(--accent-dark);transform:scale(1.05);box-shadow:0 4px 10px rgba(0,0,0,.2)}

/* footer */
footer{padding:20px;background:#04abf2;color:#eee;text-align:center;margin-top:20px}
footer small{color:#bbb}

/* responsive */
@media(max-width:900px){
  .contact{grid-template-columns:1fr}
  .about{flex-direction:column}
  .about img,.about-content{flex:1 1 100%}
}
@media(max-width:600px){
  .hero h2{font-size:28px}
  .hero p{font-size:15px}
  .nav{padding:12px}
}