BODY {
  /* Background image setup */
  /* background-image: url('images/chem&lubs.png'); Update this path to your image */
  background-size: 400px 200px;                /* Covers entire viewport */
  background-position: center center;    /* Centers the image */
  background-repeat: no-repeat;         /* Prevents image tiling */
  background-attachment: fixed;         /* Keeps image fixed while scrolling */
  
  /* Add a slight overlay to ensure text remains readable */
  background-color: rgba(255, 255, 255, 0.993); /* Semi-transparent light background */
  
  /* Keep existing styles */
  font-family: 'Verdana', sans-serif;
  margin: 0;
  padding: 0;
  color: rgb(9, 9, 9);
  
  /* Ensure the page takes full height */
  min-height: 100vh;
}

H1, H2, H3, H4, H5, H6 {
color: #54c46d; font-family: 'Verdana', sans-serif; 
}

p {
line-height: 1.6; font-family: verdana; /* Improved line spacing for readability */
}

.container {
  position: relative;
  justify-content: center;
/*max-width: 1200px; /* Maximum width for container */
margin: 20px; /* Centering the container */
/*padding: 0px; /* Adding padding around the container */
top: 200px;

}

/*
.containerimg {
  width: 1000px;
  margin: 20px;
  padding: 20px;
  text-align: center;
  background-color: #fbfbfa;
  padding: 0px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  top: 500;
  left: 0;
}*/
.container_right {
  position: fixed;
  top: 10px;
  right: 0px;
  width: 350px;     /* Adjust as needed */
  height: 100px;    /* Adjust as needed */
  background-color: #fbfbfa; /* Just for visibility */
  padding: 10px;
  box-shadow: 0 0 0px rgba(0,0,0,0.3);
}


.container_left1 {
  position: fixed;
  top: 0px;
  left: 20px;
  width: 100px;     /* Adjust as needed */
  height: 100px;    /* Adjust as needed */
  background-color: #fbfbfa; /* Just for visibility */
  padding: 10px;
  box-shadow: 0 0 0px rgba(0,0,0,0.3);
} 

.container_left2 {
  position: fixed;
  top: 130px;
  left: 20px;
  width: 180px;     /* Adjust as needed */
  height: auto;    /* Adjust as needed */
  background-color: #fefefc; /* Just for visibility */
  padding: 0px;
  box-shadow: 0 0 0px rgba(116, 42, 42, 0.3);
} 
.container_left {
  position: fixed;
  top: 10px;
  left: 0px;
  width: 350px;     /* Adjust as needed */
  height: 200px;    /* Adjust as needed */
  background-color: #fbfbfa; /* Just for visibility */
  padding: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  max-width: 100px;
  height: auto;
}

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

button {
  background-color: #54c46d; /* Matches your heading color */
  color: white;
  border: none;
  padding: 10px 20px;
  margin: 10px;
  font-size: 16px;
  font-family: 'Verdana', sans-serif;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #3da956; /* Slightly darker on hover */
}

/* position nav near the Atom Chemicals block (to the right of the name/logo) */
nav {
  position: fixed;
  top: 120px; /* align with .container_left2 */
  left: 210px; /* adjust to move closer/further from the name/logo */
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  z-index: 1000;
}

.email-button {
  background-color: #54c46d; /* Green tone matching your theme */
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  font-family: 'Verdana', sans-serif;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.email-button:hover {
  background-color: #3da956; /* Slightly darker green on hover */
}

.homepage-image {
  width: 100%;
  max-width: 1000px;
  height: 500px;
  display: block;
  top:350px;
  /*margin: 0 auto 20px auto; /* Center and add spacing below */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Optional: subtle shadow */

}

.bgimage{
  background-image: url('chem.png'); /* Replace with your image path */
  background-size: contain;                  /* Cover entire screen */
  background-repeat: no-repeat;            /* Prevent tiling */
  background-position: center;      /* Center the image */
  background-attachment: fixed;            /* Optional: keeps image fixed on scroll */
  font-family: 'Verdana', sans-serif;
  margin: 0;
  padding: 0;
  color: rgb(9, 9, 9);
  
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns */
  gap: 16px; /* spacing between images */
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.image-grid img {
  width: 100%;
  height: auto;
  border-radius: 8px; /* optional: curved edges */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* optional: subtle shadow */
}