/* Carousel base class */
.carousel {
  
}

/* 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: linear-gradient(146deg, rgba(255,255,255, 0.85) 25%, rgba(255,255,255, 0.25) 100%);}

/* 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:50%; color: var(--bs-white); text-align: center; transform: translateY(-50%); padding-bottom: 0 !important; padding-top: 0 !important; }

.carousel-caption .section-wrapper { position:relative; display: flex; align-items: center; gap:15px; margin-bottom:1rem; margin-top:1rem; }
.carousel-caption .section-wrapper .section-title { font-size:20px; line-height:30px; font-weight:600; color:var(--bs-secondary);  margin: 0; text-transform: capitalize; font-weight:800;}
.carousel-caption .section-wrapper .dot {width: 10px; height: 10px; background-color:var(--bs-white); border-radius: 50%;}
.carousel-caption .section-wrapper .line {display: inline-block; height: 2px; width:75px; background-color:var(--bs-white); border-radius: 2px;}

.carousel-caption h1 {position:relative; font-size:45px; line-height:55px; font-weight:800; color:var(--bs-primary); margin:0; padding:0;}

.carousel-caption > a.btn-default{ font-size:16px; font-weight:500; width:auto; text-transform: capitalize; padding:1rem 2rem; line-height:25px; color:var(--bs-primary); background:none; letter-spacing: normal; margin-top:2rem; margin-bottom:0; margin-left:0; margin-right:1rem; border: 2px solid var(--bs-primary); border-radius:30px; 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(--bs-primary); color:var(--bs-white); transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s; border: 2px solid var(--bs-primary); }
.carousel-caption > a.btn-default i { margin-left:5px; font-size:13px;}

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


.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(--bs-primary); font-size:16px; text-align:center; opacity:1 !important; transition:opacity .15s ease; background:var(--bs-white); 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(--bs-white); background:var(--bs-primary); opacity:1;}

@media only screen and ( min-width: 768px) and ( max-width: 980px ) {
 
.carousel-caption {width:70%;}

.carousel-caption .section-wrapper { gap:10px; margin-bottom:.5rem; margin-top:.5rem; }    
.carousel-caption .section-wrapper .section-title {font-size:14px; line-height:20px;}    
.carousel-caption .section-wrapper .line {width:45px;}

.carousel-caption h1 {font-size:24px; line-height:35px;}

.carousel-caption > a.btn-default{font-size:14px; padding:1rem 1.5rem; line-height:20px;  margin-top:.75rem;}
.carousel-caption > a.btn-default i { font-size:12px;}
.carousel-caption > a.btn-default-one{font-size:14px; padding:1rem 1.5rem; line-height:20px;  margin-top:.75rem;}
.carousel-caption > a.btn-default-one i { font-size:12px;} 
     
}


@media only screen and ( min-width: 600px) and ( max-width: 765px ) {
 
.carousel-caption { width:80%;} 
.carousel-caption .section-wrapper { gap:10px; margin-bottom:.5rem; margin-top:.5rem; }    
.carousel-caption .section-wrapper .section-title {font-size:8px; line-height:12px;}    
.carousel-caption .section-wrapper .line {width:30px;}

.carousel-caption h1 {font-size:15px; line-height:20px;}

.carousel-caption > a.btn-default{font-size:10px; padding:.75rem 1rem; line-height:15px;  margin-top:.5rem;}
.carousel-caption > a.btn-default i { font-size:10px;}
.carousel-caption > a.btn-default-one{font-size:10px; padding:.75rem 1rem; line-height:15px;  margin-top:.5rem;}
.carousel-caption > a.btn-default-one i { font-size:10px;}   
    
.carousel-control-prev .carousel-control-prev-icon, .carousel-control-next .carousel-control-next-icon { width:30px; height:30px; line-height:30px; font-size:13px;}
    
   
}


@media only screen and ( min-width: 481px) and ( max-width: 599px ) {
  
.carousel-caption { top: 40%; width:90%;} 
.carousel-caption .section-wrapper { gap:10px; margin-bottom:.5rem; margin-top:.5rem; }    
.carousel-caption .section-wrapper .section-title {font-size:8px; line-height:12px;}    
.carousel-caption .section-wrapper .line {width:30px;}

.carousel-caption h1 {font-size:15px; line-height:20px;}

.carousel-caption > a.btn-default{font-size:10px; padding:.75rem 1rem; line-height:15px;  margin-top:.5rem;}
.carousel-caption > a.btn-default i { font-size:10px;}
.carousel-caption > a.btn-default-one{font-size:10px; padding:.75rem 1rem; line-height:15px;  margin-top:.5rem;}
.carousel-caption > a.btn-default-one i { font-size:10px;}   
    
.carousel-control-prev .carousel-control-prev-icon, .carousel-control-next .carousel-control-next-icon { width:30px; height:30px; line-height:30px; font-size:13px;}   
}


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

.carousel-caption { top: 40%; width:90%;} 
.carousel-caption .section-wrapper { gap:10px; margin-bottom:.5rem; margin-top:.5rem; }    
.carousel-caption .section-wrapper .section-title {font-size:8px; line-height:12px;}    
.carousel-caption .section-wrapper .line {width:30px;}

.carousel-caption h1 {font-size:15px; line-height:20px;}

.carousel-caption > a.btn-default{font-size:10px; padding:.75rem 1rem; line-height:15px;  margin-top:.5rem;}
.carousel-caption > a.btn-default i { font-size:10px;}
.carousel-caption > a.btn-default-one{font-size:10px; padding:.75rem 1rem; line-height:15px;  margin-top:.5rem;}
.carousel-caption > a.btn-default-one i { font-size:10px;}   
    
.carousel-control-prev .carousel-control-prev-icon, .carousel-control-next .carousel-control-next-icon { width:30px; height:30px; line-height:30px; font-size:13px;}      
}