/*
 * why-choose-greenova.css — Home page: "Why Organisations Choose Greenova"
 * section.
 *
 * Left-aligned heading, then a wrapping row of rounded feature pills, each
 * carrying a static icon + title (see template-parts/home/why-choose-greenova.php).
 *
 * Only enqueued on the front page / Home Page template (see inc/enqueue.php).
 *
 * @package Greenova
 */

.why-choose-greenova {
	background-color: #FFFFFF;
	padding-block:     120px;
}

.why-choose-greenova__heading {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      80px;
	font-weight:    500;
	line-height:    100px;
	letter-spacing: -4px;
	color:          #000000;
	max-width:      1071px;
	margin:         0 0 48px;
}

/* =============================================================================
   Feature pills
   ============================================================================= */

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

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

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

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

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

.why-choose-greenova__icon img {
	width:   14px;
	height:  14px;
	display: block;
}

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

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

@media ( max-width: 1199.98px ) {
	.why-choose-greenova {
		padding-block: 88px;
	}

	.why-choose-greenova__heading {
		font-size:      3rem;
		line-height:    1.1;
		letter-spacing: -0.03em;
		margin-bottom:  40px;
	}
}

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

	.why-choose-greenova__heading {
		font-size:   2rem;
		line-height: 1.2;
		margin-bottom: 32px;
	}

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

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

@media ( max-width: 479.98px ) {
	.why-choose-greenova__heading {
		font-size: 1.625rem;
	}

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

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