/* 
Theme Name: Food Chakra
Theme URI: https://hotcoffeemedia.com/
Description: Custom responsive theme for Food Chakra, built with a lightweight, performance-driven architecture, modern design aesthetics, and seamless cross-device compatibility.
Author: Hot Coffee Media Private Limited
Author URI: https://hotcoffeemedia.com/
Template: hello-elementor
Version: 1.1.1
Text Domain: food-chakra
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: custom-theme, responsive-layout, food-business, performance-optimized, custom-colors, custom-menu, custom-logo
*/

/*** Add your custom styles here ***/
/**Overflow Solver**/
html,
body {
    overflow-x: hidden;
}

/**Image Reveal**/
.food-reveal {
    overflow: hidden;
}

.food-reveal img {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
}

.food-reveal.in-view img {
    animation: foodReveal 1.5s ease forwards;
}

@keyframes foodReveal {
    to {
        opacity: 1;
        clip-path: inset(0);
    }
}

/* Keep images visible while editing with Elementor */
.elementor-editor-active .food-reveal img {
    opacity: 1 !important;
    clip-path: inset(0) !important;
    transform: none !important;
    animation: none !important;
}

/**Service Grid Cards**/
/*Plus Icon*/
.service-plus {
    background-color: #FFF5DD;
    border-radius: 0;
    transition: all 0.3s ease;
}

.service-parent:hover .service-plus {
    border-radius: 32px;
    background-color: #ffffff;
    transition: all 0.5s ease;
}

/*Text*/
@media (min-width: 1025px) {

	.service-parent .service-text {
		opacity: 0;
		transform: translateY(15px);
		transition: opacity 0.4s ease, transform 0.4s ease;
	}

	.service-parent:hover .service-text {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 1024px) {

	.service-parent .service-text {
		opacity: 1;
		transform: none;
	}
}

/**Text Link Color and Weight**/
a {
    background-color: transparent;
    color: var(--e-global-color-primary);
    text-decoration: none;
	font-weight: 500;	
}

a:active,a:hover {
    color:  color: var(--e-global-color-text);
}

/**Non Elementor Page Width**/
/* Non-Elementor Pages */
@media (min-width: 1200px) {
	body:not([class*="elementor-page-"]) .site-main {
		max-width: 1280px;
		width: calc(100% - 40px);
		margin-inline: auto;
		padding-block: clamp(40px, 5vw, 80px);
	}
}

/* Mobile */
@media (max-width: 575px) {
	body:not([class*="elementor-page-"]) .site-main {
		padding-inline: 20px;
		padding-block: 10%;
	}
}