/*------------------------------------*\
    #BACKGROUNDS
\*------------------------------------*/

.bg-theme {
    background-color: var(--global--color-primary) !important;
}

.bg-gray {
    background-color: #f3f7fb !important;
}

.bg-dark-gray {
    background-color: #3a3a3a;
}

.bg-dark {
    background-color: #222222 !important;
}

/* Background Image */

.bg-section {
    position           : relative;
    overflow           : hidden;
    z-index            : 1;
    background-size    : cover;
    background-repeat  : no-repeat;
    background-position: center center;
    width              : 100%;
    height             : 100%;
}

.bg-parallax {
    background-attachment: fixed;
}

.bg-overlay {
    &:before {
        content : "";
        display : inline-block;
        height  : 100%;
        left    : 0;
        position: absolute;
        top     : 0;
        width   : 100%;
        z-index : -1;
    }
}

.bg-overlay-2 {
    &:before {
        content : "";
        display : inline-block;
        height  : 100%;
        left    : 0;
        position: absolute;
        top     : 0;
        width   : 100%;
        z-index : 0;
    }
}

.bg-overlay-light {
    &:before {
        background-color: var(--global--color-white);
        opacity         : 0.8;
    }
}

.bg-overlay-dark {
    &:before {
        background: linear-gradient(#021c37 0%, #041c35 6.74%, rgba(21, 27, 33, 0) 74.68%, rgba(27, 26, 26, 0) 100%);
        opacity: 0.45;
    }
}

.bg-overlay-dark-2 {
    &:before {
        background-color: #041c3538;
    }
}
.bg-overlay-dark-3 {
    &:before {
        background-color: rgb(3, 43, 86);
        opacity: 0.149;
    }
}

.bg-overlay-theme-secondary {
    &:before {
        background: linear-gradient(rgba(40, 205, 250, 0) 0%, rgba(29, 101, 185, 0) 0%, rgba(29, 101, 185, 0) 16.43%, #1d65b9 97.66%, #1d65b9 100%)
    }
    &::after {
        content: '';
        @include overlay(rgba(32, 115, 211, 0.85));
        z-index : 0;
    }
}
.bg-overlay-theme-dark {
    &:before {
        background: linear-gradient(rgba(29, 101, 185, 0) 0%, rgba(6, 52, 100, 0) 0%, rgba(6, 52, 100, 0) 16.43%, #063464 97.66%, #063464 100%);
    }
    &::after {
        content: '';
        @include overlay(rgba(6, 52, 100, 0.95));
        z-index : 0;
    }
}
.bg-overlay-theme-light {
    &:before {
        background:  linear-gradient(rgba(29, 101, 185, 0) 0%, rgba(155, 203, 59, 0) 0%, rgba(155, 203, 59, 0) 16.43%, #9bcb3b 97.66%, #9bcb3b 100%);
    }
    &::after {
        content: '';
        @include overlay( rgba(155, 203, 59, 0.95));
        z-index : 0;
    }
}
.bg-overlay-theme-light {
    &:before {
        background:  linear-gradient(rgba(29, 101, 185, 0) 0%, rgba(155, 203, 59, 0) 0%, rgba(155, 203, 59, 0) 16.43%, #9bcb3b 97.66%, #9bcb3b 100%);
    }
    &::after {
        content: '';
        @include overlay( rgba(155, 203, 59, 0.95));
        opacity: 0.8;
        z-index : 0;
    }
}
.bg-overlay-theme-light-inversed {
    &:before {
        background: linear-gradient(rgba(60, 152, 48, 0) 0%, rgba(155, 203, 59, 0) 0%, rgba(155, 203, 59, 0) 16.43%, #9bcb3b 97.66%, #9bcb3b 100%);
    }
    &::after {
        content: '';
        @include overlay( rgba(155, 203, 59, 0.95));
        z-index : 0;
    }
}
.bg-overlay-theme-primary {
    &:before {
        background: linear-gradient(rgba(29, 101, 185, 0) 100%, rgba(29, 101, 185, 0) 100%, rgba(29, 101, 185, 0) 84.57%, #1d65b9 97.66%, #1d65b9 100%)
    }
    &::after {
        content: '';
        @include overlay( rgba(29, 101, 185, 0.95));
        z-index : 0;
    }
}
.bg-overlay-theme-primary-light {
    &:before {
        background: linear-gradient(rgba(155, 203, 59, 0) 0%, rgba(68, 214, 254, 0) 0%, rgba(68, 214, 254, 0) 16.43%, #44d6fe 97.66%, #44d6fe 100%)
    }
    &::after {
        content: '';
        @include overlay( rgba(68, 214, 254, 0.9));
        z-index : 0;
    }
}

.bg-overlay-dark-slider {
    &:before {
        background: linear-gradient(#021c37 0%, #041c35 6.74%, rgba(21, 27, 33, 0) 74.68%, rgba(27, 26, 26, 0) 100%);
        opacity: 0.45;
    }
    &::after {
        content: '';
        @include overlay( rgba(3, 43, 86, 0.25));
    }
}

.bg-overlay-theme {
    &:before {
        background-image: linear-gradient(-90deg, #13C1D9BF 18%, var(--global--color-primary) 70%);
    }
}

.bg-overlay-theme2 {
    &:before {
        background-image: linear-gradient(0deg, rgba(6, 22, 51, 0) 0%, #1d294d 0%);
    }
}

.bg-overlay-theme3 {
    &:before {
        background      : #1D2A4DF0;
        background-image: -webkit-linear-gradient(90deg, rgba(6, 23, 51, 0) 0%, rgba(29, 42, 77, 0) 0%, rgb(29, 42, 77) 80%);
    }
}

.bg-overlay-video {
    &:before {
        background-image: linear-gradient(180deg, rgba(6, 23, 51, 0) 0%, rgba(29, 42, 77, 0) 62%, rgba(29, 42, 77, 1) 97%);
    }
}

/* Background Video */
.bg-video {
    position: relative;

    iframe {
        position  : absolute;
        top       : 0;
        left      : 0;
        right     : 0;
        object-fit: cover;
        width     : 100%;
        height    : 100%;
        transform : rotateZ(0);
    }

    h2 {
        text-transform: capitalize;
        position      : absolute;
        top           : 50%;
        left          : 50%;
        transform     : translate(-50%);
        z-index       : 5;
    }
}


.no-shadow {
    box-shadow: none !important;
}

.bg-animate {
    background-size    : cover;
    background-position: 0px 0px;
    background-repeat  : repeat-x;
    animation          : animatedBackground 30s linear infinite;
}

@-webkit-keyframes animatedBackground {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 100% 0;
    }
}

@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 100% 0;
    }
}

/* Elements Background */
.el-bg {
    height         : 550px;
    display        : flex;
    justify-content: center;
    align-items    : center;

    h2 {
        color: var(--global--color-white);
    }
}