:root {
  --colour-primary: #e7d3fa;
  --colour-primary-medium: #a0d3ff;
  --colour-primary-medium-light: #a0d3ff;
  --colour-primary-light: #ceedf3;
  --colour-primary-x-light: #ecf8fa;

  --colour-secondary: #9a6db5;
  --colour-secondary-light: #f2f1f2;
  --colour-tertiary: #fe7e01;
  --colour-tertiary-light: #fef0e2;

  --colour-accent: #0b0b0b;
  --colour-accent-light: #e4f4bf;
  --colour-error: #ff7c7c;
  --colour-white: #ffffff;
  --colour-white-50: #ffffff88;
  --colour-off-white: #f9f7f2;

  --colour-grey: #f2f1f2;
  --colour-mid-grey: #707070;
  --colour-dark: #626262;
  --colour-black: #000000;

  --font-primary: "Sans-Serif-Alt-Bld-FLF";
  --font-secondary: "Sans-Serif-Alt";
  --font-secondary-2: "Sans-Serif-Demibold";
  --font-inter: "Inter";
  --font-inter-italic: "Inter-Italic";

  --margin-xx-small: 0.25rem;
  --margin-x-small: 0.5rem;
  --margin-small: 0.75rem;
  --margin-medium: 1rem;
  --margin-large: 1.5rem;
  --margin-x-large: 2rem;
  --margin-xx-large: 3rem;
  --margin-xxx-large: 4rem;

  --padding-xxx-small: 0.125rem;
  --padding-xx-small: 0.25rem;
  --padding-x-small: 0.5rem;
  --padding-small: 0.75rem;
  --padding-medium: 1rem;
  --padding-large: 1.5rem;
  --padding-x-large: 2rem;
  --padding-xx-large: 3rem;
  --padding-xxx-large: 4rem;
  --padding-xxxx-large: 6rem;

  --gap-x-small: 0.5rem;
  --gap-small: 0.75rem;
  --gap-medium: 1rem;
  --gap-large: 1.5rem;
  --gap-x-large: 2rem;
  --gap-xx-large: 3rem;
  --gap-xxx-large: 4rem;

  --radius-small: 3px;
  --radius-medium: 5px;

  --transition-speed-x-fast: 0.125s;
  --transition-speed-fast: 0.25s;
  --transition-speed-medium: 0.5s;
  --transition-speed-slow: 1s;
}

@media (width < 1440px) {
  :root {
    --margin-xxx-large: 3rem;
    --padding-xxx-large: 3rem;
    --padding-xxxx-large: 3rem;
    --gap-xxx-large: 3rem;
  }
}

@media (width < 768px) {
  :root {
    --margin-xx-large: 2rem;
    --margin-xxx-large: 2rem;
    --padding-xx-large: 2rem;
    --padding-xxx-large: 2rem;
    --padding-xxxx-large: 2rem;
    --gap-xx-large: 2rem;
    --gap-xxx-large: 2rem;
  }

  .connect-btn {
    width: 250px !important;
  }
}

@font-face {
  font-family: "Sans-Serif-Alt";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/Sans_Serif_FLF_webfonts/SansSerifBookFLF.woff")
    format("woff");
}

@font-face {
  font-family: "Sans-Serif-Alt-Book-Italic";
  font-weight: 400;
  font-style: italic;
  src: url("../fonts/Sans_Serif_FLF_webfonts/SansSerifBookFLF-Italic.woff")
    format("woff");
}

@font-face {
  font-family: "Inter-Italic";
  font-weight: 400;
  font-style: italic;
  src: url("../fonts/Inter/Inter-Italic.tff") format("tff");
}

@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: italic;
  src: url("../fonts/Inter/Inter.tff") format("tff");
}

@font-face {
  font-family: "Sans-Serif-Demibold";
  font-weight: 600;
  font-style: normal;
  src: url("../fonts/Sans_Serif_FLF_webfonts/SanSansSerifFLF-Demibold.woff")
    format("woff");
}

@font-face {
  font-family: "Sans-Serif-Alt-DemiItalic";
  font-weight: 600;
  font-style: italic;
  src: url("../fonts/Sans_Serif_FLF_webfonts/SansSerifFLF-DemiItalic.woff")
    format("woff");
}

@font-face {
  font-family: "Sans-Serif-Alt-Bld-FLF";
  font-weight: 900;
  font-style: bold;
  src: url("../fonts/Sans_Serif_FLF_webfonts/SansSerifBldFLF.woff")
    format("woff");
}

html {
  min-width: 360px;
}

body {
  font-family: var(--font-secondary);
  background-color: var(--colour-white);
  color: var(--colour-black);
}

.accordian-body p {
  font-family: var(--font-inter) !important;
  font-size: medium !important;
}
/* 
.rounded-pill {
    padding: inherit;
    border-color: transparent;
    width: 200px ! important;
    font-size: 14px;
    margin-top: -5px;
    line-height: 2;
 } */
/* Generic */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1em;
  margin: 0;
  margin-bottom: var(--margin-large);
}

p {
  font-family: var(--font-inter);
  font-size: large;
}

li {
  font-family: var(--font-inter);
  font-size: large;
}

.badge {
  font-family: var(--font-inter);
  font-size: large;
}

h1 {
  font-size: 3em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.25em;
}

h1 em,
h2 em,
h3 em {
  display: inline-block;
  font-style: normal;
  background-color: var(--colour-primary);
  color: var(--colour-white);
  padding-inline: var(--padding-xxx-small);
  margin-inline: calc(var(--padding-xxx-small) / -1);
}

input,
select,
textarea {
  font-family: var(--font-inter);
}

.usps {
  display: flex;
  justify-content: space-between;
}
.paraBld {
  font-family: var(--font-secondary-2);
}

.background-secondary h1 em,
.background-secondary h2 em,
.background-secondary h3 em,
.background-tertiary h1 em,
.background-tertiary h2 em,
.background-tertiary h3 em,
.background-accent h1 em,
.background-accent h2 em,
.background-accent h3 em,
.background-grey h1 em,
.background-grey h2 em,
.background-grey h3 em,
.background-primary h1 em,
.background-primary h2 em,
.background-primary h3 em {
  background-color: var(--colour-dark);
  color: var(--colour-white);
}

p {
  margin: 0;
  margin-bottom: var(--margin-medium);
  line-height: 1.5;
}
section.text p,
section.text li {
  max-width: 80ch;
  line-height: 1.5;
  margin-bottom: var(--margin-medium);
}

strong {
  font-weight: 600;
}

.wrap {
  /* text-wrap: pretty; */
  text-wrap: balance;
}

.background-primary {
  background-color: var(--colour-primary);
  --local-colour: var(--colour-primary);
}
.background-primary-x-light {
  background-color: var(--colour-primary-x-light);
  --local-colour: var(--colour-primary-x-light);
}
.background-secondary {
  background-color: var(--colour-secondary);
  --local-colour: var(--colour-secondary);
}
.background-tertiary {
  background-color: var(--colour-tertiary);
  --local-colour: var(--colour-tertiary);
}
.background-accent {
  background-color: var(--colour-accent);
  --local-colour: var(--colour-accent);
}
.background-grey {
  background-color: var(--colour-grey);
  --local-colour: var(--colour-grey);
}

.color-primary {
  color: var(--colour-primary);
}
.color-primary-x-light {
  color: var(--colour-primary-x-light);
}
.color-secondary {
  color: var(--colour-secondary);
}
.color-tertiary {
  color: var(--colour-tertiary);
}
.color-grey {
  color: var(--colour-grey);
}

.overlay {
  position: relative;
}
.overlay::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 1;
  mix-blend-mode: color;
}
.overlay--primary::after {
  background-color: var(--colour-primary-light);
}

/* Grid Layout */

.content-grid {
  --padding-inline: var(--padding-medium);
  --content-max-width: 1158px;
  --breakout-max-width: 1394px;
  --wide-max-width: 1700px;

  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );
  --wide-size: calc((var(--wide-max-width) - var(--breakout-max-width)) / 2);

  display: grid;

  grid-template-columns:
    [full-width-start]
    minmax(var(--padding-inline), 1fr)
    [wide-start]
    minmax(0, var(--wide-size))
    [breakout-start]
    minmax(0, var(--breakout-size))
    [content-start]
    min(100% - (var(--padding-inline) * 2), var(--content-max-width))
    [content-end]
    minmax(0, var(--breakout-size))
    [breakout-end]
    minmax(0, var(--wide-size))
    [wide-end]
    minmax(var(--padding-inline), 1fr)
    [full-width-end];
}

.content-grid > :not(.breakout, .wide, .full-width),
.full-width > :not(.breakout, .wide, .full-width) {
  grid-column: content;
}

.content-grid > .breakout {
  grid-column: breakout;
}
.content-grid > .wide {
  grid-column: wide;
}
.content-grid > .full-width {
  grid-column: full-width;
}

/* Header */

div.above-header {
  background-color: var(--colour-primary-medium);
  color: var(--colour-dark);
  user-select: none;
}
div.above-header .layout {
  padding-block: var(--padding-medium);
}
div.above-header .container {
  display: flex;
  gap: var(--gap-x-large);
  justify-content: flex-end;
  text-transform: uppercase;
  height: 1em;
}
div.above-header .container > * {
  margin-bottom: 0;
}
div.above-header .divider {
  width: 1px;
  background: var(--colour-white);
}
div.above-header p {
  line-height: 1em;
}
div.above-header a {
  display: inline-block;
  color: var(--colour-white);
  text-decoration: none;
}
div.above-header a:hover {
  text-decoration: underline;
}

@media (width < 768px) {
  div.above-header .container {
    gap: var(--gap-x-small);
    justify-content: space-around;
  }

  div.above-header p span {
    display: none;
  }
}

@keyframes padding-shrink {
  from {
    padding-block: var(--padding-large);
  }
  to {
    padding-block: var(--padding-small);
  }
}

@keyframes logo-shrink {
  from {
    height: 68px;
  }
  to {
    height: 32px;
  }
}

@keyframes logo-text-fade-out {
  0% {
    fill-opacity: 1;
  }
  50% {
    fill-opacity: 0;
  }
  100% {
    fill-opacity: 0;
  }
}

.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: white;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 30px;
  border: 1px solid white;
  border-radius: 10px;
  color: #333;
  line-height: 3;
}
.text-dark-blue {
  color: #0074b4;
}
.c-shadow {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
    rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.b-link {
  transition: box-shadow 0.4s ease;
}

.b-link:hover {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
    rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.sticky-header {
  position: sticky;
  top: 0;
  /* --shrink-start: 1px;
  --shrink-end: 47px; */
  z-index: 1;
}

body:has(input#mobile-nav-toggler:checked) {
  .sticky-header {
    --shrink-start: 0%;
    --shrink-end: 100%;
  }
}

header {
  background-color: var(--colour-white);
  color: var(--colour-dark);
  user-select: none;
}
header .layout {
  padding-block: var(--padding-large);
  /* animation: padding-shrink linear;
    animation-timeline: scroll(root block);
    animation-range: var(--shrink-start) var(--shrink-end);
    animation-fill-mode: forwards; */
}
header .container {
  display: flex;
  gap: var(--gap-medium);
  justify-content: space-between;
  align-items: center;
  font-size: larger;
}
header a.logo {
  display: block;
  height: 68px;
  /* animation: logo-shrink linear;
        animation-timeline: scroll(root block);
        animation-range: var(--shrink-start) var(--shrink-end);
        animation-fill-mode: forwards; */
}
header a.logo svg {
  height: 68px;
}
header a.logo svg path.wing {
  transition: fill var(--transition-speed-fast) ease-in-out;
}
header a.logo:hover svg path.wing {
  fill: var(--colour-accent) !important;
}

header nav ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

header nav > ul {
  gap: var(--gap-small);
  margin-right: calc(var(--padding-small) / -1);
}
header nav > ul > li {
  position: relative;
}
header nav > ul > li > a,
header nav > ul > li > label {
  display: block;
  text-decoration: none;
  color: var(--colour-dark);
  padding-block: var(--padding-x-small);
  padding-inline: var(--padding-small);
  border-radius: var(--radius-medium);
  transition: background-color var(--transition-speed-fast) ease-in-out;
}
header nav > ul > li > a:hover {
  color: var(--colour-black);
}
header nav > ul > li:has(ul) > a::after {
  display: inline-block;
  font-family: "Font Awesome 6 Sharp";
  font-weight: 600;
  content: "\f107";
  margin-left: var(--margin-x-small);
}
header nav > ul > li.emphasis > a {
  color: var(--colour-white);
}
header nav > ul > li.emphasis.emphasis--primary > a {
  background-color: var(--colour-primary);
}
header nav > ul > li.emphasis.emphasis--secondary > a {
  background-color: var(--colour-secondary);
}
header nav > ul > li.emphasis.emphasis--tertiary > a {
  background-color: var(--colour-tertiary);
}
header nav > ul > li.emphasis.emphasis--dark > a {
  background-color: var(--colour-dark);
}
header nav > ul > li.emphasis:has(:hover) > a,
header nav > ul > li.emphasis > a:hover {
  background-color: var(--colour-accent);
}
header nav > ul > li.login > a {
  text-transform: uppercase;
}
header nav > ul > li.login > a::before {
  display: inline-block;
  font-family: "Font Awesome 6 Pro";
  font-weight: 600;
  content: "\f007";
  margin-right: var(--margin-x-small);
  color: var(--colour-primary);
  transition: color var(--transition-speed-fast) ease-in-out;
}
header nav > ul > li.login > a:hover::before {
  color: var(--colour-accent);
}
header nav > ul > li.mobile-nav-toggle {
  display: none;
}
header nav > ul > li.mobile-nav-toggle > label::before {
  display: inline-block;
  font-family: "Font Awesome 6 Sharp";
  content: "\f0c9";
  color: var(--colour-primary);
  transition: color var(--transition-speed-fast) ease-in-out;
  text-align: center;
  width: 1rem;
}
body:has(input#mobile-nav-toggler:checked)
  header
  nav
  > ul
  > li.mobile-nav-toggle
  > label::before {
  content: "\e59b";
}
header nav > ul > li > ul {
  display: grid;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--transition-speed-fast) ease-in-out,
    visibility var(--transition-speed-fast) ease-in-out;
  margin-top: var(--margin-large);
  position: absolute;
  z-index: 1;
  flex-direction: column;
  padding: var(--padding-medium) var(--padding-large);
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.2));
  background: var(--colour-white);
  left: 50%;
  transform: translateX(-50%);
  border-radius: var(--radius-small);
}
header nav > ul > li > ul::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  height: var(--margin-large);
  top: calc(var(--margin-large) / -1);
  background: transparent;
}
header nav > ul > li > ul::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: 0;
  left: 0;
  margin-left: calc(50% + 0.4em);
  border-width: 0.8em;
  border-style: solid;
  border-color: transparent transparent var(--colour-white) var(--colour-white);
  transform-origin: 0 0;
  transform: translateX(50%) translateY(0.25em) rotate(135deg);
}
header nav > ul > li:has(:focus) > ul,
header nav > ul > li:hover > ul {
  visibility: visible;
  opacity: 1;
}
header nav > ul > li > ul > li {
  position: relative;
}
header nav > ul > li > ul > li:not(.highlight) {
  border-bottom: 1px solid var(--colour-grey);
}
header nav > ul > li > ul > li > a {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--colour-dark);
  white-space: nowrap;
  padding-block: var(--padding-x-small);
  padding-right: var(--padding-xx-large);
}
header nav > ul > li > ul > li > a:hover {
  color: var(--colour-black);
}
header nav > ul > li > ul > li:not(.highlight) > a::after {
  position: absolute;
  content: "\f105";
  right: 0.25em;
  font-family: "Font Awesome 6 Sharp";
  font-weight: 600;
  color: var(--colour-primary);
  transition: right var(--transition-speed-x-fast) ease-in-out;
}
header nav > ul > li > ul > li:not(.highlight) > a:hover::after {
  right: -0.25em;
}
header nav > ul > li > ul > li.highlight {
  margin-block: var(--margin-x-small);
  text-transform: uppercase;
  font-size: 0.875em;
}
header nav > ul > li > ul > li.highlight a {
  background-color: var(--colour-primary);
  color: var(--colour-white);
  padding-block: var(--padding-small);
  padding-left: var(--padding-medium);
  padding-right: var(--padding-xxxx-large);
  border-radius: var(--radius-small);
  transition: background-color var(--transition-speed-fast) ease-in-out;
}
header nav > ul > li > ul > li.highlight a:hover {
  background-color: var(--colour-accent);
}
header nav > ul > li > ul > li.highlight--secondary a {
  background-color: var(--colour-secondary);
}
header nav > ul > li > ul > li.highlight--tertiary a {
  background-color: var(--colour-tertiary);
}
header nav > ul > li > ul > li.hypnotherapist::after,
header nav > ul > li > ul > li.counsellor::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(var(--margin-large) / -1);
  bottom: 0;
  width: 100px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  pointer-events: none;
}
header nav > ul > li > ul > li.hypnotherapist::after {
  background-image: url("../media/nav/hypnotherapist.png");
}
header nav > ul > li > ul > li.counsellor::after {
  background-image: url("../media/nav/counsellor.png");
}
header nav > ul > li.wide > ul {
  grid-template-columns: repeat(3, 1fr);
  gap: 0 var(--gap-large);
}

.bg-light-green {
  border: #00a97b;
}

.bg-white {
  border: white;
}

.bg-blue {
  border: #0074b4;
}

* {
  box-sizing: border-box;
}

.usp-container svg {
  width: 4em;
  height: 4rem;
  padding: 0.15rem;
  overflow: visible;
}

/* hide radio buttons */

input[type="radio"][name^="star-"] {
  position: absolute; /* Ensure radio inputs do not interfere with layout */
  width: 0;
  height: 0;
  opacity: 0;
  margin-left: -2px;
}

/* hide source svg */
.star-source {
  width: 0;
  height: 0;
  visibility: hidden;
}

/* set initial color to transparent so fill is empty */
.star {
  color: transparent;
  transition: color 0.2s ease-in-out;
}

/* set direction to row-reverse so 5th star is at the end and ~ can be used to fill all sibling stars that precede last starred element */
.star-container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}

label:hover ~ label .star,
svg.star:hover,
input[type="radio"][name^="star-"]:focus ~ label .star,
input[type="radio"][name^="star-"]:checked ~ label .star {
  color: #0074b4; /* Color for stars on hover or checked */
}

input[type="radio"][name^="star-"]:checked + label .star {
  animation: starred 0.5s; /* Animation for checked star */
}

input[type="radio"][name^="star-"]:checked + label {
  animation: scaleup 1s; /* Animation for the label when checked */
}

.faq {
  background: rgb(0, 116, 180);
  background: linear-gradient(
    180deg,
    rgba(0, 116, 180, 1) 0%,
    rgba(160, 211, 255, 1) 100%
  );
  color: white;
}

/* @media (width < 1280px) {

  header nav > ul > li:not(.login, .mobile-nav-toggle) {
    display: none;
    }

  header nav > ul > li.mobile-nav-toggle {
    display: list-item;
    }
} */

.usp-item {
  width: 20%;
}

@media (width < 1280px) {
  input#mobile-nav-toggler:checked ~ nav.mobile {
    display: block;
  }

  body:has(input#mobile-nav-toggler:checked) section,
  body:has(input#mobile-nav-toggler:checked) footer .logo,
  body:has(input#mobile-nav-toggler:checked) footer form,
  body:has(input#mobile-nav-toggler:checked) footer nav,
  body:has(input#mobile-nav-toggler:checked) .below-footer {
    display: none;
  }
}

div.below-header {
  background-color: var(--colour-grey);
  color: var(--colour-dark);
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
  user-select: none;
}
div.below-header .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: calc(var(--padding-inline) / -1);
  margin-right: calc(var(--padding-inline) / -1);
  overflow: hidden;
}
div.below-header .container > * {
  margin-bottom: 0;
}
div.below-header a.trustpilot {
  display: inline-flex;
  gap: var(--gap-small);
  align-items: center;
}
div.below-header a.trustpilot i {
  font-size: 0.625em;
}
div.below-header a.trustpilot svg {
  display: inline-block;
  height: 1em;
  scale: 1.375;
}
div.below-header a {
  display: block;
  padding-inline: var(--padding-large);
  padding-block: var(--padding-large);
  animation: padding-shrink linear;
  animation-timeline: scroll(root block);
  animation-range: var(--shrink-start) var(--shrink-end);
  animation-fill-mode: forwards;
  color: var(--colour-dark);
  text-decoration: none;
}
div.below-header a:hover span,
div.below-header a:hover strong {
  text-decoration: underline;
}
div.below-header a.prospectus {
  background-color: var(--colour-accent);
  color: var(--colour-dark);
}

@media (width < 768px) {
  .hero-sec-img {
    border-radius: 2%;
    width: 100%;
    height: 210px;
    float: inline-end;
  }
  div.below-header a.trustpilot {
    display: none;
  }
  div.below-header a.prospectus {
    flex-grow: 1;
    text-align: center;
  }

  .usps {
    display: block !important;
    justify-content: space-between;
  }

  .hero {
    padding-left: 20%;
    padding-right: 20%;
  }

  .hide-mobile {
    display: none;
  }

  .testimonial-item:nth-child(n + 4) {
    display: none;
  }

  .usp-item {
    width: 100% !important;
  }
}

/* Sections (Generic styles only, see section/*.css for specifics) */

section {
  padding-block: var(--padding-x-large);
}

/* Footer */

footer {
  background-color: var(--colour-primary-light);
  padding-block: var(--padding-xxx-large);
  user-select: none;
}

footer .layout > .container {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-medium);
}
footer .layout > .container > * {
  flex-basis: 0;
  flex-grow: 2;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
footer .layout > .container > .nav-contact {
  justify-content: space-between;
  gap: var(--gap-medium);
}
footer .layout > .container > .nav-contact nav {
  flex-grow: 1;
  margin-bottom: var(--margin-medium);
}
footer .layout > .container > .nav-contact ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-small) var(--gap-medium);
  margin-top: 0;
  margin-inline: 0;
  padding-inline: 0;
  list-style-type: none;
}
footer .layout > .container > .nav-contact ul li {
  margin-inline: 0;
}
footer .layout > .container > .nav-contact ul li a {
  color: var(--colour-dark);
  text-decoration: none;
}
footer .layout > .container > .nav-contact ul li a:hover {
  text-decoration: underline;
}
footer .layout > .container > .nav-contact > p {
  font-size: 1.25em;
  margin-bottom: 0;
}
footer .layout > .container > .nav-contact > p.email {
  overflow: hidden;
  text-overflow: ellipsis;
}
footer .layout > .container > .nav-contact > p a {
  color: var(--colour-primary);
  text-decoration: none;
}
footer .layout > .container > .nav-contact > p a:hover {
  text-decoration: underline;
}
footer .layout > .container > .logo {
  border-inline: 1px solid var(--colour-dark);
  flex-grow: 1;
}
footer .layout > .container > .logo svg {
  display: block;
  height: 50%;
}
footer .layout > .container > .social-newsletter {
  justify-content: space-between;
  gap: var(--gap-medium);
}
footer .layout > .container > .social-newsletter ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-medium);
  margin-inline: 0;
  padding-inline: 0;
  list-style-type: none;
}
footer .layout > .container > .social-newsletter ul li {
  margin-inline: 0;
  font-size: 1.5em;
}
footer .layout > .container > .social-newsletter ul li a {
  display: block;
  color: var(--colour-primary);
  transition: color var(--transition-speed-x-fast) ease-in-out;
}
footer .layout > .container > .social-newsletter ul li a:hover {
  color: var(--colour-dark);
}

@media (width >= 1440px) {
  footer .layout > .container > .social-newsletter ul {
    justify-content: flex-end;
  }

  footer .layout > .container > .social-newsletter form fieldset {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  footer .layout > .container > .social-newsletter form fieldset *:last-child {
    margin-bottom: 0;
  }
  footer .layout > .container > .social-newsletter form legend {
    text-align: right;
    text-transform: uppercase;
  }
  footer .layout > .container > .social-newsletter form input {
    background-color: var(--colour-white);
    width: 20em;
  }
}

@media (width < 1440px) {
  footer .layout > .container {
    flex-direction: column;
  }
  footer .layout > .container > .logo {
    order: -1;
    border-inline: 0;
  }
  footer .layout > .container > .logo svg {
    height: 160px;
  }
  footer .layout > .container > .logo svg path:not(.wing) {
    display: none;
  }
  footer .layout > .container > .nav-contact nav {
    order: 3;
    max-width: calc(768px - var(--padding-medium));
    margin-bottom: 0;
    margin-top: var(--margin-medium);
  }
}

@media (width < 768px) {
  footer .layout > .container > .nav-contact ul {
    grid-template-columns: repeat(2, 1fr);
  }
  footer .layout > .container > .nav-contact > p {
    font-size: 1em;
  }
  footer form .input-button input {
    width: 100px;
    flex-grow: 1;
  }
}

@media (width < 435px) {
  footer .layout > .container > .nav-contact ul {
    grid-template-columns: 1fr;
  }
}

div.below-footer {
  background-color: var(--colour-dark);
  color: var(--colour-white);
  padding-block: var(--padding-x-large);
}
div.below-footer p {
  text-align: center;
  text-wrap: balance;
}
div.below-footer p.address {
  margin-bottom: var(--margin-x-small);
  font-size: 1.125em;
}
div.below-footer p.registration {
  margin-bottom: 0;
  font-size: 0.875em;
}

section.with-blocks {
  position: relative;
}
section.with-blocks::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 100%;
  pointer-events: none;
  z-index: -1;
}
section.with-blocks.blocks-right::after {
  background-image: url("../media/elements/blocks-right.svg");
}
section.with-blocks.blocks-left::after {
  background-image: url("../media/elements/blocks-left.svg");
}
section.with-blocks.blocks-square-right::after {
  background-image: url("../media/elements/blocks-square-right.svg");
}

.error {
  text-align: center;
}
.error.hidden {
  display: none;
}
.error svg {
  margin-bottom: var(--margin-medium);
}
.error p.problem {
  font-size: 1.8em;
  color: var(--colour-primary);
}
.error p.reason {
  font-size: 1.1em;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loader {
  width: 100%;
  text-align: center;
  margin: var(--margin-large) 0;
}
.loader.hidden {
  display: none;
}
.loader i {
  animation: spin 1400ms infinite linear;
  font-size: 2.5em;
  color: var(--colour-primary);
}

/* Custom Styles */
.background-primary {
  background-color: var(--colour-primary);
}

.background-black {
  background-color: var(--colour-accent);
}

.background-white {
  background-color: var(--colour-off-white);
}

.pill-width {
  width: 250px;
}

.inter {
  font-family: var(--font-inter) !important;
}

.secondary-font {
  font-family: var(--font-secondary) !important;
}

#book-now {
  scroll-margin-top: 130px;
}

/* Calendar pills scroll and blur */
/* https://pqina.nl/blog/fade-out-overflow-using-css-mask-image/ */
.masked-overflow {
  --scrollbar-width: 8px;
  --mask-height: 15px;
  overflow-y: auto;
  max-height: 420px;
  padding-bottom: var(--mask-height);
  padding-top: calc(var(--mask-height) - 10px);
  --mask-image-content: linear-gradient(
    to bottom,
    transparent,
    black var(--mask-height),
    black calc(100% - var(--mask-height)),
    transparent
  );
  --mask-size-content: calc(100% - var(--scrollbar-width)) 100%;
  --mask-image-scrollbar: linear-gradient(black, black);
  --mask-size-scrollbar: var(--scrollbar-width) 100%;
  mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
  mask-size: var(--mask-size-content), var(--mask-size-scrollbar);
  mask-position: 0 0, 100% 0;
  mask-repeat: no-repeat, no-repeat;
}

.client-hours {
  box-shadow: -12px 12px 0 -4px var(--colour-primary),
    -12px 12px 0 0 var(--colour-black);
  font-size: 8em;
  font-family: var(--font-primary);
}

.m-negative-2 {
  margin-top: -2rem;
}

.accreditation-card-lighpurple {
  box-shadow: -12px 12px 0 -3px var(--colour-primary),
    -12px 12px 0 0 var(--colour-black);
  font-family: var(--font-primary);
}

.accreditation-card-darkpurple {
  box-shadow: -12px 12px 0 -3px var(--colour-secondary),
    -12px 12px 0 0 var(--colour-black);
  font-family: var(--font-primary);
}

.accreditation-card-white {
  box-shadow: -12px 12px 0 -3px var(--colour-off-white),
    -12px 12px 0 0 var(--colour-black);
  font-family: var(--font-primary);
}

.bio-content {
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bio-content.expanded {
  max-height: none;
}

.badge-over-image {
  position: absolute;
  top: -40px;
  right: -40px;
  z-index: 2;
  width: 90px;
}

#read-more-btn {
  font-family: var(--font-primary);
}

.border-3-inside-faqs {
  border-radius: 0.68rem;
}

/* Background designs */
.therapist-wave {
  background-image: url("/src/images/assets/shapes/purple/waves.png"),
    url("/src/images/assets/shapes/purple/circle-triangle.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: right 20% top 2%, right 5% bottom 3%;
  background-size: auto auto, 130px 130px;
}

.white-strip-criss-cross {
  background-image: url("/src/images/assets/shapes/purple/crisscross.svg");
  background-repeat: no-repeat;
  background-position: bottom 0 right 10%;
  background-clip: border-box;
  background-size: auto 100%;
}

.therapist-about-lines-and-wave {
  background-image: url("/src/images/assets/shapes/purple/lines.svg"),
    url("/src/images/assets/shapes/purple/wave.svg");
  background-repeat: no-repeat;
  background-position: left -40px bottom 0, right 40px bottom 50px;
  background-size: auto auto, 150px auto;
}

.intro-dots-and-squares {
  background-image: url("/src/images/assets/shapes/purple/dots.svg"),
    url("/src/images/assets/shapes/purple/purple-squares.svg"),
    url("/src/images/assets/shapes/white/squares.svg");
  background-repeat: no-repeat;
  background-position: left -20px top 0, right 10% top 65px, right 0 bottom 0;
  background-size: 5% auto, auto auto, auto auto;
}

.therapists-wave {
  background-image: url("/src/images/assets/shapes/purple/purple-wave.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%; /* center both horizontally and vertically */
}

.therapists-about-criss-cross {
  background-image: url("/src/images/assets/shapes/purple/crisscross.svg");
  background-repeat: no-repeat;
  background-position: bottom 0px right 10%;
}

.homepage-white-criss-cross-dots {
  background-image: url("/src/images/assets/shapes/white/crisscross.svg"),
    url("/src/images/assets/shapes/white/crisscross.svg"),
    url("/src/images/assets/shapes/white/crisscross.svg"),
    url("/src/images/assets/shapes/white/dots.svg"),
    url("/src/images/assets/shapes/white/dots.svg");
  background-repeat: no-repeat;
  background-position: top 0 left 0, top 0 left 100px, top 0 left 200px,
    bottom 0 right 0, bottom 0 right 100px;
  background-size: auto auto, auto auto, auto auto, auto auto, auto auto;
}

.how-it-work-purple-wave {
  background-image: url("/src/images/assets/shapes/purple/purple-wave.svg");
  background-repeat: no-repeat;
  background-position: bottom 25px left 35%;
}

.how-it-works-white-wave {
  background-image: url("/src/images/assets/shapes/white/wave-flipped.svg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: bottom 0 right 35%;
}

.faq-squares {
  background-image: url("/src/images/assets/shapes/purple/purple-squares.svg");
  background-repeat: no-repeat;
  background-position: right 0 bottom -1px;
}

.trusted-by-lines {
  background-image: url("/src/images/assets/shapes/purple/lines.svg"),
    url("/src/images/assets/shapes/purple/waves.png");
  background-repeat: no-repeat;
  background-position: left 0 bottom 0, right 0 top 10px;
  background-size: auto auto, auto auto;
}

.header-crisscross {
  background-image: url("/src/images/assets/shapes/purple/crisscross.svg"),
    url("/src/images/assets/shapes/purple/crisscross-horizontal.svg");
  background-repeat: no-repeat;
  background-position: left 0 bottom 0, right 0 top 0px;
  background-size: auto auto, auto auto;
}

.editorial-circle-triangle {
  background-image: url("/src/images/assets/shapes/purple/circle-triangle.svg");
  background-repeat: no-repeat;
  background-position: right 5% bottom 3%;
  background-size: 130px 130px;
}

.blog-wave {
  background-image: url("/src/images/assets/shapes/white/wave.svg");
  background-repeat: no-repeat;
  background-position: right 0 bottom 30%;
  background-size: 100% auto;
}

.faq-crisscross-dots {
  background-image: url("/src/images/assets/shapes/purple/crisscross.svg"),
    url("/src/images/assets/shapes/purple/dots.svg");
  background-repeat: no-repeat;
  background-position: top 30% left 0, bottom 30% right 0;
  background-size: auto auto, auto auto;
}

.editorial-crisscross-dots {
  background-image: url("/src/images/assets/shapes/white/crisscross.svg"),
    url("/src/images/assets/shapes/white/dots.svg");
  background-repeat: no-repeat;
  background-position: top 30% left 0, bottom 30% right 0;
  background-size: auto auto, auto auto;
}

/* End Background Designs*/

@media (max-width: 991.98px) {
  .client-hours {
    font-size: 5em;
  }
}

@media (max-width: 767.98px) {
  .trusted-by-lines {
    background-image: url("/src/images/assets/shapes/purple/lines.svg");
    background-repeat: no-repeat;
    background-position: left 0 bottom 0;
    background-size: auto auto;
  }

  .homepage-white-criss-cross-dots {
    background-image: url("/src/images/assets/shapes/white/dots.svg"),
      url("/src/images/assets/shapes/white/dots.svg");
    background-repeat: no-repeat;
    background-position: bottom 0 right 0, bottom 0 right 100px;
    background-size: auto auto, auto auto;
  }

  .intro-dots-and-squares {
    background-image: url("/src/images/assets/shapes/purple/dots.svg"),
      url("/src/images/assets/shapes/white/squares.svg");
    background-repeat: no-repeat;
    background-position: left 1% top -10%, right 0 bottom 0;
    background-size: 10% auto, auto auto;
  }

  .therapist-wave {
    background-image: url("/src/images/assets/shapes/purple/waves.png");
    background-repeat: no-repeat;
    background-position: bottom 2% left 2%;
  }

  .white-strip-criss-cross {
    background-image: url("/src/images/assets/shapes/purple/crisscross.svg");
    background-repeat: no-repeat;
    background-position: bottom 0 right -30px;
    background-clip: border-box;
    background-size: auto 100%;
  }

  .therapist-about-lines-and-wave {
    background-image: none;
  }

  .therapists-wave {
    background-image: url("/src/images/assets/shapes/purple/purple-wave.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: auto 40%;
  }

  .therapists-about-criss-cross {
    background-image: url("/src/images/assets/shapes/purple/crisscross.svg");
    background-repeat: no-repeat;
    background-position: bottom 0px right 0px;
    background-size: auto 30%;
  }
  .client-hours {
    font-size: 5em;
    box-shadow: -12px 12px 0 -4px var(--colour-primary),
      -12px 12px 0 0 var(--colour-black);
    font-family: var(--font-primary);
    margin-left: 12px;
    margin-top: 0px;
  }

  .accreditation-card-lighpurple {
    margin-left: 12px;
  }

  .accreditation-card-darkpurple {
    margin-left: 12px;
  }

  .accreditation-card-white {
    margin-left: 12px;
  }

  .m-negative-2 {
    margin-top: -2rem;
  }

  .badge-over-image {
    position: absolute;
    top: -15px;
    right: -10px;
    z-index: 2;
    width: 50px;
  }

  .blog-wave {
    background-image: none;
  }
}

/* Calendar Times Custom Buttons*/
.btn-calendar {
  display: inline-block;
  color: #fff;
  background-color: var(--colour-secondary, #9a6db5);
  border: 1px solid var(--colour-secondary, #9a6db5);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: var(--radius-medium, 5px);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  text-align: center;
  user-select: none;
}

.btn-calendar:hover,
.btn-calendar:focus {
  color: #fff;
  background-color: var(--colour-accent);
  border-color: var(--colour-accent);
}

.btn-calendar.active,
.btn-calendar:active,
.btn-check:checked + .btn-calendar {
  color: #fff;
  background-color: var(--colour-accent);
  border-color: var(--colour-accent);
  box-shadow: 0 0 0 0.2rem rgba(154, 109, 181, 0.25);
}

a {
  color: var(--colour-accent);
}

.fa-brands {
  font-size: 1.5em !important;
}

body {
  padding-top: 66px !important;
}

@media (min-width: 992px) {
  body {
    padding-top: 106px !important;
  }
}
.dropdown-menu {
  border: none !important;
}
.dropdown:hover > .dropdown-menu {
  display: block;
  margin-top: 0;
}

.dropdown-menu-grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 992px) {
  .dropdown-menu-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .dropdown-menu {
    border: 1px solid #dee2e6 !important; /* Bootstrap default, or your preferred color */
  }
}

.dropdown-toggle::after {
  font-size: 1.1em;
  margin-left: 0.08em;
  vertical-align: 0.19em;
}

#blog-content h1,
#blog-content h2,
#blog-content h3,
#blog-content h4,
#blog-content h5,
#blog-content h6,
#blog-content {
  font-family: var(--font-inter) !important;
}

.pagination {
  font-family: var(--font-inter) !important;
}

/* Overlap image and card only on large screens - About Us */
@media (min-width: 992px) {
  .overlap-row {
    position: relative;
    min-height: 350px;
  }
  .overlap-card-container {
    position: relative;
    z-index: 2;
  }
  .overlap-card {
    position: relative;
    right: -5%; /* Move card right to overlap image */
    z-index: 2;
  }
  .overlap-image-container {
    position: absolute;
    top: 35%;
    right: 19%;
    transform: translateY(-50%) translateX(30%);
    z-index: 1;
    display: flex;
    align-items: center;
    height: 100%;
  }

  /* Reversed overlap for second row */
  .overlap-card-container-reverse {
    position: relative;
    z-index: 2;
  }
  .overlap-card-reverse {
    position: relative;
    left: 95%; /* Move card left to overlap image */
    z-index: 2;
  }
  .overlap-image-container-reverse {
    position: absolute;
    top: 58%;
    left: 18%;
    transform: translateY(-50%) translateX(-30%);
    z-index: 1;
    display: flex;
    align-items: center;
    height: 100%;
  }
}

/* Overlap image and card only on large screens - Homepage */
@media (min-width: 992px) {
  .overlap-row-home {
    position: relative;
    min-height: 350px;
  }
  .overlap-card-container-home {
    position: relative;
    z-index: 2;
  }
  .overlap-card-home {
    position: relative;
    right: -5%; /* Move card right to overlap image */
    z-index: 2;
  }
  .overlap-image-container-home {
    position: absolute;
    top: 43%;
    right: 19%;
    transform: translateY(-50%) translateX(30%);
    z-index: 1;
    display: flex;
    align-items: center;
    height: 100%;
  }

  /* Reversed overlap for second row */
  .overlap-card-container-reverse-home {
    position: relative;
    z-index: 2;
  }
  .overlap-card-reverse-home {
    position: relative;
    left: 95%; /* Move card left to overlap image */
    z-index: 2;
  }
  .overlap-image-container-reverse-home {
    position: absolute;
    top: 42%;
    left: 18%;
    transform: translateY(-50%) translateX(-30%);
    z-index: 1;
    display: flex;
    align-items: center;
    height: 100%;
  }
}

.embed-container {
  position: relative;
  width: 100%; /* Ensure container stretches to parent width */
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Custom scrollbar for available-times */
#available-times {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--colour-secondary) transparent;
}
#available-times::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: transparent;
}
#available-times::-webkit-scrollbar-thumb {
  background: var(--colour-secondary);
  border-radius: 4px;
}
#available-times::-webkit-scrollbar-track {
  background: transparent;
}
#available-times::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

/* Therapist Specialisms button Style */
.specialisms-toggle {
  font-size: 1rem;
  color: #222;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  vertical-align: middle;
  font-family: var(--font-inter);
}
.specialisms-toggle .toggle-icon {
  transition: transform 0.2s;
}

.hidden-pill {
  display: none !important;
}

/*A-Z Active button*/
.active-btn {
  background-color: var(--colour-primary);
}

.az-letter:hover {
  background-color: var(--colour-primary);
}

.dropdown-specialism-item {
  cursor: pointer;
  transition: background 0.2s;
}
.dropdown-specialism-item:hover,
.dropdown-specialism-item:focus {
  background: #f0f0f0;
  border-radius: 4px;
}