/* ==========================================================================
   Site-wide mobile / tablet fixes

   One file, organised by component. Every selector is scoped to a component,
   so the rules are inert on pages where that component is absent, and nothing
   has to be duplicated or kept in sync across pages.

   Linked site-wide from component/meta.php, last in the cascade so plain
   rules win on source order.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Breadcrumb bar overlapped the header on phones
   .breadcrumbs has a flat margin-top:100px, sized for the desktop header.
   Under 768px the header is taller, not shorter: the stock ticker
   (.top-bar__custom, d-md-none) adds 44px on top of the 65px logo block and
   20px of container padding - about 129px. The header is position:absolute
   with z-index:5, so the logo sat on top of the green breadcrumb strip.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

	.breadcrumbs {
		margin-top: 140px;
	}
}


/* --------------------------------------------------------------------------
   2. Counter strip (component/counter.php)
   The markup carries col-6 col-sm-8 ... - col-sm-8 meant a single 66%-wide
   item per row between 576px and 767px. Keep the 2x2 grid across all phones.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

	.counter .row>[class*="col-"] {
		flex: 0 0 auto;
		width: 50%;
	}
}

@media (max-width: 575.98px) {

	.counter .__item {
		padding: 0 4px;
	}

	.counter .__item .__ico {
		width: 40px;
		margin-right: 10px;
	}

	.counter .__item .__count,
	.counter .__item span {
		font-size: 26px;
	}

	/* line-height:1 made the wrapped two-line labels collide. */
	.counter .__item .__title {
		font-size: 13px;
		line-height: 1.3;
	}
}


/* --------------------------------------------------------------------------
   3. Business-page intro block (.food_block / .fbs_block)
   .food_main h2 is 65px, dropping to 33px only under 576px - so 577-767px
   rendered a 65px heading. Same gap on .fbs_block h3 (30px -> 24px).
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

	.food_main h2 {
		font-size: clamp(1.75rem, 6.5vw, 2.5rem);
		line-height: 1.15;
	}

	.fbs_block h3 {
		font-size: clamp(1.25rem, 4.2vw, 1.6rem);
		line-height: 1.35;
	}

	/* Stacked under the copy - it was flush against the last paragraph. */
	.food_block .col-md-6 img {
		margin-top: 20px;
	}
}


/* --------------------------------------------------------------------------
   4. "Our Infrastructure" division tabs
   .cu-somn li is width:100% and .nav wraps, so on a phone the four tabs
   became four full-width bars (~260px of nav before any content). 2x2 halves
   that and keeps every label on one or two lines.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

	.dlab-tabs .nav-tabs.cu-somn {
		border-radius: 12px;
		overflow: hidden;
	}

	.cu-somn li {
		width: 50%;
		border-left: 0;
		border-right: 1px solid #dfe3e6;
		border-bottom: 1px solid #dfe3e6;
	}

	.cu-somn>li>a {
		padding: 14px 8px !important;
		line-height: 1.3 !important;
		height: 100%;
	}

	/* flex + centring keeps the two tabs in a row visually level when one
	   label wraps to a second line and the other does not. */
	.cu-somn li a {
		display: flex !important;
		align-items: center;
		justify-content: center;
		font-size: 14px !important;
	}

	.dlab-tabs.m-t30 {
		margin-top: 16px;
	}
}


/* --------------------------------------------------------------------------
   5. Tab panel and plant rows
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

	/* p-3 on the panel stacked on top of .container padding and
	   .plant-single's own 30px, leaving very little room for the copy. */
	.dlab-tabs.bg-tab {
		padding: 8px !important;
	}

	.content-block .woo-entry>.row.mb-5.pb-5 {
		margin-bottom: 1.5rem !important;
		padding-bottom: 0 !important;
	}

	.plant-single {
		padding: 16px;
		margin-bottom: 16px;
	}

	/* Justified copy opens large word gaps in a ~300px column. */
	.plant-single p {
		text-align: left;
	}

	/* The rows alternate image-first / text-first for the desktop zig-zag.
	   Collapsed to one column that puts a photo above its own heading, so
	   pin the images after the copy everywhere. */
	.plant-single .plant-images {
		order: 2;
		margin-top: 16px;
	}
}


/* --------------------------------------------------------------------------
   6. Plant location cards
   NOTE: the map itself (#map) is not covered here - it is hard-coded to a
   500px canvas in assets/js/mapdata.js and is cropped by .map-wrapper's
   overflow:hidden on anything narrower.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

	.plant-map {
		padding: 30px 0;
	}

	/* The 300px cap left a narrow card floating in a full-width column. */
	.plant-map .pm-single {
		max-width: 100%;
		margin: 12px 0;
	}

	/* line-height:1 collided once an entry wrapped to two lines. */
	.plant-map .pm-single p {
		line-height: 1.45;
	}

	.plant-map .map-wrapper {
		margin: 20px 0;
	}
}


/* --------------------------------------------------------------------------
   7. Company overview - history timeline

   .our-history is a Bootstrap .row sitting directly inside <main> with no
   .container wrapping it, so the row's -12px side margins hang off the body:
   the page scrolls 24px sideways at every width and the green/blue gradient
   bleeds past the viewport. Not a phone-only bug, hence no media query.
   -------------------------------------------------------------------------- */
.our-history.row {
	margin-left: 0;
	margin-right: 0;
}

@media (max-width: 767.98px) {

	/* 80px of vertical padding on each of ~15 timeline entries. */
	.our-history .page-section {
		padding: 40px 0;
	}

	/* "OVER 40 YEARS VISION FOR INDIA" - 70px copy wrapped around a 200px
	   "40". The base rules under 576px use !important, so these have to. */
	.forty h2 {
		font-size: clamp(2rem, 6vw, 2.75rem) !important;
		line-height: 1.4 !important;
	}

	.forty h2 span {
		font-size: clamp(5rem, 22vw, 7.5rem) !important;
		line-height: 1 !important;
	}

	/* The year headings are 80px outlined text with no mobile override:
	   "2024-2025" rendered around 400px wide and pushed the page sideways. */
	.mammothSlider .boxStyle .rightSide h3 {
		font-size: clamp(2.2rem, 11vw, 3.5rem);
		line-height: 1.2;
		margin-bottom: 8px;
	}

	.mammothSlider .boxStyle p {
		font-size: 15px !important;
	}

	.founder__chairman h3 {
		font-size: clamp(1.75rem, 7vw, 2.25rem);
	}

	.founder__chairman .quote {
		font-size: clamp(1rem, 4vw, 1.25rem);
		line-height: 1.6;
	}

	/* A full-bleed circular portrait dominated the stacked column. */
	.founder__image img {
		display: block;
		max-width: 220px;
		margin: 24px auto 0;
	}
}


/* --------------------------------------------------------------------------
   8. Company overview - "Who We Are" / values slider
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

	/* The two columns stacked with nothing between them. */
	.section-value .col-md-6+.col-md-6 {
		margin-top: 28px;
	}

	.value--slider {
		padding-bottom: 20px;
	}

	.value--slider .value-single {
		padding: 16px;
	}

	.value-single p {
		text-align: left;
	}

	.value-single h5 i {
		font-size: 28px;
	}
}


/* --------------------------------------------------------------------------
   9. Certificates grid

   .gallery .__inner carries margin-bottom:-30px to cancel the 30px bottom
   margin on .gallery .__item. This page's cells are .certificare__item, not
   .__item, so nothing cancels it: the whole grid is pulled up 30px and the
   last row swallows the section's bottom padding, ending up flush against
   the footer. Scoped to .certificates so awards.php - which does use
   .__item, and where the -30px is correct - stays untouched.
   -------------------------------------------------------------------------- */
.certificates .gallery .__inner {
	margin-bottom: 0;
}

/* aspect-ratio:3/3 + object-fit:cover squares every tile. 15 of the 16
   source images are already 266x266 so cover and contain render them
   identically, but 14.webp is 266x133 and loses its left and right thirds.
   Hence no media query - the crop is wrong at every width, and switching to
   contain is a no-op for the other fifteen. */
.certificates .certificare__item img {
	object-fit: contain;
}

@media (max-width: 767.98px) {

	/* 16px of figure padding inside a ~148px cell was a third of the tile. */
	.certificates .certificare__item figure.p-3 {
		padding: 8px !important;
	}
}


/* --------------------------------------------------------------------------
   10. Product detail pages

   The inactive tab panels are hidden with visibility+opacity only - the base
   rule never sets position:absolute, even though .is-visible explicitly
   resets it to static. So every hidden panel still reserves its full height
   and the page carries a tall blank gap under the visible one. .tab-container
   appears on the product detail pages and nowhere else, so restoring the
   intended behaviour is contained to them. Not width-specific, hence no
   media query.
   -------------------------------------------------------------------------- */
.product-single .tab-container .tab-content__item {
	position: absolute;
	width: 100%;
}

.product-single .tab-container .tab-content__item.is-visible {
	position: static;
	width: auto;
}

@media (max-width: 767.98px) {

	/* h1 has no base size, is 5.5rem from 576px up and only drops to 3rem at
	   768px - so the product name rendered at 88px through the whole tablet
	   band and ran off the side. Below ~533px this resolves to the 32px the
	   browser default was already giving, so phones are unchanged. */
	.product-single .__name {
		font-size: clamp(2rem, 6vw, 2.75rem);
		line-height: 1.2;
	}

	/* The sidebar column's empty-box padding is dealt with in section 13,
	   which puts the product navigation back on phones. */

	.product-single .__product-img {
		margin-bottom: 24px;
	}

	/* 45px above a panel that already sits under a stacked, full-width nav. */
	.product-single .tab-content__item {
		padding-top: 24px;
	}

	/* .tab-nav a goes width:100% here, so 22px was oversized; the extra
	   padding also lifts each link to a ~50px tap target. */
	.product-single .tab-nav a {
		font-size: 17px;
		padding: 8px 10px;
	}

	/* Justified list copy opens large word gaps at this width. */
	.key-features li {
		text-align: left;
	}

	/* 20px per tile on a col-6 left little room for the logo. Scoped to
	   .certificate-grid so the home page's slick carousel is untouched. */
	.certificate-grid .partners-list .__item {
		padding: 10px;
	}
}


/* --------------------------------------------------------------------------
   11. Header menu (component/header.php)

   The hamburger menu is in play below 992px, not 768px - that is where
   responsive.css hides .top-bar__navigation-toggler and switches
   .top-bar__inner back to height:auto. Several of the open-menu rules were
   only ever patched in the max-width:767px block, so the 768-991px band was
   left with the desktop assumptions.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

	/* The open menu is a position:fixed full-screen panel with no background
	   of its own. The intended backdrop is .top-bar.is-expanded
	   .top-bar__bg - but no .top-bar__bg element exists in header.php, so
	   nothing paints it. Under 768px a background:#ddd patch covers for
	   that; from 768 to 991 the panel stayed transparent and the menu sat
	   unreadable on top of the page content. Same #ddd, now across the whole
	   range the menu is actually used in. */
	.top-bar.is-expanded .top-bar__inner {
		background-color: #ddd;
		border-top-width: 0;
		border-bottom-width: 0;
		padding: 130px 20px 40px;
		-webkit-overflow-scrolling: touch;
	}

	/* The panel scrolls (height:100% + overflow-y:auto) but its content was
	   pushed clear of the logo with position:relative; top:100px. A relative
	   offset shifts paint without reserving space, so the tail of a long
	   menu - Investors alone has nine children - fell past the bottom edge
	   with no way to scroll to it. Real padding above does reserve it. */
	.top-bar.is-expanded .top-bar__inner>div:first-child {
		position: static;
		top: auto;
	}

	/* Dead centring hack: height:100% on an inline pseudo-element does
	   nothing, and it never got the display:inline-block/vertical-align it
	   needed. Removed so it cannot interfere with the padding above. */
	.top-bar.is-expanded .top-bar__inner:before {
		content: none;
	}

	.top-bar.is-expanded .top-bar__navigation {
		display: block;
		width: 100%;
	}

	/* Links were inline text, so the tap target was only the ~24px line box.
	   Block-level with padding lifts each one to roughly 48px. */
	.top-bar__navigation a:not(.custom-btn) {
		display: block;
		padding: 12px 0;
	}

	.top-bar__navigation>ul>li {
		margin-top: 0;
		border-bottom: 1px solid rgba(0, 0, 0, .12);
	}

	/* The existing mobile submenu styling is written under
	   li:hover > .submenu, which never matches on a touch device - so the
	   open submenu inherited none of it. These are the same values without
	   the hover gate, plus a tint so a child list reads as a child. */
	.top-bar__navigation .submenu {
		padding: 6px 0;
		border-top-width: 0;
		border-radius: 8px;
		background-color: rgba(0, 0, 0, .05);
	}

	.top-bar__navigation .submenu li {
		margin-top: 0;
		line-height: 1.4;
	}

	.top-bar__navigation .submenu a:not(.custom-btn) {
		padding: 9px 10px;
		font-size: 15px;
		font-weight: 500;
		text-transform: capitalize;
	}

	/* The chevron never changed state. .drop_active is already set by the
	   existing toggle in main.min.js, so this just reads it. */
	.top-bar__navigation li.has-submenu.drop_active:before {
		margin-top: 6px;
		transform: rotate(225deg);
	}
}


/* --------------------------------------------------------------------------
   11b. Hamburger icon

   The icon was pinned with a flat top offset (25px, 15px under 768px) that
   matched neither logo height - the logo is 90px normally and 45px under
   768px - so it sat about 7-10px above the logo's centre line in both bands.
   Centring off the container removes the guesswork: .top-bar__logo and the
   toggler share the same .container.position-relative, so 50% lands on the
   logo's centre at every size.

   It was also a 20x15px glyph in a 40x41px hit area, under the 44px touch
   target guideline.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

	.top-bar__navigation-toggler {
		top: 50%;
		transform: translateY(-50%);
		/* 24px bars + 17px of stacked height inside this = a 48x45 target. */
		padding: 14px 12px;
		/* Bars land 12px in, level with the container's own padding. */
		right: 0;
	}

	.top-bar__navigation-toggler span {
		width: 24px;
		border-radius: 2px;
	}

	.top-bar__navigation-toggler span:before,
	.top-bar__navigation-toggler span:after {
		border-radius: 2px;
	}

	/* Gaps widened from 6px to 7px to suit the wider bars. The .is-active
	   rules that collapse both to top:0 for the X carry an extra class, so
	   they still win and the close state is unaffected. */
	.top-bar__navigation-toggler span:before {
		top: -7px;
	}

	.top-bar__navigation-toggler span:after {
		top: 7px;
	}
}

@media (max-width: 767.98px) {

	/* .padding-mobile insets the logo by 30px here, but the toggler was
	   right:0 - so the bars ended 10px from the screen edge while the logo
	   started 30px in. 18px + its own 12px padding puts them level. */
	.top-bar__navigation-toggler {
		right: 18px;
	}
}


/* --------------------------------------------------------------------------
   11c. Open menu gets clipped sideways while scrolling

   .top-bar.is-expanded .top-bar__inner sets overflow-y:auto and never
   declares overflow-x. Per spec, overflow-x:visible next to a non-visible
   overflow-y computes to auto - so the panel is a scroll container on BOTH
   axes, not just vertically. Anything that pokes even slightly past the
   content box opens a real horizontal scroll range, and a finger drag that
   is not perfectly vertical then pans the menu sideways and shears it off at
   the edge.

   Two things were poking out:
   - li.has-submenu:before floats its chevron with margin-right:-15px against
     a 12px padding-right, so it lands ~3px past the row, plus another ~1px
     once the 45deg rotation is counted.
   - .navigation ul only has its browser-default 40px padding-left removed
     under 768px, so through the 768-991px band every row sat 40px to the
     right inside a centred panel.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

	.top-bar.is-expanded .top-bar__inner {
		overflow-x: hidden;
		/* Keeps a scroll that runs past either end from chaining to the
		   locked page behind the menu. */
		overscroll-behavior: contain;
		/* 100% of the initial containing block includes the area behind the
		   collapsing mobile URL bar; dvh tracks what is actually visible. */
		height: 100%;
		height: 100dvh;
	}

	.top-bar__navigation ul {
		padding-left: 0;
		padding-right: 0;
	}

	/* Keep the chevron inside the row rather than hanging past its edge. */
	.top-bar__navigation li.has-submenu {
		padding-right: 0;
	}

	.top-bar__navigation li.has-submenu:before {
		margin-right: 0;
	}

	/* Long labels - "Corporate Governance and Statutory Disclosures" - now
	   wrap instead of running off the side. */
	.top-bar__navigation a:not(.custom-btn) {
		overflow-wrap: break-word;
	}
}


/* --------------------------------------------------------------------------
   12. Product detail pages - vertical rhythm

   .section is 30px top and bottom under 768px, so every boundary between two
   sections should read as 60px. Two components add a second helping on top
   of that, and the measured gaps down the page came out 90 / 60 / 90:

     product block -> counter        30 + 30 + 30 = 90
     counter -> Who We Are           30 + 30      = 60
     Who We Are -> certificates      30 + 30 + 30 = 90

   Inside the product block the opposite happens - two spacings stack to 40px
   and 32px where the surrounding copy runs at 16px, while the product name,
   category and first paragraph sit almost flush against each other.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

	/* Both of these are a second helping on top of .section's own padding.
	   .counter is shared with the home page and company overview, so those
	   two counter boundaries settle to 60px as well. */
	.counter .__inner {
		padding-top: 0;
	}

	.certificate-grid {
		margin-top: 0;
	}

	/* mt-3 on the copy column lands on top of the image's own bottom margin:
	   40px between the photo and the product name, against 16-24px
	   everywhere else in the block. */
	.product-single .row>.mt-3 {
		margin-top: 0 !important;
	}

	/* This paragraph sits outside .content-container as a direct row child,
	   so its pt-3 lands on top of the previous paragraph's 16px bottom
	   margin - 32px between two paragraphs that read as one run of copy. */
	.product-single .row>p.pt-3 {
		padding-top: 0 !important;
	}

	/* The other direction: .__categories has no bottom margin at all and the
	   paragraph below it resets margin-top, so they touched. */
	.product-single .__categories {
		margin-bottom: 12px;
	}

	/* Trailing margins inside a tab panel add to the section's own padding,
	   so the same 30px measured differently depending on what the panel
	   happened to end with. */
	.product-single .tab-content__item>*:last-child {
		margin-bottom: 0;
	}

	.key-features li:last-child {
		margin-bottom: 0;
	}
}


/* --------------------------------------------------------------------------
   13. "Who We Are" block (component/who-we-are.php)

   The heading here is a bare <h3 class="__title"> with no .section-heading
   wrapper, so it picks up nothing but the element defaults - and h3 is only
   given a size from 560px up (3rem). Below that it fell back to the browser
   default, about 19px, barely larger than the paragraph under it, then
   jumped straight to 48px at 560px.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

	.section-value .__title {
		font-size: clamp(1.5rem, 6vw, 2rem);
		line-height: 1.2;
		margin-bottom: 12px;
		/* h3.__title is force-centred under 768px, which suits the headings
		   that sit inside .section-heading--center. This one does not - its
		   own paragraph is left-aligned, so the two read as unrelated. */
		text-align: left;
	}
}


/* --------------------------------------------------------------------------
   14. Product navigation on phones

   The sidebar - all 38 products across five categories - was display:none
   under 768px, so from a product page there was no way to reach another
   product; the header menu only goes as deep as the five category pages. It
   is a collapsed accordion, so restoring it costs about five rows.

   .col_reverse exists to float the sidebar column above the content, which
   only ever made sense while that column was empty. Below the product copy
   is where a secondary navigation belongs, so the row goes back to plain
   column order and the g-5 gutter becomes the gap between the two.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

	.product-detail-section .sidebar {
		display: block;
		position: static !important;
	}

	.product-detail-section .row.col_reverse {
		flex-direction: column !important;
	}
}


/* --------------------------------------------------------------------------
   15. Business division pages - vertical rhythm

   maize-processing.php, agro-processing.php and spinning-division.php are the
   same four-block run: .food_main intro -> .counter-2 strip -> "Our
   Infrastructure" tabs -> .plant-map. Under 768px .section is 30px top and
   bottom, so every boundary between two blocks should read as 60px. Three of
   them serve a second helping on top of that, and the measured gaps came out
   90 / 78 / 80:

     intro -> counter strip      .food_main pb 60 + .section pt 30 = 90
     counter -> Our Infrastructure  .section pb 30 + mb-5 48       = 78
     tabs -> plant map           .section-full mb 50 + .plant-map pt 30 = 80

   Only .food_main's padding-top is zeroed under 768px; the bottom half of the
   desktop 60/60 is left in place.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

	.food_main {
		padding-bottom: 30px;
	}

	.counter-2.mb-5 {
		margin-bottom: 0 !important;
	}

	.content-block .section-full {
		margin-bottom: 20px;
	}

	/* renewable-energy.php is the odd one out - its counter strip is commented
	   out, so "Our Infrastructure" follows the intro block directly and the
	   only thing between them is .food_main's own 30px. The other three pages
	   get a second 30px from the counter's .section, which is what makes the
	   60px boundary this file settles on everywhere else. The adjacent
	   combinator matches only where that strip is missing. */
	.food_main+.section-heading {
		margin-top: 30px;
	}
}


/* --------------------------------------------------------------------------
   16. Business division pages - counter strip

   The strip is hand-written on each page rather than component/counter.php,
   and it carries g-5 where the shared component carries no gutter class.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

	/* g-5 sets --bs-gutter-x to 3rem, so the row's -24px side margins hang
	   12px past .container-fluid's own 12px padding at each edge - the page
	   picks up a real horizontal scroll on every phone. The same 3rem also
	   became 24px of padding inside each column, and 3rem of row gap. */
	.counter-2 .row.g-5 {
		--bs-gutter-x: 1rem;
		--bs-gutter-y: 1.5rem;
	}

	/* justify-content-sm-center only starts at 576px, so below that the odd
	   third counter sat alone against the left edge of the grid. */
	.counter-2 .counter .row {
		justify-content: center;
	}

	/* background-attachment:fixed is not honoured the same way on mobile
	   Safari and Chrome - the image is sized against the whole document
	   instead of the section, so the strip showed a heavily zoomed crop of
	   the maize photo. */
	.counter-2 {
		background-attachment: scroll;
	}

	/* The cards translate 20px up and down forever (@keyframes upDown). Once
	   the gutter above is tightened a card at the top of its travel overlaps
	   the one above it, and it is a lot of motion on a small screen. */
	.counter-bg .__item {
		animation: none;
	}
}

@media (max-width: 991.98px) {

	/* .counter-img forces height:70px !important, and the img is sized from
	   that height with width:auto - so at the desktop .__ico width of 85px a
	   512x512 icon lands as a square 70x70. Every narrower band shrinks
	   .__ico (50px from 992px, 40px from 576px in section 2) and img-fluid's
	   max-width:100% then clamps the width alone: the icon kept its 70px
	   height and rendered as a 50x70 / 40x70 vertical stretch. Driving the
	   width off .__ico and letting the height follow keeps it square. */
	.counter .__item .__ico .counter-img {
		width: 100%;
		height: auto !important;
	}

	/* line-height:1 on a label that wraps. Section 2 relaxes this only under
	   576px, which covers the shared strip's one-word labels - but these
	   pages carry sentences ("Ring Spinning with Production Capacity" is
	   three lines in a half-width card), so the lines collided right through
	   the tablet band. */
	.counter-2 .counter .__item .__title {
		line-height: 1.3;
	}
}

@media (max-width: 575.98px) {

	/* The columns are col-12 below 576px, so full width is what the markup
	   asks for; section 2's two-up grid overrides it. That grid suits the
	   shared strip's one-word labels, but these cards carry sentences -
	   "Combined Capacity of Corn Grinding" next to a 26px figure - and half
	   of a 360px screen left about 130px for both. */
	.counter-2 .counter .row>[class*="col-"] {
		width: 100%;
	}

	/* Section 2 also flattens .counter .__item to 0 4px, which is right where
	   the item is bare text. Here it is a translucent rounded card, and it
	   ended up hugging its own contents. */
	.counter-bg .__item {
		padding: 14px 10px;
	}
}


/* --------------------------------------------------------------------------
   17. Plant location map

   This is the case section 6 left open. #map is a fixed 500px canvas -
   assets/js/mapdata.js sets width:"500" for every page that draws it - and
   .map-wrapper is overflow:hidden, so below about 540px the right third of
   India was simply cut off, together with the .patch that masks the map's own
   bottom-right branding.

   zoom rather than transform: zoom reflows, so .map-wrapper's height follows
   the map down instead of leaving a tall blank strip under it. Applying the
   same factor to .patch keeps the mask in the same place relative to the map,
   and pinning the column to the scaled width keeps the two right edges
   aligned. Anything that does not support zoom just renders what it renders
   today.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

	.plant-map .map-wrapper {
		width: 300px;
		max-width: 100%;
		/* The row's 12px column padding would otherwise eat into the width
		   set above, since these are border-box. */
		padding-left: 0;
		padding-right: 0;
	}

	.plant-map .map-wrapper>#map,
	.plant-map .map-wrapper>.patch {
		zoom: .6;
	}
}

@media (max-width: 359.98px) {

	.plant-map .map-wrapper {
		width: 250px;
	}

	.plant-map .map-wrapper>#map,
	.plant-map .map-wrapper>.patch {
		zoom: .5;
	}
}


/* --------------------------------------------------------------------------
   18. Centred section headings

   Same shape as section 13, one level up: responsive.css opens with an
   only-screen and (min-width:560px) block that sizes h3 at 3rem, and nothing
   sizes it below that. So "Our Infrastructure" - a bare <h3 class="__title">
   inside .section-heading, which only ever sets line-height - fell back to the
   browser default of about 19px on a phone, near enough the body copy under it
   to stop reading as a section title, then jumped straight to 48px at 560px.

   Only h3 is targeted: starch-and-its-derivatives-exporter-in-india.php puts an
   h1 in the same wrapper and .section-heading h1 already gives it a size.
   -------------------------------------------------------------------------- */
@media (max-width: 559.98px) {

	.section-heading--center h3.__title {
		font-size: clamp(1.5rem, 7vw, 2.25rem);
		line-height: 1.2;
	}
}


/* --------------------------------------------------------------------------
   19. Contact page - company contact blocks (contact-us.php)

   Same shape as section 9: .company-contacts .__inner carries
   margin-bottom:-30px to cancel a 30px bottom margin on
   .company-contacts .__item, and no rule anywhere sets one. Two things follow.
   The three blocks are col-12 under 768px, so Phone / Address / E-mail stacked
   with nothing at all between them - a 72px .__ico sat directly under the
   previous block's last line. And the uncancelled -30px pulled the whole
   component down into the inquiry form below it.

   Restoring the margin the -30px was written against fixes both. It is a no-op
   on desktop, where the three sit side by side and the -30px still cancels it,
   so this needs no media query.
   -------------------------------------------------------------------------- */
.company-contacts .__item {
	margin-bottom: 30px;
}


/* --------------------------------------------------------------------------
   20. Inquiry form (component/product-form.php)

   Every field is col-md-*, so under 768px the form is one stacked column and
   the gaps between fields are the only thing giving it rhythm.
   -------------------------------------------------------------------------- */

/* The DPDP consent row is a bare .d-flex, so it inherits align-items:stretch,
   and a checkbox has no height of its own to opt out with - it is stretched to
   the height of whatever sits next to it. On a phone that label wraps to four
   lines and the checkbox rendered as a tall rectangle. Nothing width-specific
   about it, so no media query. */
.inquiry-form #dpda-consent {
	flex: 0 0 auto;
	align-self: flex-start;
	width: 18px;
	height: 18px;
	margin-top: 3px;
}

/* The country-code addon is populated by the change handler on #country, so
   until a country is picked it is an empty .input-group-text - still a grey
   rounded box in front of the phone field. It reappears on its own the moment
   the handler writes a code into it. */
.inquiry-form .input-group-text:empty {
	display: none;
}

/* Bootstrap squares off the left edge of anything that is not the group's
   first child, and the phone input never is - #countrycode sits in front of it
   as a .d-none carrier for the form value. With the addon hidden that left a
   half-rounded field among fully rounded ones, so put the radius back while
   the addon is away. */
.inquiry-form .input-group-text:empty~.form-control:not(.d-none) {
	margin-left: 0;
	border-top-left-radius: var(--bs-border-radius);
	border-bottom-left-radius: var(--bs-border-radius);
}

@media (max-width: 767.98px) {

	/* .form-group is 25px, but the phone field is an .input-group carrying
	   mb-3 - 16px, and the utility is !important - so one gap in the stack
	   came out short. */
	.inquiry-form .input-group.mb-3 {
		margin-bottom: 25px !important;
	}

	/* The submit row has no margin of its own, so the button sat against the
	   last line of the consent text. */
	.inquiry-form .d-flex+.row {
		margin-top: 16px;
	}

	/* btn-block is a Bootstrap 4 class that 5.x dropped, so the button kept
	   its content width - about 90px of green at the foot of a full-width
	   stacked form. The markup says what it was meant to be. */
	.inquiry-form .btn-block {
		width: 100%;
	}
}