﻿/* 
-----------------------------------------
SPLITBLOCK
-----------------------------------------
*/

.split-block {
    background-color: var(--text-white);
    display: flex;
    flex-wrap: wrap;
    position: relative;
    max-height:100vh;
}

    .split-block .split-block-content,
    .split-block .split-block-img {
        flex-basis: 100%;
    }

    .split-block,
    .split-block .split-block-img,
    .split-block .split-block-img img {
        max-height: 100vh;
    }

        .split-block .split-block-img .overlay {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 2;
            background: rgba(0,0,0,.5);
        }

    /*.split-block .split-block-img img.contain-img {
        margin-right: auto; 
    }*/

    .split-block .split-block-content {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .split-block .split-block-content > div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex-basis: 100%;
        }

        .split-block .split-block-content > div > div {
            max-width: 40vw;
        }

        .split-block .split-block-content.content-right > div {
            margin-left: auto;
        }
        .split-block .split-block-content.content-left > div {
            margin-right: auto;
        }

        .split-block .split-block-content:not(.container-x) {
            padding: 1rem;
        }

        .split-block .split-block-content .btn {
            width: fit-content;
        }

@media(min-width: 992px) {
    .split-block .split-block-content {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index:3;
    }

        .split-block .split-block-content > div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex-basis: 50%;
        }

    .split-block .split-block-content:not(.container-x) {
        padding: 2rem;
    }
}

@media(min-width: 1368px) {
    .split-block .split-block-content:not(.container-x) {
        padding: 4rem;
    }

    .split-block .split-block-content,
    .split-block .split-block-img {
        flex-basis: 50%;
    }
}

.split-block .split-block-content .left-line {
    position:relative;
}

.split-block .split-block-content .left-line > div {
    position:absolute;
    top: 0;
    bottom: 0;
}
.split-block .split-block-content .left-line .growing {
    z-index: 1;
}

/* Alternating splitblocks */
@media(min-width: 1368px) {
    .alternating .split-block:nth-child(even) .split-block-img {
        order: 2;
    }

    .alternating .split-block:nth-child(even) .split-block-content {
        order: 1;
    }

    .alternating .split-block:nth-child(odd) .split-block-img {
        order: 1;
    }

    .alternating .split-block:nth-child(odd) .split-block-content {
        order: 2;
    }

    .alternating-reverse .split-block:nth-child(even) .split-block-img {
        order: 1;
    }

    .alternating-reverse .split-block:nth-child(even) .split-block-content {
        order: 2;
    }

    .alternating-reverse .split-block:nth-child(odd) .split-block-img {
        order: 2;
    }

    .alternating-reverse .split-block:nth-child(odd) .split-block-content {
        order: 1;
    }
}

.rounded, 
.rounded .split-block {
    border-radius: 25px !important;
    overflow: hidden;
}

/* 
-----------------------------------------
CARDS
-----------------------------------------
*/

.card {
    background-color: var(--text-white);
    border-radius: 15px;
    border: none;
    overflow: hidden;
}

@media(min-width: 992px) {
    .card .card-body {
        padding: 2rem;
    }
}

a.card {
    text-decoration: none !important;
}

    a.card h3 {
        color: var(--text-dark);
    }

    a.card:hover h3 {
        color: var(--text-primary);
    }

/* 
-----------------------------------------
Cards Container
-----------------------------------------
*/
/*.cards-container .card {
    border-radius: 0;
    border: none;
    background: var(--white-color);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
}

.card .card-body {
    background-color: var(--text-white);
    padding: 1rem;
}

.card .card-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
    object-position: center;
}

.card .card-img.centered {
    padding: 1.5rem;
    aspect-ratio: 3/2;
    border-bottom: 1px solid #ededed;
    border-radius: 0;
}

    .card .card-img.centered img {
        width: 100%;
        height: auto;
        aspect-ratio: unset;
        object-fit: contain;
        object-position: center;
    }
*/

/* 
-----------------------------------------
Key Values
-----------------------------------------
*/

.key-values-container {

}

    .key-values-container .key-value {
    
    }

        .key-values-container .key-value .key {
            font-size: 1.75rem;
            font-weight: 700;
        }

        .key-values-container .key-value .value {
            height: 84px;
            display:flex;
            align-items: center;
        }

            .key-values-container .key-value .value img {
                height:100%;
                width: auto;
            }
            .key-values-container .key-value .value > div {
                height: 100%;
                font-size: clamp(2.5rem, 1.3214rem + 3.2738vw, 5.25rem);
                color: var(--primary-color);
                display: flex;
                justify-content: center;
                align-items: center;
            }

/* 
-----------------------------------------
Logos Section
-----------------------------------------
*/

.logos-section .logo {
    height: 152px;
    width: auto;
    aspect-ratio: 1/1;
}


/* 
-----------------------------------------
Growing HR
-----------------------------------------
*/

/* Growing HR animation */
.growing-hr .growing > hr {
    width: 0;
    transition: width 0.8s ease-out;
}

    .growing-hr .growing > hr.animate {
        width: var(--target-width);
    }

/* Growing VR (vertical) animation */
.growing-vr .growing > div {
    height: 0;
    transition: height 0.8s ease-out;
}

    .growing-vr .growing > div.animate {
        height: var(--target-height);
    }

.bg-white .full > hr {
    border-color: var(--neutral-color-dark) !important;
}