/*****************************************************************************/
/*  >>> ROOT <<< */
/*****************************************************************************/
:root {
    --color-dark: #0a1116;
    --color-gray: #797d7f;
    --color-gray-2: #a6aaac;
    --color-gray-white: #eceff1;
    --color-success: #0ead53;
    --color-danger: #e20613;

    --gradient-1: linear-gradient(150deg, #ffce00, #eb6e4e, #803689, #63bb9c, #5ab03b);
    --gradient-2: radial-gradient(circle at top left, #ffce00, transparent 80%), radial-gradient(circle at top right, #eb6e4e, transparent 80%), radial-gradient(circle at bottom left, #63bb9c, transparent 80%), radial-gradient(circle at bottom right, #803689, transparent 80%);;
    --gradient-3: conic-gradient(from 0deg, #e20613, #ec6a06, #f8ad00, #ffda00, #c5d200, #009540, #01a3a3, #0075be, #0097dd, #8074b3, #be2083, #e6366b);
    --gradient-4: linear-gradient(175deg, #ffce00, #eb6e4e, #803689);

    --font-body: 'Outfit', sans-serif;
    --font-heading: 'Staatliches', sans-serif;

    --font-size-h1: 7.5rem;
    --font-size-h2: 5rem;
    --font-size-h3: 3.7rem;
    --font-size-h4: 2.8rem;
    --font-size-h5: 2.2rem;
    --font-size-h6: 1.8rem;
    --font-size-body: 1.85rem;

    --grid-gap: 4rem;
    --grid-gap-lg: 6rem;
    --container-padding-x: 3rem;
    --container-max-width: 163rem;
    --container-md-max-width: 115rem;

    --section-padding-length: 8rem;
    --section-padding-length-sm: 3.5rem;
    --section-padding: var(--section-padding-length) 0;
    --section-padding-sm: var(--section-padding-length-sm) 0;

    --shadow-1: 0 0 1.5rem rgba(0, 0, 0, .15);

    --transition: .4s;
}

/*****************************************************************************/
/*  >>> FONTS <<< */
/*****************************************************************************/
@font-face {
    font-family: 'Outfit';
    src: url("/themes/adgensii/fonts/Outfit-Variable.woff2") format("woff2");
    font-weight: 100 900;   
    font-style: normal;
    font-display: swap;   
}
@font-face {
    font-family: "Staatliches";
    src: url("/themes/adgensii/fonts/Staatliches.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  } 

/*****************************************************************************/
/*  >>> RESET CSS <<< */
/*****************************************************************************/
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*****************************************************************************/
/*  >>> GENERAL <<< */
/*****************************************************************************/
::selection {
    background-color: var(--color-dark);
    color: #fff;
}

html, body, section, header, footer, main, div {
    overflow-x: clip;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: 10rem;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    color: var(--color-dark);
    line-height: 1.5;
    width: 100vw;
}

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

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

button {
    background: none;
    border: none;
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6,
.title-1, .title-2, .title-3, .title-4, .title-5, .title-6 {
    font-family: var(--font-heading);
    font-weight: normal;
    line-height: 1.2;
}
h1, .title-1 { font-size: var(--font-size-h1); }
h2, .title-2 { font-size: var(--font-size-h2); }
h3, .title-3 { font-size: var(--font-size-h3); }
h4, .title-4 { font-size: var(--font-size-h4); }
h5, .title-5 { font-size: var(--font-size-h5); }
h6, .title-6 { font-size: var(--font-size-h6); }

p {
    margin-bottom: 1.5rem;
    text-align: justify;
}

ul, ol,
.ck-content ul, .ck-content ol {
    list-style: none;
}

strong {
    font-weight: 600;
}

table {
    border-collapse: collapse;
}

:focus {
    outline: 0.2rem solid #007cba;
    outline-offset: 0.2rem;
}


/*****************************************************************************/
/*  >>> HEADER <<< */
/*****************************************************************************/
.header {
    background-color: #fff;
    padding: 2rem 0;
    position: relative;
}
.header .container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.header .header-logo {
    flex: 1 0 27.5rem;
    max-width: 27.5rem;
}
.header .header-logo a {
    display: block;
}
.header .header-menu {
    margin-left: auto;
}
.hb-mobile-toggler {
    border: 1px solid color-mix(in srgb, var(--color-dark) 25%, transparent);
    display: inline-block;
    position: relative;
    width: 8rem;
    height: 7.3rem;
    transition: var(--transition);
}
.hb-mobile-toggler > span {
    --bgColor: var(--color-dark);
    --height: 3px;
    background-color: var(--bgColor);
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-end;
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 3.5rem);
    height: var(--height);
    transform: translate(-50%, -1rem);
    transition: var(--transition);
}
.hb-mobile-toggler > span::before,
.hb-mobile-toggler > span::after {
    content: "";
    display: block;
    background-color: var(--bgColor);
    flex-shrink: 0;
    height: var(--height);
    transition: var(--transition);
}
.hb-mobile-toggler > span::before {
    width: 75%;
    transform: translateY(1rem);
}
.hb-mobile-toggler > span::after {
    width: 50%;
    transform: translateY(calc(2rem - var(--height)));
}
.hb-mobile-toggler:hover {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
}
.hb-mobile-toggler:hover > span {
    --bgColor: #fff;
}
.hb-mobile-toggler:hover > span::before,
.hb-mobile-toggler:hover > span::after {
    width: 100%;
}
.header-menu-close {
    border: 1px solid color-mix(in srgb, #fff 25%, transparent);
    display: inline-flex;
    position: absolute;
    top: 3rem;
    right: 3rem;
    width: 8rem;
    height: 7.3rem;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    transition: var(--transition);
    z-index: 1;
}
.header-menu-close::before,
.header-menu-close::after {
    content: '';
    position: absolute;
    width: 3.5rem;
    height: 3px;
    background-color: #fff;
    transition: var(--transition);
}
.header-menu-close::before {
    transform: rotate(45deg);
}
.header-menu-close::after {
    transform: rotate(-45deg);
}
.header-menu-close:hover {
    background-color: #fff;
}
.header-menu-close:hover::before,
.header-menu-close:hover::after {
    background-color: var(--color-dark);
}
.hb-mobile-toggler,
.header-menu-close {
    display: none;
}
.header .header-menu > ul {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}
.header .header-menu > ul > li:has(.sub-menu) {
    position: relative;
}
.header .header-menu > ul > li.mobile-only {
    display: none;
}
.header .header-menu > ul > li > a {
    font-family: var(--font-heading);
    font-size: 1.9rem;
}
.header .header-menu > ul > li:has(.sub-menu) > a {
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
}
.header .header-menu > ul > li:has(.sub-menu) > a::after {
    content: "";
    display: inline-block;
    border: .85rem solid transparent ;
    border-left-width: .65rem;
    border-right-width: .65rem;
    border-top-color: var(--color-dark);
    transform: translateY(2px);
}
.header .header-menu > ul > li > .sub-menu {
    background-color: var(--color-dark);
    opacity: 0;
    padding-top: 2rem;
    padding-bottom: 2rem;
    position: absolute;
    top: 100%;
    left: 0;
    width: 30rem;
    visibility: hidden;
    z-index: 5;
    transform: translateX(2rem);
    transition: var(--transition);
}
.header .header-menu > ul > li > .sub-menu > li > a {
    color: #fff;
    display: block;
    font-family: var(--font-heading);
    font-size: 2.1rem;
    line-height: 1;
    padding: 1rem 2.5rem;
    opacity: .75;
    transition: var(--transition);
}
.header .header-menu > ul > li > .sub-menu > li > a:hover {
    opacity: 1;
    transform: translateX(1rem);
}
.header .header-menu > ul > li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.header .header-buttons {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-left: 1.5rem;
}
.header .header-buttons .hb-feat {
    transition: var(--transition);
}
.header .header-buttons .hb-feat:hover {
    box-shadow: var(--shadow-1);
}
.header .header-buttons .hb-feat:hover::before {
    animation: spin-center 2s linear infinite;
}
.header.sticky {
    padding: 1.25rem 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    box-shadow: var(--shadow-1);
    animation: fadeInBottom 0.4s ease-in-out;
}
.header.sticky .header-logo {
    max-width: 20rem;
}

/*****************************************************************************/
/*  >>> ELEMENTS <<< */
/*****************************************************************************/

.button,
.btn-wrap--1 > a {
    --color: var(--color-dark);
    --hoverColor: #fff;
    border: 1px solid var(--color);
    display: inline-flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: normal;
    gap: 1.5rem;
    padding: 1.25rem 1.75rem 1.25rem 2.75rem;
    position: relative;
    transition: var(--transition);
}
.button > span {
    color: var(--color);
    display: inline-block;
    position: relative;
    isolation: isolate;
    transition: var(--transition);
}
.button::after,
.btn-wrap--1 > a::after {
    content: "";
    display: inline-block;
    border: .85rem solid transparent ;
    border-top-width: .65rem;
    border-bottom-width: .65rem;
    border-left-color: var(--color);
    transition: var(--transition);
}
.button:hover,
.button:focus,
.btn-wrap--1 > a:hover,
.btn-wrap--1 > a:focus {
    background-color: var(--color);
    color: #fff;
}
.button:hover > span,
.button:focus > span {
    color: var(--hoverColor);
}
.button:hover::after,
.button:focus::after,
.btn-wrap--1 > a:hover::after,
.btn-wrap--1 > a:focus::after {
    border-left-color: var(--hoverColor);
}
.button--2 {
    border: none;
}
.button--2 > span::before,
.button--2 > span::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 2px;
    background-color: var(--color);
    position: absolute;
    bottom: 0;
    left: 0;
}
.button--2 > span::before {
    opacity: .4;
}
.button--2 > span::after {
    width: 0;
    transition: width var(--transition) ease;
}
.button--2:hover {
    background-color: transparent;
}
.button--2:hover::after {
    border-left-color: var(--color);
}
.button--2:hover > span {
    color: var(--color);
}
.button--2:hover > span::after {
    width: 100%;
}
.button--3 {
    border-color: color-mix(in srgb, var(--color-dark) 25%, transparent);
    border-radius: 999rem;
}
.button--hideAfter {
    padding: 1.25rem 2.75rem;
}
.button--hideAfter::after {
    display: none;
}
.button--arrowLeft::before {
    content: "";
    display: inline-block;
    border: 1.25rem solid transparent;
}
.button--arrowLeft::before {
    border: .85rem solid transparent;
    border-top-width: .65rem;
    border-bottom-width: .65rem;
    border-left-color: var(--color);
    margin-right: -1.5rem;
    transform: translateX(-1.5rem) rotate(-180deg);
    transition: var(--transition);
}
.button--arrowLeft:hover::before {
    border-left-color: var(--hoverColor);
}
.button--arrowLeft::after {
    display: none;
}


.button--white {
    --color: #fff;
    --hoverColor: var(--color-dark);
}
.button--full {
    background-color: var(--color);
    color: var(--hoverColor);
} 
.button--full::after {
    border-left-color: var(--hoverColor);
}
.button--full:hover,
.button--full:focus {
    background-color: var(--hoverColor);
}
.button--full:hover > span,
.button--full:focus > span {
    color: var(--color);
}
.button--full:hover::after,
.button--full:focus::after {
    border-left-color: var(--color);
}
.button--xxl {
    font-size: 6.5rem;
    line-height: 1.2;
}
.button--xl {
    font-size: 5rem;
    line-height: 1.2;
}

.button-arrow {
    --size: 6rem;
    border: 1px solid var(--color-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: var(--size);
    height: var(--size);
    transition: var(--transition);
}
.button-arrow::before {
    content: "";
    display: inline-block;
    border: 1.25rem solid transparent;
    border-left-width: 1rem;
    border-right-width: 1rem;
    border-top-color: var(--color-dark);
    transform: translateX(5px) rotate(-90deg);
    transition: var(--transition);
}
.button-arrow:hover {
    background-color: var(--color-dark);
}
.button-arrow:hover::before {
    border-top-color: #fff;
}
.button-arrow--sm {
    --size: 5rem;
}
.button-arrow--sm::before {
    border-width: 1rem;
    border-left-width: .75rem;
    border-right-width: .75rem;
}

.button.button-loading > span,
.button.button-loading::after {
    opacity: 0;
    visibility: hidden;
}
.button.button-loading::before {
    --size: 2.5rem;
    content: "";
    background: url('/storage/svg/loading.svg') center center no-repeat;
    background-size: cover;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size);
    height: var(--size);
    transform-origin: top left;
    transform: translate(-50%, -50%);
    animation: spin-center 1s linear infinite;
    transition: var(--transition);
}
.button.button-loading:hover::before {
    filter: brightness(0) invert(1);
}

.btn-wrap {
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    gap: 1.5rem var(--grid-gap);
}
.btn-wrap--center {
    justify-content: center;
}
.btn-wrap--1 {
    gap: 1rem;
}
.btn-wrap--1 > a {
    --color: #fff;
    --hoverColor: var(--color-dark);
    font-size: 2rem;
    padding: 1rem 1.5rem 1rem 2.5rem;
}
.btn-wrap--1 > a:hover {
    color: var(--hoverColor);
}


.container {
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
    margin: 0 auto;
    max-width: var(--container-max-width);
}
.container--md {
    max-width: var(--container-md-max-width);
}


.google-card {
    background: var(--gradient-1);
    display: inline-flex;
    align-items: center;
    gap: 3rem;
    padding: 2rem 3rem;
}
.google-card::before {
    --size: 6.7rem;
    content: "";
    background: url('/storage/svg/google-icon-logo.svg') center center no-repeat;
    background-size: cover;
    height: var(--size);
    width: var(--size);
}
.google-card__content {
    padding-left: 3rem;
    position: relative;
}
.google-card__content::before {
    content: "";
    border-left: 2px solid color-mix(in srgb, #fff 25%, transparent);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    height: calc(100% + 2rem);
    width: 2px;
}
.google-card__note {
    display: flex;
    align-items: center;
}
.google-card__note > span:first-child {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    line-height: 1;
    margin-right: 1rem;
}
.google-card__note > span:not(:first-child) {
    color: #fdd663;
    display: inline-block;
    font-size: 3rem;
    line-height: 1;
    transform: translateY(-4px);
}
.google-card__reviews {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.1;
}
.google-card__reviews > span {
    font-weight: 600;
}


.grid {
    display: grid;
    gap: var(--grid-gap);
}
.grid--cols2 {
    grid-template-columns: repeat(2, 1fr);
}
.grid--cols2-1 {
    grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
}
.grid--cols2-2 {
    grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
}
.grid--cols3 {
    grid-template-columns: repeat(3, 1fr);
}
.grid--cols4 {
    grid-template-columns: repeat(4, 1fr);
}
.grid-col--bg1 {
    position: relative;
    isolation: isolate;
}
.grid-col--bg1::before {
    content: "";
    background-color: var(--color-gray-white);
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--grid-gap));
    height: calc(100% + (var(--section-padding-length) * 2));
    width: 999vw;
    z-index: -1;
    transform: translateY(-50%);
}
.grid:has(.grid-col--bg1:not(:first-child)) .grid-col:first-child {
    padding-right: var(--grid-gap);
}

.link,
.dynacontent a:not([class]):not(:is(ol *)) {
    --color: var(--color-dark);
    color: var(--color);
    display: inline-block;
    font-weight: 600;
    line-height: 1;
    position: relative;
}
.footer__links ul > li,
.widget--menu > ul > li > ul > li {
    margin-bottom: 1rem;
    padding-left: 2.5rem;
    position: relative;
}
.footer__links ul > li::before,
.widget--menu > ul > li > ul > li::before {
    content: "";
    background: var(--gradient-4);
    display: inline-block;
    position: absolute;
    top: .5rem;
    left: 0;
    width: 12px;
    height: 19px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.footer__links ul > li > a,
.widget--menu > ul > li > ul > li > a {
    --color: var(--color-dark);
    color: var(--color);
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 2.2rem;
    line-height: 1;
    position: relative;
}
.footer__links ul > li > a,
.widget--menu > ul > li:has(.menu-item.active) > ul > li > a {
    --color: #fff;
}
.link::before,
.link::after,
.dynacontent a:not([class])::before,
.dynacontent a:not([class])::after,
.footer__links ul > li > a::after,
.widget--menu > ul > li > ul > li > a::before,
.widget--menu > ul > li > ul > li > a::after,
.list-ordered-1 .list-ordered-item > span > a::before,
.list-ordered-1 .list-ordered-item > span > a::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 2px;
    background-color: var(--color);
    position: absolute;
    bottom: -3px;
    left: 0;
    transition: var(--transition);
}
.link::before,
.dynacontent a:not([class])::before,
.widget--menu > ul > li > ul > li > a::before,
.list-ordered-1 .list-ordered-item > span > a::before {
    opacity: .25;
}
.link::after,
.dynacontent a:not([class])::after,
.footer__links ul > li > a::after,
.widget--menu > ul > li > ul > li > a::after,
.list-ordered-1 .list-ordered-item > span > a::after {
    width: 0;
    transition: width var(--transition) ease;
}
.link:hover::after,
.dynacontent a:not([class]):hover::after,
.footer__links ul > li > a:hover::after,
.widget--menu > ul > li > ul > li > a:hover::after,
.list-ordered-1 .list-ordered-item > span > a:hover::after {
    width: 100%;
}
.link--xl {
    font-size: 3rem;
    line-height: 1.2;
}
.link--xl::before,
.link--xl::after {
    height: 2px;
}
.link--xxl {
    font-size: 4rem;
    line-height: 1.2;
}
.link--xxl::before,
.link--xxl::after {
    height: 3px;
}



.list-ordered-1 {
    counter-reset: item;
}
.list-ordered-1 .list-ordered-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-family: var(--font-heading);
    font-size: 3.2rem;
    line-height: 1.3;
    padding: 2rem 3.5rem;
    margin-bottom: 1.5rem;
    list-style: none;
    counter-increment: item;
}
.list-ordered-1 .list-ordered-item::before {
    content: counter(item) ".";
    background-image: var(--gradient-1);
    background-size: 200% 100%;
    display: inline-block;
    -webkit-background-clip: text;
    color: transparent;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 5rem;
    line-height: 1;
}
.list-ordered-1 .list-ordered-item > span > a::before, .list-ordered-1 .list-ordered-item > span > a::after {
    bottom: 1px;
}

.list-ordered-1 .list-ordered-item > span {
    display: inline-block;
    transform: translateY(.5rem);
}
.list-ordered-1 .list-ordered-item > span > a {
    --color: var(--color-dark);
    color: var(--color);
    display: inline-block;
    position: relative;
}

.page-meta {
    background-color: var(--color-gray-white);
    padding: 3.5rem 5rem;
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    gap: 5vw;
    margin: 3rem 0 5rem 0;
}
.page-meta__item > span:first-child {
    display: block;
    color: var(--color-gray-2);
    font-family: var(--font-heading);
    font-size: 2.2rem;
}
.page-meta__item > *:last-child {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
}
.page-meta__item > a:last-child {
    font-weight: 500;
}
.page-meta__item:first-child > *:last-child {
    text-transform: capitalize;
}

.pellet {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: normal;
    line-height: 1.2;
    padding: 1rem 1.5rem;
    transition: var(--transition);
}
.pellet--1 {
    background: var(--gradient-1);
    color: #fff;
}
.pellet--sm {
    font-size: 1.8rem;
    padding: .75rem 1.25rem;
}


.section {
    padding: var(--section-padding);
}
.section--sm {
    padding: var(--section-padding-sm);
}
.section:has(.section__wrap) {
    padding: 0;
}
.section:has(.section__wrap) .section__wrap {
    padding: var(--section-padding);
}
.section--sm:has(.section__wrap) .section__wrap {
    padding: var(--section-padding-length-sm) var(--container-padding-x);
}

.title-1 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h1);
}
.title-2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h2);
}
.title-3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
}
.title-4 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h4);
}
.title-5 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h5);
}
.title-6 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h6);
}
.title-xl-1 {
    background-image: var(--gradient-1);
    -webkit-background-clip: text;
    color: transparent;
    display: inline-block;
    font-size: 25rem;
    font-family: var(--font-heading);
    line-height: 1;
}

.section-title,
.dynacontent h2 {
    --color: var(--color-dark);
    color: var(--color);
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    position: relative;
}
.section-title::after,
.dynacontent h2::after {
    content: "";
    background-color: var(--color);
    position: absolute;
    bottom: 0;
    left: 0;
    height: 6px;
    width: 10rem;
}
.section-title--white,
.section-2cols-content--style2 .dynacontent h2 {
    --color: #fff;
}
.section-title > span {
    padding: .25rem .75rem;
}
.section-title--center {
    text-align: center;
}
.section-title--center::after {
    left: 50%;
    transform: translateX(-50%);
}

.socials {
    display: flex;
    align-items: center;
    gap: 1rem;
    list-style-type: none;
}
.socials .social-item {
    --size: 6rem;
    border: 1px solid color-mix(in srgb, var(--color-dark) 25%, transparent);
    border-radius: var(--size);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    height: var(--size);
    width: var(--size);
    transition: var(--transition);
}
.socials .social-item::before {
    content: "";
    background: var(--gradient-2);
    filter: saturate(1.5);
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 115%;
    width: 115%;
    z-index: -1;
    transform-origin: top left;
    transform: translate(-50%, -50%);
    transition: var(--transition);
}
.socials .social-item > img {
    display: block;
    width: 50%;
    transition: var(--transition);
}
.socials .social-item:hover {
    box-shadow: var(--shadow-1);
}
.socials .social-item:hover::before {
    animation: spin-center 2s linear infinite;
    opacity: 1;
}
.socials .social-item:hover > img {
    filter: brightness(75);
}
.socials--center {
    justify-content: center;
}
.socials--white .social-item {
    border: 1px solid color-mix(in srgb, #fff 25%, transparent);
}
.socials--white .social-item > img,
.socials--white .social-item:hover > img {
    filter: brightness(0) invert(1);
}



/*****************************************************************************/
/*  >>> ELEMENTS REPEATED <<< */
/*****************************************************************************/
.hero-banner__content::before,
.footer__glow::before,
.footer__glow::after,
.cta__glow::before,
.cta__glow::after,
.page-header__line > span::before,
.page-header__line > span::after,
.section-2cols--style2 .grid-col--content::before,
.section-2cols-content--style2 .grid::before,
.team .team-top::before,
.testimonials__wrap::before,
.widget--menu > ul > li:has(.menu-item.active)::before {
    --size: 750rem;
    content: "";
    background: var(--gradient-3);
    border-radius: 50%;
    filter: blur(35rem);
    position: absolute;
    top: -50%;
    left: 100%;
    width: 100%;
    height: 100%;
    z-index: -1;
    width: var(--size);
    height: var(--size);
    transform: translateY(-50%);
    transform-origin: top center;
    animation: spin-centerY 15s linear infinite;
}
body.is-mobile .header-menu::before,
body.is-mobile .hero-banner__content::before,
body.is-mobile .footer__glow::before,
body.is-mobile .footer__glow::after,
body.is-mobile .cta__glow::before,
body.is-mobile .cta__glow::after,
body.is-mobile .page-header__line > span::before,
body.is-mobile .page-header__line > span::after,
body.is-mobile .section-2cols--style2 .grid-col--content::before,
body.is-mobile .section-2cols-content--style2 .grid::before,
body.is-mobile .team .team-top::before,
body.is-mobile .testimonials__wrap::before,
body.is-mobile .widget--menu > ul > li:has(.menu-item.active)::before {
    display: none;
}
.section-2cols-content--style2 .grid::before,
.team .team-top::before,
.testimonials__wrap::before {
    top: -710rem;
    left: 50%;
    transform-origin: left center;
    transform: translateX(-50%);
    animation: spin-centerX 15s linear infinite;
}

.footer::before,
.footer::after,
.cta::before,
.cta::after,
.page-header__line::before,
.page-header__line::after {
    content: "";
    background-color: var(--color-dark);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -5;
}
.cta::before,
.footer::before,
.page-header__line::before { mix-blend-mode: color; }
.cta::after,
.footer::after,
.page-header__line::after { opacity: .9; }

.footer__glow,
.cta__glow {
    position: absolute;
    isolation: isolate;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -4;
}
.cta__glow::before,
.footer__glow::before {
    top: -323%;
    left: auto;
    right: 80%;
}
.cta__glow::after,
.footer__glow::after {
    top: 448%;
    left: 71%;
}
.page-header__line > span::before {
    top: -480%;
    left: auto;
    right: 80%;
}
.page-header__line > span::after {
    top: 690%;
    left: 71%;
}

.section-title > span,
.cta__title > span,
.dynacontent h2 > u {
    background: var(--gradient-1);
    color: #fff;
    display: inline-block;
}

.list-ordered-1 .list-ordered-item,
.section-1col--style2 {
    background: url('/storage/./background-stripe-1.webp') center center no-repeat;
    background-size: cover;
    box-shadow: var(--shadow-1);
}

.header .header-buttons .hb-feat,
.testimonials__item .testimonials__quote-icon  {
    width: 8rem;
    height: 7.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}
.header .header-buttons .hb-feat::before,
.testimonials__item .testimonials__quote-icon::before {
    content: "";
    background: var(--gradient-2);
    filter: saturate(1.5);
    position: absolute;
    top: 50%;
    left: 50%;
    height: 145%;
    width: 145%;
    z-index: -1;
    transform-origin: top left;
    transform: translate(-50%, -50%);
}
.header .header-buttons .hb-feat > img,
.testimonials__item .testimonials__quote-icon > svg {
    display: inline-block;
    width: 60%;
}

.pellet:hover,
.suggestion-card:hover {
    box-shadow: var(--shadow-1);
}

.projects__item-title a {
    --lineColor: var(--color-dark);
    display: inline-block;
    position: relative;
}
.projects__item-title a::after {
    content: "";
    background: var(--lineColor);
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    transition: var(--transition);
}
.projects__item-title a:hover::after {
    width: 100%;
}

.project-short-description {
    margin-bottom: 5rem;
}

.project-detail .dynacontent p,
.project-detail .dynacontent li {
    font-size: 2rem;
}

.project-gallery {
    display: grid;
    grid-template-columns: 5fr 3fr;
    grid-gap: var(--grid-gap);
    margin-bottom: 7rem;
}
.project-gallery .project-gallery__item {
    display: block;
}
.project-gallery .project-gallery__item > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.project-suggestion {
    padding-top: var(--section-padding-length-sm);
}


/*****************************************************************************/
/*  >>> DYNACONTENT <<< */
/*****************************************************************************/
.dynacontent ul:not([class]) {
    list-style: none;
    padding: 0;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.dynacontent ul:not([class]) li,
.dynacontent ol:not([class]) > li > ol:has(> li + li) > li {
    font-weight: 600;
    padding-left: 3rem;
    margin-bottom: .5rem;
    position: relative;
}
.dynacontent ul:not([class]) li::before,
.dynacontent ol:not([class]) > li > ol:has(> li + li) > li::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: .4rem;
    left: 0;
    width: 12px;    
    height: 19px;      
    background: var(--gradient-4);
    clip-path: polygon(0 0, 100% 50%, 0 100%);;
}



/*****************************************************************************/
/*  >>> BANNER <<< */
/*****************************************************************************/

.hero-banner {
    background-color: var(--color-dark);
    overflow: hidden;
}
.hero-banner .container {
    padding: 0;
    max-width: none;
}
.hero-banner__wrap,
.page-header__wrap {
    display: flex;
}
.hero-banner__wrap > *,
.page-header__wrap > * {
    flex: 1 1 50%;
}
.page-header__wrap {
    gap: var(--grid-gap);
}
.hero-banner__content {
    /* background-color: var(--color-dark); */
    /* overflow: hidden; */
    padding: 6rem;
    position: relative;
    isolation: isolate;
}
.hero-banner__content::after {
    content: "";
    background: url('/storage/wave-colorful-adgensii-w1920.png') center center no-repeat;
    background-size: cover;
    position: absolute;
    /* top: -13%; */
    top: -27%;
    right: -25%;
    width: 84.5rem;
    height: 31.7rem;
    z-index: -1;
    transform: rotate(-150deg);
}
.hero-banner__suptitle,
.page-header__suptitle {
    border: 2px solid rgba(255,255,255,.4);
    color: #fff;
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 3rem;
    line-height: 1;
    padding: .75rem 1.25rem;
    margin-bottom: 2rem;
}
.hero-banner__title,
.page-header__title {
    color: #fff;
    font-size: 7rem;
    line-height: 1;
    margin-bottom: 1.5rem;
    text-align: center;
}
.hero-banner__subtitle {
    color: #fff;
    font-family: var(--font-heading); 
    font-size: 2.9rem;
    line-height: 1;
    margin-bottom: 2.5rem;
    opacity: .7;
    text-align: center;
}
.hero-banner__textFeat {
    color: #fff;
    padding: 3rem 0 2.5rem;
    position: relative;
    isolation: isolate;
    margin-bottom: 3rem;
}
.hero-banner__textFeat::before {
    content: "";
    background: var(--gradient-1);
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    width: calc(100% + 12rem);
    transform: translate(-50%, -50%);
    z-index: -1;
}
.hero-banner__textFeat > span {
    display: block;
    font-family: var(--font-heading);
    line-height: 1;
    text-align: center;
}
.hero-banner__textFeat > span:first-child {
    font-size: 3rem;
    margin-bottom: .5rem;
}
.hero-banner__textFeat > span:last-child {
    font-size: 6.75rem;
}
.hero-banner__media {
    background-color: var(--color-dark);
    aspect-ratio: 16/10;
    position: relative;
    z-index: 1;
}
.hero-banner__media > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/*****************************************************************************/
/*  >>> PAGE HEADER <<< */
/*****************************************************************************/
.page-header {
    position: relative;
    isolation: isolate;
}
.page-header__content {
    padding-top: 3rem;
}
.page-header__suptitle {
    background: var(--gradient-1);
    border: none;
}
.page-header__title {
    color: var(--color-dark);
    text-align: left;
}
.page-header__media {
    position: relative;
}
.page-header:not(.page-header--2) .page-header__content {
    min-height: 28rem;
}
.page-header:not(.page-header--2) .page-header__media > div {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 18rem);
    /* max-width: 78rem; */
}
.page-header__media > div {
    max-width: var(--container-md-max-width);
}
.page-header__media > div > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-header__line {
    --height: 22rem;
    background: url('/storage/technicolor-chaos-vibrant-masterpiece-computer-screen-w1920.webp') center center no-repeat;
    background-size: cover;
    margin-top: 4rem;
    position: relative;
    isolation: isolate;
    height: var(--height);
    z-index: -1;
}
.page-header__line > span {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.page-header--2 .page-header__content {
    text-align: center;
}
.page-header--2 .page-header__title {
    text-align: center;
}
.page-header--2:has(.page-header__media) .page-header__line {
    --height: 40rem;
}
.page-header--2 .page-header__media > div {
    aspect-ratio: 16/9;
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
    margin: -32rem auto 0 auto;
}



/*****************************************************************************/
/*  >>> BREADCRUMB <<< */
/*****************************************************************************/
.breadcrumb {
    --gap: 1rem;
    border: 2px solid color-mix(in srgb, var(--color-dark) 25%, transparent);
    display: inline-flex;
    flex-flow: row wrap;
    align-items: center;
    gap: var(--gap);
    padding: 1rem 3rem;
}
.breadcrumb:is(.page-header--2 *) {
    justify-content: center;
}
.breadcrumb > li:not(:last-child) {
    display: flex;
    align-items: center;
    gap: var(--gap);
}
.breadcrumb > li:not(:last-child)::after {
    content: "";
    display: inline-block;
    border: .75rem solid transparent;
    border-left-width: .5rem;
    border-right-width: .5rem;
    border-top-color: var(--color-dark);
    transform: translateX(5px) rotate(-90deg);
    transition: var(--transition);
}
.breadcrumb > li > a {
    font-weight: 600;
}



/*****************************************************************************/
/*  >>> CTA <<< */
/*****************************************************************************/

.cta {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: #fff;
    overflow: hidden;
    padding: var(--section-padding);
    position: relative;
    isolation: isolate;
    text-align: center;
}

.cta__container {
    padding: 0 var(--container-padding-x);
}

.cta__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
}
.cta__overlay::before,
.cta__overlay::after {
    content: "";
    background: url('/storage/wave-colorful-adgensii-w1920.png') center center no-repeat;
    background-size: cover;
    position: absolute;
    bottom: -18rem;
    width: 124.5rem;
    height: 46rem;
    z-index: -3;
}
.cta__overlay::before {
    left: calc(30vw - 89rem);
    transform: scaleX(-1) rotate(-40deg);
}
.cta__overlay::after {
    right: calc(30vw - 89rem);
    transform:  rotate(-40deg);
}

.cta__suptitle {
    font-family: var(--font-heading);
    font-size: var(--font-size-h2);
    line-height: 1;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    position: relative;
    isolation: isolate;
}
.cta__suptitle::after {
    content: "";
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10rem;
    height: 6px;
}
.cta__title {
    display: inline-flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: var(--font-size-h1);
    line-height: 1;
    margin-bottom: 2rem;
}
.cta__title > span {
    padding: 1.5rem 2rem 1rem 2rem;
}


/*****************************************************************************/
/*  >>> SECTION 2 COLS <<< */
/*****************************************************************************/
.section-2cols .grid-col--image > img {
    display: inline-block;
    width: 100%;
}
.section-2cols--style1 {
    margin-top: var(--section-padding-length);
    margin-bottom: var(--section-padding-length);
}
/* .section-2cols--style2 {
    margin-bottom: 1rem;
} */
.section-2cols--style2 .grid {
    grid-gap: 0;
}
.section-2cols--style2 .grid-col--image {
    position: relative;
    overflow: hidden;
}
.section-2cols--style2 .grid-col--image > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.section-2cols--style2 .grid-col--content {
    background-color: var(--color-dark);
    color: #fff;
    font-weight: 300;
    overflow: hidden;
    padding: 9rem 6rem;
    position: relative;
    isolation: isolate;
}
.section-2cols--style2 .grid-col--content::after {
    content: "";
    background: url('/storage/./wave-outline-adgensii-w1920.webp') center center no-repeat;
    background-size: cover;
    position: absolute;
    top: -13rem;
    right: calc(20vw - 65rem);
    width: 113rem;
    height: 34rem;
    z-index: -1;
}
.section-2cols--image-right .grid-col--image {
    order: 2;
}
.section-2cols--image-right .grid-col--content {
    order: 1;
}
.section-2cols--image-right .grid-col--content .btn-wrap--1 {
    margin-top: 2.5rem;
}


/*****************************************************************************/
/*  >>> SECTION 2 COLS CONTENT <<< */
/*****************************************************************************/
.section-2cols-content {
    margin-bottom: var(--section-padding-length);
}
.section-2cols-content figure > table {
    width: 100%;
}
.section-2cols-content figure > table > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap);
}
.section-2cols-content--style2 {
    background-color:var(--color-dark);
    overflow: hidden;
}
.section-2cols-content--style2 .grid {
    color: #fff;
    font-weight: 300;
    padding: 6rem;
    position: relative;
    isolation: isolate;
}



/*****************************************************************************/
/*  >>> SECTION 1 COL <<< */
/*****************************************************************************/
.section-1col--style2 {
    padding: 5rem 4rem;
    margin: 0 auto;
    /* margin-top: var(--section-padding-length); */
    text-align: center;
    max-width: 135rem;
}
.section-1col--style2 .dynacontent p {
    text-align: center;
}


/*****************************************************************************/
/*  >>> TEAM <<< */
/*****************************************************************************/
.team {
    margin-bottom: var(--section-padding-length);
}
.team .team-top {
    background-color: var(--color-dark);
    color: #fff;
    font-weight: 300;
    margin: 0 auto;
    padding: 6rem;
    padding-bottom: 28rem;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-align: center;
    max-width: 111rem;
}
.team .team-top::before {
    top: -750rem;
}
.team .team-top::after {
    content: "";
    background: url(/storage/./wave-outline-adgensii-w1920.webp) center center no-repeat;
    background-size: cover;
    position: absolute;
    top: -16rem;
    left: 50%;
    width: 130rem;
    height: 39rem;
    z-index: -1;
    transform: translateX(-50%);
}
.team .team-top .dynacontent p {
    font-size: 2.2rem;
    text-align: center;
}
.team .team-top + .grid {
    margin-top: -25rem;
    position: relative;
    z-index: 5;
}
.team__member {
    margin: 0 auto;
    max-width: 50rem;
}
.team__member-image {
    aspect-ratio: 8/9;
    margin-bottom: 1rem;
}
.team__member-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.team__member-socials {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}


/*****************************************************************************/
/*  >>> TESTIMONIALS <<< */
/*****************************************************************************/
.testimonials {
    background-color: var(--color-dark);
    overflow: hidden;
    /* margin-top: var(--section-padding-length);
    margin-bottom: var(--section-padding-length); */
}
.testimonials__wrap {
    color: #fff;
    font-weight: 300;
    padding: 8rem 0;
    position: relative;
    isolation: isolate;
}
.testimonials__wrap::before {
    top: -750rem;
}
.testimonials__wrap::after {
    content: "";
    background: url('/storage/wave-colorful-adgensii-w1920.png') center center no-repeat;
    background-size: cover;
    position: absolute;
    bottom: 1rem;
    right: -25%;
    width: 125rem;
    height: 50rem;
    z-index: -1;
    transform: rotate(-45deg);
}
.testimonials__suptitle {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 2rem;
    margin-bottom: 2rem;
}
.testimonials__suptitle > .avatar-wrap {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}
.testimonials__suptitle > span {
    font-weight: bold;
}
.testimonials__suptitle > .avatar-wrap > span {
    --size: 4rem;
    display: inline-block;
    width: var(--size);
    height: var(--size);
    overflow: hidden;
}
.testimonials__suptitle > .avatar-wrap > span:not(:first-child) {
    margin-left: -1rem;
}
.testimonials__item {
    border: 2px solid transparent;
    border-image: var(--gradient-1) 1;
    background-color: color-mix(in srgb, var(--color-dark) 75%, transparent);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    padding: 4rem;
}
.testimonials__item .testimonials__item-content {
    text-align: center;
}
.testimonials__item .testimonials__quote {
    text-align: center;
}
.testimonials__item .testimonials__quote-icon {
    margin-bottom: 2.5rem;
}
.testimonials__item .testimonials__text {
    border-left: none;
    font-style: normal;
    font-size: 2.4rem;
    font-weight: 400;
    padding: 0;
    margin-bottom: 2.5rem;
}
.testimonials__item .testimonials__author-info {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    gap: 1rem;
}
.testimonials__item .testimonials__author-company {
    font-size: inherit;
    font-weight: bold;
    margin-bottom: 0;
}
.testimonials__item .testimonials__author-name {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: inherit;
    font-weight: 300;
    position: relative;
}
.testimonials__item .testimonials__author-name::before {
    content: "•";
    color: inherit;
    display: inline-block;
}
.testimonials__item .testimonials__author-website {
    text-align: center;
}
.testimonials__item .testimonials__author-website a {
    background-color: color-mix(in srgb, #fff 15%, transparent);
    display: inline-block;
    line-height: 1;
    text-align: center;
    padding: .75rem 1.5rem;
}


/*****************************************************************************/
/*  >>> PROJECTS <<< */
/*****************************************************************************/
.projects__item-image {
    aspect-ratio: 10/6;
    display: block;
    margin-bottom: 2.5rem;
    overflow: hidden;
}
.projects__item-image > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}
.projects__item-image:hover > img {
    transform: scale(1.07);
}
.projects__item-date {
    color: var(--color-gray);
    font-size: 1.8rem;
    margin-bottom: 1rem;
    text-transform: capitalize;
}
.projects__item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.project-card {
    overflow: hidden;
    position: relative;
    transition: var(--transition);
}
.project-card__thumb {
    display: block;
}
.project-card__thumb > img {
    display: block;
    transition: var(--transition);
}
.project-card__content {
    background-color: #fff;
    padding: 2.5rem 3rem;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(100%);
    transition: var(--transition);
}
.project__card-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    line-height: 1.1;
}
.project__card-date {
    color: var(--color-gray);
    font-size: 1.6rem;
    text-transform: capitalize;
}
.project-card__content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.project-card:hover {
    box-shadow: var(--shadow-1);
}
.project-card:hover .project-card__thumb > img {
    transform: scale(1.05);
}
.project-card:hover .project-card__content {
    transform: translateY(0);
}

.projects-filters {
    margin-bottom: 5rem;
}

.projects-empty {
    padding: 6rem 2rem;
    text-align: center;
}

.projects-empty__message {
    font-size: var(--font-size-body);
    color: var(--color-gray);
    text-align: center;
}

/*****************************************************************************/
/*  >>> PAGINATION <<< */
/*****************************************************************************/
.pagination-wrapper {
    margin-top: 5rem;
}
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.pagination-item .pagination-link {
    --size: 5.2rem;
    border: 1px solid color-mix(in srgb, var(--color-dark) 25%, transparent);
    border-radius: 0;
    color: var(--color-dark);
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    user-select: none;
    width: var(--size);
    height: var(--size);
    transition: var(--transition);
}
.pagination-item:not(.disabled):not(.active):hover .pagination-link {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    color: #fff;
}
.pagination .pagination-item:first-child .pagination-link,
.pagination .pagination-item:last-child .pagination-link {
    padding: 0 2.5rem;
    width: auto;
}
.pagination-item.disabled .pagination-link {
    cursor: default;
    opacity: .35;
}
.pagination-item.active .pagination-link {
    background: var(--gradient-2);
    color: #fff;
    cursor: default;
    position: relative;
}


/*****************************************************************************/
/*  >>> SECTION CTA <<< */
/*****************************************************************************/
.section-cta {
    /* margin-top: var(--section-padding-length); */
    overflow: hidden;
    position: relative;
    isolation: isolate;
    text-align: center;
}
.section-cta::before,
.section-cta::after {
    content: "";
    background: url(/storage/wave-colorful-adgensii-w1920.png) center center no-repeat;
    background-size: cover;
    filter: brightness(125%);
    position: absolute;
    bottom: -18rem;
    width: 125rem;
    height: 50rem;
    z-index: -1;
}
.section-cta::before {
    left: calc(35vw - 100rem);
    transform: scaleX(-1) rotate(-35deg);
}
.section-cta::after {
    right: calc(35vw - 100rem);
    transform: rotate(-35deg);
}
.section-cta__title {
    margin-bottom: 3rem;
}
.section-cta__title > span {
    display: block;
}
.section-cta__title > span:first-child {
    font-size: 7rem;
}
.section-cta__title > span:last-child {
    background: var(--gradient-1);
    color: #fff;
    display: inline-block;
    font-size: 13rem;
    line-height: 1;
    padding: 3rem 4rem;
}
.section-cta__infos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem var(--grid-gap);
    margin-bottom: 2.5rem;
}

/*****************************************************************************/
/*  >>> SECTION CONTACT FORM <<< */
/*****************************************************************************/
.section-contact-form {
    margin-bottom: 5rem;
}

/*****************************************************************************/
/*  >>> CAROUSELS <<< */
/*****************************************************************************/

.carousel-1 .splide__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    bottom: -2em;
}
.carousel-1 .splide__pagination__page {
    --size: 1.5rem;
    background: transparent;
    border-radius: 0;
    border: 2px solid #fff;
    opacity: .35;
    width: var(--size);
    height: var(--size);
}
.carousel-1 .splide__pagination__page.is-active {
    opacity: 1;
    transform: none;
}
.carousel-1 .splide__arrow {
    --size: 8rem;
    width: var(--size);
    height: var(--size);
    background: transparent;
    border: 2px solid #fff;
    border-radius: 0;
    top: 90%;
    transform: translateY(-85%);
    transition: var(--transition);
}
.carousel-1 .splide__arrow svg {
    fill: #fff;
    position: absolute;
    width: 6rem;
    height: 6rem;
    top: 50%;
    left: 50%;
    transform: translate(-25%, -25%);
}
.carousel-1 .splide__arrow--prev {
    left: 2em;
}
.carousel-1 .splide__arrow--prev svg {
    transform: translate(-75%, -25%) scaleX(-1);
}
.carousel-1 .splide__arrow--next {
    right: 2em;
}
.carousel-1--2 .splide__pagination__page {
    border-color: var(--color-dark);
}
.carousel-1--2 .splide__pagination__page.is-active {
    background-color: var(--color-dark);
}

/*****************************************************************************/
/*  >>> FOOTER <<< */
/*****************************************************************************/
.footer {
    --paddingY: 4rem;
    background: url('/storage/./technicolor-chaos-vibrant-masterpiece-computer-screen-w1920.webp') center center no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}
.footer__glow::before {
    top: -188%;
    right: 90%;
}
.footer__glow::after {
    top: 370%;
    left: 85%;
}
.footer__wrap {
    padding-top: var(--paddingY);
    padding-bottom: calc(var(--paddingY) * 1.5);
}
.footer__linksWrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
}
.footer__linksTitle {
    color: #fff;
    font-family: var(--font-heading);
    font-size: var(--font-size-h4);
    margin-bottom: 2rem;
    padding-bottom: .75rem;
    position: relative;
}
.footer__linksTitle::after {
    content: "";
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 5rem;
}
.footer__links ul > li::before {
    width: 9px;
    height: 14px;
}
.footer__links ul > li > a {
    font-size: 2rem;
    opacity: .65;
    transition: var(--transition);
}
.footer__links ul > li > a:hover {
    opacity: 1;
}   
.footer__copy {
    border-top: 1px solid color-mix(in srgb, #fff 25%, transparent);
    color: #fff;
    padding: 3rem 0;
}
.footer__copyText {
    margin-bottom: 0;
    text-align: center;
}



/*****************************************************************************/
/*  >>> PAGE HOME <<< */
/*****************************************************************************/
#page-home .section-1col--style2:has(+ section) {
    position: relative;
    z-index: 5;
}
#page-home .section-1col--style2 + section {
    margin-top: -20rem;
}
#page-home .section-1col--style2 + section .grid {
    padding-top: 30rem;
}


/*****************************************************************************/
/*  >>> FILTER BUTTONS <<< */
/*****************************************************************************/
.filters-wrapper {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.filters-wrapper .filter-btn {
    border: 1px solid color-mix(in srgb, var(--color-dark) 25%, transparent);
    border-radius: 0;
    background: transparent;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: var(--font-size-h5);
    display: inline-block;
    padding: 1rem 2.5rem;
    transition: var(--transition);
}
.filters-wrapper .filter-btn:hover {
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: #fff;
}
.filters-wrapper .filter-btn.active {
    background: var(--gradient-1);
    border: 1px solid transparent;
    color: #fff;
    outline: none;
}


/*****************************************************************************/
/*  >>> PAGE CONTENT <<< */
/*****************************************************************************/
.page-content {
    padding-top: var(--section-padding-length);
}
.page-content__wrap {
    display: flex;
    gap: var(--grid-gap-lg);
    align-items: flex-start;
}
.page-content__content {
    flex: 0 1 60%;
}
.page-content__content--full {
    flex: 0 1 100%;
}
.page-content__sidebar {
    flex: 0 1 40%;
    padding: 0 var(--grid-gap-lg);
    position: relative;
    isolation: isolate;
}
.page-content__sidebar::before {
    content: "";
    background-color: var(--color-gray-white);
    position: absolute;
    top: calc(-1 * var(--section-padding-length));
    left: 0;
    width: 999vw;
    height: 100%;
    z-index: -1;
}
.dynacontent h2:not(:first-child) {
    margin-top: var(--section-padding-length-sm);
}
.dynacontent h2 > u {
    padding: .15rem .75rem;
    text-decoration: none;
}
.dynacontent ol:not(ol ol) {
    counter-reset: item;
    list-style: none;
}
.dynacontent ol:not(ol ol) > li {
    border: 4px solid transparent;
    border-image: var(--gradient-1) 1;
    background-color: var(--color-dark);
    color: #fff;
    counter-increment: item;
    font-size: 2rem;
    margin-bottom: 1rem;
    padding: 4rem 3rem 2.5rem 10.5rem;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.dynacontent ol:not(ol ol) > li::before {
    content: counter(item) ".";
    background-image: var(--gradient-1);
    display: inline-block;
    -webkit-background-clip: text;
    color: transparent;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 6rem;
    line-height: 1;
    height: 100%;
    position: absolute;
    top: 2.5rem;
    left: 4rem;
}
.dynacontent ol:not(ol ol) > li::after {
    content: "";
    background: url(/storage/./wave-outline-adgensii-w1920.webp) center center no-repeat;
    background-size: cover;
    opacity: .75;
    position: absolute;
    top: -21rem;
    left: 50%;
    width: 113rem;
    height: 34rem;
    transform: translateX(-50%);
    z-index: -1;
}
.dynacontent ol:not(ol ol) > li > h3 {
    margin-bottom: 1rem;
}
.dynacontent ol ol {
    list-style: none;
}
.dynacontent ol ol > li > a {
    --color: #fff;
    position: relative;
}


/*****************************************************************************/
/*  >>> PAGE SIDEBAR <<< */
/*****************************************************************************/
.widget {
    margin-bottom: 3rem;
}
.widget--menu > ul {
    background-size: cover;
}
.widget--menu > ul > li {
    background: url('/storage/./background-stripe-1.webp') center center no-repeat;
    margin-bottom: 1rem;
}
.widget--menu > ul > li > a {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--font-size-h4);
    line-height: 1;
    padding: 2.5rem 3rem 2.5rem 7rem;
    position: relative;
    isolation: isolate;
}
.widget--menu > ul > li > a::before {
    --size: 3rem;
    content: "";
    background: url('/storage/svg/arrow-right-1.svg') center center no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 2.5rem;
    width: var(--size);
    height: var(--size);
    transform: translateY(-50%);
}
.widget--menu > ul > li > ul {
    padding: 0 3rem 0 5rem;
}
.widget--menu > ul > li > ul > li:last-child {
    margin-bottom: 3rem;
}
.widget--menu > ul > li > a:focus {
    outline: none;
}
.widget--menu > ul > li:has(.menu-item.active) {
    background: var(--color-dark);
    color: #fff;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.widget--menu > ul > li:has(.menu-item.active) > a::before {
    --size: 2rem;
    background: url('/storage/svg/arrow-right-2.svg') center/cover no-repeat;
    left: 3rem;
}
.widget--menu > ul > li:has(.menu-item.active) > a::after {
    --size: 3rem;
    content: "";
    background: var(--gradient-2);
    width: var(--size);
    height: var(--size);
    filter: saturate(1.5);
    position: absolute;
    top: 50%;
    left: 2.5rem;
    transform: translateY(-50%);
    z-index: -1;
}
.widget--projects {
    margin: 0 auto;
    max-width: 70rem;
}


/*****************************************************************************/
/*  >>> CONTACT FORM <<< */
/*****************************************************************************/
.contact-form-1 {
    --gapX: 3rem;
    --gapY: 2rem;
}
.contact-form-1 .contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gapY) var(--gapX);
}
.contact-form-1 .contact-form-row ~ .contact-form-group {
    margin-top: var(--gapY);
}
.contact-form-1 .contact-form-row ~ .contact-form-group:last-of-type {
    margin-bottom: calc(var(--gapY) * 2);
}
.contact-form-1 .contact-column-12 {
    grid-column: 1 / -1;
}
.contact-form-1 .contact-form-group {
    position: relative;
}
.contact-form-1 .form-label {
    color: var(--color-gray);
    display: block;
    line-height: 1;
    transform-origin: left top;
    transform: translate(1rem, 3rem);
    transition: var(--transition);
}
.contact-form-1 .contact-form-input {
    border: none;
    border-bottom: 2px solid color-mix(in srgb, var(--color-dark) 25%, transparent);
    border-radius: 0;
    display: block;
    font-family: var(--font-body);
    font-size: 2rem;
    padding: .75rem 1rem;
    width: 100%;
    transition: var(--transition);
}
.contact-form-1 textarea.contact-form-input {
    height: 20rem;
    resize: none;
}
.contact-form-1 .contact-form-input:focus-visible {
    border-color: var(--color-dark);
    outline: none;
    box-shadow: none;
}
.contact-form-1 .contact-form-input:valid:not(:placeholder-shown):not(:focus-visible) {
    border-color: var(--color-success);
}
.contact-form-1 .contact-form-input:invalid:not(:placeholder-shown):not(:focus-visible) {
    border-color: var(--color-danger);
}
.contact-form-1 select.contact-form-input:not(.touched):invalid {
    border-color: color-mix(in srgb, var(--color-dark) 25%, transparent) !important;
}
.contact-form-1 select.contact-form-input {
    border-color: color-mix(in srgb, var(--color-dark) 25%, transparent);
}
.contact-form-1 select.contact-form-input:focus-visible,
.contact-form-1 select.contact-form-input.touched {
    border-color: var(--color-dark);
}
.contact-form-1 select.contact-form-input.touched:valid {
    border-color: var(--color-success);
}
.contact-form-1 select.contact-form-input.touched:invalid {
    border-color: var(--color-danger);
}
.contact-form-1 .contact-form-input::placeholder,
.contact-form-1 .contact-form-input::-webkit-input-placeholder {
    color: transparent;
}
.contact-form-1 .contact-form-group:has(.contact-form-input:focus-visible) .form-label,
.contact-form-1 .contact-form-group:has(.contact-form-input:not(:placeholder-shown)) .form-label {
    transform: translate(0, 0) scale(0.8);
}
.contact-form-1 .form-check {
    cursor: pointer;
    display: flex;
    gap: 1.75rem;
    position: relative;
}
.contact-form-1 .form-check::before {
    content: "";
    --size: 20px;
    background-color: #fff;
    border: 2px solid var(--color-gray);
    border-radius: 0;
    display: inline-block;
    flex-shrink: 0;
    margin: 0;
    position: relative;
    height: var(--size);
    width: var(--size);
    transition: var(--transition);
    transform: translateY(.25rem);
    z-index: 1;
}
.contact-form-1 .form-check::after {
    content: "";
    position: absolute;
    opacity: 0;
    visibility: hidden;
    left: .7rem;
    top: .4rem;
    width: .6rem;
    height: 1.3rem;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: var(--transition);
    z-index: 2;
}
.contact-form-1 .form-check > input {
    outline: none !important;
    margin-left: -3.5rem;
    width: auto;
    height: 0;
    transform: translateY(-1.3rem);
}
.contact-form-1 .form-check-label {
    color: var(--color-gray);
    font-weight: 500;
    line-height: 1.3;
    transition: var(--transition);
}
.contact-form-1 .form-check:has(> input:focus-visible)::before {
    border-color: var(--color-dark);
}
.contact-form-1 .form-check:has(> input:checked)::before {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
}
.contact-form-1 .form-check:has(> input:checked)::after {
    opacity: 1;
    visibility: visible;
}
.contact-form-1 .form-check:has(> input:checked) .form-check-label {
    color: var(--color-dark);
}

.invalid-feedback {
    color: var(--color-danger);
    font-size: 1.6rem;
    line-height: 1;
    margin-top: .5rem;
}

.contact-message {
    --urlBefore: url();
    display: inline-block;
    font-weight: 500;
    padding: 1rem 2rem 1rem 5rem;
    position: relative;
}
.contact-message::before {
    --size: 2rem;
    content: "";
    background-image: var(--urlBefore);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: invert(1);
    position: absolute;
    top: 50%;
    left: 1.75rem;
    width: var(--size);
    height: var(--size);
    transform: translateY(-50%);
}
.contact-error-message {
    --urlBefore: url('/storage/svg/fermer.svg');
    background-color: var(--color-danger);
    color: #fff;
}
.contact-success-message {
    --urlBefore: url('/storage/svg/coche.svg');
    background-color: var(--color-success);
    color: #fff;
}


/*****************************************************************************/
/*  >>> SUGGESTION CARD <<< */
/*****************************************************************************/

.suggestion-card {
    --gap: 3rem;
    background-color: var(--color-gray-white);
    display: flex;
    gap: var(--gap);
    transition: var(--transition);
}
.suggestion-card:hover {
    transform: scale(1.02);
}
.suggestion-card__image {
    flex-shrink: 0;
    width: 25rem;
}
.suggestion-card__image > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.suggestion-card__content {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}
.suggestion-card__suptitle {
    color: var(--color-gray);
    font-family: var(--font-heading);
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: .75rem;
}
.suggestion-card__title {
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: 4rem;
    line-height: 1;
}
.suggestion-card__button {
    align-self: center;
    padding-right: var(--gap);
    margin-left: auto;
}

/*****************************************************************************/
/*  >>> SCROLL TOP <<< */
/*****************************************************************************/
.button-top {
    --size: 6rem;
    background-color: #fff;
    box-shadow: var(--shadow-1);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    bottom: 10rem;
    right: var(--container-padding-x);;
    width: var(--size);
    height: var(--size);
    z-index: 9999;
    transform: translateY(1rem);
    transition: var(--transition);
}
.button-top::before {
    content: "";
    display: inline-block;
    border: 1.1rem solid transparent;
    border-left-width: .9rem;
    border-right-width: .9rem;
    border-top-color: var(--color-dark);
    transform: rotate(180deg) translateY(5px);
}
.button-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/*****************************************************************************/
/*  >>> PAGES <<< */
/*****************************************************************************/
body#page-24 .contact-form-1 {
    padding-left: 4vw;
}

/*****************************************************************************/
/*  >>> PAGE 404 <<< */
/*****************************************************************************/
.page-404 {
    padding-bottom: var(--section-padding-length);
}
.page-404 + .section-cta { display: none; }

/*****************************************************************************/
/*  >>> REVEAL <<< */
/*****************************************************************************/
[data-reveal]:not(:is(.is-mobile *)) {
    opacity: 0;
    will-change: transform, opacity;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.reveal--fadeInUp   { animation-name: fadeInUp; }
.reveal--fadeInRight{ animation-name: fadeInRight; }
.reveal--fadeInLeft { animation-name: fadeInLeft; }


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




/*****************************************************************************/
/*  >>> ANIMATIONS <<< */
/*****************************************************************************/

@keyframes spin-centerY {
    from {
        transform: rotate(0deg) translateY(-50%);
    }
    to {
        transform: rotate(360deg) translateY(-50%);
    }
}

@keyframes spin-centerX {
    from {
        transform: rotate(0deg) translateX(-50%);
    }
    to {
        transform: rotate(360deg) translateX(-50%);
    }
}

@keyframes spin-center {
    from {
        transform: rotate(0deg) translate(-50%, -50%);
    }
    to {
        transform: rotate(360deg) translate(-50%, -50%);
    }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 10rem, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translate3d(10rem, 0, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translate3d(-10rem, 0, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes fadeInBottom {
    from { opacity: 0; transform: translate3d(0, -10rem, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/*****************************************************************************/
/*  >>> HELPERS <<< */
/*****************************************************************************/

.bg-gray-white { background-color: var(--color-gray-white) !important; }
.color-gray { color: var(--color-gray) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 1rem !important; }
.mb-2 { margin-bottom: 2rem !important; }
.mb-3 { margin-bottom: 3rem !important; }
.mb-4 { margin-bottom: 4rem !important; }
.mb-5 { margin-bottom: 5rem !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 1rem !important; }
.mt-2 { margin-top: 2rem !important; }
.mt-3 { margin-top: 3rem !important; }
.mt-4 { margin-top: 4rem !important; }
.mt-5 { margin-top: 5rem !important; }

.text-md { font-size: 2.5rem !important; }
.text-lg { font-size: 3.2rem !important; }
.text-center { text-align: center !important; }
/*****************************************************************************/
/*  >>> MAX WIDTH 1430px <<< */
/*****************************************************************************/
@media (max-width: 89.375em) {
    html {
        font-size: 52.5%;
    }
    .page-header__title {
        font-size: 8rem;
    }
}


/*****************************************************************************/
/*  >>> MAX WIDTH 1200px <<< */
/*****************************************************************************/
@media (max-width: 75em) {
    .header-menu {
        background-color: var(--color-dark);
        opacity: 0;
        visibility: hidden;
        padding-top: 6rem;
        padding-bottom: 6rem;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        z-index: 9999;
    }
    .header-menu::before {
        --size: 750rem;
        content: "";
        background: var(--gradient-3);
        border-radius: 50%;
        filter: blur(35rem);
        position: absolute;
        top: -50%;
        left: 100%;
        width: 100%;
        height: 100%;
        z-index: -1;
        width: var(--size);
        height: var(--size);
        transform: translateY(-50%);
        transform-origin: top center;
        animation: spin-centerY 15s linear infinite;
    }
    .header-menu::after {
        content: "";
        background-color: #fff;
        display: block;
        opacity: .25;
        position: absolute;
        top: 0;
        left: 5rem;
        width: 1px;
        height: 100%;
    }
    .header-menu.is-open {
        opacity: 1;
        visibility: visible;
        transition: .4s;
    }
    .hb-mobile-toggler,
    .header-menu-close {
        display: inline-flex;
    }
    .header-buttons {
        margin-left: auto;
    }
    .header .header-menu > ul {
        padding-left: 10rem;
        flex-flow: column nowrap;
        align-items: flex-start;
        gap: 1.5rem;
        overflow-y: scroll;
        position: relative;
        height: 100%;
    }
    .header .header-menu > ul > li.mobile-only {
        display: block;
    } 
    .header .header-menu > ul > li > a {
        color: #fff;
        font-size: 6rem;
        opacity: .5;
        position: relative;
        transition: var(--transition);
    }
    .header .header-menu > ul > li > a::before {
        --size: 1rem;
        content: "";
        background-color: #fff;
        border-radius: 100%;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 50%;
        left: -5.45rem;
        width: var(--size);
        height: var(--size);
        transform: translateY(-50%);
        transition: var(--transition);
    }
    .header .header-menu > ul > li > a:hover {
        opacity: 1;
    }
    .header .header-menu > ul > li > a:hover::before {
        opacity: 1;
        visibility: visible;
    }
    .header .header-menu > ul > li:has(.sub-menu) > a {
        gap: 2rem;
    }
    .header .header-menu > ul > li:has(.sub-menu) > a::after {
        border-top-color: #fff;
    }
    .header .header-menu > ul > li:has(.sub-menu) > ul {
        background-color: transparent;
        padding: 0;
        position: relative;
        top: auto;
        left: auto;
        overflow: hidden;
        width: auto;
        height: auto;
        opacity: 1;
        transform: none;
        visibility: visible;
        max-height: 0;
    }
    .header .header-menu > ul > li:has(.sub-menu) > ul > li > a {
        font-size: 3rem;
    }
    .header .header-menu > ul > li > a:hover + ul {
        max-height: 30rem;
    }
}


/*****************************************************************************/
/*  >>> MAX WIDTH 1100px <<< */
/*****************************************************************************/
@media (max-width: 68.75em) {
    :root {
        --font-size-h1: 7rem;
        --font-size-h2: 5.2rem;
        --font-size-h3: 4.1rem;
        --font-size-h4: 3.2rem;
        --font-size-h5: 2.4rem;
        --font-size-h6: 2.2rem;
        --font-size-body: 2.2rem;

        --container-padding-x: 5rem;
    }
    html {
        font-size: 50%;
    }
    .container {
        padding-left: 0;
        padding-right: 0;
    }
    .button, .btn-wrap--1 > a {
        font-size: 3rem;
        padding: 1.75rem 2.25rem 1.75rem 3.25rem;
    }
    .button--xl,
    .button--xxl {
        font-size: 4.8rem;
    }
    .dynacontent ol:not(ol ol) > li {
        font-size: var(--font-size-body);
    }

    .dynacontent ul:not([class]) li, .dynacontent ol:not([class]) > li > ol:has(> li + li) > li {
        margin-bottom: 1rem;
    }
    .link--xxl {
        font-size: 3.2rem;
    }
    .cta {
        padding-top: 12rem;
        padding-bottom: 12rem;
    }
    .filters-wrapper {
        gap: 2rem;
    }
    .filters-wrapper .filter-btn {
        font-size: 2.5rem;
    }
    .footer__links ul > li, .widget--menu > ul > li > ul > li {
        padding-left: 3.5rem;
    }

    .hero-banner__wrap {
        flex-direction: column;
        text-align: center;
    }
    .hero-banner__content {
        padding-top: 10rem;
        padding-bottom: 10rem;
    }
    .hero-banner__content .btn-wrap {
        justify-content: center;
    }
    .hero-banner__title {
        font-size: 9rem;
    }
    .hero-banner__subtitle {
        font-size: 3.5rem;
    }
    .hero-banner__subtitle > br {
        display: none;
    }
    .hero-banner__media {
        aspect-ratio: 16/11;
    }
    .hero-banner__textFeat::before {
        width: 100%;
        max-width: 66rem;
    }
    .page-header .page-header__content,
    .page-header .page-header__title {
        text-align: center;
    }
    .page-header:not(.page-header--2) .page-header__content {
        min-height: 0;
    }
    .page-header .page-header__wrap {
        flex-flow: column nowrap;
    }
   
    /* .page-header:not(.page-header--2) .page-header__media {
        display: none;
    } */
    .page-header:not(.page-header--2) .page-header__media > div {
        aspect-ratio: 1090/647;
        margin: 0 auto;
        position: static;
    }
    .page-header:not(.page-header--2) .page-header__line {
        margin-top: -10rem;
    }
    .page-header--2 .page-header__media > div {
        margin-top: calc(-15vw - 15rem);
    }
    .page-content__wrap {
        flex-flow: column nowrap;
    }
    .page-content__content {
        padding-bottom: var(--section-padding-length);
    }
    .page-content__sidebar {
        width: 100%;
    }
    .page-meta {
        justify-content: center;
        text-align: center;
    }
    .pellet--sm {
        font-size: var(--font-size-body);
    }
    .project__card-title {
        font-size: 3.5rem;
    }
    .project__card-date {
        font-size: 2.2rem;
    }
    .grid--cols2, .grid--cols2-1 {
        display: block;
    }
    .grid--cols2 > .grid-col:not(:last-child), .grid--cols2-1 > .grid-col:not(:last-child) {
        margin-bottom: var(--section-padding-length);
    }
    .section-2cols--style2 .grid-col--content {
        padding-left: var(--container-padding-x);
        padding-right: var(--container-padding-x);
    }
    .section-2cols-content figure > table,
    .section-2cols-content figure > table > tbody,
    .section-2cols-content figure > table > tbody > tr,
    .section-2cols-content figure > table > tbody > tr > td {
        display: block;
        width: 100%;
    }
    .section-2cols-content figure > table > tbody > tr > td:not(:last-child) {
        margin-bottom: var(--section-padding-length);
    }
    .grid--cols4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-col--image {
        text-align: center;
    }
    .header.sticky,
    .header, .page-header__wrap,
    .section-2cols-list, .page-content__content,
    .section-2cols.section-2cols--style1,
    .section-cta, .projects-container,
    .project-detail, .project-suggestion,
    .page-content__sidebar,
    .section-2cols-content--style2 .grid,
    .footer__wrap, .footer__copy {
        padding-left: var(--container-padding-x);
        padding-right: var(--container-padding-x);
    }
    .section-2cols--image-right .grid-col--image {
        order: 1;
    }
    .section-2cols--image-right .grid-col--content {
        order: 2;
    }
    .section-2cols--style2,
    .section-2cols--style2 .grid > .grid-col {
        margin-bottom: 0;
    }
    .section-cta__title > span:first-child {
        font-size: 5.5rem;
    }
    .section-cta__title > span:last-child {
        font-size: 10rem;
    }
    .section-cta__infos {
        margin-bottom: 5rem;
    }

    .section-2cols--style2 .grid-col--image {
        aspect-ratio: 16/10;
    }
    .section-2cols--style2 .grid-col--content::after {
        height: 45rem;
        width: 125rem;
        transform: rotate(12deg);
    }

    .section-title.section-title--centerLg {
        text-align: center;
    }
    .section-title.section-title--centerLg::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .projects,
    .team .grid,
    .testimonials__wrap {
        padding-left: var(--container-padding-x);
        padding-right: var(--container-padding-x);
    }
    .project-gallery {
        gap: 2rem;
    }
    .team .team-top {
        max-width: 100%;
    }
    .team .team-top::after {
        width: 150rem;
        height: 44rem;
    }
    .testimonials__content {
        margin-bottom: var(--section-padding-length-sm);
    }
    .testimonials__suptitle {
        justify-content: center;
    }
    .testimonials__content,
    .testimonials__content .section-title,
    .testimonials__content .dynacontent * {
        text-align: center;
    }
    .testimonials__content .section-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .testimonials__wrap::after {
        right: -40%;
    }
    .widget--menu > ul > li > a {
        font-size: 3.2rem;
    }
    .widget--menu > ul > li > a > span {
        display: inline-block;
        transform: translateY(.4rem);
    }
    .footer__links ul > li > a,
    .widget--menu > ul > li > ul > li > a {
        font-size: 2.5rem;
    }

    body#page-24 .contact-form-1 {
        padding-left: 0;
    }
}

/*****************************************************************************/
/*  >>> MAX WIDTH 800px <<< */
/*****************************************************************************/
@media (max-width: 50em) {
    .grid--cols3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*****************************************************************************/
/*  >>> MAX WIDTH 700px <<< */
/*****************************************************************************/
@media (max-width: 43.75em) {
    :root {
        --container-padding-x: 3rem;
    }
    html {
        scroll-padding-top: 4rem;
    }
    .header .header-menu > ul > li > a {
        font-size: 4rem;
    }

    .project-gallery {
        gap: 2rem;
        grid-template-columns: 1fr;
    }
    .suggestion-card {
        flex-flow: column nowrap;
        align-items: flex-start;
        position: relative;
    }
    .suggestion-card__image {
        width: 100%;
    }
    .suggestion-card__content {
        padding-left: var(--gap);
        padding-bottom: var(--gap);
        padding-right: 6rem;
    }
    .suggestion-card__button {
        padding-right: 0;
        position: absolute;
        right: var(--gap);
        bottom: var(--gap);
    }
}

/*****************************************************************************/
/*  >>> MAX WIDTH 600px <<< */
/*****************************************************************************/
@media (max-width: 37.5em) {
    .breadcrumb {
        padding: 1rem 1.75rem;
    }
    .breadcrumb > li {
        font-size: 2rem;
    }
    .button, .btn-wrap--1 > a {
        font-size: 2.7rem;
    }
    .button--xl,
    .button--xxl {
        font-size: 4.8rem;
    }
    .dynacontent ol ol {
        margin-top: 1.5rem;
        margin-left: -5rem;
    }
    .footer__linksWrap {
        grid-template-columns: 1fr;
    }
    .grid--cols3,
    .grid--cols4 {
        grid-template-columns: 1fr;
    }
    .hero-banner__content {
        padding-left: var(--container-padding-x);
        padding-right: var(--container-padding-x);
    }
    .hero-banner__media {
        aspect-ratio: 5/6;
    }
    .hero-banner__textFeat::before {
        width: calc(100% + 12rem);
        max-width: none;
    }
    .hero-banner__textFeat > span:last-child {
        font-size: 5.5rem;
    }
    
    .page-header__title,
    .hero-banner__title {
        font-size: 7rem;
    }
    .page-content__sidebar {

    }
    .page-header--2 .page-header__line {
        --height: 24rem;
    }
    .page-header--2 .page-header__media > div {
        margin-top: calc(-15vw - 10rem);
    }
    .section-cta__infos {
        flex-flow: column nowrap;
    }
    .section-cta__title > span:first-child {
        font-size: 4rem;
    }
    .section-cta__title > span:last-child {
        font-size: 6rem;
        padding: 2rem 3rem;
    }

    .team__member-info {
        text-align: center;
    }
    .team__member-socials {
        justify-content: center;
    }

    .text-lg { font-size: 2.6rem !important; }
}

/*****************************************************************************/
/*  >>> MAX WIDTH 500px <<< */
/*****************************************************************************/
@media (max-width: 31.25em) {
    :root {
        --container-padding-x: 2.25rem;
    }
    .contact-form-1 .contact-form-row {
        grid-template-columns: 1fr;
    }
    .dynacontent ol:not(ol ol) > li {
        padding: 3.5rem 2rem 2.5rem 7.5rem;
    }
    .dynacontent ol:not(ol ol) > li::before {
        font-size: 5rem;
        top: 2.9rem;
        left: 2.5rem;
    }
    .header .header-menu::after  {
        display: none;
    }
    .header .header-menu > ul {
        padding-left: 5rem;
    }
    .header .header-menu > ul > li > a {
        font-size: 3rem;
    }
    .header .header-menu > ul > li:has(.sub-menu) > ul > li > a {
        font-size: 2.5rem;
    }
    .hero-banner__content::after {
        right: -35%;
    }
    .suggestion-card {
        align-items: center;
    }
    .suggestion-card__content {
        padding-right: 0;
        padding-left: 0;
    }
    .suggestion-card__button {
        display: none;
    }
}

/*****************************************************************************/
/*  >>> MAX WIDTH 450px <<< */
/*****************************************************************************/
@media (max-width: 28.125em) {
    :root {
        --font-size-h1: 5.75rem;
        --font-size-h2: 4.75rem;
        --font-size-h3: 3.75rem;
    }

    .header .header-buttons .hb-feat {
        display: none;
    }
    .header .header-logo {
        max-width: 23rem;
    }
    .page-header__title {
        font-size: var(--font-size-h1);
    }
}


/*****************************************************************************/
/*  >>> PRÉFÉRENCES UTILISATEURS <<< */
/*****************************************************************************/
@media (prefers-reduced-motion: reduce) {
    .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
}