body {
  font-family: 'Poppins', 'Lato', sans-serif;
  margin: 0;
  padding: 0;
  color: #000000;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 1rem 3rem;
  top: 0;
}
nav img {
  height: 36px;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}
nav ul li a {
  text-decoration: none;
  color: #000000;
  font-weight: 600;
}
nav ul li a:hover {
  color: #3f97ee;
}
.hero {
  position: relative;
  height: 90vh;
  background: url('background.png') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
}
.hero-content h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
}
.hero-content span {
  color: #77cfdd;
}
/* Unique hero image for the Products page */
.products-page .hero {
  background: url('scope.png') center/cover no-repeat;
}
.products-page .hero h1 {
  position: relative;
  z-index: 1;
  font-size: 5rem;
  font-weight: 800;
  color: #77cfdd;
  letter-spacing: 1px;
  text-align: center;
}
.dark-section {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 5rem 3rem;
  font-size: 1;
}
.dark-section span {
  color: #77cfdd;
}
.products {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 3rem 1rem;
  text-align: center;
}
.product-card img {
  width: 200px;
  height: 200px;
  background: #eee;
  display: block;
  border-radius: 8px;
  margin: 0 auto;
}
footer {
  background: #fff;
  border-top: 1px solid #eee;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer a {
  color: #77cfdd;
  text-decoration: none;
}

/* =====================
   PRODUCT SECTIONS (NEW)
===================== */
.product-section {
  padding: 4rem 6%;
}
.product-section.light {
  background: #fff;
  color: #000000;
}
.product-section.dark {
  background: #333;
  color: #fff;
}
.product-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
}
.product-image {
  flex: 1 1 350px;
  text-align: center;
}
.product-image img {
  width: 300px;
  height: auto;
  padding: 2rem;
}
.product-image h2 {
  margin-top: 1rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: #000000;
}
.product-section.dark .product-image h2 {
  color: #3f97ee;
}
.product-text {
  flex: 2 1 600px;
}
.product-text ul {
  list-style: none;
  padding: 0;
  line-height: 1.8;
  font-weight: 500;
}
/* Indent nested lists inside product descriptions */
.product-text ul ul {
  margin-left: 2rem;   /* pushes the inner list inward */
  padding-left: 1rem;  /* adds extra space between bullets and text */
}
.product-text li {
  list-style-position: outside;
  padding-left: 0.5rem;
  text-indent: -0.5rem; /* keeps wrapped lines aligned under the text, not the bullet */
  margin-bottom: 1rem;
}
.product-text li::before {
  content: "• ";
  color: #3f97ee;
  font-weight: bold;
}

/* =====================
   RESPONSIVE DESIGN
===================== */
@media (max-width: 900px) {
  .product-content {
    flex-direction: column;
    text-align: center;
  }
  .product-image img {
    width: 250px;
    padding: 1rem;
  }
}


.about-page .hero-content span {
  color: #3f97ee;
}

/* Biography Section */
.bio-section {
  background-color: #333;
  color: #fff;
  padding: 4rem 15%;
  text-align: left;
}

.bio-section span {
  color: #77cfdd;
}

.bio-section p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

/* Responsive Adjustments */
@media (max-width: 900px) {
  .about-page .hero-content h2 {
    font-size: 1.5rem;
  }
  .bio-section {
    padding: 3rem 10%;
  }
}

/* Responsive layout for smaller screens */
@media (max-width: 900px) {
  .bio-container {
    flex-direction: column;
    text-align: center;
  }

  .bio-image img {
    max-width: 280px;
  }

  .bio-text {
    text-align: left;
  }
}
/* =====================
   ABOUT PAGE - QUANTUM STYLE LAYOUT
===================== */

.about-intro {
  text-align: center;
  padding: rem 10%;
  color: #000;
}

.about-intro h1 {
  font-size: 2.4rem;
  color: #3f97ee;
  font-weight: 700;
  margin-bottom: 1rem;
  
}

.about-intro p {
  font-size: 1rem;
  max-width: 850px;
  margin: 0 auto;
  line-height: 1.8;
  color: #000000;
}

/* Vision & Mission - Side by Side */
.vision-mission {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 5rem;
  flex-wrap: wrap;
  padding: 4rem 10%;
  background: #fff;
  text-align: center;
}

.vision-mission div {
  flex: 1 1 350px;
  max-width: 450px;
}

.vision-mission h2 {
  color: #3f97ee;
  font-size: 2.4rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.vision-mission p {
  font-size: 1rem;
  color: #000000;
  line-height: 1.8;
}

/* Leadership / Governance Section */
.leadership {
  text-align: center;
  color: #000;
  padding: rem 10%;
}

.leadership h2 {
  color: #3f97ee;
  font-size: 2.4rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.leadership p {
  font-size: 1rem;
  max-width: 900px;
  margin:  auto;
  line-height: 1.8;
  color: #000000;
}

/* Responsive Design */
@media (max-width: 900px) {
  .about-intro {
    padding: 4rem 8%;
  }

  .about-intro h1 {
    font-size: 2rem;
  }

  .vision-mission {
    flex-direction: column;
    gap: 3rem;
    padding: 4rem 8%;
  }

  .vision-mission h2 {
    font-size: 2rem;
  }

  .leadership h2 {
    font-size: 2rem;
  }
}
.sf-products {
  padding: 80px 20px;
  background: #ffffff;
  color: #000;
  text-align: center;
  font-family: "Inter", sans-serif;
}

.sf-header h1 {
  font-size: 2.6rem;
  margin-bottom: 10px;
}

.sf-header p {
  font-size: 1.2rem;
  opacity: 0.8;
  margin-bottom: 60px;
}

/* --- WHEEL LAYOUT -------------------------------------------------- */

.sf-wheel-container {
  position: relative;
  width: 700px;
  height: 700px;
  margin: 0 auto 80px auto;
}

.sf-wheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3f97ee;
  color: white;
  border-radius: 50%;
  padding: 40px;
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #3f97ee;
}

.sf-wheel-center h2 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.sf-wheel-item {
  position: absolute;
  background: #3f97ee;
  padding: 20px;
  width: 180px;
  height: 180px;
  border-radius: 20px;
  border: 1px solid #3f97ee;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .sf-wheel-item:hover {
    transform: scale(1.03); /* subtle hover */
  }

/* Position items in a circular layout */
.item1 { top: -5%; left: 50%; transform: translate(-50%, 0); }
.item2 { top: 10%; right: 0; transform: translate(0, 0); }
.item3 { top: 58%; right: 0; transform: translate(0, 0); }
.item4 { bottom: -5%; left: 50%; transform: translate(-50%, 0); }
.item5 { top: 58%; left: 0; transform: translate(0, 0); }
.item6 { top: 10%; left: 0; transform: translate(0, 0); }
.item1:hover, .item4:hover {
  transform: translate(-50%, 0) scale(1.03);
}
.sf-wheel-item h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.sf-wheel-item p {
  font-size: 0.9rem;
  opacity: 1;
}

/* Summary text */
.sf-summary {
  max-width: 700px;
  margin: 0 auto;
}

.sf-summary h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
}

.sf-summary p {
  font-size: 1.1rem;
  opacity: 1;
}
.item1, .item2, .item3, .item4, .item5, .item6 {
  color: white;
}
.brand-name {
  font-family: 'Fahkwang', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;  /* adjust to match your design */
  letter-spacing: 0.5px;
}
body, html {
  min-width: 1200px !important;
  overflow-x: scroll;
}