/* Note: For smooth scrolling to work when clicking ToC links,
   ensure your main CSS file has this rule for the html element. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 2rem; /* Optional: Adds space above the heading on jump */
}

/* --- General & Typography --- */
.terms-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.7;
    color: #333;
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.terms-container p,
.terms-container li {
    font-size: 1rem;
    margin-bottom: 1em;
}

.terms-container h2,
.terms-container h3,
.terms-container h4 {
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.terms-container h2 {
    font-size: 1.8rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 0.5rem;
}

.terms-container h3 {
    font-size: 1.4rem;
}

.terms-container h4 {
    font-size: 1.1rem;
    color: #444;
}

.terms-container a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.terms-container a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.terms-container ul {
    list-style-type: disc;
    padding-left: 25px;
}

/* --- Specific Elements --- */
.effective-date {
    font-style: italic;
    color: #6c757d;
    text-align: left;
    margin-bottom: 2rem;
}

.summary-note {
    background-color: #e9f5ff;
    border-left: 4px solid #007bff;
    padding: 1rem 1.5rem;
    margin: 2rem 0;
    border-radius: 0 4px 4px 0;
}

/* --- Table of Contents (TOC) --- */
.toc {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem 2rem;
    margin: 2rem 0 3rem 0;
}

.toc h2 {
    margin-top: 0;
    border-bottom: none;
    font-size: 1.5rem;
}

.toc ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.toc li {
    margin-bottom: 0.5rem;
}

.toc li:last-child {
    margin-bottom: 0;
}

.toc a {
    font-weight: 500;
}

/* --- Main Content Styling --- */
.terms-content section {
    margin-bottom: 3rem;
}

.section-summary {
    background-color: #fdfaf4;
    border-left: 4px solid #f0ad4e;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 4px 4px 0;
    font-style: italic;
}

.section-summary p {
    margin: 0;
}

.final-notes {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 2px solid #eee;
}

.final-notes ul {
    list-style-type: '✔';
    padding-left: 20px;
}
.final-notes li::marker {
    color: #28a745;
    margin-right: 10px;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .terms-container {
        margin: 1rem auto;
    }

    .terms-container h2 {
        font-size: 1.6rem;
    }

    .terms-container h3 {
        font-size: 1.3rem;
    }

    .toc {
        padding: 1rem 1.5rem;
    }
}


--------------------------------------------------------------

/* --- General Styling & Typography --- */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* Apply smooth scrolling behavior when clicking on TOC links */
html {
  scroll-behavior: smooth;
}

.privacy-policy-container {
  font-family: 'Lato', sans-serif;
  color: #343a40; /* Dark grey for text */
  line-height: 1.7;
  background-color: #ffffff;
  max-width: 850px;
  margin: 2rem auto; /* Center the container */
  padding: 2.5rem 3rem;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* --- Headings --- */
.privacy-policy-container h1, 
.privacy-policy-container h2, 
.privacy-policy-container h3 {
  color: #212529; /* Near black for headings */
  font-weight: 700;
  margin-top: 1.5em;
  margin-bottom: 0.8em;
}

.privacy-policy-container h1 {
  font-size: 2.2rem;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #0056b3; /* Primary brand color */
}

.privacy-policy-container h2 {
  font-size: 1.6rem;
  border-bottom: 2px solid #e9ecef; /* Light grey underline */
  padding-bottom: 0.5rem;
}

.privacy-policy-container h3 {
  font-size: 1.2rem;
  color: #495057; /* Slightly lighter grey for subheadings */
}

/* --- Links and Meta Info --- */
.privacy-policy-container .meta-info {
  text-align: center;
  color: #6c757d; /* Muted grey for metadata */
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.privacy-policy-container a {
  color: #007bff; /* Standard blue for links */
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.privacy-policy-container a:hover {
  color: #0056b3; /* Darker blue on hover */
  text-decoration: underline;
}

/* --- Table of Contents (TOC) --- */
.toc-container {
  background-color: #f8f9fa; /* Very light grey background */
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1.5rem 2rem;
  margin: 2.5rem 0;
}

.toc-container h2 {
  border-bottom: none;
  margin-top: 0;
  text-align: center;
}

.toc-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2; /* Create two columns for a compact look on wider screens */
}

.toc-container li {
  margin-bottom: 0.6rem;
}

.toc-container a {
  font-weight: 700;
  color: #495057;
}

.toc-container a:hover {
  color: #0056b3;
}

/* --- Content Sections --- */
/* This is crucial for interactive navigation. It adds space above the target section 
   so it isn't hidden by a sticky/fixed website header. Adjust 80px as needed. */
section[id] {
  scroll-margin-top: 80px;
}

.privacy-policy-container p, 
.privacy-policy-container ul {
  margin-bottom: 1rem;
}

.privacy-policy-container ul {
  padding-left: 20px;
}

.privacy-policy-container li {
  margin-bottom: 0.5rem;
  padding-left: 10px;
}

/* Horizontal line for visual separation between sections */
.privacy-policy-container hr {
  border: 0;
  height: 1px;
  background-color: #e9ecef;
  margin: 2.5rem 0;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
  .privacy-policy-container {
    padding: 2rem 1.5rem;
    margin: 1rem;
  }

  .privacy-policy-container h1 {
    font-size: 1.8rem;
  }
  
  .privacy-policy-container h2 {
    font-size: 1.4rem;
  }

  /* Stack TOC into a single column on smaller screens */
  .toc-container ul {
    columns: 1;
  }
}




----------------------------------------

/* --- General Styling & Typography for Legal Documents --- */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* Apply smooth scrolling behavior when clicking on TOC links */
html {
  scroll-behavior: smooth;
}

/* This styles both the privacy and cookie policy containers */
.privacy-policy-container,
.cookie-policy-container {
  font-family: 'Lato', sans-serif;
  color: #343a40; /* Dark grey for text */
  line-height: 1.7;
  background-color: #ffffff;
  max-width: 850px;
  margin: 2rem auto; /* Center the container */
  padding: 2.5rem 3rem;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* --- Headings --- */
.privacy-policy-container h1, .cookie-policy-container h1,
.privacy-policy-container h2, .cookie-policy-container h2,
.privacy-policy-container h3, .cookie-policy-container h3 {
  color: #212529; /* Near black for headings */
  font-weight: 700;
  margin-top: 1.5em;
  margin-bottom: 0.8em;
}

.privacy-policy-container h1,
.cookie-policy-container h1 {
  font-size: 2.2rem;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #0056b3; /* Primary brand color */
}

.privacy-policy-container h2,
.cookie-policy-container h2 {
  font-size: 1.6rem;
  border-bottom: 2px solid #e9ecef; /* Light grey underline */
  padding-bottom: 0.5rem;
}

.privacy-policy-container h3,
.cookie-policy-container h3 {
  font-size: 1.2rem;
  color: #495057; /* Slightly lighter grey for subheadings */
}

/* --- Links and Meta Info --- */
.privacy-policy-container .meta-info,
.cookie-policy-container .meta-info {
  text-align: center;
  color: #6c757d; /* Muted grey for metadata */
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.privacy-policy-container a,
.cookie-policy-container a {
  color: #007bff; /* Standard blue for links */
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.privacy-policy-container a:hover,
.cookie-policy-container a:hover {
  color: #0056b3; /* Darker blue on hover */
  text-decoration: underline;
}

/* --- Table of Contents (TOC) --- */
.privacy-policy-container .toc-container,
.cookie-policy-container .toc-container {
  background-color: #f8f9fa; /* Very light grey background */
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1.5rem 2rem;
  margin: 2.5rem 0;
}

.privacy-policy-container .toc-container h2,
.cookie-policy-container .toc-container h2 {
  border-bottom: none;
  margin-top: 0;
  text-align: center;
}

.privacy-policy-container .toc-container ul,
.cookie-policy-container .toc-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2; /* Create two columns for a compact look on wider screens */
}

.privacy-policy-container .toc-container li,
.cookie-policy-container .toc-container li {
  margin-bottom: 0.6rem;
}

.privacy-policy-container .toc-container a,
.cookie-policy-container .toc-container a {
  font-weight: 700;
  color: #495057;
}

.privacy-policy-container .toc-container a:hover,
.cookie-policy-container .toc-container a:hover {
  color: #0056b3;
}

/* --- Content Sections --- */
/* This is crucial for interactive navigation. It adds space above the target section 
   so it isn't hidden by a sticky/fixed website header. Adjust 80px as needed. */
section[id] {
  scroll-margin-top: 80px;
}

.privacy-policy-container p, .cookie-policy-container p,
.privacy-policy-container ul, .cookie-policy-container ul {
  margin-bottom: 1rem;
}

.privacy-policy-container ul,
.cookie-policy-container ul {
  padding-left: 20px;
}

.privacy-policy-container li,
.cookie-policy-container li {
  margin-bottom: 0.5rem;
  padding-left: 10px;
}

/* Horizontal line for visual separation between sections */
.privacy-policy-container hr,
.cookie-policy-container hr {
  border: 0;
  height: 1px;
  background-color: #e9ecef;
  margin: 2.5rem 0;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
  .privacy-policy-container,
  .cookie-policy-container {
    padding: 2rem 1.5rem;
    margin: 1rem;
  }

  .privacy-policy-container h1,
  .cookie-policy-container h1 {
    font-size: 1.8rem;
  }
  
  .privacy-policy-container h2,
  .cookie-policy-container h2 {
    font-size: 1.4rem;
  }

  /* Stack TOC into a single column on smaller screens */
  .privacy-policy-container .toc-container ul,
  .cookie-policy-container .toc-container ul {
    columns: 1;
  }
}

-------------------------------------------

/* --- General Styling & Typography --- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.7;
  color: #333;
  background-color: #fdfdfd;
}

/* --- Main Container --- */
.terms-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
}

/* --- Headings & Text Elements --- */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.3;
  color: #111;
  scroll-margin-top: 2rem; /* Adds space when jumping to an anchor */
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 0.25rem;
  text-align: center;
}

.effective-date {
  text-align: center;
  margin-top: 0;
  margin-bottom: 3rem;
  color: #777;
  font-style: italic;
}

h2 {
  font-size: 1.8rem;
  margin-top: 3rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #eee;
}

h3 {
  font-size: 1.4rem;
  margin-top: 2.5rem;
  color: #222;
}

h4 {
  font-size: 1.1rem;
  margin-top: 2rem;
  font-weight: 600;
}

p, li, dd {
  font-size: 1rem;
  color: #444;
}

a {
  color: #007aff;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover, a:focus {
  color: #0056b3;
  text-decoration: underline;
}

/* --- Table of Contents (TOC) --- */
.toc {
  background-color: #f9f9f9;
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0 3rem 0;
}

.toc h2 {
  margin-top: 0;
  border-bottom: none;
  font-size: 1.5rem;
}

.toc ul {
  list-style-type: none;
  padding-left: 0;
}

.toc ul ul {
  padding-left: 1.5rem; /* Indent nested lists */
  margin-top: 0.5rem;
}

.toc li {
  margin-bottom: 0.5rem;
}

.toc a {
  font-weight: 500;
  text-decoration: none;
}

/* --- Summary & Note Blocks --- */
.summary-note {
  font-style: italic;
  color: #666;
  text-align: center;
  margin-top: 2rem;
}

.summary {
  background-color: #eef7ff;
  border-left: 4px solid #007aff;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
}

.summary p {
  margin: 0;
  color: #333;
}

/* --- Lists --- */
ul, ol {
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.75rem;
}

/* --- Definition List --- */
dl dt {
  font-weight: 700;
  color: #111;
  margin-top: 1rem;
}

dl dd {
  margin-left: 0;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  border-left: 2px solid #f0f0f0;
}

/* --- Final Notes & Footer --- */
.final-notes {
  margin-top: 3rem;
  font-size: 0.9rem;
  color: #555;
}

.final-notes hr {
  border: 0;
  border-top: 1px solid #eee;
  margin: 2rem 0;
}


/* --- Responsive Design --- */
@media (max-width: 768px) {
  .terms-container {
    margin: 1rem;
    padding: 1.5rem;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.6rem;
  }
  
  h3 {
    font-size: 1.3rem;
  }
}




---------------------------------------------------------------------------code of conduct-------------------

/* --- General Styling & Typography --- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.7;
  color: #333;
  background-color: #fdfdfd;
}

/* --- Main Container --- */
.terms-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
}

/* --- Headings & Text Elements --- */
h1, h2, h3 {
  font-weight: 700;
  line-height: 1.3;
  color: #111;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

h2 {
  font-size: 1.8rem;
  margin-top: 3rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #eee;
}

h3 {
  font-size: 1.2rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: #222;
}

p, li {
  font-size: 1rem;
  color: #444;
}

a {
  color: #007aff;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover, a:focus {
  color: #0056b3;
  text-decoration: underline;
}

/* --- Conduct Rules (Do / Don't Lists) --- */
.conduct-rules {
  margin-top: 1rem;
}

.do-list, .dont-list {
  list-style: none;
  padding-left: 0;
}

.do-list li, .dont-list li {
  padding-left: 2rem; /* Space for the icon */
  position: relative;
  margin-bottom: 0.75rem;
}

.do-list li::before,
.dont-list li::before {
  position: absolute;
  left: 0;
  top: 1px; /* Adjust vertical alignment */
  font-size: 1.1rem;
  font-weight: bold;
}

/* Green checkmark for "I will" list */
.do-list li::before {
  content: '✓';
  color: #28a745; /* A pleasant green */
}

/* Red cross for "I won't" list */
.dont-list li::before {
  content: '✗';
  color: #dc3545; /* A clear red */
}

/* --- Final Notes & Footer --- */
.final-notes {
  margin-top: 3rem;
  font-size: 0.95rem;
  color: #555;
  background-color: #f9f9f9;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #e9e9e9;
}

.final-notes hr {
  display: none; /* Hide the hr as the box provides separation */
}

.final-notes p {
    margin: 0 0 1rem 0;
}

.final-notes p:last-child {
    margin-bottom: 0;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
  .terms-container {
    margin: 1rem;
    padding: 1.5rem;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.6rem;
  }
  
  h3 {
    font-size: 1.1rem;
  }
}




----------------Quality and Trust Guide--------------------------

/* --- General Styling & Typography --- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.7;
  color: #333;
  background-color: #fdfdfd;
}

/* --- Main Container --- */
.terms-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
}

/* --- Headings & Text Elements --- */
h1, h2 {
  font-weight: 700;
  line-height: 1.3;
  color: #111;
  text-align: center;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.8rem;
  margin: 3rem auto 1.5rem auto;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #eee;
  max-width: 90%;
}

p, li, dd {
  font-size: 1rem;
  color: #444;
}

a {
  color: #007aff;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover, a:focus {
  color: #0056b3;
  text-decoration: underline;
}

/* --- Highlight Box --- */
.highlight-box {
  background-color: #f9f9f9;
  border: 1px solid #e9e9e9;
  border-left: 4px solid #007aff;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0 3rem 0;
}

.highlight-box h2 {
  margin-top: 0;
  border-bottom: none;
  text-align: left;
  font-size: 1.5rem;
}

.highlight-box p {
  margin-bottom: 0;
}

/* --- Feature/Definition List Styling --- */
.feature-list dt {
  font-weight: 700;
  color: #111;
  font-size: 1.1rem;
  position: relative;
  padding-left: 2rem;
  margin-top: 1.5rem;
}

/* Adding a decorative icon/bullet */
.feature-list dt::before {
  content: '🔹';
  position: absolute;
  left: 0;
  top: 0;
  color: #007aff;
  font-size: 1rem;
}

.feature-list dd {
  margin-left: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.feature-list dd:last-of-type {
  border-bottom: none;
}


/* --- Final Notes / Call to Action --- */
.final-notes {
  margin-top: 3rem;
  padding: 2rem;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
  background-color: #eef7ff;
  border-radius: 8px;
}


/* --- Responsive Design --- */
@media (max-width: 768px) {
  .terms-container {
    margin: 1rem;
    padding: 1.5rem;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.6rem;
  }
  
  .feature-list dt,
  .feature-list dd {
    padding-left: 0.5rem;
    margin-left: 1.5rem;
  }
  
  .feature-list dt::before {
    left: -1.5rem; /* Adjust icon position */
  }
}




------------------------------Client - How it works

/* Base variables for WritExperts theme */
:root {
  --primary-color: #6d28d9;        /* vibrant purple accent */
  --primary-dark: #5125a0;         /* darker shade for hover */
  --background-light: #f8f6fc;     /* soft light background */
  --text-color: #232323;           /* dark text for readability */
  --border-radius: 8px;
}

/* General layout */
.how-it-works {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--text-color);
  line-height: 1.6;
}

.how-it-works h1,
.how-it-works h2,
.how-it-works h3 {
  color: var(--primary-color);
  margin-top: 0;
}

.how-it-works h1 {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}

.how-it-works .intro p {
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

/* Table of Contents */
.toc {
  margin-bottom: 2rem;
  background-color: var(--background-light);
  border: 1px solid #e8e2f4;
  border-radius: var(--border-radius);
  padding: 1rem 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.toc summary {
  font-weight: 600;
  cursor: pointer;
  color: var(--primary-dark);
  font-size: 1.1rem;
}

.toc ul {
  list-style: none;
  margin: 0;
  padding-left: 1rem;
}

.toc li {
  margin: 0.4rem 0;
}

.toc li ul {
  margin-top: 0.3rem;
  padding-left: 1.2rem;
}

.toc a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.toc a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* Step sections */
.step {
  margin-bottom: 3rem;
  padding: 1.5rem;
  background-color: #ffffff;
  border: 1px solid #ece4f7;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.step-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  gap: 0.8rem;
}

.number-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.2rem;
}

.step p {
  margin-top: 0;
}

.step ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

.substep {
  margin-top: 1rem;
  padding-left: 1.2rem;
  border-left: 3px solid var(--primary-color);
}

.substep h3 {
  margin-top: 0;
  font-size: 1.2rem;
  color: var(--primary-dark);
}

/* Terms & Conditions */
.terms {
  margin-top: 3rem;
  padding: 1.5rem;
  border-top: 2px solid var(--primary-color);
}

.terms h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.terms details {
  background-color: var(--background-light);
  border: 1px solid #e8e2f4;
  border-radius: var(--border-radius);
  padding: 1rem 1.5rem;
}

.terms summary {
  font-weight: 600;
  cursor: pointer;
  color: var(--primary-dark);
  font-size: 1.05rem;
}

.terms ul {
  list-style: disc;
  margin-top: 0.8rem;
  margin-bottom: 0;
  padding-left: 1.5rem;
}

/* Responsive design */
@media (max-width: 768px) {
  .how-it-works h1 {
    font-size: 1.8rem;
  }
  .number-circle {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  .step {
    padding: 1rem;
  }
  .toc {
    padding: 0.8rem 1rem;
  }
  .toc summary {
    font-size: 1rem;
  }
  .terms {
    padding: 1rem;
  }
}




------------------------------------How it wros - Freelancer

/* How It Works Page Styles */
.how-it-works-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* Hero Section */
.hero-section {
  text-align: center;
  margin-bottom: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 60px 40px;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.1);
}

.main-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-description {
  font-size: 1.2rem;
  max-width: 800px;
  margin: 0 auto;
  opacity: 0.95;
  font-weight: 300;
}

/* Table of Contents */
.toc-section {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 50px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.toc-title {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 25px;
  color: #2d3748;
  border-bottom: 3px solid #667eea;
  padding-bottom: 10px;
}

.table-of-contents {
  margin: 0;
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-list > li {
  margin-bottom: 15px;
}

.toc-link {
  display: block;
  padding: 12px 20px;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  text-decoration: none;
  color: #4a5568;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.toc-link:hover {
  background: #667eea;
  color: white;
  transform: translateX(10px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.toc-sublist {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 30px;
}

.toc-sublist li {
  margin-bottom: 8px;
}

.toc-sublink {
  display: block;
  padding: 8px 16px;
  background: #edf2f7;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  text-decoration: none;
  color: #718096;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.toc-sublink:hover {
  background: #764ba2;
  color: white;
  transform: translateX(5px);
}

/* Steps Container */
.steps-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-bottom: 60px;
}

/* Step Cards */
.step-card {
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  border: 2px solid transparent;
}

.step-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  border-color: #667eea;
}

.step-header {
  display: flex;
  align-items: center;
  padding: 30px 40px 20px;
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  position: relative;
}

.step-number {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-right: 25px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.step-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0;
  flex-grow: 1;
}

.step-icon {
  width: 50px;
  height: 50px;
  color: #667eea;
  opacity: 0.6;
}

.step-content {
  padding: 30px 40px;
}

.step-content p {
  margin-bottom: 20px;
  font-size: 1.1rem;
  color: #4a5568;
  line-height: 1.7;
}

.step-content p:last-child {
  margin-bottom: 0;
}

/* Sub-steps */
.sub-steps {
  margin-top: 30px;
  display: grid;
  gap: 20px;
}

.sub-step {
  background: #f7fafc;
  padding: 25px;
  border-radius: 12px;
  border-left: 4px solid #667eea;
  transition: all 0.3s ease;
}

.sub-step:hover {
  background: #edf2f7;
  transform: translateX(5px);
}

.sub-step-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 10px;
}

.sub-step p {
  margin: 0;
  color: #4a5568;
  line-height: 1.6;
}

/* Terms & Conditions */
.terms-section {
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: 2px solid #e2e8f0;
}

.terms-header {
  background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
  color: white;
  padding: 30px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.terms-title {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0;
}

.terms-toggle {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.terms-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.toggle-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.terms-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.terms-content.expanded {
  max-height: 2000px;
}

.terms-intro {
  padding: 30px 40px 20px;
  font-size: 1.1rem;
  color: #4a5568;
  background: #f7fafc;
  margin: 0;
  font-weight: 500;
}

.terms-list {
  padding: 20px 40px;
}

.term-item {
  margin-bottom: 25px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 12px;
  border-left: 4px solid #667eea;
}

.term-item:last-child {
  margin-bottom: 0;
}

.term-item h4 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0 0 10px 0;
}

.term-item p {
  margin: 0;
  color: #4a5568;
  line-height: 1.6;
}

.terms-contact {
  padding: 20px 40px 40px;
  margin: 0;
  font-style: italic;
  color: #718096;
  text-align: center;
  background: #f7fafc;
  border-top: 1px solid #e2e8f0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .how-it-works-container {
    padding: 20px 15px;
  }
  
  .main-title {
    font-size: 2.2rem;
  }
  
  .hero-section {
    padding: 40px 25px;
  }
  
  .hero-description {
    font-size: 1.1rem;
  }
  
  .toc-section {
    padding: 20px;
  }
  
  .step-header {
    padding: 20px 25px 15px;
    flex-direction: column;
    text-align: center;
  }
  
  .step-number {
    margin: 0 0 15px 0;
  }
  
  .step-content {
    padding: 20px 25px;
  }
  
  .step-content p {
    font-size: 1rem;
  }
  
  .sub-step {
    padding: 20px;
  }
  
  .terms-header {
    padding: 20px 25px;
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .terms-intro,
  .terms-list,
  .terms-contact {
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .toc-sublist {
    margin-left: 15px;
  }
  
  .toc-link:hover,
  .toc-sublink:hover {
    transform: none;
  }
  
  .sub-step:hover {
    transform: none;
  }
}

@media (max-width: 480px) {
  .main-title {
    font-size: 1.8rem;
  }
  
  .hero-description {
    font-size: 1rem;
  }
  
  .step-title {
    font-size: 1.5rem;
  }
  
  .terms-title {
    font-size: 1.5rem;
  }
  
  .step-number {
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
  }
  
  .step-icon {
    width: 40px;
    height: 40px;
  }
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus states for keyboard navigation */
.toc-link:focus,
.toc-sublink:focus,
.terms-toggle:focus {
  outline: 3px solid #667eea;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .step-card {
    border: 3px solid #000;
  }
  
  .hero-section {
    background: #000;
    color: #fff;
  }
  
  .terms-header {
    background: #000;
    color: #fff;
  }
  
  
  
  
  ------------------------------------How it works Clients (Genspark
  
  
    
    
        How It Works: A 4‑Step Guide for Customers
        Here is a simple, step‑by‑step guide to bringing your project to life on our platform. WritExperts connects you with professionals who deliver tailored academic, business content and graphic designs to meet your needs.
    

    
    
        Contents
        
            
                Step 1 – Create Your Account & Set Up Your Dashboard
                Step 2 – Start Your Project
                    
                        Place a Direct Order
                        Request Bids
                    
                
                Step 3 – Select Your Writer & Securely Pay
                Step 4 – Track Progress, Collaborate, and Approve
                Terms & Conditions
            
        
    

    
    
        
        
            
                1
                Create Your Account & Set Up Your Dashboard
            
            
                First, sign up to gain access to your personal customer panel. This is your command center for everything. Here, you can manage your profile, view your order history, and add funds to your wallet for faster checkouts. Creating an account is quick, easy, and gives you a direct line to our services.
            
            
                
                    
                    
                
            
        

        
        
            
                2
                Start Your Project
            
            
                Once you're logged in, you can initiate a new project in one of two ways:
                
                
                    
                        Place a Direct Order
                        If you prefer a straightforward process, choose this option. You will provide all your project details, requirements, and file attachments. Our team will then assign the task to the most suitable expert.
                    
                    
                    
                        Request Bids
                        If you want to choose your expert, post a bidding request. Describe your project, and our pool of talented experts will submit their proposals for you to review.
                    
                
            
            
                
                    
                
            
        

        
        
            
                3
                Select Your Writer & Securely Pay
            
            
                After submitting your project details, the next step is to finalise the expert and payment.
                
                    If you requested bids, you will receive notifications as experts apply. You can review their profiles and proposals to select the best candidate for your job.
                    Proceed to checkout to fund the project. You can pay securely using various online gateways like Stripe and PayPal, or use the available balance in your wallet. Don't forget to apply any discount coupons you may have.
                
            
            
                
                    
                    
                
            
        

        
        
            
                4
                Track Progress, Collaborate, and Approve
            
            
                Use your customer panel to manage your active order. You can track its status, communicate directly with your assigned expert using the internal messaging system, and exchange files. Once the work is delivered, review it carefully. You can either request revisions or, if you're happy with the result, approve the order and leave a rating to complete the process.
            
            
                
                    
                
            
        
    

    
    
        Terms & Conditions
        
            
                View Terms & Conditions
                
                    
                
            
        
        
        
            By accessing WritExperts and using our services you agree to follow our guidelines and policies. Please read the following terms carefully:
            
            
                
                    Account use:
                    You must provide accurate information when creating an account and keep your login credentials secure. You are responsible for all activities on your account.
                
                
                
                    Communication:
                    All project‑related communication should take place within the platform. For your safety, do not share personal contact details with experts outside of WritExperts.
                
                
                
                    Payments:
                    Payments must be processed through our secure gateways or wallet. Do not send money directly to experts.
                
                
                
                    Content usage:
                    The content you receive is for your personal or business use. You may not resell or redistribute it without permission.
                
                
                
                    Revisions & approvals:
                    You may request revisions during the review period. Once you approve an order, it is considered final.
                
                
                
                    Updates to terms:
                    These terms may be updated from time to time. Continued use of our platform constitutes acceptance of the updated terms.
                
            
            
            If you have any questions, please contact our support team.
        
    



function toggleTerms() {
    const content = document.getElementById('termsContent');
    const button = document.querySelector('.terms-button');
    const arrow = document.querySelector('.terms-arrow');
    
    if (content.classList.contains('active')) {
        content.classList.remove('active');
        button.querySelector('span').textContent = 'View Terms & Conditions';
        arrow.style.transform = 'rotate(0deg)';
    } else {
        content.classList.add('active');
        button.querySelector('span').textContent = 'Hide Terms & Conditions';
        arrow.style.transform = 'rotate(180deg)';
    }
}

// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});