/*
Theme Name: 203 Base HydroJet
Template: 203base
Version: 1.0.0
*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
/* Color styles */
:root {
  --black: rgba(0, 0, 0, 1);
  --white: rgba(255, 255, 255, 1);
  --grey: rgba(228, 226, 223, 1);
  --primary--primary-50: rgba(234, 235, 237, 1);
  --primary--primary-100: rgba(189, 194, 200, 1);
  --primary--primary-200: rgba(157, 165, 173, 1);
  --primary--primary-300: rgba(112, 124, 135, 1);
  --primary--primary-400: rgba(85, 98, 112, 1);
  --primary--primary-500: rgba(42, 59, 76, 1);
  --primary--primary-600: rgba(38, 54, 69, 1);
  --primary--primary-700: rgba(30, 42, 54, 1);
  --primary--primary-800: rgba(23, 32, 42, 1);
  --primary--primary-900: rgba(18, 25, 32, 1);
  --secondary--secondary-50: rgba(230, 248, 250, 1);
  --secondary--secondary-100: rgba(176, 232, 238, 1);
  --secondary--secondary-200: rgba(138, 221, 230, 1);
  --secondary--secondary-300: rgba(84, 205, 219, 1);
  --secondary--secondary-400: rgba(51, 196, 212, 1);
  --secondary--secondary-500: rgba(0, 181, 201, 1);
  --secondary--secondary-600: rgba(0, 165, 183, 1);
  --secondary--secondary-700: rgba(0, 129, 143, 1);
  --secondary--secondary-800: rgba(0, 100, 111, 1);
  --secondary--secondary-900: rgba(0, 76, 84, 1);
  --background-1--background-1-50: rgba(255, 255, 255, 1);
  --background-1--background-1-100: rgba(255, 255, 255, 1);
  --background-1--background-1-200: rgba(255, 255, 255, 1);
  --background-1--background-1-300: rgba(255, 255, 255, 1);
  --background-1--background-1-400: rgba(242, 242, 242, 1);
  --background-1--background-1-500: rgba(255, 255, 255, 1);
  --background-1--background-1-600: rgba(232, 232, 232, 1);
  --background-1--background-1-700: rgba(181, 181, 181, 1);
  --background-1--background-1-800: rgba(140, 140, 140, 1);
  --background-1--background-1-900: rgba(107, 107, 107, 1);
  --background-2--background-2-50: rgba(254, 254, 254, 1);
  --background-2--background-2-100: rgba(252, 252, 253, 1);
  --background-2--background-2-200: rgba(250, 251, 252, 1);
  --background-2--background-2-300: rgba(248, 249, 250, 1);
  --background-2--background-2-400: rgba(246, 248, 249, 1);
  --background-2--background-2-500: rgba(244, 246, 248, 1);
  --background-2--background-2-600: rgba(222, 224, 226, 1);
  --background-2--background-2-700: rgba(173, 175, 176, 1);
  --background-2--background-2-800: rgba(134, 135, 136, 1);
  --background-2--background-2-900: rgba(102, 103, 104, 1);
  --accent-1--accent-1-50: rgba(255, 241, 236, 1);
  --accent-1--accent-1-100: rgba(255, 210, 195, 1);
  --accent-1--accent-1-200: rgba(255, 189, 165, 1);
  --accent-1--accent-1-300: rgba(255, 159, 124, 1);
  --accent-1--accent-1-400: rgba(255, 140, 99, 1);
  --accent-1--accent-1-500: rgba(255, 111, 60, 1);
  --accent-1--accent-1-600: rgba(232, 101, 55, 1);
  --accent-1--accent-1-700: rgba(181, 79, 43, 1);
  --accent-1--accent-1-800: rgba(140, 61, 33, 1);
  --accent-1--accent-1-900: rgba(107, 47, 25, 1);
  --accent-2--accent-2-50: rgba(237, 237, 237, 1);
  --accent-2--accent-2-100: rgba(199, 199, 199, 1);
  --accent-2--accent-2-200: rgba(172, 172, 172, 1);
  --accent-2--accent-2-300: rgba(134, 134, 134, 1);
  --accent-2--accent-2-400: rgba(111, 111, 111, 1);
  --accent-2--accent-2-500: rgba(75, 75, 75, 1);
  --accent-2--accent-2-600: rgba(68, 68, 68, 1);
  --accent-2--accent-2-700: rgba(53, 53, 53, 1);
  --accent-2--accent-2-800: rgba(41, 41, 41, 1);
  --accent-2--accent-2-900: rgba(32, 32, 32, 1);
  --accent-3--accent-3-50: rgba(233, 234, 235, 1);
  --accent-3--accent-3-100: rgba(186, 189, 192, 1);
  --accent-3--accent-3-200: rgba(152, 157, 162, 1);
  --accent-3--accent-3-300: rgba(105, 112, 119, 1);
  --accent-3--accent-3-400: rgba(76, 85, 93, 1);
  --accent-3--accent-3-500: rgba(31, 42, 52, 1);
  --accent-3--accent-3-600: rgba(28, 38, 47, 1);
  --accent-3--accent-3-700: rgba(22, 30, 37, 1);
  --accent-3--accent-3-800: rgba(17, 23, 29, 1);
  --accent-3--accent-3-900: rgba(13, 18, 22, 1);
}

:root {
  --base-font-size: 18px;
  --font-heading-family: "Montserrat", serif;
  --font-heading-style: normal;
  --font-heading-weight-regular: 400;
  --font-heading-weight-medium: 500;
  --font-heading-weight-semibold: 600;
  --font-heading-weight-bold: 700;
  --font-heading-weight-extrabold: 800;
  --font-body-family: "Source Sans 3", sans-serif;
  --font-body-style-normal: normal;
  --font-body-style-italic: italic;
  --font-body-weight-thin: 100;
  --font-body-weight-light: 300;
  --font-body-weight-regular: 400;
  --font-body-weight-bold: 700;
  --font-body-weight-black: 900;
}

.heading-font-regular {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight-regular);
  font-style: var(--font-heading-style);
}

.heading-font-medium {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight-medium);
  font-style: var(--font-heading-style);
}

.heading-font-semibold {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight-semibold);
  font-style: var(--font-heading-style);
}

.heading-font-bold {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight-bold);
  font-style: var(--font-heading-style);
}

.heading-font-extrabold {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight-extrabold);
  font-style: var(--font-heading-style);
}

.text-font-thin {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight-thin);
  font-style: var(--font-body-style-normal);
}

.text-font-light {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight-light);
  font-style: var(--font-body-style-normal);
}

.text-font-regular {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight-regular);
  font-style: var(--font-body-style-normal);
}

.text-font-bold {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight-bold);
  font-style: var(--font-body-style-normal);
}

.text-font-black {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight-black);
  font-style: var(--font-body-style-normal);
}

.text-font-thin-italic {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight-thin);
  font-style: var(--font-body-style-italic);
}

.text-font-light-italic {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight-light);
  font-style: var(--font-body-style-italic);
}

.text-font-regular-italic {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight-regular);
  font-style: var(--font-body-style-italic);
}

.text-font-bold-italic {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight-bold);
  font-style: var(--font-body-style-italic);
}

.text-font-black-italic {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight-black);
  font-style: var(--font-body-style-italic);
}

/* Text-size styles */
/* base size: text---regular---normal (18px) */
:root {
  --heading---desktop---h1: 4.67rem;
  --heading---desktop---h2: 3.33rem;
  --heading---desktop---h3: 2.67rem;
  --heading---desktop---h4: 2.22rem;
  --heading---desktop---h5: 1.78rem;
  --heading---desktop---h6: 1.44rem;
  --heading---desktop---tagline: 1rem;
  --heading---mobile---h1: 2.5rem;
  --heading---mobile---h2: 2.25rem;
  --heading---mobile---h3: 2rem;
  --heading---mobile---h4: 1.5rem;
  --heading---mobile---h5: 1.25rem;
  --heading---mobile---h6: 1.12rem;
  --heading---mobile---tagline: 0.89rem;
  --text---large---light: 1.44rem;
  --text---large---normal: 1.44rem;
  --text---large---medium: 1.44rem;
  --text---large---semi--bold: 1.44rem;
  --text---large---bold: 1.44rem;
  --text---large---extra--bold: 1.44rem;
  --text---large---link: 1.44rem;
  --text---medium---light: 1.11rem;
  --text---medium---normal: 1.11rem;
  --text---medium---medium: 1.11rem;
  --text---medium---semi--bold: 1.11rem;
  --text---medium---bold: 1.11rem;
  --text---medium---extra--bold: 1.11rem;
  --text---medium---link: 1.11rem;
  --text---regular---light: 1rem;
  --text---regular---normal: 1rem;
  --text---regular---medium: 1rem;
  --text---regular---semi--bold: 1rem;
  --text---regular---bold: 1rem;
  --text---regular---extra--bold: 1rem;
  --text---regular---link: 1rem;
  --text---small---light: 0.89rem;
  --text---small---normal: 0.89rem;
  --text---small---medium: 0.89rem;
  --text---small---semi--bold: 0.89rem;
  --text---small---bold: 0.89rem;
  --text---small---extra--bold: 0.89rem;
  --text---small---link: 0.89rem;
  --text---tiny---light: 0.67rem;
  --text---tiny---normal: 0.67rem;
  --text---tiny---medium: 0.67rem;
  --text---tiny---semi--bold: 0.67rem;
  --text---tiny---bold: 0.67rem;
  --text---tiny---extra--bold: 0.67rem;
  --text---tiny---link: 0.67rem;
}

.colour-all-content-white h1, .colour-all-content-white p, .colour-all-content-white h2, .colour-all-content-white h3, .colour-all-content-white h4, .colour-all-content-white h5, .colour-all-content-white h6, .colour-all-content-white ul, .colour-all-content-white li, .colour-all-content-white i, .colour-all-content-white a, .colour-all-content-white .tagline, .colour-all-content-light h1, .colour-all-content-light p, .colour-all-content-light h2, .colour-all-content-light h3, .colour-all-content-light h4, .colour-all-content-light h5, .colour-all-content-light h6, .colour-all-content-light ul, .colour-all-content-light li, .colour-all-content-light i, .colour-all-content-light a, .colour-all-content-light .tagline {
  color: var(--white);
}
.colour-all-content-white a, .colour-all-content-light a {
  border-color: var(--white);
}

.colour-all-content-black h1, .section-203.sub-page-hero h1, .colour-all-content-black p, .section-203.sub-page-hero p, .colour-all-content-black h2, .section-203.sub-page-hero h2, .colour-all-content-black h3, .section-203.sub-page-hero h3, .colour-all-content-black h4, .section-203.sub-page-hero h4, .colour-all-content-black h5, .section-203.sub-page-hero h5, .colour-all-content-black h6, .section-203.sub-page-hero h6, .colour-all-content-black ul, .section-203.sub-page-hero ul, .colour-all-content-black li, .section-203.sub-page-hero li, .colour-all-content-black i, .section-203.sub-page-hero i, .colour-all-content-black a, .section-203.sub-page-hero a, .colour-all-content-black .tagline, .section-203.sub-page-hero .tagline, .colour-all-content-dark h1, .text-and-image-section.background-colour-styling h1, .colour-all-content-dark p, .text-and-image-section.background-colour-styling p, .colour-all-content-dark h2, .text-and-image-section.background-colour-styling h2, .colour-all-content-dark h3, .text-and-image-section.background-colour-styling h3, .colour-all-content-dark h4, .text-and-image-section.background-colour-styling h4, .colour-all-content-dark h5, .text-and-image-section.background-colour-styling h5, .colour-all-content-dark h6, .text-and-image-section.background-colour-styling h6, .colour-all-content-dark ul, .text-and-image-section.background-colour-styling ul, .colour-all-content-dark li, .text-and-image-section.background-colour-styling li, .colour-all-content-dark i, .text-and-image-section.background-colour-styling i, .colour-all-content-dark a, .text-and-image-section.background-colour-styling a, .colour-all-content-dark .tagline, .text-and-image-section.background-colour-styling .tagline {
  color: var(--black);
}
.colour-all-content-black a, .section-203.sub-page-hero a, .colour-all-content-dark a, .text-and-image-section.background-colour-styling a {
  border-color: var(--black);
}

/* Header */
.header {
  position: relative;
}

.header, .hero-banner-wrap {
  background: var(--background-1--background-1-400);
}

/* Hero Banner */
.hero-banner-wrap {
  padding: 20px 0 80px;
}

.hero-banner {
  border-radius: 0 36px;
}
.hero-banner a.cta-link {
  color: var(--black);
  margin: 20px 0 50px;
  padding: 10px 30px;
  background: var(--secondary--secondary-50);
  font-size: clamp(var(--text---medium---medium), 100% + 1vw, var(--text---medium---medium));
}
.hero-banner a.cta-link:hover {
  color: var(--black);
  transition: all 0.5s;
  background: var(--secondary--secondary-300);
}

.section-203.sub-page-hero {
  padding: 0;
  background: var(--background-1--background-1-400);
}
.section-203.sub-page-hero p {
  font-size: clamp(var(--text---regular---normal), 3vw, var(--text---large---normal));
}

.cta-link {
  position: relative;
  color: #fff !important;
  background: linear-gradient(104.036deg, #1e2a36 0%, #008a99 100%) !important;
  z-index: 1;
}
.cta-link:after {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background: linear-gradient(104.036deg, #2A3B4C 0%, #00B5C9 100%);
  opacity: 0;
  transition: all 0.3s ease-in-out;
  border-radius: 0 12px;
  z-index: -1;
}
.cta-link:hover:after {
  opacity: 1;
}

/* Text and Image section */
.text-and-image-section-wrapper {
  position: relative;
  padding: 112px 0;
}

.text-and-image-section {
  padding: 0;
  box-shadow: none;
  overflow: hidden;
  border-radius: 0 40px;
}
.text-and-image-section-standard {
  margin: 64px 0;
  position: relative;
  display: inline-block;
}
.text-and-image-section.background-colour-styling {
  position: static;
  top: auto;
}
@media (min-width: 992px) {
  .text-and-image-section.background-colour-styling {
    top: 20px;
    position: sticky;
    box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.4);
  }
  .text-and-image-section.background-colour-styling img {
    margin: 0;
  }
}
.text-and-image-section img {
  margin: 0;
  height: auto;
  width: inherit;
  border-radius: 0;
}
.text-and-image-section-img-left, .text-and-image-section-img-right {
  overflow: hidden;
}
.text-and-image-section-standard {
  box-shadow: none;
}
.text-and-image-section.background-colour-styling {
  padding: 0;
}
@media (min-width: 992px) {
  .text-and-image-section img {
    width: 100%;
    height: 100%;
  }
}

/* FAQ Section */
.faqs-section {
  background: var(--background-1--background-1-600);
}
.faqs-section-block {
  margin: 20px 0;
  border: 0 !important;
  background: var(--white);
  border-radius: 16px;
}
.faqs-section-block-question.active {
  background-color: var(--accent-1--accent-1-200);
}

/* Statistics Section */
.statistics-section {
  background: var(--background-1--background-1-600);
}

/* Contact & Map Section */
.contact-map {
  background: var(--background-2--background-2-500);
}
