.discover-slider img{
  width: 100%;
	height: 500px;
	object-fit: cover;
	object-position: center;
	transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
}

.discover-slider-item{
	position: relative;
	display: inline-block;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	overflow: hidden;
  width: 100%;
}

.discover-slider .discover-slider-item h3{
	margin: 0;
}

.discover-slider .image-desc{
	font-size: 24px;
	font-weight: 500;
	font-family: 'fraunces';
	position: absolute;
	z-index: 10;
	bottom: 10px;
	left: 50%;
	transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	-o-transform: translate(-50%, 0);
	color: #fff;
	text-align: center;
	transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	width: 100%;
}

.discover-slider .discover-slider-item:hover .image-desc{
	bottom: 48px;
}

.discover-slider .image-desc span{
	font-size: 13px;
	font-weight: 500;
	font-family: 'jost';
	color: #fff;
	text-align: center;
	opacity: 0;
	transform: translateY(15px);
	transition: all 0.4s 0.2s ease-out;
	-webkit-transition: all 0.4s 0.2s ease-out;
	-moz-transition: all 0.4s 0.2s ease-out;
	-ms-transition: all 0.4s 0.2s ease-out;
	-o-transition: all 0.4s 0.2s ease-out;
	-webkit-transform: translateY(15px);
	-moz-transform: translateY(15px);
	-ms-transform: translateY(15px);
	-o-transform: translateY(15px);
	display: inline-block;
	list-style: 14px;
}

.discover-slider .discover-slider-item:hover .image-desc span{
	opacity: .7;
	transform: translateY(0);
}

.discover-slider-item:before, .discover-slider-item:after {
    z-index: 3;
    opacity: 0.9;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 66.74%, #000000 100%);
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    border-radius: 10px;
    -ms-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

.discover-slider-item:before {
    height: 100%;
}

.discover-slider-item:after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 5.63%, #000000 100%);
    height: 0;
}

.discover-slider-item:hover:after {
    height: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 5.63%, #000000b3 100%);
    -ms-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

.discover-slider-item:hover img{
	transform: scale(1.05);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
}

.discover-slider .swiper-pagination{
	position: relative;
	margin-top: 72px;
}




.swiper-pagination .swiper-pagination-bullet{
    transition: all ease .3s .1s;
    -webkit-transition: all ease .3s .1s;
    -moz-transition: all ease .3s .1s;
    -ms-transition: all ease .3s .1s;
    -o-transition: all ease .3s .1s;
}

.discover-slider .swiper-pagination{
  margin-right: -100px;
}

  .discover-slider .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets{
    right: 4% !important;
  }

  .discover-slider .swiper-pagination-clickable .swiper-pagination-bullet{
    background: #000;
    width: 7px;
    height: 7px;
    margin: 0 15px!important;
    position: relative;
    opacity: 1;
  }

  .discover-slider .swiper-pagination.first .swiper-pagination-bullet{
    background: #fff;
  }
  

  .discover-slider .swiper-pagination-bullet {
    display: inline-block;
    margin: 0 5px;
    width: 25px;
    height: 25px;
    position: relative;
  }

  
  .discover-slider .circle-svg {
    width: 25px;
    height: 25px;
    position: absolute;
    left: -9px;
    top: -9px;
    opacity: 0;
  }

  .discover-slider .swiper-pagination-bullet-active svg{
    opacity: 1;
  }
  
  .discover-slider .circle-svg circle {
    stroke-dasharray: 150; 
    stroke-dashoffset: 150; 
    transition: stroke-dashoffset 0.6s ease-in-out;
    fill: transparent;
    stroke: #000;
    stroke-width: 2;
  }

  .discover-slider .swiper-pagination .circle-svg circle {
    stroke: #000;
  }
  
  .discover-slider .swiper-pagination-bullet-active .circle-svg circle {
    animation: drawCircle 0.6s ease-in-out forwards;
  }
  
  @keyframes drawCircle {
    0% {
      stroke-dashoffset: 150;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }