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

/* ===== Typography ===== */
.font-family-gopher{
font-family: 'Gopher', sans-serif;
}

/* ===== Width Utilities ===== */
.w-90{width: 90%;}

/* ===== Hover Effects ===== */
.hover-opacity:hover {opacity: 0.7;}

/* ===== Background Utilities ===== */
.bg-blue {background-color: #05CCD6;}
.bg-cover-center{
background-size: cover;
background-position:center;
}

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

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

/* ===== Navbar ===== */
.navbar-parent-container{
position: fixed;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) !important;
top:0;
left:0;
z-index: 1021;
}
.navbar{
	top:0;
	left:0;
	padding-left: 2rem !important;
}
.navbar-brand{margin-right: 0 !important;}
.headerlinks{order: 2;}
.headerlogo{width: 200px;}
.headerutil{order: 3;}

/* ===== Breadcrumb ===== */
.breadcrumb{display: none;}

/* ===== Banner ===== */
.banner-container{
height: 60vh;
background-image: url("https://store-media.mpowerpromo.com/66f7295db5acbc03dacb42b5/assets/Gradient-1-1727790856783.png");
}
.banner-logo{
max-height: 60%;
padding-top: 55px;
}

/* ===== Header Spacing ===== */
.header-container{margin-top: 50px;}

/* ===== Product Section ===== */
.section-bg{
background-image: url("https://store-media.mpowerpromo.com/66f7295db5acbc03dacb42b5/assets/BackgroundFaded-1727790856771.png");
margin-top: -60px;
}
.image-size{max-width: 300px;}

/* ---------- Product Page ---------- */

.product-row{padding-top: 7rem;}
.product-header-skeleton{padding-top: 6rem;}
.vue-lb-button-close{margin-top: 4rem;}
#mPowerProductView > div > div.row > div.col-md-6.mb-3.pt-2.product-image-col > div > div > div > span > div:nth-child(2) > div > div.vue-lb-content > div.vue-lb-figure > img {margin-top: 6rem;}

/* ---------- Cart Page ----------*/

.mb-0{padding-top: 5rem;}

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

.bg-color{background-color:black;}
.footer-container{height: 90px;}

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

/* ---------- Tablet View ---------- */

@media only screen and (max-width: 800px) {
.headerlinks{order: 1;}
.headerlogo {order: 2;}
}