/* ===================== PREMIUM CAROUSEL ===================== */

#landingCarousel{
    position:relative;
    overflow:hidden;
    border-radius:4px;
    background:#fff;
    box-shadow:
        0 8px 25px rgba(0,0,0,.12),
        0 20px 45px rgba(0,0,0,.08);
}

/* ===================== Slide ===================== */

#landingCarousel .carousel-item{
    position:relative;
    transition:transform .7s ease-in-out;
}

/* ===================== Image ===================== */

.carousel-img{
    width:100%;
    height:420px;
    object-fit:cover;
    object-position:center;
    display:block;
    user-select:none;
}

/* Image Zoom Effect */
.carousel-item.active .carousel-img{
    animation:zoomIn 6s ease;
}

@keyframes zoomIn{
    from{ transform:scale(1); }
    to{ transform:scale(1.05); }
}

/* ===================== Overlay ===================== */

.carousel-item::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.28) 0%,
        rgba(0,0,0,.10) 40%,
        rgba(0,0,0,0) 70%
    );
}

/* ===================== Caption ===================== */

.carousel-caption{
    position:absolute;
    z-index:2;

    left:8%;
    right:8%;
    bottom:10px;

    padding:8px 12px;

    background:rgba(0,0,0,.08);

    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);

    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;

    box-shadow:0 4px 15px rgba(0,0,0,.15);

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

/* Caption Text */
.carousel-caption h5{
    margin:0;
    color:#fff;
    font-size:1.1rem;
    font-weight:600;
    line-height:1.45;

    text-shadow:
        0 2px 6px rgba(0,0,0,.75),
        0 0 10px rgba(0,0,0,.35);
}

/* Caption Animation */
@keyframes captionFadeUp{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.carousel-item.active .carousel-caption{
    animation:captionFadeUp .7s ease forwards;
    animation-delay:.2s;
}

/* ===================== Indicators ===================== */

.carousel-indicators{
    margin-bottom:12px;
}

.carousel-indicators [data-bs-target]{
    width:10px;
    height:10px;
    margin:0 4px;

    border:none;
    border-radius:50%;

    background:#fff;
    opacity:.45;

    transition:.3s;
}

.carousel-indicators .active{
    width:28px;
    border-radius:30px;
    opacity:1;
}

/* ===================== Controls ===================== */

.carousel-control-prev,
.carousel-control-next{
    width:8%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
    width:44px;
    height:44px;

    border-radius:50%;
    background-size:55%;
    background-color:rgba(0,0,0,.28);

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    transition:.3s;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon{
    transform:scale(1.08);
    background-color:rgba(0,0,0,.50);
}

/* ===================== Tablet ===================== */

@media (max-width:992px){
    .carousel-img{
        height:320px;
    }

    .carousel-caption{
        left:6%;
        right:6%;
    }

    .carousel-caption h5{
        font-size:1rem;
    }
}

/* ===================== Mobile ===================== */

@media (max-width:768px){
    .carousel-img{
        height:220px;
    }

    .carousel-caption{
        left:10px;
        right:10px;
        bottom:10px;

        padding:7px 10px;

        background:rgba(0,0,0,.10);
        border-radius:8px;
    }

    .carousel-caption h5{
        font-size:.9rem;
        line-height:1.35;
    }

    .carousel-control-prev,
    .carousel-control-next{
        width:12%;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon{
        width:36px;
        height:36px;
    }

    .carousel-indicators{
        margin-bottom:8px;
    }

    .carousel-indicators [data-bs-target]{
        width:8px;
        height:8px;
        margin:0 3px;
    }

    .carousel-indicators .active{
        width:22px;
    }
}

/* ===================== Small Mobile ===================== */

@media (max-width:480px){
    #landingCarousel{
        border-radius:4px;
    }

    .carousel-img{
        height:180px;
    }

    .carousel-caption{
        left:8px;
        right:8px;
        bottom:8px;

        padding:6px 8px;

        background:rgba(0,0,0,.12);
    }

    .carousel-caption h5{
        font-size:.8rem;
        line-height:1.3;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon{
        width:30px;
        height:30px;
    }
}