/* Basic reset and typography */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;  /* default text color */
  background-color: #FFFFFF;  /* use white or a very light gray as general background for readability */
}
h1, h2, h3 {
  font-weight: 600;
  /* Heading colors might use a dark gray or black for contrast */
  color: #111;
}
h1 { font-size: 2em; margin-bottom: 0.5em; }
h2 { font-size: 1.5em; margin-bottom: 0.5em; margin-top: 1.5em; }
h3 { font-size: 1.2em; margin-bottom: 0.3em; }

/* Links and Buttons */
a {
  color: #333;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.cta-button {
  display: inline-block;
  background-color: #FFD600; /* vibrant yellow for primary CTA */
  color: #000;
  padding: 0.75em 1.5em;
  margin: 0.5em;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  text-align: center;
}
.cta-button.outline {
  background-color: transparent;
  color: #FFD600;
  border: 2px solid #FFD600;
}
.cta-button:hover {
  background-color: #FFC107; /* slightly darker yellow on hover */
  color: #000;
}

/* Top contact bar */
.top-contact-bar {
  background-color: #333;
  color: #fff;
  text-align: center;
  font-size: 0.9em;
  padding: 0.5em;
}
.top-contact-bar a {
  color: #FFD600;
}
.top-contact-bar span {
  margin: 0 1em;
}

/* Hero Section */
.hero-section {
  background: url('banner.jpg') no-repeat center center/cover;  /* placeholder background image */
  background-color: #FFD600; /* Fallback or overlay of theme color if image doesn't load */
  color: #000;
  text-align: center;
  padding: 4em 1em;
}
.hero-section .hero-content {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.8); /* translucent white overlay for readability of text if on image */
  padding: 2em;
  border-radius: 8px;
}
.hero-section .tagline {
  font-size: 1.2em;
  margin-bottom: 1em;
}
.hero-section .cta-button {
  font-size: 1em;
}

/* Content Sections (Benefits, Advantages, etc.) */
.content-section {
  max-width: 800px;
  margin: 2em auto;
  padding: 1em 1.5em;
}
.content-section:nth-of-type(even) {
  background-color: #f9f9f9; /* slight gray background on alternate sections for contrast */
}
.content-section p {
  margin-bottom: 1em;
}
.content-section ul {
  margin-bottom: 1em;
  padding-left: 1.2em;
}
.content-section li {
  margin: 0.5em 0;
}
.content-section li strong {
  color: #000; /* make the label text black for emphasis */
}

/* Influencer & Brand Sections (could have unique styling if needed) */
.influencer-section {
  /* We can use same styling as .content-section, but maybe add a slight yellow border or icon */
  border-left: 4px solid #FFD600;
}
.brand-section {
  border-left: 4px solid #FFD600;
}

/* Forms styling */
.form-container {
  background-color: #fffbea; /* very light yellow background for form container to make it stand out */
  padding: 1em;
  margin-top: 1em;
  border: 1px solid #f0e68c;
  border-radius: 5px;
}
.form-container h3 {
  margin-bottom: 0.5em;
  font-size: 1.2em;
}
.form-group {
  margin-bottom: 0.8em;
}
.form-group label {
  display: block;
  margin-bottom: 0.3em;
}
.form-group input, .form-group textarea {
  width: 100%;
  padding: 0.5em;
  font: inherit;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.form-group input:focus, .form-group textarea:focus {
  border-color: #FFD600;
  outline: none;
}
.submit-button {
  background-color: #FFD600;
  color: #000;
  font-weight: bold;
  padding: 0.6em 1.2em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.submit-button:hover {
  background-color: #FFC107;
}
.form-note {
  font-size: 0.9em;
  color: #555;
  margin-top: 0.5em;
}

/* FAQ Section */
.faq-section {
  max-width: 800px;
  margin: 2em auto;
  padding: 1em 1.5em;
}
.faq-section .faq-item {
  margin-bottom: 1em;
}
.faq-section .faq-question {
  cursor: pointer;
  background-color: #FFD600;
  color: #000;
  padding: 0.5em;
  border-radius: 3px;
}
.faq-section .faq-answer {
  display: none;  /* hidden by default, shown on toggle via JS */
  background-color: #fff;
  padding: 0.5em;
  border: 1px solid #eee;
  margin-top: 0.2em;
  border-radius: 3px;
}
.faq-section .faq-answer p {
  margin: 0.5em 0;
}

/* Footer */
.footer-section {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1.5em 1em;
}
.footer-section a {
  color: #FFD600;
}

/* Responsive Media Queries */
@media (max-width: 600px) {
  .hero-section .hero-content {
    padding: 1.5em;
  }
  .hero-section h1 {
    font-size: 1.5em;
  }
  .hero-section .tagline {
    font-size: 1em;
  }
  .cta-button {
    display: block;
    margin: 0.5em auto;
    width: 80%;
  }
  .content-section {
    padding: 1em;
  }
  .benefits-list, .advantages-list, .whyus-list, .influencer-benefits, .brand-benefits {
    padding-left: 1em;
  }
}