﻿.service-image {
    height: 16rem;
    object-fit: cover;
}

.tech-item-img {
    width: 50%;
    max-height: 4rem;
}

@media (min-width: 768px) and (max-width: 991px) {
    .service-carousel .carousel-inner .active.col-md-6.carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -50%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .service-carousel .carousel-inner .active.col-sm-12.carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -50%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
}

@media (min-width: 576px) {
    .service-carousel .carousel-item {
        margin-right: 0;
    }

    .service-carousel .carousel-inner .active + .carousel-item {
        display: block;
    }

    .service-carousel .carousel-inner .carousel-item.active:not(.carousel-item-end):not(.carousel-item-start),
    .service-carousel .carousel-inner .carousel-item.active:not(.carousel-item-end):not(.carousel-item-start) + .carousel-item {
        transition: none;
    }

    .service-carousel .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }

    .service-carousel .active.carousel-item-start + .carousel-item-next.carousel-item-start,
    .service-carousel .carousel-item-next.carousel-item-start + .carousel-item,
    .service-carousel .carousel-item-next.carousel-item-start + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    .service-carousel .carousel-inner .carousel-item-prev.carousel-item-end {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    .service-carousel .active.carousel-item-end + .carousel-item-prev.carousel-item-end,
    .service-carousel .carousel-item-prev.carousel-item-end + .carousel-item,
    .service-carousel .carousel-item-prev.carousel-item-end + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
    }
}

@media (min-width: 768px) {
    .service-carousel .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }

    .service-carousel .carousel-inner .carousel-item.active:not(.carousel-item-end):not(.carousel-item-start) + .carousel-item + .carousel-item {
        transition: none;
    }

    .service-carousel .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }

    .service-carousel .carousel-item-next.carousel-item-start + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    .service-carousel .carousel-item-prev.carousel-item-end + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
    }

    .service-carousel .carousel-item {
        max-width: 50%;
    }
}

@media (min-width: 991px) {
    .service-carousel .carousel-inner .active + .carousel-item + .carousel-item{
        display: block;
    }

    .service-carousel .carousel-inner .carousel-item.active:not(.carousel-item-end):not(.carousel-item-start) + .carousel-item + .carousel-item {
        transition: none;
    }

    .service-carousel .carousel-inner .active.col-lg-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    .service-carousel .carousel-item-next.carousel-item-start + .carousel-item + .carousel-item + .carousel-item{
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    .service-carousel .carousel-item-prev.carousel-item-end + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
    }

    .service-carousel .carousel-item {
        max-width: 33.3333%;
    }
}

.carousel-controls {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
}

.carousel-control-prev,
.carousel-control-next {
    position: static;
    margin: 0 1rem;
}

.service-details img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 490px) {
    h1.title {
        font-size: 32px;
        text-align: center;
    }
}