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

/* ===== Spacing ===== */
.custom-padding-vertical{
	padding: 8px 30px;
  padding-top: 2rem;
}

/* ===== Colors ===== */
.color-blk{ color: black !important;}

/* ===== Image Hover Swap ===== */
.img-hover-swap img {transition: opacity 0.5s ease;}
.img-hover-swap .second-image {opacity: 0; /* Hide second image by default */}
.img-hover-swap:hover .first-image {opacity: 0; /* Fade out first image */}
.img-hover-swap:hover .second-image {opacity: 1; /* Fade in second image */}

/* ===== Cursor Utilities ===== */
.cursor-pointer{cursor: pointer;}

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

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

/* ===== Navbar ===== */
.navbar-container{
	padding: 0 !important;
	max-width: 100% !important;
}
.headerlinks{text-decoration: underline !important;}
a{color: white !important;}
.headerlogo{
	order: 2 !important;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	padding-top: 2rem;
}
.storeLogo{
	width: 250px;
	height: auto;
}
.nav-link{font-size: 1.1rem;}
.bg-info{ /*Shopping cart*/
	background-color: black !important;
}
.d-inline-block{
	color: black!important;
	cursor:pointer !important;
}
.breadcrumb{display: none !important;}

/* ===== Product Section ===== */
.landing-body-container{
	display: flex;
	justify-content: center;
	padding-top: 2rem;
}
.col-lg-10{
	max-width: 105.33333% !important;
	flex: none !important;
	width: 105%;
}
.mb-4{
	justify-content: space-evenly;
	margin-bottom:0 !important;
}
.product-card-product-name-text{font-size:35px;}
.font-weight-bold{font-weight:370 !important;}
.small{font-size: 1.2em !important;}

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

.product-title-container{padding-top: 2em;}
#productName{display: none;}
h3{display: none;}
.col-md-8.col-lg-6 > div:nth-child(1) {order: 2;}
.col-md-8.col-lg-6{
	display: flex;
	flex-direction:column;
}
.product-description-heading.h3.d-block{text-align: left !important;}
.product-description-text{text-align: left !important;}
.product-descriptions-text{text-align: left !important;}

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

.contact-info {
	padding-top: 50px;
	gap:19rem;
}
.contact-img {width: 300px;}
h1{
	font-weight: 800 !important;
	margin-bottom: 0.1rem !important; 
}
.contact-label {
	font-size: 17px;
	padding-left: 50px;
	text-decoration: underline !important;
	text-underline-offset: 4px;
}

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

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

@media (min-width: 601px) and (max-width: 991px) {
	.nav.d-flex.justify-content-center.align-items-center {display: none !important;}
	.contact-info{gap: 0px !important;}
}

/* ---------- Mobile View ---------- */

@media (max-width: 600px){
	.nav.d-flex.justify-content-center.align-items-center {display: none !important;}
	.storeLogo {max-width: 40vw;}
	.headerutil {padding-right: 35px !important;}
	.row{
		flex-direction: column;
		align-items: center;
		padding-bottom: 2rem;
	}
	.contact-info {
		flex-direction: column; 
		padding: 20px; 
		gap: 0px !important;
	}
	.contact-text-right {margin-bottom: 20px;}
	.product-card-product-name-text{font-size: 19px !important;}
	.brand-image{order:2;}
	.contact-text-right{flex-direction: column;}
	.contact-img {width: 150px;}
	.contact-label{padding-left: 0px !important;}
	.col-6{flex:1 1 100%;}
	h1{
		font-size: 1rem !important;
		margin-bottom: 0.6rem !important;
	}
	.contact-label {font-size: 15px !important;}
	.product-title-container{padding-top: 3em !important;}
	#__layout > div > div:nth-child(1) > div:nth-child(6) > div > div.row.mb-5 > div.col-md-4.col-lg-6.mb-3 > div
	{ z-index: 50 !important;} 
}