@media only screen and (max-width: 2560px) {
    /* Your CSS for 4k desktop screens */
    #heroCarousel .carousel-item {
        height: 86vh;
    }
    #customCarousel .carousel-item {
        height: 45vh;
    }
    .carousel-fade .carousel-item {
        height: 40vh;
    }
}
/* 1920 x 1080 (Full HD) */
@media only screen and (max-width: 1920px) {
    /* Your CSS for large desktop screens */
    #heroCarousel .carousel-item {
        height: 69.5vh;
        height: 75vh;
    }
    #customCarousel .carousel-item {
        height: 32vh;
    }
    .carousel-fade .carousel-item {
        height: 36.5vh;
        height: 42vh;
    }
    .swiper#blog-slider .banner-hover .banner-img img {
        height: 300px;
    }
}

/* 1680 x 1050 */
@media only screen and (max-width: 1680px) {
    /* Your CSS for 1680 x 1050 screens */
    #heroCarousel .carousel-item {
        height: 63vh;
    }
    #customCarousel .carousel-item {
        height: 28.5vh;
    }
    .carousel-fade .carousel-item {
        height: 33.5vh;
    }
    .swiper#blog-slider .banner-hover .banner-img img {
        height: 215px;
    }
}

/* 1600 x 900 */
@media only screen and (max-width: 1600px) {
    /* Your CSS for 1600 x 900 screens */
    #heroCarousel .carousel-item {
        height: 75vh;
    }
    #customCarousel .carousel-item {
        height: 37.75vh;
    }
    .carousel-fade .carousel-item {
        height: 36vh;
    }
    .swiper#blog-slider .banner-hover .banner-img img {
        height: 225px;
    }
}

@media (max-width: 1536px) and (max-height: 864px) {
    /* 1920 x 1080 - 125% scaling */
    #heroCarousel .carousel-item {
        height: 70vh;
        height: 75vh;
        height: 80vh;
    }
    #customCarousel .carousel-item {
        height: 34.25vh;
        height: 37.75vh;
        height: 36.75vh;
    }
    .carousel-fade .carousel-item {
        height: 34.25vh;
        height: 36vh;
        height: 42vh;
    }
    
    .swiper#blog-slider .banner-hover .banner-img img {
        height: 245px;
    }

}

/* 1440 x 900 */
@media only screen and (max-width: 1440px) {
    /* Your CSS for 1440 x 900 screens */
    #heroCarousel .carousel-item {
        height: 70vh;
    }
    #customCarousel .carousel-item {
        height: 31.75vh;
    }
    .carousel-fade .carousel-item {
        height: 37vh;
    }
    .swiper#blog-slider .banner-hover .banner-img img {
        height: 225px;
    }
}

/* 1400 x 1050 */
@media only screen and (max-width: 1400px) {
    /* Your CSS for 1400 x 1050 screens */
    #heroCarousel .carousel-item {
        height: 51.5vh;
    }
    #customCarousel .carousel-item {
        height: 24.5vh;
    }
    .carousel-fade .carousel-item {
        height: 26vh;
    }
    .swiper#blog-slider .banner-hover .banner-img img {
        height: 230px;
    }
}

/* 1366 x 768 (Most Common Laptops) */
@media only screen and (max-width: 1366px) {
    /* Your CSS for 1366 x 768 screens */
    #heroCarousel .carousel-item {
        height: 80vh;
    }
    #customCarousel .carousel-item {
        height: 36.5vh;
        height: 35.25vh;
    }
    .carousel-fade .carousel-item {
        height: 36.5vh;
        height: 43vh;
    }
    
    .swiper#blog-slider .banner-hover .banner-img img {
        height: 197px;
    }
}

/* 1360 x 768 */
@media only screen and (max-width: 1360px) {
    /* Your CSS for 1360 x 768 screens */
    #heroCarousel .carousel-item {
        height: 70vh;
        height: 79.5vh;
    }
    #customCarousel .carousel-item {
        height: 35vh;
    }
    .carousel-fade .carousel-item {
        height: 34vh;
        height: 42.5vh;
    }
    .swiper#blog-slider .banner-hover .banner-img img {
        height: 202px;
    }
}


/* 1280 x 768 */
@media only screen and (max-width: 1280px) and (min-height: 600px) {

    /* Your CSS for 1280 x 800 screens */
    
    #heroCarousel .carousel-item {
        height: 100vh;
    }
    #customCarousel .carousel-item {
        height: 42.75vh;
    }
    .carousel-fade .carousel-item {
        height: 55vh;
    }
    .swiper#blog-slider .banner-hover .banner-img img {
        height: 303px;
    }
}


/* 1280 x 768 */
@media only screen and (max-width: 1280px) and (min-height: 768px) {

    /* Your CSS for 1280 x 800 screens */
    
    #heroCarousel .carousel-item {
        height: 64vh;
    }
    #customCarousel .carousel-item {
        height: 37.25vh;
    }
    .carousel-fade .carousel-item {
        height: 40.5vh;
    }
    .swiper#blog-slider .banner-hover .banner-img img {
        height: 195px;
    }
}
/* 1280 x 800 */
@media only screen and (max-width: 1280px) and (min-height: 800px) {

    /* Your CSS for 1280 x 800 screens */
    
    #heroCarousel .carousel-item {
        height: 64vh;
    }
    #customCarousel .carousel-item {
        height: 31.25vh;
    }
    .carousel-fade .carousel-item {
        height: 31.5vh;
    }
    .swiper#blog-slider .banner-hover .banner-img img {
        height: 217px;
    }
}

/* 1280 x 960 */
@media only screen and (max-width: 1280px) and (min-height: 960px) {
    /* Your CSS for 1280 x 960 screens */
    
    #heroCarousel .carousel-item {
        height: 53.15vh;
    }
    #customCarousel .carousel-item {
        height: 25.5vh;
    }
    .carousel-fade .carousel-item {
        height: 26.5vh;
    }
    .swiper#blog-slider .banner-hover .banner-img img {
        height: 215px;
    }
}


/* 1280 x 1024 */
@media only screen and (max-width: 1280px) and (min-height: 1024px) {
    /* Your CSS for 1280 x 1024 screens */
    
    #heroCarousel .carousel-item {
        height: 49.5vh;
    }
    #customCarousel .carousel-item {
        height: 24.25vh;
    }
    .carousel-fade .carousel-item {
        height: 24.25vh;
    }
    .swiper#blog-slider .banner-hover .banner-img img {
        height: 212px;
    }
}
/* 1280 x 720 */
@media only screen and (max-width: 1280px) and (max-height: 720px) {
    .swiper#blog-slider .banner-hover .banner-img img {
        height: 145px;
    }
}
/* 1024 x 768 (Standard Laptops) */
@media only screen and (max-width: 1024px) {
    /* Your CSS for 1024 x 768 screens */
    #heroCarousel .carousel-item {
        height: 50vh;
    }
    #heroCarousel .carousel-item {
        height: 45vh;
    }
    #customCarousel .carousel-item {
        height: 35vh;
    }
    .carousel-fade .carousel-item {
        height: 35vh;
    }
    .swiper#blog-slider .banner-hover .banner-img img {
        height: 260px;
    }
}

@media only screen and (max-width: 1024px) and (max-height: 1366px) {
    /* Your CSS for small notebooks */
    #heroCarousel .carousel-item {
        height: 50vh;
    }
    #customCarousel .carousel-item {
        height: 18vh;
    }
    .carousel-fade .carousel-item {
        height: 18vh;
    }
}
@media only screen and (max-width: 1024px) and (max-height: 768px) {
    /* Your CSS for small notebooks */
    #heroCarousel .carousel-item {
        height: 85vh;
        height: 100vh;
    }
    #customCarousel .carousel-item {
        height: 31vh;
        height: 38vh;
    }
    .carousel-fade .carousel-item {
        height: 31vh;
        height: 38vh;
    }
}
/* 1024 x 600 (Small Laptops or Notebooks) */
@media only screen and (max-width: 1024px) and (max-height: 600px) {
    /* Your CSS for small notebooks */
    #heroCarousel .carousel-item {
        height: 100%;
    }
    #customCarousel .carousel-item {
        height: 40vh;
    }
    .carousel-fade .carousel-item {
        height: 40vh;
    }
}

/* 991px and below (Tablets like iPad, small laptops) */
@media only screen and (max-width: 991px) {
    /* Your CSS for tablets */
    #heroCarousel .carousel-item {
        height: 35vh;
    }
    #customCarousel .carousel-item {
        height: 40vh;
    }
    .carousel-fade .carousel-item {
        height: 40vh;
    }
}
@media only screen and (max-width: 912px) and (max-height: 1368px) {
    /* Your CSS for small notebooks */
    #heroCarousel .carousel-item {
        height: 45vh;
    }
    #customCarousel .carousel-item {
        height: 31vh;
    }
    .carousel-fade .carousel-item {
        height: 35vh;
    }
}
@media only screen and (max-width: 853px) and (max-height: 1280px) {
    #heroCarousel .carousel-item {
        height: 43vh;
    }
}
@media only screen and (max-width: 820px) and (max-height: 1180px) {
    /* Your CSS for small notebooks */
    #heroCarousel .carousel-item {
        height: 45vh;
    }
    #customCarousel .carousel-item {
        height: 30vh;
    }
    .carousel-fade .carousel-item {
        height: 34vh;
    }
}
@media only screen and (max-width: 800px) and (max-height: 1280px) {
    /* Your CSS for small notebooks */
    #heroCarousel .carousel-item {
        height: 42vh;
    }
    #customCarousel .carousel-item {
        height: 28vh;
    }
    .carousel-fade .carousel-item {
        height: 32vh;
    }
}

@media only screen and (max-width: 772px) and (max-height: 1600px) {
    #heroCarousel .carousel-item {
        height: 30vh;
    }

}
/* 768 x 1024 (iPads and Medium Tablets) */
@media only screen and (max-width: 768px) {
    /* Your CSS for iPads and tablets */
    #heroCarousel .carousel-item {
        height: 42vh;
    }
    #customCarousel .carousel-item {
        height: 30vh;
    }
    .carousel-fade .carousel-item {
        height: 37vh;
    }
}

@media only screen and (max-width: 768px) and (max-height: 1024px) {
    #heroCarousel .carousel-item {
        height: 50vh;
    }
}

@media only screen and (max-width: 720px) and (max-height: 1600px) {
    #heroCarousel .carousel-item {
        height: 28vh;
    }
    #customCarousel .carousel-item {
        height: 18vh;
    }
    .carousel-fade .carousel-item {
        height: 22vh;
    }

}
@media only screen and (max-width: 720px) and (max-height: 1200px) {
    #heroCarousel .carousel-item {
        height: 37vh;
    }
    #customCarousel .carousel-item {
        height: 25vh;
    }
    .carousel-fade .carousel-item {
        height: 28vh;
    }

}

@media only screen and (max-width: 712px) and (max-height: 1138px) {
    /* Your CSS for small notebooks */
    #heroCarousel .carousel-item {
        height: 42vh;
    }
    #customCarousel .carousel-item {
        height: 25vh;
    }
    .carousel-fade .carousel-item {
        height: 31vh;
    }
}

/* 600 x 800 (Small Tablets, Kindle) */
@media only screen and (max-width: 600px) {
    /* Your CSS for small tablets */
    .carousel-caption-left {
        max-width: 95%;
    }
}
@media only screen and (max-width: 600px) and (max-height: 1024px) {
    /* Your CSS for small tablets */
    #heroCarousel .carousel-item {
        height: 35vh;
    }
    #customCarousel .carousel-item {
        height: 25vh;
    }
    .carousel-fade .carousel-item {
        height: 30vh;
    }
}
@media only screen and (max-width: 600px) and (max-height: 960px) {
    /* Your CSS for small tablets */
    #heroCarousel .carousel-item {
        height: 42vh;
    }
    #customCarousel .carousel-item {
        height: 25vh;
    }
    .carousel-fade .carousel-item {
        height: 30vh;
    }
}
@media only screen and (max-width: 600px) and (max-height: 800px) {
    /* Your CSS for small tablets */
    #heroCarousel .carousel-item {
        height: 50vh;
    }
    #customCarousel .carousel-item {
        height: 30vh;
    }
    .carousel-fade .carousel-item {
        height: 36vh;
    }
}


/* 576px and below (Large Phones, Phablets) */
@media only screen and (max-width: 576px) {
    /* Your CSS for large mobile devices */
    #heroCarousel .carousel-item {
        height: 30vh;
    }
    #customCarousel .carousel-item {
        height: 25vh;
    }
    .carousel-fade .carousel-item {
        height: 25vh;
    }
}

@media only screen and (max-width: 540px) {
    /* Your CSS for large mobile devices */
    #heroCarousel .carousel-item {
        height: 39vh;
    }
    #customCarousel .carousel-item {
        height: 35vh;
    }
    .carousel-fade .carousel-item {
        height: 35vh;
    }
}
@media only screen and (max-width: 540px) and (max-height: 720px) {
    #heroCarousel .carousel-item {
        height: 50vh;
    }
}
@media only screen and (max-width: 520px) {
    /* Your CSS for large mobile devices */
    #heroCarousel .carousel-item {
        height: 32vh;
    }
}

@media only screen and (max-width: 500px) {
    /* Your CSS for large mobile devices */
    #heroCarousel .carousel-item {
        height: 27vh;
    }
}

/* 480px and below (Medium Phones) */
@media only screen and (max-width: 480px) {
    /* Your CSS for medium phones */
    #heroCarousel .carousel-item {
        height: 25vh;
    }
    #customCarousel .carousel-item {
        height: 30vh;
    }
    .carousel-fade .carousel-item {
        height: 30vh;
    }
    .carousel-caption-left h2 {
        font-size: 20px;
    }
    .carousel-caption-left p {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 480px) and (max-height: 1040px) {
    #heroCarousel .carousel-item {
        height: 27vh;
    }
    #customCarousel .carousel-item {
        height: 18vh;
    }
    .carousel-fade .carousel-item {
        height: 25vh;
    }

}

@media only screen and (max-width: 480px) and (max-height: 854px) {
    #heroCarousel .carousel-item {
        height: 36vh;
    }
    #customCarousel .carousel-item {
        height: 25vh;
    }
    .carousel-fade .carousel-item {
        height: 27vh;
    }

}
@media only screen and (max-width: 430px) {
    #heroCarousel .carousel-item {
        height: 23vh;
    }
    #customCarousel .carousel-item {
        height: 25vh;
    }
    .carousel-fade .carousel-item {
        height: 22vh;
    }

}

@media only screen and (max-width: 430px) and (max-height: 932px) {
    #heroCarousel .carousel-item {
        height: 30vh;
    }
}
@media only screen and (max-width: 425px) {
    /* Your CSS for medium phones */
    #heroCarousel .carousel-item {
        height: 27vh;
    }
    #customCarousel .carousel-item {
        height: 30vh;
    }
    .carousel-fade .carousel-item {
        height: 35vh;
    }
}


/* 414px and below (iPhone 12 Pro Max, Galaxy S21 Ultra, etc.) */
@media only screen and (max-width: 414px) {
    /* Your CSS for large modern phones */
    #heroCarousel .carousel-item {
        height: 32vh;
    }
    #customCarousel .carousel-item {
        height: 20vh;
    }
    .carousel-fade .carousel-item {
        height: 22vh;
    }
}

@media only screen and (max-width: 414px) and (max-height: 896px) {
    #heroCarousel .carousel-item {
        height: 27vh;
    }
}
@media only screen and (max-width: 414px) and (max-height: 736px) {
    #heroCarousel .carousel-item {
        height: 36vh;
    }
    #customCarousel .carousel-item {
        height: 25vh;
    }
    .carousel-fade .carousel-item {
        height: 27vh;
    }
}

@media only screen and (max-width: 412px) and (max-height: 915px) {
    #heroCarousel .carousel-item {
        height: 29vh;
    }
    #customCarousel .carousel-item {
        height: 22vh;
    }
    .carousel-fade .carousel-item {
        height: 22vh;
    }

}
@media only screen and (max-width: 412px) and (max-height: 823px) {
    #heroCarousel .carousel-item {
        height: 32vh;
    }
    #customCarousel .carousel-item {
        height: 22vh;
    }
    .carousel-fade .carousel-item {
        height: 24vh;
    }

}

@media only screen and (max-width: 412px) and (max-height: 732px) {
    #heroCarousel .carousel-item {
        height: 40vh;
    }
    #customCarousel .carousel-item {
        height: 25vh;
    }
    .carousel-fade .carousel-item {
        height: 30vh;
    }

}
@media only screen and (max-width: 411px) and (max-height: 731px) {
    #heroCarousel .carousel-item {
        height: 35vh;
    }
}

@media only screen and (max-width: 384px) and (max-height: 640px) {
    #heroCarousel .carousel-item {
        height: 40vh;
    }
    #customCarousel .carousel-item {
        height: 25vh;
    }
    .carousel-fade .carousel-item {
        height: 29vh;
    }

}


/* 375px and below (iPhone X, iPhone 11, etc.) */
@media only screen and (max-width: 375px) {
    /* Your CSS for smaller modern phones */
    #heroCarousel .carousel-item {
        height: 36vh;
    }
    #customCarousel .carousel-item {
        height: 25vh;
    }
    .carousel-fade .carousel-item {
        height: 27vh;
    }
}

@media only screen and (max-width: 375px) and (max-height: 812px) {
    #heroCarousel .carousel-item {
        height: 30vh;
    }
    #customCarousel .carousel-item {
        height: 20vh;
    }
    .carousel-fade .carousel-item {
        height: 22vh;
    }

}

@media only screen and (max-width: 375px) and (max-height: 667px) {
    #heroCarousel .carousel-item {
        height: 35vh;
    }
    #customCarousel .carousel-item {
        height: 25vh;
    }
    .carousel-fade .carousel-item {
        height: 27vh;
    }

}

/* 360px and below (Small Android Phones, etc.) */
@media only screen and (max-width: 360px) {
    /* Your CSS for smaller modern phones */
    #heroCarousel .carousel-item {
        height: 25vh;
    }
    #customCarousel .carousel-item {
        height: 20vh;
    }
    .carousel-fade .carousel-item {
        height: 18vh;
    }
}


@media only screen and (max-width: 360px) and (max-height: 740px) {
    /* Less specific - applies to devices up to 740px height */
    #heroCarousel .carousel-item {
        height: 31vh;
    }
    #customCarousel .carousel-item {
        height: 22vh;
    }
    .carousel-fade .carousel-item {
        height: 23vh;
    }
}

@media only screen and (max-width: 360px) and (max-height: 640px) {
    /* More specific - applies to devices up to 640px height */
    #heroCarousel .carousel-item {
        height: 36vh;
    }
    #customCarousel .carousel-item {
        height: 28vh;
    }
    .carousel-fade .carousel-item {
        height: 27vh;
    }
}

@media only screen and (max-width: 353px) {
    /* Your CSS for old iPhones or small devices */
    #heroCarousel .carousel-item {
        height: 30vh;
    }
}

@media only screen and (max-width: 344px) and (max-height: 882px) {
    #heroCarousel .carousel-item {
        height: 25vh;
    }
}


/* 320px and below (Old iPhones, Small Android Phones) */
@media only screen and (max-width: 320px) {
    /* Your CSS for old iPhones or small devices */
    #heroCarousel .carousel-item {
        height: 40vh;
    }
    #customCarousel .carousel-item {
        height: 35vh;
    }
    .carousel-fade .carousel-item {
        height: 28vh;
    }
}
@media only screen and (max-width: 320px) and (max-height: 658px) {
    /* More specific - applies to devices up to 640px height */
    #heroCarousel .carousel-item {
        height: 30vh;
    }
    #customCarousel .carousel-item {
        height: 30vh;
    }
    .carousel-fade .carousel-item {
        height: 23vh;
    }
}
@media only screen and (max-width: 320px) and (max-height: 568px) {
    /* More specific - applies to devices up to 640px height */
    #heroCarousel .carousel-item {
        height: 35vh;
    }
    #customCarousel .carousel-item {
        height: 30vh;
    }
    .carousel-fade .carousel-item {
        height: 26vh;
    }
}
@media only screen and (max-width: 320px) and (max-height: 533px) {
    #heroCarousel .carousel-item {
        height: 40vh;
    }
    #customCarousel .carousel-item {
        height: 35vh;
    }
    .carousel-fade .carousel-item {
        height: 28vh;
    }
}
@media only screen and (max-width: 320px) and (max-height: 480px) {
    #heroCarousel .carousel-item {
        height: 42vh;
    }
    #customCarousel .carousel-item {
        height: 35vh;
    }
    .carousel-fade .carousel-item {
        height: 31vh;
    }
}