@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins/Poppins-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins/Poppins-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

* {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
        sans-serif;
}
html {
    scroll-behavior: smooth;
}
#menu-section,
#about-section,
#contact-section {
    scroll-margin-top: 100px; /* Adjust based on your header height */
}
a {
    text-decoration: none;
    color: inherit;
}
body {
    margin: 0px;
}
.bold {
    font-weight: 700;
}

.header_with_bg_img {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
}
.header_with_bg_img .main_home_image {
    position: relative;
    top: 100px;
    left: 0;
    width: 100%;
    margin-bottom: 100px;
}
.header_with_bg_img .main_home_image img {
    width: 100%;
    object-fit: fill;
}

.header {
    position: fixed;
    z-index: 1;
    width: 100%;
    display: flex;
}
.header_content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 70px;
    background-color: #fff;
}
.header_logo {
    width: 124px;
}
.nav_tabs {
    display: flex;
    width: 50%;
    justify-content: space-evenly;
    font-size: 16px;
    font-weight: 700;
    align-items: center;
    color: #074c3a;
}
.lang_btn {
    background-color: #074c3a;
    border-radius: 10px;
    border: none;
    padding: 8px 24px;
    color: white;
    font-size: 16px;
    font-weight: 700;
}

.content_main {
    position: relative;
    top: 0px;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.catigories {
    background-color: #cead6a;
    border-radius: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    color: #fff;
    box-shadow: 0px 4px 4px #00000040;
    overflow: scroll;
    scrollbar-width: none;
}
.catigory_span {
    padding: 8px 16px;
    font-weight: 700;
    margin: 8px;
}
.active {
    background-color: #fff;
    color: #cead6a;
    border-radius: 10px;
}
.home_page_content {
    padding: 32px;
}
.menu_page_content {
    display: flex;
}
.menu_list {
    background-color: #074c3a;
    width: 25%;
    color: #cead6a;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 60px;
    margin-top: -10px;
}
.menu_list_item {
    padding: 8px 16px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
}
.active_menu {
    background-color: #cead6a;
    color: #074c3a;
}
.cards_div {
    margin: 20px 0px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    height: fit-content;
}
.card {
    display: flex;
    flex-direction: column;
    width: 25%;
    box-shadow: 0 0px 6px 1px #63460c80;
    padding: 16px;
    border-radius: 10px;
    gap: 16px;
    font-size: 20px;
    height: auto;
}
.suggested_card {
    background-image: url("../images/Union.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 400px;
    font-size: 20px;
    color: #4c370e;
    padding: 8px;
    text-align: center;
}
.suggested_card .item_image {
    width: 70%;
}
.suggested_card .item_details {
    height: 50%;
}
.about_us_div {
    background-image: url("../images/home_page_image.png");
}
.item_image {
    display: flex;
}
.item_image img {
    display: flex;
    width: 100%;
}
.item_name {
    font-size: 24px;
    font-weight: 700;
    color: #4c370e;
}
.bottom_elements {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.add_to_cart {
    background-color: #cead6a;
    color: #4c370e;
    font-weight: 700;
    border: none;
    padding: 8px 16px;
    font-size: 20px;
}
.price {
    font-size: 24px;
    color: #074c3a;
    font-weight: 700;
}

/***************** Footer *********************/
.footer_main {
    position: relative;
    left: 0px;
    bottom: 0px;
    width: 100%;
    background-color: #074c3a;
}
.footer_content {
    padding: 20px 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.footer_content .nav_tabs {
    color: #cead6a;
}
.logo_copyrights {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #cead6a;
}
.social_media {
    display: flex;

    gap: 36px;
}

/********************************************/
.about_us_divs {
    display: flex;
    padding: 16px 40px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.about_us_details {
    background-color: #fff;
    margin: 20px;
    padding: 16px 40px;
    border-radius: 20px 0px;
}
.about_us_details .title {
    color: #cead6a;
    font-size: 24px;
    font-weight: 700;
}
.about_us_details .details {
    color: #074c3a;
    font-size: 20px;
}
.shapes_row {
    width: 100%;
}
.shapes_row img {
    width: 100%;
}

.contact_us_div {
    display: flex;
}
.dish_details_div {
    display: flex;
}
.first_side {
    width: 100%;
    padding: 40px;
}
.map_image {
    border-radius: 20px;
}
.map_image img {
    border-radius: 20px;
}
.second_side {
    width: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.second_side .div_title {
    font-size: 28px;
    font-weight: 700;
    color: #cead6a;
}
.contact_us_form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
.contact_input {
    width: 100%;
    padding: 16px;
    border: none;
    background-color: #fbfbfb;
    border-radius: 20px;
    font-size: 20px;
}
.contact_us_button {
    width: 100%;
    padding: 16px;
    border: none;
    background-color: #cead6a;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    border-radius: 20px;
}
.contact_div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 40px;
}
.small_div {
    width: 20%;
    display: flex;
    gap: 20px;
}
.small_div .texts {
    display: flex;
    flex-direction: column;
}
.small_text {
    color: #615e5b;
}
.times_div {
    background-color: #cead6acc;
    padding: 20px;
}
.times_div .inner_div {
    background-color: #ffffffaf;
    border-radius: 10px;
    color: #4c370e;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 16px;
}
.dish_image {
    display: flex;
    justify-content: center;
}
.dish_image img {
    width: 100%;
}
.dish_title {
    font-size: 24px;
    color: #4c370e;
}
.dish_details {
    font-size: 20px;
    color: #074c3a;
}
.dish_details_div_main .title {
    color: #cead6a;
    font-size: 24px;
    margin-inline-start: 40px;
}

@media screen and (max-width: 600px) {
    .menu_list {
        width: 100%;
    }
    .header_logo {
        width: 70px;
    }
    .header {
        position: fixed;
        z-index: 1;
        width: 100%;
        display: flex;
    }
    .header_content {
        width: 100%;
        display: block;
        padding: 16px 30px;
    }
    .nav_tabs {
        width: 100%;
    }
    .suggested_card {
        width: 75%;
    }
    .social_media {
        display: flex;

        gap: 0px;
    }
    .map_image {
        display: none;
    }
    .about_us_divs {
        flex-wrap: wrap;
    }
    .contact_us_div .first_side {
        display: none;
    }
    .suggested_card .item_details {
        /* background-color: #cead6a; */
    }
    .dish_details_div {
        display: flex;
        flex-wrap: wrap;
    }
    .card {
        width: 75%;
        height: fit-content;
    }
    .lang_toggle{
      display: flex;
      justify-content: end;
      margin-top: 10px;
    }
    .contact_div {
    flex-direction: column;
}
}