/*------------------------------------------------------------------
[Master Stylesheet]

Project:	Restaurant - Multipurpose Html5 Template For Restaurant, Bar and Cafe
Version:	1.0.0
Assigned to:	Themeforest
Primary use:	Restaurant, Bar, Cafe, Food, Meals, Dishes, Cakes, Icecream 
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Table of contents]

1. Fonts
2. Body
3. Default Css
   3.1 Reset Style
   3.2 Form Inputs
   3.3 Button Style
   3.4 Padding Style
   3.5 Margin Style
4. Social Icon
5. Custom Dropdown
6. Search bar
7. Header Style
   7.1 Top Header
   7.2 Navigation Bar
8. Main Slider
9. Heading Style
10. Services
11. Dishes Collection
12. Banner Section
13. Dishes Menu
14. Sticker Style
15. Opening Hours
16. Special menu
17. Our Team
18. Testimonials
19. Blog Section
20. Page Header
21. Register Page
22. Sidebar
23. Comment Area
24. Owl Carousel Style
25. Pagination
26. Preloader
27. Common Css
    27.1 About
    27.2 Admin Section
    27.3 Theme Box
    27.4 Theme Form
28. Service Detail
29. Gallery Page
30. FAQ Page
31. Dishes Page
32. Error Page
33. Contact Page
34. Comming Soon
35. Team Detail
36. Landing Page
37. Dish Filter
38. User Profile
39. Footer

-------------------------------------------------------------------*/

/*---bootstap.CSS ---*/
@import url("assets/css/bootstrap.min.css");
/*---mega menu .CSS ---*/
@import url("assets/plugin/megamenu/css/hover-dropdown-menu.css");
/*---fancybox.CSS ---*/
@import url("assets/plugin/fancyBox/css/jquery.fancybox.css");
/*---acordian.CSS ---*/
@import url("assets/plugin/acordian/css/jquery-ui.css");
/*---owl-carousal.CSS ---*/
@import url("assets/plugin/owl-carousel/css/owl.carousel.css");
@import url("assets/plugin/owl-carousel/css/owl.theme.default.css");
/*---fontawesome.CSS  font ---*/
@import url("assets/plugin/font-awesome/css/font-awesome.min.css");
/* theme effect hover CSS*/
@import url("assets/plugin/hover-effect/css/themeHover.css");
/* fanybox css*/

@import url("assets/css/jquery.fancybox.min.css");

/*---STYLE.CSS inluad style---*/
@import url("assets/css/style.css");

/*---responsive.CSS inluad style---*/
@import url("assets/css/responsive.css");

/*---color.CSS inluad color---*/
@import url("assets/css/color.css");



/*
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }


*/





.menu-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 20px;

}

.category {
        flex: 1 1 30%;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
        margin-bottom: 20px;
        text-align: center;
        margin-right: 30px;

}

.category img {
        width: 100%;
        border-radius: 5px;
        margin-bottom: 10px;
}

h2 {
        margin: 10px 0;
}

ul {
        list-style: none;
        padding: 0;
}

li {
        margin: 5px 0;
}

/* Duyarlı Tasarım */
@media screen and (max-width: 768px) {
        .category {
                flex: 1 1 45%;
        }
}



h2 {
        font-family: "Great Vibes", cursive;
        font-size: 3rem;
        text-align: center;
        color: #ff6a23;
        padding-top: 50px;
}

footer>h2 {
        font-family: "Great Vibes", cursive;
        font-size: 2rem;
        text-align: center;
        color: #964b29;

}
.menu {
        margin-top: 20px;
}

.btn-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 40px 0;
}
.btn-item {
        margin-left: 15px;
}

.photo {
        width: 25%;
        height: 175px;
        object-fit: cover;
        border: 0.25rem solid black;
        border-radius: 10px;
        box-shadow: -10px 10px 10px 0px rgba(0,0,0,0.75);
}
.menu-items {
        display: flex;
        margin: 20px 0;
        padding-right: 50px;
}
.menu-info {
        margin-left: 20px;
        width: 100%;
}
.menu-title {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid black;
}

h4 {
        color: #e00a00;
}

.menu-text {
        padding-top: 20px;
}


[class$="item"]:hover {
        color: #fff;
}



@media screen and (max-width: 768px) {
        [class$="item"] {
                width: 45%;
        }
}
[class$="item"]:hover {
       color: black;


}
.title h2 {
        margin-top: -50px;
}


.btn-container {
        display: flex;
        flex-wrap: wrap;
}