/* CARD CAROUSEL */


#cardCarousel .carousel-inner {
    width: 70%;
    margin: auto;
    max-height: initial !important;
}

#cardCarousel .carousel-item {
    margin-top: 4rem;
}

.col-xl-4:nth-child(1) .exp-item-content {
    background-position-x: left;
}

.col-xl-4:nth-child(2) .exp-item-content {
    background-position-x: center;
}

.col-xl-4:nth-child(3) .exp-item-content {
    background-position-x: right;
}

.control-container {
    width: 3rem;
    height: 3rem;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 50%;
    background-color: #004987;
    aspect-ratio: 1 / 1;
}

.carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next, .carousel-item-next:not(.carousel-item-start) {
    transform: translateX(50%) !important;
}
.carousel-inner .carousel-item-left.active, .carousel-item-prev:not(.carousel-item-end), .active.carousel-item-start, .carousel-item-prev:not(.carousel-item-end) {
    transform: translateX(-50%) !important;
}
.carousel-item-next.carousel-item-start, .active.carousel-item-end {
    transform: translateX(0) !important;
}
.carousel-inner .carousel-item-prev, .carousel-item-prev:not(.carousel-item-end) {
    transform: translateX(-50%) !important;
}

#cardCarousel .carousel-item.active, #cardCarousel .carousel-item-start, #cardCarousel .carousel-item-next, #cardCarousel .carousel-item-prev {
    display: flex;
}

@media (max-width: 576px) {

    #cardCarousel .carousel-inner {
        width: 80%;
    }
    .carousel-item {
        margin-right: 0;
    }

    .exp-description {
        padding: 2rem;
    }

    .carousel-item {
        margin-right: 0;
    }
    .f-125 {
        font-size: 2rem;
    }
    .f-15 {
        font-size: 2rem;
    }

    .profile-pic {
        width: 12rem !important;
    }

    .carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next, .carousel-item-next:not(.carousel-item-start) {
        transform: translateX(100%) !important;
   }
    .carousel-inner .carousel-item-left.active, .carousel-item-prev:not(.carousel-item-end), .active.carousel-item-start, .carousel-item-prev:not(.carousel-item-end) {
        transform: translateX(-100%) !important;
   }
    .carousel-item-next.carousel-item-start, .active.carousel-item-end {
        transform: translateX(0) !important;
   }
    .carousel-inner .carousel-item-prev, .carousel-item-prev:not(.carousel-item-end) {
        transform: translateX(-100%) !important;
   }

}

@media (min-width: 990px) {
    #cardCarousel .carousel-inner {
        width: 70%;
    }

    .carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next, .carousel-item-next:not(.carousel-item-start) {
        transform: translateX(33.33333333333333333%) !important;
   }
    .carousel-inner .carousel-item-left.active, .carousel-item-prev:not(.carousel-item-end), .active.carousel-item-start, .carousel-item-prev:not(.carousel-item-end) {
        transform: translateX(-33.33333333333333333%) !important;
   }
    .carousel-item-next.carousel-item-start, .active.carousel-item-end {
        transform: translateX(0) !important;
   }
    .carousel-inner .carousel-item-prev, .carousel-item-prev:not(.carousel-item-end) {
        transform: translateX(-33.33333333333333333%) !important;
   }
    
}

@media (min-width:1200px) {
    #cardCarousel .carousel-inner {
        width: 100%;
    }

    .carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next, .carousel-item-next:not(.carousel-item-start) {
        transform: translateX(33.33333333333333333%) !important;
   }
    .carousel-inner .carousel-item-left.active, .carousel-item-prev:not(.carousel-item-end), .active.carousel-item-start, .carousel-item-prev:not(.carousel-item-end) {
        transform: translateX(-33.33333333333333333%) !important;
   }
    .carousel-item-next.carousel-item-start, .active.carousel-item-end {
        transform: translateX(0) !important;
   }
    .carousel-inner .carousel-item-prev, .carousel-item-prev:not(.carousel-item-end) {
        transform: translateX(-33.33333333333333333%) !important;
   }
   .carousel-control-next {
       right: -7rem !important;
   }
   .carousel-control-prev {
       left: -7rem !important;
   }
}

@media (min-width: 1400px) {
}