/*Navbar CSS*/
.navbar-container{
margin:0;
padding: 0 !important;
max-width: 100%;
}

/*Forces the navbar to scroll with the window, and sets the z-index so other side popup menus so the navbar does not sit on top of other controls. */
.navbar {
position: fixed;
flex-wrap: nowrap;
width: 100vw;
	margin:0;
	padding:0;
top: 0;
left: 0;
z-index: 1039;
transition: top 0.3s ease; /* Smooth slide-up animation */
background-color: white;

}

/* If the home button is enabled, this sets it to the far left position. If hidden this provides an empty container to set the order for the other visible controls in the navbar. */
.headerlinks{
display: flex;
order: 1 !important;
text-decoration: underline !important;
width: 100px;
justify-content: center;
}
a{
color: white !important;
	cursor: default !important;
	}
/*Sets the container for the logo to position 2, which is the center of the navbar. */
.headerlogo{
order: 2 !important;
}

/* Moves the right margin on the left side of the logo so it sits centered in the navbar. */
.navbar-brand.nuxt-link-active{
margin-right: 0 !important;
margin-left: 1rem !important;
}

/* Sets the account and shopping cart to the far right of the screen. */
.headerutil{
display: flex;
order: 3 !important;
padding: 8px 30px;
flex-wrap: nowrap;
}

.navbar-brand{
margin:0 !important;
padding:0 !important;
	cursor:pointer !important;
}

.storeLogo{
width: 250px;
height: auto;
}
.nav-link{
font-size: 1.1rem;
	color: black !important;
	cursor:pointer !important;
}
.bg-info{ /*Shopping cart*/
background-color: black !important;
}
.d-inline-block{
color: black!important;
	cursor:pointer !important;
}
.breadcrumb{
	padding-top: 9vh;
}	
.icon-wrapper{
color:black !important;
	cursor: pointer !important;
}
/* Media query for mobile devices */
@media (max-width: 768px) {
/* On mobile screens, hide the desktop logo and display the mobile logo */
.storeLogo {
max-width: 40vw;
}
}

/*Body Details Page CSS*/
.landing-body-container{
display: flex;
justify-content: center;
padding-top: 8vh;
}
.col-lg-10{
max-width: 105.33333% !important;
	flex: none !important;
	width: 105%;
}
.mb-4{
justify-content: space-evenly;
margin-bottom:0 !important;

}

.mt-2.text-body.mb-2.font-weight-bold.product-card-product-name-text{
text-align:center;
	font-size:35px;
}
.font-weight-bold{
font-weight:370 !important;
}
.justify-center{
justify-content: center !important;
}
/*
.col-6{
flex: 0 0 29%;
max-width: 51%;
}
*/
.bg-light{
background-color: transparent !important;
}
.cursor-pointer{
cursor: pointer !important;
}
.image-container {
position: relative;
width: 100%;
height:200px;
overflow:hidden;
}

.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.5s ease;
}

.image-container .second-image {
opacity: 0; /* Initially hide the second image */
position: absolute;
}

.image-container:hover .first-image {
opacity: 0; /* Fade out the first image on hover */
}

.image-container:hover .second-image {
opacity: 1; /* Fade in the second image on hover */
}

.image-container-2 {
position: relative;
width: 100%;
height:200px;
overflow:hidden;
}

.image-container-2 img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.5s ease;
}

.image-container-2 .second-image {
opacity: 0; /* Initially hide the second image */
position: absolute;
}

.image-container-2:hover .first-image {
opacity: 0; /* Fade out the first image on hover */
}

.image-container-2:hover .second-image {
opacity: 1; /* Fade in the second image on hover */
}

.image-container-3 {
position: relative;
width: 100%;
height:200px;
overflow:hidden;
}

.image-container-3 img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.5s ease;
}

.image-container-3 .second-image {
opacity: 0; /* Initially hide the second image */
position: absolute;
}

.image-container-3:hover .first-image {
opacity: 0; /* Fade out the first image on hover */
}

.image-container-3:hover .second-image {
opacity: 1; /* Fade in the second image on hover */
}
.small{
font-size: 1.2em !important;
}
@media (max-width: 600px){
	.product-card-product-name-text{
	font-size: 19px !important;
	}
	.headerutil {
	padding-right: 35px !important;
	}
.row{
flex-direction: column;
align-items: center;
	padding-bottom: 2rem;
}
.brand-image{
	order:2;
	}
	.contact-text-right{
	flex-direction: column;
    order: 1;
	}
	.contact-label{
	padding-left: 0px !important;
		font-size: 15px !important;
	}
.col-6{
flex:1 1 100%;
}
	h1{
	font-size: 1rem !important;
		margin-bottom: 0.6rem !important;
	}
	.product-title-container{
padding-top: 3em !important;
}
}
/*Product Details Page CSS*/
.product-title-container{
padding-top: 2em;
}
#productName{
padding-top: 10px;
	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 CSS*/
/* Main container for the contact information */
.contact-info {
display: flex;
justify-content: space-around; /* Distribute space: contact on left, image on right */
align-items: center; /* Vertically center the content */
width: 100%; /* Ensure it spans the full width */
padding-top: 50px;
	gap: 19rem;
}

/* Container for the contact image */
.brand-image {
display: flex;
align-items: center; /* Vertically center the contact text */
justify-content: flex-start; /* Align the contact text to the left */
	cursor:pointer !important;
}

/* Container for the contact text (Contact: and email) */
.contact-text-right {
display: flex;
align-items: center; /* Vertically center the image */
}

/* Styling for the email link inside the contact-text */
.email-link {
text-decoration: underline !important;
font-size: 13px;
}
h1{
font-size: 1.5rem !important;
	font-weight: 800 !important;
	margin-bottom: 0.1rem !important; 
}
/* Styling for the "Contact:" label text */
.contact-label {
margin-right: 0px;
font-size: 17px;
	padding-left: 50px;
text-decoration: underline !important;
	text-underline-offset: 4px;
	color: black !important;
	cursor:pointer !important;
}

/* Styling for the contact image */
.contact-img {
width: 300px;
height: auto;
}
@media (min-width: 769px) and (max-width: 991px) {
	.nav.d-flex.justify-content-center.align-items-center {
  display: none !important;
}
	.contact-info{
	gap: 0px !important;
	}
}
/* Media query for smaller screens: Stack the text and image */
@media (max-width: 768px) {
		.nav.d-flex.justify-content-center.align-items-center {
  display: none !important;
}
.contact-info {
flex-direction: column; /* Stack the items vertically */
text-align: center; /* Optionally center the text */
padding: 20px; /* Adjust padding for better spacing */
	gap: 0px !important;
}

/* Adjust the font size of the contact text on small screens */
.contact-text-right h1 {
font-size: 5vw; /* Make the font size adjust on smaller screens */
}

/* Add margin below the contact text for better spacing */
.contact-text-right {
margin-bottom: 20px; /* Add space below the contact text */
}

/* Adjust the size of the contact image on small screens */
.contact-img {
width: 150px; /* Optionally reduce image size for small screens */
}

/* Adjust the font size of the email link on small screens */
.email-link {
font-size: 1.2rem; /* Adjust font size for email link on small screens */
}
}