@charset "UTF-8";
/* CSS Document */


/*Desktop / global view*/


body {
	background-color:#F4F6F6;
	max-width: 2800px;
	margin-left: auto;
	margin-right: auto;
	}

a{
	cursor: pointer;	
	}

/*home page starts here*/


/*
.header-main {
	position:absolute;
	top: 0;
	width: 100%;
	height: 70px;
	background-color: #FFF;
	display: flex;
	justify-content: space-between;
	z-index: 1000;
	}

/*changed logo to h1 for SEO*/
/* Original Styles
h1 {
	color:#000000;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 22px;
	padding-left: 200px;
	line-height: 70px;
	}

.header-main-nav{
	width: fit-content;
	}

#menu-main {
	padding-right: 200px;
	}
	
#menu-main li {
	display: inline-block;
	float: left;
	}
	
#menu-main li a {
	text-decoration: none;
	font-family: 'Poppins', sans-serif;
	color: #000000;
	font-size: 14px;
	font-weight: 400;
	padding: 0px 10px 10px 15px;
	line-height: 70px;
}

#menu-main li a:hover {
	color: #000000;
	border-bottom: 2px solid black;
	padding-top: 20px;
}
*/

/* Updated styles: */

/* Header */
.header-main {
  position: absolute;
  top: 0;
  width: 100%;
  height: 70px;
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center; /* Vertically center content */
  padding: 0 9.5%; /* Add some padding to the sides */
  z-index: 1000;
}

#home .header-main {
    background-color: #fff; }

.header-other {
	/*position: absolute;
    top: 0;
	width:100%;
	height: 70px;
	background-color: #F4F6F6;
	display: flex;
	justify-content: space-between;
    align-items: center; /* Vertically center content */
    padding: 0 10%; /* Add some padding to the sides */
	z-index: 1000;
}


/* Logo (h1) */
h1 {
  color: #000;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin: 0; /* Remove any default margin */
  line-height: 70px; /* Align with the height of the header */
  min-width: 180px; /* To avoid site name breaking into two lines when page is narrowed */
}

h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
	color: black;
	text-decoration: none;
}

/* Navigation */
.header-main-nav {
  display: flex; /* Flexbox container for navigation */
}

#menu-main {
  list-style: none; /* Remove default list styles */
  margin: 0;
  padding: 0;
  display: flex; /* Flexbox for horizontal menu items */
}

#menu-main li {
  margin-left: 20px; /* Space between menu items */

}

#menu-main li a {
  text-align:center;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  color: #000;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 400;
  padding: 0 0 1px 0; /* removed left right padding as there is a left margin setting for list items */
  line-height: 20px; /* original was 70px and seemed to big but we could change this back */
  display: block; /* Ensure the link fills the list item */
}

/* underlined menu item by body id */

#menu-main li a:hover {
  color: #000;
  border-bottom: 2px solid black;
  /*padding-top: 20px;*/
}


#logo #menu-main li a.logo {
	border-bottom: 2px solid black; 
} 

#printed #menu-main li a.printed {
	border-bottom: 2px solid black; 
}

#props #menu-main li a.props {	
	border-bottom: 2px solid black; 
}

#photos #menu-main li a.photos {
	border-bottom: 2px solid black; 
}

#contact #menu-main li a.contact {
	border-bottom: 2px solid black; 
}

#home #menu-main li a.homepg, .slicknav_nav li a.homepg {
	border-bottom: 2px solid black;
}


/*Main Content Area */

/*.main-intro {
	background-position: center;
	padding-top: 200px;
	padding-left: 450px;
	padding-right: 250px;
	padding-bottom: 50px;
}*/

main {
	text-align: center;
	vertical-align: top;
}

	
.home-bubble {
	text-align: center; 
	vertical-align: middle; 
	margin-left: auto; 
	margin-right: auto;
	margin-top: 70px;
	max-width: 800px;
}



strong {
  font-weight: bold; /* Ensures bold styling */
} 


/*logo page start here*/

/*.image-display img {
	padding-top: 100px;
	padding-left: 200px;
	padding-right: 200px;
	padding-bottom: 200px;
	float: left;
	height: 400px;
}
*/



.row {
	text-align: center;
	width: 82%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 100px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 200px;
}

.row-images {
	padding-top: 100px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 200px;

}
	
.col {
	text-align: center;
	/*float: left;*/
	padding: 5px;
	}

#logo .col {
	float: left;
}

.col-lg {
	width: 33%;
	}

.col-lg img {
	width: 100%;
	height: auto;
	display: block;
	}

.footer-logo {
	width: 100%;
	height: 200px;
	background-color:#0000;
	display: flex;
	justify-content: space-between;
	margin-bottom: -50px;
	}


/*printed / photos start here*/

.col-lg-3 img {
	width: 100%;
	height: auto;
	display: block;
	padding-bottom: 20px;
	}

.mobile-version {
	display: none;
}

/*props stuff pages start here*/


/*contact page*/

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
		
}


.contactpg-pink-backround {
	
	background-color: #F4F6F6;
	
}

.contactpg{
	display: flex;
	justify-content: center;
	position: center;
	padding-top: 50px;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}

.contact-mobile {
	display: none;
}

/* to hide mobile image versions */
img.mobile-version {
	display: none;
}


.header-main .slicknav_menu {
	display: none;
	}

/* Responsive Design 
@media (max-width: 600px) {
 /* .speech-bubble {
    max-width: 95%; /* Ensure it fits on smaller screens 
  }
*/


/*mobile view*/

	@media (max-width: 900px) {

	/* this style allows the Go for Melanie to move to the left with an assigned padding */
	.header-main {
		padding-left: 10%;
	}	
	
/*This rule allows vertical align to match logo */
		.slicknav_menu {
			padding-bottom: 25px;
		}
		
/* these rules turn thing on and off according to screen width */		
.contact-desktop {
	display: none;
}
		
img.mobile-version {
	display:inline;
}

img.desktop-version { 
	display: none;
	}
		
.contactpg{
	width: 100%;
}
		
.contact-mobile {
	display: block;
}
	
.row {
	width: 80%;
}		
		
/*padding for images in main layer*/
.row img {
	padding-bottom: 12px;
}

		
	/* #menu-main is the original menu */
	.js #menu-main {
		display:none;
	}
	
	.js .slicknav_menu {
		display:block;
	}
	
	/*#menu-main {
		display: none;		
		}*/
	
	.logo-black {
	color:#F00B0F;
	font-weight: 700;
	font-size: 14px;
	padding-left: 500px;
	float: left;
	line-height: 20px;
	}
		
	.col-sm {
		width: 100%;
		}

	.col {
		padding: 0%;
		}
	

	.js #menu-main {
    display: none;
  }
  
	
	.slicknav_nav {
  position: absolute;
  top: 40px; /* Ensures it starts below the header */
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: transparent;
}	

  .slicknav_menu {
    display: block !important;
  }

/* Make the links black */
.slicknav_nav a {
  color: black !important;
  text-decoration: none;
  display: block;
  padding: 10px 15px; /* Add padding for better spacing */
  border-bottom: 2px solid transparent; /* Transparent border to prevent jiggling */
  transition: all 0.3s ease-in-out;
}

.slicknav_nav a:hover {
  border-bottom: 2px solid transparent; /* border on hover - TRANSPARENT FOR NOW */
}

/* Ensure the dropdown doesn't collapse too quickly */
.slicknav_nav li {
  list-style: none;
}

.slicknav_nav a:hover {
	background: white;
}

/* Ensure no extra margin/padding */
.slicknav_nav ul {
  padding: 0;
  margin: 0;
}

  #menu-main {
    display: none;		
  }


/* slicknav menu custom styles */ 



/* suggested by ChatGPT to override reset.css - renders burger menu visible */

.slicknav_btn {
    display: block !important;
    background: transparent;
}

.slicknav_menu .slicknav_menutxt {
    display: none !important;  /* Ensure the text is removed */
}

.slicknav_menu .slicknav_icon-bar {
    display: block;
    width: 30px;
    height: 4px;
    background-color: #333;
    margin: 5px auto;
}


/*chatgpt*/ 


/* Ensure SlickNav menu is right-aligned and 350px wide */
.slicknav_nav {
    position: absolute;
    top: 100%;  /* Places it right below the burger */
    left: -244px;  /* Aligns it to the right edge of the burger button */
    width: 350px; /* Ensures the menu is 350px wide */
    background-color: white; /* Background color */
    padding: 10px 0;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow effect */
    border-radius: 0px;
    z-index: 1000; /* Ensures it appears above other content */
}

/* Ensure menu items are right-aligned and span full width */
.slicknav_nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.slicknav_nav li {
    text-align: right; /* Right-aligns text */
    padding: 8px 20px;
    width: 100%;
}

/* Style the menu links */
.slicknav_nav a {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: black;
    text-decoration: none;
    display: block;
    padding: 10px 20px;
    transition: background 0.2s ease-in-out;
    width: 100%; /* Makes sure links take full width */
    box-sizing: border-box; /* Prevents overflow issues */
}

/* Hover effect 
.slicknav_nav a:hover {
    background-color: #f0f0f0;
}*/

/* Click effect */
.slicknav_nav a:active {
    background-color: #ddd;
}

/* remove black line at bottom of nav */
.slicknav_nav li a.homepg {
  border-bottom: 2px solid transparent;
}

	}