/*
Theme Name: WenWe Holding
Theme URI: http://www.wenwe.co
Author: Supersonic Playground
Author URI: http://www.supersonicplayground.com/
Description: WenWe Holding Page
Version: 1.0
License: All work ©2025 WenWe. Not for public use.
License URI: http://www.wenwe.co
Tags: 
Text Domain: wenwe
*/
/* 
Use: Reset
Scope: All devices
Theme: WenWe Holding
Copyright 2025, © WenWe
Author: Supersonic Playground
*/
/* The 01-reset.less stylesheet is intended to remove many of the default browser settings and styles that browsers apply as standard and which can be detrimental to a design. It essentially resets the browser to a blank canvas so that we can style our projects as they should look without the browser adjusting our styles. */
*,
*:before,
*:after {
  box-sizing: border-box !important;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: top;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* 
Use: Mixins
Scope: All devices
Theme: WenWe Holding
Copyright 2025, © WenWe
Author: Supersonic Playground
*/
/* The 02-mixins.less stylesheet contains a selection of common mixin classes that can themselves be used within other classes. */
/*************************************************************************
 #Input Override
**************************************************************************/
/* This can be used on things like form input to ensure that browsers don't apply their own styling. For more info check out https://css-tricks.com/almanac/properties/a/appearance/. */
/*************************************************************************
 #Transition Bezier
**************************************************************************/
/* This creates a transition using the @cubicBezier variable that is set in setup.less. When you use this class in the styling for the element, you can replace the @timing with the actual time that you want, for example 500ms.

With this mixin, your LESS code would look something like this:

.my-class-name {
	.transition-bezier(500ms);
} */
/*************************************************************************
 #Transition Bezier Delay
**************************************************************************/
/* This works exactly the same as the above class, except that you can also add a delay by replacing the @delay with the time that you want the delay to be.

With this mixin, your LESS code would look something like this:

.my-class-name {
	.transition-bezier-delay(500ms, 250ms);
} */
/*************************************************************************
 #Transition Linear
**************************************************************************/
/* This creates a transition using the simple linear movement. As above, you can replace @timing with the time of the transition.

With this mixin, your LESS code would look something like this:

.my-class-name {
	.transition-linear(500ms);
} */
/*************************************************************************
 #Transition None
**************************************************************************/
/* This can be used to cancel any previous transitions on an element.

With this mixin, your LESS code would look something like this:

.my-class-name {
	.transition-none();
} */
/*************************************************************************
 #Inline Fix
**************************************************************************/
/* This creates a fix for elements that are set to 'display: inline-block'.
	
By default, these elements will have a small space added between them, which can break layouts if they are intended to run in a horizontal row. This fix should be added to the parent container of the elements that are set to 'display: inline-block' and it will remove the space between them.

You may need to adjust the word-spacing amount depending on your layout, i.e. if your @base-size is smaller or larger than the default system setting.

With this mixin, your LESS code would look something like this:

.my-class-name {
	.inline-fix;
	
	.child-element {
		display: inline-block;
	}
} */
.inline-fix {
  word-spacing: -0.35rem;
}
.inline-fix * {
  word-spacing: normal;
}
/*************************************************************************
 #With Icon
**************************************************************************/
/* This allows you to create containers that can have a Font Awesome icon positioned absolutely.
	
You will need to specify which icon is used by choosing the icon from the Font Awesome website and then adding the unicode 'f' value to the content of the before pseudo element, for example: content: '\f658'; */
/*************************************************************************
 #Text With Icon
**************************************************************************/
/* this allows you to indent a Font Awesome icon at the start of a line of text.
	
You will need to specify which icon is used by choosing the icon from the Font Awesome website and then adding the unicode 'f' value to the content of the before pseudo element, for example: content: '\f658'; */
.text-with-icon {
  display: inline-block;
  position: relative;
  padding-left: 1.5rem;
}
.text-with-icon:before {
  display: block;
  position: absolute;
  font-display: swap;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: 'Font Awesome 5 Pro', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  color: inherit;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
/*************************************************************************
 #Sizes
**************************************************************************/
/* This is a set of universal sizes that are used throughout your site on elements such as buttons, form elements etc.
	
They are designed to ensure that elements throughout the your site all share unified styles and are consistent throughout. The actual sizes can be increased or decreased to suit the design of your project.

With this mixin, your LESS code would look something like this:

.my-class-name {
	height: @medium-size;
	min-height: @medium-size;
	line-height: @medium-size;
	padding: 0 @medium-size;
} */
/*************************************************************************
 #Shadow
**************************************************************************/
.shadow {
  box-shadow: 0.5rem 0.5rem 1.75rem 0 rgba(0, 0, 0, 0.15);
}
.shadow-close {
  box-shadow: 0.25rem 0.25rem 0.75rem 0 rgba(0, 0, 0, 0.15);
}
.shadow-tight {
  box-shadow: 0 0 0.25rem 0 rgba(0, 0, 0, 0.15);
}
.shadow-drop {
  box-shadow: 0 1.75rem 1.75rem 0 rgba(0, 0, 0, 0.15);
}
/*************************************************************************
 #Borders
**************************************************************************/
.dashed-border {
  position: relative;
}
.dashed-border:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23C65E28FF' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  pointer-events: none;
}
/* 
Use: Measurements
Scope: All devices
Theme: WenWe Holding
Copyright 2025, © WenWe
Author: Supersonic Playground
*/
/* The 03-measurements.less sets the global Base Level and Base Size, as well as the various breakpoint sizes. The purpose of this is so that all measurements throughout the site are based off of the one - which itself is a calculation based on the which is set in setup.less - in order to achieve uniformity across the project.

The benefit of this is that all sizes and measurements will share a common scale, i.e. be multiples of the Base Level - if the scale then needs to be adjusted up or down, only the Base Level would need adjusting here and the whole site will scale proportionally, avoiding the need to arbitrarily update all measurements throughtout the site. */
/*************************************************************************
 #Base Level
**************************************************************************/
/* This is the Base Level. All measurements throughout the project will be based from this. It uses the Base Pixel Equivalent which is set in setup.less which is then converted into a percentage by overwriting the browser's default setting of 16px for body copy. If the Base Level needs to be another pixel value equivalent, then adjust the Base Pixel Equivalent in setup.less. For example, if 18px was required, then set the Base Pixel Equivalent to 18 in setup.less. */
/*************************************************************************
 #Base Size
**************************************************************************/
/* This is the Base Size. The @base-level variable effectively sets the project's base font size to a certain level, which becomes the equivalent to 1rem. The @base-size variable then converts 1rem into a global variable that can be used throughout the project to set the size of elements such as text or modules.

So for example, if the Base Pixel Equivalent in setup.less is set to 20, and you needed to create an element that would normally be width: 100px, you would instead set this to width: @base-size*5. */
/*************************************************************************
 #Breakpoints
**************************************************************************/
/* These are the predefined breakpoint measurements. They convert the browser's default font size (16px) into 1em and then multiply it to achieve a predefined set of screen sizes for the various media queries below to be based off of. */
/* 400px */
/* 500px */
/* 650px */
/* 750px */
/* 850px */
/* 1000px */
/* 1100px */
/* 1250px */
/* 1500px */
/* 1750px */
/* 2000px */
/*************************************************************************
 #From Media Queries
**************************************************************************/
/* These are the predefined breakpoint variables for 'from' media queries. They take the breakpoint measurements from above and wrap them up as variables that can be called throughout the site's LESS files for media queries where stuff needs to happen 'from' a particular screen size.

Your LESS code would look something like this:

.my-class-name {
	@media @from-750 {
		.do-something;
	}
} */
/*************************************************************************
 #To Media Queries
**************************************************************************/
/* These are the predefined breakpoint variables for 'to' media queries. They take the breakpoint measurements from above and wrap them up as variables that can be called throughout the site's LESS files for media queries where stuff needs to happen 'to' a particular screen size.

Your LESS code would look something like this:

.my-class-name {
	@media @to-750 {
		.do-something;
	}
} */
/*************************************************************************
 #HTML Font Size Adjustment
**************************************************************************/
/* This is a series of media queries that adjusts the html font size to achieve responsive typography whereby all the text on the site will scale proportionally very slightly from small the large screens. It ensures that the text scales to be slightly larger on large screens and slightly smaller on small screens. If the text is too small/large at either end of the scale, you can adjust the multiples to suit. */
html {
  font-size: 125%;
}
@media screen and (min-width: 62.5em) {
  html {
    font-size: 137.5%;
  }
}
@media screen and (min-width: 93.75em) {
  html {
    font-size: 150%;
  }
}
/* 
Use: Grid
Scope: All devices
Theme: WenWe Holding
Copyright 2025, © WenWe
Author: Supersonic Playground
*/
/* The 04-grid.less contains the underlying grid system. It works based on a combination of Fluid Margins and Column Widths which are set in setup.less. */
/*************************************************************************
 #Multi-Column Layout
**************************************************************************/
/* This part creates a set of Column Modules, which group a set number of Fluid Margins and Column Widths. These are then used later in 07-content-layout.less to create the various layout Grid Modules that form the overall grid system and allow us to create our responsive grid system layouts. */
/* 
Use: Colours
Scope: All devices
Theme: WenWe Holding
Copyright 2025, © WenWe
Author: Supersonic Playground
*/
/*************************************************************************
 #Colours
**************************************************************************/
/*************************************************************************
 #Greys
**************************************************************************/
/*************************************************************************
 #Brand
**************************************************************************/
/*************************************************************************
 #Colour Sections
**************************************************************************/
/* #Section Colours ------------------------------------------------------------------------ */
.white-section {
  background-color: #FFFFFF;
}
.light-grey-section {
  background-color: #F6F6F6;
}
.blue-section {
  background-color: #1A0545;
}
.dark-section p {
  color: #000000;
  font-size: 0.9rem;
}
/* #Remove Top Padding for Adjacent Sections ------------------------------------------------------------------------ */
.outer-container.white-section + .outer-container.white-section,
.outer-container.light-grey-section + .outer-container.light-grey-section {
  padding-top: 0;
}
/* 
Use: Typography
Scope: All devices
Theme: WenWe Holding
Copyright 2025, © WenWe
Author: Supersonic Playground
*/
/* The 06-typography.less stylesheet allows you to customise the typography of your project. Certain elements will be consistent across all project, but some elements should be changed to suit the project - for example the fonts included in the Basic Front End Boilerplate are the standard Supersonic Playground fonts and should be replaced by the fonts that are specific to your project.

Please remember: the Base Pixel Equivalent will be used to create the base font size, and the actual size of elements like h1's, h2's etc should then be scaled from this base size. Both of these settings should be updated in the setup.less stylesheet and not within 06-typography.less. */
/*************************************************************************
 #Import Fonts
**************************************************************************/
@font-face {
  font-family: 'Outfit Regular';
  src: url('fonts/outfit/outfit-regular.woff2') format('woff2');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Outfit Medium';
  src: url('fonts/outfit/outfit-medium.woff2') format('woff2');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Outfit Semibold';
  src: url('fonts/outfit/outfit-semibold.woff2') format('woff2');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Font Awesome 5 Brands';
  src: url('fonts/fa-brands-400.woff2') format('woff2'), url('fonts/fa-brands-400.woff') format('woff');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Font Awesome 5 Pro';
  src: url('fonts/fa-light-300.woff2') format('woff2');
  font-display: swap;
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Font Awesome 5 Pro';
  src: url('fonts/fa-regular-400.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}
/*************************************************************************
 #Font Styles
**************************************************************************/
.outfit-regular {
  font-family: 'Outfit Regular', 'Arial', sans-serif;
  font-weight: 400;
}
.outfit-medium {
  font-family: 'Outfit Medium', 'Arial', sans-serif;
  font-weight: 500;
}
.outfit-semibold {
  font-family: 'Outfit Semibold', 'Arial', sans-serif;
  font-weight: 600;
}
.fab,
.far {
  font-display: swap;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}
.fab {
  font-family: 'Font Awesome 5 Brands', 'Helvetica', 'Arial', sans-serif;
}
.far {
  font-family: 'Font Awesome 5 Pro', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
}
/*************************************************************************
 #Line Heights
**************************************************************************/
/* This part sets various line heights as mixins which can then be used further on in the LESS files. It's best practice to use straigh numbers instead of %, px or em. */
/*************************************************************************
 #Basic HTML
**************************************************************************/
/* This part allows you to customise the various basic typographic elements of the site. Please remember to set the Base Pixel Equivalent and header sizes in the setup.less stylesheet. */
/* This part sets a background colour for when a user selects a section of text. */
::-moz-selection {
  background-color: #000000;
  text-shadow: none;
  color: #FFFFFF;
}
::selection {
  background-color: #000000;
  text-shadow: none;
  color: #FFFFFF;
}
::-moz-selection {
  background-color: #000000;
  text-shadow: none;
  color: #FFFFFF;
}
/* This part sets the basic global font styles for the whole site. This acts as a fall back for when no other styles are being used. The fact that the font size is set to @base-size will reference the Base Size that we set in the Measurements LESS file. By default this is the equivalent to 20px. */
body {
  font-size: 1rem;
  font-family: 'Outfit Regular', 'Arial', sans-serif;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1.4;
}
/* This allows you to set the scale of how each typographic element relates to each other. The base body size for the project is set using @base-size, and all other elements are multiples of this setting. */
h1 {
  font-size: 2.75rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.25rem;
}
h5 {
  font-size: 1rem;
}
.small,
.small p {
  font-size: 0.75rem;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: 'Outfit Semibold', 'Arial', sans-serif;
  font-weight: 600;
  color: #1A0545;
}
.center-container h1:after,
.center-container h2:after,
.center-container h3:after,
.center-container h4:after,
.center-container h5:after {
  margin: 1rem auto 0;
}
h1,
h2,
h3,
h4 {
  margin-bottom: 1rem;
  line-height: 1.2;
}
h5 {
  margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
p,
.content-wrapper {
  margin-bottom: 1.5rem;
}
h1.half-margin,
h2.half-margin,
h3.half-margin,
h4.half-margin,
h5.half-margin,
p.half-margin,
.content-wrapper.half-margin {
  margin-bottom: 0.75rem;
}
h1.no-margin,
h2.no-margin,
h3.no-margin,
h4.no-margin,
h5.no-margin,
p.no-margin,
.content-wrapper.no-margin {
  margin-bottom: 0;
}
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
p:last-child,
.content-wrapper:last-child {
  margin-bottom: 0;
}
.pre-heading {
  display: inline-flex;
  gap: 0.25rem;
  font-size: 1.125rem;
  color: #1A0545;
  margin-bottom: 0.5rem;
}
.pre-heading span {
  display: inline-flex;
  gap: 0.25rem;
}
.pre-heading span:after {
  content: '';
  display: inline-block;
  height: 10px;
  width: 10px;
  background-color: #FFFFFF;
  border-radius: 50%;
  margin: auto 0.5rem;
}
.pre-heading span:last-child:after {
  content: unset;
}
a {
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  font-family: 'Outfit Regular', 'Arial', sans-serif;
  font-weight: 400;
  color: #1A0545;
  word-break: break-word;
}
a.no-decoration {
  text-decoration: none;
}
.uppercase {
  text-transform: uppercase;
}
.standfirst {
  font-size: 1.125rem;
}
strong {
  font-family: 'Outfit Semibold', 'Arial', sans-serif;
  font-weight: 600;
}
em {
  font-style: italic;
}
blockquote {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
}
blockquote:last-child {
  margin-bottom: 0;
}
blockquote p {
  font-style: italic;
  font-size: 2rem;
  line-height: 1.2;
  color: #F6F6F6;
}
blockquote p:before,
blockquote p:after {
  display: inline;
  font: inherit;
  content: '"';
}
.faded {
  opacity: 0.5;
}
.strikethrough {
  text-decoration: line-through;
}
.screen-reader,
.screenReader,
.screen-reader-text {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
}
/* 
Use: Content Layout
Scope: All devices
Theme: WenWe Holding
Copyright 2025, © WenWe
Author: Supersonic Playground
*/
/* The 07-content-layout.less stylesheet contains the various core elements that, when combined, allow you to create a vast array of layouts based on the core 12 column grid system that underpins this system.

The Basic Front End Boilerplate contains everything you need to start building layouts, but there are also a wide variety of extra modules throughout the Supersonic System that can be added to your project to further enhance the layout and functionality. */
/*************************************************************************
 #Outer Container
**************************************************************************/
.outer-container {
  position: relative;
  float: left;
  width: 100%;
}
/*************************************************************************
 #Inner Container
**************************************************************************/
.inner-container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 0 auto;
}
.inner-container > * {
  margin-left: 3%;
  margin-right: 0;
}
@media screen and (min-width: 62.5em) {
  .inner-container {
    margin: 0 2%;
  }
}
@media screen and (min-width: 78.125em) {
  .inner-container {
    margin: 0 4%;
  }
}
@media screen and (min-width: 93.75em) {
  .inner-container {
    max-width: 1440px;
    margin: 0 auto;
  }
}
/*************************************************************************
 #Horizontal and Vertical Alignment
**************************************************************************/
.left-container,
.center-container,
.right-container,
.top-container,
.middle-container,
.bottom-container {
  display: flex;
  flex-wrap: wrap;
}
.left-container {
  justify-content: flex-start;
}
.left-container > * {
  margin-left: 3%;
  margin-right: 0;
}
.center-container {
  justify-content: center;
}
.center-container > * {
  margin-left: 1.5%;
  margin-right: 1.5%;
}
.right-container {
  justify-content: flex-end;
}
.right-container > * {
  margin-right: 3%;
  margin-left: 0;
}
.top-container {
  align-items: flex-start;
}
.middle-container {
  align-items: center;
}
.bottom-container {
  align-items: flex-end;
}
.left-to-right {
  flex-direction: row;
}
.right-to-left {
  flex-direction: row-reverse;
}
/*************************************************************************
 #Even Height
**************************************************************************/
.even-height-container {
  align-items: stretch;
}
/*************************************************************************
 #Grid Modules
**************************************************************************/
.full-page,
.half-page,
.two-thirds-page,
.one-third-page,
.three-quarters-page,
.one-quarter-page,
.five-sixths-page,
.one-sixth-page {
  position: relative;
  z-index: 1;
}
.full-page .vertical-outer,
.half-page .vertical-outer,
.two-thirds-page .vertical-outer,
.one-third-page .vertical-outer,
.three-quarters-page .vertical-outer,
.one-quarter-page .vertical-outer,
.five-sixths-page .vertical-outer,
.one-sixth-page .vertical-outer {
  width: 100%;
}
.full-page,
.half-page,
.two-thirds-page,
.three-quarters-page,
.five-sixths-page {
  width: 93.996%;
}
@media screen and (min-width: 46.875em) {
  .half-page {
    width: 45.498%;
  }
  .half-page:nth-child(2n+3) {
    clear: both;
  }
}
@media screen and (min-width: 46.875em) {
  .two-thirds-page {
    width: 61.664%;
  }
}
.one-third-page {
  width: 93.996%;
}
.one-third-page:nth-child(2n+3) {
  clear: both;
}
@media screen and (min-width: 31.25em) {
  .one-third-page {
    width: 45.498%;
  }
}
@media screen and (min-width: 46.875em) {
  .one-third-page {
    width: 29.332%;
  }
  .one-third-page:nth-child(2n+3) {
    clear: none;
  }
  .one-third-page:nth-child(3n+4) {
    clear: both;
  }
}
.one-quarter-page {
  width: 45.498%;
}
.one-quarter-page:nth-child(2n+3) {
  clear: both;
}
@media screen and (min-width: 46.875em) {
  .one-quarter-page {
    width: 29.332%;
  }
  .one-quarter-page:nth-child(2n+3) {
    clear: none;
  }
  .one-quarter-page:nth-child(3n+4) {
    clear: both;
  }
}
@media screen and (min-width: 62.5em) {
  .one-quarter-page {
    width: 21.249%;
  }
  .one-quarter-page:nth-child(3n+4) {
    clear: none;
  }
  .one-quarter-page:nth-child(4n+5) {
    clear: both;
  }
}
@media screen and (min-width: 46.875em) {
  .three-quarters-page {
    width: 61.664%;
  }
}
@media screen and (min-width: 62.5em) {
  .three-quarters-page {
    width: 69.747%;
  }
}
.one-sixth-page {
  width: 29.332%;
}
.one-sixth-page:nth-child(3n+4) {
  clear: both;
}
@media screen and (min-width: 46.875em) {
  .one-sixth-page {
    width: 21.249%;
  }
  .one-sixth-page:nth-child(3n+4) {
    clear: none;
  }
  .one-sixth-page:nth-child(4n+5) {
    clear: both;
  }
}
@media screen and (min-width: 93.75em) {
  .one-sixth-page {
    width: 13.166%;
  }
  .one-sixth-page:nth-child(4n+5) {
    clear: none;
  }
  .one-sixth-page:nth-child(6n+7) {
    clear: both;
  }
}
.five-sixths-page {
  width: 61.664%;
}
@media screen and (min-width: 46.875em) {
  .five-sixths-page {
    width: 69.747%;
  }
}
@media screen and (min-width: 93.75em) {
  .five-sixths-page {
    width: 77.83%;
  }
}
/*************************************************************************
 #Vertical Margins
**************************************************************************/
/* The Vertical Margins allow you to create vertical spacing outside of both parent containers and their child elements. It’s very useful for separating sections and the modules within them by applying external spacing. The classes can be applied to Outer Containers, Inner Containers and any element within them, particularly Grid Modules.

There are two variants – full and half. By default full is @base-size*3, which is the pixel equivalent of 60px, and half is @base-size*1.5, which is the pixel equivalent of 30px. These values can changed to match your designs by updating the two variables @full-margin and @half-margin. */
.vertical-margin {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.vertical-margin-top {
  margin-top: 3rem;
}
.vertical-margin-bottom {
  margin-bottom: 3rem;
}
.vertical-half-margin {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.vertical-half-margin-top {
  margin-top: 1.5rem;
}
.vertical-half-margin-bottom {
  margin-bottom: 1.5rem;
}
.vertical-double-negative-margin-top {
  margin-top: -6rem;
}
/*************************************************************************
 #Vertical Padding
**************************************************************************/
.vertical-padding {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.vertical-padding-top {
  padding-top: 3rem;
}
.vertical-padding-bottom {
  padding-bottom: 3rem;
}
.vertical-half-padding {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.vertical-half-padding-top {
  padding-top: 1.5rem;
}
.vertical-half-padding-bottom {
  padding-bottom: 1.5rem;
}
/*************************************************************************
 #Modular Wrappers
**************************************************************************/
/* Modular Wrappers allows you to remove the bottom margin of the bottom row of multiple elements, therefore removing any unwanted white space when you have multiple elements stacked on top of each other. It works by wrapping the elements in a container that has a negative margin-bottom that is the same value of the element's bottom margin, which essentially cancels it out. This is useful if you have elements which need a margin-bottom to separate themselves from each other, but that don't need margin-bottom on the last row. For example if the parent container has padding top and bottom, there would be unwanted white space below the last row.

There are two variants - modular-wrapper-full and modular-wrapper-half. The former should be used with elements that have the vertical-margin or vertical-margin-bottom classes applied, while the latter should be used with elements that have the vertical-half-margin or vertical-half-margin-bottom classes applied. */
/* This gives both the Modular Wrappers the .clear-fix-after class so that any floats are cleared at the end. */
.modular-wrapper:after,
.modular-wrapper-full:after,
.modular-wrapper-half:after {
  display: block;
  position: relative;
  content: '';
  clear: both;
}
/* Modular Wrapper Full - this removes the bottom margin from the last row of elements that have the vertical-margin or vertical-margin-bottom classes applied. */
.modular-wrapper-full {
  margin-bottom: -3rem;
}
/* Modular Wrapper Half - this removes the bottom margin from the last row of elements that have the vertical-half-margin or vertical-half-margin-bottom classes applied. */
.modular-wrapper-half {
  margin-bottom: -1.5rem;
}
/*************************************************************************
 #Internal Padding
**************************************************************************/
/* The Internal Padding is a simplified alternative to the Vertical Margins and Vertical Padding, and is intended to be used with elements to create a uniform padding within the element. By default full is @base-size*3, which is the pixel equivalent of 60px, and half is @base-size*1.5, which is the pixel equivalent of 30px. These values can be adjusted based on the designs. */
/* Internal Padding - this class has full padding */
.internal-padding {
  padding: 3rem;
}
/* Internal Half Padding - this class has half padding */
.internal-half-padding {
  padding: 1.5rem;
}
/* Internal Quarter Padding - this class has quarter padding */
.internal-quarter-padding {
  padding: 0.75rem;
}
/*************************************************************************
 #Horizontal Alignment
**************************************************************************/
/* The Horizontal Alignment classes allow you to set the horizontal position that elements will occupy within an Inner Container. There are a range of classes to suit the layout of the designs.

Centred Alignment

This allows you to centre items within a container, and is particularly useful if you have an uneven number of modules across multiple rows and don't want empty white space to the left or right of the bottom row, i.e. 3 on the top row and 2 on the bottom row. The central alignment is achieved using display: inline-block instead of floats.

In order to achieve centre alignment, you will need to combine two classes: center-container and center-align.

center-container

This class needs to be applied to the parent container of the modules, i.e. to the Inner Container. */
.center-container {
  word-spacing: -0.35rem;
  /* This will align the items centrally, but will also align the text centrally as well, so if you want the text to be left-aligned, you can overwrite this with the .left-text class further on. */
  text-align: center;
}
.center-container * {
  word-spacing: normal;
}
/* center-align

This class needs to be applied to the actual modules themselves, with the above center-container class applied to the parent container. */
.center-align {
  display: inline-block;
  float: none;
  /* This sets the left and right margins of the modules to be half the Fluid Margin. This is so that when the modules but up against each other, the combined half margins give the illusion of a full Fluid Margin. */
  margin-left: 1.5%;
  margin-right: 1.5%;
}
/* Left- and right-aligned

This allows you to align items either to the left or right using floats. Both classes are very similar, but whereas the center-align class has @fluid-margin*0.5 on both sides, these classes have a full @fluid-margin on just the side that they are floating. */
.left-align {
  display: block;
  float: left;
  margin-left: 3%;
  margin-right: 0;
  word-spacing: normal;
}
.right-align {
  display: block;
  float: right;
  margin-right: 3%;
  margin-left: 0;
  word-spacing: normal;
}
/* Clear Fix

These two classes allow you to add elements after modules to clear any floats. The first clear-fix class can be applied to an element to make it clear the floats. The second clear-fix-after can be applied to a parent container to create a pseudo element within the container that will clear the floats of all elements within it. */
.clear-fix {
  clear: both;
}
.clear-fix-after:after {
  display: block;
  position: relative;
  content: '';
  clear: both;
}
/*************************************************************************
 #Nesting
**************************************************************************/
/* The Nested class allows you to nest grid modules within other grid modules.
	
For example, you may want to achieve a four column layout, with the first column being something like a filter module, and the other three columns being a grid of modules. By default, if all of the modules were set to 'one-quarter-page', some would wrap under the filter module, which may be undesirable. By using the 'nested' class, you could create a layout based on a 'one-quarter-page' and 'three-quarters-page' module, with an extra container within the 'three-quarters-page' module called 'nested', and then the grid modules contained within this 'nested' container and each one set to 'one-third-page'. Normally this would add extra, unsightly space to the left and right of the 'three-quarters-page' element, but the 'nested' container within it will remove this.

Please note: the margins within the nested container will be proportionally smaller than the rest of the page, so it should be used with care and you should avoid too many levels of nesting. */
.nested {
  width: calc(100% + 3%*2);
  margin-left: -3%;
}
/*************************************************************************
 #Text Alignment
**************************************************************************/
/* The Text Alignment allows you to set the alignment of text within an element. */
.center-text {
  text-align: center;
}
.left-text {
  text-align: left;
}
.right-text {
  text-align: right;
}
/* 
Use: Image Treatments
Scope: All devices
Theme: WenWe Holding
Copyright 2025, © WenWe
Author: Supersonic Playground
*/
/* This file contains the various classes that apply to the images throughout the site. */
/*************************************************************************
 #Scaling
**************************************************************************/
/* The Scaling classes will scale an image proportionally to its container, with two options depending on whether the width or height should be most important. */
.full-width-image {
  width: 100%;
  height: auto;
}
.full-height-image {
  height: 100%;
  width: auto;
}
/*************************************************************************
 #Lazy Loading Images
**************************************************************************/
/* This will ensure that lazy loaded images will smoothly fade in. */
img {
  opacity: 1;
  transition: opacity 350ms cubic-bezier(0.5, 0, 0.5, 1);
}
img.lazy {
  opacity: 0;
}
/*************************************************************************
 #Standard WordPress Alignment Classes
**************************************************************************/
img {
  height: auto;
}
.alignleft,
.alignright,
.aligncenter,
.alignnone,
.wp-caption {
  width: auto!important;
  max-width: 100%!important;
  margin-bottom: 1.5rem;
}
.alignleft:last-child,
.alignright:last-child,
.aligncenter:last-child,
.alignnone:last-child,
.wp-caption:last-child {
  margin-bottom: 0;
}
.alignleft {
  float: left;
  margin-right: 1.5rem;
}
.alignright {
  float: right;
  margin-left: 1.5rem;
}
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption {
  position: relative;
}
.wp-caption img {
  width: 100%;
  height: auto;
}
.wp-caption-text {
  position: absolute!important;
  padding: 0.25rem 0.5rem 0.25rem 1.75rem !important;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.75);
  color: #FFFFFF;
  font-size: 0.75rem;
  text-align: center;
}
.wp-caption-text:before {
  left: 0.5rem;
}
/*************************************************************************
 #Responsive Video Container
**************************************************************************/
.video-container {
  margin-bottom: 1.5rem;
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.video-container:last-child {
  margin-bottom: 0;
}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*************************************************************************
 #CSS Object Fit Responsive Image
**************************************************************************/
.responsive-image {
  position: relative;
  width: 100%;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.responsive-image.responsive-background-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.responsive-image > .image-container,
.responsive-image > .video-container {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.responsive-image > .image-container img,
.responsive-image > .video-container img,
.responsive-image > .image-container iframe,
.responsive-image > .video-container iframe,
.responsive-image > .image-container object,
.responsive-image > .video-container object,
.responsive-image > .image-container embed,
.responsive-image > .video-container embed,
.responsive-image > .image-container video,
.responsive-image > .video-container video {
  width: 100%;
  height: 100%;
}
.responsive-image .video-container {
  height: 0;
  top: 50%;
  transform-origin: 50% 0;
  transform: translateY(-50%);
  padding-bottom: 56.25%;
}
.responsive-image .video-container .video-wrapper {
  display: block;
  position: absolute;
  width: 100%;
  height: 300%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.responsive-image.image-hover .image-container {
  transition: all 350ms cubic-bezier(0.5, 0, 0.5, 1);
  transform: scale(1);
}
.responsive-image.image-hover:hover .image-container {
  transform: scale(1.2);
}
.responsive-image-crop,
.responsive-image-fit {
  position: relative;
  width: 100%;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.responsive-image-crop.responsive-background-image,
.responsive-image-fit.responsive-background-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.responsive-image-crop > .image-container,
.responsive-image-fit > .image-container,
.responsive-image-crop > .video-container,
.responsive-image-fit > .video-container {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.responsive-image-crop > .image-container img,
.responsive-image-fit > .image-container img,
.responsive-image-crop > .video-container img,
.responsive-image-fit > .video-container img,
.responsive-image-crop > .image-container iframe,
.responsive-image-fit > .image-container iframe,
.responsive-image-crop > .video-container iframe,
.responsive-image-fit > .video-container iframe,
.responsive-image-crop > .image-container object,
.responsive-image-fit > .image-container object,
.responsive-image-crop > .video-container object,
.responsive-image-fit > .video-container object,
.responsive-image-crop > .image-container embed,
.responsive-image-fit > .image-container embed,
.responsive-image-crop > .video-container embed,
.responsive-image-fit > .video-container embed,
.responsive-image-crop > .image-container video,
.responsive-image-fit > .image-container video,
.responsive-image-crop > .video-container video,
.responsive-image-fit > .video-container video {
  width: 100%;
  height: 100%;
}
.responsive-image-crop .video-container,
.responsive-image-fit .video-container {
  height: 0;
  top: 50%;
  transform-origin: 50% 0;
  transform: translateY(-50%);
  padding-bottom: 56.25%;
}
.responsive-image-crop .video-container .video-wrapper,
.responsive-image-fit .video-container .video-wrapper {
  display: block;
  position: absolute;
  width: 100%;
  height: 300%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.responsive-image-crop.image-hover .image-container,
.responsive-image-fit.image-hover .image-container {
  transition: all 350ms cubic-bezier(0.5, 0, 0.5, 1);
  transform: scale(1);
}
.responsive-image-crop.image-hover:hover .image-container,
.responsive-image-fit.image-hover:hover .image-container {
  transform: scale(1.2);
}
.responsive-image-crop .image-container img {
  -o-object-fit: cover;
     object-fit: cover;
}
.responsive-image-fit .image-container img {
  -o-object-fit: contain;
     object-fit: contain;
}
/*************************************************************************
 #Aspect Ratios for Responsive Images
**************************************************************************/
/* #4:3 Ratio ------------------------------------------------------------------------ */
.four-by-three {
  padding-bottom: 75%;
}
/* #16:9 Ratio ------------------------------------------------------------------------ */
.sixteen-by-nine {
  padding-bottom: 56.25%;
}
/* #16:10 Ratio ------------------------------------------------------------------------ */
.sixteen-by-ten {
  padding-bottom: 62%;
}
/* #3:1 Ratio ------------------------------------------------------------------------ */
.three-by-one {
  padding-bottom: 33%;
}
/* #2:1 Ratio ------------------------------------------------------------------------ */
.two-by-one {
  padding-bottom: 50%;
}
/* #3:2 Ratio ------------------------------------------------------------------------ */
.three-by-two {
  padding-bottom: 66%;
}
/* #1:1 Ratio ------------------------------------------------------------------------ */
.one-by-one {
  padding-bottom: 100%;
}
/* #1:14 Ratio ------------------------------------------------------------------------ */
.one-by-one-four {
  padding-bottom: 141%;
}
/* #1:2 Ratio ------------------------------------------------------------------------ */
.one-by-two {
  padding-bottom: 200%;
}
/* 
Use: UI
Scope: All devices
Theme: WenWe Holding
Copyright 2025, © WenWe
Author: Supersonic Playground
*/
/* The 09-ui.less stylesheet contains the core button styles for you to customise buttons. The core .button class can be applied to both button and anchor elements, and more styles can be added to it.

Included Styles

There are a number of styles included within the Basic Front End Boilerplate to help you get a project up and running. You'll notice that the additional styles are included within the main .button class using &.class. This is because each of the styles needs to be added to the HTML element in order to combine them - on their own, the won't work.

So when creating a button in your HTML, your markup should look like the below:

<a href="" class="button medium blue-fill">Click me</a>

Size Classes

There are three different size classes using the small, medium and large classes.

Visual Classes

There are two different visual classes; expanding-button and static-button. However, these two classes are mixins and are not intended to be be used on their own. Instead they have been included within the blue-fill, blue-static, white-fill and white-static classes. The expanding-button class uses the :before and :after psuedo classes to create an expanding animation effect. The static-button classes are fall backs for instances where psuedo classes are not supported, for example within buttons. */
/*************************************************************************
 #UI controls
**************************************************************************/
/* #Buttons ------------------------------------------------------------------------ */
.button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: all 350ms cubic-bezier(0.5, 0, 0.5, 1);
  display: inline-block;
  position: relative;
  margin: 0 0 1.5rem 0;
  padding: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: transparent;
  text-align: center;
  text-indent: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  outline: none;
  border: none;
  border-radius: 0;
  border-bottom: none;
  text-shadow: none;
  cursor: pointer;
  transform: translate(0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  font-family: 'Outfit Regular', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
}
.button:last-child {
  margin-bottom: 0;
}
.button:focus {
  outline: none;
}
.button:hover {
  border-bottom: none;
}
.button:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.button:before,
.button:after {
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
  display: block;
  position: absolute;
  content: '';
  transform: translate(0, 0);
  transform: translate3d(0, 0, 0);
}
.button:before {
  z-index: -2;
}
.button:after {
  z-index: -1;
}
.button.small {
  min-width: 1.5rem;
  min-height: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  padding: 0 0.75rem;
}
.button.small:after {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
}
.button.medium {
  min-width: 2rem;
  min-height: 2rem;
  height: 2rem;
  line-height: 2rem;
  padding: 0 1rem;
}
.button.medium:after {
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
}
.button.large {
  min-width: 2.5rem;
  min-height: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  padding: 0 1.25rem;
}
.button.large:after {
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
}
.button.static-button {
  transition: none;
}
.button.black-static-button {
  transition: none;
  color: #FFFFFF;
  background-color: #000000;
}
.button.with-icon:before {
  position: relative;
  text-align: center;
  text-indent: 0;
  font-display: swap;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: 'Font Awesome 5 Pro', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  line-height: inherit;
  margin-right: 0.5rem;
}
.button.icon-only {
  padding: 0!important;
  text-indent: -9999px;
}
.button.icon-only:before {
  position: relative;
  text-align: center;
  text-indent: 0;
  font-display: swap;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: 'Font Awesome 5 Pro', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  line-height: inherit;
  margin-right: 0.5rem;
}
.button.icon-only:before {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.button.download:before {
  position: relative;
  text-align: center;
  text-indent: 0;
  font-display: swap;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: 'Font Awesome 5 Pro', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  line-height: inherit;
  margin-right: 0.5rem;
}
.button.download:before {
  content: '\f56d';
}
.text-link {
  display: table;
  margin: 0 auto;
  color: #1D1D1B;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Outfit Regular', 'Arial', sans-serif;
  font-weight: 400;
  text-decoration: none;
  transition: all 350ms cubic-bezier(0.5, 0, 0.5, 1);
}
.text-link:after {
  content: '';
  display: block;
  position: relative;
  height: 1px;
  width: 100%;
  background-color: #1D1D1B;
  transition: all 350ms cubic-bezier(0.5, 0, 0.5, 1);
}
.text-link:hover {
  color: #1D1D1B;
}
.text-link:hover:after {
  height: 2px;
}
/* 
Use: Forms
Scope: All devices
Theme: WenWe Holding
Copyright 2025, © WenWe
Author: Supersonic Playground
*/
/* The 10-lists.less stylesheet contains the basic list styles, as well as allowing custom list styles to be created to suit the design of the project.

For uls and ols, there is some basic indenting and styling defined that will affect all standard lists. There is also an additional .no-style-list class that can be added to a ul and ol to remove the basic styling when needed. */
/*************************************************************************
 #Basic Lists
**************************************************************************/
ul,
ol {
  /* This part indents the lists and creates common list styles. */
  margin-bottom: 1.5rem;
  margin-left: 2rem;
  list-style-position: outside;
}
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}
ul li,
ol li {
  margin-bottom: 0.5rem;
}
ul li:last-child,
ol li:last-child {
  margin-bottom: 0;
}
ul li ul,
ol li ul,
ul li ol,
ol li ol {
  margin-top: 0.5rem;
}
ul li {
  list-style-type: square;
}
ol li {
  list-style-type: decimal;
}
/* This part allows the above list styles to be removed. */
.no-style-list {
  margin-left: 0;
}
.no-style-list li {
  list-style-type: none;
}
.no-style-list li ul,
.no-style-list li ol {
  margin-top: 0;
}
/*************************************************************************
 #Icon List
**************************************************************************/
.icon-list {
  margin-left: 0;
  margin-bottom: 0;
}
.icon-list li {
  list-style-type: none;
}
.icon-list li ul,
.icon-list li ol {
  margin-top: 0;
}
.icon-list li {
  display: flex;
  align-items: center;
}
.icon-list li:last-child {
  margin-bottom: 0;
}
.icon-list li:before {
  font-display: swap;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: 'Font Awesome 5 Pro', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  color: #1D1D1B;
  font-size: 1rem;
}
/*************************************************************************
 #Contact List
**************************************************************************/
.contact-list {
  margin-left: 0;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-left: -0.375rem;
}
.contact-list li {
  list-style-type: none;
}
.contact-list li ul,
.contact-list li ol {
  margin-top: 0;
}
.contact-list li {
  display: flex;
  align-items: center;
}
.contact-list li:last-child {
  margin-bottom: 0;
}
.contact-list li:before {
  font-display: swap;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: 'Font Awesome 5 Pro', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  color: #1D1D1B;
  font-size: 1rem;
}
.contact-list li {
  position: relative;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.contact-list li a {
  color: #1A0545;
  text-decoration: none;
}
.contact-list li:before {
  color: #1A0545;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.25rem;
  height: 2rem;
  width: 2rem;
  background-color: transparent;
  border-radius: 50%;
  transition: all 250ms cubic-bezier(0.5, 0, 0.5, 1);
}
.contact-list li:hover:before {
  background-color: #DDCFFC;
}
.contact-list li.telephone:before {
  content: '\f879';
}
.contact-list li.email:before {
  content: '\f0e0';
}
.contact-list li.address:before {
  content: '\f3c5';
}
/* 
Use: Modular
Scope: All devices
Theme: WenWe Holding
Copyright 2025, © WenWe
Author: Supersonic Playground
*/
.logo {
  min-width: 180px;
}
@media screen and (min-width: 62.5em) {
  .logo {
    min-width: 200px;
  }
}
@media screen and (min-width: 93.75em) {
  .logo {
    min-width: 220px;
  }
}
.content {
  flex: 1 0 auto;
}
.content .title-container {
  display: flex;
  align-items: center;
  height: 100%;
}
/* 
Use: Carousels
Scope: All devices
Theme: WenWe Holding
Copyright 2025, © WenWe
Author: Supersonic Playground
*/
/* The 12-carousels.less stylesheet allows custom carousel styles to be created to suit the design of the project. */
/* 
Use: Animations
Scope: All devices
Theme: WenWe Holding
Copyright 2025, © WenWe
Author: Supersonic Playground
*/
/* The 13-animations.less stylesheet allows custom animation styles to be created to suit the design of the project. */
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* 
Use: Forms
Scope: All devices
Theme: WenWe Holding
Copyright 2025, © WenWe
Author: Supersonic Playground
*/
/* The 14-forms.less stylesheet contains the basic form styles, as well as allowing custom form styles to be created to suit the design of the project. */
/*************************************************************************
 #Global Form Elements
**************************************************************************/
button,
input,
textarea,
select,
option {
  transition: all 500ms cubic-bezier(0.5, 0, 0.5, 1);
  border: none!important;
  border-radius: 0!important;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  background: transparent;
}
button:focus,
input:focus,
textarea:focus,
select:focus,
option:focus {
  outline: none;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="submit"],
input[type="search"],
select {
  /* This can be changed to suit the design of your project */
  min-height: 2.5rem;
  height: 2.5rem;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="submit"],
input[type="search"] {
  line-height: 2.5rem;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="search"],
select {
  padding: 0 1rem !important;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="checkbox"],
input[type="radio"],
select,
textarea {
  background-color: !important;
  box-shadow: inset 0 0 0 3px /* be sure to specify a colour here that matches the above */ !important;
  /* Add a text colour to match the design of your project */
}
input[type="text"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="number"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="search"]::-moz-placeholder, input[type="checkbox"]::-moz-placeholder, input[type="radio"]::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder {
  /* Add a text colour to match the design of your project */
}
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="tel"]::placeholder,
input[type="search"]::placeholder,
input[type="checkbox"]::placeholder,
input[type="radio"]::placeholder,
select::placeholder,
textarea::placeholder {
  /* Add a text colour to match the design of your project */
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
select:focus,
textarea:focus {
  box-shadow: inset 0 0 0 3px /* be sure to specify a colour here */ !important;
}
button,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="submit"],
input[type="checkbox"],
input[type="radio"],
select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
select,
input[type="search"] {
  background-position: right center;
  background-repeat: no-repeat;
  background-size: auto 100%!important;
  padding-right: 2rem !important;
}
select {
  background-image: url('img/ui/icon-down-arrow.svg') !important;
}
input[type="search"] {
  background-image: url('img/ui/icon-search.svg') !important;
}
textarea {
  font-size: 100%;
  overflow: auto;
  vertical-align: top;
  padding: 0.5rem 1rem;
}
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="hidden"],
input[type="image"],
input[type="color"] {
  border: 0;
  border-radius: 0;
  padding: 0;
}
input[type="checkbox"],
input[type="radio"] {
  width: 1rem !important;
  min-width: 1rem !important;
  height: 1rem !important;
  min-height: 1rem !important;
  margin-left: 0;
  margin-bottom: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}
input[type="checkbox"]:checked {
  background-image: url('img/ui/icon-check.svg');
}
input[type="radio"] {
  border-radius: 50%;
}
input[type="radio"]:checked {
  background-image: url('img/ui/icon-radio.svg');
}
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  cursor: pointer;
}
button[disabled],
input[disabled] {
  cursor: default;
}
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
  border-color: transparent;
}
/* 
Use: Custom Styling
Scope: All devices
Theme: WenWe Holding
Copyright 2025, © WenWe
Author: Supersonic Playground
*/
/* 
Use: Header
Scope: All devices
Theme: WenWe Holding
Copyright 2025, © WenWe
Author: Supersonic Playground
*/
/* 
Use: Footer
Scope: All devices
Theme: WenWe Holding
Copyright 2025, © WenWe
Author: Supersonic Playground
*/
footer {
  flex-shrink: 0;
  padding: 1rem 0;
  font-size: 0.9rem;
  background-image: linear-gradient(88deg, #F3EFFE 0%, #DDF3F2 100%);
}
footer .contact-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 3rem;
}
footer .contact-details p {
  color: #1A0545;
  text-align: left;
  margin-bottom: 0;
}
footer .contact-details p strong {
  display: inline-block;
  width: 100%;
  margin: 0 0 1.5rem 0;
}
@media screen and (min-width: 46.875em) {
  footer .contact-details p strong {
    width: auto;
    margin: 0 0.75rem 0 0;
  }
}
footer .contact-details p span {
  display: inline-flex;
  gap: 0.125rem;
  font-family: 'Outfit Regular', 'Arial', sans-serif;
  font-weight: 400;
}
footer .contact-details p span:after {
  content: '';
  display: inline-block;
  height: 7px;
  width: 7px;
  background-color: #94DBD9;
  border-radius: 50%;
  margin: auto 0.25rem;
}
footer .contact-details p span:last-child:after {
  content: unset;
}
/* 
Use: Setup
Scope: All devices
Theme: Your Project Name
Copyright 2022, © Your Client Name
Author: Supersonic Playground
*/
/* The setup.less stylesheet is one of the most important files in the system, but also one of the simplest to use. It contains a handful of key settings that are used universally across the site. The default settings may be okay for your project, in which case you may never need to update this file. */
/*************************************************************************
 #Base Pixel Equivalent
**************************************************************************/
/* The Base Pixel Equivalent is one of the most important settings as it is used to set the size of text and elements across the project. We avoid using fixed pixel measurements, as by their nature, they are fixed and do not give us the level of adjustment we need for responsive layouts. Instead we use the Base Pixel Equivalent, which is the pixel size equivalent of the body copy used in the designs. This number is then converted into the variable @base-size which is used as the basis for all dimensions throughout the site.

We then use a series of media queries to adjust @base-size responsively, so that all elements within the project universally adjust to become smaller or larger depending on the size of the screen.

So for example, if the Base Pixel Equivalent is set to 20, and you needed to create an element that would normally be width: 100px, you would instead set this to width: @base-size*5.

The main advantage of all of this is that it means that all text and elements share a common scale. If we want to adjust this scale, we just have to update one setting - the Base Pixel Equivalent - and the dimensions across the project will update universally, instead of having to manually update countless arbitrary measurements throughout the project. */
/*************************************************************************
 #Grid Measurements
**************************************************************************/
/* This part sets the width of the @fluid-margin and @column-width variables. The grid system is based on 12 columns in total, with Fluid Margins in between each column, and also on the far left and right of the layout. This means that there are 12 columns and 13 margins in total. Therefore, when the @fluid-margin and @column-width variables are multiplied by these amounts, they should equal 100% or slightly under (13 x 3% = 39%, 12 x 5.083% = 60.996%, 39% + 60.996% = 99.996%).

If the design that you're working to requires larger margins and thinner columns (a more spacious design) or thinner margins and larger columns (a tighter design) then adjust these percentages as you need to. */
/* Horizontal margin equal to 30px @ 1000px */
/* Column width - equal to 50.83px @ 1000px */
/*************************************************************************
 #Animation Easing
**************************************************************************/
/* This creates the bezier curve variable that is used within many of the animations throughout the project. It gives the animation the illusion of physics/friction. For more info check out http://cubic-bezier.com/ */
/*************************************************************************
 #Basic HTML Settings
**************************************************************************/
html,
body {
  height: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  display: flex;
  flex-direction: column;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
  background-image: linear-gradient(63deg, #DDCFFC 0%, #94DBD9 100%);
}
body:after {
  content: '';
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  background-image: url("img/backgrounds/wenwe-bkg-mark.svg");
  background-size: contain;
  background-position: right bottom;
  background-repeat: no-repeat;
  pointer-events: none;
}
img,
svg {
  border: 0;
  margin: 0;
  padding: 0;
  image-rendering: auto;
}
svg {
  display: block;
}
/*# sourceMappingURL=style.css.map */