/*
LAKSHMI FARM - MASTER STYLESHEET 41.0
Final Production Baseline | High-Density Mobile | Consolidated logic
*/
/* ==========================================
1. CORE VARIABLES & BASE RESET
========================================== */
/* UI Change 5th Apr - Add */
:root {
/* Brand Colors */
--farm-red: #c62f50;
--farm-red-dark: #a71222;
--leaf-green: #2e7d32;
--mango-gold: #ffb400;
/* UI Surface Colors */
--text-dark: #2d2d2d;
--bg-body: #f2f2f2; /* CHANGE: Darkened background slightly for better mobile contrast for white cards */
/* Elevation & Animation */
--soft-shadow: 0 10px 30px rgba(0,0,0,0.08);
--transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box !important; }
html, body {
width: 100%;
overflow-x: hidden;
/* This variable will now point to color value #f7f7f7 soft Grey in your :root */
background-color: var(--bg-body) !important; /* Forces the theme color */
/* Commented UI 5th Apr background-color
background-color: var(--bg-body); */
font-family: 'Roboto', sans-serif;
color: var(--text-dark);
line-height: 1.6;
}
/* Force Roboto for all Data and Input fields */
body, input, textarea, select, button, .price-tag, .item-subtotal, .qty-picker input, .summary-text .value {
font-family: 'Roboto', sans-serif !important;
font-variant-numeric: tabular-nums;
}
/* Premium Playfair for Headings only */
h1, h2, h3, .mobile-header-title {
font-family: 'Playfair Display', serif !important;
letter-spacing: 0.5px;
}
.rupee { font-family: 'Roboto', sans-serif !important; font-weight: 400; margin-right: 2px; } /* font weight Keeps it from looking too thick */
/* ==========================================
2. NAVIGATION (STRICT VISIBILITY)
========================================== */
.desktop-nav, .mobile-header, #footer-menu { background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); z-index: 9999 !important; }
@media (min-width: 992px) {
.mobile-header, #footer-menu, .back-btn { display: none !important; }
.desktop-nav { display: flex !important; position: fixed; top: 0; left: 0; width: 100%; height: 75px; align-items: center; justify-content: space-between; padding: 0 8%; border-bottom: 1px solid #eee; }
.desktop-nav .nav-links { display: flex !important; gap: 30px; align-items: center; }
.desktop-nav a { text-decoration: none; color: #333; font-weight: 500; font-size: 15px; padding-bottom: 5px; border-bottom: 2px solid transparent; transition: 0.3s; }
.desktop-nav a.active-link { color: var(--farm-red) !important; font-weight: 700; border-bottom: 2px solid var(--farm-red); }
}
@media (max-width: 991px) {
.desktop-nav { display: none !important; }
.mobile-header { position: fixed; top: 0; left: 0; width: 100%; height: 70px !important; display: flex !important; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid #eee; }
.mobile-logo-img { height: 55px !important; width: auto; } /* Larger Mobile Logo */
#footer-menu {
display: flex !important; flex-direction: row !important; position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100% !important;
height: 65px !important; background-color: #ffffff !important; justify-content: space-around !important; align-items: center !important;
border-top: 1px solid #eee !important; box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important;
}
#footer-menu a { text-decoration: none !important; color: #888 !important; text-align: center !important; font-size: 10px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
#footer-menu a i { display: block !important; font-size: 1.3rem !important; margin-bottom: 2px !important; }
#footer-menu a.active-nav { color: var(--farm-red) !important; font-weight: 700 !important; }
}
/* ==========================================
3. GLOBAL PAGE ELEMENTS
========================================== */
.page-content { padding: 20px 5% 100px 5%; max-width: 1240px; margin: 0 auto !important; clear: both; }
.content-boxed { background: #fff; border-radius: 20px; padding: 40px; box-shadow: var(--soft-shadow); margin-bottom: 30px; width: 100%; }
/* Hero Header spacing for Desktop */
/*Added this for 5th Apr UI changes */
.hero-header {text-align: center; padding: 70px 20px 5px 20px !important; background: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%, var(--bg-body) 100%); width: 100%; }
/* Commented below
.hero-header { text-align: center; padding: 85px 20px 10px 20px !important; background: linear-gradient(to bottom, #fff 0%, var(--bg-body) 100%); width: 100%; } */
/* UI Chnage added margin-bottom - 5px to the below*/
.hero-header h1 { font-size: 2.2rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dark); margin-bottom: 0px; } /* Removes gap below title */
/* UI Chnage added margin reduced from 15 to 10 to the below*/
/* Content : "" Only used by ::after, but safe for both */
.hero-header .divider { content: ""; display: block; width: 60px; height: 3px; background: var(--farm-red); margin: 10px auto; border-radius: 2px; }
/* nss removed gallery-title::after in the above */
/* UI Chnage margin-top reduced from 10 to 5px */
.hero-header p {
font-size: 1.1rem; color: #666; font-style: italic;
margin-top: 5px !important; /* Pulls tagline close to title */
margin-bottom: 0px !important; /* Prevents gap before the line */
}
/* Added 5th Apr UI Chnage The Red Divider "Whoo Factor" */
.hero-header::after { content: ""; display: block; width: 60px; height: 3px; background: var(--farm-red); margin: 15px auto 0 auto; border-radius: 2px;
}
.gallery-title { text-align: center; font-size: 1.5rem; margin: 10px 0 10px 0 !important;
color: var(--leaf-green); position: relative;
width: 100%; border-bottom: none !important; }
.no-dot::after { display: none !important; content: none !important; height: 0 !important; }
/* ==========================================
4. CARDS & GRIDS (REVISED FOR FLEXBOX)
========================================== */
/* Shared Visual Styles - Keep these together */
.practice-card {
background: #fff;
border-radius: 20px;
box-shadow: var(--soft-shadow);
border: 1px solid #f0f0f0;
transition: 0.3s;
overflow: hidden;
display: flex;
flex-direction: column;
}
.farm-card {
/* flex: Grow | Shrink | Basis */
flex: 1 1 380px !important; /* Allows cards to grow and fill height equally */
min-width: 320px !important; /* Ensures cards never get too small to read */
max-width: 420px !important; /* Prevents cards from getting too wide on huge screens */
background: #fff;
border-radius: 20px;
box-shadow: var(--soft-shadow);
border: 1px solid #f0f0f0;
padding: 40px 30px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: 0.3s;
}
.farm-card:hover, .practice-card:hover {
transform: translateY(-10px);
}
/* Force Flexbox and Centering for the "Why Us" items */
.feature-grid {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: stretch !important; /* KEY: This forces all cards in a row to the same height */
gap: 25px !important;
padding: 20px 0 !important;
width: 100% !important;
}
.farm-card img { width: 120px; height: 120px; object-fit: contain; margin-bottom: 25px; }
.farm-card h3 {
min-height: 3em; /* Ensures titles take up same space even if 1 vs 2 lines */
display: flex;
align-items: center;
color: var(--text-dark);
margin-bottom: 15px;
font-size: 1.3rem;
}
.farm-card ul { text-align: left; list-style: none; width: fit-content; margin: 0 auto; }
.farm-card ul li { margin-bottom: 10px; position: relative; padding-left: 25px; font-size: 1.05rem; }
.farm-card ul li::before { content: '✔'; position: absolute; left: 0; color: var(--leaf-green); font-weight: bold; }
/* Best Practices Grid */
.practices-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 30px;
}
.practice-card img { width: 100%; height: 300px; object-fit: cover; }
.practice-card .p-text { padding: 25px; }
.practice-card h3 { color: var(--leaf-green) !important; margin-bottom: 12px; font-size: 1.4rem; font-weight: 700; }
/* Integrated Approach Custom Styling */
.integrated-approach-section {
background-color: #fcfcfc !important;
}
.purity-list {
list-style: none;
padding: 0;
margin: 20px 0; /* Standard gap for desktop */
}
.purity-list li {
display: flex;
align-items: start;
margin-bottom: 12px;
}
.btn-wrapper {
margin-top: 25px;
}
/* Reusing your gold button style for consistency */
.btn-best-practices {
display: inline-block;
padding: 12px 25px;
background-color: var(--mango-gold);
color: #1b331d;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
transition: 0.3s;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.btn-best-practices:hover {
background-color: var(--leaf-green);
color: white;
}
.shadow-accent {
box-shadow: 10px 10px 0px rgba(46, 125, 50, 0.1);
}
@media (min-width: 992px) {
.info-flex { display: flex !important; flex-direction: row !important; align-items: center; gap: 60px; }
.variety-card { display: flex !important; flex-direction: row !important; align-items: center; padding: 40px; gap: 40px; border-radius: 20px; box-shadow: var(--soft-shadow); width: 100%; }
.variety-card.reverse { flex-direction: row-reverse !important; background: #fff9ed; }
}
.rounded-img, .v-img img { width: 100%; border-radius: 15px; display: block; }
/* ==========================================
5. HERO & GALLERY SPECIFICS
========================================== */
#hero-slider { margin-top: 60px; width: 100%; background-color: #000; overflow: hidden; }
/* .splide__slide img { width: 100% !important; height: 80vh; object-fit: cover; display: block; } */
/* .video-hero-container { position: relative !important; width: 100%; height: 70vh; overflow: hidden; background: #000; margin-bottom: 40px; clear: both; } */
.hero-video { width: 100%; height: 100%; object-fit: cover; }
.video-sound-btn { position: absolute !important; bottom: 30px; right: 30px; z-index: 100; width: 50px; height: 50px; border-radius: 50%; border: 2px solid #fff; background: var(--farm-red); display: flex !important; align-items: center; justify-content: center; cursor: pointer; }
/* --- Index Page Specific Alignment --- */
#index-page .content-boxed {
max-width: 1100px;
margin: 0 auto 40px auto;
width: 90%; /* For mobile padding */
}
/* This is the new class for the Boy-in-Tree banner */
.impact-banner-boxed {
max-width: 1100px; /* Ensure this matches your .content-boxed max-width */
margin: 40px auto !important; /* Centers the section and adds vertical gap */
width: 100%;
border-radius: 20px; /* Matches the rounded corners of your other sections */
overflow: hidden;
position: relative;
box-shadow: var(--soft-shadow);
}
.banner-inner-wrapper {
min-height: 450px; /* Use min-height instead of height */
position: relative;
height: auto;
width: 100%;
}
.banner-img {
width: 100%;
height: 100%;
object-fit: cover;
/* This keeps the boy's face visible on the right while text is on the left */
object-position: 70% center;
display: block;
}
.banner-text-overlay {
position: absolute;
top: 0;
left: 0;
width: 60%; /* Covers the left side */
height: 100%;
/* Darker gradient on the left to make white text pop against green leaves */
background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
display: flex;
flex-direction: column;
justify-content: center;
padding: 60px;
color: white;
z-index: 2;
}
.banner-quote {
font-family: 'Playfair Display', serif !important;
font-style: italic;
font-size: 2.2rem;
color: white !important;
margin-bottom: 10px;
}
.banner-subtext {
font-size: 1.1rem;
color: white !important;
opacity: 0.9;
}
/* --- 3. Best Practices Button (Gold Style) --- */
#index-page .info-text a[href*="best-practices"] {
background-color: var(--mango-gold) !important;
color: #1b331d !important; /* Deep green text for readability on gold */
border: none !important;
padding: 12px 25px !important;
font-weight: 800 !important;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
display: inline-block;
transition: 0.3s;
}
#index-page .info-text a[href*="best-practices"]:hover {
background-color: var(--leaf-green) !important;
color: #fff !important;
transform: translateY(-2px);
}
/* ==========================================
STORY BRANDING - HIGH SPECIFICITY
========================================== */
/* Fix: Color for the Main Headline */
#index-page .story-headline {
color: var(--leaf-green) !important;
font-weight: 700;
margin-bottom: 5px;
font-family: 'Playfair Display', serif !important;
}
/* Tagline styling */
#index-page .story-tagline {
font-style: italic;
font-weight: bold;
color: var(--text-dark);
margin-bottom: 20px;
font-size: 1.1rem;
opacity: 0.8;
}
/* Fix: Color for the Sub-headline (Our Orchard) */
#index-page .story-subheadline {
color: var(--leaf-green) !important;
margin-top: 25px;
margin-bottom: 10px;
font-size: 1.3rem;
font-weight: 600;
font-family: 'Playfair Display', serif !important;
}
.paragraph-spacing {
margin-top: 15px;
}
#gallery-page .page-content { padding-top: 0 !important; }
#gallery-page .gallery-container { padding-left: 2% !important; padding-right: 2% !important; max-width: 1300px; margin: 0 auto !important; clear: both; }
#gallery-page .gallery-square { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 25px !important; width: 100%; justify-content: center; }
#gallery-page .gallery-square a {
display: block !important;
aspect-ratio: 1 / 1 !important; /* Forces a perfect square */
border-radius: 15px;
overflow: hidden;
box-shadow: var(--soft-shadow);
background-color: #f0f0f0; /* Placeholder color while loading */
}
#gallery-page img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.5s ease; }
#gallery-page .gallery-square img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* This prevents the thumbnails from stretching */
}
#gallery-page .gallery-square a:hover img {
transform: scale(1.1); /* Nice zoom effect on hover */
}
/* --- Premium Gallery Labels --- */
.gallery-label {
display: block;
text-align: center; /* Perfectly centered */
font-size: 0.9rem; /* Small & sharp */
color: #3e4f3f; /* Elegant deep green (slightly darker than leaf-green) */
text-transform: uppercase; /* Standard for high-end galleries */
letter-spacing: 1.5px; /* Professional spacing between letters */
margin-top: 10px; /* Gap below the photo */
margin-bottom: 25px; /* Gap before the next row of photos starts */
font-weight: 800; /* Strong presence */
font-family: 'Roboto', sans-serif;
}
/* --- Gallery Detail Text (Desktop) --- */
.label-detail {
display: block; /* Puts it on a new line without needing
*/
font-size: 0.8rem; /* Smaller than the main title */
font-weight: 400; /* Lighter weight for contrast */
color: #666; /* Subtle grey */
text-transform: none; /* Prevents it from being ALL CAPS */
letter-spacing: 0.5px; /* Tighter than the main title */
margin-top: 2px;
}
/* Safety net for the PhotoSwipe full-screen view */
.pswp__img {
object-fit: contain !important; /* Forces the image to keep its shape inside the box */
}
/* Container for the video thumbnail */
.video-thumbnail-wrapper {
position: relative;
width: 100%;
height: 100%;
}
/* 3. The Play Indicator (The Circle) */
.play-indicator {
position: absolute !important;
/* Perfect centering */
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
/* Layer it on the very top */
z-index: 9999 !important;
/* Visuals */
background: rgba(46, 125, 50, 0.9) !important; /* Lakshmi Green */
color: #ffffff !important;
width: 55px !important;
height: 55px !important;
border-radius: 50% !important;
/* Align icon inside */
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
pointer-events: none; /* Let clicks pass through to the link */
transition: all 0.3s ease;
}
/* 4. THE ICON: Ensure it has a color and size */
.play-indicator i {
color: #ffffff !important;
font-size: 1.2rem !important;
display: block !important;
z-index: 1000 !important;
}
/* 1. The Container (The tag) */
.video-link {
position: relative !important;
display: block !important;
z-index: 1 !important; /* Creates the floor */
overflow: hidden;
border-radius: 15px;
}
/* 2. The Image (Forces it to the back) */
.video-link img {
position: relative !important;
z-index: 0 !important; /* Floor layer */
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* 5. Hover Effect */
.video-link:hover .play-indicator {
background: var(--mango-gold) !important;
transform: translate(-50%, -50%) scale(1.1) !important;
}
/* ==========================================
6. ORDER PAGE (PREMIUM CHECKOUT UI)
========================================== */
/* Main wrapper for the checkout actions */
.order-action-row {
display: flex !important;
justify-content: space-between;
align-items: center;
margin-top: 30px;
padding: 20px;
background: #fff;
border-top: 2px solid #f9f9f9;
}
.order-total-display { text-align: left; }
.total-label {
font-size: 0.85rem;
color: #888;
text-transform: uppercase;
font-weight: 700;
display: block;
margin-bottom: -2px;
}
.total-amount {
font-size: 1.8rem;
font-weight: 800;
color: var(--leaf-green);
}
#order-page .order-header-box { text-align: center; margin: 10px 0 25px 0; }
#order-page .order-header-box h2 { font-size: 2.6rem; color: var(--leaf-green); font-weight: 700; margin-bottom: 5px; }
#order-page .order-header-box p { font-style: italic; color: #666; font-size: 1rem; }
/* Main Container - Pinned with a Green Top Accent */
#order-page .content-boxed {
padding: 30px 40px !important;
border-top: 6px solid var(--leaf-green);
background: #ffffff;
}
/* 6a. Product Grid & Cards */
#order-page .order-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px; margin-bottom: 30px !important; }
.product-card-horizontal {
display: flex !important;
align-items: center;
padding: 15px;
background: #fff;
border: 1px solid #eee;
border-radius: 15px;
transition: var(--transition);
box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.product-card-horizontal:hover {
border-color: var(--mango-gold);
box-shadow: var(--soft-shadow);
transform: translateY(-2px);
}
.product-img-box-small { width: 110px; height: 110px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.product-img-box-small img { width: 100%; height: 100%; object-fit: cover; }
.product-info-compact { flex: 1; padding-left: 15px; }
.product-title-row {
font-family: 'Roboto', sans-serif !important;
font-size: 1.2rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 5px;
}
/* Price & Quantity UI */
.qty-picker { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.qty-btn {
width: 32px; height: 32px; border-radius: 50%;
border: 1.5px solid var(--leaf-green);
background: #fff; color: var(--leaf-green);
font-size: 18px; font-weight: 800; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: 0.2s;
}
.qty-btn:hover { background: var(--leaf-green); color: #fff; }
.qty-picker input { width: 40px !important; text-align: center; border: none; font-size: 1.2rem; font-weight: 700; background: transparent; }
.item-subtotal { font-size: 16px; color: #888; margin-top: 5px; font-weight: 500; }
/* 6b. Delivery Form */
#order-page .delivery-compact-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 25px;
background: #fcfaf5; /* Subtle parchment background to separate from products */
padding: 25px !important;
border-radius: 15px;
border: 1px solid #f0e6d2;
}
.form-group label { font-size: 13px; font-weight: 800; color: var(--leaf-green); text-transform: uppercase; margin-bottom: 6px; display: block; letter-spacing: 0.5px; }
.custom-input {
width: 100%; padding: 12px; border: 1.5px solid #e0e0e0; border-radius: 8px;
font-size: 15px; background: #fff; transition: 0.3s;
}
.custom-input:focus { border-color: var(--leaf-green); outline: none; box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1); }
/* 6c. Summary Bar (The Hero of the page) */
.compact-summary-bar {
display: flex !important;
justify-content: space-between;
align-items: center;
background: var(--leaf-green);
padding: 15px 35px !important;
border-radius: 50px;
color: #fff;
width: 80% !important;
margin: 30px auto 0 auto !important;
box-shadow: 0 10px 25px rgba(46, 125, 50, 0.25);
}
.summary-text { font-size: 1.2rem; font-weight: 500; }
.summary-text .value { font-size: 1.8rem; font-weight: 800; color: var(--mango-gold); margin-left: 10px; }
.confirm-order-btn {
background: var(--mango-gold) !important;
color: #1b331d !important;
padding: 14px 35px !important;
border-radius: 12px !important;
font-weight: 900;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
border: none;
cursor: pointer;
box-shadow: 0 4px 12px rgba(255, 180, 0, 0.3);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.confirm-order-btn:hover {
background: var(--leaf-green) !important;
color: #fff !important;
transform: scale(1.03);
}
/* Hide floating WhatsApp specifically on this structured page */
#order-page ~ .whatsapp-float { display: none !important;}
/* 6c. Summary Bar (The "Floating Pill" Look) */
.compact-summary-bar {
display: flex !important;
justify-content: space-between;
align-items: center;
background: var(--leaf-green);
padding: 12px 35px !important; /* Balanced padding */
border-radius: 50px; /* Full "Pill" shape looks more modern than 20px */
color: #fff;
box-shadow: 0 12px 30px rgba(46, 125, 50, 0.25);
width: 85% !important; /* Slightly wider to prevent text wrapping */
max-width: 700px; /* Keeps it centered on wide monitors */
margin: 30px auto 0 auto !important;
border: 2px solid rgba(255,255,255,0.1); /* Subtle inner highlight */
}
/* The Label (Total:) stays elegant */
.summary-text { font-size: 1.1rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }
/* The Price (₹ 500) gets the attention */
.summary-text .value {
font-size: 1.8rem; /* Large, but fits the bar height */
font-weight: 800;
color: var(--mango-gold);
margin-left: 10px;
font-family: 'Roboto', sans-serif !important;
}
/* The Button - High Contrast for Clicks */
.confirm-order-btn {
background: var(--mango-gold);
color: #1b331d; /* Deep forest green text is easier to read on gold than grey */
border: none;
padding: 12px 30px;
border-radius: 50px;
font-weight: 900;
font-size: 1rem;
cursor: pointer;
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-transform: uppercase;
letter-spacing: 1px;
}
.confirm-order-btn:hover {
background: #ffffff;
transform: scale(1.05) translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* ==========================================
ORDER SUCCESS - THE "LAYERED" DESIGN (V6)
========================================== */
#order-success-page { background: var(--bg-body); min-height: 90vh; }
.success-wrapper {
/* 75px Clearance + 20px Gap = 95px */
padding: 95px 20px 60px 20px !important;
}
.success-card {
max-width: 1000px !important;
margin: 0 auto !important;
background: #fff;
border-radius: 20px;
overflow: hidden;
position: relative; /* Anchor for the image */
box-shadow: 0 25px 60px rgba(27, 51, 29, 0.1);
padding-bottom: 200px;
}
/* 1. Header */
.success-header-premium {
background: linear-gradient(135deg, #1b331d 0%, #2e7d32 100%);
padding: 18px 20px !important;
text-align: center;
color: #fff;
position: relative;
z-index: 10; /* Stays on very top */
}
/* 2. The Dashboard (Top Layer) */
/* Ensure both containers start at the same vertical point */
.success-dashboard {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 40px;
padding: 40px 50px;
align-items: flex-start; /* Pins both columns to the top */
}
/* 3. The Mango Basket (Bottom Layer) */
.basket-background-layer {
position: absolute;
bottom: -10px;
right: -10px;
width: 420px; /* Large size */
opacity: 0.95;
z-index: 0; /* Sits behind the text */
pointer-events: none; /* Clicking "through" the image to the table */
}
/* Fix for concatenated labels */
.detail-label {
font-size: 0.75rem;
font-weight: 800;
flex: 0 0 100px !important; /* Fixed width for the label column Forces label to take exactly 100px width */
color: var(--text-dark) !important; /* Changed from Gold to Green for better contrast */
text-transform: uppercase;
margin-right: 10px; /* Forces a gap before the name/address starts */
}
.dash-section-title {
font-size: 1rem !important;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--leaf-green); /* Using brand green for titles */
font-weight: 800;
display: flex;
align-items: center;
margin-top: 0 !important; /* Forces both titles to start at the exact same top line */
margin-bottom: 20px !important;
height: 24px; /* Forces a consistent height for the title area */
}
/* Ensure the table fills the width properly */
.receipt-table-premium {
width: 100% !important;
border-collapse: collapse;
margin-top: 10px;
table-layout: fixed; /* CRITICAL: This forces headers and cells to align to percentages */
}
.receipt-table-premium th {
font-size: 0.85rem;
color: #333 !important; /* Darker than the current gray */
text-transform: uppercase;
letter-spacing: 1.2px;
padding-bottom: 12px;
border-bottom: 2px solid #f0f0f0; /* Thicker line for header separation */
font-weight: 800 !important; /* Bold as requested */
text-align: left; /* Default alignment */
}
/* --- 4. SPACING & LAYOUT --- */
/* Increase table row height to balance the height of the left column */
/* Ensure data cells match header alignment exactly */
.receipt-table-premium td {
padding: 22px 0 !important;
border-bottom: 1px solid #f2f2f2;
font-size: 0.95rem;
font-weight: 400 !important;
}
.detail-row {
display: flex !important;
align-items: flex-start; /* Keeps "Address" label at the top of a long address */
margin-bottom: 10px;
gap: 10px;
}
/* Receipt Side adjustment for readability over image */
.receipt-side-over {
background: rgba(255, 255, 255, 0.8) !important;
backdrop-filter: blur(8px);
border-radius: 15px;
padding: 0 15px 15px 15px !important; /* Set top padding to 0 */
z-index: 5;
}
/* Ensure Total Row feels like a solid completion bar */
.total-row-highlight td {
background: rgba(46, 125, 50, 0.08) !important; /* Slightly stronger tint */
padding: 20px 15px !important; /* Horizontal padding ensures the color spans the width */
font-weight: 800;
color: #1b331d;
border: none !important;
}
/* Ensure the button block has correct margins on Desktop */
/* --- 5. Action Stack Tightening (Mobile) --- */
.action-stack {
/* Top: 0 | Right: 15px | Bottom: 10px | Left: 15px */
padding: 0 15px 10px 15px !important;
/* Pulls button up toward the table */
margin-top: -8px !important;
/* Centers button and text */
text-align: center !important;
/* Small buffer at the very bottom of the card */
margin-bottom: 5px !important;
/* Ensures button is clickable over any stray layers */
position: relative;
z-index: 10;
}
.btn-premium-home {
background: var(--leaf-green);
color: #fff !important;
padding: 12px 35px;
border-radius: 50px;
font-weight: 800;
transition: 0.3s;
box-shadow: 0 8px 20px rgba(27, 51, 29, 0.2);
}
/* Make the contact footer readable */
.queries-text-inside {
color: #555 !important; /* Darker gray */
font-size: 0.95rem !important; /* Slightly larger */
margin-top: 5px !important;
}
/* Forces the Tick and Title into one centered row */
.header-flex-centered {
display: flex !important;
flex-direction: row !important; /* Ensures side-by-side layout */
align-items: center !important; /* Perfectly centers icon and text vertically */
justify-content: center !important; /* Centers the whole group in the green bar */
gap: 12px; /* This is the space between the gold tick and the words */
margin-bottom: 5px; /* Space between this row and the subtitle below it */
}
/* Remove default margin from h2 so it doesn't push the line height up */
.success-title {
margin: 0 !important;
display: inline-block !important; /* Ensures it doesn't force a new line */
font-size: 1.6rem !important; /* Bumped up from the previous suggestion */
letter-spacing: 0.5px;
color: #ffffff;
}
/* To have gold color tick mark on the header. otherwise, this inherits success-header-premium properties */
#order-success-page .success-gold-check { font-size: 2.2rem !important; margin-right: 5px; color: var(--mango-gold) !important; }
/* Make the Order ID stand out in Gold */
.order-id-highlight {
color: var(--mango-gold) !important;
font-weight: 900;
margin: 0 4px; /* Gives the number a tiny bit of breathing room */
}
/* Improve the subtitle readability on the green background */
.success-subtitle {
font-size: 1rem !important;
opacity: 0.9;
margin-top: 8px !important;
font-style: italic;
font-weight: 300;
}
/* Add these specific alignment rules */
.receipt-table-premium th:nth-child(2),
.receipt-table-premium td:nth-child(2) {
text-align: center; /* Center Qty */
}
.receipt-table-premium th:nth-child(3),
.receipt-table-premium td:nth-child(3),
.receipt-table-premium th:nth-child(4),
.receipt-table-premium td:nth-child(4) {
text-align: right; /* Right align Rate and Amount */
}
/* Ensure the total value stays aligned to the right */
.total-row-highlight td:last-child {
text-align: right;
font-weight: 800;
}
/* ==========================================
7. Sunset banner
========================================== */
/* --- Handles the "Look" but not the "Size". --- */
.cta-sunset-banner {
position: relative;
overflow: hidden;
text-align: center;
background-image: url('/images/pictures/sunset-banner.webp');
background-size: cover;
background-position: center 30%;
box-shadow: var(--soft-shadow);
display: flex !important;
flex-direction: column !important;
}
/* The dark overlay to make text readable */
.cta-sunset-banner::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to bottom,
rgba(27, 51, 29, 0.8) 0%,
rgba(27, 51, 29, 0) 40%,
rgba(27, 51, 29, 0) 60%,
rgba(27, 51, 29, 0.85) 100%);
z-index: 1;
}
.cta-content, .cta-action-row, .cta-sunset-banner > p {
position: relative;
z-index: 10; /* Ensures text stays above the dark overlay */
}
.btn-cta-gold {
display: inline-block;
background: var(--mango-gold) !important;
color: #1b331d !important;
padding: 15px 45px;
font-size: 1rem;
font-weight: 900;
text-decoration: none !important;
border-radius: 50px;
text-transform: uppercase;
letter-spacing: 1.5px;
transition: var(--transition);
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.btn-cta-gold:hover {
background: #ffffff !important;
transform: scale(1.05) translateY(-3px);
}
/* ==========================================
8. FOOTER (REIMAGINED)
========================================== */
.farm-footer {
background: #1b331d;
color: #e8ede9;
/* Very small vertical padding to reduce height */
padding: 25px 5% !important;
display: flex !important;
flex-wrap: wrap;
/* This centers the group of items on the screen */
justify-content: center;
align-items: center;
border-top: 3px solid var(--mango-gold);
/* Gap between text and map */
gap: 40px;
}
.footer-col {
/* Prevents the text from taking up too much width */
flex: 0 1 auto;
text-align: center; /* Centering the text as requested */
}
.footer-col h3 {
color: var(--mango-gold);
font-family: 'Playfair Display', serif;
margin-bottom: 8px;
font-size: 1.3rem; /* Smaller heading */
}
.footer-col p {
line-height: 1.4;
font-size: 0.95rem; /* Smaller body text */
opacity: 0.85;
margin-bottom: 4px;
}
.footer-map-container {
flex: 0 1 350px; /* Limits the width of the map */
}
.footer-map-container img {
width: 100%;
/* Significantly reduced height */
height: 160px !important;
object-fit: cover;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.1);
filter: grayscale(0.2) contrast(1.1);
}
/* ==========================================
7. MOBILE OVERRIDES (CLEAN & CONSOLIDATED)
========================================== */
@media (max-width: 991px) {
/* Ensure the body itself doesn't have a height lock */
html, body {
height: auto !important;
min-height: 100%;
overflow-y: auto !important;
}
/* 1. GLOBAL LAYOUT & GUTTERS */
.page-content {
display: block !important;
width: 100% !important;
/* SHORTHAND: top | right | bottom | left */
/* Top Padding is set to 0 so that hero header title can move the content below to logo line */
/* 1. THE PAGE GUTTER - This provides the consistent 14px gap from the phone screen edge for ALL pages. */
padding: 0px 14px 100px 14px !important;
background-color: var(--bg-body) !important;
}
/* 2. CONSOLIDATED MASTER RESET (Stacks everything vertically & fixes overflow) */
.feature-grid,
.variety-container,
.practices-grid,
.info-flex,
.variety-card,
#order-page .order-grid {
display: block !important; /* Forces vertical stack and prevents side-overflow */
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
text-align: center;
}
/* CARD BASICS (Universal Visuals) - Now standardized for all sections */
/* THE MASTER CARD RULE - Every container (About, Varieties, WhyUs Tiles, Banners) now looks identical. */
.content-boxed,
.variety-card,
.modern-why,
.impact-banner-boxed,
.cta-sunset-banner,
.farm-card,
.practice-card {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 20px 0 !important;
border-radius: 20px !important;
box-shadow: var(--soft-shadow) !important;
display: block !important;
overflow: hidden !important;
padding: 0 !important;
}
/* Apply white background ONLY to text-heavy cards */
.content-boxed, .variety-card, .modern-why, .farm-card, .practice-card {
background: #ffffff !important;
}
/* 3. INTERNAL CONTENT PADDING
This ensures text in EVERY card starts at exactly the same pixel. */
/* 3. MASTER TEXT ALIGNMENT & JUSTIFICATION (FIX 3) */
.info-text,
.v-info,
.modern-why,
.cta-content,
.v-features,
.p-text {
/* padding: 25px 15px !important; */
/* Shorthand: Top (15px) | Right (20px) | Bottom (10px) | Left (20px) */
padding: 15px 20px 10px 20px !important;
text-align: justify !important; /* Forces clean margins on both sides */
text-justify: inter-word;
font-size: 1rem !important;
margin-bottom: 10px !important; /* Reduces gap between paragraphs/items to save space */
line-height: 1.3 !important;
}
/* Specific fix for headings */
.info-text h2,
.gallery-title,
.variety-card h3,
.modern-why h3 {
display: block !important; /* FIX: Kills the flex behavior from desktop */
width: 100% !important; /* Ensures it takes full width to center correctly */
text-align: center !important;
font-size: 1.4rem !important;
margin-bottom: 5px !important; /* reduce the gap below the headings (h2 and h3) so the text starts immediately after the title */
color: var(--leaf-green) !important;
line-height: 1.2 !important; /* Tighten heading lines if they wrap */
}
/* 4. FIX DISAPPEARING PHOTOS (The "Lady at Gate" / "Integrated Approach" fix)
Forces image containers to have a physical height so they don't collapse to 0. */
/* 4. SQUARE VARIETY IMAGES (FIX 5) */
/* 4. IMAGE STANDARDIZATION (FIX 5 - SQUARE PICTURES) */
.v-img {
width: 100% !important;
aspect-ratio: 1 / 1 !important; /* Forces Square for Varieties */
display: block !important;
}
.v-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.info-image {
width: 100% !important;
height: 250px !important; /* Keeps 'Lady at Gate' rectangular */
display: block !important;
}
.info-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* 5. IMPACT BANNER - KABIR (FIX 4) */
.impact-banner-boxed {
height: 500px !important;
position: relative !important;
background: #000;
}
.banner-inner-wrapper { height: 100% !important; position: relative !important; }
.banner-img { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.banner-text-overlay {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 10;
/* FIX 4: Padding-top creates space to see the boy's face while text stays on image */
padding: 290px 20px 30px 20px !important;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%) !important;
}
.banner-quote { color: white !important; font-size: 1.25rem !important; margin-bottom: 8px !important; }
.banner-subtext { color: white !important; font-size: 0.85rem !important; opacity: 1 !important; }
/* 6. SUNSET CTA BANNER - RESTORE IMAGE & VISIBILITY */
.cta-sunset-banner {
height: 380px !important; /* Height of background image */
background-color: #ffffff !important; /* to make background image appear */
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
/* FIX 2: Text Visibility for CTA */
.cta-content h2, .cta-content p, .cta-sunset-banner > p:last-of-type {
color: #ffffff !important;
text-shadow: 0 2px 12px rgba(0,0,0,1), 0 0 5px rgba(0,0,0,1) !important;
text-align: center;
justify-content: center;
}
.cta-content h2 { font-size: 1.35rem !important; line-height: 1.2; }
.cta-content p { font-size: 0.9rem !important; font-style: italic; }
.btn-cta-gold { padding: 12px 30px !important; font-size: 0.95rem !important; min-width: 220px; }
.cta-action-row { margin-top: auto; padding-bottom: 5px !important; }
.cta-sunset-banner > p:last-of-type {
font-weight: 800;
padding-bottom: 20px;
text-align: center;
}
/* Consistency for Best Practices Button */
.info-text a[href*="best-practices"] {
width: 100% !important;
text-align: center;
display: block !important;
margin-top: 15px;
}
/* Tighten the list spacing */
.purity-list {
margin: 10px 0 !important; /* Reduced from 20px */
}
.purity-list li {
margin-bottom: 8px !important; /* Reduced from 12px */
line-height: 1.3 !important;
}
/* Tighten the button spacing */
.btn-wrapper {
margin-top: 15px !important; /* Reduced from 25px */
}
/* Standardize the heading gap */
.section-heading {
margin-bottom: 8px !important;
}
/* -------------------------------------- */
/* 1. HERO SLIDER CONTAINER */
/* ==========================================
/* ==========================================
FINAL MOBILE HERO FIX - REWRITE
========================================== */
/* ==========================================
MOBILE HERO SLIDER - VISIBILITY FIX
========================================== */
/* 1. CONTAINER HEIGHT INHERITANCE */
#hero-slider,
.splide__track,
.splide__list,
.hero-slide-item {
height: 60vh !important; /* Ensure every layer has height */
min-height: 450px !important;
position: relative !important;
width: 100vw !important;
margin-left: 0px !important; /* Touch phone edges */
overflow: hidden !important;
}
.hero-wrapper {
display: block !important;
position: relative !important;
height: 100% !important;
width: 100% !important;
text-decoration: none !important;
}
/* 2. THE PICTURE TAG FIX
Forces the picture tag to actually occupy space */
.hero-wrapper picture {
display: block !important;
width: 100% !important;
height: 100% !important;
}
/* 3. THE BACKGROUND MEDIA */
.hero-bg-img,
.hero-video-container {
position: absolute !important;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
z-index: 1 !important;
}
.hero-bg-img,
.hero-bg-video,
.hero-video-element {
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* Fills the 70vh area without black bars */
display: block !important;
}
/* 4. THE TEXT OVERLAY (Bottom Shadow) */
.hero-text-overlay {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 10 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
align-items: center !important;
/* 300px top padding keeps Kabir's face clear */
padding: 300px 20px 20px 20px !important;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 40%, transparent 100%) !important;
pointer-events: none; /* Let swipe work */
}
.hero-text-content {
width: 100% !important;
pointer-events: auto !important; /* Button clickable */
text-align: center !important;
}
/* 2. Lift the text and button further away from the bottom edge */
.hero-text-pillar {
/* Increase bottom padding from 20px to 45px
to push the 'Order Now' button higher into the image area */
padding: 220px 20px 45px 20px !important;
}
/* 3. Tighten the Title and Subtitle gaps even more to save vertical space */
.pillar-title {
margin-bottom: 2px !important;
}
.pillar-subtitle {
margin-bottom: 10px !important;
font-size: 0.8rem !important;
}
/* 5. TEXT STYLING */
.hero-title {
margin-top: 15px !important;
color: #ffffff !important;
font-size: 1.2rem !important;
line-height: 1.2 !important;
margin-bottom: 5px !important;
text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.hero-title span { color: #ffffff !important; }
.hero-subtitle {
color: #ffffff !important;
font-size: 0.85rem !important;
margin-bottom: 10px !important;
opacity: 0.95;
}
.hero-btn-mock {
display: inline-block !important;
background-color: var(--mango-gold) !important;
color: #1b331d !important;
padding: 8px 25px !important;
border-radius: 50px !important;
font-weight: 800 !important;
font-size: 0.8rem !important;
text-transform: uppercase;
margin-bottom: 15px !important;
}
/* 6. HIDE ELEMENTS */
.desktop-video { display: none !important; }
.mobile-video { display: block !important; }
.splide__pagination { display: none !important; }
/* --------------------- end of hero section ----- */
/* Compact bullets for mobile */
.v-features li {
font-size: 1rem !important;
line-height: 1.3 !important; /* Tight spacing */
margin-bottom: 8px !important;
text-align: justify !important; /* Left aligned for easier reading on small screens */
}
/* Add this to both Desktop and Mobile queries */
.v-features li b {
color: var(--text-dark); /* Keeps it professional black/dark grey */
font-weight: 700;
}
/* Why Us Mobile Tightening */
/* 2. FIX WHY US ALIGNMENT: Reset the grid parent */
/* Target the Why Us Tiles specifically to ensure they stay contained */
/* 2. FIX THE TILE OVERFLOW
Forces the box to be smaller than the desktop minimum */
/* 1. RESET THE PARENT GRID
This stops the container from using Flexbox logic that causes overflow */
.feature-grid, .feature-grid.modern-layout {
display: block !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.modern-why {
min-width: 0 !important; /* CRITICAL: Kills the desktop 320px limit */
width: 100% !important; /* Fits the box to the 14px page gutter */
max-width: 100% !important;
flex: none !important; /* Disables any remaining flex behavior */
box-sizing: border-box !important;
margin-bottom: 20px !important;
display: block !important;
}
/* 3. Center the Icon inside the box */
.why-icon-box {
margin: 0 auto 10px auto !important;
display: flex;
justify-content: center;
}
.modern-why ul li {
font-size: 0.9rem !important;
padding-left: 25px !important;
margin-bottom: 8px !important;
line-height: 1.1;
}
/* 4. FARM-CARD INTERNAL TIGHTENING */
.farm-card { height: auto !important; min-height: 0 !important; flex: 0 0 auto !important; padding-bottom: 20px !important; }
.farm-card img { width: 85px !important; height: 85px !important; margin-bottom: 8px !important; }
.farm-card h3 { min-height: 0 !important; margin-top: 5px !important; font-size: 1.1rem !important; margin-bottom: 5px !important; }
.farm-card ul li { margin-top: 3px !important; margin-bottom: 3px !important; font-size: 0.9rem !important; }
/* 5. PRACTICE CARD & HERO HEADER */
.practice-card h3 { margin: 5px; }
.practice-card .p-text { padding: 0px 5px 0px 15px; text-align: left; line-height: 1.2; }
/* SHORTHAND: top | right | bottom | left */
/*for changing hero header for best practices, Whyus and Gallery*/
.hero-header { padding: 75x 15px 5px 15px !important; letter-spacing: 1px; margin-bottom: 0 !important; }
.hero-header h1 { font-size: 1.1rem !important; letter-spacing: 1px; margin-bottom: 0 !important; }
.hero-header p { font-size: 0.85rem !important; margin-top: 2px !important; }
.hero-header::after { margin: 8px auto 0 auto !important; width: 40px !important; }
.hero-header .divider { margin: 5px auto !important; }
/* 6. ORDER PAGE SPECIFICS (CONSOLIDATED) */
#order-page .page-content { padding-top: 72px !important; } /* Perfect clearance for 70px header */
#order-page .order-header-box { margin-bottom: 2px !important; padding: 0 !important; }
#order-page .order-header-box h2 { font-size: 1rem !important; margin: 0 !important; }
#order-page .order-header-box p { display: none !important; } /* Tagline hidden for space */
/* Product Grid Gaps */
#order-page .order-grid {
gap: 2px !important;
margin-bottom: 5px !important; /* FIXED: Reduced gap before Delivery Form */
}
#order-page .content-boxed { padding: 8px 10px !important; border-top-width: 3px !important; }
/* High-Density Horizontal Product Cards */
.product-card-horizontal {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
padding: 2px !important;
margin-bottom: 0px !important;
background: #fff;
border-radius: 12px;
border: 1px solid #eee;
}
.product-img-box-small { width: 65px !important; height: 65px !important; border-radius: 8px !important; flex-shrink: 0; }
.product-info-compact { padding-left: 8px !important; display: flex; flex-direction: column; flex: 1; text-align: left !important; }
.product-info-compact h3 { font-size: 0.95rem !important; margin-bottom: 0px !important; }
.item-subtotal { font-size: 14px !important; margin-top: 0px !important; }
.qty-picker { margin-top: 5px !important; gap: 8px !important; }
.qty-btn { width: 25px !important; height: 25px !important; font-size: 12px !important; }
.qty-picker input { width: 25px !important; font-size: 0.9rem !important; }
/* Delivery Form (Specific Stacking & Tightening) */
#order-page .delivery-compact-grid {
display: flex !important;
flex-direction: column !important;
background: #fcfaf5 !important;
border: 1px solid #f0e6d2 !important;
border-radius: 15px !important;
padding: 2px !important;
gap: 2px !important;
margin-top: 2px !important;
}
.form-group { margin-bottom: 5px !important; }
.form-group label { font-size: 11px !important; margin-bottom: 3px !important; }
.custom-input { padding: 8px 10px !important; font-size: 14px !important; }
#order-page textarea.custom-input { height: 75px !important; }
/* App-Style Floating Action Bar */
.order-action-row {
position: fixed !important;
bottom: 65px;
left: 0;
width: 100% !important;
background: #1b331d !important;
padding: 0px 15px !important;
height: 40px !important; /* Forced height to ensure it stays thin */
z-index: 9999;
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
}
.order-total-display { display: flex !important; align-items: baseline !important; gap: 6px !important; }
.total-label { color: rgba(255,255,255,0.7); font-size: 0.65rem !important; margin: 0 !important; font-weight: 700; }
.total-amount { color: var(--mango-gold) !important; font-size: 1.2rem !important; margin: 0 !important; }
.confirm-order-btn { padding: 6px 15px !important; font-size: 0.8rem !important; height: 32px !important; border-radius: 6px !important; background: var(--mango-gold) !important; color: #1b331d !important; }
/* 7. GALLERY PAGE SPECIFICS */
/* 1. Reset the main wrapper for the gallery page */
#gallery-page {
display: block !important;
height: auto !important;
min-height: 100vh !important;
overflow-y: auto !important;
padding-bottom: 80px !important; /* Buffer for the fixed menu */
}
/* 2. Target the container specifically */
#gallery-page .gallery-container {
display: flex !important;
flex-direction: column !important;
/* We use a massive bottom padding to ensure the last row
can be scrolled far above the footer icons */
padding: 0 6px 10px 6px !important;
margin-bottom: 0 !important;
height: auto !important;
}
#gallery-page .gallery-square { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
/* 3. Ensure the last gallery grid has a margin to force the scroll */
#gallery-page .gallery-square:last-of-type {
margin-bottom: 50px !important;
}
#gallery-page .gallery-container h2 { font-size: 1rem; color: var(--leaf-green); font-weight: 700; margin: 0; }
/* --- Mobile Video Icon Adjustment --- */
.play-indicator {
width: 45px !important; /* Smaller for mobile */
height: 45px !important;
}
.play-indicator i {
font-size: 1.1rem !important;
}
.gallery-label {
font-size: 0.6rem; /* Slightly smaller for phone screens */
letter-spacing: 1px;
margin-bottom: 15px; /* Tighter vertical spacing for mobile */
}
.gallery-title {
max-width: 1100px;
margin-left: auto !important;
margin-right: auto !important;
}
/* --- Mobile Gallery Label Adjustment --- */
.gallery-label {
margin-bottom: 20px !important; /* Tighter gap for mobile */
}
.label-detail {
font-size: 0.65rem !important; /* Sharp and tiny for small screens */
opacity: 0.9;
}
/* 8. SUCCESS PAGE SPECIFICS */
/* --- 1. Success Bar Tightening (Mobile) --- */
/* Reduce padding of the green header box */
.success-header-premium {
padding: 10px 10px !important; /* Thinner bar */
min-height: auto !important;
}
/* Shrink the "Order #270 Confirmed" text */
.success-title {
font-size: 0.95rem !important; /* Smaller, cleaner title */
font-weight: 800 !important;
}
/* Shrink the checkmark icon */
#order-success-page .success-gold-check {
font-size: 1.2rem !important;
margin-right: 0px;
}
/* Shrink the subtitle
.success-subtitle {
font-size: 0.8rem !important;
margin-top: 2px !important;
line-height: 1.2;
} */
/* Completely hide the tagline to save space */
.success-subtitle {
display: none !important;
}
/* Reduce spacing between the icon/title group and subtitle */
.header-flex-centered {
display: flex !important;
flex-direction: row !important;
white-space: nowrap !important; /* Forces one line */
gap: 6px !important;
margin-bottom: 0 !important;
}
/* Reduce the width of the label column so the Name/Address have more room */
.detail-label {
flex: 0 0 70px !important; /* Shrink from 100px to 80px */
font-size: 0.65rem !important; /* Smaller label text */
letter-spacing: 0.5px;
margin-right: 8px !important;
}
/* Shrink the font of the actual data */
.detail-value {
font-size: 0.85rem !important; /* Slightly smaller for mobile */
line-height: 1.3 !important; /* Tighter lines */
font-weight: 500 !important;
}
/* Reduce the vertical gap between lines (Recipient -> Whatsapp -> Address) */
.detail-row {
margin-bottom: 5px !important; /* Tighter vertical stacking */
}
/* Specific fix for long address strings */
.address-text {
word-break: break-word; /* Prevents horizontal scrolling if address is one long word */
}
/* Section title adjustment */
.dash-section-title {
font-size: 0.85rem !important; /* Smaller "DELIVERY DETAILS" heading */
margin-bottom: 5px !important;
}
.success-wrapper { padding: 80px 20px 60px 20px !important; } /*Chnage this to adjust the gap below logo line */
/* Reduce the overall padding of the white card's content area */
/* Shrunk from default padding */
/* Ensure no extra margin is pushing it down */
.success-dashboard { grid-template-columns: 1fr; padding: 5px 10px 0px 10px !important; margin-top: 0 !important; gap: 2px !important; }
/* Remove any extra top margin from the "ORDER SUMMARY" header */
.receipt-side-over .dash-section-title {
margin-top: 0 !important;
margin-bottom: 5px !important; /* Tighten the space before the table starts */
}
/* --- 3. Order Summary Table (Mobile Only) --- */
/* Reduce the overall padding of the summary card */
.receipt-side-over {
padding: 10px !important;
background: #fff !important; /* Cleaner white background for mobile */
}
/* Force specific column widths for mobile to prevent "QTYRATEAMOUNT" overlap */
.receipt-table-premium {
table-layout: fixed !important; /* Ensures columns respect percentages */
width: 100% !important;
}
/* Re-balance column widths to separate RATE and AMOUNT */
/* ITEM (38%) | QTY (12%) | RATE (25%) | AMOUNT (25%) */
.receipt-table-premium th:nth-child(1),
.receipt-table-premium td:nth-child(1) {
width: 38% !important;
}
.receipt-table-premium th:nth-child(2),
.receipt-table-premium td:nth-child(2) {
width: 12% !important;
}
.receipt-table-premium th:nth-child(3),
.receipt-table-premium td:nth-child(3) {
width: 25% !important;
padding-right: 10px !important; /* This forces the gap from AMOUNT */
}
.receipt-table-premium th:nth-child(4),
.receipt-table-premium td:nth-child(4) {
width: 25% !important;
}
/* Shrink header text to fit */
.receipt-table-premium th {
font-size: 0.6rem !important; /* Smaller, sharper headers */
padding-bottom: 4px !important; /* Reduced gap between header and first row */
letter-spacing: 0.5px !important;
color: #888 !important;
white-space: nowrap !important;
}
/* Shrink data row padding and font */
.receipt-table-premium td {
padding: 3px 0 !important; /* REDUCED from 22px to keep it compact */
font-size: 0.8rem !important; /* Readable but small */
line-height: 1 !important;
}
/* Ensure the Item Name wraps neatly if it's long */
.item-name {
padding-right: 5px !important;
Padding-top:4px !important;
font-size: 0.8rem !important;
line-height: 1.2 !important;
word-break: normal !important; /* Better for natural wrapping */
}
/* Total Row tightening */
.total-row-highlight td {
padding: 5px 8px !important;
font-size: 0.85rem !important;
}
/* Ensure the Rupee symbol and text don't touch */
.receipt-table-premium td:nth-child(3),
.receipt-table-premium td:nth-child(4) {
padding-left: 2px !important;
}
.basket-background-layer {
position: absolute;
bottom: -15px;
right: 40px !important; /* Changed from -10px to 40px to push it leftward */
width: 380px;
opacity: 0.9;
z-index: 1;
pointer-events: none;
}
/* Hide the large mango image on mobile to save space */
.basket-background-layer {
display: none !important;
}
.receipt-side-over { background: none;
padding-bottom: 0px !important; /* Reduce space after the Total row */}
.action-stack {
padding-top: 0px !important; /* Mobile padding */
text-align: center !important; /* Centers button on mobile */
margin-top: -5px !important;
/* Ensure it sits above the background mangoes image */
margin-bottom: 10px;
padding-bottom:10px;
}
.btn-premium-home {
display: inline-block !important;
width: 100% !important; /* Full width button looks better on phones */
max-width: 280px;
}
/* Reduce the bottom padding of the card now that the image is gone */
.success-card {
padding-bottom: 15px !important;
}
/* 9. SLIDER & FOOTER */
/* .splide__slide img { height: 50vh !important; object-fit: cover !important; } */
.farm-footer {
padding: 15px 10px 75px 10px !important;
flex-direction: column !important;
gap: 5px !important;
align-items: center !important;
}
.footer-col { flex: none !important; width: 100% !important; text-align: center !important; margin-bottom: 5px !important; }
.footer-col h3 { font-size: 1.1rem !important; margin-bottom: 2px !important; }
.footer-col p { font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0 !important; }
.footer-map-container { flex: none !important; width: 100% !important; max-width: 280px !important; height: auto !important; margin: 0 !important; }
.footer-map-container img { height: 110px !important; width: 100% !important; object-fit: cover !important; border-radius: 8px; }
}
/* ==========================================
DESKTOP & LAPTOP OVERRIDES (992px and up)
========================================== */
@media (min-width: 992px) {
/* 1. GLOBAL PAGE WIDTH */
.page-content {
max-width: 1400px !important;
padding-left: 5% !important;
padding-right: 5% !important;
margin: 0 auto;
}
/* 1. TIGHTEN VERTICAL SPACE
Margin-top 65px sits tight against a 60-70px menu.
Padding 5px removes the large gaps above/below. */
#hero-slider {
margin-top: 65px !important;
height: auto !important;
background-color: var(--bg-body);
padding: 5px 0 !important; /* MINIMAL PADDING */
width: 100% !important;
overflow: visible !important;
}
/* Set the actual "Window" to 780px to fit the 4:5 tub naturally */
.splide__track, .splide__list, .hero-slide-item {
height: 780px !important;
}
/* 2. THE CONTENT WRAPPER
Width 1100px (matches Our Story). Height 780px. */
.hero-wrapper {
display: flex !important;
flex-direction: row !important;
width: 100% !important;
max-width: 1100px !important;
height: 780px !important;
margin: 0 auto !important;
border-radius: 40px;
overflow: hidden;
box-shadow: var(--soft-shadow);
text-decoration: none !important;
align-items: stretch !important;
}
.side-reverse .hero-wrapper { flex-direction: row-reverse !important; }
/* 3. THE TEXT PILLAR (476px wide)
Slightly narrower to prioritize the photo. */
.hero-text-overlay {
flex: 0 0 476px !important;
width: 476px !important;
background-color: #1b331d !important;
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 50px !important;
z-index: 5;
}
.hero-text-content { width: 100%; text-align: left !important; }
.hero-title {
font-family: 'Playfair Display', serif !important;
font-size: 2.8rem !important;
color: #ffffff !important;
line-height: 1.1;
margin-bottom: 10px !important;
}
.hero-title span { color: var(--mango-gold) !important; }
.hero-subtitle { font-size: 1.2rem !important; color: #eee !important; margin-bottom: 30px; }
/* 4. THE MEDIA PILLAR (624px wide)
This width (624) at 780 height is exactly a 4:5 ratio.
This ensures the WHOLE photo/video fits with zero cropping. */
.hero-wrapper picture,
.hero-video-container {
flex: 0 0 624px !important;
width: 624px !important;
height: 100% !important;
position: relative !important;
z-index: 1;
}
.hero-bg-img, .hero-bg-video, .hero-video-element {
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* Fills the card perfectly */
display: block !important;
}
/* THE BUTTON FIX: Transform the text into a solid Gold Pill */
.hero-btn-mock {
display: inline-block !important;
background-color: var(--mango-gold) !important; /* Brand Gold */
color: #1b331d !important; /* Deep Green text for contrast */
padding: 14px 40px !important;
border-radius: 50px !important; /* Pill shape */
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
text-decoration: none !important; /* Removes any underline */
margin-top: 25px !important; /* Space from subtitle */
box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
}
/* Professional Hover Effect */
.hero-btn-mock:hover {
background-color: #ffffff !important;
color: var(--leaf-green) !important;
transform: translateY(-3px) !important;
box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important;
}
/* Ensure the wrapper doesn't force a blue color on its children */
.hero-wrapper, .hero-wrapper:hover {
text-decoration: none !important;
color: inherit !important;
}
/* 5. ARROW VISIBILITY & POSITIONING */
.splide__arrows {
position: absolute;
width: 1240px; /* Positions arrows in the 70px side gutters */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 100 !important;
}
.splide__arrow {
pointer-events: auto;
background: #1b331d !important;
opacity: 0.8 !important;
width: 50px; height: 50px;
border: 2px solid white !important;
}
.splide__arrow svg { fill: #fff !important; }
.splide__arrow--prev { left: 0 !important; }
.splide__arrow--next { right: 0 !important; }
.mobile-video { display: none !important; }
.desktop-video { display: block !important; }
#index-page .info-flex {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important; /* Forces image and text to match height */
gap: 60px !important;
padding: 40px !important;
}
#index-page .info-text,
#index-page .info-image {
flex: 1 !important;
width: 50% !important;
max-width: 50% !important;
}
#index-page .info-image img {
width: 100% !important;
height: 450px !important; /* Fixed height for Desktop */
object-fit: cover !important;
display: block !important;
border-radius: 15px;
}
/* 2. ABOUT US (info-flex) ADJUSTMENT */
.info-flex {
padding: 40px !important;
gap: 50px !important;
}
/* 1. UNIFY SECTION WIDTHS (About, Varieties, Why Us, CTA) */
.info-flex,
.variety-container,
.feature-grid,
.cta-sunset-banner {
max-width: 1100px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.info-text p {
font-size: 1.05rem; /* Match the variety text size */
line-height: 1.7; /* Adds a bit more breathing room between lines */
margin-bottom: 5px; /* Reduced from 12px to squeeze text together */
}
.cta-sunset-banner {
max-width: 1100px !important;
margin: 60px auto 40px auto !important;
height: 500px !important;
border-radius: 30px !important;
padding: 60px 40px !important;
justify-content: space-between !important;
}
.cta-content h2 {
font-size: 2.2rem !important;
color: #ffffff;
text-shadow: 0 2px 15px rgba(0,0,0,0.5);
margin-bottom: 10px !important;
}
.cta-action-row {
margin-top: auto;
}
/* Professional shadow for payment text on desktop */
.cta-sunset-banner > p:last-of-type {
color: #ffffff !important;
font-weight: 800;
font-size: 1.1rem !important;
margin-top: 15px;
text-shadow: 0 2px 12px rgba(0,0,0,1), 0 0 5px rgba(0,0,0,0.8) !important;
}
/* 2. ORDER PAGE SPECIFIC: Make this much narrower than other pages */
#order-page .page-content {
max-width: 1050px !important; /* Increased width for better balance */
padding-top: 25px !important; /* Pulls the container up close to the header */
}
#order-page .order-header-box {
margin-bottom: 15px !important; /* Reduces gap between tagline and the card */
}
#order-page .order-header-box h2 {
font-size: 1.5rem !important; /* Smaller header for Order page */
}
#order-page .content-boxed {
padding: 30px 40px !important; /* Slightly more internal breathing room */
}
.order-action-row {
padding: 20px 0 !important;
background: transparent !important;
border-top: 1px solid #eee;
}
#order-page .delivery-compact-grid {
align-items: stretch !important; /* Forces columns to be equal height */
gap: 25px !important;
}
/* Forces the address box to match the two input fields on the left */
/* Makes the textarea grow to fill the container */
#order-page textarea.custom-input {
flex: 1 !important; /* This is the key line for alignment */
min-height: 120px;
resize: none !important;
}
/* Standardize left-side input height for a cleaner look */
#order-page input.custom-input {
height: 45px;
}
#order-page .form-group {
margin-bottom: 0; /* Let the grid gap handle the spacing */
}
#order-page .form-col {
display: flex !important;
flex-direction: column;
justify-content: space-between; /* Evenly spaces elements on the left */
}
/* Forces the form-group on the right (Address) to fill the full height */
#order-page .form-col:last-child .form-group {
height: 100% !important;
display: flex !important;
flex-direction: column;
margin-bottom: 0 !important;
}
/* 4. WHY US GRID ADJUSTMENT */
.feature-grid {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 20px !important;
padding-top: 10px !important; /* Pulls the container up close to the header */
}
/* 1. Constrain the overall section width to keep it elegant */
#index-page .variety-container {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 30px;
max-width: 1100px;
margin: 20px auto 40px auto !important;
}
.variety-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
background: #fff;
border-radius: 20px !important;
padding: 20px 35px 25px 35px !important;
box-shadow: var(--soft-shadow);
border: 1px solid #f0f0f0;
text-align: center !important;
}
.variety-card .v-img {
width: 100% !important;
height: 380px !important;
margin-bottom: 0px !important;
display: block !important;
}
.variety-card .v-img img {
height: 100% !important;
width: auto !important;
margin: 0 auto !important;
display: block !important;
object-fit: contain !important;
}
/* Pull Title close to image */
.variety-card h3 {
margin-top: -15px !important;
margin-bottom: 15px !important;
color: var(--leaf-green) !important;
font-size: 1.5rem !important;
font-family: 'Playfair Display', serif !important;
}
/* 3-Bullet List - Justified for Desktop Professionalism */
.v-features {
list-style: none !important;
padding: 0 !important;
margin: 0 auto !important;
text-align: justify !important; /* Elegant block look */
text-justify: inter-word;
}
.v-features li {
font-size: 1rem !important; /* Slightly bigger font */
line-height: 1.5 !important;
margin-bottom: 12px !important;
color: #444;
position: relative;
padding-left: 20px;
}
.v-features li b {
color: var(--text-dark); /* Keeps it professional black/dark grey */
font-weight: 700;
}
.v-features li::before {
content: "•";
color: var(--leaf-green);
position: absolute;
left: 0;
font-weight: bold;
}
/* 2. Why Us - Consistent with Varieties */
.feature-grid.modern-layout {
margin-top: 10px !important;
}
.modern-why {
padding: 30px 30px 20px 30px !important; /* Tighter vertical padding */
}
.why-icon-box {
margin-bottom: 5px !important; /* Pull title closer to icon */
}
.modern-why h3 {
margin-bottom: 8px !important;
}
/* --- NEW: MODERN WHY US TILES (Bright & Better) --- */
/* ==========================================
WHY US - CONSOLIDATED MODERN UI (Desktop)
========================================== */
.feature-grid.modern-layout {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 30px !important;
margin-top: 0px !important; /* pull the tiles closer to header */
}
.modern-why {
background: #ffffff !important;
border-radius: 24px !important;
padding: 30px 30px 10px 30px !important; /* Reduce Card Bottom Spacing earlier value 45px 30px */
box-shadow: 0 10px 30px rgba(0,0,0,0.04) !important;
flex: 0 1 calc(33.33% - 25px) !important;
min-width: 320px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
transition: all 0.3s ease !important;
}
.modern-why:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(46, 125, 50, 0.08) !important;
}
.why-icon-box {
width: 130px; /* Slightly larger for your custom images */
height: 130px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: -10px; /* pull title closer to Icon */
}
.why-icon-box img {
width: 100%;
height: 100%;
object-fit: contain;
}
.modern-why h3 {
color: var(--leaf-green) !important;
font-size: 1.5rem !important;
font-weight: 800 !important;
min-height:1em;
margin-bottom: 8px !important; /* Reduce gap between title and text below */
font-family: 'Playfair Display', serif !important;
}
.modern-why ul li {
position: relative !important;
padding-left: 30px !important;
font-size: 1rem !important;
line-height: 1.5 !important;
margin-bottom: 12px !important;
color: #444 !important;
}
.modern-why ul li::before {
content: '✔' !important;
position: absolute;
left: 0 !important;
color: var(--mango-gold) !important;
font-weight: 900 !important;
}
/* 4. BEST PRACTICES: Constrain cards */
.practices-grid {
max-width: 1100px;
margin: 0 auto;
}
/* 5. GALLERY: High-end proportions */
#gallery-page .gallery-square {
max-width: 1200px;
margin: 0 auto;
gap: 20px !important;
}
/* Makes the 5 cards sit in a 3 + 2 layout nicely within the 1100px width */
.farm-card {
flex: 0 1 340px !important;
min-height: 320px !important;
}
/* Order success confirmation */
.success-wrapper { padding: 80px 14px 40px 14px; }
.receipt-content { padding: 20px; }
.success-banner-top h2 { font-size: 1.2rem; }
.receipt-table td { font-size: 0.9rem; }
.total-row td { font-size: 1.1rem; }
}
/* ==========================================
9. WHATSAPP
========================================== */
/* No Floating whatsapp icon for the time being
.whatsapp-float { position: fixed !important; bottom: 85px; right: 20px; z-index: 1500; background: #25d366; color: #fff; width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); text-decoration: none; }
*/