 /*burger menu stuff start */
html, body {
  margin: 0;
  height: 100%;
  font-size: 15px;
}

* {
  box-sizing: border-box;
  font-family: "Lato-Regular", "Helvetica", "Arial", "sans-serif";
}

/*reset*/
body, h1, h2, h3, h4, p, a, span, ul, li { padding: 0; margin: 0; font-weight: normal; text-decoration: none; list-style: none; }


@font-face {
  font-family: "Lato-Regular";
  src: url("/css/font/Lato-Regular.ttf");
  src: url("/css/font/Lato-Regular.ttf") format("ttf"),
  url("/css/font/Lato-Regular.ttf") format("ttf"),
}

@font-face {
  font-family: "Lato-Bold";
  src: url("/css/font/Lato-Bold.ttf");
  src: url("/css/font/Lato-Bold.ttf") format("ttf"),
  url("/css/font/Lato-Bold.ttf") format("ttf"),
}

@font-face {
  font-family: "Lato-Italic";
  src: url("/css/font/Lato-Italic.ttf");
  src: url("/css/font/Lato-Italic.ttf") format("ttf"),
  url("/css/font/Lato-Italic.ttf") format("ttf"),
}


.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #FFF;
  color: #FFF;
  height: 90px;
  padding: 1em;
}

.header-nav {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
  order: 2;
}

.header-nav > a {
  margin: 0 1rem;
}

.menu-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #000;
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

.header-nav > a { color: var(--black); }

@media (max-width: 841px) {
  .menu-button-container {
    display: flex;
  }
  .header-nav {
    position: absolute;
    top: 0;
    margin-top: 75px;
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }
  #menu-toggle ~ .header-nav a {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    opacity: 0;
  }
  #menu-toggle:checked ~ .header-nav a {
    border: 1px solid #333;
    height: 2.5em;
    padding: 0.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    opacity: 1;
  }
  .header-nav > a {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: white;
    background-color: #222;
  }
  .header-nav > a:not(:last-child) {
    border-bottom: 1px solid #444;
  }
}
/* burger menu stuff End */




/*utils*/

:root {
    --black: #000;
    --white: #FFF;
    --orange: #E6836C;
    --peach: #fdecdb;
    --peach-contrast: #EFE3DD;
    --dark-peach: #F2C1B5;
    --dark: #333333;
    --near-black: #323232;
    --grey: #ABA594;
    --max-width: 1283px;
  }


  /* desktop/mobile */
  @media(max-width: 841px) {
    .desktop { display: none; }
  }

  @media(min-width: 842px) {
    .mob {display: none;}
  }

  /* font controls START */
  /* colours */
  .c-black { color: var(--black); }
  .c-white { color: var(--white); }
  .c-orange { color: var(--orange); }
  .c-peach { color: var(--peach); }
  .c-dark { color: var(--dark); }
  .c-grey { color: var(--grey); }
  
  /* weights */
  .bold { font-family: Lato-Bold; font-weight: 600; }
  .regular { font-weight: 300; }
  .italics { font-style: italic; }

  /* sizes */
  .f-smaller { font-size: 3vw; }
  .f-normal { font-size: 4vw; }
  .f-bigger { font-size: 5vw; padding-bottom: 0.5em; }
  .f-biggest { font-size: 8vw; line-height: 1.25; }

  @media (min-width: 768px) {
    .f-smaller { font-size: 1.75vw; }
    .f-normal { font-size: 2.2vw; }
    .f-bigger { font-size: 3.5vw }
    .f-biggest { font-size: 6vw; }
  }
  
  @media (min-width: 1024px) {
    .f-smaller { font-size: 1.25vw; }
    .f-normal { font-size: 1.7vw; }
    .f-bigger { font-size: 2.5vw; }
    .f-biggest { font-size: 5vw; }
  }
  
  @media (min-width: 1366px) {
    .f-smaller { font-size: 1vw; }
    .f-normal { font-size: 1.5vw; }
    .f-bigger { font-size: 2vw; }
    .f-biggest { font-size: 4vw; }
  }
  
  @media (min-width: 1750px) {
    .f-smaller { font-size: 0.65vw; }
    .f-normal { font-size: 1vw; }
    .f-bigger { font-size: 1.5vw; }
    .f-biggest { font-size: 3vw; }
  }
  

/*  Background colours - Start*/
    .bkg-black {background-color: var(--black) !important; }
    .bkg-white {background-color: var(--white) !important; }
    .bkg-orange {background-color: var(--orange) !important; }
    .bkg-peach {background-color: var(--peach) !important;}
    .bkg-near-black {background-color: var(--near-black) !important;}

    /*Casing - Start */
  .uppercase { text-transform: uppercase; }
  .lowercase { text-transform: lowercase; }
  .capitalize { text-transform: capitalize; }


    /*Buttons - Start */
    .btn-c-orange { background: transparent; border: 2px solid var(--orange); padding: 0.5em 1em; border-radius: 5px; }
    .threeD { -webkit-box-shadow: 13px 9px 5px -3px var(--dark-peach); box-shadow: 13px 9px 5px -3px var(--dark-peach); }
    .cta { border-radius: 26px; padding: 11px 28px; }
    .bordered { border: 1px solid var(--peach-contrast); padding: 0.5em; border-radius: 7px; }

/*positioning start */
    .centralised {display: flex; justify-content: center; align-items: center; text-align: center; }
  /*positioning end */

.full-img {width: 100%;}

.s-header { text-transform: uppercase; padding-bottom: 1.5em; }
.n-header { padding-bottom: 0.75em; }

section { position:relative; }

@media (min-width: 768px) {
  .bordered { padding: 2em; }
}
/*utils*/





/* heading styles */

.header-logo { order: 1; width: 73px; }
.header-testimonies { order: 2; }
.menu-button-container { order: 3; }

@media (min-width: 678px) {
  .header { justify-content: space-around; padding: 4em 0em; }
}

@media (min-width: 842px) {
  .header { width: 80%; margin: 0 auto; }
  }

@media (min-width: 1024px) {
  .header { width: 95%; justify-content: flex-start; gap: 1em; }
  .header-testimonies { margin-left: auto; }
}

@media (min-width: 1920px) {
  .header { max-width: var(--max-width); }
}

/* heading styles */
.hero-content {height: 9em;}



/* article styling */
#hero-content { text-align: center; padding: 3em 1.5em; background-image: url(/images/home/hero_mob.webp); background-repeat: no-repeat; background-size: cover; }
.content { padding: 15px; }

@media (min-width: 678px) {
  .content { max-width: 615px; margin: 2em auto; padding: 0; }
}

@media (min-width: 1024px) {
  #hero-content { background-image: url(/images/home/hero.webp); }
  .content { max-width: 745px; margin-bottom: 3em; }
}

@media (min-width: 1366px) {
  .content { max-width: 900px; margin: 3em auto 5em; }

}

@media (min-width: 1700px) {
  #hero-content { }
}


article { padding: 0 3.5em; text-align: center; }
article h3 { font-size: 25px; font-weight: bold; letter-spacing: -0.56px; margin: 0.5em 0; }
article p { opacity: 0.8; font-family: Gotham; font-size: 20px; font-weight: 300; font-stretch: normal; font-style: normal; line-height: 1.5; letter-spacing: -0.44px; }
article .cta { display: inline-block; margin: 1em 0 2em; }

@media (min-width: 1024px) {
  article { display: flex; flex-direction: row; gap: 5%; align-items: center; margin-bottom: 4em; margin-left:5%; }
  article .copy { padding: 0 5em; flex: 0 0 520px; }
  article.flip { flex-direction: row-reverse;}
  article.flip .copy { padding: 0 18% 0 0; }
  article.flip .image { margin-left: -10%; margin-right: 8%; }
}

@media (min-width: 1280px) {
  article .copy { flex: 0 0 637px; }
}

@media (min-width: 1440px) {
  article .copy { flex: 0 0 830px; padding: 0 16%; }
  article.flip .copy { padding: 0 30% 0 2%; }
  article h3 { font-size: 35px; font-weight: bold; letter-spacing: -0.78px; }
  article p { font-size: 25px; font-weight: 300; font-stretch: normal; font-style: normal; line-height: 1.6; letter-spacing: -0.56px; }
  article .cta { font-size: 20px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.5; letter-spacing: -0.44px; }
}

@media (min-width: 1536px) {
  article.flip { margin-bottom: 6em; }
}


@media (min-width: 1900px) {
  article .copy { flex: 0 0 1012px; }
  article.flip .copy { padding: 0 26% 0 3%; }
}
/* article styling */


/* testimony page */

.aTestinmony.slick-slide { padding: 2em;}

.aTestinmony.slick-slide:nth-child(5n+1) { background: linear-gradient(135deg, #f8e1f4, #d6e4ff); }
.aTestinmony.slick-slide:nth-child(5n+2) { background: linear-gradient(135deg, #fff3d6, #dff7f7); }
.aTestinmony.slick-slide:nth-child(5n+3) { background: linear-gradient(135deg, #dff5ea, #f9e3f3); }
.aTestinmony.slick-slide:nth-child(5n+4) { background: linear-gradient(135deg, #e8f9d2, #d4f5d8); }
.aTestinmony.slick-slide:nth-child(5n+5) { background: linear-gradient(135deg, #fde2d1, #ffe8c7); }

.aTestinmony .amens { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; }
.aTestinmony .amens img { width: 50px; }
.submit-testimony { display: block; width: fit-content; margin: 0 auto 3em; }

@media (min-width: 1024px) {
  .aTestinmony.slick-slide { padding: 2em;}
}

/* testimony page */




/* testimony form */
form.testimony-form { margin: 0 auto; padding: 2em; max-width: 700px; }
form.testimony-form textarea, form.testimony-form input { display: block; width: 100%; margin: 0 0 1em; border-radius: 7px; border: 1px solid; border-color: var(--near-black); padding: 1em; }

/* testimony form */