/* ===========================
	1. GLOBAL UTILITIES
=========================== */

/* ===== Colors ===== */
.text-gray{color: #383838;} 

/* ===============================
	2. COMPONENT-SPECIFIC CSS
=============================== */

/* ---------- Navbar ----------*/
.navbar-content-container{justify-content: space-evenly;}
a.d-lg-none i.fa-bars {color: #383838; }

/* ---------- Home Page ----------*/

/* ===== Banner ===== */
.banner-parent-container{
	background-image: url(https://store-media.mpowerpromo.com/6a43fda37439b6fe659ca26c/assets/Header+Image+Mereo+Fiber+Webstore-1782841054400.png);
	background-size: cover;
	background-position: center 80%;
	background-repeat: no-repeat;
	min-height: 500px;
}

/* ===== Home Page Product Section ===== */
.home-page-body{
	padding-top: 5%;
  padding-bottom: 5%;
}
.row-container{
	padding-left: 5%;
	padding-right: 5%;
}
.row-item{max-width: 25% !important;}

/* ---------- Product Page ----------*/
.breadcrumb{display: none !important;}
.product-configure-part-label{ display: none }
.product-header-skeleton{min-height: initial !important;}
.product-configure-part-count:after{ content: ' Color(s)'; }

/* ---------- Footer ----------*/

.footer-content-container{
  justify-content: space-evenly;
	background-color: #000000 !important;
}

/* ===============================
	3. Media CSS
=============================== */

/* ---------- Tablet + Mobile Shared Utilities ---------- */
@media (max-width: 991px) {
  .responsive-display-none { display: none !important; }
  .responsive-padding-1 { padding: 1rem !important; }
  .responsive-min-height { height: 80px !important; }
  .responsive-align-content-center { align-content: center !important; }
  .responsive-justify-space-between { justify-content: space-between !important; }
}
/* ---------- Mobile Only ---------- */
@media (max-width: 576px){
	.row-item{min-width: 80% !important;}
	.banner-parent-container{min-height: 300px !important;}
	.footer-content-container{flex-direction: column !important;}
}