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


html {
    scroll-behavior: smooth;
}


body {

    font-family: Arial, sans-serif;
    background: #faf7f2;
    color: #33251b;

}



header {

    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;

    background: white;

    box-shadow: 0 3px 15px rgba(0, 0, 0, .1);

}



nav {

    height: 80px;

    display: flex;
    align-items: center;
    justify-content: space-around;

}



.logo {

    font-size: 26px;
    font-weight: bold;
    color: #8b572a;

}



nav ul {

    display: flex;
    gap: 30px;
    list-style: none;

}


nav a {

    text-decoration: none;
    color: #33251b;
    font-weight: 500;

}



button {

    background: #9b652d;

    color: white;

    border: none;

    padding: 12px 25px;

    border-radius: 30px;

    cursor: pointer;

}



.hero {

    height: 100vh;

    background:

        linear-gradient(rgba(0, 0, 0, .5),
            rgba(0, 0, 0, .5)),

        url("./images/hero.jpg");


    background-size: cover;
    background-position: center;


    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;

    color: white;

}



.hero h1 {

    font-size: 65px;
    font-family: Georgia, serif;

}


.hero p {

    font-size: 22px;
    margin: 25px;

}



.btn {

    display: inline-block;

    background: #c58a45;

    padding: 15px 35px;

    color: white;

    border-radius: 30px;

    text-decoration: none;

}





section {

    padding: 90px 8%;

}



.title {

    text-align: center;

    font-size: 40px;

    margin-bottom: 45px;

}




.cards {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

}



.card {

    background: white;

    padding: 35px 20px;

    text-align: center;

    border-radius: 20px;

    box-shadow: 0 10px 30px #ddd;

    transition: .3s;

}


.card:hover {

    transform: translateY(-10px);

}



.card h3 {

    margin: 15px;

}





.about {

    display: flex;

    align-items: center;

    gap: 50px;

}



.about img {

    width: 50%;

    border-radius: 25px;

}



.about p {

    line-height: 2;

    font-size: 18px;

}




.menu {

    background: #eee2d3;

}



.menu-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

}



.menu-item {

    background: white;

    display: flex;

    gap: 20px;

    padding: 20px;

    border-radius: 20px;

    align-items: center;

}



.menu-item img {

    width: 150px;

    height: 120px;

    object-fit: cover;

    border-radius: 15px;

}




.gallery {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

}



.gallery img {

    width: 100%;

    height: 280px;

    object-fit: cover;

    border-radius: 20px;

}




footer {

    background: #21160f;

    color: white;

    padding: 60px 8%;

    display: flex;

    justify-content: space-around;

}



footer h3 {

    color: #d69a52;

    margin-bottom: 15px;

}




/* فارسی */

body.rtl {

    direction: rtl;

    text-align: right;

}


body.rtl nav ul {

    direction: rtl;

}


body.rtl .about {

    flex-direction: row-reverse;

}





@media(max-width:900px) {


    nav ul {

        display: none;

    }


    .hero h1 {

        font-size: 40px;

    }



    .cards {

        grid-template-columns: 1fr;

    }



    .about {

        flex-direction: column;

    }



    .about img {

        width: 100%;

    }



    .menu-grid {

        grid-template-columns: 1fr;

    }



    .gallery {

        grid-template-columns: 1fr;

    }



    footer {

        flex-direction: column;

        gap: 30px;

    }



}