/*
 * Why Contact Greenova? — Contact Us page section.
 *
 * Reads the exact same shared "Why Choose Greenova" field group as
 * assets/css/home/why-choose-greenova.css's own template part, and the
 * pill/icon/title design here now intentionally MATCHES that stylesheet
 * exactly (background #F3F4F5, 47.5px radius, 42px icon, hover
 * lift/border/shadow, etc.) — only the section-level container/heading
 * (1440px width, 80px padding, 48px heading) stay this page's own values,
 * per this build's separate container spec.
 *
 * @package Greenova
 */

.why-contact-greenova {
	background-color: #FFFFFF;
	padding-block:     100px;
}

.why-contact-greenova__inner {
	max-width:      1440px;
	margin:         0 auto;
	padding-inline: 80px;
	text-align:     left;
}

.why-contact-greenova__heading {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      48px;
	font-weight:    500;
	line-height:    58px;
	letter-spacing: -2px;
	color:          #000000;
	margin:         0 0 48px;
}

.why-contact-greenova__list {
	display:   flex;
	flex-wrap: wrap;
	gap:       12px;
}

.why-contact-greenova__pill {
	display:         inline-flex;
	align-items:     center;
	gap:             10px;
	padding:         15px 20px;
	background:      #F3F4F5;
	border:          1px solid #B6B9CE;
	border-radius:   47.5px;
	box-sizing:      border-box;
	text-decoration: none;
	cursor:          default;
	transition:      transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

a.why-contact-greenova__pill {
	cursor: pointer;
}

.why-contact-greenova__icon {
	flex-shrink:      0;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	width:            42px;
	height:           42px;
	border-radius:    50%;
	background-color: #FFFFFF;
	color:            #58595B;
}

.why-contact-greenova__icon svg {
	width:  14px;
	height: 14px;
}

.why-contact-greenova__title {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      18px;
	font-weight:    500;
	line-height:    18px;
	letter-spacing: -0.2px;
	font-style:     italic;
	color:          #000000;
	white-space:    nowrap;
}

/*
 * Hover state — matches the Features/Home page's own "Why Choose Greenova"
 * pill hover exactly (assets/css/home/why-choose-greenova.css): a lift +
 * black border + soft shadow, no colour change on the pill or its icon.
 */

a.why-contact-greenova__pill:hover,
a.why-contact-greenova__pill:focus {
	text-decoration: none;
	transform:       translateY(-4px);
	border-color:    #000000;
	box-shadow:      0 8px 20px rgba(0, 0, 0, 0.08);
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media ( max-width: 1199.98px ) {
	.why-contact-greenova__inner {
		padding-inline: 48px;
	}

	.why-contact-greenova__heading {
		font-size:      2.25rem;
		line-height:    1.2;
		letter-spacing: -0.02em;
	}
}

@media ( max-width: 991.98px ) {
	.why-contact-greenova {
		padding-block: 64px;
	}

	.why-contact-greenova__inner {
		padding-inline: 32px;
	}

	.why-contact-greenova__pill {
		padding: 14px 18px;
	}

	.why-contact-greenova__title {
		font-size:   16px;
		line-height: 24px;
		white-space: normal;
	}
}

@media ( max-width: 575.98px ) {
	.why-contact-greenova {
		padding-block: 48px;
	}

	.why-contact-greenova__inner {
		padding-inline: 20px;
	}

	.why-contact-greenova__heading {
		font-size:     1.75rem;
		margin-bottom: 32px;
	}

	.why-contact-greenova__list {
		gap: 10px;
	}

	.why-contact-greenova__pill {
		padding: 12px 16px;
	}
}