/* CSS Document */

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

body {
	font-family: arial, sans-serif;
	font-size: 1vw;
	background: #000000;
}


/* -- HEADER & NAV -- */

header {
	padding: 1.5em;
	left: 0;
	width: 100%;
	background:#000000;
}

nav {
  /* opacity: .95; */
  background: #000000;
  display: block !important;
}

.style-nav ul {
	list-style-type: none;
	text-align: center;
}

.style-nav ul li {
	display: inline-block;
}

.style-nav ul li a {
	text-decoration: none;
	color: #FFFFFF;
	/* font-size: clamp(1.5rem, calc(2.5rem - 3vw), 2rem); */
	font-size: 150%;
	text-align: center;
	display: block;
	text-transform: uppercase;
	padding: 0.25em;
}

.style-nav li:hover {
  cursor: pointer;          /* Changes mouse to a hand icon */
}

.style-nav .active{
	font-weight: bold;
}


/* -- COVER PIC -- */

.cover_pic {
	background-image:url("../images/banners/cover_pic.jpg");
	background-size: cover;
	padding: 1em 2em 1em;
	color: #FFFFFF;
	text-align: right;
	/* min-height: 10em; */
}

.style-logo {
	max-width: 24vw;
	display: block;
	width: 200px;
	float: left;
}

.cover_pic h1 {
	font-size: 250%;
	margin-top: 5em;
	text-transform: uppercase;
	font-weight: 800;
	float: right;
	text-shadow: 0px 0px 2vw rgba(0, 0, 0, 0.6);
}
	
.cover_pic h1 span {
	display: block;
}

.cover_pic h2 {
	font-size: 250%;
	text-transform: uppercase;
	font-weight: 200;
	clear: both;
	text-shadow: 0px 0px 4vw rgba(0, 0, 0, 0.6);
}

.story_pic {
	background-image:url("../images/banners/our_story_pic.jpg");
	background-size: cover;
	padding: 1em 2em;
	color: #FFFFFF;
	text-align: right;
	min-height: 25em;
}

.story-logo {
	max-width: 24vw;
	display: block;
	width: 200px;
	float: right;
}

.story_pic h1 {
	font-size: 200%;
	margin: 50px 0px 40px;
	text-transform: uppercase;
	font-weight: 800;
	text-shadow: 0px 0px 2vw rgba(0, 0, 0, 0.6);
}

.contact_label {
	font-weight: 10;
	font-size: 200%;
	padding: 70px 50px 100px 10px;
	color: #000000;
	text-align: left;
	min-height: 400px;
}

.contact_label h1 {
	font-size: 150%;
	margin-top: 50px;
	text-transform: uppercase;
	font-weight: 800;
	/* text-shadow: 0px 0px 2vw rgba(0, 0, 0, 0.6); */
	color: #000;
}

.contact-logo {
	display: block;
	width: 200px;
	margin-right: 40px;
	float: left;
}

.contact_container {
	background-image: url("../images/Blueprint.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


/* -- FOOTER -- */

footer {
  margin-top: 10px;
  padding: 10 30;
  position: relative;
  z-index: 1;
}

.footer_text {
	position: relative;	
	color: #000000;
	background: #000;
}

.footer_icons {
  	align-content: center;
}

.footer_icons ul {
	margin: 2em auto;
	list-style-type: none;
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 50%;
	max-width: 250px;
}

.footer_icons li {
	display: flex;
}

.footer_icons img {
	max-height: 10vw;
	padding: 1em;
}

.footer_text p {
	clear: both;
	color: #FFFFFF;
	align-content:center;
	text-align: center;
}

.clear {
  	clear: both;
}


/* -- MAIN CONTENT BODY -- */

.intro {
  position: relative;
  color: #000000;
  background: #FFFFFF;
  padding: 2em 4em;
}

.intro p {
	font-weight: 10;
	clear: both;
	color: #000;
	text-align: justify;
}

.our_story {
	position: relative;
	color:#000000;
	background: #fff;
	padding: 2em;
}

.our_story p {
	font-weight: 10;
	clear: both;
	color: #000000;
	text-indent: 4em;
  	max-width: 1000px;
	margin: auto;
}

.contact {
	position: relative;
	color:#000000;
	/* background: #fff; */
	padding: 0em 2em;
}

.contact p {
	font-weight: 10;
	clear: both;
	color: #000000;
	/* text-indent: 4em; */
  	max-width: 1000px;
	margin: auto;
}


/* -- GALLERY -- */

.galleryTitle h1 {
	font-weight: 10;
	clear: both;
	color: #ffffff;
	text-transform: uppercase;
	font-weight: 800;
	/* text-indent: 4em; */
  	max-width: 1000px;
	margin: 70px 10px 10px 10px;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 15px;
	padding: 100px;
        }

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	border-radius: 8px;
	transition: transform 0.3s ease;

}
.gallery-item img:hover {
	transform: scale(2);
	z-index: 100;
	position: relative;
}

.galleryLogo img{
	display: block;
	width: 100px;
	margin: 10px 10px 10px 40px;
}






.col {
	width: 100%;
	padding: 0px 10px 0px;
	float: left;
}



.col-lg-one-fourth {
	width: 25%;
}

.col-lg-one-fourth img {
	width: 100%;
}















.coming_soon {
	text-align: center;
}

.coming_soon img {
	margin: auto;
	width: 100%;
	max-width: 1000px;
}

.contact_pic {
	padding: 30px 50px 0px;
	color: #FFFFFF;
	text-align: right;
	/* min-height: 400px; */
}


/* -- CONTACT FORM -- */

form {
	margin: 10px auto;
	/* width: 50%; */
	align-items:start;
	align-content: end;
}

input[type=text] {
	width: 100%;
	padding: 12px;
	margin: 10px 0;
	box-sizing: border-box;
}

input[type=email] {
	width: 100%;
	padding: 12px;
	margin: 10px 0;
	box-sizing: border-box;
}

textarea {
	width: 100%; /* Makes the textarea span the full width of its container */
	height: 150px; /* Sets the initial visible height */
	padding: 12px; /* Adds space between text and border */
	box-sizing: border-box; /* Ensures padding/border are included in the width/height calculation */
	border: 2px solid #ccc; /* Adds a border */
	border-radius: 4px; /* Rounds the corners */
	background-color: #f8f8f8; /* Sets the background color */
	font-size: 16px; /* Sets the text size */
	font-family: sans-serif; /* Changes the default fixed-width font */
}

button {
	background-color: #044caa;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px; /* Sets the text size */
	font-family: sans-serif; /* Changes the default fixed-width font */
	/* width: 100%; */
	margin: auto;
}

button:hover {
  	background-color: #45a049;
}

label {
	width: 150px; /* Aligns all input boxes vertically */
	text-align: center;
	margin-right: 10px;
	font-weight: bold;
	font-size: 140%;
}

/* reCAPTCHA badge styling */

.grecaptcha-badge {
    z-index:999;
}

/* Flexbox container for the stock image and overlay image */

.flex-container {
	display: flex; /* Aligns children horizontally */
	gap: 10px; /* Sets space between columns */
}


.stock-image-container {
	position: relative;
	width: 200px;
	margin: 30px 10px 30px 10px;
	border-radius: 8px;      
	background-color: #ffffff;
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 10px;
}

.stock-image-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
}

.overlay-image {
	position:absolute;
	top: 10px;
	/* left: 0; */
	opacity: 0;
	transition: opacity 0.3s ease;
}

.stock-image-container:hover .overlay-image {
  	opacity: 1;
}

.catalog-container{
	display: flex;
	justify-content: center;
	background-color: #000000;
}

.text-container {
	padding: 20px;
	background-color: #f9f9f9;
	border-radius: 8px;     
	width:200px;
}

.text-container h1 {
	font-size: 2em;
}


.button-62 {
	background: linear-gradient(to bottom right, #EF4765, #FF9A5A);
	border: 0;
	border-radius: 12px;
	color: #FFFFFF;
	cursor: pointer;
	display: inline-block;
	font-family: -apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 2.5;
	outline: transparent;
	padding: 0 1rem;
	text-align: center;
	text-decoration: none;
	transition: box-shadow .2s ease-in-out;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	white-space: nowrap;
}

.button-62:not([disabled]):focus {
  	box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(239, 71, 101, 0.5), .125rem .125rem 1rem rgba(255, 154, 90, 0.5);
}

.button-62:not([disabled]):hover {
  	box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(239, 71, 101, 0.5), .125rem .125rem 1rem rgba(255, 154, 90, 0.5);
}

.row-container {
	display: flex;
	justify-content: center;
};

.img-container {
	width: 100px; /* Set your desired size */
	height: 200px;
	overflow: hidden; /* Clips the image when it expands */
	border-radius: 8px;
}

.img-container img {
	width: 25%;
	height: 25%;
	object-fit: cover;
	transition: transform .3s ease; /* Smooths the zoom */
}

.img-container:hover img {
 	transform: scale(1.5); /* 20% zoom */
}


/* Image Zoom Styles */

.imageZoom {
    background-repeat: no-repeat;
    border: 1px solid #000000;
    cursor: zoom-in;
}

.imageZoom img {
    object-fit: contain;
    background-color: #000;
	
}

.imageZoom:hover {
    border: 2px solid #aaa;
	
}

.imageZoom:hover img {
    opacity: 0;
}

/* Set Image/Preview Dimensions Here */

.imageZoom, .imageZoom img {
    width: 400px;
    height: 600px;
}



.details {
	margin: 0em 1em;
	color: #fff;
}

/* Code for catalog grid*/

.catalog-grid{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}


@media (max-width: 768px) {
    .imageZoom, .imageZoom img {
        width: 200px;
        height: 300px;
    }
}

/* Small Phone View */

@media (max-width: 390px) {
	.intro p, .our_story p, .contact p, .details p  {
		font-size: 450%;
	}

	.details h1 {
		font-size: 600%;
	}
	.details h2 {
		font-size: 510%;
	}

	.footer_text p {
		font-size: 400%;
	}

	
	.text-container p {
		font-size: 400%;
	}
	.text-container h1 {
		font-size: 420%;
	}
	.text-container h2 {
		font-size: 380%;
	}

	.cover_pic h1 {
		font-size: 600%;
		margin-top: 0.5em;
	}

	.cover_pic h2 {
		font-size: 500%;
	}

	.contact_label h1 {
		font-size: 400%;
		clear: left;
	}

	.style-nav ul li a {
		font-size: 400%;
	}
}

/*Large Phone View*/

@media (min-width: 391px){
	.intro p, .our_story p, .contact p, .details p  {
		font-size: 320%;
	}

	.details h1 {
		font-size: 450%;
	}
	.details h2 {
		font-size: 380%;
	}

	.footer_text p {
		font-size: 400%;
	}

	
	.text-container p {
		font-size: 300%;
	}
	.text-container h1 {
		font-size: 320%;
	}
	.text-container h2 {
		font-size: 280%;
	}

	.cover_pic h1 {
		font-size: 500%;
		margin-top: 0.5em;
		clear: left;
	}

	.cover_pic h2 {
		font-size: 400%;
	}

	.contact_label h1 {
		font-size: 300%;
		clear: left;
	}

	.style-nav ul li a {
		font-size: 250%;
	}
}		


/*Small Tablet View*/

@media (min-width: 768px){
	.intro p, .our_story p, .contact p, .details p  {
		font-size: 260%;
	}

	.details h1 {
		font-size: 360%;
	}
	.details h2 {
		font-size: 300%;
	}
	
	.footer_text p {
		font-size: 260%;
	}

	
	.text-container p {
		font-size: 200%;
	}
	.text-container h1 {
		font-size: 220%;
	}
	.text-container h2 {
		font-size: 180%;
	}

	.cover_pic h1 {
		font-size: 400%;
		margin-top: 5em;
		clear: none;
	}

	.cover_pic h2 {
		font-size: 320%;
	}

	.contact_label h1 {
		font-size: 250%;
		clear: none;
	}

	.style-nav ul li a {
		font-size: 200%;
	}
}



/*Desktop View*/

@media (min-width: 1024px){
	.intro p, .our_story p, .contact p, .details p {
		font-size: 180%;
	}

	.details h1 {
		font-size: 240%;
	}
	.details h2 {
		font-size: 210%;
	}
	
	.footer_text p {
		font-size: 140%;
	}

	.text-container p {
		font-size: 140%;
	}
	.text-container h1 {
		font-size: 140%;
	}
	.text-container h2 {
		font-size: 130%;
	}

	.cover_pic h1 {
		font-size: 320%;
		margin-top: 5em;
	}

	.cover_pic h2 {
		font-size: 250%;
	}

	.contact_label h1 {
		font-size: 200%;
	}

	.style-nav ul li a {
		font-size: 170%;
	}
}

/* Large Desktop */

@media (min-width: 1600px) {
	.intro p, .our_story p, .contact p, .details p  {
		font-size: 140%;
	}

	.details h1 {
		font-size: 200%;
	}
	.details h2 {
		font-size: 170%;
	}
	
	.footer_text p {
		font-size: 140%;
	}

	.text-container p {
		font-size: 140%;
	}
	.text-container h1 {
		font-size: 140%;
	}
	.text-container h2 {
		font-size: 100%;
	}

	.cover_pic h1 {
		font-size: 280%;
	}

	.cover_pic h2 {
		font-size: 230%;
	}

	.contact_label h1 {
		font-size: 170%;
	}

	.style-nav ul li a {
		font-size: 150%;
	}
}