/* Base layout and header adjustments */
main {
    padding-top: var(--header-height);
}

header {
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
}

header + * {
    margin-top: 0 !important;
}

/* .hero, .new-detail__hero {
    margin-top: calc(-1 * var(--header-height));
    padding-top: var(--header-height);
} */

.first-container {
    padding-top: var(--header-height);
    margin-top: 0;
}

/* Utility classes */
.op-0 {
    opacity: 0;
}

.bkg-blue {
    background-color: var(--c-primary-400);
}

.bkg-light {
    background-color: var(--c-primary-000);
}

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

/* Animation classes */
.slide-up {
    animation: slide-up 1s ease 0s 1 normal both;
}

.slide-right {
    animation: slide-right 1s ease 0s 1 normal both;
}

.slide-left {
    animation: slide-left 1s ease 0s 1 normal both;
}

/* Animation delays */
.subtitle.slide-up, 
.subtitle.slide-right, 
.subtitle.slide-left, 
.subtitle.slide-down, 
.introduction p, 
p.slide-up, 
.introduction .button, 
.introduction .deco {
    animation-delay: .25s;
}

.from .button, 
.certificates__item, 
.introduction__info li:nth-child(3) {
    animation-delay: .5s;
}

/* Sequential animation delays */
.introduction__info li:nth-child(2)  { animation-delay: .05s; }
.introduction__info li:nth-child(3)  { animation-delay: .1s; }
.introduction__info li:nth-child(4)  { animation-delay: .15s; }
.introduction__info li:nth-child(5)  { animation-delay: .2s; }
.introduction__info li:nth-child(6)  { animation-delay: .25s; }
.introduction__info li:nth-child(7)  { animation-delay: .3s; }
.introduction__info li:nth-child(8)  { animation-delay: .35s; }
.introduction__info li:nth-child(9)  { animation-delay: .4s; }
.introduction__info li:nth-child(10) { animation-delay: .45s; }
.introduction__info li:nth-child(11) { animation-delay: .5s; }
.introduction__info li:nth-child(12) { animation-delay: .55s; }
.introduction__info li:nth-child(13) { animation-delay: .6s; }
.introduction__info li:nth-child(14) { animation-delay: .65s; }
.introduction__info li:nth-child(15) { animation-delay: .7s; }
.introduction__info li:nth-child(16) { animation-delay: .75s; }
.introduction__info li:nth-child(17) { animation-delay: .8s; }
.introduction__info li:nth-child(18) { animation-delay: .85s; }
.introduction__info li:nth-child(19) { animation-delay: .9s; }
.introduction__info li:nth-child(20) { animation-delay: .95s; }
.introduction__info li:nth-child(21) { animation-delay: 1s; }

/* Form elements */
input[type="email"], 
input[type="text"], 
input[type="number"],
input[type="password"], 
select, 
textarea {
    height: 2.5rem;
    padding: .25rem .5rem;
    border-radius: .25rem;
    color: var(--c-font-500);
    font-weight: 300;
    border: 1.5px solid var(--c-primary-200);
    background-color: var(--c-primary-000);
    width: 100%;
}

input:focus-visible, 
select:focus-visible, 
textarea:focus-visible {
    outline: var(--c-primary-400) auto 1px;
}

textarea {
    height: auto;
    min-height: 2.5rem;
    resize: vertical;
    padding: .5rem;
}

select[value=""] {
    color: var(--c-font-400);
}

option {
    color: var(--c-primary-400);
}

/* Placeholder styles */
input::placeholder {
    color: var(--c-font-400);
}

input:read-only {
    background-color: var(--c-primary-025);
}

input:read-only:focus-visible {
    outline: none;
}

/* Form layout */
.input__container {
    text-align: left;
    position: relative;
}

.input__label {
    font-size: .85rem;
    margin-bottom: .25rem;
    margin-left: .25rem;
    color: var(--c-primary-400);
}

.required .input__label::after {
    content: '*';
    margin-left: .25rem;
    color: var(--c-accent-400);
}

/* Typography */
.title, 
.subtitle {
    line-height: 1.2;
    color: var(--c-primary-500);
}

.contrast .title, 
.contrast .subtitle, 
.contrast .display {
    color: var(--white);
}

/* [Rest of your existing styles] */
p + .subtitle, p + .title{
    margin-top: 1.5rem;
}

.title + p{
    margin-top: .5rem;
}

.anchor{
    position: absolute;
    top: -135px;
}

.slider__title, .display{
    font-family: var(--ff-display);
    text-transform: uppercase;
    font-size: 5rem;
    line-height: 1;

    hyphens: none;
}

.display{
    font-size: 4rem;
    font-weight: 700;
    color: var(--c-primary-400);
}

.title{
    font-size: 2.25rem;
    font-weight: 700;
    
    max-width: min(1200px, 100%);
    color: var(--c-primary-400);

    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

.clients_subtitle{
    font-size: 1.25rem;
    font-weight: 700;
    
    max-width: min(1200px, 100%);
    color: #ffffff;
    background-color: var(--c-primary-400);

    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

.ta-center.title{
    margin: 0 auto;
}

.ta-center.clients_subtitle{
    margin: 0 auto;
}

.characteristics .title{
    margin: 0;
}

.subtitle{
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: .75rem;
}

.long-subtitle{
    font-weight: normal;
}

.title strong, .subtitle strong{
    font-weight: inherit;
}

.title + .subtitle{
    margin-top: .75rem;
}

.note{
    font-size: .8rem;
    line-height: 1.4;
}

.deco{
    display: block;
    width: 5rem;
    height: 4px;
    margin: 1rem 0 2rem;
    background: var(--c-primary-400);
}

.contrast .deco{
    background-color: white;
}

.deco.center{
    margin: 1rem auto 2rem;
}

.deco.center.no-margin-bottom{
    margin-bottom: 0;
}

[class$="--first"]{
    min-height: 50vh; 
    margin-top: 1rem;

    display: flex;
    align-items: center;
    justify-content: flex-start;
}

[class$="--dark"]{
    background-color: var(--c-primary-400);
}

.page-header{
    padding: 8rem 0;
    background-color: white;
    position: relative;
}

.page-header .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;

    flex-grow: 1;
}

/* .page-header .deco{
    margin-top: 2rem;
} */

.parallax{
    position: relative;

    background-image: var(--image-url, '');
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax::before{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .85;
    background-color: var(--c-bkg);
}

[class$="--dark"].parallax::before{
    background-color: var(--c-primary-400);
}

.parallax > *{
    position: relative;
    z-index: 1;
}


.container{
    padding: var(--section-padding-block) var(--section-padding-inline);
    margin: 0 auto;
    max-width: var(--max-width);
}

.no-padding-bottom{
    padding-bottom: 0;
}

.no-padding-top{
    padding-top: 0;
}

figcaption{
    font-size: .9rem;
    color: var(--c-primary-200);
    margin-top: .25rem;
}

.text-container{
    margin: 0 auto;
    max-width: calc( var(--max-width) / 1.5 );
}

.text-container figure + p{
    margin-top: 2rem;
}

.text-container p + p{
    margin-top: 1rem;
}

.text-container ul, .text-container ol{
    padding: 1rem 0 1rem 2rem;
}

.text-container ul li{
    list-style: circle;
}

.text-container ol li{
    list-style: decimal;
}

.text-container li + li{
    margin-top: .5rem;
}

.text-container ul a, .text-container ol a{
    display: inline;
}

.first-container{
    margin-top: 5.5rem;
}

.button.contrast{
    --button-c  : white;
    --button-bkg: var(--c-primary-400);
}

.button{
    /* font-size: .9rem; */
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--button-c, var(--c-primary-400));

    display: inline-block;
    position: relative;
    padding: .65em 1.75em .55em 1.75em;
    
    border: 1.5px solid var(--button-c, var(--c-primary-400));
    border-radius: .25em;

    cursor: pointer;
    overflow: hidden;
    -ms-flex-negative: 0;
        flex-shrink: 0;

    -webkit-transition: color 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;

    transition: color 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;

    -o-transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

    transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

    transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
}

.button.big{
    font-size: 1rem;
    padding: .75em 2em;
}

.contrast .button{
    --button-c: white;
    --button-bkg: var(--c-primary-400);
    font-weight: 400;
}

.button::before{
    content: '';
    display: block;
    position: absolute;
    inset: -2px;
    
    -webkit-transform-origin: right;
    
        -ms-transform-origin: right;
    
            transform-origin: right;
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: -webkit-transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;

    z-index: -1;
    
    background-color: var(--button-c, var(--c-primary-400));
}

.button:hover::before, .button.solid::before{
    -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: left;
        -ms-transform-origin: left;
            transform-origin: left;
}

.button:hover, .button.solid{
    color: var(--button-bkg, var(--white));
    -webkit-box-shadow: inset 0 0 0 1px var(--button-c, var(--c-primary-400));
            box-shadow: inset 0 0 0 1px var(--button-c, var(--c-primary-400));
}

.button.solid:hover::before{
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: right;
        -ms-transform-origin: right;
            transform-origin: right;
}

.button.solid:hover{
    color: var(--button-c, var(--c-primary-400));
    -webkit-box-shadow: none;
            box-shadow: none;
}

.button.icon{
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
}

.button-container{
    display: flex;
    flex-wrap: wrap;

    gap: .5rem 1rem;
    position: relative;
    z-index: 1;

    margin-top: 3rem;
}

.button-container.center{
    justify-content: center;
}

.tabs{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1rem;

    max-width: var(--max-width);
    width: 100%;
    margin: 3rem auto 0;
}

.tabs__button{
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    width: 100%;
    height: 100%;
    padding: .5rem;
    border-radius: .25rem;
    color: var(--c-primary-400);
    border: 1.5px solid currentColor;

    cursor: pointer;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);

    -webkit-transition: -webkit-box-shadow .3s ease, -webkit-transform .3s ease;

    transition: -webkit-box-shadow .3s ease, -webkit-transform .3s ease;

    -o-transition: box-shadow .3s ease, transform .3s ease;

    transition: box-shadow .3s ease, transform .3s ease;

    transition: box-shadow .3s ease, transform .3s ease, -webkit-box-shadow .3s ease, -webkit-transform .3s ease;
}

.contrast .tabs__button, .contrast.tabs__button{
    color: white;
}

.tabs__button:hover{
    -webkit-box-shadow: 0 5px 0 0 currentColor;
            box-shadow: 0 5px 0 0 currentColor;
    -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
            transform: translateY(-5px);
}

header{
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
}

.contact{
    width: 100%;
    color: white;
    font-weight: 400;
    background-color: var(--c-primary-400);

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    position: relative;
    z-index: 2;

    padding: .25rem 1.5rem .2rem;
}

.contact__number {
    -webkit-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

.contact__ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.contact__a{
    color: var(--c-primary-400);
    background-color: white;

    width: 1.25rem;
    height: 1.25rem;
    margin: .2rem;
    border-radius: .25rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    -webkit-transition: opacity .3s ease;

    -o-transition: opacity .3s ease;

    transition: opacity .3s ease;
}

.contact__a:hover, .contact__number:hover{
    opacity: .75;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: .5rem 1.5rem;
    box-shadow: 0 0 20px 0 #144a4c4b;
    background-color: white;
    position: relative;
    z-index: 1;
}

.nav__ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 2rem;
    flex-basis: auto;
    flex-grow: 0;
    /* gap: 1rem; */
}

.nav__button {
    margin-left: auto;
}

.nav h1{
    flex-shrink: 0;
}

.nav__logo{
    max-width: 115px;
    -webkit-transition: max-width .3s ease;
    -o-transition: max-width .3s ease;
    transition: max-width .3s ease;
}

.small .nav__logo{
    max-width: 150px;
}

.nav__ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;  /* Changed from end to start */
    -ms-flex-pack: start;     /* Changed from end to start */
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin-left: 2rem;        /* Added margin to move menu left */
    -ms-flex-preferred-size: auto;  /* Changed from 100% to auto */
    flex-basis: auto;         /* Changed from 100% to auto */
    -webkit-box-flex: 0;      /* Changed from 1 to 0 */
    -ms-flex-positive: 0;     /* Changed from 1 to 0 */
    flex-grow: 0;            /* Changed from 1 to 0 */
}

.nav__move{
    -webkit-transform: translateX(14.25rem);
        -ms-transform: translateX(14.25rem);
            transform: translateX(14.25rem);
    -webkit-transition: -webkit-transform .3s ease-out .2s;
    transition: -webkit-transform .3s ease-out .2s;
    -o-transition: transform .3s ease-out .2s;
    transition: transform .3s ease-out .2s;
    transition: transform .3s ease-out .2s, -webkit-transform .3s ease-out .2s;
}

.move{
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    -o-transition: transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
}

.nav__li{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    position: relative;
}

.nav__li--close, .nav__li--cta{
    display: none;
}

.nav__a{
    position: relative;
    padding: .5rem;
    margin: 0 0 0 1rem;
    text-align: center;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav__a svg{}

.nav__a--icon{
    color: var(--c-primary-400);
    border-radius: .25rem;
    
    height: 100%;
    aspect-ratio: 1 / 1;

    display: flex;
    justify-content: center;
    align-items: center;
}

.nav__a svg{
    width: 1.5rem;
}

.nav__a:hover{
    color: var(--c-primary-400);
}

a.nav__a::before{
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: var(--c-primary-100);
    
    -webkit-transform: scaleX(0);
    
        -ms-transform: scaleX(0);
    
            transform: scaleX(0);
    -webkit-transition: -webkit-transform .5s ease;
    transition: -webkit-transform .5s ease;
    -o-transition: transform .5s ease;
    transition: transform .5s ease;
    transition: transform .5s ease, -webkit-transform .5s ease;
}

a.nav__a:hover::before{
    -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
            transform: scaleX(1);
}

span.nav__a .chevron{
    display: none;
    width: .75em;
    height: .75em;
    margin-left: .5em;
}

.nav__button{
    margin-left: .5rem;
}

#nav__cta{
    -webkit-transform: translateY(-150%);
        -ms-transform: translateY(-150%);
            transform: translateY(-150%);
    -webkit-transition: color 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out, -webkit-transform .3s ease-out;
    transition: color 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out, -webkit-transform .3s ease-out;
    -o-transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform .3s ease-out;
    transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform .3s ease-out;
    transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform .3s ease-out, -webkit-box-shadow 0.3s ease-in-out, -webkit-transform .3s ease-out;
    /* margin-left: 1rem; */
}

#nav__cta.show{
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition: color 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out, -webkit-transform .3s ease-out .2s;
    transition: color 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out, -webkit-transform .3s ease-out .2s;
    -o-transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform .3s ease-out .2s;
    transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform .3s ease-out .2s;
    transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform .3s ease-out .2s, -webkit-box-shadow 0.3s ease-in-out, -webkit-transform .3s ease-out .2s;
}

.nav__burger{
    display: none;

    margin-left: auto;
    color: var(--c-primary-400);
    cursor: pointer;
    padding: .7rem;
    border-radius: .25rem;
}

.nav__ul + .nav__button{
    display: none;
}

.nav__burger:hover{
    background-color: var(--c-primary-100);
}

.nav__burger svg{
    width: 1.5rem;
    height: 1.5rem;
}

.nav__sec-ul{
    position: absolute;
    top: 100%;
    left: calc(50% - 150px);
    background-color: white;
    padding: 1rem;

    border-radius: .25rem;
    width: 100vw;
    max-width: 250px;

    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease;
}

.nav__li:hover .nav__sec-ul{
    opacity: 1;
    pointer-events: auto;
}

.nav__sec-li .nav__a{
    margin: 0;
}

header + *{
    margin-top: 88px;
}

.two-side{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 8%;
}

.hero{
    position: relative;
    z-index: 0;
    min-height: calc(100vh - var(--header-height) - 3rem);
}

.slider{
    position: relative;

    width: 100%;
    height: 100%;
    overflow: hidden;

    background-color: var(--c-primary-400);
}

.slider::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #031d23cf;
    z-index: 1;
}

.slider__ul{
    position: absolute;
    left: -100%;

    width: var(--slider-width, 500%);
    height: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[var(--slider-count, 5)];
    grid-template-columns: repeat(var(--slider-count, 5), 1fr);
    -ms-grid-rows: 100%;
    grid-template-rows: 100%;

}

.slider__ul.shifting {
    -webkit-transition: left 1.5s ease-in-out;
    -o-transition: left 1.5s ease-in-out;
    transition: left 1.5s ease-in-out;
}

.slider__li{
    width: 100%;
    overflow: hidden;
}

.slider__img{
    position: relative;
    height: 100%;
}

.arrows{
    position: absolute;
    inset: 0;
    pointer-events: none;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slider__arrow, .arrows__arrow{
    opacity: 0;
    color: white;
    background-color: rgba(255, 255, 255, 0.15);
    
    width: 2rem;
    height: 8rem;
    cursor: pointer;
    pointer-events: auto;

    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.arrows__arrow.dark{
    opacity: .75;
    color: var(--c-primary-400);
    background-color: var(--c-primary-100);
}

.arrows__arrow:disabled{
    opacity: 0!important;
    pointer-events: none;
}

.slider__arrow{
    position: absolute;

    top: calc( 50% - 4rem );
    z-index: 2;
}

.slider:hover .slider__arrow, .arrows__wrapper:hover .arrows__arrow{
    opacity: 1;
}

.slider__arrow:hover, .arrows__wrapper:hover .arrows__arrow:hover{
    width: 3rem;
}

.slider__arrow.left, .arrows__arrow.prev{
    border-radius: 0 .25rem .25rem 0;
}

.slider__arrow.left{
    left: 0;
}

.slider__arrow.left:hover, .arrows__wrapper:hover .arrows__arrow.prev:hover{
    padding-left: 1.5rem;
}

.slider__arrow.right, .arrows__arrow.next{
    border-radius: .25rem 0 0 .25rem;
}

.slider__arrow.right{
    right: 0;
}

.slider__arrow.right:hover, .arrows__wrapper:hover .arrows__arrow.next:hover{
    padding-right: 1.5rem;
}

.arrows__arrow:not(.dark) svg{
    opacity: 0;
    transition: opacity .3s ease;
}

.arrows__wrapper:hover .arrows__arrow svg{
    opacity: 1;
}

.slider__title, .slider__subtitle, .slider__text{
    max-width: 1000px;
}

.contrast .slider__title, .contrast .slider__subtitle, .contrast .slider__text{
    color: white;
}

.slider__title{
    color: var(--c-primary-400);
}


.slider__subtitle{
    font-family: var(--ff-display);
    margin-top: .75rem;
    font-size: 2rem;
    line-height: 1.1;
    color: var(--c-primary-150);
}

.slider__text{
    font-weight: 300;
    font-size: 1.25rem;
    margin-top: 1rem;
}

.hero__continue{
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;

    color: white;
    pointer-events: none;
}

.hero__button{
    font-size: .8rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    
    display: -webkit-box;
    
    display: -ms-flexbox;
    
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;

    cursor: pointer;
    pointer-events: auto;
}

.hero__deco{
    display: inline-block;
    width: 1px;
    height: 3rem;
    margin-top: .5rem;

    background-color: white;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.hero__button:hover .hero__deco{
    height: 3.5rem;
}

.from{
    text-align: center;
}

.from__button{
    display: inline-block;
    margin-top: 2rem;
}

.counter, .knowledge{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr 1rem 1fr;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;

    padding-top: 2rem;
    padding-bottom: 2rem;
}

.counter__column, .knowledge__column{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    padding: 1.5rem;
    border-radius: .5rem;
    background-color: white;
    -webkit-box-shadow: 0 0 20px 0 #144a4c17;
            box-shadow: 0 0 20px 0 #144a4c17;
}

.counter__svg, .knowledge__svg{
    width: auto;
    height: 4rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;

    color: var(--c-primary-400);
    margin-right: 1.5rem;
}

.counter__number{
    display: block;
    font-size: 2.5rem;
    font-family: var(--ff-title);
    color: var(--c-primary-400);
    line-height: 1;
}

.counter__text{
    line-height: 1;
}

.introduction{
    position: relative;
}

.introduction .container{
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.introduction__info{
    font-size: 1.1rem;
    max-width: 46%;
    width: 100%;
    padding: calc(var(--section-padding-block) / 2) 0;
}

.reverse .introduction__info{
    margin-left: auto;
}

.introduction__info blockquote{
    border-left: 5px solid var(--c-primary-100);
    padding-left: 1rem;
    font-style: italic;
}

.introduction__info ol{
    counter-reset: li;
    padding-inline-start: 1.5em;
}

.introduction__info ol li{
    counter-increment: li;
}

.introduction__info ol li::before {
    content: "."counter(li); 

    font-weight: 600;
    color: var(--c-primary-150);
    display: inline-block;
    width: 1em;
    margin-left: -1.5em;
    margin-right: 0.5em; 
    
    text-align: right; 
    direction: rtl;
}

.introduction__info ul li::before{
    content: '';
    display: inline-block;
    vertical-align: text-bottom;
    width: 1.5em;
    height: 1.5em;
    margin-right: 1em;
    background: url(../images/arrow-right-solid.png) no-repeat;
    background-size: contain;
}

.introduction__info li + li{
    margin-top: .5rem;
}

.introduction__wrapper{
    position: absolute;
    inset: calc(var(--section-padding-block) / 2) var(--big-section-margin) calc(var(--section-padding-block) / 2) 54%;
    
    overflow: hidden;
}

.introduction__wrapper.shadow{
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.075);
    border-radius: 1.5rem;
}

.reverse .introduction__wrapper{
    inset: calc(var(--section-padding-block) / 2) 54% calc(var(--section-padding-block) / 2) var(--big-section-margin);
}

.introduction__slider{
    width: calc(var(--slide-count, 1) * 100%);
    height: 100%;

    display: grid;
    grid-template-columns: repeat(var(--slide-count, 1), 1fr);
    transition: transform .75s ease;
}

.introduction__slide img{
    object-position: center left;
}

.introduction__arrows{
    position: absolute;
    inset: 0;
    z-index: 1;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.see-more-button{
    display: inline-block;
    color: rgba(255, 255, 255, 0.75);
    font-size: .9rem;

    cursor: pointer;
}

.see-more-button svg{
    width: .75em;
    height: .75em;
    display: inline-block;

    transition: all .3s ease;
}

.open .see-more-button svg{
    transform: rotate(90deg);
}

.see-more-button:hover{
    color: white;
}

.benefits__wrapper{
    --benefits-br: 1rem;

    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    flex-wrap: wrap;
    gap: 1rem;
}    

.benefits__list{
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;

    flex-grow: 1;
    min-width: min(450px, 100%);
}

.benefits__item{
    font-weight: 500;

    padding: .35rem;
    border-radius: var(--benefits-br);
    color: var(--c-primary-400);
    background-color: var(--c-primary-050);
    
    display: flex;
    justify-content: flex-start;
    align-items: center;

    cursor: pointer;
    transition: color .5s ease, background-color .5s ease;
    /* margin-right: 1rem; */
} 

.benefits__item:hover{
    background-color: var(--c-primary-100);
}

.benefits__item.active{
    color: white;
    background-color: var(--c-primary-550);
}

.benefits__icon{
    --benefits-icon-size: 2.75rem;

    position: relative;
    z-index: 2;

    width: var(--benefits-icon-size);
    height: var(--benefits-icon-size);
    padding: .65rem;
    margin-right: 1rem;
    background-color: white;
    border-radius: calc(var(--benefits-br) - .25rem);

    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--c-primary-400);
    flex-shrink: 0;

    pointer-events: none;
} 

.active .benefits__icon{
    color: var(--c-primary-550);
    transition: color .5s ease;
}

.benefits__inactive-title{
    pointer-events: none;
}

.benefits__arrow{
    --benefits-arrow-size: 1rem;

    width: var(--benefits-arrow-size);
    height: var(--benefits-arrow-size);
    margin-left: auto;
    margin-right: 1rem;

    pointer-events: none;
    opacity: 0;
    transform: translateX(-1rem);

    transition: opacity .5s ease, transform .1s ease .5s;
}

.active .benefits__arrow, .benefits__item:hover .benefits__arrow{
    opacity: 1;
    transform: translateX(0);
    transition: opacity .5s ease .4s, transform .5s ease .4s;
}

.benefits__item:hover .benefits__arrow{
    transition: opacity .5s ease, transform .5s ease;
}

.benefits__active-list{
    position: relative;

    width: 50%;
    flex-grow: 4;
    min-width: min(775px, 100%);
    min-height: 55vh;

    border-radius: var(--benefits-br);
    background-color: #09414d;
}

.benefits__active-item{
    opacity: 0;
    padding: 2.5rem;
    border-radius: var(--benefits-br);
    overflow: hidden;

    transition: opacity 1.5s ease;
}

.benefits__active-item::before{
    content: '';
    position: absolute;
    inset: 0;

    z-index: 1;
    background-color: #09414d;
    background: linear-gradient(160deg, #09414de1 50%, #09414d63 100%);
    border-radius: var(--benefits-br);

    /* transition: opacity .5s ease; */
}

.benefits__active-item.active{
    opacity: 1;
}

/* .benefits__active-item.active::before{
    opacity: 1;
} */

.benefits__active-item:not(.bigger){
    position: absolute;
    inset: 0;
}

.benefits__img-container{
    position: absolute;
    inset: 0;
    border-radius: var(--benefits-br);
    z-index: 0;

    overflow: hidden;
}

.benefits__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* min-width: 78vw; */
    opacity: 0;
    transition: opacity 1.5s ease;
}

.active .benefits__img{
    opacity: 1;
}

.benefits__info{
    position: relative;
    z-index: 2;
    color: white;
    opacity: 0;

    transition: opacity .5s ease;
}

.active .benefits__info{
    opacity: 1;
}

.benefits__text, .benefits__text p{
    font-size: 1.2rem;
}

.benefits__text li{
    list-style: disc;
    margin-left: 1.5rem;
}

.benefits__accordion{
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;

    transition: grid-template-rows .5s ease;
}

.open .benefits__accordion{
    grid-template-rows: 1fr;
}

.benefits__accordion span{
    padding-left: 5%;
    display: inline-block;
    padding-top: .5rem;
    min-height: 0;
}

.benefits__text + .benefits__text{
    margin-top: .5rem;
}

.benefits__text.open + .benefits__text{
    margin-top: 1rem;
}

.benefits__title, .benefits__subtitle, .benefits__text{
    padding-right: 2rem;
}

.benefits__active-item.active .benefits__info > *{
    animation: slide-right 1.5s ease 0s 1 normal both;
}

.benefits__active-item.active .subtitle, .benefits__active-item.active .deco{
    animation-delay: .2s;
}

.benefits__active-item.active .benefits__text{
    animation-delay: .4s;
}

.benefits__active-item.active .benefits__text:nth-of-type(2){
    animation-delay: .6s;
}

.benefits__active-item.active .benefits__text:nth-of-type(3){
    animation-delay: .8s;
}

.benefits__active-item.active .benefits__text:nth-of-type(4){
    animation-delay: 1s;
}

.pilars{
    background-color: var(--c-primary-600);
    background-color: white;
    overflow:auto;
}

.pilars__wrapper, .hero__wrapper{
    position: relative;
    min-height: 80vh;
    margin: var(--big-section-margin);
    border-radius: 1.75rem;
    overflow: hidden;
    
    display: flex;
    flex-direction: column;
    background-color: var(--c-primary-600);
}

.hero__wrapper{
    min-height: calc( 100vh - var(--header-height) - var(--big-section-margin) * 2);
}

.pilars__wrapper{
    margin: var(--big-section-margin);
}

.pilars__wrapper::before, .hero__wrapper::before{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #05242b;
    background: linear-gradient(160deg, #05242b 0%, rgba(0,0,0,0) 60%);
}

.hero__wrapper::before{
    background: linear-gradient(160deg, #05242b 0%, #05242b9a 60%);
}

.pilars__img{
    position: absolute;
    inset: 0;
    object-fit: cover;
    object-position: center;

    opacity: 0;
    pointer-events: none;

    transition: all 1s ease;
}

.pilars__img.active{
    opacity: 1;
}

.pilars__header{
    position: relative;
    z-index: 3;
    padding: 3rem;
    max-width: min(1200px, 100%);
    
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.hero .pilars__header{
    max-width: 100%;
}

.hero .subtitle{
    max-width: min(1200px, 100%);
}

.pilars__info{
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: white;
    z-index: 2;
    max-width: min(1000px, 100%);
    padding: 3rem;
    border-radius: 1.75rem 0 0 0;
}

.pilars__info p{
    color: var(--c-font-400);
}

.pilars__arrows{
    display: flex;
    margin-top: auto;
}

.hero .pilars__arrows{
    margin-left:auto;
}

.pilars__arrow{
    width: 3rem;
    padding: .5rem;
    border-radius: .25rem;
    color: white;

    cursor: pointer;
    transition: all .3s ease;
}

.pilars__arrow:hover{
    background-color: rgba(255, 255, 255, 0.185);
}

.pilars__arrow.prev:hover{
    transform: translateX(-.5rem);
}

.pilars__arrow.next:hover{
    transform: translateX(.5rem);
}

.pilars__arrow:disabled{
    opacity: .25;
    pointer-events: none;
}

.pilars__number{
    margin: 0 1.5rem;
    width: 51px;
    text-align: center;
}

.pilars__info .title, .pilars__info .subtitle{
    color: var(--c-primary-400);
}

.pilars__info .subtitle strong{
    font-weight: 600;
}

.pilars__text{
    opacity: 0;
    pointer-events: none;
}

.pilars__text.active{
    opacity: 1;
    pointer-events: auto;
}

.pilars__text.active .title, .pilars__header .display{
    animation: slide-right .75s ease 0s 1 normal both;
}

.pilars__text.active .subtitle, .pilars__header .title{
    animation: slide-right .75s ease .15s 1 normal both;
}

.pilars__text.active p, .pilars__header .deco{
    animation: slide-right .75s ease .30s 1 normal both;
}

.pilars__header .subtitle{
    animation: slide-right .75s ease .45s 1 normal both;
}

.hero .button{
    animation: slide-right .75s ease .60s 1 normal both;
}

.pilars__text:not(.first){
    position: absolute;
    inset: 3rem;
}

.knowledge__wrapper{
    background-color: var(--c-primary-015);
}

.knowledge{
    padding-top: 1rem;
    padding-bottom: 1rem;
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
}

.knowledge__column{
    padding: 0;
    border: 2px solid var(--c-primary-050);
    position: relative;
    height: 100%;
}

.knowledge__svg{
    width: 6rem;
    height: auto;
    margin-right: .5rem;
    color: white;
    background-color: var(--c-primary-400);
    padding: 0 1.5rem;
    border-radius: .5rem 0 0 .5rem;
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;

    -webkit-transition: all .3s ease;

    -o-transition: all .3s ease;

    transition: all .3s ease;
}

.knowledge__info{
    padding:1rem 2rem 1rem 1rem;
}

.knowledge__title{
    display: block;
    color: var(--c-primary-400);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: .25rem;
}

.knowledge__more{
    color: var(--c-primary-200);
    margin-top: .75rem;
    display: inline-block;
}

.knowledge__chevron{
    color: var(--c-primary-400);
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    opacity: 0;
    z-index: 1;
    right: 1.5rem;
    top: calc(50% - 0.75rem);

    -webkit-transition: all .3s ease;

    -o-transition: all .3s ease;

    transition: all .3s ease;
}

.knowledge__column:hover .knowledge__chevron{
    opacity: 1;
    right: 1rem;
}

.knowledge__column:hover .knowledge__svg{
    width: 4rem;
    padding: 1.5rem .75rem;
}

.clients{
    position: relative;
    width: 100%;
    padding: 2rem 1rem 1rem;
}

.clients__wrapper{
    max-width: var(--max-width);
    margin: 0 auto;
    overflow: hidden;
}

.clients__slider{
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    width: 200%;

    transition: transform 1s ease;
}

.clients__slide{
    width: 100%;
}

.clients__a{
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}

.clients__slide img{
    /* height: 200px; */
    padding: .5rem 1rem;
    -o-object-fit: contain;
       object-fit: contain;
    object-position: center center;
    
    transform-origin: center center;
    transition: transform .5s ease;
}

.clients__slide:hover img{
    transform: scale(1.1);
}

.form{
    position: relative;

    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

#login-form{
    grid-template-columns: 1fr;
}

#demo-form .button{
    margin-top: 2rem;
}

.demo-form__full-width{
    grid-column: 1/-1; 
    text-align: left;

    font-size: .8rem;
    color: var(--c-primary-400);
}

.form .button{
    grid-column: 2;
}

.g-recaptcha{
    position: absolute;
    bottom: 0;
    z-index: 1;
}

footer{
    font-size: .9rem;
    color: var(--c-font-100);
    background-color: var(--c-primary-600);
}

.footer__columns{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 5% 1fr 5% 1fr 5% 1fr;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem 5%;
}

.footer__title{
    font-size: 1.25rem;
    font-weight: 700;
    border-bottom: 1.5px solid var(--c-primary-500);
    padding-bottom: .5rem;
}

.footer__ul{
    margin-top: 1rem;
}

.footer__li + .footer__li{
    margin-top: .5rem;
}

.footer__logo img{
    max-width: 225px;
    -webkit-filter: brightness(0) invert(1);
            filter: brightness(0) invert(1);
    opacity: .75;
}

.footer__link{
    display: inline;
}

.footer__a:hover, .footer__link:hover{
    color: white;
}

.footer__form{
    position: relative;
    z-index: 1;

    margin-top: 3rem;
}

.footer__form-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.footer__form input{
    color: white;
    border: 1.5px solid var(--c-font-100);
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-right: .5rem;
    background-color: transparent;
}

.footer__form input::-webkit-input-placeholder{
    color: var(--c-font-100);
}

.footer__form input::-moz-placeholder{
    color: var(--c-font-100);
}

.footer__form input:-ms-input-placeholder{
    color: var(--c-font-100);
}

.footer__form input::-ms-input-placeholder{
    color: var(--c-font-100);
}

.footer__form input::placeholder{
    color: var(--c-font-100);
}

.footer__form .button{
    --button-c: var(--c-font-100);
    --button-bkg: var(--c-primary-600);
}

footer .contact__ul{
    margin-top: 2rem;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}

footer .contact__a{
    opacity: .5;
}

.ens-certification{
    margin-top: 1.5rem;
    text-align: left;
}

.ens-certification__title{
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--c-font-100);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ens-certification__image{
    max-width: 120px;
    height: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.ens-certification__image:hover{
    opacity: 1;
}

/* Hero ENS Certification Styles */
.hero__ens-certification{
    position: absolute;
    bottom: 5%;
    z-index: 10;
}

.hero__ens-badge{
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    backdrop-filter: blur(10px);
    max-width: 460px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero__ens-badge:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.hero__ens-image{
    width: 107px;
    height: auto;
    flex-shrink: 0;
}

.hero__ens-text{
    color: white;
}

.hero__ens-title{
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: white;
    letter-spacing: 0.3px;
}

.hero__ens-subtitle{
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.9;
    color: white;
    line-height: 1.3;
    word-break: keep-all;
    hyphens: none;
    overflow-wrap: normal;
}

/* Responsive adjustments for hero ENS */
@media screen and (max-width: 768px) {
    .hero__ens-certification{
        bottom: 3%;
        position: static;
        margin-top: 1.5rem;
    }
    
    .hero__ens-badge{
        max-width: 100%;
        padding: 0.875rem 1rem;
        gap: 0.75rem;
    }
    
    .hero__ens-image{
        width: 84px;
    }
    
    .hero__ens-title{
        font-size: 0.9rem;
    }
    
    .hero__ens-subtitle{
        font-size: 0.8rem;
    }
}

.copy{
    text-align: center;
    padding-bottom: 1rem;
}

.copy__ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-top: .5rem;
}

.copy__li{
    margin: 0 .5rem;
}

.copy__button{
    display: inline;
    font-weight: 300;
    text-align: center;

    margin: .75rem 0 .25rem;
    cursor: pointer;
}

.copy__a:hover, .copy__button:hover{
    color: white;
}

.checkbox__label{
    flex-grow: 1;
    margin-top: 1rem;
    line-height: 1.5;
    cursor: pointer;
    position: relative;
}

.checkbox{
    opacity: 0;
    pointer-events: none;
    position: absolute;
    height: 1rem;
    /* margin-left: .4rem; */
    width: 1rem;
    margin-top: 0.3rem;
}

.checkbox__styled{
    display: inline-block;

    width: 1rem;
    height: 1rem;
    margin-right: .25rem;

    border: 1.5px solid var(--c-primary-400);
    border-radius: .25rem;
    margin-bottom: -.2em;
}

.checkbox:checked + .checkbox__styled{
    box-shadow: inset 0 0 0 .2rem white,  inset 0 0 0 1rem var(--c-primary-400);
}

.checkbox__text{
    font-size: 1rem;
    color: var(--c-font-400);
}

.error{
    min-height: 80vh;
    background-color: var(--c-primary-025);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.error__svg, .demo-success__svg{
    --svg-size: 4rem;

    width: var(--svg-size);
    height: var(--svg-size);

    margin: 0 auto 2rem;
    color: var(--c-primary-150);
}

.demo-success__svg{
    --svg-size: 6rem;
}

.error .subtitle{
    margin-top: 0;
}

.error span{
    max-width: 500px;
    margin: 0 auto;
}

.success{
    min-height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.errorlist{
    text-align: left;
}

.success > .errorlist{
    border-bottom: 1.5px solid var(--c-font-100);
}

.cookie-banner__container.inactive{
    display: none;
}

.cookie-banner{
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;

    position: fixed;
    bottom: 0;
    right: 0;

    width: 100%;
    max-width: 770px;
    max-height: 100vh;
    overflow-y: auto;

    background-color: white;
    border-radius: .25rem 0 0 0;
    border-top: 1px solid var(--c-primary-400);
    border-left: 1px solid var(--c-primary-400);
    box-shadow: 0 0 20px 0 #144a4c4b;
    z-index: 100;

    transition: transform .75s ease, opacity .75s ease;
}

.cookie-banner.active{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cookie-banner__text-container{
    padding: 2rem;
}

.cookie-banner p + p{
    margin-top: .5rem;
}

.cookie-banner__buttons{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
}

.cookie-banner__button{
    flex-grow: 1;
    flex-shrink: 0;
    padding: 1rem;

    color: var(--c-primary-400);
    border-top: 1px solid var(--c-primary-100);
    border-bottom: 1px solid var(--c-primary-100);
    background-color: white;
    
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5px;

    overflow: hidden;

    cursor: pointer;
    transition: all .3s ease;
}

.cookie-banner__button:hover{
    background-color: var(--c-primary-050);
}

.configure #config{
    background-color: var(--c-primary-050);
}

.cookie-banner__button.solid{
    color: white;
    background-color: var(--c-primary-400);
    border-top: 1px solid var(--c-primary-400);
    border-bottom: 1px solid var(--c-primary-400);
}

.cookie-banner__button.solid:hover{
    background-color: var(--c-primary-500);
}


.cookie-banner__accordion{
    overflow: hidden;
    display: grid;
    grid-template-rows: 0fr;

    transition: grid-template-rows .5s ease;
}

.configure .cookie-banner__accordion{
    grid-template-rows: 1fr;
}

.cookie-banner__accordion-body{
    min-height: 0;
}

.cookie-banner__configs{
    overflow: auto;
}

.cookie-banner__config p{
    padding: 1rem 2rem;
}

.cookie-banner__config + .cookie-banner__config{
    border-top: 1px solid var(--c-primary-100);
}

.cookie-banner input{
    display: none;
}

.cookie-banner__label{
    display: flex;
    justify-content: flex-start;
    align-items: stretch;

    cursor: pointer;
}

.cookie-banner__label:hover{
    background-color: var(--c-primary-000);
}

.cookie-banner__checkbox{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 4rem;
    height: auto;
    flex-shrink: 0;

    color: var(--c-primary-150);
    background-color: var(--c-primary-000);
    border-right: 1px solid var(--c-primary-100);
}

.cookie-banner__label:hover .cookie-banner__checkbox{
    color: var(--c-primary-150);
    background-color: var(--c-primary-025);
}

.cookie-banner__label input:checked + .cookie-banner__checkbox{
    color: var(--c-primary-400);
    background-color: var(--c-primary-050);
}

.cookie-banner__checkbox svg{
    width: 1.25rem;
}

.cookie-banner__label .checked, .cookie-banner__label input:checked + .cookie-banner__checkbox .unchecked{
    display: none;
}

.cookie-banner__label input:checked + .cookie-banner__checkbox .checked{
    display: block;
}

.cookie-banner__checkbox-text{
    padding: 1rem 2rem;
}

.certificates__list{
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 1.5rem;

    margin-top: 3rem;
}

.certificates__item{
    transition: transform .3s ease;
}

.certificates__item:hover{
    transform: translateY(-.5rem);
}

.certificates__img{
    height: 200px;
    border-radius: .75rem;
}

.steps__ul{
    display: grid;
    grid-template-columns: repeat(3, 1fr);   
    grid-template-rows: 1fr; 
    justify-items: stretch;
    gap: 1rem;
}

.steps__li{
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.steps__line{
    height: .5rem;
    width: calc(100% + .5rem);
    background-color: var(--c-primary-100);
    z-index: 0;

    position: absolute;
    top: 4rem;
    right: calc(-50% - .5rem);
}

.steps__number{
    flex-shrink: 0;
    position: relative;

    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;

    font-size: 2.5rem;
    font-weight: 800;
    line-height: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    color: white;
    background-color: var(--c-primary-400);

    transform: translateY( 2rem);
}

.steps__item{
    width: 100%;
    height: 100%;
    border-radius: .25rem;

    padding: 3.5rem 1rem 1rem;
}

.steps__item .subtitle{
    border-bottom: 1.5px solid var(--c-primary-100);
    padding-bottom: .5rem;
}

.steps__item li{
    border: 1.5px solid var(--c-primary-100);
    border-radius: .25rem;

    padding: .35em 1em;
    text-align: left;
    background-color: white;
}

.steps__item li + li{
    margin-top: .5rem;
}

.steps__item a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--c-primary-400);
    text-decoration: underline;
}

.steps__item svg{
    width: 1rem;
    height: 1rem;
    margin-right: .5rem;
    color: var(--c-primary-400);
}

.module-benefits__list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
    gap: 2rem;
    padding: 2rem;

    border-radius: var(--br-big);

    background-color: var(--c-primary-025);
}

.module-benefits__item{
    font-size: 1.1rem;
    
    padding: 2rem;
    border-radius: var(--br-med);
    background-color: white;

    display: flex;
    flex-direction: column;
}

.module-benefits__text p{
    text-align: justify;
}

.module-benefits__text p span{
    font-size: 1.1rem!important;
}

.module-benefits__item-header{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1.75rem;
}

.module-benefits__item-icon{
    color: white;
    /* margin: 0 auto 1rem; */
}

.module-benefits__item-icon svg{
    width: 5rem;
    height: 5rem;
    padding: .75rem;
    border-radius: var(--br-small);
    background-color: var(--c-primary-400);
}

.module-benefits__item-title{
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.3;
    /* text-align: center; */

    color: var(--c-primary-400);
    margin-left: 1.5rem;
}

.module-benefits__item-list{
    padding-top: 1.75rem;
    margin-top: auto;

    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
}

.module-benefits__accordion{
    display: flex;
    flex-wrap: wrap;
}

.module-benefits__accordion-header{
    text-align: left;
    padding: .5rem 1rem .5rem 1.5rem;
    
    color: var(--c-primary-400);
    border-radius: var(--br-med);
    background-color: var(--c-primary-025);
    margin: 0 -.5rem;

    display: flex;
    justify-content: space-between;
    align-items: center;

    cursor: pointer;
    transition: flex-grow .5s ease .3s, border-radius .5s ease;
}

.open .module-benefits__accordion-header{
    flex-grow: 1;
    border-radius: var(--br-med) var(--br-med) 0 0;
    transition: flex-grow .5s ease .0s, border-radius .5s ease;
}

.module-benefits__accordion-button{
    position: relative;

    width: 1.25rem;
    height: 1.25rem;
    padding: .25rem;
    margin-left: .75rem;

    transition: margin .3s ease;
}

.module-benefits__accordion-header:hover .module-benefits__accordion-button{
    margin-left: 1.5rem;
}

.module-benefits__accordion-button svg{
    position: absolute;
    inset: .25rem;
    height: 100%;

    width: calc(1.25rem - (.25rem * 2));
    height: calc(1.25rem - (.25rem * 2));
}

.module-benefits__v{
    transform: rotate(90deg);
    transform-origin: center;

    transition: transform .5s ease .3s;
}

.open .module-benefits__v{
    transform: rotate(0);
    transition: transform .5s ease 0s;
}

.module-benefits__accordion-p{
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    width: 100%;

    transition: all .5s ease;
}

.module-benefits__accordion-p > span{
    overflow: hidden;
}

.module-benefits__accordion-p > span > span{
    margin: .75rem 1rem;
    display: inline-block;
}

.open .module-benefits__accordion-p{
    grid-template-rows: 1fr;
    transition-delay: .3s;
}

@media screen and ( min-width: 770px ) {
    .knowledge__more{
        display: none;
    }
}

@media screen and (max-width: 1500px) {
    .cookie-banner{
        border-left: none;
        border-radius: 0;
    }

    .nav{
        position: relative;
    }

    .nav__ul{
        position: absolute;
        overflow-y: auto;
        overflow-x: hidden;
        right: 0;
        top: 0;
        z-index: 3;

        height: calc(100vh - 34px);
        -webkit-transform: translateX(100%);
            -ms-transform: translateX(100%);
                transform: translateX(100%);

        -webkit-box-pack: start;

            -ms-flex-pack: start;

                justify-content: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;

        color: white;
        background-color: var(--c-primary-400);
        -webkit-transition: -webkit-transform .3s ease-out;
        transition: -webkit-transform .3s ease-out;
        -o-transition: transform .3s ease-out;
        transition: transform .3s ease-out;
        transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    }

    .nav__ul.open{
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0);
    }

    .nav__li--close{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end;
        height: 3.75rem;
        padding: 1rem;
    }

    .nav__li--close svg{
        width: 1.5rem;
        height: 1.5rem;
    }

    .nav__li--cta{
        display: block;
        text-transform: uppercase;
    }

    .nav__li{
        width: 100%;
        border-bottom: 1.5px solid var(--c-primary-200);
    }

    .nav__li:first-child{
        border-top: 1.5px solid var(--c-primary-200);
    }

    .nav__a{
        margin: 0;
        padding: 1rem 2rem;
    }

    .nav__a:hover{
        color: white;
    }

    .nav__ul .nav__li--demo{
        display: none;
        pointer-events: none;
    }

    .nav__button{
        display: none;
    }

    .nav__burger{
        display: block;
    }

    .nav__li{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    span.nav__a .chevron{
        display: inline-block;
    }

    .nav__sec-ul{
        position: static;
        opacity: 1;
        background: #00000010;
        color: white;
        max-width: none;
        padding: 0;
    }

    .nav__sec-li{
        border-top: 1.5px solid var(--c-primary-200);
    }
}

@media screen and ( max-width: 1420px ), screen and ( max-width: 900px ) and ( orientation: landscape ){
    .counter{
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }

    .pilars__header .display{
        font-size: 4rem;
    }

    .pilars__header .title{
        font-size: 2rem;
    }
    
    .pilars__arrows{
        margin-top: 0;
    }

    .hero .pilars__arrows{
        margin-top: auto;
        margin-right: auto;
    }

    .pilars__arrow{
        width: 2.5rem;
    }
}

@media screen and ( max-width: 1300px ), screen and ( max-width: 900px ) and ( orientation: landscape ){
    .benefits__icon{
        width: 2rem;
        height: 2rem;
        padding: .4rem;
    }

    .benefits__arrow{
        transform: translateX(-1rem) rotate(90deg);
    }

    .active .benefits__arrow, .benefits__item:hover .benefits__arrow{
        transform: translateX(0) rotate(90deg);
    }

    .benefits__accordion{
        grid-template-rows: 1fr;
    }

    .benefits__list{
        grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    }

    .see-more-button{
        display: none;
    }

    .steps__item{
        padding-left: 0;
        padding-right: 0;
    }

    .introduction{
        display: flex;
        flex-direction: column-reverse;
    }

    .introduction .container{
        min-height: 0;
        padding-top: 2rem;
    }

    .introduction__wrapper, .reverse .introduction__wrapper{
        position: relative;
        inset: auto;
        border-radius: 1.5rem;
        width: calc(100% - calc((var(--section-padding-inline) - .5rem) * 2));
        margin: 0 calc(var(--section-padding-inline) - .5rem);
        max-height: 50vh;
    }

    .introduction__info{
        max-width: 100%;
        padding: 0;
    }

    .container{
        --section-padding-block: 2rem;
    }

    .slider__info{
        padding-bottom: 3rem;
    }
}

@media screen and ( max-width: 1000px ), screen and ( max-width: 900px ) and ( orientation: landscape ){
    .footer__columns{
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }

    #demo-form{
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }

    #demo-form .button{
        grid-column: 1/-1;
    }

    .slider__title{
        font-size: 4rem;
    }

    .slider__subtitle{
        font-size: 2rem;
    }

    .slider__text{
        font-size: 1rem;
    }

    .slider .deco{
        margin-bottom: .5rem;
    }

    .pilars__info{
        position: relative;
        padding: 2rem;
        border-radius: 1rem 1rem 0 0;
    }

    .pilars__text:not(.first){
        inset: 2rem;
    }
    
    .pilars__wrapper{
        border-radius: 1rem 1rem 0 0;
        min-height: auto;
    }

    .pilars__wrapper::before {
        background: linear-gradient(180deg, #05242b 0%, rgba(0, 0, 0, 0) 60%);
    }

    .pilars__header{
        padding: 2rem;
    }

    .benefits__active-item{
        padding: 1.75rem;
    }

    .benefits__item{
        padding: .5rem;
        justify-content: center;
        text-align: center;
        font-size: .9rem;
    }

    .benefits__inactive-title{
        font-size: .9rem;
    }

    .benefits__icon, .benefits__arrow{
        display: none;
    }

    .benefits__text, .benefits__text p{
        font-size: 1rem;
    }

    .steps__ul{
        grid-template-columns: 1fr;
        gap: 0;
    }

    .steps__item{
        padding-bottom: 0;
        padding-top: 3rem;
    }

    .steps__line{
        display: none;
    }

    .steps__number{
        width: 3.5rem;
        height: 3.5rem;
    }
}

@media screen and ( max-width: 900px ), screen and ( max-width: 900px ) and ( orientation: landscape ){
    .knowledge{
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

@media screen and ( max-width: 770px ), screen and ( max-width: 900px ) and ( orientation: landscape ) {
    .title{
        font-size: 1.5rem;
    }
    
    .subtitle{
        font-size: 1.1rem;
    }

    .display{
        font-size: 2.5rem;
    }

    .slider__title, .slider__subtitle, .slider__text{
        width: 100%;
        text-align: center;
    }

    .counter, .knowledge{
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    .knowledge__title{
        font-size: 1.25rem;
        margin-bottom: .5rem;
    }
    
    .knowledge__chevron{
        display: none;
    }

    .knowledge__info{
        padding: 1rem;
    }

    .knowledge__column{
        flex-direction: column;
        justify-content: stretch;
        align-items: stretch;
    }

    .knowledge__svg, .knowledge__column:hover .knowledge__svg{
        /* width: 4rem;
        padding: 0 1rem; */
        height: 4rem;
        width: auto;
        margin: 0;
        padding: 1rem 45%;
        border-radius: 0.5rem 0.5rem 0 0;
    }

    .slider__mask{
        left: -15rem;
        bottom: -52rem;
        -webkit-transform: rotate(-16deg);
            -ms-transform: rotate(-16deg);
                transform: rotate(-16deg);
    }

    .slider__mask-blue{
        bottom: -50rem;
        left: -30%;
        -webkit-transform: rotate(-20deg);
            -ms-transform: rotate(-20deg);
                transform: rotate(-20deg);
    }

    .long{
        -ms-grid-column-span: 1;
        grid-column: span 1;
    }

    .cookie-banner{
        border-top: none;
        border-radius: 0;
    }

    .slider__wrapper{
        margin: var(--header-height) 0 0;
        border-radius: 0;
    }
    
    .pilars__wrapper{
        margin: 0;
    }

    .pilars__header .display{
        font-size: 3rem;
    }

    .pilars__header .title{
        font-size: 1.5rem;
    }

    .pilars__arrow{
        width: 2rem;
        padding: .25rem;
    }

    /* .benefits__inactive-title{
        font-size: 1rem;
    } */

    .introduction__wrapper, .reverse .introduction__wrapper{
        border-radius: 0;
        margin: 0;
        width: 100%;
    }

    .button-container{
        justify-content: center;
    }

    .button.big{
        font-size: .9rem;
        padding: .65em 1.75em .55em 1.75em;
    }

    .clients__slider{
        grid-template-columns: repeat(6, 1fr);
    }

    .clients__wrapper{
        margin: .0 1rem;
    }

    .module-benefits__list{
        padding: 1rem;
        gap: 1rem;
    }
}

@media screen and ( max-width: 650px ) {
    .footer__columns, #demo-form{
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    .nav__ul{
        width: 100%;
    }

    .slider__title{
        font-size: 2rem;
    }

    .slider__subtitle{
        font-size: 1.5rem;
    }

    .cta .subtitle{
        display: none;
    }

    .pilars__header .display{
        font-size: 2rem;
    }

    .pilars__header .title{
        font-size: 1.25rem;
    }

    .pilars__arrow{
        width: 1.5rem;
    }
}

@media screen and ( max-width: 500px ){
    .nav{
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    #nav__cta{
        display: none;
    }

    .nav__burger{
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0);
    }

    .slider__info{
        padding-bottom: 3rem;
        /* text-align: center; */
    }

    .slider__info .deco{
        margin: 1rem auto;
    }

    .slider__mask-blue{
        left: -69%;
    }

    .clients__wrapper{
        overflow: auto;
    }

    .clients__slider{
        grid-template-columns: repeat(10, 1fr);
        width: 500%;
    }

    .clients .arrows{
        display: none;
    }

    .module-benefits__item{
        padding: 1rem;
    }

    .module-benefits__item-header{
        flex-direction: column;
    }

    .module-benefits__item-icon{
        width: 100%;
        color: var(--c-primary-400);
    }

    .module-benefits__item-icon svg{
        width: 100%;
        height: 3rem;
        padding: 0;
        margin-top: 1rem;
        background-color: transparent;
    }

    .module-benefits__item-title{
        margin: 0;
        margin-top: 1rem;
        text-align: center;
    }

    .module-benefits__accordion-header{
        flex-grow: 1;
    }
}

@media screen and ( max-width: 400px ), screen and ( max-width: 900px ) and ( orientation: landscape ){
    .title{
        font-size: 1.25rem;
    }
    
    .subtitle{
        font-size: 1.1rem;
        margin-bottom: .25rem;
    }

    .button-container{
        margin: 3rem auto 0;
    }

    .slider__arrow{
        opacity: 1;
        top: auto;
        bottom: 1.5rem;
        height: 5rem;
    }
}

@media screen and ( max-width: 900px ) and ( orientation: landscape ){
    .hero{
        height: auto;
        min-height: 100%;
    }

    .hero__button, .slider__info .deco{
        display: none;
    }

    .slider__info{
        padding: 1rem 10% 0;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .slider__arrow{
        opacity: 1;
        top: calc( 50% - 2.5rem );
        height: 5rem;
    }

    .button-container{
        margin: 1rem 0 0;
    }

    .slider__title{
        font-size: 2.5rem;
    }

    .slider__subtitle{
        font-size: 1.25rem;
        margin-top: .25rem;
    }

    .slider__text{
        font-size: 1rem;
    }

    .button.big{
        padding: .5em 2em;
    }

    .slider__info .button{
        margin-top: 0;
    }

    .small .nav__logo{
        max-width: 100px;
    }

    .introduction__wrapper, .reverse .introduction__wrapper{
        max-height: 75vh;
    }
}

/* Add proper spacing for content below fixed header */
main {
    padding-top: var(--header-height);
}

/* Remove margin-top from header + * since we're using padding-top on main */
header + * {
    margin-top: 0 !important;
}

/* Adjust hero sections to account for header */
/* .hero, .new-detail__hero {
    margin-top: calc(-1 * var(--header-height));
    padding-top: var(--header-height);
} */

/* Ensure first-container class properly accounts for header */
.first-container {
    padding-top: var(--header-height);
    margin-top: 0;
}

/* Rest of your existing styles */
.op-0{
    opacity: 0;
}