.hero-slider2 .swiper-slide {
  padding-top: 105px;
  padding-bottom: 180px;
}

@media screen and (max-width: 500px){
    .hero-slider2 .swiper-slide {
        padding-top: 53px;
    }
    .offcanvas.offcanvas-open {
        position: fixed;
        z-index: 999;
    }
    .ban-right {
        display: none!important;
    }
    header.mob-head {
        padding: 10px 0!important;
        height:auto;
    }
    img.w-full.h-full {
        width: 83% !important;
        height: 62px !important;
    }
}

button.banner-btn {
  background-color: darkgoldenrod;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
}

a.banner-btn {
  background-color: darkgoldenrod;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
}

/*Increment and derement number css*/
.quantity {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.quantity__minus,
.quantity__plus {
  display: block;
  width: 22px;
  height: 28px;
  margin: 0;
  background: #c8a583;
  text-decoration: none;
  text-align: center;
  line-height: 27px;
}
.quantity__minus:hover,
.quantity__plus:hover {
  background: #575b71;
  color: #000;
} 
.quantity__minus {
  border-radius: 3px 0 0 3px;
}
.quantity__plus {
  border-radius: 0 3px 3px 0;
}
.quantity__input {
  width: 50px;
  height: 28px;
  margin: 0;
  padding: 0;
  text-align: center;
  border-top: 2px solid #dee0ee;
  border-bottom: 2px solid #dee0ee;
  border-left: 1px solid #dee0ee;
  border-right: 2px solid #dee0ee;
  background: #fff;
  color: #000;
}
.quantity__minus:link,
.quantity__plus:link {
  color: #000;
} 
.quantity__minus:visited,
.quantity__plus:visited {
  color: #fff;
}

.quantity-value {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.total-value {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-top: 20px;
}
.invest-sec {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  padding: 20px 20px;
  border-radius: 5px;
}
.quantity-value h5 {
  font-weight: 700;
  font-size: 20px;
}
.total-value h6 {
  font-weight: 600;
  font-size: 18px;
}
.total-value p {
  font-weight: 600;
  font-size: 20px;
}
label {
  font-size: 15px !important;
}

.benifits {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  padding: 10px;
  border-radius: 5px;
  width: 200px;
}
ul.benfits-all {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/*Flip box home css*/
.services-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.service {
  margin: 8px;
}

.flip-box {
  background-color: transparent;
  width: 250px;
  height: 350px;
  border: 1px solid #f1f1f1;  
  border-radius: 10px;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.flip-box-back ul li{
    text-align: left;
    display: flex;
    align-items: flex-start;
}

.flip-box-front {
  background-color: #041133;
  color: black;
  border-radius: 10px;
}

.flip-box-front img {
  height: 50px;
  width: 50px;
}

.flip-box-back {
  background-color: #cdcdcd;
  color: #000;
  transform: rotateY(180deg);
  border-radius: 10px;
  padding: 16px;
}


/*image carousel*/
ul {
  list-style: none;
}
/* .content {
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
} */
.carousel-base {
  position: relative;
}
.carousel-base .carousel {
  position: relative;
  width: 100%;
  height: 0;
  margin-bottom: 20px;
  padding-bottom: 50%;
}
.carousel-base .carousel-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}
.carousel-base .carousel .slider {
  position: absolute;
  height: 100%;
  text-align: center;
  left: 0;
  transition: left 300ms;
}
.carousel-base .carousel .slider li {
  position: absolute;
  height: 100%;
  color: #fff;
}
.carousel-base .carousel .slider li:nth-of-type(1) {
  background: #fff;
}
.carousel-base .carousel .slider li:nth-of-type(2) {
  background: #841619;
}
.carousel-base .carousel .slider li:nth-of-type(3) {
  background: #1b1c1c;
}
.carousel-base .carousel .slider li:nth-of-type(4) {
  background: #9f191f;
}
.carousel-base .carousel .slider li:nth-of-type(5) {
  background: #841619;
}
.carousel-base .carousel .slider li:nth-of-type(6) {
  background: #cfd0d2;
}
.carousel-base .carousel .slider li:nth-of-type(7) {
  background: #1b1c1c;
}
.carousel-base .carousel .slider li:nth-of-type(8) {
  background: #9f191f;
}
.carousel-base .carousel .slider li:nth-of-type(9) {
  background: #841619;
}
.carousel-base .carousel .slider li:nth-of-type(10) {
  background: #cfd0d2;
}
.carousel-base .carousel .slider li:nth-of-type(11) {
  background: #1b1c1c;
}
.carousel-base .carousel .slider img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.carousel-base .carousel-nav .bttn, .carousel-base .carousel-nav .bttn-left, .carousel-base .carousel-nav .bttn-right {
  position: absolute;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
  background: #cfd0d2;
  color: #fff;
  font-size: 0px;
  padding: 5px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 300ms;
}
.carousel-base .carousel-nav .bttn:hover {
  background: #1b1c1c;
}
.carousel-base .carousel-nav .bttn-left {
  left: 0px;
}
.carousel-base .carousel-nav .bttn-right {
  right: 0px;
}
.carousel-base.tall {
  width: 150px;
  margin: 0 auto;
}
.carousel-base.tall .carousel {
  padding-bottom: 300%;
}
.carousel-base.tall .carousel .slider li {
  font-size: 2em;
}
.carousel-base.tall .carousel .slider li img {
  height: auto;
  width: 100%;
}