@font-face {
  font-family: 'Helvetica Neue Light';
  src: url('fonts/HelveticaNeueLight.ttf') format('ttf');
  font-weight: 300;
  font-style: normal;
}
/* General reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue Light",sans-serif;
  line-height: 1.6;
  padding-top: 60px; /* To account for sticky menu */
  color: #6d6d6d; /* General text color */
}
p {
margin-bottom: 20px; /* Adds space between paragraphs */
}

h1 {
font-family: "Helvetica Neue Light",sans-serif;
line-height: 1.214;
letter-spacing: -1px;
text-rendering: optimizeLegibility;
font-weight: 300;
clear: both;
margin: 0 0 .5407911001em;
color: #333333;
}

h4{
font-family: "Helvetica Neue Light",sans-serif;
margin-top: 2.2906835em;
color: #333333;
font-size: 1.41575em;
clear: both;
font-weight: 300;
margin: 0 0 .5407911001em;
line-height: 1.618;
text-rendering: optimizeLegibility;
}

.content-wrapper {
  padding-left: 20%; /* Left padding for body content */
  padding-right: 20%; /* Right padding for body content */
  max-width: 100%; /* Ensure content doesn't overflow */
  margin: 0 auto; /* Center the content */
}

/* Sticky Menu Bar */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  color: #6d6d6d;
  z-index: 1000;
  padding: 10px 0; /* Reduced top/bottom padding for the sticky nav */
  display: flex;
  justify-content: space-between; /* Space between logo and links */
  align-items: center; /* Vertically center the content */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a small shadow for better visibility */
  
  padding-left: 20%;  /* 20% from the left */
  padding-right: 20%; /* 20% from the right */
  box-sizing: border-box; /* Ensure padding is included in total width calculation */
}

/* Logo Styles */
nav .logo {
  height: 40px; /* Adjust this to your logo size */
  max-width: 100%; /* Ensure the logo doesn't exceed its container */
}

/* Navigation Links */
nav ul {
  list-style-type: none;
  display: flex; /* Align items in a row */
  gap: 20px; /* Space between links */
  padding: 0; /* Reset any padding */
}

nav ul li {
  display: inline;
}

nav ul li a {
  color: #6d6d6d;
  text-decoration: none;
  font-size: 18px;
  transition: color 0.3s ease; /* Smooth color transition */
}

nav ul li a:hover {
  color: #668000;  /* Change color on hover */
  text-decoration: underline;
}


@media (max-width: 768px) {
  nav {
    padding-left: 5%; /* Reduce padding for smaller screens */
    padding-right: 5%; /* Reduce padding for smaller screens */
  }

  nav ul {
    display: block; /* Stack nav items vertically */
    padding: 20px;
  }

  nav ul li {
    display: block;
    margin-bottom: 10px;
  }
}

/* Sections */
section {
  padding: 80px 20px; /* Padding for sections, 80px top padding for the sticky nav */
  border-bottom: 2px solid #fff;
}

/* Optional section styling */
#home, #about, #services, #contact {
  background-color: #fff;
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

.pub-row {
  display: flex;
  gap: 20px; /* Space between the images */
}

.pub-row img {
  height: 200px; /* Set all images to the same height */
  object-fit: cover; /* Ensure images fill the space properly */
  border-radius: 3px;
}

.pub-row img:hover {
  transform: scale(1.1); /* Slightly scale the image on hover */
  opacity: 0.3;
}

.profile-image {
    align-items: center; /* Vertically center the image with text */
    margin-bottom: 10px; /* Optional space below the image */
    float: right;
}

* {
  box-sizing: border-box;
}

.gallery-container {
  max-width: 1200px;
  margin: 0 auto 325px auto; /* top, right, bottom, left */
}

.responsive {
  padding: 6px;
  float: left;
  width: 24.99999%;
}

.gallery {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery:hover {
  transform: scale(1.05);
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
}

.gallery img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin-bottom: 10px;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.text-image-row {
  display: flex;
  align-items: center; /* vertically center text and image */
  justify-content: space-between; /* adds spacing between text and image */
  gap: 20px; /* optional: space between text and image */
  margin-bottom: 20px;
}

.text-image-row .text {
  flex: 1; /* let text take remaining space */
}

.text-image-row .image img {
  max-width: 300px; /* control image size */
  height: auto;
  display: block;
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
}

.button-container {
  text-align: center;
  margin-top: 10px;
}

.buy-button {
  display: inline-block;
  padding: 10px 20px;
  color: white;
  background-color: #668000;
  text-decoration: none;
  border-radius: 3px;
}

a.buy-button:hover {
  color: white; /* or your button text color */
  background-color: #668000; /* or your button background */
  text-decoration: none; /* disables underline */
  transform: scale(1.05);
}

/* Footer Styles */
footer {
  width: 100%; /* Ensure footer spans 100% width */
  text-align: center;
  padding: 10px;
  background-color: #f0f0f0;
  color: #6d6d6d; /* Footer text color */
  font-size: 14px;
  position: relative; /* Make sure it doesn't overlap other content */
  left: 0; /* Align footer with the left edge */
}

.footer-links {
  display: flex;
  justify-content: center; /* Center the links */
  gap: 20px; /* Space between links */
}

.footer-links a {
  color: #6d6d6d;
  text-decoration: none;
}

.footer-links a:hover {
  color: #6d6d6d;
  text-decoration: underline;
}

/* Content Links (inside sections) */
a {
  color: #333333; /* Default text color for links in content */
  text-decoration: none; /* No underline by default */
  transition: color 0.3s ease; /* Smooth color transition */
}

a:hover {
  color: #668000; /* Change color to green on hover */
  text-decoration: underline; /* Underline on hover */
}
/* styles for 404 page */
.text {flex: 1; min-width: 300px; max-width: 500px;
}
.image {flex: 1; min-width: 300px; max-width: 500px; text-align: center;
}
img{max-width:100%; height:auto;
}
.content{height:100%; padding: 40px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px;
}