* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Manrope", serif;
}


.disabled-btn {
    pointer-events: none;
    opacity: 0.5;
}

.mobile-nav-toggle-btn button {
    background: white;
    padding: 20px;
    border-radius: 8px;
}

/** Heart Float Animation */
@keyframes heartFloat {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -100px);
    }
}

.heart-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: heartPop 0.6s ease-out forwards;
    pointer-events: none;
    width: 24px;
    height: 24px;
    z-index: 50;
    opacity: 0;
}

@keyframes heartPop {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

#headerFavCount {
    display: none;
}
/** Blink animation */
@keyframes blink {
    0%, 90% {
        d: path( "M10.0004 3.33325C13.5754 3.33325 16.5529 5.35742 18.8879 9.29492L19.0712 9.61075L19.1087 9.69409L19.1337 9.76325L19.1454 9.80909L19.157 9.87742L19.1662 9.96075V10.0524L19.1545 10.1449C19.1491 10.1759 19.1418 10.2065 19.1329 10.2366L19.1004 10.3266L19.0704 10.3891L19.057 10.4141C16.7537 14.4441 13.807 16.5641 10.2612 16.6633L10.0004 16.6666C6.33705 16.6666 3.30288 14.5424 0.943716 10.4133C0.871807 10.2874 0.833984 10.1449 0.833984 9.99992C0.833984 9.85494 0.871807 9.71247 0.943716 9.58659C3.30288 5.45742 6.33705 3.33325 10.0004 3.33325ZM10.0004 7.49992C9.33734 7.49992 8.70146 7.76331 8.23261 8.23215C7.76377 8.70099 7.50038 9.33688 7.50038 9.99992C7.50038 10.663 7.76377 11.2988 8.23261 11.7677C8.70146 12.2365 9.33734 12.4999 10.0004 12.4999C10.6634 12.4999 11.2993 12.2365 11.7681 11.7677C12.237 11.2988 12.5004 10.663 12.5004 9.99992C12.5004 9.33688 12.237 8.70099 11.7681 8.23215C11.2993 7.76331 10.6634 7.49992 10.0004 7.49992Z" );
    }

    91%, 100% {
        d: path("M2 10C5 7 15 7 18 10C15 13 5 13 2 10Z");
    }
}

.eye {
    animation: blink 2s infinite;
}

.icon-eye .eye {
    animation: blink 0.8s infinite;
}

[x-cloak] {
    display: none !important;
}
/** Heart Float Animation */

/*.header-top {
    top: -24px;
}*/

section.hero-section {
    position: relative;
    background-image: url("../assets/lambo-right.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    margin-top: -117px;
    height: 100vh;
}

section.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust opacity for softness */
    z-index: 1;
}

section.hero-section > * {
    position: relative;
    z-index: 2;
}


a.dd-ctm {
    display: flex !important;
    flex-direction: row !important;
}

div.all-dd-links {
    display: flex;
    flex-direction: column;
}

    div.all-dd-links a {
        color: #F59E0B;
    }

div.all-dd-links a:hover {
    color: black;
}

/*---------------- Header ----------------- */
.showNav {
    display: block;
}

/* Hide mobile menu by default */
#mobileMenu {
    display: none;
}

/* Show the mobile menu when the 'show' class is added */
#mobileMenu.showNav {
    display: block;
}

/*---------------- Header ----------------- */

/*---------------- testimonial--------------*/

button.material-symbols-outlined {
    font-family: "Material Icons Outlined", sans-serif;
    font-size: 32px; /* Adjust size as needed */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    background-color: transparent;
    border: none;
    color: #333; /* Set the icon color */
    background:transparent;
}

    button.material-symbols-outlined:hover {
        color: #000; /* Change color on hover if desired */
    }


/*---------------- testimonial --------------*/

/*---------------- Car Listing Slider & upper Section start --------------*/

/* NoUiSlider Custom Styles */
.noUi-connect {
    background: #e7000b !important;
}

.noUi-handle {
    background: #e7000b !important;
    border: none;
    box-shadow: none;
    border-radius: 50%;
    cursor: pointer;
    width: 18px !important;
    height: 18px !important;
    right: -9px !important;
    border: 3px solid whitesmoke !important;
    border-radius: 100% !important;
    cursor: default !important;
}

.noUi-horizontal {
    height: 8px !important;
}

    .noUi-horizontal .noUi-handle {
        top: -6px !important;
    }

.noUi-handle:before,
.noUi-handle:after {
    display: none !important;
}

.noUi-target {
    background: #e5e7eb !important;
    border: none;
    box-shadow: none;
    height: 2px;
}

.noUi-touch-area {
    background: #e7000b;
    border-radius: 100%;
    cursor: ew-resize;
}

/*---------------- Car Lisitng Slider & upper Section start --------------*/

/*---------------- Car Detail Slick Slider --------------*/

/* Car Detail Slider */
.slider-for {
    margin-bottom: 20px;
}

.slider-for img {
    width: 100%;
    height: auto;
}

.slider-nav img {
    padding: 5px;
    cursor: pointer;
}

.slick-slide {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.slick-current {
    opacity: 1;
}

/* Media Queries */

@media (max-width: 768px) {
    .testimonials-section swiper-container {
        width: 100%;
        height: 316px;
        border-radius: 32px;
    }
}

/* Mobile Filter Accordion Styles */
@media (max-width: 1024px) {
    .active {
        background-color: #f3f4f6;
    }

    button svg {
        transition: transform 0.2s ease-in-out;
    }

    .filter-section {
        transition: max-height 0.3s ease-out;
    }
}

/* Add this to your CSS */
.car-gallery {
    position: relative;
}

.slider-for {
    margin-bottom: 10px;
}

.slider-for .slick-slide {
    position: relative;
}

/* Navigation Arrows */
.slick-prev,
.slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
}

.slick-prev:before,
.slick-next:before {
    display: none;
}

.slick-prev:hover,
.slick-next:hover {
    background: rgba(255, 255, 255, 1);
}

.slick-prev {
    left: 20px;
}

.slick-next {
    right: 20px;
}

/* SVG styling */
.slick-prev svg,
.slick-next svg {
    width: 20px;
    height: 20px;
    color: #000;
}

.slick-prev:hover svg,
.slick-next:hover svg {
    color: #e7000b; /* Yellow color on hover */
}

/* Thumbnails */
.slider-nav .slick-slide {
    opacity: 0.5;
    transition: all 0.3s ease;
}

.slider-nav .slick-current {
    opacity: 1;
}

.slider-nav img {
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.slider-nav .slick-current img {
    border-color: #e7000b; /* yelllow border for active thumbnail */
}


/*---------------- Car Detail Slick Slider --------------*/


/*---------------- Car Detail Map --------------*/
.responsive-map {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

    .responsive-map iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }
/*---------------- Car Detail Map --------------*/

/*Car Detail Modals*/

#modalEl,
#modalTestDrive,
#modalReserve, .modal-reserve-overlay {
    /*display: none;*/
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

    #modalEl.show,
    #modalTestDrive.show,
    #modalReserve.show {
        display: flex;
        z-index: 9999;
    }

.disabled-btn {
    pointer-events: none; /* Prevent clicking */
    opacity: 0.5; /* Dimmed appearance */
    cursor: not-allowed; /* Show a "not allowed" cursor */
}

/*Car Detail Modals*/

/* Back to top */
#back-to-top {
    z-index: 8888;
}
/* Back to top */

/* Card AutoTrader (Good Price) */
.at_logo-img {
    max-height: 10px;
    width: auto;
}

.at_parent {
    width: 100%;
    margin: auto;
    padding: 8px 33px;
    border-color: #1fab00;
    color: #1fab00;
    border-width: 1px;
    border-style: solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    text-transform: capitalize;
}
/* Card AutoTrader (Good Price) */

/* Search Type */
a.mostPopularTab__itemImage {
    width: 100%;
    max-width: 130px;
    aspect-ratio: 1.52941176;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 10px;
}


.bodyTypeTab__itemImage {
    margin: 0px 0px 13px;
    max-width: 147px;
    height: auto;
}

.mostPopularTab__itemImage img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}

.searchTabs__itemLink {
    border: 2px solid #e7000b;
    padding: 3px 4px;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 21px;
    color: #31343b;
    border-radius: 5px;
    text-align: center;
}

/* Type of Seach Custom */
.searchtype-border {
    border: 2px solid #e7000b;
}

.radio-peer {
    display: none;
}

.radio-content {
    border: 1px solid #d1d5db;
    padding: 0.5rem 1rem;
    text-align: center;
    font-weight: 500;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
}

.radio-peer:checked + .radio-content {
    border-color: #e7000b;
    color: #e7000b;
}

.typesearch-color {
    background-color: #e7000b;
}

.typesearch-color:hover {
    background-color: #FCD34D;
}

.typesearch-text {
    color: #e7000b;
}
/* Type of Seach Custom */

.hero-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-image: url("../assets/images/hero-bg-main.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient( 90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.4) 100% );
}

.typesearch-icon {
    color: #e7000b !important;
}
/* Search Type */
/* Filters & Mobile Filters */
/* Search Type */
/* Request More & Schedule Test Model */
.Detail-Model-button {
    background-color: #e7000b;
}

.Detail-Model-button:hover {
    background-color: #92400E;
}

/* Request More & Schedule Test Model */
.filter-Dropdown:hover {
    background-color: #e7000b !important;
}

.Mobile-filter-btn {
    background-color: #e7000b;
}

.set-active-tab {
    background-color: #e7000b;
    color: white; 
}

.filter-tags {
    background-color: #e7000b;
}

/* Filters & Mobile Filters */



/* Booked Slot */

.booked-slot {
    color: white !important;
    opacity: 1;
    border: 1px solid #71717a;
    background-color: #6A9A23;
    background-image: repeating-linear-gradient( -45deg, transparent, transparent 5px, hsla(0, 0%, 100%, 0.025) 5px, hsla(0, 0%, 100%, 0.025) 10px );
    background-size: 200% 200%;
    animation: barberpole 15s linear infinite;
    cursor: not-allowed;
    position: relative;
}

@keyframes barberpole {
    to {
        background-position: 100% 100%;
    }
}

.appointment-thumb-container swiper-slide {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}



/*.booked-slot {
    background-color: #d1d5db;
    color: #9ca3af; 
    cursor: not-allowed;
    position: relative;
}*/

.pointer-events-none {
    pointer-events: none !important; /* disable click */
}

.disabled {
    opacity: 0.5; /* optional: make it look inactive */
}

.no-cursor {
    cursor: not-allowed !important;
}

/* Booked Slot */

/* Request More & Schedule Test Model */

.Detail-Model-button {
    background-color: #e7000b;
}

    .Detail-Model-button:hover {
        background-color: #c81e2f;
    }

/* Request More & Schedule Test Model */

/* Slots Colours for Modal */
.background-color-theme {
    background-color: #e7000b !important;
    border: 1px solid #e7000b !important;
}

.background-color-theme-hover:hover {
    background-color: #e7000b !important;
}

.todaycolor {
    border: 1px solid #e7000b !important;
}

.schedule-theme-colour {
    background-color: #22c55e !important;
}

    .schedule-theme-colour:hover {
        background-color: #16a34a !important;
    }

.peer:checked + .time-slot-color {
    background-color: #e7000b !important;
    color: #ffffff !important;
}

.booking-awaiting-img {
    background-color: #e7000b !important;
}

.loading-color {
    color: #e7000b !important;
}

.custom-nonclickable {
    cursor: none !important; /* Hide the cursor */
    pointer-events: none !important; /* Disable all mouse interactions */
    user-select: none !important; /* Prevent text selection */
    user-select: none !important;
}
/* Slots Colours for Modal */

/* Reserve Button Colour */
.reserve-button {
    background-color: #e7000b !important;
}

    .reserve-button:hover {
        background-color: #e7000bd6 !important;
    }
/* Reserve Button Colour */

/* Finance Logos */

.financeSwiper swiper-slide {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.finance-Logos-heading {
    color: #111827 !important;
    font-size: 1.875rem !important; /* Tailwind text-3xl = 30px */
    line-height: 2rem !important; /* Tailwind leading-8 = 32px */
    font-weight: 600 !important; /* Tailwind font-semibold */
    letter-spacing: -0.01562em !important; /* Tailwind tracking-tight */
    margin-top: 0.5rem !important; /* Tailwind mt-2 */
    text-align: center !important;
}

@media (min-width: 640px) { /* sm: */
    .finance-Logos-heading {
        font-size: 2.25rem !important; /* Tailwind sm:text-4xl = 36px */
        line-height: 2.5rem !important;
    }
}

@media (min-width: 768px) { /* md: */
    .finance-Logos-heading {
        font-size: 3rem !important; /* Tailwind md:text-5xl = 48px */
        line-height: 1 !important; /* Tailwind leading-none */
    }
}

.financeLogos {
    
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

    .financeLogos img {
        max-width: 170px;
        height: 80px;
        width: auto;
        object-fit: contain;
    }

/* Finance Logos */

/* Share & Print Advert */
.custom-advert {
    background-color: #e7000b !important;
    width: 100%;
}

    .custom-advert:hover {
        background-color: #e7000bd6 !important;
    }

.custom-main-advert {
    border: unset !important;
    margin-top: 0px !important;
    padding: 0px !important;
    display: flex;
    flex-wrap: wrap;
}

/* Share & Print Advert */

/* Stock Pagination */
.btn-pagination:hover {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #fff !important;
}

.btn-pagination-active {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #fff !important;
}

.btn-pagination-active:hover {
    background-color: #d97706 !important;
}
/* Stock Pagination */

.swiper-not-initialized {
    visibility: hidden;
}


/* Svg's of Three Top Features */
.three-top-features-bg {
    background-color: white;
}

.svg-three-top-features path {
    stroke: #e7000b;
}
/* Svg's of Three Top Features */

/* Sell your car */

/* UK Number Plater Font */
@font-face {
    font-family: "UKNumberPlate";
    src: url("../../assets/fonts/uknumberplate.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.font-ukNumberPlate {
    font-family: "UKNumberPlate";
}

#regPlateFreeCheck {
    background-color: #efd83e;
    background-image: url('../../assets/images/ukreginputback.svg');
    background-repeat: no-repeat;
    background-size: auto 100%, 100% auto;
    border: 2px solid black;
    border-radius: 10px;
    color: #404040;
    font-size: 32px;
    font-weight: 700;
    width: 300px;
    padding: 8px 0 5px;
    padding-left: 30px;
    text-align: center;
    text-transform: uppercase;
    font-family: "UKNumberPlate";
}

#mileageInput {
    background-color: #fff;
    border: 2px solid #eee;
    border-radius: 10px;
    color: #404040;
    font-size: 32px;
    font-weight: 700;
    max-width: 300px;
    padding: 12px 0px;
    text-align: center;
    text-transform: uppercase;
}

.mileageInput {
    background-color: #fff;
    border: 2px solid #eee;
    border-radius: 10px;
    color: #404040;
    font-size: 32px;
    font-weight: 700;
    max-width: 300px;
    padding: 12px 0px;
    text-align: center;
    text-transform: uppercase;
}

#regPlateFront {
    background-color: #fff;
    background-image: url('../../assets/images/UkRegInputFront.svg');
    background-repeat: no-repeat;
    background-size: auto 100%, 100% auto;
    border: 2px solid #eee;
    border-radius: 10px;
    color: #404040;
    font-size: 32px;
    font-weight: 700;
    max-width: 250px;
    padding: 8px 0 5px;
    padding-left: 30px;
    text-align: center;
    font-family: "UKNumberPlate";
}

@media (max-width: 768px) {

    #regPlateFront, #mileageInput, #regPlateFreeCheck {
        max-width: unset;
        width: 100%;
    }
}
/* Sell your car */

/* AA Cars Spacing */

.aacar-custom-p {
    margin-top: 0rem !important;
}

@media (min-width: 456px) {
    .aacar-custom {
        padding-top: 4rem !important;
        padding-bottom: 0rem !important;
    }
    .sell-your-car-custom {
        margin-top: 2rem !important;
    }
}

@media (max-width: 456px) {
    .aacar-custom {
        padding-top: 1rem !important;
        padding-bottom: 0rem !important;
    }
    .sellCarHeroBg {
        margin-top: 2rem !important;
    }
}

.aacars-custom-inner-p {
    padding-bottom: 0rem !important;
}


/* AA Cars Spacing */