/*
  ---------------------------------------------------------------------------
  EB1 Mentor – Global Stylesheet

  This stylesheet defines the visual language for the EB1 Mentor website.
  The design takes inspiration from high‑end mentorship and consulting sites
  like EB1AExperts.com and tailors it to an elite but clean look. It
  leverages modern CSS features such as flexbox, CSS variables, and
  responsive media queries to create an adaptable layout that feels both
  sophisticated and approachable.
  ---------------------------------------------------------------------------
*/

/* Root variables for colors and typography */
:root {
  --color-primary: #004173; /* deep blue for professionalism */
  --color-secondary: #006fa6; /* slightly lighter blue for accents */
  --color-accent: #00a8c6; /* turquoise accent */
  --color-background: #f9fbfd; /* light grey background */
  --color-text: #333; /* primary text color */
  --color-muted: #666; /* muted text color */
  --color-card-background: #ffffff; /* card background */
  --color-footer-bg: #011f40; /* dark footer background */
  --color-footer-text: #c8d6e5; /* light footer text */
  --font-title: "Montserrat", sans-serif;
  --font-body: "Open Sans", sans-serif;
  --border-radius: 8px;
  --transition-speed: 0.3s ease;
}

/* CSS reset & global styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-background);
  line-height: 1.6;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-speed);
}

a:hover, a:focus {
  color: var(--color-secondary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  color: var(--color-primary);
  line-height: 1.2;
  margin-bottom: 0.5em;
}

/* Utility classes */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
  transition: background var(--transition-speed), transform var(--transition-speed);
}

.btn-primary {
  background-color: var(--color-secondary);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--color-primary);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* Header and Navigation */
.site-header {
  background-color: #fff;
  border-bottom: 1px solid #e6eef5;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Mobile nav toggle button */
.mobile-nav-toggle {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-primary);
  background: none;
  border: none;
}

/* Responsive navigation */
@media (max-width: 768px) {
  .main-nav ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-speed) ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  }
  .main-nav ul.open {
    max-height: 600px; /* Enough to show all items */
  }
  .main-nav > ul > li {
    width: 100%;
  }
  .main-nav > ul > li > a {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border-top: 1px solid #e6eef5;
  }
  /* Collapse dropdown menus on mobile by default */
  .dropdown-menu {
    display: none;
    position: static;
    transform: none;
    border: none;
    box-shadow: none;
    padding-left: 1.5rem;
    margin: 0;
    background: none;
  }
  .dropdown.open > .dropdown-menu {
    display: block;
  }
  .dropdown-menu li a {
    padding: 0.5rem 0;
  }
  .mobile-nav-toggle {
    display: block;
  }
  .nav-container {
    position: relative;
  }
  /* Hide CTA buttons inside collapsed menu; they will appear as normal items */
  .main-nav ul li .cta-nav,
  .main-nav ul li .cta-secondary-nav {
    width: 100%;
    text-align: center;
    margin: 0.5rem 0;
  }
}

/* Trusted section */
.trusted-section {
  padding: 3rem 0;
  background-color: #f0f5fa;
  text-align: center;
}

.trusted-section img {
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

.trusted-section h3 {
  font-size: 1.5rem;
  color: var(--color-primary);
  font-weight: 600;
}

/* Weekly tips signup */
.weekly-signup-section {
  padding: 4rem 0;
  background-color: #eaf4fb;
  text-align: center;
}

.weekly-signup-section h2 {
  margin-bottom: 1rem;
}

.weekly-signup-section form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.weekly-signup-section input[type="email"] {
  padding: 0.8rem 1rem;
  border: 1px solid #ccd6dd;
  border-radius: var(--border-radius);
  width: 250px;
}

@media (max-width: 480px) {
  .weekly-signup-section input[type="email"] {
    width: 100%;
  }
}

.weekly-signup-section button {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: var(--border-radius);
  background-color: var(--color-secondary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.weekly-signup-section button:hover {
  background-color: var(--color-primary);
}

/* Ebooks cards */
.ebooks-section {
  padding: 4rem 0;
}

.ebook-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.ebook-card {
  background-color: var(--color-card-background);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  flex: 1 1 calc(25% - 2rem);
  min-width: 220px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ebook-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.ebook-card h4 {
  font-size: 1.1rem;
  margin: 0.75rem 1rem 0.5rem;
  color: var(--color-primary);
}

.ebook-card p {
  flex-grow: 1;
  padding: 0 1rem 1rem;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.ebook-card a {
  display: block;
  margin: 0 1rem 1rem;
  padding: 0.6rem 1rem;
  background-color: var(--color-secondary);
  color: #fff;
  text-align: center;
  border-radius: var(--border-radius);
  font-weight: 600;
}

.ebook-card a:hover {
  background-color: var(--color-primary);
}

/* Join community section */
.join-section {
  padding: 4rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}

.join-section .join-image {
  flex: 1 1 50%;
}

.join-section .join-image img {
  width: 100%;
  border-radius: var(--border-radius);
}

.join-section .join-content {
  flex: 1 1 45%;
}

.join-section h2 {
  margin-bottom: 1rem;
}

.join-section p {
  margin-bottom: 1.5rem;
}

.join-section form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.join-section input,
.join-section textarea,
.join-section select {
  flex: 1 1 100%;
  padding: 0.6rem;
  border: 1px solid #ccd6dd;
  border-radius: var(--border-radius);
}

.join-section button {
  padding: 0.8rem 1.5rem;
  background-color: var(--color-secondary);
  color: #fff;
  border: none;
  border-radius: var(--border-radius);
  font-weight: 600;
}

.join-section button:hover {
  background-color: var(--color-primary);
}

/* AI dashboard section */
.ai-section {
  padding: 4rem 0;
}

.ai-section .ai-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.ai-section img {
  width: 100%;
  max-width: 800px;
  margin: 2rem auto;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.ai-features {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}

.ai-feature {
  flex: 1 1 250px;
  background-color: var(--color-card-background);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  text-align: center;
}

.ai-feature i {
  font-size: 2rem;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

.ai-feature h4 {
  margin-bottom: 0.5rem;
}

.ai-feature p {
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* Accordion styles */
.accordion {
  margin: 2rem 0;
}

.accordion-item {
  border-bottom: 1px solid #e6eef5;
}

.accordion-header {
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  cursor: pointer;
  color: var(--color-primary);
}

.accordion-body {
  display: none;
  padding-bottom: 1rem;
  color: var(--color-text);
  font-size: 0.95rem;
}

.accordion-item.open .accordion-body {
  display: block;
}

/* Disclaimer popup */
.disclaimer-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 300px;
  background-color: var(--color-card-background);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius);
  padding: 1rem;
  font-size: 0.85rem;
  z-index: 200;
}

.disclaimer-popup button {
  margin-top: 1rem;
  width: 100%;
  padding: 0.5rem;
  border: none;
  background-color: var(--color-primary);
  color: #fff;
  border-radius: var(--border-radius);
  cursor: pointer;
}

.whatsapp-float {
  position: fixed;
  bottom: 25px;
  left: 20px;
  width: 60px;
  height: 60px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 150;
  font-size: 1.5rem;
}

.whatsapp-float:hover {
  background-color: #1ebe57;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.logo {
  font-family: var(--font-title);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
}

.logo span {
  color: var(--color-accent);
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.main-nav li {
  position: relative;
}

.main-nav > ul > li > a {
  font-size: 1rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
}

.cta-nav {
  background-color: var(--color-primary);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
}

.cta-nav:hover {
  background-color: var(--color-secondary);
  color: #fff;
  text-decoration: none;
}

/* Secondary call-to-action button in navigation (e.g. book consultation) */
.cta-secondary-nav {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  transition: background var(--transition-speed), color var(--transition-speed);
}

.cta-secondary-nav:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* Ensure CTA buttons have extra spacing from regular menu items */
.main-nav ul li a.cta-nav,
.main-nav ul li a.cta-secondary-nav {
  margin-left: 0.5rem;
  white-space: nowrap;
}

/* Override generic anchor hover rules for nav buttons so text does not disappear */
.main-nav a.cta-nav:hover, .main-nav a.cta-secondary-nav:hover {
  color: #fff;
}

/* Dropdown menu */
/* Dropdown menus are hidden by default. They will appear on hover. */
.dropdown-menu {
  display: none;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  background-color: #fff;
  border: 1px solid #e6eef5;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  border-radius: var(--border-radius);
  padding: 0.5rem 0;
  min-width: 180px;
  z-index: 99;
  transform: translateY(10px);
  transition: opacity var(--transition-speed), transform var(--transition-speed), visibility var(--transition-speed);
}

.dropdown-menu li {
  display: block;
}

.dropdown-menu li a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--color-text);
  white-space: nowrap;
}

.dropdown-menu li a:hover {
  background-color: #f2f7fb;
  color: var(--color-primary);
}

/* Show dropdown on hover */
.dropdown:hover > .dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hero Section */
/* Hero Section styles now rely on JS to set background images. */
.hero {
  position: relative;
  height: 80vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: background-image 1s ease-in-out;
}

/* During fade transitions we momentarily reduce opacity */
.hero.fade {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  text-align: left;
}

.hero h1 {
  font-size: 2.8rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

.hero p {
  color: #e2e8f0;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Hero slider controls */
.hero-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 3;
}

.hero-controls .arrow {
  font-size: 1.5rem;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-speed);
}

.hero-controls .arrow:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

.hero-controls .dots {
  display: flex;
  gap: 0.5rem;
}

.hero-controls .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background-color var(--transition-speed);
}

.hero-controls .dot.active {
  background-color: var(--color-accent);
}

/* Sub-hero for inner pages (uses fixed background image set inline in HTML) */
.sub-hero {
  position: relative;
  height: 50vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background-size: cover;
  background-position: center;
  padding-bottom: 3rem;
}

.sub-hero .hero-overlay {
  background: rgba(0, 0, 0, 0.55);
}

.sub-hero .hero-content {
  z-index: 2;
}

/* Evaluation Page Styles */
.evaluation-section {
  padding: 4rem 0;
}

.evaluation-container {
  max-width: 800px;
  margin: 0 auto;
  background-color: var(--color-card-background);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 2rem;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: #e6eef5;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.progress-bar .progress {
  height: 100%;
  width: 0;
  background-color: var(--color-accent);
  transition: width var(--transition-speed);
}

.step {
  display: none;
}

.step.active {
  display: block;
}

.question {
  margin-bottom: 1.5rem;
}

.question label {
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.question input[type="radio"],
.question input[type="checkbox"] {
  margin-right: 0.5rem;
}

.step-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

.step-buttons .btn {
  width: 48%;
}

.result-container {
  text-align: center;
  padding: 2rem 0;
}

.progress-ring {
  --value: 0;
  width: 140px;
  height: 140px;
  margin: 0 auto 1rem auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  background: conic-gradient(var(--color-secondary) calc(var(--value) * 1%), #e6eef5 0);
  transition: background 0.5s ease;
}

.result-message {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  color: var(--color-text);
}

/* Booking Page Styles */
.booking-section {
  padding: 4rem 0;
}

.booking-container {
  max-width: 600px;
  margin: 0 auto;
  background-color: var(--color-card-background);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 2rem;
}

.booking-container form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.booking-container .form-group {
  display: flex;
  flex-direction: column;
}

.booking-container label {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--color-primary);
}

.booking-container input,
.booking-container select,
.booking-container textarea {
  padding: 0.6rem;
  border: 1px solid #ccd6dd;
  border-radius: var(--border-radius);
  font-size: 1rem;
}

.booking-container input:focus,
.booking-container select:focus,
.booking-container textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 2px rgba(0, 111, 166, 0.2);
}

.booking-container textarea {
  min-height: 120px;
  resize: vertical;
}

.booking-container .submit-btn {
  align-self: flex-start;
}

.booking-success {
  text-align: center;
  padding: 2rem;
}

/* Contact Page Styles */
.contact-section {
  padding: 4rem 0;
}

.contact-container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.contact-info {
  flex: 1 1 40%;
}

.contact-form {
  flex: 1 1 55%;
  background-color: var(--color-card-background);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 2rem;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form label {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--color-primary);
}

.contact-form input,
.contact-form textarea {
  padding: 0.6rem;
  border: 1px solid #ccd6dd;
  border-radius: var(--border-radius);
  font-size: 1rem;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 2px rgba(0, 111, 166, 0.2);
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-form .submit-btn {
  align-self: flex-start;
}

/* Services Overview */
.services-overview {
  padding: 4rem 0;
  text-align: center;
}

.services-overview h2 {
  margin-bottom: 2rem;
  font-size: 2rem;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.card {
  background-color: var(--color-card-background);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  padding: 2rem 1.5rem;
  flex: 1 1 calc(33.333% - 2rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.card .icon {
  font-size: 2.5rem;
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.card h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.card p {
  font-size: 0.95rem;
  color: var(--color-muted);
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.card-link {
  font-weight: 600;
  color: var(--color-primary);
  display: inline-block;
  margin-top: auto;
}

.card-link:hover {
  color: var(--color-secondary);
}

/* Why Us Section */
.why-us {
  background-color: #f2f7fb;
  padding: 4rem 0;
}

.why-us h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
}

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.feature-item {
  flex: 1 1 calc(33.333% - 2rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.feature-icon {
  font-size: 2rem;
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.feature-item h4 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.feature-item p {
  font-size: 0.95rem;
  color: var(--color-muted);
}

/* Statistics Section */
.stats-section {
  background-color: var(--color-background);
  padding: 4rem 0;
  text-align: center;
}

.stats-section h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--color-primary);
}

.stats-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.stat {
  background-color: #fff;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  padding: 2rem;
  flex: 1 1 calc(25% - 2rem);
  text-align: center;
}

.stat span {
  display: inline-block;
  font-family: var(--font-title);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-secondary);
}

.stat .suffix {
  font-size: 1.5rem;
  vertical-align: top;
  color: var(--color-secondary);
}

.stat p {
  margin-top: 0.5rem;
  color: var(--color-muted);
  font-weight: 500;
}

/* About Section */
.about-section {
  padding: 4rem 0;
  background-color: #fff;
}

.about-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}

.about-image {
  flex: 1 1 40%;
  text-align: center;
}

.about-image img {
  max-width: 100%;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.about-content {
  flex: 1 1 55%;
}

.about-content h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.about-content p {
  margin-bottom: 1rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.about-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

/* Testimonials Section */
.testimonials-section {
  background-image: url('../assets/images/testimonial.png');
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 4rem 0;
  position: relative;
}

.testimonials-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 0;
}

.testimonials-section h2 {
  position: relative;
  z-index: 1;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
  color: #fff;
}

.testimonials {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius);
  padding: 2rem;
  flex: 1 1 30%;
  backdrop-filter: blur(3px);
  color: #fff;
  max-width: 350px;
}

.testimonial-text {
  font-style: italic;
  margin-bottom: 1rem;
}

.testimonial-author {
  font-weight: 700;
  color: var(--color-accent);
}

/* Why us page */
.why-us-page {
  padding: 4rem 0;
  background-color: #fff;
}

.why-us-page h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--color-primary);
}

.advantages {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.advantage-item {
  background-color: #f7fbff;
  border-radius: var(--border-radius);
  padding: 2rem;
  flex: 1 1 calc(33.333% - 2rem);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  text-align: left;
}

.adv-icon {
  font-size: 2.5rem;
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.advantage-item h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.advantage-item p {
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Resources page */
.resources-page {
  padding: 4rem 0;
  background-color: #fff;
}

.resources-page h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--color-primary);
}

.resource-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}

.resource-card {
  background-color: #f7fbff;
  border-radius: var(--border-radius);
  padding: 1.5rem;
  flex: 1 1 calc(50% - 2rem);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.resource-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.resource-card p {
  color: var(--color-muted);
  margin-bottom: 1rem;
}

/* Case studies page */
.case-studies-page {
  padding: 4rem 0;
  background-color: #fff;
}

.case-card {
  background-color: #f7fbff;
  border-radius: var(--border-radius);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.case-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  color: var(--color-primary);
}

.case-card p {
  color: var(--color-muted);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.case-tags {
  margin-top: 0.5rem;
}

.tag {
  display: inline-block;
  background-color: var(--color-accent);
  color: #fff;
  padding: 0.3rem 0.6rem;
  border-radius: var(--border-radius);
  font-size: 0.8rem;
  margin-right: 0.5rem;
}

/* Page-specific components */

/* Page hero for internal pages like Services and others */
.page-hero {
  position: relative;
  height: 40vh;
  display: flex;
  align-items: center;
  color: #fff;
  background-size: cover;
  background-position: center;
}

.page-hero .hero-overlay {
  background: rgba(0, 0, 0, 0.45);
}

.services-listing .service-item {
  background-color: #fff;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  padding: 2rem;
  margin-bottom: 2rem;
}

.services-listing .service-icon {
  font-size: 2.5rem;
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

/* Service detail pages */
.service-detail {
  padding: 4rem 0;
  background-color: #fff;
}

.service-detail h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--color-primary);
}

.criteria-list {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0 2rem;
}

.criteria-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
  color: var(--color-muted);
}

.criteria-list li::before {
  content: '\f058'; /* font-awesome check-circle icon */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-secondary);
}

.detail-cta {
  margin-top: 2rem;
}

/* Story page */
.story-section {
  padding: 4rem 0;
  background-color: #fff;
}

.story-section h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--color-primary);
}

.story-section p {
  margin-bottom: 1rem;
  color: var(--color-muted);
  line-height: 1.6;
}

/* About page */
.about-page-content {
  padding: 4rem 0;
  background-color: #fff;
}

.about-page-content h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--color-primary);
}

.about-page-content p {
  margin-bottom: 1rem;
  color: var(--color-muted);
  line-height: 1.6;
}

/* CTA Section */
.cta-section {
  padding: 3.5rem 0;
  background-color: var(--color-secondary);
  color: #fff;
  text-align: center;
}

.cta-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

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

.cta-section .btn-secondary {
  border-color: #fff;
  color: #fff;
}

.cta-section .btn-secondary:hover {
  background-color: #fff;
  color: var(--color-primary);
}

/* Footer */
.site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding-top: 3rem;
  font-size: 0.9rem;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.footer-brand {
  flex: 1 1 300px;
}

.footer-logo {
  font-size: 1.5rem;
  color: #fff;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.footer-logo span {
  color: var(--color-accent);
}

.footer-brand p {
  line-height: 1.5;
  margin-top: 0.5rem;
}

.footer-links, .footer-contact {
  flex: 1 1 200px;
}

.footer-links h5, .footer-contact h5 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: #fff;
}

.footer-links ul {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: var(--color-footer-text);
  transition: color var(--transition-speed);
}

.footer-links a:hover {
  color: #fff;
}

.footer-contact p {
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
}

.footer-contact i {
  margin-right: 0.5rem;
}

.social {
  margin-top: 0.5rem;
}

.social a {
  color: var(--color-footer-text);
  margin-right: 0.8rem;
  font-size: 1.2rem;
  transition: color var(--transition-speed);
}

.social a:hover {
  color: #fff;
}

.footer-bottom {
  padding: 1rem 0;
  background-color: #00182f;
  text-align: center;
  color: var(--color-footer-text);
  font-size: 0.8rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .cards, .features {
    flex-direction: column;
  }
  .card, .feature-item {
    flex: 1 1 100%;
  }
  .stats-cards {
    flex-direction: column;
  }
  .stat {
    flex: 1 1 100%;
  }
  .about-container {
    flex-direction: column;
  }
  .about-image, .about-content {
    flex: 1 1 100%;
  }
  .testimonials {
    flex-direction: column;
    align-items: center;
  }
  .testimonial-card {
    max-width: 100%;
  }
  .advantages {
    flex-direction: column;
  }
  .advantage-item {
    flex: 1 1 100%;
  }
  .resource-cards {
    flex-direction: column;
  }
  .resource-card {
    flex: 1 1 100%;
  }
  .hero {
    height: 60vh;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .main-nav ul {
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }
  .main-nav li {
    width: 100%;
  }
  .main-nav > ul > li > a {
    display: block;
    width: 100%;
    padding: 0.75rem 0;
  }
  .dropdown-menu {
    position: static;
    width: 100%;
    box-shadow: none;
    border: none;
    border-top: 1px solid #e6eef5;
  }
  .cta-nav {
    margin-top: 1rem;
  }
  .cards {
    gap: 1.5rem;
  }
  .services-overview {
    padding: 3rem 0;
  }
  .why-us {
    padding: 3rem 0;
  }
  .footer-container {
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .hero {
    height: 50vh;
    background-position: center;
  }
  .hero h1 {
    font-size: 1.75rem;
  }
  .hero p {
    font-size: 0.95rem;
  }
  .btn {
    width: 100%;
    padding: 0.75rem 0;
  }
  .cta-section h2 {
    font-size: 1.5rem;
  }
  .cta-section p {
    font-size: 0.9rem;
  }
}

/* ==============================================
   Additional styles for expanded pages and features
   ============================================== */

/* FAQ page categories grid */
.faq-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin: 2rem 0;
}

.faq-category {
  flex: 1 1 calc(25% - 1.5rem);
  min-width: 140px;
  max-width: 220px;
  background-color: #f7fbff;
  border-radius: var(--border-radius);
  padding: 1rem;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: transform var(--transition-speed);
}

.faq-category:hover {
  transform: translateY(-4px);
}

.faq-category i {
  font-size: 2rem;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

.faq-category span {
  display: block;
  font-weight: 600;
  color: var(--color-primary);
}

/* FAQ accordion */
.faq-section {
  max-width: 800px;
  margin: 2rem auto;
}

/* Weekly tips page */
.tips-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
  line-height: 1.6;
}

.tips-content h3 {
  margin-top: 1.5rem;
  font-size: 1.4rem;
  color: var(--color-primary);
}

.tips-signup {
  margin-top: 2rem;
  padding: 2rem;
  background-color: #f7fbff;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.tips-signup form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}

.tips-signup input[type="text"],
.tips-signup input[type="email"] {
  padding: 0.7rem;
  border: 1px solid #ccd6dd;
  border-radius: var(--border-radius);
  width: 250px;
}

.tips-signup button {
  padding: 0.8rem 1.5rem;
  background-color: var(--color-secondary);
  color: #fff;
  border: none;
  border-radius: var(--border-radius);
  font-weight: 600;
}

.tips-signup button:hover {
  background-color: var(--color-primary);
}

/* Ebooks page */
.ebook-page-description {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.ebook-download-form {
  max-width: 600px;
  margin: 2rem auto;
  background-color: #f7fbff;
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.ebook-download-form h3 {
  margin-bottom: 1rem;
  color: var(--color-primary);
}

.ebook-download-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ebook-download-form input {
  padding: 0.7rem;
  border: 1px solid #ccd6dd;
  border-radius: var(--border-radius);
}

.ebook-download-form button {
  padding: 0.8rem 1.5rem;
  background-color: var(--color-secondary);
  color: #fff;
  border: none;
  border-radius: var(--border-radius);
  font-weight: 600;
  cursor: pointer;
}

.ebook-download-form button:hover {
  background-color: var(--color-primary);
}

/* Join community page */
.join-page-description {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.join-form-container {
  max-width: 600px;
  margin: 0 auto;
  background-color: #f7fbff;
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.join-form-container form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.join-form-container input,
.join-form-container textarea,
.join-form-container select {
  padding: 0.7rem;
  border: 1px solid #ccd6dd;
  border-radius: var(--border-radius);
}

.join-form-container button {
  padding: 0.8rem 1.5rem;
  background-color: var(--color-secondary);
  color: #fff;
  border: none;
  border-radius: var(--border-radius);
  font-weight: 600;
}

.join-form-container button:hover {
  background-color: var(--color-primary);
}

/* Testimonials page */
.testimonials-page {
  padding: 4rem 0;
  background-color: #fff;
}

.testimonials-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.testimonial-item {
  background-color: #f7fbff;
  border-radius: var(--border-radius);
  padding: 2rem;
  flex: 1 1 calc(33.333% - 2rem);
  max-width: 350px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.testimonial-item p {
  font-style: italic;
  margin-bottom: 1rem;
  color: var(--color-muted);
}

.testimonial-item .author {
  font-weight: 700;
  color: var(--color-primary);
}

/* Policy pages */
.policy-page {
  padding: 4rem 0;
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.7;
}

.policy-page h2 {
  margin-bottom: 1rem;
  color: var(--color-primary);
}

.policy-page p {
  margin-bottom: 1rem;
  color: var(--color-muted);
}

/* Mobile e-book card centering fix */
@media (max-width: 768px) {
  .ebook-cards {
    justify-content: center !important;
    align-items: center;
  }
  .ebook-card {
    flex: 0 1 min(100%, 280px) !important;
    width: min(100%, 280px);
    margin-left: auto;
    margin-right: auto;
  }
}