* { box-sizing: border-box; margin: 0; padding: 0; }
/* Add backdrop.png to the body class but give it a white overlay to make the background bright*/
body {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh; /* ensures full viewport coverage */
  background: 
    linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),
    url('backdrop.png') center 65%/cover no-repeat;
  color: #1f2937;
  line-height: 1.6;
}

header { background: #111827; padding: 16px; }
header nav { display: flex; justify-content: center; gap: 20px; }
header nav a { color: #fff; text-decoration: none; font-weight: 600; }
header nav a:hover { text-decoration: underline; }
main { max-width: 1000px; margin: 40px auto; padding: 0 20px; }
h1, h2, h3 {
  font-weight: 800;
}
p {
  font-weight: 500;
  margin-bottom: 16px; color: #374151;
}
ul { margin-left: 20px; margin-bottom: 16px; }
footer {
  background: transparent;
  text-align: center;
  padding: 20px;
  font-size: 14px;
  color: #6b7280;
  margin-top: 40px;
}
footer a { color: #2563eb; text-decoration: none; }
footer a:hover { text-decoration: underline; }
.btn { display: inline-block; background: #2563eb; color: #fff; padding: 10px 20px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: background 0.2s; }
.btn:hover { background: #1e40af; }

/* Hero Banner */
.hero {
  position: relative;
  background: url('hero-banner.png') center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 90px 50px; /* even shorter hero banner */
}

/*.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.65); 
}*/
/*.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at center,
      rgba(255, 255, 255, 0.08) 0%,   /* lighter touch *//*
      rgba(17, 24, 39, 0.7) 75%       /* fades softly *//*
    ),
    rgba(17, 24, 39, 0.65);           /* base overlay *//*
}*/



.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  /* Remove background and box-shadow */
  background: none;
  border-radius: 0;
  padding: 32px 24px;
  color: #1f2937; /* dark text for readability */
}

.hero-logo {
  max-width: 500px;
  width: 40%;       /* responsive scaling */
  height: auto;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: 52px;
  margin-bottom: 20px;
  font-weight: 700;
}

.hero p {
  font-size: 20px;
  margin-bottom: 30px;
  color: #1f2937; /* dark text for readability */
}

.bodyimg {
  max-width: 1080px;
  width: 60%;
  height: auto;
  margin-bottom: 20px;
}

.products-list { list-style: none; padding: 0; }
.products-list li { margin-bottom: 30px; padding: 20px; background: #f3f4f6; border-radius: 10px; }
.products-list h3 { margin-bottom: 10px; }

.intro {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.85) 60%,
    rgba(255,255,255,0.0) 100%
  );
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}