/* Viriksha - Home page styling.
   Loaded on the live home page (25) and the staging copy (22201).
   Everything below is matched on CSS classes rather than Elementor element ids,
   because ids are regenerated whenever the page is copied. */

/* ================= hero CTA ================= */
/* Site-wide Additional CSS forces .elementor-button{background-color:#476A2D !important},
   so this needs !important to win. Dark at rest, lighter on hover. */
.vk-hero-cta .elementor-button,
.vk-hero-cta a.elementor-button,
.vk-hero-cta .elementor-button-link{
	background-color:#244D24 !important;
	color:#FFFFFF !important;
	border-color:#244D24 !important;
	transition:background-color .28s ease,color .28s ease,border-color .28s ease;
}
.vk-hero-cta .elementor-button:hover,
.vk-hero-cta .elementor-button:focus,
.vk-hero-cta a.elementor-button:hover,
.vk-hero-cta .elementor-button-link:hover{
	background-color:#4B7F20 !important;
	color:#FFFFFF !important;
	border-color:#4B7F20 !important;
}
.vk-hero-cta .elementor-button svg,
.vk-hero-cta .elementor-button i{
	color:#FFFFFF !important;
	fill:#FFFFFF !important;
}

/* ================= card + feature titles ================= */
/* Both groups inherit family and size from the "Header" global preset;
   only the weight is nudged up a step. */
.vk-help-card .wpr-icon-box-title,
.viriksha-feature-box .elementor-icon-box-title,
.viriksha-feature-box .elementor-icon-box-title a,
.viriksha-feature-box .elementor-icon-box-title span{
	font-weight:600 !important;
}

/* ================= help cards : banner image ================= */
.vk-card-img img{
	display:block;
	width:100%;
	height:150px;
	object-fit:cover;
	object-position:center center;
	border-radius:8px;
}
@media (max-width:767px){
	.vk-card-img img{height:170px;}
}

/* ================= Industries We Serve : dividers ================= */
.vk-ind-row > .elementor-container{align-items:stretch;}
.vk-ind-row > .elementor-container > .elementor-column:not(:last-child) > .elementor-widget-wrap{
	border-right:1px solid rgba(139,197,63,.38);
}
@media (max-width:1024px){
	.vk-ind-row > .elementor-container > .elementor-column:not(:last-child) > .elementor-widget-wrap{border-right:0;}
}

/* ================= Our Recruitment Process : 4 + 3 grid ================= */
.vk-proc-row > .elementor-container{
	align-items:stretch;
	flex-wrap:wrap;
}
.vk-proc-row2 > .elementor-container{justify-content:center;}
.vk-proc-row2{padding-top:10px;}
.vk-proc-row > .elementor-container > .elementor-column > .elementor-widget-wrap{
	align-content:flex-start;
	padding-left:16px;
	padding-right:16px;
}
/* hold step titles to one height so body copy starts on a shared baseline */
.vk-proc-row .elementor-icon-box-title{
	min-height:3.4em;
	display:flex;
	align-items:flex-start;
	justify-content:center;
}
.vk-proc-row .elementor-icon-box-description{margin:0;}
@media (max-width:1024px){
	.vk-proc-row2 > .elementor-container{justify-content:flex-start;}
	.vk-proc-row .elementor-icon-box-title{min-height:0;}
}
@media (max-width:767px){
	.vk-proc-row > .elementor-container > .elementor-column > .elementor-widget-wrap{
		padding-left:0;
		padding-right:0;
	}
}

/* ================= client logo carousel ================= */
/* Bare PNG logos on square canvases, so the tile is built here. Images fill
   the tile and are scaled up to counter the whitespace baked into each file;
   the tile clips the surplus. */
.vk-logo-carousel .swiper-slide{height:auto;}
.vk-logo-carousel .swiper-slide-inner,
.vk-logo-carousel figure.swiper-slide-inner{
	margin:0;
	display:flex;
	align-items:center;
	justify-content:center;
	height:130px;
	padding:10px 14px;
	background:#FFFFFF;
	border:1px solid rgba(48,42,42,.12);
	border-radius:10px;
	overflow:hidden;
	box-sizing:border-box;
	transition:border-color .28s ease,box-shadow .28s ease;
}
.vk-logo-carousel .swiper-slide-inner:hover{
	border-color:rgba(75,127,32,.45);
	box-shadow:0 6px 18px rgba(36,77,36,.10);
}
.vk-logo-carousel .swiper-slide-image{
	width:100% !important;
	height:100% !important;
	max-width:none;
	max-height:none;
	object-fit:contain;
	object-position:center center;
	transform:scale(1.35);
	display:block;
}
.vk-logo-carousel .elementor-swiper-button{color:#4B7F20;}
.vk-logo-carousel .elementor-swiper-button svg{fill:#4B7F20;}
@media (max-width:1024px){
	.vk-logo-carousel .swiper-slide-inner,
	.vk-logo-carousel figure.swiper-slide-inner{height:112px;padding:8px 12px;}
	.vk-logo-carousel .swiper-slide-image{transform:scale(1.3);}
}
@media (max-width:767px){
	/* taller tile + tighter padding + a stronger scale so the marks read
	   properly on a phone, where only two are visible at a time */
	.vk-logo-carousel .swiper-slide-inner,
	.vk-logo-carousel figure.swiper-slide-inner{height:124px;padding:6px 8px;border-radius:8px;}
	.vk-logo-carousel .swiper-slide-image{transform:scale(1.5);}
}
@media (max-width:480px){
	.vk-logo-carousel .swiper-slide-inner,
	.vk-logo-carousel figure.swiper-slide-inner{height:112px;padding:6px;}
	.vk-logo-carousel .swiper-slide-image{transform:scale(1.45);}
}

/* ================= How We Work : step row ================= */
/* Four step columns with three narrow arrow columns between them.
   The arrows are a desktop and tablet device only; on mobile the steps
   stack and a lone arrow row would just add noise. */
.vk-howwework > .elementor-container{align-items:stretch;flex-wrap:wrap;}
.vk-howwework .vk-step-arrow-col > .elementor-widget-wrap{
	align-content:center;
	justify-content:center;
	padding:0;
}
@media (max-width:767px){
	.vk-howwework .vk-step-arrow-col{display:none !important;}
}

/* ================= row rhythm ================= */
/* Repeated card rows: equal height columns with content pinned to the top,
   so icons, titles and copy line up across a row instead of floating. */
.vk-ind-row > .elementor-container,
.vk-howwework > .elementor-container{align-items:stretch;}
.vk-ind-row > .elementor-container > .elementor-column > .elementor-widget-wrap,
.vk-howwework > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:flex-start;}

/* icon artwork centres in its box at every size */
.vk-ind-row .elementor-icon-box-icon img,
.viriksha-feature-box .elementor-icon-box-icon img,
.vk-proc-row .elementor-icon-box-icon img{display:block;margin-left:auto;margin-right:auto;max-width:100%;height:auto;}

/* wrapped rows need breathing room between lines */
@media (max-width:1024px){
  .vk-ind-row > .elementor-container > .elementor-column,
  .vk-howwework > .elementor-container > .elementor-column{margin-bottom:18px;}
}
@media (max-width:767px){
  .vk-ind-row > .elementor-container > .elementor-column{margin-bottom:14px;}
  .vk-logo-carousel .elementor-swiper-button{transform:scale(.85);}
}


/* ================= hero button row ================= */
/* Two CTAs sitting inline, hard against the headline's left edge.
   The row previously carried padding-left:5em and 50% columns that each
   centred their own button, so the pair floated inward and wrapped. */
.vk-hero-btns,
.vk-hero-btns > .elementor-container{
	padding-left:0 !important;
	margin-left:0 !important;
}
.vk-hero-btns > .elementor-container{
	display:flex !important;
	flex-direction:row !important;
	flex-wrap:nowrap !important;
	justify-content:flex-start !important;
	align-items:center !important;
	width:100%;
}
.vk-hero-btns > .elementor-container > .elementor-column{
	width:auto !important;
	max-width:none !important;
	flex:0 0 auto !important;
	margin:0 !important;
}
.vk-hero-btns > .elementor-container > .elementor-column:not(:last-child){margin-right:14px !important;}
.vk-hero-btns > .elementor-container > .elementor-column > .elementor-widget-wrap{
	padding:0 !important;
	align-content:center;
}
.vk-hero-btns .elementor-widget-button{width:auto !important;}
.vk-hero-btns .elementor-widget-button > .elementor-widget-container{margin:0 !important;}
.vk-hero-btns .elementor-button-wrapper{text-align:left;}
.vk-hero-btns .elementor-button{white-space:nowrap;}

@media (max-width:600px){
	.vk-hero-btns > .elementor-container{flex-wrap:wrap !important;}
	.vk-hero-btns > .elementor-container > .elementor-column{width:100% !important;}
	.vk-hero-btns > .elementor-container > .elementor-column:not(:last-child){margin:0 0 12px 0 !important;}
	.vk-hero-btns .elementor-button{width:100%;justify-content:center;}
}