/* ===== HEADER ===== */
.header{
display:block;
}
body{
background-color:#D8C08F;
}
.about{
display:flex;
justify-content:space-between;
align-items:center;
margin:50px;
}
.logo{
width: 50px; 
}
.navbar{
background:white;
display:flex;
align-items:center;
justify-content:space-between;
padding: 15px 40px;
border-radius:30px;
margin: 20px;
position:relative;
z-index:10;
}
.navbar ul{
display: flex;
gap:45px;
list-style:none;
margin:0;
padding:0;
}
.navbar a{
text-decoration:none;
color:black;
padding:15px 20px;
font-weight:bold;
}
.navbar a:hover{
color:#8B4513;
}
.navbar li{
margin:0;
}
/* ===== ABOUT US ===== */
.about{
display:flex;
justify-content:space-between;
align-items:stretch;

margin-top:10px;
margin-left:50px;
min-height:500px;
}
.about-font{
width:300px;
display:block;
margin-top:-60px;
margin-left:80px;
}
.text{
width:60%;
padding-top:40px;
}
.contact{
display:flex;
gap:10px;
margin-top:20px;
margin-left:20px;
}
.contact-logo{
width:80px;
display:block;
}
.gambar{
background-color:#EFCB55;
width:320px;
height:485px;
padding:40px;
border-radius:30px;
position:relative;
box-sizing:border-box;
}
.video-menu{
width:370px;
border-radius:20px;
position:absolute;
top:20px;
left:-80px;
}
/* ===== HOME ===== */
.home{
position:relative;
height:700px;
margin-top:30px;
}
.donat{
position:absolute;
top:-10px;
left:-80px;
width:340px;
}
.dubai{
position:absolute;
bottom:200px;
left:-10px;
width:380px;
}
.font{
position:absolute;
width:500px;
left:530px;
top:110px;
transform:translateX(-50%);
z-index:1;
}
.waffle{
position:absolute;
left:700px;
bottom:170px;
transform:translateX(-50%);
width:300px;
z-index:2;
}
.yogurt{
position:absolute;
left:550px;
top:-100px;
width:300px;
z-index:2;
}
.video-intro{
width:280px;
border-radius:20px;
position:absolute;
top:-5px;
right:140px;
z-index:3;
}
/*===== STORE =====*/
.store{
position:relative;
min-height:600px;
background-image:url("daging store.jpg");
background-size:100% 100%;
background-position:80% center;
background-repeat:no-repeat;
}
.search{
position:absolute;
top:70px;
left:150px;
z-index:2;
}
.search input{
width:220px;
height:30px;
border:none;
border-radius:20px;
padding:0 15px;
text-align:center;
}
.alamat{
position:absolute;
top:130px;
left:150px;
width:280px;
font-size:20px;
}
.alamat p{
margin:5px 0;
}
.map{
position:absolute;
top:110px;
right:120px;
width:500px;
}
.chiken{
position:absolute;
width:220px;
top:-70px;
left:350px;
z-index:1;
}
.bacon{
position:absolute;
width:180px;
top:30px;
left:-60px;
z-index:1;
}
.ayam{
position:absolute;
width:250px;
bottom:30px;
left:180px;
}
/*===== MENU =====*/
.menu-page{
position:relative;
min-height:650px;
margin-top:20px;
background-image:url("latar menu.jpg");
background-size:cover;
background-position:center 80%;
background-repeat:no-repeat;
}
.menu-title{
position:absolute;
top:40px;
right:60px;
font-size:100px;
line-height:0.9;
text-align:right;
color:black;
z-index:3;
}
/* ===== MENU SLIDER ===== */
.menu-slider{
position:absolute;
bottom:50px;
left:70px;
right:70px;
display:flex;
align-items:center;
justify-content:space-between;
gap:70px;
}
/* ===== KOLOM MERAH ===== */
.asin-box{
width:460px;
height:200px;
background-color:#D84A2B;
border-radius:50px;
position:relative;
display:flex;
align-items:flex-end;
justify-content:center;
padding:10px;
box-sizing:border-box;
}
/* ===== KOLOM BIRU ===== */
.manis-box{
width:460px;
height:200px;
background-color:#2789D8;
border-radius:50px;
position:relative;
display:flex;
align-items:flex-end;
justify-content:center;
padding:10px;
box-sizing:border-box;
}
/* ===== JUDUL KOLOM ===== */
.asin-box h2,
.manis-box h2{
position:absolute;
top:12px;
left:0;
right:0;
margin:0;
text-align:center;
font-size:25px;
z-index:2;
}
/* ===== GAMBAR MENU ===== */
.menu-asin,
.menu-manis{
width:400px;
max-height:220px;
object-fit:contain;
margin-bottom:-45px;
}
/* ===== SEMUA PANAH ===== */
.menu-slider button{
position:absolute;
top:50%;
transform:translateY(-50%);
width:40px;
height:40px;
font-size:25px;
background:white;
border:none;
border-radius:50%;
cursor:pointer;
z-index:10;
}
/* ===== PANAH KIRI MERAH ===== */
.asin-box button:first-of-type{
left:-20px;
}
/* ===== PANAH KANAN MERAH ===== */
.asin-box button:last-of-type{
right:-20px;
}
/* ===== PANAH KIRI ===== */
.asin-box button:first-of-type,
.manis-box button:first-of-type{
left:-20px;
}

/* ===== PANAH KANAN ===== */
.asin-box button:last-of-type,
.manis-box button:last-of-type{
right:-20px;
}
/* DEKORASI MAKANAN */
.sup{
position:absolute;
width:200px;
top:20px;
left:-50px;
z-index:2;
}
.udang{
position:absolute;
width:400px;
top:-110px;
left:720px;
transform:translateX(-50%);
z-index:2;
clip-path: inset(0 0 0 90px)
}
.telur{
position:absolute;
width:620px;
top:0;
left:50px;
z-index:1;
clip-path: inset(0 100px 0 0)
}
.asin-box h2,
.manis-box h2{
position:absolute;
top:15px;
left:0;
width:100%;
text-align:center;
font-size:25px;
margin:0;
z-index:6;
}
/* ===== FOOTER ===== */
.footer{
background-color:white;
text-align:center;
padding:20px;
margin-top:30px;
font-size:16px;
}