/* Hero Section Background Images */

/* Slide 1 - Hajj and Umrah */
.carousel-item:nth-child(1) {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/VISA HAJ OMARA.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Slide 2 - Work and Family Visas */
.carousel-item:nth-child(2) {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/photo-1483450388369-9ed95738483c.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Slide 3 - Visa Sales and Tickets */
.carousel-item:nth-child(3) {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/travel1679769182.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Slide 4 - Passport Services */
.carousel-item:nth-child(4) {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/givepesporrt.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Slide 5 - Company Banner */
.carousel-item:nth-child(5) {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/banner-small-13-min1679976141.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* General carousel styling */
.carousel-item {
    height: 70vh !important;
    min-height: 500px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.carousel-caption {
    position: static !important;
    padding: 0 !important;
    text-align: center !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .carousel-item {
        height: 60vh !important;
        min-height: 400px !important;
    }
}

@media (max-width: 576px) {
    .carousel-item {
        height: 50vh !important;
        min-height: 350px !important;
    }
}