:root { 
    --jft-primary: #4e8c3e; 
    --jft-dark: #3e2b22; 
    --jft-gold: #eebf45; 
    --jft-navy: #1a3c34; 
    --jft-light: #f5f1e6; 
    --jft-border: #dcd6cb; 
    
    --font-head: 'Merriweather', serif; 
    --font-sub: 'Montserrat', sans-serif; 
    --font-body: 'Lato', sans-serif; 
    
    --radius-sm: 8px; 
    --radius-md: 16px; 
    
    --shadow-subtle: 0 4px 15px rgba(78, 140, 62, 0.08); 
    --shadow-hover: 0 20px 30px -5px rgba(26, 60, 52, 0.15); 
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* --- Reset & Core --- */
body { margin: 0; padding: 0; overflow-x: hidden; font-family: var(--font-body); color: #4a4a4a; background: #fdfbf7; -webkit-font-smoothing: antialiased; } 
* { box-sizing: border-box; } 
html { scroll-behavior: smooth; scroll-padding-top: 100px; }

h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; color: var(--jft-navy); letter-spacing: -0.5px; } 
p { line-height: 1.8; margin-bottom: 1.5rem; font-size: 1.1rem; color: #5c5c5c; } 
a { text-decoration: none; color: inherit; transition: var(--transition); } 
ul { list-style: none; padding: 0; margin: 0; } 
img { max-width: 100%; display: block; border-radius: var(--radius-sm); }

/* --- Scroll Progress Bar --- */
#page-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--jft-gold); z-index: 9999; width: 0%; transition: width 0.1s; }

/* --- Dashboard (Top Bar) --- */
.top-dashboard { position: fixed; top: 0; left: 0; width: 100%; z-index: 2000; background: var(--jft-navy); color: #fff; box-shadow: 0 4px 25px rgba(0,0,0,0.15); font-family: var(--font-sub); }
.td-row-1 { display: flex; height: 42px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.td-social { padding: 0 30px; display: flex; align-items: center; gap: 20px; background: rgba(0,0,0,0.2); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.td-social span { color: var(--jft-gold); text-transform: uppercase; letter-spacing: 1px; } 
.td-social a { color: rgba(255,255,255,0.8); transition: 0.3s; font-size: 1rem; } 
.td-social a:hover { color: var(--jft-gold); transform: translateY(-2px); }

.td-news-ticker { flex: 1; display: flex; align-items: center; overflow: hidden; background: var(--jft-navy); position: relative; }
.ticker-label { background: var(--jft-primary); color: #fff; padding: 0 25px; height: 100%; display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; z-index: 2; clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%); padding-right: 40px; white-space: nowrap; }
.live-dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; animation: livePulse 1.5s infinite; }
@keyframes livePulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }

.ticker-track { display: flex; animation: scrollText 60s linear infinite; white-space: nowrap; padding-left: 10px; } 
.td-news-ticker:hover .ticker-track { animation-play-state: paused; }
.t-item { margin-right: 60px; font-family: var(--font-body); font-size: 0.85rem; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.9); } 
.t-item i { color: var(--jft-gold); font-size: 0.8rem; } 
.t-item span { color: #fff; font-weight: 800; font-family: var(--font-sub); font-size: 0.75rem; text-transform: uppercase; }
@keyframes scrollText { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.td-utilities { display: flex; align-items: center; padding: 0 25px; background: rgba(0,0,0,0.2); font-size: 0.75rem; font-weight: 700; }

/* Translate & Lang */
.lang-dropdown { position: relative; cursor: pointer; } 
.lang-btn { background: none; border: none; color: #fff; font-family: var(--font-sub); font-weight: 700; font-size: 0.75rem; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 0; text-transform: uppercase; letter-spacing: 0.5px; } 
.lang-btn i { color: var(--jft-gold); }
.lang-menu { position: absolute; top: 100%; right: 0; width: 180px; background: #fff; border-radius: 0 0 8px 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); display: none; flex-direction: column; overflow: hidden; z-index: 2001; } 
.lang-menu.show { display: flex; } 
.lang-menu a { padding: 12px 20px; color: var(--jft-navy); border-bottom: 1px solid #f0f0f0; transition: 0.2s; font-size: 0.85rem; font-weight: 600; cursor: pointer; } 
.lang-menu a:hover { background: #f9f9f9; color: var(--jft-primary); padding-left: 25px; }
#google_translate_element, .goog-te-banner-frame { display: none !important; } body { top: 0px !important; }

.td-row-2 { display: flex; justify-content: space-between; align-items: center; height: 38px; background: #fff; color: var(--jft-navy); padding: 0 0 0 20px; font-weight: 700; border-bottom: 1px solid #eee; }
.forex-group { display: flex; gap: 25px; align-items: center; font-size: 0.8rem; } 
.forex-item { display: flex; align-items: center; gap: 6px; } 
.forex-up { color: #16a34a; background: #ecfdf5; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; }
.visit-plan { display: flex; align-items: center; gap: 10px; background: var(--jft-gold); color: var(--jft-navy); height: 100%; padding: 0 30px; font-size: 0.75rem; clip-path: polygon(20px 0, 100% 0, 100% 100%, 0% 100%); transition: 0.3s; letter-spacing: 0.5px; font-weight: 800; } 
.visit-plan:hover { background: var(--jft-navy); color: #fff; } .visit-plan i { animation: pulse 1.5s infinite; }

/* --- Layout & Utilities --- */
.jft-wide-container { max-width: 1350px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 5; }
.section-padding { padding: 110px 0; } 
.bg-light { background-color: var(--jft-light); } 
.text-center { text-align: center; }
.bg-pattern { background-color: #F0EFE9; background-image: radial-gradient(#D6D1C4 1px, transparent 1px); background-size: 20px 20px; }

/* --- Preloader --- */
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #112621 0%, #1a3c34 50%, #29574c 100%); z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1); }
#preloader::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(rgba(238, 191, 69, 0.2) 1px, transparent 1px); background-size: 30px 30px; opacity: 0.2; pointer-events: none; }
.loader-logo-img { width: 220px; margin-bottom: 30px; filter: brightness(0) invert(1); animation: logoFloat 3s ease-in-out infinite; }
.loader-text { font-family: var(--font-head); font-size: 0.95rem; color: rgba(255,255,255,0.8); font-weight: 400; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 3px; }
.loader-track { width: 200px; height: 2px; background: rgba(255,255,255,0.1); position: relative; overflow: hidden; border-radius: 2px; }
.loader-fill { width: 100%; height: 100%; background: var(--jft-gold); transform: translateX(-100%); animation: goldLineAnim 2s cubic-bezier(0.85, 0, 0.15, 1) forwards; }
@keyframes goldLineAnim { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } 
@keyframes logoFloat { 0%, 100% { transform: translateY(0); opacity: 0.9; } 50% { transform: translateY(-5px); opacity: 1; } }

/* --- Navbar --- */
.jft-navbar { position: fixed; top: 80px; left: 0; width: 100%; height: 90px; z-index: 1000; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,0.05); display: flex; align-items: center; }
.jft-navbar.scrolled { top: 80px; height: 70px; background: rgba(255, 255, 255, 0.98); box-shadow: 0 5px 20px rgba(0,0,0,0.08); }
.nav-flex { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; }
.nav-logo-link { display: flex; align-items: center; height: 100%; } 
.nav-logo-img { height: 75px; width: auto; transition: all 0.4s ease; object-fit: contain; filter: none; } 
.jft-navbar.scrolled .nav-logo-img { height: 55px; }

.nav-menu { display: flex; gap: 40px; align-items: center; height: 100%; }
.nav-link { font-family: var(--font-sub); font-size: 0.85rem; font-weight: 700; color: var(--jft-navy); text-transform: uppercase; letter-spacing: 1.5px; position: relative; padding: 5px 0; transition: 0.3s; cursor: pointer; }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background: var(--jft-primary); transition: width 0.3s ease; } 
.nav-link:hover { color: var(--jft-primary); } 
.nav-link:hover::after { width: 100%; }

.nav-btn-action { padding: 12px 28px; background: var(--jft-primary); color: #fff; border-radius: 50px; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; border: 1px solid var(--jft-primary); transition: 0.3s; box-shadow: 0 4px 15px rgba(78, 140, 62, 0.2); } 
.nav-btn-action:hover { background: var(--jft-dark); border-color: var(--jft-dark); transform: translateY(-2px); }
.mobile-toggle { display: none; font-size: 1.8rem; color: var(--jft-navy); cursor: pointer; transition: color 0.3s; }

/* --- Global Elements (Titles, Buttons) --- */
.section-header { margin-bottom: 60px; max-width: 800px; } 
.center-header { margin-left: auto; margin-right: auto; text-align: center; }
.brand-tag { display: inline-block; font-family: var(--font-sub); font-size: 0.8rem; font-weight: 700; color: var(--jft-primary); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; background: rgba(78, 140, 62, 0.1); padding: 8px 16px; border-radius: 50px; border: 1px solid rgba(78, 140, 62, 0.2); }

.section-title { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 700; line-height: 1.2; color: var(--jft-navy); } 
.section-title span { color: var(--jft-primary); position: relative; display: inline-block; z-index: 1; }
.section-title span::after { content: ''; position: absolute; bottom: 8px; left: 0; width: 100%; height: 12px; background: var(--jft-gold); opacity: 0.3; z-index: -1; }

.section-desc { font-size: 1.15rem; max-width: 700px; margin-top: 20px; color: #6b6b6b; font-weight: 400; }

.btn-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--jft-primary); color: #fff; padding: 16px 40px; font-family: var(--font-sub); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; border-radius: 50px; transition: var(--transition); border: 2px solid var(--jft-primary); box-shadow: 0 4px 10px rgba(78, 140, 62, 0.3); } 
.btn-primary:hover { background: var(--jft-dark); border-color: var(--jft-dark); transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 2px solid #fff; color: #fff; padding: 16px 40px; font-family: var(--font-sub); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; border-radius: 50px; transition: var(--transition); } 
.btn-outline:hover { background: #fff; color: var(--jft-primary); border-color: #fff; }

.sticky-quote { position: fixed; right: 0; top: 50%; transform: translateY(-50%) rotate(-90deg) translateX(50%); transform-origin: right center; z-index: 99; }
.sticky-btn { background: var(--jft-primary); color: #fff; padding: 12px 30px; font-family: var(--font-sub); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; border-radius: 10px 10px 0 0; box-shadow: -4px 0 10px rgba(0,0,0,0.2); transition: 0.3s; display: block; font-size: 13px; } 
.sticky-btn:hover { background: var(--jft-gold); color: #000; padding-bottom: 20px; }
.whatsapp-float { position: fixed; bottom: 30px; left: 30px; width: 60px; height: 60px; background-color: #25d366; color: #FFF; border-radius: 50px; text-align: center; font-size: 30px; box-shadow: 2px 2px 3px #999; z-index: 100; display: flex; align-items: center; justify-content: center; transition: 0.3s; } 
.whatsapp-float:hover { transform: scale(1.1); background-color: #128C7E; }

/* --- Hero --- */
.jft-hero-banner { position: relative; height: 100vh; width: 100vw; overflow: hidden; background: #000; }
.hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 1.5s ease-in-out; background-size: cover; background-position: center; } 
.hero-slide.active { opacity: 1; visibility: visible; }
.hero-slide::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(26, 60, 52, 0.9) 0%, rgba(26, 60, 52, 0.5) 60%, rgba(238, 191, 69, 0.1) 100%); z-index: 1; }

.hero-content { position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 1350px; padding: 0 40px; z-index: 10; color: #fff; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.hero-tag { font-family: var(--font-sub); color: var(--jft-gold); font-weight: 700; letter-spacing: 3px; font-size: 14px; text-transform: uppercase; margin-bottom: 20px; display: inline-block; border-bottom: 2px solid var(--jft-gold); padding-bottom: 5px; }
.hero-title { font-size: clamp(3rem, 5.5vw, 5.5rem); line-height: 1.2; font-weight: 700; margin-bottom: 30px; text-shadow: 0 10px 30px rgba(0,0,0,0.5); font-family: var(--font-head); }
.hero-desc { font-size: 1.35rem; max-width: 650px; color: #e2e8f0; margin-bottom: 45px; font-weight: 300; border-left: 4px solid var(--jft-primary); padding-left: 25px; line-height: 1.6; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.hero-actions { display: flex; gap: 20px; }

.slider-controls { position: absolute; bottom: 50px; right: 50px; display: flex; gap: 15px; z-index: 20; }
.control-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); cursor: pointer; transition: 0.3s; background: transparent; } 
.control-dot.active { background: var(--jft-gold); border-color: var(--jft-gold); transform: scale(1.2); }

/* --- Stats & About --- */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; border-top: 1px solid var(--jft-border); border-bottom: 1px solid var(--jft-border); padding: 60px 0; margin-bottom: 80px; }
.stat-item { position: relative; text-align: center; overflow: hidden; padding: 10px 0; }
.stat-item h3 { font-size: 3.5rem; color: var(--jft-primary); font-weight: 700; line-height: 1; font-family: var(--font-sub); margin: 0; position: relative; z-index: 2; }
.stat-item p { font-family: var(--font-sub); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; color: #888; letter-spacing: 1px; margin: 10px 0 0 0; position: relative; z-index: 2; }
.stat-item::before { content: attr(data-count); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 8rem; color: rgba(78, 140, 62, 0.05); font-weight: 900; font-family: var(--font-sub); z-index: 0; line-height: 0; white-space: nowrap; }

.about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: start; }
.features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.feature-card { background: #fff; padding: 35px; border: 1px solid transparent; border-radius: var(--radius-md); transition: var(--transition); box-shadow: var(--shadow-subtle); } 
.feature-card:hover { border-color: var(--jft-primary); box-shadow: var(--shadow-hover); transform: translateY(-5px); }
.feat-icon { font-size: 28px; color: var(--jft-primary); margin-bottom: 20px; } 
.feat-title { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; color: var(--jft-navy); } 
.feat-text { font-size: 1rem; margin: 0; color: #666; }

/* --- Manufacturing & Origin --- */
.manu-layout { display: flex; align-items: center; gap: 80px; }
.section-india { position: relative; overflow: hidden; } 
.india-layout { display: flex; align-items: center; gap: 80px; } 
.india-text { flex: 1; }
.india-visual { flex: 1; position: relative; height: 600px; display: flex; align-items: center; justify-content: center; }
.india-visual img { width: 100%; max-width: 600px; filter: drop-shadow(0 20px 30px rgba(58,107,55,0.2)); transform: scale(1.1); transition: transform 0.5s ease; } 
.india-visual img:hover { transform: scale(1.15); }
.origin-badge { display: inline-flex; align-items: center; gap: 10px; padding: 12px 25px; background: var(--jft-light); border: 1px solid var(--jft-border); border-radius: 50px; font-family: var(--font-sub); font-weight: 600; font-size: 0.9rem; color: var(--jft-navy); margin-right: 10px; margin-top: 20px; } 
.origin-badge i { color: #ff9933; }

/* --- VMV Section (Tabs) --- */
.jft-vmv-section { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; min-height: 100vh; display: flex; align-items: center; background: radial-gradient(circle at 20% 20%, #fdfbf7, #f5f1e6); font-family: var(--font-body); overflow: hidden; padding: 0; }
.jft-full-width-wrapper { width: 100%; height: 100%; display: flex; flex-wrap: wrap; }
.vmv-half { flex: 1 1 50%; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 5; }
.vmv-left { align-items: flex-start; background: rgba(255,255,255,0.4); backdrop-filter: blur(5px); padding-left: 5%; padding-right: 20px; padding-top: 100px; }
.vmv-right { align-items: center; background: radial-gradient(circle at 50% 50%, rgba(78, 140, 62, 0.05), transparent 70%); padding-right: 0; padding-left: 20px; justify-content: center; padding-top: 0; }
.rotating-wrapper { width: 100%; max-width: 800px; height: auto; position: relative; transition: transform 0.1s linear; will-change: transform; transform-origin: center center; margin-right: -50px; } 
.rotating-wrapper img { width: 100%; height: auto; display: block; filter: drop-shadow(20px 20px 60px rgba(0,0,0,0.15)); }
.visual-shadow { width: 50%; height: 40px; background: radial-gradient(ellipse, rgba(0,0,0,0.2), transparent); margin-top: 40px; border-radius: 50%; filter: blur(15px); }
.content-inner { width: 100%; max-width: 800px; padding-left: 0; }
.tab-wrapper { position: relative; min-height: 700px; }
.tab-nav { display: flex; gap: 15px; border-bottom: none; margin-bottom: 45px; width: 100%; }
.tab-btn { font-family: var(--font-sub); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; padding: 14px 28px; border-radius: 50px; cursor: pointer; transition: 0.4s; display: inline-flex; align-items: center; gap: 10px; background: transparent; color: var(--jft-primary); border: 2px solid var(--jft-primary); }
.tab-btn:hover, .tab-btn.active { background: var(--jft-primary); color: #ffffff; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(78, 140, 62, 0.3); } 
.tab-btn:hover i, .tab-btn.active i { color: #ffffff; }

.pane-heading { font-family: var(--font-head); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 700; margin: 0 0 30px 0; color: var(--jft-navy); line-height: 1.2; }
.highlight { color: var(--jft-primary); position: relative; } 
.highlight::after { content: ''; position: absolute; bottom: 8px; left: 0; width: 100%; height: 12px; background: var(--jft-gold); opacity: 0.3; z-index: -1; }

.vmv-list { display: flex; flex-direction: column; gap: 15px; }
.vmv-row { display: flex; gap: 25px; padding: 25px; background: #fff; border-radius: var(--radius-md); border: 1px solid rgba(0,0,0,0.03); border-left: 5px solid transparent; box-shadow: 0 5px 20px rgba(0,0,0,0.03); transition: 0.3s ease; align-items: flex-start; width: 100%; opacity: 0; transform: translateY(20px); }
.vmv-row:hover { transform: translateX(10px) !important; border-left-color: var(--jft-gold); box-shadow: 0 15px 35px rgba(78, 140, 62, 0.12); }
.row-badge { flex-shrink: 0; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; line-height: 1; font-size: 24px; color: var(--jft-primary); background: #f0f7ec; border: 1px solid rgba(78, 140, 62, 0.2); transition: 0.3s; }
.vmv-row:hover .row-badge { background: var(--jft-gold); color: #fff; border-color: var(--jft-gold); transform: rotateY(360deg); }
.row-text h3 { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: var(--jft-navy); margin: 0 0 6px 0; letter-spacing: -0.5px; } 
.row-text p { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: #666; margin: 0; }
@keyframes dropIn { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
.active-pane .vmv-row { animation: dropIn 0.5s ease forwards; } 
.active-pane .vmv-row:nth-child(1) { animation-delay: 0.1s; } 
.active-pane .vmv-row:nth-child(2) { animation-delay: 0.2s; } 
.active-pane .vmv-row:nth-child(3) { animation-delay: 0.3s; }

.tab-pane { display: none; } .tab-pane.active-pane { display: block; }

/* --- Products --- */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 35px; }
.prod-card { perspective: 1000px; cursor: pointer; height: 450px; }
.prod-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-style: preserve-3d; } 
.prod-card:hover .prod-inner { transform: rotateY(180deg); }
.prod-front, .prod-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-subtle); }
.prod-front img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.95); transition: 0.5s; }
.prod-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 35px; background: linear-gradient(to top, rgba(26, 60, 52, 0.95), transparent); color: #fff; }
.prod-overlay h3 { color: #fff; font-size: 1.6rem; margin-bottom: 5px; font-family: var(--font-head); } 
.prod-overlay span { font-family: var(--font-sub); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: var(--jft-gold); font-weight: 600; }
.prod-back { background: var(--jft-navy); color: #fff; transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; text-align: center; border: 2px solid var(--jft-gold); } 
.prod-back h3 { color: var(--jft-gold); margin-bottom: 20px; font-size: 1.8rem; }
.view-btn { padding: 12px 30px; background: var(--jft-gold); color: var(--jft-navy); border-radius: 50px; font-family: var(--font-sub); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; transition: 0.3s; margin-top: 25px; font-weight: 700; border: none; } 
.view-btn:hover { background: #fff; color: var(--jft-navy); }

/* --- Logistics --- */
.logistics-banner { background-image: url('https://images.unsplash.com/photo-1578575437130-527eed3abbec?q=80&w=2070&auto=format&fit=crop'); background-attachment: fixed; background-size: cover; background-position: center; padding: 160px 0; position: relative; color: #fff; text-align: center; overflow: hidden; }
.overlay-dark { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(26, 60, 52, 0.95) 0%, rgba(11, 28, 44, 0.9) 100%); z-index: 1; }
.overlay-dark::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 40px 40px; z-index: 1; pointer-events: none; }
.log-content { position: relative; z-index: 5; max-width: 900px; margin: 0 auto; }
.log-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px; }
.log-stat { border-right: 1px solid rgba(255,255,255,0.2); } .log-stat:last-child { border: none; }
.log-stat i { font-size: 2.5rem; color: var(--jft-gold); margin-bottom: 20px; } 
.log-stat h4 { color: #fff; font-size: 1.5rem; margin-bottom: 10px; font-family: var(--font-head); } 
.log-stat p { color: #dbece5; font-weight: 300; }

/* --- Infrastructure --- */
.infra-layout { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.infra-item { background: #fff; padding: 60px; display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; position: relative; overflow: hidden; transition: 0.4s; border-radius: var(--radius-md); box-shadow: var(--shadow-subtle); border: 1px solid var(--jft-border); } 
.infra-item:hover { transform: translateY(-5px); border-color: var(--jft-primary); }
.infra-bg-img { position: absolute; right: 0; bottom: 0; width: 60%; opacity: 0.05; transition: 0.5s; filter: sepia(50%) hue-rotate(60deg); } 
.infra-item:hover .infra-bg-img { opacity: 0.15; transform: scale(1.05); }
.infra-content { position: relative; z-index: 2; }
.infra-cap { font-size: 4rem; font-family: var(--font-head); font-weight: 900; color: rgba(78, 140, 62, 0.15); line-height: 1; margin-bottom: 20px; } 
.infra-item:hover .infra-cap { color: rgba(78, 140, 62, 0.3); }
.infra-list li { margin-bottom: 12px; display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--jft-dark); } 
.infra-list li i { color: var(--jft-primary); background: #eafbe7; padding: 5px; border-radius: 50%; font-size: 0.8rem; }

/* --- Timeline --- */
.timeline-wrapper { position: relative; padding: 60px 0; }
.timeline-line { position: absolute; top: 40px; left: 0; width: 100%; height: 4px; background: #e0e0e0; z-index: 1; border-radius: 4px; }
.timeline-progress { position: absolute; top: 40px; left: 0; height: 4px; background: var(--jft-primary); width: 0; transition: width 2s ease; z-index: 1; border-radius: 4px; }
.steps-container { display: flex; justify-content: space-between; position: relative; z-index: 2; }
.step-node { width: 250px; text-align: center; padding: 0 15px; }
.step-marker { width: 80px; height: 80px; background: #fff; border: 2px solid var(--jft-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px auto; font-size: 1.5rem; color: var(--jft-navy); transition: 0.4s; position: relative; box-shadow: var(--shadow-subtle); } 
.step-node:hover .step-marker { border-color: var(--jft-primary); background: var(--jft-primary); color: #fff; transform: scale(1.1); }
.step-marker::after { content: attr(data-num); position: absolute; top: 0; right: 0; width: 26px; height: 26px; background: var(--jft-gold); color: #000; font-size: 12px; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }

/* --- Network --- */
.jft-network-section { position: relative; padding: 110px 0; overflow: hidden; width: 100%; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw; }
.network-header { text-align: center; margin-bottom: 60px; position: relative; z-index: 10; }
.network-visual { position: relative; height: 750px; width: 100%; display: flex; align-items: center; justify-content: center; perspective: 1000px; }
.custom-india-map { position: absolute; top: 40%; left: 60%; transform: translate(-50%, -50%); width: 100%; max-width: 900px; z-index: 1; opacity: 0.08; filter: grayscale(100%) sepia(20%); pointer-events: none; }
.trade-lines-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
.trade-path { fill: none; stroke: var(--jft-primary); stroke-width: 2; stroke-dasharray: 6, 8; stroke-linecap: round; opacity: 0.5; animation: flowTrade 4s linear infinite; } 
@keyframes flowTrade { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

.central-hub { position: relative; z-index: 10; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; }
.hub-circle-container { width: 100%; height: 100%; background: #fff; border-radius: 50%; padding: 25px; box-shadow: 0 10px 40px rgba(78, 140, 62, 0.15); display: flex; align-items: center; justify-content: center; border: 4px solid #fff; position: relative; z-index: 12; }
.pulse-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--jft-primary); opacity: 0; z-index: 5; } 
.pr-1 { animation: hubPulse 4s infinite; } 
.pr-2 { animation: hubPulse 4s infinite 2s; } 
@keyframes hubPulse { 0% { transform: scale(0.9); opacity: 0.6; } 100% { transform: scale(2.5); opacity: 0; } }

.export-node { position: absolute; display: flex; align-items: center; gap: 20px; width: 320px; transition: 0.4s ease-in-out; cursor: pointer; z-index: 20; }
.node-portal { width: 80px; height: 80px; background: #fff; border-radius: 0 40px 0 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-subtle); border: 1px solid var(--jft-border); transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } 
.node-portal i { font-size: 28px; color: var(--jft-primary); transition: 0.4s; } 
.export-node:hover .node-portal { background: var(--jft-primary); transform: rotateY(180deg); box-shadow: var(--shadow-hover); border-color: var(--jft-primary); } 
.export-node:hover .node-portal i { color: #fff; }

.node-info h3 { margin: 0; font-family: var(--font-head); font-size: 1.2rem; color: var(--jft-navy); font-weight: 700; letter-spacing: -0.5px; } 
.node-info p { margin: 5px 0 0 0; font-family: var(--font-body); font-size: 0.9rem; color: #666; line-height: 1.4; }
.country-list-reveal { position: absolute; width: 220px; max-height: 250px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; opacity: 0; visibility: hidden; transition: 0.4s ease; transform: translateY(-10px); z-index: 30; padding-top: 10px; } 
.export-node:hover .country-list-reveal { opacity: 1; visibility: visible; transform: translateY(0); }
.country-item { background: #fff; color: var(--jft-navy); padding: 10px 15px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-left: 3px solid var(--jft-gold); display: flex; justify-content: space-between; align-items: center; font-family: var(--font-sub); transition: 0.2s; } 
.country-item:hover { transform: translateX(5px); } 
.country-item span { color: var(--jft-primary); font-size: 0.75rem; text-transform: uppercase; font-weight: 700; }

.node-0 { top: 5%; left: 5%; } .node-2 { top: 40%; left: 0%; } .node-4 { top: 75%; left: 5%; } 
.node-1 { top: 5%; right: 5%; flex-direction: row-reverse; text-align: right; } 
.node-3 { top: 40%; right: 0%; flex-direction: row-reverse; text-align: right; } 
.node-5 { top: 75%; right: 5%; flex-direction: row-reverse; text-align: right; }
.node-0 .country-list-reveal, .node-2 .country-list-reveal, .node-4 .country-list-reveal { left: 90px; top: 100%; } 
.node-1 .country-list-reveal, .node-3 .country-list-reveal, .node-5 .country-list-reveal { right: 90px; top: 100%; }

/* --- Sliders & Footer --- */
.cert-container { width: 100%; overflow: hidden; position: relative; padding: 50px 0; border-bottom: 1px solid var(--jft-border); cursor: grab; } 
.cert-container:active { cursor: grabbing; } 
.cert-track { display: flex; align-items: center; width: max-content; will-change: transform; } 
.cert-slide { flex: 0 0 25vw; display: flex; justify-content: center; align-items: center; padding: 0 20px; box-sizing: border-box; }
.cert-logo { height: 75px; width: auto; object-fit: contain; filter: grayscale(100%) contrast(0.8); opacity: 0.7; transition: 0.3s; pointer-events: none; } 
.cert-slide:hover .cert-logo { filter: grayscale(0) contrast(1); opacity: 1; transform: scale(1.05); }

.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.testi-card { background: #fff; padding: 45px; border-radius: var(--radius-md); box-shadow: var(--shadow-subtle); position: relative; overflow: hidden; } 
.testi-card::before { content: '\201C'; position: absolute; top: -10px; right: 20px; font-size: 8rem; color: #f2f2f2; font-family: serif; z-index: 0; }
.testi-header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; position: relative; z-index: 1; } 
.flag-icon { font-size: 1.8rem; }
.testi-auth h4 { font-size: 1.1rem; margin: 0; font-family: var(--font-head); color: var(--jft-navy); } 
.testi-auth span { font-size: 0.85rem; color: var(--jft-primary); font-family: var(--font-sub); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.testi-text { font-style: italic; color: #555; font-size: 1.05rem; position: relative; z-index: 1; font-family: var(--font-head); }

.footer-section { background: var(--jft-navy); color: #fff; padding: 80px 0 30px 0; border-top: 10px solid var(--jft-primary); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr 1.2fr; gap: 50px; margin-bottom: 40px; }
.f-col h4 { font-family: var(--font-sub); font-size: 1.1rem; margin-bottom: 25px; color: #fff; text-transform: uppercase; letter-spacing: 1px; }
.f-links li { margin-bottom: 12px; }
.f-links a { color: rgba(255,255,255,0.7); font-size: 0.9rem; transition: 0.3s; }
.f-links a:hover { color: var(--jft-gold); padding-left: 5px; }
.f-contact li { display: flex; gap: 15px; margin-bottom: 20px; font-size: 0.9rem; color: rgba(255,255,255,0.8); line-height: 1.5; }
.f-contact i { color: var(--jft-gold); margin-top: 5px; }
.f-input { width: 100%; padding: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; color: #fff; margin-bottom: 10px; font-family: var(--font-body); }
.f-input:focus { outline: none; border-color: var(--jft-gold); }
.f-btn-full { width: 100%; padding: 14px; background: var(--jft-primary); color: #fff; border: none; border-radius: 4px; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; cursor: pointer; transition: 0.3s; letter-spacing: 1px; }
.f-btn-full:hover { background: var(--jft-gold); color: var(--jft-navy); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 30px; text-align: center; font-size: 0.85rem; color: rgba(255,255,255,0.5); }

.reveal { opacity: 0; transform: translateY(40px); transition: 1s cubic-bezier(0.2, 0.8, 0.2, 1); } 
.reveal.active { opacity: 1; transform: translateY(0); }
.mobile-swipe-hint { display: none; }

/* --- Responsive --- */
@media (max-width: 1024px) {
    .td-utilities, .visit-plan, .desktop-only, .sticky-quote { display: none; }
    .ticker-label { font-size: 0.6rem; padding: 0 10px; }
    .jft-navbar { top: 80px; height: 70px; background: rgba(255,255,255,0.95); } 
    .jft-navbar.scrolled { top: 80px; height: 70px; }
    .nav-logo-img { height: 50px; } .jft-navbar.scrolled .nav-logo-img { height: 45px; }
    .nav-menu { position: fixed; top: 80px; right: -100%; width: 85%; height: calc(100vh - 80px); background: var(--jft-navy); flex-direction: column; justify-content: flex-start; padding-top: 60px; transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1); box-shadow: -10px 0 30px rgba(0,0,0,0.2); gap: 25px; }
    .nav-menu.active { right: 0; }
    .nav-link { font-size: 1.1rem; color: #fff !important; width: 100%; text-align: center; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.05); } 
    .nav-link::after { display: none; }
    .mobile-toggle { display: block; }
    .hero-title { font-size: 3.5rem; }
    .stats-grid, .features-grid, .infra-layout, .footer-grid, .log-grid, .testi-grid { grid-template-columns: 1fr; }
    .about-grid, .india-layout, .steps-container { flex-direction: column; display: flex; }
    .steps-container { align-items: center; gap: 30px; } 
    .timeline-line { display: none; }
    .india-visual { height: 400px; width: 100%; }
    .network-visual { height: auto; flex-direction: column; padding: 20px 0; }
    .central-hub { margin-bottom: 40px; width: 120px; height: 120px; }
    .mobile-swipe-hint { display: block; font-family: var(--font-sub); font-size: 0.8rem; color: var(--jft-gold); margin-bottom: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; animation: hintPulse 2s infinite; }
    @keyframes hintPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
    .nodes-container { width: 100vw; display: flex; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px; padding: 20px 20px 40px 20px; -webkit-overflow-scrolling: touch; } 
    .nodes-container::-webkit-scrollbar { display: none; }
    .export-node { position: relative; flex: 0 0 85%; max-width: 350px; flex-direction: column !important; text-align: center !important; padding: 30px 20px; background: #fff; border-radius: var(--radius-md); border: 1px solid var(--jft-border); scroll-snap-align: center; top: auto !important; left: auto !important; right: auto !important; box-shadow: var(--shadow-subtle); }
    .country-list-reveal { position: relative !important; width: 100% !important; max-height: 0; left: 0 !important; top: 0 !important; opacity: 0; visibility: hidden; transition: all 0.5s ease; margin-top: 0; box-shadow: none; }
    .export-node.active-mobile .country-list-reveal { max-height: 300px; opacity: 1; visibility: visible; margin-top: 20px; overflow-y: auto; } 
    .node-portal { margin-bottom: 15px; }
    .logistics-banner { background-attachment: scroll !important; background-position: center center !important; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 10px; } 
    .cert-slide { flex: 0 0 50vw; }
    .footer-section { text-align: left; }
}
@media (max-width: 600px) { .section-padding { padding: 70px 0; } .hero-title { font-size: 2.5rem; } .cert-slide { flex: 0 0 80vw; } }