/* Mobile Slider Height Fix CSS */

/* Reduce slider height on mobile devices */
@media (max-width: 767px) {
    /* Main container adjustments */
    #heroCarousel .carousel-item {
        min-height: auto !important;
    }

    /* Reduce padding in the container */
    #heroCarousel .carousel-item .container {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    /* Adjust text sizes */
    #heroCarousel .display-4 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }

    /* Reduce paragraph text */
    #heroCarousel p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        max-height: 2.8rem !important;
    }

    /* Make button smaller */
    #heroCarousel .btn {
        padding: 0.4rem 1rem !important;
        font-size: 0.85rem !important;
    }

    /* Adjust image size */
    #heroCarousel .img-fluid {
        max-height: 150px !important;
        width: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* Make discount badge smaller */
    #heroCarousel .position-absolute {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.8rem !important;
    }

    /* Adjust spacing between elements */
    #heroCarousel .mb-4 {
        margin-bottom: 0.5rem !important;
    }

    /* Adjust the small text */
    #heroCarousel .small {
        font-size: 0.7rem !important;
    }

    /* Adjust row spacing */
    #heroCarousel .row {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Adjust carousel indicators */
    #heroCarousel .carousel-indicators {
        margin-bottom: 0 !important;
    }

    /* Adjust carousel controls */
    #heroCarousel .carousel-control-prev,
    #heroCarousel .carousel-control-next {
        width: 10% !important;
    }
}

/* Extra small devices (phones, 576px and down) */
@media (max-width: 576px) {
    /* Further reduce text sizes */
    #heroCarousel .display-4 {
        font-size: 1.5rem !important;
        margin-bottom: 5px !important;
    }

    /* Further reduce paragraph */
    #heroCarousel p {
        font-size: 0.8rem !important;
        -webkit-line-clamp: 2 !important;
        max-height: 2.4rem !important;
    }

    /* Further reduce image size */
    #heroCarousel .img-fluid {
        max-height: 120px !important;
    }

    /* Further reduce discount badge */
    #heroCarousel .discount-badge {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.7rem !important;
    }

    /* Adjust vertical spacing */
    #heroCarousel .carousel-item .container {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Make button smaller on mobile */
    #heroCarousel .btn-sm-mobile {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.75rem !important;
    }

    /* Reduce carousel height */
    #heroCarousel {
        max-height: 250px !important;
        overflow: hidden !important;
    }

    /* Adjust carousel indicators position */
    #heroCarousel .carousel-indicators {
        bottom: 0 !important;
    }

    /* Make carousel indicators smaller */
    #heroCarousel .carousel-indicators [data-bs-target] {
        width: 6px !important;
        height: 6px !important;
        margin-right: 3px !important;
        margin-left: 3px !important;
    }
}