/* styles.css */

  
/* ---------------------------- */
/* 1. CSS Variables (Color Palette)
/* ---------------------------- */
:root {
    --font-family: "Roboto", sans-serif;
    --font-size-base: 16px;
  
    /* Colors */
    --color-primary: #007bff;
    --color-primary-hover: #0056b3;
    --color-secondary: #f8f8f8;
    --color-heading: #111111;
    --color-text: #333333;
    --color-subtext: #666666;
    --color-border: #e1e1e1;
    --color-background: #ffffff;
  }
  
  /* ---------------------------- */
  /* 2. Global Reset & Base Styles
  /* ---------------------------- */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Use a clean, modern font */
  @import url("https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap");
  
  html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
  }
  
  body {
    font-family: var(--font-family);
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  
  /* ---------------------------- */
  /* 3. Layout Helpers
  /* ---------------------------- */
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
  }
  
  /* Use this helper class to add a subtle background
     and box-shadow to sections or divs */
  .section-card {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    padding: 1.5rem;
    margin-bottom: 2rem;
  }
  
  /* ---------------------------- */
  /* 4. Typography & Links
  /* ---------------------------- */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--color-heading);
    margin-bottom: 1rem;
    font-weight: 700;
  }
  
  p {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  
  a {
    text-decoration: none;
    color: var(--color-primary);
    transition: color 0.2s ease-in-out;
  }
  
  a:hover {
    color: var(--color-primary-hover);
  }
  
  /* ---------------------------- */
  /* 5. Header
  /* ---------------------------- */
  header {
    text-align: center;
    padding: 2rem 1rem;
    background: linear-gradient(
      135deg,
      var(--color-primary) 0%,
      var(--color-primary-hover) 100%
    );
    color: #fff;
  }
  
  header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
  }
  
  header p {
    font-size: 1.125rem;
  }
  
  /* ---------------------------- */
  /* 6. Section Styling
  /* ---------------------------- */
  section {
    margin: 2rem auto;
    padding: 0 1rem;
    max-width: 800px;
  }
  
  section h2 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    color: var(--color-heading);
  }
  
  /* Optional: Add a subtle background color for sections 
     to differentiate them from one another */
  section:nth-of-type(even) {
    background-color: var(--color-secondary);
    padding: 2rem 1rem;
    border-radius: 6px;
  }
  
  /* ---------------------------- */
  /* 7. Lists
  /* ---------------------------- */
  ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
  }
  
  /* Buttons
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .button,
  button,
  input[type="submit"],
  input[type="reset"],
  input[type="button"] {
    display: inline-block;
    height: 38px;
    padding: 0 30px;
    color: #555;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border-radius: 4px;
    border: 1px solid #bbb;
    cursor: pointer;
    box-sizing: border-box;
  }
  .button:hover,
  button:hover,
  input[type="submit"]:hover,
  input[type="reset"]:hover,
  input[type="button"]:hover,
  .button:focus,
  button:focus,
  input[type="submit"]:focus,
  input[type="reset"]:focus,
  input[type="button"]:focus {
    color: #333;
    border-color: #888;
    outline: 0;
  }
  .button.button-primary,
  button.button-primary,
  input[type="submit"].button-primary,
  input[type="reset"].button-primary,
  input[type="button"].button-primary {
    color: #fff;
    background-color: #33c3f0;
    border-color: #33c3f0;
  }
  .button.button-primary:hover,
  button.button-primary:hover,
  input[type="submit"].button-primary:hover,
  input[type="reset"].button-primary:hover,
  input[type="button"].button-primary:hover,
  .button.button-primary:focus,
  button.button-primary:focus,
  input[type="submit"].button-primary:focus,
  input[type="reset"].button-primary:focus,
  input[type="button"].button-primary:focus {
    color: #fff;
    background-color: #1eaedb;
    border-color: #1eaedb;
  }
  
  /* ---------------------------- */
  /* 9. Forms
  /* ---------------------------- */
  form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 400px;
  }
  
  label {
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--color-text);
  }
  
  input[type="text"],
  input[type="email"] {
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 1rem;
  }
  
  /* ---------------------------- */
  /* 10. Blockquotes & Testimonials
  /* ---------------------------- */
  blockquote {
    margin: 1rem 0;
    padding: 1rem;
    border-left: 4px solid var(--color-primary);
    background-color: #fafafa;
    font-style: italic;
    border-radius: 4px;
  }
  
  /* ---------------------------- */
  /* 11. Footer
  /* ---------------------------- */
  footer {
    text-align: center;
    padding: 1rem;
    background-color: var(--color-secondary);
    border-top: 1px solid var(--color-border);
  }
  
  footer p {
    font-size: 0.875rem;
    color: var(--color-subtext);
  }
  
  /* ---------------------------- */
  /* 12. Utility Classes
  /* ---------------------------- */
  .text-center {
    text-align: center;
  }
  
  .mt-2 {
    margin-top: 2rem !important;
  }
  .mb-2 {
    margin-bottom: 2rem !important;
  }
  .pt-2 {
    padding-top: 2rem !important;
  }
  .pb-2 {
    padding-bottom: 2rem !important;
  }

  /* ---------------------------- */
  /* 13. Navigation Menu
  /* ---------------------------- */
  nav {
      margin-top: 1rem;
  }

  nav ul {
      list-style: none;
      display: flex;
      justify-content: center;
      gap: 2rem;
  }

  nav ul li a {
      color: #fff;
      font-weight: 500;
      transition: color 0.3s ease;
  }

  nav ul li a:hover {
      color: var(--color-secondary);
  }