body {
}

.carousel-caption {
    left: 10% !important;
    top: calc(65vh/3);
    padding-top: 0px !important;
    text-align: left !important;
    font-size: 1.3rem;
    font-weight: 700 !important;
}

.RTL .carousel-caption {
    right: 10% !important;
    text-align: right !important;
}

.carousel-indicators [data-bs-target] {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50%;
}

.carousel-caption h2 {
    margin-bottom: 2rem;
}

.carousel-item {
    width: 100%;
    height: 65vh;
}

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

@media(max-width:1440px) and (min-width: 1024px) {
    .carousel-item {
        width: 100%;
        height: 60vh;
    }
    .carousel-caption {
        top: calc(60vh/3);
    }
}

@media(max-width:1023px) and (min-width: 768px) {
    .carousel-item {
        width: 100%;
        height: 50vh;
    }
    .carousel-caption {
        top: calc(50vh/3);
    }
}
@media(max-width:767px) and (min-width: 575px) {
    .carousel-caption {
        top:calc(35vh/3);
        font-size: 1rem;
    }

        .carousel-caption h2 {
            margin-bottom: 0.7rem;
        }
}

@media(max-width:767px) and (min-width: 425px) {
    .carousel-item {
        width: 100%;
        height: 35vh;
    }
    .carousel-indicators [data-bs-target] {
        width: 15px !important;
        height: 15px !important;
    }
}

@media (max-width: 575px) {
    .carousel-caption {
        right: 12% !important;
        font-size: 0.75rem;
        top: calc(35vh/3);
    }

        .carousel-caption h2 {
            font-size: 1rem !important;
            margin-bottom: 0.5rem;
        }

    .carousel-indicators {
        margin-bottom: 0rem;
    }
}

@media (max-width: 425px) {
    .carousel-item {
        width: 100%;
        height: 25vh;
    }
    .carousel-indicators [data-bs-target] {
        width: 13px !important;
        height: 13px !important;
        margin: 0rem 0.3rem;
    }

    .carousel-caption {
        left: 12% !important;
        top: calc(25vh/4);
        font-size: 0.65rem;
    }

    .RTL .carousel-caption {
        right: 12% !important;
    }

        .carousel-caption h2 {
            font-size: 0.9rem !important;
            margin-bottom: 0.5rem;
        }
}

@media (max-width: 320px) {
    .carousel-caption {
        font-size: 0.5rem;
    }
}