@font-face {
    font-family: Poppins;
    src: url("../fonts/Poppins-Regular-841449941ec9dbd3ccabf4f4d5d72893.ttf");
}

:root {
    --bs-font-sans-serif: Poppins;
    --bs-body-font-family: Poppins;
    --bs-border-width: 3px;

    --sp-blue: #3B3EBA;
    --sp-purple: #BB30A6;
    --sp-violet: #FB4582;
    --sp-coral: #FF7F60;
    --sp-orange: #FFBD52;
    --sp-yellow: #F9F871;

    --sp-cdg-gradient: linear-gradient(to right, var(--sp-violet) 25%, var(--sp-coral) 50%, var(--sp-orange) 75%);

    --sp-blue-trans: #3B3EBA40;

    --sp-border-width: 3px;
    --sp-border-color: var(--sp-blue);
    --sp-border-radius: 1em .25em;

    --sp-aspect-ratio: .2142; /* .2857;*/
    --sp-pg-head-bg-img-url: ;
    --sp-fs-page-title: min(5vw, 6rem, 96px);

    --sp-hero-media-content-color: whitesmoke;
    --sp-nav-tabs-border-color: var(--bs-nav-tabs-border-color);
}

.bg-blue {
    background-color: var(--sp-blue);
}

.bg-violet {
    background-color: var(--sp-violet);
}

.bg-coral {
    background-color: var(--sp-coral);
}

.bg-orange {
    background-color: var(--sp-orange);
}

.bg-gray {
    background: linear-gradient(to top, #f6f6f6, #ffffff);
}

.bg-cdg-gradient {
    background: var(--sp-cdg-gradient) no-repeat;
    height: 100%;
    min-height: .8vh;
    text-transform: full-width;
}

.border-blue {
    border-color: var(--sp-blue);
}

.border-violet {
    border-color: var(--sp-violet);
}

.border-coral {
    border-color: var(--sp-coral);
}

.border-orange {
    border-color: var(--sp-orange);
}

.border-yellow {
    border-color: var(--sp-yellow);
}

.border-purple {
    border-color: var(--sp-purple);
}

.text-blue {
    color: var(--sp-blue);
}

.text-violet {
    color: var(--sp-violet)
}

.text-coral {
    color: var(--sp-coral);
}

.text-orange {
    color: var(--sp-orange);
}

.sp-rounded-border {
    border-style: solid;
    border-radius: var(--sp-border-radius);
    border-width: var(--sp-border-width);
}

.navbar {
    --bs-navbar-padding-x: 1.5rem;
    --bs-navbar-padding-y: 1.5rem;

    .nav-brand {
        background: url("../media/picto_blue-fbd9a2caafc3022e60caa7daaf285810.png") center / contain no-repeat;
        height: 25px;
        transition: transform 300ms;
        width: 23px;

        &:hover {
            transform: scale(1.1);
        }
    }

    @media (min-width: 992px) {
        .nav-brand {
            background-image: url("../media/logo_blue-b49bbba92058d74d0f2e343ea6dfe21c.png");
            height: 52px;
            width: 200px;
        }
    }

    .navbar-nav {
        --bs-nav-link-hover-color: white;

        .nav-link {
            border-radius: 10% 0;
            margin: 0 0.5rem;
            text-align: center;
            text-transform: lowercase;
            transition: background-color .3s ease-in-out, transform .3s;

            &:hover {
                transform: scale(1.1);
                background-color: var(--bs-nav-link-color);
            }

            &.active, &:focus {
                color: var(--bs-nav-link-hover-color);
                background-color: var(--bs-nav-link-color);
            }

            @media (max-width: 992px) {
                margin: unset;
            }
        }

        .text-blue {
            --bs-nav-link-color: var(--sp-blue);
        }

        .text-violet {
            --bs-nav-link-color: var(--sp-violet);
        }

        .text-coral {
            --bs-nav-link-color: var(--sp-coral);
        }

        .text-orange {
            --bs-nav-link-color: var(--sp-orange);
        }
    }
}

footer {
    a {
        color: white !important;
        text-decoration: none;
    }
}

.card {
    --bs-card-border-radius: var(--sp-border-radius);
    --bs-card-height: 100%;
    --sp-card-image-hmax: 200px;

    .card-img {
        background-size: cover;
        background-repeat: no-repeat;
        min-height: var(--sp-card-image-hmax);

        &.sp-rounded-border {
            --sp-border-width: 0;
            overflow: hidden;
        }

        .card-img-text {
            color: white;
            font-weight: bold;
            padding-bottom: 5px;
            margin: 0;
            text-align: center;
            text-shadow: black 0 0 15px;
            width: 100%;
        }

        &:hover {
            .card-img-text {
                align-self: end;
                background-color: var(--sp-blue);
            }
        }
    }

    .card-img[class^='bg-'], .card-img[class*=' bg-'] {
        background-blend-mode: overlay;
        background-position: center;

        &:hover {
            background-color: transparent;
        }
    }

    .p-preview, .p-preview * {
        max-height: calc(var(--sp-card-image-hmax) - 40px);
        overflow: hidden;
    }
}

.p-preview {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;

    > p {
        text-overflow: ellipsis;
        overflow: clip;
    }
}

#page_header {
    --sp-ratio-factor: min(1920px, 100%);
    --bs-aspect-ratio: calc(var(--sp-aspect-ratio) * var(--sp-ratio-factor));
    --sp-pg-head-bg-img: linear-gradient(to right, var(--sp-blue), var(--sp-blue-trans) 75%, var(--sp-blue)), var(--sp-pg-head-bg-img-url);

    background: var(--sp-pg-head-bg-img) center right / cover no-repeat;

    .ratio {
        max-height: calc(var(--sp-aspect-ratio) * 1920px);
    }

    .page-title {
        align-items: end;
        display: flex;
        font-size: var(--sp-fs-page-title);
        max-width: max-content;
    }
}

#hero {
    .hero-media-wrap {
        position: relative;

        .hero-media {
            background-color: #3033B6; /* variant blue 'cos image from video use these one */
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;

            img {
                max-height: 85vh;
                object-fit: contain;
                width: 100%;
            }
        }

        .hero-media-content {
            color: var(--sp-hero-media-content-color);
            font-size: 8.5vw !important;
            font-weight: bolder;
            position: absolute;
            text-shadow: var(--sp-hero-media-content-color) 0 0 10px;
        }
    }
}

.article-img {
    cursor: zoom-in;
    float: right;
    height: auto;
    margin-left: .5rem;
    max-width: 50%;
}

#article-img-modal, #case-img-modal {
    --bs-modal-width: max-content;
}

#who-we-are {
    #page_header {
        --sp-aspect-ratio: .2857;
        --sp-pg-head-bg-img: linear-gradient(to right, var(--sp-blue), transparent, var(--sp-blue)), var(--sp-pg-head-bg-img-url);

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

        #page_header_image {
            text-align: center;

            img {
                cursor: none;
                height: 100%;

                &:hover + .zoom-preview {
                    /*display: block !important;*/
                }
            }
        }

        .zoom-preview {
            cursor: none;
            display: none;
            height: 200px;
            left: 0;
            pointer-events: none;
            position: absolute;
            top: 0;
            width: 200px;
            z-index: 9999;

            > *:first-child {
                border-radius: 50%;
                background: radial-gradient(transparent 60%, white 90%) no-repeat, var(--sp-pg-head-bg-img-url) no-repeat;
                height: 100%;
                position: absolute;
                width: 100%;
            }
        }

    }

    .fs-1 {
        background-clip: text;
        font-size: 4vw;
        font-weight: bold;
        color: var(--sp-blue);
    }
}

@keyframes hor-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

#what-we-do {
    .logo-carousel {
        --carousel-item-count: 0;
        --carousel-item-height: 100px;
        --carousel-item-width: 150px;

        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .logo-track {
        display: flex;
        width: calc(1 * (var(--carousel-item-count) * (var(--carousel-item-width) + (var(--bs-gutter-x) * 2))) - 100%);
        animation: hor-scroll 15s ease-in-out infinite alternate;

        &:hover {
            animation-play-state: paused;
        }
    }

    .logo-item {
        flex: 0 0 auto;
        background: no-repeat center center / contain;
        height: var(--carousel-item-height);
        width: var(--carousel-item-width);
        margin: 0 var(--bs-gutter-x);
    }
}

#what-we-do[data-bs-theme="dark"] {
    .logo-carousel {
        background-color: white;
    }
}

@media (max-width: 768px) {
    .article-img {
        float: none;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    footer .fw-bold {
        font-size: 1.1rem;
        text-align: center;
    }
}

@media (min-width: 1919px) {
    .container-3xl {
        max-width: 1720px;
        margin: auto;
    }
}

@keyframes animatedBackground {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

.cookies-consent {
    bottom: 0;
    font-size: .875em;
    position: fixed;
    left: 1rem;

    .nav-tabs {
        --bs-nav-tabs-border-color: var(--sp-nav-tabs-border-color);
        --bs-nav-tabs-link-active-border-color: var(--sp-nav-tabs-border-color) var(--sp-nav-tabs-border-color) var(--bs-body-bg);

        border-top-right-radius: var(--bs-border-radius);
        width: calc(100% - (var(--bs-nav-tabs-border-radius)));

        .nav-link {
            background: linear-gradient(45deg, var(--sp-blue), var(--sp-violet), var(--sp-coral), var(--sp-orange));
            background-size: 800%;
            animation: animatedBackground 5s ease infinite paused;
            color: blanchedalmond;
            text-transform: capitalize;

            &.collapsed {
                animation-play-state: running;
            }
        }
    }

    .cookies-consent-body {
        background-color: var(--bs-body-bg);
        border-color: var(--sp-nav-tabs-border-color);
        border-style: solid;
        border-top-right-radius: var(--bs-border-radius);
        border-width: 0 var(--bs-border-width);
        position: relative;

        &:before {
            content: "";
            border: 0 solid var(--sp-nav-tabs-border-color);
            border-top-right-radius: var(--bs-border-radius);
            border-top-width: var(--bs-border-width);
            border-right-width: var(--bs-border-width);
            height: calc(var(--bs-border-radius));
            position: absolute;
            right: 0;
            top: 0;
            width: calc(var(--bs-border-radius));
        }
    }
}

#cookies-prefs-modal .accordion {
    .accordion-button {
        --bs-accordion-btn-padding-x: var(--bs-btn-padding-x);
        --bs-accordion-btn-padding-y: var(--bs-btn-padding-y);
        --bs-accordion-btn-icon-width: 1rem;

        font-size: calc(var(--bs-btn-font-size) * .5);
        text-align: center;
        width: calc(var(--bs-accordion-btn-icon-width) + (var(--bs-btn-padding-x)*2));
        height: calc(var(--bs-accordion-btn-icon-width) + (var(--bs-btn-padding-x)*2));

        &:after {
            font-size: 12px;
        }
    }
}