/*================================================= CAROUSEL CSS =====================================*/

.carousel{
    margin-top:10px;
    margin-bottom:10px;
    background:#000;
    overflow:hidden;
}

/*===================== FIXED HEIGHT =====================*/

.carousel-inner{
    height:600px;
}

.carousel-item{

    height:600px;

    position:relative;

    overflow:hidden;

    background:#000;

    display:flex;
    align-items:center;
    justify-content:center;

    padding-top:20px;
    padding-bottom:20px;
}

/*===================== IMAGE =====================*/

.carousel-item img.hero-slide{

    max-width:100%;
    max-height:100%;

    width:auto;
    height:auto;

    object-fit:contain;
    object-position:center center;

    display:block;

    margin:auto;
}

/*===================== DARK OVERLAY =====================*/

.carousel-item::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.35);

    z-index:1;

    pointer-events:none;
}

/*===================== CAPTION =====================*/

.carousel-caption{

    z-index:2;

    bottom:15%;
}

/*===================== TEXT ANIMATION =====================*/

.carousel-item h5,
.carousel-item p{

    opacity:0;

    transform:translateY(20px);
}

.carousel-item.active h5{

    animation:fadeUp 0.8s ease forwards;
}

.carousel-item.active p{

    animation:fadeUp 1s ease forwards;
}

/*===================== ANIMATION =====================*/

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(25px);
    }

    to{

        opacity:1;
        transform:translateY(0);
    }
}

/*===================== CONTROLS =====================*/

.carousel-control-prev,
.carousel-control-next,
.carousel-indicators{

    z-index:3;
}

/*===================== RESPONSIVE =====================*/

@media (max-width:992px){

    .carousel-inner,
    .carousel-item{

        height:400px;
    }
}

@media (max-width:768px){

    .carousel-inner,
    .carousel-item{

        height:300px;
    }

    .carousel-caption{

        bottom:10%;
    }

    .carousel-caption h5{

        font-size:1.2rem;
    }

    .carousel-caption p{

        font-size:0.9rem;
    }
}

@media (max-width:576px){

    .carousel-inner,
    .carousel-item{

        height:240px;
    }

    .carousel-caption{

        bottom:5%;
    }

    .carousel-caption h5{

        font-size:1rem;
    }

    .carousel-caption p{

        font-size:0.8rem;
    }
}