.img-slider {
    position: relative;
    width: 100%;
    height: 700px;
    margin: 0;
    background: #191C25;
}

.img-slider .slide{
  z-index: 1;
  position: absolute;
  width: 100%;
  clip-path: circle(0% at 0 50%);
}

.img-slider .slide.active{
  clip-path: circle(150% at 0 50%);
  transition: 2s;
  transition-property: clip-path;
}

.img-slider .slide img {
    z-index: 1;
    width: 100%;
    border-radius: 5px;
    height: 600px;
}

.img-slider .slide .info {
    position: absolute;
    top: 110px;
    padding: 15px 170px;
}

.img-slider .slide .info h2 {
    color: #fff;
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 2px;
}

.img-slider .slide .info p {
    color: #fff;
    font-size: 18px;
    width: 60%;
    padding: 10px;
    border-radius: 4px;
}

.img-slider .navigation{
  z-index: 2;
  position: absolute;
  display: flex;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: inset 0px -50px 20px -10px #191c25;
}

.img-slider .navigation .btn-slider {
    background: #272b3a!important;
    width: 250px;
    height: 120px;
    margin: 10px;
    border-radius: 0;
    cursor: pointer;
    padding: 20px;
    text-align: center;
    border-radius: 5px;
    transition-timing-function: ease-in;
    transition: 0.2s;
    transform: translateY(65%);
}

.img-slider .navigation .btn-slider.active{
  background: #1592e8 !important;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  width: 250px;
  height: 185px;
  transform: translateY(0);
    transition-timing-function: ease-out;
    transition: 0.25s;
}
.img-slider .navigation .btn-slider .card-body.text-center h2 small {
    font-size: 15px;
    display: block;
    font-weight: 600;
    color: #fff;
}
.img-slider .navigation .btn-slider .card-body.text-center h2 {
    font-size: 36px;
    font-family: roboto,proximanova-bold,Helvetica,Arial,sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 32px;
    margin: 15px;
}
.img-slider .navigation .btn-slider .card-body.text-center h2 span {
    font-size: 20px;
    text-transform: lowercase;
    font-weight: 400;
}
.img-slider .slide span img {
    width: 15px;
    height: auto;
    margin-right: 10px;
}
.img-slider .slide span{
    display: block;
    margin-top: 20px;
}
.img-slider .navigation .btn-slider .card-body {
    background: transparent !important;
    flex: 0;
    padding: 0;
}
.btn-slider #carousel-text-show {
    display: none;
}
.btn-slider.active #carousel-text-show {
    display: block;
}

@media (max-width: 820px){
  .img-slider{
    width: 600px;
    height: 375px;
  }

  .img-slider .slide .info{
    padding: 10px 25px;
  }

  .img-slider .slide .info h2{
    font-size: 35px;
  }

  .img-slider .slide .info p{
    width: 70%;
    font-size: 15px;
  }

  .img-slider .navigation{
    bottom: 25px;
  }

  .img-slider .navigation .btn-slider{
    width: 10px;
    height: 10px;
    margin: 8px;
  }
}

@media (max-width: 620px){
  .img-slider{
    width: 400px;
    height: 250px;
  }

  .img-slider .slide .info{
    padding: 10px 20px;
  }

  .img-slider .slide .info h2{
    font-size: 30px;
  }

  .img-slider .slide .info p{
    width: 80%;
    font-size: 13px;
  }

  .img-slider .navigation{
    bottom: 15px;
  }

  .img-slider .navigation .btn-slider{
    width: 8px;
    height: 8px;
    margin: 6px;
  }
}

@media (max-width: 420px){
  .img-slider{
    width: 320px;
    height: 200px;
  }

  .img-slider .slide .info{
    padding: 5px 10px;
  }

  .img-slider .slide .info h2{
    font-size: 25px;
  }

  .img-slider .slide .info p{
    width: 90%;
    font-size: 11px;
  }

  .img-slider .navigation{
    bottom: 10px;
  }
}
@media (max-width: 767px){
    .img-slider {
        width: 100% !important;
        height: 325px !important;
    }
    .img-slider .slide img {
        height: 325px !important;
        width: 100% !important;
    }
    .img-slider {
        width: 100% !important;
        height: 325px !important;
    }
    .img-slider .slide .info {
        padding: 5px 10px !important;
        top: 25px !important;
    }
    .img-slider .navigation {
        display: none !important;
    }
    .img-slider .slide span img {
        width: 15px !important;
        height: auto !important;
    }
    section.hero-section {
        margin-top: -240px !important;
    }
    .img-slider {
        height: 550px !important;
    }
    .img-slider .slide img {
        height: 585px !important;
    }
    .img-slider .slide .info {
        top: 260px !important;
    }
}