.production-banner-block {
    width: 100%;
}

.production-banner-video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.production-banner-bg {
    background-image: linear-gradient(90deg, rgba(34, 110, 221, .9) 0%, rgba(86, 216, 213, .9) 100%) !important;
    background-size: cover;
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo-white {
    filter: brightness(0) invert(1);
}

.production-banner-block {
    position: relative;
}

.production-banner-content {
    position: relative;
    z-index: 2;
}

.intro-img-2 {
    position: relative;
    margin-top: -34%;
}

.text-gd-primary {
    background: linear-gradient(90deg, #226EC5 0%, #56C0BE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-topic {
    color: #226EC5 !important;
}

.process-timeline-nav {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    height: 100%;
}

.process-timeline-nav .nav-link {
    color: #bfc3c9;
    font-weight: 500;
    position: relative;
    padding-left: 32px;
    padding-top: 0px;
    padding-bottom: 2rem;
    border: none;
    background: none;
    text-align: left;
    transition: color 0.2s;
}

.process-timeline-nav .nav-link.active,
.process-timeline-nav .nav-link:focus {
    color: #667085;
    background: none;
}

.process-timeline-nav .nav-link.active::before,
.process-timeline-nav .nav-link:focus::before {
    background-color: #3977e0;
}

.process-timeline-nav .nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 16px;
    height: 16px;
    background-color: #e4e8ef;
    border-radius: 50%;
    border: 2px solid #e4e8ef;
    transition: background 0.2s;
    z-index: 1;
}

.process-timeline-nav .nav-link.active::before {
    background-color: #226EC5;
    border-color: #226EC5;
}

.process-timeline-nav .nav-link:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 5px;
    width: 2px;
    height: 100%;
    background: #e4e8ef;
    z-index: 0;
}

@media (max-width: 768px) {
    .process-timeline-nav {
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid #eee;
    }

    .process-timeline-nav .nav-link {
        display: inline-block;
        padding-right: 20px;
    }
}

.process-img {
    position: relative;
    z-index: 1;
}

.process-popup-img {
    position: absolute;
    z-index: 2;
}

.process-popup-img-right {
    right: 5%;
    bottom: 10%;
}

.process-popup-img-left {
    left: 5%;
    bottom: 10%;
}

.process-decor {
    position: absolute;
    z-index: 0;
    height: 60%;
}

.process-decor-l {
    left: 0;
    bottom: 30px;
}

.process-decor-r {
    top: 30px;
    right: 0;
}

.image-hover-fade {
    position: relative;
    overflow: hidden;
}

.image-hover-fade .front {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.image-hover-fade .back {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.image-hover-fade .front {
    opacity: 1;
    z-index: 2;
}

.image-hover-fade:hover .front {
    opacity: 0;
}

.image-hover-fade.hovered .back {
  opacity: 1;
}
.image-hover-fade.hovered .front {
  opacity: 0;
}

.rounded-8 {
    border-radius: 8px;
}

.rounded-15 {
    border-radius: 15px;
}

.rounded-20 {
    border-radius: 20px;
}

.intro-wrap {
    position: relative;
    perspective: 1000px;
}

.intro-img {
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    transform: rotateX(30deg);
}

.intro-img.active {
    transform: none;
}

.text-gd-primary-loop {
    background: linear-gradient(90deg, #226EC5, #56C0BE, #226EC5);
    background-size: 600% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradient-move 8s ease-in-out infinite;
}

@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

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

.live-icon {
    position: absolute;
    top: 3px;
    left: 6px;
    animation: live-blink 2s ease-in-out infinite;
}

@keyframes live-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
}

.bg-testimonial {
    position: relative;
    background-image: linear-gradient(90deg, rgba(34, 110, 221, .75) 0%, rgba(86, 216, 213, .75) 100%), url(/data-file/index/all-devices/bg-1614.png) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: top;
    background-position-x: right;
    z-index: 1;
}

.contact-man img {
    width: 100%;
}

@media (min-width: 768px) {
    .mb-md-8 {
        margin-bottom: 8rem !important;
    }

    .contact-man {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .contact-man img {
        width: auto;
        height: 440px;
    }

    .border-left-md {
        border-left: 1px solid #dee2e6 !important;
    }

    .process-popup-img-right {
        right: 25px;
        bottom: 120px;
    }

    .process-popup-img-left {
        left: 25px;
        bottom: 100px;
    }
}

.testimonial-edl {
    position: absolute;
    bottom: -45px;
    left: -45px;
    z-index: 0;
}

.testimonial-edr {
    position: absolute;
    top: -55px;
    right: -55px;
    z-index: 0;
}

.ovf-hidden {
    overflow: hidden !important;
}

.ovfx-hidden {
    overflow-x: hidden !important;
}

.showcase-edl {
    position: absolute;
    top: 20%;
    left: 0;
}

.showcase-edr {
    position: absolute;
    right: 0;
    bottom: 20%;
}

@media (min-width: 992px) {
    .border-left-lg {
        border-left: 1px solid #dee2e6 !important;
    }
}

.op-6 {
    opacity: .6;
}