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

/* Declare heights because of positioning of img element */
.carousel-item {height: 100%;}
.carousel-item::before {position: absolute;content: ''; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, 0.60);}

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

.carousel-caption h1 {font-size:40px; line-height:45px; color:var(--white-color); margin:0; padding:0; font-weight:var(--font-weight-700);}
.carousel-caption p {color:var(--white-color); font-size:15px; margin-top:10px; line-height:20px;}

.carousel-caption >.btn-default{ font-size:14px; font-weight:var(--font-weight-500); width:auto; text-transform: capitalize; padding:10px 25px; line-height:25px; color:var(--white-color); background:var(--primary-color); letter-spacing:var(--letter-spacing-1); margin-top:5px; margin-bottom:0; margin-left:0; margin-right:0; border:none; border-radius:var(--border-radius-25); transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}
.carousel-caption >.btn-default:hover {background:var(--secondary-color); color:var(--white-color);transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s; } 

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


@media only screen and ( min-width: 600px) and ( max-width: 765px ) {
 
.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;}   
}


@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;}    
}


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

.carousel-caption {width:80%;}
.carousel-caption h1 {font-size:25px; line-height:30px;}
.carousel-caption p {font-size:13px; line-height:18px;}
.carousel-caption > a.btn-default{ font-size:13px; padding:10px 20px; line-height:20px;}     
}