/*=========================================
MASB HOMEPAGE
=========================================*/

/* Hero Section */

.hero{
	padding:80px 0;
	background:linear-gradient(135deg,#f8f9fb,#eef3ff);
}

.hero-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	align-items:center;
	gap:60px;
}

.hero-left{
	max-width:600px;
}

.hero-tag{
	display:inline-block;
	padding:10px 18px;
	background:#ef3b36;
	color:#fff;
	border-radius:30px;
	font-size:14px;
	font-weight:600;
	margin-bottom:20px;
}

.hero-left h1{
	font-size:58px;
	line-height:1.15;
	font-weight:800;
	color:#111;
	margin-bottom:20px;
}

.hero-left p{
	font-size:18px;
	line-height:1.8;
	color:#666;
	margin-bottom:35px;
}

.hero-buttons{
	display:flex;
	gap:18px;
}

.hero-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:15px 32px;
	border-radius:50px;
	text-decoration:none;
	font-weight:700;
	transition:.3s;
}

.hero-primary{
	background:#ef3b36;
	color:#fff;
}

.hero-primary:hover{
	background:#d92b26;
}

.hero-secondary{
	background:#fff;
	border:2px solid #ef3b36;
	color:#ef3b36;
}

.hero-secondary:hover{
	background:#ef3b36;
	color:#fff;
}

.hero-right img{
	width:100%;
	border-radius:20px;
	box-shadow:0 25px 60px rgba(0,0,0,.15);
}

/* Responsive */

@media (max-width:768px){

	.hero{
		padding:50px 0;
	}

	.hero-grid{
		grid-template-columns:1fr;
		text-align:center;
	}

	.hero-left h1{
		font-size:36px;
	}

	.hero-buttons{
		justify-content:center;
	}

}
/*=========================================
FEATURES
=========================================*/

.features{
	padding:70px 0;
	background:#fff;
}

.feature-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:25px;
}

.feature-box{
	background:#fff;
	border:1px solid #ececec;
	border-radius:18px;
	padding:35px 25px;
	text-align:center;
	transition:.3s;
}

.feature-box:hover{
	transform:translateY(-8px);
	box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.feature-box i{
	font-size:42px;
	color:#ef3b36;
	margin-bottom:18px;
}

.feature-box h3{
	font-size:20px;
	margin-bottom:10px;
	color:#111;
}

.feature-box p{
	color:#666;
	line-height:1.7;
}

@media (max-width:768px){

	.feature-grid{
		grid-template-columns:1fr 1fr;
		gap:15px;
	}

	.feature-box{
		padding:25px 18px;
	}

	.feature-box i{
		font-size:32px;
	}

}
/*=========================================
CATEGORIES
=========================================*/

.categories{
	padding:80px 0;
	background:#f8f9fb;
}

.section-title{
	text-align:center;
	font-size:36px;
	font-weight:700;
	margin-bottom:50px;
	color:#111;
}

.category-grid{
	display:grid;
	grid-template-columns:repeat(6,1fr);
	gap:25px;
}

.category-card{
	background:#fff;
	border-radius:20px;
	padding:18px;
	text-align:center;
	transition:.35s;
	cursor:pointer;
	box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.category-card:hover{
	transform:translateY(-8px);
	box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.category-card img{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
	border-radius:16px;
	margin-bottom:18px;
}

.category-card h3{
	font-size:18px;
	font-weight:600;
	color:#222;
}

@media(max-width:991px){

	.category-grid{
		grid-template-columns:repeat(3,1fr);
	}

}

@media(max-width:768px){

	.categories{
		padding:50px 0;
	}

	.section-title{
		font-size:28px;
		margin-bottom:30px;
	}

	.category-grid{
		grid-template-columns:repeat(2,1fr);
		gap:15px;
	}

}
/*=========================================
FLASH SALE
=========================================*/

.flash-sale{
	padding:80px 0;
	background:#fff;
}

.flash-header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:35px;
}

.flash-header h2{
	font-size:34px;
	font-weight:700;
	color:#111;
}

.flash-header a{
	color:#ef3b36;
	font-weight:600;
	text-decoration:none;
}

.product-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:25px;
}

.product-card{
	background:#fff;
	border:1px solid #ececec;
	border-radius:18px;
	padding:18px;
	transition:.3s;
	text-align:center;
}

.product-card:hover{
	transform:translateY(-8px);
	box-shadow:0 15px 40px rgba(0,0,0,.10);
}

.product-card img{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
	border-radius:12px;
	margin-bottom:15px;
}

.product-card h3{
	font-size:18px;
	font-weight:600;
	color:#222;
	margin-bottom:10px;
}

.product-card .price{
	font-size:20px;
	font-weight:700;
	color:#ef3b36;
	margin-bottom:15px;
}

.product-card .button{
	display:inline-block;
	width:100%;
	padding:12px;
	background:#ef3b36;
	color:#fff !important;
	border-radius:8px;
	text-decoration:none;
	font-weight:600;
}

.product-card .button:hover{
	background:#d92b26;
}

@media(max-width:991px){

	.product-grid{
		grid-template-columns:repeat(2,1fr);
	}

}

@media(max-width:768px){

	.flash-sale{
		padding:50px 0;
	}

	.flash-header{
		flex-direction:column;
		align-items:flex-start;
		gap:10px;
	}

	.flash-header h2{
		font-size:28px;
	}

	.product-grid{
		grid-template-columns:1fr 1fr;
		gap:15px;
	}

}
/*=========================================
FEATURED PRODUCTS
=========================================*/

.featured-products{
	padding:80px 0;
	background:#f8f9fb;
}

.section-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:35px;
	flex-wrap:wrap;
	gap:20px;
}

.product-tabs{
	display:flex;
	gap:12px;
	flex-wrap:wrap;
}

.tab-btn{
	padding:12px 22px;
	border:none;
	border-radius:30px;
	background:#fff;
	color:#333;
	font-weight:600;
	cursor:pointer;
	transition:.3s;
	border:1px solid #e5e5e5;
}

.tab-btn.active,
.tab-btn:hover{
	background:#ef3b36;
	color:#fff;
	border-color:#ef3b36;
}

.product-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:25px;
}

.product-card{
	background:#fff;
	border-radius:18px;
	padding:18px;
	border:1px solid #ececec;
	transition:.3s;
}

.product-card:hover{
	transform:translateY(-8px);
	box-shadow:0 18px 45px rgba(0,0,0,.10);
}

.product-card img{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
	border-radius:12px;
}

.product-card h3{
	margin:15px 0 10px;
	font-size:18px;
	color:#222;
}

.product-card .price{
	font-size:20px;
	font-weight:700;
	color:#ef3b36;
	margin-bottom:15px;
}

.product-card .button{
	width:100%;
	text-align:center;
	padding:12px;
	border-radius:10px;
	background:#ef3b36;
	color:#fff !important;
	text-decoration:none;
	font-weight:600;
}

.product-card .button:hover{
	background:#d92b26;
}

@media(max-width:991px){

	.product-grid{
		grid-template-columns:repeat(2,1fr);
	}

}

@media(max-width:768px){

	.featured-products{
		padding:50px 0;
	}

	.section-header{
		flex-direction:column;
		align-items:flex-start;
	}

	.product-tabs{
		width:100%;
		overflow-x:auto;
	}

	.product-grid{
		grid-template-columns:repeat(2,1fr);
		gap:15px;
	}

}
/*=========================================
TOP BRANDS
=========================================*/

.top-brands{
	padding:80px 0;
	background:#fff;
}

.brand-grid{
	display:grid;
	grid-template-columns:repeat(6,1fr);
	gap:25px;
}

.brand-card{
	background:#fff;
	border:1px solid #ececec;
	border-radius:16px;
	padding:25px;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:.3s;
}

.brand-card:hover{
	transform:translateY(-6px);
	box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.brand-card img{
	max-width:120px;
	width:100%;
	height:auto;
	filter:grayscale(100%);
	transition:.3s;
}

.brand-card:hover img{
	filter:none;
}

@media(max-width:991px){

	.brand-grid{
		grid-template-columns:repeat(3,1fr);
	}

}

@media(max-width:768px){

	.top-brands{
		padding:50px 0;
	}

	.brand-grid{
		grid-template-columns:repeat(2,1fr);
		gap:15px;
	}

}
/*=========================================
OFFER BANNER
=========================================*/

.offer-banner{
	padding:90px 0;
	background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
	url("https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=1600&auto=format&fit=crop") center/cover no-repeat;
}

.offer-content{
	text-align:center;
	color:#fff;
	max-width:700px;
	margin:auto;
}

.offer-tag{
	display:inline-block;
	padding:10px 18px;
	background:#ef3b36;
	border-radius:30px;
	font-size:14px;
	font-weight:600;
	margin-bottom:20px;
}

.offer-content h2{
	font-size:56px;
	font-weight:800;
	margin-bottom:20px;
}

.offer-content p{
	font-size:18px;
	line-height:1.8;
	margin-bottom:35px;
}

.offer-btn{
	display:inline-block;
	padding:16px 38px;
	background:#ef3b36;
	color:#fff;
	text-decoration:none;
	border-radius:40px;
	font-weight:700;
	transition:.3s;
}

.offer-btn:hover{
	background:#d92b26;
}

@media(max-width:768px){

	.offer-banner{
		padding:60px 20px;
	}

	.offer-content h2{
		font-size:36px;
	}

}

/*=========================================
NEWSLETTER
=========================================*/

.newsletter-section{
	padding:80px 0;
	background:#f8f9fb;
}

.newsletter-box{
	background:#ef3b36;
	border-radius:22px;
	padding:60px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:40px;
}

.newsletter-left{
	max-width:500px;
}

.newsletter-left h2{
	font-size:38px;
	color:#fff;
	margin-bottom:15px;
}

.newsletter-left p{
	color:#fff;
	line-height:1.8;
}

.newsletter-right form{
	display:flex;
	gap:15px;
}

.newsletter-right input{
	width:320px;
	height:56px;
	border:none;
	border-radius:10px;
	padding:0 18px;
	font-size:16px;
}

.newsletter-right button{
	height:56px;
	padding:0 30px;
	border:none;
	border-radius:10px;
	background:#111;
	color:#fff;
	font-weight:700;
	cursor:pointer;
}

.newsletter-right button:hover{
	background:#222;
}

@media(max-width:768px){

	.newsletter-box{
		padding:35px 20px;
		flex-direction:column;
		text-align:center;
	}

	.newsletter-right form{
		flex-direction:column;
		width:100%;
	}

	.newsletter-right input{
		width:100%;
	}

}
/*=========================================
PREMIUM PRODUCT CARD
=========================================*/

.product-card{
	position:relative;
	background:#fff;
	border-radius:18px;
	overflow:hidden;
	border:1px solid #ececec;
	transition:.35s;
}

.product-card:hover{
	transform:translateY(-8px);
	box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.product-card img{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
	background:#fafafa;
}

.product-card h3{
	font-size:16px;
	line-height:1.5;
	height:48px;
	overflow:hidden;
	margin:15px;
	font-weight:600;
	color:#222;
}

.product-card .price{
	margin:0 15px 15px;
	font-size:22px;
	font-weight:700;
	color:#ef3b36;
}

.product-card .button{
	display:block;
	margin:15px;
	text-align:center;
	padding:12px;
	border-radius:10px;
	background:#ef3b36;
	color:#fff !important;
	text-decoration:none;
	font-weight:600;
}

.product-card .button:hover{
	background:#d92b26;
}