html{
  scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    /* Padding top to prevent content from being hidden behind the fixed header */
    padding-top: 0rem; /* Adjust based on your header's height */
    background-color: #e4e9ee;
    color: #333;
}

.imageTextCenter{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.textOverImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* You might adjust this height for responsiveness */
  /* Or use a responsive height like: height: 35vh; (35% of viewport height) */
  overflow: hidden; /* Important to clip parts of the image that go beyond the container */
  display: block; /* Use flexbox to easily center text if preferred */
  justify-content: center; /* Center text horizontally */
  align-items: center; /* Center text vertically */
}

.textOverImage img {
  filter: brightness(60%);
  width: 100%;
  height: 100%;
  object-fit: cover; /* This makes the image fill the container, maintaining aspect ratio */
  /* *** THE KEY IS HERE *** */
  object-position: top; /* Ensures the top part of the image is prioritized and always visible */
  display: block; /* Removes any default bottom margin */
        }

section {
    min-height: 70vh; /* Make sections tall enough to necessitate scrolling */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0rem 0rem;
    text-align: center;
    
}

.home-section {
  margin-bottom: 0px;
  padding: 0;
}

header {
  border-bottom: 1px solid #222;
  margin-bottom: 1rem;
}

section:last-child {
    border-bottom: none; /* No border for the last section */
}
/* Specific background colors for each section */
#home { background-color: #e4e9ee; }
#aboutUs { background-color: #e4e9ee; }
#brands { 
  background-color: #809ab4;
  padding-top: 50px;
}
#contact { background-color: #e4e9ee; }

footer {
  border-top: 1px solid #222;
  margin-top: 1rem;
}

a {
  color: #00e;
  text-decoration: none;
}

.about-section {
  margin-top: 20px;
}