:root {
  --violet: #7E6CA8;              /* original violet for header/nav */
  --violet-light: #B9A9D0;        /* lighter violet for body section */
  --green: #6FAF92;               /* original green for buttons/nav hover */
  --green-light: #A3D1BE;         /* lighter green for body section */
  --blue: #5A7D9A;
  --orange: #E89C6C;
  --neutral-bg: #F9F9F9;
  --neutral-bg-dark: #ECECEC;
  --text-dark: #333333;
}

/* ===== Reset ===== */
html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--neutral-bg);
  color: var(--text-dark);
  font-family: century gothic, sans-serif;
  line-height: 1.6;
}

/* ===== Header ===== */
header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background-color: var(--violet);
  text-align: center;
}

header img {
  height: 50px;
  margin-right: 0.75rem;
}

header h1 {
  color: white;
  font-size: 1.6rem;
  margin: 0;
}

/* ===== Navigation ===== */
nav {
  background-color: var(--blue);
}

nav ul {
  list-style: none;
  display: flex;
  gap: 0.5rem;        /* tighter spacing between buttons */
  justify-content: center;
  margin: 0;
  padding: 0;
}

nav a {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 0.5rem; /* reduce horizontal padding */
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;
}

nav a:hover {
  background-color: var(--green);
  color: #fff;
  border-radius: 4px;
}

/* Only the first violet section inside main */
nav + main > .section-violet:first-of-type {
  margin-top: 1rem;
}
main {
  padding-bottom: 1rem;
}
/* === Navigation & Dropdown (desktop + mobile) === */

/* Main nav list */
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.75rem;
}

/* Top-level nav links */
.main-nav a {
  display: flex;
  align-items: center;
  height: 40px;              
  padding: 0 0.75rem;
  color: white;
  text-decoration: none;
}

/* Dropdown container */
.dropdown {
  position: relative;
}

/* Dropdown toggle link */
.dropdown > a {
  cursor: pointer;
  position: relative;
}

/* Add arrow styling */
.dropdown > a::after {
  content: "▾";
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;                 
  left: 0;
  background-color: var(--violet); 
  min-width: 180px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  z-index: 1000;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Dropdown items */
.dropdown-content li a {
  display: flex;
  align-items: center;
  height: 40px;              
  padding: 0 1rem;
  color: white;
  text-decoration: none;
}

.dropdown-content li a:hover {
  background-color: var(--blue);
}

/* Desktop: show dropdown on hover */
@media (hover: hover) {
  .dropdown:hover .dropdown-content {
    display: block;
  }
  .dropdown:hover > a::after {
    transform: rotate(180deg); 
  }
}

/* Mobile: show dropdown when parent is clicked */
.dropdown.active .dropdown-content {
  display: block;
}

/* Mobile: rotate arrow when active */
.dropdown.active > a::after {
  transform: rotate(180deg);
}

/* ===== Buttons / CTA ===== */
button, .cta {
  background-color: var(--green);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
}

button:hover, .cta:hover {
  background-color: var(--orange);
}

/* ===== Main Content ===== */
main section {
  margin: 0 auto;
  max-width: 900px;
  text-align: justify;
  padding: 2rem;
}

/* Section colour blocks */
.section-violet {
  background-color: var(--violet-light); /* or var(--violet) if you prefer */
  color: var(--text-dark);               /* force black/dark text */
  padding: 2rem;
}

.section-green {
  background-color: var(--green-light);  /* or var(--green) if you prefer */
  color: var(--text-dark);               /* force black/dark text */
  padding: 2rem;
}

.section-neutral {
  background-color: var(--neutral-bg-dark);
  color: var(--text-dark);
  padding: 2rem;
}

.section-spacer {
  background-color: var(--neutral-bg);
  color: var(--text-dark);
  padding: 2rem;
  text-align: center;
}
/* Force split layouts to left-align text */
.split > div {
  text-align: left;
}
.section-spacer.split > div {
  text-align: left;
   padding-right: 1rem;
}

/* ===== Forms ===== */


form {
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
  background-color: #fff;
  border: 1px solid var(--violet);
  border-radius: 3px;
  box-sizing: border-box;
}

form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

form input,
form textarea {
  width: 100%;              /* full width again */
  padding: 0.75rem;         /* comfortable spacing */
  margin-bottom: 1rem;
  border: 1px solid #444;   /* dark grey border */
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;   /* prevents shrinking */
}

form input:focus,
form textarea:focus {
  outline: none;
  border-color: #28a745;    /* green highlight */
}



/* ===== Success Message ===== */
.success-message {
  background-color: var(--green);
  color: white;
  padding: 1rem;
  margin-top: 1rem;
  border-radius: 4px;
  text-align: center;
  display: none;
}

/* ===== Footer ===== */
footer {
  background-color: var(--blue);
  color: white;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}

/* Split layout for text + image */
.split {
  display: flex;
  align-items: flex-start;   /* text and image align at the top */
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: nowrap;         /* keep them side by side */
}

.split > div,
.split > img {
  flex: 1;                   /* equal share of space */
  max-width: 50%;            /* each half limited to half the row */
  box-sizing: border-box;  
}


/* ===== Testimonials section (global) ===== */
.testimonials {
  margin: 0.5rem 0 3rem 0;   /* tighter top gap, keep bottom gap */
  padding: 2rem;
  background-color: #f9f9f9;
  border-radius: 8px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-inline: 3cm;
}

.testimonials h2 {
  text-align: center;
  margin-bottom: 2rem;
}

/* Default grid layout (for pages that use .testimonial-grid) */
.testimonial-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

/* Default testimonial card */
.testimonial {
  background: #eaf6ff;          /* white background for the box */
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-sizing: border-box;
}

/* ===== About page overrides ===== */
body.about-page .testimonial-grid {
  display: block;              /* cancel flexbox grid */
}

body.about-page .testimonial {
  flex: none;                   
  max-width: 100%;              /* inherit section rhythm */
  margin-left: auto;
  margin-right: auto;
  background: #eaf6ff;          
  padding: 1.5rem;
  margin-bottom: 2rem;          
  border: 1px solid var(--blue);
  border-radius: 6px;
}


blockquote {
  margin: 0;              /* remove default browser margins */
}

blockquote footer {
  margin-top: 0.25rem;    /* small gap above the name box */
}

blockquote {
  margin: 0;
  font-style: italic;
}

blockquote footer {
  margin-top: 0.5rem;
  font-weight: bold;
  text-align: center;
  background-color: #a8c8f0;   /* lighter blue shade */
  color: #000;                 /* dark text for contrast */
  padding: 0.5rem;
  border-radius: 4px;
}

  /* Forms */
  form {
    width: 100%;
    padding: 1rem;
    margin: 0;
  }
  .services h2,
.services h3 {
  color: #4283B8  /* replace with your exact brand blue */
}
.divider {
  width: 75%;
  height: 2px;
  background-color: #4283B8;
  margin: 2rem auto; /* vertical spacing + horizontal centering */
}
/* ===== Mobile-only overrides ===== */
@media (max-width: 768px) {
  /* General safeguard */
  html, body {
    overflow-x: hidden;   /* stop horizontal gaps/scrollbars */
  }

  /* Split layout stacks neatly */
  .split {
    display: flex;
    flex-direction: column;   /* text above, image below */
    align-items: stretch;     /* children stretch full width */
    justify-content: flex-start;
    width: 100%;
    margin: 0;
  }

  .split > div,
  .split > img,
  .split > figure {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* Text blocks */
  .split > div {
    padding: 1rem;            /* breathing space inside block */
    text-align: left;         /* natural alignment */
  }

  /* Images */
  .split img {
    display: block;
    width: 100%;              /* fill container width */
    height: auto;             /* preserve proportions */
    max-width: 100%;          /* never overflow */
    flex-shrink: 0;           /* stop Safari squashing */
    margin: 0 auto 1rem;      /* centred with gap below */
    object-fit: contain;      /* scale down if too large */
    box-sizing: border-box;
  }

  /* Only reset coloured content sections, not header/footer */
  .section-violet,
  .section-green,
  .section-neutral,
  .section-spacer {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: 0;   /* remove horizontal inset */
    padding-right: 0;
    box-sizing: border-box;
  }

  .section-violet > div,
  .section-green > div,
  .section-neutral > div,
  .section-spacer > div {
    padding: 1rem;     /* consistent internal spacing */
    text-align: left;
  }

 /* Navigation stays horizontal */
  nav ul {
    display: flex;
    flex-direction: row;      /* keep links side by side */
    flex-wrap: wrap;          /* allow wrapping if space runs out */
    justify-content: center;  /* centre the whole row */
    gap: 0.5rem;              /* spacing between buttons */
    padding: 0;
    margin: 0;
    list-style: none;
  }

  nav li {
    flex: 0 0 auto;           /* don’t stretch, keep natural size */
  }

  nav a {
    display: inline-block;
    padding: 0.5rem 0.5rem;
    font-size: 0.9rem;
    text-align: center;
  }

  /* Dropdown menu can still stack below */
  nav li ul {
    display: block;           /* dropdown stays vertical */
    position: static;         /* no absolute positioning on mobile */
    margin-top: 0.2rem;
  }

  nav li ul li {
    margin: 0.25rem 0;
  }

  /* Forms */
  form {
    width: 100%;
    padding: 1rem;
    margin: 0;
    box-sizing: border-box;
  }
/* ===== About page testimonial layout ===== */
body.about-page .testimonials {
  max-width: 900px;             /* same rhythm as Services page */
  margin-left: auto;
  margin-right: auto;
  padding-inline: 3cm;          /* same side indent */
}

body.about-page .testimonial {
  flex: none;
  max-width: 700px;             /* matches text column width */
  margin-left: auto;
  margin-right: auto;
  background: #f9f9f9;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid var(--blue);
  border-radius: 6px;
}
body.about-page .testimonials {
    max-width: 100%;       /* allow full width on mobile */
    padding-inline: 1rem;  /* smaller side padding for readability */
  }

  body.about-page .testimonial {
    max-width: 100%;       
    background: #eaf6ff;    /* keep pale blue on mobile */
    padding: 1rem;          /* lighter padding for small screens */
    margin-bottom: 1.5rem;
    border: 1px solid var(--blue);
    border-radius: 6px;
  }
}