/******************************************************************
Author:@rap4me
Stylesheet: Vendor Import Stylesheet
******************************************************************/
/******************************************************************
Table of contents

1.0 Google Fonts
******************************************************************/
/******************************************************************
1.0 Google Fonts
******************************************************************/
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css");
/******************************************************************
Author:@rap4me
Stylesheet: Variables Stylesheet
******************************************************************/
/******************************************************************
Table of contents

1.0 Media Query Breakpoints
2.0 Custom fields
******************************************************************/
/******************************************************************
1.0 Media Query Breakpoints
******************************************************************/
/*-----768px-------50% of tablet users-----------------------------*/
/*-----1024px -----20% of tablet users----11% of desktop users-----*/
/*-----1300px ----------------------------45% of desktop users-----*/
/*-----1680px ----------------------------20% of desktop users-----*/
/*-----2080px ----------------------------12% of desktop users-----*/
/******************************************************************
2.0 Custom fields
******************************************************************/
:root {
  --spacer: 1rem; /*-----16px-----*/
  --wrap-padding: 6%;
  --wrap-max: 77.5rem; /*-----1240px-----*/
  --padding-50: 0.5rem; /*-----12px-----*/
  --padding-100: 0.75rem; /*-----12px-----*/
  --padding-200: 1rem; /*-----12px-----*/
  --padding-300: 1.25rem; /*-----24px-----*/
  --padding-400: 1.75rem; /*-----12px-----*/
  --padding-500: 2rem; /*-----24px-----*/
  --padding-600: 2.25rem; /*-----36px-----*/
  --padding-700: 3rem; /*-----48px-----*/
  --padding-800: 3.75rem; /*-----60px-----*/
  --padding-900: 4.5rem; /*-----72px-----*/
  --gap-100: 0.5em;
  --gap-200: 1em;
  --gap-300: 1.5em;
  --gap-400: 2em;
  --gap-500: 3em;
  --gap-600: 4em;
  --border-radius-200: 0.213rem; /*-----5px-----*/
  --border-radius-400: 0.538rem; /*-----15px----*/
  --border-radius-600: 1.25rem; /*-----20px----*/
  --border-radius-pill: 500px; /*-----pill----*/
  --clr-white: hsl(0, 0%, 100%);
  --clr-black: hsl(0, 0%, 0%);
  --clr-neutral-100: #f5f5f5;
  --clr-neutral-200: #d7d7d7;
  --clr-neutral-400: #3c3c3c;
  --clr-neutral-900: #1c222b;
  --clr-primary-100: #facbcc;
  --clr-primary-400: #c33c20;
  --clr-bg: var(--clr-white);
  --clr-bg-accent: var(--clr-neutral-100);
  --clr-copy: var(--clr-neutral-900);
  --clr-heading: var(--clr-neutral-900);
  --clr-accent: var(--clr-primary-400);
  --clr-link: var(--clr-primary-400);
  --clr-link-hover: var(--clr-primary-400);
  --clr-btn: var(--clr-primary-400);
  --clr-btn-text: var(--clr-white);
  --clr-btn-hover: var(--clr-copy);
  --clr-btn-hover-text: var(--clr-white);
  --clr-border: var(--clr-neutral-200);
  --ff-primary: "Inter", sans-serif;
  --ff-secondary: "Work Sans", sans-serif;
  --fs-100: 0.625rem; /*----10px----*/
  --fs-200: 0.75rem; /*----12px----*/
  --fs-300: 0.875rem; /*----14px----*/
  --fs-350: 0.925rem; /*----14px----*/
  --fs-400: 1rem; /*----16px----*/
  --fs-450: 1.25rem; /*----34px----*/
  --fs-500: 1.5rem; /*----34px----*/
  --fs-600: 1.75rem; /*----46px----*/
  --fs-700: 1.85rem; /*----58px----*/
  --fs-800: 2.075rem; /*----78px---*/
  --fs-900: 2.875rem; /*----110px---*/
}

@media only screen and (min-width: 81.25em) {
  :root {
    --padding-300: 2rem; /*-----24px-----*/
    --padding-400: 3rem; /*-----48px-----*/
    --padding-500: 3.75rem; /*-----60px-----*/
    --padding-600: 4.5rem; /*-----72px-----*/
    --padding-700: 5.25rem; /*-----84px-----*/
    --padding-800: 6rem; /*-----96px-----*/
    --padding-900: 6.75rem; /*-----108px-----*/
    --fs-100: 0.725rem; /*----10px----*/
    --fs-200: 0.75rem; /*----12px----*/
    --fs-300: 0.875rem; /*----14px----*/
    --fs-400: 1.075rem; /*----16px----*/
    --fs-450: 1.15rem; /*----34px----*/
    --fs-500: 1.45rem; /*----34px----*/
    --fs-600: 1.55rem; /*----46px----*/
    --fs-700: 2.35rem; /*----58px----*/
    --fs-800: 2.75rem; /*----78px---*/
    --fs-900: 3.575rem; /*----110px---*/
  }
}
/******************************************************************
Author:@rap4me
Stylesheet: Mixins Stylesheet
******************************************************************/
/******************************************************************
Table of contents

1.0 Colour Schemes
2.0 Typography Schemes
    2.1 Typography Copy
    2.2 Typography Headings
    2.3 Typography Unique
3.0 Mobile Menu icon
******************************************************************/
/******************************************************************
1.0 Colour Schemes
******************************************************************/
/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}

/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
  5. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 1rem;
  height: auto;
  vertical-align: middle;
}

/*
  6. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
  font: inherit;
}

/*
  7. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/*
  8. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

/******************************************************************
Author: @warrengroom
Stylesheet: Base Stylesheet
******************************************************************/
/******************************************************************
Table of contents

1.0 Colors
2.0 Typography
3.0 Responsive variables

******************************************************************/
.skip-link {
  display: none;
}

/****************************************************************** 
1.0 Colors
******************************************************************/
body,
.section,
.header,
.footer,
.hero,
div,
.header ul ul {
  background-color: var(--clr-bg);
  color: var(--clr-copy);
  border-color: var(--clr-border);
  border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--clr-heading);
}

.decorative-number {
  color: var(--clr-accent);
}

a,
a:visited {
  color: var(--clr-link);
}
a:hover, a:focus,
a:visited:hover,
a:visited:focus {
  color: var(--clr-link-hover);
}
.wysiwyg a,
.wysiwyg a:visited {
  color: var(--clr-accent);
}
.footer .wysiwyg a,
.footer .wysiwyg a:visited {
  color: var(--clr-link);
}
.footer .wysiwyg a:hover, .footer .wysiwyg a:focus,
.footer .wysiwyg a:visited:hover,
.footer .wysiwyg a:visited:focus {
  color: var(--clr-link-hover);
}
.wysiwyg a:hover, .wysiwyg a:focus,
.wysiwyg a:visited:hover,
.wysiwyg a:visited:focus {
  color: var(--clr-link);
}

.color-scheme-light {
  --clr-bg: var(--clr-white);
  --clr-bg-accent: var(--clr-neutral-100);
  --clr-copy: var(--clr-neutral-900);
  --clr-heading: var(--clr-neutral-900);
  --clr-accent: var(--clr-primary-400);
  --clr-link: var(--clr-primary-400);
  --clr-link-hover: var(--clr-primary-400);
  --clr-btn: var(--clr-primary-400);
  --clr-btn-text: var(--clr-white);
  --clr-btn-hover: var(--clr-copy);
  --clr-btn-hover-text: var(--clr-white);
  --clr-border: var(--clr-neutral-200);
}

.color-scheme-grey {
  --clr-bg: var(--clr-neutral-100);
  --clr-bg-accent: var(--clr-white);
  --clr-copy: var(--clr-neutral-900);
  --clr-heading: var(--clr-neutral-900);
  --clr-accent: var(--clr-primary-400);
  --clr-link: var(--clr-primary-400);
  --clr-link-hover: var(--clr-copy);
  --clr-btn: var(--clr-primary-400);
  --clr-btn-text: var(--clr-white);
  --clr-btn-hover: var(--clr-copy);
  --clr-btn-hover-text: var(--clr-white);
  --clr-border: var(--clr-neutral-400);
}

.color-scheme-primary {
  --clr-bg: var(--clr-primary-400);
  --clr-bg-accent: var(--clr-primary-300);
  --clr-copy: var(--clr-white);
  --clr-heading: var(--clr-white);
  --clr-accent: var(--clr-primary-400);
  --clr-link: var(--clr-white);
  --clr-link-hover: var(--clr-neutral-900);
  --clr-btn: var(--clr-neutral-900);
  --clr-btn-text: var(--clr-white);
  --clr-btn-hover: var(--clr-white);
  --clr-btn-hover-text: var(--clr-neutral-900);
  --clr-border: var(--clr-primary-100);
}

.color-scheme-dark {
  --clr-bg: var(--clr-neutral-900);
  --clr-bg-accent: var(--clr-white);
  --clr-copy: var(--clr-white);
  --clr-heading: var(--clr-white);
  --clr-accent: var(--clr-primary-400);
  --clr-link: var(--clr-white);
  --clr-link-hover: var(--clr-primary-400);
  --clr-btn: var(--clr-primary-400);
  --clr-btn-text: var(--clr-white);
  --clr-btn-hover: var(--clr-primary-400);
  --clr-btn-hover-text: var(--clr-white);
  --clr-border: var(--clr-neutral-400);
}

/****************************************************************** 
2.0 Typography
******************************************************************/
body {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6,
.header .company-name,
strong,
b {
  font-family: var(--ff-secondary);
  font-weight: 600;
  text-wrap: balance;
}

.text-style-xl .text-style,
h1,
.text-style-h1 .text-style,
h2,
.text-style-h2 .text-style,
h3,
.text-style-h3 .text-style,
h4,
.text-style-h4 .text-style,
h5,
.text-style-h5 .text-style,
.header nav ul a {
  font-weight: 600;
}

body,
h6,
.text-style-h6 .text-style,
.text-style-small .text-style,
small {
  font-weight: 400;
}

/****************************************************************** 
3.0 Responsive variables
******************************************************************/
.show-mobile {
  display: block;
}
@media (min-width: 64em) {
  .show-mobile {
    display: none;
  }
}

.show-desktop {
  display: none;
}
@media (min-width: 64em) {
  .show-desktop {
    display: block;
  }
}

/******************************************************************
Author: @warrengroom
Stylesheet: Forms Stylesheet
******************************************************************/
/******************************************************************
Table of contents

1.0 Forms


******************************************************************/
/****************************************************************** 
1.0 Forms
******************************************************************/
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=url],
textarea,
select {
  width: 100%;
  padding-block: var(--padding-100);
  padding-inline: var(--padding-200);
  border: 1px;
  border-style: solid;
  border-color: var(--clr-border);
  border-radius: var(--border-radius-200);
  transition: all 0.3s ease, box-shadow 0.3s ease;
}
.header-language input[type=text],
.header-language input[type=email],
.header-language input[type=password],
.header-language input[type=tel],
.header-language input[type=url],
.header-language textarea,
.header-language select {
  padding-block: 6px;
  padding-inline: 12px;
}

select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; /* Remove default arrow */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMiAxMiIgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIj4gPHBhdGggZD0iTTAgMGwxMiAxMiAxMi0xMnoiIGZpbGw9IiM4ODgiPjwvcGF0aD4gPC9zdmc+"); /* Custom arrow */
  background-repeat: no-repeat;
  background-position: right 12px center; /* Position the arrow */
  background-size: 12px;
}

textarea {
  resize: vertical; /* Allows resizing only vertically */
}

/* Focus States */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--clr-primary-400); /* Highlighted border color */
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.3); /* Subtle shadow on focus */
  outline: none;
}

/* Label Styles */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
}

/******************************************************************
Author: @warrengroom
Stylesheet: Links Stylesheet
******************************************************************/
/******************************************************************
Table of contents

1.0 Links


******************************************************************/
/****************************************************************** 
1.0 Links
******************************************************************/
a,
a:visited {
  text-decoration: none;
  font-weight: 500;
  color: var(--clr-link);
  position: relative;
}
a:hover, a:focus,
a:visited:hover,
a:visited:focus {
  color: var(--clr-link-hover);
}

.link-style-button .link-style {
  display: inline-block;
  padding-block: var(--padding-50);
  padding-inline: var(--padding-200);
  font-size: var(--fs-350);
  text-align: center;
  color: var(--clr-btn-text);
  background-color: var(--clr-btn);
  border: none;
  border-radius: var(--border-radius-200);
  cursor: pointer;
  transition: all 0.3s ease, box-shadow 0.3s ease;
}
.link-style-button .link-style:hover {
  color: var(--clr-btn-hover-text);
  background-color: var(--clr-btn-hover);
}

.link-style-arrow .link-style::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  background-color: var(--clr-link);
  vertical-align: middle;
  -webkit-mask-image: url("../icons/right-chevron.svg");
  -mask-image: url("../icons/right-chevron.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}
.link-style-arrow .link-style:hover::after, .link-style-arrow .link-style:focus::after {
  background-color: var(--clr-link-hover);
}

/******************************************************************
Author: @warrengroom
Stylesheet: Lists Stylesheet
******************************************************************/
/******************************************************************
Table of contents

1.0 Lists


******************************************************************/
/****************************************************************** 
1.0 Lists
******************************************************************/
ul,
ol {
  list-style: none;
  display: grid;
  gap: var(--gap-100);
  margin: 0;
  padding: 0;
}
.list-style-unordered ul, .list-style-ordered ul, .list-style-checkmarks ul, .data-copy ul,
.list-style-unordered ol,
.list-style-ordered ol,
.list-style-checkmarks ol,
.data-copy ol {
  margin-left: 26px;
}
.list-style-unordered ul,
.list-style-unordered ol {
  list-style: disc;
}
.list-style-ordered ul,
.list-style-ordered ol {
  list-style: decimal;
}
.list-style-checkmarks ul,
.list-style-checkmarks ol {
  list-style: none;
}
.list-style-checkmarks ul li,
.list-style-checkmarks ol li {
  position: relative;
}
.list-style-checkmarks ul li::before,
.list-style-checkmarks ol li::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  background-color: var(--clr-link);
  vertical-align: middle;
  -webkit-mask-image: url("../icons/checkmark.svg");
  -mask-image: url("../icons/checkmark.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  position: absolute;
  top: 5px;
  left: -34px;
}

.data-copy ul {
  list-style: disc;
}

.data-copy ol {
  list-style: decimal;
}

/******************************************************************
Author: @warrengroom
Stylesheet: Default Stylesheet
******************************************************************/
/******************************************************************
Table of contents

0.0 Universal classes
******************************************************************/
body {
  background-color: var(--clr-bg);
  font-family: var(--ff-primary);
}

/******************************************************************
Author: @warrengroom
Stylesheet: Header Stylesheet
******************************************************************/
/******************************************************************
Table of contents

1.0 Header
2.0 Flexible Column Content
******************************************************************/
/****************************************************************** 
1.0 Header
******************************************************************/
.header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 100; /* Ensure this is lower than the overlay's z-index */
}

.header-row nav ul {
  display: flex;
  gap: var(--gap-300);
}
.header-row nav ul li {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}
.header-row nav ul li a {
  line-height: 21px;
  letter-spacing: -0.03em;
  --clr-link: var(--clr-neutral-900);
}
.header-row nav ul li.menu-item-has-children::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox=%220%200%2024%2024%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg id=%22SVGRepo_bgCarrier%22 stroke-width=%220%22%3E%3C/g%3E%3Cg id=%22SVGRepo_tracerCarrier%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3C/g%3E%3Cg id=%22SVGRepo_iconCarrier%22%3E%3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M4.29289 8.29289C4.68342 7.90237 5.31658 7.90237 5.70711 8.29289L12 14.5858L18.2929 8.29289C18.6834 7.90237 19.3166 7.90237 19.7071 8.29289C20.0976 8.68342 20.0976 9.31658 19.7071 9.70711L12.7071 16.7071C12.3166 17.0976 11.6834 17.0976 11.2929 16.7071L4.29289 9.70711C3.90237 9.31658 3.90237 8.68342 4.29289 8.29289Z%22 fill=%22%23000000%22%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 8px;
  transition: transform 0.2s ease-in-out;
}
.header-row nav ul li:hover::after {
  transform: rotate(180deg);
}
.header-row nav ul li:hover ul {
  display: grid; /* Show the submenu on parent li hover */
  opacity: 1; /* Fully visible */
  visibility: visible; /* Make it visible */
}
.header-row nav ul ul {
  opacity: 0; /* Initial state: fully transparent */
  visibility: hidden; /* Initial state: hidden */
  position: absolute; /* Position it relative to the parent li */
  left: -0.75rem; /* Align with the parent li */
  top: 100%; /* Place it below the parent li */
  list-style: none; /* Remove default list style */
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  z-index: 1000; /* Ensure it appears above other content */
  gap: var(--gap-100);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: opacity 0.2s ease, visibility 0.3s ease; /* Transition for fade-in effect */
}
.header-row nav ul ul a {
  display: block;
  width: 240px;
  line-height: 24px;
}

.header nav ul li.menu-item-has-children:hover > .submenu {
  display: block;
}

.header nav ul li.menu-item-has-children:hover ~ .menu-overlay {
  opacity: 1; /* Fully visible */
  visibility: visible; /* Make it visible */
}

.header-row__layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  outline: 0;
  border-bottom: 1px;
  border-style: solid;
  border-color: var(--clr-border);
  padding-block: var(--padding-100);
}
#header-row-1 .header-row__layout {
  justify-content: end;
}

.header-language {
  display: flex;
  gap: 1em;
  align-items: center;
}

.data-copy-note {
  max-width: 240px;
}

/******************************************************************
Author: @warrengroom
Stylesheet: Hero Stylesheet
******************************************************************/
/******************************************************************
Table of contents

1.0 Hero
******************************************************************/
/****************************************************************** 
1.0 Hero
******************************************************************/
/******************************************************************
Author: @warrengroom
Stylesheet: Footer Stylesheet
******************************************************************/
/******************************************************************
Table of contents

1.0 Footer
******************************************************************/
/****************************************************************** 
1.0 Footer
******************************************************************/
.footer .footer-row {
  padding-block: var(--padding-600);
}
.footer .footer-row:last-of-type {
  padding: var(--padding-200);
  text-align: center;
}
.footer .footer-row:last-of-type .data-copy {
  margin-inline: auto;
}

.footer-column {
  display: grid;
  gap: var(--gap-200);
  align-content: start;
}

/******************************************************************
Author: @warrengroom
Stylesheet: Overlay Stylesheet
******************************************************************/
/******************************************************************
Table of contents

1.0 Menu Button
    1.1 Menu Overlay
2.0 Search Button
    2.1 Search Overlay
******************************************************************/
/****************************************************************** 
    1.0 Menu Button
******************************************************************/
.menu-button {
  background-color: transparent;
  display: inline-block;
  position: relative;
  cursor: pointer;
  z-index: 1001;
}
.menu-button .icon {
  background-color: transparent;
  width: 36px;
  height: 36px;
  transition: opacity 0.3s ease;
}

.hamburger-close-icon {
  opacity: 0;
  position: fixed;
  top: 24px;
  right: 3%;
}
.hamburger-close-icon path {
  stroke: var(--clr-copy);
}

/****************************************************************** 
    1.1 Menu Overlay
******************************************************************/
.overlay-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--clr-bg);
  color: var(--clr-copy);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  z-index: 1000;
}
.overlay-menu .nav-menu {
  display: grid;
  gap: var(--gap-500);
  text-align: center;
}

.overlay-menu.open {
  opacity: 1;
  visibility: visible;
}

/****************************************************************** 
    2.0 Search Button
******************************************************************/
.search-button {
  background-color: transparent;
  display: inline-block;
  position: relative;
  cursor: pointer;
  z-index: 1001;
}
.search-button .icon {
  width: 24px;
  height: 24px;
  transition: opacity 0.3s ease;
}

.search-close-icon {
  opacity: 0;
  position: fixed;
  top: 24px;
  right: 24px;
}
.search-close-icon path {
  stroke: white;
}

/****************************************************************** 
    2.1 Search Overlay
******************************************************************/
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--clr-bg);
  color: var(--clr-copy);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  z-index: 1000;
}

.search-overlay.open {
  opacity: 1;
  visibility: visible;
}

.search-form-container {
  width: 80%;
  max-width: 500px;
}

.search-input {
  width: 100%;
  padding: 15px;
  font-size: 20px;
  border: none;
  border-radius: 5px;
}

.search-form-container {
  padding-block: var(--padding-200);
  padding-inline: var(--padding-200);
  border-radius: var(--border-radius-400);
}
.search-form-container .search-form,
.search-form-container label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.search-form-container label,
.search-form-container .search-field {
  flex-grow: 1;
}
.search-form-container .screen-reader-text {
  display: none;
}

/******************************************************************
Author: @warrengroom
Stylesheet: Company Data Stylesheet
******************************************************************/
/******************************************************************
Table of contents

1.0 Company Data
******************************************************************/
.company-logo span {
  display: none;
}
.company-logo img {
  width: auto;
  max-width: 240px;
  height: auto;
  max-height: 46px;
}

.streetAddress,
.addressLocality,
.addressRegion,
.postalCode,
.addressCountry {
  display: inline;
}

.company-name,
.tagline,
.telephone,
.email,
.openingHours,
.linkedin_url,
.facebook_url,
.instagram_url,
.youtube_url {
  display: block;
}

/******************************************************************
Author: @warrengroom
Stylesheet: Hero Stylesheet
******************************************************************/
/******************************************************************
Table of contents

1.0 sections
******************************************************************/
.section {
  padding-block: var(--padding-600);
  display: grid;
  gap: var(--gap-200);
}

/******************************************************************
Author: @warrengroom
Stylesheet: Default Block Stylesheet
******************************************************************/
/******************************************************************
Table of contents

0.0 Universal classes
******************************************************************/
.block__item {
  display: grid;
  gap: var(--gap-200);
}

/******************************************************************
Author: @warrengroom
Stylesheet: Block Columns Stylesheet
******************************************************************/
/******************************************************************
Table of contents

    1.0 Header
******************************************************************/
.block--columns {
  border-radius: var(--border-radius-400);
  overflow: hidden;
}
.block--columns.color-scheme-inherit {
  overflow: auto;
}

.block__columns {
  display: grid;
  gap: var(--gap-400);
  align-items: stretch; /* Stretches items to fill the grid area */
  justify-items: stretch; /* Stretches items to fill the grid area */
}

.block__item {
  padding-block: var(--padding-300);
  padding-inline: var(--padding-300);
  border-radius: var(--border-radius-400);
  overflow: hidden;
  height: 100%; /* Ensure items stretch to full height */
}
.block__item.color-scheme-inherit {
  border-radius: 0;
}

/******************************************************************
Author: @warrengroom
Stylesheet: Data Settings Stylesheet
******************************************************************/
/******************************************************************
Table of contents

1.0 Data fields
    1.1 Copy
    1.2 Heading
    1.3 Icon group
    1.4 Image group
    1.5 Links
    1.6 List

******************************************************************/
.column-layout-3 .data-copy,
.column-layout-3 .data-list {
  max-width: 100%;
}

/******************************************************************
    1.1 Copy
******************************************************************/
.data-copy {
  display: grid;
  gap: var(--gap-200);
  max-width: 880px;
}

/******************************************************************
    1.2 Heading
******************************************************************/
/******************************************************************
    1.3 Icon group 
******************************************************************/
.icon-image img {
  width: 100%;
  max-width: 80px;
  height: auto;
}

.icon-svg svg {
  width: 28px;
}
.icon-svg svg path {
  fill: var(--clr-accent);
}

/******************************************************************
    1.4 Image group
******************************************************************/
.data-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/******************************************************************
    1.5 Links
******************************************************************/
.data-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/******************************************************************
    1.6 List
******************************************************************/
/******************************************************************
Author: @warrengroom
Stylesheet: Data Settings Stylesheet
******************************************************************/
/******************************************************************
Table of contents

1.0 Reusable Settings
    1.1 Image size
    1.2 Link style
    1.3 List style
    1.4 Text style
    1.5 Column layout
    1.6 Content width
    1.7 Background width
    1.8 Vertical align
    1.9 Horizontal align
    1.10 Padding
    1.11 Display device

******************************************************************/
/******************************************************************
    1.1 Image size
******************************************************************/
.image-size-800 {
  max-width: 800px;
}

.image-size-icon {
  max-width: 50px;
}

/******************************************************************
    1.2 Link style
******************************************************************/
/******************************************************************
    1.3 List style
******************************************************************/
/******************************************************************
    1.4 Text style
******************************************************************/
.text-style-xl .text-style {
  font-size: var(--fs-900);
  line-height: 1;
  letter-spacing: -0.05em;
}

h1,
.text-style-h1 .text-style {
  font-size: var(--fs-800);
  line-height: 1.2;
  letter-spacing: -0.05em;
}

h2,
.text-style-h2 .text-style {
  font-size: var(--fs-700);
  line-height: 1.2;
  letter-spacing: -0.05em;
}

h3,
.text-style-h3 .text-style {
  font-size: var(--fs-600);
  line-height: 1.3;
  letter-spacing: -0.05em;
}

h4,
.text-style-h4 .text-style,
.header .company-name {
  font-size: var(--fs-500);
  line-height: 1.3;
  letter-spacing: -0.025em;
}

h5,
.text-style-h5 .text-style {
  font-size: var(--fs-450);
  line-height: 1.4;
  letter-spacing: -0.025em;
}

body,
.data-copy {
  font-size: var(--fs-400);
  line-height: 1.4;
  letter-spacing: 0;
}

h6,
.text-style-h6 .text-style,
.text-style-small .text-style,
#footer-row-1 .data-copy,
#footer-row-2 .data-copy,
.nav-menu a,
.header-language select {
  font-size: var(--fs-300);
  line-height: 1.5;
  letter-spacing: 0;
}

.breadcrumbs ul {
  font-size: var(--fs-200);
  line-height: 1.6;
}

.data-copy-note,
small {
  font-size: var(--fs-100);
  line-height: 1.6;
}

/******************************************************************
    1.5 Column layout
******************************************************************/
.column-layout-1 {
  grid-template-columns: 100%;
}

.column-layout-2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 64em) {
  .column-layout-2 {
    grid-template-columns: 100% !important;
  }
}

.column-layout-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 64em) {
  .column-layout-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .column-layout-3 {
    grid-template-columns: 100% !important;
  }
}

.column-layout-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 760px) {
  .column-layout-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.column-layout-6 {
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 760px) {
  .column-layout-6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.column-layout-8 {
  grid-template-columns: repeat(8, 1fr);
}
@media (max-width: 760px) {
  .column-layout-8 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/******************************************************************
    1.6 Content width
******************************************************************/
.content-width-auto,
.breadcrumbs ul {
  width: 94%;
  max-width: 1440px;
  margin-inline: auto;
}

.content-width-narrow {
  width: 90%;
  max-width: 1024px;
  margin-inline: auto;
}

.content-width-wide {
  width: 94%;
  max-width: 1680px;
  margin-inline: auto;
}

/******************************************************************
    1.7 Background width
******************************************************************/
/******************************************************************
    1.8 Vertical align
******************************************************************/
.vertical-align-top .block__item {
  align-content: start;
}

.vertical-align-middle .block__item {
  align-content: center;
}

.vertical-align-bottom .block__item {
  align-content: end;
}

/******************************************************************
    1.9 Horizontal align
******************************************************************/
.horizontal-align-left {
  text-align: left;
}
.horizontal-align-left img,
.horizontal-align-left svg,
.horizontal-align-left .data-copy {
  margin-right: auto;
}

.horizontal-align-center {
  text-align: center;
}
.horizontal-align-center img,
.horizontal-align-center svg,
.horizontal-align-center .data-copy {
  margin-inline: auto;
}

.horizontal-align-right {
  text-align: right;
}
.horizontal-align-right img,
.horizontal-align-right svg,
.horizontal-align-right .data-copy {
  margin-left: auto;
}

/******************************************************************
    1.10 Padding
******************************************************************/
.padding-top-mobile-none {
  padding-top: 0;
}

.padding-bottom-mobile-none {
  padding-bottom: 0;
}

.padding-left-mobile-none {
  padding-left: 0;
}

.padding-right-mobile-none {
  padding-right: 0;
}

@media (min-width: 64em) {
  .padding-top-mobile-none {
    padding-top: inherit;
  }
  .padding-bottom-mobile-none {
    padding-bottom: inherit;
  }
  .padding-left-mobile-none {
    padding-left: inherit;
  }
  .padding-right-mobile-none {
    padding-right: inherit;
  }
  .padding-top-none {
    padding-top: 0;
  }
  .padding-bottom-none {
    padding-bottom: 0;
  }
  .padding-left-none {
    padding-left: 0;
  }
  .padding-right-none {
    padding-right: 0;
  }
}
/******************************************************************
    1.11 Display device
******************************************************************/
.mobile-only {
  display: inherit;
}
@media (min-width: 64em) {
  .mobile-only {
    display: none;
  }
}

.desktop-only {
  display: none;
}
@media (min-width: 64em) {
  .desktop-only {
    display: inherit;
  }
}

/******************************************************************
Author:@rap4me
Stylesheet: Vendor Import Stylesheet
******************************************************************/
/******************************************************************
Table of contents

1.0 Forminator overrides
******************************************************************/
.breadcrumbs {
  background-color: transparent;
  padding: 0;
}
.breadcrumbs ul {
  padding: 0.75em 0;
  border: 0;
  border-bottom: 1px;
  border-style: solid;
  border-color: var(--clr-border);
}
.home .breadcrumbs {
  display: none;
}