:root {
  --darkRed: #fc3831;
  --lightRed: #fdedec;
}
body {
  font-size: 100%;
  font-family: "PT Sans", sans-serif;
  color: #505260;
}

/* Trip CSS  */
.search_select_box{
  width:100%;
  border:1px solid #c8c9c9;
  border-radius:5px;
}
.search_select_box select{
  width:100%;

}
.search_select_box select:hover{
  background:#fff;
}
.search_select_box button{
  background:#fff;
  color:#000;
  font-size: 28px;
  font-weight: 600;
  color: black !important;
}
.search_select_box button:hover{
  background:#fff;
}
.search_select_box dropdown{
  background:#fff;
}
.search_select_box .dropdown-toggle::after {
    display: block;
}
.show>.btn-light.dropdown-toggle {
  color: #000;
  background-color: #fff;
}
.trip-main {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 1.5% 2%;
  margin: 2% 8% 5% 8% !important;
}
.pickup-details {
  border-radius: 10px;
  border: 2px solid #d9d9d9;
  margin: 2% 0%;
  padding: 10px;
  /* align-items: center; */
}
.pick-item {
  padding: 5px;
}
.city-main {
  border-radius: 15px 0px 0px 15px;
}
.owl-carousel:not(.owl-loaded){ 
  opacity: 0; 
}
.owl-item {
  opacity: 0;
}
.owl-item.active {
  opacity: 1;
}

#owl-carousel-1 .card-motorcycle{
  height:15rem;
} 
#owl-carousel-3 .card-motorcycle{
  height:15rem;
} 
#owl-carousel-4 .card-traveler{
  height:18rem;
}
#owl-carousel-2 .card{
  width: 15rem;
  height:15rem;
} 
#owl-carousel-2 .card img{
  height:11rem;
} 
.activa-card-btn {
  background-color: black;
  border-radius: 15px;
  color: white;
  padding: 0.5% 3%;
  cursor: pointer;
}

@media screen and (max-width: 1000px) {
 
#owl-carousel-1 .card-motorcycle{
  height:12rem;
} 
#owl-carousel-3 .card-motorcycle{
  height:12rem;
} 
#owl-carousel-2 .card{
  width: 15rem;
  height:12rem;
} 
#owl-carousel-2 .card img{
  height:9rem;
} 

}
.pick-item:hover {
  border: 1px solid var(--darkRed);
  transition: 0.2s;
  background-color: var(--lightRed);
}
.pick-item:active {
  border: 1px solid var(--darkRed);
  transition: 0.2s;
  background-color: var(--lightRed);
}
.location-drop {
  /* padding: 5%; */
  height: 100%;
}

.radio-text {
  margin-bottom: 0rem 0.5rem !important ;
  background-color: #e7e7e7;
  border-radius: 10px;
}

.ridobiko-btn {
  color: white;
  letter-spacing: 1.5px;
  font-size: 130%;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  background-color: transparent;
  border: 2px solid transparent;
}
.ridobiko-btn a {
  color: white;
  text-decoration: none;
}
.ridobiko-btn :hover {
  background-color: #fa5c57;
}
.ridobiko-btn:focus {
  border: none;
  outline: none;
}
.btn-inner {
  background-color: var(--darkRed);
  border-radius: 20px;
  padding: 7% 30%;
}
.month {
  font-weight: 500;
  line-height: 20px;
  font-size: 120%;
}

.drop-time {
  border-radius: 0px 15px 15px 0px;
}
.dropdown {
  background-color: transparent;
}
.bold-text {
  font-weight: 650;
  font-size: 35px;
}
.dropdown-btn {
  background-color: transparent;
  padding: 0%;
  width: 100%;
  height: 100%;
  text-align: start;
}
.pickup-text {
  font-weight: 500;
  font-size: 15px;
  color: #4a4a4a;
}
.ant-radio-input:focus .outstation-trip {
  background-color: black;
}

.dropdown-toggle::after {
  display: none;
}
.radio-btn {
  padding: 2px 8px;
  border-radius: 30px;
}
.radio-btn--checked {
  background-color: #e7e7e7;
}
.radio-2 {
  margin: 0px 20px;
}
.trip-time-container {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 0px;
  cursor: pointer;
  font-size: 13px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.trip-time-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.trip-time-checkmark {
  position: absolute;
  top: 3px;
  left: 3px;
  height: 18px;
  width: 18px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.trip-time-container:hover input ~ .trip-time-checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.trip-time-container input:checked ~ .trip-time-checkmark {
  background-color: #fff;
  border: 1px solid var(--darkRed);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.trip-time-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.trip-time-container input:checked ~ .trip-time-checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.trip-time-container .trip-time-checkmark:after {
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;

  background: var(--darkRed);
}
.date-input {
  display: none;
}

.select-css {
  font-size: 28px;
  font-weight: 600;
  color: black !important;
}
option {
  font-size: 23px;
  color: gray;
}
.select-css-timing {
  font-size: 28px;
  font-weight:700;
  color: black !important;
}

input[type="date"] {
  font-family: "Helvetica", arial, sans-serif;
  font-size: 18px;
  border: 1px solid #c8c9c9;
  border-radius: 5px;
  background: white;
  padding: 11px 5px;
  display: inline-block !important;
  visibility: visible !important;
  width: 90%;
  font-weight: 700;
  color: black !important;
  /* margin: 5% 0%; */
}

input[type="date"],
focus {
  color: #95a5a6;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
.date-div {
  width: 50%;
  padding: 0% !important;
}
 /* whats app float icon */
.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
  padding-top: 5px;
	color:#FFF;
	border-radius:50px;
	box-shadow: 2px 2px 3px #000;
  z-index:100;
}
.link:hover{
  color:white;
}
.my-float{
	margin:10px;
}
@media screen and (max-width: 500px) {
  .trip-main {
    margin: 0% 0% 5% 0% !important;
    border-radius: 0%;
  }
  .btn-inner {
    background-color: var(--darkRed);
    border-radius: 20px;
    padding: 8% 10%;
  } 
  .ridobiko-btn{
    letter-spacing: 0;
    font-size: 18px;
  }
}

/* Motorcycle CSS    */
.motorcycle {
  background-color: #ffffff;
  border-radius: 15px;
  padding: 1.5% 2%;
  margin: 5% 8% 2.5% 8% !important;
}
.motorcycle-heading {
  font-weight: 550;
}
.scroll-title-main .active-title {
  border-bottom: 2px solid var(--darkRed);
  color: var(--darkRed);
}
.scroll-title-main {
  width: 25% !important;
}
.scroll-title {
  cursor: pointer;
  padding: 5% 2%;
}
.scroll-title :focus {
  border-bottom: 2px solid var(--darkRed);
  color: var(--darkRed);
}

.scroll-icons-1 {
  box-shadow: 0 1px 6px 0 rgb(0 0 0 / 20%);
  border-radius: 20px;
  width: 60px;
  height: 30px;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
}
.hr-motor {
  position: relative;
  top: -17px;
}
.motorcycle-content {
  padding: 2% 0%;
}
.card-motorcycle {
  box-shadow: 0px 0px 5px rgb(197, 196, 196);
  border-radius: 2px;
  padding: 20px 0px 5px 0px;
}
.bike-coupon {
  padding: 5% 0%;
  font-size: 20px;
}
.coupon-name {
  color: var(--darkRed);
}
.book-now {
  font-size: 15px;
  color: var(--darkRed);
}
.bike-image-motor {
  box-shadow: 0px 0px 10px rgb(197, 196, 196);
  margin-top: -35px;
}
.bike-offer {
  font-weight: 700;
  font-size: 17px;
}
.expire-date {
  background-color: var(--darkRed);
  color: white;
  border-radius: 10px;
  font-size: 12px;
  width: 90%;
  padding: 0px 5px;
  margin-top: -10px;
}
.image-expire {
  margin: 0% 3%;
}
.terms {
  font-size: 10px;
}
.scooter-card {
  box-shadow: 0px 0px 5px rgb(197, 196, 196);
  border-radius: 2px;
  padding: 0.5% 1%;
}
.activa-img {
  width: 250px;
  height: 180px;
}
.details-div {
  background-color: rgba(0, 0, 0, 0.884);
  width: 250px;
  height: 180px;
  vertical-align: middle;
  text-align: center;
  display: none;
  color: white;
  transition: 1s ease-in-out;
}
.activa-details-icon {
  color: white;
}
.activa-hr {
  width: 50% !important;
  color: var(--darkRed);
  border-top: 1px solid var(--darkRed);
}
.activa-price {
  color: var(--darkRed);
}
.book-now-activa {
  color: var(--darkRed);
  /* text-decoration: underline; */
  cursor: pointer;
}
.terms_book {
  margin: 2% 0%;
}
#activa-section {
  display: none;
}
#new-section{
  display: none;
}
@media screen and (max-width: 1300px) {
  .scroll-title-main {
    width: 30% !important;
  }
}
@media screen and (max-width: 1000px) {
  .motorcycle-content {
    flex-direction: column;
    align-items: center;
  }
  .card-motorcycle {
    padding: 0%;
    margin: 2% 0% 6% 0%;
    width: 60%;
  }
  .scroll-title-main {
    width: 40% !important;
  }
}

@media screen and (max-width: 780px) {
  .scroll-title-main {
    width: 50% !important;
  }
  .card-motorcycle {
    padding: 0%;
    margin: 2% 0% 8% 0%;
    width: 80%;
  }
}
@media screen and (max-width: 600px) {
  .scroll-title-main {
    width: 60% !important;
  }
}
@media screen and (max-width: 500px) {
  .motorcycle {
    border-radius: 0%;
    margin: 10% 0% !important;
  }
  .scroll-title-main {
    width: 80% !important;
  }
  .card-motorcycle {
    width: 90%;
    margin: 3% 0% 10% 0%;
  }
}

/* Booking CSS  */
.booking-main {
  background-color: #f0f2f5 !important;
  margin: 0%;
  padding: 2.5% 8% 0% 8%;
}
.booking {
  background-color: #ffffff;
  border-radius: 15px;
  padding: 3% 2%;
  /* margin: 0% 8% !important; */
}
.booking-heading {
  font-weight: 550;
}
.images-main {
  padding: 1% 0%;
  width: 90% !important;
}
.img-col {
  text-align: center;
}
.img-book {
  width: 137px;
  height: 137px;
}
.book-2,
.book-3 {
  width: 115px;
  height: 115px;
}
@media screen and (max-width: 1200px) {
  .pair-images {
    justify-content: space-around !important;
  }
}
@media screen and (max-width: 1000px) {
  .pair-images {
    justify-content: space-between !important;
  }
}
@media screen and (max-width: 780px) {
  .images-main {
    width: 100% !important;
  }
}
@media screen and (max-width: 500px) {
  .booking-main {
    padding: 0% !important;
  }
  .booking {
    border-radius: 0%;
    margin: 0% !important;
  }
  .alert{
    font-size: 11px;
  }
}

/* Traveler CSS  */
.traveler-main {
  background-color: #f0f2f5 !important;
  margin: 0%;
  padding: 5% 8%;
}
.traveler-story {
  background-color: #ffffff;
  border-radius: 15px;
  padding: 1.5% 1%;
}
.traveler-header {
  font-weight: 550;
}
.scroll-icons-2 {
  box-shadow: 0 1px 6px 0 rgb(0 0 0 / 20%);
  border-radius: 20px;
  width: 60px;
  height: 30px;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
}
.scroll-icon {
  cursor: pointer;
}
.traveler-content {
  padding: 20px;
}
.read-more {
  font-size: 15px;
  color: var(--darkRed);
  /* padding-bottom: 1%; */
}
.traveler-content-main {
  margin: 5% 0% 1% 0%;
}
.card-traveler {
  box-shadow: 0px 0px 5px rgb(197, 196, 196);
  border-radius: 2px;
  padding: 20px 0px;
  margin: 0% 1%;
}
.traveler-date {
  background-color: var(--darkRed);
  color: white;
  border-radius: 10px;
  font-size: 13px;
  width: 90%;
  padding: 0px 5px;
  margin-top: -10px;
}
.traveler-title {
  font-weight: 700;
  font-size: 17px;
}
.bike-image-travel {
  box-shadow: 0px 0px 10px rgb(197, 196, 196);
  margin-top: -35px;
}
@media screen and (max-width: 1000px) {
  .traveler-content-main {
    flex-direction: column;
    align-items: center;
  }
  .card-traveler {
    padding: 0%;
    margin: 2% 0% 6% 0%;
    width: 60%;
  }
}
@media screen and (max-width: 780px) {
  .card-traveler {
    padding: 0%;
    margin: 2% 0% 8% 0%;
    width: 80%;
  }
}
@media screen and (max-width: 500px) {
  .traveler-main {
    padding: 10% 0% !important;
  }
  .traveler-story {
    border-radius: 0%;
    margin: 0% !important;
  }
  .card-traveler {
    width: 90%;
    margin: 3% 0% 10% 0%;
  }
  .pickup-details {
    padding: 4% 0%;
  }
  .select-css,
  .select-css-timing {
    font-size: 20px;
  }
  input[type="date"] {
    font-size: 15px;
    padding: 10px 5px;
  }
  .pick-item {
    padding: 5px;
  }
  .pickup-text {
    justify-content: start;
  }
  .trip-main-div {
    padding: 0;
  }
  .time-main-div {
    padding: 0 13px;
  }
  .pickup-time,
  .drop-time {
    width: 100%;
  }
  .location-title {
    padding: 0 15px;
  }
}

/* Mobile Responsive  */
@media screen and (max-width: 1000px) {
  .offers-section,
  .activa-section,
  .new-section  {
    flex-direction: column;
    align-items: center;
  }

  .scooter-card {
    margin: 2% 0%;
  }
}
@media screen and (max-width: 500px) {
  .motorcycle,
  .traveler-story {
    padding: 4% 3%;
  }
  .motorcycle-content {
    margin-top: 25px;
  }
  .traveler-content-main {
    margin-top: 40px;
  }
  .card-motorcycle,
  .card-traveler {
    margin: 5% 0% 10% 0%;
  }
  .footer-item.subscribe {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-item {
    margin-top: 10px;
  }
  .footer-item .heading-footer {
    text-align: center !important;
  }
  .footer-item .content-footer {
    text-align: center;
    align-items: center !important;
  }
  .radio-div {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .radio-div .radio-btn {
    margin: 0%;
  }
  .motorcycle-heading {
    font-size: 25px !important;
  }
  .social-media {
    width: 100% !important;
  }
  .social-media .social-icon {
    margin: 0 5px;
  }
  .main-footer {
    padding: 2%;
  }
}
/* Carousel CSS  */
@media (min-width: 768px) {
  /* show 3 items */
  .carousel-inner .active,
  .carousel-inner .active + .carousel-item,
  .carousel-inner .active + .carousel-item + .carousel-item,
  .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
    display: block;
  }

  .carousel-inner
    .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  .carousel-inner
    .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)
    + .carousel-item,
  .carousel-inner
    .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)
    + .carousel-item
    + .carousel-item,
  .carousel-inner
    .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)
    + .carousel-item
    + .carousel-item
    + .carousel-item {
    transition: none;
  }

  .carousel-inner .carousel-item-next,
  .carousel-inner .carousel-item-prev {
    position: relative;
    transform: translate3d(0, 0, 0);
  }

  .carousel-inner
    .active.carousel-item
    + .carousel-item
    + .carousel-item
    + .carousel-item
    + .carousel-item {
    position: absolute;
    top: 0;
    right: -25%;
    z-index: -1;
    display: block;
    visibility: visible;
  }

  /* left or forward direction */
  .active.carousel-item-left + .carousel-item-next.carousel-item-left,
  .carousel-item-next.carousel-item-left + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
  .carousel-item-next.carousel-item-left
    + .carousel-item
    + .carousel-item
    + .carousel-item,
  .carousel-item-next.carousel-item-left
    + .carousel-item
    + .carousel-item
    + .carousel-item
    + .carousel-item {
    position: relative;
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  /* farthest right hidden item must be abso position for animations */
  .carousel-inner .carousel-item-prev.carousel-item-right {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    visibility: visible;
  }

  /* right or prev direction */
  .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
  .carousel-item-prev.carousel-item-right + .carousel-item,
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
  .carousel-item-prev.carousel-item-right
    + .carousel-item
    + .carousel-item
    + .carousel-item,
  .carousel-item-prev.carousel-item-right
    + .carousel-item
    + .carousel-item
    + .carousel-item
    + .carousel-item {
    position: relative;
    transform: translate3d(100%, 0, 0);
    visibility: visible;
    display: block;
    visibility: visible;
  }
}

/* Bootstrap Lightbox using Modal */

#profile-grid {
  overflow: auto;
  white-space: normal;
}
#profile-grid .profile {
  padding-bottom: 40px;
}
#profile-grid .panel {
  padding: 0;
}
#profile-grid .panel-body {
  padding: 15px;
}
#profile-grid .profile-name {
  font-weight: bold;
}
#profile-grid .thumbnail {
  margin-bottom: 6px;
}
#profile-grid .panel-thumbnail {
  overflow: hidden;
}
#profile-grid .img-rounded {
  border-radius: 4px 4px 0 0;
}
.demo-container {
  width: 200px;
  margin: auto;
}
.progress-bar {
  height: 4px;
  background-color: rgba(32, 32, 32, 0.2);
  width: 100%;
  overflow: hidden;
}
.progress-bar-value {
  width: 100%;
  height: 100%;
  background-color: rgb(64, 75, 83);
  animation: indeterminateAnimation 1s infinite linear;
  transform-origin: 0% 50%;
}
@keyframes indeterminateAnimation {
  0% {
    transform:  translateX(0) scaleX(0);
  }
  40% {
    transform:  translateX(0) scaleX(0.4);
  }
  100% {
    transform:  translateX(100%) scaleX(0.5);
  }
}