.mainbanner { width: 100%; height: 100vh; overflow: hidden; position: relative;}
.banner-row { width: 100%; position: relative; }
.banner-row:before , .banner-row:after { content: ''; width: 100%; height: 40%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); position: absolute; top: 0; left: 0; right: 0; z-index: 2; } 
.banner-row:after { height: 40%; top: auto; bottom: 0; transform: rotate(180deg);}
.banner-row > .img-fluid { width: 100%; height: 100vh; object-fit: cover; }
.mobileban { display: none; }
.bannercontent { padding: 0 13px; }
.bannerdetails { position: absolute; left: 0; right: 0; bottom: 34px; }
.bannerdetails h2 { font-size: 25px; color: #fff; font-weight: 500; margin: 0 0 20px; }
.bannerdetails p { font-size: 12.5px; color: #fff; margin: 0 0 25px; } 
.btn.bannerbutton { background: transparent; border: 1px solid #fff; border-radius: 0; min-width: 100px; box-shadow: none; outline: none; color: #fff; font-size: 12.5px; padding:5px 10px; white-space: nowrap; position: relative; z-index: 99;}
.btn.bannerbutton:hover { background:#ffffff; border-color:#ffffff; color:#000000;  }
.homrbanner  .slick-dots { bottom: 30px; display: inline-block; width: 100%; padding: 0 30px; text-align: right; margin: 0 auto; left: 0; right: 0; z-index: 9;} 
.homrbanner .slick-dots li { width: auto; height: auto; } 
.homrbanner .slick-dots li button { padding: 0; width: 35px; height: 1.5px; background: rgba(255,255,255,0.5); } 
.homrbanner .slick-dots li button:before { display: none; }
.homrbanner .slick-dots li.slick-active button, .homrbanner .slick-dots li button:hover { background: #fff; }


/*-------------------------------- Responsive Media Query --------------------------------*/
@media (min-width: 1300px){
.homrbanner  .slick-dots { max-width: 1260px;}

}


@media (min-width: 1600px){
.bannerdetails h2 { font-size: 28px; }
.homrbanner  .slick-dots { max-width: 1480px; }

}


@media (min-width: 1900px){
.bannerdetails h2 { font-size: 30px; }
.bannerdetails p { margin: 0 0 25px; }
.homrbanner  .slick-dots { max-width: 1620px; padding: 0 20px;}
.homrbanner .slick-dots li button { height: 2px; }


}



@media (min-width: 2200px){
.bannerdetails { bottom: 54px; }
.bannerdetails h2 { font-size: 40px; }
.bannerdetails p { font-size: 20px; }
.btn.bannerbutton { font-size: 16px; }
.homrbanner .slick-dots { bottom: 50px; max-width: 2120px; }
.homrbanner .slick-dots li button { width: 50px;  height: 3px; }


}


@media (min-width: 2600px){
.bannercontent { padding: 0 25px; }
.bannerdetails h2 { font-size: 50px; }
.bannerdetails p { font-size: 22px; }
.btn.bannerbutton { font-size: 20px; min-width: 200px; }
.homrbanner  .slick-dots { max-width: 2420px;}
.homrbanner .slick-dots li button { width: 60px; }

}


@media (min-width: 3000px){
.homrbanner  .slick-dots { max-width: 2860px;}
.bannerdetails h2 { font-size: 60px; }
.bannerdetails p { font-size: 26px; }
.btn.bannerbutton { font-size: 25px; }


}


@media (max-width: 1199px){
.mainbanner { height: inherit; }
.banner-row > .img-fluid { max-height: 650px; }
.homrbanner  .slick-dots { max-width: 960px;}

}


@media (max-width: 991px){
.bannerdetails h2 { font-size: 35px; margin: 0 0 15px; }
.homrbanner  .slick-dots { max-width: 720px;}

}


@media (max-width: 860px){
.mainbanner { position:relative; }
.bannercontent { padding: 0; }
.banner-row:before , .banner-row:after { height: 30%; }
.banner-row:after { content: ''; background: linear-gradient(180deg, #000000 20%, rgba(0, 0, 0, 0) 100%); width: 100%; height: 40%; position: absolute; bottom: 40px; left: 0; right: 0; transform: rotate(180deg); }
.banner-row > .img-fluid { height: 100%; min-height: 550px; padding-bottom: 70px; }
.desktopban { display: none; }
.mobileban { display: block; }
.bannerdetails { bottom: 42px; }
.bannerdetails h2 { font-size: 40px; }
/*.bannerdetails h2 br { display: none; }*/
.bannerdetails p { font-size: 16px; margin: 0 0 17px;}
.homrbanner .slick-dots li button { width: 30px; height: 2px; }
.homrbanner  .slick-dots {max-width: 750px; padding: 0 40px; bottom: 38px;}

}





@media (max-width: 700px){
.homrbanner  .slick-dots { padding: 0 30px; }
.bannerdetails h2 { font-size: 30px; }
.bannerdetails p { font-size: 14px; }
.bannerdetails[data-aos^=fade][data-aos^=fade].aos-animate { opacity: 0.85; }
.btn.bannerbutton { padding: 5px 10px; min-width: 100px; }

}


@media (max-width: 500px){ 
.bannerdetails h2 { font-size: 25px; } 

}


@media (max-width: 400px){
.homrbanner  .slick-dots { padding: 0 25px; }
.bannerdetails h2 { font-size: 22px; margin: 0 0 10px; }
.bannerdetails p { font-size: 13px; margin: 0 0 12px; }

}