/*
Theme Name: Foodking
Author: Modina Theme
Author URI: https://themeforest.net/user/modinatheme/
Description: Fast Food Restaurant Html
Version: 2.0.0
*/

/*
=================================
|***    Table of contents:   ***|
=================================

Main Style file-> assets/css/main.css 

All the SCSS File in SCSS Folder of Assets Folder. You can read the doc file also for better understand.

// BASIC
@import 'basic';

// MIXIN
@import 'variables';

// TYPOGRAPHY
@import 'typography';

// MIX
@import 'mix';

// HELPER
@import 'helper';

// ICON FONTS
@import 'icon';

// ANIMATION
@import 'animation';

// Button 
@import 'btn';

// Colors 
@import 'colors';

// Preloader 
@import 'preloader';

/* ----------------------------------
    Template Section Styles
 ------------------------------------*/

 /* // Menu - Header Section 
 @import 'header';
 
 // Hero Slide - Section 
 @import 'hero';
 
 // Section Title - Heading 
 @import 'section';
 
 // About - Section 
 @import 'about';
 
 // Features - Section 
 @import 'features';
 
 // services - Section 
 @import 'services';
 
 // testimonial - Section 
 @import 'testimonial';
 
 // Portfolio - Cases - Section 
 @import 'project';
 
 // Price Table - Section 
 @import 'price';
 
 // Call To Action - Section 
 @import 'cta';
 
 // Content Block - Section 
 @import 'contentblock';
 
 // team - Section 
 @import 'team';
 
 // funfact - Section 
 @import 'funfact';
 
 // Download - Section 
 @import 'carousel';
 
 // FAQ - Section 
 @import 'faq';
 
 // Blog - Section 
 @import 'blog';
 
 // Contact Us - Section 
 @import 'contact';
 
 // footer - Section 
 @import 'footer';n facts */



/* Add this to the end of your style.css file */

/* Ensure the header logo image is displayed correctly */
.header-logo img {
    height: 75px; /* Set the height to its intrinsic height */
    width: auto;  /* Allow the width to adjust proportionally */
    max-width: 100%; /* Ensure it doesn't overflow its container if the container is smaller */
    display: block; /* Ensures it behaves as a block element within its container */
}

/* If the above isn't enough, you might need to target the parent link as well */
.header-logo {
    height: 75px; /* Give the link container a defined height */
    display: flex; /* Make it a flex container to center the image if needed */
    align-items: center; /* Vertically center the image */
}

/* Add these rules to the end of your assets/css/style.css file */

/* --- Primary Brand Color: Super Gyros Red (#D62C22) - KEEP PREVIOUS OVERRIDES --- */
.theme-color-3 {
    color: #D62C22 !important; 
}
.bg-red-2, 
.theme-btn {
    background-color: #D62C22 !important;
    border-color: #D62C22 !important;
    color: #FFFFFF !important;
}
a:hover {
    color: #D62C22 !important;
}

/* --- Accent Brand Color: Gyros Brown/Orange (#A97B3C) - KEEP PREVIOUS OVERRIDES --- */
.theme-btn.bg-yellow { 
    background-color: #A97B3C !important;
    border-color: #A97B3C !important;
    color: #FFFFFF !important;
}

/* --- Secondary Dark Color: Dark Grey (#3A3A3A) - KEEP PREVIOUS OVERRIDES --- */
.header-top,
footer.section-bg {
    background-color: #ffffff !important; 
}
.header-top ul li,
.header-top .search-wrp input,
.header-top .search-wrp button,
.header-top .social-icon a,
footer .footer-content p,
footer .footer-content span,
footer .footer-content a.link,
footer .footer-widgets-wrapper h4,
footer .list-items a span.effect-1,
footer .footer-address-text h6,
footer .footer-address-text h5,
footer .footer-address-text a,
footer .footer-bottom p,
footer .footer-bottom a {
    color: #000000 !important;
}

/* Social icon spacing fix (for the footer social icons and similar uses) - KEEP PREVIOUS OVERRIDES */
.social-icon a {
    margin-right: 10px; 
}
.social-icon a:last-child {
    margin-right: 0;
}


/* --- NEW/REVISED STYLES FOR FOOD MENU PAGE --- */

/* Main menu section background and default text colors */
.fooder-menu-section {
    background-color: #FFFFFF !important; /* Entire section background to white */
    padding-bottom: 50px; /* Adjust as needed */
    color: #333333; /* Default text color for the section (dark grey) */
}

/* Ensure section titles are dark on the white background */
.fooder-menu-section .section-title span,
.fooder-menu-section .section-title h2 {
    color: #333333 !important; 
}


/* Styling for the category navigation links */
.food-category-nav {
    flex-wrap: wrap; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Subtle dark separator on white background */
    padding-bottom: 15px; 
}

.food-category-nav .nav-item {
    margin: 0 10px 10px; 
}

.food-category-nav .nav-link {
    background-color: transparent !important;
    border: none !important;
    color: #333333 !important; /* Dark text for categories by default */
    font-size: 18px; 
    font-weight: 600;
    padding: 8px 12px;
    transition: color 0.3s ease;
    position: relative;
    white-space: nowrap; 
}

.food-category-nav .nav-link:hover,
.food-category-nav .nav-link.active {
    color: #D62C22 !important; /* Red text on hover/active */
    text-decoration: none;
}

/* Underline effect for active/hover category links */
.food-category-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px; 
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #D62C22; /* Red underline */
    transition: width 0.3s ease;
}

.food-category-nav .nav-link:hover::after,
.food-category-nav .nav-link.active::after {
    width: 100%;
}


/* Styling for individual food menu items */
.fooder-menu-section .food-menu-items {
    background-color: transparent; /* No background by default */
    border-bottom: 1px dashed rgba(0, 0, 0, 0.2); /* Dark dashed line for white background */
    padding: 15px 20px; /* Padding for content inside item */
    margin-bottom: 0;
    transition: background-color 0.3s ease; /* Smooth transition for hover */
    border-radius: 5px; /* Rounded corners for hover background */
}

.fooder-menu-section .food-menu-items:last-child {
    border-bottom: none;
}

/* Hover effect for menu items: red background, white text */
.fooder-menu-section .food-menu-items:hover {
    background-color: #D62C22 !important; /* Your brand red on hover */
}

/* Ensure all text inside menu items turns white on hover */
.fooder-menu-section .food-menu-items:hover h4,
.fooder-menu-section .food-menu-items:hover p,
.fooder-menu-section .food-menu-items:hover p span.price-amount {
    color: #FFFFFF !important; /* All text inside turns white on hover */
}

/* Remove image area for menu items (ensuring no ghost space) */
.food-menu-item .food-image {
    display: none !important; /* Hide the image container completely */
    width: 0 !important; /* Remove any width it might take */
    margin-right: 0 !important; /* Remove any margin it might take */
}


/* Adjustments for text content within menu items */
.fooder-menu-section .food-menu-items h4 {
    font-size: 22px;
    margin-bottom: 5px;
    color: #333333; /* Dark text for title by default */
    font-weight: 600;
}

.fooder-menu-section .food-menu-items h4 a {
    color: inherit;
    text-decoration: none;
}

.fooder-menu-section .food-menu-items h4 a:hover {
    color: #FFFFFF; /* Stays white on hover (as parent background is red) */
}

/* Styles for the price lines (PITA SEUL / TRIO) */
.fooder-menu-section .food-menu-items p {
    font-size: 20px;
    color: #555555; /* Slightly lighter dark grey for description/price labels */
    margin-bottom: 0;
    line-height: 1.4;
}

.fooder-menu-section .food-menu-items p span.price-amount {
    font-weight: bold;
    font-size: 20px;
    color: #D62C22; /* Your brand red for the actual price numbers by default */
}


/* Adjust padding for the tab content */
.food-menu-tab-content {
    padding-top: 30px;
}

/* Ensure the informational text at the bottom is dark on white background */
.fooder-menu-section > p.text-center {
    color: #555555 !important;
}

/* Ensure placeholder text in empty tabs is dark on white background */
.food-menu-tab-content .tab-pane h4,
.food-menu-tab-content .tab-pane p {
    color: #333333 !important; /* Main dark text */
}

/* Specific styling for the small "Change your fries..." text */
.food-menu-tab-content .tab-pane em {
    color: #555555 !important; /* Darker for readability on white background */
}

.header-top .social-icon a {
    color: #FFFFFF !important; /* White text and icons on the dark top bar */
}

header.section-bg,
footer.section-bg {
    background-color: #FFFFFF !important;
}