/*!
Theme Name: _exteria
Theme URI: https://ballistix.com
Author: ballistix.com
Author URI: https://underscoretw.com/
Description: A custom theme based on _tw
Version: 0.1.0
Tested up to: 6.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: _exteria
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

_exteria is based on _tw https://underscoretw.com/, (C) 2021-2024 Greg Sullivan
_tw is distributed under the terms of the GNU GPL v2 or later.

_tw is based on Underscores https://underscores.me/ and Varia https://github.com/Automattic/themes/tree/master/varia, (C) 2012-2023 Automattic, Inc.
Underscores and Varia are distributed under the terms of the GNU GPL v2 or later.
*/

/**
 * The line above injects the WordPress file header. It needs to be first,
 * before this comment.
 */

/**
 * This injects custom `@font-face` rules.
 */

/**
 * Custom `@font-face` rules
 *
 * These will be added immediately before Tailwind’s `base` layer.
 */

/**
 * This injects Tailwind's base styles and any base styles registered by
 * plugins, then adds custom base styles.
 */

/*! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: "Saans", sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

@font-face {
  font-family: 'Saans';

  font-style: normal;

  font-weight: 400;

  font-display: swap;

  src:  url(/fonts/Saans-Regular.otf) format('opentype'),
            url(/fonts/Saans-Regular.woff) format('woff'),
            url(/fonts/Saans-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'Saans';

  font-style: normal;

  font-weight: 600;

  font-display: swap;

  src: url(/fonts/Saans-SemiBold.otf) format('opentype'),
      url(/fonts/Saans-SemiBold.woff) format('woff'),
      url(/fonts/Saans-SemiBold.woff2) format('woff2');
}

@font-face {
  font-family: 'Saans';

  font-style: normal;

  font-weight: 700;

  font-display: swap;

  src: url(/fonts/Saans-Bold.otf) format('opentype'),
        url(/fonts/Saans-Bold.woff) format('woff'),
        url(/fonts/Saans-Bold.woff2) format('woff2');
}

@font-face {
  font-family: 'Saans';

  font-style: normal;

  font-weight: 800;

  font-display: swap;

  src: url(/fonts/Saans-Heavy.otf) format('opentype'),
        url(/fonts/Saans-Heavy.woff) format('woff'),
        url(/fonts/Saans-Heavy.woff2) format('woff2');
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/**
 * Custom styles to immediately follow Tailwind’s `base` layer
 *
 * “Add things like base typography styles [or] opinionated global resets.”
 *
 * — from https://tailwindcss.com/docs/plugins#adding-base-styles
 */

/**
 * This uses the background and foreground colors declared in the
 * `theme.json` file and is applied both to the frontend and in the block
 * editor.
*/

body {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  font-family: "Saans", sans-serif;
  --tw-text-opacity: 1;
  color: rgb(56 52 51 / var(--tw-text-opacity));
}

/**
 * This injects Tailwind's component classes and any component classes
 * registered by plugins, then adds custom component classes.
 *
 * The `@import-glob` line imports all CSS files from the `components`
 * directory (except for `components.css`, which is imported on the following
 * line). This is meant to simplify the process of integrating styles from
 * JavaScript components or WordPress plugins.
 */

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.accordion {
  margin-bottom: 3rem;
}

.accordion-header {
  position: relative;
  cursor: pointer;
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  text-transform: uppercase;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.accordion-header:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.accordion-header::after {
  content: '+';
  /* Default to plus */
  position: absolute;
  right: 1rem;
  --tw-text-opacity: 1;
  color: rgb(60 81 63 / var(--tw-text-opacity));
}

.accordion-header.active::after {
  content: '−';
  /* Change to minus when active */
}

.accordion-content {
  max-height: 0px;
  overflow: hidden;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.accordion-content.active {
  max-height: 100vh;
}

.accordion-content .content {
  padding: 1rem;
}

@media (min-width: 1024px) {
  .accordion-wrap {
    display: flex;
  }
}

.accordion-wrap .accordion {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

@media (min-width: 1024px) {
  .accordion-wrap .accordion {
    width: 50%;
  }
}

.accordion-wrap .accordion-image {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

@media (min-width: 1024px) {
  .accordion-wrap .accordion-image {
    width: 50%;
  }
}

.button {
  display: inline-block;
  cursor: pointer;
  border-radius: 0.375rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 1;
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 100ms;
}

.button svg {
  margin-inline-end: 0.25rem;
  display: inline-block;
}

.button:hover svg {
  fill: white;
}

.button.button-primary {
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(60 81 63 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(60 81 63 / var(--tw-text-opacity));
}

.button.button-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(60 81 63 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.button.button-primary-outline {
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(153 73 35 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(153 73 35 / var(--tw-text-opacity));
}

.button.button-primary-outline:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(153 73 35 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.button.button-light {
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(153 73 35 / var(--tw-text-opacity));
}

.button.button-light:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(153 73 35 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.button.button-light-outline {
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.button.button-light-outline:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(60 81 63 / var(--tw-text-opacity));
}

.button:disabled,
.button.disabled {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
  opacity: 0.5;
}

.contact__header-wrap {
  position: relative;
}

.contact__header-wrap:before {
  content: "";
  position: absolute;
  width: 105px;
  height: 100%;
  right: 0;
  top: 0;
  background-image: url('https://www.exteria.com.au/wp-content/uploads/2024/09/EXTERIA_PATTERN-2_GREEN-SAGE.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top left;
  z-index: 0;
}

.address__wrap {
  position: relative;
}

.address__wrap:before {
  content: "";
  position: absolute;
  width: 130px;
  height: 124px;
  right: 0;
  top: 0;
  background-image: url(https://www.exteria.com.au/wp-content/uploads/2024/09/perth-top-right-img.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top left;
  z-index: 0;
}

.address__wrap:after {
  content: "";
  position: absolute;
  width: 260px;
  height: 52px;
  left: 0;
  bottom: 0;
  background-image: url(https://www.exteria.com.au/wp-content/uploads/2024/09/perth-bottom-img.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
  z-index: 0;
}

.downloads-header-wrap {
  position: relative;
  margin-bottom: 6rem;
  --tw-bg-opacity: 1;
  background-color: rgb(60 81 63 / var(--tw-bg-opacity));
  padding-top: 5rem;
  padding-bottom: 5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.downloads-header-wrap .container {
  position: relative;
  z-index: 10;
}

.downloads-header-wrap:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: top right;
  z-index: 0;
  background-image: url('https://www.exteria.com.au/wp-content/uploads/2024/09/download-right-img.png');
}

.downloads__wrap {
  margin-top: 3rem;
  margin-bottom: 6rem;
}

.downloads__loop {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 3rem;
}

@media (min-width: 768px) {
  .downloads__loop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .downloads__loop {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.downloads__loop .downloads__entry {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(241 238 235 / var(--tw-bg-opacity));
  color: #383433;
}

.downloads__entry .downloads__thumbnail {
  overflow: hidden;
}

.downloads__entry .downloads__thumbnail img {
  position: relative;
  display: block;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.downloads__entry .downloads__thumbnail:hover img {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.downloads__entry .downloads__details {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 4rem;
}

.downloads__details .downloads__title {
  margin-bottom: 1rem;
  font-weight: 600;
}

.downloads__details .downloads__permalink {
  position: absolute;
  right: 3rem;
  bottom: 2rem;
  display: inline-block;
}

#colophon {
}

.socials {
  position: relative;
  display: flex;
  align-items: center;
  align-content: center;
}

.socials-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-content: center;
  height: 20px;
  width: 20px;
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  transition: all 0.25s ease-in-out;
  background-color: #455560;
}

.socials-item:hover {
  background-color: #994923;
}

.socials-item:after {
  display: none;
}

.socials-item.facebook {
  -webkit-mask-image: url("https://exteria.com.au/wp-content/uploads/icons/icon-fb@2x.png");
  mask-image: url("https://exteria.com.au/wp-content/uploads/icons/icon-fb@2x.png");
}

.socials-item.linked {
  -webkit-mask-image: url("https://exteria.com.au/wp-content/uploads/icons/icon-linkedin@2x.png");
  mask-image: url("https://exteria.com.au/wp-content/uploads/icons/icon-linkedin@2x.png");
}

.socials-item.instagram {
  -webkit-mask-image: url("https://exteria.com.au/wp-content/uploads/icons/icon-instagram@2x.png");
  mask-image: url("https://exteria.com.au/wp-content/uploads/icons/icon-instagram@2x.png");
}

.socials-item.pinterest {
  -webkit-mask-image: url("https://exteria.com.au/wp-content/uploads/icons/icon-pinterest@2x.png");
  mask-image: url("https://exteria.com.au/wp-content/uploads/icons/icon-pinterest@2x.png");
}

.socials-item.youtube {
  -webkit-mask-image: url("https://exteria.com.au/wp-content/uploads/icons/icon-youtube@2x.png");
  mask-image: url("https://exteria.com.au/wp-content/uploads/icons/icon-youtube@2x.png");
  width: 29px;
}

.socials-item--wrap {
  position: relative;
}

.socials-item--wrap:not(:last-child) {
  margin-right: 12px;
}

[type='text'],
 [type='email'], 
 [type='url'], 
 [type='password'], 
 [type='number'], 
 [type='date'], 
 [type='datetime-local'], 
 [type='month'], 
 [type='search'], 
 [type='tel'], 
 [type='time'], 
 [type='week'], 
 [multiple], 
 textarea, 
 select {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
  padding: 0.625rem;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}

[type='text']:focus,
 [type='email']:focus, 
 [type='url']:focus, 
 [type='password']:focus, 
 [type='number']:focus, 
 [type='date']:focus, 
 [type='datetime-local']:focus, 
 [type='month']:focus, 
 [type='search']:focus, 
 [type='tel']:focus, 
 [type='time']:focus, 
 [type='week']:focus, 
 [multiple]:focus, 
 textarea:focus, 
 select:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
}

label {
  margin-bottom: 0.5rem;
  display: block;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}

[type='submit'] {
  display: inline-block;
  cursor: pointer;
  border-radius: 0.375rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-weight: 700;
  text-transform: capitalize;
  line-height: 1;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 100ms;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(60 81 63 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(60 81 63 / var(--tw-text-opacity));
}

[type='submit']:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(60 81 63 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.mauticform-row, .hs-form-field {
  margin-bottom: 1rem;
}

#mauticform_wrapper_webcontactus .mauticform-row {
  width: 50%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

#mauticform_wrapper_webcontactus .mauticform-page-wrapper {
  display: flex;
  flex-wrap: wrap;
}

#mauticform_wrapper_webcontactus #mauticform_webcontactus_f_message {
  width: 100%;
}

.mauticform-post-success .mauticform-innerform {
  display: none;
}

.mauticform-message {
  display: none;
  border-top-width: 1px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity));
}

.mauticform-post-success .mauticform-message {
  display: block;
}

.alert-success {
  margin-bottom: 1rem;
  border-top-width: 1px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity));
}

.alert-warning {
  margin-top: 3rem;
  margin-bottom: 1rem;
  border-top-width: 1px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(249 115 22 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity));
}

.hs-form-field > label {
  margin-bottom: 0.25rem;
  display: block;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}

.hs-form-required {
  margin-left: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

.hs-error-msg {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

.hero {
  position: relative;
}

.hero:after {
  content: "";
  background-image: url('https://www.exteria.com.au/wp-content/themes/exteria/images/icons/svg/banner-right-img.svg');
  width: 66px;
  height: 326px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

.f-carousel__slide  {
  position: relative;
  z-index: 0;
}

.f-carousel__slide::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #37454e;
  background-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.8) 100%) !important;
  /* background: linear-gradient(0deg, #455560 0%, rgba(69, 85, 96, 0) 100%); */
  opacity: 0.3;
  z-index: 1;
}

.f-carousel__slide  > * {
  position: relative;
  z-index: 10;
}

.hero .arrow-down {
  position: absolute;
  animation: bounce 2s infinite;
  transition: all 0.25s ease-in-out;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 36px;
  margin: 0 auto;
  width: 40px;
  height: 64px;
  outline: none;
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  transition: all 0.15s linear;
  background-color: white;
  -webkit-mask-image: url('https://exteria.com.au/wp-content/uploads/icons/icon-mouse-outline@2x.webp');
  mask-image: url('https://exteria.com.au/wp-content/uploads/icons/icon-mouse-outline@2x.webp');
  opacity: 0.9;
}

.hero .arrow-down:hover {
  background-color: #994923;
}

@keyframes bounce {
  0% {
    transform: translateY(5px);
  }

  50% {
    transform: translateY(15px);
  }

  100% {
    transform: translateY(5px);
  }
}

.products-item {
  text-decoration-line: none;
}

.product-icon:before {
  content: "";
  display: block;
  position: relative;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 100%;
  height: 100%;
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  --tw-bg-opacity: 1;
  background-color: rgb(56 52 51 / var(--tw-bg-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.products-item:hover .product-icon:before {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(153 73 35 / var(--tw-bg-opacity));
}

.products-item .products-title {
  --tw-text-opacity: 1;
  color: rgb(60 81 63 / var(--tw-text-opacity));
}

.products-item:hover .products-title {
  --tw-text-opacity: 1;
  color: rgb(153 73 35 / var(--tw-text-opacity));
}

#LiveableOpenSpaces {
  position: relative;
}

#LiveableOpenSpaces:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 400px;
  right: 0;
  top: 0;
  background-image: url(https://www.exteria.com.au/wp-content/uploads/2024/09/easy-left-img.png);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
}

#LetsCreateSomething {
  position: relative;
}

#LetsCreateSomething:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  bottom: -1px;
  background-image: url(https://www.exteria.com.au/wp-content/themes/exteria/images/icons/svg/create-left-img.svg);
  background-repeat: no-repeat;
  background-size: 25%;
  background-position: bottom right;
  z-index: 1;
}

#masthead {
  position: sticky;
  top: 0px;
  z-index: 50;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
  padding-left: 1rem;
  padding-right: 5rem;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media (min-width: 1024px) {
  #masthead {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

#masthead .header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#masthead.scrolled {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

#masthead .toggle-menu {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

#masthead.scrolled .toggle-menu {
  top: 0.5rem;
  right: 0.5rem;
}

#masthead .header-link-group {
  display: flex;
}

#masthead .header-link,
#shortlist-count {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(60 81 63 / var(--tw-text-opacity));
  text-decoration-line: none;
}

#masthead .header-link svg,
#shortlist-count svg {
  margin-inline-end: 0.25rem;
}

#masthead .number {
  display: none;
}

@media (min-width: 768px) {
  #masthead .number {
    display: block;
  }
}

.blog-header-wrap {
  position: relative;
  margin-bottom: 6rem;
  --tw-bg-opacity: 1;
  background-color: rgb(60 81 63 / var(--tw-bg-opacity));
  padding-top: 5rem;
  padding-bottom: 5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.blog-header-wrap .container {
  position: relative;
  z-index: 10;
}

.blog-header-wrap:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: top right;
  z-index: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="292" height="156" viewBox="0 0 292 156" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 85.01V0H74.2545V43.2181C74.2545 84.2753 99.4963 81.4013 99.4963 81.4013H178.077V0H252.331V43.2181C252.331 87.1709 282.613 81.4013 282.613 81.4013H292V156L253.434 155.412C201.329 151.804 184.933 108.067 184.933 108.067V155.78H74.0815C10.6418 155.78 0 85.01 0 85.01Z" fill="%23DCDDD2"/></svg>');
}

.blog__wrap {
  margin-top: 3rem;
  margin-bottom: 6rem;
}

.blog__loop {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 3rem;
}

@media (min-width: 768px) {
  .blog__loop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .blog__loop {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.blog__loop .blog__entry {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(241 238 235 / var(--tw-bg-opacity));
}

@media only screen and (min-width: 769px) {
  .blog__loop .blog__entry:first-child {
    grid-column: 1 / span 2;
  }
}

.blog__entry .blog__thumbnail {
  max-height: 24rem;
  overflow: hidden;
}

.blog__entry .blog__thumbnail img {
  position: relative;
  display: block;
  min-width: 100%;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.blog__entry .blog__thumbnail:hover img {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.blog__entry .blog__details {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 4rem;
}

.blog__details .blog__title {
  margin-bottom: 1rem;
}

.blog__details .blog__permalink {
  position: absolute;
  right: 3rem;
  bottom: 2rem;
  display: inline-block;
}

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 96rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.wp-block-group {
  padding-left: 1rem;
  padding-right: 1rem;
}

main {
  min-height: 500px;
}

@media (min-width: 1024px) {
  .menu {
    display: flex;
  }
}

.menu > li {
  position: relative;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.menu > li.menu-item-has-children > a:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  right: 0;
  width: 8px;
  height: 4px;
  background-image: url('https://exteria.com.au/wp-content/uploads/icons/icon-chevron-down@2x.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.menu > li > a {
  display: block;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 700;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(60 81 63 / var(--tw-text-opacity));
  text-decoration-line: none;
}

.menu > li > a:hover {
  --tw-text-opacity: 1;
  color: rgb(153 73 35 / var(--tw-text-opacity));
}

.menu > li .sub-menu {
  pointer-events: none;
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: 50;
  margin: 0px;
  width: 20rem;
  --tw-translate-y: 3rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 0px;
  opacity: 0;
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.menu > li .sub-menu li a {
  display: block;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(56 52 51 / var(--tw-text-opacity));
  text-decoration-line: none;
}

.menu > li .sub-menu li a:hover {
  /* Change background on hover */
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity))
}

/* Show the sub-menu on hover */

.menu > li:hover .sub-menu {
  pointer-events: auto;
  display: block;
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
}

.tax-header-wrap {
  background-color: #DCDDD2;
  position: relative;
  margin-bottom: 6rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.tx-header-wrap .container {
  position: relative;
  z-index: 10;
}

.tax-header-wrap:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="557" height="93" viewBox="0 0 557 93" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M563 91.8134V0H379.511C390.069 19.4186 402.451 34.7414 415.288 46.8259C446.691 76.44 489.071 91.8134 532.428 91.8134H563ZM374.973 0V93H160.579C124.067 93 87.9372 83.3444 57.3472 63.5477C35.7293 49.5907 14.2424 29.3055 0 0H374.973Z" fill="%233C513F"/></svg>');
  background-repeat: no-repeat;
  background-size: auto;
  background-position: top right;
  z-index: 0;
}

.accordion-header {
  font-weight: 600;
}

.product-category__loop {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  max-width: 96rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .product-category__loop {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.product-category__entry {
  margin-bottom: 1.5rem;
  overflow: hidden;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity));
  text-decoration-line: none;
}

.product-category__entry:hover {
  --tw-text-opacity: 1;
  color: rgb(153 73 35 / var(--tw-text-opacity));
}

.product-category__image {
  margin-bottom: 1rem;
  display: block;
  min-height: 15rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.product-category__image img {
}

@media only screen and (min-width: 769px) {
  .product-category__image {
  }
}

.product-category__image img {
  margin-left: auto;
  margin-right: auto;
}

.product-category__entry:hover .product-category__image {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.product-category__title {
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.post-type-archive-product .sub_term__wrap,  

.tax-product_cat .sub_term__wrap {
  margin-bottom: 5rem;
}

.post-type-archive-product  .sub_term__title,

.tax-product_cat .sub_term__title {
  margin-bottom: 5rem;
  text-align: center;
  text-transform: uppercase;
}

.single-product .product_wrap {
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .single-product .product_wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
  }
}

.single-product .product-title {
  margin-bottom: 1rem;
}

.single-product .product-code {
  margin-bottom: 1rem;
}

.single-product .product-text {
  margin-bottom: 1.5rem;
}

.single-product .download-file {
  cursor: pointer;
  --tw-text-opacity: 1;
  color: rgb(153 73 35 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

.product__specification {
  width: 100%;
}

.product__specification tr {
  border-bottom-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(249 250 251 / var(--tw-border-opacity));
}

.product__specification tr:last-child {
  border-bottom-width: 0px;
}

.product__specification td {
  padding: 0px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.product__specification td:first-child {
  width: 33.333333%;
  font-weight: 700;
}

.product__specification td:nth-child(2) {
  width: 66.666667%;
}

.single-product .f-carousel__slide img {
  max-height: 480px;
  margin: auto;
}

.single-product .f-carousel__slide::after {
  background-color: none!important;
  background: none!important;
}

.projects__wrap-title {
  margin-bottom: 1.5rem;
}

.projects__loop {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .projects__loop {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media only screen and (min-width: 769px) {
  .projects__wrap .projects__entry:first-child {
    grid-row: 1 / span 2;
    grid-column: 1 / span 2;
  }
}

.projects__wrap .projects__entry {
  position: relative;
  min-height: 20rem;
  overflow: hidden;
}

.projects__wrap .projects__image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--color-dark);
  overflow: hidden;
}

.projects__wrap .projects__image:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.32);
  z-index: 0;
}

.projects__wrap .projects__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.projects__wrap .projects__image:hover img {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.projects__wrap .projects__title {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 50;
  font-size: 1.25rem;
  line-height: 1.75rem;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  text-decoration-line: none;
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.single-projects .container {
  position: relative;
  z-index: 30;
}

.single-projects .project-title {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .single-projects .project-title {
    width: 41.666667%;
    font-size: 3rem;
    line-height: 1;
  }
}

.single-projects .project-details {
  position: relative;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .single-projects .project-details {
    width: 33.333333%;
  }
}

.single-projects .project-details dt {
  width: 33.333333%;
  padding: 0.5rem;
  font-weight: 700;
}

.single-projects .project-details dd {
  width: 66.666667%;
  padding: 0.5rem;
}

.single-projects .block-text h3 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  line-height: 2rem;
  --tw-text-opacity: 1;
  color: rgb(60 81 63 / var(--tw-text-opacity));
}

.single-projects p {
  line-height: 2rem;
}

.single-projects .call-to-action {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(241 238 235 / var(--tw-bg-opacity));
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.single-projects .call-to-action:before {
  content: "";
  position: absolute;
  width: 202px;
  height: 200px;
  right: 0;
  top: 0;
  background-image: url('data:image/svg+xml;utf8,<svg width="198" height="200" viewBox="0 0 198 200" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_2380_44)"><path d="M119.495 0.650275H165.912V135.354C165.912 144.078 173.117 151.175 181.972 151.175H237.668V199.35H165.771C133.97 199.35 121.668 173.181 119.525 167.935C119.498 167.87 119.48 167.824 119.468 167.798L118.835 166.331V199.35L49.8778 199.35C36.7311 199.35 24.3713 194.305 15.0752 185.146C5.77943 175.987 0.659981 163.81 0.659981 150.857V0.650275H47.0794V135.354C47.0794 144.078 54.283 151.175 63.1372 151.175H119.495V0.650275ZM238.328 150.525V0.650592H284.747V150.525H238.328ZM47.7394 135.354V-4.84494e-06H-1.85249e-05V150.857C-1.85249e-05 163.983 5.18807 176.324 14.6086 185.606C24.0293 194.888 36.5547 200 49.8778 200L119.495 200V169.528C121.002 172.866 124.271 179.019 130.01 184.988C134.235 189.384 139.044 192.875 144.302 195.365C150.798 198.44 158.021 200 165.771 200H238.328V151.175H285.407V0.000312674H237.668V150.525H181.972C173.481 150.525 166.572 143.719 166.572 135.354V-4.84494e-06H118.835V150.525H63.1372C54.6468 150.525 47.7394 143.719 47.7394 135.354Z" fill="%23383433"/></g><defs><clipPath id="clip0_2380_44"><rect width="198" height="200" fill="white"/></clipPath></defs></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
  z-index: 0;
}

.single-projects .banner {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.single-projects .banner .wrap {
  padding-top: 5rem;
  padding-bottom: 2.5rem;
}

.single-projects .block-text {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

@media only screen and (min-width: 769px) {
  .single-projects .wrap {
    height: 65vh;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 6rem;
  }

  .single-projects .banner {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .single-projects .banner:before {
    content: "";
    position: absolute;
    width: 226px;
    height: 280px;
    left: 0;
    top: 0;
    background-image: url('data:image/svg+xml;utf8,<svg width="226" height="340" viewBox="0 0 226 340" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M226 0L122.806 9.0215e-06L122.806 256.727L226 256.727L226 0Z" fill="%23F1EEEB"/><path d="M122.804 256.727L7.89862e-05 256.727L8.62662e-05 340L122.804 340L122.804 256.727Z" fill="%23F1EEEB"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    z-index: 20;
  }

  .single-projects .banner:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.32);
  }

  .single-projects .block-text {
    margin-top: 6rem;
    margin-bottom: 6rem;
    padding-left: 12rem;
    padding-right: 12rem;
  }

  .single-projects .block-text.image-left,
    .single-projects .block-text.image-right {
    padding-left: 6rem;
    padding-right: 6rem;
  }

  @media (min-width: 1024px) {
    .single-projects .block-text.image-left,
    .single-projects .block-text.image-right {
      display: flex;
      align-items: center;
    }
  }

  .single-projects .block-text.image-left .col,
    .single-projects .block-text.image-right .col {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  @media (min-width: 1024px) {
    .single-projects .block-text.image-left .col,
    .single-projects .block-text.image-right .col {
      width: 50%;
    }

    .single-projects .block-text.image-left {
      flex-direction: row;
    }

    .single-projects .block-text.image-right {
      flex-direction: row-reverse;
    }
  }
}

.search-entry {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.search-entry .thumbnail {
  width: 25%;
}

.search-entry .content {
  width: 75%;
}

.search-entry .content h3 {
  margin-bottom: 0.5rem;
}

#shortlist-wrap {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

@media (min-width: 1024px) {
  #shortlist-wrap {
    display: flex;
  }

  #shortlist {
    width: 50%;
  }

  #shortlist-form {
    width: 50%;
  }
}

#shortlist table {
  width: 100%;
  text-align: left;
}

#shortlist table:where([dir="rtl"], [dir="rtl"] *) {
  text-align: right;
}

#shortlist table td {
  padding: 1rem;
}

#shortlist table a {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}

.single-post .post p,
.single-post .post li,
.single-post .post td,
.single-post .post span {
  margin-bottom: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.single-post .post h1,
.single-post .post h2,
.single-post .post h3,
.single-post .post h4,
.single-post .post h5 {
  margin-bottom: 1rem;
}

.single-post .post .post_thumbnail {
  margin-bottom: 1.5rem;
}

.single-post .post .post_thumbnail img {
  width: 100%;
}

.single-post .post ul {
  margin-inline-start: 1.5rem;
  list-style-type: disc;
}

.single-post .hentry {
  padding-left: 1rem;
  padding-right: 1rem;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

h1 {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

@media (min-width: 1024px) {
  h1 {
    font-size: 3rem;
    line-height: 1;
  }
}

h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

h4 {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

h5 {
  font-size: 1rem;
  line-height: 1.5rem;
}

h6 {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

p {
  margin-bottom: 1rem;
}

a {
  --tw-text-opacity: 1;
  color: rgb(153 73 35 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

/**
 * Custom styles to immediately follow Tailwind’s `components` layer
 *
 * “Add more opinionated, complex classes like buttons, form controls, alerts,
 * etc; the sort of pre-built components you often see in other frameworks that
 * you might need to override with utility classes.”
 *
 * — from https://tailwindcss.com/docs/plugins#adding-components
 */

/**
 * Layout styles for centered content areas
 *
 * If you are controlling the width of your content area with styles applied
 * to its container, you can delete the following styles whose selectors begin
 * with `.page-content >` and `.entry-content >`. For more details, please see
 * the following:
 *
 * https://make.wordpress.org/core/2021/06/29/on-layout-and-content-width-in-wordpress-5-8/
 */

.entry-content > .alignwide {
  /* Wide width from the `theme.json` file */
  max-width: 60rem;
}

.entry-content > .alignfull {
  max-width: none;
}

.entry-content > .alignleft {
  float: left;
  margin-right: 2rem;
}

.entry-content > .alignright {
  float: right;
  margin-left: 2rem;
}

/**
 * This injects Tailwind's utility classes and any utility classes registered
 * by plugins, then adds custom utility classes.
 */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.visible {
  visibility: visible;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-24 {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.me-2 {
  margin-inline-end: 0.5rem;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.h-24 {
  height: 6rem;
}

.max-h-60 {
  max-height: 15rem;
}

.min-h-52 {
  min-height: 13rem;
}

.w-24 {
  width: 6rem;
}

.w-8\/12 {
  width: 66.666667%;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-none {
  max-width: none;
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.items-stretch {
  align-items: stretch;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: 0.5rem;
}

.self-end {
  align-self: flex-end;
}

.overflow-hidden {
  overflow: hidden;
}

.border-t-2 {
  border-top-width: 2px;
}

.border-gray-50 {
  --tw-border-opacity: 1;
  border-color: rgb(249 250 251 / var(--tw-border-opacity));
}

.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: rgb(153 73 35 / var(--tw-bg-opacity));
}

.bg-tertiary {
  --tw-bg-opacity: 1;
  background-color: rgb(241 238 235 / var(--tw-bg-opacity));
}

.bg-cover {
  background-size: cover;
}

.bg-center {
  background-position: center;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.p-4 {
  padding: 1rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.py-44 {
  padding-top: 11rem;
  padding-bottom: 11rem;
}

.text-center {
  text-align: center;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.font-bold {
  font-weight: 700;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.capitalize {
  text-transform: capitalize;
}

.text-primary {
  --tw-text-opacity: 1;
  color: rgb(60 81 63 / var(--tw-text-opacity));
}

.text-secondary {
  --tw-text-opacity: 1;
  color: rgb(153 73 35 / var(--tw-text-opacity));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.content-none {
  --tw-content: none;
  content: var(--tw-content);
}

/**
 * Custom styles to immediately follow Tailwind’s `utilities` layer
 *
 * Add your own utility classes to this theme. Complex utility classes should
 * be added using Tailwind’s plugin system:
 *
 * https://tailwindcss.com/docs/plugins#adding-utilities
 */

@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }

  .md\:grid {
    display: grid;
  }

  .md\:w-4\/12 {
    width: 33.333333%;
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:gap-8 {
    gap: 2rem;
  }

  .md\:align-middle {
    vertical-align: middle;
  }
}

@media (min-width: 1024px) {
  .lg\:flex {
    display: flex;
  }

  .lg\:w-1\/2 {
    width: 50%;
  }

  .lg\:w-4\/12 {
    width: 33.333333%;
  }

  .lg\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .lg\:text-right {
    text-align: right;
  }

  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
}