.feature-slider-wrap { width:100%; display:inline-block; min-height:750px; position:relative; padding: 78px 0 0; z-index: 1;}
.fs-bg { max-height:506px; height:100%; position: absolute; bottom:0; background: linear-gradient(180deg, #63B5D8 0%, #00607f 100%); width: 100%; }
.fs-header { padding: 0 0 30px; align-items: center;}
.fs-header .h1 { margin:0; padding:0; }
.feature-slider { width:100%;}
.slider-item { display:inline-block; overflow:hidden; text-align: left; }
.img-content-wrapper{ display:inline-block; background:#fff; border-radius: 8px; overflow:hidden; height: 100%;}

.fs-img { height: 296px; width: 100%;  float: left; position: relative;}
.img-content-hover{width: 100%; height: 100%; display: block;}
.img-content-hover::after {width: 100%; height: 100%; top: 0; left: 0; opacity: 0; visibility: hidden; position: absolute; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); background-image: linear-gradient(to bottom, rgba(98, 163, 112, 0.1) 0%,  #115E67 100%); content: ""; display: block; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; }
.fs-img:hover .img-content-hover::after{opacity: 1; visibility: visible;}
.img-content-arrow{width: 100%; height: 100%; top: 0; left: 0; opacity: 0; visibility: hidden; font-size: 88px; line-height: 88px; color: #fff; position: absolute; justify-content: center;}
.img-content-arrow span{color: #fff}
.fs-img:hover .img-content-arrow{opacity: 1; visibility: visible;}
.fs-img img { width:100%; height:100%; object-fit: cover; border-radius: 8px 8px 0 0; object-position: center top;}
.fs-content { min-height:214px; float:left; width:100%; padding: 32px; }

.fs-label{font-size: 14px; line-height: 22px; font-weight: 800; color: #0061A0; padding:1px 4px 0; display: inline-block; background: rgba(99, 181, 216, 0.2); border-radius: 4px; margin: 0 15px 15px 0; text-transform: uppercase; text-align: center; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease;}
.fs-label:hover{background: #00a3e3; color: #fff; border-color: #fff;}
.fs-label a{color: #0061A0; display: inline-block;}
.fs-label:hover a{color: #fff;}
.fs-content h4{ font-size:20px; line-height: 28px; font-weight: 500; color: #353535;}
.fs-content h4 a, .fs-content p a{color: #353535;}
.fs-content h4 a:hover, .fs-content p a:hover{color: #0061A0;}

.feature-slider .slick-arrow.slick-disabled { display:none !important; }
.label-wrap { margin:0 0 15px; flex-wrap: wrap;}
.feature-slider-wrap ul.slick-dots { margin:24px 0 0; } 
.feature-slider-wrap ul.slick-dots li.slick-active:before { color:#fff; }

.lighter-blue{clear: both; width: 100%}
.lighter-blue .fs-bg { background: rgba(99, 181, 216, 0.1) !important; }
.light-blue .fs-bg { background: rgba(99, 181, 216, 0.2) !important; }

.lighter-blue .feature-slider-wrap ul.slick-dots li button, 
.light-blue .feature-slider-wrap ul.slick-dots li button { background:#0061A0; }

.lighter-blue .feature-slider-wrap ul.slick-dots li.slick-active:before,
.light-blue .feature-slider-wrap ul.slick-dots li.slick-active:before { color:#0061A0; }

.feature-slider .slick-track{display: flex; flex-wrap: wrap;}
.feature-slider .slick-slide{height: auto;}

/*-- media css starts here --*/
@media only screen and (min-width: 1024px){
    .feature-slider.slick-slider{width: calc(100% + 32px);}
    .feature-slider .slider-item{height: auto; margin-right: 32px; transform: scale(1); transition: transform .3s linear; }
    .feature-slider .slick-arrow.slick-prev{left: -30px;}
    .feature-slider .slick-arrow.slick-next{right: 0;}
}
@media only screen and (max-width: 1299px) and (min-width: 1024px){
    .feature-slider .slick-arrow.slick-next{right: 13px;}
    .feature-slider .slick-arrow.slick-prev{left: 0;}
}
@media only screen and (max-width: 1023px) and (min-width: 768px){
    .feature-slider.slick-slider{width: calc(100% + 20px);}
    .slider-item {margin-right: 20px; }
    .feature-slider .slick-arrow.slick-prev{left: -20px;}
    .feature-slider .slick-arrow.slick-next{right: 0;}
}
@media only screen and (max-width: 767px) and (min-width: 200px){
    .fs-header { flex-direction: column; }
    .fs-header .h1 { padding: 0 0 10px; font-size:32px; line-height: 40px; }
    .feature-slider.slick-slider{width: calc(100% + 20px);}
    .feature-slider .slider-item {margin-right: 20px; width: 295px;}
    .feature-slider .slick-arrow.slick-prev{left: -20px;}
    .feature-slider-wrap { padding:50px 0 0; }
}