@charset "UTF-8";
@import url("../webfonts/Futura/stylesheet.css");

/* Import Futura Font */
@font-face {
  font-family: "FuturaPTBold";
  src: url("../font/FuturaPTBold/font.woff2") format("woff2"),
       url("../font/FuturaPTBold/font.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap; /* Ensures smooth font swapping */
}

/* Loading Screen */

/* Preloader Styles */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black; /* Change background color if needed */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1; /* Start fully visible */
    transition: opacity 1s ease-out; /* Smooth fade effect */
}

#preloader img {
    width: 100vw; /* Full width */
    height: 100vh; /* Full height */
    object-fit: cover; /* Ensure image fills the screen without distortion */
}


/* Loading Screen */

/* Default font before Futura loads */
body {
  font-family: sans-serif; /* Fallback font */
}

/* Apply FuturaPTBold only when it has loaded */
.FuturaPTBold, .futura-loaded body {
  font-family: "FuturaPTBold", sans-serif;
}

/* Global Styles */
body {
  -webkit-font-smoothing: antialiased; /* Makes fonts smoother in Safari */
  -moz-osx-font-smoothing: grayscale;  /* Ensures smoothness on Firefox */
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  background-color: #DFDCDC;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  color: blue;
  text-decoration: none;
}
/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background-color: #DFDCDC;
  font-size: 48px;
  color: #CCCC33;
  text-transform: uppercase;
  letter-spacing: 10px;
  z-index: 1000; /* Keep header on top */
  padding: 50px;
  box-sizing: border-box; /* Ensure padding doesn't affect layout */
  line-height: 1.2;
}

.header h1 {
  line-height: 1.0;
  font-size: 96px; /* Ensure base size is set */
}

/* Spacer */
.spacer {
  height: 300px;
  background-color: transparent;
}

/* Content wrapper */
.content-wrapper {
  padding-top: 0px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  min-height: 100vh;
}

/* Grid Container */
.container-fluid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  justify-items: center;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px;
}

.img-fluid {
  width: 100%;
  max-width: 400px;
  height: auto;
}

/* Full-Width Image Container */
.container-fluid-single {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0px;
	overflow: hidden; /* Prevents cropping */
	
}

.container-fluid-single img {
  max-width: 100%;
  height: auto; /* Maintains original aspect ratio */
  display: block; /* Avoids extra spacing below images */
	
}

.two-images {
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

/* Two-Images container */
.two-images {
	background-color: #1a1a1a; /* Background applied only to these divs */
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

/* Ensure both images scale equally */
.two-images img {
    width: 100%; /* Make images responsive */
    height: auto; /* Keep aspect ratio */
    flex: 1; /* Both images take equal space */
    max-width: 540px; /* Prevent them from getting too large */
}

/* Footer */
.footer {
  font-family: "FuturaPTBold", sans-serif; /* Apply Futura font to footer */
  font-weight: bold; /* Optional, if you want to emphasize the text */
  text-align: left;
  padding: 20px;
  width: 100%;
  position: relative;
  color: #333;
  font-size: 11px;
  /* Ensure text color contrasts with the background */
}

@media (max-width: 1024px) {
  .container-fluid img,
  .container-fluid-single img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain; /* Ensures the image fits without cropping */
  }
}

@media (max-width: 768px) {
  .container-fluid {
    grid-template-columns: 1fr 1fr; /* Two equal columns */
  }
	
	    .two-images {
        flex-direction: column; /* Stack images */
        align-items: center; /* Center them */
    }

		.header h1 {
  line-height: 1.0;
  font-size: 98px; /* Ensure base size is set */
}
	
	
  .container-fluid img,
  .container-fluid-single img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
}

@media (max-width: 600px) {
  .container-fluid {
    grid-template-columns: 1fr; /* Single column layout */
  }

	.spacer {
  height: 190px;
  background-color: transparent;
}
	
	.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background-color: #DFDCDC;
  font-size: 48px;
  color: #CCCC33;
  text-transform: uppercase;
  letter-spacing: 10px;
  z-index: 1000; /* Keep header on top */
  box-sizing: border-box; /* Ensure padding doesn't affect layout */
  line-height: 1.2;
}
	
	.header h1 {
  line-height: 1.0;
  font-size: 50px; /* Ensure base size is set */
}
	
  .container-fluid img,
  .container-fluid-single img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }
	
	
}