/*
Theme Name: Flame Restaurant
Description: A custom child theme for Flame Restaurant built on Hello Elementor.
Template: hello-elementor
Version: 1.0.0
Text Domain: flame-restaurant
*/

/*-- Laptop --*/
/* @media (min-width:1200px) and (max-width: 1365px) {} */
/*-- Tablet Landscape --*/
/* @media (min-width:1024px) and (max-width: 1199px) {} */
/*-- Tablet Potrait --*/
/* @media (min-width:880px) and (max-width: 1023px) {} */
/*-- Mobile Landscape --*/
/* @media (min-width:768px) and (max-width: 879px) {} */
/*-- Mobile Potrait --*/
/* @media screen and (max-width:767px) {} */

/* Color Definitions
Primary: Main brand color for prominent elements like headings and icons, establishing the site's core visual identity.
Secondary: Supporting color for sub-elements such as list items, subheadings, animated headings, and price table backgrounds.
Text: Standard color for body paragraphs and menu items, ensuring readable content across the site.
Accent: Highlight color for interactive or attention-grabbing items like links, button backgrounds, tabs, accordions, and badges. */

:root {
    --color-primary: #ffffff;
    --color-secondary: #000000;
    --color-text: #ffffff;
    --color-accent: #D6BC7F;
    --gradient-one: linear-gradient(180deg, #BB9451 0%, #F3E8B2 50.48%, #BB9451 99.04%);
    --gradient-two: linear-gradient(180deg, #BB9451 0%, #F3E8B2 100%);
    --gradient-voucher-one: linear-gradient(110.04deg, #E9E9E9 0%, #F7F7F7 99.05%);
    --gradient-voucher-two: linear-gradient(110.04deg, #981318 0%, #E33134 99.05%);
    --gradient-voucher-three: linear-gradient(110.04deg, #32910F 0%, #4CAF50 99.05%);
    --gradient-voucher-four: linear-gradient(110.04deg, #D6BC7F 0%, #FACE8D 99.05%);
    --color-white: #ffffff;
    --color-yellow-one: #AD955B;
    --color-yellow-two: #BB9451;
    --color-yellow-three: #F3E8B2;
}
@media (min-width:768px) and (max-width: 1599px) {
  .e-con {
    --container-max-width: 90%;
  }
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 700!important;
}
h1,
.elementor-widget-heading h1.elementor-heading-title {
    line-height: 1.1em;
}
a {
    text-decoration: none !important;
}
a:hover,
a:focus,
a:active,
a:visited,
a:focus-within,
a:focus-visible {
    outline: none!important;
}
ul, ol {
    list-style-position: inside;
    margin-left: 0;
    padding-left: 0;
}
ul li, 
ol li {
    margin-top: 15px;
}
ul li:first-child, 
ol li:first-child {
    margin-top: 0;
}
.color-accent span {
    color: var(--color-accent);
}
.elementor-widget-button .elementor-button {
    background: var(--gradient-one);
    color: var(--color-secondary)!important;
    font-weight: 700!important;
    position: relative;
    overflow: hidden;
    /* transition: background 1s ease; */
    transition: none!important;
}
.elementor-widget-button .elementor-button:hover {
    background: var(--color-white);
    color: var(--color-secondary)!important;
}
.elementor-widget-button .elementor-button::before {
    background: var(--color-white);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    /* opacity: 0; */
    width: 100%;
    height: 0;
    /* transition: top 0.5s ease, opacity 0.5s ease; */
    z-index: -1;
}
.elementor-widget-button .elementor-button:hover::before {
    height: 100%;
}
.elementor-widget-button .elementor-button::after {
    background: var(--gradient-two);
    content: "";
    position: absolute;
    top: calc(100% - 5px);
    left: 0;
    opacity: 1;
    width: 100%;
    height: 15px;
    transition: top 0.5s ease, opacity 0.5s ease;
    z-index: 0;
}
.elementor-widget-button .elementor-button:hover::after {
    top: 0;
    opacity: 0;
}
.text-gradient>* {
  background-image: var(--gradient-one)!important;
  -webkit-background-clip: text!important;
  color: transparent!important;
}
.bg-gradient-one {
    background: var(--gradient-one)!important;
}
.fs-in,
.fs-in a {
    font-size: inherit!important;
}
.fs-in-700 a {
    font-size: inherit!important;
    font-weight: 700!important;
}
/*---- Menu CSS - START ----*/
.main-menu nav>ul.elementor-nav-menu li a {
    transition: 0.5s ease;
    line-height: 1;
}
.main-menu nav>ul.elementor-nav-menu li a::before {
    content: "";
    background: var(--color-white);
    position: absolute;
    top: 50%;
    left: 0;
    width: 60px;
    height: 5px;
    opacity: 0;
    transform: translateY(-50%);
    transition: 0.5s ease;
}
.main-menu nav>ul.elementor-nav-menu>li.current_page_item>a::before,
.main-menu nav>ul.elementor-nav-menu>li.current_page_parent>a::before,
.main-menu nav>ul.elementor-nav-menu>li.current_page_parent>ul.sub-menu>li.current_page_item>a::before,
.main-menu nav>ul.elementor-nav-menu li a:hover::before,
.main-menu nav>ul.elementor-nav-menu li a:focus::before,
.main-menu nav>ul.elementor-nav-menu li a:active::before {
    opacity: 1!important;
}
.main-menu nav>ul.elementor-nav-menu>li.current_page_item>a,
.main-menu nav>ul.elementor-nav-menu>li.current_page_parent>a,
.main-menu nav>ul.elementor-nav-menu>li.current_page_parent>ul.sub-menu>li.current_page_item>a,
.main-menu nav>ul.elementor-nav-menu li a:hover,
.main-menu nav>ul.elementor-nav-menu li a:focus,
.main-menu nav>ul.elementor-nav-menu li a:active {
    padding-left: 80px!important;
}
.menu-copyright a {
    color: var(--color-text);
    font-size: unset!important;
    font-weight: 700!important;
}
.main-menu nav>ul.elementor-nav-menu li.menu-item-has-children ul.sub-menu {
    /* display: block; */
    padding-left: 60px;
}
.main-menu nav>ul.elementor-nav-menu li.menu-item-has-children ul.sub-menu li {
    border: none!important;
}
@media (min-width:768px) and (max-width:1366px) {
    .main-menu nav>ul.elementor-nav-menu li a {
        padding-top: 20px!important;
        padding-bottom: 20px!important;
    }
    .main-menu nav>ul.elementor-nav-menu li a::before {
        width: 40px;
        height: 4px;
    }
    .main-menu nav>ul.elementor-nav-menu li.current_page_item a,
    .main-menu nav>ul.elementor-nav-menu li a:hover,
    .main-menu nav>ul.elementor-nav-menu li a:focus,
    .main-menu nav>ul.elementor-nav-menu li a:active {
        padding-left: 50px!important;
    }	
	.main-menu nav>ul.elementor-nav-menu li.menu-item-has-children ul.sub-menu {
		padding-left: 40px;
	}
}
@media screen and (max-width: 767px) {
    .main-menu nav>ul.elementor-nav-menu li a::before {
        width: 30px;
        height: 3px;
    }
    .main-menu nav>ul.elementor-nav-menu li.current_page_item a,
    .main-menu nav>ul.elementor-nav-menu li a:hover,
    .main-menu nav>ul.elementor-nav-menu li a:focus,
    .main-menu nav>ul.elementor-nav-menu li a:active {
        padding-left: 40px!important;
    }	
	.main-menu nav>ul.elementor-nav-menu li.menu-item-has-children ul.sub-menu {
		padding-left: 30px;
	}
}
/*---- Menu CSS - END ----*/
/*---- Our Menu CSS - START ----*/
.menu-box {
    /* transition: background-size 0.5s ease-in-out, overflow 1s ease-out; */
    /* overflow: visible; */
    transition: all 0.5s;
}
.menu-box:hover {
    background-size: 200%!important;
    /* overflow: hidden; */
}
.menu-box .menu-box-cont::after {
    content: "";
    border: 1px solid var(--color-white);
    border-radius: 6px;
    position: absolute;
    top: 20px;
    left: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    transition: all 0.5s;
}
.menu-box:hover .menu-box-cont::after {
    transform: rotate(20deg);
}
.menu-box .menu-box-img-one {
    transform: scale(1);
    height: 100%;
    width: 100%;
    transition: transform 0.5s ease-in-out;
}
.menu-box:hover .menu-box-img-one {
    transform: scale(1.19);
}
.menu-box .menu-box-img-two {
    transform: scale(1);
    height: 100%;
    width: 100%;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.menu-box:hover .menu-box-img-two {
    transform: scale(1.19);
    opacity: 0;
}
/*---- Our Menu CSS - END ----*/
/*---- Client Review CSS - START ----*/
.client-review-cont {
    background-position: right 40px top 40px !important;
}
/*---- Client Review CSS - END ----*/
/*---- Gallery CSS - START ----*/
.gal-cont {
    display: block;
}
/*---- Gallery CSS - END ----*/
/*---- Footer CSS - START ----*/
.footer-copyright-text span,
.footer-copyright-text a {
    color: var(--color-accent);
}
.footer-copyright-text a {
    font-size: unset!important;
}
/*---- Footer CSS - END ----*/
/*---- Brand Slider Slide Continous - CSS - START ----*/
/*---- Change Slider Settings (Content > Additional Options > Autoplay Speed = 0 & Animation Speed = 3000) ----*/
.brand-slider .swiper-wrapper {
    transition-timing-function: linear !important;
}
/*---- Brand Slider Slide Continous - CSS - END ----*/
/*---- Gift Voucher - CSS - START ----*/
.voucher-box-cont .voucher-box:first-child {
    padding-top: 0;
}
.voucher-box-cont .voucher-box .logo-img {
    background: var(--gradient-voucher-one);
}
.voucher-box-cont .voucher-box:nth-child(2) .logo-img {
    background: var(--gradient-voucher-two);
}
.voucher-box-cont .voucher-box:nth-child(3) .logo-img {
    background: var(--gradient-voucher-three);
}
.voucher-box-cont .voucher-box:nth-child(4)  .logo-img{
    background: var(--gradient-voucher-four);
}
/*---- Gift Voucher - CSS - END ----*/
/*---- Contact Page - CSS - START ----*/
.contact-info ul.elementor-icon-list-items {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 30px 50px;
}
.contact-info ul.elementor-icon-list-items li.elementor-icon-list-item {
    margin: 0 !important;
    padding: 0 !important;
}
.contact-info .elementor-icon-list-text b {
    color: var(--color-text);
}
/*---- Contact Page - CSS - END ----*/