/*
Theme Name: Syntphony
Theme URI: https://syntphony.com
Author: Syntphony
Author URI: https://syntphony.com
Description: Tema base corporativo para Syntphony
Version: 1.0.0
Text Domain: syntphony
*/

/* ==========================================================================
   Font Face
   ========================================================================== */

@font-face {
    font-family: "Type";
    src: url('assets/fonts/NotoSans-Regular-webfont.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Type";
    src: url('assets/fonts/NotoSans-Bold-webfont.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Headings";
    src: url('assets/fonts/Noto-Serif-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Material Symbols Rounded';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/material-symbols-rounded.woff2') format('woff2');
    font-display: swap;
}

.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

/* ==========================================================================
Icons
========================================================================== */

/* ==========================================================================
   Base / Reset
   ========================================================================== */
main#primary:focus {
    outline: 3px solid currentColor;
    outline-offset: -3px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

*:not(dialog) {
    margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    text-wrap: balance;
}

/* ==========================================================================
   Variables
   ========================================================================== */
:root {
    /*Body text*/
    --font-base: clamp(.875rem, 0.9rem + 0.4vw, 1rem);
    --font-family-base: "Type", sans-serif;
    --font-family-headings: "Headings", serif;
    --font-family-icons: "Material Symbols Rounded";

    /* Headings */
    --h1: clamp(2.25rem, 1.8rem + 2vw, 3.125rem);
    --h2: clamp(1.875rem, 1.5rem + 1.5vw, 2.25rem);
    --h3: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
    --h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --h5: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
    --h6: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-xxs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: var(--font-base);
    --text-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-xl: clamp(1.125rem, 0.95rem + 0.25vw, 1.25rem);
    --text-2xl: clamp(1.5rem, 1.45rem + 1vw, 2rem);

    /* =========================
     Color palette
  ========================== */
    --blue-ntt-10: #070f26;
    --blue-ntt-15: #012e4c;
    --blue-ntt-20: #013d65;
    --blue-ntt-30: #004A7A;
    --blue-ntt-40: #005B96;
    --blue-ntt-50: #0072bc;
    --blue-ntt-60: #038be3;
    --blue-ntt-65: #19A3FC;
    --blue-ntt-70: #68C3FD;
    --blue-ntt-80: #9AD7FE;
    --blue-ntt-90: #b3e1fe;
    --blue-ntt-95: #e6f5ff;

    --turquoise-ntt-10: #CCF9FB;
    --turquoise-ntt-30: #80EFF6;
    --turquoise-ntt-50: #00DFED;
    --turquoise-ntt-70: #009CA6;
    --turquoise-ntt-90: #009CA6;

    --gray-ntt-00: #121212;
    --gray-ntt-10: #1a1a1a;
    --gray-ntt-15: #262626;
    --gray-ntt-20: #333333;
    --gray-ntt-30: #4d4d4d;
    --gray-ntt-40: #666666;
    --gray-ntt-50: #949494;
    --gray-ntt-60: #a1a1a1;
    --gray-ntt-65: #adadad;
    --gray-ntt-70: #bfbfbf;
    --gray-ntt-80: #d9d9d9;
    --gray-ntt-90: #e8e8e8;
    --gray-ntt-95: #f2f2f2;
    --gray-ntt-100: #FFFFFF;

    --slate-gray-ntt-10: #131b20;
    --slate-gray-ntt-15: #1d2830;
    --slate-gray-ntt-20: #263540;
    --slate-gray-ntt-30: #2E404D;
    --slate-gray-ntt-40: #3d5566;
    --slate-gray-ntt-50: #506f86;
    --slate-gray-ntt-60: #86a2b7;
    --slate-gray-ntt-65: #8fa9bc;
    --slate-gray-ntt-70: #9fb6c6;
    --slate-gray-ntt-80: #bfced9;
    --slate-gray-ntt-90: #dfe7ec;
    --slate-gray-ntt-95: #EFF3F5;

    --gray-base-ntt: #040914;
    --gray-darkest-ntt: #151d2c;
    --gray-middle-ntt: #1f2a3a;
    --gray-darker-ntt: #213543;
    --gray-dark-ntt: #374956;
    --gray-blue-ntt: #586671;
    --gray-ntt: #828c94;
    --gray-light-ntt: #abb3b8;
    --gray-lightly-ntt: #c0c6ca;
    --gray-lighter-ntt: #d5d9db;
    --gray-lightest-ntt: #ececec;
    --gray-uber-light-ntt: #f8f8f8;

    --green-ntt-10: #003317;
    --green-ntt-15: #004D23;
    --green-ntt-30: #068941;
    --green-ntt-90: #CDFEE3;
    --green-ntt-65: #38f990;

    --yellow-40: #CA7902;
    --yellow-65: #FDB74F;

    --red-10: #330600;
    --red-15: #4C0900;
    --red-30: #991100;
    --red-65: #FF604D;
    --red-90: #FFC9C2;

    /* =========================
     Brand semantic colors
  ========================== */

    --color-primary-default: var(--blue-ntt-50);
    --color-primary-hovered: var(--blue-ntt-40);
    --color-primary-link-hovered: var(--color-primary-hovered);
    --color-primary-pressed: var(--blue-ntt-20);
    --color-secondary-hovered: var(--blue-ntt-40);
    --color-secondary-pressed: var(--blue-ntt-20);
    --color-primary-inverse: var(--gray-ntt-100);
    --color-primary-subtle-default: var(--blue-ntt-65);
    --color-primary-subtle-hovered: var(--blue-ntt-90);
    --color-primary-subtle-pressed: var(--blue-ntt-95);
    --color-success-default: var(--green-ntt-30);
    --color-surface-success: var(--green-ntt-90);
    --color-danger-default: var(--red-30);
    --color-surface-danger: var(--red-90);
    --color-warning-default: var(--yellow-40);
    --color-info-default: var(--blue-ntt-50);
    --color-headings: var(--blue-ntt-10);
    --color-body: var(--slate-gray-ntt-30);
    --color-placeholder: var(--slate-gray-ntt-30);
    --color-surface-primary: var(--gray-ntt-100);
    --color-surface-primary-inverse: var(--blue-ntt-10);
    --color-surface-secondary: var(--gray-lightest-ntt);
    --color-surface-tertiary: var(--gray-uber-light-ntt);
    --color-border-default: var(--gray-light-ntt);
    --color-border-subtle-default: var(--gray-lighter-ntt);
    --color-input-default: var(--gray-light-ntt);
    --color-input-hovered: var(--color-primary-hovered);
    --color-border-primary: var(--color-primary-default);
    --color-border-hovered: var(--color-primary-hovered);
    --nav-tabs-active-link-hover-color: var(var(--gray-dark-ntt));
    --color-surface-primary-inverse-rgb: 7, 15, 38;
    --text-shadow: 2px 2px 5px rgba(0, 0, 0, .75);
    /* =========================
     Spacing
  ========================== */
    --spacing-00: 0rem;
    --spacing-025: .125rem;
    --spacing-050: .25rem;
    --spacing-100: .5rem;
    --spacing-125: .625rem;
    --spacing-150: .75rem;
    --spacing-200: 1rem;
    --spacing-250: 1.25rem;
    --spacing-300: 1.5rem;
    --spacing-400: 2rem;
    --spacing-500: 2.25rem;
    --spacing-600: 3rem;
    --spacing-700: 3.5rem;
    --spacing-800: 4rem;
    --spacing-900: 4.5rem;
    --spacing-1000: 5rem;
    --spacing-1100: 5.5rem;
    --spacing-1200: 6rem;
    --spacing-1300: 6.5rem;
    --spacing-1400: 7rem;

    /* =========================
     Size
  ========================== */
    --size-050: .25rem;
    --size-100: .5rem;
    --size-150: .75rem;
    --size-200: 1rem;
    --size-250: 1.25rem;
    --size-300: 1.5rem;
    --size-400: 2rem;
    --size-500: 2.25rem;
    --size-600: 3rem;
    --size-700: 3.5rem;
    --size-800: 4rem;
    --size-900: 4.5rem;
    --size-1000: 5rem;
    --size-2000: 5.5rem;
    --size-3000: 6rem;

    /* =========================
   Border-radius
========================== */
    --border-radius-000: 0rem;
    --border-radius-025: .125rem;
    --border-radius-050: .25rem;
    --border-radius-075: .375rem;
    --border-radius-100: .5rem;
    --border-radius-150: .75rem;
    --border-radius-200: 1rem;
    --border-radius-250: 1.25rem;
    --border-radius-300: 1.5rem;
    --border-radius-400: 2rem;
    --border-radius-500: 3rem;
    --border-radius-999: 1000rem;

    /* ==========================================================================
     Breakpoints
     ========================================================================== */

    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1440px;
    --breakpoint-2xl: 1680px;

    /* ==========================================================================
     Container widths
     ========================================================================== */

    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-xxl: 1440px;
    --container-2xl: 1680px;
    --container-fluid: 100%;

}

.dark,
.section--dark {
    --color-primary-default: var(--blue-ntt-65);
    --color-primary-hovered: var(--blue-ntt-80);
    --color-primary-link-hovered: var(--color-primary-default);
    --color-primary-pressed: var(--blue-ntt-80);
    --color-primary-inverse: var(--blue-ntt-10);
    --color-primary-subtle-default: var(--blue-ntt-35);
    --color-primary-subtle-hovered: var(--blue-ntt-20);
    --color-primary-subtle-pressed: var(--blue-ntt-10);
    --color-success-default: var(--green-ntt-65);
    --color-surface-success: var(--green-ntt-15);
    --color-danger-default: var(--red-65);
    --color-surface-danger: var(--red-15);
    --color-warning-default: var(--yellow-65);
    --color-info-default: var(--blue-ntt-40);
    --color-headings: var(--gray-ntt-100);
    --color-body: var(--gray-ntt-90);
    --color-surface-primary: var(--blue-ntt-10);
    --color-surface-primary-inverse: var(--gray-ntt-100);
    --color-surface-secondary: var(--gray-darker-ntt);
    --color-surface-tertiary: var(--gray-darkest-ntt);
    --color-surface-secondary-rgb: 7, 15, 38;
    --color-border-default: var(--gray-dark-ntt);
    --color-border-subtle-default: var(--gray-darker-ntt);
    --color-input-default: var(--gray-dark-ntt);
    --color-input-hovered: var(--color-primary-hovered);
    --color-border-primary: var(--color-primary-default);
    --color-border-hovered: var(--color-primary-hovered);

}

/* ==========================================================================
   FLUID GRID SYSTEM (12 COLUMNS)
   ========================================================================== */

/* Main container (Row) */
/* ==========================================================================
   MAIN CONTAINER (ROW)
   ========================================================================== */
.custom-row {
    display: grid;
    /* Por defecto actúa como rejilla de 12 */
    grid-template-columns: repeat(var(--row-cols, 12), 1fr);
    gap: var(--spacing-300);
    width: 100%;
    box-sizing: border-box;
    /* Habilita el centrado automático si se usan las clases row-cols */
    justify-content: center;
}

/* Comportamiento base si los hijos usan clases col-* (Móvil < 576px) */
.custom-row>[class*="col-"]:not([class^="col-"]):not([class*=" col-"]) {
    grid-column: span 12;
}

/* Si el contenedor controla las columnas (row-cols), los hijos fluyen de forma natural */
.custom-row[class*="row-cols-"]>* {
    grid-column: auto;
}

/* ==========================================================================
   COLUMNAS GENÉRICAS (Sin breakpoint - Móvil hacia arriba)
   ========================================================================== */
.col-1 {
    grid-column: span 1;
}

.col-2 {
    grid-column: span 2;
}

.col-3 {
    grid-column: span 3;
}

.col-4 {
    grid-column: span 4;
}

.col-5 {
    grid-column: span 5;
}

.col-6 {
    grid-column: span 6;
}

.col-7 {
    grid-column: span 7;
}

.col-8 {
    grid-column: span 8;
}

.col-9 {
    grid-column: span 9;
}

.col-10 {
    grid-column: span 10;
}

.col-11 {
    grid-column: span 11;
}

.col-12 {
    grid-column: span 12;
}

/* ==========================================================================
   ROW COLS DINÁMICOS Y CENTRADOS (Móvil)
   ========================================================================== */
.row-cols-1 {
    --row-cols: 1;
    grid-template-columns: repeat(auto-fit, minmax(calc((100% - (1 - 1) * var(--spacing-300)) / 1), calc((100% - (1 - 1) * var(--spacing-300)) / 1)));
}

.row-cols-2 {
    --row-cols: 2;
    grid-template-columns: repeat(auto-fit, minmax(calc((100% - (2 - 1) * var(--spacing-300)) / 2), calc((100% - (2 - 1) * var(--spacing-300)) / 2)));
}

.row-cols-3 {
    --row-cols: 3;
    grid-template-columns: repeat(auto-fit, minmax(calc((100% - (3 - 1) * var(--spacing-300)) / 3), calc((100% - (3 - 1) * var(--spacing-300)) / 3)));
}

.row-cols-4 {
    --row-cols: 4;
    grid-template-columns: repeat(auto-fit, minmax(calc((100% - (4 - 1) * var(--spacing-300)) / 4), calc((100% - (4 - 1) * var(--spacing-300)) / 4)));
}

.row-cols-6 {
    --row-cols: 6;
    grid-template-columns: repeat(auto-fit, minmax(calc((100% - (6 - 1) * var(--spacing-300)) / 6), calc((100% - (6 - 1) * var(--spacing-300)) / 6)));
}

.row-cols-12 {
    --row-cols: 12;
    grid-template-columns: repeat(auto-fit, minmax(calc((100% - (12 - 1) * var(--spacing-300)) / 12), calc((100% - (12 - 1) * var(--spacing-300)) / 12)));
}


/* ==========================================================================
   BREAKPOINTS (MEDIA QUERIES)
   ========================================================================== */

/* Small (sm): >= 576px */
@media (min-width: 576px) {
    .col-sm-1 {
        grid-column: span 1;
    }

    .col-sm-2 {
        grid-column: span 2;
    }

    .col-sm-3 {
        grid-column: span 3;
    }

    .col-sm-4 {
        grid-column: span 4;
    }

    .col-sm-5 {
        grid-column: span 5;
    }

    .col-sm-6 {
        grid-column: span 6;
    }

    .col-sm-7 {
        grid-column: span 7;
    }

    .col-sm-8 {
        grid-column: span 8;
    }

    .col-sm-9 {
        grid-column: span 9;
    }

    .col-sm-10 {
        grid-column: span 10;
    }

    .col-sm-11 {
        grid-column: span 11;
    }

    .col-sm-12 {
        grid-column: span 12;
    }

    .row-cols-sm-1 {
        --row-cols: 1;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (1 - 1) * var(--spacing-300)) / 1), calc((100% - (1 - 1) * var(--spacing-300)) / 1)));
    }

    .row-cols-sm-2 {
        --row-cols: 2;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (2 - 1) * var(--spacing-300)) / 2), calc((100% - (2 - 1) * var(--spacing-300)) / 2)));
    }

    .row-cols-sm-3 {
        --row-cols: 3;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (3 - 1) * var(--spacing-300)) / 3), calc((100% - (3 - 1) * var(--spacing-300)) / 3)));
    }

    .row-cols-sm-4 {
        --row-cols: 4;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (4 - 1) * var(--spacing-300)) / 4), calc((100% - (4 - 1) * var(--spacing-300)) / 4)));
    }

    .row-cols-sm-6 {
        --row-cols: 6;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (6 - 1) * var(--spacing-300)) / 6), calc((100% - (6 - 1) * var(--spacing-300)) / 6)));
    }

    .row-cols-sm-12 {
        --row-cols: 12;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (12 - 1) * var(--spacing-300)) / 12), calc((100% - (12 - 1) * var(--spacing-300)) / 12)));
    }
}

/* Medium (md): >= 768px */
@media (min-width: 768px) {
    .col-md-1 {
        grid-column: span 1;
    }

    .col-md-2 {
        grid-column: span 2;
    }

    .col-md-3 {
        grid-column: span 3;
    }

    .col-md-4 {
        grid-column: span 4;
    }

    .col-md-5 {
        grid-column: span 5;
    }

    .col-md-6 {
        grid-column: span 6;
    }

    .col-md-7 {
        grid-column: span 7;
    }

    .col-md-8 {
        grid-column: span 8;
    }

    .col-md-9 {
        grid-column: span 9;
    }

    .col-md-10 {
        grid-column: span 10;
    }

    .col-md-11 {
        grid-column: span 11;
    }

    .col-md-12 {
        grid-column: span 12;
    }

    .row-cols-md-1 {
        --row-cols: 1;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (1 - 1) * var(--spacing-300)) / 1), calc((100% - (1 - 1) * var(--spacing-300)) / 1)));
    }

    .row-cols-md-2 {
        --row-cols: 2;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (2 - 1) * var(--spacing-300)) / 2), calc((100% - (2 - 1) * var(--spacing-300)) / 2)));
    }

    .row-cols-md-3 {
        --row-cols: 3;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (3 - 1) * var(--spacing-300)) / 3), calc((100% - (3 - 1) * var(--spacing-300)) / 3)));
    }

    .row-cols-md-4 {
        --row-cols: 4;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (4 - 1) * var(--spacing-300)) / 4), calc((100% - (4 - 1) * var(--spacing-300)) / 4)));
    }

    .row-cols-md-6 {
        --row-cols: 6;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (6 - 1) * var(--spacing-300)) / 6), calc((100% - (6 - 1) * var(--spacing-300)) / 6)));
    }

    .row-cols-md-12 {
        --row-cols: 12;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (12 - 1) * var(--spacing-300)) / 12), calc((100% - (12 - 1) * var(--spacing-300)) / 12)));
    }
}

/* Large (lg): >= 992px */
@media (min-width: 992px) {
    .col-lg-1 {
        grid-column: span 1;
    }

    .col-lg-2 {
        grid-column: span 2;
    }

    .col-lg-3 {
        grid-column: span 3;
    }

    .col-lg-4 {
        grid-column: span 4;
    }

    .col-lg-5 {
        grid-column: span 5;
    }

    .col-lg-6 {
        grid-column: span 6;
    }

    .col-lg-7 {
        grid-column: span 7;
    }

    .col-lg-8 {
        grid-column: span 8;
    }

    .col-lg-9 {
        grid-column: span 9;
    }

    .col-lg-10 {
        grid-column: span 10;
    }

    .col-lg-11 {
        grid-column: span 11;
    }

    .col-lg-12 {
        grid-column: span 12;
    }

    .row-cols-lg-1 {
        --row-cols: 1;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (1 - 1) * var(--spacing-300)) / 1), calc((100% - (1 - 1) * var(--spacing-300)) / 1)));
    }

    .row-cols-lg-2 {
        --row-cols: 2;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (2 - 1) * var(--spacing-300)) / 2), calc((100% - (2 - 1) * var(--spacing-300)) / 2)));
    }

    .row-cols-lg-3 {
        --row-cols: 3;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (3 - 1) * var(--spacing-300)) / 3), calc((100% - (3 - 1) * var(--spacing-300)) / 3)));
    }

    .row-cols-lg-4 {
        --row-cols: 4;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (4 - 1) * var(--spacing-300)) / 4), calc((100% - (4 - 1) * var(--spacing-300)) / 4)));
    }

    .row-cols-lg-6 {
        --row-cols: 6;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (6 - 1) * var(--spacing-300)) / 6), calc((100% - (6 - 1) * var(--spacing-300)) / 6)));
    }

    .row-cols-lg-12 {
        --row-cols: 12;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (12 - 1) * var(--spacing-300)) / 12), calc((100% - (12 - 1) * var(--spacing-300)) / 12)));
    }
}

/* Extra Large (xl): >= 1200px */
@media (min-width: 1200px) {
    .col-xl-1 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-300);
        grid-column: span 3;
    }

    .col-xl-4 {
        grid-column: span 4;

        min-width: 0;
        grid-column: span 5;
    }

    .col-xl-6 {
        grid-column: span 6;
    }

    .col-xl-7 {
        grid-column: span 7;
    }

    .col-xl-8 {
        grid-column: span 8;
    }

    .col-xl-9 {
        grid-column: span 9;
    }

    .col-xl-10 {
        grid-column: span 10;
    }

    .col-xl-11 {
        grid-column: span 11;
    }

    .col-xl-12 {
        grid-column: span 12;
    }

    .row-cols-xl-1 {
        --row-cols: 1;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (1 - 1) * var(--spacing-300)) / 1), calc((100% - (1 - 1) * var(--spacing-300)) / 1)));
    }

    .row-cols-xl-2 {
        --row-cols: 2;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (2 - 1) * var(--spacing-300)) / 2), calc((100% - (2 - 1) * var(--spacing-300)) / 2)));
    }

    .row-cols-xl-3 {
        --row-cols: 3;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (3 - 1) * var(--spacing-300)) / 3), calc((100% - (3 - 1) * var(--spacing-300)) / 3)));
    }

    .row-cols-xl-4 {
        --row-cols: 4;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (4 - 1) * var(--spacing-300)) / 4), calc((100% - (4 - 1) * var(--spacing-300)) / 4)));
    }

    .row-cols-xl-6 {
        --row-cols: 6;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (6 - 1) * var(--spacing-300)) / 6), calc((100% - (6 - 1) * var(--spacing-300)) / 6)));
    }

    .row-cols-xl-12 {
        --row-cols: 12;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (12 - 1) * var(--spacing-300)) / 12), calc((100% - (12 - 1) * var(--spacing-300)) / 12)));
    }
}

/* Extra Extra Large (xxl): >= 1440px */
@media (min-width: 1440px) {

    /* Columnas para los elementos hijos */
    .col-xxl-1 {
        grid-column: span 1;
    }

    .col-xxl-2 {
        grid-column: span 2;
    }

    .col-xxl-3 {
        grid-column: span 3;
    }

    .col-xxl-4 {
        grid-column: span 4;
    }

    .col-xxl-5 {
        grid-column: span 5;
    }

    .col-xxl-6 {
        grid-column: span 6;
    }

    .col-xxl-7 {
        grid-column: span 7;
    }

    .col-xxl-8 {
        grid-column: span 8;
    }

    .col-xxl-9 {
        grid-column: span 9;
    }

    .col-xxl-10 {
        grid-column: span 10;
    }

    .col-xxl-11 {
        grid-column: span 11;
    }

    .col-xxl-12 {
        grid-column: span 12;
    }

    /* Controladores dinámicos del contenedor */
    .row-cols-xxl-1 {
        --row-cols: 1;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (1 - 1) * var(--spacing-300)) / 1), calc((100% - (1 - 1) * var(--spacing-300)) / 1)));
    }

    .row-cols-xxl-2 {
        --row-cols: 2;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (2 - 1) * var(--spacing-300)) / 2), calc((100% - (2 - 1) * var(--spacing-300)) / 2)));
    }

    .row-cols-xxl-3 {
        --row-cols: 3;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (3 - 1) * var(--spacing-300)) / 3), calc((100% - (3 - 1) * var(--spacing-300)) / 3)));
    }

    .row-cols-xxl-4 {
        --row-cols: 4;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (4 - 1) * var(--spacing-300)) / 4), calc((100% - (4 - 1) * var(--spacing-300)) / 4)));
    }

    .row-cols-xxl-6 {
        --row-cols: 6;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (6 - 1) * var(--spacing-300)) / 6), calc((100% - (6 - 1) * var(--spacing-300)) / 6)));
    }

    .row-cols-xxl-12 {
        --row-cols: 12;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (12 - 1) * var(--spacing-300)) / 12), calc((100% - (12 - 1) * var(--spacing-300)) / 12)));
    }
}

/* Super Large (2xl): >= 1680px */
@media (min-width: 1680px) {

    /* Columnas para los elementos hijos */
    .col-2xl-1 {
        grid-column: span 1;
    }

    .col-2xl-2 {
        grid-column: span 2;
    }

    .col-2xl-3 {
        grid-column: span 3;
    }

    .col-2xl-4 {
        grid-column: span 4;
    }

    .col-2xl-5 {
        grid-column: span 5;
    }

    .col-2xl-6 {
        grid-column: span 6;
    }

    .col-2xl-7 {
        grid-column: span 7;
    }

    .col-2xl-8 {
        grid-column: span 8;
    }

    .col-2xl-9 {
        grid-column: span 9;
    }

    .col-2xl-10 {
        grid-column: span 10;
    }

    .col-2xl-11 {
        grid-column: span 11;
    }

    .col-2xl-12 {
        grid-column: span 12;
    }

    /* Controladores dinámicos del contenedor */
    .row-cols-2xl-1 {
        --row-cols: 1;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (1 - 1) * var(--spacing-300)) / 1), calc((100% - (1 - 1) * var(--spacing-300)) / 1)));
    }

    .row-cols-2xl-2 {
        --row-cols: 2;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (2 - 1) * var(--spacing-300)) / 2), calc((100% - (2 - 1) * var(--spacing-300)) / 2)));
    }

    .row-cols-2xl-3 {
        --row-cols: 3;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (3 - 1) * var(--spacing-300)) / 3), calc((100% - (3 - 1) * var(--spacing-300)) / 3)));
    }

    .row-cols-2xl-4 {
        --row-cols: 4;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (4 - 1) * var(--spacing-300)) / 4), calc((100% - (4 - 1) * var(--spacing-300)) / 4)));
    }

    .row-cols-2xl-6 {
        --row-cols: 6;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (6 - 1) * var(--spacing-300)) / 6), calc((100% - (6 - 1) * var(--spacing-300)) / 6)));
    }

    .row-cols-2xl-12 {
        --row-cols: 12;
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - (12 - 1) * var(--spacing-300)) / 12), calc((100% - (12 - 1) * var(--spacing-300)) / 12)));
    }
}

.container,
.section .container,
.section .syn-container,
.section .elementor-element.syn-container,
.section--hero .hero-single .hero-content,
[class*="container"],
.elementor [class*="container--"],
.elementor .elementor-element [class*="container--"] {
    margin: 0 auto;
}

.section .container,
.section .elementor .container,
.container,
.section .syn-container,
.section .elementor-element.syn-container {
    padding: var(--spacing-600) var(--spacing-300);
}

.section .container-fluid,
.section .elementor .container-fluid,
.container-fluid,
.elementor-element .container-fluid {
    padding: var(--spacing-600) var(--spacing-300);
}

.section__header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300);
}

.section__title,
.section__description {
    text-align: center;
}

.section__description,
.elementor .section__description.e-paragraph-base {
    font-size: var(--text-xl);
    margin: 0 auto;
    max-width: var(--container-xl)
}

.section .elementor .container--xs,
.section .container--xs,
.elementor .elementor-element.container--xs,
.container--xs {
    padding-left: var(--spacing-300);
    padding-right: var(--spacing-300);
}

@media (min-width: 576px) {

    .container,
    .section .syn-container,
    .section .elementor-element.syn-container,
    .section .elementor .container,
    .section--hero .hero-single .hero-content,
    .section .elementor .container--sm,
    .section .container--sm,
    .elementor .elementor-element.container--sm,
    .container--sm {
        max-width: var(--container-sm);
    }
}

@media (min-width: 768px) {

    .container,
    .elementor.syn-container,
    .section .elementor-element.syn-container,
    .section .elementor .container,
    .section--hero .hero-single .hero-content,
    .section .elementor .container--md,
    .section .container--md,
    .elementor .elementor-element.container--md,
    .container--md {
        max-width: var(--container-md);
    }
}

@media (min-width: 992px) {

    .container,
    .elementor.syn-container,
    .section .elementor-element.syn-container,
    .section .elementor .container,
    .section--hero .hero-single .hero-content,
    .section .elementor .container--lg,
    .section .container--lg,
    .elementor .elementor-element.container--lg,
    .container--lg {
        max-width: var(--container-lg);
    }

}

@media (min-width: 1200px) {

    .container,
    .section .syn-container,
    .section .elementor-element.syn-container,
    .section .elementor .container,
    .section--hero .hero-single .hero-content,
    .section .elementor .container--xl,
    .section .container--xl,
    .elementor .elementor-element.container--xl,
    .container--xl {
        max-width: var(--container-xl);
    }
}

@media (min-width: 1440px) {

    .container,
    .section .syn-container,
    .section .elementor-element.syn-container,
    .section .elementor .container,
    .section--hero .hero-single .hero-content,
    .section .elementor .container--xxl,
    .section .container--xxl,
    .elementor .elementor-element.container--xxl,
    .container--xxl {
        max-width: var(--container-xxl);
    }

    .section .syn-container,
    .section .elementor-element.syn-container,
    .elementor .elementor-element.syn-container,
    .section .container,
    .section .elementor .container,
    .container {
        padding: var(--spacing-1400) var(--spacing-300);
    }

    .section .container-fluid,
    .section .elementor .container-fluid,
    .container-fluid {
        padding: var(--spacing-1400);
    }
}

@media (min-width: 1680px) {

    .container,
    .section .syn-container,
    .section .elementor-element.syn-container,
    .section .elementor .container,
    .section--hero .hero-single .hero-content,
    .container--2xl {
        max-width: var(--container-2xl);
    }


    .section .elementor .container--xxl,
    .section .container--xxl,
    .container--xxl {
        max-width: var(--container-xl);
    }

    .section .elementor .container--xl,
    .section .container--xl,
    .container--xl {
        max-width: var(--container-xl);
    }

    .section .elementor .container--lg,
    .section .container--lg,
    .container--lg {
        max-width: var(--container-lg);
    }

    .section .elementor .container--md,
    .section .container--md,
    .container--md {
        max-width: var(--container-md);
    }

    .section .elementor .container--sm,
    .section .container--sm,
    .container--sm {
        max-width: var(--container-sm);
    }
}

/* ==========================================================================
   Typography
   ========================================================================== */
body {
    font-family: var(--font-family-base);
    font-size: var(--font-base);
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
.h1,
.h2,
.h3,
.h4,
.h5,
.elementor .h1.e-heading-base,
.elementor .h2.e-heading-base,
.elementor .h3.e-heading-base,
.elementor .h4.e-heading-base,
.elementor .h5.e-heading-base {
    font-weight: normal;
}

h1,
.h1,
h2,
.h2 {
    font-family: "Headings", sans-serif;
}

h1,
.h1 {
    font-size: var(--h1);
    line-height: 1.2;
}

h2,
.h2 {
    font-size: var(--h2);
    line-height: 1.2;
}

h3,
.h3 {
    font-size: var(--h3);
    line-height: 1.25;
}

h4,
.h4 {
    font-size: var(--h4);
    line-height: 1.25;
}

h5,
.h5 {
    font-size: var(--h5);
    line-height: 1.25;
}

.h5,
.elementor .h5 {
    margin-bottom: var(--spacing-100)
}

h6,
.h6 {
    font-size: var(--h6);
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
.h1,
.h2,
.h3,
.h4,
.h5,
.elementor .h1.e-heading-base,
.elementor .h2.e-heading-base,
.elementor .h3.e-heading-base,
.elementor .h4.e-heading-base,
.elementor .h5.e-heading-base,
p,
.elementor p.e-paragraph-base {
    margin-bottom: var(--spacing-100)
}

.text-xs,
.text-sm,
.text-lg {
    color: var(--color-body)
}

.text-xs {
    font-size: var(--text-xs);
}

.text-sm {
    font-size: var(--text-sm);
}

.text-lg {
    font-size: var(--text-lg);
}

.text-xl {
    font-size: var(--text-xl);
}

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

.font-heading {
    font-family: var(--font-family-headings);
}

/* ==========================================================================
   Base Components
   ========================================================================== */
a {
    color: var(--color-primary-default);
}

a:hover {
    color: var(--color-primary-hovered);
}

a:active {
    color: var(--color-primary-pressed)
}

ul li::marker,
ol li::marker {
    color: var(--color-primary-default);
    font-weight: bold;
}

.elementor .elementor-element .elementor-widget.list-style-disc .elementor-icon-list-items,
.simple-list,
.simple-list ol,
.simple-list ul {
    margin-bottom: var(--spacing-100);
    margin-top: var(--spacing-100);
    padding-left: var(--spacing-200);
}

.elementor .elementor-element .elementor-widget.list-style-disc .elementor-icon-list-items {
    list-style-type: disc;
}

.elementor-widget.list-style-disc .elementor-icon-list-item {
    display: list-item;
}

/* ==========================================================================
   Dark theme
   ========================================================================== */
.dark,
.section--dark {
    background-color: var(--color-surface-primary);
    color: var(--color-body);
}

.dark .text-dark {
    background-color: transparent;
    color: var(--color-body);
}

.section:not(.section--hero) {
    border-bottom: solid 1px var(--color-border-subtle-default);
}

/* ==========================================================================
   Header & Footer (Elementor Theme Builder)
   ========================================================================== */
.elementor-location-header {
    position: sticky;
    top: 0;
    z-index: 999;
}

.elementor-location-header .dark.header {
    padding: 0;
}

.header .logo.e-flex.e-con.e-child,
.footer .logo.e-flex.e-con {
    margin: 0 var(--spacing-300);
    max-width: 9.375rem;
    padding: 0;
    transition: opacity .3s ease;
    width: 100%;
}

.header .logo.e-flex.e-con.e-child {
    margin: 0 var(--spacing-200);
}

.header .logo.e-flex.e-con.e-child:hover,
.footer .logo.e-flex.e-con:hover {
    opacity: .75;
}

@media(max-width: 992px) {
    .header .logo.logo-secondary {
        display: none;
    }

    .elementor-location-header .dark.header {
        padding: var(--spacing-125) 0;
    }
}

.main-menu__wrapper.e-flex.e-con.e-child {
    padding: var(--spacing-200) 0;
}

@media(max-width:992px) {
    .main-menu__wrapper.e-flex.e-con.e-child {
        padding-left: var(--spacing-200);
        padding-right: var(--spacing-200);
    }
}

.elementor .e-div-block-base:has(.main-menu__block) {
    width: auto;
}

@media(max-width:576px) {
    .elementor .e-div-block-base:has(.main-menu__block) {
        padding: 0 var(--spacing-200);
        width: 100%;
    }

    .elementor .e-div-block-base:has(.main-menu__block) .main-menu__subtitle {
        margin-bottom: var(--spacing-100);
    }

    .elementor .e-div-block-base:has(.main-menu__block):last-child .main-menu__subtitle {
        margin-top: var(--spacing-200);
    }
}

@media(max-width:576px) {
    .main-menu__wrapper.e-flex.e-con.e-child {
        padding: var(--spacing-100) var(--spacing-200);
    }

    .header .logo.e-flex.e-con.e-child {
        margin: 0 var(--spacing-200);
    }
}

.header .elementor-widget-n-menu .e-n-menu-title-container:not(.e-link) {
    margin-left: 0;
}

.elementor-element .elementor-widget-n-menu .e-n-menu-title-container:not(.e-link) * {
    cursor: pointer;
}

.header .elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-title:not(.e-current) .e-n-menu-title-container .e-n-menu-title-text {
    color: var(--color-primary-default);
}

.footer .main-menu.elementor-widget-n-menu .e-n-menu-title:not(.e-current):not(:hover) .e-n-menu-title-container .e-n-menu-title-text,
.header .main-menu.elementor-widget-n-menu .e-n-menu-title:not(.e-current):not(:hover) .e-n-menu-title-container .e-n-menu-title-text {
    color: var(--color-headings)
}

.header .main-menu.elementor-widget-n-menu .e-n-menu-heading {
    background-color: var(--color-surface-primary);
}

.header .main-menu.elementor-widget-n-menu .e-n-menu-title a {
    height: 100%;
    margin: 0;
}

#main-menu-login {
    height: 100%;
    width: 100%;
}

.header .main-menu.elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-item .e-n-menu-title:not(.e-click) {
    padding: var(--n-menu-title-padding);
}

.header .main-menu.elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-item:first-child {
    margin-top: var(--spacing-100);
}

@media (min-width:1440px) {
    .header .main-menu.elementor-widget-n-menu .e-n-menu .e-n-menu-item:last-child {
        align-items: center;
        height: 100%;
        position: absolute;
        right: 0;
    }

}

@media (min-width:992px) {
    .header .main-menu.elementor-widget-n-menu .e-n-menu .e-n-menu-item:last-child .e-link:after {
        color: var(--color-headings);
        content: "\e5c8";
        font-family: "Material Symbols Rounded";
    }
}

.header .main-menu.elementor-widget-n-menu .e-n-menu .e-n-menu-title:hover .e-link:after {
    color: var(--color-primary-default);
    transition: none;
}

.header .main-menu.elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-item:last-child {
    align-items: start;
    margin-bottom: var(--spacing-100);
    position: static;
}

.header .main-menu.elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-toggle[aria-expanded=true]+.e-n-menu-wrapper {
    margin-top: var(--spacing-200);
    max-height: calc(100dvh - var(--spacing-700));
    overflow-y: auto;
}

.header .main-menu.elementor-widget-n-menu .e-n-menu-title:hover:not(.e-current),
.header .main-menu.elementor-widget-n-menu .e-n-menu-title:hover:not(.e-current) a,
.footer .main-menu.elementor-widget-n-menu .e-n-menu-title:hover:not(.e-current),
.footer .main-menu.elementor-widget-n-menu .e-n-menu-title:hover:not(.e-current) a {
    color: var(--color-primary-default);
}

.header .main-menu.elementor-widget-n-menu .e-n-menu-heading .e-n-menu-item .e-n-menu-title {
    position: relative;
}

@media(max-width:1200px) and (min-width:992px) {
    .header .main-menu.elementor-widget-n-menu .e-n-menu-heading .e-n-menu-item .e-n-menu-title {
        padding-left: var(--spacing-100);
        padding-right: var(--spacing-100);
    }
}

.header .main-menu.elementor-widget-n-menu .e-n-menu-heading .e-n-menu-item .e-n-menu-title:not(.e-click) {
    padding-bottom: 0;
    padding-top: 0;
}

.header .main-menu.elementor-widget-n-menu .e-n-menu-heading .e-n-menu-item .e-n-menu-title:hover:after {
    background-color: var(--color-primary-default);
    content: "";
    height: 2px;
    position: absolute;
    bottom: calc(-1 * var(--spacing-100));
    left: 0;
    width: 100%;
}

.header .main-menu.elementor-widget-n-menu .e-n-menu-title .e-n-menu-dropdown-icon {
    min-width: var(--size-250);
}

.header .main-menu.elementor-widget-n-menu .e-n-menu-title:not(.e-current):not(:hover) .e-n-menu-dropdown-icon svg {
    fill: var(--color-headings);
}

.header .main-menu.elementor-widget-n-menu .e-n-menu-title:hover:not(.e-current) .e-n-menu-dropdown-icon svg {
    fill: var(--color-primary-default);
}

.header .main-menu.elementor-widget-n-menu.e-n-menu-tablet .e-n-menu-toggle {
    margin-left: auto;
}

.header .main-menu.elementor-widget-n-menu .e-n-menu-toggle svg,
.elementor-widget-n-menu .e-n-menu-toggle svg {
    fill: var(--color-headings)
}

.header .main-menu .main-menu__block {
    justify-content: center;
    min-height: var(--size-600);
    padding: var(--spacing-200) 0;
}

@media(max-width: 576px) {
    .header .main-menu .main-menu__block {
        justify-content: start;
        padding-bottom: 0;
        padding-top: 0;
    }
}

.main-menu__list.elementor-widget.elementor-list-item-link-full_width a {
    color: var(--color-headings);
    margin-bottom: var(--spacing-050);
    margin-top: var(--spacing-050);
    padding-bottom: var(--spacing-100);
    padding-top: var(--spacing-100)
}

.main-menu__list.elementor-widget.elementor-list-item-link-full_width a:hover,
.main-menu__list.elementor-widget.elementor-list-item-link-full_width a:focus {
    text-decoration: underline;
}

.main-menu.elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-title {
    background-color: var(--color-surface-primary);
    justify-content: start;
}

.main-menu.elementor-widget-n-menu .e-n-menu:not([data-layout=dropdown]):not(.content-above) .e-active.e-n-menu-content {
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
}

.main-menu.elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-item {
    border-bottom: solid 1px var(--color-border-subtle-default);
}

.main-menu.elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-item:last-child {
    border-bottom: none;
}

.header .main-menu.elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-title a {
    flex: 1;
    min-height: var(--spacing-400);
    width: 100%;
}

.main-menu.elementor-widget-n-menu .main-menu__block-wrapper .e-con-inner {
    column-gap: var(--spacing-400);
}

.e-active .dark.e-flex.e-con.e-child {
    border-bottom: solid 1px var(--color-border-subtle-default)
}

footer {
    background-color: var(--color-surface-primary-inverse);
    height: 100%;
}

footer .footer {
    padding-bottom: var(--spacing-600);
    padding-top: var(--spacing-400);
}

.footer .footer__menu-secondary .e-n-menu-heading {
    flex-wrap: nowrap;
}

.footer .footer__menu-secondary .e-n-menu-title .e-link {
    text-wrap-mode: wrap;
}

.elementor .elementor-widget-n-menu {
    --n-menu-title-color-active: var(--color-headings);
}

/* ==========================================================================
Related Insights
========================================================================== */

.section--related-insights,
.section--product-list {
    background: var(--color-surface-secondary);
}

.single-product .section--related-insights {
    background: var(--color-surface-primary);
}

/* ==========================================================================
Home
========================================================================== */
.home .home-detail .section--hero .hero-single,
.home .home-detail .section--hero .hero-slide {
    background-position: top center;
}

.home .home-detail .section--hero .hero-title,
.home .home-detail .section--hero .hero-description,
.home .home-detail .section--hero .hero-action {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.home .home-detail .section--hero h1.hero-title {
    background: url(assets/images/lg_syntphony.2.0.0.svg) no-repeat center/contain;
    filter: drop-shadow(var(--text-shadow));
    height: calc(2rem + 4vmax);
    margin-bottom: auto;
    margin-top: 0;
    max-width: 37.5rem;
    overflow: hidden;
    text-indent: -9999px;
    width: 100%;
}

.home .home-detail .section--hero h1+.hero-description {
    font-size: var(--h1);
    line-height: 1.2;
    font-family: "Headings", sans-serif;
}

.home .home-detail .section--hero .hero-slide__video::after {
    display: none;
}

.home .home-detail .section--hero .hero-single,
.home .home-detail .section--hero .hero-slide,
.home .home-detail .section--hero .hero-single .hero-content,
.home .home-detail .section--hero .hero-slide .hero-content {
    min-height: 100dvh
}

@media (max-width: 1200px) {

    .home .home-detail .section--hero .hero-title,
    .home .home-detail .section--hero .hero-description {
        max-width: 100%;
    }
}

.home .home-detail .section--hero .hero-single .hero-content,
.home .home-detail .section--hero .hero-slide .hero-content {
    padding-top: 12vh;
    padding-bottom: 12vh;
}

/* ==========================================================================
Insights Page
========================================================================== */

.page-template.page-template-page-insights .section--hero .hero-title,
.page-template.page-template-page-insights .section--hero .hero-description {
    margin: 0 auto;
    text-align: center;
}

.page-template.page-template-page-insights .section--hero .hero-single,
.page-template.page-template-page-insights .section--hero .hero-slide,
.page-template.page-template-page-insights .section--hero .hero-single .hero-content,
.page-template.page-template-page-insights .section--hero .hero-slide .hero-content {
    min-height: 30rem;
}

.page-template.page-template-page-insights .section--hero .hero-single {
    background-position: center;
}

.page-template.page-template-page-insights .section--hero {
    margin-bottom: var(--spacing-300);
}

.section--related-insights.section--page-insights {
    background-color: transparent;
}

.section-insights-grid .container-fluid {
    padding-top: var(--spacing-200);
}

.section-insights-filters .container-fluid {
    padding-bottom: 0;
    padding-top: 0;
}

.section-insights-filters.bg-surface-tertiary .container-fluid {
    padding-bottom: var(--spacing-200);
    padding-top: var(--spacing-200);
}

.section-insights-filters {
    margin-top: -8rem;
    position: sticky;
    top: var(--spacing-900);
    z-index: 998;
}

@media (prefers-reduced-motion: no-preference) {
    .section-insights-filters {
        transition: background-color 0.1s ease;
    }
}

@media(max-width:1200px) {

    .page-template:not([class*="single-"]):not([class="-insights"]) .section--hero .hero-single,
    .page-template:not([class*="single-"]):not([class*="-insights"]) .section--hero .hero-slide,
    .page-template:not([class*="single-"]):not([class*="-insights"]) .section--hero .hero-single .hero-content,
    .page-template:not([class*="single-"]):not([class*="-insights"]) .section--hero .hero-slide .hero-content {
        min-height: 10rem;
    }

    .page-template.page-template-page-insights .section--hero .hero-single,
    .page-template.page-template-page-insights .section--hero .hero-slide,
    .page-template.page-template-page-insights .section--hero .hero-single .hero-content,
    .page-template.page-template-page-insights .section--hero .hero-slide .hero-content {
        min-height: 20rem;
    }

    .section-insights-filters {
        margin-top: -2rem;
    }
}

@media (max-width: 576px) {

    .page-template.page-template-page-insights .section--hero .hero-single,
    .page-template.page-template-page-insights .section--hero .hero-slide,
    .page-template.page-template-page-insights .section--hero .hero-single .hero-content,
    .page-template.page-template-page-insights .section--hero .hero-slide .hero-content {
        min-height: 10rem;
    }

    .section-insights-filters {
        top: var(--spacing-700);
    }

}


.insights-filters {
    display: flex;
    justify-content: center;
}

.insights-filters__triggers {
    align-items: center;
    display: flex;
    gap: var(--spacing-100);
    overflow-x: auto;
}

.insights-filters__trigger,
.insights-filters__clear-all {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: var(--spacing-050)
}

.insights-filters__clear-all[hidden] {
    display: none;
}

.insights-filters__trigger:before {
    font-family: "Material Symbols Rounded";
    font-size: var(--size-200);
}

.insights-filters__trigger[data-filter="filter_product"]:before {
    content: "\f5a4";
}

.insights-filters__trigger[data-filter="filter_industry"]:before {
    content: "\ebbc";
}

.insights-filters__trigger[data-filter="filter_component"]:before {
    content: "\f388";
}

.insights-filters__trigger[data-filter="filter_insight_type"]:before {
    content: "\ea85";
}

.insights-grid__empty {
    margin-top: 8rem;
}

.insights-request-status:empty {
    margin: 0;
}

.insights-request-feedback {
    padding: 0;
}

.insights-request-feedback:has(.insights-request-status:not(:empty)) {
    padding: var(--spacing-100) var(--spacing-200);
}

.insights-request-retry[hidden],
.section-insights-grid[hidden] {
    display: none;
}

.section-insights-grid:focus-visible,
.insights-request-status:focus {
    outline: 3px solid var(--color-primary-default);
    outline-offset: -3px;
}

/*Modal Insights*/
.insights-filter-modal[hidden] {
    display: none;
}

.insights-filter-modal {
    display: flex;
    inset: 0;
    position: fixed;
    padding: var(--spacing-200);
    z-index: 9999;
}

.filter-list-grid {
    display: grid;
    row-gap: var(--spacing-200);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.insights-filter-modal__overlay {
    background: rgba(var(--color-surface-primary-inverse-rgb), 0.6);
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.insights-filter-modal__panel {
    background: #fff;
    border-radius: var(--border-radius-200);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300);
    margin: auto;
    max-height: 90vh;
    max-width: clamp(18.75rem, 6.7rem + 60.2vw, 60rem);
    min-height: 30vh;
    overflow-y: auto;
    padding: clamp(var(--spacing-200), 0.636rem + 1.82vw, var(--spacing-400));
    position: relative;
    width: 100%;
    z-index: 1;
}

.insights-filter-modal__header {
    align-items: center;
    display: flex;
    gap: var(--spacing-200)
}

.insights-filter-modal__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300);
}

.insights-filter-modal__close {
    background: none;
    border: 0;
    cursor: pointer;
    font-size: var(--size-300);
    position: absolute;
    right: var(--spacing-200);
    top: var(--spacing-200);
}

.insights-filter__checkbox {
    align-items: start;
    cursor: pointer;
    display: inline-flex;
    column-gap: var(--spacing-100);
}

.insights-filter__checkbox input[type="checkbox"],
.checkbox {
    flex-shrink: 0;
    height: var(--size-250);
    margin: 0;
    width: var(--size-250)
}

.insights-filter-modal__actions {
    display: flex;
    gap: var(--spacing-100);
    margin-left: auto;
    margin-top: auto
}

/* ==========================================================================
Editorial Pages & Privacy Policy
========================================================================== */
.page-template.page-template-page-privacy .section--hero-single .hero-title,
.page-template.page-template-page-privacy .section--hero-single .hero-description,
.page-template.page-template-page-editorial .section--hero-single .hero-title,
.page-template.page-template-page-editorial .section--hero-single .hero-description,
.page-template.page-template-page-privacy .section--hero-carousel .hero-title,
.page-template.page-template-page-privacy .section--hero-carousel .hero-description,
.page-template.page-template-page-editorial .section--hero-carousel .hero-title,
.page-template.page-template-page-editorial .section--hero-carousel .hero-description {
    margin: 0 auto;
    text-align: center;
}

.page-template.page-template-page-privacy .hero-slide,
.page-template.page-template-page-editorial .hero-slide {
    border-top: solid 1px var(--color-border-subtle-default);
    min-height: 10rem;
}

.page-template.page-template-page-editorial .hero--partners .hero-slide {
    min-height: 45vh;
}

.page-template.page-template-page-editorial main a:not(.btn, .card__link) {
    text-decoration: underline;
}

.page-template.page-template-page-editorial main table {
    border-collapse: collapse;
    border: solid 1px var(--color-border-subtle-default);
}

.page-template.page-template-page-editorial main table td {
    border-bottom: solid 1px var(--color-border-subtle-default);
    padding: var(--spacing-100);
}

.page-template.page-template-page-editorial main table td.bg-surface-secondary {
    color: var(--color-headings);
}

/* ==========================================================================
Partners
========================================================================== */
.section.section--partners>.elementor-element {
    position: relative;
    z-index: 1;
}


@media(max-width:992px) {
    .section--partners::after {
        background-color: #fff;
        content: "";
        height: 100%;
        left: 0;
        opacity: .75;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }
}

/* ==========================================================================
Hero
========================================================================== */

.section--hero {
    position: relative;
}

.hero-motion-toggle {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 50%;
    max-width: calc(100% - 2rem);
    color: var(--gray-ntt-100);
    background: var(--blue-ntt-20);
    border: 1px solid var(--gray-ntt-100);
    font-family: var(--font-family-base);
    cursor: pointer;
}

.hero-motion-toggle[hidden] {
    display: none;
}

@media (hover: hover) and (pointer: fine) and (not (any-pointer: coarse)) {
    .hero-motion-toggle {
        opacity: 0;
        pointer-events: none;
    }

    .section--hero:hover .hero-motion-toggle,
    .section--hero:focus-within .hero-motion-toggle {
        opacity: 1;
        pointer-events: auto;
    }
}

.hero--has-motion-control .hero-slide {
    padding-bottom: 5rem;
}

.hero-motion-toggle:hover,
.hero-motion-toggle:active {
    color: var(--gray-ntt-100);
    background: var(--blue-ntt-30);
}

.hero-motion-toggle:focus-visible {
    outline: 3px solid var(--gray-ntt-100);
    outline-offset: 3px;
    box-shadow: 0 0 0 7px var(--blue-ntt-10);
}

.section--hero.hero--motion-paused .hero-slide__video iframe {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .section--hero .hero-slide__video iframe {
        display: none;
    }
}

.hero-carousel.swiper {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.hero-carousel .swiper-wrapper {
    display: flex;
}

.hero-carousel .swiper-slide {
    background-color: var(--color-surface-primary);
    display: flex;
    flex-shrink: 0;
    height: auto;
    width: 100%;
}

.hero-slide.is-active .hero-content {
    opacity: 1;
    transform: translateY(0);
}

/* Hero slide wrapper */
.hero-slide {
    display: flex;
    min-height: 45vh;
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* Vimeo / YouTube iframe as background */
.section--hero .hero-slide__video iframe,
.hero-slide__video .video-poster {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    max-width: none !important;
    max-height: none !important;
}

.hero-slide__video .video-poster {
    object-fit: fill;
    z-index: 0;
}

.section--hero .hero-slide__video.is-loaded iframe {
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .section--hero .hero-slide__video iframe {
        transition: opacity 800ms ease;
    }
}

/* Video container — always visible; shows thumbnail as background until iframe loads */
.section--hero .hero-slide__video {
    background-position: center center;
    background-size: cover;
    height: 100%;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.section--hero .hero-title,
.section--hero .hero-description,
.text-shadow,
.dark .section__title,
.dark .section__description {
    text-shadow: var(--text-shadow)
}

.section--hero .hero-title,
.section--hero .hero-description {
    margin-bottom: 0;
    max-width: 100%;
}

@media(min-width:992px) {

    .section--hero .hero-title,
    .section--hero .hero-description {
        max-width: 75%;
    }
}

@media(min-width:1200px) {

    .section--hero .hero-title,
    .section--hero .hero-description {
        max-width: 50%;
    }
}

.section--hero .hero-description {
    font-size: var(--text-xl);
}

.section--hero .hero-slide__video::after {
    background: linear-gradient(135deg, rgba(var(--color-surface-secondary-rgb), .50) 45%, rgba(125, 185, 232, 0) 100%);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

/* Section hidden until JS hydration completes */
.section--hero.hero--loading {
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .section--hero {
        transition: opacity 600ms ease;
    }
}

.hero-carousel .swiper-button-prev,
.hero-carousel .swiper-button-next {
    align-items: center;
    border-radius: var(--border-radius-999);
    color: var(--color-primary-inverse);
    cursor: pointer;
    display: flex;
    font-family: var(--font-family-icons);
    font-size: var(--size-600);
    height: var(--size-600);
    justify-content: center;
    position: absolute;
    text-shadow: var(--text-shadow);
    top: 50%;
    transform: translateY(-50%);
    width: var(--size-600);
}

@media(max-width:1200px) {

    .hero-carousel .swiper-button-prev,
    .hero-carousel .swiper-button-next {
        font-size: var(--size-400);
        height: var(--size-400);
        top: calc(100% - var(--spacing-600));
        width: var(--size-400);
    }
}

.hero-carousel .swiper-button-prev:hover,
.hero-carousel .swiper-button-next:hover,
span.swiper-pagination-bullet:hover {
    background-color: var(--color-primary-hovered);
}

.hero-carousel .swiper-button-prev {
    left: 1rem;
}

.hero-carousel .swiper-button-prev::before {
    content: "\e314";
}

.hero-carousel .swiper-button-next {
    right: 1rem;
}

.hero-carousel .swiper-button-next::before {
    content: "\e315";
}

.hero-carousel .swiper-button-prev,
.hero-carousel .swiper-button-next,
.hero-carousel .swiper-pagination {
    z-index: 2;
}

.swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: var(--spacing-100);
}

span.swiper-pagination-bullet {
    background: var(--color-primary-inverse);
    border-radius: var(--border-radius-999);
    border: solid 1px var(--color-primary-default);
    cursor: pointer;
    display: block;
    height: var(--size-100);
    width: var(--size-100);
}

.swiper-pagination .swiper-pagination-bullet-active {
    background: var(--color-primary-default);
}

/* Content overlay */
.section--hero .hero-slide .content-wrapper.hero-content,
.section--hero .hero-single .content-wrapper.hero-content {
    align-items: start;
    justify-content: center;
    padding: var(--spacing-600) var(--spacing-300);
    position: relative;
    width: 100%;
    z-index: 3;
}

@media(max-width:576px) {

    .section--hero .hero-slide .hero-content,
    .section--hero .hero-single .hero-content {
        padding-bottom: var(--spacing-600);
    }
}

.section--hero .e-con-full,
.section--hero .e-con>.e-con-inner,
.section--hero .elementor .e-div-block-base {
    padding: 0;
}


/* ==========================================================================
Modal
========================================================================== */
.elementor-popup-modal .dialog-lightbox-widget-content.dialog-widget-content,
.poppup {
    border-radius: var(--border-radius-100);
    overflow: hidden;
}

.dialog-lightbox-widget.dialog-type-lightbox.elementor-popup-modal {
    background-color: rgba(var(--color-surface-primary-inverse-rgb), .75);
}

.dialog-widget.video-popUp .dialog-message {
    box-sizing: border-box;
    height: auto;
    max-height: 95vh;
    max-width: 100rem;
    padding: 3rem .5rem .5rem;
    width: 90vw;
}

.dialog-widget.video-popUp .elementor-element {
    height: 100%;
    padding: 0;
}

.dialog-widget.video-popUp .dialog-message .elementor-widget-video .elementor-wrapper iframe,
.dialog-widget.video-popUp .dialog-message .elementor-widget-video .elementor-wrapper video {
    aspect-ratio: 16 / 9;
    object-fit: contain;
}

.video-popUp .elementor-element .elementor-wrapper {
    height: 100%;
    margin: 0 auto;
}

.dialog-widget .video-popUp .elementor-element {
    padding: 0;
}

/* ==========================================================================
Form
========================================================================== */
.elementor .e-form-base,
.form {
    padding: var(--spacing-200)
}

.e-form-base.form .form__title,
.form .form__title {
    margin-bottom: var(--spacing-300);
}

.e-con.e-con>.e-con-inner>.elementor-widget,
.elementor.elementor .e-con>.elementor-widget {
    color: var(--color-body);
}

.elementor .form .e-form-success-message-base {
    background-color: var(--color-surface-success);
    color: var(--color-success-default)
}

.elementor .form .e-form-error-message-base {
    background-color: var(--color-surface-danger);
    color: var(--color-danger-default)
}

.elementor .form .e-form-success-message-base p,
.elementor .form .e-form-error-message-base p {
    font-size: var(--text-md);
}

/* ==========================================================================
Inputs
========================================================================== */
.input-field,
.textarea,
.elementor .form .e-form-input-base.input-field,
.elementor .form .e-form-textarea-base {
    background-color: var(--color-surface-primary);
    border: solid 1px var(--color-input-default);
    border-radius: var(--border-radius-050);
    color: var(--color-body);
    font-size: var(--text-md);
    min-height: 3rem;
    padding: var(--spacing-100) var(--spacing-200);
    transition: border-color 0.15s ease;
    width: 100%;
}

.input-field:focus,
.textarea:focus,
.elementor .form .e-form-input-base.input-field:focus,
.elementor .form .e-form-textarea-base:focus {
    border-color: var(--color-input-hovered);
}

.input-field::placeholder,
.textarea::placeholder,
.elementor .form .e-form-input-base.input-field::placeholder,
.elementor .form .e-form-textarea-base::placeholder {
    opacity: .75;
    color: var(--color-body);
}

/* ==========================================================================
Buttons
========================================================================== */
.btn,
.link,
.elementor .e-form-submit-button-base.btn,
.elementor .e-button-base.btn,
.elementor .e-button-base.link {
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.btn:hover,
.link:hover,
.elementor .e-form-submit-button-base.btn:hover,
.elementor .e-button-base.btn:hover,
.elementor .e-button-base.link:hover {
    text-decoration: none;
}

.link,
.elementor a.link {
    text-decoration: underline;
}

.btn--lg,
.hero-carousel .hero-slide .hero-action,
.section--hero .hero-single .hero-action,
.elementor .e-form-submit-button-base.btn--lg,
.elementor .e-button-base.btn--lg {
    font-size: var(--text-lg);
    padding: var(--spacing-100) var(--spacing-250);
    border-radius: var(--border-radius-075);
}

.btn--sm,
.elementor .e-button-base.btn--sm {
    font-size: var(--text-sm);
    padding: var(--spacing-100) var(--spacing-200);
    border-radius: var(--border-radius-050);
}

.btn--xs,
.elementor .e-button-base.btn--xs {
    font-size: var(--text-xs);
    padding: var(--spacing-050) var(--spacing-100);
    border-radius: var(--border-radius-050);

}

.btn--primary,
.hero-carousel .hero-slide .btn--primary,
.hero-single .hero-action.btn--primary,
.elementor .e-form-submit-button-base.btn--primary,
.elementor .e-button-base.btn--primary {
    background-color: var(--color-primary-default);
    border: solid 1px var(--color-primary-default);
    color: var(--color-primary-inverse);
}

.btn.btn--primary .material-symbols-rounded,
.btn.btn--secondary .material-symbols-rounded {
    color: inherit;
}

.btn--primary:hover,
.section--hero .btn--primary.hero-action:hover,
.btn--secondary:hover,
.section--hero .btn--seconday.hero-action:hover,
.elementor .e-form-submit-button-base.btn--primary:hover,
.elementor .e-button-base.btn--primary:hover {
    background-color: var(--color-primary-hovered);
    border: solid 1px var(--color-primary-hovered);
    color: var(--color-primary-inverse);
}

.btn--primary:hover .material-symbols-rounded,
.section--hero .btn--primary.hero-action:hover .material-symbols-rounded,
.btn--secondary:hover .material-symbols-rounded,
.section--hero .btn--seconday.hero-action:hover .material-symbols-rounded,
.elementor .e-form-submit-button-base.btn--primary:hover .material-symbols-rounded,
.elementor .e-button-base.btn--primary:hover .material-symbols-rounded {
    color: var(--color-primary-inverse)
}

.btn--primary:active,
.section--hero .btn--primary.hero-action:active,
.btn--secondary:active,
.section--hero .btn--seconday.hero-action:active,
.elementor .e-form-submit-button-base.btn--primary:active,
.elementor .e-button-base.btn--primary:active {
    background-color: var(--color-primary-pressed);
    border: solid 1px var(--color-primary-pressed);
    color: var(--color-primary-inverse);
}

.btn--secondary,
.elementor .e-button-base.btn--secondary {
    background-color: var(--color-surface-primary);
    border: solid 1px var(--color-primary-default);
    color: var(--color-primary-default);
}

.btn--chip,
.elementor .e-button-base.btn--chip {
    border-radius: var(--border-radius-999);
}

.btn--tertiary,
.btn--link,
.link,
.elementor .e-button-base.btn--tertiary,
.elementor .e-button-base.btn--link,
.elementor .e-button-base.link {
    background-color: transparent;
    border: 0;
    color: var(--color-primary-default);
}

.btn--tertiary:hover,
.btn--link:hover,
.link:hover,
.elementor .e-button-base.btn--tertiary:hover,
.elementor .e-button-base.btn--link:hover,
.elementor .e-button-base.link:hover {
    color: var(--color-secondary-pressed);
}

.btn--link,
.link,
.elementor .e-button-base.btn--link,
.elementor .e-button-base.link {
    align-items: center;
    column-gap: var(--spacing-050);
    display: inline-flex;
    font-weight: bold;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
}

.btn--link:after,
.elementor .e-button-base.btn--link:after {
    content: "\e5c8";
    font-family: var(--font-family-icons);
}

/* Generic icon-only button (e.g. widget prev/next navigation controls). */
.btn--icon,
.elementor .e-button-base.btn--icon {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn--icon:hover,
.elementor .e-button-base.btn--icon:hover {
    transform: translateY(-1px);
}

.btn--icon:disabled,
.elementor .e-button-base.btn--icon:disabled {
    opacity: 0.45;
    cursor: default;
    transform: none;
}

.btn--icon .material-icons-outlined,
.btn--icon .material-symbols-rounded,
.elementor .e-button-base.btn--icon .material-icons-outlined,
.elementor .e-button-base.btn--icon .material-symbols-rounded {
    font-size: 20px;
    line-height: 1;
}

/* ===========================================================================
   Accordion (Elementor and native details)
   ======================================================================== */
.accordion {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0;
    width: 100%;
}

.accordion .elementor-widget-container,
.accordion .elementor-accordion,
.accordion .e-n-accordion {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0;
}

.accordion .elementor-accordion-item,
.accordion .e-n-accordion-item {
    border: 0 !important;
    position: relative;
}

.accordion .elementor-accordion-item::after,
.accordion .e-n-accordion-item::after {
    background-color: var(--color-border-subtle-default);
    bottom: 0;
    content: "";
    height: 0.5px;
    left: 0;
    position: absolute;
    right: 0;
}

.accordion .elementor-tab-title,
.accordion .e-n-accordion-item-title,
.accordion > details > summary {
    align-items: center;
    background-color: transparent;
    border: 0 !important;
    color: var(--color-headings);
    cursor: pointer;
    display: flex;
    font-size: var(--text-lg);
    font-weight: 700;
    gap: var(--spacing-200);
    justify-content: space-between;
    min-height: var(--size-600);
    padding: var(--spacing-150) 0;
    text-align: left;
    width: 100%;
}

.accordion .elementor-tab-title:hover,
.accordion .elementor-tab-title:focus-visible,
.accordion .e-n-accordion-item-title:hover,
.accordion .e-n-accordion-item-title:focus-visible,
.accordion > details > summary:hover,
.accordion > details > summary:focus-visible {
    color: var(--color-primary-default);
}

.accordion .elementor-tab-title:focus-visible,
.accordion .e-n-accordion-item-title:focus-visible,
.accordion > details > summary:focus-visible {
    outline: solid 2px var(--color-border-primary);
    outline-offset: -2px;
}

.accordion .elementor-accordion-icon,
.accordion .elementor-accordion-icon-opened,
.accordion .elementor-accordion-icon-closed,
.accordion .e-n-accordion-item-title-icon,
.accordion .e-n-accordion-item-title-icon-opened,
.accordion .e-n-accordion-item-title-icon-closed {
    display: none !important;
}

.accordion .elementor-tab-title::after,
.accordion .e-n-accordion-item-title::after,
.accordion > details > summary::after {
    color: var(--color-primary-default);
    content: "\e313";
    flex: 0 0 auto;
    font-family: var(--font-family-icons);
    font-size: var(--size-300);
    line-height: 1;
    margin-left: auto;
    transition: transform 200ms ease;
}

.accordion .elementor-tab-title.elementor-active::after,
.accordion .e-n-accordion-item[open] .e-n-accordion-item-title::after,
.accordion .e-n-accordion-item-title[aria-expanded="true"]::after,
.accordion > details[open] > summary::after {
    transform: rotate(180deg);
}

.accordion .elementor-tab-title.elementor-active,
.accordion .e-n-accordion-item[open] .e-n-accordion-item-title,
.accordion .e-n-accordion-item-title[aria-expanded="true"],
.accordion > details[open] > summary {
    border-bottom: solid 0.5px var(--color-border-subtle-default) !important;
}

.accordion .elementor-tab-content,
.accordion .elementor-tab-content.elementor-active,
.accordion .e-n-accordion-item-content,
.accordion > details > :not(summary) {
    border: 0 !important;
    border-bottom-width: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    border-top-width: 0 !important;
    box-shadow: none !important;
    color: var(--color-body);
    outline: 0;
    padding: var(--spacing-200) var(--spacing-300) var(--spacing-400);
}

.accordion > details > summary {
    list-style: none;
}

.accordion > details > summary::-webkit-details-marker {
    display: none;
}

.accordion > details > summary > :is(h2, h3, h4, h5, h6) {
    color: inherit;
    font: inherit;
    margin: 0;
}

.accordion .e-n-accordion-item> :not(.e-n-accordion-item-title) {
    padding: var(--spacing-200) var(--spacing-300) var(--spacing-400);
}

.accordion .elementor-tab-content>.e-con,
.accordion .e-n-accordion-item>.e-con,
.accordion .e-n-accordion-item-content>.e-con {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0;
    padding: var(--spacing-200) var(--spacing-300) var(--spacing-400);
}

@media (prefers-reduced-motion: reduce) {

    .accordion .elementor-tab-title::after,
    .accordion .e-n-accordion-item-title::after,
    .accordion > details > summary::after {
        transition: none;
    }
}



/* ==========================================================================
Tabs
========================================================================== */
.tabs {
    width: 100%;
}

.tabs>div {
    margin: 0 auto;
}

.tabs__nav,
.elementor .elementor-element .e-tabs-menu-base {
    border-bottom: solid 1px var(--color-border-default);
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-100);
    padding-left: var(--spacing-200);
    padding-right: var(--spacing-200);
}

.tabs__tab,
.elementor .elementor-element .e-tab-base {
    background-color: transparent;
    border: none;
    color: var(--color-body);
    cursor: pointer;
    flex-shrink: 0;
    font-size: var(--text-lg);
    font-weight: normal;
    padding: var(--spacing-150) var(--spacing-300);
    width: auto;
}

@media (max-width: 768px) {

    .elementor .elementor-element .e-tabs-menu-base,
    .tabs__nav {
        overflow: auto;
        justify-content: start;
    }

    .tabs__tab,
    .elementor .elementor-element .e-tab-base {
        padding: var(--spacing-150) var(--spacing-150);
        margin: 0 auto;
    }

}

.tabs__tab.is-active,
.tabs__tab.e--selected,
.elementor .elementor-element .e-tab-base.e--selected {
    color: var(--nav-tabs-active-link-hover-color);
    position: relative
}

.tabs__tab.is-active:after,
.elementor .elementor-element .e-tab-base.e--selected:after {
    background-color: var(--color-primary-default);
    bottom: 0;
    border-radius: var(--border-radius-999);
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    width: 100%;
}

.tabs .tabs__tab:hover,
.tabs .tabs__tab:focus-visible,
.elementor .elementor-element .e-tab-base:hover,
.elementor .elementor-element .e-tab-base:focus-visible,
.elementor .elementor-element .e-tab-base.e--selected:hover,
.elementor .elementor-element .e-tab-base.e--selected:focus-visible {
    background-color: var(--color-primary-subtle-hovered);
}

.tabs__panel {
    display: none;
}

.tabs__panel.is-active {
    display: block;
}

/* ==========================================================================
Cards
========================================================================== */
.elementor .elementor-element .syn-card-grid {
    gap: var(--spacing-300);
    justify-content: center;
}

.card {
    padding: var(--spacing-100) var(--spacing-300);
    position: relative;
}

.card .card__title {
    margin-bottom: 0;
}

.elementor .elementor-element .syn-card {
    border-radius: var(--size-200) 0 0;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-300) var(--spacing-300);
    position: relative;
    row-gap: var(--spacing-100);
}

.syn-card__icon {
    display: block;
    text-align: center;
}

.elementor .elementor-element .syn-card .card__title {
    font-weight: bold;
}

@media(max-width:992px) {

    .elementor .elementor-element .syn-card {
        padding: var(--spacing-150);
    }

    .syn-card-grid {
        gap: var(--spacing-300);
    }
}

@media(max-width:576px) {

    .elementor .elementor-element .syn-card-row-xs {
        flex-direction: row;
        column-gap: var(--spacing-200);
    }

    .elementor .elementor-element .syn-card-grid {
        gap: var(--spacing-200);
    }
}

.card__link,
.elementor .elementor-element .card__link {
    font-weight: bold;
    text-decoration: none;
}

.card__link::after,
.elementor .elementor-element .card__link::after {
    content: "";
}

.card__link::before,
.elementor .elementor-element .card__link::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.card__link.no--stretched:before,
.btn.no--stretched:before {
    display: none;
}

/* ==========================================================================
Benefit Section
========================================================================== */
.benefit-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 336px));
    justify-content: center;
    margin: 0 auto;
    padding: var(--spacing-300) 0;
    row-gap: var(--spacing-300);
    column-gap: var(--spacing-600);
    width: 100%
}

.benefit-list-grid:has(> :only-child) {
    grid-template-columns: 1fr;
}

@media(max-width:575px) {
    .benefit-list-grid {
        padding: var(--spacing-200) 0;
        row-gap: var(--spacing-200);
        column-gap: var(--spacing-200);
    }
}

@media(min-width:576px) {
    .benefit-list-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .card--benefit {
        padding: var(--spacing-100);
    }
}

@media(min-width:1200px) {
    .benefit-list-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(min-width:1400px) {
    .benefit-list-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .benefit-list-grid:has(>:nth-child(4):nth-last-child(1)) {
        grid-template-columns: repeat(4, 1fr);
    }

    .benefit-list-grid:has(>:nth-child(3):nth-last-child(1)) {
        grid-template-columns: repeat(3, 1fr);
    }

    .benefit-list-grid:has(>:nth-child(2):nth-last-child(1)) {
        grid-template-columns: repeat(2, 1fr);
    }

}

.card--benefit {
    align-items: center;
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-100);
}

.card--benefit .card__content {
    text-align: center;
}

/* ==========================================================================
Features Section
========================================================================== */
.feature-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 100%));
    justify-content: center;
    margin: 0 auto;
    padding-top: var(--spacing-300);
    position: relative;
    gap: var(--spacing-400);
    width: 100%;
    z-index: 1;
}

@media(max-width:575px) {
    .feature-list-grid {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
    }

    .card--feature {
        flex: 1 0 100%;
        max-width: 18.75rem;
        scroll-snap-align: start;
    }

    .feature-list-grid:has(> :only-child) .card--feature {
        max-width: 100%;
    }
}

@media(min-width:576px) {
    .feature-list-grid {
        grid-template-columns: repeat(2, minmax(min(100%, 250px), 50%));
    }

    .feature-list-grid:has(> :only-child) {
        grid-template-columns: repeat(1, minmax(min(100%, 250px), 50%));
    }
}

@media(min-width:1200px) {
    .feature-list-grid {
        grid-template-columns: repeat(3, minmax(min(100%, 250px), 33.3%));
    }

    .feature-list-grid:has(> :only-child) {
        grid-template-columns: repeat(1, minmax(min(100%, 250px), 33.3%));
    }
}

@media(min-width:1400px) {
    .feature-list-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .feature-list-grid:has(> :only-child) {
        grid-template-columns: repeat(1, minmax(min(100%, 250px), 25%));
    }
}

.card--feature {
    background-color: var(--color-surface-primary);

}

.card--feature .card__content {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-300) 0;
    row-gap: var(--spacing-200);
}

.section--features {
    overflow: hidden;
    position: relative;
}

.section--features::before,
.section--features::after {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
}

.section--features::after {
    background-color: var(--color-surface-secondary);
    top: 20rem;
    z-index: 0;
}

@media(max-width:576px) {
    .section--features::after {
        top: 12rem;
    }
}

.section--features::before {
    background-color: var(--color-surface-primary-inverse);
    z-index: -1;
}

.card--feature .card__title:after {
    background-color: var(--color-primary-default);
    content: "";
    display: block;
    height: var(--spacing-100);
    margin-top: var(--spacing-100);
    width: var(--size-600);
}

/* ==========================================================================
Component/Module/Product List Section
========================================================================== */
.section--component-list,
.section--module-list,
.section--ai-agents {
    background-color: var(--color-surface-secondary);
}

.entity-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 100%));
    justify-content: center;
    margin: 0 auto;
    padding-top: clamp(var(--spacing-100), 1.5vw, var(--spacing-300));
    position: relative;
    gap: var(--spacing-400);
    max-width: 112.5rem;
    width: 100%;
    z-index: 1;
}

.entity-list-grid:has(> :only-child) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 500px));
}

.section--component-list .card--entity,
.section--product-list .card--entity,
.section--cross-product-list .card--entity,
.section--module-list .card--entity,
.section--ai-agents .card--entity,
.section--ai-agents .card--ai-agent {
    background-color: var(--color-surface-primary);
    border: solid 1px var(--color-primary-default);
    border-radius: var(--border-radius-500) 0 0 0;
    overflow: hidden;
    padding: 0;
}


.section--component-list .card__image,
.section--product-list .card__image,
.section--cross-product-list .card__image,
.section--module-list .card__image,
.section--ai-agents .card__image {
    max-height: 9rem;
    overflow: hidden;
}

.section--component-list .card__image img,
.section--product-list .card__image img,
.section--cross-product-list .card__image img,
.section--module-list .card__image img,
.section--ai-agents .card__image img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.section--component-list .card__content,
.section--product-list .card__content,
.section--cross-product-list .card__content,
.section--module-list .card__content,
.section--ai-agents .card__content {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-300) var(--spacing-300);
    row-gap: var(--spacing-200);
}


@media(max-width:575px) {
    .entity-list-grid {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .card--entity {
        flex: 1 0 100%;
        max-width: 18.75rem;
        scroll-snap-align: start;
    }

    .entity-list-grid:has(> :only-child) .card--entity {
        max-width: 100%;
    }
}

@media(min-width:576px) {
    .entity-list-grid:not(:has(> :only-child)) {
        grid-template-columns: repeat(2, minmax(min(100%, 250px), 50%));
    }
}

@media(min-width:1200px) {
    .entity-list-grid:not(:has(> :only-child)) {
        grid-template-columns: repeat(3, minmax(min(100%, 250px), 33.3%));
    }
}

@media(min-width:1400px) {
    .entity-list-grid:not(:has(> :only-child)) {
        grid-template-columns: repeat(4, 1fr);
    }

    .entity-list-grid:has(>:nth-child(2):nth-last-child(1)) {
        grid-template-columns: repeat(2, 1fr);
        max-width: var(--container-lg);
    }

    .entity-list-grid:has(>:nth-child(3):nth-last-child(1)) {
        grid-template-columns: repeat(3, 1fr);
        max-width: var(--container-xl);
    }

}

@media(min-width:576px) and (max-width:1199px) {
    :is(.benefit-list-grid, .feature-list-grid, .entity-list-grid, .insight-list-grid:not(:where(.section-insights-grid .insight-list-grid)), .resource-list-grid):not(:has(> :only-child)):has(> :nth-child(2n+1):last-child) > :last-child {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: 396px;
        width: 100%;
    }
}

@media(min-width:1200px) and (max-width:1399px) {
    :is(.benefit-list-grid, .feature-list-grid, .entity-list-grid, .insight-list-grid:not(:where(.section-insights-grid .insight-list-grid)), .resource-list-grid):not(:has(> :only-child)):has(> :nth-child(3n+1):last-child) > :last-child {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: 396px;
        width: 100%;
    }

    :is(.benefit-list-grid, .feature-list-grid, .entity-list-grid, .insight-list-grid, .resource-list-grid):not(:has(> :only-child)):has(> :nth-child(5)):has(> :nth-child(3n+2):last-child) {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    :is(.benefit-list-grid, .feature-list-grid, .entity-list-grid, .insight-list-grid, .resource-list-grid):not(:has(> :only-child)):has(> :nth-child(5)):has(> :nth-child(3n+2):last-child) > * {
        grid-column: span 2;
    }

    :is(.benefit-list-grid, .feature-list-grid, .entity-list-grid, .insight-list-grid:not(:where(.section-insights-grid .insight-list-grid)), .resource-list-grid):not(:has(> :only-child)):has(> :nth-child(5)):has(> :nth-child(3n+2):last-child) > :nth-last-child(2) {
        grid-column: 2 / span 2;
    }

    :is(.benefit-list-grid, .feature-list-grid, .entity-list-grid, .insight-list-grid:not(:where(.section-insights-grid .insight-list-grid)), .resource-list-grid):not(:has(> :only-child)):has(> :nth-child(5)):has(> :nth-child(3n+2):last-child) > :last-child {
        grid-column: 4 / span 2;
    }
}

@media(min-width:1400px) {
    :is(.feature-list-grid, .entity-list-grid):not(:has(> :only-child)):has(> :nth-child(4n+1):last-child) {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    :is(.feature-list-grid, .entity-list-grid):not(:has(> :only-child)):has(> :nth-child(4n+1):last-child) > * {
        grid-column: span 2;
    }

    :is(.feature-list-grid, .entity-list-grid):not(:has(> :only-child)):has(> :nth-child(4n+1):last-child) > :last-child {
        grid-column: 4 / span 2;
    }

    :is(.feature-list-grid, .entity-list-grid):not(:has(> :only-child)):has(> :nth-child(5)):has(> :nth-child(4n+2):last-child) {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    :is(.feature-list-grid, .entity-list-grid):not(:has(> :only-child)):has(> :nth-child(5)):has(> :nth-child(4n+2):last-child) > * {
        grid-column: span 2;
    }

    :is(.feature-list-grid, .entity-list-grid):not(:has(> :only-child)):has(> :nth-child(5)):has(> :nth-child(4n+2):last-child) > :nth-last-child(2) {
        grid-column: 3 / span 2;
    }

    :is(.feature-list-grid, .entity-list-grid):not(:has(> :only-child)):has(> :nth-child(5)):has(> :nth-child(4n+2):last-child) > :last-child {
        grid-column: 5 / span 2;
    }

    :is(.feature-list-grid, .entity-list-grid):not(:has(> :only-child)):has(> :nth-child(7)):has(> :nth-child(4n+3):last-child) {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    :is(.feature-list-grid, .entity-list-grid):not(:has(> :only-child)):has(> :nth-child(7)):has(> :nth-child(4n+3):last-child) > * {
        grid-column: span 2;
    }

    :is(.feature-list-grid, .entity-list-grid):not(:has(> :only-child)):has(> :nth-child(7)):has(> :nth-child(4n+3):last-child) > :nth-last-child(3) {
        grid-column: 2 / span 2;
    }

    :is(.feature-list-grid, .entity-list-grid):not(:has(> :only-child)):has(> :nth-child(7)):has(> :nth-child(4n+3):last-child) > :nth-last-child(2) {
        grid-column: 4 / span 2;
    }

    :is(.feature-list-grid, .entity-list-grid):not(:has(> :only-child)):has(> :nth-child(7)):has(> :nth-child(4n+3):last-child) > :last-child {
        grid-column: 6 / span 2;
    }

    .benefit-list-grid:not(:has(> :only-child)):has(> :nth-child(5n+1):last-child) {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }

    .benefit-list-grid:not(:has(> :only-child)):has(> :nth-child(5n+1):last-child) > * {
        grid-column: span 2;
    }

    .benefit-list-grid:not(:has(> :only-child)):has(> :nth-child(5n+1):last-child) > :last-child {
        grid-column: 5 / span 2;
    }

    .benefit-list-grid:not(:has(> :only-child)):has(> :nth-child(6)):has(> :nth-child(5n+2):last-child) {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }

    .benefit-list-grid:not(:has(> :only-child)):has(> :nth-child(6)):has(> :nth-child(5n+2):last-child) > * {
        grid-column: span 2;
    }

    .benefit-list-grid:not(:has(> :only-child)):has(> :nth-child(6)):has(> :nth-child(5n+2):last-child) > :nth-last-child(2) {
        grid-column: 4 / span 2;
    }

    .benefit-list-grid:not(:has(> :only-child)):has(> :nth-child(6)):has(> :nth-child(5n+2):last-child) > :last-child {
        grid-column: 6 / span 2;
    }

    .benefit-list-grid:not(:has(> :only-child)):has(> :nth-child(6)):has(> :nth-child(5n+3):last-child) {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }

    .benefit-list-grid:not(:has(> :only-child)):has(> :nth-child(6)):has(> :nth-child(5n+3):last-child) > * {
        grid-column: span 2;
    }

    .benefit-list-grid:not(:has(> :only-child)):has(> :nth-child(6)):has(> :nth-child(5n+3):last-child) > :nth-last-child(3) {
        grid-column: 3 / span 2;
    }

    .benefit-list-grid:not(:has(> :only-child)):has(> :nth-child(6)):has(> :nth-child(5n+3):last-child) > :nth-last-child(2) {
        grid-column: 5 / span 2;
    }

    .benefit-list-grid:not(:has(> :only-child)):has(> :nth-child(6)):has(> :nth-child(5n+3):last-child) > :last-child {
        grid-column: 7 / span 2;
    }

    .benefit-list-grid:not(:has(> :only-child)):has(> :nth-child(6)):has(> :nth-child(5n+4):last-child) {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }

    .benefit-list-grid:not(:has(> :only-child)):has(> :nth-child(6)):has(> :nth-child(5n+4):last-child) > * {
        grid-column: span 2;
    }

    .benefit-list-grid:not(:has(> :only-child)):has(> :nth-child(6)):has(> :nth-child(5n+4):last-child) > :nth-last-child(4) {
        grid-column: 2 / span 2;
    }

    .benefit-list-grid:not(:has(> :only-child)):has(> :nth-child(6)):has(> :nth-child(5n+4):last-child) > :nth-last-child(3) {
        grid-column: 4 / span 2;
    }

    .benefit-list-grid:not(:has(> :only-child)):has(> :nth-child(6)):has(> :nth-child(5n+4):last-child) > :nth-last-child(2) {
        grid-column: 6 / span 2;
    }

    .benefit-list-grid:not(:has(> :only-child)):has(> :nth-child(6)):has(> :nth-child(5n+4):last-child) > :last-child {
        grid-column: 8 / span 2;
    }
}

/* ==========================================================================
AI Agents Section
========================================================================== */
.single-ai-agent .section--hero .hero-title {
    color: var(--color-warning-default);
}

.section--ai-agents {
    background-image: url('assets/images/bck_AIAgents.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.section--ai-agents>div {
    position: relative;
    z-index: 1;
}

.section--ai-agents::after {
    background: radial-gradient(ellipse at center, rgba(var(--color-surface-primary-inverse-rgb), .85) 24%, rgba(var(--color-surface-primary-inverse-rgb), 0) 100%);
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.section--ai-agents .card__title {
    color: var(--color-warning-default)
}

@media(min-width:575px) {
    .section--ai-agents .ai-agent-list-grid.ai-agent-list-grid--items-1 {
        grid-template-columns: minmax(0, 1fr);
        max-width: var(--container-lg);
        min-height: 24rem;
    }

    .section--ai-agents .ai-agent-list-grid.ai-agent-list-grid--items-1 .card--ai-agent .card__title {
        font-size: var(--h2);
    }

    .section--ai-agents .ai-agent-list-grid.ai-agent-list-grid--items-1 .card--ai-agent .card__excerpt {
        font-size: var(--text-lg);
    }

    .section--ai-agents .ai-agent-list-grid.ai-agent-list-grid--items-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: var(--container-2xl);
    }

    .section--ai-agents .ai-agent-list-grid.ai-agent-list-grid--items-1 .card--ai-agent,
    .section--ai-agents .ai-agent-list-grid.ai-agent-list-grid--items-2 .card--ai-agent {
        flex-direction: row;
    }

    .section--ai-agents .ai-agent-list-grid.ai-agent-list-grid--items-1 .card--ai-agent .card__content,
    .section--ai-agents .ai-agent-list-grid.ai-agent-list-grid--items-2 .card--ai-agent .card__content {
        padding: var(--spacing-600);
        justify-content: center;
    }

    .section--ai-agents .ai-agent-list-grid.ai-agent-list-grid--items-1 .card--ai-agent .card__image,
    .section--ai-agents .ai-agent-list-grid.ai-agent-list-grid--items-2 .card--ai-agent .card__image {
        max-height: none;
        max-width: 33.333%;
    }
}

@media (max-width: 991px) {
    .section--ai-agents .ai-agent-list-grid.ai-agent-list-grid--items-2 {
        grid-template-columns: minmax(0, 1fr);
        max-width: var(--container-md);
    }
}

.section--ai-agents .card--ai-agent {
    background: linear-gradient(180deg, var(--color-surface-primary) 0%, var(--color-surface-tertiary) 100%);
    border: 1px solid var(--color-border-default);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.section--ai-agents .card--ai-agent .card__content {
    height: 100%
}

.card__content .card--ai-agent .card__title {
    margin-bottom: 0;
}

.section--ai-agents .card--ai-agent .card__image {
    flex-shrink: 0;
}


.section--ai-agents .card--ai-agent .card__link {
    margin-top: auto;
}

.section--ai-agents .card--ai-agent .card__tag.card__tag--inactive {
    max-width: 100%;
    white-space: normal;
}

@media(max-width:575px) {
    .section--ai-agents .ai-agent-list-grid {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .section--ai-agents .card--ai-agent {
        flex: 1 0 100%;
        max-width: 18.75rem;
        scroll-snap-align: start;
    }

    .section--ai-agents .ai-agent-list-grid:has(> :only-child) .card--ai-agent {
        max-width: 100%;
    }
}

/* ==========================================================================
Insight Section
========================================================================== */
.insight-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 100%));
    justify-content: center;
    margin: 0 auto;
    padding-top: var(--spacing-300);
    position: relative;
    gap: var(--spacing-400);
    width: 100%;
    z-index: 1;
}

.related-insights__grid-only {
    width: 100%;
}

@media(max-width:575px) {
    .section--related-insights:not(.section-insights-grid) .insight-list-grid {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .section--related-insights:not(.section-insights-grid) .card--insight {
        flex: 1 0 100%;
        max-width: 18.75rem;
        scroll-snap-align: start;
    }

    .section--related-insights:not(.section-insights-grid) .insight-list-grid:has(> :only-child) .card--insight {
        max-width: 100%;
    }
}

@media(min-width:576px) {
    .insight-list-grid {
        grid-template-columns: repeat(2, minmax(min(100%, 250px), 50%));
    }
}

@media(min-width:1200px) {
    .insight-list-grid {
        grid-template-columns: repeat(3, minmax(min(100%, 250px), 33.3%));
    }
}

@media(min-width:1400px) {
    .insight-list-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 396px));
    }
}

.insight-list-grid:has(> :only-child) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 396px));
}

@media(min-width:1400px) {
    .insight-list-grid:not(:has(> :only-child)) {
        grid-template-columns: repeat(6, minmax(0, calc((396px - var(--spacing-400)) / 2)));
        justify-content: center;
    }

    .insight-list-grid:not(:has(> :only-child)):has(> :nth-child(2):last-child) {
        grid-template-columns: repeat(4, minmax(0, calc((396px - var(--spacing-400)) / 2)));
    }

    .insight-list-grid:not(:has(> :only-child)) > * {
        grid-column: span 2;
    }

    .insight-list-grid:not(:where(.section-insights-grid .insight-list-grid)):not(:has(> :only-child)):has(> :nth-child(3n+1):last-child) > :last-child {
        grid-column: 3 / span 2;
    }

    .insight-list-grid:not(:where(.section-insights-grid .insight-list-grid)):not(:has(> :only-child)):has(> :nth-child(5)):has(> :nth-child(3n+2):last-child) > :nth-last-child(2) {
        grid-column: 2 / span 2;
    }

    .insight-list-grid:not(:where(.section-insights-grid .insight-list-grid)):not(:has(> :only-child)):has(> :nth-child(5)):has(> :nth-child(3n+2):last-child) > :last-child {
        grid-column: 4 / span 2;
    }
}

@media(min-width:1800px) {
    .insight-list-grid:not(:has(> :only-child)) {
        grid-template-columns: repeat(8, minmax(0, calc((396px - var(--spacing-400)) / 2)));
        justify-content: center;
    }

    .insight-list-grid:not(:has(> :only-child)) > * {
        grid-column: span 2;
    }

    .insight-list-grid:not(:has(> :only-child)):has(> :nth-child(3n+1):last-child) > :last-child {
        grid-column: span 2;
    }

    .insight-list-grid:not(:has(> :only-child)):has(> :nth-child(5)):has(> :nth-child(3n+2):last-child) > :nth-last-child(2),
    .insight-list-grid:not(:has(> :only-child)):has(> :nth-child(5)):has(> :nth-child(3n+2):last-child) > :last-child {
        grid-column: span 2;
    }

    .insight-list-grid:not(:has(> :only-child)):has(> :nth-child(4):last-child) > :last-child {
        grid-column: span 2;
    }

    .insight-list-grid:not(:has(> :only-child)):has(> :nth-child(5):last-child):has(> :nth-child(5)) > :nth-last-child(2) {
        grid-column: span 2;
    }

    .insight-list-grid:not(:where(.section-insights-grid .insight-list-grid)):not(:has(> :only-child)):has(> :nth-child(5):last-child):has(> :nth-child(5)) > :last-child {
        grid-column: 4 / span 2;
    }

    .insight-list-grid:not(:has(> :only-child)):has(> :nth-child(2):last-child) {
        grid-template-columns: repeat(4, minmax(0, calc((396px - var(--spacing-400)) / 2)));
    }

    .insight-list-grid:not(:where(.section-insights-grid .insight-list-grid)):not(:has(> :only-child)):has(> :nth-child(4n+1):last-child) > :last-child {
        grid-column: 4 / span 2;
    }

    .insight-list-grid:not(:where(.section-insights-grid .insight-list-grid)):not(:has(> :only-child)):has(> :nth-child(4n+2):last-child):has(> :nth-child(6)) > :nth-last-child(2) {
        grid-column: 3 / span 2;
    }

    .insight-list-grid:not(:where(.section-insights-grid .insight-list-grid)):not(:has(> :only-child)):has(> :nth-child(4n+2):last-child):has(> :nth-child(6)) > :last-child {
        grid-column: 5 / span 2;
    }

    .insight-list-grid:not(:where(.section-insights-grid .insight-list-grid)):not(:has(> :only-child)):has(> :nth-child(4n+3):last-child) > :nth-last-child(3) {
        grid-column: 2 / span 2;
    }

    .insight-list-grid:not(:where(.section-insights-grid .insight-list-grid)):not(:has(> :only-child)):has(> :nth-child(4n+3):last-child) > :nth-last-child(2) {
        grid-column: 4 / span 2;
    }

    .insight-list-grid:not(:where(.section-insights-grid .insight-list-grid)):not(:has(> :only-child)):has(> :nth-child(4n+3):last-child) > :last-child {
        grid-column: 6 / span 2;
    }

    .insight-list-grid:not(:where(.section-insights-grid .insight-list-grid)):not(:has(> :only-child)):has(> :nth-child(4n+3):last-child):has(> :nth-child(5)) > :nth-last-child(3) {
        grid-column: 2 / span 2;
    }

    .insight-list-grid:not(:where(.section-insights-grid .insight-list-grid)):not(:has(> :only-child)):has(> :nth-child(4n+3):last-child):has(> :nth-child(5)) > :nth-last-child(2) {
        grid-column: 4 / span 2;
    }

    .insight-list-grid:not(:where(.section-insights-grid .insight-list-grid)):not(:has(> :only-child)):has(> :nth-child(4n+3):last-child):has(> :nth-child(5)) > :last-child {
        grid-column: 6 / span 2;
    }
}

@media(min-width:1800px) {
    .section--related-insights .insight-list-grid--other {
        display: flex;
        flex-wrap: wrap;
    }

    .section--related-insights .insight-list-grid--other > .card--insight {
        flex: 0 0 min(396px, calc((100% - 4 * var(--spacing-400)) / 5));
        min-width: 0;
    }
}

.insights-grid__count {
    color: var(--color-body);
    font-size: var(--text-sm);
    font-weight: 500;
    margin: 0;
    text-align: right;
}

.insights-grid__meta {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: var(--spacing-300);
    justify-content: center;
    margin: var(--spacing-300) 0 var(--spacing-500);
}

.insights-grid__pagination {
    display: flex;
    flex: 0 1 auto;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
}

.insights-grid__pagination-shell {
    align-items: center;
    background-color: transparent;
    border: 0;
    display: inline-flex;
    gap: var(--spacing-100);
    min-height: 3.25rem;
    max-width: 100%;
    overflow-x: auto;
    padding: 1rem;
}

.insights-grid__pagination .page-numbers {
    align-items: center;
    border-radius: var(--border-radius-999);
    color: var(--color-body);
    display: inline-flex;
    font-size: clamp(var(--text-md), 1.1vw, var(--text-xl));
    font-weight: 500;
    height: 3rem;
    justify-content: center;
    min-width: 3rem;
    margin: 0;
    padding: 0 var(--spacing-125);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.insights-grid__pagination a.page-numbers:hover {
    background-color: var(--color-surface-secondary);
    color: var(--color-primary-default);
}

.insights-grid__pagination .page-numbers.current {
    background-color: var(--color-primary-default);
    box-shadow: 0 0 0 0.35rem var(--color-surface-secondary);
    color: var(--color-primary-inverse);
    font-weight: 700;
}

.insights-grid__pagination .page-numbers.prev,
.insights-grid__pagination .page-numbers.next {
    color: var(--color-primary-default);
    gap: var(--spacing-050);
    min-width: auto;
    padding-left: var(--spacing-100);
    padding-right: var(--spacing-100);
    text-align: center;
}

.insights-grid__pagination .page-numbers.dots {
    color: var(--color-body);
    min-width: auto;
    opacity: 0.65;
    padding: 0;
    pointer-events: none;
}

.insights-grid__pagination-label {
    font-size: clamp(var(--text-md), 1vw, var(--text-lg));
    font-weight: 500;
}

.insights-grid__pagination .material-symbols-rounded {
    font-size: 1.6rem;
    line-height: 1;
}

@media (max-width: 576px) {
    .page-template.page-template-page-insights .section--hero {
        margin-bottom: var(--spacing-200);
    }

    .insights-grid__meta {
        align-items: center;
        flex-direction: column;
        gap: var(--spacing-150);
        margin: var(--spacing-250) 0 var(--spacing-400);
    }

    .insights-grid__count {
        font-size: var(--text-md);
        text-align: center;
    }

    .insights-grid__pagination-shell {
        gap: var(--spacing-050);
        justify-content: center;
        min-height: 2.75rem;
    }

    .insights-grid__pagination .page-numbers {
        font-size: var(--text-sm);
        height: 2.5rem;
        min-width: 2.5rem;
        padding: 0 var(--spacing-075);
    }

    .insights-grid__pagination .page-numbers.current {
        box-shadow: 0 0 0 0.2rem var(--color-surface-secondary);
    }

    .insights-grid__pagination .page-numbers.prev,
    .insights-grid__pagination .page-numbers.next {
        min-width: auto;
        padding-left: 0;
        padding-right: 0;
    }

    .insights-grid__pagination-label {
        display: none;
    }
}

.card--insight {
    background-color: var(--color-surface-primary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--border-radius-500) 0 0;
    overflow: hidden;
    padding: 0;
}

.card.card--popover-open,
.card--insight.card--insight--popover-open {
    overflow: visible;
    z-index: 2;
}

.card--insight .card__content {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-300) var(--spacing-300);
    row-gap: var(--spacing-200);
}

.card__tags {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--spacing-050);
    position: relative;
    overflow: visible;
}

.card__tag {
    border-radius: var(--border-radius-999);
    flex: 0 0 auto;
}

.card__tag--inactive,
.tag.tag--inactive {
    border-color: var(--color-border-default);
    background-color: var(--color-primary-inverse);
    color: var(--color-body);
    cursor: default;
    pointer-events: none;
}

.card__tag--resources {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--spacing-200)
}

/* Card tags more button and popover */
.card__tags-more {
    position: static;
    display: inline-block;
    flex: 0 0 auto;
}

.card__tag-more {
    cursor: pointer;
}

.card__tag-more:hover {
    opacity: 0.9;
}

.card__tags-popover {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    background: white;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: var(--border-radius-200, 0.5rem);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: var(--spacing-200, 0.5rem);
    margin-top: var(--spacing-050);
    width: 100%;
    box-sizing: border-box;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.card__tags-popover.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.card__tags-popover__content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-050);
}

@media (prefers-reduced-motion: reduce) {
    .card__tags-popover {
        transition: none;
    }
}

.section--related-insights {
    overflow: hidden;
    position: relative;
}

.section--related-insights .card__image {
    border-radius: var(--border-radius-500) 0 0;
    max-height: var(--size-3000);
    overflow: hidden;
}

.section--related-insights .card__image img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.related-insights__footer {
    padding-top: var(--spacing-300);
    text-align: center;
}

/* ==========================================================================
Resources Section
========================================================================== */
.resource-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 100%));
    justify-content: center;
    margin: 0 auto;
    padding-top: var(--spacing-300);
    position: relative;
    gap: var(--spacing-400);
    max-width: 112.5rem;
    width: 100%;
    z-index: 1;
}

@media(max-width:575px) {
    .resource-list-grid {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
    }

    .card--resource {
        flex: 1 0 100%;
        max-width: 18.75rem;
        scroll-snap-align: start;
    }

    .resource-list-grid:has(> :only-child) .card--resource {
        max-width: 100%;
    }
}

@media(min-width:576px) {
    .resource-list-grid {
        grid-template-columns: repeat(2, minmax(min(100%, 250px), 50%));
    }
}

@media(min-width:1200px) {
    .resource-list-grid {
        grid-template-columns: repeat(3, minmax(min(100%, 250px), 33.3%));
    }
}

@media(min-width:1400px) {
    .resource-list-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 396px));
    }
}

.resource-list-grid:has(> :only-child) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 396px));
}

@media(min-width:1400px) {
    .resource-list-grid:not(:has(> :only-child)) {
        grid-template-columns: repeat(6, minmax(0, calc((396px - var(--spacing-400)) / 2)));
        justify-content: center;
    }

    .resource-list-grid:not(:has(> :only-child)) > * {
        grid-column: span 2;
    }

    .resource-list-grid:not(:has(> :only-child)):has(> :nth-child(3n+1):last-child) > :last-child {
        grid-column: 3 / span 2;
    }

    .resource-list-grid:not(:has(> :only-child)):has(> :nth-child(5)):has(> :nth-child(3n+2):last-child) > :nth-last-child(2) {
        grid-column: 2 / span 2;
    }

    .resource-list-grid:not(:has(> :only-child)):has(> :nth-child(5)):has(> :nth-child(3n+2):last-child) > :last-child {
        grid-column: 4 / span 2;
    }
}

.card--resource {
    background-color: var(--color-surface-primary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--border-radius-050);
    overflow: hidden;
    padding: 0;
}

.card--resource .card__content {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-300) var(--spacing-300);
    row-gap: var(--spacing-200);
}

.card--resource .card__icon {
    background-color: var(--blue-ntt-80);
    border-radius: var(--border-radius-999);
    border: solid 1px var(--color-border-primary);
    color: var(--blue-ntt-10);
    padding: var(--spacing-050);
}

.card--resource .card__title {
    display: flex;
    gap: var(--spacing-100)
}

.card--resource .card__tag {
    background-color: var(--gray-ntt-100);
    border-radius: var(--border-radius-999);
    border: solid 1px var(--color-border-default);
    display: block;
    font-size: var(--text-xs);
    padding: var(--spacing-025) var(--spacing-100);
    text-decoration: none;
}

.section--resources {
    overflow: hidden;
    position: relative;
}

.section--resources .card__image {
    max-height: 9rem;
    overflow: hidden;
}

.section--resources .card__image img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* ==========================================================================
KPIs Section
========================================================================== */
.kpi-list-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    padding-top: var(--spacing-600);
    position: relative;
    gap: var(--spacing-200);
    width: 100%;
    z-index: 1;
}

.card--kpi .card__content {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-200);
}

@media(max-width:575px) {
    .kpi-list-grid > .card--kpi {
        flex: 0 0 calc((100% - var(--spacing-200)) / 2);
    }

    .card--kpi {
        padding: var(--spacing-100);
    }
}

@media(min-width:576px) {
    .kpi-list-grid {
        gap: var(--spacing-400);
    }

    .kpi-list-grid > .card--kpi {
        flex: 0 0 13.5rem;
    }

    .card--kpi .card__content {
        align-items: center;
    }

}

.card--kpi .card__value {
    font-weight: bold;
    padding-left: var(--spacing-100);
    border-left: solid var(--size-050) var(--color-primary-default)
}

.card--kpi .card__label {
    font-size: var(--text-lg);
}

@media(min-width:576px) {
    .card--kpi .card__label:only-child {
        text-align: center;
    }
}

.card--kpi .card__description {
    font-size: var(--text-sm)
}

/* ==========================================================================
Contact Section
========================================================================== */
.section--contact-cta {
    background: url(assets/images/bck_contact.jpg) no-repeat center/cover;
}

@media(max-width:576px) {
    .section--contact-cta {
        background-position: left center;
    }
}

.contact-cta__content {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-300);
}

/* Trust Center banner */
.section-trust-center {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 360px;
    display: flex;
    align-items: center;
    text-align: center;
    background-image: var(--trust-center-background);
    background-position: center;
    background-size: cover;
}

.section-trust-center::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border: 1px solid rgba(25, 163, 252, .28);
}

.trust-center__content {
    position: relative;
    z-index: 1;
}

.trust-center__mark {
    display: inline-grid;
    width: 52px;
    height: 52px;
    place-items: center;
    object-fit: cover;
    background: var(--color-surface-primary-inverse);
    color: var(--color-primary-inverse);
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 500;
}

@media (max-width: 576px) {
    .section-trust-center {
        min-height: 320px;
        padding-block: var(--spacing-600);
        background-position: 68% center;
    }

}

/* ==========================================================================
Icons
========================================================================== */

.material-symbols-rounded {
    color: var(--color-primary-default);
}

.card__icon-lg .material-symbols-rounded {
    font-size: var(--size-300);
}

.card__icon-xl .material-symbols-rounded {
    font-size: var(--size-600);
}

.card__icon-xxl .material-symbols-rounded {
    font-size: var(--size-900);
}

@media(max-width:576px) {
    .card__icon-lg .material-symbols-rounded {
        font-size: var(--size-200);
    }

    .card__icon-xl .material-symbols-rounded {
        font-size: var(--size-400);
    }

    .card__icon-xxl .material-symbols-rounded {
        font-size: var(--size-600);
    }
}

.icon-text-lg {
    font-size: var(--size-300);
}

.icon-text-xl {
    font-size: var(--size-600);
}

.icon-text-xxl {
    font-size: var(--size-900);
}

[class*=" eicon-"],
[class^=eicon],
.elementor-popup-modal .dialog-close-button .e-eicon-close.eicon-close {
    fill: var(--color-primary-default);
}

/* ==========================================================================
Clients
========================================================================== */
.clients-list-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: var(--spacing-600) auto 0;
    position: relative;
    column-gap: var(--spacing-800);
    row-gap: var(--spacing-500);
    max-width: 112.5rem;
    width: 100%;
    z-index: 1;
}

.client-logo {
    align-items: center;
    display: flex;
    flex: 0 0 160px;
    justify-content: center;
}

@media (max-width: 575px) {
    .clients-list-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-300);
    }

    .client-logo {
        justify-content: center;
        min-width: 0;
    }

    .section--clients .client-logo img {
        height: auto;
        max-height: 4rem;
        max-width: 80%;
        object-fit: contain;
        width: auto;
    }
}

/* ==========================================================================
Badges
========================================================================== */
.badge {
    background-color: var(--color-primary-default);
    border-radius: var(--border-radius-999);
    color: var(--color-primary-inverse);
    font-size: var(--text-xxs);
    min-width: var(--size-300);
    padding: var(--spacing-025);
    text-align: center;
}

.badge--inverse {
    background-color: var(--color-primary-inverse);
    color: var(--color-primary-default);
}

/* ==========================================================================
Tags
========================================================================== */
.section--hero-carousel .hero-slide .hero-tags,
.section--hero .hero-single .hero-tags {
    display: flex;
    gap: var(--spacing-100);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-100);
}

.section--hero .hero-single .hero-tags:not(:has(*)),
.section--hero-carousel .hero-slide .hero-tags:not(:has(*)) {
    display: none;
}

.tag {
    background-color: var(--color-primary-inverse);
    border-radius: var(--border-radius-999);
    border: solid 1px var(--color-primary-default);
    color: var(--color-primary-default);
}

.tag--industry {
    align-items: center;
    display: inline-flex;
    padding: var(--spacing-025) var(--spacing-100) var(--spacing-025) var(--spacing-050);
}

.tag--industry::before {
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    content: "";
    height: var(--size-400);
    width: var(--size-400);
}

.tag--banking-financial-insurance::before {
    background-image: url(../syntphony/assets/images/category-icons/ic_industry_insurance.svg);
}

.tag--energy-utilities-materials::before {
    background-image: url(../syntphony/assets/images/category-icons/ic_industry_energyAndUtilities.svg);
}

.tag--tmt::before,
.tag--telco-media-technology::before {
    background-image: url(../syntphony/assets/images/category-icons/ic_industry_telcoMediaAndTechnology.svg);
}

.tag--sustainability::before {
    background-image: url(../syntphony/assets/images/category-icons/ic_industry_sustainability.svg);
}

.tag--healthcare::before {
    background-image: url(../syntphony/assets/images/category-icons/ic_industry_healthcareLifeScienceAndPharma.svg);
}

.tag--cpg::before,
.tag--retail::before,
.tag--automotive::before,
.tag--manufacturing::before {
    background-image: url(../syntphony/assets/images/category-icons/ic_industry_products.svg);
}

/* ==========================================================================
Blockquote
========================================================================== */
.elementor-element .elementor-widget-blockquote blockquote {
    background: var(--color-primary-default);
    color: var(--gray-ntt-100);
    font-size: var(--text-lg);
    padding: var(--spacing-400) var(--spacing-200);
}

.elementor-element .elementor-widget-blockquote blockquote .elementor-blockquote__content {
    font-family: var(--font-family-headings);
}

.elementor-element .elementor-blockquote--skin-quotation .elementor-blockquote:before {
    color: var(--gray-ntt-100);
    font-family: var(--font-family-headings);
    font-weight: 400;
}

.elementor-element .elementor-widget-blockquote blockquote .elementor-blockquote__content:after {
    content: "”";
}

@media (min-width: 768px) {
    .elementor-element .elementor-widget-blockquote blockquote {
        padding: var(--spacing-1000);
    }

    .elementor-element .elementor-widget-blockquote blockquote .elementor-blockquote__content {
        display: inline-block;
        font-size: var(--text-2xl);
        max-width: calc(100% - 4rem);
        padding-left: 2rem;
        vertical-align: top;
    }

    .elementor-element .elementor-widget-blockquote.text-xl blockquote .elementor-blockquote__content {
        font-size: var(--text-xl);
    }

    .elementor-element .elementor-blockquote--skin-quotation .elementor-blockquote:before {
        display: inline-block;
    }

    .elementor-element .elementor-blockquote .e-q-footer {
        padding-left: var(--spacing-1000)
    }
}

/* ==========================================================================
Dark Light section
========================================================================== */
.dark-light-section {
    display: flex;
}

main .elementor .dark-light-section .dark-light__dark-content,
main .elementor .dark-light-section .dark-light__light-content {
    padding: var(--spacing-600) var(--spacing-300);
    box-sizing: border-box;
    max-width: var(--container-sm);
}

main .elementor .dark-light-section .dark-light__dark-content,
main .elementor .dark-light-section .dark-light__light-content {
    margin-inline: auto;
}

@media (min-width: 768px) {

    main .elementor .dark-light-section .dark-light__dark-content,
    main .elementor .dark-light-section .dark-light__light-content {
        max-width: var(--container-md);
    }
}

@media (min-width: 992px) {

    main .elementor .dark-light-section .dark-light__dark-content,
    main .elementor .dark-light-section .dark-light__light-content {
        max-width: var(--container-lg);
    }
}

@media (min-width: 1200px) {

    main .elementor .dark-light-section .dark-light__dark-content,
    main .elementor .dark-light-section .dark-light__light-content {
        padding-block: var(--spacing-1400);
        max-width: 34.125rem;
    }

    main .elementor .dark-light-section .dark-light__dark-content {
        margin-left: auto;
        margin-right: 2rem;
    }

    main .elementor .dark-light-section .dark-light__light-content {
        margin-left: 2rem;
        margin-right: auto;
    }
}

@media (min-width: 1440px) {

    main .elementor .dark-light-section .dark-light__dark-content,
    main .elementor .dark-light-section .dark-light__light-content {
        padding-block: var(--spacing-1400);
        max-width: 43.5rem;
    }
}

@media (min-width: 1680px) {

    main .elementor .dark-light-section .dark-light__dark-content,
    main .elementor .dark-light-section .dark-light__light-content {
        max-width: 51rem;
    }
}

/* ==========================================================================
Elementor reset
========================================================================== */
.section .e-con-full,
.section .e-con>.e-con-inner,
.section .e-con {
    padding: 0;
    padding-inline: 0;
}

.elementor-icon-list-icon svg {
    fill: var(--color-primary-default)
}

ul,
.elementor-widget .elementor-icon-list-items {
    margin-bottom: var(--spacing-100)
}

main .elementor .e-flexbox-base,
main .elementor .e-div-block-base {
    padding: 0
}

/* ==========================================================================
    Utility classes
    ========================================================================== */
.content-wrapper,
.elementor .elementor-element .content-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-300);
}

.content-wrapper-start,
.elementor .elementor-element .content-wrapper-start {
    align-items: start;
}

.content-row-wrapper,
.elementor .elementor-element .content-row-wrapper {
    display: flex;
    column-gap: var(--spacing-800);
    row-gap: var(--spacing-300);
}

@media(max-width:1200px) {

    .content-row-wrapper,
    .elementor .elementor-element .content-row-wrapper {
        column-gap: var(--spacing-400);
    }
}

@media(max-width:576px) {

    .content-wrapper,
    .elementor .elementor-element .content-wrapper {
        row-gap: var(--spacing-200);
    }

    .content-row-wrapper,
    .elementor .elementor-element .content-row-wrapper {
        column-gap: var(--spacing-200);
    }
}

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

.pb-0,
.elementor .elementor-element .pb-0 {
    padding-bottom: 0;
}

.bg-surface-secondary {
    background-color: var(--color-surface-secondary);
}

.bg-surface-tertiary {
    background-color: var(--color-surface-tertiary);
}

.bg-surface {
    background-color: var(--color-surface-primary);
}

.border {
    border: solid 1px var(--color-border-default);
}

.border-subtle {
    border: solid 1px var(--color-border-subtle-default);
}

.display-none,
.elementor .elementor-element .display-none {
    display: none;
}

/* ==========================================================================
    Decorations
    ========================================================================== */
.border-deco-vertical-left,
.elementor .elementor-element .border-deco-vertical-left {
    display: flex;
    column-gap: var(--spacing-050);
}

.border-deco-vertical-left:before {
    background-color: var(--color-primary-default);
    content: "";
    display: inline-block;
    flex-shrink: 0;
    height: 100%;
    left: 0;
    margin-right: 1rem;
    min-height: var(--size-500);
    position: relative;
    top: var(--spacing-050);
    vertical-align: middle;
    width: var(--size-100);
}

.elementor .elementor-element .border-deco-vertical-bottom {
    display: flex;
    flex-direction: column;
    font-weight: bold;
    padding-bottom: var(--spacing-100);
    row-gap: var(--spacing-100);
}

.border-deco-vertical-bottom:after {
    background-color: var(--color-primary-subtle-default);
    content: "";
    height: var(--size-050);
    width: var(--size-900);
}

/* ==========================================================================
   Europe operational coverage
   ========================================================================== */
.section .section--europe-map {
    border-bottom: 0;
}

.section--europe-map .europe-map__layout {
    align-items: center;
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
    grid-template-columns: minmax(0, 1fr);
}

.europe-map__header {
    margin-bottom: 1.5rem;
}

.europe-map__intro {
    color: var(--gray-ntt-40);
}

.europe-map__status-dot {
    border-radius: 50%;
    display: inline-block;
    width: 0.875em;
    height: 0.875em;
    margin-right: 0.35em;
    vertical-align: -0.05em;
}

.europe-map__status-dot--live {
    background: var(--blue-ntt-50);
}

.europe-map__status-dot--expansion {
    background: var(--blue-ntt-70);
}

.europe-map__status-dot--neutral {
    background: var(--gray-ntt-80);
}

.section--europe-map .europe-map__flag {
    border-radius: 50%;
    display: inline-block;
    height: var(--size-400);
    margin-right: var(--spacing-100);
    vertical-align: middle;
    width: var(--size-400);
}

.europe-map__figure {
    container-type: inline-size;
    min-width: 0;
    position: relative;
}

.europe-map__inset-label {
    color: var(--color-headings);
    font-family: var(--font-family-base);
    font-size: 1.915cqw;
    font-weight: 700;
    left: 2.504%;
    line-height: 1;
    position: absolute;
    top: 81.37%;
}

@media (min-width: 993px) {
    .section--europe-map .europe-map__layout {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    }

    .section--europe-map .accordion > details > summary {
        color: var(--color-headings);
        cursor: default;
    }

    .section--europe-map .accordion > details > summary::after {
        display: none;
    }
}

.europe-map__figure img {
    display: block;
    height: auto;
    width: 100%;
}

.section--europe-map .europe-map__figure .europe-map__marker {
    border: 1px solid var(--color-border-subtle-default);
    border-radius: 50%;
    height: auto;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 4.713%;
}

.europe-map__marker--spain {
    left: 25.037%;
    top: 67.26%;
}

.europe-map__marker--portugal {
    left: 16.2%;
    top: 65.89%;
}

.europe-map__marker--central-europe {
    left: 52.577%;
    top: 45.342%;
}

.europe-map__marker--italy {
    left: 55.965%;
    top: 64.521%;
}

@media(max-width:576px) {
    .border-deco-vertical-bottom:after {
        width: var(--size-300);
    }

    .elementor .elementor-element .border-deco-vertical-bottom {
        text-align: center;
    }
}