/* ================= SECTION ================= */
.industries-sec {
    background-color: #ffffff;

    background-image:
        url("../images/industries-sec-bg.png"),
        linear-gradient(180deg,var(--sk-sky-top) 0%, var(--sk-sky-bottom) 45%, #ffffff 100%);
    background-position:right top,center;
    background-repeat: no-repeat, no-repeat;
    background-size:65% auto, 100% 100%;
    padding: 60px 0 70px;
}
.ind-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}
.ind-eyebrow .bar {
	width: 46px;
	height: 4px;
	background: var(--sk-green-dark);
	border-radius: 2px;
}
.ind-eyebrow span {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 3px;
	color: var(--sk-green-dark);
	text-transform: uppercase;
}
 
.ind-heading {
	font-weight: 800;
	font-size: 48px;
	line-height: 1.15;
	color: var(--primary-color);
	margin-bottom: 20px;
}
.ind-heading .line2 { color: var(--sk-green-dark); display: block; }
 
.ind-intro {
	font-size: 18px;
	line-height: 1.5;
	color: #3a3a3a;
	max-width: 520px;
	margin-bottom: 0;
}
 
.ind-hero-img {
	position: relative;
	border-radius: 0 0 0 60px;
	overflow: hidden;
}
.ind-hero-img img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	display: block;
}
 
/* ================= CARDS GRID ================= */
.ind-grid {
	margin-top: 44px;
	row-gap: 22px;
}
.ind-card {
	position: relative;
	display: flex;
	align-items: center;
	height: 90px;
	border-radius: 45px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 10px 22px rgba(0,0,0,.08);
	isolation: isolate;
}
 
/* colour variants: left solid colour, right side photo fading in from colour */
.ind-card .ind-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.ind-card .ind-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--photo);
	background-size: cover;
	background-position: center;
}
.ind-card .ind-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--tone) 0%, var(--tone) 42%, color-mix(in srgb, var(--tone) 55%, transparent) 60%, transparent 78%);
}
 
.ind-card.v-dark   { --tone: #4d9321; }
.ind-card.v-light  { --tone: #bfe4a1; }
.ind-card.v-blue   { --tone: #163b78; }
 
.ind-icon {
	position: relative;
	z-index: 2;
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--white-color);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 14px;
	font-size: 26px;
	color: var(--tone);
}
 
.ind-label {
	position: relative;
	z-index: 2;
	margin-left: 16px;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	color: var(--white-color);
	padding-right: 8px;
}
.v-light .ind-label { color: var(--primary-color); }
 
.ind-arrow {
	position: relative;
	z-index: 2;
	margin-left: auto;
	margin-right: 16px;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--white-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	color: var(--primary-color);
}
 
/* ================= RESPONSIVE ================= */
@media (max-width: 1199.98px) {
	.ind-heading { font-size: 38px; }
	.ind-card { height: 80px; border-radius: 40px; }
	.ind-label { font-size: 16px; }
}
 
@media (max-width: 991.98px) {
	.ind-hero-img { margin-top: 28px; border-radius: 0 0 40px 40px; }
	.ind-hero-img img { height: 220px; }
}
@media (max-width: 767px) {
    .industries-sec {
        background-size:
            100% auto,
            100% 100%;

        background-position:
            right top,
            center;

        padding: 50px 0;
    }
}
 
@media (max-width: 575.98px) {
	.ind-heading { font-size: 30px; }
	.ind-intro { font-size: 16px; }
	.ind-card { height: 70px; border-radius: 35px; }
	.ind-icon { flex: 0 0 48px; width: 48px; height: 48px; font-size: 20px; margin-left: 10px; }
	.ind-label { font-size: 14px; margin-left: 10px; }
	.ind-arrow { width: 28px; height: 28px; margin-right: 10px; }
	.ind-card .ind-bg::after { background: linear-gradient(90deg, var(--tone) 0%, var(--tone) 60%, transparent 92%); }
}