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

body{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
line-height: 1.6;
color: rgb(15, 15, 15);
background-color: rgb(253, 253, 253);
}

h1,h2,h3{
 font-family: Arial, Helvetica, sans-serif;
}

.container{
width: 90%;
max-width: 1200;
margin: auto;
}

header{
background: #43342e;
padding: 15px 0;
position: sticky;
top: 0;
z-index: 1000;
}

.navbar{
display: flex;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
}

.logo img{
width: 50px;
height: 50px;
border-radius: 50%;

}

.logo-text{
font-size: 45px;
font-weight: 800;
text-decoration: none;
color: white;
display: inline-block;
white-space: nowrap;
}

.nav-links{
  display: flex;
  list-style: none;
 
}

.nav-links li{
  margin-left: 20px;
}

.nav-links a{
text-decoration: none;
color: white;
font-weight: bold;
transition: color 0.5s;
}

.nav-links a:hover,
.nav-links .active{
  color: lemonchiffon;
}

.hero{
height: 90vh;
background: url(/imgg/architectural-image_3745307.jpg) center/cover no-repeat;
position: relative;
}

.hero-overlay{
background: (0,0,0,0.5);
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
}

.hero-text h1{
font-size: 3rem;
margin-bottom: 15px;
}

.hero-text p{
font-size: 1.2rem;
margin-bottom: 20px;
}
.hero-text span{
color: lemonchiffon;
font-weight: bold;
}

.btn{
display: inline-block;
padding: 10px 25px;
background: lemonchiffon;
color: #3e2723;
font-weight: bold;
text-decoration: none;
border-radius: 30px;
transition: all 0.3s ease;
}

.btn:hover{
background: lemonchiffon;

}

.section-title{
text-align: center;
font-size: 2rem;
margin-bottom: 40px;
color: #4e342e;
}

.menu-item{
background:white;
border-radius: 10px;
padding: 15px;
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: transform 0.3s;
}



.menu-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
max-width: 1000px;
margin: 50px auto;

}

.menu-item img{
width: 200px;
height: 250px;
object-fit: cover;
border-radius: 10px;

}


.menu-item :hover{
transform: scale(1.05);
}

.menu-item span{
color: orangered;
font-weight: bold;
}

#menu{
margin-bottom: 30px;
  text-align: center;
  padding: 20px;
  display: flex;
}

.menu:nth-child(3){
grid-column: 1/3;
width: 50%;
justify-self: center;
}

.about{
display: flex;
flex-wrap: wrap;
gap: 30px;
align-items: center;
}

.about-text a{
  text-align: center;
}

.about-img{
  flex: 1;
}

.about-img img{
  width: 110%;
  border-radius: 10px;
}
.secondary-btn{
background: transparent;
border: 2px solid coral;
color: coral;
}
.secondary-btn:hover{
background: coral;
color: #3e2723;
}

#about{
  margin-bottom: 20px;
}

.offers{
background:rgb(255, 203, 136) ;
padding: 50px 0;
}

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

.offer-card{
background: white;
padding: 20px;
text-align: center;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: transform 0.3s;
}

.offers h3{
  color: orangered;
}

.offer-card:hover{
  cursor: pointer;
  transform: translateY(5px);
}

.contact form{
display: grid;
gap: 15px;
max-width: 500px;
margin: auto;
}

.contact input,
.conttact textarea{
padding: 10px;
border: 1px solid rgb(0, 0, 0);
border-radius: 5px;
}

.contact button{
  border: none;
  cursor: pointer;
}

#contact{
  margin-bottom: 30px;
}

footer{
background: #3e2723;
color: white;
padding: 20px 0;
text-align: center;
}