:root {
    --section_padding: 100px 0;
}

.container-right {
    .container_inner {
        width: 100%;
    }
}

.pbuilder-row {
    .pbuilder-content-column {
        .col_inner {
            width: 100%;
            position: relative;
            img {
                max-width: 100%;
            }
            &.height_100 {
                height: 100%;
            }
            p {

            }
        }
        &.img_portrait {
            img {
                width: 100%;
                height: auto;
                aspect-ratio: 3 / 4;
                object-fit: cover;
            }
        }
    }
}

.background_ {
    h2, h3, h4, h5, h6 {
        color: #000;
    }
}

.type_headerimg {
    h1 {
        color: #fff!important;
    }
}

.background_primary {
    background: var(--primary);
    color: #000;
    position: relative;
    z-index: 0;
    &.no_triangle {
        &:after {
            display: none;
        }
    }
    &.no_radius {
        border-radius: 0;
    }
    a {
        color: #fff;
    }
    h1, h2, h3, h4, h5 {
        color: #000;
    }
    h6 {
        color: rgba(255,255,255,0.65);
    }
}
.background_secondary {
    background: var(--secondary);
}
.background_default {
    color: #000;
    p {
        color: #000;
    }
    ul {
        li {
            &:before {
                background: var(--primary);
            }
        }
    }
}

.background_darkblue {
    background: #000;
    color: #fff;
    h1 {
        color: #fff;
    }
    p, h6 {
        color: #819aa2;
    }
    h6 {
        line-height: 3.8rem;
        margin: 0 0 45px;
    }
}

.g-5, .gx-5 {
    --bs-gutter-x: 3rem;
}
.g-7, .gx-7 {
    --bs-gutter-x: 5rem;
}
.g-10, .gx-10 {
    --bs-gutter-x: 8rem;
}
.g-15, .gx-15 {
    --bs-gutter-x: 12rem;
}
.g-20, .gx-20 {
    --bs-gutter-x: 15rem;
}

.card_wrapper {
    height: 100%;
    .card {
        height: 100%;
        .img_base {
            position: relative;
            height: 400px;
            border-radius: 10px;
            overflow: hidden;
            .img {
                background-size: cover!important;
                background-repeat: no-repeat!important;
                background-position: center center!important;
                height: 100%;
            }
            .caption {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                padding: 30px;
                color: #fff;
                h4 {
                    margin: 0 0 10px;
                    color: #fff;
                }
                .description {
                    line-height: 1.35;
                }
            }
        }
    }
}

@-webkit-keyframes headerimg_arrow_animation {
    0% { opacity: 0; }
    100% { opacity: 1; transform: scale(1.0) translate(-50%, -50%) rotate(0); }
}

@-moz-keyframes headerimg_arrow_animation {
    0% { opacity: 0; }
    100% { opacity: 1; transform: scale(1.0) translate(-50%, -50%) rotate(0); }
}

@-o-keyframes headerimg_arrow_animation {
    0% { opacity: 0; }
    100% { opacity: 1; transform: scale(1.0) translate(-50%, -50%) rotate(0); }
}

@keyframes headerimg_arrow_animation {
    0% { opacity: 0; }
    100% { opacity: 1; transform: scale(1.0) translate(-50%, -50%) rotate(0); }
}

@-webkit-keyframes fadein_moveup_animation {
    0% { opacity: 0; }
    100% { opacity: 1; bottom: 0; }
}

@-moz-keyframes fadein_moveup_animation {
    0% { opacity: 0; }
    100% { opacity: 1; bottom: 0; }
}

@-o-keyframes fadein_moveup_animation {
    0% { opacity: 0; }
    100% { opacity: 1; bottom: 0; }
}

@keyframes fadein_moveup_animation {
    0% { opacity: 0; }
    100% { opacity: 1; bottom: 0; }
}

.section {
    position: relative;
    pre {
        font-family: var(--bodyFont);
        font-weight: 600;
        color: var(--default);
        font-size: 1.7rem;
        margin: 0 0 40px;
        position: relative;
        &:after {
            content: '';
            width: 100px;
            height: 2px;
            background: var(--default);
            position: absolute;
            bottom: -25px;
            left: 0;
        }
    }
    &.section_1 {
        h1 {
            position: relative;
            strong {
                font-weight: 600;
                color: var(--default);
            }
        }
        h6 {
            font-weight: 400;
            line-height: 3.8rem;
        }
    }
    &.height_100 {
        height: 100vh;
        .pbuilder-row {
            height: 100vh;
        }
    }
    &.header_img {
        &.type_arrow {
            &:before {
                content: '';
                position: absolute;
                left: 50%;
                top: 50%;
                width: 500px;
                height: 500px;
                transform: translate(-50%, -50%);
                background: var(--default);
                border-radius: 50em;
                filter: blur(200px);
            }
            .img {
                position: absolute;
                left: 50%;
                top: 63%;
                transform: translate(-50%, -50%) scale(0.75) rotate(-25deg);
                width: 600px;
                height: 600px;
                background-size: cover!important;
                background-position: center center!important;
                background-repeat: no-repeat!important;
                clip-path: polygon(0% 0%, 100% 0%, 55% 100%, 50% 40%);

                opacity: 0;
                animation-name: headerimg_arrow_animation;
                animation-duration: 0.35s;
                animation-iteration-count: 1;
                animation-direction: alternate;
                animation-timing-function: ease-out;
                animation-fill-mode: forwards;
                animation-delay: 0.65s;

                -webkit-animation-name: headerimg_arrow_animation;
                -webkit-animation-duration: 0.35s;
                -webkit-animation-iteration-count: 1;
                -webkit-animation-direction: alternate;
                -webkit-animation-timing-function: ease-out;
                -webkit-animation-fill-mode: forwards;
                -webkit-animation-delay: 0.65s;
                &:after {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    background: var(--primary);
                    opacity: 0.5;
                }
            }
            h1 {
                bottom: -30px;
                opacity: 0;
                animation-name: fadein_moveup_animation;
                animation-duration: 0.65s;
                animation-iteration-count: 1;
                animation-direction: alternate;
                animation-timing-function: ease-out;
                animation-fill-mode: forwards;
                animation-delay: 0.5s;

                -webkit-animation-name: fadein_moveup_animation;
                -webkit-animation-duration: 0.65s;
                -webkit-animation-iteration-count: 1;
                -webkit-animation-direction: alternate;
                -webkit-animation-timing-function: ease-out;
                -webkit-animation-fill-mode: forwards;
                -webkit-animation-delay: 0.5s;
            }
            .btn {
                bottom: -30px;
                opacity: 0;
                animation-name: fadein_moveup_animation;
                animation-duration: 0.45s;
                animation-iteration-count: 1;
                animation-direction: alternate;
                animation-timing-function: ease-out;
                animation-fill-mode: forwards;
                animation-delay: 0.85s;

                -webkit-animation-name: fadein_moveup_animation;
                -webkit-animation-duration: 0.45s;
                -webkit-animation-iteration-count: 1;
                -webkit-animation-direction: alternate;
                -webkit-animation-timing-function: ease-out;
                -webkit-animation-fill-mode: forwards;
                -webkit-animation-delay: 0.85s;
            }
        }
        h5 {
            color: rgba(255,255,255,0.75);
            max-width: 515px;
            font-weight: 500;
            position: relative;
        }
        &.reverse {
            .header_image {
                background-color: #000;
                &:before {
                    background: #000;
                }
                .img {
                    //width: 100%;
                }
            }
        }
    }
    &.img_half {
        &.right_side {
            .header_image {
                &:before {
                    left: inherit;
                    right: -50px;
                }
            }
        }
        .header_image {
            background-color: var(--primary);
            &:before {
                content: '';
                position: absolute;
                z-index: 2;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                width: 44%;
                transform: skew(25deg);
                background: var(--primary);
            }
            &:after {
                content: '';
                position: absolute;
                z-index: 2;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                background: linear-gradient(to bottom, rgba(5,55,70,1) 0%,rgba(53,107,135,0) 40%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            }
            .img {
                width: 65%;
                float: right;
            }
        }
    }
    .header_image {
        height: 100%;
        position: absolute;
        z-index: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        .img {
            height: 100%;
            width: 100%;
            background-size: cover!important;
            background-position: top center!important;
            background-repeat: no-repeat!important;
            position: relative;
            z-index: 1;
            .overlay {
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                pointer-events: none;
            }
        }
    }
}












.section_repeat {
    padding: 100px 0;
}

.section_grid1 {
    padding: var(--section_padding);
    .content {
        position: relative;
        height: 100%;
        .text {
            &.text_above {
                position: absolute;
                top: 0;
            }
            &.text_below {
                position: absolute;
                bottom: 0;
            }
        }
    }
    img {
        min-height: 550px;
        width: 100%;
        object-fit: cover;
    }
}