.carousel .wave-animation {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 3;
    height: 120px;
}

.carousel .carousel-item{
    max-height: 800px;
    min-height: 800px;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    max-height: 800px;
    min-height: 800px;
    object-fit: cover;
}

/**** Carousel Caption ***/

.carousel-caption{
    text-align: start;
    bottom: 200px;
}

.carousel-caption h2 {
    font-family: 'Lilita One';
    font-size: 64px;
    color: var(--secondary);
    text-shadow: var(--bigShadow);
    margin-bottom: 20px;
}

.carousel-caption h2 span{
    color: var(--white);
    font-size: inherit;
    font-weight: 500;
    font-family: inherit;
}

.carousel-caption p{
    font-family: 'Lilita One';
    font-size: 40px;
    color: var(--white);
    text-shadow: var(--bigShadow);
    line-height: 45px;
}

.carousel-caption p span{
    color: var(--secondary);
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
}

.carousel-caption .btn-primary{
    margin-left: auto;
    display: block;
    background: var(--white);
    padding: 20px 100px;
    font-size: 22px;
    color: #004A98;
    font-weight: bold;
    border-radius: 30px;
    font-family: "Noto Sans";
    text-transform: none;
    box-shadow: var(--bigShadow);
    border: none;
    transition: all ease-in-out 200ms;
    width: fit-content;
}

.carousel-caption .btn-primary i{
    margin-left: 10px;
    font-size: inherit;
    color: inherit;
}

.carousel-caption .btn-primary:hover{
    background-color:#004A98 ;
    color: var(--white);
}

/**** Carousel Indicators ***/

.carousel-indicators{
    bottom: 130px;
    right: 15%;
    max-width: 1320px;
    display: flex;
    justify-content: start;
    margin-right: initial;
    margin-left: initial;
    left: 15%;
}

.carousel-indicators [data-mdb-target]{
    height: 18px;
    width: 18px;
    border-radius: 100%;
    opacity: 1;
    box-shadow: var(--bigShadow);
    border: none;
}
.carousel-indicators .active{
    background-color: var(--secondary);
    opacity: 1;
}

/**** Carousel Controls ***/

.carousel-control-next, .carousel-control-prev{
    height: fit-content;
    bottom: 100px;
    top: initial;
    padding: 20px;
    width: fit-content;
    opacity: 1;
    box-shadow: none;
    filter:drop-shadow(var(--bigShadow));
    transition: ease-in-out all 200ms;
}

.carousel-control-next i, .carousel-control-prev i{
    font-size: 60px;
    color: var(--white);
}

.carousel-control-next {
    right: 50px;
}

.carousel-control-prev {
    left: 50px;
}

.carousel-control-next:hover, .carousel-control-prev:hover{
    transform: scale(1.1);
    opacity: 1;
}

@media (max-width: 834px){
    .carousel-caption{
        width: 100%;
        right: initial;
        left: 0;
        padding: 20px;
    }
    .carousel-caption h2{
        font-size: var(--mobileXXL);
    }
    .carousel-caption p{
        font-size: var(--mobileXL);
    }
    .carousel-caption .btn-primary {
        margin-left: auto;
        display: block;
        background: var(--white);
        padding: 10px 50px;
        font-size: 16px;
        color: #004A98;
        font-weight: bold;
        border-radius: 30px;
        font-family: "Noto Sans";
        text-transform: none;
        box-shadow: var(--bigShadow);
        border: none;
        transition: all ease-in-out 200ms;
        width: fit-content;
    }
    .carousel-control-next, .carousel-control-prev{
        display: none;
    }
    .carousel-indicators{
        right: initial;
        width: 100%;
        left: 0;
        padding: 20px;
    }

    .carousel .carousel-item{
        max-height: 600px;
        min-height: 600px;
    }
    .carousel-item img {
        width: 100%;
        height: 100%;
        max-height: 600px;
        min-height: 600px;
        object-fit: cover;
    }
}

@media (max-width: 600px){
    .carousel-caption p{
        font-size: var(--mobileLG);
    line-height: 26px;
    }
    .carousel-caption .btn-primary{
        padding: 10px;
    }
}