File: /var/www/delta/wp-content/themes/delta/frontend/app.229117c9033d0d40272e.css
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[2].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[4]!./styles/styles.scss ***!
\******************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700;800;900&display=swap);
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[2].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[4]!./styles/styles.scss (1) ***!
\**********************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Using copy-pasted normalize.css since importing it from node_modules causes issues */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
/* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* 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;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type=checkbox],
[type=radio] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-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.
*/
[type=search]::-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 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
ol {
padding: 0;
margin: 0;
}
:root {
--color-base-100: #fbfbfb;
--color-base-100-rgb: 251, 251, 251;
--color-base-100-20: rgba(251, 251, 251, 0.2);
--color-base-100-20-rgb: 251, 251, 251;
--color-base-200: #e9e9e9;
--color-base-200-rgb: 233, 233, 233;
--color-base-300: #0d1d12;
--color-base-300-rgb: 13, 29, 18;
--color-base-400: #0b0d0c;
--color-base-400-rgb: 11, 13, 12;
--color-base-400-50: rgba(11, 13, 12, 0.5);
--color-base-400-50-rgb: 11, 13, 12;
--color-primary-100: #70d44b;
--color-primary-100-rgb: 112, 212, 75;
--color-primary-100-80: rgba(112, 212, 75, 0.2);
--color-primary-100-80-rgb: 112, 212, 75;
--color-primary-200: #7cba4b;
--color-primary-200-rgb: 124, 186, 75;
--color-primary-200-10: rgba(124, 186, 75, 0.1);
--color-primary-200-10-rgb: 124, 186, 75;
--color-primary-200-80: rgba(124, 186, 75, 0.8);
--color-primary-200-80-rgb: 124, 186, 75;
--color-primary-200-90: rgba(124, 186, 75, 0.9);
--color-primary-200-90-rgb: 124, 186, 75;
--color-primary-300: #bff0ac;
--color-primary-300-rgb: 191, 240, 172;
--color-error: #ef4335;
--color-error-rgb: 239, 67, 53;
--color-delta-pink: #f04f74;
--color-delta-pink-rgb: 240, 79, 116;
--color-delta-blue: #00b9e5;
--color-delta-blue-rgb: 0, 185, 229;
--bg-base-gradient: linear-gradient(180deg, rgba(13, 29, 18, 0) 0%, #0d1d12 100%);
--bg-primary-gradient: linear-gradient(135deg, #7dbb4c 34.02%, #72b541 34.02%);
--bg-primary-btn-gradient: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(191, 240, 172, 0.4990371148) 75%, rgba(255, 255, 255, 0) 100%);
--font-stack-primary: sans-serif;
--transition-duration: 0.15s;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
min-height: 100%;
font-family: "Exo", sans-serif;
color: var(--color-base-100);
background: var(--color-base-400);
}
body.stop-scrolling {
height: 100%;
overflow: hidden;
}
.grecaptcha-badge {
opacity: 0;
visibility: hidden;
}
.otgs-development-site-front-end, .wpml-ls-statics-footer {
display: none !important;
}
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
max-width: 1800px;
padding: 0 20px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container-sm,
.container {
max-width: 540px;
}
.container-fluid {
padding: 0 20px;
}
}
@media (min-width: 768px) {
.container-md,
.container-sm,
.container {
max-width: 720px;
}
}
@media (min-width: 1020px) {
.container-lg,
.container-md,
.container-sm,
.container {
max-width: 960px;
padding: 0 20px;
}
}
@media (min-width: 1200px) {
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container {
max-width: 1290px;
}
}
.row {
display: flex;
flex-wrap: wrap;
}
.row > * {
box-sizing: border-box;
flex-shrink: 0;
width: 100%;
max-width: 100%;
}
.col {
flex: 1 0 0%;
}
.col-1 {
flex: 0 0 auto;
width: 8.33333333%;
}
.col-2 {
flex: 0 0 auto;
width: 16.66666667%;
}
.col-3 {
flex: 0 0 auto;
width: 25%;
}
.col-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
.col-5 {
flex: 0 0 auto;
width: 41.66666667%;
}
.col-6 {
flex: 0 0 auto;
width: 50%;
}
.col-7 {
flex: 0 0 auto;
width: 58.33333333%;
}
.col-8 {
flex: 0 0 auto;
width: 66.66666667%;
}
.col-9 {
flex: 0 0 auto;
width: 75%;
}
.col-10 {
flex: 0 0 auto;
width: 83.33333333%;
}
.col-11 {
flex: 0 0 auto;
width: 91.66666667%;
}
.col-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-1 {
margin-left: 8.33333333%;
}
.offset-2 {
margin-left: 16.66666667%;
}
.offset-3 {
margin-left: 25%;
}
.offset-4 {
margin-left: 33.33333333%;
}
.offset-5 {
margin-left: 41.66666667%;
}
.offset-6 {
margin-left: 50%;
}
.offset-7 {
margin-left: 58.33333333%;
}
.offset-8 {
margin-left: 66.66666667%;
}
.offset-9 {
margin-left: 75%;
}
.offset-10 {
margin-left: 83.33333333%;
}
.offset-11 {
margin-left: 91.66666667%;
}
@media (min-width: 576px) {
.col-sm {
flex: 1 0 0%;
}
.col-sm-1 {
flex: 0 0 auto;
width: 8.33333333%;
}
.col-sm-2 {
flex: 0 0 auto;
width: 16.66666667%;
}
.col-sm-3 {
flex: 0 0 auto;
width: 25%;
}
.col-sm-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
.col-sm-5 {
flex: 0 0 auto;
width: 41.66666667%;
}
.col-sm-6 {
flex: 0 0 auto;
width: 50%;
}
.col-sm-7 {
flex: 0 0 auto;
width: 58.33333333%;
}
.col-sm-8 {
flex: 0 0 auto;
width: 66.66666667%;
}
.col-sm-9 {
flex: 0 0 auto;
width: 75%;
}
.col-sm-10 {
flex: 0 0 auto;
width: 83.33333333%;
}
.col-sm-11 {
flex: 0 0 auto;
width: 91.66666667%;
}
.col-sm-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-sm-0 {
margin-left: 0;
}
.offset-sm-1 {
margin-left: 8.33333333%;
}
.offset-sm-2 {
margin-left: 16.66666667%;
}
.offset-sm-3 {
margin-left: 25%;
}
.offset-sm-4 {
margin-left: 33.33333333%;
}
.offset-sm-5 {
margin-left: 41.66666667%;
}
.offset-sm-6 {
margin-left: 50%;
}
.offset-sm-7 {
margin-left: 58.33333333%;
}
.offset-sm-8 {
margin-left: 66.66666667%;
}
.offset-sm-9 {
margin-left: 75%;
}
.offset-sm-10 {
margin-left: 83.33333333%;
}
.offset-sm-11 {
margin-left: 91.66666667%;
}
}
@media (min-width: 768px) {
.col-md {
flex: 1 0 0%;
}
.col-md-auto {
flex: 0 0 auto;
width: auto;
}
.col-md-1 {
flex: 0 0 auto;
width: 8.33333333%;
}
.col-md-2 {
flex: 0 0 auto;
width: 16.66666667%;
}
.col-md-3 {
flex: 0 0 auto;
width: 25%;
}
.col-md-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
.col-md-5 {
flex: 0 0 auto;
width: 41.66666667%;
}
.col-md-6 {
flex: 0 0 auto;
width: 50%;
}
.col-md-7 {
flex: 0 0 auto;
width: 58.33333333%;
}
.col-md-8 {
flex: 0 0 auto;
width: 66.66666667%;
}
.col-md-9 {
flex: 0 0 auto;
width: 75%;
}
.col-md-10 {
flex: 0 0 auto;
width: 83.33333333%;
}
.col-md-11 {
flex: 0 0 auto;
width: 91.66666667%;
}
.col-md-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-md-0 {
margin-left: 0;
}
.offset-md-1 {
margin-left: 8.33333333%;
}
.offset-md-2 {
margin-left: 16.66666667%;
}
.offset-md-3 {
margin-left: 25%;
}
.offset-md-4 {
margin-left: 33.33333333%;
}
.offset-md-5 {
margin-left: 41.66666667%;
}
.offset-md-6 {
margin-left: 50%;
}
.offset-md-7 {
margin-left: 58.33333333%;
}
.offset-md-8 {
margin-left: 66.66666667%;
}
.offset-md-9 {
margin-left: 75%;
}
.offset-md-10 {
margin-left: 83.33333333%;
}
.offset-md-11 {
margin-left: 91.66666667%;
}
}
@media (min-width: 1020px) {
.col-lg {
flex: 1 0 0%;
}
.col-lg-auto {
flex: 0 0 auto;
width: auto;
}
.col-lg-1 {
flex: 0 0 auto;
width: 8.33333333%;
}
.col-lg-2 {
flex: 0 0 auto;
width: 16.66666667%;
}
.col-lg-3 {
flex: 0 0 auto;
width: 25%;
}
.col-lg-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
.col-lg-5 {
flex: 0 0 auto;
width: 41.66666667%;
}
.col-lg-6 {
flex: 0 0 auto;
width: 50%;
}
.col-lg-7 {
flex: 0 0 auto;
width: 58.33333333%;
}
.col-lg-8 {
flex: 0 0 auto;
width: 66.66666667%;
}
.col-lg-9 {
flex: 0 0 auto;
width: 75%;
}
.col-lg-10 {
flex: 0 0 auto;
width: 83.33333333%;
}
.col-lg-11 {
flex: 0 0 auto;
width: 91.66666667%;
}
.col-lg-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-lg-0 {
margin-left: 0;
}
.offset-lg-1 {
margin-left: 8.33333333%;
}
.offset-lg-2 {
margin-left: 16.66666667%;
}
.offset-lg-3 {
margin-left: 25%;
}
.offset-lg-4 {
margin-left: 33.33333333%;
}
.offset-lg-5 {
margin-left: 41.66666667%;
}
.offset-lg-6 {
margin-left: 50%;
}
.offset-lg-7 {
margin-left: 58.33333333%;
}
.offset-lg-8 {
margin-left: 66.66666667%;
}
.offset-lg-9 {
margin-left: 75%;
}
.offset-lg-10 {
margin-left: 83.33333333%;
}
.offset-lg-11 {
margin-left: 91.66666667%;
}
}
@media (min-width: 1200px) {
.col-xl {
flex: 1 0 0%;
}
.col-xl-auto {
flex: 0 0 auto;
width: auto;
}
.col-xl-1 {
flex: 0 0 auto;
width: 8.33333333%;
}
.col-xl-2 {
flex: 0 0 auto;
width: 16.66666667%;
}
.col-xl-3 {
flex: 0 0 auto;
width: 25%;
}
.col-xl-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
.col-xl-5 {
flex: 0 0 auto;
width: 41.66666667%;
}
.col-xl-6 {
flex: 0 0 auto;
width: 50%;
}
.col-xl-7 {
flex: 0 0 auto;
width: 58.33333333%;
}
.col-xl-8 {
flex: 0 0 auto;
width: 66.66666667%;
}
.col-xl-9 {
flex: 0 0 auto;
width: 75%;
}
.col-xl-10 {
flex: 0 0 auto;
width: 83.33333333%;
}
.col-xl-11 {
flex: 0 0 auto;
width: 91.66666667%;
}
.col-xl-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-xl-0 {
margin-left: 0;
}
.offset-xl-1 {
margin-left: 8.33333333%;
}
.offset-xl-2 {
margin-left: 16.66666667%;
}
.offset-xl-3 {
margin-left: 25%;
}
.offset-xl-4 {
margin-left: 33.33333333%;
}
.offset-xl-5 {
margin-left: 41.66666667%;
}
.offset-xl-6 {
margin-left: 50%;
}
.offset-xl-7 {
margin-left: 58.33333333%;
}
.offset-xl-8 {
margin-left: 66.66666667%;
}
.offset-xl-9 {
margin-left: 75%;
}
.offset-xl-10 {
margin-left: 83.33333333%;
}
.offset-xl-11 {
margin-left: 91.66666667%;
}
}
@media (min-width: 1400px) {
.col-xxl {
flex: 1 0 0%;
}
.col-xxl-auto {
flex: 0 0 auto;
width: auto;
}
.col-xxl-1 {
flex: 0 0 auto;
width: 8.33333333%;
}
.col-xxl-2 {
flex: 0 0 auto;
width: 16.66666667%;
}
.col-xxl-3 {
flex: 0 0 auto;
width: 25%;
}
.col-xxl-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
.col-xxl-5 {
flex: 0 0 auto;
width: 41.66666667%;
}
.col-xxl-6 {
flex: 0 0 auto;
width: 50%;
}
.col-xxl-7 {
flex: 0 0 auto;
width: 58.33333333%;
}
.col-xxl-8 {
flex: 0 0 auto;
width: 66.66666667%;
}
.col-xxl-9 {
flex: 0 0 auto;
width: 75%;
}
.col-xxl-10 {
flex: 0 0 auto;
width: 83.33333333%;
}
.col-xxl-11 {
flex: 0 0 auto;
width: 91.66666667%;
}
.col-xxl-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-xxl-0 {
margin-left: 0;
}
.offset-xxl-1 {
margin-left: 8.33333333%;
}
.offset-xxl-2 {
margin-left: 16.66666667%;
}
.offset-xxl-3 {
margin-left: 25%;
}
.offset-xxl-4 {
margin-left: 33.33333333%;
}
.offset-xxl-5 {
margin-left: 41.66666667%;
}
.offset-xxl-6 {
margin-left: 50%;
}
.offset-xxl-7 {
margin-left: 58.33333333%;
}
.offset-xxl-8 {
margin-left: 66.66666667%;
}
.offset-xxl-9 {
margin-left: 75%;
}
.offset-xxl-10 {
margin-left: 83.33333333%;
}
.offset-xxl-11 {
margin-left: 91.66666667%;
}
}
@media (min-width: 1600px) {
.col-l {
flex: 1 0 0%;
}
.col-l-auto {
flex: 0 0 auto;
width: auto;
}
.col-l-1 {
flex: 0 0 auto;
width: 8.33333333%;
}
.col-l-2 {
flex: 0 0 auto;
width: 16.66666667%;
}
.col-l-3 {
flex: 0 0 auto;
width: 25%;
}
.col-l-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
.col-l-5 {
flex: 0 0 auto;
width: 41.66666667%;
}
.col-l-6 {
flex: 0 0 auto;
width: 50%;
}
.col-l-7 {
flex: 0 0 auto;
width: 58.33333333%;
}
.col-l-8 {
flex: 0 0 auto;
width: 66.66666667%;
}
.col-l-9 {
flex: 0 0 auto;
width: 75%;
}
.col-l-10 {
flex: 0 0 auto;
width: 83.33333333%;
}
.col-l-11 {
flex: 0 0 auto;
width: 91.66666667%;
}
.col-l-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-l-0 {
margin-left: 0;
}
.offset-l-1 {
margin-left: 8.33333333%;
}
.offset-l-2 {
margin-left: 16.66666667%;
}
.offset-l-3 {
margin-left: 25%;
}
.offset-l-4 {
margin-left: 33.33333333%;
}
.offset-l-5 {
margin-left: 41.66666667%;
}
.offset-l-6 {
margin-left: 50%;
}
.offset-l-7 {
margin-left: 58.33333333%;
}
.offset-l-8 {
margin-left: 66.66666667%;
}
.offset-l-9 {
margin-left: 75%;
}
.offset-l-10 {
margin-left: 83.33333333%;
}
.offset-l-11 {
margin-left: 91.66666667%;
}
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
}
h1,
.h1 {
font-size: 35px;
font-weight: 900;
line-height: 1;
}
@media screen and (min-width: 1020px) {
h1,
.h1 {
font-size: 50px;
}
}
@media screen and (min-width: 1200px) {
h1,
.h1 {
font-size: 68px;
}
}
@media screen and (min-width: 1600px) {
h1,
.h1 {
font-size: 90px;
}
}
h2,
.h2 {
font-size: 32px;
font-weight: 900;
line-height: 1;
}
@media screen and (min-width: 1020px) {
h2,
.h2 {
font-size: 40px;
}
}
@media screen and (min-width: 1200px) {
h2,
.h2 {
font-size: 58px;
}
}
@media screen and (min-width: 1600px) {
h2,
.h2 {
font-size: 76px;
}
}
h3,
.h3 {
font-size: 22px;
font-weight: 400;
line-height: 1.2;
}
@media screen and (min-width: 1020px) {
h3,
.h3 {
font-size: 30px;
}
}
@media screen and (min-width: 1200px) {
h3,
.h3 {
font-size: 35px;
}
}
@media screen and (min-width: 1600px) {
h3,
.h3 {
font-size: 40px;
}
}
h4,
.h4 {
font-size: 22px;
font-weight: 300;
line-height: 1.3;
}
@media screen and (min-width: 1020px) {
h4,
.h4 {
font-size: 26px;
}
}
@media screen and (min-width: 1200px) {
h4,
.h4 {
font-size: 30px;
}
}
h5,
.h5 {
font-size: 16px;
font-weight: 400;
line-height: 1.4;
}
@media screen and (min-width: 1020px) {
h5,
.h5 {
font-size: 20px;
}
}
@media screen and (min-width: 1200px) {
h5,
.h5 {
font-size: 22px;
}
}
h6,
.h6 {
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
@media screen and (min-width: 1020px) {
h6,
.h6 {
font-size: 18px;
}
}
p,
.p {
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
.t-300 {
font-weight: 300 !important;
}
.t-400 {
font-weight: 400 !important;
}
.t-500 {
font-weight: 500 !important;
}
.t-600 {
font-weight: 600 !important;
}
.t-700 {
font-weight: 700 !important;
}
.t-800 {
font-weight: 800 !important;
}
.t-900 {
font-weight: 900 !important;
}
a {
text-decoration: none;
color: var(--color-primary-100);
}
a:has(*) {
color: var(--color-base-100);
}
a:hover {
text-decoration: underline;
}
a:hover:has(*) {
text-decoration: none;
}
a.link-prettify {
color: var(--color-base-100);
}
a.link-prettify:hover {
text-decoration: none;
}
a.btn:hover {
text-decoration: none;
}
ul li a:hover {
text-decoration: none;
}
.text-primary-100 {
color: var(--color-primary-100) !important;
}
.text-primary-300 {
color: var(--color-primary-300) !important;
}
.white-text {
color: var(--color-base-100);
}
.d-flex {
display: flex !important;
}
.d-none {
display: none !important;
}
.d-block {
display: block !important;
}
.flex-column {
flex-direction: column !important;
}
.flex-row {
flex-direction: row !important;
}
.justify-center {
justify-content: center !important;
}
.row-reverse {
flex-direction: row-reverse;
}
.column-reverse {
flex-direction: column-reverse;
}
.align-center {
align-items: center !important;
}
.text-center {
text-align: center !important;
}
.m-x-10 {
margin: 10px 0 !important;
}
.m-x-20 {
margin: 20px 0 !important;
}
.m-x-30 {
margin: 30px 0 !important;
}
.m-t-10 {
margin-top: 10px !important;
}
.m-t-20 {
margin-top: 20px !important;
}
.m-t-30 {
margin-top: 30px !important;
}
.m-t-50 {
margin-top: 50px !important;
}
.m-t-60 {
margin-top: 60px !important;
}
.m-b-5 {
margin-bottom: 5px !important;
}
.m-b-10 {
margin-bottom: 10px !important;
}
.m-b-30 {
margin-bottom: 30px !important;
}
.mb-1 {
margin-bottom: 10px;
}
.mb-2 {
margin-bottom: 20px;
}
.mb-3 {
margin-bottom: 30px;
}
.mb-4 {
margin-bottom: 40px;
}
.mb-5 {
margin-bottom: 50px;
}
.mb-6 {
margin-bottom: 60px;
}
.mb-7 {
margin-bottom: 70px;
}
.mb-10 {
margin-bottom: 100px;
}
@media screen and (min-width: 768px) {
.hide-large {
display: none !important;
}
}
.hide-mobile {
display: none !important;
}
@media screen and (min-width: 768px) {
.hide-mobile {
display: initial !important;
}
}
.max-height {
height: 100% !important;
}
.green-border-bottom {
border-bottom: 3px solid var(--color-primary-200);
}
.pos-relative {
position: relative;
}
.light-border-top {
border-top: 1px solid var(--color-base-100-20);
}
.no-border-bottom {
border-bottom: none !important;
}
@keyframes textGlow {
0% {
-webkit-clip-path: polygon(0 0, 5% 0, 5% 100%, 0 100%);
clip-path: polygon(0 0, 5% 0, 5% 100%, 0 100%);
}
99% {
-webkit-clip-path: polygon(95% 0, 100% 0, 100% 100%, 95% 100%);
clip-path: polygon(95% 0, 100% 0, 100% 100%, 95% 100%);
}
100% {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
}
@keyframes iconAnimation {
0% {
transform: translate(-144%, -50%);
}
70% {
transform: translate(-144%, -50%);
}
100% {
transform: translate(-50%, -50%);
}
}
@keyframes iconExit {
0% {
transform: translate(-50%, -50%) scale(1);
}
15% {
transform: translate(-50%, -50%) scale(1);
}
30% {
transform: translate(-50%, -50%) scale(4.03);
}
40% {
transform: translate(-50%, -50%) scale(4.04);
}
70% {
transform: translate(-50%, -50%) scale(4);
}
80% {
transform: translate(-50%, -50%) scale(4);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(40);
opacity: 0;
}
}
@media screen and (min-width: 768px) {
@keyframes iconExit {
0% {
transform: translate(-50%, -50%) scale(1);
}
15% {
transform: translate(-50%, -50%) scale(1);
}
30% {
transform: translate(-50%, -50%) scale(2.03);
}
40% {
transform: translate(-50%, -50%) scale(2.04);
}
70% {
transform: translate(-50%, -50%) scale(2);
}
80% {
transform: translate(-50%, -50%) scale(2);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(40);
opacity: 0;
}
}
}
@keyframes textAnimation {
0% {
transform: translate(-50%, -50%);
}
70% {
transform: translate(-50%, -50%);
opacity: 1;
}
100% {
transform: translate(-46.5%, -50%) scale(0, 1);
opacity: 0;
}
}
@keyframes fadeOutEntry {
0% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
display: none;
}
}
@keyframes step-default {
0% {
width: calc((100% - 450px) / 4);
}
100% {
width: 20%;
}
}
@keyframes step-open {
0% {
width: calc((100% - 450px) / 4);
}
50% {
width: 450px;
}
100% {
width: 450px;
}
}
@keyframes step-open-first {
0% {
width: 20%;
}
50% {
width: 450px;
}
100% {
width: 450px;
}
}
@keyframes step-close {
0% {
width: 450px;
}
100% {
width: 20%;
}
}
@keyframes step-close-diff-animation {
0% {
width: 450px;
}
50% {
width: calc((100% - 450px) / 4);
}
100% {
width: calc((100% - 450px) / 4);
}
}
@keyframes smaller-step {
0% {
width: calc((100% - 450px) / 4);
}
100% {
width: calc((100% - 450px) / 4);
}
}
@keyframes smaller-first-step {
0% {
width: 20%;
}
50% {
width: calc((100% - 450px) / 4);
}
100% {
width: calc((100% - 450px) / 4);
}
}
@keyframes ballbns {
0% {
left: 0;
transform: translateX(-100%);
}
30% {
left: 0;
transform: translateX(-100%);
}
70% {
left: 100%;
transform: translateX(0%);
}
100% {
left: 100%;
transform: translateX(0%);
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
100% {
transform: scale(1.05);
}
}
@keyframes padding-wobble-enlarge {
50% {
padding: 10px 25px;
}
80% {
padding: 10px 26px;
}
100% {
padding: 10px 25px;
}
}
@keyframes padding-wobble-smaller {
0% {
padding: 10px 25px;
}
80% {
padding: 10px 14px;
}
100% {
padding: 10px 15px;
}
}
@keyframes deltaArrowBounce {
0% {
transform: translateY(-1px);
}
100% {
transform: translateY(4px);
}
}
@keyframes imageEntrance {
70% {
transform: translateX(35%);
}
100% {
transform: translateX(40%);
}
}
@media screen and (min-width: 1020px) {
@keyframes imageEntrance {
70% {
transform: translateX(45%);
}
100% {
transform: translateX(50%);
}
}
}
@keyframes cookieEntry {
0% {
transform: translateY(100%);
}
70% {
transform: translateY(-2%);
}
85% {
transform: translateY(0.5%);
}
100% {
transform: translateY(0%);
}
}
@media screen and (min-width: 576px) {
@keyframes cookieEntry {
0% {
transform: translateX(100%);
}
70% {
transform: translateX(-2%);
}
85% {
transform: translateX(0.5%);
}
100% {
transform: translateX(0%);
}
}
}
.btn {
background-color: transparent;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 10px 25px;
gap: 10px;
font-family: "Exo", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 150%;
color: var(--color-base-100);
transition: 0.4s;
text-transform: uppercase;
border: none;
}
.btn--primary {
background-color: var(--color-primary-200-80);
position: relative;
overflow: hidden;
}
.btn--primary:hover {
background-color: var(--color-primary-200);
}
.btn--primary:focus-visible {
background-color: var(--color-primary-200);
box-shadow: 0px 0px 0px 3px rgba(112, 212, 75, 0.5);
outline: none;
}
.btn--primary:disabled {
opacity: 0.6;
}
.btn--primary:after {
content: "";
position: absolute;
left: -100%;
bottom: 0;
height: 100%;
width: 100%;
background: var(--bg-primary-btn-gradient);
transition: 0.4s ease;
cursor: pointer;
}
.btn--primary:hover:after {
left: 100%;
}
.btn--secondary {
background-color: var(--color-base-400);
padding: 10px 15px;
animation: padding-wobble-smaller 0.3s ease 1 forwards;
}
.btn--secondary:hover {
color: var(--color-primary-100);
animation: padding-wobble-enlarge 0.3s ease 1 forwards;
}
.btn--secondary:focus-visible {
box-shadow: 0px 0px 0px 3px rgba(112, 212, 75, 0.5);
outline: none;
}
.btn--secondary:disabled {
opacity: 0.6;
}
.btn--tertiary {
background-color: transparent;
padding: 3px 15px;
position: relative;
}
@media only screen and (min-width: 1020px) {
.btn--tertiary {
justify-content: center;
align-items: center;
}
}
.btn--tertiary:before {
content: "";
position: absolute;
left: 50%;
bottom: 50%;
width: 10px;
height: 10px;
border-left: 1px solid var(--color-primary-100);
border-bottom: 1px solid var(--color-primary-100);
opacity: 0;
transition: 0.3s ease;
z-index: -1;
}
.btn--tertiary:after {
content: "";
position: absolute;
right: 50%;
top: 50%;
width: 10px;
height: 10px;
border-right: 1px solid var(--color-primary-100);
border-top: 1px solid var(--color-primary-100);
opacity: 0;
transition: 0.3s ease;
z-index: -1;
}
.btn--tertiary:hover, .btn--tertiary.active {
color: var(--color-primary-100);
}
.btn--tertiary:hover:before, .btn--tertiary.active:before {
opacity: 1;
left: 0;
bottom: 0;
}
.btn--tertiary:hover:after, .btn--tertiary.active:after {
opacity: 1;
right: 0;
top: 0;
}
.btn--tertiary.active:before, .btn--tertiary.active:after {
z-index: 999;
}
.btn--tertiary:focus-visible {
box-shadow: 0px 0px 0px 3px rgba(112, 212, 75, 0.5);
outline: none;
}
.btn--tertiary:disabled {
opacity: 0.6;
}
.btn--small {
padding: 3px 12px;
font-size: 16px;
}
.btn--cookies {
text-transform: capitalize;
padding: 7px 15px;
cursor: pointer;
z-index: 1;
width: 100%;
}
@media screen and (min-width: 576px) {
.btn--cookies {
width: auto;
}
}
.medium-project-card:hover .medium-project-card__image {
transform: scale(1.05);
}
.medium-project-card:hover .medium-project-card__inner:before {
height: calc(100% + 10px);
}
.medium-project-card:hover .medium-project-card__inner h6 {
color: var(--color-base-100);
}
.medium-project-card__image {
height: auto;
width: 300px;
-o-object-fit: cover;
object-fit: cover;
transition: 0.3s ease;
}
@media screen and (min-width: 768px) {
.medium-project-card__image {
width: 100%;
}
}
.medium-project-card__inner {
padding: 10px;
display: flex;
flex-direction: column;
position: relative;
}
.medium-project-card__inner:before {
content: "";
position: absolute;
top: -10px;
left: 0;
width: 100%;
height: 0;
background-color: var(--color-primary-200);
transition: 0.3s ease;
z-index: -1;
}
.medium-project-card__inner h6 {
color: var(--color-primary-100);
transition: 0.3s ease;
}
.medium-project-card__title {
text-transform: uppercase;
font-weight: 700;
color: var(--color-base-100);
}
@media screen and (min-width: 768px) {
.small-project-card:hover .small-project-card__image {
transform: scale(1.05);
}
.small-project-card:hover .small-project-card__inner:before {
width: calc(100% + 20px);
}
.small-project-card:hover .small-project-card__inner h6 {
color: var(--color-base-100);
}
}
.small-project-card > a {
display: flex;
flex-direction: column;
gap: 10px;
}
@media screen and (min-width: 768px) {
.small-project-card > a {
flex-direction: row;
gap: 20px;
}
}
.small-project-card > a > * {
width: 100%;
}
@media screen and (min-width: 768px) {
.small-project-card > a > * {
width: 50%;
}
}
.small-project-card__image {
height: auto;
-o-object-fit: cover;
object-fit: cover;
transition: 0.3s ease;
}
.small-project-card__inner {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0;
position: relative;
}
@media screen and (min-width: 768px) {
.small-project-card__inner {
padding: 0 10px 0 0;
}
}
.small-project-card__inner:before {
content: "";
position: absolute;
top: 10%;
left: -20px;
width: 0;
height: 80%;
background-color: var(--color-primary-200);
transition: 0.3s ease;
z-index: -1;
}
.small-project-card__inner h6 {
color: var(--color-primary-100);
transition: 0.3s ease;
}
.small-project-card__title {
text-transform: uppercase;
font-weight: 700;
color: var(--color-base-100);
}
.header {
position: fixed;
z-index: 99;
width: 100%;
border-bottom: 1px solid transparent;
}
@media only screen and (min-width: 0) {
.header {
height: 50px;
}
}
@media only screen and (min-width: 1020px) {
.header {
padding: 0 20px 0 0;
}
}
@media only screen and (min-width: 1400px) {
.header {
height: 90px;
}
}
.header.header--scrolled {
background: var(--color-base-400-50);
border-bottom: 1px solid var(--color-base-400);
transition: height 0.3s, width 0.3s;
}
@media only screen and (min-width: 1020px) {
.header.header--scrolled {
height: 45px;
}
.header.header--scrolled .header__logo-corner {
height: 45px;
width: 50px;
}
}
@media only screen and (min-width: 1400px) {
.header.header--scrolled {
height: 60px;
}
.header.header--scrolled .header__logo-main {
width: 250px;
}
.header.header--scrolled .header__logo-corner {
height: 60px;
width: 90px;
}
}
.header__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
.header__logo {
display: flex;
align-items: center;
z-index: 1;
}
@media only screen and (min-width: 0) {
.header__logo {
gap: 5px;
}
}
@media only screen and (min-width: 1400px) {
.header__logo {
gap: 20px;
}
}
.header__logo-corner {
background-color: var(--color-base-300);
transition: 0.3s;
}
@media only screen and (min-width: 0) {
.header__logo-corner {
height: 50px;
width: 50px;
}
}
@media only screen and (min-width: 1400px) {
.header__logo-corner {
height: 90px;
width: 90px;
}
}
.header__logo-main {
transition: 0.3s;
}
@media only screen and (min-width: 0) {
.header__logo-main {
width: 200px;
}
}
@media only screen and (min-width: 1020px) {
.header__logo-main {
display: none;
}
}
@media only screen and (min-width: 1400px) {
.header__logo-main {
display: block;
width: 300px;
}
}
@media only screen and (max-width: 1020px) {
.header__navigation__wrapper {
position: absolute;
height: 100svh;
width: 100%;
top: 0;
transition: 0.3s;
right: -100%;
display: flex;
padding: 80px 30px 30px 0;
justify-content: space-between;
background-color: var(--color-base-400);
}
.header__navigation__wrapper .sidebar-navigation {
position: relative;
display: block;
height: 100%;
}
.header__navigation__wrapper .sidebar-navigation__content {
padding: 0;
}
.header__navigation__wrapper.active {
right: 0;
}
}
@media only screen and (min-width: 1020px) {
.header__navigation__wrapper .sidebar-navigation {
display: none;
}
}
.header__navigation {
display: flex;
align-items: flex-end;
flex-direction: column;
justify-content: space-between;
width: 100%;
overflow-y: auto;
}
@media only screen and (min-width: 1020px) {
.header__navigation {
align-items: center;
flex-direction: row;
gap: 10px;
width: auto;
overflow-y: unset;
}
}
.header__navigation nav {
display: flex;
align-items: center;
height: 100%;
width: 100%;
}
@media screen and (min-width: 1020px) {
.header__navigation nav {
width: auto;
}
}
.header__navigation nav > ul {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 30px;
height: 100%;
width: 100%;
}
@media screen and (min-width: 1020px) {
.header__navigation nav > ul {
justify-content: flex-end;
align-items: center;
flex-direction: row;
gap: 20px;
width: auto;
}
}
.header__navigation nav > ul > li {
display: flex;
flex-direction: column;
align-items: flex-end;
position: relative;
width: 100%;
}
@media screen and (min-width: 1020px) {
.header__navigation nav > ul > li {
width: auto;
}
.header__navigation nav > ul > li:hover .header__submenu {
display: flex;
max-height: 500px;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
}
@media screen and (min-width: 1400px) {
.header__navigation nav > ul > li {
gap: 0;
}
}
@media screen and (min-width: 1600px) {
.header__navigation nav > ul > li {
gap: 20px;
}
}
@media screen and (max-width: 1020px) {
.header__navigation nav > ul > li.active .header__submenu {
display: flex;
max-height: 500px;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
}
.header__navigation nav > ul > li.btn {
position: absolute;
bottom: 30px;
right: 30px;
height: -moz-fit-content;
height: fit-content;
}
@media screen and (min-width: 1020px) {
.header__navigation nav > ul > li.btn {
position: relative;
bottom: unset;
right: unset;
}
}
.header__navigation nav > ul .language-switcher {
order: -1;
}
@media screen and (min-width: 1020px) {
.header__navigation nav > ul .language-switcher {
order: 99;
}
}
.header__submenu {
max-height: 0;
opacity: 0;
transform: translateY(-10px);
transition: transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
display: flex;
flex-direction: column;
pointer-events: none;
width: 100%;
}
@media screen and (min-width: 1020px) {
.header__submenu {
width: 540px;
position: absolute;
left: 0;
top: 33px;
padding-top: 5px;
}
}
.header__submenu--no-hover {
pointer-events: none !important;
}
@media screen and (min-width: 1020px) {
.header__submenu li {
background: var(--color-base-300);
}
}
.header__submenu li a {
display: block;
padding: 15px 20px;
color: var(--color-base-200);
font-size: 16px;
font-weight: 400;
text-align: right;
}
@media screen and (min-width: 1020px) {
.header__submenu li a {
font-weight: 700;
border-bottom: 1px solid var(--color-primary-100-80);
text-align: left;
}
.header__submenu li a:hover {
border-bottom: 1px solid var(--color-primary-100);
color: var(--color-base-200);
background: var(--color-primary-200-10);
}
}
.header__submenu li a p {
display: none;
padding-top: 5px;
text-transform: none;
font-size: 14px;
}
@media screen and (min-width: 1020px) {
.header__submenu li a p {
display: block;
}
}
@media screen and (min-width: 1020px) {
.header__submenu-xp-info {
display: flex;
justify-content: space-between;
}
}
.header__submenu-xp-info-inner {
display: none;
}
@media screen and (min-width: 1020px) {
.header__submenu-xp-info-inner {
display: flex;
gap: 4px;
align-items: center;
text-transform: none;
color: var(--color-base-200);
font-size: 14px;
font-weight: 400;
}
.header__submenu-xp-info-inner img {
width: 16px;
height: auto;
margin-bottom: 0;
}
}
@media only screen and (min-width: 1020px) and (max-width: 1400px) {
.header li .btn {
padding: 3px 12px;
font-size: 16px;
}
}
.header__hamburger {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.header__hamburger span, .header__hamburger span::before, .header__hamburger span::after {
background: var(--color-base-100);
border-radius: 3px;
content: "";
position: absolute;
width: 20px;
height: 1px;
transition: 0.3s ease-in-out;
}
.header__hamburger span::before {
margin: -5.5px 0 0 7px;
width: 13px;
}
.header__hamburger span::after {
margin-top: 5.5px;
}
.header__hamburger.active {
z-index: 1;
}
.header__hamburger.active span {
background: transparent;
}
.header__hamburger.active span::before {
width: 20px;
margin: 0;
transform: rotate(45deg);
}
.header__hamburger.active span::after {
margin: 0;
transform: rotate(-45deg);
}
@media only screen and (min-width: 1020px) {
.header__hamburger {
display: none;
}
}
.sidebar-navigation {
position: fixed;
background: var(--color-base-400-50);
z-index: 98;
height: 100vh;
height: 100svh;
width: 90px;
}
.sidebar-navigation__content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0 0 50px;
}
.sidebar-navigation .social-media {
display: flex;
flex-direction: column;
gap: 20px;
}
.sidebar-navigation .social-media__offer {
display: flex;
align-items: center;
transform: rotate(-180deg);
writing-mode: vertical-lr;
}
.sidebar-navigation .social-media__icons ul {
display: flex;
flex-direction: column;
gap: 20px;
}
.sidebar-navigation .social-media__icons ul li {
display: flex;
justify-content: center;
padding: 5px 10px;
border-right: 3px solid transparent;
transition: 0.2s ease;
}
.sidebar-navigation .social-media__icons ul li:hover {
border-right: 3px solid var(--color-primary-200);
}
.sidebar-navigation .social-media__icons ul li:hover img {
filter: none;
}
.sidebar-navigation .social-media__icons ul li a {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar-navigation .social-media__icons ul li a img {
height: 20px;
width: 20px;
filter: brightness(0) invert(1);
transition: 0.2s ease;
}
@media only screen and (min-width: 0) {
.sidebar-navigation {
display: none;
}
}
@media only screen and (min-width: 1200px) {
.sidebar-navigation {
display: block;
}
}
.intro-animation {
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
height: 100svh;
background: var(--color-base-400);
z-index: 100;
animation: fadeOutEntry 1.6s ease-out 1.2s forwards;
}
.intro-animation__inner {
position: relative;
}
.intro-animation__inner img {
position: absolute;
left: 50%;
top: 50%;
}
.intro-animation__icon {
animation: iconAnimation 1.2s ease-out forwards, iconExit 1.6s ease-out 1.2s forwards;
height: 43px;
}
@media screen and (min-width: 768px) {
.intro-animation__icon {
height: 60px;
}
}
@media screen and (min-width: 1200px) {
.intro-animation__icon {
height: 100px;
}
}
@media screen and (min-width: 1600px) {
.intro-animation__icon {
height: 129px;
}
}
.intro-animation__text {
animation: textAnimation 1.2s ease-out forwards;
height: 43px;
}
@media screen and (min-width: 768px) {
.intro-animation__text {
height: 60px;
}
}
@media screen and (min-width: 1200px) {
.intro-animation__text {
height: 100px;
}
}
@media screen and (min-width: 1600px) {
.intro-animation__text {
height: 129px;
}
}
.footer {
padding-top: 50px;
padding-bottom: 30px;
}
@media screen and (min-width: 768px) {
.footer {
padding-bottom: 20px;
}
}
@media screen and (min-width: 1200px) {
.footer {
padding-top: 80px;
}
}
.footer__logo {
width: 250px;
margin-bottom: 10px;
}
.footer__nav {
padding-top: 30px;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid var(--color-base-100-20);
border-top: 1px solid var(--color-base-100-20);
}
@media screen and (min-width: 1020px) {
.footer__nav {
border-top: none;
}
}
.footer__nav ul {
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
padding-left: 0;
margin: 0;
align-items: center;
}
@media screen and (min-width: 1020px) {
.footer__nav ul {
flex-direction: row;
gap: 20px;
}
}
.footer__nav ul li:last-child a::after {
display: none;
}
.footer__nav ul a {
color: var(--color-base-100);
display: flex;
align-items: center;
flex-direction: column;
gap: 10px;
text-transform: uppercase;
}
@media screen and (min-width: 1020px) {
.footer__nav ul a {
flex-direction: row;
gap: 20px;
}
}
.footer__nav ul a.xp {
display: flex;
align-items: center;
gap: 8px;
flex-direction: row;
}
.footer__nav ul a.xp img {
transform: translateY(-1px);
}
.footer__nav ul a::after {
content: "";
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-primary-200);
}
.footer__content {
display: flex;
flex-direction: row;
border-bottom: 1px solid var(--color-base-100-20);
margin-bottom: 30px;
padding-bottom: 30px;
padding-left: 20px;
}
@media screen and (min-width: 1200px) {
.footer__content {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
}
.footer__content p {
width: -moz-fit-content;
width: fit-content;
}
.footer__content img {
width: 100%;
}
.footer__content iframe {
width: 180px;
}
@media screen and (min-width: 1020px) {
.footer__content iframe {
width: 200px;
}
}
.footer__newsletter {
display: none;
padding-bottom: 30px;
}
.footer__newsletter-social {
margin-top: 10px;
}
.footer__newsletter-social ul {
display: flex;
flex-direction: row;
gap: 20px;
}
.footer__newsletter-social ul li {
display: flex;
justify-content: center;
padding: 5px;
transition: 0.2s ease;
}
.footer__newsletter-social ul li:hover img {
filter: none;
}
.footer__newsletter-social ul li a {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.footer__newsletter-social ul li a img {
height: 20px;
width: 20px;
filter: brightness(0) invert(1);
transition: 0.2s ease;
}
.footer__newsletter-title {
color: var(--color-primary-100);
}
.footer__form-title {
font-weight: 700;
}
.footer__bottom {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}
@media screen and (min-width: 768px) {
.footer__bottom {
flex-direction: row;
gap: 20px;
}
}
@media screen and (min-width: 768px) {
.footer__bottom p:first-child {
border-right: 1px solid var(--color-primary-100);
padding-right: 20px;
}
}
.footer__bottom a {
display: flex;
align-items: center;
justify-content: center;
}
.footer .wpcf7-form {
display: flex;
align-items: flex-end;
position: relative;
margin-top: 10px;
margin-bottom: 0;
padding-bottom: 30px;
}
@media screen and (min-width: 768px) {
.footer .wpcf7-form {
margin-top: 20px;
}
}
.footer .wpcf7-form > p {
position: relative;
}
.footer .wpcf7-form p:nth-child(3) {
overflow: hidden;
position: relative;
flex-shrink: 0;
}
.footer .wpcf7-form p:nth-child(3):after {
background: #fff;
content: "";
height: 155px;
left: -75px;
opacity: 0.2;
position: absolute;
top: -50px;
transform: rotate(35deg);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
width: 50px;
z-index: -10;
}
.footer .wpcf7-form p:nth-child(3):hover:after {
left: 120%;
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
.footer .wpcf7-form label {
text-transform: uppercase;
font-size: 14px;
color: var(--color-primary-100);
margin-left: 10px;
}
.footer .wpcf7-form-control-wrap {
display: inline-block;
width: 100%;
}
.footer .wpcf7-not-valid-tip {
margin-left: 10px;
}
.footer .wpcf7-response-output {
display: none;
}
.footer .wpcf7-spinner {
position: absolute !important;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #496a2f;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0;
opacity: 1;
margin: 0;
}
.footer .wpcf7-spinner::before {
display: none;
}
.footer .wpcf7-not-valid-tip {
position: absolute;
}
.footer .wpcf7-response-output {
position: absolute;
bottom: -50px;
margin: 0 !important;
}
.footer .wpcf7-email {
background: #0d1d12;
border: 1px solid var(--color-base-100-20);
height: 43px;
width: 93%;
margin-right: 20px;
color: #fff;
padding: 0 10px;
}
.footer .wpcf7-email:hover {
border: 1px solid var(--color-primary-200-80);
}
.footer .wpcf7-email:focus {
box-shadow: 0px 0px 10px var(--color-primary-100);
border: 1px solid var(--color-primary-200-80);
}
.footer .wpcf7-email:focus-visible {
outline: none;
}
.footer .wpcf7-submit {
background: var(--color-primary-200-80);
height: 43px;
border: none;
color: var(--color-base-100);
font-weight: 700;
font-size: 18px;
cursor: pointer;
padding: 7px 15px;
}
.footer .wpcf7-spinner__item {
width: 30px;
height: 10px;
position: relative;
border: 1px solid var(--color-base-100);
display: block;
margin: auto;
border-radius: 30px;
overflow: hidden;
opacity: 0.5;
}
.footer .wpcf7-spinner__item::before {
content: "";
position: absolute;
top: 1px;
width: 15px;
height: 6px;
background: var(--color-base-100);
border-radius: 10px;
animation: ballbns 0.8s linear infinite;
opacity: 0.5;
}
.footer .wpcf7 .wpcf7-submit {
cursor: pointer;
}
.modal-wrap,
.video-modal {
background-color: rgba(0, 0, 0, 0.7);
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -10;
opacity: 0;
visibility: hidden;
transition: 0.5s ease;
}
.modal-wrap .close-btn,
.video-modal .close-btn {
position: absolute;
filter: invert(100%);
cursor: pointer;
width: 24px;
height: 24px;
top: 30px;
right: 30px;
z-index: 10000;
}
.modal-wrap .close-btn img,
.video-modal .close-btn img {
height: 100%;
width: 100%;
padding: 4px;
}
.modal-wrap.show-modal,
.video-modal.show-modal {
z-index: 100;
opacity: 1;
visibility: visible;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.modal-wrap .modal,
.video-modal .modal {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
}
@media screen and (min-width: 768px) {
.modal-wrap .modal,
.video-modal .modal {
width: unset;
max-height: 90%;
max-width: 90%;
}
}
.video-modal .modal {
height: -webkit-fill-available;
height: -moz-available;
height: stretch;
}
@media screen and (min-width: 768px) {
.video-modal .modal {
width: 1280px;
height: 720px;
}
}
.cookies-bar {
background: transparent;
position: fixed;
bottom: 0;
right: 0;
width: 100%;
z-index: 10;
transform: translateX(100%);
transition: 0.2s;
}
@media screen and (min-width: 576px) {
.cookies-bar {
padding: 0 30px 30px;
width: 680px;
}
}
.cookies-bar.cookie-entry {
animation: cookieEntry 0.4s ease-in forwards;
}
@media screen and (min-width: 576px) {
.cookies-bar.cookie-entry {
animation: cookieEntry 0.5s ease-out forwards;
}
}
.cookies-bar__inner {
background: var(--color-base-400);
display: flex;
flex-direction: column;
gap: 20px;
justify-content: space-between;
padding: 20px;
}
@media screen and (min-width: 576px) {
.cookies-bar__inner {
flex-direction: row;
padding: 30px 30px 20px;
}
}
.cookies-bar__inner img {
width: 50px;
height: 50px;
}
.cookies-bar__content {
display: flex;
flex-direction: column;
gap: 15px;
}
@media screen and (min-width: 576px) {
.cookies-bar__content {
gap: 20px;
}
}
.cookies-bar__text {
margin: auto;
}
.cookies-bar__buttons {
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
justify-content: flex-end;
}
@media screen and (min-width: 576px) {
.cookies-bar__buttons {
flex-direction: row;
gap: 20px;
}
}
.language-switcher {
position: relative;
display: inline-block;
text-align: left;
}
.language-switcher__button {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 10px 10px 15px;
background: none;
text-transform: uppercase;
cursor: pointer;
border: 1px solid var(--color-base-100-20);
background: var(--color-base-300);
transition: all 0.3s ease-in-out;
min-width: 60px;
}
.language-switcher__button:hover {
border: 1px solid var(--primary-200, #7CBA4B);
background: var(--base-300, #0D1D12);
}
.language-switcher__text {
font-weight: bold;
font-size: 18px;
color: var(--color-base-100);
}
.language-switcher__arrow {
color: var(--color-base-100);
transition: transform 0.2s;
}
.language-switcher__dropdown {
position: absolute;
top: 100%;
right: 0;
z-index: 10;
opacity: 0;
visibility: hidden;
border: 1px solid var(--color-primary-200-10);
background: var(--color-base-300);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
min-width: 60px;
width: 100%;
margin-top: 1px;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
transform-origin: top right;
pointer-events: none;
padding-bottom: 4px;
}
.language-switcher__option {
display: block;
padding: 8px 16px;
text-transform: uppercase;
color: var(--color-base-100);
font-size: 16px;
line-height: 1.4;
width: 100%;
}
.language-switcher__option:hover {
background: var(--color-primary-200-10);
text-decoration: none;
}
.language-switcher__option--current {
color: var(--color-primary-100);
}
.language-switcher--active .language-switcher__button {
box-shadow: 0px 0px 0px 3px rgba(112, 212, 75, 0.5);
}
.language-switcher--active .language-switcher__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.language-switcher--active .language-switcher__arrow {
transform: rotate(180deg);
}
.error-page {
padding: 90px 0 10px;
}
@media screen and (min-width: 768px) {
.error-page {
padding: 150px 20px 0;
}
}
.error-page__wrap {
display: flex;
flex-direction: column;
align-items: center;
}
.error-page__inner {
transform: translateY(-40px);
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
@media screen and (min-width: 768px) {
.error-page__inner {
transform: translateY(-100px);
}
}
.error-page__title {
font-size: 100px;
line-height: 100px;
font-weight: 900;
}
@media screen and (min-width: 768px) {
.error-page__title {
font-size: 180px;
line-height: 180px;
}
}
.error-page__title--faded {
font-size: 100px;
font-weight: 900;
line-height: 100px;
opacity: 10%;
text-transform: uppercase;
}
@media screen and (min-width: 768px) {
.error-page__title--faded {
font-size: 230px;
line-height: 230px;
}
}
.error-page__text {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.error-page__text h6 {
width: 100%;
}
@media screen and (min-width: 768px) {
.error-page__text h6 {
width: 60%;
}
}
.blog {
padding-top: 125px;
padding-bottom: 50px;
}
@media screen and (min-width: 768px) {
.blog {
padding-top: 150px;
}
}
.blog__banner {
position: relative;
z-index: 1;
}
.blog__modal img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.blog__social {
display: flex;
gap: 15px;
align-items: center;
}
.blog__social-list {
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
}
@media screen and (min-width: 768px) {
.blog__social-list {
gap: 20px;
}
}
.blog__social-list a {
position: relative;
padding: 5px;
cursor: pointer;
}
.blog__social-list a:hover img {
filter: none;
}
.blog__social-list a:hover .tooltip {
display: block;
}
.blog__social-list a .tooltip {
position: absolute;
top: 0;
right: 50%;
height: auto;
background: var(--color-base-300);
border: 1px solid var(--color-base-100-20);
transform: translate(50%, -120%);
text-align: center;
padding: 0 10px;
display: none;
white-space: nowrap;
color: var(--color-base-100);
}
.blog__social-list a .tooltip:before {
content: "";
position: absolute;
width: 10px;
height: 10px;
left: calc(50% - 5px);
bottom: -5px;
background: var(--color-base-300);
border-right: 1px solid var(--color-base-100-20);
border-bottom: 1px solid var(--color-base-100-20);
transform: rotate(45deg);
z-index: 1;
}
.blog__social-list img {
margin-bottom: 0 !important;
filter: brightness(0) invert(1);
transition: 0.2s ease;
}
.blog__info {
height: 100%;
display: flex;
flex-direction: column;
}
@media screen and (min-width: 768px) {
.blog__info {
position: relative;
padding-left: 30px;
min-height: 350px;
}
}
.blog__info-title {
font-weight: 700;
margin-bottom: 10px;
}
@media screen and (min-width: 1400px) {
.blog__info-title {
margin-bottom: 20px;
}
}
.blog__info-tag {
display: flex;
gap: 20px;
margin: 10px 0 5px;
}
@media screen and (min-width: 1400px) {
.blog__info-tag {
margin: 0 0 10px;
}
}
.blog__info-tag p {
color: var(--color-primary-100);
}
@media screen and (min-width: 768px) {
.blog__info-tag p {
font-size: 18px;
}
}
.blog__info-tag p:first-child {
border-right: 1px solid var(--color-base-100-20);
padding-right: 20px;
}
.blog__btn-back {
position: absolute;
left: 0;
top: -30px;
}
@media screen and (min-width: 768px) {
.blog__btn-back {
position: relative;
left: auto;
top: auto;
margin-bottom: 50px;
}
}
.blog__img {
cursor: pointer;
}
.blog__img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
aspect-ratio: 3/2;
}
.blog__content {
background: var(--color-base-300);
padding: 20px 10px;
position: relative;
border-bottom: 1px solid var(--color-base-100-20);
margin-top: 30px;
}
@media screen and (min-width: 768px) {
.blog__content {
padding: 130px 40px 30px 40px;
top: -90px;
margin-top: 0;
-webkit-margin-after: -90px;
margin-block-end: -90px;
}
}
.blog__content-social {
background: var(--color-base-300);
padding: 20px 0;
}
.blog__content p {
font-size: 16px;
font-weight: 400;
line-height: 1.4;
margin-bottom: 30px;
}
.blog__content p:last-child {
margin-bottom: 0;
}
.blog__content h1,
.blog__content h2,
.blog__content h3,
.blog__content h4,
.blog__content h5,
.blog__content h6 {
font-size: 16px;
font-weight: 700;
line-height: 1.4;
margin-bottom: 10px;
}
@media screen and (min-width: 1020px) {
.blog__content h1,
.blog__content h2,
.blog__content h3,
.blog__content h4,
.blog__content h5,
.blog__content h6 {
font-size: 20px;
}
}
@media screen and (min-width: 1200px) {
.blog__content h1,
.blog__content h2,
.blog__content h3,
.blog__content h4,
.blog__content h5,
.blog__content h6 {
font-size: 22px;
}
}
.blog__content figure {
width: auto !important;
height: auto !important;
margin-bottom: 30px;
}
.blog__content img {
width: auto;
height: auto;
margin-bottom: 10px;
max-width: -webkit-fill-available;
max-width: -moz-available;
max-width: stretch;
}
.blog__content iframe {
width: 100% !important;
}
.blog__content figcaption {
text-align: center;
margin-bottom: 0;
}
@media screen and (min-width: 1200px) {
.blog__content figcaption {
font-size: 18px;
}
}
.blog__content .wp-block-image {
margin-bottom: 0;
}
.blog__content ul {
padding-left: 35px;
padding-bottom: 10px;
display: flex;
flex-direction: column;
gap: 5px;
}
.blog__content ul li {
position: relative;
font-size: 18px;
line-height: 1.5;
}
.blog__content ul li:after {
content: "";
position: absolute;
top: 12px;
left: -21px;
width: 8px;
height: 8px;
border-radius: 50px;
background-color: var(--color-primary-100);
transform: translate(0, -50%);
}
.blog__content ol {
padding-left: 30px;
padding-bottom: 10px;
display: flex;
flex-direction: column;
gap: 5px;
}
.blog__content ol li {
padding-left: 5px;
font-size: 18px;
line-height: 1.5;
}
.blog__content ol li::marker {
color: var(--color-primary-100);
font-weight: 600;
}
.blog__content ul ~ h1,
.blog__content ul ~ h2,
.blog__content ul ~ h3,
.blog__content ul ~ h4,
.blog__content ul ~ h5,
.blog__content ul ~ h6,
.blog__content ol ~ h1,
.blog__content ol ~ h2,
.blog__content ol ~ h3,
.blog__content ol ~ h4,
.blog__content ol ~ h5,
.blog__content ol ~ h6 {
margin-top: 20px;
}
@media only screen and (min-width: 0) {
.journeys-icon-points {
padding: 50px 0;
}
}
@media only screen and (min-width: 768px) {
.journeys-icon-points {
padding: 80px 0;
}
}
@media only screen and (min-width: 1200px) {
.journeys-icon-points {
padding: 100px 0 120px;
}
}
@media only screen and (min-width: 1400px) {
.journeys-icon-points {
padding: 150px 0 200px;
}
}
.journeys-icon-points h2 {
font-weight: 700;
}
@media only screen and (min-width: 0) {
.journeys-icon-points h2 {
margin-bottom: 30px;
}
}
@media only screen and (min-width: 768px) {
.journeys-icon-points h2 {
margin-bottom: 50px;
}
}
.journeys-icon-points__cards {
display: grid;
}
@media only screen and (min-width: 0) {
.journeys-icon-points__cards {
grid-template-columns: 1fr;
gap: 20px;
}
}
@media only screen and (min-width: 768px) {
.journeys-icon-points__cards {
grid-template-columns: repeat(3, 1fr);
}
}
@media only screen and (min-width: 1200px) {
.journeys-icon-points__cards {
gap: 50px;
}
}
.journeys-icon-points__cards .card__header {
display: flex;
gap: 20px;
align-items: center;
}
.journeys-icon-points__cards .card__header img {
height: auto;
}
.journeys-icon-points__cards .card__header h3 {
text-transform: uppercase;
font-weight: 700;
color: #70d44b;
}
@media only screen and (min-width: 0) {
.journeys-icon-points__cards .card__header img {
width: 40px;
}
}
@media only screen and (min-width: 768px) {
.journeys-icon-points__cards .card__header {
margin-bottom: 10px;
}
.journeys-icon-points__cards .card__header img {
width: 60px;
}
}
.homepage-hero {
height: 100vh;
background-image: url(assets/images/e12c94bead776a16f6aa.jpg);
background-repeat: no-repeat;
background-position: top right;
background-size: cover;
background-color: var(--color-base-600);
position: relative;
}
@media screen and (min-width: 768px) {
.homepage-hero {
background-position: center;
}
}
@media screen and (min-width: 1020px) {
.homepage-hero {
background-image: url(assets/images/82369a6d156ca7399b59.jpg);
}
}
.homepage-hero__wrap {
display: flex;
flex-direction: column;
gap: 20px;
justify-content: flex-start;
height: 100%;
padding: 120px 0 0;
}
@media screen and (min-width: 1000px) {
.homepage-hero__wrap {
justify-content: center;
padding: 0;
}
}
@media screen and (min-width: 1400px) {
.homepage-hero__wrap {
margin-left: 40px;
}
}
@media screen and (min-width: 1600px) {
.homepage-hero__wrap {
margin-left: 0px;
}
}
.homepage-hero__title {
text-transform: uppercase;
color: var(--color-primary-100);
position: relative;
overflow: hidden;
}
.homepage-hero__title:after {
content: attr(data-text);
position: absolute;
height: 100%;
top: 0;
left: 0px;
-webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
color: var(--color-base-100);
opacity: 0.5;
animation: textGlow 0.7s ease-out 1s forwards;
}
.homepage-hero__brands-wrap {
border-bottom: 1px solid var(--color-base-100-20);
}
@media screen and (min-width: 1200px) {
.homepage-hero__brands-wrap {
border-bottom: none;
}
}
.homepage-hero__brands {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 0px;
gap: 10px;
}
@media screen and (min-width: 380px) {
.homepage-hero__brands {
padding: 30px 10px;
}
}
@media screen and (min-width: 1200px) {
.homepage-hero__brands {
align-items: flex-end;
padding: 30px 0;
height: 120.8px;
transform: translateY(-120.8px);
}
}
.homepage-hero__brands-icons {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
width: 100%;
}
@media screen and (min-width: 380px) {
.homepage-hero__brands-icons {
width: 90%;
}
}
@media screen and (min-width: 768px) {
.homepage-hero__brands-icons {
width: unset;
gap: 30px;
}
}
.homepage-hero__brands-icons img {
height: 18px;
opacity: 0.8;
}
@media screen and (min-width: 1020px) {
.homepage-hero__brands-icons img {
height: 20px;
}
}
.homepage-hero__brands-icons img:hover {
opacity: 1;
filter: drop-shadow(0px 0px 10px white);
}
.homepage-hero__scroll-hint {
display: flex;
gap: 10px;
align-items: center;
margin-top: 20px;
cursor: pointer;
background: none;
border: none;
color: var(--color-base-100);
}
.homepage-hero__scroll-hint img {
width: 30px;
height: auto;
animation: bounceSlow 0.8s ease-out infinite;
}
body.admin-bar .homepage-hero {
height: calc(100vh - 46px);
}
@media screen and (min-width: 783px) {
body.admin-bar .homepage-hero {
height: calc(100vh - 32px);
}
}
@keyframes bounceSlow {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
.cta-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
text-align: center;
background: var(--bg-primary-gradient);
padding: 25px 10px 20px 10px;
}
@media screen and (min-width: 1020px) {
.cta-section {
padding: 40px 10px;
}
}
.cta-section__title {
color: var(--base-100, #FBFBFB);
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: 130%;
text-transform: uppercase;
}
.journeys-faq {
padding: 50px 0;
position: relative;
overflow-x: clip;
}
@media screen and (min-width: 1200px) {
.journeys-faq {
padding: 100px 0;
}
}
@media screen and (min-width: 768px) {
.journeys-faq {
overflow-x: inherit;
}
}
.journeys-faq::before {
content: "";
width: 700px;
height: 700px;
position: absolute;
left: -270px;
top: -55px;
background: radial-gradient(50% 50% at 50% 50%, rgba(112, 212, 75, 0.6) 0%, rgba(112, 212, 75, 0) 100%);
opacity: 0.4;
}
.journeys-faq__title {
-webkit-text-stroke: 3px var(--color-primary-100);
text-stroke: 3px var(--color-primary-100);
color: transparent;
font-size: 90px;
padding-left: 20px;
}
@media screen and (min-width: 768px) {
.journeys-faq__title {
padding-left: 0;
}
}
.journeys-faq__wrapper {
display: flex;
flex-direction: column;
gap: 20px;
}
@media screen and (min-width: 768px) {
.journeys-faq__wrapper {
flex-direction: row;
gap: 40px;
}
}
.journeys-faq__questions {
width: 100%;
}
.journeys-faq__accordion {
padding: 10px 36px 0px 10px;
margin-bottom: 10px;
border-bottom: 1px solid transparent;
position: relative;
}
@media screen and (min-width: 768px) {
.journeys-faq__accordion {
padding: 10px 65px 0px 20px;
}
}
.journeys-faq__accordion:hover {
border-bottom: 1px solid var(--color-primary-300);
background-color: var(--color-base-300);
}
.journeys-faq__accordion:first-child .journeys-faq__accordion__content {
height: auto;
}
.journeys-faq__accordion:last-child {
margin-bottom: 0;
}
.journeys-faq__accordion__header {
cursor: pointer;
padding-bottom: 10px;
}
.journeys-faq__accordion__header h6 {
font-weight: 700;
}
@media screen and (min-width: 768px) {
.journeys-faq__accordion__header h6 {
font-size: 18px;
}
}
.journeys-faq__accordion__header span {
position: relative;
display: block;
width: 16px;
height: 16px;
transition: all 0.6s;
}
@media screen and (min-width: 768px) {
.journeys-faq__accordion__header span {
width: 24px;
height: 24px;
}
}
.journeys-faq__accordion__header span::before, .journeys-faq__accordion__header span::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--color-primary-300);
box-shadow: 0px 0px 10px var(--color-primary-100);
transition: all 0.6s;
}
.journeys-faq__accordion__header span::before {
width: 16px;
height: 1.33px;
}
@media screen and (min-width: 768px) {
.journeys-faq__accordion__header span::before {
width: 24px;
height: 2px;
}
}
.journeys-faq__accordion__header span::after {
height: 16px;
width: 1.33px;
}
@media screen and (min-width: 768px) {
.journeys-faq__accordion__header span::after {
height: 24px;
width: 2px;
}
}
.journeys-faq__accordion__content {
overflow: hidden;
color: var(--color-base-200);
height: 0;
transition: all 0.6s;
}
.journeys-faq__accordion__nav {
position: absolute;
top: 50%;
right: 10px;
transform: translate(0, -50%);
}
@media screen and (min-width: 768px) {
.journeys-faq__accordion__nav {
right: 20px;
}
}
.journeys-faq__accordion.active {
border-bottom: 1px solid var(--color-primary-300);
background-color: var(--color-base-300);
transition: all 0.6s;
}
.journeys-faq__accordion.active .journeys-faq__accordion__header span::before {
background-color: var(--color-primary-300);
}
.journeys-faq__accordion.active .journeys-faq__accordion__header span::after {
background-color: transparent;
box-shadow: none;
}
.journeys-faq__accordion.active .journeys-faq__accordion__content {
opacity: 1;
margin-bottom: 10px;
}
.visual-tabs {
position: relative;
}
.visual-tabs > .container-fluid {
padding: 0;
}
@media screen and (min-width: 768px) {
.visual-tabs > .container-fluid {
padding: 0 20px;
}
}
.visual-tabs__position-img {
position: relative;
}
.visual-tabs__list {
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px solid var(--color-base-100-20);
overflow: scroll;
}
@media screen and (min-width: 768px) {
.visual-tabs__list {
overflow: auto;
}
}
.visual-tabs__list::-webkit-scrollbar {
display: none;
}
.visual-tabs__list li {
font-size: 16px;
font-weight: 700;
flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.visual-tabs__list li {
font-size: 22px;
}
}
.visual-tabs__item {
padding: 10px 30px;
cursor: pointer;
transition: 0.3s;
border-bottom: 2px solid transparent;
text-transform: uppercase;
color: var(--color-base-200);
opacity: 0.8;
}
.visual-tabs__item:hover {
color: var(--color-base-100);
opacity: 1;
}
.visual-tabs__item.active {
border-bottom: 2px solid var(--color-primary-200);
color: var(--color-primary-200);
opacity: 1;
}
.visual-tabs__block {
padding: 40px 20px 50px;
}
@media screen and (min-width: 768px) {
.visual-tabs__block {
padding: 30px 0;
}
}
@media screen and (min-width: 1200px) {
.visual-tabs__block {
padding: 50px 0;
}
}
@media screen and (min-width: 1400px) {
.visual-tabs__block {
padding: 80px 0 100px;
}
}
.visual-tabs__wrap {
counter-reset: counter;
padding-left: 60px;
padding-top: 30px;
}
@media screen and (min-width: 768px) {
.visual-tabs__wrap {
padding-left: 75px;
padding-top: 0;
}
}
.visual-tabs__wrap-title {
margin-bottom: 10px;
font-weight: 700;
transition: all 0.6s;
position: relative;
left: 0;
text-transform: uppercase;
}
@media screen and (min-width: 768px) {
.visual-tabs__wrap-title {
font-size: 20px;
}
}
@media screen and (min-width: 1200px) {
.visual-tabs__wrap-title {
font-size: 22px;
}
}
.visual-tabs__wrap-text {
transition: all 0.6s;
position: relative;
left: 0;
}
@media screen and (min-width: 768px) {
.visual-tabs__wrap-text {
font-size: 18px;
}
}
.visual-tabs__wrap-img {
margin: 0 -20px;
left: -65px;
top: 0;
z-index: -1;
height: 250px;
}
@media screen and (min-width: 768px) {
.visual-tabs__wrap-img {
position: absolute;
height: auto;
width: 55%;
}
}
@media screen and (min-width: 1400px) {
.visual-tabs__wrap-img {
width: auto;
}
}
.visual-tabs__wrap-img img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: top;
object-position: top;
}
.visual-tabs__wrap-img--right {
display: flex;
flex-direction: column-reverse;
}
.visual-tabs__wrap-img--right .visual-tabs__wrap {
padding-left: 0;
}
.visual-tabs__wrap-img--right .visual-tabs__wrap-img {
left: auto;
right: 0;
top: 50%;
}
@media screen and (min-width: 768px) {
.visual-tabs__wrap-img--right .visual-tabs__wrap-img {
transform: translate(0, -50%);
}
}
.visual-tabs__wrap-item {
position: relative;
margin-bottom: 60px;
}
@media screen and (min-width: 768px) {
.visual-tabs__wrap-item {
margin-bottom: 100px;
}
}
.visual-tabs__wrap-item.active .visual-tabs__wrap-text,
.visual-tabs__wrap-item.active .visual-tabs__wrap-title {
left: 5px;
}
@media screen and (min-width: 768px) {
.visual-tabs__wrap-item.active .visual-tabs__wrap-text,
.visual-tabs__wrap-item.active .visual-tabs__wrap-title {
left: 10px;
}
}
@media screen and (min-width: 1200px) {
.visual-tabs__wrap-item.active .visual-tabs__wrap-text,
.visual-tabs__wrap-item.active .visual-tabs__wrap-title {
left: 20px;
}
}
.visual-tabs__wrap-item.active .visual-tabs__wrap-title {
color: var(--color-primary-200);
}
.visual-tabs__wrap-item.active .visual-tabs__wrap-counter::before {
color: var(--color-primary-200);
opacity: 1;
}
.visual-tabs__wrap-item:nth-child(2n) {
margin-left: 50px;
}
@media screen and (min-width: 1200px) {
.visual-tabs__wrap-item:nth-child(2n) {
margin-left: 80px;
}
}
@media screen and (min-width: 1400px) {
.visual-tabs__wrap-item:nth-child(2n) {
margin-left: 100px;
}
}
.visual-tabs__wrap-item:nth-child(2n) .visual-tabs__wrap-counter span {
position: absolute;
top: 50%;
left: -35px;
transform: translate(0, -50%);
}
@media screen and (min-width: 1200px) {
.visual-tabs__wrap-item:nth-child(2n) .visual-tabs__wrap-counter span {
left: -55px;
}
}
@media screen and (min-width: 1400px) {
.visual-tabs__wrap-item:nth-child(2n) .visual-tabs__wrap-counter span {
left: -75px;
}
}
.visual-tabs__wrap-item:nth-child(2n) .visual-tabs__wrap-counter span::before {
content: "";
display: block;
width: 10px;
height: 150px;
border-left: 2px solid rgba(251, 251, 251, 0.2);
border-bottom: 2px solid rgba(251, 251, 251, 0.2);
margin-bottom: 25px;
}
@media screen and (min-width: 768px) {
.visual-tabs__wrap-item:nth-child(2n) .visual-tabs__wrap-counter span::before {
width: 30px;
}
}
.visual-tabs__wrap-item:nth-child(2n) .visual-tabs__wrap-counter span::after {
content: "";
display: block;
width: 10px;
height: 150px;
border-left: 2px solid rgba(251, 251, 251, 0.2);
border-top: 2px solid rgba(251, 251, 251, 0.2);
}
@media screen and (min-width: 768px) {
.visual-tabs__wrap-item:nth-child(2n) .visual-tabs__wrap-counter span::after {
width: 30px;
}
}
.visual-tabs__wrap-item:last-child {
margin-bottom: 0;
}
.visual-tabs__wrap-counter {
position: absolute;
top: 50%;
left: -60px;
transform: translate(0, -50%);
}
@media screen and (min-width: 768px) {
.visual-tabs__wrap-counter {
left: -65px;
}
}
@media screen and (min-width: 1200px) {
.visual-tabs__wrap-counter {
left: -90px;
}
}
.visual-tabs__wrap-counter::before {
counter-increment: counter;
content: counter(counter);
font-size: 80px;
font-weight: 900;
color: var(--color-base-100);
opacity: 0.2;
transition: all 0.6s;
}
@media screen and (min-width: 1200px) {
.visual-tabs__wrap-counter::before {
font-size: 120px;
}
}
.visual-tabs__wrap-counter--none .visual-tabs__wrap-item {
margin-bottom: 15px;
margin-left: 0;
}
.visual-tabs__content {
text-align: center;
}
@media screen and (min-width: 1200px) {
.visual-tabs__content {
margin-bottom: 10px;
}
}
@media screen and (min-width: 1400px) {
.visual-tabs__content {
margin-bottom: 60px;
}
}
.visual-tabs__content-title {
margin-bottom: 15px;
font-weight: 700;
}
@media screen and (min-width: 768px) {
.visual-tabs__content-title {
font-size: 30px;
margin-bottom: 10px;
}
}
@media screen and (min-width: 1200px) {
.visual-tabs__content-title {
font-size: 35px;
}
}
@media screen and (min-width: 1400px) {
.visual-tabs__content-title {
font-size: 40px;
}
}
@media screen and (min-width: 768px) {
.visual-tabs__content-subtitle {
font-size: 20px;
}
}
@media screen and (min-width: 1200px) {
.visual-tabs__content-subtitle {
font-size: 22px;
}
}
.visual-tabs__content-subtitle br {
display: none;
}
@media screen and (min-width: 768px) {
.visual-tabs__content-subtitle br {
display: block;
}
}
.visual-tabs__box {
position: relative;
}
@media screen and (min-width: 1600px) {
.visual-tabs__box {
padding-bottom: 50px;
}
}
@media screen and (min-width: 1200px) {
.visual-tabs__box .visual-tabs__wrap-img {
margin-right: 8.33333333%;
width: 50%;
}
}
@media screen and (min-width: 1400px) {
.visual-tabs__box .visual-tabs__wrap-img {
margin-right: 16.66666667%;
width: 40%;
}
}
.experience-types {
padding: 80px 0;
background-color: #030303;
}
@media screen and (min-width: 768px) {
.experience-types {
padding: 80px 20px;
background-image: url(assets/images/1940e6b52cd92c441268.jpg);
background-position: left bottom;
background-size: contain;
background-repeat: no-repeat;
}
}
@media screen and (min-width: 1200px) {
.experience-types {
padding: 100px 20px 120px;
}
}
.experience-types__inner {
display: flex;
flex-direction: column;
gap: 50px;
}
@media screen and (min-wdith: 768px) {
.experience-types__inner {
gap: 70px;
}
}
.experience-types__title-wrap {
display: flex;
flex-direction: column;
gap: 10px;
text-align: left;
}
@media screen and (min-width: 768px) {
.experience-types__title-wrap {
padding: 0 20px;
}
}
@media screen and (min-width: 1020px) {
.experience-types__title-wrap {
text-align: center;
padding: 0;
}
}
.experience-types__cards {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 30px;
}
@media screen and (min-width: 768px) {
.experience-types__cards {
gap: 0;
}
}
@media screen and (min-width: 1200px) {
.experience-types__cards {
grid-template-columns: repeat(3, 1fr);
}
}
.experience-types__card {
display: flex;
flex-direction: column;
gap: 10px;
}
@media screen and (min-width: 768px) {
.experience-types__card {
background: var(--color-base-400-50);
padding: 30px 20px;
}
}
.experience-types__card-inner {
display: flex;
flex-direction: row;
gap: 15px;
align-items: center;
}
@media screen and (min-width: 768px) {
.experience-types__card-inner {
gap: 20px;
}
}
@media screen and (min-width: 1200px) {
.experience-types__card-inner {
flex-direction: column;
align-items: flex-start;
}
}
.experience-types__icon {
width: 40px;
height: 40px;
}
@media screen and (min-width: 1020px) {
.experience-types__icon {
width: 60px;
height: 60px;
}
}
.latest-projects {
padding: 50px 0;
}
@media screen and (min-width: 768px) {
.latest-projects {
padding: 100px 0px 50px;
}
}
@media screen and (min-width: 1600px) {
.latest-projects {
padding: 100px 20px 50px;
}
}
.latest-projects__wrap {
display: flex;
flex-direction: column;
gap: 30px;
padding: 0 10px;
}
.latest-projects__title-wrap {
display: flex;
padding: 0 20px;
flex-direction: column;
gap: 10px;
}
@media screen and (min-width: 768px) {
.latest-projects__title-wrap {
flex-direction: row;
padding: 0;
gap: 0;
}
}
.latest-projects__title-wrap h2 {
display: flex;
align-items: center;
}
.latest-projects__title-inner {
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.latest-projects__title-inner {
padding-left: 20px;
border-left: 1px solid var(--color-base-100-20);
}
}
@media screen and (min-width: 1200px) {
.latest-projects__title-inner {
padding-left: 40px;
}
}
.latest-projects__mobile-border {
position: relative;
}
.latest-projects__mobile-border:after {
content: "";
position: absolute;
bottom: 0;
left: 20px;
height: 1px;
width: calc(100% - 40px);
background: var(--color-base-100-20);
}
@media screen and (min-width: 768px) {
.latest-projects__mobile-border:after {
display: none;
}
}
.latest-projects__projects {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: scroll;
gap: 20px;
padding: 0 20px;
}
@media screen and (min-width: 768px) {
.latest-projects__projects {
padding: 30px 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px 50px;
overflow-x: visible;
border-bottom: 1px solid var(--color-base-100-20);
}
}
@media screen and (min-width: 1200px) {
.latest-projects__projects {
grid-template-columns: repeat(3, 1fr);
gap: 50px;
}
}
@media screen and (min-width: 1600px) {
.latest-projects__projects {
gap: 60px;
}
}
.latest-projects__projects::-webkit-scrollbar {
display: none;
}
.journey-tabs {
padding: 80px 0px;
background-color: var(--color-base-600);
background-image: url(assets/images/2662639904c5e5727f7e.png);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
}
@media screen and (min-width: 1020px) {
.journey-tabs {
background-size: 150%;
padding: 80px 20px;
}
}
@media screen and (min-width: 1200px) {
.journey-tabs {
padding: 100px 20px;
background-size: contain;
}
}
@media screen and (min-width: 1400px) {
.journey-tabs {
padding: 100px 20px 150px;
}
}
.journey-tabs__inner {
display: flex;
flex-direction: column;
gap: 70px;
padding: 0;
}
@media screen and (min-width: 1020px) {
.journey-tabs__inner {
padding: 0 20px;
}
}
.journey-tabs__inner-title {
padding: 0 20px;
}
@media screen and (min-width: 1020px) {
.journey-tabs__inner-title {
padding: 0;
}
}
.journey-tabs__title-wrap {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
text-align: center;
}
.journey-tabs__cards {
display: flex;
flex-direction: column;
gap: 40px;
width: 100%;
}
@media screen and (min-width: 1020px) {
.journey-tabs__cards {
gap: 50px;
}
}
@media screen and (max-width: 1020px) {
.journey-tabs__cards-wrap > * {
padding: 0;
}
}
.journey-tabs__card {
padding: 35px 20px;
background: var(--color-base-300);
display: flex;
position: relative;
width: 100%;
overflow: hidden;
}
@media screen and (min-width: 1020px) {
.journey-tabs__card {
transform: skew(-20deg);
width: 80%;
overflow: initial;
padding: 35px 60px;
}
.journey-tabs__card:hover .journey-tabs__card-top-lines {
top: -10px;
left: -10px;
border-image-source: linear-gradient(0deg, rgba(191, 240, 172, 0) 0%, #bff0ac 100%);
}
.journey-tabs__card:hover .journey-tabs__card-bottom-lines {
bottom: -10px;
right: -10px;
border-image-source: linear-gradient(180deg, rgba(191, 240, 172, 0) 0%, #bff0ac 100%);
}
.journey-tabs__card:hover .journey-tabs__card-title {
color: var(--color-primary-300);
}
.journey-tabs__card:hover .journey-tabs__card-image img {
opacity: 1;
}
}
@media screen and (min-width: 1400px) {
.journey-tabs__card {
transform: skew(-25deg);
padding: 35px 80px;
}
}
@media screen and (min-width: 1600px) {
.journey-tabs__card {
width: 70%;
}
}
.journey-tabs__card-top-lines {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100%;
border: 2px solid;
border-image-slice: 1;
border-image-source: linear-gradient(270deg, rgba(112, 212, 75, 0) 0%, #70d44b 100%);
border-right: 0;
border-bottom: 0;
border-left: 0;
z-index: 1;
transition: ease 0.3s;
}
@media screen and (min-width: 1020px) {
.journey-tabs__card-top-lines {
border-left: 2px solid;
border-image-source: linear-gradient(0deg, rgba(112, 212, 75, 0) 0%, #70d44b 100%);
width: 170px;
}
}
@media screen and (min-width: 1400px) {
.journey-tabs__card-top-lines {
width: 213px;
}
}
.journey-tabs__card-bottom-lines {
position: absolute;
right: 0;
bottom: 0;
width: 100px;
height: 100%;
border: 2px solid;
border-image-slice: 1;
border-image-source: linear-gradient(90deg, rgba(112, 212, 75, 0) 0%, #70d44b 100%);
border-left: 0;
border-top: 0;
border-right: 0;
z-index: 1;
transition: ease 0.3s;
}
@media screen and (min-width: 1020px) {
.journey-tabs__card-bottom-lines {
border-right: 2px solid;
border-image-source: linear-gradient(180deg, rgba(112, 212, 75, 0) 0%, #70d44b 100%);
width: 170px;
}
}
@media screen and (min-width: 1400px) {
.journey-tabs__card-bottom-lines {
width: 213px;
}
}
.journey-tabs__card:nth-child(even) {
align-self: flex-end;
}
.journey-tabs__card-inner {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
z-index: 1;
}
@media screen and (min-width: 1020px) {
.journey-tabs__card-inner {
transform: skew(20deg);
width: 90%;
}
}
@media screen and (min-width: 1400px) {
.journey-tabs__card-inner {
transform: skew(25deg);
}
}
.journey-tabs__card-title {
font-weight: 700;
color: var(--color-primary-100);
transition: ease 0.2s;
}
.journey-tabs__card-image {
position: absolute;
right: -100px;
top: 0;
height: 100%;
}
@media screen and (min-width: 1020px) {
.journey-tabs__card-image {
transform: skew(20deg);
right: -40px;
}
}
@media screen and (min-width: 1400px) {
.journey-tabs__card-image {
transform: skew(25deg);
}
}
.journey-tabs__card-image img {
height: 100%;
width: 100%;
opacity: 0.75;
transition: ease 0.3s;
}
.journey-tabs__button {
cursor: pointer;
text-transform: none;
display: flex;
align-items: center;
gap: 4px;
}
.journey-tabs__button img {
width: 20px;
height: auto;
margin-bottom: 0;
}
.journeys-faq {
padding: 50px 0;
position: relative;
overflow-x: clip;
}
@media screen and (min-width: 1200px) {
.journeys-faq {
padding: 100px 0;
}
}
@media screen and (min-width: 768px) {
.journeys-faq {
overflow-x: inherit;
}
}
.journeys-faq::before {
content: "";
width: 700px;
height: 700px;
position: absolute;
left: -270px;
top: -55px;
background: radial-gradient(50% 50% at 50% 50%, rgba(112, 212, 75, 0.6) 0%, rgba(112, 212, 75, 0) 100%);
opacity: 0.4;
}
.journeys-faq__title {
-webkit-text-stroke: 3px var(--color-primary-100);
text-stroke: 3px var(--color-primary-100);
color: transparent;
font-size: 90px;
padding-left: 20px;
}
@media screen and (min-width: 768px) {
.journeys-faq__title {
padding-left: 0;
}
}
.journeys-faq__wrapper {
display: flex;
flex-direction: column;
gap: 20px;
}
@media screen and (min-width: 768px) {
.journeys-faq__wrapper {
flex-direction: row;
gap: 40px;
}
}
.journeys-faq__questions {
width: 100%;
}
.journeys-faq__accordion {
padding: 10px 36px 0px 10px;
margin-bottom: 10px;
border-bottom: 1px solid transparent;
position: relative;
}
@media screen and (min-width: 768px) {
.journeys-faq__accordion {
padding: 10px 65px 0px 20px;
}
}
.journeys-faq__accordion:hover {
border-bottom: 1px solid var(--color-primary-300);
background-color: var(--color-base-300);
}
.journeys-faq__accordion:first-child .journeys-faq__accordion__content {
height: auto;
}
.journeys-faq__accordion:last-child {
margin-bottom: 0;
}
.journeys-faq__accordion__header {
cursor: pointer;
padding-bottom: 10px;
}
.journeys-faq__accordion__header h6 {
font-weight: 700;
}
@media screen and (min-width: 768px) {
.journeys-faq__accordion__header h6 {
font-size: 18px;
}
}
.journeys-faq__accordion__header span {
position: relative;
display: block;
width: 16px;
height: 16px;
transition: all 0.6s;
}
@media screen and (min-width: 768px) {
.journeys-faq__accordion__header span {
width: 24px;
height: 24px;
}
}
.journeys-faq__accordion__header span::before, .journeys-faq__accordion__header span::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--color-primary-300);
box-shadow: 0px 0px 10px var(--color-primary-100);
transition: all 0.6s;
}
.journeys-faq__accordion__header span::before {
width: 16px;
height: 1.33px;
}
@media screen and (min-width: 768px) {
.journeys-faq__accordion__header span::before {
width: 24px;
height: 2px;
}
}
.journeys-faq__accordion__header span::after {
height: 16px;
width: 1.33px;
}
@media screen and (min-width: 768px) {
.journeys-faq__accordion__header span::after {
height: 24px;
width: 2px;
}
}
.journeys-faq__accordion__content {
overflow: hidden;
color: var(--color-base-200);
height: 0;
transition: all 0.6s;
}
.journeys-faq__accordion__nav {
position: absolute;
top: 50%;
right: 10px;
transform: translate(0, -50%);
}
@media screen and (min-width: 768px) {
.journeys-faq__accordion__nav {
right: 20px;
}
}
.journeys-faq__accordion.active {
border-bottom: 1px solid var(--color-primary-300);
background-color: var(--color-base-300);
transition: all 0.6s;
}
.journeys-faq__accordion.active .journeys-faq__accordion__header span::before {
background-color: var(--color-primary-300);
}
.journeys-faq__accordion.active .journeys-faq__accordion__header span::after {
background-color: transparent;
box-shadow: none;
}
.journeys-faq__accordion.active .journeys-faq__accordion__content {
opacity: 1;
margin-bottom: 10px;
}
.journeys-hero {
padding: 60px 0;
overflow-x: clip;
position: relative;
background-size: contain;
background-position: top;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
padding: 60px 0px 50px;
background-image: url(assets/images/0351b78b1a9ccd76edcf.png);
min-height: 100vh;
min-height: 100svh;
}
@media screen and (min-width: 1020px) {
.journeys-hero {
padding: 30px 0px 50px;
background-size: cover;
background-position: -70%;
min-height: unset;
height: 100vh;
}
}
@media screen and (min-width: 1020px) and (max-width: 1200px) and (min-height: 650px) {
.journeys-hero {
background-position: top;
}
}
@media screen and (min-width: 1200px) {
.journeys-hero {
padding: 30px 20px 50px;
background-position: right center;
}
}
@media screen and (min-width: 1600px) {
.journeys-hero {
padding: 30px 20px 100px;
}
}
.journeys-hero .container-fluid {
padding: 0;
}
@media screen and (min-width: 1020px) {
.journeys-hero .container-fluid {
padding: 0 20px;
}
}
@media screen and (min-width: 1020px) {
.journeys-hero__big-screen-wrap {
height: calc(100vh - 80px);
display: grid;
align-items: end;
justify-items: start;
}
}
@media screen and (min-width: 1600px) {
.journeys-hero__big-screen-wrap {
height: calc(100vh - 130px);
}
}
.journeys-hero__title-wrap {
display: flex;
flex-direction: column;
gap: 10px;
padding: 0 20px 30px 20px;
}
@media screen and (min-width: 1020px) {
.journeys-hero__title-wrap {
padding: 0;
width: 75%;
}
}
@media screen and (min-width: 1200px) {
.journeys-hero__title-wrap {
width: 70%;
}
}
@media screen and (min-width: 1600px) {
.journeys-hero__title-wrap {
width: 90%;
}
}
.journeys-hero__title {
color: var(--color-primary-100);
}
@media screen and (min-width: 1200px) {
.journeys-hero__title {
font-size: 60px;
letter-spacing: 1.2px;
}
}
@media screen and (min-width: 1600px) {
.journeys-hero__title {
font-size: 90px;
letter-spacing: 1.8px;
}
}
@media screen and (min-width: 1020px) {
.journeys-hero__subtitle-upper, .journeys-hero__subtitle-lower {
font-size: 26px;
}
}
@media screen and (min-width: 1600px) {
.journeys-hero__subtitle-upper, .journeys-hero__subtitle-lower {
font-size: 40px;
}
}
.journeys-hero__mobile-img {
display: block;
width: 100%;
height: auto;
padding: 10px 0;
}
@media screen and (min-width: 1020px) {
.journeys-hero__mobile-img {
display: none;
}
}
.journeys-hero__mobile-img img {
width: 100%;
height: 100%;
max-height: 70vh;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (min-width: 768px) {
.journeys-hero__mobile-img img {
max-height: 60vh;
}
}
.journeys-hero__line {
width: 50%;
padding: 20px 0 0 16px;
}
@media screen and (min-width: 1020px) {
.journeys-hero__line {
padding: 0;
}
}
.journeys-hero__text {
padding: 10px 20px 0;
font-size: 16px;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.journeys-hero__text {
padding: 0 0 30px 20px;
}
}
@media screen and (min-width: 1020px) {
.journeys-hero__text {
padding: 15px 0px 20px 10px;
}
}
@media screen and (min-width: 1600px) {
.journeys-hero__text {
padding: 15px 0px 0px 10px;
width: 90%;
font-size: 22px;
line-height: 1.4;
}
}
.journeys-hero__text p {
margin-bottom: 15px;
}
.journeys-hero__text p:last-child {
margin-bottom: 0;
}
@media screen and (min-width: 768px) {
.journeys-hero__text p {
font-size: 22px;
}
}
.journeys-hero__effect {
display: none;
}
@media screen and (min-width: 1020px) {
.journeys-hero__effect {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}
.journeys-hero__effect img {
height: 100%;
width: 100%;
}
@media screen and (min-width: 768px) {
.journeys-hero__effect img {
width: auto;
}
}
.journeys-hero__arrow {
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%, 0);
width: 20px;
cursor: pointer;
}
@media screen and (min-width: 768px) {
.journeys-hero__arrow {
width: 30px;
}
}
#green-pointer {
animation: deltaArrowBounce 1s infinite ease-in-out alternate;
}
.journeys-video {
overflow-x: hidden;
}
@media only screen and (min-width: 0) {
.journeys-video {
padding: 30px 0;
}
}
@media screen and (min-width: 768px) {
.journeys-video {
padding: 50px 0;
}
}
@media screen and (min-width: 1200px) {
.journeys-video {
padding: 100px 0;
}
}
.journeys-video__video {
position: relative;
display: flex;
height: 100%;
justify-content: center;
}
.journeys-video__video:after {
content: "";
position: absolute;
left: -30px;
top: 0;
width: 90px;
height: 90px;
background: radial-gradient(50% 50% at 50% 50%, rgba(220, 255, 207, 0.6) 0%, rgba(112, 212, 75, 0) 100%);
transition: 0.3s;
opacity: 0.2;
z-index: 1;
}
.journeys-video__video:hover:after {
top: 70%;
opacity: 1;
}
.journeys-video__video:before {
content: "";
position: absolute;
right: -30px;
bottom: 0;
width: 90px;
height: 90px;
background: radial-gradient(50% 50% at 50% 50%, rgba(220, 255, 207, 0.6) 0%, rgba(112, 212, 75, 0) 100%);
transition: 0.3s;
opacity: 0.2;
z-index: 1;
}
.journeys-video__video:hover:before {
bottom: 70%;
opacity: 1;
}
.journeys-video__video__thumbnail {
width: 100%;
opacity: 0.8;
transition: 0.3s;
filter: drop-shadow(0px 0px 10px #70d44b);
border: 3px solid #bff0ac;
-o-object-fit: cover;
object-fit: cover;
aspect-ratio: 16/9;
}
.journeys-video__video__thumbnail:hover {
opacity: 1;
cursor: pointer;
}
.journeys-video__video__thumbnail:hover ~ .play-btn {
transform: scale(1.1);
}
.journeys-video__video__play-btn {
width: 50px;
height: 50px;
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
transition: 0.2s;
}
.journeys-video__video__play-btn:hover {
transform: scale(1.1);
cursor: pointer;
}
.journeys-video__description {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 0 20px;
}
@media only screen and (min-width: 768px) {
.journeys-video__description {
padding: 0 0 0 40px;
}
}
.journeys-video__description p {
margin: 0 0 20px;
color: var(--color-base-200);
}
@media only screen and (min-width: 1020px) {
.journeys-video__description p {
font-size: 18px;
}
}
.journeys-video__description h3 {
font-weight: 700;
}
@media only screen and (min-width: 0) {
.journeys-video__description h3 {
margin-bottom: 10px;
}
}
@media only screen and (min-width: 1200px) {
.journeys-video__description h3 {
margin-bottom: 30px;
}
}
.journeys-content {
margin: 50px 0 30px 0;
overflow-x: clip;
}
@media (min-width: 768px) {
.journeys-content {
margin: 80px 0 50px 0;
}
}
@media (min-width: 1200px) {
.journeys-content {
margin: 100px 0 150px 0;
}
}
@media (min-width: 1400px) {
.journeys-content {
margin: 150px 0;
}
}
.journeys-content--left .journeys-content__img {
left: -260px;
}
.journeys-content__wrapper {
position: relative;
}
@media (min-width: 768px) {
.journeys-content__wrapper {
margin-bottom: 120px;
}
}
.journeys-content__wrapper:last-child {
margin-bottom: 0;
}
.journeys-content__title {
text-align: center;
margin-bottom: 50px;
font-weight: 700;
}
@media (min-width: 768px) {
.journeys-content__title {
font-size: 30px;
margin-bottom: 80px;
}
}
@media (min-width: 1200px) {
.journeys-content__title {
margin-bottom: 150px;
}
}
@media (min-width: 1400px) {
.journeys-content__title {
font-size: 40px;
}
}
.journeys-content__img {
margin: 0 -20px;
z-index: -1;
}
.journeys-content__img img {
width: 100%;
}
@media (min-width: 1200px) {
.journeys-content__img img {
width: auto;
}
}
@media (min-width: 1200px) {
.journeys-content__img {
position: absolute;
right: -220px;
transform: translate(0, -50%);
top: 40%;
}
}
.journeys-content__wrapper-title {
font-weight: 700;
margin-bottom: 10px;
}
@media (min-width: 768px) {
.journeys-content__wrapper-title {
font-size: 26px;
padding-left: 20px;
}
}
@media (min-width: 1200px) {
.journeys-content__wrapper-title {
font-size: 30px;
}
}
@media (min-width: 1400px) {
.journeys-content__wrapper-title {
padding-left: 0;
}
}
.journeys-content__wrapper-text {
font-size: 18px;
margin-bottom: 20px;
}
@media (min-width: 768px) {
.journeys-content__wrapper-text {
padding-left: 20px;
margin-bottom: 50px;
}
}
@media (min-width: 1200px) {
.journeys-content__wrapper-text {
margin-bottom: 70px;
}
}
@media (min-width: 1400px) {
.journeys-content__wrapper-text {
padding-left: 0;
padding-right: 60px;
}
}
.journeys-content__wrapper-text:last-child {
margin-bottom: 0;
}
.journeys-sliding-steps {
padding: 150px 0 200px;
position: relative;
overflow-y: visible;
overflow-x: clip;
}
@media screen and (max-width: 1200px) {
.journeys-sliding-steps {
padding: 50px 0 80px;
}
}
@media screen and (max-width: 768px) {
.journeys-sliding-steps {
padding: 30px 0;
}
}
.journeys-sliding-steps:after {
content: "";
position: absolute;
top: calc(50% - 350px);
right: -270px;
width: 700px;
height: 700px;
background: radial-gradient(50% 50% at 50% 50%, rgba(112, 212, 75, 0.6) 0%, rgba(112, 212, 75, 0) 100%);
opacity: 0.4;
}
.journeys-sliding-steps__wrapper {
margin-top: 30px;
display: flex;
flex-direction: row;
}
@media screen and (max-width: 1020px) {
.journeys-sliding-steps__wrapper {
display: flex;
flex-direction: column;
margin: auto;
margin-top: 30px;
}
}
.journeys-sliding-steps__wrapper .journeys-step {
width: 100%;
display: flex;
padding: 20px;
border: 1px solid #bff0ac;
box-shadow: 0 0 10px var(--color-primary-100);
transition: 0.2s;
opacity: 1;
z-index: 1;
}
@media screen and (min-width: 0) {
.journeys-sliding-steps__wrapper .journeys-step {
padding: 15px 10px;
background: var(--color-base-300);
}
}
@media screen and (min-width: 1020px) {
.journeys-sliding-steps__wrapper .journeys-step {
padding: 40px 0 40px 20px;
opacity: 0.6;
animation: step-default 0.2s ease 1 forwards;
background: var(--color-base-300);
}
.journeys-sliding-steps__wrapper .journeys-step:hover {
opacity: 1;
animation: step-open 0.2s ease 1 forwards;
}
.journeys-sliding-steps__wrapper .journeys-step.active {
animation: step-open-first 0.2s ease 1 forwards;
}
.journeys-sliding-steps__wrapper .journeys-step.last {
animation: step-close 0.2s ease 1 forwards;
}
.journeys-sliding-steps__wrapper .journeys-step.smaller {
animation: smaller-step 0.2s ease 1 forwards;
}
.journeys-sliding-steps__wrapper .journeys-step.last-diff-animation {
animation: step-close-diff-animation 0.2s ease 1 forwards !important;
}
.journeys-sliding-steps__wrapper .journeys-step.smaller-first {
animation: smaller-first-step 0.2s ease 1 forwards;
}
}
.journeys-sliding-steps__wrapper .journeys-step__number {
font-size: 90px;
align-self: center;
-webkit-text-stroke: 3px var(--color-primary-100);
color: var(--color-base-300);
}
@media screen and (max-width: 1020px) {
.journeys-sliding-steps__wrapper .journeys-step__number {
width: 70px;
text-align: center;
}
}
@media screen and (max-width: 768px) {
.journeys-sliding-steps__wrapper .journeys-step__number {
font-size: 70px;
width: 50px;
}
}
.journeys-sliding-steps__wrapper .journeys-step:hover .step__number {
-webkit-text-stroke: 3px var(--color-primary-300);
text-shadow: 0px 0px 10px var(--color-primary-100);
}
.journeys-sliding-steps__wrapper .journeys-step__content {
padding: 0 20px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
@media screen and (max-width: 1020px) {
.journeys-sliding-steps__wrapper .journeys-step__content {
width: calc(100% - 70px);
padding-right: 0;
}
}
@media screen and (max-width: 768px) {
.journeys-sliding-steps__wrapper .journeys-step__content {
width: calc(100% - 50px);
padding-left: 10px;
}
}
.journeys-sliding-steps__wrapper .journeys-step__content p {
width: 320px;
font-size: 16px;
line-height: 24px;
}
@media screen and (max-width: 1020px) {
.journeys-sliding-steps__wrapper .journeys-step__content p {
width: unset;
}
}
.journeys-sliding-steps__wrapper .journeys-step__title {
color: var(--color-primary-100);
white-space: nowrap;
font-weight: 700;
}
@media screen and (min-width: 1020px) {
.journeys-sliding-steps__wrapper .journeys-step:hover .step-title {
color: #bff0ac;
}
}
.journeys-training-images {
overflow: hidden;
padding: 60px 0;
position: relative;
}
@media screen and (min-width: 768px) {
.journeys-training-images {
padding: 100px 0;
}
}
.journeys-training-images::before {
content: url(assets/images/03144a47687fcd5d1278.png);
display: block;
position: absolute;
height: 100%;
top: 50%;
left: 0;
transform: translate(0, -50%);
}
@media screen and (min-width: 1400px) {
.journeys-training-images::before {
height: auto;
}
}
.journeys-training-images__wrapper {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: 20px;
}
@media screen and (min-width: 1020px) {
.journeys-training-images__wrapper {
flex-direction: row;
}
}
.journeys-training-images__image-wrap {
position: relative;
height: 230px;
right: 5%;
}
@media screen and (min-width: 768px) {
.journeys-training-images__image-wrap {
height: 40vh;
}
}
@media screen and (min-width: 1020px) {
.journeys-training-images__image-wrap {
height: 60vh;
}
}
@media screen and (min-width: 1020px) and (max-width: 1200px) and (min-height: 650px) {
.journeys-training-images__image-wrap {
height: 45vh;
}
}
@media screen and (min-width: 1020px) and (max-width: 1200px) and (min-height: 900px) {
.journeys-training-images__image-wrap {
height: 35vh;
}
}
@media screen and (min-width: 1200px) and (max-width: 1400px) and (min-height: 900px) {
.journeys-training-images__image-wrap {
height: 45vh;
}
}
@media screen and (min-width: 2100px) {
.journeys-training-images__image-wrap {
height: 45vh;
right: -10%;
}
}
@media screen and (min-width: 2600px) {
.journeys-training-images__image-wrap {
height: 35vh;
}
}
.journeys-training-images__image {
position: absolute;
top: 0;
right: 5%;
transform: translateX(120%);
height: 230px;
width: auto;
}
@media screen and (min-width: 768px) {
.journeys-training-images__image {
height: 40vh;
}
}
@media screen and (min-width: 1020px) {
.journeys-training-images__image {
height: 60vh;
}
}
@media screen and (min-width: 1020px) and (max-width: 1200px) and (min-height: 650px) {
.journeys-training-images__image {
height: 45vh;
}
}
@media screen and (min-width: 1020px) and (max-width: 1200px) and (min-height: 900px) {
.journeys-training-images__image {
height: 35vh;
}
}
@media screen and (min-width: 1200px) and (max-width: 1400px) and (min-height: 900px) {
.journeys-training-images__image {
height: 45vh;
}
}
@media screen and (min-width: 2100px) {
.journeys-training-images__image {
height: 45vh;
}
}
@media screen and (min-width: 2600px) {
.journeys-training-images__image {
height: 35vh;
}
}
.journeys-training-images__image.animated-image {
animation: imageEntrance 0.7s ease 1 forwards;
}
.journeys-training-images__image.animated-image.img-2 {
animation-delay: 0.2s;
}
.journeys-training-images__image.animated-image.img-3 {
animation-delay: 0.4s;
}
.journeys-training-images__title {
font-size: 22px;
font-weight: 700;
margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
.journeys-training-images__title {
font-size: 26px;
}
}
@media screen and (min-width: 1200px) {
.journeys-training-images__title {
font-size: 30px;
}
}
.journeys-training-images__subtitle {
font-size: 16px;
color: var(--color-primary-100);
margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
.journeys-training-images__subtitle {
font-size: 20px;
}
}
@media screen and (min-width: 1200px) {
.journeys-training-images__subtitle {
font-size: 22px;
}
}
.journeys-training-images__text p {
margin-bottom: 10px;
font-size: 16px;
}
@media screen and (min-width: 768px) {
.journeys-training-images__text p {
font-size: 18px;
}
}
.journeys-training-images__text p:last-child {
margin-bottom: 0;
}
.all-project-showcase {
padding-top: 20px;
padding-bottom: 80px;
}
@media screen and (min-width: 768px) {
.all-project-showcase {
padding-top: 40px;
}
}
.all-project-showcase__list {
display: inline-flex;
max-width: 100%;
gap: 5px;
overflow: scroll;
background: var(--color-base-300);
padding: 4px;
border-radius: 999px;
}
@media screen and (min-width: 768px) {
.all-project-showcase__list {
overflow: hidden;
}
}
.all-project-showcase__list::-webkit-scrollbar {
display: none;
}
.all-project-showcase__list li {
display: flex;
flex-shrink: 0;
}
.all-project-showcase__list-item {
padding: 6px 15px 4px 15px;
font-weight: 700;
font-size: 16px;
line-height: 1.5;
cursor: pointer;
color: var(--color-base-200);
opacity: 0.8;
transition: 0.3s;
display: block;
border-radius: 99px;
}
.all-project-showcase__list-item:hover {
background: var(--color-primary-200-10);
color: var(--color-base-100);
opacity: 1;
}
.all-project-showcase__list-item.active {
background: var(--color-primary-200);
color: var(--color-base-200);
opacity: 1;
}
.all-project-showcase__project {
padding-top: 40px;
}
.all-project-showcase__item {
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
background: var(--bg-base-gradient);
z-index: 1;
}
.all-project-showcase__item:after {
content: "";
background: var(--bg-base-gradient);
position: absolute;
transform: rotate(180deg);
width: 100%;
height: 100%;
z-index: -1;
opacity: 0;
transition: all 0.3s ease-out;
}
.all-project-showcase__item:hover .all-project-showcase__item-img img {
transform: scale(1.05);
}
.all-project-showcase__item:hover:after {
opacity: 1;
}
.all-project-showcase__item:hover .all-project-showcase__item-arrow {
right: 0;
}
@media screen and (min-width: 768px) {
.all-project-showcase__item {
flex-direction: row;
}
}
.all-project-showcase__item-arrow {
border: 25px solid transparent;
border-top: 25px solid var(--color-primary-200);
border-right: 25px solid var(--color-primary-200);
position: absolute;
right: -60px;
top: 0;
transition: all 0.3s ease-out;
}
.all-project-showcase__item-arrow img {
position: absolute;
top: -30px;
right: -30px;
width: 40px;
height: 40px;
}
.all-project-showcase__item-bg {
overflow: hidden;
height: 100%;
}
.all-project-showcase__item-content {
padding: 10px;
margin: auto 0;
}
@media screen and (min-width: 768px) {
.all-project-showcase__item-content {
padding: 20px;
}
}
@media screen and (min-width: 1200px) {
.all-project-showcase__item-content {
padding: 30px;
}
}
@media screen and (min-width: 1400px) {
.all-project-showcase__item-content {
padding: 40px;
}
}
.all-project-showcase__item-img {
width: 100%;
height: 100%;
overflow: hidden;
}
.all-project-showcase__item-img img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
transition: all 0.3s ease-out;
aspect-ratio: 16/9;
}
.all-project-showcase__item-title {
margin-bottom: 10px;
font-weight: 700;
text-transform: uppercase;
}
@media screen and (min-width: 1400px) {
.all-project-showcase__item-title {
margin-bottom: 20px;
}
}
.all-project-showcase__item-tag {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 5px;
}
.all-project-showcase__item-tag p {
color: var(--primary-200, #7cba4b);
white-space: nowrap;
border-right: 1px solid var(--color-base-100-20);
padding-right: 10px;
}
@media screen and (min-width: 768px) {
.all-project-showcase__item-tag p {
font-size: 18px;
}
}
.all-project-showcase__item-tag p:last-child {
border-right: none;
padding-right: 0;
}
.all-project-showcase__wrap {
display: flex;
flex-direction: column;
gap: 30px;
}
@media screen and (min-width: 768px) {
.all-project-showcase__wrap {
gap: 50px;
}
}
@media screen and (min-width: 1200px) {
.all-project-showcase__wrap {
gap: 80px;
}
}
@media screen and (min-width: 1400px) {
.all-project-showcase__wrap {
gap: 100px;
}
}
.all-project-showcase__pagination {
display: flex;
gap: 5px;
align-items: center;
justify-content: center;
}
@media screen and (min-width: 1200px) {
.all-project-showcase__pagination {
gap: 10px;
}
}
.all-project-showcase__pagination a,
.all-project-showcase__pagination span {
font-size: 22px;
line-height: 28px;
font-weight: 300;
width: 30px;
display: flex;
justify-content: center;
cursor: pointer;
transition: 0.3s ease;
color: var(--color-base-100);
}
@media screen and (min-width: 1200px) {
.all-project-showcase__pagination a,
.all-project-showcase__pagination span {
font-size: 30px;
line-height: 39px;
width: 40px;
}
}
.all-project-showcase__pagination a:hover,
.all-project-showcase__pagination span:hover {
background: var(--color-base-300);
color: var(--color-primary-100);
text-decoration: none;
}
.all-project-showcase__pagination a.active,
.all-project-showcase__pagination span.active {
color: var(--color-primary-100);
cursor: initial;
font-weight: 700;
}
.all-project-showcase__pagination a.active:hover,
.all-project-showcase__pagination span.active:hover {
background: initial;
}
.all-project-showcase__pagination-arrow {
height: 30px;
width: 30px;
padding: 7px;
cursor: pointer;
transition: 0.3s ease;
}
@media screen and (min-width: 1200px) {
.all-project-showcase__pagination-arrow {
height: 40px;
width: 40px;
padding: 8px;
}
}
.all-project-showcase__pagination-arrow:hover {
background: var(--color-base-300);
}
.all-project-showcase__pagination-arrow--left {
transform: rotate(180deg);
}
.all-project-showcase__pagination-arrow--disabled {
opacity: 0.5;
cursor: initial;
pointer-events: none;
}
.all-project-showcase__pagination-arrow--disabled:hover {
background: initial;
}
.project-view-section {
padding-top: 30px;
padding-bottom: 10px;
}
@media (min-width: 768px) {
.project-view-section {
padding: 50px 0;
}
}
@media (min-width: 1200px) {
.project-view-section {
padding: 80px 0;
}
}
.project-view-section:first-child {
overflow: hidden;
padding-top: 60px;
padding-bottom: 10px;
}
@media (min-width: 768px) {
.project-view-section:first-child {
padding-top: 90px;
padding-bottom: 50px;
}
}
@media (min-width: 1400px) {
.project-view-section:first-child .project-view-section__img {
height: 100%;
}
}
.project-view-section:first-child .project-view-section__content-title {
text-transform: uppercase;
}
.project-view-section-bg {
background: var(--color-base-300);
}
.project-view-section__img {
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
}
.project-view-section__img img {
width: 100%;
height: auto;
-o-object-fit: cover;
object-fit: cover;
}
.project-view-section .row-reverse {
justify-content: flex-end;
}
@media (min-width: 1200px) {
.project-view-section .row-reverse .project-view-section__content {
padding-left: 0;
padding-right: 50px;
}
}
.project-view-section .container-fluid .project-view-section__content {
padding: 20px 10px;
}
@media (min-width: 768px) {
.project-view-section .container-fluid .project-view-section__content {
padding: 0 20px;
}
}
@media (min-width: 1200px) {
.project-view-section .container-fluid .project-view-section__content {
gap: 20px;
padding-left: 50px;
padding-right: 0;
}
}
.project-view-section .container-fluid .project-view-section__img {
padding: 0 10px;
}
@media (min-width: 768px) {
.project-view-section .container-fluid .project-view-section__img {
padding: 0;
}
}
@media (min-width: 1200px) {
.project-view-section .container-fluid .row-reverse .project-view-section__content {
padding-left: 0;
padding-right: 50px;
}
}
.project-view-section.inset .row {
flex-direction: column-reverse;
}
@media (min-width: 1200px) {
.project-view-section.inset .row {
position: relative;
}
}
.project-view-section.inset .container-fluid .project-view-section__content {
padding: 20px 20px 100px 20px;
}
@media (min-width: 1200px) {
.project-view-section.inset .container-fluid .project-view-section__content {
padding: 30px;
margin-right: 42%;
}
}
@media (min-width: 1400px) {
.project-view-section.inset .container-fluid .project-view-section__content {
padding: 50px;
margin-right: 35%;
}
}
.project-view-section.inset .insert-position {
position: relative;
top: -80px;
}
@media (min-width: 1200px) {
.project-view-section.inset .insert-position {
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
}
}
@media (min-width: 1400px) {
.project-view-section.inset .insert-position {
right: 8.33333333%;
}
}
.project-view-section.inset .project-view-section__img {
padding: 0 20px;
}
@media (min-width: 768px) {
.project-view-section.inset .project-view-section__img {
padding: 0 18%;
}
}
@media (min-width: 1200px) {
.project-view-section.inset .project-view-section__img {
padding: 0;
width: 80%;
}
}
@media (min-width: 1400px) {
.project-view-section.inset .project-view-section__img {
padding: 0;
width: 100%;
}
}
.project-view-section__content {
display: flex;
flex-direction: column;
padding: 20px 30px;
gap: 15px;
}
@media (min-width: 768px) {
.project-view-section__content {
padding: 0 20px;
}
}
@media (min-width: 1200px) {
.project-view-section__content {
gap: 20px;
padding-left: 50px;
}
}
.project-view-section__content-title {
font-weight: 700;
}
.project-view-section__content-text, .project-view-section__content-text p {
font-size: 16px;
margin-bottom: 25px;
color: var(--color-base-200);
}
@media (min-width: 1020px) {
.project-view-section__content-text, .project-view-section__content-text p {
font-size: 18px;
}
}
.project-view-section__content-text:last-child, .project-view-section__content-text p:last-child {
margin-bottom: 0;
}
.project-view-section__content-button {
padding: 7px 10px 7px 15px;
background: var(--color-primary-200);
width: -moz-fit-content;
width: fit-content;
font-weight: 700;
font-size: 18px;
display: flex;
gap: 10px;
align-items: center;
height: 41px;
overflow: hidden;
color: var(--color-base-100);
cursor: pointer;
}
.project-view-section__content-button:after {
background: #fff;
content: "";
height: 155px;
left: -75px;
opacity: 0.2;
position: absolute;
top: -50px;
transform: rotate(35deg);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
width: 50px;
z-index: -10;
}
.project-view-section__content-button:hover:after {
left: 120%;
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
.project-view-section__content-button::before {
display: none;
}
.project-view-section__video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
margin-bottom: 20px;
cursor: pointer;
}
.project-view-section__video-container:hover .project-view-section__video-overlay {
opacity: 0.2;
}
.project-view-section__video-container:hover .project-view-section__play-button img {
transform: scale(1.3);
}
.project-view-section__video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, #0b0d0c, #0b0d0c);
opacity: 0.5;
transition: opacity 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
.project-view-section__video-thumbnail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.project-view-section__play-button {
background: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: none;
padding: 10px;
display: flex;
gap: 10px;
align-items: center;
text-transform: uppercase;
text-shadow: 0px 0px 10px #000;
font-weight: 700;
line-height: 130%;
color: var(--color-base-100);
font-size: 22px;
}
@media screen and (min-width: 1020px) {
.project-view-section__play-button {
font-size: 30px;
gap: 20px;
}
}
.project-view-section__play-button img {
transition: transform 550ms cubic-bezier(0.19, 1, 0.22, 1);
width: 60px;
height: auto;
}
.project-view-section__play-button span {
white-space: nowrap;
}
.project-view-section__video-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.project-view-section ul {
padding-left: 35px;
padding-bottom: 10px;
display: flex;
flex-direction: column;
gap: 5px;
}
.project-view-section ul li {
position: relative;
font-size: 16px;
line-height: 1.4;
}
@media screen and (min-width: 1020px) {
.project-view-section ul li {
font-size: 20px;
}
}
@media screen and (min-width: 1200px) {
.project-view-section ul li {
font-size: 22px;
}
}
.project-view-section ul li:after {
content: "";
position: absolute;
top: 16px;
left: -21px;
width: 8px;
height: 8px;
border-radius: 50px;
background-color: var(--color-primary-100);
transform: translate(0, -50%);
}
.project-view-section ol {
padding-left: 25px;
padding-bottom: 10px;
display: flex;
flex-direction: column;
gap: 5px;
}
.project-view-section ol li {
padding-left: 10px;
font-size: 16px;
line-height: 1.4;
}
@media screen and (min-width: 1020px) {
.project-view-section ol li {
font-size: 20px;
}
}
@media screen and (min-width: 1200px) {
.project-view-section ol li {
font-size: 22px;
}
}
.project-view-section ol li::marker {
color: var(--color-primary-100);
font-weight: 600;
}
.project-view-section strong {
font-weight: 700;
}
.small-projects-related {
padding: 30px 0;
}
@media screen and (min-width: 1200px) {
.small-projects-related {
padding: 50px 0;
}
}
@media screen and (min-width: 1600px) {
.small-projects-related {
padding: 50px 0 100px;
}
}
.small-projects-related__wrap {
display: flex;
flex-direction: column;
gap: 30px;
}
.small-projects-related__projects {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 20px;
}
@media screen and (min-width: 768px) {
.small-projects-related__projects {
grid-template-columns: repeat(2, 1fr);
}
}
.single-delta_project .small-projects-related h3 {
text-align: center;
}
.contact-form-section {
padding: 90px 10px 60px;
background-image: url(assets/images/28e4f24435a0a031ba5a.svg);
background-repeat: no-repeat;
background-position: left top;
background-size: 70%;
}
@media screen and (min-width: 768px) {
.contact-form-section {
background-position: left center;
background-size: contain;
}
}
@media screen and (min-width: 1020px) {
.contact-form-section {
padding: 200px 20px 100px;
}
}
.contact-form-section__inner {
display: flex;
flex-direction: column;
gap: 50px;
}
@media screen and (min-width: 1020px) {
.contact-form-section__inner {
flex-direction: row;
gap: unset;
}
}
.contact-form-section__text-wrap {
padding-right: 40px;
display: flex;
flex-direction: column;
gap: 20px;
}
@media screen and (min-width: 1020px) {
.contact-form-section__text-wrap {
padding-right: 50px;
}
}
.contact-form-section .wpcf7 form {
display: flex;
flex-direction: column;
gap: 10px;
}
.contact-form-section .wpcf7 .form-row {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
@media screen and (min-width: 768px) {
.contact-form-section .wpcf7 .form-row {
flex-direction: row;
gap: 30px;
}
}
.contact-form-section .wpcf7 .form-row.submit-row {
justify-content: space-between;
flex-direction: column;
gap: 10px;
}
@media screen and (min-width: 1300px) {
.contact-form-section .wpcf7 .form-row.submit-row {
flex-direction: row;
gap: unset;
}
}
.contact-form-section .wpcf7 .form-row .form-cell {
width: 100%;
flex-grow: 1;
padding-bottom: 17px;
display: flex;
align-items: flex-end;
}
@media screen and (min-width: 768px) {
.contact-form-section .wpcf7 .form-row .form-cell {
display: block;
width: 50%;
}
}
.contact-form-section .wpcf7 .form-row .form-cell--submit {
display: flex;
align-items: center;
}
.contact-form-section .wpcf7 .form-row .form-cell--submit > p {
position: relative;
width: 100%;
}
@media screen and (min-width: 1300px) {
.contact-form-section .wpcf7 .form-row .form-cell--submit > p {
width: auto;
}
}
.contact-form-section .wpcf7 .form-row .form-cell--submit > p .btn {
width: 100%;
}
.contact-form-section .wpcf7 .form-row .form-cell--submit label:hover .custom-checkbox {
box-shadow: 0 0 0 3px rgba(112, 212, 75, 0.5);
}
.contact-form-section .wpcf7 .form-row .form-cell--submit input[type=checkbox] {
position: absolute;
opacity: 0;
}
.contact-form-section .wpcf7 .form-row .form-cell--submit input[type=checkbox]:checked ~ .wpcf7-list-item-label .custom-checkbox:after {
display: block;
}
.contact-form-section .wpcf7 .form-row .form-cell--submit a {
color: var(--color-primary-100);
}
.contact-form-section .wpcf7 .form-row .form-cell--submit .custom-checkbox {
display: inline-flex;
border: 1px solid var(--color-primary-200);
border-radius: 50%;
height: 18px;
width: 18px;
background: var(--color-base-300);
margin-right: 10px;
position: relative;
transition: 0.1s ease-in;
transform: translateY(2px);
}
.contact-form-section .wpcf7 .form-row .form-cell--submit .custom-checkbox:after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 10px;
height: 10px;
background: var(--color-primary-200);
border-radius: 50%;
display: none;
}
.contact-form-section .wpcf7 .form-row .form-cell input,
.contact-form-section .wpcf7 .form-row .form-cell textarea {
width: 100%;
height: 43px;
background: #0d1d12;
border: 1px solid var(--color-base-100-20);
margin-right: 20px;
color: #fff;
padding: 0 10px;
font-size: 18px;
font-weight: 600;
line-height: 27px;
}
.contact-form-section .wpcf7 .form-row .form-cell input:hover,
.contact-form-section .wpcf7 .form-row .form-cell textarea:hover {
border: 1px solid var(--color-primary-200-80);
}
.contact-form-section .wpcf7 .form-row .form-cell input:focus,
.contact-form-section .wpcf7 .form-row .form-cell textarea:focus {
box-shadow: 0px 0px 10px var(--color-primary-100);
border: 1px solid var(--color-primary-200-80);
}
.contact-form-section .wpcf7 .form-row .form-cell input:focus-visible,
.contact-form-section .wpcf7 .form-row .form-cell textarea:focus-visible {
outline: none;
}
.contact-form-section .wpcf7 .form-row .form-cell textarea {
height: 100%;
resize: none;
padding: 5px 10px;
}
.contact-form-section .wpcf7 .form-row .form-cell label {
text-transform: uppercase;
font-size: 14px;
color: var(--color-primary-100);
margin-left: 10px;
}
.contact-form-section .wpcf7 .form-row .wpcf7-not-valid-tip {
position: absolute;
padding-left: 10px;
font-size: 14px;
}
.contact-form-section .wpcf7 .wpcf7-list-item {
margin: 0;
}
.contact-form-section .wpcf7 .wpcf7-response-output {
display: none;
}
.contact-form-section .wpcf7 .wpcf7-submit {
cursor: pointer;
}
.contact-form-section .wpcf7 .wpcf7-not-valid-tip {
opacity: 0;
}
.contact-form-section .wpcf7 .wpcf7-acceptance label {
cursor: pointer;
}
.contact-form-section .wpcf7-spinner {
position: absolute !important;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #496a2f;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0;
opacity: 1;
margin: 0;
}
.contact-form-section .wpcf7-spinner::before {
display: none;
}
.contact-form-section .wpcf7-spinner__item {
width: 30px;
height: 10px;
position: relative;
border: 1px solid var(--color-base-100);
display: block;
margin: auto;
border-radius: 30px;
overflow: hidden;
opacity: 0.5;
}
.contact-form-section .wpcf7-spinner__item::before {
content: "";
position: absolute;
top: 1px;
width: 15px;
height: 6px;
background: var(--color-base-100);
border-radius: 10px;
animation: ballbns 0.8s linear infinite;
opacity: 0.5;
}
.contact-form-section__response {
display: flex;
flex-direction: column;
gap: 30px;
align-items: center;
justify-content: center;
}
.contact-form-section__response--inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
}
@media screen and (min-width: 1200px) {
.contact-form-section__response--inner {
width: 80%;
}
}
.contact-form-section__response img {
width: 60px;
height: 60px;
animation: pulse 0.8s ease-in-out infinite alternate;
}
.how-we-work-hero {
padding: 90px 0 50px 0;
background-position: 15%;
background-repeat: no-repeat;
background-size: cover;
}
@media screen and (min-width: 768px) {
.how-we-work-hero {
padding-top: 120px;
background-position: 25%;
}
}
@media screen and (min-width: 1020px) {
.how-we-work-hero {
background-size: contain;
}
}
@media screen and (min-width: 1200px) {
.how-we-work-hero {
padding-top: 200px;
padding-bottom: 100px;
background-position: bottom center;
}
}
@media screen and (min-width: 1400px) {
.how-we-work-hero {
background-position: center;
background-size: cover;
}
}
.how-we-work-hero__title {
margin-bottom: 10px;
}
.how-we-work-hero__text {
padding-right: 40px;
}
@media screen and (min-width: 768px) {
.how-we-work-hero__text {
margin-left: 20px;
padding-right: 0;
}
}
@media screen and (min-width: 1200px) {
.how-we-work-hero__text {
margin-left: 40px;
}
}
@media screen and (min-width: 768px) {
.how-we-work-hero__text p {
font-size: 20px;
}
}
@media screen and (min-width: 1200px) {
.how-we-work-hero__text p {
font-size: 22px;
}
}
.full-centered-hero {
background-size: 110%;
background-repeat: no-repeat;
background-position: top center;
padding: 175px 0 40px 0;
display: flex;
}
@media screen and (min-width: 768px) {
.full-centered-hero {
padding: 250px 20px 50px;
}
}
@media screen and (min-width: 1020px) {
.full-centered-hero {
background-size: cover;
background-position: center;
height: 100vh;
height: 100svh;
}
}
@media screen and (min-width: 1200px) {
.full-centered-hero {
padding: 80px 20px;
}
}
.full-centered-hero__wrap {
display: flex;
align-items: flex-end;
}
.full-centered-hero__inner {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
gap: 40px;
}
@media screen and (min-width: 768px) {
.full-centered-hero__inner {
gap: 30px;
}
}
.full-centered-hero__numbers {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
}
@media screen and (min-width: 768px) {
.full-centered-hero__numbers {
flex-direction: row;
padding-top: 20px;
gap: 30px;
}
}
@media screen and (min-width: 1600px) {
.full-centered-hero__numbers {
padding-top: 50px;
}
}
.full-centered-hero__numbers-card {
display: flex;
flex-direction: column;
gap: 5px;
}
@media screen and (min-width: 768px) {
.full-centered-hero__numbers-card {
max-width: 200px;
}
}
.double-columns {
padding: 50px 0;
border-top: 1px solid var(--color-base-100-20);
}
@media screen and (min-width: 1020px) {
.double-columns {
border-top: none;
}
}
@media screen and (min-width: 1200px) {
.double-columns {
padding: 100px 20px;
}
}
.double-columns__wrap {
display: flex;
gap: 10px;
}
@media screen and (min-width: 1020px) {
.double-columns__wrap {
gap: 0;
}
}
.double-columns__title {
padding: 0;
}
@media screen and (min-width: 1020px) {
.double-columns__title {
padding: 0 20px;
}
}
@media screen and (min-width: 1600px) {
.double-columns__title {
padding: 0;
}
}
@media screen and (min-width: 1020px) {
.double-columns__content {
padding-left: 40px;
border-left: 1px solid var(--color-base-100-20);
}
}
.double-columns__content p {
font-size: 16px;
font-weight: 400;
line-height: 1.4;
margin-bottom: 20px;
}
@media screen and (min-width: 1020px) {
.double-columns__content p {
font-size: 18px;
}
}
.awards-repeater {
padding: 30px 0;
}
@media screen and (min-width: 768px) {
.awards-repeater {
padding: 80px 20px;
}
}
.awards-repeater__wrap {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
}
@media screen and (min-width: 768px) {
.awards-repeater__wrap {
gap: 50px;
}
}
.awards-repeater__awards {
display: grid;
grid-template-columns: repeat(1, 1fr);
width: 100%;
}
@media screen and (min-width: 576px) {
.awards-repeater__awards {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 768px) {
.awards-repeater__awards {
grid-template-columns: repeat(3, 1fr);
}
}
.awards-repeater__single {
padding: 0 0 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
border-bottom: 1px solid var(--color-base-100-20);
}
@media screen and (min-width: 576px) {
.awards-repeater__single {
border-right: 1px solid var(--color-base-100-20);
}
.awards-repeater__single:nth-child(2n) {
border-right: none;
}
}
@media screen and (min-width: 768px) {
.awards-repeater__single {
padding: 0 10px 30px;
border-right: 1px solid var(--color-base-100-20);
}
.awards-repeater__single:nth-child(2n) {
border-right: 1px solid var(--color-base-100-20);
}
.awards-repeater__single:nth-child(3n) {
border-right: none;
}
}
.awards-repeater__single:last-child {
border-bottom: none !important;
}
.awards-repeater__single-icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (min-width: 1200px) {
.awards-repeater__single-icon {
width: 300px;
height: 150px;
}
}
.awards-repeater__single-icon img {
height: 100%;
width: 100%;
max-width: 220px;
max-height: 110px;
-o-object-fit: contain;
object-fit: contain;
}
.awards-repeater__single h6 {
font-size: 16px;
}
.awards-repeater__single p {
font-size: 14px;
}
.team-image img {
height: auto;
width: 100%;
}
.values {
padding: 30px 0;
background: var(--color-base-300);
}
.values__wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px;
}
.values__list {
display: flex;
flex-direction: column;
gap: 20px;
}
@media screen and (min-width: 768px) {
.values__list {
flex-direction: row;
gap: 50px;
}
}
.values__list li {
position: relative;
text-align: center;
}
.values__list li:not(:last-child):after {
content: "";
position: absolute;
bottom: -12.5px;
right: calc(50% - 2.5px);
height: 5px;
width: 5px;
background-color: var(--color-primary-100);
border-radius: 50%;
}
@media screen and (min-width: 768px) {
.values__list li:not(:last-child):after {
bottom: 0;
right: -24px;
height: 100%;
width: 2px;
transform: rotate(17.74deg);
border-radius: none;
}
}
.simple-page {
padding: 90px 0 50px;
}
@media screen and (min-width: 1020px) {
.simple-page {
padding: 120px 0 100px;
}
}
@media screen and (min-width: 1200px) {
.simple-page {
padding: 150px 0 100px;
}
}
.simple-page__wrap {
display: flex;
flex-direction: column;
gap: 10px;
}
@media screen and (min-width: 1020px) {
.simple-page__wrap {
gap: 50px;
}
}
.simple-page__content {
display: flex;
flex-direction: column;
gap: 20px;
}
.simple-page__content strong {
font-weight: 700;
}
.simple-page__content a {
color: var(--color-primary-100);
}
.blog-list {
padding: 0 0 30px;
}
@media screen and (min-width: 768px) {
.blog-list {
padding: 30px 0 50px;
}
}
@media screen and (min-width: 1200px) {
.blog-list {
padding: 100px 0 80px;
}
}
.blog-list__wrap {
display: grid;
grid-template-columns: repeat(1, 1fr);
}
@media screen and (min-width: 768px) {
.blog-list__wrap {
gap: 20px;
}
}
@media screen and (min-width: 1020px) {
.blog-list__wrap {
grid-template-columns: repeat(2, 1fr);
gap: 30px 20px;
}
}
@media screen and (min-width: 1600px) {
.blog-list__wrap {
gap: 50px 20px;
}
}
.blog-list__single {
display: flex;
flex-direction: column;
padding: 20px 0;
border-bottom: 1px solid var(--color-base-100-20);
transition: 0.3s ease;
gap: 5px;
}
@media screen and (min-width: 768px) {
.blog-list__single {
flex-direction: row;
padding: 0;
padding-right: 20px;
border-bottom: none;
gap: none;
}
}
@media screen and (min-width: 1020px) {
.blog-list__single:hover {
background: var(--color-base-300);
}
.blog-list__single:hover .blog-list__single-img img {
transform: scale(1.1);
}
}
@media screen and (min-width: 1200px) {
.blog-list__single {
padding-right: 40px;
}
}
.blog-list__single-img {
width: 110px;
height: 74px;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.blog-list__single-img {
width: 152px;
height: 101px;
margin: 12px 15px;
}
}
@media screen and (min-width: 1200px) {
.blog-list__single-img {
width: 195px;
height: 129px;
margin: 13px 15px;
}
}
@media screen and (min-width: 1600px) {
.blog-list__single-img {
width: 284px;
height: 190px;
}
}
.blog-list__single-img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: 0.3s ease;
aspect-ratio: 16/9;
}
.blog-list__single-wrap {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
width: 100%;
}
@media screen and (min-width: 768px) {
.blog-list__single-wrap {
width: calc(100% - 182px);
padding: 13px 0 13px 10px;
}
}
@media screen and (min-width: 1200px) {
.blog-list__single-wrap {
width: calc(100% - 225px);
}
}
@media screen and (min-width: 1600px) {
.blog-list__single-wrap {
width: calc(100% - 314px);
}
}
.blog-list__single-title {
display: flex;
flex-direction: column;
gap: 5px;
}
.blog-list__single-date {
display: flex;
gap: 20px;
color: var(--color-primary-100);
}
.blog-list__single-read {
position: relative;
}
.blog-list__single-read:after {
content: "";
position: absolute;
height: 20px;
width: 1px;
top: 2px;
left: -10px;
background: var(--color-base-100-20);
}
.blog-list__single-content {
overflow: hidden;
-webkit-line-clamp: 3;
/* number of lines to show */
line-clamp: 3;
-webkit-box-orient: vertical;
display: none;
padding-bottom: 1px;
}
@media screen and (min-width: 1600px) {
.blog-list__single-content {
display: -webkit-box;
}
}
.blog-list__pagination {
display: flex;
gap: 5px;
align-items: center;
justify-content: center;
margin-top: 30px;
}
@media screen and (min-width: 1200px) {
.blog-list__pagination {
gap: 10px;
}
}
@media screen and (min-width: 1600px) {
.blog-list__pagination {
margin-top: 50px;
}
}
.blog-list__pagination a,
.blog-list__pagination span {
font-size: 22px;
line-height: 28px;
font-weight: 300;
width: 30px;
display: flex;
justify-content: center;
cursor: pointer;
transition: 0.3s ease;
color: var(--color-base-100);
}
@media screen and (min-width: 1200px) {
.blog-list__pagination a,
.blog-list__pagination span {
font-size: 30px;
line-height: 39px;
width: 40px;
}
}
.blog-list__pagination a:hover,
.blog-list__pagination span:hover {
background: var(--color-base-300);
color: var(--color-primary-100);
text-decoration: none;
}
.blog-list__pagination a.active,
.blog-list__pagination span.active {
color: var(--color-primary-100);
cursor: initial;
font-weight: 700;
}
.blog-list__pagination a.active:hover,
.blog-list__pagination span.active:hover {
background: initial;
}
.blog-list__pagination-arrow {
height: 30px;
width: 30px;
padding: 7px;
cursor: pointer;
transition: 0.3s ease;
}
@media screen and (min-width: 1200px) {
.blog-list__pagination-arrow {
height: 40px;
width: 40px;
padding: 8px;
}
}
.blog-list__pagination-arrow:hover {
background: var(--color-base-300);
}
.blog-list__pagination-arrow--left {
transform: rotate(180deg);
}
.blog-list__pagination-arrow--disabled {
opacity: 0.5;
cursor: initial;
pointer-events: none;
}
.blog-list__pagination-arrow--disabled:hover {
background: initial;
}
.blog-hero {
padding: 90px 0 50px;
background-image: url(assets/images/9950b65a62d9af4f28af.jpg);
background-size: cover;
background-position: 80%;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.blog-hero {
padding: 120px 20px 50px;
}
}
@media screen and (min-width: 1200px) {
.blog-hero {
padding: 150px 20px 80px;
background-position: center;
}
}
.blog-hero__wrap {
display: flex;
flex-direction: column;
gap: 20px;
}
.emphasized-text {
border-left: 3px solid var(--color-primary-200);
background: var(--color-primary-200-10);
display: flex;
padding: 20px 30px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
align-self: stretch;
}
.emphasized-text p {
font-size: 18px;
}
/*# sourceMappingURL=app.229117c9033d0d40272e.css.map*/