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

html{
    scroll-behavior: smooth;
}


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

    body{
 font-family: Arial, Helvetica, sans-serif;
 line-height: 1.6;
 color:#333;
 padding-top:80px;
}
.container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;

}
.header{
    background-color: #2c3e50;
    color: white;
    padding: 1rem 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     

}
.nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* Hamburger */

.hamburger{
 display:none;
 font-size:2rem;
 color:white;
 cursor:pointer;
}

/* Show hamburger on mobile */

@media(max-width:768px){

.nav-links{
 display:none;
 flex-direction:column;
 background:#2c3e50;
 position:absolute;
 top:70px;
 right:20px;
 width:200px;
 padding:1rem;
 border-radius:10px;
}

.nav-links.active{
 display:flex;
}

.hamburger{
 display:block;
}

}

.logo h1{
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.2rem;
}
.logo .tagline{
    font-size: 0.9rem;
    opacity: 0.8;
}
.nav-links{
    list-style: none;
    display: flex;
    gap: 2rem;
}


@media(max-width:768px){

.nav-links{
 display:none;
 flex-direction:column;
 background:#2c3e50;
 position:absolute;
 top:60px;
 left:15px;
 width:200px;
 padding:1rem 0;
 border-radius:12px;
 box-shadow:0 10px 30px rgba(0,0,0,.3);
 border-top-left-radius: 0;
}

.nav-links.active{
 display:flex;
}

.nav-links li{
 text-align:center;
 margin:.5rem 0;
}

.nav-links a{
 display:block;
 padding:.7rem 1rem;
}

}
.nav-links a{

    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;

}
.nav-links a:hover{
    background-color: #34495e;
    color: #ecf0f1;
}

.hero{
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://plus.unsplash.com/premium_photo-1661953124283-76d0a8436b87?q=80&w=1188&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover no-repeat;
    
    display: flex;
    justify-content: center;
    text-align: center;
    color: white;
    align-items: center;
    
}


.hero-content h2{
    font-size: 3.5rem;
    margin-bottom: 1rem;
    font-weight: 300;
    letter-spacing: 2px;

}

.hero-content p{
    font-size: 1.2rem;
    margin-bottom: 2rem;
    font-weight: 300;
    letter-spacing: 1px;
    max-width: 600px;
}
.hero-button{
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding: 1rem 2rem;
    
   
}
.btn{
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: bold;
    transition: all 0.3s ease;
    display: inline-block;
    border-radius: 5px;
    cursor: pointer;
    border-radius: 4px;
    text-decoration: none;
}
.btn-primary{
    background-color: #e74c3c;
    color: white;
}
.btn-primary:hover{
    background-color: #c0392b;
    color: #ecf0f1;
    transform: translate(-2px);
}
.btn-secondary{
    background-color: transparent;
    color: white;
    border: 2px solid white;
}
.btn-secondary:hover{
    background-color: white;
    color: #184063;
    transform: translate(-2px);
}

.menu{
 padding:6rem 0;
 background:
 linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),
 url('https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg?w=1200');
 background-size:cover;
 background-position:center;
 background-attachment:fixed;
}

.section-title{
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color:#ffffff;
    font-family:'Playfair Display', serif;
}

.section-subtitle{
    text-align: center;
    font-size: 1.2rem;
     font-family:'Poppins', sans-serif;
 color:rgba(255,255,255,.85);
    margin-bottom: 3rem;
}


.menu-category{
    
    margin-bottom: 3rem;
}
.menu-category h3{
    font-family:'Playfair Display', serif;
 font-size:2.2rem;
 letter-spacing:1px;
 color:#ffffff;
 border-bottom:1px solid rgba(255,255,255,.3);
 padding-bottom:.5rem;

}

.menu-items{
    display: grid;
    gap: 2rem;
    margin-top: 2rem;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

}

.menu-item{
    background:rgba(255,255,255,.65);
 backdrop-filter:blur(10px);
 padding:1.5rem;
 border-radius:20px;
 box-shadow:0 10px 25px rgba(0,0,0,.12);
 display:flex;
 justify-content:space-between;
 gap:1rem;

 opacity:0;
 transform:translateY(30px);
 transition:0.8s cubic-bezier(.19,1,.22,1);

}


    .menu-item.show{
        opacity: 1;
        transform:translateY(0);
    }
.menu-item:hover{
     transform: scale(1.03); 
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18); 

}

.menu-item-info h4{
     font-family:'Playfair Display', serif;
 font-size:1.25rem;
 color:#1c2b3a;

} 

.menu-item-info p{
     font-family:'Poppins', sans-serif;
 font-size:.9rem;
 color:#333;
 line-height:1.7;

}

.price{
 font-family:'Poppins', sans-serif;
 font-size:1.1rem;
 color:#e74c3c;
 letter-spacing:.5px;
 transition:.3s ease;
}

.menu-item:hover .price{
 text-shadow:0 0 8px rgba(233, 34, 12, 0.6);
 transform:scale(1.05);
}

@media(max-width:768px){

.menu-item{
 flex-direction:column;
}
.menu-item.show{
 transform:translateY(0);
 opacity:1;
 animation:mobilePop .5s ease;
}

@keyframes mobilePop{
 from{
  transform:translateY(20px);
 }
 to{
  transform:translateY(0);
 }
}

}

.price{
 align-self:flex-end;
}



.about{
 padding:8rem 0;
 position:relative;
 background:
 linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),
 url("https://images.unsplash.com/photo-1656652662595-b88cc537db6b?w=1200");
 background-size:cover;
 background-position:center;
 background-attachment:fixed;
}


.parallax-bg{
 position:absolute;
 inset: -150px;
 background:
 linear-gradient(rgba(127,121,121,.35),rgba(15,11,11,.35)),
 url('https://images.unsplash.com/photo-1656652662595-b88cc537db6b?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDl8fHJlc3RhdXJhbnQlMjBhYm91dCUyMGJhY2tncm91bmR8ZW58MHx8MHx8fDA%3D') center/cover no-repeat;
 background-size:cover;
 background-position:center top;
 z-index:-1;
 will-change:transform;
}

.about.show{
    opacity: 1;
    transform: translateY(0);
}


.about-content{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;

}

.about-content.reverse{
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
    direction: rtl;
}
.about-text{
    font-size: 1.1rem;
    line-height: 1.8;
    color: #ffffff;
}

.about-text h3{
    font-size: 2rem;
    margin-bottom: 1rem;
   margin-top: 0.5rem;
    color: #f9a125;
}
h2.section-title{
    color: #ffffff;
    margin-bottom: 2rem;
}

@media(max-width:768px){
 .about-content{
  grid-template-columns:1fr;
  text-align:center;
 }
 .about-text{
    padding: 2.5rem;
 }

}


.about-text p{
   
    font-size: 1.05rem;
    color:rgba(255,255,255,.9);
    line-height: 1.8;
}

.about-image{
    display: flex;
    justify-self: center;
    align-items: center;
}
.about-image img{
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 10px 130px rgba(0, 0, 0, 0.15);
}
.about-image img:hover{
    transform: scale(1.05);
    transition: transform 0.3s ease;
}
.glass{
 background:rgba(255,255,255,.08);
 padding:2.5rem;
 border-radius:20px;
 backdrop-filter:blur(6px);
 border:1px solid rgba(255,255,255,.15);
}



.contact{
 padding:6rem 0;
 background:
 linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
 url("https://media.istockphoto.com/id/1465902794/photo/menu-cover-design-in-grey-fabric-tones-square-image.jpg?s=612x612&w=0&k=20&c=IIVASF3gsG3neAHxB2SnUr5kFZRDUsTas-BZOVLfZ2M=" ) center/cover no-repeat;
 background-size:cover;
 background-position:center;
 background-attachment:fixed;
}




.contact-content{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:4rem;
 align-items:center;
}

.contact-info h3,
.contact-form h3{
  font-family:'Playfair Display', serif;
 color:#ffffff;
 font-size:2rem;
 letter-spacing:1px;
 margin-bottom:1rem;
}

.contact-info p{
 font-family:'Poppins', sans-serif;
 color:rgba(255,255,255,.85);
 font-size:1rem;
 line-height:1.8;
 letter-spacing:.3px;
}

.contact-form input{
 font-family:'Poppins', sans-serif;
}

.contact .glass{
 background:rgba(255,255,255,.08);
 backdrop-filter:blur(8px);
 border:1px solid rgba(255,255,255,.2);
}


.contact-form form{
 display:flex;
 flex-direction:column;
 gap:1rem;
}

.contact-form input{
 padding:12px;
 border-radius:12px;
 border:none;
 outline:none;
 background:rgba(255,255,255,.7);
 box-shadow:inset 0 0 5px rgba(0,0,0,.1);
}

.contact-form input:focus{
 box-shadow:0 0 0 2px #e74c3c;
}

.row{
 display:flex;
 gap:1rem;
}

.contact-form button:hover{
 transform:scale(1.05);
}

@media(max-width:768px){
 .contact-content{
  grid-template-columns:1fr;
  text-align:center;
 }

 .row{
  flex-direction:column;
 }
}

.footer{
 padding:6rem 0 3rem;
 background:
 linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),
 url("https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=1200");
 background-size:cover;
 background-position:center;
 background-attachment:fixed;
 color:#ffffff;
}




.footer-content{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
 gap:3rem;
}

.footer-section h3,
.footer-section h4{
 margin-bottom:1rem;
 color:#ffffff;
}
.footer-section h3{
 font-size:2rem;
 letter-spacing:1px;
}

.footer-section p{
 line-height:1.7;
 font-size:.95rem;
 color:rgba(255,255,255,.85);
}

.footer-section ul{
 list-style:none;
 padding:0;
}

.footer-section ul li{
 margin-bottom:.6rem;
}

.footer-section ul li a{
 color:rgba(255,255,255,.85);
 text-decoration:none;
 transition:0.3s;
}

.footer-section ul li a:hover{
 color:#e74c3c;
 padding-left:5px;
}

.social-links{
 display:flex;
 flex-direction:column;
 gap:.5rem;
}

.social-links a{
 color:#dcdcdc;
 text-decoration:none;
 transition:0.3s;
}

.social-links a:hover{
 color:#e74c3c;
 transform:translateX(5px);
}

.footer-bottom{
 margin-top:3rem;
 padding-top:1.5rem;
 border-top:1px solid rgba(255,255,255,.2);
 display:flex;
 justify-content:space-between;
 align-items:center;
 flex-wrap:wrap;
 font-size:.9rem;
}

.back-to-top{
 color:#e74c3c;
 text-decoration:none;
 font-weight:bold;
 transition:0.3s;
}

.back-to-top:hover{
 color:#ffffff;
}

/* Mobile */

@media(max-width:768px){
 .footer-bottom{
  flex-direction:column;
  gap:1rem;
  text-align:center;
 }
}



/* Page Loader */

#loader{
 position:fixed;
 inset:0;
 background:#1c2b3a;
 display:flex;
 justify-content:center;
 align-items:center;
 z-index:9999;
 color:white;
 font-size:2rem;
 letter-spacing:2px;
 transition:.8s;
}

#loader.hide{
 opacity:0;
 pointer-events:none;
}


.about,
.contact{
 position:relative;
 z-index:1;
}

.about-content,
.contact-content{
 position:relative;
 z-index:2;
}


/* ================= MOBILE ADAPTIVE UI ================= */

@media(max-width:768px){

/* Header */

.header{
 padding:.6rem 0;
}

.logo h1{
 font-size:1.4rem;
}

.logo .tagline{
 font-size:.7rem;
}

/* Hero */

.hero{
 height:auto;
 padding:4rem 1rem;
}

.hero-content h2{
 font-size:2rem;
 line-height:1.2;
}

.hero-content p{
 font-size:.95rem;
 padding:0 10px;
}

.hero-buttons{
 flex-direction:column;
 gap:1rem;
}

.btn{
 width:100%;
 text-align:center;
}

/* Mobile Menu */

.nav-links{
 right:10px;
 width:180px;
}

/* Sections */

.section-title{
 font-size:2rem;
}

.section-subtitle{
 font-size:.95rem;
 padding:0 10px;
}

/* Menu cards */

.menu-items{
 grid-template-columns:1fr;
}

.menu-item{
 padding:1.2rem;
}

.menu-item-info h4{
 font-size:1rem;
}

.menu-item-info p{
 font-size:.8rem;
}

.price{
 font-size:1rem;
}

/* About */

.about{
 padding:4rem 1rem;
}

.about-content{
 grid-template-columns:1fr;
 gap:2rem;
}

.about-image img{
 max-width:100%;
}

.about-text{
 padding:1.5rem;
}

/* Contact */

.contact{
 padding:4rem 1rem;
}

.contact-content{
 grid-template-columns:1fr;
 gap:2rem;
}

/* Footer */

.footer{
 padding:3rem 1rem 2rem;
}

.footer-content{
 grid-template-columns:1fr;
 text-align:center;
}

.social-links{
 align-items:center;
}

/* Prevent horizontal scroll */

body{
 overflow-x:hidden;
}

}


/* ===== MOBILE HAMBURGER MENU ===== */

@media(max-width:768px){

.nav{
 position:relative;
}

/* hide menu by default */
.nav-links{
 display:none;
 flex-direction:column;
 position:absolute;
 top:60px;
 right:10px;
 background:#2c3e50;
 width:200px;
 padding:1rem 0;
 border-radius:12px;
 box-shadow:0 10px 30px rgba(0,0,0,.3);
}

/* when active */
.nav-links.active{
 display:flex;
}

/* menu items */

.nav-links li{
 text-align:center;
 margin:.5rem 0;
}

.nav-links a{
 display:block;
 padding:.7rem 1rem;
}

/* hamburger visible on phone */

.hamburger{
 display:block;
}

}


/* ===== DOTTED SEPARATORS ===== */

.menu-item{
 position:relative;
 padding-bottom:1.5rem;
}

.menu-item:not(:last-child)::after{
 content:"";
 position:absolute;
 left:0;
 right:0;
 bottom:0;
 border-bottom:1px dotted rgba(0,0,0,.25);
}
/* ===== CATEGORY FADE IN ===== */

.menu-category{
 opacity:0;
 transform:translateY(40px);
 transition:.8s ease;
}

.menu-category.show{
 opacity:1;
 transform:translateY(0);
}
@media(max-width:768px){

.price{
 text-shadow:0 0 6px rgba(231,76,60,.5);
}

}