/**
 * ==========================================================
 * ShopCore Feature Highlights
 * File : assets/css/feature-highlights.css
 * ==========================================================
 */


/* ==========================================================
   Section
========================================================== */

.shopcore-feature-highlights {
	width: 100%;
	padding: 24px 0;
	background: #ffffff;
}


/* ==========================================================
   Grid
========================================================== */

.shopcore-feature-highlights-grid {

	display: grid;

	grid-template-columns: repeat(5, minmax(0, 1fr));

	gap: 15px;

}


/* ==========================================================
   Feature Item
========================================================== */

.shopcore-feature-item {

	display: flex;

	align-items: center;

	min-height: 60px;

	padding: 8px 12px;

	border-radius: 8px;

	overflow: hidden;

}


/* ==========================================================
   Icon
========================================================== */

.shopcore-feature-icon {

	flex: 0 0 48px;

	width: 48px;

	height: 48px;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 50%;

	font-size: 21px;

	margin-right: 12px;

}


/* ==========================================================
   Content
========================================================== */

.shopcore-feature-content {

	flex: 1;

	min-width: 0;

}


.shopcore-feature-content strong {

	display: block;

	font-size: 13px;

	font-weight: 600;

	line-height: 1.35;

	color: #111111;

}


/* ==========================================================
   Feature 1 - Original
========================================================== */

.feature-original {

	background: #eee4f2;

}


.feature-original .shopcore-feature-icon {

	background: #52bf7b;

	color: #ffffff;

}


/* ==========================================================
   Feature 2 - Delivery
========================================================== */

.feature-delivery {

	background: #e3edf9;

}


.feature-delivery .shopcore-feature-icon {

	background: #4f7fc5;

	color: #ffffff;

}


/* ==========================================================
   Feature 3 - EMI
========================================================== */

.feature-emi {

	background: #eee4f2;

}


.feature-emi .shopcore-feature-icon {

	background: #7048a4;

	color: #ffffff;

}


/* ==========================================================
   Feature 4 - Replacement
========================================================== */

.feature-replacement {

	background: #fde7eb;

}


.feature-replacement .shopcore-feature-icon {

	background: #ef3566;

	color: #ffffff;

}


/* ==========================================================
   Feature 5 - Best Deal
========================================================== */

.feature-best-deal {

	background: #f2ecd9;

}


.feature-best-deal .shopcore-feature-icon {

	background: #c89d65;

	color: #ffffff;

}


/* ==========================================================
   Hover
========================================================== */

.shopcore-feature-item {

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;

}


.shopcore-feature-item:hover {

	transform: translateY(-2px);

	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

}


/* ==========================================================
   Tablet
========================================================== */

@media (max-width: 1199px) {

	.shopcore-feature-highlights {

		padding: 25px 0;

	}

	.shopcore-feature-highlights-grid {

		grid-template-columns: repeat(3, minmax(0, 1fr));

	}

}


/* ==========================================================
   Tablet / Mobile
   2 + 2 + 1 layout
========================================================== */

@media (max-width: 767px) {

	.shopcore-feature-highlights {
		padding: 14px 0;
	}

	.shopcore-feature-highlights-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		padding: 0;
	}

	.shopcore-feature-item {

		min-height: 58px;

		padding: 7px 9px;

	}

	.shopcore-feature-icon {

		flex-basis: 40px;

		width: 40px;

		height: 40px;

		font-size: 17px;

		margin-right: 8px;

	}

	.shopcore-feature-content strong {

		font-size: 11px;

	}
    .feature-emi{
        display: none;
    }

}


/* ==========================================================
   Small Mobile
========================================================== */

@media (max-width: 480px) {

	.shopcore-feature-highlights-grid {
		gap: 8px;
		padding: 0;
	}

	.shopcore-feature-item {

		padding: 7px;

	}

	.shopcore-feature-icon {

		flex-basis: 36px;

		width: 36px;

		height: 36px;

		font-size: 15px;

		margin-right: 7px;

	}

	.shopcore-feature-content strong {

		font-size: 10px;

	}
    .feature-emi{
        display: none;
    }

}