body {
    font-family: "Poppins", "sans-serif";
}
:root {
    --primary: #7402ff; 
     --footer: #7402ff; 
      --primary-hover:#7300ff;
      --light-primary: #e8e6ec;
    /* --primary: #0261ff;
    --footer: #0261ff;
    --primary-hover: #0261ff;
     */
    --secondary: #d1d1d1;
    --white: #fff;
    --black: #000;
}
[x-cloak] {
    display: none !important;
}
/* Chrome, Safari, Edge */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* light track */
}

::-webkit-scrollbar-thumb {
    background-color: var(--primary); /* or any color */
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-hover); /* darker on hover */
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
html,
body {
    /* overflow-x: hidden;
    overflow-y: auto; */
    height: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin; /* "auto" or "thin" */
    scrollbar-color: var(--primary) #f1f1f1; /* thumb and track */
}
.bg-primary {
    background-color: var(--primary) !important;
    &:hover {
        background-color: var(--primary-hover) !important;
    }
}
.text-primary {
    color: var(--primary) !important;

    &:hover {
        color: var(--primary-hover) !important;
    }
}
.bg-primary-footer {
    background-color: var(--footer) !important;
}

.container {
    width: 90%;
    margin: auto;
}
/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

@media (max-width: 1450px) {
    .container {
        width: 95%;
        
        margin: auto;
    }
}


/* Container for the navigation links */
.navigation-menu {
    display: flex;
    align-items: center;
    gap: 2rem;

    font-size: 1rem;
    margin-top: 10px;
}

/* Base styles for all navigation links */
.navigation-menu a {
    position: relative;
    text-decoration: none;
    color: var(--black);
    padding-bottom: 5px;
    transition: color 0.3s ease-in-out;
}
@media (max-width: 768px) {
    .navigation-menu {
        display: none;
    }
}

/* Create the underline using the ::after pseudo-element */
.navigation-menu a::after {
    content: ""; /* Pseudo-elements must have a content property */
    position: absolute;
    bottom: 0;
    left: 0;

    /* Underline dimensions and color */
    width: 100%;
    height: 2px;
    background-color: var(--primary); /* Your primary color */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-in-out;
}

/* --- Hover and Active States --- */

/* On hover, change the link's text color */
.navigation-menu a:hover {
    color: var(--primary); /* Your primary color */
}

/* On hover, scale the ::after pseudo-element to 100% width */
.navigation-menu a:hover::after {
    transform: scaleX(1);
}

/* Make the underline on the active link visible by default */
.navigation-menu a.active::after {
    transform: scaleX(1);
}

#resend-code.disabled {
    color: #9ca3af; /* A gray color, like Tailwind's gray-400 */
}

.custom-toast {
    padding: 0.7rem !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
    border-left-width: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: start !important;
}

/* Toast Message */
.custom-toast-message {
    margin: 0 !important;
}

/* Icon + Message Layout */
.custom-toast-content {
    display: flex;
    align-items: center;
    font-size: 1rem;
    text-align: left;
}

/* SVG Icon Size */
.custom-toast-content svg {
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
    margin-right: 0.5rem;
}

/* Close Button */
.custom-toast-close {
    margin-left: auto !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Toast Types */
.custom-toast-success {
    background: #f0fdf4 !important;
    border-left-color: #22c55e !important;
    color: #15803d !important;
}

.custom-toast-error {
    background: #fef2f2 !important;
    border-left-color: #ef4444 !important;
    color: #b91c1c !important;
}

.custom-toast-warning {
    background: #fefce8 !important;
    border-left-color: #eab308 !important;
    color: #a16207 !important;
}

.custom-toast-info {
    background: #dbeafe !important;
    border-left-color: #3b82f6 !important;
    color: #1e3a8a !important;
}

.custom-toast-notice {
    background: #f3f4f6 !important;
    border-left-color: #6b7280 !important;
    color: #374151 !important;
}
.error {
    color: red;
}
.text-primary svg circle {
    fill: var(--primary); /* your primary color */
    background-color: var(--primary);
}
.text-primary i {
    color: var(--primary); /* your primary color */
    background-color: var(--primary);
}


.thumbnail-image.active-thumbnail {
    border: 1px solid var(--primary);
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
    padding: 1px;
}

/* Custom styles for Slick Slider arrows and dots */
/* Simplified Slick Slider Styles */
.driver-review-slider {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
}


.slick

.review-slider .slick-slide {
    padding: 0 5px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.review-slider .slick-slide.slick-center {
    transform: scale(1.05) !important;
}

/* Add this to the end of resources/css/app.css */
@layer utilities {
  .animate-heartbeat {
    animation: heartbeat 0.6s ease-in-out;
  }
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.3);
  }
  30% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.15);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}





.review-slider .slick-slide > div:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.review-slider img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto;
}

.review-slider h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin-top: 1rem;
}

.review-slider .text-yellow-400 {
    font-size: 1.125rem;
    display: flex;
    justify-content: center;
    margin: 0.75rem 0;
}

.review-slider p.text-gray-600 {
    font-size: 0.875rem;
    line-height: 1.5;
    min-height: 4rem;
    color: #4b5563;
}

.review-slider p.text-gray-500 {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 1rem;
}

/* Arrow Styles */
/* Arrow Styles */
.custom-slick-arrow {
    z-index: 10;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px !important;
    height: 50px !important;
    background: #1f2937; /* dark gray bg */
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-slick-arrow:hover {
    background: #111827;
}

.slick-prev {
    left: -60px !important;
}
.slick-next {
    right: -60px !important;
}

/* remove old CSS arrow pseudo-elements */
.custom-slick-arrow::before {
    display: none !important;
}


.slick-next, .slick-prev {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 45px !important;
  height: 45px !important;
  padding: 2px !important;
  -webkit-transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
  transform: translate(0,-50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: 0;
  background: 0 0;
}

/* Dots Styles */
.slick-dots {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.slick-dots li {
    margin: 0 4px;
}

.slick-dots li button {
    width: 20px;
    height: 20px;
    background: transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.slick-dots li.slick-active button {
    background: var(--primary);
    transform: scale(1.25);
}

.slick-dots li button:before {
    display: none;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .custom-slick-arrow {
        width: 36px;
        height: 36px;
    }
   .custom-slick-arrow::before {
    display: none; /* disable CSS pseudo arrow */
}

    .slick-prev {
        left: -40px;
    }
    .slick-next {
        right: -40px;
    }
}

@media (max-width: 640px) {
    .review-slider .slick-slide > div {
        padding: 1rem;
    }
    .review-slider p.text-gray-600 {
        min-height: 3rem;
    }
}

.vehicle-description {
    & h1 {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    & h2 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    & p {
        font-size: 1rem;
        font-weight: 400;
        margin-bottom: 0.5rem;
    }
    & h3 {
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
}

.privacy-policy {
    & h2 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    & p {
        font-size: 1rem;
        font-weight: 400;
        margin-bottom: 0.5rem;
    }
    & h3 {
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    /* ul > li{
        list-style-type: disc;
    } */
}
.my-term-policy {
    & h2 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    & p {
        font-size: 1rem;
        font-weight: 400;
        margin-bottom: 0.5rem;
    }
    & h3 {
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
     /* ul > li{
        list-style-type: disc;
    } */
}
.recaptcha-wrapper {
    transform: scale(0.8); /* Adjust the scale as needed */
    transform-origin: 0 0; /* Ensures it scales from the top-left */
}

 #modal-container {
            transition: opacity 0.3s ease-in-out;
        }

.php-debug-bar {
    display: block !important;    /* Ensures it's not hidden by 'display: none' */
    z-index: 9999999 !important;  /* Puts it on top of almost any other element */
    visibility: visible !important; /* Ensures it's not hidden by 'visibility: hidden' */
    opacity: 1 !important;        /* Ensures it's not transparent */
}

#global-loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(23, 29, 41, 0.85); /* Dark, semi-transparent overlay */
    z-index: 9999;
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px); /* Awesome frosted glass effect */
    -webkit-backdrop-filter: blur(5px);
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The Car SVG */
.loader-car {
    width: 100px;
    height: 100px;
    animation: bounce 0.8s infinite ease-in-out;
}

/* The Road */
.loader-road {
    width: 150px;
    height: 10px;
    background-color: #444;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin-top: 15px;
    border: 2px solid #555;
}

/* The moving dashed lines on the road */
.road-lines {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 200%; /* Twice the width to create a seamless loop */
    background: repeating-linear-gradient(
        90deg,
        var(--primary), /* Taxi yellow lines */
        var(--primary) 15px,
        transparent 15px,
        transparent 30px
    );
    animation: move-lines 0.5s linear infinite;
}

/* The Text */
.loader-text {
    margin-top: 20px;
    color: #fff;
    font-family: 'Arial', sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(7, 102, 255, 0.5);
    animation: pulse-text 1.5s infinite ease-in-out;
}

/* =================================================
   ANIMATION KEYFRAMES
   ================================================= */

/* Car bouncing animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Road lines moving animation */
@keyframes move-lines {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-30px); /* Moves by the size of one pattern cycle */
    }
}

/* Text pulsing animation */
@keyframes pulse-text {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}
.svg-icon > svg{
width: 32px;
height: 32px;
}

 .hero-image-slider {
                width: 110%;
                max-width: 100%;
              
            }
            .hero-image-slider .slide {
                position: relative;
                width: 100%;
                aspect-ratio: 4/ 2.5;
            }
            .hero-image-slider .slide img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .hero-image-slider .slick-slide {
                opacity: 0 !important;
                transition: opacity 0.5s ease !important;
            }
            .hero-image-slider .slick-active {
                opacity: 1 !important;
            }
            .hero-image-slider .slick-dots {
                bottom: -10px;
            }
            .hero-image-slider .slick-dots li button:before {
                color: var(--primary);
                font-size: 12px;
            }
            .hero-image-slider .slick-dots li.slick-active button:before {
                color: var(--primary);
            }

            .vehicle-review-slider {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 0;
        }

        .vehicle-review-slider .owl-item {
            padding: 0 8px;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .vehicle-review-slider .owl-item.center {
            transform: scale(1.05) !important;
        }

        .vehicle-review-slider .owl-item > div:hover {
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .vehicle-review-slider img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto;
        }

        .vehicle-review-slider h3 {
            font-size: 1.125rem;
            font-weight: 600;
            color: #1f2937;
            margin-top: 1rem;
        }

        .vehicle-review-slider .text-yellow-400 {
            font-size: 1.125rem;
            display: flex;
            justify-content: center;
            margin: 0.75rem 0;
        }

        .vehicle-review-slider p.text-gray-600 {
            font-size: 0.875rem;
            line-height: 1.5;
            min-height: 4rem;
            color: #4b5563;
        }

        .vehicle-review-slider p.text-gray-500 {
            font-size: 0.75rem;
            color: #6b7280;
            margin-top: 1rem;
        }

        /* Custom Arrow Styles */
        .owl-nav .owl-prev,
        .owl-nav .owl-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px !important;
            height: 50px !important;
            background: rgba(255, 255, 255, 0.8) !important; /* White transparent background */
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            transition: background 0.3s ease;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .owl-nav .owl-prev:hover,
        .owl-nav .owl-next:hover {
            background: rgba(255, 255, 255, 1) !important; /* Fully opaque white on hover */
        }

        .owl-nav .owl-prev {
            left: -60px;
        }

        .owl-nav .owl-next {
            right: -60px;
        }

        /* Hide nested buttons */
        .owl-nav .owl-prev > button.owl-prev,
        .owl-nav .owl-next > button.owl-next {
            display: none !important; /* Hide the inner buttons */
        }

        /* Hide default Owl Carousel spans (if any) */
        .owl-nav .owl-prev span,
        .owl-nav .owl-next span {
            display: none;
        }

        /* SVG icons for arrows */
        .owl-nav .owl-prev::before {
            content: '';
            display: block;
            width: 30px;
            height: 30px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%237402ff" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>') no-repeat center;
            background-size: contain;
        }

        .owl-nav .owl-next::before {
            content: '';
            display: block;
            width: 30px;
            height: 30px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%237402ff" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>') no-repeat center;
            background-size: contain;
        }

        /* Dots Styles */
        .owl-dots {
            display: flex;
            justify-content: center;
            margin-top: 1.5rem;
        }

        .owl-dots .owl-dot {
            margin: 0 4px;
        }

        .owl-dots .owl-dot span {
            width: 20px;
            height: 20px;
            background: transparent;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            border-radius: 50%;
            transition: all 0.2s ease;
            display: block;
        }

        .owl-dots .owl-dot.active span {
            background: var(--primary);
            transform: scale(1.25);
        }

        /* Responsive Adjustments */
        @media (max-width: 1024px) {
            .owl-nav .owl-prev,
            .owl-nav .owl-next {
                width: 36px !important;
                height: 36px !important;
            }

            .owl-nav .owl-prev {
                left: -40px;
            }

            .owl-nav .owl-next {
                right: -40px;
            }
        }

        @media (max-width: 640px) {
            .vehicle-review-slider .owl-item > div {
                padding: 1rem;
            }

            .vehicle-review-slider p.text-gray-600 {
                min-height: 3rem;
            }

            .owl-nav {
                display: none; /* Hide arrows on mobile */
            }
        }