/* Carousel base class */
.carousel {
  margin-bottom: 0;
}

.carousel-inner{position:relative;width:100%;overflow:hidden;}
.carousel-inner > .item{position:relative;display:none;-webkit-transition:0.6s ease-in-out left;transition:0.6s ease-in-out left;}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img{display:block;height:auto;max-width:100%;line-height:1;}

/* Declare heights because of positioning of img element */
.carousel-inner > .carousel-item {position:relative;width:100%;overflow:hidden;}
.carousel-inner > .carousel-item::before {position: absolute;content: ''; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, 0) ;}
.carousel-inner > .carousel-item img { display: block;
    height: auto;
    max-width: 100%;
    line-height: 1;
}

.carousel-inner > .carousel-item img,
.carousel-inner > .carousel-item > a > img{display:block;height:auto;max-width:100%;line-height:1; vertical-align:middle; border:0;}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {position: absolute; top:60%; left:10%; right:0; bottom:0 !important; height: auto; width:50%; color: var(--white-color); text-align: center; transform: translateY(-50%); padding-bottom: 0 !important; padding-top: 0 !important; }

.carousel-caption h1 {font-size:50px; line-height:55px; color:var(--white-color); margin:0; padding:0;}
.carousel-caption p {color:var(--white-color); font-size:15px; line-height:20px;}

.carousel-caption > a.btn-default{ font-size:16px; font-weight:700; width:auto; text-transform: capitalize; padding:15px 30px; line-height:25px; color:var(--white-color); background:none; letter-spacing:var(--letter-spacing-1); margin-top:15px; margin-bottom:0; margin-left:0; margin-right:0; border:2px solid var(--white-color); border-radius:5px; transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}
.carousel-caption > a.btn-default:hover, .carousel-caption > a.btn-default:active {background:var(--white-color); color:var(--black-color); border:2px solid var(--white-color); transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s; } 

.carousel-control-prev .carousel-control-prev-icon, .carousel-control-next .carousel-control-next-icon {position:absolute; top:50%; bottom:0; z-index:1; display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center; -ms-flex-pack:center; justify-content:center; width:50px; height:50px; line-height:50px; color:var(--white-color); font-size:20px; text-align:center; opacity:1; transition:opacity .15s ease; background:var(--primary-color); border-radius:50%;}

.carousel-control-prev:hover .carousel-control-prev-icon:hover, .carousel-control-prev:focus .carousel-control-prev-icon:focus,
.carousel-control-next:hover .carousel-control-next-icon:hover, .carousel-control-next:focus .carousel-control-next-icon:focus
{color:var(--white-color); background:var(--black-color); opacity:1;}

@media only screen and ( min-width: 768px) and ( max-width: 980px ) {
 
.carousel-caption {width:80%;}
.carousel-caption h1 {font-size:40px; line-height:45px;}
.carousel-caption p {font-size:13px; line-height:18px;}
.carousel-caption > a.btn-default{ font-size:14px; padding:15px 30px; line-height:20px;}
     
}


@media only screen and ( min-width: 600px) and ( max-width: 765px ) {
 
.carousel-caption {width:80%;}
.carousel-caption h1 {font-size:40px; line-height:45px;}
.carousel-caption p {font-size:13px; line-height:18px;}
.carousel-caption > a.btn-default{ font-size:14px; padding:15px 30px; line-height:20px;} 
    
.carousel-control-prev .carousel-control-prev-icon, .carousel-control-next .carousel-control-next-icon { width:45px; height:45px; line-height:45px; font-size:15px;}    
}


@media only screen and ( min-width: 481px) and ( max-width: 599px ) {
  
.carousel-caption {width:80%;}
.carousel-caption h1 {font-size:30px; line-height:35px;}
.carousel-caption p {font-size:13px; line-height:18px;}
.carousel-caption > a.btn-default{ font-size:13px; padding:10px 20px; line-height:20px;} 
    
.carousel-control-prev .carousel-control-prev-icon, .carousel-control-next .carousel-control-next-icon { width:40px; height:40px; line-height:40px; font-size:13px;}     
}


@media only screen and ( min-width: 320px) and ( max-width: 480px ) {

.carousel-caption {width:80%;}
.carousel-caption h1 {font-size:30px; line-height:35px;}
.carousel-caption p {font-size:13px; line-height:18px;}
.carousel-caption > a.btn-default{ font-size:13px; padding:10px 20px; line-height:20px;}  
    
.carousel-control-prev .carousel-control-prev-icon, .carousel-control-next .carousel-control-next-icon { width:40px; height:40px; line-height:40px; font-size:13px;}      
}

@media (max-width: 767px) {
  .carousel-inner > .carousel-item img,
  .carousel-inner > .carousel-item > a > img {
    height: 350px; /* Tamari requirement pramane ahiya height set karo */
  }
}