/*!
Theme Name: Whistcom
Author: Cyllene
Author URI: https://www.groupe-cyllene.com/
Description: The main theme for Whistcom
Version: 1.0.0
Text Domain: whistcom
*/

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/***** CUSTOM *****/

@font-face {
    font-family: Bitter;
    src: url(./fonts/Bitter-Bold.ttf) format('truetype');
}

@font-face {
    font-family: Montserrat;
    src: url(./fonts/Montserrat-Light.ttf) format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: Montserrat;
    src: url(./fonts/Montserrat-Regular.ttf) format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: Montserrat;
    src: url(./fonts/Montserrat-Medium.ttf) format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: Montserrat;
    src: url(./fonts/Montserrat-SemiBold.ttf) format('truetype');
    font-weight: 600;
}

@font-face {
    font-family: Montserrat;
    src: url(./fonts/Montserrat-ExtraBold.ttf) format('truetype');
    font-weight: 800;
}

:root {
    --color-primary: #0c2a6d;
    --color-secondary: #f57f6e;
    --title-lg: 50px;
    --title-md: 40px;
    --title-sm: 35px;
    --title-xs: 30px;
}

/*** COMPONENTS ***/

* {
    box-sizing: border-box;
}

html.overflow-stop {
    overflow: hidden;
}

body {
    max-width: 100vw;
    overflow-x: hidden;
}

body,
button,
textarea {
    font-family: Montserrat, sans-serif;
}

a {
    color: #fff;
    text-decoration: none;
    display: inline-block;
}

.btn {
    padding: 15px 40px 15px 15px;
    border: solid 2px var(--color-secondary);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    position: relative;
    z-index: 1;
    transition: color 0.3s 0.1s ease-out;
    overflow: hidden;
}

.btn.btn-blue {
    color: var(--color-primary);
}

.btn::before {
    content: '';
    position: absolute;
    left: -10px;
    bottom: 0;
    border-radius: 50%;
    width: calc(100% + 20px);
    transform: translateY(calc(50% - 20px)) scale(0);
    background-color: var(--color-secondary);
    opacity: 0;
    aspect-ratio: 1 / 1;
    transition: 0.3s ease-out;
    z-index: -1;
    pointer-events: none;
}

.btn:hover::before {
    transform: translateY(calc(50% - 20px)) scale(1);
    opacity: 1;
}

.btn::after {
    content: url(./images/ic-arrow-white.svg);
    height: 10px;
    width: 16px;
    position: absolute;
    right: 15px;
    top: calc(50% - 5px);
    transition: 0.3s ease-out;
}

.btn.btn-blue::after {
    content: url(./images/ic-arrow-blue.svg);
}

.btn:hover::after {
    transform: translateX(5px);
}

.btn.btn-sm {
    padding: 10px 40px 10px 15px;
}

.container:not(.bg-blue) h2,
.container:not(.bg-blue) h3 {
    color: var(--color-primary);
}

.container:not(.px-none) {
    padding-left: max(2.5rem, calc(50% - 800px));
    padding-right: max(2.5rem, calc(50% - 800px));
}

.container.py-reg {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.container.py-sm {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.container.pt-sm {
    padding-top: 3rem;
}

h1, h2, h3 {
    font-family: 'Bitter', sans-serif;
}

h2 {
    font-size: var(--title-lg);
}

h3 {
    font-size: var(--title-md);
}

html {
    overflow-x: hidden;
}

input,
select,
textarea {
    background-color: #0000;
    border: none;
    color: #fff;
    outline: none;
}

p {
    line-height: 1.25;
    font-weight: 300;
}

textarea {
    padding: 10px;
    border-radius: 6px;
}

.scroll-down {
    height: 50px;
    width: 28px;
    background-color: #0000;
    border: solid 1px var(--color-secondary);
    border-radius: 20px;
    position: relative;
    cursor: pointer;
}

.scroll-down div {
    height: 27px;
    width: 1px;
    background-color: #fff;
    border-radius: 1px;
    position: absolute;
    top: 0;
    left: 13px;
    animation: bounce 0.8s infinite alternate;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-10px);
    }
}

.scroll-down div::before,
.scroll-down div::after {
    content: '';
    height: 1px;
    width: 10px;
    background-color: #fff;
    border-radius: 1px;
    position: absolute;
    bottom: 3px;
}

.scroll-down div::before {
    rotate: 45deg;
    right: -1px;
}

.scroll-down div::after {
    rotate: -45deg;
    left: -1px;
}

select,
textarea {
    border: solid 1px var(--color-secondary);
}

.separator-dot {
    height: 6px;
    width: 6px;
    margin: 0 5px;
    background-color: var(--color-primary);
    border-radius: 50px;
}

.separator-dot.dot-secondary {
    background-color: var(--color-secondary);
}

strong {
    font-weight: 600;
}

em {
    font-style: italic;
}

#wpadminbar {
    opacity: 0;
    display: none;
}

#wpadminbar:hover {
    opacity: 1;
}

@media screen and (max-width: 1200px) {
    .container:not(.px-none) {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .container.py-reg {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

@media screen and (max-width: 992px) {
    body {
        font-size: 15px;
    }

    p {
        line-height: 1.5;
    }

    .btn,
    input[type=submit] {
        padding: 10px 40px 10px 15px;
    }

    h2 {
        font-size: var(--title-md);
    }

    h3 {
        font-size: var(--title-sm);
    }
}

@media screen and (max-width: 768px) {
    .container:not(.px-none) {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .container.py-reg {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    h2 {
        font-size: var(--title-sm);
    }

    h3 {
        font-size: var(--title-xs);
    }
}

/*** CSS RULES ***/

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

.d-flex {
    display: flex;
}

.fit-cover {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

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

.flex-wrap {
    flex-wrap: wrap;
}

.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.gap-50 {
    gap: 50px;
}

.justify-between {
    justify-content: space-between;
}

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

.justify-end {
    justify-content: flex-end;
}

.mt-20 {
    margin-top: 20px;
}

.pt-0 {
    padding-top: 0 !important;
}

section.bg-blue,
.container.bg-blue {
    background-color: var(--color-primary);
    color: #fff;
}

.container.bg-blue h2 {
    color: #fff;
}

.post-title {
    font-size: var(--title-lg);
    text-align: center;
}

.small-title {
    font-size: 20px;
    margin-top: 50px;
    margin-bottom: 30px;
}

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

@media screen and (max-width: 768px) {
    .post-title {
        font-size: var(--title-md) !important;
    }
}

/*** HEADER ***/

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.site-banner {
    background-color: var(--color-secondary);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.75rem;
    padding-top: 12px;
    padding-bottom: 12px;
}

.site-banner .whistclub {
    font-weight: 600;
}

.site-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 30px;
    transition: 0.3s ease-in-out;
}

.site-header.toggle:not(.hamburger) .site-navigation {
    background-color: var(--color-primary);
    padding-top: 20px;
    padding-bottom: 20px;
}

.site-navigation > div,
.site-navigation__links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.site-navigation__links {
    font-size: 12px;
    font-weight: 600;
}

.site-navigation .custom-logo-link img {
    height: 32px;
    width: auto;
}

.site-navigation .menu-toggle {
    height: 42px;
    width: 42px;
    background-color: var(--color-secondary);
    border-radius: 100px;
    border: none;
    cursor: pointer;
    position: relative;
}

.site-navigation .menu-toggle::before {
    content: '';
    height: 16px;
    width: 16px;
    background-image: url('./images/ic-burger.svg');
    background-size: contain;
    position: absolute;
    top: 13px;
    left: 13px;
}

.hamburger-nav .container > .menu-header-container {
    display: inline-block;
    margin-left: 50%;
    transform: translateX(-50%);
}

.site-navigation.hamburger .menu-toggle::before {
    content: 'x';
    background: none;
    font-size: 22px;
    color: #fff;
    top: 7px;
    left: 13px;
}

.site-navigation li {
    text-align: center;
}

.site-navigation li.current-menu-item:not(.no-color) > a {
    color: var(--color-secondary);
}

.site-navigation .menu-item-has-children::after {
    content: '';
    height: 32px;
    width: 100%;
    top: 100%;
    left: 0;
    position: absolute;
    pointer-events: none;
    opacity: 0;
}

.site-navigation .menu-item-has-children .menu-item-has-children::after {
    content: none;
}

.site-navigation .menu-item.bottom-line {
    position: relative;
    margin-bottom: 11px;
}

.site-header .menu-item.bottom-line::before {
    content: '';
    height: 1px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -12px;
    background-color: var(--color-secondary);
}

.menu-item-has-children {
    position: relative;
}

.menu-item-has-children .menu-item-has-children {
    position: initial;
}

.site-navigation ul.sub-menu {
    position: absolute;
    top: calc(100% + 32px);
    left: 50%;
    transform: translateX(-50%);
    padding: 20px;
    background-color: var(--color-primary);
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-transform: uppercase;
    line-height: 1.25;
    font-size: 11px;
    min-width: 144px;
    pointer-events: none;
    opacity: 0;
    transition: 0.2s;
}

.site-navigation ul.sub-menu .menu-item-has-children:nth-of-type(2) ul.sub-menu {
    top: 43px;
}

.site-navigation ul.sub-menu .menu-item-has-children:nth-of-type(3) ul.sub-menu {
    top: auto;
    bottom: 0;
}

.site-header.toggle:not(.hamburger) .site-navigation ul.sub-menu,
body.single .site-header .site-navigation ul.sub-menu {
    border: solid 1px #fff;
}

.menu-item-has-children:hover > ul.sub-menu,
.menu-item-has-children:hover::after {
    pointer-events: initial;
    opacity: 1;
}

@media screen and (max-width: 1200px) {
    .site-navigation {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .site-navigation .site-navigation__links {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .site-header.toggle:not(.hamburger) .site-banner {
        display: none;
    }

    .site-navigation,
    .site-header.toggle:not(.hamburger) .site-navigation {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@media screen and (max-width: 600px) {
    .site-banner > div {
        width: 100%;
        justify-content: center;
    }

    .hamburger-nav .container > .menu-header-container {
        width: 100%;
    }
}

/*** HAMBURGER NAV ***/

.site-navigation.hamburger .custom-logo-link {
    position: relative;
}

.site-navigation.hamburger .custom-logo-link::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    inset: 0;
    background-image: url('./images/logo-whistcom-blue@3x.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.hamburger-nav {
    position: fixed;
    inset: 0;
    height: 100vh;
    width: 100vw;
    display: none;
    overflow: hidden;
}

.hamburger-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: #fff;
    animation: hamburgerDown normal 0.6s ease-in-out;
}

.site-header.hamburger .hamburger-nav {
    display: block;
}

.hamburger-nav a {
    color: var(--color-primary);
}

.hamburger-nav .sub-menu {
    display: none;
}

.hamburger-nav .sub-menu a {
    color: var(--color-secondary);
    text-transform: none;
    font-size: 30px;
    font-weight: normal;
    padding-left: 2rem;
}

.hamburger-nav .site-navigation__links {
    flex-direction: column;
    align-items: flex-start;
    text-transform: uppercase;
    font-size: 30px;
    line-height: 1.5;
    margin-top: 30px;
    animation: hamburgerUp normal 1.6s ease-in-out;
    height: calc(100vh - 90px);
    overflow-y: auto;
    overflow-x: hidden;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hamburger-nav .site-navigation__links::-webkit-scrollbar {
    display: none;
}

.hamburger-nav .menu-item-has-children {
    padding-right: 50px;
    cursor: pointer;
}

.hamburger-nav .menu-item-has-children a {
    position: relative;
}

.hamburger-nav .menu-item-has-children > a::after {
    content: '+';
    position: absolute;
    top: 7px;
    right: -50px;
    height: 30px;
    width: 30px;
    border-radius: 100px;
    color: #fff;
    background-color: var(--color-secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
    pointer-events: none;
}

.hamburger-nav .menu-item-has-children.show > a::after {
    content: '-';
    line-height: 0.1;
}

.hamburger-nav .extra {
    position: fixed;
    bottom: 0;
    padding-bottom: 1rem;
    right: max(2.5rem, calc(50% - 800px));
    background-color: #fff;
}

.hamburger-nav .extra .socials a {
    color: var(--color-secondary);
}

@keyframes hamburgerDown {
    from {
        transform: translateY(-100vh);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes hamburgerUp {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    40% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@media screen and (max-width: 768px) {
    .hamburger-nav .menu-item-has-children {
        padding-right: 40px;
    }

    .hamburger-nav .menu-item-has-children > a::after {
        top: 4px;
        right: -40px;
        height: 22px;
        width: 22px;
    }

    .hamburger-nav .site-navigation__links {
        font-size: 20px;
    }

    .hamburger-nav .sub-menu a {
        font-size: 18px;
    }

    .hamburger-nav .extra {
        right: 50%;
        transform: translateX(50%);
        width: 100%;
    }

    .hamburger-nav .extra .socials {
        justify-content: center;
    }
}

@media screen and (max-width: 600px) {
    .hamburger-nav .menu-item-has-children,
    .hamburger-nav .menu-item-has-children > a {
        width: 100%;
    }
}

@media screen and (max-width: 500px) {
    .hamburger-nav .site-navigation__links {
        white-space: initial;
    }
}

/*** POST NAVIGATION ***/

.container.post-nav .nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    gap: 30px;
}

.container.post-nav a {
    color: var(--color-primary);
}

.container.post-nav .nav-post {
    border-top: solid 1px var(--color-primary);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    position: relative;
}

.container.post-nav .nav-post::before {
    content: '';
    position: absolute;
    bottom: -10px;
    height: 10px;
    width: 16px;
}

.container.post-nav .nav-next .nav-post::before {
    right: 10px;
    background-image: url('./images/ic-arrow-orange_right.svg');
}

.container.post-nav .nav-previous .nav-post::before {
    left: 10px;
    background-image: url('./images/ic-arrow-orange_left.svg');
}

.container.post-nav .nav-next .nav-post {
    text-align: right;
}

.container.post-nav .nav-post .title {
    font-size: 14px;
}

.container.post-nav .nav-post .date {
    font-size: 10px;
}

@media screen and (max-width: 992px) {
    .container.post-nav .nav-links {
        gap: 20px;
    }

    .container.post-nav .nav-next .nav-post::before {
        right: calc(50% - 8px);
    }

    .container.post-nav .nav-previous .nav-post::before {
        left: calc(50% - 8px);
    }

    .container.post-nav .nav-links {
        flex-direction: column-reverse;
    }

    .container.post-nav .nav-next .nav-post,
    .container.post-nav .nav-previous .nav-post {
        text-align: center;
    }
}

/*** LANGUAGE-SWITCHER ***/

.trp_language_switcher_shortcode {
    height: 12px;
    transform: translateY(-1px);
    margin-right: 24px;
}

.trp-ls-shortcode-current-language,
.trp-ls-shortcode-language {
    padding: 0 !important;
    width: auto !important;
    background-color: transparent !important;
    border: none !important;
}

.trp-language-switcher > div {
    background-image: none;
}

.trp-language-switcher,
.trp-language-switcher > div > a,
.trp-language-switcher > div > a > img {
    padding: 0;
    margin: 0;
}

.trp-language-switcher > div > a:not(:last-of-type) {
    margin-right: 6px;
}

.trp-language-switcher:hover .trp-ls-shortcode-language,
.trp-language-switcher .trp-ls-shortcode-language{
    display: flex !important;
    height: auto !important;
    position: absolute !important;
    visibility: visible;
    border-radius: 0;
}

.trp-language-switcher > div > a img {
    border: solid 1px #0000;
    border-radius: 1px;
    box-sizing: initial;
}

.trp-language-switcher > div > a:hover {
    background: #0000 !important;
}

.trp-language-switcher > div > a:hover img {
    border-color: #fff;
}

/*** MK CHARTS ***/

.mkc_circle.anim {
    animation: mck_progress 2000ms ease-in-out;
}

@keyframes mck_progress {
    0% {
        stroke-dasharray: 0, 100;
    }
}

/*** SECTIONS - HERO-MAIN ***/

section.hero-main {
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    position: relative;
    display: flex;
    align-items: center;
}

section.hero-main::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 12rem;
    width: 100%;
    background-image: linear-gradient(#0000, var(--color-primary));
    z-index: 0;
}

section.hero-main.hero-alt {
    background-position: center;
}

section.hero-main.hero-alt::after {
    height: 80vh;
}

.hero-main__content {
    margin-left: calc(50% + 5rem);
    font-size: 5rem;
    line-height: 1.25;
    position: relative;
    z-index: 1;
}

section.hero-main.hero-alt .hero-main__content {
    margin-left: auto;
    margin-right: auto;
}

body:not(.home) section.hero-main h1 {
    text-align: center;
}

section.hero-main .scroll-down {
    position: absolute;
    bottom: 150px;
    left: calc(50% - 14px);
}

@media screen and (max-width: 1200px) {
    .hero-main__content {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-size: min(16vw, 5rem);
    }

    section.hero-main .scroll-down {
        bottom: 100px;
    }
}

@media screen and (max-width: 768px) {
    .hero-main__content h1 {
        font-size: 50px;
    }
}

@media screen and (max-width: 400px) {
    .hero-main__content h1 {
        font-size: 45px;
    }
}

/*** SECTIONS - GRAPH-DATA ***/

section.graph-data {
    position: relative;
}

section.graph-data::before {
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    pointer-events: none;
}

section.graph-data:not(.video-section)::before {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    background-image: url('./images/bg-logo.svg');
    background-size: min(35vw, 630px);
    background-position: 80% calc(100% + 9vw);
    height: 100%;
    width: 100%;
    inset: 0;
}

section.graph-data.video-section::before {
    background-image: url('./images/bg-logo-blue.svg');
    top: -309px;
    right: -147px;
    height: 314px;
    width: 601px;
    background-position: 17px calc(100% + 12px);
    background-size: 674px;
    background-repeat: no-repeat;
}

section.graph-data.video-section {
    margin-top: 245px;
}

section.graph-data.video-section.no-margin {
    margin-top: 181px;
}

section.graph-data h2 {
    margin-bottom: 10px;
}

section.graph-data .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 100px;
}

section.graph-data.video-section .grid {
    row-gap: 60px;
}

section.graph-data .grid .video {
    position: relative;
    width: 100%;
}

section.graph-data .grid .video iframe {
    position: absolute;
    top: -260px;
    width: 100%;
    border: solid 2px #fff;
}

section.graph-data .grid .title {
    grid-column: 2 / 3;
}

section.graph-data .grid .video-subtitle {
    position: absolute;
    left: 0;
    bottom: -80px;
}

section.graph-data .grid .graph-1 {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    position: relative;
    text-align: right;
    margin-top: 60px;
}

section.graph-data .grid .graph-2 {
    grid-column: 1 / 2;
    grid-row: 3 / 5;
    display: flex;
    align-items: center;
}

section.graph-data .grid .graph-2 .mkCharts {
    margin-right: 30px;
}

section.graph-data .mkc_info {
    fill: #fff;
}

section.graph-data .mkc_info:last-of-type {
    font-weight: 800;
}

section.graph-data .grid .graph-3 {
    grid-column: 2 / 3;
    grid-row: 4 / 6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    position: relative;
    margin-top: 30px;
}

section.graph-data .grid .graph-1::before {
    content: '';
    width: 284px;
    height: 142px;
    position: absolute;
    top: -50px;
    right: 96px;
    background-image: url('./images/graph-1.svg');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

section.graph-data .grid .graph-1 .num,
section.graph-data .grid .graph-3 .label {
    color: var(--color-secondary);
}

section.graph-data .grid .graph-2 .data {
    position: relative;
    padding-right: 100px;
    padding-left: 100px;
}

section.graph-data .grid .graph-2 .data::before {
    content: '';
    width: 300px;
    height: 300px;
    position: absolute;
    top: -80px;
    left: 40px;
    background-image: url('./images/graph-2.svg');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

section.graph-data .grid .graph-3::before {
    content: '';
    width: 132px;
    height: 132px;
    position: absolute;
    top: -34px;
    left: 200px;
    background-image: url('./images/graph-3.svg');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

section.graph-data .data .label {
    font-size: 30px;
    font-weight: 300;
}

section.graph-data .data .num {
    font-size: 80px;
    font-weight: 800;
}

section.graph-data .data-absolute {
    position: absolute;
    top: 70px;
    left: 0;
    text-align: center;
    width: 230px;
}

section.graph-data .data-absolute .label {
    font-size: 24px;
    font-weight: 300;
}

section.graph-data .data-absolute .num {
    font-size: 67px;
    font-weight: 800;
}

section.graph-data .content {
    grid-column: 1 / 3;
}

section.graph-data.video-section a:not(.btn) {
    text-decoration: underline;
    font-weight: 600;
    color: var(--color-secondary);
}

@media screen and (max-width: 1200px) {
    section.graph-data.video-section.no-margin {
        margin-top: 196px;
    }
}

@media screen and (min-width: 993px) {
    section.graph-data.video-section h2 {
        min-height: 100px;
    }
}

@media screen and (max-width: 992px) {
    section.graph-data {
        margin-top: 40vw !important;
    }

    section.graph-data.video-section.no-margin {
        margin-top: 36vw !important;
    }

    section.graph-data::before {
        background-size: min(83vw, 630px);
        background-position: -50vw calc(100% + 9vw);
    }

    section.graph-data .grid {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 80px;
    }

    section.graph-data .grid .video {
        padding-bottom: 100px;
    }

    section.graph-data .grid .video iframe {
        top: auto;
        bottom: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    section.graph-data .grid .video-subtitle {
        bottom: -4vw;
    }

    section.graph-data .grid .title {
        text-align: center;
    }

    section.graph-data .grid .title,
    section.graph-data .grid .graph-1,
    section.graph-data .grid .graph-2,
    section.graph-data .grid .graph-3 {
        grid-gap: 30px;
        grid-column: 1 / 2;
        grid-row: auto;
        margin: auto;
        max-width: 500px;
        width: 100%;
    }

    section.graph-data .grid .graph-2 {
        flex-direction: column;
    }

    section.graph-data .grid .graph-1::before {
        width: 218px;
        height: 98px;
        top: -23px;
        left: auto;
        right: 61px;
    }

    section.graph-data .grid .graph-2 .mkCharts {
        margin-right: 0;
    }

    section.graph-data .grid .graph-2 .mkCharts svg {
        height: 150px;
        width: 150px;
    }

    section.graph-data .grid .graph-3::before {
        width: 95px;
        height: 95px;
        top: -16px;
        left: 150px;
    }

    section.graph-data .data .label {
        font-size: 20px;
    }

    section.graph-data .data .num {
        font-size: 60px;
    }

    section.graph-data .data-absolute {
        top: 47px;
        width: 100%;
    }

    section.graph-data .data-absolute .label {
        font-size: 18px;
    }

    section.graph-data .data-absolute .num {
        font-size: 42px;
    }

    section.graph-data .content {
        grid-column: 1 / 2;
    }
}

@media screen and (max-width: 768px) {
    section.graph-data.video-section.no-margin {
        margin-top: 33vw !important;
    }
}

@media screen and (max-width: 500px) {
    section.graph-data {
        margin-top: 30vw !important;
    }

    section.graph-data.video-section.no-margin {
        margin-top: 27vw !important;
    }

    section.graph-data .grid .video {
        padding-bottom: 70px;
    }

    section.graph-data .grid .video-subtitle {
        bottom: -15vw;
        min-height: 45px;
    }
}

@media screen and (max-width: 400px) {
    section.graph-data.video-section.no-margin {
        margin-top: 20vw !important;
    }
}

/*** SECTIONS - SPLIT-CONTENT ***/

section.split-content {
    background-image: url('./images/bg-logo.svg');
    background-repeat: no-repeat;
    background-size: min(60vw, 630px);
    background-position: -45% 40%;
}

.split-content__col {
    width: 50%;
}

section.split-content-alt {
    background-image: none;
    position: relative;
}

section.split-content-alt::before {
    content: '';
    bottom: 40px;
    left: -339px;
    height: 400px;
    width: 600px;
    position: absolute;
    background-image: url(./images/bg-logo.svg);
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

section.split-content-alt .split-content__col {
    max-width: 500px;
}

section.split-content-alt .split-content__col:first-of-type {
    display: flex;
    justify-content: flex-end;
    padding-right: 100px;
}

section.split-content-alt h2 {
    font-size: 60px;
}

section.split-content a:not(.btn) {
    color: var(--color-secondary);
}

.split-content__col.logo,
.split-content__col.title {
    display: flex;
    justify-content: center;
    align-items: center;
}

.split-content__col.logo a {
    pointer-events: none;
}

.split-content__col.logo img {
    height: 80px;
    width: auto;
}

.split-content__col .title {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 20px;
}

@media screen and (max-width: 1200px) {
    section.split-content {
        flex-wrap: wrap;
    }

    .split-content__col {
        width: 100%;
    }

    section.split-content-alt .split-content__col {
        max-width: 100%
    }

    section.split-content-alt .split-content__col:first-of-type {
        display: block;
        padding-right: 0;
    }
}

@media screen and (max-width: 992px) {
    section.split-content-alt {
        gap: 30px;
    }

    section.split-content-alt h2 {
        font-size: var(--title-lg);
    }
}

@media screen and (max-width: 768px) {
    .split-content__col.logo img {
        max-width: 90%;
        max-height: 70px;
        height: auto;
    }

    .split-content__col .title {
        font-size: 24px;
    }

    section.split-content-alt h2 {
        font-size: var(--title-md);
    }
}

/*** SECTIONS - SERVICES ***/

section.services ul {
    display: flex;
    height: min(500px, 100vh);
}

section.services li {
    width: 25%;
    overflow: hidden;
    color: white;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: all 0.5s;
}

section.services.format li {
    width: 33.33%;
}

section.services ul.two-columns li {
    width: 50%;
}

section.services li::before,
section.services li::after {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
    transition: all 0.5s;
    pointer-events: none;
}

section.services li::before {
    background-color: var(--color-primary);
    mix-blend-mode: color;
    transition: all 0.5s;
    pointer-events: none;
}

section.services li::after {
    background-image: linear-gradient(#0000, #000);
    z-index: 0;
    opacity: 0;
}

section.services li > * {
    position: relative;
}

section.services .content {
    height: 100%;
    width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    left: 20px;
    bottom: calc(-100% + 160px);
    transition: all 0.5s;
    pointer-events: none;
    z-index: 1;
}

.services .content h3 {
    color: #fff;
    height: 120px;
    display: flex;
    align-items: flex-end;
}

section.services .content p {
    margin-bottom: 20px;
}

section.services .content .info {
    opacity: 0;
    transition: all 0.5s;
}

section.services li:hover {
    width: 55%;
    filter: none;
}

section.services ul.two-columns li:hover {
    width: 65%;
}

.services li:hover::before {
    opacity: 0;
}

.services li:hover::after {
    opacity: 0.7;
}

section.services li:hover .content {
    bottom: 40px;
    justify-content: flex-end;
    pointer-events: initial;
}

section.services li:hover .content .info {
    opacity: 1;
}

section.services .toggle {
    position: absolute;
    right: 0;
    top: 30px;
    height: 24px;
    width: 24px;
    color: var(--color-secondary);
    border: solid 1px #fff;
    border-radius: 50px;
    background-color: #0000;
    cursor: pointer;
    padding: 0;
    display: none;
    transition: 0.2s;
    font-weight: bold;
}

@media screen and (max-width: 1200px) {
    section.services ul {
        height: auto;
        flex-wrap: wrap;
    }

    section.services li::before {
        mix-blend-mode: normal;
        opacity: 0.9;
    }

    section.services li:hover::before {
        opacity: 0.9;
    }

    section.services li:hover::after {
        opacity: 0;
    }

    section.services li.open .toggle {
        transform: rotate(180deg);
    }

    section.services li {
        width: 100%;
        padding: 0 1.5rem;
        min-height: auto;
        height: auto;
        display: flex;
        align-items: center;
        background-color: var(--color-primary);
    }

    section.services.format li,
    section.services ul.two-columns li,
    section.services li:hover,
    section.services ul.two-columns li:hover {
        width: 100%;
    }

    section.services .content {
        position: relative;
        left: auto;
        bottom: auto;
        height: auto;
        width: 100%;
        padding: 20px 0;
    }

    section.services li:not(:last-of-type) .content {
        border-bottom: 1px solid #fff;
    }

    section.services .content h3 {
        height: auto;
        padding-right: 30px;
    }

    section.services .content .info {
        opacity: 1;
        transition: none;
        display: none;
    }

    section.services li:hover .content {
        bottom: auto;
        justify-content: initial;
        pointer-events: initial;
    }

    section.services .toggle {
        display: block;
    }
}

@media screen and (max-width: 768px) {
    section.services li {
        padding: 0 1rem;
    }
}

/*** SECTIONS - AMBASSADORS ***/

 .slider-ambassadors {
    margin-top: 70px;
}

.slider-ambassadors .slick-list {
    position: relative;
}

.slider-ambassadors .slick-list::before,
.slider-ambassadors .slick-list::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 200px;
    z-index: 1;
    pointer-events: none;
}

.slider-ambassadors .slick-list::before {
    left: 0;
    background-image: linear-gradient(to right, #ffffff, #0000);
}

.slider-ambassadors .slick-list::after {
    right: 0;
    background-image: linear-gradient(to left, #ffffff, #0000);
}

.slider-ambassadors .slick-track {
    display: flex;
    align-items: center;
    gap: 40px;
}

.slider-ambassadors .slick-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
}

.slider-ambassadors .slick-slide img {
    height: 60px;
    width: auto;
}

.slider-prev,
.slider-next {
    height: 23px;
    width: 33px;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    background-color: #0000;
    border: none;
    outline: none;
}

.slider-prev {
    background-image: url('./images/ic-arrow-orange_left.svg');
    margin-right: 16px;
}

.slider-next {
    background-image: url('./images/ic-arrow-orange_right.svg');
}

section.ambassadors.all .list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 40px;
    margin-top: 80px;
}

section.ambassadors.all .list div {
    display: flex;
    justify-content: center;
    align-items: center;
}

section.ambassadors.all .list img {
    max-height: 60px;
    max-width: 100%;
}

@media screen and (max-width: 1200px) {
    section.ambassadors.all .list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 992px) {
    section.slider-ambassadors {
        margin-top: 50px;
    }

    section.slider-ambassadors .slick-slide {
        gap: 50px;
    }

    section.slider-ambassadors .slick-slide img {
        height: 50px;
    }

    section.slider-ambassadors .slick-list::before, .slider-ambassadors .slick-list::after {
        width: 150px;
    }

    section.ambassadors.all .list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    section.slider-ambassadors .slick-list::before, .slider-ambassadors .slick-list::after {
        width: 100px;
    }

    section.ambassadors.all .list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*** SECTIONS - REVIEWS ***/

section.reviews {
    position: relative;
    background-image: url('./images/ic-quotes.svg');
    background-repeat: no-repeat;
    background-size: 200px;
    background-position: max(2.5rem, calc(50% - 800px)) 150px;
}

section.reviews.reviews-alt {
    background-image: url('./images/ic-quotes-blue.svg');
    background-position: max(-1.5rem, calc(50% - 800px)) -10px;
}

section.reviews.reviews-alt {
    background-position: max(-1.5rem, calc(50% - 800px)) 70px;
}

section.reviews::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    inset: 0;
    background-image: url('./images/ic-quotes.svg');
    background-repeat: no-repeat;
    background-size: 120px;
    background-position: max(2.5rem, calc(50% - 800px)) 80%;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    pointer-events: none;
}

section.reviews.reviews-alt::before {
    content: none;
}

section.reviews .list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    margin: 70px 0;
}

section.reviews.reviews-alt .list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 80px;
    margin-top: 100px;
}

section.reviews.reviews-alt.all .list {
    grid-template-columns: repeat(3, 1fr);
    max-height: 700px;
    overflow: hidden;
    position: relative;
}

section.reviews.reviews-alt.all .list::after {
    content: '';
    height: 200px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(to top, #fff, #fff0);
    pointer-events: none;
}

section.reviews.reviews-alt.all.show .list {
    max-height: none;
}

section.reviews.reviews-alt.all.show .list::after {
    content: none;
}

section.reviews .less-reviews,
section.reviews .more-reviews {
    cursor: pointer;
}

section.reviews.reviews-alt.all.show .less-reviews {
    display: block;
}

section.reviews.reviews-alt.all.show .more-reviews,
section.reviews.reviews-alt.all .less-reviews {
    display: none;
}

section.reviews > p {
    font-weight: 600;
}

section.reviews .review {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

section.reviews.reviews-alt .review {
    justify-content: flex-start;
}

section.reviews .top {
    display: flex;
    gap: 30px;
}

section.reviews.reviews-alt .quote {
    color: var(--color-primary);
}

section.reviews .quote p {
    margin-bottom: 40px;
}

section.reviews.reviews-alt .quote p {
    font-weight: 500;
    font-size: 14px;
}

section.reviews .review .image {
    height: 60px;
    width: 60px;
    min-width: 60px;
    border-radius: 100px;
    overflow: hidden;
    background-color: #fff;
    padding: 12px;
}

section.reviews.reviews-alt .image {
    padding: 5px;
}

section.reviews.reviews-alt .review .image {
    border: solid 1px var(--color-secondary);
}

section.reviews .review .image img {
    object-fit: contain;
    height: 100%;
    width: 100%;
}

section.reviews .review .author {
    font-size: 14px;
    margin-left: 87px;
}

section.reviews.reviews-alt .author {
    font-size: 13px;
}

@media screen and (max-width: 1200px) {
    section.reviews .list {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 80px;
    }

    section.reviews.reviews-alt.all .list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    section.reviews .list,
    section.reviews.reviews-alt .list,
    section.reviews.reviews-alt.all .list {
        grid-template-columns: repeat(1, 1fr);
    }

    section.reviews.reviews-alt .list {
        margin-top: 60px;
    }

    section.reviews:not(.all) .list .review:nth-of-type(3),
    section.reviews:not(.all) .list .review:nth-of-type(4) {
        display: none;
    }

    section.reviews .review .image {
        margin-bottom: 0;
        height: 50px;
        width: 50px;
        padding: 5px;
        min-width: 50px;
    }

    section.reviews .review .author {
        margin-left: 80px;
        font-size: 12px;
    }

    section.reviews .quote p {
        margin-bottom: 20px;
    }
}

/*** SECTIONS - NEWS ***/

section.news {
    position: relative;
    padding-bottom: 60px;
}

section.news::before {
    content: '';
    height: 190px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: var(--color-primary);
    pointer-events: none;
}

section.news .slider-news {
    position: relative;
    margin-left: 120px;
}

section.news .slick-track {
    display: flex;
    gap: 30px;
}

section.news .slick-slide {
    height: 360px;
    width: 360px;
    padding: 30px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

section.news .slick-slide::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 12rem;
    width: 100%;
    background-image: linear-gradient(#0000, #000);
    pointer-events: none;
}

section.news .slick-slide > * {
    position: relative;
}

section.news .slick-slide span {
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

section.news .slick-slide h4 {
    font-weight: 600;
    margin-bottom: 20px;
    min-height: 32px;
}

@media screen and (max-width: 1200px) {
    section.news .slick-slide {
        height: 300px;
        width: 300px;
    }
}

@media screen and (max-width: 768px) {
    section.news .slick-slide {
        height: 240px;
        width: 240px;
        padding: 20px;
    }

    section.news .slider-news {
        margin-left: 1rem;
    }
}

/*** SECTIONS - KNOW-US ***/
section.know-us .grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 30px;
    grid-auto-rows: minmax(300px, auto);
}

section.know-us .grid > div {
    background-color: var(--color-primary);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
    padding: 30px;
    position: relative;
}

section.know-us .grid > div::before,
section.know-us .grid > div::after,
.slider-pictures.know-us .slick-slide::before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
    transition: all 0.5s;
    pointer-events: none;
}

section.know-us .grid > div::before,
.slider-pictures.know-us .slick-slide::before {
    background-color: var(--color-primary);
    opacity: 0.6;
}

section.know-us .grid > div::after {
    background-image: linear-gradient(#0000, #000);
    z-index: 0;
    opacity: 0;
}

section.know-us .grid > div:hover::before {
    opacity: 0;
}

section.know-us .grid > div:hover::after {
    opacity: 0.7;
}

section.know-us.container h3 {
    color: #fff;
}

section.know-us .grid > div > * {
    position: relative;
    z-index: 1;
}

section.know-us .grid > div:nth-of-type(1) {
    grid-column: 1 / 5;
    grid-row: 1 / 2;
}

section.know-us .grid > div:nth-of-type(2) {
    grid-column: 5 / 6;
    grid-row: 1 / 3;
}

section.know-us .grid > div:nth-of-type(3) {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
}

section.know-us .grid > div:nth-of-type(4) {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
}

.slider-pictures.know-us {
    display: none;
}

.slider-pictures.know-us .slick-slide {
    height: 240px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    text-align: center;
    position: relative;
}

.slider-pictures.know-us .slick-slide > * {
    position: relative;
}

@media screen and (max-width: 1200px) {
    section.know-us .grid {
        grid-template-columns: repeat(2, 1fr);
    }

    section.know-us .grid > div:nth-of-type(1) {
        grid-column: 1 / 2;
    }

    section.know-us .grid > div:nth-of-type(2) {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    section.know-us .grid > div:nth-of-type(3) {
        grid-column: 1 / 2;
    }

    section.know-us .grid > div:nth-of-type(4) {
        grid-column: 2 / 3;
    }
}

@media screen and (max-width: 992px) {
    section.container.know-us {
        padding-left: 0;
        padding-right: 0;
    }

    section.know-us .grid {
        display: none;
    }

    .slider-pictures.know-us {
        display: initial;
    }

    /*section.know-us .grid {
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: auto;
        grid-gap: 1rem;
    }

    section.know-us .grid > div:nth-of-type(1),
    section.know-us .grid > div:nth-of-type(2),
    section.know-us .grid > div:nth-of-type(3),
    section.know-us .grid > div:nth-of-type(4) {
        grid-column: 1 / 2;
        grid-row: auto;
        border-bottom: 1px solid var(--color-primary);
        background-image: none !important;
        background-color: #0000;
        padding: 20px 0;
    }

    section.know-us.container h3 {
        color: var(--color-primary);
    }

    section.know-us .btn {
        color: var(--color-primary);
    }

    section.know-us .btn::after {
        content: url(./images/ic-arrow-blue.svg);
    }

    section.know-us .grid > div::before {
        content: none;
    }

    section.know-us .grid > div:hover::after {
        opacity: 0;
    }*/
}

/*** SECTIONS - CONTACT ***/

section.contact {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

section.contact::before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--color-primary);
    opacity: 0.6;
    pointer-events: none;
}

section.contact > * {
    position: relative;
}

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

input:not([type=submit]) {
    border-bottom: solid 1px var(--color-secondary);
}

.input-group {
    position: relative;
    display: inline-block;
    width: 100%;
}

.input-group label {
    font-size: 15px;
}

.input-group:not(.no-anim) label {
    position: absolute;
    pointer-events: none;
    transform-origin: 0 0;
    transform: scale(1) translateY(100%);
    transition: transform 0.2s linear;
}

.input-group.no-anim {
    margin-top: 13px;
}

.input-group label.animate-label {
    transform: scale(0.6) translateY(20%);
    transition: transform 0.2s linear;
}

.input-group input {
    padding-top: 24px;
    width: 100%;
}

.input-group textarea,
.input-group select {
    width: 100%;
}

.input-group textarea {
    margin-top: 10px;
    height: 140px;
    resize: none;
}

.input-submit {
    display: flex;
}

.input-submit .btn {
    padding: 0;
    border: none;
}

.input-submit input {
    padding: 15px 40px 15px 15px;
    border: solid 2px var(--color-secondary);
    border-radius: 6px;
    cursor: pointer;
}

.wpcf7-spinner {
    position: absolute;
}

.wpcf7-not-valid-tip {
    font-size: 12px;
    margin-top: 0.3rem;
}

.wpcf7 form .wpcf7-response-output {
    font-size: 14px;
    text-align: center;
    border-width: 1px;
    padding: 0.3rem 1rem;
    margin: 2rem 0 0;
}

@media screen and (max-width: 1200px) {
    .contact h2 {
        text-align: center;
    }
}

/*** FOOTER ***/

.site-footer {
    background-color: var(--color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    color: #fff;
}

.site-footer .socials {
    margin: 20px 0;
}

.site-footer .custom-logo-link img {
    height: 36px;
    width: auto;
}

.site-footer ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.site-footer ul.sub-menu {
    display: none;
}

.site-footer .info-main {
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
}

.site-footer .info-side {
    font-size: 14px;
}

.footer-hr {
    height: 1px;
    width: 100%;
    max-width: 500px;
    margin: 30px 0;
    border: none;
    background-color: #fff;
}

/***
**
*   Template pages blocks
**
***/

/*** SECTIONS - TEXT + IMAGE ***/

section.text-image {
    --gap: 80px;
    --accent-offset: 30px;
    gap: var(--gap);
}

section.text-image.invert {
    flex-direction: row-reverse;
}

section.text-image .image {
    width: calc(50% - var(--gap) * 2);
}

section.text-image .image div {
    aspect-ratio: 1 / 1;
    position: relative;
}

section.text-image.founders .image div {
    aspect-ratio: 3 / 4;
    max-width: 370px;
    margin-left: auto;
}

section.text-image:not(.founders, .article-content) .image div::before {
    content: '';
    height: calc(100% - 3px);
    width: 100%;
    position: absolute;
    inset: 0;
    background-color: var(--color-primary);
    mix-blend-mode: color;
    z-index: 2;
    pointer-events: none;
}

section.text-image .image div.has-accent::after {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    left: calc(0px - var(--accent-offset));
    bottom: calc(3px - var(--accent-offset));
    background-color: var(--color-secondary);
}

section.text-image.founders .image div.has-accent::after {
    height: 200px;
    width: 200px;
}

section.text-image.invert .image div.has-accent::after {
    transform: translateX(calc(var(--accent-offset)*2));
}

section.text-image .image img {
    object-fit: cover;
    object-position: top center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

section.text-image .image.video {
    aspect-ratio: 16 / 9;
}

section.text-image .text {
    width: calc(50% + var(--gap));
    padding: 0 var(--gap) 0 0;
    position: relative;
}

section.text-image.founders .text::after {
    content: '';
    height: 1px;
    width: 30px;
    position: absolute;
    left: 0;
    bottom: -20px;
    background-color: var(--color-secondary);
}

section.text-image a:not(.btn) {
    text-decoration: underline;
    font-weight: 600;
}

section.text-image:not(.bg-blue) a:not(.btn) {
    color: var(--color-primary);
}

section.text-image.bg-blue a:not(.btn) {
    color: var(--color-secondary);
}

section.text-image.invert .text {
    padding: 0 0 0 var(--gap);
}

section.text-image .text h2 {
    margin-bottom: 20px;
}

section.text-image.founders .text h3 {
    margin-bottom: 40px;
    font-size: 30px;
    color: var(--color-secondary);
}

section.text-image.article-content iframe {
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1200px) {
    section.text-image {
        --gap: 50px;
        --accent-offset: 20px;
    }
}

@media screen and (max-width: 768px) {
    section.text-image {
        flex-direction: column;
        --gap: 40px;
        --accent-offset: 10px;
        text-align: center;
    }

    section.text-image .text {
        width: 100%;
    }

    section.text-image .text,
    section.text-image.invert .text {
        padding: 0;
    }

    section.text-image.founders .text::after {
        left: calc(50% - 15px);
    }

    section.text-image .image:not(.video) {
        width: min(250px, 100%);
    }

    section.text-image .image.video {
        width: 100%;
    }
}

/*** SECTIONS - TWO TEXT IMAGE ***/

section.two-text-image .column {
    width: calc(50% - 50px);
    margin-top: 40px;
}

section.two-text-image .column .img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    max-width: 200px;
}

section.two-text-image .column .img::before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
    background-color: var(--color-primary);
    mix-blend-mode: color;
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    section.two-text-image .column {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    section.two-text-image .column .img {
        max-width: 300px;
    }
}

/*** SECTIONS - TEXT BANNER ***/

section.text-banner {
    position: relative;
    background-size: cover;
    background-position: center;
}

section.text-banner::before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
    background-color: var(--color-primary);
    opacity: 0.6;
    pointer-events: none;
}

section.text-banner > * {
    position: relative;
}

section.text-banner .content {
    max-width: max(768px, 50%);
}

/*** SECTIONS - QUOTE ***/

section.quote {
    color: var(--color-primary);
    position: relative;
    background-image: url('./images/ic-quotes-blue.svg');
    background-repeat: no-repeat;
    background-size: 150px;
    background-position: max(2.5rem, calc(50% - 500px)) 20px;
}

section.quote::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    inset: 0;
    background-image: url('./images/ic-quotes-blue.svg');
    background-repeat: no-repeat;
    background-size: 70px;
    background-position: max(2.5rem, calc(50% - 500px)) 75%;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    pointer-events: none;
}

section.quote .text {
    font-family: 'Bitter', serif;
    font-size: 30px;
}

section.quote .info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-top: 40px;
}

section.quote .author {
    color: var(--color-secondary);
}

@media screen and (min-width: 993px) {
    section.quote.container {
        padding-left: max(2.5rem, calc(50% - 410px));
        padding-right: max(2.5rem, calc(50% - 410px));
    }
}

@media screen and (max-width: 992px) {
    section.quote .text {
        font-size: 24px;
    }
}

@media screen and (max-width: 768px) {
    section.quote .text {
        font-size: 20px;
    }
}

/*** SECTIONS - STRATEGY ***/

section.strategies {
    --icon-size: 70px;
}

section.strategies h2 {
    margin-bottom: 20px;
}

section.strategies .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 50px;
    margin-top: 40px;
}

section.strategies .grid > div {
    display: flex;
    flex-wrap: wrap;
}

section.strategies .icon {
    margin-bottom: 30px;
    height: var(--icon-size);
    aspect-ratio: 1 / 1;
    background-color: var(--color-secondary);
    background-size: auto 45%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100px;
}

section.strategies .title {
    margin-bottom: 10px;
    display: block;
    color: var(--color-primary);
    font-size: 30px;
    font-weight: 600;
}

@media screen and (min-width: 1201px ) {
section.strategies .text {
    width: 100%;
    height: 100%;
}
}

@media screen and (max-width: 1200px) {
    section.strategies {
        --icon-size: 60px;
    }
    section.strategies .grid {
        grid-template-columns: repeat(1, 1fr);
    }

    section.strategies .text {
        width: calc(100% - 20px - var(--icon-size));
        margin-left: 20px;
    }

    section.strategies .title {
        font-size: 24px;
    }
}

@media screen and (max-width: 768px) {
    section.strategies {
        --icon-size: 50px;
    }
}

/*** SECTIONS - PICTURE-SLIDER ***/

section.picture-slider {
    position: relative;
}

body.single section.picture-slider {
    padding-top: 0 !important;
    padding-bottom: 2rem;
}

section.picture-slider .arrows {
    z-index: 1;
    position: absolute;
    top: 50%;
    width: 100%;
    justify-content: space-between;
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
}

section.picture-slider .slick-arrow {
    border-radius: 100px;
    height: 40px;
    width: 40px;
    background-size: 23px;
    background-position: center;
    background-color: #fffa;
}

.slider-pictures .slick-slide {
    height: 550px;
    width: 100vw;
}

.slider-pictures .slick-slide img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.slider-pictures .slick-dots,
.decomposed-slider .slick-dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    position: absolute;
    bottom: 20px;
    left: 0;
}

.decomposed-slider .slick-dots {
    flex-wrap: nowrap;
    position: relative;
    margin-top: 10px;
    bottom: auto;
}

.slider-pictures .slick-dots li,
.decomposed-slider .slick-dots li {
    position: relative;
}

.decomposed-slider .slick-dots li {
    width: 100%;
}

.slider-pictures .slick-dots li::before,
.decomposed-slider .slick-dots li::before {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    top: 10px;
    background-color: #fff;
    pointer-events: none;
}

.decomposed-slider .slick-dots li::before {
    background-color: var(--color-primary);
}

.slider-pictures .slick-dots li.slick-active::before,
.decomposed-slider .slick-dots li.slick-active::before {
    background-color: var(--color-secondary);
}

.slider-pictures .slick-dots li button,
.decomposed-slider .slick-dots li button {
    border: none;
    height: 20px;
    width: 65px;
    color: #0000;
    cursor: pointer;
    background-color: #0000;
}

.decomposed-slider .slick-dots li button {
    width: 100%;
}

@media screen and (max-width: 1200px) {
    .slider-pictures .slick-slide {
        height: 400px;
    }

    .slider-pictures .slick-dots li button {
        width: 50px;
    }
}

@media screen and (max-width: 768px) {
    .slider-pictures .slick-slide {
        height: min(300px, 100vh);
    }

    .slider-pictures .slick-dots {
        gap: 7px;
        padding: 0 20px;
    }

    .slider-pictures .slick-dots li button {
        width: 40px;
    }
}

/*** SECTIONS - DECOMPOSED-SLIDER ***/

.decomposed-slider .sliders {
    margin-top: 40px;
}

.decomposed-slider .slider-left {
    width: calc(100% - 280px);
    position: relative;
}

.decomposed-slider .slider-left .img {
    height: 470px;
}

.decomposed-slider .slider-left .slick-dots {
    display: none !important;
    position: absolute;
    top: calc((100vw * 2 / 3) - 50px);
    justify-content: flex-start;
}

.decomposed-slider .slider-left .slick-dots li {
    max-width: 40px;
}

.decomposed-slider .slider-right {
    width: 220px;
}

.decomposed-slider .slider-right .img {
    height: 350px;
    position: relative;
}

.decomposed-slider .slider-right .img::before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
    background-color: var(--color-primary);
    opacity: 0.6;
    pointer-events: none;
}

.decomposed-slider .slider-left h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

.decomposed-slider .slider-right h3 {
    position: absolute;
    left: 0;
    bottom: 0;
    color: #fff;
    width: 100%;
    font-size: 30px;
    padding: 10px;
}

@media screen and (max-width: 992px) {
    .decomposed-slider .slider-left {
        width: 100%;
    }

    .decomposed-slider .slider-left .img {
        aspect-ratio: 3 / 2;
        width: 100%;
        height: auto;
        margin-bottom: 40px;
    }

    .decomposed-slider .slider-left .slick-dots {
        display: flex !important;
    }

    .decomposed-slider .slider-right {
        display: none;
    }
}

/*** SECTIONS - FORM ***/

.form,
.form input,
.form textarea {
    color: var(--color-primary);
}

.form form {
    max-width: 630px;
    margin: auto;
}

.form .input-group {
    margin-bottom: 30px;
}

.form .btn::after {
    content: url(./images/ic-arrow-blue.svg);
}

/*** SECTIONS - SOCIALS ***/

section.socials {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

section.socials > * {
    position: relative;
}

section.socials::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-primary);
    opacity: 0.6;
    pointer-events: none;
}

section.socials .list {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 50px;
}

section.socials .list .btn {
    border: solid 1px var(--color-secondary);
    border-radius: 100px;
    height: 60px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    padding: 0;
}

section.socials .list .btn::after {
    content: none;
}

@media screen and (max-width: 768px) {
    section.socials .list {
        gap: 40px;
    }

    section.socials .list .btn {
        height: 50px;
        width: 50px;
        font-size: 20px;
    }
}

@media screen and (max-width: 400px) {
    section.socials .list {
        column-gap: 25vw;
    }
}

/*** SECTIONS - EXPERTS ***/

section.experts .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 50px;
    margin-top: 60px;
}

section.experts .grid > div {
    max-height: 360px;
}

section.experts .expert {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    max-height: 360px;
    position: relative;
    aspect-ratio: 3 / 4;
    margin: auto;
}

section.experts .expert > * {
    position: relative;
    opacity: 0;
    transition: 0.3s ease-in-out;
}

section.experts .expert::before {
    content: '';
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    background-color: var(--color-primary);
    opacity: 0;
    pointer-events: none;
}

section.experts .expert:hover::before {
    opacity: 0.6;
}

section.experts .expert:hover > * {
    opacity: 1;
}

section.experts .expert .name {
    font-weight: 600;
}

section.experts .expert .job {
    font-size: 13px;
    line-height: 1.4;
}

@media screen and (max-width: 1200px) {
    section.experts .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    section.experts .grid {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
    }

    section.experts .expert {
        padding: 10px;
    }
}

/*** SECTIONS - TRAININGS ***/

section.trainings.bg-logo .list {
    position: relative;
}

section.trainings.bg-logo .list::before {
    content: '';
    display: block;
    height: 264px;
    width: 396px;
    position: absolute;
    top: -221px;
    right: -87px;
    background-image: url(./images/bg-logo-blue.svg);
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

section.trainings .list {
    display: flex;
    flex-direction: column;
    grid-gap: 40px;
    margin-top: 60px;
}

section.trainings h3 {
    color: #fff !important;
}

section.trainings .subtitle {
    margin-top: 10px;
    font-size: 24px;
}

section.trainings .content {
    margin-top: 30px;
    display: none;
}

section.trainings .title {
    position: relative;
    padding-right: 60px;
}

section.trainings .toggle {
    -webkit-appearance: none;
    position: absolute;
    top: calc(50% - 22px);
    right: 0;
    height: 44px;
    width: 44px;
    max-width: 44px;
    padding: 0;
    border: solid 1px #fff;
    border-radius: 100px;
    outline: none;
    cursor: pointer;
    background-color: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-secondary);
    font-size: 36px;
    font-weight: 100;
}

section.trainings .toggle:after {
    content: '+';
}

section.trainings .toggle.show::after {
    content: '-';
    line-height: 0.1;
}

@media screen and (max-width: 768px) {
    section.container.trainings {
        padding-left: 0;
        padding-right: 0;
    }

    section.container.trainings h2 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    section.container.trainings h3 {
        font-size: 28px;
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    section.trainings .list {
        grid-gap: 10px;
        margin-top: 40px;
    }

    section.trainings .training {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    section.trainings .title {
        padding-right: 40px;
    }

    section.trainings .subtitle {
        font-size: 17px;
    }

    section.trainings .toggle {
        position: absolute;
        top: calc(50% - 14px);
        height: 28px;
        width: 28px;
        max-width: 28px;
        font-size: 23px;
    }
}

/*** SECTIONS - FULL NEWS ***/

section.full-news .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 50px;
}

section.full-news .grid > div {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 30px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    position: relative;
}

section.full-news .grid > div > * {
    position: relative;
}

section.full-news .grid > div::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: min(12rem, 90%);
    width: 100%;
    background-image: linear-gradient(#0000, #000);
    pointer-events: none;
}

section.full-news .grid > div span {
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

section.full-news .grid > div h4 {
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.25;
}

.full-news-filter {
    margin-bottom: 50px;
}

.full-news-filter button {
    background-color: #fff;
    color: var(--color-secondary);
    border: solid 2px;
    border-color: #fff;
    padding: 10px 15px 10px 15px;
    border-radius: 6px;
    transition: 0.2s;
    cursor: pointer;
}

.full-news-filter button.active {
    background-color: var(--color-secondary);
    color: #fff;
    border-color: var(--color-secondary);
}

.full-news-filter button:hover,
.full-news-filter button.active:hover {
    background-color: #fff;
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.cvf_pag_loading {
    padding: 20px;
    border: 1px solid #fff;
}

.cvf-universal-pagination ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 50px;
}

.cvf-universal-pagination li {
    text-align: center;
    padding: 10px 5px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
}

.cvf-universal-pagination li.first,
.cvf-universal-pagination li.prev,
.cvf-universal-pagination li.next,
.cvf-universal-pagination li.last {
    border: solid 1px var(--color-secondary);
    border-radius: 100px;
    position: relative;
    padding: 0;
    height: 100%;
    width: 100%;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cvf-universal-pagination li.prev,
.cvf-universal-pagination li.next {
    height: 50px;
    width: 50px;
    margin: 0 10px;
}

.cvf-universal-pagination li.first,
.cvf-universal-pagination li.last {
    height: 30px;
    width: 30px;
}

.cvf-universal-pagination li.prev::before,
.cvf-universal-pagination li.next::before {
    content: url(./images/ic-arrow-blue.svg);
    position: absolute;
}

.cvf-universal-pagination li.first::before,
.cvf-universal-pagination li.last::before {
    content: '>>';
    position: absolute;
    font-size: 14px;
    font-weight: 300;
}

.cvf-universal-pagination li.first::before,
.cvf-universal-pagination li.prev::before {
    transform: rotate(180deg);
}

.cvf-universal-pagination li.selected {
    border-bottom: solid 2px var(--color-secondary);
}

.cvf-universal-pagination li.inactive {
    display: none;
}

@media screen and (max-width: 992px) {
    section.full-news .grid {
        grid-template-columns: repeat(2, 1fr);
    }

    section.full-news .grid > div {
        width: 100%;
        aspect-ratio: 3 / 2;
    }
}

@media screen and (max-width: 768px) {
    section.full-news .grid {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 15px;
    }

    section.full-news .grid > div {
        aspect-ratio: initial;
    }

    .cvf_pag_loading {
        padding: 0;
    }

    .cvf-universal-pagination li.prev, .cvf-universal-pagination li.next {
        height: 40px;
        width: 40px;
        margin: 0 5px;
    }
}