/**********  START OF BRAND GLOBAL VARIABLES **************/

:root {
  --primary-color: #264653; /* Dark Teal Blue for primary elements */
  --secondary-color: #e9c46a; /* Golden Yellow for secondary elements */
  --accent-color: #d48a47; /* Warm Orange for accents */
  /*--background-color: #f4f4f9;*/ /* Light Grey for background */
  --background-color: #f7ebf7; /* Light Grey for background */
  --header-background-color: #c780c7; /* purple for nav */
  --footer-background-color: #2a2a2a; /* Dark Slate for footer */
  --text-color: #2a2a2a; /* Dark Grey for text */
  --heading-color: #264653; /* Dark Teal Blue for headings */
  --link-color: #264653; /* Dark Teal Blue for links */
  --link-hover-color: #2a9d8f; /* Rich Teal for hover */
  --button-bg-color: #e76f51; /* Soft Coral for buttons */
  --button-bg-hover-color:#cf6249; /* Soft Coral for buttons */	
  --button-text-color: #ffffff; /* White text on buttons */
  --border-color: #dcdcdc; /* Soft Grey for borders */
  --input-bg-color: #ffffff; /* White background for inputs */
  --input-text-color: #2a2a2a; /* Dark Grey for input text */
  --font-family: 'Helvetica Neue', Arial, sans-serif;
  --font-size-base: 100%; /* 16px */
  --paragraph-font-size: 1.15rem; /* 16px */
  --heading1-font-size: 2rem;
  --heading2-font-size: 1.75rem;	
  --heading3-font-size: 1.75rem;	
  --heading4-font-size: 1.75rem;	
  --heading5-font-size: 1.5rem;	
  --heading6-font-size: 1.5rem;	
  --line-height: 1.5;
  --padding-small: 8px;
  --padding-medium: 16px;
  --padding-large: 24px;
  --card-bg-color: #ffffff; /* White background for cards */
  --shadow-color: rgba(0, 0, 0, 0.1);
  --highlight-color: #e9c46a; /* Golden highlight color */
  --disabled-color: #bdc3c7; /* Soft Grey for disabled elements */
  --overlay-color: rgba(0, 0, 0, 0.5);
  --gradient-start-color: #264653;
  --gradient-end-color: #2a9d8f;
  --error-color: #e76f51; /* Coral for error messages */
  --success-color: #2ecc71; /* Green for success */
  --warning-color: #f39c12; /* Same warning color */
  --info-color: #3498db; /* Same info color */
  --scrollbar-track-color: #ecf0f1;
  --scrollbar-thumb-color: #bdc3c7;
  --modal-bg-color: #ffffff;
  --card-border-radius: 8px;
  --container-max-width: 1200px;
  --grid-gap: 16px;	
	
}

body {
	background-color: var(--background-color);
	color: var(--text-color);
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	line-height: var(--line-height);
	/*padding-top: 90px;*/
	margin-top: 90px;
}

h1 {
	color: var(--heading-color);
	font-size: var(--heading1-font-size);
}

h2 {
	color: var(--heading-color);
	font-size: var(--heading2-font-size);
}

h3 {
	color: var(--heading-color);
	font-size: var(--heading3-font-size);
}

h4 {
	color: var(--heading-color);
	font-size: var(--heading4-font-size);
}

h5 {
	color: var(--heading-color);
	font-size: var(--heading5-font-size);
}

h6 {
	color: var(--heading-color);
	font-size: var(--heading6-font-size);
}

p {
	font-size: var(--paragraph-font-size);
	padding: var(--padding-small);
}

a {
	color: var(--link-color);
	text-decoration: none;
}

a:hover {
	color: var(--link-hover-color);
}

/* Accessibility focus styles for links */
a:focus {
	outline: 2px dashed var(--accent-color); /* Add dashed outline for keyboard focus */
	outline-offset: 4px;
}

li{
	color: var(--text-color);
}

.primarybutton{
	background-color: var(--button-bg-color); /* Updated button background */
	color: var(--button-text-color);
	padding: var(--padding-medium);
	border: 1px solid var(--border-color);
	border-radius: var(--card-border-radius);
	box-shadow: 0 2px 4px var(--shadow-color);
	transition: box-shadow 0.2s, background-color 0.2s;
}

.primarybutton:hover{
	background-color: #1b66a1; /* Slightly darkened version of --button-bg-color */
	box-shadow: 0 4px 6px var(--shadow-color);
}

.primarybutton:active{
	background-color: #155482; /* More darkened version of --button-bg-color */
	box-shadow: 0 1px 2px var(--shadow-color);
}

.primarybutton:focus{
	outline: 3px solid var(--accent-color); /* Visible outline for keyboard focus */
	background-color: #e64c3c; /* Optional: Slight background change */
	outline-offset: 4px;
}


.secondarybutton{
	/*background-color: var(--button-bg-color); /* Updated button background */
	color: var(--button-text-color);
	padding: var(--padding-medium);
	border: 1px solid var(--border-color);
	border-radius: var(--card-border-radius);
	box-shadow: 0 2px 4px var(--shadow-color);
	transition: box-shadow 0.2s, background-color 0.2s;
}

.secondarybutton:hover{
	background-color: #1b66a1; /* Slightly darkened version of --button-bg-color */
	box-shadow: 0 4px 6px var(--shadow-color);
}

.secondarybutton:active{
	background-color: #155482; /* More darkened version of --button-bg-color */
	box-shadow: 0 1px 2px var(--shadow-color);
}

.secondarybutton:focus{
	outline: 3px solid var(--accent-color); /* Visible outline for keyboard focus */
	background-color: #e64c3c; /* Optional: Slight background change */
	outline-offset: 4px;
}



.mybutton {
	background-color: var(--button-bg-color); /* Updated button background */
	color: var(--button-text-color);
	padding: var(--padding-medium);
	border: 1px solid var(--border-color);
	border-radius: var(--card-border-radius);
	box-shadow: 0 2px 4px var(--shadow-color);
	transition: box-shadow 0.2s, background-color 0.2s;
}

/* Added manual hover and active states for buttons */
.mybutton:hover {
	background-color: #1b66a1; /* Slightly darkened version of --button-bg-color */
	box-shadow: 0 4px 6px var(--shadow-color);
}

.mybutton:active {
	background-color: #155482; /* More darkened version of --button-bg-color */
	box-shadow: 0 1px 2px var(--shadow-color);
}

/* Accessibility focus styles for buttons */
.mybutton:focus {
	outline: 3px solid var(--accent-color); /* Visible outline for keyboard focus */
	background-color: #e64c3c; /* Optional: Slight background change */
	outline-offset: 4px;
}

/* Full-width Button for Forms and Calls-to-Action */
.full-width {
    width: 100%;
    padding: var(--padding-medium);
    font-size: 1.25rem;
}



input, textarea{
	max-width: 600px;
	
}

textarea{
	min-height: 150px;
}

/* Input and textarea focus styles for usability */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="number"]:focus, 
select,
textarea:focus {
	border-color: var(--primary-color); /* Add focus outline */
	outline: none;
	box-shadow: 0 0 5px rgba(33, 118, 181, 0.5); /* Optional focus shadow */
	
	
}

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], select, textarea {
	background-color: var(--input-bg-color);
	color: var(--input-text-color);
	padding: var(--padding-small);
	border: 1px solid var(--border-color);
	width: 100%;
}


.card {
	background-color: var(--card-bg-color);
	border-radius: var(--card-border-radius);
	box-shadow: 0 2px 4px var(--shadow-color);
	padding: var(--padding-large);
	margin-bottom: var(--padding-medium);
}

.container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: var(--padding-medium);
}

.highlight {
	background-color: var(--highlight-color);
}

.modal {
	background-color: var(--modal-bg-color);
	padding: var(--padding-large);
	box-shadow: 0 4px 8px var(--shadow-color);
}

.scrollbar {
	scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* Scrollbar customization for WebKit browsers */
.scrollbar::-webkit-scrollbar {
	width: 12px;
}

.scrollbar::-webkit-scrollbar-track {
	background-color: var(--scrollbar-track-color);
}

.scrollbar::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-thumb-color);
	border-radius: 10px;
}

.grid {
	display: grid;
	grid-gap: var(--grid-gap);
}

/**********  END OF BRAND GLOBAL VARIABLES **************/


/* THIS IS TEST CODE DELETE WHEN IN PROD*/

/*
body::before {
	content: "xs";
	position: fixed;
	top: 40px;
	left: 0;
	z-index: 9999999;
	background-color: var(--accent-color);
	color: var(--button-text-color);
	padding-left: 10px;
	padding-right: 10px;
}
*/

/*@media (min-width: 50px) { body::before { content: "xs"; top: 65px; }}
/*@media (min-width: 576px) { body::before { content: "sm"; top: 65px; }}  /* Large Phones */
/*@media (min-width: 768px) { body::before { content: "md"; top: 65px; }}  /* Tablets or Small Desktops */
/*@media (min-width: 992px) { body::before { content: "lg"; top: 65px; }}  /* Larger Desktops */
/*@media (min-width: 1200px) { body::before { content: "xl"; top: 65px; }}  /* Large Desktops and Widescreen monitors */
/*@media (min-width: 1400px) { body::before { content: "xxl"; top: 65px; }}  /* Very Large Screens such as high resolution monitors */

/* END OF THIS IS TEST CODE DELETE WHEN IN PROD*/

.nav-link{
  	color: #FFFFFF;
	font-size: 1.2rem;
}

.nav-link:hover{
	color: #000000;
}

.nav-active{
	color: #424242;
}

.navbar-logo {
  position: relative;
  margin-left: -10px;
  z-index: 1;
}

.navbar {
  background-color: var(--header-background-color); 
}

.nav-menu button {
	display: block;
	width: 100%;
	padding: 10px;
	background-color: var(--accent-color); /* Updated for better contrast */
	color: var(--text-color); 
	border: none;
	border-radius: 5px;
	font-size: 1.25rem;
	cursor: pointer;
}
.nav-menu button:hover {
	background-color: #e64a19;
}


/* Make the login button full width when the navbar collapses */
.navbar .btn {
  width: auto; /* Default width */
}

@media (max-width: 768px) {
  .navbar .btn {
    width: 100%; /* Full width for small screens */
    margin-top: 10px; /* Optional: add margin for better spacing */
	margin-bottom: 10px;
  }
  
  .navbar .nav-item {
    text-align: center; /* Center align nav items on collapse */
  }
}


/* Force dropdown to stay within the viewport */
.navbar .dropdown-menu {
    right: 0;
    left: auto;
  /*  transform: translateX(-100%); /* Moves it to the left if it reaches the edge */
    min-width: 150px; /* Adjust this value as per your design */
    max-width: 100vw; /* Ensures it doesn't exceed the viewport width */
}

@media (min-width: 768px) {
  /* On larger screens, ensure dropdown does not overflow */
  .navbar .dropdown-menu-end {
    right: 0;
    left: auto;
    transform: none; /* Resetting on larger screens */
  }
}





/* FOOTER */
.footer {
	background-color: var(--footer-background-color);
}

.footer h1, 
.footer h2, 
.footer h3, 
.footer h4, 
.footer h5, 
.footer h6 {
    color: #f4f4f9; /* Light grey for footer headings */
}

.footer p {
    color: #dcdcdc; /* Softer light grey for paragraph text */
}

.footer a {
    color: #e9c46a; /* Golden yellow for footer links */
    text-decoration: none;
}

.footer a:hover {
    color: #f4a261; /* Warm orange for hover effect */
}

.footer a:focus {
    outline: 2px dashed #f4a261; /* Dashed outline for focused links */
    outline-offset: 4px;
}
.footer input[type="text"]:focus{
	border-color: var(--secondary-color); /* Add focus outline */
	outline: none;
	box-shadow: 0 0 10px rgba(233, 196, 106, 0.7); /* Optional focus shadow */
}

/*TILT*/
.tilt {
	
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.tilt:hover {
  -webkit-transform: rotate(-15deg);
     -moz-transform: rotate(-15deg);
       -o-transform: rotate(-15deg);
      -ms-transform: rotate(-15deg);
          transform: rotate(-15deg);
}
.pic{
	padding: var(--padding-small);
}

/* Optional: Ensure the divs behave nicely */
.tilt.pic {
  flex: 0 0 auto; /* Prevents divs from stretching */
}

.social-container {
  display: flex;
  justify-content: center; /* Centers the divs horizontally */
  gap: 20px; /* Adds spacing between the divs */
}

/* END FOOTER */ 




main {
	padding-left: 5px;
	padding-right: 5px;
	min-height: 600px;
}

footer {
	margin-bottom: auto;
}




/* CONTACT US PAGE */
.contact{
	
}
/* Using Grid for contact details to allow more control */
.contact-details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
	gap: 20px; /* Adds space between items */
	margin-bottom: var(--padding-large);
}

.contact-item {
	text-align: center;
}

.contact-item h3 {
	margin-bottom: 10px;
	border: thin;
	border-radius: 5px;
	font-size: 1.5rem;
}

.contact-item p {
	font-size: 1rem;
}

.contact-item a {
	color: var(--accent-color); /* Updated color for better visibility */
	text-decoration: none;
	font-weight: bold;
}

.contact-form {
	max-width: 600px;
	margin: 0 auto;
}

.contact-form label {
	display: block;
	margin-bottom: 10px;
	font-size: 1rem;
	text-align: left;
}

.contact-form input, .contact-form textarea {
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.contact-store-hours{
	font-family: "Lato", sans-serif;
	font-weight: 400;
}

/*  LOGIN PAGE AND FORGOT PASS */

.login {
	width: 100%;
	max-width: 400px;
	background-color: #ffffff;
	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
	margin: 100px auto;
	border-radius: 7px;
}
.login h1 {
	text-align: center;
	padding: 20px 0 20px 0;
	border-bottom: 1px solid #dee0e4;
}
.login form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 20px;
	
}
.login form label {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	background-color: var(--primary-color); /* Updated button background color */
	color: var(--button-text-color);
}
.login form input[type="password"], .login form input[type="text"], .login form input[type="email"] {
	width: 80%;
	max-width: 400px;
	height: 50px;
	border: 1px solid #dee0e4;
	margin-bottom: 20px;
	padding: 0 15px;
}

.login button{
	font-size: 95%;
}

/* Profile Form Container */
.profile-form {
	max-width: 600px;
	margin: 0 auto;
	padding: var(--padding-medium);
}

/* Flexbox for each label and input */
.profile .form-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	margin: 10px 0;
}

.profile form label {
	width: 50px;
	height: 50px;
	background-color: var(--primary-color); /* Icon background color */
	color: var(--button-text-color); /* Icon text color */
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 5px; /* Optional: Rounded corners for icons */
	flex-shrink: 0; /* Prevents label from shrinking */
	margin-right: 10px; /* Add space between icon and input */
}




/* Input fields */
.profile input[type="text"], 
.profile input[type="email"], 
.profile input[type="password"], 
.profile input[type="submit"] {
	flex-grow: 1; /* Allow inputs to grow to fill available space */
	padding: 10px;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	box-sizing: border-box;
	width: 100%; /* Ensure inputs take up remaining space */
	min-width: 0; /* Prevent inputs from overflowing */
	margin: 0; /* Remove default margin */
}

/* Set a max width to prevent fields from getting pushed down */
.profile form input {
	max-width: calc(100% - 60px); /* Leave enough space for the icon and margin */
}

/* Mobile Responsive */
@media (max-width: 576px) {
	.profile .form-group {
		display: flex;
		flex-direction: row; /* Keep label and input on the same line */
		width: 100%; /* Ensure form takes full width */
	}

	.profile input[type="text"], 
	.profile input[type="email"], 
	.profile input[type="password"] {
		width: calc(100% - 60px); /* Ensure input width leaves space for icon */
	}
/*
	.profile input[type="submit"] {
		width: 100%; 
	}
*/
}





/* class Form Container */
.class-form {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--padding-medium);
}

/* Flexbox for each label and input */
.class .form-group {
	display: flex;
	flex-direction: column;
	align-items:flex-start;
	width: 100%;
	margin: auto;
	padding: 5px;
}

.class form label {
	width: 200px;
	height: 50px;
	background-color: var(--primary-color); /* Icon background color */
	color: var(--button-text-color); /* Icon text color */
	display: flex;
	align-content: flex-start;
	align-items: flex-start;
	border-radius: 5px; /* Optional: Rounded corners for icons */
	flex-shrink: 0; /* Prevents label from shrinking */
	margin-right: 10px; /* Add space between icon and input */
}




/* Input fields */
.class input[type="text"], 
.class input[type="email"], 
.class input[type="password"], 
.class input[type="number"], 
.class input[type="date"], 
.class select,
.class input[type="submit"] {
	flex-grow: 1; /* Allow inputs to grow to fill available space */
	padding: 10px;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	box-sizing: border-box;
	width: 100%; /* Ensure inputs take up remaining space */
	min-width: 0; /* Prevent inputs from overflowing */
	margin: 0; /* Remove default margin */
}

/* Set a max width to prevent fields from getting pushed down */
.class form input {
	/*max-width: calc(100% - 60px); /* Leave enough space for the icon and margin */
}

/* Mobile Responsive */
@media (max-width: 576px) {
	.class .form-group {
		display: flex;
		/*flex-direction: row; /* Keep label and input on the same line */
		flex-direction: column; /* test col when small*/
		width: 100%; /* Ensure form takes full width */
	}

	.class form label {
		width: 100%;
		
	}
	
	.class input[type="text"], 
	.class input[type="email"], 
    .class input[type="number"],  
    .class input[type="date"], 
	.class select,
	.class input[type="password"] {
		/*width: calc(100% - 60px); /* Ensure input width leaves space for icon */
	}
/*
	.class input[type="submit"] {
		width: 100%; 
	}
*/
}




.class_card{
	background-color:#fbf5fb;
	border-radius: 10px;
    width: auto;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .class_card {
        width: 100%; /* Full width on small screens */
    }
}

.centered-item {
    text-align: center;
    vertical-align: middle;
}



.map-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}
.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Media Query for small screens */
@media (max-width: 576px) {
	:root {
		--font-size-base: 90%; /* Adjust base font size for small screens */
	}

	h1 {
		font-size: 1.75rem; /* Reduced from 2rem */
	}
	h2 {
		font-size: 1.5rem; /* Reduced from 1.75rem */
	}
	h3 {
		font-size: 1.4rem; /* Reduced for small screens */
	}
}

/* Narrower scrollbar for smaller screens */
@media (max-width: 576px) {
	.scrollbar::-webkit-scrollbar {
		width: 8px; /* Narrower scrollbar */
		visibility: hidden; /* Hide scrollbar by default */
	}

	.scrollbar:hover::-webkit-scrollbar {
		visibility: visible; /* Show scrollbar on hover */
	}
}

.calendar-container {
	position: relative;
	width: 100%;
	padding-bottom: 75%;
	height: 0;
	overflow: hidden;
}

.calendar-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: solid 1px #777;
}