/*
Theme Name: Envo Shopper Child
Theme URI: https://envothemes.com/free-envo-shopper/
Author: EnvoThemes
Author URI: https://envothemes.com/
Description: Child Theme for Envo Shopper is a fast, clean and modern-looking responsive free WooCommerce WordPress theme. This theme supports popular page builders like Elementor, KingComposer, Beaver Builder, SiteOrigin, Thrive Architect, Divi, Brizy, Visual Composer, etc. Envo Shopper is compatible with YITH WooCommerce Wishlist, YITH WooCommerce Compare, WooCommerce Variation Swatches and other popular plugins. The theme is SEO friendly, WPML and RTL ready. Documentation: https://envothemes.com/docs/docs/envo-shopper/ Theme demo ready to import: https://envothemes.com/envo-shopper/
Version: 1.1.4
License: GNU General Public License v3
License URI: http://www.gnu.org/licenses/gpl.html
Tags: one-column, two-columns, full-width-template, right-sidebar, custom-background, custom-menu, custom-header, editor-style, featured-images, translation-ready, custom-logo, threaded-comments, footer-widgets, rtl-language-support, blog, e-commerce
Template: envo-shopper
Text Domain: envo-shopper-child
*/

:root{
      --brand:#0ca100;
      --muted:#f7f7f7;
      --maxw:1200px;
    }
    html { scroll-behavior: smooth; }
    body { margin:0; font-family:Arial, sans-serif, Inter; background:#f9f9f9; color:#222; }

    /* TOP STRIP */
    .top-strip{ position:fixed; top:0; left:0; right:0; height:36px; background:var(--muted); display:flex; align-items:center; justify-content:flex-end; padding:0 20px; z-index:1100; border-bottom:1px solid #e6e6e6; }
    .top-strip .top-right{ display:flex; align-items:center; gap:10px; color:#333; font-weight:600; font-size:clamp(14px,1.6vw,14px); }
    .top-strip a.top-right{text-decoration:auto}
    .top-strip .top-right:hover{ color:var(--brand); }
    .top-strip svg{ width:18px; height:18px; }

    /* HEADER */
    header{ position:fixed; left:0; right:0; top:36px; height:64px; display:flex; align-items:center; z-index:1050; background:rgba(255,255,255,0.92); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 2px 6px rgba(0,0,0,0.06); }
    .nav-inner{ max-width:var(--maxw); margin:0 auto; width:100%; padding:0 20px; display:flex; align-items:center; justify-content:space-between; }
    .logo img{ height:54px; display:block; }

    /* Desktop nav */
    .nav-right{ display:flex; align-items:center; gap:22px; }
    .nav-links{ list-style:none; display:flex; gap:18px; margin:0; padding:0; }
    .nav-links a{ text-decoration:none; color:#333; font-weight:500; }
    .download-btn{ padding:9px 18px; background:var(--brand); color:#fff; border-radius:999px; text-decoration:none; font-weight:600; }

    /* Hamburger (mobile) */
    .hamburger{ display:none; width:44px; height:44px; border-radius:8px; align-items:center; justify-content:center; cursor:pointer; border:none; background:transparent; }
    .hamburger .bar{ width:22px; height:2px; background:#333; display:block; margin:3px 0; transition:all .25s ease; }

    /* SLIDE-IN MENU */
    .mobile-menu{ position:fixed; top:0; right:-360px; width:320px; height:100vh; background:#fff; box-shadow:-10px 0 30px rgba(0,0,0,0.12); z-index:1200; transition:right .32s cubic-bezier(.2,.9,.2,1); padding:80px 20px 20px; overflow:auto; }
    .mobile-menu.open{ right:0; }
    .mobile-menu .close-btn{ position:absolute; top:14px; right:14px; background:transparent; border:none; font-size:22px; cursor:pointer; }
    .mobile-menu nav{ display:flex; flex-direction:column; gap:16px; }
    .mobile-menu a{ text-decoration:none; color:#222; font-size:18px; padding:10px 6px; }
    .mobile-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:1150; opacity:0; pointer-events:none; transition:opacity .2s; }
    .mobile-overlay.show{ opacity:1; pointer-events:auto; }

    /* HERO */
    .hero{ position:relative; min-height:calc(100vh - 100px); display:flex; align-items:center; color:#fff; padding:40px 20px; margin-top:100px; background-image:url('https://tiffinx.in/img/2511/hero-img.png'); background-size:cover; background-position:center; }
    .hero .hero-inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 360px; gap:30px; align-items:center; width:100%; }
    .hero h1{ margin:0; font-weight:800; color:var(--brand); font-size:clamp(28px,6vw,56px); line-height:1.02;  text-shadow:0 1px 0 #fff; text-shadow: -1px -1px 0 white, /* Top-left shadow */
	1px -1px 0 white, /* Top-right shadow */
	-1px 1px 0 white, /* Bottom-left shadow */
	1px 1px 0 white; /* Bottom-right shadow */ }
    .hero p{ margin:14px 0; font-size:clamp(14px,1.6vw,18px); max-width:540px; color:#063f12; -webkit-text-stroke: 0px #07ab44; /* Width and color of the outline */
	  text-shadow: -1px -1px 0 #07ab44, /* Top-left shadow */
	1px -1px 0 #07ab44, /* Top-right shadow */
	-1px 1px 0 #07ab44, /* Bottom-left shadow */
	1px 1px 0 #07ab44; /* Bottom-right shadow */ }
    .hero .actions{ display:flex; gap:12px; }
    .chat-box{ background:#fff; border-radius:16px; padding:12px; box-shadow:0 8px 24px rgba(0,0,0,0.12); width:70%; }
    .chat-box img{ width:100%; height:auto; border-radius:10px; }
    .chat-box p{ margin:10px 0 0; background:#dcf8c6; padding:8px 12px; border-radius:10px; color:#222; }

    /* Sections */
    .info{ padding:60px 20px; background:#fff; }
    .info .container{ display:flex; gap:30px; align-items:center; justify-content:space-between; max-width:var(--maxw); margin:0 auto; }
    .info.alt-bg{ background:var(--muted); }
    .info .text{ flex:1; }
    .info .media{ flex:1; }
    .info h2{ color:var(--brand); font-size:24px; margin-bottom:8px; text-transform: uppercase; }
    .info p, .info ul li{ color:#334; line-height:1.6; }
    
	/* Content Container */
    .page-container {max-width: 860px;margin: 150px auto 60px; padding: 0 20px; line-height: 1.65; }
    .page-container h1 {color: var(--brand); font-size: 32px; margin-bottom: 20px; }
    .page-container h2 {margin-top: 32px; margin-bottom: 8px; font-size: 22px; color: var(--brand);}
    .page-container h3 {margin-top: 22px; margin-bottom: 6px; font-size: 18px;}
    .page-container p { margin-bottom: 14px; }
    .page-container ul { margin: 0 0 16px 20px; padding-left: 10px;}
    
    /* Page Container */
    .page-wrapper { padding-top:140px; max-width:var(--maxw); margin:0 auto; padding-left:20px; padding-right:20px; }

    /* Header Title */
    .page-title { font-size:28px; font-weight:700; margin-bottom:20px; color:#111; }

    /* Search Bar */
    .search-bar { display:flex; gap:10px; margin-bottom:25px; }
    .search-bar input { flex:1; padding:12px 15px; font-size:15px; border-radius:8px; border:1px solid #ccc; }
    .filter-btn { background:var(--brand); padding:12px 18px; color:#fff; border-radius:8px; font-weight:600; cursor:pointer; }

    /* Listing Cards */
    .listing { background:#fff; border-radius:12px; padding:16px; margin-bottom:18px; box-shadow:0 2px 8px rgba(0,0,0,0.06); display:flex; gap:15px; }
    .listing img { width:110px; height:110px; border-radius:10px; object-fit:cover; }
    .listing-content { flex:1; }
    .listing-title { font-size:18px; font-weight:600; color:#111; margin-bottom:6px; }
    .listing-desc { font-size:14px; color:#444; margin-bottom:6px; }
    .listing-meta { font-size:13px; color:#666; }
    .call-btn { margin-top:10px; display:inline-block; background:var(--brand); color:#fff; padding:8px 14px; border-radius:6px; font-size:14px; font-weight:600; }

    .ribbon {font-size: 14px;font-weight: bold; color: #fff;}
    .ribbon { --r: .8em; /* control the ribbon shape */ padding-inline: calc(var(--r) + .3em); line-height: 1.8;  clip-path: polygon(0 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,0 100%, var(--r) 50%); background: #CC333F; /* the main color */ width: fit-content;}
    
    /* Footer */
    footer{ background:#111b21; color:#ddd; padding:40px 20px; }
    .footer-top{ max-width:var(--maxw); margin:0 auto 20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:22px; }
    .footer-top h3{ color:#fff; font-size:14px; margin-bottom:8px;text-transform: uppercase; }
	.footer-top ul {list-style: none; padding: 0; margin: 0;}
    .footer-top li { margin: 8px 0;}
	.footer-top a { color: #ccc;text-decoration: none; font-size: 14px;}
	.footer-top a:hover { color:var(--brand);}
	.footer-bottom{ max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; gap:10px; align-items:center; padding-top:12px; border-top:1px solid rgba(255,255,255,0.03); font-size:13px; }
	.footer-bottom .socials {display: flex; gap: 15px;}
	.socials a {display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border: 1px solid #555; border-radius: 50%; text-decoration: none; color: #ccc; font-size: 16px;}
    .socials a:hover { border-color: #0ca100; color: #0ca100;}
	.lang-btn {border: 1px solid #ccc;border-radius: 25px; padding: 8px 20px; background: transparent; color: #ccc; cursor: pointer;}
    .lang-btn:hover {border-color: #0ca100; color: #0ca100;}
    
    /* Veg Icon */
    .veg-square {width: 1em; height: 1em; border: 4px solid #4CAF50; display: flex;justify-content: center; align-items: center;}
	.veg-circle {width: .8em; height: .8em; background-color: #4CAF50; border-radius: 50%;}
	
	/* Egg Icon */
    .egg-square {width: 1em; height: 1em; border: 4px solid rgb(240,196,25); display: flex;justify-content: center; align-items: center;}
	.egg-circle {width: .8em; height: .8em; background-color: rgb(240,196,25); border-radius: 50%;}
	

    /* Responsive adjustments */
    @media (max-width:1024px){
      .hero .hero-inner{ grid-template-columns:1fr 300px; }
      .nav-inner{ padding:0 16px; }
    }
    @media (max-width:800px){
      .nav-links{ display:none; }
      .download-btn{ display:none; }
      .hamburger{ display:block; }
      .hero .hero-inner{ grid-template-columns:1fr; }
      .hero{ padding:30px 16px; }
      .info .container{ flex-direction:column; text-align:center; }
      .top-strip{ height:38px; }
	  .phone-number{ font-size:clamp(14px,1.6vw,16px) }
    }

    @media (max-width:420px){
      .top-strip{ padding:0 12px; }
      .nav-inner{ padding:0 12px; }
      .hero h1{ font-size:28px; }
    }
    
    @media(max-width:768px){
      .nav-links, .download-btn { display:none; }
      .hamburger { display:block; }
      .listing { flex-direction:column; align-items:center; text-align:center; }
      .listing img { width:100%; height:180px; }
      .listing-content { text-align:center; }
    }