.custom-navigationbar {
  --gradient-start: 50%;
  background: rgb(21, 22, 26);
  background: -moz-linear-gradient(180deg, rgba(21, 22, 26,1) var(--gradient-start), rgba(21, 22, 26,0) 100%);
  background: -webkit-linear-gradient(180deg, rgba(21, 22, 26,1) var(--gradient-start), rgba(21, 22, 26,0) 100%);
  background: linear-gradient(180deg, rgba(21, 22, 26,1) var(--gradient-start), rgba(21, 22, 26,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ff0000",GradientType=1); 
}

.gradient-overlay {
  background: rgb(59,75,82);
  background: -moz-linear-gradient(0deg, rgba(59,75,82,0.8) 10%, rgba(255,0,0,0) 50%);
  background: -webkit-linear-gradient(0deg, rgba(59,75,82,0.8) 10%, rgba(255,0,0,0) 50%);
  background: linear-gradient(0deg, rgba(59,75,82,0.8) 10%, rgba(255,0,0,0) 50%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3b4b52",endColorstr="#ff0000",GradientType=1); 
}

.login-top-overlay {
  background: rgb(0,0,0);
  background: -moz-linear-gradient(180deg, rgba(0,0,0,0.8) 10%, rgba(255,0,0,0) 100%);
  background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.8) 10%, rgba(255,0,0,0) 100%);
  background: linear-gradient(180deg, rgba(0,0,0,0.8) 10%, rgba(255,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#ff0000",GradientType=1); 
}

.login-bottom-overlay {
  background: rgb(0,0,0);
  background: -moz-linear-gradient(0deg, rgba(0,0,0,0.8) 10%, rgba(255,0,0,0) 100%);
  background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.8) 10%, rgba(255,0,0,0) 100%);
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 10%, rgba(255,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#ff0000",GradientType=1); 
}

.benefitoverlay {
 background: rgb(179,23,53);
background: -moz-linear-gradient(319deg, rgba(179,23,53,0.2819328414959734) 0%, rgba(179,23,53,0) 40%);
background: -webkit-linear-gradient(319deg, rgba(179,23,53,0.2819328414959734) 0%, rgba(179,23,53,0) 40%);
background: linear-gradient(319deg, rgba(179,23,53,0.2819328414959734) 0%, rgba(179,23,53,0) 40%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b31735",endColorstr="#b31735",GradientType=1);  
}

.login-overlay {
  background: rgb(0,0,0);
  background: -moz-linear-gradient( rgba(0,0,0,0.8) 10%, rgba(255,0,0,0) 50%);
  background: -webkit-linear-gradient(rgba(0,0,0,0.8) 10%, rgba(255,0,0,0) 50%);
  background: linear-gradient(to center, rgba(0,0,0,0.8) 10%, rgba(255,0,0,0)f%);
  filter: microsoftradient end g
}

.car-overlay {
  background: rgb(255,255,255);
  background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(255,0,0,0) 100%);
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(255,0,0,0) 100%);
  background: linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(255,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ff0000",GradientType=1); 
}

lord-icon.active {
  --lord-icon-primary: #27272a;
  --lord-icon-secondary: #b31735;
}

:root.dark lord-icon.active {
  --lord-icon-primary: #f4f4f5;
  --lord-icon-secondary: #b31735;
}

body.no-scroll {
  overflow: hidden;
  color: #0c0d0f;
}

.slide-up {
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}

.slide-up.show {
  transform: translateY(0);
}

.swiper {
  width: 100%;
  height: 100%;
}
.swiper-wrapper {
  width: 100%;
  height: 100%;
}

.swiper-no-swiping {
  touch-action: none;
}

.swipergallery-preview {
  height: 80%;
  width: 100%;
}

.swipergallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.swipergallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}

.swipergallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}

.swiper-gallery .swiper-lazy-preloader {
  border-width: 1px;
}

.swiper-gallery .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-swiper-button {
  position: absolute;
  top: var(--swiper-navigation-top-offset,50%);
  width: calc(var(--swiper-navigation-size) / 1.5);
  height: calc(var(--swiper-navigation-size) / 1.5);
  margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b31735;
  background-color: rgba(255,255,255,.8);
  border-radius: 9999px;
  box-shadow: 0px 1px 7px rgba(0,0,0,0.5);
}
:root.dark .custom-swiper-button {
  background-color: rgba(0,0,0,.8);
}
.custom-swiper-button.swiper-button-disabled {
  display: none;
}

.custom-swiper-button.nextBtn {
  right: var(--swiper-navigation-sides-offset,5px);
  left: auto;
}

.custom-swiper-button.prevBtn {
  left: var(--swiper-navigation-sides-offset,5px);
  right: auto;
}

:root.dark .swiper-pagination {
  --swiper-pagination-bullet-inactive-color: #2f3235;
}

#drawer {
  transition: transform 0.5s ease-in-out;
}

#backdrop {
  transition: opacity 0.5s ease-in-out;
}

.translate-x-0 {
  transform: translateX(0%);
}

.-translate-x-full {
  transform: translateX(-100%);
}

.translate-x-full {
  transform: translateX(100%);
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

@media (max-width: 768px) {
  .scroll-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
  }

  .snap-section {
    scroll-snap-align: start;
    min-height: 100vh;      /* Ensure at least full viewport */
    overflow-y: auto;       /* Enable inner scroll */
  }
}