@charset "utf-8";
/*
Theme Name: Rumble - Car Rental Booking HTML Template.
Author: codezionsoftwares
Author URL: https://themeforest.net/user/codezionsoftwares/portfolio
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1.General code
    1.1 Typography
    1.2 Space margins and padding
    1.3 forms
    1.4 Buttons
    1.5 Section-Colors-&-Backgrounds
    1.6 Modal & popups
    1.7 Accordion
2.Homepages
    2.1 Navigation
    2.2 Slider
    2.3 Search
    2.4 About Us
    2.5 Our Work
    2.6 Our Services
    2.7 Recommended Cars
    2.8 Our Team
    2.9 Why Choose Us / Testimonials
    2.10 Our Blog
    2.11 Our Partners
    2.12 Footer
    2.13 Copyright
3.Blog
4.Blog Details
5.Listing
6.Listing Detail
7.Booking
8.About Us
9.404
10.Coming Soon
11.Contact Us
12.FAQs
13.Gallery
*/

/* Custom styling for dots */
.slider-image:hover + .prev-arrow,
.slider-image:hover + .next-arrow {
  opacity: 1;
  /* Show buttons on hover */
}

button {
  transition: opacity 0.3s ease-in-out;
}

.slick-dots {
  position: absolute;
  bottom: -30px;
  display: flex;
  justify-content: center;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 10;
}

.slick-dots li {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 15px;
  height: 2px;
  padding: 3px;
  border-radius: 50px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: #2d3e52;
}

.slick-dots .slick-active {
  background: red;
  width: 25px;
  height: 2px;
  padding: 3px;
  border-radius: 50px;
}

.slick-dots li {
  margin: 0 5px;
  /* Spacing between dots */
}

.slick-dotted.slick-slider {
  margin-bottom: 0;
}

.slick-dots li button:before {
  font-family: "Courier New", monospace;
  font-size: 0px;
  color: red;
}

.slick-next:before {
  content: "\f054";
  font-family: "FontAwesome";
}

.slick-prev:before {
  content: "\f053";
  font-family: "FontAwesome";
}

.main-banner .slick-dots {
  bottom: 20px;
}
.filter-btn.active {
  background-color: #ff0000;
  color: white;
}

.filter-btn.active:hover {
  background-color: #ff0000;
}

.post-slider button {
  background-color: #000;
  top: 50%;
  opacity: 0;
}
.post-slider:hover button {
  opacity: 1;
}

/* Cars Right and Left CSS */
/* Style the slider thumb with Tailwind-like approach */
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  background: #ef4444;
  /* Tailwind's red-500 */
  border-radius: 50%;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #ef4444;
  /* Tailwind's red-500 */
  border-radius: 50%;
  cursor: pointer;
}

input[type="range"]::-ms-thumb {
  width: 16px;
  height: 16px;
  background: #ef4444;
  /* Tailwind's red-500 */
  border-radius: 50%;
  cursor: pointer;
}

/* Blog Detail CSS */
/* Custom styling for dots */
.slick-dots {
  position: absolute;
  bottom: -30px;
  display: flex;
  justify-content: center;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 10;
}

.slick-dots li {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 15px;
  height: 2px;
  padding: 3px;
  border-radius: 50px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: #2d3e52;
}

.slick-dots .slick-active {
  background: red;
  width: 25px;
  height: 2px;
  padding: 3px;
  border-radius: 50px;
}

.slick-dots li {
  margin: 0 5px;
  /* Spacing between dots */
}

.slick-dotted.slick-slider {
  margin-bottom: 0;
}

.slick-dots li button:before {
  font-family: "Courier New", monospace;
  font-size: 0px;
  color: red;
}

/* About Page CSS */
/* Custom styling for dots */
.slick-dots {
  position: absolute;
  bottom: -30px;
  display: flex;
  justify-content: center;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 10;
}

.slick-dots li {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 15px;
  height: 2px;
  padding: 3px;
  border-radius: 50px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: #2d3e52;
}

.slick-dots .slick-active {
  background: red;
  width: 25px;
  height: 2px;
  padding: 3px;
  border-radius: 50px;
}

.slick-dots li {
  margin: 0 5px;
  /* Spacing between dots */
}

.slick-dotted.slick-slider {
  margin-bottom: 0;
}

.slick-dots li button:before {
  font-family: "Courier New", monospace;
  font-size: 0px;
  color: red;
}