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

/* General Reset */
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-margin-top: 280px;
}

body {
    font-family: 'Poppins', sans-serif;
	font-weight: 200;
	background-color: #fff;
	font-size: 12px;
	-ms-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
	padding-top: 110px; /* Adjust based on your header's height */
	align-content: center;
}

header {
	margin-bottom: 0; /* Remove any bottom margin */
	padding-bottom: 0; /* Remove any bottom padding */
	position: fixed; /* Ensures the header stays fixed at the top */
	top: 0; /* Keeps it aligned to the top of the viewport */
	align-content: center;
	/* left: 0; /* Aligns it to the left of the viewport */
	width: 100%; /* Ensures the header spans the full width of the page */
	z-index: 1000; /* Places the header above other elements */
	background-color: #fff; /* Optional: Set a background color */
	/* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for visual separation */
}

p {
    text-align: left;
}

/* Header Container */
.header-container {
    display: flex; /* Switch to flexbox for flexibility */
    align-items: center; /* Vertically align items */
    justify-content: space-between; /* Push content to edges */
    padding: 0 13%; /* Horizontal padding */
    height: 100px;
    background-color: #42224b; /* Maintain purple background */
    color: white;
    gap: 20px; /* Space between sections */
    flex-wrap: nowrap; /* Prevent wrapping entirely */
}

		/* Logo and Company Info */
		.logo-container {
			display: flex;
			align-items: center;
			gap: 10px; /* Keep logo close to the text */
			flex-shrink: 1; /* Allow the container to shrink slightly if needed */
			max-width: 100%; /* Ensure the container doesn't exceed the header's width */
		}

				.logo {
					max-width: 100px;
					height: auto;
				}

				/* Company Info */
				.company-info {
					display: flex;
					flex-direction: column;
					white-space: normal; /* Allow wrapping if needed (optional) */
					overflow: visible; /* Ensure all text is shown */
					max-width: 60%; /* Increase the space for the text */
					flex-grow: 1; /* Allow the text container to expand as needed */
					text-align: left; /* Align text to the left */
					padding-right: 10px; /* Add spacing for better layout */
				}

						/* Company Name */
						.header-company-name {
							font-size: 18px; /* Maintain bold font size */
							font-weight:500; /* Bold styling */
							color: white; /* White text color */
							white-space: nowrap; /* Keep text on a single line */
							overflow: visible; /* Ensure no truncation */
						}

						/* Company Saying */
						.company-saying {
							font-size: 12px; /* Slightly smaller font size */
							font-style: italic; /* Italic styling */
							color: white; /* White text color */
							white-space: nowrap; /* Keep text on a single line */
							overflow: visible; /* Ensure no truncation */
						}

		/* Navigation Links */
		.nav-links {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			gap: 35px; /* Space between links */
			flex-grow: 1; /* Allow this section to grow/shrink dynamically */
			white-space: nowrap; /* Prevent links from wrapping */
			padding-right: 15px; /* Adds space to the right of the nav-links */
		}

		.nav-links a {
			display: flex; /* Arrange links horizontally */
			justify-content: flex-start; /* Push links to the right column */
			align-items: center; /* Vertically align the links */
			padding-left: 0%; /* Add spacing to position links */
			list-style: none; /* Remove default list styling */
			color: white; /* Change the text color to white */
    		text-decoration: none; /* Remove the underline from links */
		}

		/* Dropdown Container */
		.dropdown {
			margin: 0;
			padding: 0; /* Remove any additional spacing */
			position: relative; /* Keep dropdown positioning */
		}

		/* Hide dropdown menu by default */
		.dropdown-menu {
			display: none; /* Hide dropdown */
			position: absolute; /* Position relative to the parent link */
			top: 100%; /* Place below the parent link */
			left: 0; /* Align to the left of the parent link */
			background-color: #fff; /* White background */
			border: 1px solid #ddd; /* Optional border */
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
			padding: 10px 0; /* Add padding inside */
			min-width: 262px; /* Set dropdown width */
			z-index: 1000; /* Pace above other elements */
		}

		/* Dropdown menu links */
		.dropdown-menu a{
			display: block; /* Make each link a block element */
			padding: 5px 15px; /* Add padding to dropdown links */
			color: #000; /* Text color */
			text-decoration: none; /* Remove underline */
		}

		/* Hover over link formatting */
		.dropdown-menu a: hover{
			background-color: #f5f5f5; /* Highlight link on hover */
		}

		/* Show dropdown on hover */
		.dropdown:hover .dropdown-menu{
			display: block; /* show menu when hovering over parent */
		}

		.dropdown-toggle i {
			margin-left: 5px; /* Adds space between the text and the arrow */
			vertical-align: middle; /* Ensures it aligns nicely with the text */
		}

		/* Hamburger Menu (Hidden by Default) */
		.hamburger {
			display: none; /* Default: Hidden */
			flex-direction: column; /* Stack the lines */
			justify-content: space-between;
			align-items: center; /* Center horizontally */
			width: 25px; /* Match size proportion to other elements */
			height: 15px; /* Maintain aspect ratio */
			cursor: pointer; /* Show clickable cursor */
			margin: 0 auto; /* Center it horizontally */
		}

		.hamburger span {
			display: block;
			height: 2px;
			width: 100%; /* Full width of the button */
			background-color: white; /* Match the header text color */
			border-radius: 5px; /* Rounded edges for cleaner look */
		}

		/* Hamburger Dropdown Menu (Hidden by Default) */
		.hamburger-menu {
			display: none;
			position: absolute;
			top: 100px; /* Below the header */
			right: 70px;
			background-color: white;
			border: 1px solid black;
			padding: 10px;
			flex-direction: column;
		}

		.hamburger-menu a {
			text-decoration: none;
			font-size: 0.95em;
			color: black;
		}

.site-notice {
  	display: flex; /* Arrange the icon and text horizontally */
  	align-items: center; /* Vertically align the icon and text */
  	width: 70%; /* Set the width of the notice */
  	margin: 0 auto; /* Center the notice on the page */
  	padding: 10px 20px; /* Add padding */
  	font-size: 1rem; /* Text size for the notice */
  	text-align: center; /* Center the text horizontally */
  	background-color: #FFFB89; /* Optional light background color */
	margin-bottom:10px;
}

.site-notice .icon {
  	font-size: 1.5rem; /* Adjust the size of the icon */
  	color: #e74c3c; /* Use a red color for the exclamation point */
  	margin-right: 10px; /* Add space between the icon and the text */
}

/* Main Content Section Styling */
.index_main_content {
	display: flex; /* Enables flexbox layout */
  	flex-direction: column; /* Stacks children vertically */
  	justify-content: center; /* Centers children vertically */
  	align-items: center; /* Centers children horizontally */
  	width: 100%; /* Ensures it spans the full page width */
  	margin-top: 0; /* Removes any unintended margin */
  	padding-top: 10px; /* Adds spacing above if needed */
  	box-shadow: none; /* Ensures no shadow is applied */
  	border: none; /* Removes any borders */
  	background: transparent; /* Ensures no background color is applied */
	margin-bottom: 10px;
}

		/* Grid Container */
		.hero_grid_container {
			display: grid; /* Enable grid layout */
			grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
			grid-template-rows: repeat(2, 1fr); /* 2 equal rows */
			gap: 20px; /* Space between grid items */
			width: 73%; /* Set the grid container width */
			height: 70%; /* Set the grid container height */
		}

				/* Main hero picture for Large Spanning Block */
				.index_main_hero_picture {
					grid-column: span 2; /* Spans 2 columns */
					grid-row: span 2; /* Spans 2 rows */
					display: flex; /* Enable flexbox for centering */
					justify-content: center; /* Center the image horizontally */
					align-items: center; /* Center the image vertically */
					overflow: hidden; /* Ensures no content overflows */
				}

				/* Image inside the Main Hero Picture */
				.index_main_hero_picture img {
					width: 100%; /* Ensure the image fills the container's width */
					height: 100%; /* Ensure the image fills the container's height */
					object-fit: cover; /* Ensures the image scales properly without distortion */
					display: block; /* Removes inline spacing around the image */
				}

						/* Overlay Text Styling */
						.main_hero_picture_overlay_text {
							position: absolute;
							top: 50%; /* Centers the container vertically */
							left: 50%; /* Centers the container horizontally */
							transform: translate(-50%, -50%); /* Proper centering */
							background: rgba(0, 0, 0, 0.5); /* Darker background color */
							color: white;
							padding: 10px; /* Adds space between the text and the border */
							border-radius: 5px; /* Keeps rounded corners */
							text-align: center; /* Centers the text horizontally */
							max-width: 90%; /* Prevent the text container from exceeding the hero image */
							box-sizing: border-box; /* Includes padding in the width calculation */
							white-space: normal; /* Allows wrapping to fit within the container */
							font-size: 1.75em; /* Initial size for large screens */
							font-weight: 400;
							line-height: 1.4; /* Adjusts spacing between lines */
							width: 65%;
							line-height: 1;
						}

						.slogan{
							font-size: 0.7em;
							line-height: 2;
						}

						.slogan_subtext{
							font-size: 0.6em;
							line-height: 4;
						}

						/* Text Inside the Overlay */
						.main_hero_picture_overlay_text span,
						.main_hero_picture_overlay_text .slogan,
						.main_hero_picture_overlay_text .slogan_subtext {
							margin: 0; /* Removes unwanted margin */
							padding: 0; /* Ensures consistent padding */
							max-width: 100%; /* Ensures each text element fits within the parent */
							overflow: hidden; /* Prevents text overflow */
							word-wrap: break-word; /* Forces long words to wrap within the container */
						}

				/* Small hero picture items to the right of the main hero picture */
				.index_hero_grid_picture {
					position: relative; /* Make this the containing block for the overlay-text */
				  	display: flex;
				  	justify-content: center;
				  	align-items: center;
				  	overflow: hidden;
				  	border-radius: 5px;
				  	/* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
				}

				/* Image inside the Main Hero Picture */
				.index_hero_grid_picture img {
					max-width: 100%; /* Prevent image from exceeding container width */
					max-height: 100%; /* Prevent image from exceeding container height */
					width: auto; /* Maintain natural width */
					height: auto; /* Maintain natural height */
					object-fit: contain; /* Ensure the image fits within the container */
					display: block; /* Remove unwanted inline spacing around the image */
				}

						.overlay-text{
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%); /* Keeps the text centered */
							color: white;
							background: rgba(0, 0, 0, 0.5); /* Optional: Add contrast */
							padding: 10px;
							border-radius: 5px;
							font-size: 1.0rem;
							font-weight: 400;
							text-align: center;
							opacity: 0; /* Initially hidden */
							animation: fadeIn 2s ease-in forwards; /* Trigger fadeIn */
							pointer-events: none; /* Prevent interaction issues */
						}

				.index_hero_grid_picture:nth-child(2) .overlay-text {
				  animation-delay: 0.25s; /* No delay for the first overlay */
				}

				.index_hero_grid_picture:nth-child(3) .overlay-text {
				  animation-delay: 0.5s; /* 1-second delay for the second overlay */
				}

				.index_hero_grid_picture:nth-child(4) .overlay-text {
				  animation-delay: 0.75s; /* 2-second delay for the third overlay */
				}

				.index_hero_grid_picture:nth-child(5) .overlay-text {
				  animation-delay: 1s; /* 3-second delay for the fourth overlay */
				}

				@keyframes fadeIn {
				  0% {
					opacity: 0; /* Fully hidden at the start */
					transform: translate(-50%, -40%); /* Optional: Slight offset */
				  }
				  100% {
					opacity: 1; /* Fully visible */
					transform: translate(-50%, -50%); /* Reset to fully centered */
				  }
				}






	/* Custom Laser Engraving Index Main Content */
	.custom_laser_engraving_container{
		display: grid; /* Enable grid layout */
		grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
		grid-template-rows: repeat(2, 1fr); /* 2 equal rows */
		gap: 20px; /* Space between grid items */
		width: 73%; /* Set the grid container width */
		height: 70%; /* Set the grid container height */
	}
		.custom_laser_engraving_paragraph_text{
			grid-column: span 2; /* Spans 2 columns */
			grid-row: span 2; /* Spans 2 rows */
			display: flex; /* Enable flexbox for centering */
			justify-content: center; /* Center the image horizontally */
			/* align-items: center; /* Center the image vertically */
			overflow: hidden; /* Ensures no content overflows */
		}

		.laser_engraving_grid_picture{
			position: relative; /* Make this the containing block for the overlay-text */
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			border-radius: 5px;
			/* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
		}

		.laser_engraving_grid_picture img{
			max-width: 100%; /* Prevent image from exceeding container width */
			max-height: 100%; /* Prevent image from exceeding container height */
			width: auto; /* Maintain natural width */
			height: auto; /* Maintain natural height */
			object-fit: contain; /* Ensure the image fits within the container */
			display: block; /* Remove unwanted inline spacing around the image */
		}










/* Footer Section Styling */
.site-footer {
  background-color: #42224b; /* Purple background */
  color: #fff; /* White text */
  padding: 10px 0px 0px 10px; /* Vertical padding */
}

.footer-container {
  width: 75%; /* Restrict footer width */
  margin: 0 auto; /* Center footer */
  text-align: center; /* Center-align text */
}

.footer-grid {
  display: grid; /* Enable grid layout */
  grid-template-columns: repeat(5, 1fr); /* 5 columns */
  grid-template-rows: auto auto 1px auto auto; /* 5 rows */
  gap: 20px; /* Space between items */
  text-align: center;
}

/* Logo Styling */
.footer-logo img {
  max-width: 100%; /* Ensure the logo fits its container */
  height: auto; /* Maintain aspect ratio */
  max-height: 3.5rem; /* Prevent excessive shrinking */
  margin: 0 auto;
  align-content: flex-end;
}

/* Adjust spacing between logo and text */
.footer-logo,
.footer-text {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  justify-content: center; /* Center-align vertically */
  align-items: center; /* Center-align horizontally */
  text-align: center;
  gap: 10px; /* Add space between logo, name, and slogan */
}

.company-name {
  font-weight: bold;
  font-size: 1.5rem;
}

.company-slogan {
  font-style: italic;
  font-size: 1rem;
}

/* Services, Contact, and Social Media */
.footer-services,
.footer-contact,
.footer-social {
  display: flex; /* Default: horizontal alignment */
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Thin Line Styling */
.footer-line hr {
  border: 0;
  border-top: 1px solid #fff; /* Thin white line */
  margin: 10px 0;
  width: 100%; /* Full width */
}

/* Social Media Links Styling */
.footer-icons {
  display: flex;
  justify-content: center;
  gap: 10px; /* Space between links */
}

.footer-icons a {
  color: #fff;
  text-decoration: none;
}

/* Copyright Section */
.footer-copyright {
  font-size: 0.7rem;
  opacity: 0.8; /* Slightly faded text */
}

/* Media Queries for Responsive Design */
@media (max-width: 1225px) {
	
	.logo {
        max-height: 150px; /* Reduce the logo size for smaller screens */
	}
	
	.company-name {
		font-size: 1em;
		font-weight: bold;
	}
	
	.company-saying {
		font-size: 0.75em;
		font-style: italic;
		color: white;
	}
	
	.nav-links{
		gap: 10px;
	}
	
	.nav-links a {
		font-size: 0.85em;
		margin-right: 2%;
		letter-spacing: 0px; /* Increase the spacing between letters */
	}
}

@media (max-width: 1000px) {
    
	.header-container {
        /* flex-wrap: nowrap; /* No wrapping even on smaller screens */
        gap: 10px; /* Adjust gap for smaller widths */
        padding: 0 5%; /* Reduce padding to conserve space */
		justify-content: center; /* Center align all header elements */
    }
	
	.company-info {
        font-size: 12px; /* Reduce font size */
    }
	
	.logo-container {
		flex-direction: row; /* Keep logo and text on the same row */
		justify-content: center; /* Center elements horizontally */
		gap: 10px; /* Add spacing for smaller screens */
		width: 70%;
		margin: 0 auto;
	}

	.logo {
		max-width: 80px; /* Further reduce the logo size */
	}

	.company-info {
		font-size: 12px; /* Adjust font size for better fit */
	}
	
    .nav-links {
        display: none; /* Hide the nav links */
    }
	
	.hamburger {
        display: flex; /* Show the hamburger */
        position: relative;
        margin: 0 75px; /* Center horizontally, like site-notice */
    }

    .hamburger.open + .hamburger-menu {
        display: flex; /* Show the dropdown menu when hamburger is clicked */
    }
	
	.site-notice {
        font-size: 0.9rem; /* Reduce font size slightly for smaller screens */
        padding: 8px; /* Adjust padding for better fit */
        width: 73%; /* Allow the container to shrink further */
    }
	
	.hero_grid_container {
		display: flex; /* Switch to flexbox for vertical stacking */
		flex-direction: column; /* Stack items vertically */
		gap: 10px; /* Adjust spacing for smaller screens */
	}

	.index_main_hero_picture {
		order: 0; /* Ensure the main hero picture appears first */
	}
	
	.main_hero_picture_overlay_text {
		font-size: 1.35em;
		width: 88%;
	}
	
	.main_hero_picture_overlay_text .slogan{
		font-size: 0.8em;
		line-height: 1.5;
		margin-bottom: 10%;
		margin-top: 3%;
	}
	
	.slogan_subtext{
		font-size: 0.7em;
		line-height: 1.25;
	}

	.index_hero_grid_picture {
		order: 1; /* Stack all other pictures below in their natural order */
	}
	
  .footer-grid {
    grid-template-columns: 1fr; /* Stack all columns in one row */
    grid-template-rows: auto; /* Adjust row heights dynamically */
  }

  .footer-logo,
  .footer-text,
  .footer-services,
  .footer-contact,
  .footer-social {
    grid-column: 1 / -1; /* Each spans full width */
  }

  .footer-icons {
    flex-direction: column; /* Stack social media links */
    gap: 10px; /* Add spacing between icons */
  }

  .footer-logo img {
    max-height: 75px; /* Adjust logo size for smaller screens */
  }

  .footer-logo,
  .footer-text {
    gap: 5px; /* Bring logo closer to the text */
  }

}