/*****************************************
    RESET
******************************************/
*,
*::before,
*::after {
    box-sizing: border-box;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scrollbar-color: #203449 transparent;
}

html {
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: calc(var(--vh, 1vh) * 100);
    text-rendering: optimizeSpeed;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd {
    margin: 0;
    padding: 0;
}

img, svg, picture {
    display: block;
    max-width: 100%;
    object-fit: cover;
    object-position: 50%;
}

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

a:not([class]) {
    text-decoration-skip-ink: auto;
}

ul[role=list],
ol[role=list] {
    list-style: none;
}

button, input, textarea, select {
    font: inherit;
    background: none;
    color: inherit;
    border: 0;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

textarea {
    resize: none;
}

/*a:focus, button:focus, input:focus, textarea:focus, select:focus {
    outline: 2px solid #203449;
    outline-offset: 2px;
}*/

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*****************************************
    MAIN
******************************************/
body {
    font-family: 'Raleway', sans-serif;
    font-style: normal;
    font-size: 14px;
    line-height: 1.5;
    color: #EBF5FE;
    background: #0B1928;
}

body {
    padding-top: 130px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 992px) {
    body {
        padding-top: 70px;
    }
    
    html:has(aside.active),
    body:has(aside.active) {
        overflow: hidden;
    }
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 70px;
}

@media (max-width: 992px) {
    main {
        gap: 50px;
    }
}

@media (max-width: 768px) {
    main {
        gap: 30px;
    }
}

section {
    z-index: 1;
}

section img {
    margin: auto;
}

section > div:has(> picture img) {
    display: flex;
}

section > div:has(> picture img) picture img {
    margin: auto;
}

.container {
    --max-width: 1400px;
    --padding: 1rem;

    width: min(var(--max-width), 100% - (var(--padding) * 2));
    margin-inline: auto;
}

@media (max-width: 768px) {
    .container {
        --padding: .3rem;
    }
}

/*****************************************
    LIST
******************************************/
ol.list {
    counter-reset: my-awesome-counter;
    margin-block: 1rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    container-type: inline-size;
}

ol.list li {
    position: relative;
    font-weight: 700;
    font-size: clamp(1rem, 0.5789rem + 2.1053vw, 1.5rem);
    line-height: 125%;
    color: #ebf5fe;
    margin: 0 0 3.5rem 0;
    padding-inline: 85px;
    counter-increment: my-awesome-counter;
    display: flex;
    align-items: center;
    gap: 15px;
}

ol.list li:last-child {
    margin: 0;
}

ol.list li::before {
    width: 56px;
    height: 56px;
    flex: 1 0 56px;
    display: block;
    content: '';
    background: linear-gradient(220deg, rgba(87, 255, 171, 1) 0%, rgba(33, 108, 131, 1) 55%, rgba(0, 15, 83, 1) 100%);
    border-radius: 50%;
    text-align: center;
    position: absolute;
    left: 5px;
}

ol.list li::after {
    width: 54px;
    height: 54px;
    flex: 1 0 54px;
    display: block;
    content: counter(my-awesome-counter);
    font-weight: 400;
    font-size: 30px;
    line-height: 160%;
    color: #fff;
    background: #0B1928;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    left: 6px;
}

.heading ol.list {
    margin-block: auto;
}

@media (max-width: 768px) {
    ol.list li {
        margin: 0 0 1.5rem 0;
        padding-inline: 65px;
    }

    ol.list li::before {
        width: 40px;
        height: 40px;
        flex: 1 0 40px;
    }

    ol.list li::after {
        width: 38px;
        height: 38px;
        flex: 1 0 38px;
        font-size: 16px;
        line-height: 220%;
    }
}

ul.list {
    height: fit-content;
    margin-block: 1rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    container-type: inline-size;
}

ul.list li {
    position: relative;
    padding: 7px 25px;
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
}

ul.list li h3 {
    margin-block: 0 10px;
    line-height: 1;
}

ul.list li p {
    margin-block: 0;
}

ul.list.wrap li {
    flex-basis: calc(50% - 10px);
}

ul.list li::before {
    width: 2px;
    height: 100%;
    display: block;
    content: '';
    background: #0dfbb3;
    position: absolute;
    top: 0;
    left: 5px;
}

dl {
    display: flex;
    max-width: 65%;
    width: 100%;
    gap: 15px;
}

dl dd.heading h2 {
    position: relative;
    width: fit-content;
    line-height: 1;
}

dl dd.heading h2:after {
    content: '+';
    position: absolute;
    top: -7px;
    right: -40px;
    font-weight: 600;
    line-height: 100%;
    font-size: 42px;
    color: #0dfbb3;
}

@media (max-width: 768px) {
    dl {
        max-width: 90%;
        margin: auto;
    }
}

/*****************************************
    TWO COLUMNS
******************************************/
section.col-2 {
    display: flex;
    gap: 20px 3%;
}

section.col-2 > * {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 45px;
}

@media (max-width: 768px) {
    section.col-2 {
        flex-direction: column;
    }

    section.col-2 > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
}

section.col-2x {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3%;
}

section.col-2x.left {
    grid-template-columns: 1.5fr 1fr;
}

section.col-2x.right {
    grid-template-columns: 1fr 1.5fr;
}

section.col-2x.left > :first-child {
    grid-row: 1 / 2;
    grid-column: 1;
}

section.col-2x.left > :first-child + * {
    grid-row: 1 / 4;
}

section.col-2x.left > :first-child + * + * {
    grid-row: 2 / 4;
    grid-column: 1;
}

section.col-2x.right > :first-child {
    grid-row: 1 / 2;
    grid-column: 2;
}

section.col-2x.right > :first-child + * {
    grid-row: 1 / 4;
    grid-column: 1;
}

section.col-2x.right > :first-child + * + * {
    grid-row: 2 / 4;
    grid-column: 2;
}

@media (max-width: 768px) {
    section.col-2x {
        display: block;
    }
}

/*****************************************
    BLOCK WIDTH 55 PERCENTAGES
******************************************/
@media (min-width: 769px) {
    .block-55 {
        flex-grow: 0 !important;
        flex-basis: 55% !important;
    }
}

/*****************************************
    BOOK A MEETING IFRAME
******************************************/
@media (max-width: 810px) {
    .book-a-meeting iframe{
        height: 720px;
    }
}


/*****************************************
    FORM
******************************************/
label {
    display: flex;
    flex-direction: column;
}

input, textarea {
    width: 100%;
    padding: 12px 12px;
    display: inline-block;
    border: 1px solid #405c7a;
    background: #132435;
    font-size: clamp(1rem, 0.963rem + 0.1852vw, 1.125rem);
    color: #EBF5FE;
    caret-color: #EBF5FE;
    border-radius: 15px;
    outline: none !important;
}

textarea {
    height: 150px;
    resize: none;
}

input:focus, textarea:focus {
    border-color: #0DFBB3;
}

::placeholder {
    color: #a6b3bf;
    opacity: 1;
}

::-ms-input-placeholder {
    color: #a6b3bf;
}

form.request-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

form.request-form .btn {
    align-self: flex-end;
}

form.request-form .form-error {
    display: block;
    color: #ed4347;
    font-size: 12px;
    margin-inline: 15px;
}

/* PHONE */
.iti {
    width: 100%;
}

.iti__search-input {
    background: #203449;
}

.iti__dropdown-content {
    --iti-dropdown-bg: #203449;

    border-radius: 15px;
    overflow: hidden;
}

.iti--inline-dropdown .iti__dropdown-content {
    --iti-border-width: 1px;
    --iti-border-color: #203449;

    margin-top: 5px;
}

.iti__arrow {
    --iti-arrow-color: #EBF5FE;
}

.iti__globe {
    /* Filter for #a6b3bf - rate 0.1 */
    filter: brightness(0) saturate(100%) invert(75%) sepia(15%) saturate(245%) hue-rotate(167deg) brightness(95%) contrast(85%);
}

.iti__country-list {
    font-size: clamp(1rem, 0.963rem + 0.1852vw, 1.125rem);
}

.iti__country-container:has(button[aria-expanded=true]) ~ input {
    border-color: #0DFBB3;
}

/*****************************************
    TOAST
******************************************/
.toast {
    position: fixed;
    top: 25px;
    right: 25px;
    max-width: 300px;
    background: #fff;
    padding: 0.5rem;
    border-radius: 4px;
    box-shadow: -1px 1px 10px
    rgba(0, 0, 0, 0.3);
    z-index: 1023;
    animation: slideInRight 0.3s
    ease-in-out forwards,
    fadeOut 0.5s ease-in-out
    forwards 3s;
    transform: translateX(110%);
}

.toast.closing {
    animation: slideOutRight 0.5s
    ease-in-out forwards;
}

.toast-progress {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: #b7b7b7;
    animation: toastProgress 3s
    ease-in-out forwards;
}

.toast-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toast-message {
    flex: 1;
    font-size: 0.9rem;
    color: #ebf5fe;
    padding: 0.5rem;
}

.toast.toast-success {
    background: #132435;
    border: 1px solid #405c7a;
}

.toast.toast-success .toast-progress {
    background-color: #0dfbb3;
}

.toast.toast-danger {
    background: #efaca5;
}

.toast.toast-danger .toast-progress {
    background-color: #e74c3c;
}

.toast.toast-info {
    background: #bddaed;
}

.toast.toast-info .toast-progress {
    background-color: #3498db;
}

.toast.toast-warning {
    background: #ead994;
}

.toast.toast-warning .toast-progress {
    background-color: #f1c40f;
}

@keyframes slideInRight {
    0% {
        transform: translateX(110%);
    }

    75% {
        transform: translateX(-10%);
    }

    100% {
        transform: translateX(0%);
    }
}

@keyframes slideOutRight {
    0% {
        transform: translateX(0%);
    }

    25% {
        transform: translateX(-10%);
    }

    100% {
        transform: translateX(110%);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes toastProgress {
    0% {
        width: 100%;
    }

    100% {
        width: 0%;
    }
}

/*****************************************
    DIALOG
******************************************/
dialog {
    width: 100%;
    height: 100%;
    max-width: 690px;
    max-height: 90%;
    padding: 0;
    border: none;
    color: inherit;
    border-radius: 20px;
    background-color: #0b1928;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform .3s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.4s ease;
    transform: scale(0);
    opacity: 0;
    z-index: 100;
    overflow: hidden;
}

dialog .heading h2 {
    font-size: clamp(2.5rem, 1.0714rem + 7.1429cqw, 3.75rem);
}

dialog.active {
    transform: scale(1);
    opacity: 1;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.7);
    transition: background .3s ease;
}

.dialog-content {
    width: 100%;
    height: 100%;
    padding: 40px;
    position: relative;
    overflow-y: auto;
}

.dialog-close {
    border: none;
    background: none;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    cursor: pointer;
}

dialog.closing {
    transform: scale(0);
    opacity: 0;
}

dialog form.request-form .btn {
    width: 100%;
    max-width: 75%;
    margin-block: 10px;
    align-self: center;
    gap: 10px;
}

@media (max-width: 600px) {
    dialog {
        width: 100%;
        height: 100%;
        max-height: unset;
        border-radius: 0;
    }

    .dialog-content {
        padding: 20px;
    }

    dialog form.request-form .btn {
        max-width: unset;
    }
}

dialog#dailyDialog {
    background-image: url(/storage/app/media/popup-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

dialog#dailyDialog h2 {
    /*font-size: clamp(2.5rem, -0.2857rem + 13.9286cqw, 4.9375rem);*/
    font-size: clamp(2.5rem, 0.3571rem + 10.7143cqw, 4.375rem);
    line-height: .9;
    margin-bottom: 5px;
}

dialog#dailyDialog .btn {
    min-width: 50%;
    align-self: baseline;
    margin-block: 10% auto;
}

dialog#dailyDialog .dialog-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3%;
}

dialog#dailyDialog .heading {
    flex-grow: 0;
}


dialog#dailyDialog .logo {
    width: 40%;
    margin-block: 5% 3%;
    align-self: flex-start;
}

dialog#dailyDialog .logo-alt {
    width: 35%;
    align-self: flex-end;
}

/*****************************************
    BUTTONS
******************************************/
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: clamp(1.125rem, 1.088rem + 0.1852vw, 1.25rem);
    line-height: 175%;
    color: #ebf5fe;
    border: none;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.btn.btn-primary {
    padding: 22px 40px;
    background: linear-gradient(167deg, #57ffab 2.9%, #216c83 55%, #000f53 97.5%);
}

.btn.btn-primary:hover {
    box-shadow: -1px -5px 20px 1px #57ffab50;
    transform: matrix(1, 0, 0, 1, 0, -1);
}

.btn.btn-secondary {
    padding: 22px 40px;
    background: #0B1928;
}

.btn.btn-secondary::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: rgb(87, 255, 171);
    background: linear-gradient(220deg, rgba(87, 255, 171, 1) 0%, rgba(33, 108, 131, 1) 55%, rgba(0, 15, 83, 1) 100%);
    border-radius: 12px;
    z-index: -1;
}

.btn.btn-secondary:hover {
    box-shadow: -1px -5px 20px 1px #57ffab50;
}

.btn.btn-rounded,
.btn.btn-rounded::before {
    border-radius: 100px;
}

.btn.btn-icon {
    width: 55px;
    height: 55px;
    padding: 1px !important;
}

@media (max-width: 768px) {
    .btn.btn-primary,
    .btn.btn-secondary {
        padding: 17px 40px;
    }
}

/*****************************************
    PANEL
******************************************/
section.panels {
    display: grid;
    grid-auto-rows: 1fr;
    row-gap: 20px;
}

section.panels .panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 27px 30px;
    background: #132435;
    border-radius: 20px;
}

section.panels .panel .heading {
    flex-grow: 0;
    flex-basis: 47%;
}

section.panels .panel .btn {
    align-self: center;
    margin-inline: auto 0;
    flex: none;
}

@media (max-width: 768px) {
    section.panels .panel .heading {
        flex-basis: 100%;
    }
}
/*****************************************
    PANEL-1
******************************************/
section.panels-1 {
    display: grid;
    grid-auto-rows: 1fr;
    row-gap: 20px;
}

section.panels-1 .panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 27px 30px;
    background-color: #132435;
    background-image: url(/storage/app/media/panel.png);
    background-repeat: no-repeat;
    background-position: -12% center;
    background-size: 20%;
    border-radius: 20px;
}

section.panels-1 .panel .heading {
    flex-grow: 0;
    flex-basis: 57%;
    margin-inline-start: 15%;
}

section.panels-1 .panel .btn {
    align-self: center;
    margin-inline: auto 0;
    flex: none;
}

@media (max-width: 768px) {
    section.panels-1 .panel {
        padding-top: 35%;
        flex-direction: column;
        background-position: center 7%;
        background-size: 25%;
    }

    section.panels-1 .panel .heading {
        min-width: 100%;
        flex-basis: 100%;
    }

    section.panels-1 .panel .btn {
        margin-inline: auto;
    }

    section.panels-1 .panel .heading {
        margin-inline: auto;
    }
}

/*****************************************
    HEADER
******************************************/
header {
    height: 100px;
    background: #0B1928;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    transition: all .3s ease;
}

@media (max-width: 992px) {
    body:has(aside.active) header {
        background: #132435;
    }
}

header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

header .container > div {
    display: flex;
    align-items: center;
    gap: 50px;
}

header .container > div:first-child {
    flex: 1;
}

header .container > div:last-child {
    gap: 20px;
}

header nav {
    width: 100%;
}

header nav ul {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 25px;
}

header nav ul li.wrapped {
    display: none;
}

header nav ul li {
    list-style: none;
    position: relative;
}

header nav li a {
    font-weight: 500;
    font-size: 20px;
    color: #ebf5fe;
    text-decoration: none;
    transition: all .3s ease;
    position: relative;
}

header nav li a:hover,
header nav li a.active {
    color: #0DFBB3;
}

header nav > ul > li > a:before {
    content: '';
    width: 0;
    height: 2px;
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translate(-50%);
    background: #0DFBB3;
    border-radius: 100px;
    transition: all .3s ease;
}

header nav > ul > li:hover > a:before {
    width: 100%;
}

header nav ol {
    background: #132435;
    border-radius: 12px;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

header nav ul li div {
    position: absolute;
    top: 100%;
    visibility: hidden;
    display: none;
    opacity: 0;
}

header nav ul li:hover > div {
    visibility: visible;
    opacity: 1;
    display: block;
    width: fit-content;
    height: fit-content;
    min-width: 250px;
    padding-top: 22px;
}

header a.logo {
    display: contents;
}

header .btn.btn-primary {
    padding: 18px 40px;
}

header .toggle-sidebar {
    width: 37px;
    height: 30px;
    padding: 2px 6px;
    background-color: transparent;
    border: none;
    display: none;
    cursor: pointer;
}

header .toggle-sidebar:before,
header .toggle-sidebar:after,
header .toggle-sidebar div {
    content: '';
    background: #EBF5FE;
    display: block;
    height: 2px;
    margin: 5px 0;
    border-radius: 3px;
    transition: 0.3s;
}

header .toggle-sidebar:after {
    width: 70%;
}

header .toggle-sidebar[area-expanded]:before {
    transform: translateY(7px) rotate(135deg);
}

header .toggle-sidebar[area-expanded]:after {
    width: 100%;
    transform: translateY(-7px) rotate(-135deg);
}

header .toggle-sidebar[area-expanded] div {
    transform: scale(0);
}

@media (max-width: 992px) {
    header {
        height: 60px;
    }

    header nav,
    header input.search-bar,
    header .btn.btn-primary.--desktop {
        display: none;
    }

    header .toggle-sidebar {
        display: block;
    }

    header a.logo img {
        width: 118px;
        height: 33px;
    }
}

/*****************************************
    HEADER LANGUAGE SWITCHER
******************************************/
header .language-switcher {
    position: relative;
    display: inline-block;
}

header .language-switcher:hover button {
    color: #0DFBB3;
}

header .language-switcher:hover div {
    visibility: visible;
    opacity: 1;
    display: block;
}

header .language-switcher button {
    background-color: transparent;
    font-weight: 700;
    font-size: 20px;
    color: #ebf5fe;
    padding: 0 12px;
    border: none;
    cursor: pointer;
}

header .language-switcher button:before {
    content: '';
    width: 0;
    height: 2px;
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translate(-50%);
    background: #0DFBB3;
    border-radius: 100px;
    transition: all .3s ease;
}

header .language-switcher:hover button:before {
    width: 100%;
}

header .language-switcher div {
    visibility: hidden;
    display: none;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    width: fit-content;
    height: fit-content;
    min-width: 185px;
    padding-top: 22px;
    z-index: 1;
}

header .language-switcher div span {
    background: #132435;
    border-radius: 12px;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

header .language-switcher a {
    font-weight: 500;
    font-size: 20px;
    color: #ebf5fe;
    text-decoration: none;
}

header .language-switcher a:hover {
    color: #0DFBB3;
}

/*****************************************
    HEADER SEARCH BAR
******************************************/
header input.search-bar {
    width: 0;
    border-color: transparent;
    padding-inline-end: 40px;
    background-color: transparent;
    background-image: url('data:image/svg+xml,<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.3747 3.5C16.0027 3.5002 13.6652 4.06764 11.5572 5.15496C9.4491 6.24229 7.63162 7.81798 6.25637 9.75057C4.88112 11.6832 3.98798 13.9166 3.65145 16.2646C3.31492 18.6125 3.54477 21.007 4.32182 23.248C5.09887 25.4891 6.40059 27.5118 8.11838 29.1475C9.83616 30.7832 11.9202 31.9844 14.1966 32.6508C16.473 33.3172 18.8758 33.4296 21.2045 32.9786C23.5332 32.5276 25.7202 31.5262 27.5832 30.058L33.9742 36.449C34.3043 36.7678 34.7463 36.9442 35.2052 36.9402C35.664 36.9362 36.1029 36.7521 36.4274 36.4277C36.7519 36.1032 36.9359 35.6643 36.9399 35.2055C36.9439 34.7466 36.7675 34.3046 36.4487 33.9745L30.0577 27.5835C31.7867 25.3901 32.8632 22.7542 33.1641 19.9775C33.465 17.2008 32.9781 14.3955 31.7591 11.8827C30.5401 9.36979 28.6383 7.25087 26.2712 5.7684C23.9042 4.28594 21.1676 3.49981 18.3747 3.5ZM6.99971 18.375C6.99971 15.3582 8.19814 12.4649 10.3314 10.3317C12.4646 8.19843 15.3579 7 18.3747 7C21.3916 7 24.2848 8.19843 26.4181 10.3317C28.5513 12.4649 29.7497 15.3582 29.7497 18.375C29.7497 21.3918 28.5513 24.2851 26.4181 26.4183C24.2848 28.5516 21.3916 29.75 18.3747 29.75C15.3579 29.75 12.4646 28.5516 10.3314 26.4183C8.19814 24.2851 6.99971 21.3918 6.99971 18.375Z" fill="%23EBF5FE"/></svg>');
    background-repeat: no-repeat;
    background-position-x: 100%;
    -webkit-background-size: 42px;
    background-size: 42px;
    transition: all .3s ease;
    cursor: pointer;
}

header input.search-bar:hover,
header input.search-bar:focus {
    width: 200px;
    background-size: 20px;
    background-color: #132435;
    background-position: calc(100% - 10px);
    border: 1px solid #405c7a;
}

/*****************************************
    SIDEBAR
******************************************/
aside {
    height: min-content;
    padding: 10px;
    background: #132435;
    border-radius: 0 0 20px 20px;
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    display: none;
    gap: 20px;
    overflow: auto;
}

aside[area-expanded] > div {
    transform: translateX(calc(-100% - 20px));
}

aside > div {
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: all .3s ease;
}

aside input {
    width: 100%;
    margin: 0;
    padding: 19px 12px;
    border: 1px solid #405c7a;
    padding-inline-end: 40px;
    background-color: #0b1928;
    background-image: url('data:image/svg+xml,<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.3747 3.5C16.0027 3.5002 13.6652 4.06764 11.5572 5.15496C9.4491 6.24229 7.63162 7.81798 6.25637 9.75057C4.88112 11.6832 3.98798 13.9166 3.65145 16.2646C3.31492 18.6125 3.54477 21.007 4.32182 23.248C5.09887 25.4891 6.40059 27.5118 8.11838 29.1475C9.83616 30.7832 11.9202 31.9844 14.1966 32.6508C16.473 33.3172 18.8758 33.4296 21.2045 32.9786C23.5332 32.5276 25.7202 31.5262 27.5832 30.058L33.9742 36.449C34.3043 36.7678 34.7463 36.9442 35.2052 36.9402C35.664 36.9362 36.1029 36.7521 36.4274 36.4277C36.7519 36.1032 36.9359 35.6643 36.9399 35.2055C36.9439 34.7466 36.7675 34.3046 36.4487 33.9745L30.0577 27.5835C31.7867 25.3901 32.8632 22.7542 33.1641 19.9775C33.465 17.2008 32.9781 14.3955 31.7591 11.8827C30.5401 9.36979 28.6383 7.25087 26.2712 5.7684C23.9042 4.28594 21.1676 3.49981 18.3747 3.5ZM6.99971 18.375C6.99971 15.3582 8.19814 12.4649 10.3314 10.3317C12.4646 8.19843 15.3579 7 18.3747 7C21.3916 7 24.2848 8.19843 26.4181 10.3317C28.5513 12.4649 29.7497 15.3582 29.7497 18.375C29.7497 21.3918 28.5513 24.2851 26.4181 26.4183C24.2848 28.5516 21.3916 29.75 18.3747 29.75C15.3579 29.75 12.4646 28.5516 10.3314 26.4183C8.19814 24.2851 6.99971 21.3918 6.99971 18.375Z" fill="%23EBF5FE"/></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 10px);
    -webkit-background-size: 20px;
    background-size: 20px;
    border-radius: 12px;
    transition: all .3s ease;
    cursor: pointer;
}

aside div.menu {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

aside div.menu a {
    font-weight: 600;
    font-size: 20px;
    line-height: 145%;
    color: #ebf5fe;
    text-decoration: none;
    padding: 13px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

aside .step-2 div.menu a:first-child {
    background: #203449;
    border-radius: 12px;
}

aside button {
    align-self: baseline;
    margin-block: 50px 0;
}

@media (max-width: 992px) {
    aside {
        top: 60px;
    }

    aside.active {
        display: flex;
        overflow: hidden;
        animation: fade-in .3s;
    }

    aside:not(.active).did-fade-in {
        display: flex;
        animation: fade-out .3s;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/*****************************************
    FOOTER
******************************************/
footer {
    padding: 25px 0;
    margin-top: 65px;
    background: #0e1d2d;
}

footer .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, auto));
    gap: 10px 3%;
}

footer .about-us img {
    max-width: 50%;
}

footer .about-us p {
    font-weight: 500;
    font-size: clamp(0.875rem, 0.838rem + 0.1852vw, 1rem);
    line-height: 156%;
    text-wrap: balance;
    color: rgba(122, 141, 159, 0.5);
}

footer p.copyright {
    grid-row: 5 / 5;
    grid-column: 1 / 5;
    font-weight: 500;
    font-size: clamp(0.875rem, 0.838rem + 0.1852vw, 1rem);
    line-height: 156%;
    text-wrap: balance;
    color: rgba(122, 141, 159, 0.5);
}

footer .menu {
    z-index: 1;
}

footer .menu.extra {
    z-index: 0;
}

footer .menu h3 {
    margin: 12px 0 20px;
    font-weight: 700;
    font-size: 24px;
    line-height: 125%;
    color: #ebf5fe;
}

footer .menu ul {
    padding: 0;
    list-style: none;
}

footer .menu ul li {
    margin-bottom: 8px;
}

footer .menu ul li a {
    font-weight: 600;
    font-size: 20px;
    line-height: 145%;
    color: #899aa9;
    text-decoration: none;
}

footer .menu ul li a:hover {
    color: #ebf5fe;
}

@media (max-width: 992px) {
    footer .container {
        grid-template-columns: auto;
        gap: 20px 10%;
    }

    footer .about-us {
        grid-column: 1 / 3;
    }

    footer .about-us p {
        display: none;
    }

    footer .menu {
        grid-row: 2 / 2;
    }

    footer p.copyright {
        grid-column: 1 / 4;
    }
}

@media (max-width: 768px) {
    footer .menu {
        grid-row: 3 / 3;
        grid-column: 1 / 5;
    }

    footer .menu:last-of-type {
        grid-row: 4 / 4;
        grid-column: 1 / 5;
    }

    footer .menu.extra {
        grid-row: 2 / 2;
        grid-column: 1 / 5;
    }

    /* MOBILE */
    footer .menu {
        margin-block: -30px;
    }

    footer .menu:last-of-type {
        margin-block: 10px;
    }

    footer .menu.extra {
        margin-block: -10px;
    }

    footer .menu h3 {
        display: none;
    }

    footer .menu h3,
    footer .menu ul li a {
        font-weight: 700;
        font-size: 24px;
        line-height: 125%;
        color: #ebf5fe;
    }

    footer .menu.extra h3 {
        height: 50px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 12px;
        background: #132435;
    }

    footer .menu.extra h3:after {
        content: '';
        width: 20px;
        height: 20px;
        background-image: url('data:image/svg+xml,<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3655 0.5L20 2.13598L11.0918 11.0468C10.949 11.1904 10.7793 11.3044 10.5923 11.3822C10.4053 11.46 10.2048 11.5 10.0023 11.5C9.7998 11.5 9.5993 11.46 9.41233 11.3822C9.22536 11.3044 9.05562 11.1904 8.91288 11.0468L-4.09314e-07 2.13598L1.63454 0.501543L10 8.86493L18.3655 0.5Z" fill="%23EBF5FE" fill-opacity="0.8"/></svg>');
        background-repeat: no-repeat;
        background-position: center;
        transition: all .3s ease;
    }

    footer .menu ul li {
        padding-inline: 10px;
        margin-bottom: 20px;
    }

    footer .menu.extra ul {
        margin-block: 5px 15PX;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease;
        overflow: hidden;
    }

    footer .menu.extra h3[aria-expanded=true]:after {
        transform: rotate(180deg);
    }

    footer .menu.extra h3[aria-expanded=true] + ul {
        margin-bottom: 20px;
        max-height: 1000px;
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/*****************************************
    HEADING
******************************************/
.heading {
    flex-grow: 1;
    container-type: inline-size;
}

.heading h1,
.heading h2,
.heading h3 {
    font-weight: 700;
    font-size: clamp(1.875rem, 1.0972rem + 3.8889vw, 4.5rem);
    line-height: 118%;
    margin-block: min(20px, 2%);
}

.heading h4 {
    font-weight: 700;
    font-size: clamp(1.875rem, 1.7269rem + 0.7407vw, 2.375rem);
    line-height: 132%;
    margin: 0;
}

.heading h5 {
    font-weight: 500;
    font-size: clamp(1.125rem, 1.0139rem + 0.5556vw, 1.5rem);
    line-height: 125%;
    margin: 0;
}

.heading h1,
.heading h2,
.heading h3,
.heading h4,
.heading h5 {
    width: 100%;
    color: #ebf5fe;
    text-wrap: balance;
}

.heading h1 span,
.heading h2 span,
.heading h3 span,
.heading h4 span,
.heading h5 span {
    color: #0dfbb3;
}

.heading.error-message h5 span {
    color: red;
}

.heading p {
    font-weight: 600;
    font-size: clamp(1rem, 0.9151rem + 0.3828vw, 1.25rem);
    line-height: 145%;
    color: #899aa9;
    text-wrap: balance;
}

.heading.flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

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

.heading.has-bg {
    background: #132435;
    padding: 10px max(30px, 5%);
    border-radius: 35px;
}

.heading.wrap {
    display: flex;
    align-items: center;
    padding: 10px max(30px, 5%);
    position: relative;
    overflow: hidden;
}

.heading.wrap:before {
    content: '';
    width: 30px;
    height: 60%;
    position: absolute;
    left: -15px;
    background: linear-gradient(167deg, #57ffab 2.9%, #216c83 55%, #000f53 97.5%);
    border-radius: 35px;
}

.heading.split {
    display: flex;
    padding: max(15px, 2%) max(20px, 3%);
    gap: 20px 3%;
}

.heading.split > * {
    flex: 1;
}

.heading.split ul {
    margin-block: 1rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.heading.split ul li {
    padding: 7px 25px;
    min-height: 40%;
    font-weight: 700;
    font-size: clamp(1rem, 0.7037rem + 1.4815vw, 2rem);
    line-height: 109%;
    color: #ebf5fe;
    position: relative;
    display: flex;
    align-items: center;
}

.heading.split ul li:only-child {
    font-weight: 500;
    line-height: 145%;
    font-size: clamp(1rem, 0.9259rem + 0.3704vw, 1.25rem);
}

.heading.split ul li::before {
    width: 2px;
    height: 100%;
    display: block;
    content: '';
    background: #0dfbb3;
    position: absolute;
    top: 0;
    left: 5px;
}

.heading.split.separate {
    gap: 90px 6%;
}

.heading.split.separate::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 85%;
    transform: translate(-50%, -50%);
    border-radius: 100px;
    background: #0dfbb3;
}

@media (max-width: 768px) {
    .heading.split.separate::before {
        width: 90%;
        height: 3px;
        transform: translate(-50%, -50%) rotate(10deg);
    }

    .heading.split.separate h3:first-child {
        text-align: end;
    }
}

@media (min-width: 769px) {
    .heading.split.separate:has(h3.block-55:first-child)::before {
        left: 57.5%;
    }

    .heading.split.separate:has(h3.block-55:last-child)::before {
        left: 42.5%;
    }
}

@media (max-width: 768px) {
    .heading.wrap:before {
        content: '';
        width: 12px;
        left: -6px;
    }

    .heading.split {
        flex-direction: column;
    }

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

    .heading.has-bg {
        border-radius: 20px;
    }
}

/*****************************************
    HERO
******************************************/
section.hero > div:empty {
    background-image: url(/storage/app/media/hero-bg.png);
    background-repeat: no-repeat;
    background-position: center 75%;
    background-size: cover;
}

section.hero .btn {
    min-width: 50%;
    align-self: baseline;
}

@media (max-width: 768px) {
    section.hero {
        flex-direction: column-reverse;
    }

    section.hero .btn {
        align-self: center;
    }
    
    section.hero > div:has(> picture img) picture img {
        max-width: 60%;
    }
}

/*****************************************
    NEWS
******************************************/
section.news {
    display: flex;
    flex-direction: column;
}

section.news > div:first-child {
    margin-bottom: 20px;
    display: flex;
    gap: 4%;
}

section.news > div:last-child {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
    gap: 50px 50px;
}

section.news article {
    flex: 1;
    container-type: inline-size;
}

section.news article a {
    text-decoration: none;
}

section.news article img {
    width: 100%;
    border-radius: 20px;
}

section.news article span {
    display: block;
    margin: 20px 0px 0px 0px;
    font-weight: 500;
    font-size: 14px;
    line-height: 250%;
    color: #0dfbb3;
}

section.news article h4 {
    margin: 0px 0px 10px 0px;
    font-weight: 700;
    font-size: 24px;
    line-height: 125%;
    color: #ebf5fe;
}

section.news article p {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1rem, 0.5536rem + 2.8571cqw, 1.25rem);
    line-height: 145%;
    color: #899aa9;
    text-wrap: balance;
}

section.news > div:first-child .btn {
    align-self: center;
    margin-inline: auto 0;
}

/*****************************************
    ARTICLE
******************************************/
section.btn-back {
    margin-bottom: -20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

section.btn-back .btn.btn-rounded {
    width: 42px;
    height: 42px;
}

section.btn-back a:not([class]) {
    font-weight: 600;
    font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5625rem);
    line-height: 80%;
    color: #899aa9;
    text-decoration: none;
}

section.article {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

section.article article {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section.article article > div {
    display: flex;
    gap: 30px;
}

section.article article > div > :last-child {
    flex-shrink: 0;
    flex-basis: 190px;
}

section.article article > div > :last-child div {
    display: flex;
    gap: 10px;
}

section.article article > div > :last-child span {
    display: block;
    width: 44px;
    height: 44px;
    background: #d9d9d9;
    border-radius: 100%;
    overflow: hidden;
}

section.article article > div > :last-child p {
    font-weight: 700;
    color: #0dfbb3;
}

section.article article > div p {
    font-weight: 500;
    font-size: clamp(1rem, 0.9259rem + 0.3704vw, 1.25rem);
    line-height: 125%;
    color: #ebf5fe;
    margin-block: 0 20px;
}

section.article article > img,
section.article article > picture img {
    width: 100%;
    border-radius: 20px;
}

@media (max-width: 768px) {
    section.article article > div {
        flex-direction: column;
    }

    section.article article > div > :last-child {
        flex-basis: auto;
    }
}

/*****************************************
    PARTNERS
******************************************/
section.partners {
    margin-block: 20px;
}

section.partners > div:last-child {
    position: relative;
    overflow: hidden;
}

section.partners > div:last-child:before {
    content: '';
    display: block;
    padding-bottom: 80%;
}

section.partners > div:last-child div:first-child {
    width: 100%;
    position: absolute;
    top: 0;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    column-gap: 20px;
    opacity: 0.21;
}

section.partners > div:last-child div:nth-child(2),
section.partners > div:last-child div:nth-child(3) {
    width: 100%;
    height: 30%;
    position: absolute;
    background: linear-gradient(0deg, rgba(11, 25, 40, 0) 0%, #0b1928 100%);
}

section.partners > div:last-child div:nth-child(2) {
    top: 0;
}

section.partners > div:last-child div:nth-child(3) {
    bottom: 0;
    transform: rotate(-180deg);
}

section.partners > div .btn {
    align-self: baseline;
}

section.partners .partner {
    margin-bottom: 20px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #405c7a;
    border-radius: 16px;
}

section.partners .partner img {
    max-width: 90%;
    max-height: 75%;
    filter: grayscale(1) brightness(1.7);
}

section.partners .partner {
    margin-top: -80px;
}

section.partners .partner ~ .partner {
    margin-top: 0;
}

@media (min-width: 769px) {
    section.partners.reverse {
        flex-direction: row-reverse;
    }
}

@media (max-width: 768px) {
    section.partners .heading {
        text-align: center;
    }

    section.partners > div:first-child {
        flex: 0;
    }

    section.partners > div .btn {
        align-self: center;
    }

    section.partners .partner {
        margin-top: 0;
        padding: 25px 18px;
    }
}

/*****************************************
    PARTNERS
******************************************/
section.partners-1 .heading {
    margin-bottom: 20px;
}

section.partners-1 > div:last-child {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 15px 20px;
}

section.partners-1 > div:last-child span {
    position: relative;
    background: #132435;
    border-radius: 20px;
}

section.partners-1 > div:last-child span:before {
    content: '';
    display: block;
    padding-bottom: 55%;
}

section.partners-1 > div:last-child img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 65%;
}

@media (max-width: 768px) {
    section.partners-1 > div:last-child {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr));
        gap: 7px 10px;
    }
}

/*****************************************
    PARTNERS
******************************************/
section.partners-2 {
    padding: 20px 30px;
    border-radius: 20px;
}

section.partners-2.has-bg {
    background: #132435;
}

section.partners-2 .heading {
    margin-bottom: 35px;
}

section.partners-2 ul {
    margin-block: 0;
    padding-inline-start: 15px;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    column-gap: 30px;
}

section.partners-2 li {
    padding-inline: 10px;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: clamp(1.125rem, 1.088rem + 0.1852vw, 1.25rem);
    line-height: 125%;
    color: #fff;
}

section.partners-2 li.extra {
    font-weight: 700;
    font-size: clamp(1.25rem, 1.1759rem + 0.3704vw, 1.5rem);
    line-height: 125%;
    color: #0dfbb3;
}

section.partners-2 li::marker {
    content: url('data:image/svg+xml,<svg width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.3908 5.2881C13.046 6.27132 13.046 8.72935 11.3908 9.71258L3.94252 14.1371C2.28735 15.1203 0.218384 13.8913 0.218384 11.9248V3.07586C0.218384 1.10943 2.28735 -0.119593 3.94252 0.863623L11.3908 5.2881Z" fill="%23899AA9" /></svg>');
}

@media (max-width: 1198px) {
    section.partners-2 ul {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media (max-width: 992px) {
    section.partners-2 ul {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (max-width: 768px) {
    section.partners-2 ul {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

/*****************************************
    PROVIDERS
******************************************/
.providers {
    display: flex;
    flex-direction: column;
    gap: 4%;
    overflow: hidden;
}

.providers > div:last-child {
    width: 150%;
    margin-inline-start: -25%;
    position: relative;
    overflow: hidden;
}

.providers > div:last-child:before {
    content: '';
    display: block;
    min-height: 140px;
    padding-bottom: 15%;
}

.providers > div:last-child div:first-child {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 20px 2%;
    position: absolute;
    top: 0;
    opacity: 1.21;
}

.providers > div:last-child div:nth-child(2),
.providers > div:last-child div:nth-child(3) {
    width: 35%;
    height: 100%;
    position: absolute;
    background: linear-gradient(268deg, rgba(11, 25, 40, 0) 0%, #0b1928 50%);
}

.providers > div:last-child div:nth-child(2) {
    top: 0;
    left: 0;
}

.providers > div:last-child div:nth-child(3) {
    top: 0;
    right: 0;
    transform: rotate(-180deg);
}

.providers > div .btn {
    align-self: baseline;
}

.providers .provider {
    width: 15%;
    height: calc(50% - 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #203449;
    border-radius: 16px;
}

.providers .provider {
    margin-inline-start: -25%;
}

.providers .provider ~ .provider {
    margin-inline-start: 0;
}

.providers .provider img {
    max-width: 65%;
    max-height: 75%;
    filter: grayscale(1) brightness(1.5);
}

@media (max-width: 768px) {
    .providers {
        flex-direction: column;
    }

    .providers > div:first-child {
        flex: 0;
    }

    .providers > div .btn {
        align-self: center;
    }

    .providers .provider {
        margin-top: 0;
        height: calc(50% - 5px);
    }

    .providers > div:last-child div:first-child {
        gap: 10px 2%;
    }
}

@media (max-width: 600px) {
    .providers .provider {
        width: 25%;
        margin-inline-start: -10%;
    }
}
/*****************************************
    PROVIDERS-2
******************************************/
.providers-2 {
    display: flex;
    flex-direction: column;
    gap: 4%;
    overflow: hidden;
}

.providers-2 .heading {
    margin-bottom: 25px;
}

.providers-2 > div:last-child {
    width: 150%;
    margin-inline-start: -25%;
    position: relative;
    overflow: hidden;
}

.providers-2 > div:last-child:before {
    content: '';
    display: block;
    padding-bottom: 8.55%;
}

.providers-2 > div:last-child div:first-child {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 20px .7%;
    position: absolute;
    top: 0;
    opacity: 1.21;
}

.providers-2 > div:last-child div:nth-child(2),
.providers-2 > div:last-child div:nth-child(3) {
    width: 35%;
    height: 100%;
    position: absolute;
    background: linear-gradient(268deg, rgba(11, 25, 40, 0) 0%, #0b1928 50%);
}

.providers-2 > div:last-child div:nth-child(2) {
    top: 0;
    left: 0;
}

.providers-2 > div:last-child div:nth-child(3) {
    top: 0;
    right: 0;
    transform: rotate(-180deg);
}

.providers-2 > div .btn {
    align-self: baseline;
}

.providers-2 .provider {
    flex: 0 0 8.55%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #203449;
    border-radius: 16px;
}

.providers-2 .provider {
    margin-inline-start: -15%;
    padding: 1%;
}

.providers-2 .provider ~ .provider {
    margin-inline-start: 0;
}

.providers-2 .provider img {
    max-width: 65%;
    max-height: 75%;
}

@media (max-width: 992px) {
    .providers-2 .provider {
        flex: 0 0 10.55%;
    }

    .providers-2 > div:last-child:before {
        padding-bottom: 10.55%;
    }
}

@media (max-width: 768px) {
    .providers-2 .provider {
        flex: 0 0 12.55%;
    }

    .providers-2 > div:last-child:before {
        padding-bottom: 12.55%;
    }
}

@media (max-width: 600px) {
    .providers-2 .provider {
        flex: 0 0 25%;
    }

    .providers-2 > div:last-child:before {
        padding-bottom: 25%;
    }
}

/*****************************************
    SOLUTIONS
******************************************/
.solutions > div:last-child {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
    gap: 20px 40px;
}

.solutions article {
    display: flex;
    flex-direction: column;
    margin-top: 15%;
    border: 1px solid #405c7a;
    border-radius: 35px;
    container-type: inline-size;
}

.solutions article > div {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 20px 25px 20px;
}

.solutions article > div > div {
    display: flex;
    align-items: end;
    justify-content: end;
    flex-direction: column;
    z-index: 1;
}

.solutions article > div > div:first-of-type {
    flex: 1;
}

.solutions article:nth-child(1) {
    background: radial-gradient(80.14% 43.04% at 73.94% 6.96%, rgb(13, 251, 179) 0%, #132435 100%);
}

.solutions article:nth-child(2) {
    background: radial-gradient(80.14% 43.04% at 73.94% 6.96%, rgb(5, 215, 228) 0%, #132435 100%);
}

.solutions article:nth-child(3) {
    background: radial-gradient(80.14% 43.04% at 73.94% 6.96%, rgb(62, 147, 226) 0%, #132435 100%);
}

.solutions article h3 {
    margin: 0;
    font-weight: 700;
    font-size: clamp(2rem, 1.3304rem + 4.2857cqw, 2.375rem);
    line-height: 132%;
    color: #ebf5fe;
}

.solutions article h3 span {
    color: #0dfbb3;
}

.solutions article p {
    width: 100%;
    font-weight: 500;
    font-size: clamp(1.125rem, 0.625rem + 2.5cqw, 1.25rem);
    line-height: 130%;
    color: #a6b3bf;
}

.solutions article img {
    margin-top: -15%;
    width: 80%;
    z-index: 1;
}

/*****************************************
    SOLUTIONS-2
******************************************/
.solutions-2 {
    display: flex;
    flex-direction: column;
}

.solutions-2 > div:last-child {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
    gap: 30px 55px;
}

.solutions-2 article {
    flex: 1;
    position: relative;
    container-type: inline-size;
}

.solutions-2 article:before {
    content: '';
    display: block;
    padding-bottom: 40%;
}

.solutions-2 article > div {
    min-height: 120px;
    display: flex;
    position: absolute;
    top: 15%;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(120% 130% at -65% 30.89%, rgb(13, 251, 179) 0%, #132435 100%);
    border: 1px solid #405c7a;
    border-radius: 20px;
}

.solutions-2 article > div span:first-child {
    flex-shrink: 0;
    flex-basis: 40%;
}

.solutions-2 article > div span:first-child img {
    width: 100%;
    margin-top: -15%;
}

.solutions-2 article > div span:last-child {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: center;
    padding: 2%;
    gap: 10%;
}

.solutions-2 article h3 {
    width: 90%;
    margin: 0;
    font-weight: 700;
    font-size: clamp(1rem, 0.5rem + 2.8cqw, 2.375rem);
    line-height: 132%;
    color: #ebf5fe;
}

.solutions-2 article h3 span {
    color: #0dfbb3;
}

.solutions-2 article p {
    font-weight: 500;
    font-size: clamp(0.75rem, 0.4rem + 2cqw, 1.25rem);
    line-height: 125%;
    color: #899aa9;
    margin: 0;
}

@media (max-width: 992px) {
    .solutions-2 > div:last-child {
        gap: 15px 40px;
    }
}

@media (max-width: 768px) {
    .solutions-2 > div:last-child {
        gap: 5px 40px;
    }
}

/*****************************************
    SOLUTIONS-3
******************************************/
.solutions-3 {
    display: flex;
    flex-direction: column;
}

.solutions-3.wrap {
    padding: 40px 0px;
    background: #132435;
    border-radius: 20px;
}

.solutions-3 > div:last-child {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr));
    gap: 50px 30px;
}

.solutions-3 .heading {
    margin-bottom: 20px;
}

.solutions-3 article {
    flex: 1;
    padding: 15px;
    position: relative;
    container-type: inline-size;
}

.solutions-3 article.wrap {
    padding: 40px;
    background: #132435;
    border-radius: 20px;
}

.solutions-3 article img {
    margin: 15px auto;
}

.solutions-3 article.wrap img {
    margin: 0 auto 30px;
}

.solutions-3 article h3 {
    font-weight: 700;
    font-size: clamp(1.5rem, 0.9286rem + 2.8571cqw, 2rem);
    line-height: 132%;
    color: #ebf5fe;
    text-align: center;
    margin: 0 auto 15px;
}

.solutions-3 article h3 span {
    color: #0dfbb3;
}

.solutions-3 article p {
    font-weight: 500;
    font-size: clamp(1rem, 0.7143rem + 1.4286cqw, 1.25rem);
    line-height: 125%;
    color: #899aa9;
    margin: 0;
}

.solutions-3 article h4 {
    font-weight: 500;
    font-size: clamp(1rem, 0.7143rem + 1.4286cqw, 1.25rem);
    line-height: 125%;
    color: #fff;
    margin-block: 10px;
}

.solutions-3 article ul {
    margin-block: 0;
    padding-inline-start: 15px;
}

.solutions-3 article li {
    padding-inline: 10px;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: clamp(1rem, 0.7143rem + 1.4286cqw, 1.25rem);
    line-height: 125%;
    color: #fff;
}

.solutions-3 article li::marker {
    content: url('data:image/svg+xml,<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.7232 4.78614C13.3784 5.76937 13.3784 8.2274 11.7232 9.21062L4.27492 13.6351C2.61975 14.6183 0.550781 13.3893 0.550781 11.4229V2.57391C0.550781 0.607474 2.61975 -0.621546 4.27492 0.36167L11.7232 4.78614Z" fill="%230DFBB3"/></svg>');
}

@media (max-width: 768px) {
    .solutions-3 > div:last-child {
        gap: 20px 30px;
    }
}

/*****************************************
    ABOUT-US
******************************************/
section.about-us > div .btn {
    align-self: baseline;
    margin: 10px 0 0;
}

@media (max-width: 768px) {
    section.about-us {
        flex-direction: column-reverse;
    }

    section.about-us .heading {
        text-align: center;
    }

    section.about-us > div .btn {
        margin: 15px auto 10%;
    }
}
/*****************************************
    CONTACT-US
******************************************/
section.contact-us {
    gap: 20px 20%;
    margin-top: 20px;
    position: relative;
    z-index: 0;
}

section.contact-us > * {
    z-index: 1;
}

section.contact-us:before {
    content: '';
    position: absolute;
    top: -30%;
    width: 100%;
    height: 150%;
    background-image: url(/storage/app/media/contact-us.png);
    background-repeat: no-repeat;
    z-index: 0;
}

section.contact-us form .btn {
    align-self: flex-end;
}

@media (max-width: 768px) {
    section.contact-us {
        gap: 20px 3%;
    }

    section.contact-us:before {
        display: none;
    }

    section.contact-us .heading {
        text-align: center;
    }

    section.contact-us form .btn {
        align-self: center;
    }
}

/*****************************************
    CAREERS
******************************************/
section.careers {
    display: flex;
    gap: 20px 3%;
}

section.careers .careers-list {
    flex-grow: 1;
    display: grid;
    grid-auto-rows: 1fr;
    row-gap: 20px;
}

section.careers .careers-filter {
    flex: 0 0 max(275px, 30%);
    height: fit-content;
    padding: 30px 20px;
    border-radius: 20px;
    background: #0e1d2d;
}

section.careers .careers-filter form {
    position: relative;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

section.careers .careers-filter form:before {
    content: '';
    position: absolute;
    top: -35px;
    width: 100%;
    height: 0px;
    border: 1px solid #132435;
}

section.careers .career {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 27px 30px;
    background: #132435;
    border-radius: 20px;
}

section.careers .career > div {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px 15px;
}

section.careers .career .heading {
    flex-basis: 100%;
}

section.careers .career .badge {
    border: 1px solid #0dfbb3;
    border-radius: 100px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: clamp(1rem, 0.9259rem + 0.3704vw, 1.25rem);
    line-height: 125%;
    color: #57ffab;
}

section.careers .career .label {
    font-weight: 500;
    font-size: clamp(1rem, 0.9259rem + 0.3704vw, 1.25rem);
    line-height: 125%;
    color: #899aa9;
}

section.careers .career .label span {
    color: #57ffab;
}

section.careers .career .btn {
    align-self: center;
    margin-inline: auto 0;
    flex: none;
}

section.careers .select-selected {
    height: 60px;
}

section.careers .select-items div,
section.careers .select-selected {
    font-size: clamp(1rem, 0.9259rem + 0.3704vw, 1.25rem);
    line-height: 125%;
    color: #ebf5fe;
    padding: 10px 20px;
}

@media (max-width: 768px) {
    section.careers {
        flex-direction: column-reverse;
    }

    section.careers .careers-filter {
        flex: 0;
    }

    section.careers .careers-filter form {
        margin-top: 60px;
    }

    section.careers .career .heading {
        order: 2;
    }

    section.careers .career .badge {
        order: 1;
        padding: 5px 15px;
        color: #ebf5fe;
    }

    section.careers .career .label {
        order: 3;
    }

    section.careers .career .btn {
        align-self: baseline;
    }
}

/*****************************************
    CAREERS
******************************************/
section.btn-back {
    margin-bottom: -20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

section.btn-back .btn.btn-rounded {
    width: 42px;
    height: 42px;
}

section.btn-back a:not([class]) {
    font-weight: 600;
    font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5625rem);
    line-height: 80%;
    color: #899aa9;
    text-decoration: none;
}

section.career {
    display: flex;
    gap: 20px 3%;
}

section.career .position {
    flex: 0 0 max(325px, 49%);
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px 15px;
    padding: 30px 50px;
    border-radius: 20px;
    background: #132435;
}

section.career .description {
    flex-grow: 1;
}

section.career .description * {
    font-weight: 500;
    font-size: clamp(1rem, 0.9259rem + 0.3704vw, 1.25rem);
    line-height: 125%;
    color: #ebf5fe;
}

section.career .description h3 {
    margin-block: 70px 30px;
    font-weight: 700;
    font-size: clamp(1.5rem, 1.3519rem + 0.7407vw, 2rem);
    line-height: 109%;
    color: #0dfbb3;
}

section.career .description ul {
    padding-inline: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

section.career .description ul li::marker {
    font-size: 12px;
}

section.career .description > * {
    margin-block: 0 20px;
}

section.career .position .heading {
    flex-basis: 100%;
}

section.career .position .badge {
    border: 1px solid #0dfbb3;
    border-radius: 100px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: clamp(1rem, 0.9259rem + 0.3704vw, 1.25rem);
    line-height: 125%;
    color: #57ffab;
}

section.career .position .label {
    font-weight: 500;
    font-size: clamp(1rem, 0.9259rem + 0.3704vw, 1.25rem);
    line-height: 125%;
    color: #899aa9;
}

section.career .position .label span {
    color: #57ffab;
}

section.career .position .btn.btn-primary {
    padding: 18px 40px;
}

@media (max-width: 768px) {
    section.career {
        flex-direction: column;
    }

    section.career .position {
        flex: 0;
    }

    section.career .description h3 {
        margin-block: 35px 20px;
    }
}


/*****************************************
    Accordion Structure
******************************************/
.accordion {
    margin-bottom: 10px;
    background: #132435;
    border-radius: 20px;
    transition: max-height 0.3s ease;
    position: relative;
}

/* Gradient border for accordion */
.accordion::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(167deg, #57ffab 2.9%, #216c83 55%, #000f53 97.5%);
    background: linear-gradient(180deg, #57ffab 0%, #216c83 55%, #000f53 100%);
    border-radius: 20px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Accordion button styling */
.accordion > button {
    width: 100%;
    padding: 20px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-weight: 700;
    font-size: clamp(1.125rem, 1.0139rem + 0.5556vw, 1.5rem);
    line-height: 125%;
    text-align: start;
    color: #ebf5fe;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

.accordion > button svg,
.accordion > button img {
    transition: transform 0.3s ease;
    flex-basis: 15px;
    flex-shrink: 0;
}

/* Accordion content (hidden by default) */
.accordion > div {
    max-height: 0;
    overflow: hidden;
    padding: 0 16px;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

/* Paragraph styling inside accordion */
.accordion > div p {
    font-weight: 500;
    font-size: clamp(1rem, 0.9259rem + 0.3704vw, 1.25rem);
    line-height: 125%;
    color: #a6b3bf;
}

/*****************************************
    aria-expanded State
******************************************/
.accordion[aria-expanded=true]::before {
    opacity: 1;
}

.accordion[aria-expanded=true] > button {
    padding: 20px 16px 7px;
}

.accordion[aria-expanded=true] > button svg,
.accordion[aria-expanded=true] > button img {
    transform: rotate(180deg);
}

.accordion[aria-expanded=true] > button + div {
    max-height: 1000px;
    padding: 0 16px 20px;
    opacity: 1;
}

/*****************************************
    SOLUTIONS
******************************************/
.timeline .heading {
    margin-bottom: 40px;
}

.timeline > ul:last-child {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px 160px;
}

.timeline > ul:last-child li {
    position: relative;
    display: flex;
    gap: 10px 40px;
    padding: 20px;
    margin-block: -10px;
    border-radius: 20px;
    backdrop-filter: blur(12px);
    background: #132435;
    z-index: 1;
}

.timeline > ul:last-child li:last-child {
    z-index: 0;
}

.timeline > ul:last-child li:nth-of-type(odd) {
    flex-direction: row-reverse;
    text-align: end;
}

.timeline > ul:last-child li:nth-of-type(even) {
}

.timeline > ul:last-child li:nth-of-type(odd):before,
.timeline > ul:last-child li:nth-of-type(even):before {
    content: attr(data-step);
    width: 80px;
    height: 72px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 32px;
    line-height: 109%;
    color: #132435;
    z-index: 1;
}

.timeline > ul:last-child li:nth-of-type(odd):before {
    right: -120px;
    padding-inline: 8px 0px;
    background-image: url('data:image/svg+xml,<svg width="91" height="100" viewBox="0 0 91 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.80115 40.0051C-1.9337 44.4473 -1.93372 55.5527 5.80114 59.9949L72.7374 98.4366C80.4722 102.879 90.1408 97.326 90.1408 88.4417L90.1408 11.5583C90.1408 2.67398 80.4723 -2.87874 72.7374 1.56342L5.80115 40.0051Z" fill="%230DFBB3"/></svg>');
}

.timeline > ul:last-child li:nth-of-type(even):before {
    left: -120px;
    padding-inline: 0px 8px;
    background-image: url('data:image/svg+xml,<svg width="91" height="100" viewBox="0 0 91 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M85.1988 40.0051C92.9337 44.4473 92.9337 55.5527 85.1989 59.9949L18.2626 98.4366C10.5278 102.879 0.859157 97.326 0.859158 88.4417L0.859161 11.5583C0.859161 2.67398 10.5277 -2.87874 18.2626 1.56342L85.1988 40.0051Z" fill="%2300C5DB"/></svg>');
}

.timeline > ul:last-child li:nth-of-type(odd):after,
.timeline > ul:last-child li:nth-of-type(even):after {
    content: '';
    width: 6px;
    height: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #0B1928;
    background-image: url('data:image/svg+xml,<svg width="6" height="20" xmlns="http://www.w3.org/2000/svg"><circle cx="3" cy="7" r="3" fill="%23A6B3BF" /></svg>');
    background-repeat: space;
    background-position: center;
    background-size: contain;
    z-index: 0;
}

.timeline > ul:last-child li:nth-of-type(odd):after {
    right: -83px;
}

.timeline > ul:last-child li:nth-of-type(even):after {
    left: -83px;
}

.timeline > ul:last-child li:first-child:after {
    top: 100%;
}

.timeline > ul:last-child li:last-child:after {
    top: 0%;
}

.timeline > ul:last-child li:nth-of-type(even) {
    grid-column: 2;
}

.timeline > ul:last-child li:nth-of-type(1) {
    grid-row: 1;
}

.timeline > ul:last-child li:nth-of-type(2) {
    grid-row: 2;
}

.timeline > ul:last-child li:nth-of-type(3) {
    grid-row: 3;
}

.timeline > ul:last-child li:nth-of-type(4) {
    grid-row: 4;
}

.timeline > ul:last-child li:nth-of-type(5) {
    grid-row: 5;
}

.timeline > ul:last-child li:nth-of-type(6) {
    grid-row: 6;
}

.timeline > ul:last-child li:nth-of-type(7) {
    grid-row: 7;
}

.timeline > ul:last-child li:nth-of-type(8) {
    grid-row: 8;
}

.timeline > ul:last-child li:nth-of-type(9) {
    grid-row: 9;
}

.timeline > ul:last-child li:nth-of-type(10) {
    grid-row: 10;
}

.timeline > ul:last-child li h3 {
    font-weight: 700;
    font-size: clamp(1.125rem, 0.8657rem + 1.2963vw, 2rem);
    line-height: 119%;
    color: #fff;
}

.timeline > ul:last-child li p {
    font-weight: 500;
    font-size: clamp(0.875rem, 0.7639rem + 0.5556vw, 1.25rem);
    line-height: 145%;
    color: #a6b3bf;
}

@media (max-width: 992px) {
    .timeline > ul:last-child li {
        flex-wrap: wrap;
    }

    .timeline > ul:last-child li img {
        width: 80px;
        margin: 0;
        align-self: baseline;
    }
}

@media (max-width: 768px) {
    .timeline > ul:last-child {
        display: flex;
        flex-wrap: wrap;
        justify-content: end;
        gap: 20px;
    }

    .timeline > ul:last-child {
        justify-content: end;
    }

    .timeline > ul:last-child li {
        flex: 0 0 calc(100% - 80px);
        margin-block: 0;
    }

    .timeline > ul:last-child li:nth-of-type(odd):before,
    .timeline > ul:last-child li:nth-of-type(even):before {
        width: 54px;
        height: 49px;
        padding-inline: 0px 8px;
        left: -70px;
        right: auto;
        font-size: 20px;
    }

    .timeline > ul:last-child li:nth-of-type(odd):before {
        background-image: url('data:image/svg+xml,<svg width="49" height="54" viewBox="0 0 49 54" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M45.8465 21.6028C50.0511 24.0015 50.0512 29.9985 45.8465 32.3972L9.46041 53.1558C5.25579 55.5545 1.5174e-06 52.5561 1.72711e-06 47.7585L3.54187e-06 6.24148C3.75158e-06 1.44395 5.25578 -1.55452 9.4604 0.844247L45.8465 21.6028Z" fill="%230DFBB3"/></svg>');
    }

    .timeline > ul:last-child li:nth-of-type(even):before {
        background-image: url('data:image/svg+xml,<svg width="49" height="54" viewBox="0 0 49 54" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M45.8465 21.6028C50.0511 24.0015 50.0512 29.9985 45.8465 32.3972L9.46041 53.1558C5.25579 55.5545 1.5174e-06 52.5561 1.72711e-06 47.7585L3.54187e-06 6.24148C3.75158e-06 1.44395 5.25578 -1.55452 9.4604 0.844247L45.8465 21.6028Z" fill="%2300C5DB"/></svg>');
    }

    .timeline > ul:last-child li:nth-of-type(odd):after,
    .timeline > ul:last-child li:nth-of-type(even):after {
        height: 120%;
        left: -50px;
        right: auto;
    }

    .timeline > ul:last-child li:nth-of-type(odd) {
        flex-direction: row;
        text-align: start;
    }

    .timeline > ul:last-child li img {
        width: 50px;
    }
}

.timeline.extra > ul:last-child li {
    padding: 58px 30px;
}

.timeline.extra > ul:last-child li:nth-of-type(odd):before,
.timeline.extra > ul:last-child li:nth-of-type(even):before {
    width: 142px;
    height: 128px;
}

@media (max-width: 768px) {
    .timeline.extra > ul:last-child li:nth-of-type(odd):before,
    .timeline.extra > ul:last-child li:nth-of-type(even):before {
        width: 65px;
        height: 58px;
    }
}

/* CUSTOM SELECT */
/* the container must be positioned relative: */
.custom-select {
    width: 100%;
    position: relative;
    /*color: #EBF5FE;*/
}

/* hide original SELECT element: */
.custom-select select {
    display: none;
}

.select-selected {
    padding: 0px 20px;
    display: flex;
    align-items: center;
    background: #132435;
    border: 1px solid #405c7a;
    border-radius: 16px;
}

/* style the arrow inside the select element: */
.select-selected:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background-image: url('data:image/svg+xml,<svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.5289 2.31173e-07L18 1.48725L9.98257 9.58796C9.85411 9.71853 9.70134 9.82216 9.53307 9.89288C9.3648 9.96359 9.18434 10 9.00208 10C8.81982 10 8.63937 9.96359 8.47109 9.89288C8.30282 9.82216 8.15006 9.71853 8.02159 9.58796L-3.72104e-07 1.48726L1.47109 0.00140184L9 7.60448L16.5289 2.31173e-07Z" fill="%23EBF5FE" fill-opacity="0.8" /></svg>');
    background-repeat: no-repeat;
    background-position: center;
    transition: all .3s ease;
}

/* point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active {
    border-color: #0DFBB3;
}

.select-selected.select-arrow-active:after {
    transform: rotate(180deg) translateY(50%);
}

/* style the items (options), including the selected item: */
.select-items div, .select-selected {
    font-weight: 500;
    padding: 12px 12px;
    font-size: clamp(1rem, 0.963rem + 0.1852vw, 1.125rem);
    cursor: pointer;
    user-select: none;
}

/* style items (options): */
.select-items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    margin-top: 5px;
    background-color: #203449;
    border-radius: 16px;
    overflow: hidden;
}

/* hide the items when the select box is closed: */
.select-hide {
    display: none;
}

.select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}

/*****************************************
    COMPARISON-TABLE
******************************************/
.comparison-table .table-header {
    display: grid;
    grid-template-columns: 1.8fr repeat(3, 1fr);
    background-color: #132435;
    border: 1px solid #394c60;
    border-bottom: none;
    border-radius: 20px 20px 0 0;
}

.comparison-table .table-header > div {
    padding: 23px 12px;
    font-weight: 700;
    font-size: clamp(1rem, 0.9259rem + 0.3704vw, 1.25rem);
    line-height: 125%;
    text-align: center;
    color: #a6b3bf;
}

.comparison-table .table-header > div:not(:last-child) {
    border-right: 1px solid #394c60;
}

.comparison-table .table-item {
    border-left: 1px solid #394c60;
    border-right: 1px solid #394c60;
}

.comparison-table .table-item:last-of-type {
    border-bottom: 1px solid #394c60;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
}

.comparison-table .table-item > button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-weight: 700;
    font-size: clamp(1.25rem, 1.0278rem + 1.1111vw, 2rem);
    line-height: 119%;
    text-align: center;
    color: #a6b3bf;
    background: #132435;
    border-top: 1px solid #394c60;
    padding: 17px 12px;
    cursor: pointer;
    outline: none;
    transition: background 0.3s;
}

.comparison-table .table-item > button[aria-expanded=true] {
    color: #0dfbb3;
}

.comparison-table .table-item > button svg {
    width: clamp(16px, 4vw, 28px);
    transition: transform 0.3s;
}

.comparison-table .table-item > button[aria-expanded=true] svg {
    transform: rotate(135deg);
}

.comparison-table .table-item > button[aria-expanded=true] svg path {
    fill: #0dfbb3;
}

.comparison-table .table-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-color: #132435;
}

.comparison-table .table-item[aria-expanded=true] .table-content {
    max-height: 1000px;
}

.comparison-table .table-row {
    display: grid;
    grid-template-columns: 1.8fr repeat(3, 1fr);
    border-top: 1px solid #394c60;
}

.comparison-table .table-row > div {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
    font-weight: 600;
    font-size: clamp(1rem, 0.9259rem + 0.3704vw, 1.25rem);
    line-height: 110%;
    text-align: center;
    color: #a6b3bf;
}

.comparison-table .table-row > div:first-child {
    font-weight: 500;
    text-align: start;
    justify-content: start;
    color: #ebf5fe;
}

.comparison-table .table-row > div:not(:last-child) {
    border-right: 1px solid #394c60;
}

.comparison-table .table-row:nth-child(odd) {
    background: #203449;
}

.comparison-table .table-row:nth-child(even) {
    background: #172b40;
}

@media (max-width: 768px) {
    .comparison-table .table-row,
    .comparison-table .table-header {
        grid-template-columns: repeat(3, 1fr);
    }

    .comparison-table .table-row > div:first-child {
        grid-column: 1 / 4;
        border-bottom: solid 1px #394c60;
    }

    .comparison-table .table-header > div:first-child {
        display: none;
    }
}