/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Body Styling */
  body {
    font-family: Arial, sans-serif;
    background: linear-gradient(to bottom right, #cce7ff, #f8f8f8);
    color: #333; /* 'color' must remain for CSS functionality */
    line-height: 1.6;
    padding: 1rem;
  }
  
  /* Navigation Styling */
  nav {
    background: #ff7f50; /* A bright coral for modern flair */
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  nav .logo {
    font-weight: bold;
    font-size: 1.2rem;
    color: #fff;
  }
  
  nav ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    margin: 0;
  }
  
  nav li a {
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 1rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
    border-radius: 4px;
  }
  
  nav li a:hover {
    background-color: #fb5c1f; /* Slightly darker coral on hover */
    transform: translateY(-1px); /* Subtle lift effect */
  }
  
  nav a.active {
    background-color: #fb5c1f;
    transform: translateY(-1px);
  }
  
  /* Header Styling */
  header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem 1rem;
    background: #ffe6cc;
    border-radius: 8px;
  }
  
  header h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #333;
  }
  
  header p {
    font-size: 1rem;
    color: #555;
  }
  
  /* Section Base Styling */
  section {
    margin-bottom: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  /* Intro Section */
  .intro {
    background: #ffefd5;
    padding: 2rem;
    text-align: center;
  }
  
  .intro h2 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    color: #333;
  }
  
  .intro p {
    margin-bottom: 1.5rem;
    color: #555;
  }
  
  /* Holistic Section */
  .holistic {
    background: #e6ffe6;
    padding: 2rem;
  }
  
  .holistic h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #333;
  }
  
  .holistic p {
    margin-bottom: 1rem;
    color: #555;
  }
  
  /* Placeholder Section */
  .placeholder {
    background: #e6f7ff;
    padding: 2rem;
    text-align: center;
  }
  
  .placeholder h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #333;
  }
  
  .placeholder p {
    margin-bottom: 2rem;
    color: #555;
  }
  
  .placeholder a {
    color: #007bff;
    text-decoration: underline;
  }
  
  .placeholder a:hover {
    color: #0056b3;
  }
  
  /* Services and Extra Info Sections */
  .services {
    background: #fafafa;
    padding: 2rem;
  }
  
  .services h2,
  .extra-info h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #333;
  }
  
  .services ul,
  .extra-info ul {
    list-style-type: disc;
    margin-left: 2rem;
    margin-bottom: 1rem;
  }
  
  .services li,
  .extra-info li {
    margin-bottom: 0.5rem;
    color: #555;
  }
  
  .services p,
  .extra-info p {
    margin-bottom: 1rem;
    color: #555;
  }
  
  .extra-info {
    background: #ffefec;
    padding: 2rem;
  }
  
  /* Button Styling */
  .btn {
    background: #4a90e2;
    color: #fff; /* 'color' is used in CSS, though 'colour' is the UK spelling in text */
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  
  .btn:hover {
    background: #3b78b8;
    transform: scale(1.02);
  }
  
  /* Footer Styling */
  footer {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.875rem;
    color: #555;
    padding: 1rem;
    background: #ffe6cc;
    border-radius: 8px;
  }