.section-padding{
    padding-top: 100px;
}



.hero-text{
    font-size: 3.5rem;
    font-weight: 700;
}



.hero-paragraph{
    font-size: 18px;
    font-weight: 400;
    margin-top: 10px;
}

.booknowbutton{
    background-color: #4CAF50;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.sub-heading-content{
    text-align: center;
    font-family: "Poppins", Sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #4CAF50;
}

.sub-heading-content::before {
    content: "";
    display: inline-block; /* Ensure it displays as an inline element */
    width: 30px;
    height: 1px;
    background-color: #4CAF50;
    margin-right: 10px; /* Space between line and text */
    position: relative;
    top: -7px;
}

.sub-heading-content::after {
    content: "";
    display: inline-block; /* Ensure it displays as an inline element */
    width: 30px;
    height: 1px;
    background-color: #4CAF50;
    margin-left: 10px; /* Space between text and line */
    position: relative;
    top: -7px;
}

.sub-heading-second{
    font-family: "Poppins", Sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.5em;
    text-align: center;
}

.sub-heading-third{
    text-align: center;
    font-family: "Poppins", Sans-serif;
    font-size: 15px;
}

.number{
    font-size: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.plus{
    color: #4CAF50;
    font-weight: 500;
}

.number-count-text{
    font-family: "Poppins", Sans-serif;
    font-weight: 700;
    line-height: 1.5em;
    font-size: 1.3rem;
    color: #555;

}

.number-count-spantext{
    font-family: "Poppins", Sans-serif;
}

.howitwork{
    height: 100%;
    width: 100%;
    background-color: #252525;
    margin-top: 100px;
}

/* Basic styling for the tab container */
.tab-container {
    width: 80%; /* Container width */
    margin: 0 auto; /* Center align the tab container */
    font-family: Arial, sans-serif; /* Font styling */
    /* border: 1px solid #ddd; Border for the tab container */
    border-radius: 15px; /* Rounded corners */
    overflow: hidden; /* Hides content outside the container */
  }
  
  /* Styling for the tab titles */
  .tab-titles {
   
    /* background-color: #f4f4f4; Background color for the tabs */
    border-bottom: 1px solid #ddd; 
  }
  
  .tab-title {
    padding: 10px 20px; /* Padding for the tab title */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
    text-align: center; /* Center align the text */
    flex-grow: 1; /* Equal width for all tabs */
  }
  
  /* Active tab title styling */
  .tab-title.active {
    background-color: #4CAF50; /* White background for the active tab */
    font-weight: bold; /* Bold font for the active tab */
    color: #fff;
    border-radius: 10px;
    /* border-bottom: 2px solid #007bff; Bottom border for the active tab */
  }
  
  /* Hover effect for the tab titles */
  .tab-title:hover {
    /* background-color: #e9ecef; Light grey background on hover */
    border-bottom: 2px solid #4CAF50;
  }
  
  /* Styling for the tab contents */
  .tab-contents {
    padding: 20px; /* Padding for the tab content */
    background-color: #fff; /* Background color for the content area */
  }
  
  /* Hide all tab content by default */
  .tab-content {
    display: none; /* Hide all tab content */
  }
  
  /* Show the active tab content */
  .tab-content.active {
    display: block; /* Show the active tab content */
  }

  .tablist-new {
    height: 0;
    overflow: hidden;
    transition: height 0.4s ease; /* Smooth transition */
  }
  .toggle-icon {
    cursor: pointer;
    font-size: 20px;
    margin-left: 10px;
  }
  .expanded {
    height: auto;
  }


  .number {
    font-size: 3em;
    font-weight: bold;
    position: relative;
  }
  
  .plus {
    font-size: 0.5em;
    position: absolute;
    top: 0;
    right: -0.5em;
    color: #333;
    font-weight: normal;
  }
  
  .number-count-text {
    font-size: 1.2em;
    margin-top: 10px;
  }
  
  .number-count-spantext {
    display: block;
    margin-top: 5px;
  }
  

  
 /* Style for the Scroll to Top button */
 #scrollToTopBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  bottom: 30px; /* Place the button at the bottom */
  right: 50px; /* Place the button 30px from the right */
  z-index: 99; /* Ensure the button is on top of other content */
  background-color: #4CAF50; /* Dark background */
  color: white; /* Text color */
  padding: 20px; /* Padding around the button */
  border: none; /* Remove borders */
  border-radius: 10px; /* Rounded corners */
  font-size: 16px; /* Increase font size */
  cursor: pointer; /* Pointer on hover */
  transition: background-color 0.3s; /* Smooth transition on hover */
}

#scrollToTopBtn:hover {
  background-color: #ff6666;
}




/*Demo Only*/
.featured-icon-card{
  padding: 1rem;
  text-align: center;
  transition: background-color 0.3s;
  margin-bottom: 2em
  
  
}
.featured-icon-card:hover .fa{

}
.featured-icon-card:hover{
background: #08b427;
  color: white;
  
}

.featured-icon-card:hover .featured-icon-container{
background: #fff;
  color: #08b427;
}

.featured-icon-container{
  font-size: 2em;
  width: 60px;
  height: 100%;
  background: #08b427;
  color: white;
  border-radius: 15px;
  margin: auto;
  transition: background-color 0.3s,  color 0.3s;
}

.fa-bs-responsive{
  line-height: 2em;
}

.featured-icon-textbox{
  margin-top: 1rem;
}


a{
  text-decoration: none;
}
/* responsive css */

.hero-section {
  height: 100%; 
  /* width: 99vw; Full screen width */
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.carousel-item img {
  height: 100%;
  width: 100%; /* Ensure full width */
  object-fit: cover; /* Keeps image proportions */
  border-radius: 10px; /* Border radius for rounded corners */
}

.carousel-caption {
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  padding: 1rem;
  border-radius: 10px;
}

.carousel-caption h5, 
.carousel-caption p {
  color: #fff;
}



  /* Mobile-specific styling */
  @media (max-width: 767px) {
    .hero-responsive-image {
      width: 300px; /* Sets the width to 300px for mobile view */
    }
  }
  .responsive-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
  }

  @media (min-width: 768px) {
    .responsive-image {
      height: 450px;
    }
  }

  @media (max-width: 768px) {
    .carousel-caption h5 {
      font-size: 1.5rem;
    }
  
    .hero-section{
      height: 100%;
    }
    .carousel-item img {
      height: 100%;
    }
  
    .carousel-caption p {
      font-size: 1rem;
    }
  }
  
   
 .sliders{
  /* margin: 0 40px; */
  height: 100%;
  overflow: hidden;
  position: relative;
}

.sliders .image-itemss{
  height: 100%;
}

.sliders .image-itemss .images{
  height: 100%;
}

.sliders .image-itemss .images .picture{
  height: 100%;
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.arrowButton{
  position: absolute !important;
  top: 50% !important;
  color: black !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background-color: white !important;
  padding: 10px !important;
}

.arrowButton.left{
  left: 0 !important;
}

.arrowButton.right{
  right: 0 !important;
}

.arrowButton::after{
  font-size: 20px !important;
}

@media only screen and (max-width:868px){
  .sliders{
      margin: 0 20px;
  }
}



.slide-img img {
  width: 100%;
  transform: rotate(-70deg);
  transform-origin: bottom;
  opacity: 0;
  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275),
      opacity 0.6s ease 0s;
}

.slide.active .slide-img img {
  transform: rotate(0);
  opacity: 1;
}




/**********************************************
 ** - 22 - Other Page Banner Title Area CSS
 **********************************************/
 .page-title-area {
  position: relative;
  z-index: 1;
  padding: 20px 0;
  background: #5764ec;
  background: linear-gradient(to right, rgb(34, 195, 96) 0%, rgba(253, 187, 45, 0) 100%);

}

.page-title-content {
  text-align: left;
}

.page-title-content ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.page-title-content ul li {
  color: #ffffff;
  display: inline-block;
  position: relative;
  font-weight: 600;
  font-size: 13px;
  margin: 0;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.page-title-content ul li a {
  display: inline-block;
  color: #ffffff;
  -webkit-transition: all 400ms ease-out;
  transition: all 400ms ease-out;
  will-change: transform;
  text-decoration: none;
}

.page-title-content ul li a:hover {
  color: #fff;
  text-decoration: underline;
}

.page-title-content ul li::after {
  content: '\007c';
  padding: 0 10px;
  vertical-align: top;
  font-weight: bolder;
  font-size: 12px;
}

.page-title-content ul li:last-child::after {
  display: none;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800;900&display=swap');
*{
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}
.navbar ul li {
    padding: 0 13px;
}

ul li a {
    font-weight: 500;
    color: inherit !important;
}
/* ul li a:hover {
    color: #08b427 !important;
} */
/* ul li .active{
    color: #08b427 !important;
} */
.section-contact label{
    font-weight: 600;
}

/* dark mode */
.navbar .dark small{
    font-size: 11px;
    font-weight: 600;
}
.navbar .dark{
    margin-left: 20px;
    text-align: center;
}
.darkmode {
    color: #fff !important;
    background-color: #1c2027 !important;
 }
.darkmode i:hover{
    cursor: pointer;
}
.dark:hover{
    cursor: pointer !important;
}
.card-bike{
   background-color: rgb(238, 238, 238);
}
footer .medsos i:hover{
    color: #08b427 !important;
    cursor: pointer;
}
footer .medsos i{
    color: #000 !important;
}
footer ul li{
    list-style: none;
    /* margin-left: -45px; */
    padding-bottom: 13px;
}
footer ul li a{
    font-weight: 500;
    text-decoration: none;
    color: inherit;
    opacity: 0.8;
}
footer h6{
    font-weight: bolder;
    padding-bottom: 15px;
}
footer{
  background-color: aliceblue;
  padding-top: 30px;
}

.nav-link.active {
  /* color: #08b427 !important; Change the color as needed */
  /* border: 2px solid #08b427; Add a bottom border */
 
  border-radius: 10px;
  background-color: #85ff66;
  color: #fff;
}
.nav-link{
  font-weight: 500; /* Optional: Make the active link bold */
}
.headerbtn{
  
  color: 000;
  border-radius: 5px;
}
.headerbtn:hover{
  border: 1px solid #8fff66 ;
  background-color: #85ff66;
}
.headerbtn.active{
  border: 1px solid #8fff66 ;
  background-color: #85ff66;
}
/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 768px) {
  .navresponsiveimage{
    display: none;
  }
 }