/* Nandini Foundry brand overrides — loaded after the theme's custom.css */

:root{
	--accent-color				: #054da4;	/* logo blue, deepened for white-text contrast */
	--brand-blue				: #0049A0;	/* logo blue */
	--brand-orange				: #F5811C;	/* logo orange (exact): the accent on dark backgrounds, where blue disappears */
}

/* Sub-titles above section headings pick up the logo blue on light sections */
.section-title .section-sub-title{
	color: var(--brand-blue);
}

/* ...and stay white with an orange dot on dark sections (blue text is unreadable on black) */
.dark-section .section-title .section-sub-title{
	color: var(--white-color);
}

.dark-section .section-title .section-sub-title::before{
	background: var(--brand-orange);
}

/* Inline "Send it for a quote" style links on dark sections */
.dark-section .section-footer-text p{
	color: var(--white-color);
}

.dark-section .section-footer-text p a{
	color: var(--brand-orange);
}

.dark-section .section-footer-text p a:hover{
	color: var(--white-color);
}

/* Hero: the second button is secondary, so outline it instead of repeating the solid blue */
.hero-prime .btn-default:not(.btn-highlighted){
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.hero-prime .btn-default:not(.btn-highlighted)::after{
	background: var(--brand-blue);
}

/* Header logo */
.navbar-brand img{
	max-height: 64px;
	width: auto;
}

/* Language dropdown: long list scrolls inside the menu */
.main-menu ul li.language-menu-item ul.language-submenu{
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Mobile (slicknav copy): the fixed menu can't scroll, so the list scrolls itself and stays on screen */
.slicknav_nav ul.language-submenu{
	max-height: min(300px, 45vh);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Client names (the company profile has names, no logos) */
.client-name-list{
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.client-name-list li{
	display: flex;
	align-items: center;
	gap: 10px;
	background-color: var(--bg-color);
	border-radius: 10px;
	padding: 14px 20px;
	font-weight: 500;
	color: var(--primary-color);
}

.client-name-list li::before{
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--accent-color);
	flex-shrink: 0;
}

@media only screen and (max-width: 767px){
	.client-name-list li{
		width: 100%;
		padding: 12px 16px;
	}
}

/* Footer contact box: theme capitalises list text, which mangles email addresses */
.working-hour-box-prime ul li a,
.working-hour-box-prime ul li span + span{
	text-transform: none;
}

/* CTA without the theme's overlapping form card: keep the whole band dark */
/* CTA: rounded brand-blue card, text left + photo right; stacks on mobile */
.nandini-cta-section{
	padding: 100px 0;
}

.nandini-cta-card{
	position: relative;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	background: var(--brand-blue);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 30px 60px -30px rgba(0, 73, 160, 0.55);
}

/* soft orange glow behind the text */
.nandini-cta-card::before{
	content: '';
	position: absolute;
	width: 420px;
	height: 420px;
	left: -160px;
	bottom: -220px;
	background: radial-gradient(circle, rgba(245, 129, 28, 0.45), transparent 70%);
	pointer-events: none;
}

.nandini-cta-content{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 70px 60px;
}

.nandini-cta-content .section-title{
	margin-bottom: 0;
}

.nandini-cta-content .section-title .section-sub-title{
	color: var(--white-color);
	background: rgba(255, 255, 255, 0.12);
}

.nandini-cta-content .section-title p{
	color: rgba(255, 255, 255, 0.85);
	margin-top: 20px;
}

.nandini-cta-btns{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 35px;
}

/* WhatsApp brand green, matching the product-page button and the floating chat icon */
.nandini-cta-btns .nandini-cta-whatsapp{
	background: #25D366;
}

.nandini-cta-btns .nandini-cta-whatsapp::after{
	background: #1DA851;
}

/* the main CTA button would be blue on the blue card, so it takes the logo orange */
.nandini-cta-btns .btn-highlighted{
	background: var(--brand-orange);
}

.nandini-cta-content .section-title .section-sub-title::before{
	background: var(--brand-orange);
}

.nandini-cta-image{
	position: relative;
	min-height: 100%;
}

.nandini-cta-image{
	overflow: hidden;
	margin-left: -2px;	/* overlap the blue so no seam shows */
}

/* zoomed from the top so the photographer's watermark at the bottom is cropped out */
.nandini-cta-image img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.15);
	transform-origin: center top;
}

/* blend the photo into the blue card */
.nandini-cta-image::after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--brand-blue) 0%, rgba(0, 73, 160, 0) 35%);
}

@media only screen and (max-width: 1199px){
	.nandini-cta-content{
		padding: 55px 45px;
	}
}

@media only screen and (max-width: 991px){
	.nandini-cta-section{
		padding: 60px 0;
	}

	.nandini-cta-card{
		grid-template-columns: 1fr;
		border-radius: 20px;
	}

	.nandini-cta-content{
		padding: 45px 35px;
	}

	.nandini-cta-image{
		height: 300px;
		margin: -2px 0 0;
	}

	.nandini-cta-image::after{
		background: linear-gradient(180deg, var(--brand-blue) 0%, rgba(0, 73, 160, 0) 30%);
	}
}

@media only screen and (max-width: 575px){
	.nandini-cta-section{
		padding: 50px 0;
	}

	.nandini-cta-card{
		border-radius: 16px;
	}

	.nandini-cta-content{
		padding: 35px 22px;
	}

	.nandini-cta-btns{
		margin-top: 25px;
	}

	.nandini-cta-btns .btn-default{
		width: 100%;
		text-align: center;
	}

	.nandini-cta-image{
		height: 220px;
	}
}

/* Header: keep top-level menu labels and the quote button on one line */
.main-menu .nav-menu-wrapper > ul > li > a,
.header-btn .btn-default{
	white-space: nowrap;
}

/* ...and tighten the spacing on small laptops (992-1299px) so everything fits the header bar */
@media only screen and (min-width: 992px) and (max-width: 1299px){
	.main-menu .nav-menu-wrapper > ul > li{
		margin: 0 2px;
	}

	.main-menu .nav-menu-wrapper > ul > li > a{
		font-size: 15px;
		padding: 12px 7px !important;
	}

	.header-btn .btn-default{
		font-size: 14px;
		padding: 14px 40px 14px 16px;
	}

	.header-btn .btn-default::before{
		right: 16px;
	}

	.navbar-brand img{
		max-width: 140px !important;
	}
}

/* Capability intros: image and text stack below 1200px and need a gap between them */
@media only screen and (max-width: 1199px){
	.what-we-do .row > [class*="col-"]:first-child .what-we-do-image{
		margin-bottom: 30px;
	}

	.what-we-do .row > [class*="col-"] + [class*="col-"] .what-we-do-image{
		margin-top: 30px;
	}
}

/* Contact page social icons: the icons are white, so give them brand-blue circles on the light background */
.contact-social{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 30px 0;
}

.contact-social a{
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-color);
	border-radius: 50%;
	transition: all 0.3s ease-in-out;
}

.contact-social a:hover{
	background: var(--primary-color);
}

.contact-social a img{
	width: 18px !important;
	height: 18px !important;
}

/* About > Industries: the theme's notched mask is drawn for a wide banner and distorts on these taller images */
.service-item-image-gold figure{
	mask-image: none;
	-webkit-mask-image: none;
	background-image: none;
}

/* Director profile: space the bio from the contact card, and stack the card's items in narrow columns */
.team-member-professional-content{
	margin-bottom: 30px;
}

.team-contact-item-content p a{
	word-break: break-word;
}

@media only screen and (max-width: 991px){
	.team-contact-item{
		width: 100%;
		border-right: none;
	}
}

/* Directors with transparent cut-out portraits */
.team-item-image figure{
	background-color: #E9E9E9;
}

/* Our Journey timeline (About page): one horizontal line, a dot per year,
   milestones alternating above (odd) and below (even) so neighbours can be wider than their column */
.nandini-journey{
	padding: 120px 0;
	background-color: var(--bg-color);
}

.journey-list{
	--journey-dot: 18px;
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	grid-template-rows: auto 48px auto;	/* top milestones | line | bottom milestones */
}

/* the line itself, as a grid item spanning the middle row */
.journey-list::before{
	content: '';
	grid-column: 1 / -1;
	grid-row: 2;
	align-self: center;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--brand-blue) 4%, var(--brand-blue) 96%, transparent);
	opacity: .35;
}

.journey-item{
	--dot-x: 50%;	/* the dot sits under the centre of the item's own column */
	position: relative;
	grid-row: 1;
	align-self: end;
	width: 160%;
	margin-left: -30%;
	text-align: center;
	padding-bottom: 26px;
}

.journey-item:nth-child(even){
	grid-row: 3;
	align-self: start;
	padding: 26px 0 0;
}

/* first and last items hug the container edge instead of spilling past it */
.journey-item:first-child{
	--dot-x: 31.25%;
	margin-left: 0;
	text-align: left;
}

.journey-item:last-child{
	--dot-x: 68.75%;
	margin-left: -60%;
	text-align: right;
}

/* stem from the text to the line */
.journey-item::before{
	content: '';
	position: absolute;
	left: var(--dot-x);
	bottom: 0;
	width: 2px;
	height: 18px;
	transform: translateX(-50%);
	background: var(--brand-blue);
	opacity: .35;
}

/* dot on the line: 24px down from the item edge = middle of the 48px line row */
.journey-item::after{
	content: '';
	position: absolute;
	left: var(--dot-x);
	bottom: calc(-24px - var(--journey-dot) / 2);
	width: var(--journey-dot);
	height: var(--journey-dot);
	border-radius: 50%;
	transform: translateX(-50%);
	background: var(--brand-blue);
	border: 4px solid var(--white-color);
	box-shadow: 0 0 0 2px var(--brand-blue);
}

.journey-item:nth-child(even)::before{
	bottom: auto;
	top: 0;
}

.journey-item:nth-child(even)::after{
	bottom: auto;
	top: calc(-24px - var(--journey-dot) / 2);
}

.journey-year{
	display: block;
	font-family: var(--accent-font);
	font-size: 40px;
	font-weight: 600;
	line-height: 1.1em;
	color: var(--accent-color);
	margin-bottom: 8px;
}

.journey-item:nth-child(even) .journey-year{
	color: var(--brand-blue);
}

.journey-item h3{
	font-size: 20px;
	margin-bottom: 8px;
}

.journey-item p{
	margin: 0;
	font-size: 15px;
	line-height: 1.5em;
}

/* tablet and phone: seven columns get too narrow, so the line turns vertical on the left */
@media only screen and (max-width: 991px){
	.nandini-journey{
		padding: 60px 0;
	}

	.journey-list{
		display: block;
		position: relative;
		padding-left: 36px;
	}

	/* the line is drawn per item instead (dot to next dot), so it ends at the last dot */
	.journey-list::before{
		display: none;
	}

	.journey-item,
	.journey-item:nth-child(even),
	.journey-item:first-child,
	.journey-item:last-child{
		width: auto;
		margin: 0;
		padding: 0 0 30px;
		text-align: left;
	}

	.journey-item:last-child{
		padding-bottom: 0;
	}

	/* segment from this dot's centre (15px down) to the next item's dot, 15px into the next item */
	.journey-item::before,
	.journey-item:nth-child(even)::before{
		left: calc(-36px + 9px);
		top: 15px;
		bottom: -15px;
		height: auto;
	}

	.journey-item:last-child::before{
		display: none;
	}

	.journey-item::after,
	.journey-item:nth-child(even)::after{
		left: calc(-36px + 9px);
		top: 6px;
		bottom: auto;
	}

	.journey-year{
		font-size: 32px;
		margin-bottom: 6px;
	}
}

/* Industries We Serve (About page): photo tiles with the title and line of text over a dark fade */
.nf-industry-grid{
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.nf-industry-tile{
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 20px;
	overflow: hidden;
	background-color: var(--white-color);
	isolation: isolate;
}

.nf-industry-tile img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
	z-index: -2;
}

/* fade from clear to near-black so white text stays readable on the light product photos */
.nf-industry-tile::after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .88) 100%);
	z-index: -1;
	transition: opacity .4s ease;
}

.nf-industry-tile:hover img{
	transform: scale(1.06);
}

.nf-industry-info{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px;
	color: var(--white-color);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .45);	/* keeps text legible over busy photos like the factory shots */
}

.nf-industry-no{
	display: inline-block;
	font-family: var(--accent-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--white-color);
	background-color: var(--accent-color);
	border-radius: 100px;
	padding: 6px 10px;
	margin-bottom: 12px;
}

.nf-industry-info h3{
	font-size: 22px;
	line-height: 1.2em;
	color: var(--white-color);
	margin-bottom: 6px;
}

.nf-industry-info p{
	font-size: 15px;
	line-height: 1.45em;
	color: rgba(255, 255, 255, .85);
	margin: 0;
}

@media only screen and (max-width: 1199px){
	.nf-industry-info{
		padding: 20px;
	}

	.nf-industry-info h3{
		font-size: 20px;
	}
}

@media only screen and (max-width: 991px){
	.nf-industry-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.nf-industry-tile{
		aspect-ratio: 1 / 1;
	}
}

/* phones: two narrow columns are too tight for the text, so one wide tile per row */
@media only screen and (max-width: 575px){
	.nf-industry-grid{
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.nf-industry-tile{
		aspect-ratio: 4 / 3;
	}

	/* on the wide phone tile the text covers ~45% of the photo, so the fade starts higher */
	.nf-industry-tile::after{
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .65) 55%, rgba(0, 0, 0, .9) 100%);
	}
}

/* Inner page header: Nandini foundry photo instead of the theme's stock image */
.page-header{
	background-image: url('../images/nandini/molten-iron-pouring.jpg');
	background-position: center 40%;
	/* the floating menu covers the top ~160px, so most of the space goes above the title to centre it in the visible photo */
	padding: 222px 0 80px;
}

/* tablet and phone: the menu no longer floats over the banner, so the padding is just the photo band */
@media only screen and (max-width: 991px){
	.page-header{
		padding: 80px 0;
	}
}

@media only screen and (max-width: 767px){
	.page-header{
		padding: 60px 0;
	}
}

/* Footer: logo | pages | products | get in touch */
.nandini-footer{
	padding-top: 90px;
}

.nandini-footer .footer-links-prime{
	width: 100%;
	margin-bottom: 40px;
}

.nandini-footer .footer-links-prime::before{
	display: none;
}

.nandini-footer .footer-pages-links ul{
	column-count: 2;
	column-gap: 30px;
}

.nandini-footer .footer-pages-links ul li{
	break-inside: avoid;
}

/* footer sits on black: bullets, icons and hovers use the logo orange so they stay visible */
.nandini-footer .footer-links-prime ul li::marker{
	color: var(--brand-orange);
}

.nandini-footer .footer-links-prime ul li a:hover,
.nandini-footer .footer-bottom-bar a:hover{
	color: var(--brand-orange);
}

.footer-google-rating{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border-top: 4px solid #34A853;
	border-radius: 4px;
	padding: 10px 16px;
	margin-top: 25px;
}

.footer-google-rating img{
	width: 36px;
	height: 36px;
}

.footer-google-rating-text span{
	display: block;
	font-size: 14px;
	color: #333;
	line-height: 1.3em;
}

.footer-google-rating-text strong{
	font-size: 18px;
	color: var(--accent-color);
}

.footer-google-rating-text strong i{
	font-size: 14px;
}

.footer-social-icons{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 25px 0 40px;
}

.footer-social-icons li a{
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--dark-divider-color);
	border-radius: 50%;
	transition: all 0.3s ease-in-out;
}

.footer-social-icons li a:hover{
	background: var(--accent-color);
	border-color: var(--accent-color);
}

.footer-contact-prime ul{
	list-style: none;
	padding: 0;
}

.footer-contact-prime ul li{
	display: flex;
	align-items: flex-start;
	gap: 14px;
	text-transform: none;
	margin-bottom: 18px;
}

.footer-contact-prime ul li i{
	color: var(--brand-orange);
	font-size: 18px;
	width: 20px;
	margin-top: 4px;
	flex-shrink: 0;
}

.footer-contact-prime ul li a{
	word-break: break-word;
}

.footer-direction-link{
	display: inline-block;
	margin-top: 6px;
	text-decoration: underline;
}

.footer-bottom-bar{
	border-top: 1px solid var(--dark-divider-color);
	padding: 22px 0;
	margin-top: 20px;
	text-align: center;
}

.footer-bottom-bar p{
	color: var(--white-color);
	margin: 0;
}

.footer-bottom-bar a{
	color: var(--white-color);
	font-weight: 700;
}

.footer-bottom-bar a:hover{
	color: var(--accent-color);
}

@media only screen and (max-width: 991px){
	.nandini-footer{
		padding-top: 50px;
	}

	.nandini-footer .footer-links-prime{
		margin-bottom: 30px;
	}
}

@media only screen and (max-width: 767px){
	.footer-social-icons{
		margin-bottom: 30px;
	}

	.footer-bottom-bar p{
		font-size: 14px;
	}

	/* keep the copyright line clear of the floating WhatsApp button */
	.footer-bottom-bar{
		padding-bottom: 90px;
	}
}

/* Preloader: foundry ladle pours molten iron into a sand flask (2.8s loop) */
.preloader.nandini-preloader{
	background: radial-gradient(circle at 50% 38%, rgba(245, 129, 28, 0.12) 0%, rgba(245, 129, 28, 0) 38%), var(--white-color);
	flex-direction: column;
	gap: 16px;
	padding: 20px;
}

.nandini-pour svg{
	display: block;
	width: min(340px, 78vw);
	height: auto;
	overflow: visible;
}

.nandini-preloader-logo{
	width: auto;
	max-width: min(200px, 55vw);
	max-height: 72px;
	object-fit: contain;
	/* the logo's icons stick out on the left, so nudge the image left to centre the word "Nandini" (measured on nandini-logo.png; re-check if the logo changes) */
	transform: translateX(-5.8%);
}

/* progress bar: eases to ~85% while loading, completes on window load */
.nandini-preloader-bar{
	width: min(220px, 60vw);
	height: 4px;
	border-radius: 4px;
	background: #F1E7DC;
	overflow: hidden;
}

.nandini-preloader-bar span{
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #FFB347, #F5811C);
	box-shadow: 0 0 8px rgba(245, 129, 28, 0.6);
	animation: np-progress 3s cubic-bezier(0.1, 0.6, 0.3, 1) forwards;
}

.nandini-preloader.is-loaded .nandini-preloader-bar span{
	width: 100%;
	animation: none;
	transition: width 0.3s ease-out;
}

.nandini-preloader-text{
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--brand-blue);
	/* letter-spacing leaves a gap after the last letter; balance it so the text is truly centred */
	padding-left: 0.25em;
}

/* flask */
.np-box{
	stroke: #3A3F4A;
	stroke-width: 2.5;
}

.np-frame{
	fill: #3A3F4A;
}

.np-parting{
	stroke: #3A3F4A;
	stroke-width: 1.5;
	stroke-dasharray: 4 3;
}

.np-hollow{
	fill: #4B4F58;
}

.np-cup{
	fill: #3A3F4A;
}

.np-cup-fill{
	fill: #FF9A2E;
	opacity: 0;
	filter: drop-shadow(0 0 4px rgba(255, 140, 30, 0.9));
	animation: np-cup 2.8s ease-in-out infinite;
}

.np-sprue-fill{
	fill: #FF9A2E;
	opacity: 0;
	animation: np-cup 2.8s ease-in-out infinite;
}

.np-fill{
	fill: url(#np-molten);
	transform-box: fill-box;
	transform-origin: bottom;
	animation: np-fill 2.8s ease-in-out infinite;
}

/* stream */
.np-stream{
	stroke: #FF9A2E;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: 14 3;
	filter: drop-shadow(0 0 4px rgba(255, 140, 30, 0.9));
	opacity: 0;
	animation: np-stream 2.8s linear infinite, np-flow 0.35s linear infinite;
}

/* ladle */
.np-ladle{
	transform-box: view-box;
	transform-origin: 144px 33px;
	animation: np-tilt 2.8s ease-in-out infinite;
}

.np-bail{
	fill: none;
	stroke: #3A3F4A;
	stroke-width: 3;
	stroke-linecap: round;
}

.np-ring{
	fill: none;
	stroke: #3A3F4A;
	stroke-width: 2.5;
}

.np-trunnion{
	fill: #4A5262;
	stroke: #1E2229;
	stroke-width: 1.2;
}

.np-body{
	stroke: #1E2229;
	stroke-width: 1.5;
	stroke-linejoin: round;
}

.np-band{
	stroke: #5A6272;
	stroke-width: 2.5;
}

.np-shine{
	stroke: rgba(255, 255, 255, 0.18);
	stroke-width: 2;
	stroke-linecap: round;
}

.np-rim{
	fill: #4A5262;
	stroke: #1E2229;
	stroke-width: 1.2;
	stroke-linejoin: round;
}

.np-surface{
	fill: url(#np-molten);
	filter: drop-shadow(0 0 5px rgba(255, 140, 30, 0.9));
}

/* sparks */
.np-spark{
	fill: #FFB347;
	opacity: 0;
	animation: np-spark-1 2.8s ease-out infinite;
}

.np-spark-2{ animation-name: np-spark-2; }
.np-spark-3{ animation-name: np-spark-3; }

@keyframes np-tilt{
	0%, 12%{ transform: rotate(0deg); }
	28%, 74%{ transform: rotate(40deg); }
	90%, 100%{ transform: rotate(0deg); }
}

@keyframes np-stream{
	0%, 26%{ opacity: 0; }
	30%, 72%{ opacity: 1; }
	76%, 100%{ opacity: 0; }
}

@keyframes np-flow{
	to{ stroke-dashoffset: -17; }
}

@keyframes np-cup{
	0%, 29%{ opacity: 0; }
	33%, 86%{ opacity: 1; }
	100%{ opacity: 0; }
}

@keyframes np-fill{
	0%, 34%{ transform: scaleY(0); opacity: 1; }
	76%{ transform: scaleY(1); opacity: 1; }
	88%{ transform: scaleY(1); opacity: 1; }
	100%{ transform: scaleY(1); opacity: 0; }
}

@keyframes np-progress{
	to{ width: 85%; }
}

@keyframes np-spark-1{
	0%, 32%{ opacity: 0; transform: translate(0, 0); }
	36%{ opacity: 1; }
	50%{ opacity: 0; transform: translate(-16px, -16px); }
	54%{ opacity: 0; transform: translate(0, 0); }
	58%{ opacity: 1; }
	72%, 100%{ opacity: 0; transform: translate(-13px, -19px); }
}

@keyframes np-spark-2{
	0%, 36%{ opacity: 0; transform: translate(0, 0); }
	40%{ opacity: 1; }
	56%{ opacity: 0; transform: translate(16px, -14px); }
	60%{ opacity: 0; transform: translate(0, 0); }
	63%{ opacity: 1; }
	74%, 100%{ opacity: 0; transform: translate(14px, -12px); }
}

@keyframes np-spark-3{
	0%, 40%{ opacity: 0; transform: translate(0, 0); }
	44%{ opacity: 1; }
	60%{ opacity: 0; transform: translate(5px, -22px); }
	100%{ opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
	.np-ladle{ transform: rotate(40deg); }
	.np-stream, .np-cup-fill, .np-sprue-fill{ opacity: 1; }
	.np-fill{ transform: scaleY(0.6); }
	.np-ladle, .np-stream, .np-fill, .np-spark, .np-cup-fill, .np-sprue-fill{ animation: none; }
}


/* Latest blog follows the dark client strip on Home and About; it had relied on the old client section's bottom padding */
.blog-section{
	padding-top: 100px;
}

@media only screen and (max-width: 991px){
	.blog-section{
		padding-top: 60px;
	}
}

/* Impact/stat cards: the theme's 365px min-height leaves room for an icon; cards without one shrink to their content */
.impact-item-prime:not(:has(.icon-box)){
	min-height: 0;
}

/* Approach cards: the 290px min-height is sized for text plus a bullet list; text-only cards shrink to fit */
.approach-item-body:not(:has(.approach-item-body-list)){
	min-height: 0;
}

/* Clients strip: orange pill gets an orange dot (the theme dot is blue) */
.nf-clients .section-title .section-sub-title::before{
	background: var(--brand-orange);
}

/* Inner page header on phones: the banner is narrow, so "cover" shows the photo's full height including the
   photographer's watermark along the bottom; zoom in from the top so the bottom strip is cropped away */
@media only screen and (max-width: 767px){
	.page-header{
		background-size: auto 150% !important;
		background-position: center 25% !important;
	}
}

/* Contact page: the theme greys this pill for a white card, but our form sits straight on the grey page */
.page-contact-us .section-title .section-sub-title{
	background: var(--white-color);
}

/* director name is the page's h1, kept at the section h2 size */
.team-member-about .section-title h1{
	font-size: 48px;
}

@media only screen and (max-width: 991px){
	.team-member-about .section-title h1{
		font-size: 38px;
	}
}

@media only screen and (max-width: 767px){
	.team-member-about .section-title h1{
		font-size: 26px;
	}
}

/* review stars sit on the dark testimonial section, where blue disappears */
.testimonial-item-rating-star i{
	color: var(--brand-orange);
}

/* icon circles: the theme scales a black circle over the blue one on hover.
   Use the logo orange instead, and keep font icons (<i>) above it - only the
   theme's <img> icons had a z-index, so the director phone icon vanished */
.team-contact-item .icon-box::before,
.contact-info-item .icon-box::before,
.approach-item-header .icon-box::before,
.about-us-info-item-prime .icon-box::before,
.why-choose-us-item-prime .icon-box::before,
.impact-item-body-prime .icon-box::before,
.service-item-header-gold .icon-box::before{
	background: var(--brand-orange);
}

/* the theme turned the contact icon black for its white hover circle; keep it white on orange */
.contact-info-item:hover .icon-box img{
	filter: none;
}

.team-contact-item .icon-box i{
	position: relative;
	z-index: 1;
}

/* director contact box: an odd last item (e.g. only a phone) takes the full
   row instead of leaving an empty half beside it */
.team-contact-item:last-child:nth-child(odd){
	width: 100%;
	border-right: none;
}

/* review text inherits a 1em line-height, so wrapped lines touched */
.testimonial-item-content > div{
	line-height: 1.6em;
}

/* the theme hides the system cursor (cursor: none) expecting its animated
   cursor script, which this site doesn't load, so give the normal one back */
.section-title h1,
.section-title h2,
.page-header-box h1,
.testimonial-slider .swiper,
.testimonial-slider-prime .swiper-wrapper{
	cursor: auto;
}
.service-item-image figure,
.service-item-image figure a,
.project-item-image figure,
.project-item-image figure a,
.team-item-image figure,
.team-item-image a,
.page-gallery-box .photo-gallery a,
.service-item-image-gold a{
	cursor: pointer;
}

/* ==========================================================================
   Section spacing: one gap between every section, site-wide.
   --nf-section-gap is the distance from one section's content to the next.
   Every section is padded by half of it top and bottom, so two plain sections
   add up to one gap, and a coloured block (dark, white, photo) has half inside
   and half outside its edge: content-to-content is always the same.
   The hero and page banners keep their own inside padding.
   ========================================================================== */
:root{
	--nf-section-gap: 120px;
	--nf-section-pad: calc(var(--nf-section-gap) / 2);
}

@media only screen and (max-width: 991px){
	:root{
		--nf-section-gap: 90px;
	}
}

@media only screen and (max-width: 575px){
	:root{
		--nf-section-gap: 60px;
	}
}

.main-header ~ :is(.nf-certified, .about-us-prime, .our-services-prime, .our-impact-prime, .nf-industries, .our-projects, .nf-top-products, .dsn-testimonials, .why-choose-us-prime, .our-team, .nf-clients, .blog-section, .our-faqs, .our-testimonials, .nandini-cta-section, .what-we-do, .our-approach, .nandini-journey, .page-contact-us, .page-blog, .page-single-post, .page-projects, .page-gallery, .page-team, .page-services, .wrapper, .nf-similar-products),
.main-header ~ .nandini-cta-section.nandini-cta-small{
	padding-top: var(--nf-section-pad);
	padding-bottom: var(--nf-section-pad);
	margin-top: 0;
	margin-bottom: 0;
}

/* home hero runs straight into the dark services block (no colour edge),
   so its bottom follows the same half-gap as every section */
.main-header ~ .hero-prime{
	padding-bottom: var(--nf-section-pad);
}

/* the director profile has no page banner, so its top padding also clears the fixed header */
.main-header ~ .page-team-single{
	padding-bottom: var(--nf-section-pad);
}

/* The last row of cards keeps its 30px bottom margin, which would add to the gap */
.main-header ~ :is(.our-team, .blog-section, .our-approach, .page-blog, .page-gallery, .page-team, .page-projects, .page-services:has(.service-item), .our-impact-prime:not(:has(.section-footer-text)), .page-single-post:has(.post-item)){
	padding-bottom: calc(var(--nf-section-pad) - 30px);
}

/* news cards use Bootstrap's mb-4 (24px) instead */
.main-header ~ :is(.page-projects, .page-single-post):has(.event-body){
	padding-bottom: calc(var(--nf-section-pad) - 24px);
}

/* policy text: drop the last paragraph's margin */
.page-services .col-lg-9 :is(p, ul, ol):last-child{
	margin-bottom: 0;
}

/* blog / news post: the "Similar" block is last, so it needs no margin below */
.page-single-post .section-row.mt-5{
	margin-bottom: 0;
}

/* product page: the inner block had its own section padding on top of the wrapper's */
.main-header ~ .wrapper > .project-info.section-margin,
.main-header ~ .wrapper > .project-info.section-margin > .container{
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
}

/* contact page: the social links close the left column on desktop */
@media only screen and (min-width: 992px){
	.page-contact-us .contact-social{
		margin-bottom: 0;
	}
}

/* director profile: the photo and the last block of text close the section */
@media only screen and (min-width: 768px){
	.page-team-single .team-single-image{
		margin-bottom: 0;
	}
}

.page-team-single .team-member-about:last-child{
	margin-bottom: 0;
}

/* ==========================================================================
   About page: Certified & Trusted
   centered title, 3 boxes and a button over a faded facility photo
   ========================================================================== */
.nf-certified{
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* light wash over the photo keeps the text readable */
.nf-certified::before{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(247, 247, 247, 0.93) 0%, rgba(247, 247, 247, 0.88) 50%, rgba(247, 247, 247, 0.95) 100%);
}

.nf-certified > .container{
	position: relative;
	z-index: 1;
}

.nf-certified .section-title p{
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.nf-certified-item{
	height: calc(100% - 30px);
	margin-bottom: 30px;
	background: var(--white-color);
	border-radius: 20px;
	padding: 40px 30px;
	text-align: center;
	box-shadow: 0 20px 40px -25px rgba(5, 77, 164, 0.35);
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.nf-certified-item:hover{
	transform: translateY(-6px);
	box-shadow: 0 25px 45px -22px rgba(5, 77, 164, 0.45);
}

.nf-certified-icon{
	width: 70px;
	height: 70px;
	margin: 0 auto 25px;
	border-radius: 50%;
	background: var(--accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: var(--white-color);
}

.nf-certified-item h3{
	font-size: 20px;
	line-height: 1.3em;
	margin-bottom: 12px;
}

.nf-certified-item p{
	margin: 0;
}

.nf-certified-btn{
	margin-top: 20px;
	text-align: center;
}

@media only screen and (max-width: 767px){
	.nf-certified-item{
		padding: 30px 22px;
	}

	.nf-certified-icon{
		width: 60px;
		height: 60px;
		font-size: 24px;
		margin-bottom: 20px;
	}

	.nf-certified-btn{
		margin-top: 10px;
	}
}

/* Links inside admin-written rich text (policy, blog, product descriptions) use the brand blue, not Bootstrap's default blue */
.markdown-content a{
	color: var(--accent-color);
	text-decoration: underline;
}

.markdown-content a:hover{
	color: var(--brand-orange);
}

/* Keyboard focus ring in brand blue instead of the browser/Bootstrap default */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
}

.dark-section a:focus-visible,
.dark-section button:focus-visible{
	outline-color: var(--brand-orange);
}

/* Product cards: product photos are close-ups on white, so show the whole part (contain) in a white
   image area with the title strip underneath, instead of the theme's full-bleed photo + floating label */
.project-item.nf-product-card{
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 0;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
}

.nf-product-card .project-item-image{
	position: relative;
	height: auto;
	aspect-ratio: 4 / 3;
	background: var(--white-color);
	overflow: hidden;
}

.nf-product-card .project-item-image img{
	object-fit: contain;
	padding: 16px;
}

.nf-product-card .project-item-content{
	flex-grow: 1;
	border-radius: 0;
	border-top: 1px solid var(--divider-color);
	padding: 20px 70px 20px 24px;
}

.nf-product-card .project-item-content h2{
	font-size: 18px;
	line-height: 1.35em;
	margin: 0;
}

.nf-product-card .project-item-btn{
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
}

.nf-product-card .project-item-btn a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--accent-color);
	transition: background 0.3s ease-in-out;
}

.nf-product-card:hover .project-item-btn a{
	background: var(--brand-orange);
}

.nf-product-card .project-item-btn img{
	width: 14px;
	height: 14px;
}

/* ===== Keyword / city landing pages (front/casting_keyword) ===== */

/* No page banner here: the intro is the first section, so on desktop it also clears the
   header that floats over the top of the page (below 992px the header is in the flow) */
.main-header ~ .page-contact-us.nf-kw-intro{
	padding-top: calc(130px + var(--nf-section-pad));
}

@media only screen and (max-width: 991px){
	.main-header ~ .page-contact-us.nf-kw-intro{
		padding-top: var(--nf-section-pad);
	}
}

.nf-kw-intro h1{
	font-size: 52px;
	line-height: 1.15em;
	margin-bottom: 0;
}

.nf-kw-breadcrumb ol{
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
	font-size: 14px;
	color: var(--text-color);
}

.nf-kw-breadcrumb li + li::before{
	content: '/';
	margin: 0 8px;
	opacity: 0.6;
}

.nf-kw-breadcrumb a{
	color: var(--accent-color);
}

.nf-kw-points{
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 12px;
}

.nf-kw-points li{
	position: relative;
	padding-left: 32px;
	font-weight: 500;
	color: var(--primary-color);
}

.nf-kw-points li::before{
	content: '\f00c';
	font-family: 'Font Awesome 7 Free';
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* top enquiry form: white card, labels above the fields */
.nf-kw-form{
	background: var(--white-color);
	border: 1px solid #E9ECF1;
	border-radius: 20px;
	padding: 36px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

.nf-kw-form h2{
	font-size: 26px;
	margin-bottom: 6px;
}

.nf-kw-form > p{
	margin-bottom: 22px;
}

.nf-kw-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.nf-kw-grid .nf-kw-full{
	grid-column: 1 / -1;
}

.nf-kw-form label{
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--primary-color);
	margin-bottom: 8px;
}

.nf-kw-form input,
.nf-kw-form textarea,
.nf-kw-cta-box input{
	width: 100%;
	font-size: 15px;
	padding: 13px 16px;
	color: var(--primary-color);
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	outline: none;
	transition: border-color 0.2s ease;
}

.nf-kw-form textarea{
	resize: vertical;
}

.nf-kw-form input:focus,
.nf-kw-form textarea:focus,
.nf-kw-cta-box input:focus{
	border-color: var(--accent-color);
}

.nf-kw-captcha{
	margin-top: 20px;
}

.nf-kw-captcha .captcha-error{
	display: none;
	color: var(--error-color);
	margin-top: 8px;
}

.nf-kw-actions{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px 20px;
	margin-top: 22px;
}

.nf-kw-wa{
	font-weight: 600;
	color: #1DA851;
}

.nf-kw-wa i{
	font-size: 20px;
	vertical-align: -2px;
}

.nf-kw-more{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	margin-top: 10px;
}

/* long category names wrap on phones: the theme button's 1em line-height made
   the two lines touch, and buttons of different widths looked uneven */
.nf-kw-more .btn-default{
	line-height: 1.3em;
}

@media only screen and (max-width: 575px){
	.nf-kw-more .btn-default{
		width: 100%;
		text-align: left;
	}
}

/* wrapped checklist lines and the prefilled textarea text need room to breathe */
.nf-kw-points li,
.nf-kw-form textarea{
	line-height: 1.5em;
}

.nf-kw-links .why-choose-us-footer-prime{
	margin-top: 0;
}

.nf-kw-links .why-choose-us-footer-list-prime ul{
	gap: 12px;
}

/* closing CTA: the blue card's photo half becomes a quick enquiry form */
.nf-kw-cta-note{
	color: rgba(255, 255, 255, 0.75);
	margin: 15px 0 0;
}

.nf-kw-cta-form{
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	padding: 50px 50px 50px 0;
}

.nf-kw-cta-box{
	width: 100%;
	background: var(--white-color);
	border-radius: 18px;
	padding: 32px;
}

.nf-kw-cta-box h3{
	font-size: 24px;
	margin-bottom: 4px;
}

.nf-kw-cta-box > p{
	margin-bottom: 18px;
}

/* minmax(0, 1fr): the 304px reCAPTCHA must not stretch the column on narrow phones (the page script scales it to fit) */
.nf-kw-cta-box form{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.nf-kw-cta-box .btn-default{
	width: 100%;
	justify-content: center;
	margin-top: 4px;
}

.nf-kw-cta-box .btn-highlighted{
	background: var(--brand-orange);
}

/* the theme's highlighted hover fills white, which vanishes on this white card - fill blue instead */
.nf-kw-cta-box .btn-default.btn-highlighted::after{
	background: var(--accent-color);
}

.nf-kw-cta-box .btn-default.btn-highlighted:hover{
	color: var(--white-color);
}

.nf-kw-cta-box .btn-default.btn-highlighted:hover::before{
	filter: none;
}

.nf-kw-cta-small{
	font-size: 13px;
	margin: 14px 0 0;
}

/* sticky bottom bar: slides up whenever neither form is on screen (the page script toggles .is-visible);
   the footer's copyright strip gets room below it so the bar never covers it */
body:has(.nf-kw-sticky) .footer-bottom-bar{
	padding-bottom: 100px;
}

.nf-kw-sticky{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	padding: 12px;
	pointer-events: none;
	transform: translateY(110%);
	transition: transform 0.3s ease;
}

.nf-kw-sticky.is-visible{
	transform: translateY(0);
}

.nf-kw-sticky-inner{
	display: flex;
	gap: 8px;
	max-width: 448px;
	margin: 0 auto;
	padding: 8px;
	border: 1px solid #E9ECF1;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.35);
	pointer-events: auto;
}

.nf-kw-sticky-inner a{
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 46px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease;
}

/* solid dark main button + white outlined WhatsApp button with the green icon */
.nf-kw-sticky-primary,
.nf-kw-sticky-primary:focus{
	background: #1A1A1A;
	color: var(--white-color);
}

.nf-kw-sticky-primary:hover{
	background: #333333;
	color: var(--white-color);
}

.nf-kw-sticky-wa,
.nf-kw-sticky-wa:focus{
	background: var(--white-color);
	border: 1px solid rgba(0, 0, 0, 0.25);
	color: #1A1A1A;
}

.nf-kw-sticky-wa:hover{
	background: #F4F5F7;
	color: #1A1A1A;
}

.nf-kw-sticky-wa i{
	color: #25D366;
	font-size: 18px;
}

@media (prefers-reduced-motion: reduce){
	.nf-kw-sticky{
		transition: none;
	}
}

@media only screen and (max-width: 1199px){
	.nf-kw-intro h1{
		font-size: 44px;
	}
}

@media only screen and (max-width: 991px){
	.nf-kw-form{
		margin-top: 40px;
	}

	.nf-kw-cta-form{
		padding: 0 35px 40px;
	}
}

@media only screen and (max-width: 575px){
	.nf-kw-intro h1{
		font-size: 34px;
	}

	.nf-kw-form,
	.nf-kw-cta-box{
		padding: 24px 18px;
	}

	.nf-kw-grid{
		grid-template-columns: 1fr;
	}

	.nf-kw-cta-form{
		padding: 0 22px 35px;
	}
}

/* Blog / event detail: no page banner, the title block sits above the image. On desktop the
   section also clears the header that floats over the top of the page (below 992px it's in the flow) */
.main-header ~ .page-single-post.nf-post-detail{
	padding-top: calc(130px + var(--nf-section-pad));
}

@media only screen and (max-width: 991px){
	.main-header ~ .page-single-post.nf-post-detail{
		padding-top: var(--nf-section-pad);
	}
}

.nf-post-head{
	margin-bottom: 30px;
	text-align: center;
}

/* centered title wraps into balanced lines instead of one very wide line */
.nf-post-head h1.nf-post-title{
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	text-wrap: balance;
}

.nf-post-head p:last-child{
	margin-bottom: 0;
}

/* title sized like the theme's post h2 */
.post-entry h1.nf-post-title{
	font-size: 48px;
}

@media only screen and (max-width: 991px){
	.post-entry h1.nf-post-title{
		font-size: 38px;
	}
}

@media only screen and (max-width: 767px){
	.post-entry h1.nf-post-title{
		font-size: 26px;
	}
}

/* Footer "Our Products": 7 items visible, the rest scroll (max-height is measured in the layout's
   script; 270px is the fallback). No scroll bar (user's choice); the bottom fades out as the hint
   that there's more, and the script adds .is-end to drop the fade at the end of the list. */
.footer-links-prime ul.nf-footer-scroll{
	position: relative;
	max-height: 270px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 50px), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 50px), transparent);
}

.footer-links-prime ul.nf-footer-scroll::-webkit-scrollbar{
	display: none;
}

.footer-links-prime ul.nf-footer-scroll.is-end{
	-webkit-mask-image: none;
	mask-image: none;
}

.footer-links-prime ul.nf-footer-scroll:focus-visible{
	outline: 1px dashed var(--brand-orange);
	outline-offset: 4px;
}